/*************** Reset ***************/
/*************** Reset - Block Elements ***************/
* {margin:0; padding:0; font-size:100%;}
p,blockquote,ul,ol,dl,h1,h2,h3,h4,h5,h6 {font-weight:normal; font-style:normal;}
ul,dl {list-style-type:none;}
ol {list-style-type:decimal;}
pre {white-space:pre;}
img,fieldset {border:0;}
label {cursor:pointer;}
input {outline:none;}

/*************** Reset - Table Elements ***************/
table,th,td,caption,tbody,thead,tfoot {margin:0; padding:0;}
table {border-spacing:0; border-collapse:collapse; text-indent:0;}
th {text-align:center; vertical-align:middle; font-weight:bold;}
td {text-align:left; vertical-align:top;}
caption {text-align:center; vertical-align:middle;}
tbody,thead,tfoot {vertical-align:middle;}

/*************** Reset - Inline Elements ***************/
strong {font-weight:bold;}
cite,em,var,dfn {font-style:italic;}
code,kbd,samp {font-family:monospace;}
ins {text-decoration:underline;}
del {text-decoration:line-through;}
sub {vertical-align:-0.25em; font-size:smaller; line-height:normal;}
sup {vertical-align:0.5em; font-size:smaller; line-height:normal;}
abbr[title], acronym[title] {border-bottom:dotted 1px;}

/*************** helper classes ***************/
*.floatLeft {float:left; display:inline;}
*.floatRight {float:right;}
*.clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}/* Hack for float clearing - add this class to the parent container surrounding the floats to be cleared */
*.clearBoth {clear:both;}
*.clearLeft {clear:left;}
*.clearRight {clear:right;}

*.static {position:static;}
*.relative {position:relative;}

*.center {text-align:center;}
*.left {text-align:left;}
*.right {text-align:right;}
*.top {vertical-align:top;}
*.middle {vertical-align:middle;}
*.bottom {vertical-align:bottom;}

*.bold {font-weight:bold;}
*.italic {font-style:italic;}

*.hr {margin:5px auto; border-top:none; border-bottom:1px solid #eee9d4;}
*.hr hr {display:none;}/* These two hr rules make for cross-browser consistent hr display - use <div class="hr"><hr /></div> */

/*************** color pallet ***************/
/*
#a7bb3a - light green
#667e38 - dark green
#c8872b - orange
#2c77a3 - blue
#cfcfcf - lightest gray
#9c9c9c - med-light gray
#696969 - med-dark gray
#363636 - dark gray
*/

/*************** Framework ***************/
body {
	min-width:950px; /* fixes bug for older versions of Mozilla & Netscape in order to center page */
	text-align:center; /* centers page for IE */
	color:#9C9C9C;
  background:#fff url(/public/images/bg_main_gradient.png) repeat-x top;
	font:normal 80% Arial,Helvetica,Verdana,Sans-serif;
}
#viewWrap {
	width:100%; /* width & height rules for Safari 3 */
	height:100%;
	margin:0 auto;
	border-top:5px solid #C8872A;
}
#viewWrap img {margin:0 auto;} /* for page_top.png */
#pageWrap {
  width:950px;
  margin:0 auto;
  background:#fff url(/public/images/bg_footer_hill.gif) no-repeat bottom;
	text-align:left; /* to override the text-align:center rule for the body tag, which centers the page for IE */
}

