/* 
Created by Matt Dente
matt@mattdente.com 
*/

html {
	height: 100.5%;
	}

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .7em;
	line-height: 1.65em;
	color: #333;
	background-color: #CCC;
	}
	
#wrapper {
	position: relative;
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	background-color: #FFF;
	background: url(images/wrapper_bg.gif) repeat-y;
	}
	
a {
	color: #06C;
	}
	

	
/* Banner ----------------------------------------*/

#banner {
	width: 980px;
	height: 132px;
	background: url(images/banner_bg.gif) no-repeat;
	}

#banner h1 {
	position: absolute;
	top: 50px;
	left: 50px;
	padding: 0;
	margin: 0;
	}

#banner h1 img {
	border-style: none;
	}
	
#banner p img {
	position: absolute;
	top: 30px;
	right: 32px;
	}
	
/* Navigation ----------------------------------------*/

#navigation {
	width: 930px;
	height: 2.2em;
	background-color: #000;
	padding: .5em 0 0 50px;
	margin: 0;
	}
	
#navigation li {
	font-weight: bold;
	color: #FFF;
	display: inline;
	padding: 5px 25px 5px 0;
	list-style-type: none;
	}
	
#navigation li a {
	color: #999;
	text-decoration: none;
	}
	
#navigation li a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #000;
	}
	
#navigation li.onstate {
	font-weight: bold;
	color: #FFF;
	display: inline;
	padding: 5px 25px 5px 0;
	list-style-type: none;
	}
	
#navigation li.onstate a {
	color: #FFF;
	text-decoration: none;
	}
	
#navigation li.onstate a:hover {
	color: #CCC;
	text-decoration: none;
	background-color: #000;
	}
	
/* Home Page Title ------------------------------------*/

#homePageTitle {
	width: 980px;
	height: 250px;
	background: url(images/hometitle_bg.jpg) no-repeat;
	padding: 0;
	margin: 0;
	}
	
#homePageTitle h2 {
	display: none;
	}
	
#homePageTitle hr {
	display: none;
	}
	
#homePageTitle p {
	position: relative;
	left: 760px;
	top: 80px;
	padding: 0;
	margin: 0;

	}
	
#homePageTitle p a {
	color: #FFD2A6;
	text-decoration: none;
	display: block;

	}

	
/* Sub Page Title ------------------------------------*/

#subPageTitle {
	width: 980px;
	height: 90px;
	background: url(images/subtitle_bg.gif) no-repeat;
	padding: 0;
	margin: 0;
	}
	
#subPageTitle h2 {
	font-size: 2em;
	padding: 20px 0 0 50px;
	margin: 0;
	color: #FFF;
	}
	
/* Sub Page Portfolio Title ------------------------------------*/

#subPageTitlePf {
	width: 980px;
	height: 90px;
	background: url(images/subtitle_pf_bg.gif) no-repeat;
	padding: 0;
	margin: 0;
	}
	
#subPageTitlePf h2 {
	float: left;
	font-size: 2em;
	padding: 20px 0 0 50px;
	margin: 0;
	color: #FFF;
	}
	
#subPageTitlePf ul {
	float: right;
	position: relative;
	right: 50px;
	padding: 0;
	margin: 17px 0 0 0;
	}
	

#subPageTitlePf ul li.prev a {
	float: left;
	display: block;
	width: 55px;
	height: 25px;
	background-color: #CCCCCC;
	background: url(images/pf_button_prev_bg.gif) no-repeat;
	}
	
#subPageTitlePf ul li.prev a span {
	display: none;
	}
	
#subPageTitlePf ul li.prev a:hover {
	float: left;
	display: block;
	width: 55px;
	height: 25px;
	background-color: #CCCCCC;
	background: url(images/pf_button_prev_on_bg.gif) no-repeat;
	}
	
#subPageTitlePf ul li.next a {
	float: left;
	display: block;
	width: 55px;
	height: 25px;
	background-color: #CCCCCC;
	background: url(images/pf_button_next_bg.gif) no-repeat;
	}
	
#subPageTitlePf ul li.next a span {
	display: none;
	}
	
#subPageTitlePf ul li.next a:hover {
	float: left;
	display: block;
	width: 55px;
	height: 25px;
	background-color: #CCCCCC;
	background: url(images/pf_button_next_on_bg.gif) no-repeat;
	}
	


	
