/* @override http://10.0.1.5:8888/summit-drilling/css/main.css */

/*
Company:	Summit Drilling
File:		main.css - This contains all the main styles for the website.

All the styles are separted into the following groups:
Global Browser Reset - this is handled by the reset-fonts.css file from YUI
HTML, Body - for the html and body tags
Layout - styles that define the layout of the site
Modules - styles for content modules
Common Text Styles - Styles for text
Default Headings - headings like h1, h2, etc
Default Lists - unordered and ordered lists
Nav - navigation bar
Forms - html forms
Default Links - links
Misc - anything that doesn't fit elsewhere
*/

/* @group HTML, Body */
html {
	background-color: #fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:81%;
}
body {
	color: #1e3363;
}
/* @end */

/* @group Layout */
/* Two Column Layout A --  column on right */
div.col-layout-a div.main {
	width: 589px;
	float: left;
	margin: 0 15px 0 0;
}

div.col-layout-a div.side {
	width: 360px;
	float: left;
}

/* Two Column Layout B -- column on left */
div.col-layout-b div.main {
	width: 634px;
	float: left;
}

div.col-layout-b div.side {
	width: 305px;
	margin: 0 25px 0 0;
	float: left;
}

/* Head */
/* Logo */
div.logo {
	position: absolute;
	top: -50px;
	left: 315px;
	width: 239px;
	height: 154px;
	z-index: 50; /* BH added for wider face images  AS YOU ADD QUANTITY OF FACES - THE Z INDEX TOTAL INCREASES, IF IT GETS OVER 50, YOU NEED TO MOVE THIS UP AS WELL */
}
body.inside div.logo {
	left: 0;
	top: -45px;
}

div.logo a:link, div.logo a:visited {
	display: block;
	width: 239px;
	height: 154px;
	background: url(../images/bg-logo.png) top left no-repeat;
	text-indent: -9999px;
}
body.inside div.logo a:link, body.inside div.logo a:visited {
	background: url(../images/bg-logo-inside.png) top left no-repeat;
}

/* Head Graphic */
div.hd-graphic {
	background: url(../images/bg-hd-graphic-tile.jpg) top left repeat-x;
	height: 294px;
}
body.inside div.hd-graphic {
	height: 76px;
	background: none;
}

div.hd-graphic-inner {
	background: url(../images/bg-hd-graphic.jpg) top center no-repeat;
	height: 294px;
}
body.inside div.hd-graphic-inner {
	background: url(../images/inside-hd-bkg.gif) repeat-x 0 0;
	height: 76px;
}

div.hd-graphic-inner-most {
	width: 986px;
	margin: 0 auto;
	height: 294px;
}
body.inside div.hd-graphic-inner-most {
	height: 76px;
	text-align: right;
}

/* Body */
div#bd {
	width: 986px;
	margin: 0 auto;
}

div#bd-inner {
	padding: 6px 0 0 20px;
}
body.inside div#bd-inner {
	padding: 60px 0 0 20px;
}

/* Footer */
div#ft {
	padding: 25px 0 0 0;
	font-size: 85%;
	color: #1a2853;
}

div#ft p {text-align: center;}
div#ft p span {padding: 0 6px;}
/* @end */

/* @group Modules */
/* Head Slider */
div.slide-wrapper div.slide {
	width: 719px; /* was 511, should be just 615, but names weren't working with "-" margin */
	position: relative;
	color: #FFF;
	height:294px;
}

div.slide-wrapper div.slide div {
	margin-left:-104px; /* compensate for wider face photos */
	display:none; /* keeps faces from showing on itial load */	
	width:600px; /* IE needs this div to surround the text so it doesn't clip on fade */
	background: url(../images/bg-hd-graphic.jpg) -130px 0 no-repeat; /* this is just to fill the wider div */
}
div.slide-wrapper div.slide div div {
	display:block; /* keeps text showing */
	background:none;
}


div.slide-wrapper div.slide img {
	position: relative;
	z-index: 10;
}

div.slide-wrapper div.slide div.slide-text {
	position: absolute;
	top: 120px;
	left: 498px; /* was 290 on old slice, should be 394, but that wasn't working */
	width:300px; /* BH added to make text stay one line */
	z-index: 150;
}

