body { 
	background-image: url(images/carbonfiber.jpg);
	background-repeat: repeat;
}

header {
    background-color:#000000;
    color:white;
    text-align:center;
    padding:5px;
    
}

footer {
	font-style: italic;
	font-weight: bold;
	font-size: .8em;
    background-color:darkgray;
    color:black;
    clear:both;
    text-align:center;
	padding: 20px 0px 0px 0px;	
}

footer a:link{
	color: blue;
}

footer a:visited {
	color: #000000
}

footer a:hover {
	color: #F5F5DC;
}

footer a:active {
	color: #DarkBlue;
}

img {
	border-style: none;
}

h2 {
	Margin-top: 0px;
	padding-top: 0px;
}

#wrapper {
	margin: auto;
	width: 80%;
	background-color: lightgray;
	min-width: 960px;
	box-shadow: 15px 15px 10px #2E0000;
}

nav {
    line-height:30px;
    background-color:lightgray;
	width: 170px;
    float:left;
    padding:0px;	  
	margin:0px ; 
	letter-spacing: .1em;
}

nav ul {
	list-style-image:none;
	list-style-type: none;
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	text-align: center;
	text-transform: uppercase;
}

nav a {
	text-decoration:none;
}

#section {
	width: 100%;
    background-color: lightgray;
    padding:.0px;
	display: inline-block;
}
#section2 {
	width: 85%;
    padding:10px 10px; 
	margin: 00px;

}

ul#contentlist {
	list-style-image: url(images/363marker.png);
}

nav a:hover, nav a:active {
	display: block;
    background-color: red;
	color: white;
	
}

.companyname {
	font-style: Italic;
	font-family: "Courier";
	margin:0px;
	padding:0px;
	Color:red;
}

#content {
	padding: 0px 0px 5px 0px;
	margin-left: 170px;
	background-color: #F5F5DC;
}

.imagelayout {
	display: inline-block;
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 65px;
	vertical-align: text-bottom;
}

#projecttitle {
	background-color: Darkgray
}

#gallery li {
	display: inline;  padding: 10px;
}

#gallery img {
	width: 175px;
	height: 130px;
}

h3 {
	float: none;
}

/*Styles for fuzz overlay & message box*/
 #fuzz{ position:absolute; top:0; left:0; width:100%; z-index:100; background: url('images/carbonfiber.jpg'); Opacity: .8; display:none; text-align:left; }
 

   /*Message box, positioned in dead center of browser*/
   .picbox{ position:absolute; border-radius: 5px; width:80%; height:80%; z-index:200; border:5px solid red; background: #FFF; margin: auto; left:0; right:0; top:0; bottom:0; display: none; text-align: center; overflow: auto; }
		.picbox img {border:none; padding: 20px 5px 5px; margin:5px; width:auto; height: 85%; float: left;}
		
   .picbox1{ position:absolute; border-radius: 5px; width:80%; height:80%; z-index:200; border:5px solid red; background: #FFF; margin: auto; left:0; right:0; top:0; bottom:0; display: none; text-align: center; overflow: auto; }
		.picbox1 img {border:none; margin:5px; padding: 20px 5px 5px; width:auto; height: 85%; float: left}
 
	.picbox2{ position:absolute; border-radius: 5px; width:80%; height:80%; z-index:200; border:5px solid red; background: #FFF; margin: auto; left:0; right:0; top:0; bottom:0; display: none; text-align: center; overflow: auto;}
		.picbox2 img {border:none; margin:5px; padding: 20px 5px 5px; width: auto; height: 85%; float: left}
 
      /*The "X" in the upper right corner of msgbox*/
      .close{ top:0px; margin-right: 15px; float:right; }
	
label {
	float: left;
	display: block;
	text-align: left;
	width: 120px;
	padding-right: 10px;
}
	
input {
	display: block;
	margin-bottom: 20px;
}    

textarea {
	display: block;
	margin-bottom: 20px;
}
#Location {
	overflow:hidden;
	width: 450px;
	height: 300px;
}

#gmap_canvas{
	height: 300px;
	width: 450px;
}

#gmap_canvas img{
	max-width:none!important;	
	background:none!important
}
	 
header, hgroup, nav, footer, section, article,
figure, figcaption, aside { display: block; }

@media only screen and (max-width: 768px) {
	#wrapper {
		min-width: 450px;
		width: auto;
	}
	
	#content {
	padding: 0px 0px 5px 0px;
	margin-left: 0px;
	}

	nav {
		float: none;
		width: auto;
		padding: 0px;
		
	}
	
	nav  li {
		display: inline;
		padding: 0px .75em
	}

	nav a:hover, nav a:active {
	display: inline;	
}

	.imagelayout {
		display: inline-block;
		width: 30%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		padding: 10px 0px 10px 10px;
		vertical-align: text-bottom;
	}
	
	#Location {
		overflow:hidden;
		width: 350px;
		height: 200px;
	}

	#gmap_canvas{
		height: 200px;
		width: 350px;
	}

}

@media only screen and (max-width: 360px) {
	#wrapper {
		min-width: 0px;
		width: auto;
	}
	
	nav  li {
		display: block;
		padding: 0px .75em
	}
	
	.imagelayout {
		display: block;
		width: auto;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		padding: 5px 0px;
		vertical-align: text-bottom;
		text-align:center;
	}
	label {
		float: none;
		text-align: left;
	}
	
	#Location {
		overflow:hidden;
		width: 250px;
		height: 200px;
	}

	#gmap_canvas{
		height: 200px;
		width: 250px;
	}
	
}