/*
*	Style Notes
*	***********
*	> Web-safe fonts are fine – he wants to proceed with Helvetica for the navigation and all headings. Body copy is also Helvetica. 
*
*	> > font-family: helvetica, sans-serif
*	> > color: #7b7b7b (grey body copy)
*	> > color: #626469 (grey h3)
*	> > color: #919191 (grey header links)
* 	> > color: #f1f0f0 (grey header nav dividers)
*	> > color: #ba2121 (red heading)
*	> > color: #f9ac20 (gold/orange links)
*	> > color: #f38003 (gold/orange links after creative review)
*	> > color: #b2b3b5 (grey footer copy)
*	> > color: #bababa (light grey input box copy)
* 	> > color: #dbdbdb (light grey caption text)
*	> > color: #cbcbcb (light grey horizontal rule)
*	> > color: #e2e2e2 (light grey right column background)
*	> > color: #484c50 (dark gray - links in footer)
*	> > color: #007495 (bio aqua blue)
*	> > width: 960px (main content area)
*
*	> Hover state for the top navigation will always be that gold/orange color.
*
*	> Body anchor tags use the gold color with no underline.  Hover state should underline gold
*
*	> Footer tags color as in comps.  Hover state should underline same color			
*/
* { padding:0; margin:0; }
body { background:#919191 url('../images/headworks-background.jpg') repeat left top; font-family: helvetica, sans-serif; font-size:80%; }
a { color:#eb7b02; text-decoration:none; }
a:hover { color:#eb7b02; text-decoration:underline; }
a img { border: medium none; }
h1 { font-size:130%; }
h2 { font-size:110%; font-weight:normal; }
h3 { font-size:110%; font-weight:normal; }
h4 { font-size:100%; font-weight:bold; line-height:1.1em; }
h6 { font-size:85%; font-weight:normal; }
p { margin-top:0; }
img { margin:0; padding: 0; }
input[type=text] { border:1px solid #bababa; font-size:80%; height:10px; padding:5px 5px 4px 5px; }
#MainContent { margin:0px auto; position:relative; width:960px; }

/* 
*	Blue and Orange Buttons - sliding doors technique
*	http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
*	http://alistapart.com/articles/slidingdoors/
*/

.button { /* generic container (i.e. div) for floating buttons */
	overflow: hidden;
	/*width: 100%;*/
	margin: 4px 0px;
}

.button a {				
	color: #FFF !important;
	display: block;
	float: left;
	font-size: 80%;
	font-weight:bold;
	height: 21px;
	margin-right: 6px;
	padding-right: 17px; /* sliding doors padding */
	text-decoration: none;
}

.blue-button a { background: transparent url('../images/headworks-button-blue-a.gif') no-repeat scroll top right; }
.orange-button a { background: transparent url('../images/headworks-button-orange-a.gif') no-repeat scroll top right; }
.orange-button-w-arrow a { background: transparent url('../images/headworks-button-orange-a-with-arrow.gif') no-repeat scroll top right; }			
.red-button-w-arrow a { background: transparent url('../images/red-button_arrow.gif') no-repeat scroll top right; }
.blue-button-w-arrow a { background: transparent url('../images/blue-button_arrow.gif') no-repeat scroll top right; }
.grey-button-w-arrow a { background: transparent url('../images/grey-button_arrow.gif') no-repeat scroll top right; }


.button a span {				
	display: block;
	line-height: 11px;
	padding: 6px 0 6px 6px;
	text-transform:uppercase;
}

.blue-button a span { background: transparent url('../images/headworks-button-blue-span.gif') no-repeat;}

.orange-button a span, .orange-button-w-arrow a span { background: transparent url('../images/headworks-button-orange-span.gif') no-repeat;} 					
.red-button a span, .red-button-w-arrow a span { background: transparent url('../images/button-red.gif') no-repeat;}
.blue-button a span, .blue-button-w-arrow a span { background: transparent url('../images/button-blue.gif') no-repeat;}
.grey-button a span, .grey-button-w-arrow a span { background: transparent url('../images/button-grey.gif') no-repeat;}

/* 
*	Header
*	header nav dividers color:f1f0f0; height:24px; width:1px; 
*	header nav anchor tags horizontal separation: 28px;
*	header nav height:40px 
*	header logo margin-left:30px; margin-top:44px; 
*	header search button margin-right:30px; margin-top:82px; 
*/

#HeaderContent { background:#ffffff url('../images/headworks-header-background.gif') no-repeat center top; height:176px; }
#HeaderContent a {color:#919191; text-decoration:none;}
#HeaderContent a:hover { color:#f38003; text-decoration:none;}

#Logo { left:30px; position:absolute; top:44px; }
#Search { position:absolute; right:32px; top:82px; width:278px; }
#Search input { margin:0px 0px; width:193px; }


#HeaderNav  * { margin:0; padding:0 }
#HeaderNav { padding:13px 0; left:20px; position:absolute; top:134px; width:100%; }
#HeaderNav a.selected { color:#f38003; }
#HeaderNav.bio a.selected, #HeaderNav.bio li a:hover, #HeaderNav.bio li a:active { color:#007495; }
#HeaderNav .lastChild { border-right-width: 0; }

/* 
*	Body Content
*	body content padding-left:29px; padding-top:40px; line-height:22px 
*/

#BodyContent { color: #7b7b7b; background-color:#ffffff; line-height:20px; height:1%; padding:0 0 30px 0; }
#BodyContentTopShadow { background:url('../images/headworks-maincontent-shadow-top.png') no-repeat center top; height:23px; left:0; position:absolute; width:960px; z-index:100; }			
.greySidebar { background:url('../images/headworks-gray-sidebar.gif') repeat-y; }

/* 
*	Home Page Body Content
*	Two images height:387px; width: 480px;
*	Two images border-bottom: 4px;
*/

#BodyContent .portlet { padding:38px 25px 24px 25px; background:url('../images/headworks-maincontent-shadow-content-region-sidebar.png') no-repeat left top; min-height:175px; } 			
#BodyContent h1 { color:#ba2121; margin:0 0 5px 0; text-transform:uppercase; }
#BodyContent h2 { color:#ba2121; margin:0px; text-transform:uppercase; line-height:1.2em; margin:0 0 5px 0; }
#BodyContent h3 { color:#626469; margin:0px; }
#BodyContent h6 { color:#626469; margin:0px; } 
#BodyContent.bio h1, #BodyContent.bio h2 { color:#007495; }
#BodyContent hr { background-color:#cbcbcb; border:none; height:1px; margin:15px 0px;}
#BodyContent p { margin:0 0 20px 0; }
#BodyContent p strong { font-weight:normal; font-size:15px; }
#BodyContent .bioImage { border-bottom: 4px solid #0095b5; height:280px; } /* This height needs to be whatever the height of the image is. */
#BodyContent .mechanicalImage { border-bottom: 4px solid #f38003; height:280px; } /* This height needs to be whatever the height of the image is. */
#BodyContent .captionBox {
    background-color: #000000;
    height: 120px;
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
	filter: alpha(opacity=50);				
    top: -120px;
    z-index: 10; 
}
#BodyContent .captionText { 
    color: #DBDBDB;
    height: 66px;
    padding: 5px 29px;
    top: -118px;
    z-index: 20; 
    line-height:17px;
}
#BodyContent .captionText H1 { color:#FFFFFF; }

#BodyContent .fullwidth { width:960px; }
/* four column layout - half quarter quarter - homepage*/
#BodyContent .halfwidth { width:480px; overflow:hidden; }
#BodyContent .quarterwidth { width:182px; overflow:hidden; } /* takes into account the 29px padding on the portlet */

/* three column layout - narrow wide narrow - mechanical subpage */
#BodyContent .wideandnarrowwidth { width:710px; overflow:hidden; }
#BodyContent .widewidth { width:410px; overflow:hidden; } /* takes into account the 25px padding on the portlet */
#BodyContent .narrowwidth { width:200px; overflow:hidden; } /* takes into account the 25px padding on the portlet */

/* original Headworksusa.com styles modified to fit new theme */
#BodyContent .rightbox { border-bottom:1px solid #cbcbcb; padding-bottom:15px; margin-bottom:15px; }
#BodyContent .rightbox_head, #BodyContent .rightbox_head a, #BodyContent .rightbox_head a:hover, #BodyContent .rightbox_head a:active  { color:#ba2121; font-size:110%; font-weight:normal; margin:0px; text-transform:uppercase; } /* same as H2 */
#BodyContent.bio .rightbox_head, #BodyContent.bio .rightbox_head a, #BodyContent.bio .rightbox_head a:hover, #BodyContent.bio .rightbox_head a:active { color: #007495; }
#BodyContent .rightbox_news_text img, #BodyContent #region-Main img { margin:5px 0 5px 0; }
#BodyContent .rightbox_news_text .photo img { margin:0px; }
#BodyContent th { background-color:#e2e2e2; text-align:left; }
#BodyContent td.centerbox, #BodyContent td.box { border:1px solid #e2e2e2; background-color:#FFFFF2; padding:15px; margin:0 0 15px 0; }
#BodyContent .articleName { color:#626469; font-size:110%; font-weight:bold; }

/* 
*	Footer Content
*	footer anchor tags padding:5px 7px; background-color:#484c50; (dark gray)
*/

#FooterContent { background:url('../images/headworks-footer-shadow-top.png') no-repeat center top; color:#b2b3b5; font-size:1em; line-height:22px; padding:20px 30px; }	
#FooterContent a { background-color:#484c50; color:#b2b3b5; padding:5px 7px; text-decoration:none; }
#FooterContent a:hover { background-color:#484c50; color:#b2b3b5; padding:5px 7px; text-decoration:underline; }

.align-right { text-align:right }
.clear-float { clear:both }
.display-inline { display:inline; }				
.float-right { float:right }
.float-left	 { float:left }	
.fillFloat { clear:both; line-height:0; height:0; }
.position-absolute { position:absolute; }
.position-relative { position:relative; }


/* Brian's Additions */

.sidebar_casestudies_photo {
	float:right;
	margin:0 0 5px 5px;
}

#BodyContent ul {
	margin:-10px 0 20px 15px;
}

#BodyContent ul li {
	line-height:1.3em;
	margin:0 0 5px 0;
}