div.slide-wrapper div.slide h3 {
	font-size: 100%;
	font-weight: normal;
	margin: 0 0 1px 0;
}

div.slide-wrapper div.slide h4 {
	color: #86d2f0;
	font-style: italic;
	font-size: 85%;
	font-weight: normal;
	margin: 0 0 12px 0;
}

div.slide-wrapper div.slide p {
	margin: 0;
	font-style: italic;
}

/* Column One */
div.col-one {
	float: left;
	width: 305px;
	margin: 0 25px 0 0;
	color: #6182be;
}
body.inside div.col-one {
	color: #1e3363;
}

body #bd div.col-one h2 {
	margin: 7px 0 0 0;
	padding: 0 0 0 4px;
}

div.col-one p {
	margin: 0;
	padding: 0 0 0 4px;
}
body.inside div.col-one p {
	padding: 0;
}

div.col-one .read-more {padding: 0 0 0 5px;}
div.col-one div.post {padding: 0 0 7px 0;}

/* Column Two */
div.col-two {
	float: left;
	width: 259px;
	margin: 0 15px 0 0;
	padding: 35px 0 0 0;
	color: #1e3262;
}
body.inside div.col-two {
	padding: 0;
}

div.col-two div.welcome-text {
	background: url(../images/bg-welcome-text.jpg) bottom left no-repeat;
	padding: 0 8px 1px 14px;
	margin: 0 0 9px 0;
}

/* State License */
#bd div.state-license p {
	text-align: center;
	font-style: italic;
	overflow: auto;
	font-size: 77%;
	margin: 0 0 4px 0;
}

div.state-license span {
	display: block;
	margin: 0 0 0 50px;
	width: 152px;
	height: 130px;
	text-indent: -9999px;
	background: url(../images/bg-state-license.gif) top left no-repeat;
}

/* Column Three */
div.col-three {
	float: left;
	width: 360px;
	color: #6182be;
	margin: 0 -3px 0 0;
}

/* Featured Project */
div.featured-project-content {
	padding: 0 0 0 11px;
}
div.featured-project-content img { 
	border:none;
}

div.featured-project-img {
	/*float: left;*/
	background: url(../images/bg-featured-project-left.jpg) top left no-repeat;
}

div.featured-project-img-inner {
	background: url(../images/bg-featured-project-right.jpg) top right no-repeat;
	padding: 8px 0 0 0;
}

div.col-three h2 {
	clear: both;
}


/* Featured Slideshow Styles */
div.featured-project-slider {
	width: 634px;
	height: 500px;
	overflow: hidden;
}
div.featured-slider-nav-outer {
	position: relative;
	width: 634px;
}
div.featured-slider-nav-wrap {
	position: absolute;
	top: -30px;
	width: 634px;
}
a.prev {
	display: block;
	width: 21px;
	height: 25px;
	background: url(../images/btn-slide-left.gif) no-repeat 0 0;
	overflow: hidden;
	text-indent: -9000px;
	float: left;
	display: inline;
}
a.prev:hover {
	background: url(../images/btn-slide-left-hover.gif) no-repeat 0 0;
}
a.next {
	display: block;
	width: 21px;
	height: 25px;
	background: url(../images/btn-slide-right.gif) no-repeat 0 0;
	overflow: hidden;
	text-indent: -9000px;
	float: left;
	display: inline;
}
a.next:hover {
	background: url(../images/btn-slide-right-hover.gif) no-repeat 0 0;
}
a.pause {
	display: block;
	width: 21px;
	height: 25px;
	background: url(../images/btn-slide-pause.gif) no-repeat 0 0;
	overflow: hidden;
	text-indent: -9000px;
	float: left;
	display: inline;
}
a.pause:hover {
	background: url(../images/btn-slide-pause-hover.gif) no-repeat 0 0;
}
a.play {
	display: block;
	width: 21px;
	height: 25px;
	background: url(../images/btn-slide-pause-hover.gif) no-repeat 0 0;
	overflow: hidden;
	text-indent: -9000px;
	float: left;
	display: inline;
	display: none;
}
div.featured-slider-nav {
	float: right;
	display: inline;
}
div.featured-slider-links {
	font-size: 77%;
	font-weight: bold;
	color: #c92b26;
	padding: 5px 0 0 0;
	float: left;
	display: inline;
}
div.featured-slider-links a:link, div.featured-slider-links a:visited {
	color: #c92b26;
	text-decoration: none;
}
div.featured-slider-links a:hover, div.featured-slider-links a.active:link, div.featured-slider-links a.active:visited {
	color: #6182c0;
}
/* @end */

