/* ========================================================================== HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) ========================================================================== */ html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ @font-face { font-family: 'Rockwell'; src: url('../fonts/rockwell.eot'); src: url('../fonts/rockwell.eot') format('embedded-opentype'), url('../fonts/rockwell.woff') format('woff'), url('../fonts/rockwell.ttf') format('truetype'), url('../fonts/rockwell.svg#Rockwell') format('svg'); } html {outline:none;} body {background:url(../img/css/bg.jpg)} a {text-decoration:none; color:#0058A9} header, nav#top-nav, #home-top, #home-messaging, #home-buckets, footer {width:980px; margin:0 auto;} header {height:137px; position:relative; background: #0058a9; background: -moz-linear-gradient(left, #0058a9 0%, #013b72 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0058a9), color-stop(100%,#013b72)); background: -webkit-linear-gradient(left, #0058a9 0%,#013b72 100%); background: -o-linear-gradient(left, #0058a9 0%,#013b72 100%); background: -ms-linear-gradient(left, #0058a9 0%,#013b72 100%); background: linear-gradient(to right, #0058a9 0%,#013b72 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0058a9', endColorstr='#013b72',GradientType=1 ); } header a.logo {float:left; width:142px; height:113px; display:block; position:relative; margin-top:13px; margin-left:33px; } header h1 {float:left; width:200px; margin-top:20px; padding-left:10px; color:#fff; font-family:"Times New Roman", Times, serif; font-size:2em; line-height:1em; text-transform:uppercase; font-weight:normal; } .emergency-messaging {float:right; color:#fff; padding-top:20px; min-width:200px; padding-right:30px;} form#site-search {width:265px; height:25px; float:right; position:absolute; right:30px; bottom:15px;} form#site-search input {margin:0; padding:0; border:none; float:left;} form#site-search input.text {width:213px; height:25px; margin-right:6px;} form#site-search input.button {width:46px; height:25px; font-size:.6em; font-weight:bold;text-transform:uppercase; color:#0058a9; background:#fff;} nav#top-nav {height:50px; background:#999; position:relative; z-index:100;} nav#top-nav ul {margin:0; padding:0;} nav#top-nav li {float:left; width:162px; } nav#top-nav li:not(:first-child){ border-left:#858585 1px solid;} nav#top-nav a {display:block; line-height:16px; font-size:.8em; padding:17px 0;text-align:center;color:#fff; text-transform:uppercase; font-family:Rockwell} nav#top-nav li.two-line a {padding:8px 0;} nav#top-nav a:hover, nav#top-nav a.on {background-color:#fc0; color:#0058a9} #home-top, #slideshow, nav#quick-nav {height:284px;} #slideshow, nav#quick-nav {float:left} #home-messaging, #home-buckets {background:#eee;} #home-top {overflow:hidden; box-shadow:0 10px 10px -10px #000; position:relative; z-index:0;} #slideshow {width:637px; background:#fff; box-shadow:0 0 10px #000; position:relative; z-index:100;} #slides {position:relative; z-index:0;} #slide-nav {list-style:none; margin:0; padding:0; position:absolute; right:110px; bottom:10px; z-index:100;} #slide-nav li {display:inline;} #slide-nav a {float:left; text-indent:-999em; display:block; height:10px; width:10px; margin-left:7px; border:#666 2px solid; background:#fff; border-radius:10px;} #slide-nav li.activeSlide a {background-color:#edab06; border-color:#edab06;} nav#quick-nav {padding-right:46px;width:297px; background:#ccdeee;} nav#quick-nav ul {margin:14px 0 0; padding:0; border-top:#8eb5d9 1px solid; border-bottom:#fff 1px solid;} nav#quick-nav li {margin:0; padding:0; border-top:#fff 1px solid; border-bottom:#8eb5d9 1px solid;} nav#quick-nav a {display:block; height:83px; line-height:83px; padding-left:53px; font-size:1.5em; font-weight:bold; color:#0058a9; font-family:Rockwell; text-transform:uppercase; text-shadow: 1px 1px #fff;} nav#quick-nav a:before {content:"\bb\a0"} nav#quick-nav a:hover {background:#fc0;} #home-messaging {width:926px; padding:13px 27px 13px 27px;} #home-messaging p {color:#666; font-size:1.4em; line-height:1.45em; font-family:Rockwell} #home-buckets {overflow:hidden; border-top:#d7d7d8 1px solid;} #bucket-left {width:343px;} #bucket-mid {width:291px; background:#ccdeee; text-align:center;} #bucket-right {width:298px;} .bucket {float:left;min-height:225px; height:auto !important; height:225px;} .bucket h2 {font-size:1.2em; margin:0 0 8px; font-weight:bold; color:#0058a9; font-family:Rockwell; text-transform:uppercase;} #bucket-left h2 {padding-left:28px; padding-top:14px;} #bucket-left ul {margin:0; padding:0;} #bucket-left li {display:block; font-size:1em; height:1.4em; line-height:1.4em; color:#000; font-family:Rockwell;padding:0 0 0 28px} #bucket-mid {color:#0058a9; padding-top:10px; border-left:#d7d7d8 1px solid; border-right:#d7d7d8 1px solid;} #bucket-mid img {margin-bottom:10px; border:none;} #bucket-right h2 {padding-left:14px; padding-top:14px; margin:0;} #bucket-right ul {margin:0; padding:0 0 0 14px;} #bucket-right li {list-style:none; font-size:.8em; line-height:1.2em; padding:10px 0;} #bucket-right li:not(:last-child) { border-bottom:#008c99 1px dotted;} #bucket-right a {color:inherit} #bucket-right a:hover {color:#0058a9} #bucket-right a span {font-weight:bold; color:#03f; text-transform:uppercase;} #secondary {} #secondary article {width:890px; padding:40px 45px; background:#fff; margin:0 auto; overflow:hidden;} #secondary article h1 {font-size:2em; line-height:1em; color:#0058a9; font-family:Rockwell, sans-serif; font-weight:normal; margin-bottom:10px; text-transform:uppercase;} #secondary article h2 {font-size:1.5em; line-height:1em; color:#0058a9; font-family:Rockwell, sans-serif; font-weight:normal; margin-bottom:10px; } #secondary article h3 {font-size:1em; line-height:1em; color:#000; font-family:Rockwell, sans-serif; font-weight:bold; margin-bottom:0; } #secondary article ul {margin:0 0 15px;} #secondary article ul ul {margin:0;} #secondary article p, #secondary article li {font-size:.8em; line-height:1.6em;} #secondary article li li {font-size:1em;} #secondary article p {margin-bottom:15px;} #secondary article li {} #secondary.blog article p, #secondary.blog article li {font-size:.9em;} #secondary hr {clear:both; margin:1em 0;} #secondary article#equipment-header p {font-size:1.2em; line-height:1.2em; color:#666; font-family:Rockwell, sans-serif; font-weight:normal; margin-bottom:0;} nav#related {width:950px; padding:10px 15px; background:#fff; margin:0 auto; overflow:hidden; background: #0058a9; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNThhOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTNiNzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #0058a9 0%, #013b72 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0058a9), color-stop(100%,#013b72)); background: -webkit-linear-gradient(top, #0058a9 0%,#013b72 100%); background: -o-linear-gradient(top, #0058a9 0%,#013b72 100%); background: -ms-linear-gradient(top, #0058a9 0%,#013b72 100%); background: linear-gradient(to bottom, #0058a9 0%,#013b72 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0058a9', endColorstr='#013b72',GradientType=0 ); } nav#related h4 {float:left; font-size:.7em; color:#fff; line-height:10px; padding:5px 0;} nav#related ul {float:left; font-size:.7em; margin:0; padding:0;} nav#related li {float:left; border-right:#fff 1px dotted;} nav#related li:last-child {border-right:none;} nav#related li a {display:block; color:#fff; padding:5px 10px; line-height:10px;} nav#related p {float:left; font-size:.7em; line-height:10px; padding-left:10px; padding:5px 10px;} nav#related p a {color:#fc0} nav#related a:hover {text-decoration:underline;} nav#equipment-listing {width:890px; padding:40px 45px; background:#fff; margin:0 auto; overflow:hidden;} nav#equipment-listing > ul {margin:0; padding:0; width:890px;} nav#equipment-listing > ul > li {width:219px; height:219px; float:left; margin:0 4px 44px 0; position:relative;} nav#equipment-listing > ul > li:nth-child(4n+4) {margin-right:0;} nav#equipment-listing img {width:217px; height:172px; border:#999 1px solid;} nav#equipment-listing span {display:block; width:219px; height:47px; color:#fff; text-align:center; font-size:.7em; font-weight:bold; text-transform:uppercase; text-shadow:1px 1px #000; background:#0058a9;} nav#equipment-listing span a {color:#fff;} nav#equipment-listing ul ul {margin:0; padding:0; } nav#equipment-listing ul ul li {width:219px; height:auto; border-top:#3670b3 1px solid; border-bottom:#6499cb 1px solid;} nav#equipment-listing ul ul a {display:block; width:189px; line-height:10px; padding-left:7px; padding:8px 15px; color:#fff; font-size:.7em; font-weight:bold;text-shadow:1px 1px #000; background:#3d80be; position:relative;} nav#equipment-listing ul ul a:before {content:"\bb\a0"; position:absolute; left:7px; top:7px;} nav#equipment-listing ul ul a:hover {background:#fc0} nav#equipment-listing > ul > li span {top:173px; } nav#equipment-listing > ul > li:hover span {position:absolute; top:0; left:0; transition:top .2s; } nav#equipment-listing > ul > li > ul {opacity:0;} nav#equipment-listing > ul > li:hover > ul {opacity:1; transition:opacity .75s ease-in-out; position:absolute; top:47px; left:0; } #blog-content {overflow:hidden; width:980px; margin:0 auto; background:#fff;} .news #filter {padding: 40px 45px 0;} .news #filter h2 {font-size:1em;} .news #filter {} #blog-posts {width:750px; padding-right:25px; margin-right:24px; border-right:#069 1px dotted; float:left;} .post_details {font-size:.8em;} .news#secondary article { width: auto; } .news aside {width:155px; float:left; padding-right:25px;} .news aside h3 {font-size:1em; font-weight:normal; color:#069; margin-bottom:5px; margin-top:20px; color:#666 } .news aside ul {margin:0; padding:0;} .news aside li {list-style:none; padding:5px 0; border-top:#eee 1px solid; font-size:.8em} .news aside li:first-child {border-top:none;} h4.share-this-post {padding-left:3px; margin-bottom:10px !important;} #disqus_thread {border-top:#069 1px dotted; margin-top:20px; padding-top:20px;} #product-image {width:300px; float:left; padding-right:20px;} #product-details {width:570px; float:left; } .popup-gallery {margin:1em 0;} .popup-gallery a {display:block; width:18%; padding:0 1%; margin:0 0 1em; float:left;} .popup-gallery img {display:block; width:100%; height:auto;} form#contact-form {} form#contact-form label, form#contact-form input, form#contact-form textarea , form#contact-form p {margin-bottom:10px; float:left; font-size:12px;} form#contact-form input.text, form#contact-form textarea {width:200px;} form#contact-form label {float:left; clear:left; width:150px; text-align:right; padding-right:5px;} form#contact-form p, form#contact-form input.button {clear:left; position:relative; left:155px;} form#contact-form textarea {height:200px;} form#contact-form span {color:red;} footer {background:#0056a7; overflow:hidden;} footer a.logo {width:84px; height:64px; margin-right:10px; float:left; margin-top:25px; margin-left:42px;} p#address {float:left; margin-top:30px; color:#fff; font-size:.8em; line-height:1.4em;} p#address a {color:#fff;} p#address a:hover {text-decoration:underline;} nav#footer-nav {float:right; margin-right:-55px;} nav#footer-nav ul {margin:0; padding:0; padding:25px 0 40px 15px;box-shadow:inset 10px 0 10px -10px #222; width:auto; float:right; overflow:hidden;} nav#footer-nav li {list-style:none; font-size:.7em; font-weight:bold; float:left; display:inline; width:50%;} nav#footer-nav a {color:#fff;} nav#footer-nav a:hover {text-decoration:underline;} /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (min-width: 35em) { } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { } /* ========================================================================== Helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }