/* 
TABLE OF CONTENTS FOR CSS FILE
	- Headers
	- Navigation
	- Home Page
	- General Styling
	- Links
	- Tables
*/

@import url("reset.css");

body {
	background-color: #ccc;
	padding: 2em;
	font: 62.5% verdana,arial,sans-serif;
	}

#container {
	position: relative;
	height: auto;
	width: 1000px;
	margin: 0 auto;
	border: 1px solid #2c2828;
	}
	
	
	
/*		BEGIN HEADERS
--------------------------------------
*/

#name h1 {color: #04285a;}
	
#companyName  {color: #406590;}

#activePageStrip h2 {
	padding: .3em 2.5em 0 0;
	text-align: right;
	font-size: 300%;
	font-weight: 100;
	color: #fff;
	}

#innerContent h4 {
	font: bold 200% times-new-roman,serif;
	margin: 1em 0 .7em 0;
	color: #5dbba4;
	}
	
	#about #innerContent h4 {margin-bottom: .2em;}




/*		END HEADERS
--------------------------------------
*/

/*		BEGIN NAVIGATION
--------------------------------------
*/


#globalNav {
	position: absolute;
	left: 620px;
	top: 180px;
	}
	
		#globalNav li  {
			height: 32px;
			width: 231px;
			margin: 0 0 15px 0;
			}

		#globalNav li a {
			display: block;
			height: 32px;
			width: 231px;
			}

		#globalNav  span, #subGlobalNav span {
			display: none;
			}
			
		#globalNav .home-active {
			background: url(../graphics-images/menu.png) no-repeat top left;
			}
			
		#globalNav .portfolio-inactive a  {
			background: url(../graphics-images/menu.png) no-repeat 0 -185px;
			}
			
			#globalNav .portfolio-inactive a:hover {
				background: url(../graphics-images/menu.png) no-repeat 0 -148px;
				}
			
		#globalNav .about-inactive  {
			background: url(../graphics-images/menu.png) no-repeat 0 -296px;
			}
			
			#globalNav .about-inactive a:hover{
				background: url(../graphics-images/menu.png) no-repeat 0 -259px;
				}
			
		#globalNav .contact-inactive  {
			background: url(../graphics-images/menu.png) no-repeat 0 -407px;
			}
			
			#globalNav .contact-inactive a:hover {
				background: url(../graphics-images/menu.png) no-repeat 0 -370px;
				}

#subGlobalNav {
	position: absolute;
	top: 20em;
	left: 4em;
	}

		#subGlobalNav li {
			float: left;
			margin-right: 22px;
			text-align: left;
			}
			
		#subGlobalNav li a {
			display: block;
			height: 13px;
			}
			
			/* Home */
				#subGlobalNav .subHome-inactive {
					background: url(../graphics-images/subNav.png) no-repeat 0 0;
					width: 5em;
					height: 13px;
					}
			
				#subGlobalNav .subHome-inactive a:hover {
					background: url(../graphics-images/subNav.png) no-repeat 0 -13px;
					width: 5em;
					height: 13px;
					}
			
			/* Portfolio */
				#subGlobalNav .subPortfolio-inactive {
					background: url(../graphics-images/subNav.png) no-repeat 0 -26px;
					width: 7em;
					height: 15px;
					}
				
				#subGlobalNav .subPortfolio-active {
					background: url(../graphics-images/subNav.png) no-repeat 0 -56px;
					height: 26px;
					width: 7em;
					}
				
				#subGlobalNav .subPortfolio-inactive a:hover {
					background: url(../graphics-images/subNav.png) no-repeat 0 -41px;
					height: 15px;
					}
			
			/* About Me */
				#subGlobalNav .subAbout-inactive {
					background: url(../graphics-images/subNav.png) no-repeat 0 -82px;
					width: 8em;
					height: 16px;
					}
				
				#subGlobalNav .subAbout-active {
					background: url(../graphics-images/subNav.png) no-repeat 0 -114px;
					height: 27px;
					width: 8em;
					}
				
				#subGlobalNav .subAbout-inactive a:hover {
					background: url(../graphics-images/subNav.png) no-repeat 0 -98px;
					height: 16px;
					}
				
			/* Contact Information */
				#subGlobalNav .subContact-inactive {
					background: url(../graphics-images/subNav.png) no-repeat 0 -141px;
					width: 11em;
					height: 15px;
					}
				
				#subGlobalNav .subContact-active {
					background: url(../graphics-images/subNav.png) no-repeat 0 -171px;
					width: 11em;
					height: 26px;
					}
				
				#subGlobalNav .subContact-inactive a:hover {
					background: url(../graphics-images/subNav.png) no-repeat 0 -156px;
					height: 15px;
					}

#localNav {
	margin: .5em 0 0 3em;
	}

