/*
Title: Boulder Performance Network styles (styles.css)
File Author: Brian Dodson, bri-design studios (bri-design.com)
Project Developer: DaGama Web Studio, Inc. (dagamawebstudio.com)
Version: 1.0
Last Modified: 03/4/09
*/

/* Eric Meyer CSS Reset (http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/) with modifications */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
ul, ol, li {margin:0; padding:0; list-style-type:none;}
body {line-height: 1; position: relative;}
blockquote, q {quotes: none;}
/* gets rid of the disabled vertical scrollbar that IE puts on textareas (http://blog.klustered.com/2007/03/14/tip/) */
textarea {overflow: auto;}
/* from Viget Labs (http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/) */
button {width: auto; overflow: visible; background: transparent; border: none; cursor: pointer; }
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}

/* ================================================= Common Notes */
/*
Hex colors:
Blue:						0080C6
Primary Grey: 	777
Dark Grey: 			444
*/

/* ================================================= GLOBAL tags */
body {
	text-align:center;
	font-size:62.5%; /* All font sizes reset to 10px */
	font-family:Arial, Verdana, sans-serif;
	line-height:10px; /* Reset line height to common 10px */
background:#b5b9bc url(../images/cloud-bg.jpg) no-repeat top;
}
h1, h2, h3, h4, h5, h6 {
	color:#0080C6;
	font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
	font-size:2.4em;
	line-height: 2.4em;
}
h4 {font-size:1.6em; font-family:Arial, Verdana, sans-serif; font-weight:normal;}
p, ul, li, table, td, dl, dt, dd, form, fieldset {
	color:#777;
	font-size:1.4em;
	line-height:1.4em;
}
a, a:link, a:visited {color:#0080C6; text-decoration:none;}
a:hover, a:active, a:focus {text-decoration:underline;}
input, textarea {
    font-size:12px;
font-family:Arial, Verdana, sans-serif;
color:#444;
}
legend {display:none;}

/* ================================================= GLOBAL utility classes and special definitions */
.left {float:left;}
.left img {margin-right:10px;}
.textleft {text-align:left;}
.right {float:right}
.right img {margin-left:10px;}
.textright {text-align:right;}
.center {text-align:center !important; margin:0 auto; float:none;}
.textcenter {text-align:center;}
.textjustify {text-align:justify;}
.clear {clear:both;}
.nomargin {margin:0 !important;}
.nopadding {padding:0 !important;}


/* ================================================= GLOBAL layout, ID's and common classes */
#bg {
width:100%;
text-align:center;
background:url(../images/bubble-repeat.png);
height:100%;
}
#container {
width:910px;
margin:0 auto;
}
#BPNlogo {
display:block;
float:left;
padding:15px 0 14px 0;
height:59px;
width:346px;
margin:0 0 0 27px;
}
#BPNlogo a {
display:block; 
height:59px;
width:346px;
background:url(../images/logo.png) no-repeat;
text-indent:-5000em;
}
#tagline {
display:block;
float:right;
height:16px;
width:295px;
background:url(../images/tagline.png) no-repeat;
text-indent:-5000em;
margin:37px 27px 0 0;
}
#navigation {
clear:both;
background:url(../images/nav-bg.png);
display:block;
width:910px;
height:36px;
}
#nav {
font-size:0.80em;
background:url(../images/nav-bg.png);
display:block;
width:910px;
}
#nav li {
display:block; 
float:left;
text-align:center;
width:96px;
height:12px;
padding:8px 4px 10px 0;
margin:3px 0 0 0;
background:url(../images/nav-separator.png) no-repeat right;
}
#nav li.first {padding-right:0px; width:102px;}
#nav li.last {
background-image:none;
padding-right:0px;
width:102px;
}
#nav li a {color:#FFF; font-weight:bold;}
#nav li a:hover, #nav li a:active, #nav li a:focus, #nav li a.active {color:#000; text-decoration:none;}

#nav li ul {display:block; border-left:2px solid #00466d; border-top:2px solid #00466d; height:auto; width:165px; background:#0080c7; padding-bottom:15px; margin-top:5px; margin-left:-40px;}
#nav li.first ul {margin-left:20px;}
#nav li.last ul {margin-left:-60px;}
#nav li li {display:block; line-height:11px; width:155px; font-size:10px; text-align:left; float:none; padding:2px 5px; font-weight:normal; background-image:none; margin:10px 0;}
#nav li li a {font-weight:normal; display:block; width:145px; padding:5px;}
#nav li li a:hover {background:#01a4ff;}
#nav li li ul { margin:-20px 0 0 150px;}
#nav li.first li ul {margin:-20px 0 0 150px;}
#nav li.last li ul {margin:-20px 0 0 -155px;}

#nav li ul, #nav li li ul, #nav li li li ul, #nav li li li li ul {position:relative; z-index:500; right:5000em;}
#nav li:hover ul, #nav li.sfhover ul {right:auto;}
#nav li:hover ul ul, #nav li.sfhover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul ul ul {right:5000em;}
#nav li li:hover ul, #nav li li.sfhover ul, #nav li li li:hover ul, #nav li li li.sfhover ul, #nav li li li li:hover ul, #nav li li li li.sfhover ul {right:auto;}