/* Body Content ------------------------------------*/

#bodyContent {
	padding: 0;
	margin: 0;
	}
	
#bodyContent hr {
	display: none;
	}
	
#bodyContent h4 {
	font-size: 1.3em;
	padding: 0;
	margin: 0;
	}
	

	
#bodyContent h3.botSpace {
	margin: 0 0 0 50px;
	padding: 30px 0 30px 0;
	}

/* Single Column */

#bodyContent .column {
	width: 320px;
	float: left;
	padding: 0 0 30px 0;
	}
	
#bodyContent .column h4 {
	margin: 0 40px 0 50px;
	}
	
#bodyContent .column h5 {
	margin: 5px 40px -5px 50px;
	padding: 0;
	font-size: 100%;
	color: #999;
	font-weight: normal;
	}
	
#bodyContent .column p {
	margin: 5px 40px 5px 50px;
	}
	
#bodyContent .column p.botSpace {
	margin: 5px 40px 20px 50px;
	}
	
#bodyContent .column blockquote {
	padding: 0 0 20px 0;
	margin: 0;
	background: url(images/blockquote_bg.gif) no-repeat 35px .4em;
	}
	
#bodyContent .column blockquote p strong {
	font-weight: normal;
	color: #F60; 
	}
	
#bodyContent .column blockquote p em {
	font-weight: normal;
	font-style: italic;
	color: #999; 
	}
	
#bodyContent .column blockquote p span {
	display: none; 
	}
	
/* Double Column */

#bodyContent .columnDouble {
	width: 650px;
	padding: 0 0 10px 0;
	}
	
#bodyContent .columnDouble h4 {
	margin: 30px 40px 0 50px;
	}
	
#bodyContent .columnDouble h5 {
	margin: 5px 40px -5px 50px;
	padding: 0;
	font-size: 100%;
	color: #999;
	font-weight: normal;
	}
	
#bodyContent .columnDouble p {
	margin: 5px 40px 5px 50px;
	}
	
#bodyContent .columnDouble p.botSpace {
	margin: 5px 40px 20px 50px;
	}
	
/* Portfolio Project Wide Column */

#bodyContent .portfolioColumn {
	width: 980px;
	padding: 0 0 10px 0;
	}
	
#bodyContent .portfolioColumn h4 {
	margin: 30px 40px 0 40px;
	}
	
#bodyContent .portfolioColumn h5 {
	margin: 5px 50px -5px 40px;
	padding: 0;
	font-size: 100%;
	color: #999;
	font-weight: normal;
	}
	
#bodyContent .portfolioColumn p {
	line-height: 1.55em;
	margin: 5px 50px 10px 40px;
	color: #999;
	}
	
#bodyContent .portfolioColumn p.botSpace {
	margin: 5px 40px 20px 40px;
	}
	
#bodyContent .portfolioColumn .hero {
	float: left;
	padding: 30px 0 80px 50px;
	margin: 0;
	}
	
#bodyContent .portfolioColumn .textDescription {
	float: right;
	width: 330px;
	}
	
#bodyContent .portfolioColumn .textDescription img {
	padding: 20px 0 20px 0;
	margin: 0;
	}
	
/* Double Column Portfolio Landing Page */

	
#bodyContent .columnDouble .pfThumb {
	float: left;
	padding: 30px 15px 15px 50px;
	width: 250px;
	}

#bodyContent .columnDouble .pfThumb a img {
	border-width: 1px;
	border-style: solid;
	border-color: #CCC;
	}
	
#bodyContent .columnDouble .pfThumb a:hover img {
	border-width: 1px;
	border-color: #999;
	}

#bodyContent .columnDouble .pfThumb p {
	padding: 6px 0 10px 0;
	margin: 0;
	background: url(images/pf_thumb_link_bg.gif) no-repeat bottom;
	}
	
/* Home Side Box */
	
#homeBox {
	position: absolute;
	top: 425px;
	left: 52%;
	width: 201px;
	padding: 0;
	margin: 0;
	overflow: visible;
	height: 319px;
	}

	
#homeBox h3 { 
	
	color: #888; 
	font-weight: normal; 
	margin: 6px 0 .8em; 
	line-height: 1.4; font-size: 140%; }

	

	
/* Sub Side Box */
	
