/*  Colors:
        - link color: #25637a
        - soft border: #ccc
        - hard border: #999
        - information background: #c5e3ed
        - soft background: #fafafa
        - error information highlight: #c00
        - error information background: #fee
        - light yellow: #fffff0
*/

/* Styles for elements 
------------------------------------------------------*/

body { font: 10pt Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; }

a { color: #25637a; text-decoration: underline; }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0px 0px 10px 0px; }
h2 { font: normal 8pt/30px Verdana; color: Black; white-space: nowrap; text-transform: uppercase; height: 30px; padding: 0px 10px; margin-bottom: 15px; background: url("../Images/Layout/Headline.png") repeat-x; }
h3 { font: bold 14pt Arial; }
h4 { font: bold 12pt Arial; }
h5 { font: bold 10pt Arial; }
h6 { font: bold 10pt Arial; margin: 0px; }

hr { margin: 10px 0px; color: gray; background: grey; border: none; height: 1px; }
.hr { margin: 10px 0px; border-top: solid 1px gray; height: 0px; }

img { border: none; }

p { margin: 10px 0px 10px 0px; }

table { border-collapse: collapse; }
table td { padding: 0px; }

ul, 
ol { margin: 0px 0px 0px 30px; padding: 0px; }
ul li,
ol li { margin: 5px; }

input[type="text"], 
input[type="password"], 
textarea, 
select { font: 10pt Arial, Helvetica, sans-serif; border: solid 1px #ccc; padding: 2px; }

input[type="text"], 
input[type="password"] { width: 150px; }

textarea { width: 150px; }

fieldset > div { clear: left; margin: 0 0 2px; }
fieldset div > label { float: left; height: 22px; line-height: 22px; width: 160px; }
fieldset div > label > em { float: right; padding-right: 5px; }
fieldset div label.option { float: none; height: 22px; line-height: 22px; width: auto; }
fieldset.borderless { border: none; margin: 0; padding: 0; }
fieldset.borderless legend { padding: 0; }

label em { padding-left: 5px; }

input[type="button"],
input[type="submit"] { background: url('../Images/Buttons/ButtonGradient.png') repeat-x; padding: 2px 6px; border: solid 1px #999; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
input[type="button"]:hover,
input[type="submit"]:hover { background-image: url('../Images/Buttons/ButtonGradientHover.png'); color: #fff; }


/* Styles for page layout 
--------------------------------------------------*/

body { background: url('../Images/Layout/BackgroundGradient.png') repeat-y; background-color: Black; }
#page { margin: 0 auto 20px; width: 734px; }

#header-container { position: relative; background: url('../Images/Layout/ContainerHeader.png') no-repeat; height: 133px; width: 734px; margin: 10px 0 0; }
#header-layout { width: 720px; height: 85px; margin: 0px 7px; }
#logo { padding: 5px 0px 0px 10px; }
#login-status-container,
#cart-status-container { position: absolute; right: 20px; height: 20px; vertical-align: top; font-size: 0.9em; }
#login-status-container { top: 10px; }
#cart-status-container { top: 30px; }
#search-container { position: absolute; top: 58px; right: 17px; height: 45px; vertical-align: bottom; }

.content-region { width: 734px; }
.content-region td.top { background: url('../Images/Layout/ContainerBodyTop.png') no-repeat; height: 12px; }
.content-region td.left { background: url('../Images/Layout/ContainerBodyEdgeLeft.png') repeat-y; width: 7px; }
.content-region td.content { background: #fff url('../Images/Layout/ContainerBodyGradient.png') no-repeat bottom; height: 50px; vertical-align: top; padding: 0 12px 10px; }
.content-region td.right { background: url('../Images/Layout/ContainerBodyEdgeRight.png') repeat-y; width: 7px; }
.content-region td.bottom { background: url('../Images/Layout/ContainerBodyBottom.png') no-repeat; height: 18px; }

#footer-contact-info-container { clear: both; font-size: 0.8em; }
#footer-contact-info-container > div { float: left; width: 25%; }
#footer-contact-info-container h4 { font-size: 1.2em; }
#footer-contact-info-container h4 .contact-region { display: block; font-size: 0.8em; }
#footer-contact-info-container address { margin-bottom: 10px; font-style: normal; }
#footer-contact-info-container .phone-numbers { padding-left: 25px; }
#footer-contact-info-container .phone-numbers label { float: left; margin-left: -25px; }

#language-picker-container { font-size: 8pt; text-align: center; margin-top: 20px; }
#language-picker-container ul { display: inline; margin: 0; padding: 0; }
#language-picker-container ul li { list-style: none; display: inline; margin: 0; padding: 0 2px 0 0; }
#footer-container div.copyright { text-align: center; font-size: 8pt; margin-top: 10px; }

#flash, .flash { background: #c5e3eD; border: solid 1px #999; margin-bottom: 15px; text-align: center; }
#flash { padding: 10px; font: 1.5em Verdana; }
.flash { padding: 5px; font-weight: bold; }


/* Styles for main menu 
-------------------------------------------------------------*/

#main-menu-container { position: absolute; z-index: 10000; bottom: 8px; width: 720px; margin: 0 7px; }

#main-menu { width: 100%; z-index: 100; }
#main-menu li { list-style: none; margin: 0; padding: 0; }
#main-menu a { text-decoration: none; font: 8pt Verdana, Helvetica, sans-serif; color: #000; text-transform: uppercase; text-align: center; white-space: nowrap; }

#main-menu td { position: relative; height: 35px; background: url('../Images/Buttons/MenuStaticItemGradient.png') repeat-x; }
#main-menu td:hover { background: url('../Images/Buttons/MenuStaticItemGradientHover.png') repeat-x; }
#main-menu td.selected { background: url('../Images/Buttons/MenuStaticItemGradientSelected.png') repeat-x; }

#main-menu td > a { display: block; line-height: 35px; height: 35px; padding: 0 auto; }
#main-menu td:hover > a { color: #fff; }
#main-menu td.selected > a { color: #fff; }
                      
#main-menu td.first { background: url('../Images/Buttons/MenuStaticItemLeft.png') no-repeat; width: 10px; }
#main-menu td.last { background: url('../Images/Buttons/MenuStaticItemRight.png') no-repeat; width: 10px; }

#main-menu table.dynamic { display: none; position: absolute; margin: 0; }
#main-menu td:hover table.dynamic { display: block; }
#main-menu table.dynamic td { height: 25px; background: none; }
#main-menu table.dynamic td:hover { background: none; }
#main-menu table.dynamic a { display: block; line-height: 25px; height: 25px; padding: 0 20px; color: #000 !important; background: #ccc; }
#main-menu table.dynamic a:hover { background: url('../Images/Buttons/MenuDynamicItemGradientHover.png') repeat-x; }


/* Style for Vitec endorsement strip 
-------------------------------------------------------------------*/

div#GroupEndorsementStripContainer { width:100%; height:36px; position:relative; }
div#GroupEndorsementStrip {width: 720px; height:36px; margin:0 auto; padding: 2px 0; background-color:#535353}
div#GroupEndorsementStrip img { float: left; margin-left: 10px; margin-top: 2px; width: 33px; height:32px;  }
div#GroupEndorsementStrip p {font-family:arial; color:#fff; font-size:11px; line-height:13px; margin:5px 0 0 5px; float:left;}
div#ESGroupNavMenu {float:right; margin-right:10px; margin-top:7px;}
div#ESGroupNavMenu select {font-size:11px; font-family:arial; padding: 0 !important; }
 
 
/* Styles for product browser 
--------------------------------------------------------*/

#product-browser-container { clear: both; }

#product-browser { width: 734px; height: 169px; vertical-align: top; }

#product-browser > div  { float: left; height: 169px; }

#product-browser .left,
#product-browser .right { width: 17px; }

#product-browser .slide-left-container,
#product-browser .slide-right-container { position: relative; }

#product-browser .slide-left,
#product-browser .slide-right { cursor: pointer; width: 25px; height: 60px; margin-top: 50px; }

#product-browser .slide-left.disabled, 
#product-browser .slide-right.disabled { background: none; }

#product-browser .left { background: url('../Images/ProductBrowser/ContainerLeft.png') no-repeat; }
#product-browser .slide-left-container { background: url('../Images/ProductBrowser/ContainerGradient.png') repeat-x; }
#product-browser .slide-left.enabled { background: url('../Images/ProductBrowser/ArrowLeft.gif') no-repeat; }

#product-browser .items-container { background: url('../Images/ProductBrowser/ContainerGradient.png') repeat-x; width: 650px; }
#product-browser .items { height: 160px; position: relative; overflow: hidden; }
#product-browser .items .list { position: absolute; left: 0px; top: 10px; margin: 0px; padding: 0px; list-style: none none outside; }
#product-browser .items .item { position: relative; top: 0px; height: 140px; width: 130px; float: left; margin: 0; padding: 0; }
#product-browser .items .image-container { height: 125px; width: 130px; background-repeat: no-repeat; background-position: 50% 50%; }
#product-browser .items .label-container { height: 15px; text-align: center; vertical-align: middle; line-height: 15px; font-size: 8pt; }

#product-browser .slide-right-container { background: url('../Images/ProductBrowser/ContainerGradient.png') repeat-x; }
#product-browser .slide-right.enabled { background: url('../Images/ProductBrowser/ArrowRight.gif') no-repeat; }
#product-browser .right { background: url('../Images/ProductBrowser/ContainerRight.png') no-repeat; }


/* Styles for cart displays 
---------------------------------------------------------------*/

#cart-items { width: 100%; }
#cart-items th { font-size: 12pt; text-align: left; padding-bottom: 0px; border-bottom: double 4px #999; }
#cart-items td { vertical-align: top; padding: 10px 0; border-bottom: dotted 1px #CCC; }
#cart-items .item-description { text-align: left; padding-left: 10px; }
#cart-items .item-description h4 { font-size: 10pt; margin: 0 0 10px; }
#cart-items .item-description p { font: 8pt Verdana; margin: 0 0 3px 5px; }
#cart-items .item-description label { font-weight: bold; }
#cart-items .image { text-align: center; }
#cart-items .image img {  }
#cart-items .price { text-align: right; }
#cart-items .total-price { text-align: right; padding-right: 10px; }
#cart-items .quantity { padding-left: 10px; text-align: center; }
#cart-items .quantity input { width: 30px; }
#cart-items .remove { text-align: center; padding-right: 10px; }

#shopping-cart-description-col {  }
#shopping-cart-image-col { width: 120px; }		
#shopping-cart-quantity-col { width: 70px; }
#shopping-cart-price-col { width: 70px; }    
#shopping-cart-subtotal-col  { width: 80px; }    
#shopping-cart-subtotal { font-size: 12pt; font-weight: bold; text-align: right; padding-right: 10px; margin-top: 20px; }


/* Styles for performance monitors 
------------------------------------------------------------*/

#page-performance-monitor { background: #ff9; color: #000; border: double 4px #000; padding: 20px; margin-top: 40px; }
#linqtosql-performance-monitor { background: #ff9; color: #000; border: double 4px #000; padding: 20px; margin-top: 0px; }


/* Styles for validation 
---------------------------------------------------------------*/

.field-validation-error { color: #c00; }

input[type="text"].input-validation-error,
input[type="password"].input-validation-error,
textarea.input-validation-error,
select.input-validation-error { border: 1px solid #c00 !important; background-color: #fee !important; padding: 2px; }
                          
.validation-summary-errors { background-color: #fee; border: solid 1px #C00; margin-bottom: 20px; border-top: none; }
.validation-summary-errors > ul { margin: 10px 0 10px 30px; }
.validation-summary-errors > span { border: solid 2px #C00; background-color: #C00; color: #FFF; font-weight: bold; display: block; padding: 5px 10px; }

/* Style common to many elements 
-------------------------------------------------------------------*/

.block { display: block; }
.clear { clear: both; }
.hidden { display: none; }
.inline { display: inline; }
.note { color: #666; font-size: 0.8em; }
.note ul { margin-top: 0px; margin-bottom: 0px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.small-note { color: #666666; font-size: 8pt; }
.width-narrow { width: 50px !important; }
.width-wide { width: 350px !important; }
.loading { background: url('../Images/ajax-loader.gif') no-repeat 50% 50%; }
.on-top { z-index: 10000; }
.buttons-container { margin-top: 10px !important; }
.align-right { text-align: right; }