#whiteWrapper {
background:url(../images/white-bg.png);
}
#photoHeader {
background:url(../images/page-photos-bg.jpg) no-repeat top;
height:118px;
position:relative;
z-index:5;
display:block;
float:left;
width:910px;
margin-left:-1px;
}
#copy {
width:515px;
float:right;
margin:-55px 95px 0 0;
position:relative;
z-index:10;
text-align:left;
}
#copy img.center {text-align:center !important;}
#copy h1 {
margin-bottom:25px;
}
#copy h2 {
font-size:2.2em;
}
#copy h3 {
font-size:1.8em;
}
#copy h4 {
font-size:1.4em;
font-weight:bold;
}
#copy h5 {
font-size:1em;
}
#copy h6 {
font-size:1em;
color:#333;
}
#copy ul, #copy li {
font-size:1em;
}
#copy li {
list-style-type:circle;
list-style-image:url(../images/li-arrow-bullet.gif);
margin-left:20px;
}
#copy p {
margin:20px 0;
line-height:1.4em;
}
#copy blockquote {
font-size:1.4em;
line-height:1.6em;
font-style:italic;
color:#aaa;
padding:20px;
border:1px dotted #aaa;
margin:20px;
}
#copy code {
color:#000;
font-size:1.2em;
background:#ddd;
}
.pageHome #copy {
width:400px; 
margin-right:20px;
font-size:1.4em;
line-height:1.4em;
color:#777;
}
.pageHome #copy h1 {
font-size:1.8em;
}
.pageHome #copy p {
font-size:1em;
}
.pageSub #copy {
font-size:1.2em;
line-height:1.4em;
padding-bottom:25px;
color:#777;
}
.pageSub #copy p {
font-size:1em;
line-height:1.4em;
}
#rightCol {
display:block;
float:right;
width:155px;
/*margin:118px 0 0 0;*/
margin:0;
background:url(../images/right-col-shadow.jpg) no-repeat top left;
padding:15px 15px 0 20px;
min-height:300px;
position:relative;
z-index:20;
text-align:left;
}
#rightCol .zone {
margin:5px 0 15px 0;
}
#leftImg {
position:relative;
z-index:30;
float:left;
background:url(../images/body-arrow.gif) no-repeat top right;
}
#leftImg img {
margin:-120px 0 0 -50px;
}
#bottomBar {
background:url(../images/bottom-bar-bg.png);
text-align:left;
}
#testimonial {
display:block;
float:right;
width:397px;
margin-right:6px;
margin-top:9px;
height:112px;
padding:0 25px 0 20px;
overflow:hidden;
background:url(../images/testimonial-quotes.png) no-repeat top left;
border-bottom:1px solid #FFF;
}
#testimonial img {
display:block;
width:105px;
height:105px;
float:left; 
margin-right:8px;
font-size:9px;
color:#999;
}
#testimonial p.quote {
color:#0080C6;
font-style:italic;
font-size:1.4em;
line-height:1.2em;
}
#testimonial p.attribution {
font-size:1.1em;
line-height:1.2em;
margin-top:10px;
}

.pageSub #testimonial {
width:435px;
padding:0 10px 0 0px;
background-image:none;
}
.pageSub #testimonial img {
position:relative;
left:5px;
}
.pageSub #testimonial p.quote {
font-size:1.3em;
line-height:1.1em;
position:relative;
left:5px;
}
.pageSub #testimonial p.attribution {
font-size:0.9em;
line-height:1.2em;
position:relative;
left:5px;
}
#contact {
display:block;
float:left;
padding:0 20px;
width:205px;
margin-left:4px;
height:121px;
overflow:hidden;
background:url(../images/bottom-bar-separator.png) repeat-y right;
border-bottom:1px solid #FFF;
}
#contact p {
font-size:1.2em;
line-height:1.2em;
margin-bottom:19px;
}
#clientLogin {
display:block;
width:177px;
padding:0 20px 0 13px;
height:121px;
overflow:hidden;
background:url(../images/bottom-bar-separator.png) repeat-y right;
border-bottom:1px solid #FFF;
}
#clientLogin label {
font-size:10px; line-height:20px; width:50px;display:block; float:left;
}
#clientLogin input {font-size:10px; padding:0 3px; height:15px; width:110px; margin:0 0 4px 0;}
#clientLogin input.inputBtn {padding:0; width:auto; margin:4px 0 0 0; height:auto;}
#footer {
background:url(../images/footer-bottom.png) no-repeat top;
display:block;
height:51px;
margin:0 0 0 -2px;
padding:80px 25px 15px 25px;
text-align:left;
}
#footer li {
font-size:0.8em;
display:inline;
padding-right:15px;
line-height:2em;
}
#footer p {
font-size:1.1em;
line-height:2em;
color:#666;
}
#footer .right p {text-align:right;}
#footer a {color:#444;}
/* ================================================= PAGE specific layout */