/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Reset styles
========================================================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
font-weight:inherit;
/* font-style:inherit; */
font-family:inherit;
/* vertical-align: baseline; */
}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
/* ==========================================================================
Base styles
========================================================================== */
html,button,input,select,textarea {color:#555;}
body {background-color:#002841; font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#555;}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background:#b3d4fc; text-shadow:none;}
/* A better looking default horizontal rule */
hr {display:block; height:1px; border:0; border-top:1px solid #fff; border-bottom:1px solid #e5e5e5; margin:30px 0px 30px 0px; padding:0;}
/* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
img {vertical-align:middle;}
/* Remove default fieldset styles. */
fieldset {border:0; margin:0; padding:0;}
/* Allow only vertical resizing of textareas. */
textarea {resize:vertical;}
.pink {color:#F9C !important;}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;}
/* ==========================================================================
AUTHOR'S CUSTOM STYLES
========================================================================== */
/* Base Fonts */
p {font-size:.875em; line-height:1.500em; margin-bottom:20px;}
a {color:#3399cc; text-decoration:none;}
.block {display:block;}
/* Base Lists */
/* #content ul, #content ol {margin-bottom:1.25em;}
#content li {font-size:.875em; margin-left:1.25em; margin-bottom:.375em;} */
#content ul, #content ol {margin:5px 0px 20px 0px;}
#content li {font-size:.875em; margin-left:1.25em; margin-bottom:.250em;}
/* Allows scaling */
/* -------------- */
/* img {
max-width: 100%; */
/* width: auto\9; */ /* ie8 */
/* } */
/* img, object, embed, video, iframe {max-width: 100%;} */
/* IE 6 does not support max-width so default to width 100% */
/* .ie6 img {width:100%;} */
/* -------------- */
.slideshow img {max-width:none;}
/* ================ STRUCTURE ================ */
#wrapper-outer {
background:url(../SiteImages/bg_texture_repeat.jpg) top repeat #fff;
}
/*#wrapper-inner {background:url(../SiteImages/bg_subpage_top.jpg) top repeat-x;}*/ /* Original before collage bkg was implemented */
#wrapper-inner {background:url(../SiteImages/bg_subpage_collage.jpg) top no-repeat;}
#wrapper-inner.homepage {
background:url(../SiteImages/bg_homepage_collage.jpg) top no-repeat;
}
/* #header,
#main-left-sidebar,
#main-full,
#footer {
max-width: 1000px;
margin: 0 auto;
} */
/* ============================ */
/* ========== HEADER ========== */
/* ============================ */
#header-wrap {width:100%; /* background:url(../SiteImages/bg_hp_header.jpg) top repeat-x; */ padding-top:30px;}
#header {width:1000px; margin:0 auto; position:relative;} /* Do not alter as the top nav will dissappear in IE7 */
#header .column-container {position:relative;}
#header .logo {float:left; width:45%; padding-right:5%;}
#header .logo img {margin-bottom:5px;}
#header #header-assets-wrap {float:left; width:50%;}
#header #career-btn {width:100%; }
#header #career-btn img {float:right; display:block; margin-right:5px;}
#header #calibration-btn {width:100%; }
#header #calibration-btn img {float:right; display:block;}
#header #text-box {
width:100%;
clear:right;
margin:10px 0px 0px 0px;
padding:0;
font-family:"OpenSansCondensedLight", Arial, Helvetica, sans-serif;
font-size:1em;
color:#666;
font-weight:normal;
font-style:normal;
line-height:normal;
text-align:right;
/* white-space:nowrap; */
overflow:hidden;
float:right;
}
/* ============================ */
/* =========== MAIN =========== */
/* ============================ */
#hpmain {width:100%; padding:40px 0 0px 0; background-color:#ffe716;}
#main {width:960px; margin:0 auto; padding-bottom:50px;}
#content-wrap {width:100%;}
#main.layout-left-column #content-wrap {float:right; width:77.08333333333333%;} /* 740/960*100 */
#left-sidebar-wrap {float:left; display:inline; width:16.66666666666667%;} /* 160/960*100 */
/* Special Layout Styles */
#contact-col-wrap .col1 {float:left; width:45%;}
#contact-col-wrap .col2 {float:left; width:45%; padding-left:10%;}
#safety-alerts-wrap .col1 {float:left; width:49%; padding-right:2%}
#safety-alerts-wrap .col2 {float:left; width:49%;}
/* ============================ */
/* ========== FOOTER ========== */
/* ============================ */
#footer-wrap {width:100%; background:url(../SiteImages/bg_footer_bars.jpg) top repeat-x; padding-top:27px; background-color: #880015;}
#footer {width:1000px; min-height:225px; margin:0 auto; background:url(../SiteImages/bg_footer.jpg) top right no-repeat;}
#footer-splash {float:left; width:25%;}
#footer-contact {float:right; width:75%;}
#footer-contact, #footer-contact a {color:#93abbc;}
#footer-contact a:hover {color:#fff;}
#footer-contact-details {float:right; width:auto; padding:1% 2% 1% 0; font-size:.938em; line-height:1.438em; text-align:right; border-right:1px solid #869eb1;}
#footer-contact p {margin:0;}
#footer-logo {float:right; width:auto; padding:1% 0 1% 2%;}
div#footer-copyright {font-size:.750em; color:#93abbc; text-align:right; margin-top:15px;}
/* ============================ */
/* ============ NAV =========== */
/* ============================ */
/* == Header Nav == */
#header-nav-wrap {padding-top:10px;}
#header-nav {margin:0; float:left;}
#header-nav ul.sf-menu li {background:url(../SiteImages/bg_nav.jpg) left repeat-x; background-color:#880015; margin:0; padding:0;}
#header-nav ul.sf-menu li:hover {background:none; background-color:#880015;}
#header-nav ul.sf-menu li a {font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif; font-size:1.188em; color:#fff; text-transform:uppercase; padding:25px 23px; white-space:nowrap;}
#header-nav ul.sf-menu li a:hover {color:#ffe716;} /* top level text hover color */
#header-nav ul.sf-menu li:hover a {color:#ffe716;} /* retains top level text hover color when hovering over dropdown menu */
#header-nav ul.sf-menu li ul li {background:none; background-color:#880015; border-bottom:1px solid #2b9ad2;}
#header-nav ul.sf-menu li:hover ul li a {color:#fff;}
#header-nav ul.sf-menu li ul li a {font-family:Arial, Helvetica, sans-serif; font-size:.813em; color:#fff; text-transform:none; padding:5px 8px; white-space:normal;}
#header-nav ul.sf-menu li ul li a:hover {color:#ffe716;}
.header-nav-shadow {display:block; margin:0 auto;}
/* Header Login Button */
#clientlogin-button {margin:0; float:left;}
#clientlogin-button ul {display:block; /*position:relative;*/ margin:0; padding:0;}
#clientlogin-button ul li {margin:0; padding:0; list-style:none; position:relative; background-color:#005586;}
#clientlogin-button ul li:hover {background:none; background-color:#005a8e;}
#clientlogin-button ul li a {display:block; /*position:relative;*/ font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif; font-size:1.188em; color:#fff; text-transform:uppercase; padding:25px 21px; white-space:nowrap;}
#clientlogin-button ul li a:hover {color:#ffe716;} /* top level text hover color */
/* == Sidebar Nav == */
#sidebar-nav-wrap ul {width:100%; list-style:none; margin:0px 0px 40px 0px; padding:0;}
#sidebar-nav-wrap ul li {margin:0; display:block; padding:5px 5px 5px 0; border-bottom:1px solid #fff;}
#sidebar-nav-wrap ul li:hover {}
#sidebar-nav-wrap ul li a {font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif;color:#3399cc; font-size:.938em; line-height:1.250em; font-weight:normal; text-transform:uppercase; display:block;}
#sidebar-nav-wrap ul li a:hover {color:#ccc; text-decoration:none; background:none;}
#sidebar-nav-wrap p {font-size:.675em; font-style:italic;}
/* == Footer Nav == */
#footer-links-wrap {width:100%; margin:30px 0 16px 0;}
#footer-nav-wrap {float:right;}
#footer-nav-wrap ul {list-style:none; margin:0; padding:0;}
#footer-nav-wrap ul li {float:left; margin:0; padding:0;}
#footer-nav-wrap ul li a {display:block; font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif; text-transform:uppercase; color:#93abbc; font-size:1em; padding:3px 7px; margin:0px 0px 2px 0px;}
#footer-nav-wrap ul li a:hover {color:#fff; text-decoration:none;}
/* Sub-Contractor button */
#subcontractor-login {float:right; margin-left:10px;}
#subcontractor-login img {display:block;}
/* ============================ */
/* ========== CONTENT ========= */
/* ============================ */
/* Homepage Feature Panels */
#hpfeaturepanels-wrap {width:100%; padding-top:20px; /* background:url(../SiteImages/bg_hp_panels_texture_repeat.jpg) top repeat-x; */}
#hpfeaturepanels {width:1000px; margin:0 auto; padding-bottom:20px;}
.hpfeaturepanel {float:left; width:25%; padding-bottom:20px; vertical-align:top;}
.hpfeaturepanel .feature-image {width:99.75%; background-color:transparent !important;}
.hpfeaturepanel .feature-image img {display:block; width:100%;}
.hpfeaturepanel .feature-image:hover ~ .feature-image-title a {background-color:#ffe716;} /* The (~) is a General Sibling Selector. An adjacent Siblin Selector (+) can also be used but it is slightly more buggy. */
.hpfeaturepanel .feature-image-title {border-right:1px solid #ccc;}
.hpfeaturepanel .feature-image-title a {display:block; background:url(../SiteImages/arrowicon.png) left no-repeat; background-color:#fff; font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif; font-size:150%; color:#666; text-transform:uppercase; padding:14px 5px 14px 35px;}
.hpfeaturepanel .feature-image-title a:hover {background-color:#ffe716;}
.feature-image-shadow img {display:block;}
.hpfeaturepanel .feature-text {width:90%; margin:0 auto; color:#fff;}
.feature-text-title {font-family:Arial, Helvetica, sans-serif; font-size:1.125em; line-height:1.2em; font-weight:bold; color:#000; text-transform:none; margin-bottom:10px;}
.feature-text-title h1,
.feature-text-title h2,
.feature-text-title h3,
.feature-text-title h4,
.feature-text-title h5,
.feature-text-title h6,
.feature-text-title p {font-family:inherit; color:inherit; font-size:inherit; line-height:inherit; font-weight:inherit; font-style:inherit;}
.feature-text p {margin-bottom:.750em; line-height:1.2em; color:#000;}
.feature-text a {font-weight:bold; color:#ffe716;}
.feature-text a:hover {font-weight:bold; color:#FF0;}
/* Homepage Intro */
#hpintro-wrap {width:960px; margin:0 auto; background-color:#ffe716;}
#hpintro-wrap div.container1 {float:left; width:70%;}
#hpintro-wrap div.container1 h1 {font-size:3.250em; text-transform:none; color:#333; margin-bottom:15px;}
#hpintro-wrap div.container1 p {font-size:.875em; line-height:1.438em;}
#hpintro-wrap div.container2 {float:left; width:22%; margin-left:8%;}
#hpintro-wrap div.container2 div#service-ceo-wrap {margin:20px 0;}
#hpintro-wrap div.container2 div#service-ceo-wrap img {display:block;}
/* Section Title */
#section-title {font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif; color:#005586; font-weight:normal; font-style:normal; font-size:1.938em; line-height:1.250em; text-transform:uppercase; padding-bottom:20px; margin-bottom:30px; border-bottom:1px solid #e5e5e5;}
#section-title h1,
#section-title h2,
#section-title h3,
#section-title h4,
#section-title h5,
#section-title h6 {font-size:inherit; line-height:inherit; font-weight:inherit; font-style:inherit; margin:0;}
/* Page Title */
#page-title {font-family:"OpenSansCondensedBold", Arial, Helvetica, sans-serif; color:#005586; font-weight:normal; font-style:normal; font-size:2.688em; line-height:normal; margin:0px; text-transform:uppercase;}
#page-title h1,
#page-title h2,
#page-title h3,
#page-title h4,
#page-title h5,
#page-title h6,
#page-title p {font-size:inherit; line-height:inherit; font-weight:inherit; font-style:inherit; margin:0;}
/* Banner Pic */
.banner-pic {width:100%;}
.banner-pic img {display:block; padding-bottom:29px; background:url(../SiteImages/bannerpic_shadow.png) bottom center no-repeat;}
/* Contact Box */
.contact-box {width:100%; margin:10px 0; padding-bottom:10px; border-bottom:1px solid #fff;}
.contact-name h3 {font-size:1.250em;}
.contact-title h4 {font-size:1.125em; font-family:"OpenSansCondensedLight", Arial, Helvetica, sans-serif;}
.contact-box p {margin-bottom:0;}
/* Image & Description */
.image-description-wrap {width:99%; overflow:hidden; padding:30px 0 20px 0; border-bottom:1px solid #fff;}
.image-description-wrap .image {float:left; width:17%; padding-right:2%;}
.image-description-wrap .image img {display:block; max-width:125px; height:auto; margin:0 auto;}
.image-description-wrap .description {float:none; overflow:hidden; word-wrap:break-word;}
.image-description-wrap .description h3 {margin-top:0;}
.image-description-wrap .description p {margin-bottom:10px;}
/* Add This */
div#addthis-toolbox-wrap {margin-top:0px;}
div#addthis-toolbox-wrap p {font-size:.750em; margin:0}
div#addthis-toolbox-wrap div.addthis_toolbox a {margin-bottom:2px;}
/* Youtube */
/* note: ie7.css has special styling as inline-block isn't supported in ie7 browser */
.youtubeBlock {display:inline-block; vertical-align:top; width:48%; margin:0 .75% 4.5% .75%;}
iframe.youtube-player {width: 100%;}
.youtubeBlock h4 {padding-top:5px;}
.youtubeBlock p {font-size:.750em;}
/* ============================ */
/* =========== FORM =========== */
/* ============================ */
#form-wrap {padding:20px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background-color:#fbfbfb;}
#contact-form {width:100%; padding:0; margin:0; border-collapse:collapse;}
#contact-form td {padding-top:5px;}
#contact-form label {font-size:1em;}
#contact-form input, #contact-form textarea {width:98%; margin:0;}
.formfield-small {width:auto !important;} /* Keeps a form field from expanding 100% */
.formbutton {width:auto !important;} /* Keeps the Submit button from expanding 100% */
label.required {font-weight:bold;}
/* ==========================================================================
Helper classes
========================================================================== */
/* Image replacement */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {display none !important; visibility:hidden;}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility:hidden;}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {clear: both;}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {*zoom: 1;}
.clear {clear:both;}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}