/*	!!COLOR GUIDE!!		*/
/*	reg gray: #666666	*/
/*	dark gray: #3F3F3F	*/
/*	blue: #0060B6		*/
/*	black: #000000		*/
/*	yellow: #E6E600		*/


/*BEGIN STOCK STYLES*/
body {font-family: Arial, Helvetica, sans-serif;
background: url(../images/bg_grad.gif) repeat-x;
background-color: #3F3F3F;
margin:0;
padding:0;
}

#maincontainer{
width:840px; /*Width of main container*/
margin:0 auto; /*Center container on page*/
background:#FFFFFF;
}

#topsection{height:60px; /*Height of top section*/}

#contentwrapper{float:left; width:100%;}

#contentcolumn{margin-left: 210px; /*Set left margin to LeftColumnWidth*/}

#contentcolumn.index{margin-left: 0px; /*INDEX PAGE ONLY*/}

#leftcolumn{float: left;width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
}

/*#footer{clear:left; width:100%; font-size:0.75em; padding:20px 0 10px 20px; color:#999999; background:url(../images/CC_SBKlogos.jpg) no-repeat; margin:0 0 20px 0; overflow:auto;}*/
#footer, #footerindex{clear:left; width:100%; font-size:0.75em; padding:20px 0 10px 0; color:#999999; background:url(../images/CC_SBKlogos.jpg) no-repeat right; margin:30px 0 20px 0; overflow:auto;}
#footer p, #footerindex p{width:35%; float:left; padding:45px 0 0 0; margin:0 0 0 10px;}
#footer span, #footerindex span{margin:0 .65em 0 .65em; font-size:1.25em;}
#footer a, #footerindex a{color:#999999; padding:5px 20px 0 0; width:50px; height:20px;}
#footer a:hover, #footerindex a:hover{color:#820a0b; padding:5px 20px 0 0; background: url(../images/IpsoFatsoLogo_tiny.png); background-position:top right; background-repeat:no-repeat; text-decoration:none;}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

#clear{display:box; clear:both; width:100%;}

/*END STOCK STYLES*/


/*BEGIN INDEX STYLES*/
#maincontainer.indexBox{padding:3% 0 0 0;}
#indexBox{width:810px; background:url(../images/OE_logo.jpg) no-repeat; padding:30px 0 0 0; margin:0 0 70px 0;overflow:auto;}
#indexBox #rightCol{width:622px; float:right; display:inline;}
#indexBox #leftCol{width:187px; float:left; display:inline;}
#indexBox h1{margin:5px 0 0 0; color:#15317E; font-size:2em; line-height:.8em; clear:both;}
#indexBox h2{margin:0 0 25px 0; color:#15317E; font-size:1.25em; line-height:1em; clear:both;}
#indexBox h2 span.NumLabel{color:#15317E; font-size:0.9em;}
#indexBox p{color:#15317E; font-size:1.2em; line-height:1.5em; clear:both; width:90%;}
#indexBox #leftCol p{margin:0 10px 0 0;}
#indexBox #leftCol h2 a:link,#indexBox #leftCol h2 a:visited{font-size:.75em; color:#15317E; text-decoration:none;}
#indexBox #leftCol h2 a:hover,#indexBox #leftCol h2 a:active{font-size:.75em; color:#333;}
#indexBox #rightCol p{margin:15px 0 0 0; padding:0;}

