/* Remove all default margins and padding, so all browsers are consistent (well.... "less inconsistent", heh) */
* 
{
    margin:0;
    padding:0;
	font-family: Calibri, Georgia, "Times New Roman", Times, serif;
	border-collapse: collapse;
}
html
{
	height:100%;
	min-width:820px;
}

body
{
	overflow-x: hidden;
	color:black;
	height:100%;
	min-width:820px;
	background-color:white;
}
@media (max-width: 820px) {
body
{
	overflow: scroll;
	overflow-x: scroll;
}}
h1
{
	margin: 0px 10px 5px 10px;
	font-size:115%;
}
h2
{
	margin: 0px 10px 5px 0px;
	font-size:120%;
}
h3
{
	margin: 0px 10px 5px 0px;
	font-size:115%;
}
h4
{
	margin: 5px 5px 5px 0px;
	font-size:110%;
}
h5
{
	margin: 5px 5px 5px 0px;
	font-size:105%;
}
#leftgrad
{
	z-index:-1;
	position:absolute;
	height:100%;
	left:0px;
    width:200px;
    height:100%;
	background-image: url(../images/gradientleft.png);
	background-repeat:repeat-y;
}
#rightgrad
{
	z-index:-1;
	position:absolute;
	height:100%;
	width:100%;
	left:1px;
    height:100%;
	background-position:right;
	background-image: url(../images/gradientright.png);
	background-repeat:repeat-y;
}
#wrapper, #header, #footer
{
	min-width:820px;
	max-width:100%;
	width:100%;
}
#wrapper
{
	float:left;
	margin-bottom:-21px;
	height:auto;
	position:relative;
	min-height:100%;
}
#columns
{
	display:table;
	width:100%;
	padding-bottom:30px;
}
#centercolumn ul
{
	padding-left:20px;
}
#centercolumn a, #leftcolumn a
{
	color:black;
}
#columns a:hover
{
	color:blue;
}
#rightsection
{
	display:table-cell;
	padding-bottom:20px;
}
/* Header */
#header
{
	top:0px;
	width:100%;
	border:1px solid black;
	background-color:black;
	color:white;
}
#headerlogo
{
	overflow:hidden;
	border-bottom:1px solid black;
	background-color:black;
}
#headerlogo img
{
	height:70px;
}
#header h1
{
	color:white;
	font-size:40px;
	position:absolute;
	margin:0;
	padding:0;
	margin-top:auto;
	margin-bottom:auto;
	left:1%;
}
#headermenu
{
	height:40px;
	background-color:black;
	border-bottom: solid 1px White;
	border-top: solid 1px White;
	overflow:hidden;
}
#headermenu li
{
    background-color:LightBlue;
    float:left;
    list-style-type:none; 
}
#headermenu a
{
	text-align:center;
	width:240px;
	height:40px;
	overflow:hidden;
	border-right: dotted 1px White;
    display: block;
    line-height: 40px;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 21px;
    color: Ivory;
	background-image: url(../images/menuitemimagestrip.png);
	background-position:0px 0px;
}
#headermenu li:last-child
{
	width:96px;
	height:40px;
	background-image: url(../images/menugradient.png);
}
#headermenu a:hover
{
	text-align:center;
	width:240px;
	height:40px;
	overflow:hidden;
    color: White;
    font-weight:bold;
	background-image: url(../images/menuitemimagestrip.png);
	background-position:0px -40px;
}
#stackexchange
{
	border:black 1px solid;
	right:5px;
	top:5px;
	position:absolute;
}
#stackexchange a, #stackexchange img
{
	border:none;
	border-style:none;
}
/* Footer */
#footer
{
	z-index:1;
	clear:both;
	border-top:dashed 1px lightgrey;
	font-size:90%;
	position:relative;
	height:20px;
	width:100%;
	background-color:grey;
	border-left:1px solid black;
	border-right:1px solid black;
}
#footer p
{
	margin-left:5px;
	font-style:oblique;
	color:white;
}
#footer a
{
	color:white;
	text-decoration:underline;
	font-style:oblique;
}
#footer a:hover
{
	color:blue;
	text-decoration:underline;
}

#leftcolumn, #rightcolumn,#centercolumn
{
	height:100%;
	position:relative;
	margin-top:10px;
	padding-bottom:20px;
}	

#leftcolumn
{
	display:table-cell;
    width:200px;
    height:100%;
	padding-left:10px;
}
#linksmenu li
{
	font-size:80%;
    list-style-type:none;
}
#linksmenu a
{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 15px;
    color:black;
    text-decoration:none;
}
#linksmenu a:hover
{
	color:blue;
	text-decoration:underline;
}


#centercolumn
{
	margin-right:270px;
    position:relative;

}

#projectdetail
{
	float:left;
	position:relative;
	margin:5px;
	padding:0px 10px 10px 10px;
	height:100%;
	border:dotted 2px gray;
	min-height:517px;
	width:95%;
}
.projectdetailimage
{
	float:left;
	display:none;
	margin-left:10px;
	max-width:300px;
	max-height:200px;
}
#projectdetailimage1
{
	float:left;
	display:block;
	margin-left:0px;
}
/* CSS3 Compliant browsers will display an appropriate number of images, based on screen width.*/
@media (min-width: 1100px) {
#projectdetailimage2
{
	display:block;
}}
@media (min-width: 1400px) {
#projectdetailimage3
{
	display:block;
}}
@media (min-width: 1720px) {
#projectdetailimage4
{
	display:block;
}}
#projectdetailimage1
{
	float:left;
}
#productdetail p
{
	margin-top:10px;
	clear:both;
}

#rightcolumn
{
	float:right;
	width:260px;
}
#centercolumn .projectssection
{
	margin-right:10px;
	margin-bottom:10px;
}
.projectssection h4
{
	color:black;
}
.projectssection
{
	margin-top:5px;
    width:250px;
    height:125px;
    float:left;
    background-color:LightBlue;
	font-size:80%;
    border:dotted 2px gray;
	position:relative;
	color:black;
}
.projectssection h4
{
	font-size:110%;
	margin:0;
	padding:0;
}
.projectssection img
{
    float:left;
	padding-right:5px;
	width:125px;
	height:125px;
}
.projectssection a
{
    position:absolute;
	bottom:5px;
	color:black;
}
.projectssection a:hover
{
	color:blue;
}