@import "style/reset.css";

/*Utility Styles************************/
.alignright {
	float:right;
}
.alignleft {
	float:left;
}
.aligncenter {
	display:block;
	margin:0 auto;
}
.clear{
	clear:both;
}

/*Utility Styles************************/
.lightBlue{
	color: rgb(204,235,242);
}
.lightGreen{
	color: rgb(197,217,45);
}
.green{
	color: rgb(113,176,67);
}
.blue{
	color: rgb(101,201,211);
}
.darkBlue{
	color: rgb(54,114,185);
}
.burntOrange{
	color: rgb(164,76,14);
}


/******   General Styles   *************************************/
body{
	font-family: Helvetica, Arial, "MS Trebuchet", sans-serif;
	background-color:rgb(204,235,242);
	background: url(images/backgroundPattern.jpg) repeat fixed;
	
}

#outerWrapper {
	width:1060px;
	margin:0 auto;
	background:url(images/blueCirclesBG.png) no-repeat 690px -120px;
}

#wrapper{
	width:960px;
	margin:0 auto;
}


/******   Header Styles   *************************************/
#headSpace{
	width:960px;
	height:20px;
}

#header {
	width:960px;
	height:120px;
	margin:0 0 25px 0;
	background: url(images/headerBG.png) no-repeat 0 0;
	
	-moz-box-shadow: 8px 8px 20px #444; /* FF3.5+ */
	-webkit-box-shadow: 8px 8px 20px #444; /* Saf3.0+, Chrome */
	box-shadow: 8px 8px 20px #444; /* Opera 10.5, IE 9.0 */

}

#header h1.logo{
	width:314px;
	height:108px;
	margin:12px 24px 0 28px;
	display:block;
	float:left;
}

#header h2.subHead{
	display:block;
	width:215px;
	height:42px;
	margin:45px 0 0 0;
	float:left;
	text-indent:-9999px;
	background: url(images/logoSubHead.gif) no-repeat;
}

#header a.contactLink{
	display:block;
	width:87px;
	height:18px;
	margin:34px 0 0 240px;
	float:left;
	
	font-size:24px;
	text-decoration:none;
	color:black;
	font-weight: 200;
}

#header a.contactLink:hover{
	color: rgb(164,76,14);
}

/******   Navigation Styles   *************************************/
#navigation {
	width:955px;
	height:230px;
	padding:0 0 0 5px;
}

#navigation div.navBox{
	display:block;
	float:left;
	width:220px;
	height:220px;
	border: 5px solid #fff;
	margin:0 10px 0 0;
	line-height:0;
	overflow:hidden;
	
	-moz-box-shadow: 8px 8px 20px #444; /* FF3.5+ */
	-webkit-box-shadow: 8px 8px 20px #444; /* Saf3.0+, Chrome */
	box-shadow: 8px 8px 20px #444; /* Opera 10.5, IE 9.0 */
}

#navigation div.navBtn{
	margin:190px 0 0 0;
}


#navigation div.last{
	margin:0;
}

#navAbout{
	background: #fff url(images/menuFrankenstein.jpg) no-repeat;
}

#navWork{
	background: #fff url(images/menuLunchBox.jpg) no-repeat;
}

#navCapabilities{
	background: #fff url(images/menuDucks.jpg) no-repeat;
}

#navPortfolio{
	background: #fff url(images/menuCar.jpg) no-repeat;
}

#navigation div.navList{
	width:200px;
	height:170px;
	padding:10px;
	line-height:30px;
	background: rgb(255, 255, 255);/* Fallback for web browsers that doesn't support RGBa */
	background: rgba(255, 255, 255, 0.8); /* RGBa with 0.6 opacity */
	
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)";
	
}



#navigation div.navList ul li{
	font-size: 18px;
	//padding:0 0 20px 0;
}

#navigation div.navList a{
	color:#000;
	text-decoration:none;
}