/* @group Common Text Styles */
div#bd p {
	font-size: 85%;
	line-height: 1.4em;
	margin: 0 0 10px 0;
}

div#bd blockquote, div#bd p.quote-by {
	color: #c32a27;
	font-weight: bold;
	font-style: italic;
	font-size: 85%;
	line-height: 1.4em;
	margin: 0 0 10px 0;
}

span.read-more {
	color: #df3427;
	font-size: 85%;
	font-style: italic;
	overflow: auto;
}

span.read-more a:link, span.read-more a:visited {
	color: #df3427;
	text-decoration: none;
}

span.read-more a:hover {text-decoration: underline;}
p span.read-more {font-size: 100%;}
	
/* @end */

/* @group Default Headings */
#bd h1 {
	font-size: 110%;
	color: #5c6e91;
	margin: 0 0 6px 0;	
}
#bd h1 a:link, #bd h1 a:visited {
	color: #5c6e91;
	text-decoration: none;
}
#bd h1 a:hover {
	color: #df3427;
}

#bd h2 {
	font-size: 93%;
	color: #5c6e91;
	margin: 0;
}
#bd h2 a:link, #bd h2 a:visited {
	color: #5c6e91;
	text-decoration: none;
}
#bd h2 a:hover {
	text-decoration: underline;
}
div#side-nav h2 {
	margin-bottom:8px;
	font-weight:normal;
}
div#side-nav h3 {
	font-weight:normal;
}
#bd div#side-nav h2 a:hover, #bd div#side-nav h3 a:hover {
	color: #df3427;
	text-decoration: none;
}
div#side-nav div#news-nav h2, div#side-nav div#news-nav h2 a:link, div#side-nav div#news-nav h2 a:visited {
	color: #df3427;
	text-decoration: none;
}
div#side-nav div#news-nav h2 a:hover {
	color: #5c6e91;
/*	text-decoration: underline;	 */
}

#bd div.slider h2 {
	font-size: 88%;
	font-weight: normal;
	color: #6182be;
}
#bd div.slider h2 a:link, #bd div.slider h2 a:visited {
	font-size: 100%;
	margin-top: 3px;
	color: #6182be;
	font-weight:bold;
}
#bd div.slider h2 a:hover {
	color: #df3427;	
}
#bd h3 {
	font-size: 93%;
	font-style:italic;
	color: #5c6e91;
	margin: 0 0 6px 0;
}
#bd h3 a:link, #bd h3 a:visited {
	color: #5c6e91;
	text-decoration: none;
}
#bd h3 a:hover {
	color: #df3427;
}
#bd h4 {
	font-size: 93%;
	font-style:italic;
	color: #5c6e91;
	margin: 0 0 7px 0;
}

.accent {
	color:#6182be;
}

/* @end */

/* @group Default Lists */
div#bd ul.item-list {
	color: #c32a27;
}
div#bd ul {
	margin:0 0 8px 15px;
	padding:0;
}
div#bd li {
	font-size: 85%;
	margin:0 0 2px 0;	
	padding:0;
}
/* @end */

/* @group Forms */
	
/* @end */

/* @group Default Links - link visited hover active */
a:link, a:visited {
	color: #6182be;
}
a:hover {
	color: #6182be;
}
/* @end */

/* Image Styles */
.img-right {
	float: right;
	margin: 0 0 0 3px;
}

/* @group Misc */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* upload position styles */

#upload-prop-inj {
	position: relative; 
	left: 322px; 
	top: -200px; 
	height: 400px; 
	width: 100px; 
	padding: 1em;
}

#upload-proj-markout {
	position: relative;
	left: 220px;
	top: -100px;
	height: 100px;
	width: 200px;
}






/* @end */