/*************** Site-wide ***************/
*.leadWPI {color:#667e38; font-size:120%;}
*.leadCreative {color:#a7bb3a; font-size:120%;}

/*************** Top Bar ***************/
div#topBar {float:left; display:inline; width:950px; height:80px;}
div#topBar a#wpiLogo {float:left; display:inline; width:250px; height:80px;}

div#topBar ul#topNav {float:left; display:inline; width:700px; height:80px;}
div#topBar ul#topNav li {float:left; display:inline; height:80px;}
div#topBar ul#topNav li a {text-decoration:none; display:block; background-repeat:no-repeat; height:80px;}
div#topBar ul#topNav li span {visibility:hidden;}

div#topBar ul#topNav li#homeLink a {background-image:url(/public/images/top_nav_links/home.gif); width:129px; height:80px;}
div#topBar ul#topNav li#homeLink a:hover {background-image:url(/public/images/top_nav_links/home-hover.gif);}
div#topBar ul#topNav li#servicesLink a {background-image:url(/public/images/top_nav_links/services.gif); width:137px; height:80px;}
div#topBar ul#topNav li#servicesLink a:hover {background-image:url(/public/images/top_nav_links/services-hover.gif);}
div#topBar ul#topNav li#portfolioLink a {background-image:url(/public/images/top_nav_links/portfolio.gif); width:143px; height:80px;}
div#topBar ul#topNav li#portfolioLink a:hover {background-image:url(/public/images/top_nav_links/portfolio-hover.gif);}
div#topBar ul#topNav li#aboutLink a {background-image:url(/public/images/top_nav_links/about.gif); width:142px; height:80px;}
div#topBar ul#topNav li#aboutLink a:hover {background-image:url(/public/images/top_nav_links/about-hover.gif);}
div#topBar ul#topNav li#contactLink a {background-image:url(/public/images/top_nav_links/contact.gif); width:149px; height:80px;}
div#topBar ul#topNav li#contactLink a:hover {background-image:url(/public/images/top_nav_links/contact-hover.gif);}

body#home div#topBar ul#topNav li#homeLink a {background-image:url(/public/images/top_nav_links/home-at.gif);}
body#services div#topBar ul#topNav li#servicesLink a {background-image:url(/public/images/top_nav_links/services-at.gif);}
body#portfolio div#topBar ul#topNav li#portfolioLink a {background-image:url(/public/images/top_nav_links/portfolio-at.gif);}
body#about div#topBar ul#topNav li#aboutLink a {background-image:url(/public/images/top_nav_links/about-at.gif);}
body#contact div#topBar ul#topNav li#contactLink a {background-image:url(/public/images/top_nav_links/contact-at.gif);}

/*************** Left Bar ***************/
div#leftBar {
	float:left; display:inline;
	width:200px;
	margin:20px 50px 15px;
	background:#fff;
}
body#home #leftBar {background:#fff;}
body#contact #leftBar {background:#fff;}

div#leftBar ul#leftNav {padding:20px 0 80px 20px;}
div#leftBar ul#leftNav li {padding-bottom:15px;}
div#leftBar ul#leftNav li a {color:#667e38; text-decoration:none;}
div#leftBar ul#leftNav li a:hover {color:#a7bb3a;}

div#leftBar ul#leftSubNav {padding:5px 0 0 10px;}
div#leftBar ul#leftSubNav li {padding-bottom:5px;}
div#leftBar ul#leftSubNav li a {color:#667e38; text-decoration:none;}
div#leftBar ul#leftSubNav li a:hover {color:#a7bb3a;}

/*************** Main Content ***************/
div#mainContent {
	float:left; display:inline;
	width:600px;
	min-height:300px;
	margin:20px 0 170px;
	color:#363636;
}
div#mainContent p {margin-bottom:1em; width:550px;}
div#mainContent h1 {color:#c8872b; font-weight:bold; font-size:140%; margin-bottom:1em;}
div#mainContent h2 {color:#a7bb3a; font-weight:bold; font-size:120%;}
div#mainContent h3 {color:#667e38; font-weight:bold; font-style:italic; font-size:100%;}
div#mainContent a {color:#2c77a3; text-decoration:underline;}
div#mainContent a:hover {color:#cfcfcf;}

/*************** About ***************/
#mainContent div.staffProfile {float:left; display:inline; width:600px; margin-bottom:20px;}
#mainContent img.staffProfileImg {float:left; display:inline; width:100px; margin-right:20px;}
#mainContent div.staffProfileCopy {float:left; display:inline; width:480px;}
#mainContent div.staffProfileCopy p {float:left; display:inline; width:480px;}

/*************** Footer ***************/
div#footer {width:950px; margin:2px auto 10px; font-size:80%; color:#555;}
div#footer p {padding:0 50px 0 0; text-align:right;}