#localNav li {
	margin: 0 0 .6em 0;
	padding: 0 0 .6em .3em;
	font-size: 140%;
	color: #fff;
	font-weight: bold;
	}
	
.navBorderBottom {border-bottom: 1px solid #2b497b;}

#localNav li.activePage {
	font-weight: normal;
	color: #808080;
	}

/*  This makes the logo in the header of each page 'clickable'  */
#logoLink {
	position: absolute;
	top: 10px;
	left: 30px;
	width: 223px;
	height: 136px;
	}


	
/*		END NAVIGATION
--------------------------------------
*/
	

/*		BEGIN HOME PAGE
--------------------------------------
*/

#home #container{
	background: url(../graphics-images/bridgeBackground.jpg) no-repeat;
	height: 1240px;
	}
	
#home #copyright {
	position: absolute;
	bottom: 25px;
	right: 35px;
	color: #000;
	}

/*		END HOME PAGE
--------------------------------------
*/


/*		BEGIN GENERAL STYLING
--------------------------------------
*/

#header {
	height: 237px;
	width: 1000px;
	}
	
	#work #header {
		background: url(../graphics-images/headers.jpg) no-repeat 0 0;
		}
		
	#about #header {
		background: url(../graphics-images/headers.jpg) no-repeat 0 -238px;
		}
	
	#contact #header {
		background: url(../graphics-images/headers.jpg) no-repeat 0 -476px;
		}
	
#activePageStrip {
	height: 58px;
	background-color: #435168;
	}
	
#content {
	position: relative;
	background-color: #152d55;
	padding: 3em;
	}
	
	#content p, #content th, #content td {
		font-size: 120%;
		line-height: 1.7;
		color: #fff;
		}
	
	#work #content {min-height: 45em;}
	
	

#innerContent {
	width: 57em;
	padding: 5em 0 5em 7em;
	}
		
		#work #innerContent {padding-top: 3em;}
		
		#innerContent p {
			margin: 0 0 1.5em 0;
			}
			
		.graphicDesign #innerContent div {
			clear: both;
			}
			
		.graphicDesign #innerContent img {margin-bottom: 1em;}

#redHorizLine {
	position: absolute;
	top: 37em;
	left: 4em;
	width: 65em;
	border-top: 1px solid #ff6e6e;
	}
	
#sidebar {
	position: absolute;
	top: 10em;
	right: 0;
	width: 25em;
	}
	
#redVertLine, #redVertLine2 {
	position: absolute;
	top: 32.5em;
	left: 7em;
	height: 45em;
	border-left: 1px solid #ff6e6e;
	}
	
#redVertLine2 {
	height: 26em;
	}
	
.removeTitle {display: none;}

#webTitle, #graphicTitle, #uxTitle {
	background: url(../graphics-images/work_localNav.gif) no-repeat 0 0;
	width: 15em;
	height: 3.5em;
	margin: .5em 0 0 5em;
	}
	
	#graphicTitle {
		background-position: -18em 0;
		width: 20em;
		}
	
	#uxTitle {
		background-position: -38.5em 0;
		width: 30em;
		}
	
#localNavArrow_1, #localNavArrow_2, #localNavArrow_3 {
	background: url(../graphics-images/localNavArrow.gif) 0 0 no-repeat;
	position: absolute;
	top: 7px;
	right: 220px;
	width: 14px;
	height: 15px;
	}
	
	#localNavArrow_2 {
		top: 41px;
		}
		
	#localNavArrow_3 {
		top: 76px;
		}
		
.definition {border-bottom: 1px dotted #fff;}

.firstWords {
	font-weight: bold;
	color: #ff6e6e;
	}

/*		END GENERAL STYLING
--------------------------------------
*/


/*		BEGIN LINKS
--------------------------------------
*/

#content a:link, #content a:visited {
	color: #99c1fc;
	text-decoration: none;
	}
	
#content a:hover, #content a:active {
	color: #99c1fc;
	text-decoration: underline;
	}

#localNav a:link, #localNav a:visited {
	color: #fff;
	}
	
#localNav a:hover, #localNav a:active {
	color: #79bd93;
	text-decoration: none;
	}
	
#exampleData div {
	float: left;
	/*width: 40%;*/
	/*height: 25em;*/
	margin-right: 6em;
	}
	
#work ol {
	list-style: decimal;
	color: #fff;
	margin: 0 0 0 2em;
	font-size: 130%;
	}
	
	#work ol li {margin-bottom: .5em;}

/*		END LINKS
--------------------------------------
*/


/*		BEGIN TABLES
--------------------------------------
*/

#contact #innerContent th {
	padding: 1em 2em;
	}


/*		END TABLES
--------------------------------------
*/

/*		BEGIN IMAGES
--------------------------------------
*/

#exampleData img {border: 2px solid #edc893;}

/*		END IMAGES
--------------------------------------
*/