#subBox {
	position: absolute;
	top: 282px;
	right: 50px;
	width: 200px;
	padding: 0;
	margin: 0;
	background: url(images/sidebox_bg_top.gif) no-repeat left top;
	overflow: hidden;
	}
	
#subBox h4 {
	padding: 25px 30px 10px 30px;
	margin: 0;
	}

#subBox h5 {
	font-size: 1em;
	padding: 3px 30px 3px 30px;
	margin: 0;
	}
	
#subBox p {
	padding: 30px 30px 3px 30px;
	margin: 0;
	}
	
#subBox .bottomBg {
	padding-bottom: 25px;
	background: url(images/sidebox_bg_bottom.gif) no-repeat left bottom;
	}
	
#subBox ul {
	padding: 3px 30px 3px 30px;
	margin: 0;
	}
	
#subBox ul li {
	padding: 0 0 0 15px;
	list-style-type: none;
	background: url(images/bullet.gif) no-repeat left .65em;
	}
	
#subBox .horizontalRule {
	margin: 20px 0 0 30px;
	}

	
/* Footer ------------------------------------*/

#footer {
	width: 980px;
	clear: both;
	background: url(images/footer_bg_bottom.gif) no-repeat bottom;
	padding: 0 0 35px 0;
	margin: 0;
	color: #999;
	}
	
#footer ul {
	margin: 0;
	padding: 15px 0 0 50px;
	background: url(images/footer_bg_top.gif) no-repeat top;
	}
	
#footer li {
	display: inline;
	padding: 0 20px 0 15px;
	margin: 0;
	background: url(images/bullet.gif) no-repeat left .45em;
	}
	
#footer hr {
	display: none;
	}
	
/* SIFR ------------------------------------*/

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #wrapper #bodyContent .column h4 {
	visibility: hidden;
	line-height: 1em;
	font-size: 1em;
	height: 1.5em;
	font-weight: normal;
	letter-spacing: 0;
}

.sIFR-hasFlash #wrapper #bodyContent .columnDouble h4 {
	visibility: hidden;
	line-height: 1em;
	font-size: 1em;
	height: 1.5em;
	font-weight: normal;
	letter-spacing: 0;
	}

.sIFR-hasFlash #wrapper #bodyContent #homeBox h4 {
	visibility: hidden;
	position: relative;
	top: 25px;
	left: 30px;
	width: 180px;
	padding: 0;
	margin: 0 0 35px 0;
	line-height: 1em;
	font-size: 1em;
	height: 1.5em;
	font-weight: normal;
	letter-spacing: 0;
	background: none;
	}
	
.sIFR-hasFlash #wrapper #bodyContent #subBox h4 {
	visibility: hidden;
	position: relative;
	top: 25px;
	left: 30px;
	width: 180px;
	padding: 0;
	margin: 0;
	line-height: 1em;
	font-size: 1em;
	height: 1.5em;
	font-weight: normal;
	letter-spacing: 0;
	background: none;
	}
	
.sIFR-hasFlash #wrapper #subPageTitle h2 {
	visibility: hidden;
	font-size: 2em;
	padding: 18px 0 0 50px;
	margin: 0;
	color: #FFF;
	line-height: .5em;
	font-size: 1em;
	height: 7px;
	width: 180px;
	font-weight: normal;
	letter-spacing: 0;
	}
	
.sIFR-hasFlash #wrapper #subPageTitlePf h2 {
	visibility: hidden;
	font-size: 2em;
	padding: 18px 0 0 50px;
	margin: 0;
	color: #FFF;
	line-height: .5em;
	font-size: 1em;
	height: 7px;
	width: 180px;
	font-weight: normal;
	letter-spacing: 0;
	}
	
.sIFR-hasFlash #wrapper #bodyContent .portfolioColumn .textDescription h4 {
	visibility: hidden;
	position: relative;
	top: 25px;
	left: 40px;
	width: 180px;
	padding: 0;
	margin: 0 0 33px 0;
	line-height: 1em;
	font-size: 1em;
	height: 1.5em;
	font-weight: normal;
	letter-spacing: 0;
	background: none;
	}










* { margin: 0; padding: 0; }	a img { border: 0; background: transparent; }	fieldset { border: none; }	html { height: 100% }	body { min-height: 101% }


/* =COMMON ELEMENTS
================================================ */