#BodyContent .narrowwidth .photo {
	margin:0 0 15px 0;
}

#BodyContent .narrowwidth .photo h6 {
	font-style:italic;
	line-height:1.2em;
}

#BodyContent .diagram {
	margin:0 0 15px 0;
}

#BodyContent h2.margin-bottom {
	margin-bottom:15px;
}

#BodyContent h1.margin-bottom {
	margin-bottom:15px;
}

#BodyContent h4.margin-bottom {
	margin-bottom:15px;
}

#BodyContent .narrowwidth .thumb_left {
	float:left;
	margin:0 8px 8px 0;
}

#BodyContent  #region-Main img.margin-right {
	margin:0 8px 8px 0;
}

#region-Right a { color:#BA2121; }
.bio #region-Right a { color:#007495; }

.no-underline { text-decoration:none!important; }

table p a strong {
	font-weight:bold!important;
	font-size:inherit!important;
}


#Logo {
    width:194px;
    height:64px;
    background-image: url(/images/headworks-logo.gif);
}

.bio #Logo {
    width:241px;
    height:64px;
    background-image: url(/images/headworks-bio-logo.gif);   
}

#Logo a {
       display:block;
       width:100%;
       height:100%;
       text-indent:-999px;
       overflow:hidden;
}

ul.breadcrumb-list {
    list-style-type:none;
    margin:0!important;
    padding:0!important;
}

ul.breadcrumb-list li {
    float:left;
    margin-right:5px!important;
}

ul.breadcrumb-list li a {
    font-size:11px;    
}

ul.breadcrumb-list li:after {
    content: " // ";
    font-size:11px;
}

ul.breadcrumb-list li.last:after {
    content: none!important;
    font-size:11px;
}

div.clearer {
    font-size:1px;
    clear:both;
    height:1px;
}

.more-info-callout p {
    margin:0!important;
}

.more-info-callout {
    border:1px solid #aaa;
    padding:15px;
    border-radius:5px;
    background-color:#FFFFF2;
}

.more-info-callout ul, .more-info-callout ul li {
    margin:0!important;
    list-style-type:none;
}

.more-info-callout h3 {
    font-weight:bold;
    color:#007495!important;
}