/*
/* Stylesheet for HPR Displays
/* Written By: Uniseo and RedstoneX
/* Version 1.0 
*/

/* Global Settings */
* {margin: 0px; padding: 0px;}
a img {border: none; outline: none;}
a:active, a:focus {outline: 0;}
.clear {clear: both;}
img, div { behavior: url(iepngfix.htc);}
.left {float: left;}
.right {float: right;}


/* Site Structure */
body {background-image: url(images/background.jpg); background-position: top center; background-repeat: no-repeat;}
#page-wrapper {width: 960px; margin: 0 auto;}
#top-space {width: 960px; height: 78px; margin: 0 auto; background-image: url(images/top-space-fr.jpg); background-repeat: no-repeat;}
#navbar {width: 960px; height: 30px; margin: 0 auto;  background-image: url(images/navbar.jpg); background-repeat: no-repeat;}
#header {width: 960px; height: 292px; margin: 0 auto; background-image: url(images/header.jpg); background-repeat: no-repeat;}
#content-wrapper {width: 960px; min-height:650px; height:auto !important; height:650px; margin: 0 auto; background-image: url(images/content-grad.jpg); background-repeat: no-repeat;}
#left-column {width: 690px; float: left; padding: 0px;}
#right-column {width: 270px; float: left;}
#footer {margin-top: 50px; padding-top: 15px; padding-bottom: 15px; margin-bottom: 20px; text-align: center; border-top: 1px solid #cccccc;}

/* Top Navagation */
#top-nav {margin: 0; padding: 0; list-style: none; font-family: Arial; float: right; text-align: right;}
#top-nav li {display: block; height: 30px; float: left; padding: 0px 10px 0px 0px; margin: 0px 0px 0px 10px; background-image: url(images/divider.jpg); background-repeat: no-repeat; background-position: 100% 0%;}
#top-nav li a {display: block; height: 18px; float: left; font-size: 90%; text-align: center; text-decoration: none; color: #ffffff; padding: 7px 5px 5px 5px !important; padding: 6px 5px 5px 5px; background-image: url(images/top-rollover.jpg);}
#top-nav li a:hover {color: #ffffff; background-position: 0% 100%;}
#top-nav li.last {background-image: none;}

/* Sidebar Navigation */
#side-navigation-container {width: 255px; position: relative; left: 14px; top: 20px; overflow: hidden;}
#sidenav-top {width: 255px; height: 31px; background-image: url(images/sidenav-top.png);}
#sidenav-bottom {width: 255px; height: 31px; background-image: url(images/sidenav-bottom.png);}
#side-navigation {list-style: none; background-color: #2b6483;}
#side-navigation li {width: 255px; height: 30px; background-image: url(images/sidenav-item.jpg); overflow: hidden;}
#side-navigation li a {display: block; width: 255px; height: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; padding: 6px 10px 0px 25px; text-decoration: none;}
#side-navigation li a:hover {color: #54bcf5;}
#side-navigation li h3 {font-weight: bold; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 17px; padding: 5px 5px 3px 15px; border: 0px;}

/* Content Style & Font Settings */
#left-column p {padding: 5px 50px 5px 20px; font-family: Arial; font-size: .85em; color: #666666; line-height: 130%;}
#left-column h1 {padding: 20px 50px 5px 20px; font-family: "Trebuchet MS"; font-weight: normal; color: #d12121; font-size: 150%;}
#left-column h2 {padding: 20px 50px 5px 20px; font-family: "Trebuchet MS"; font-weight: normal; color: #d12121; font-size: 125%;}
#left-column h3 {padding: 20px 50px 5px 20px; font-family: "Trebuchet MS"; font-weight: normal; color: #d12121; font-size: 120%;}
#left-column h4 {padding: 20px 50px 5px 20px; font-family: "Trebuchet MS"; font-weight: normal; color: #d12121; font-size: 115%;}
#left-column h5 {padding: 20px 50px 5px 20px; font-family: "Trebuchet MS"; font-weight: normal; color: #d12121; font-size: 110%;}
#left-column h6 {padding: 20px 50px 5px 20px; font-family: "Trebuchet MS"; font-weight: normal; color: #d12121; font-size: 100%;}
#left-column a {text-decoration: none; color: #1a91d1;}
#left-column a:hover {color: #d12121;}
#left-column ul {font-family: Arial, Helvetica, sans-serif; font-size: .85em; color: #666666; line-height: 130%; margin: 15px 20px 15px 90px;}
#left-column li {list-style: url(images/bullet.gif); padding: 0px 0px 0px 5px; margin: 3px 0 3px 0;}