#container { width: 900px; background: #FFF; margin: 15px auto 0px; }


/* =TEXT & CLASS STYLES 
================================================ */

h2 { font: normal 170% Georgia, "Times New Roman", Times, serif; color: #175EAD; }
h2 sup { font: 9px Helvetica, Arial, sans-serif; }
#content h3 { color: #888; font-weight: normal; margin: 6px 0 .8em; line-height: 1.4; font-size: 140%; }
h4 { font-size: 125%; font-weight: normal; margin: 1em 0 .1em; color: #676767; }
h5 { font-size: 115%; font-weight: normal; margin: 1em 0 1.25em; }
#bd-casestudies h4, #bd-practices h4 { margin: 5px 0 .4em; }
#case-holder { min-height: 400px; }
#content ul { margin: 1em 0; }
#content ul li, #sidebar-right ul li { margin: .3em 0; background: url(../images/bulblue-arr-sm.gif) no-repeat left .4em; padding-left: 10px; list-style: none; }
#bd-casestudies #sidebar-right ul li, #bd-practices #sidebar-right ul li { background-image: url(../images/bul-arr-sm.gif) }




/* =CONTENT
================================================ */
#content {
	width: 425px;
	margin: 0px 20px 30px 0px;
	float: left; display: inline;
}

#content hr { color: #fff; background-color: #fff; border: 1px solid #EEE; border-style: none none solid; margin: 1em 0; display: block; }




/* =GRID - HOME PAGE
================================================ */
dl#grid {
	width: 451px; height: 209px;
	background: #EEE;
	margin: 2em 0;
}
dl#grid dt {
	width: 451px; height: 28px;
	background: url(images/grid/head-areas.gif) no-repeat;
	text-indent: -9999em;
}
dl#grid ul#upper {
    width: 451px; height: 91px;
	background-image: url(images/grid/upper.gif); 
    margin: 0; padding: 0;
	position: relative;
	list-style: none;
}
dl#grid ul#upper li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
dl#grid ul#upper li, dl#grid ul#upper li a { height: 91px; display: block; text-indent: -9999px; overflow: hidden; border-bottom: none; background-image: none; }
dl#grid #upper1 { left: 0px; width: 225px; }
dl#grid #upper2 { left: 225px; width: 226px; }

dl#grid #upper1 a:hover {
    background: transparent url(images/grid/upper.gif)
	0px -91px no-repeat; }
dl#grid #upper2 a:hover {
    background: transparent url(images/grid/upper.gif)
	-225px -91px no-repeat; }



/* LOWER GRID */
dl#grid ul#lower {
    width: 451px; height: 90px;
	background-image: url(images/grid/lower.gif); 
    margin: 0; padding: 0;
	position: relative;
	list-style: none;
}
dl#grid ul#lower li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
dl#grid ul#lower li, dl#grid ul#lower li a { height: 90px; display: block; text-indent: -9999px; overflow: hidden; border-bottom: none; background-image: none; }
dl#grid #lower1 { left: 0px; width: 225px; }
dl#grid #lower2 { left: 225px; width: 226px; }

dl#grid #lower1 a:hover {
    background: transparent url(images/grid/lower.gif)
	0px -90px no-repeat; }
dl#grid #lower2 a:hover {
    background: transparent url(images/grid/lower.gif)
	-225px -90px no-repeat; }





/* =SIDEBAR-RIGHT
================================================ */
#sidebar-right {
	width: 205px;
	float: left; display: inline;
}
#bd-casestudies #sidebar-right, #bd-practices #sidebar-right { margin-top: 25px; }

#sidebar-right h3 { color: #175EAD; font: normal 145% Georgia, "Times New Roman", Times, serif; margin: 1.25em 0 0; }
#sidebar-right > h3:first-child { margin-top: 0; }
#sidebar-right p { font-size: 100%; }
#sidebar-right strong a { font-weight: normal; }
#sidebar-right hr { color: #fff; background-color: #fff; border: 1px solid #DDD; border-style: none none solid; margin: 1.25em 0 1em; }

#sidebar-right li.selected a { border-bottom: 1px solid #417c8d; color: #254156; }

#bd-about #sidebar-right, #bd-resources #sidebar-right  { margin-top: 14px; }
#sidebar-right h4 { font-weight: normal; font-size: 120%; color: #777; }