#navigation div.navList a:hover{
	color:rgb(164,76,14);
}

/******   Content Styles   *************************************/
#page{
	margin:25px 0 0 0;
	padding:25px 0;
	background:#fff;
	
	-moz-box-shadow: 8px 8px 20px #444; /* FF3.5+ */
	-webkit-box-shadow: 8px 8px 20px #444; /* Saf3.0+, Chrome */
	box-shadow: 8px 8px 20px #444; /* Opera 10.5, IE 9.0 */
}

#content{
	width:400px;
	padding:0 10px 0 50px;
	float:left;
}

#portfolioContent{
	width:600px;
	float:left;
}

#content h2{
	font-size:24px;
	padding:0 0 25px 0;
}

#content h3{
	font-size:18px;
	font-weight: normal;
	padding:0 0 16px 0;
	color: rgb(54,114,185);
}

#content p{
	font-size:16px;
	line-height:20px;
	padding:0 0 25px 0;
}

#content ul{
	font-size:19px;
	padding:0 0 15px 0;
}

#content ul li{
	margin:0 0 10px 0;
}

#content ul.normalList{
	font-size:16px;
	line-height:20px;
	list-style-type: disc;
	margin:0 0 0 10px;
}
#content ul.normalList li{
	margin: 0 0 0 20px;
	padding:0 0 10px 0;
}

#content ol.normalList{
	font-size:16px;
	line-height:20px;
	list-style-type: decimal;
	margin:0 0 0 10px;
}
#content ol.normalList li{
	margin: 0 0 0 20px;
	padding:0 0 15px 0;
}

#fullPage p{
	display:block;
	width:225px;
	height:150px;
	padding:7px;
	float:left;
	text-align: center;
	
}

#fullPage p img{
	vertical-align: 50%
	
}

#fullPage h2{
	font-size:24px;
	padding:0 0 25px 20px;
}

#portfolioContent{
	width:600px;
	float:left;
	margin:0 60px;
}

#content form.contactForm p{
	padding:0 0 15px 0;
}

#content form.contactForm label.textLabel{
	display:block;
	float:left;
	width:120px;
}

#content form.contactForm input.textLine{
	display:block;
	width:250px;
	
}

/******   Side Bar Styles   *************************************/
#sideBar{
	width:400px;
	padding:0 10px 0 50px;
	float:left;
}

#sideBar div.sideBarGraphic{
	margin:0 0 25px 0;
	line-height:20px;
}

#sideBar p{
	font-size:16px;
	padding:0 0 25px 0;
	line-height:20px;
}

#portfolioSideBar{
	width:220px;
	float:left;
	padding:0 0 0 0;
}

#portfolioSideBar ul li{
	display:block;
	width:100px;
	height:100px;
	padding:0 0 10px 0;
	float:left;
}

#portfolioSideBar ul li.leftCol{
	padding:0 20px 10px 0;
}


/******   Footer Styles   *************************************/
#footer{
	clear:both;
	margin:25px 0 20px 0;
	padding:25px 0;
	background:#fff;
	-moz-border-radius-bottomleft:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomright:20px;
	-webkit-border-bottom-right-radius:20px;
	
	-moz-box-shadow: 8px 8px 20px #444; /* FF3.5+ */
	-webkit-box-shadow: 8px 8px 20px #444; /* Saf3.0+, Chrome */
	box-shadow: 8px 8px 20px #444; /* Opera 10.5, IE 9.0 */
	
}
#footer p{
	display:block;
	width:530px;
	padding:0 0 0 50px;
	float:left;
	font-size:16px;
	line-height:20px;	
}

#footer ul{
	padding:0 50px 0 0;
}

#footer ul li{
	text-align:right;
	font-size:16px;
	line-height:20px;	
}

#footer a{
	text-decoration:none;
	color:#000;
}

#footer a:hover{
	color: rgb(164,76,14);
}