ul.navINDEX{padding:0 0 0 187px; margin:0 0 50px 0; display:block; width:623px;}
ul.navINDEX li{list-style-type:none; float:left; display:inline; padding:4px; margin:0; width:192px; text-align:center;}
ul.navINDEX li a{text-decoration:none;}
ul.navINDEX li a:hover{text-decoration:underline;}
ul.navINDEX li.services{background-color:#0060B6;}
ul.navINDEX li.services a{color:#FFFFFF;}
ul.navINDEX li.projects{background-color:#000000; color:#FFFFFF;}
ul.navINDEX li.projects a{color:#FFFFFF;}
ul.navINDEX li.about{background-color:#E6E600;}
ul.navINDEX li.about a{color:#FFFFFF;}

#gallery{position:relative;height:300px; margin:25px 0 0 187px;}
#gallery a{float:left;position:absolute;}
#gallery a img{border:none;}
#gallery a.show{z-index:500}
#gallery .caption{z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute;bottom:0;}
#gallery .caption .content {margin:5px}
#gallery .caption .content h3 {margin:0;padding:0;color:#1DCCEF;}



/*END INDEX STYLES*/



/*BEGIN REG STYLES*/
.reg #topsection{padding:40px 0 0 0;}
.reg div#logo{background:url(../images/OE_logo.jpg) no-repeat; width:95%; height:75px; margin:0 auto;}
.reg div#logo span{float:right; font-size:.85em; color:#666666; text-align:right; margin:13px 0 0 0;}

ul.nav{padding:50px 0 0 188px; display:block;}
ul.nav li{ list-style-type:none; float:left; display:inline; padding:0 51px 0 0;}
ul.nav li a{color:#666666; text-decoration:none;}
ul.nav li a:hover{color:#0060B6; text-decoration:underline;}
ul.nav li a.current{color: #333333;font-weight:bold;}

.reg #contentwrapper{margin:0 0 50px 0;}
.reg #contentwrapper h1, .reg #contentwrapper p, .reg #contentwrapper a{color:#15317E; margin:0; padding:0;}
.reg #contentwrapper h1{border-bottom:solid 4px #666666; font-size:2em;}
.reg #contentwrapper p{margin:0 20px 35px 0; line-height:2.5em;}
.reg #contentwrapper p:first-child{ margin:15px 0 0 0;}
.reg #contentwrapper p a{color:#4863A0;}
.reg #contentwrapper p a:hover{color:#2B547E;}
#contentwrapper ul.services{padding:20px 0 0 15px;color:#15317E;}
#contentwrapper ul.services li{ list-style-type:square; margin:0 0 25px 0; width:50%; display:inline; float:left;}

.reg #leftcolumn img{border-top:solid 4px #E6E600; border-bottom:solid 4px #E6E600; margin:2.3em 0 .5em 0; padding:10px 0 10px 10px;}
.reg #leftcolumn p{margin:0 10px; width:180px; text-align:center; color:#15317E; font-weight:bold;}
.reg #leftcolumn p span{color:#2B547E; font-size:.75em; font-weight:normal;}

/*END REG STYLES*/


/*BEGIN PROJECTS STYLES*/
#projectBox2{margin:15px 10px 10px 0; width:230px; display:inline; float:left;}
#projectBox3{margin:15px 10px 10px 0; width:345px; display:inline; float:left;}
#projectBox4{margin:15px 10px 10px 0; width:420px; display:inline; float:left;}
#projectBox5{margin:15px 10px 10px 0; width:535px; display:inline; float:left;}
#projectBoxFull{margin:15px 10px 10px 0; width:585px; display:inline; float:left;}
#projectBox2 h2{font-size:1em; line-height:0.9em; border-bottom:solid 1px #0060B6; color:#0060B6;}
#projectBox3 h2{font-size:1em; line-height:0.9em; border-bottom:solid 1px #0060B6; color:#0060B6;}
#projectBox4 h2{font-size:1em; line-height:0.9em; border-bottom:solid 1px #0060B6; color:#0060B6;}
#projectBox5 h2{font-size:1em; line-height:0.9em; border-bottom:solid 1px #0060B6; color:#0060B6;}
#projectBoxFull h2{font-size:1em; line-height:0.9em; border-bottom:solid 1px #0060B6; color:#0060B6;}

#projectBox5 h2{margin:0 16px 10px 0; font-size:1em; line-height:0.9em; border-bottom:solid 1px #0060B6; color:#0060B6;}
#projectBoxFull h2 span{color:#999; font-size:.75em;}
#projectBox2 a, #projectBox3 a{display:inline;}
#projectBox2 a img, #projectBox3 a img{border:solid 1px #ffffff; margin:0 10px 0 0;}
#projectBox2 a img:hover, #projectBox3 a img:hover{border:solid 1px #E6E600;}

#vidBox{height:100px; width:270px; display:inline-block; border-top:1px solid #CCC; padding:10px 0 0 0; margin:0 10px 0 0;}
#vidBox a img{float:left; border:1px solid #FFF; text-decoration:none;}
#vidBox a:hover img{float:left; border:1px solid #999;}
#vidBox a span{float:right; vertical-align:top; width:155px; text-decoration:none;}
#vidBox a:hover span{float:right; vertical-align:top; width:155px; text-decoration:underline;}
#vidBox span.QT{font-size:.75em; color:#999; float:right; vertical-align:top; width:155px; margin:0 0 0 10px;}


/* BEGIN PIKACHOOSE STYLES */

/* This is the ul you have all your images in */
.pikachoose{}
.pikachoose ul{padding-left:0;width:589px;margin:0;overflow:hidden;}
.pikachoose ul li{float: left;padding:2px;margin:0 10px 10px 0;position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;}

/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{width:585px;height:400px;display:block;position:relative;margin:0 0 10px 0;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:0px;left:0px;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{position:relative; display:block;}
.pika_subdiv img, .pika_subdiv a img{border:none;}
.pika_caption{width:585px;height:16px;padding-top:4px;text-align:center;position:absolute;bottom:7px;left:2px;background:url('../images/black.png') top left;}
.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}

.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

/* END PIKACHOOSE STYLES */


/*END PROJECTS STYLES*/