#footer p {font-family: Arial; font-size: 11px; color: #afafaf;}
#footer a {color: #afafaf; text-decoration: none;}
#footer a:hover {color: #d12121;}

/* Product Style */
#left-column div.tn-products a {display: block; float: left;  width: 150px; height: 150px; padding: .5em .5em 3em .5em; border: 1px solid #cccccc; margin: 15px;}
#left-column div.tn-products p.description {font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; color: #d12121; text-align: center; padding: 6px 3px 2px 3px; margin: 0;}
#left-column div.tn-products a:hover {border: 1px solid #2f6a8a;}
#left-column div.tn-products a:hover p.description {color: #2f6a8a;}

/* Individual Product Pages */
img.product-image {display: block; margin: 30px auto 30px auto; padding: 10px; border: 1px solid #cccccc;}


/* Quick Contact Style */
#quick-contact {width: 256px; position: relative; left: 15px; top: 50px;}
#quick-contact form {padding-left: 15px;}
#quick-contact-top {width: 256px; height: 54px; background-image: url(images/quick-contact-top-fr.jpg);}
#quick-contact-content {width: 256px; min-height: 250px; height:auto !important; height: 250px; background-image: url(images/quick-contact-repeat.jpg); background-repeat: repeat-y; padding-bottom: 10px;}
#quick-contact-bottom {width: 256px; height: 20px; background-image: url(images/quick-contact-bottom.jpg);}
#quick-contact label {width: 5em; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 3px 0 3px 0; padding: 2px; color: #255b79;}
#quick-contact input {width: 160px; margin: 3px 0 3px 0; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #255b79; color: #555555;}
#quick-contact textarea {width: 160px; height: 90px; margin: 3px 0 3px 0; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #255b79; color: #555555;}
#quick-contact #loader {width: 31px; height: 31px; position: absolute; right: 15px; top: 250px; background-image: url(images/hpr-loader.gif);}
#quick-contact #in_submit {width: 90px; cursor: pointer; color: #255b79; background-color: #ffffff; font-weight: bold;}
#quick-contact #alert {width: 200px; margin: 0 auto 0 auto; position: relative; top: 10px;}
#quick-contact #alert p {font-family: Arial, Helvetica, sans-serif;  font-size: 11px; color: #d71818;}
#quick-contact #thankyou {position: absolute; width: 200px; height: 190px; top: 75px; left: 35px;}
#quick-contact #thankyou h2 {font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; padding: 0; color: #255b79; }
#quick-contact #thankyou p {font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 5px 0 5px 0; color: #666666;}
#quick-contact #thankyou img {display: block; margin: 0 auto 0 auto;}

/* Main Contact Form */
#contact-form {position: relative; width: 500px; top: 30px; left: 20px;}
#contact-form label {width: 5em; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 15px; margin: 3px 0 3px 0; padding: 2px; color: #255b79;}
#contact-form input {width: 260px; margin: 3px 0 3px 0; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #255b79; color: #555555;}
#contact-form textarea {width: 260px; height: 90px; margin: 3px 0 3px 0; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #255b79; color: #555555;}
#contact-form #in_submit {width: 80px; cursor: pointer; color: #255b79; background-color: #ffffff; font-weight: bold;}
#contact-form #loader {width: 31px; height: 31px; position: absolute; left: 180px; top: 194px; background-image: url(images/hpr-loader.gif);}
#contact-form #alert {width: 400px; margin: 0 auto 0 auto; position: relative; top: 10px;}
#contact-form #alert p {font-family: Arial, Helvetica, sans-serif; color: #d71818;} 
#contact-form #thankyou h2 {font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; padding: 0; color: #255b79; }
#contact-form #thankyou p {font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 5px 0 5px 0; color: #666666;}


#map {width: 600px; height: 350px; margin: 20px auto 20px auto; position: relative; top: 40px; border: 2px solid #255b79;}

/* Image Boxes Portrait */
#imagebox-port {width: 520px; margin: 30px auto 30px auto; padding: 10px; border: 1px solid #cccccc;}
#imagebox-port img {margin: 0 5px 0 5px; float: left;}

/* Thick Image Box */
#imagebox-port-thick {width: 612px; padding: 10px; margin: 30px auto 30px auto; border: 1px solid #cccccc;}
#left-image {float: left; margin: 0 10px 0 0; padding: 0;}

/* Image Boxes Landscape */
#imagebox-land {width: 510px; margin: 30px auto 30px auto; padding: 10px; border: 1px solid #cccccc;}
#imagebox-land img {margin: 8px 0px 8px 0px;}