/* CSS Document */

/* General */

.FloatLeft{float: left}
.FloatRight{float: right}

strong {font-weight:bold;}

body {margin:25px; background-image:url(/images/background.gif); text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:70%; color:#62656A;}

#layout {width:883px; margin:auto; text-align:left; background-image:url(/images/background.png);}

#center {margin-left:17px; margin-right:17px; background-color:#F5FAFF; padding:10px; +}

#content {margin-left:200px;line-height:130%;}

#content ul {margin-left:5px;list-style-type:disc;}
#content ul li {margin:5px;}

a {text-decoration:none; color:#2197D5; font-weight:bold;}

select {border:1px solid #E6E6E6; padding:2px; color:#666666; font-size:90%;}
input {border:1px solid #E6E6E6; padding:2px; color:#666666; font-size:90%;}
.tbxSearch {padding:4px;color:#B2B2B2;}
input.submit {color:#299AE6; font-weight:bold; background-image:url(/images/submit.gif); padding:3px 6px 3px 6px;}
textarea {border:1px solid #E6E6E6; color:#B2B2B2; font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}
.button {padding: 3px 6px;	margin: 0;background-color:#F9DDB5; color:#2994D5; border: 1px solid #EDC37B;	font-weight:bold;font-size:90%;}
.checkout {float:right; margin:10px;}
.orange {color:#E38815;}

b {color:#2197D5;}

hr {margin-top:9px; margin-bottom:8px; height: 0; border: 0; border-top: 1px solid #E5E9F2; }

h1 {color:#2EA4E1; font-size:160%; margin-top:5px; margin-bottom:8px; font-family:Arial, Verdana, Helvetica, sans-serif;}
h2 {color:#2EA4E1; font-size:140%; margin-top:5px; margin-bottom:8px; font-family:Arial, Verdana, Helvetica, sans-serif;}
h3 {color:#2EA4E1; font-size:160%; margin-top:5px; margin-bottom:8px; font-family:Arial, Verdana, Helvetica, sans-serif;}

/* Header */

#header {margin-left:17px; margin-right:17px;}

#logo {margin-left:15px; width:168px; height:93px; background-image:url(/images/logo.jpg); float:left;}
#logo a {display:block; width:168px; height:93px; }

#toplinks {text-align:right; margin-bottom:10px;}
#toplinks a {font-size:90%; padding-left:10px;}
#toplinks .login {color:#17608B;}

#search {text-align:right; margin-bottom:20px;}

#nav {height:34px; float:right;}
#nav ul li {float:left; height:34px; line-height:34px; padding-left:17px; padding-right:17px; background-image:url(/images/tab_right.gif); background-position:right; position:relative;}
#nav ul li a {display:block; height:34px;}
#nav ul li a:hover {color: #E88506; background-image:url(/images/arrow.gif); background-repeat:no-repeat; background-position:bottom center;}
#nav ul li div {width:13px; background:url(/images/tab_left.gif) top left no-repeat; height:34px; left:0px; position:absolute; top:0px;}

.subNav {display:none; z-index:3;}
.subNav a { font-weight: normal; color:#62656A; margin-left:5px; margin-right:5px;}
.subNav a:hover {text-decoration:underline;}
#subNav0 {display:block;}

#navbar { background-color:#F5FAFF; padding:10px; margin-bottom:5px; clear:right; position:relative; text-align:center;}

#flash {height:149px; background-color:#cccccc;}

#crumb {padding:10px; background-color:#EAF0FC; margin-top:5px; margin-bottom:5px;}

#phone {float:right; color:#69B8D6; font-weight:bold; text-transform:uppercase; font-size:110%;}

/* Menu */

#menu {width:180px; float:left;}
#menu ul li {text-align:right; font-size:90%; background-color:#EEEEEE; background-image:url(/images/menu_off.gif); background-repeat:repeat-x; margin-bottom:3px; border: 1px solid #ECEDF1;}
#menu ul li a {font-weight:bold; color:#186090; display:block; padding:6px;}
#menu ul li a.orange {color:#E38815;}
#menu ul li:hover {background-image:url(/images/menu_on.gif); background-color:#E5ECF6;}
#menu ul li a.menu_select {background-color:#2492D1; background-image:none; color:#ffffff;}

ul#extraMenu li {height:auto; text-align:right; background-color:transparent; background-image:none; border:0px; margin:0; padding:0;}
ul#extraMenu li a {padding:3px; color:#62656A; font-weight:normal;}
ul#extraMenu li:hover {background-image:none; background-color:#ffffff;}

/* Footer */

#footer {margin-left:17px; margin-right:17px; margin-top:5px; border-top: 1px solid #E1E8F0; color:#CBCED3; padding:5px; font-size:90%;}
#footer a {font-weight:normal; margin-left:5px; margin-right:5px;}

#sitedesign {width:860px; margin:auto; text-align:right; font-size:90%; color:#B8CFEE;}
#sitedesign a {font-weight:normal;}

.divError {font-weight:bold; text-align:center; display:block; margin-top:5px; margin-bottom:15px; color:#A80000;}


/* sIFR Flash Replace */

/* These are standard sIFR styles... do not modify */
.sIFR-flash { visibility: visible !important; margin: 0; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] { display: none !important; }

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {visibility: hidden; font-size:220%; line-height:100%; letter-spacing:0px;}
.sIFR-hasFlash h2 {visibility: hidden; font-size:180%; line-height:100%; letter-spacing:-1px;}

/* Category / Product / Range / Widget */

.imgProductRange {float:right; margin-right:10px; margin-bottom:10px;}
.imgRange {float:right; position:relative; top:-10px; margin-right:10px;}
.class_Group_Box_Content{padding:10px;}
#Product_Details_Container ul, .class_Group_Box_Content ul {margin-left:10px;}
#Product_Details_Container li, .class_Group_Box_Content li { list-style-type:disc; margin:4px;}
.class_Group_Box_Content img{float:left; margin-right:10px; margin-bottom: 10px}
#tblProductGroup {width:100%; margin-bottom:15px; background-color:#ffffff; clear:both;}
#tblProductGroup th {background-color:#F7F7F7; font-weight:bold; color:#666666; padding:3px; text-align:center; }
#tblProductGroup th div {font-weight:normal; font-size:90%; color:#9C9C9C;}
#tblProductGroup td {border-bottom: 1px solid #FFFFCC; padding:6px; text-align:center; vertical-align:middle;}
td.unavailable {border-bottom: 1px solid pink; padding:0px; text-align:center; vertical-align:middle;}

.class_Content_Box{position: relative; width:100%; float:left; background-color: #FFF; margin-bottom: 20px}

.class_Content_Box_Header{position: relative; width: 100%; height: 26px; font-family: Arial; font-size: 1em; color: #2492d0; float:left;}

.class_Content_Box_Content{position: relative; width: 100%; float: left}

.class_Content_Box_Header_Title{ float:left; font-weight: bold; padding: 5px 0px 0px 25px; width: 400px}

.class_Content_Box_Header_Title img{position: absolute; top: 5px; left: 5px}

.class_Content_Box_Controls{float: right; width: 150px; text-align: right}

.class_Content_Box_Controls img {padding: 5px 5px 0px 0px; }

.class_Content_Box_Controls span label{position: absolute; top: 5px; right: 65px}

/* List view Styles */
.Content_Box_List_View{width: 100%; overflow: auto; border-bottom: Solid 1px #f4f4f4; }
.Content_Box_List_View div span {display:block;}
.Content_Box_List_View #image_Container{float: left;}
.Content_Box_List_View #details_Container{float: left; padding: 20px 10px 20px 0px; width: 463px; overflow: auto; height: 130px}
.Content_Box_List_View #details_Container h3{font-size: 1.3em; color: #2492d0;}
.Content_Box_List_View #details_Container p{font-size: 1em; margin-top: 10px}

/* Grid view Styles */
.Content_Box_List_Grid{width: 150px; height: 200px; float: left; margin-right: 5px}
.Content_Box_List_Grid div span {display:none;}
.Content_Box_List_Grid #image_Container{text-align: center}
.Content_Box_List_Grid #details_Container{}
.Content_Box_List_Grid #details_Container h3{ font-size: 1em; color: #2492d0; text-align: center}
.Content_Box_List_Grid #details_Container p{display: none;}

.class_Content_Box_Content classImage.a{border: none;}
.class_Content_Box_Content classImage.a:hover{ border: Solid 1px #000}

a.classNavText{font-weight: normal}
a.classNavText:hover{ text-decoration: underline}

/* Category Box */
#Categories_Content_Box{border: Solid 1px #c6e3f4}

#Categories_Header{ background-color: #c6e3f4;}

/* Testimonials */

#divTestimonials {margin-top:15px;}
#divTestimonials div {margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #E5E9F2;}

/* Links */

#divLinkCategories {margin-top:15px;}
#divLinks {margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #E5E9F2;}
#divLinks div {padding:3px;}

/* HACCP */

#tbl_Overview { padding-right:20px; vertical-align:top;}
.HACCPContainer ul li{ list-style: square inside; margin-bottom:5px;margin-top:5px;}
#Hazards_Header { font-weight:bold; color:White; background-color:#dd8c0b; height:20px;}
#Hazards_Content { padding:10px;}
#BP_Header { font-weight:bold; color:White; height:20px;}
#BP_Content { padding:10px;}

/* Contact */

.divContact label {display:block; margin:5px; vertical-align:middle;}
.divContact label span {display:block; margin-top:3px; float:left; width:140px; }
.divContact input {width:200px;}
.divContact span.checkbox,.divContact span.checkbox input {width:20px;}
.divContact textarea {width:230px;}
.divContact input.submit {width:auto; margin-left:145px;}
#divContactDetails {float:right;}

/* Login */

.divLogin label {display:block; margin:5px; vertical-align:middle;}
.divLogin label span {display:block; margin-top:3px; float:left; width:90px; }
.divLogin input {width:200px;}
.divLogin input.submit {width:auto; margin-left:95px;}

/* Search */

#divSearch {margin-bottom:10px;}
#divSearch label {display:block; margin:5px; vertical-align:middle;}
#divSearch label span {display:block; margin-top:3px; float:left; width:140px; }
#divSearch input {width:200px;}
#divSearch input.submit {width:auto; margin-left:145px;}

/* Product Page */

.classBold{font-weight: bold;}

.class_Content_Box_Product{position: relative; width:100%; float:left; background-color: #FFF; margin-bottom: 20px; border: Solid 1px #c6e3f4}

.class_Content_Box_Product_Header{position: relative; width: 100%; height: 26px; font-family: Arial; font-size: 1em; color: #2492d0; float:left; background-color: #c6e3f4}

.class_Content_Box_Product_Content{position: relative; width: 100%; float: left}

.class_Content_Box_Product_Header_Title{ float:left; font-weight: bold; padding: 5px 0px 0px 10px; width: 300px}

.class_Group_Box_Content_Product{width: 100%; float: left}

.class_Group_Box_Content_Product .Product_Image_Container{float: left; padding: 10px; width: 215px; text-align:center;}

.class_Group_Box_Content_Product #Product_Details_Container{margin-left:10px; float: left; padding: 10px; padding-left: 0; width: 370px}

.class_Group_Box_Content_Product #Product_Details_Container div {margin-bottom:10px;}

.class_Group_Box_Content_Product #Product_Details_Container div span {display:block; width:70px; float:left; padding-top:2px;}

.class_Group_Box_Content_Product #Product_Details_Container div.price span { display:inline; width:auto; padding-top:0px; padding-right:5px;}

/* Related Items */

.class_Content_Box_Related{position: relative; width:100%; float:left; background-color: #FFF; margin-bottom: 20px;}

.class_Content_Box_Related_Header{position: relative; width: 100%; height: 26px; font-family: Arial; font-size: 1em; color: #2492d0; float:left; background-color: #f7f7f7}

.class_Content_Box_Related_Content{position: relative; width: 100%; float: left}

.class_Content_Box_Related_Header_Title{ float:left; font-weight: bold; padding: 5px 0px 0px 10px; width: 300px}

.class_Group_Box_Content_Related{width: 100%; float: left}


/* Featured Products */

.classFeaturedProductContainer{position: relative; margin-top:10px; width:290px; height:100px;}

.classFeaturedImageContainer{position: relative; width: 125px; float: left}

.classFeaturedDetailsContainer{position: relative; width: 55%; float: left}

.ImageBackground{ background-image: url(../Images/FeaturedProducts/background.png); background-repeat: no-repeat; width: 110px; height: 80px}

.ImageBackground img{margin: 5px 0px 0px 5px;}

.classFeaturedDetailsContainer h4{color: #2599d4; font-weight: bold; margin-bottom: 2px;}

.classFeaturedDetailsContainer p{font-size: .9em; margin-bottom: 2px;}

.classFeaturedDetailsContainer a{font-size: .9em}
.classFeaturedDetailsContainer a:hover{font-size: .9em; text-decoration: underline}

.classHomePageContentBox{border-bottom: Solid 1px #e4e4e4; padding: 10px 0px 5px 0px; float: left}



/* Case Studies */

.classCaseStudiesContainer{position: relative; width: 157px; float: left}

.classCaseStudiesImageContainer{position: relative; width: 153px; float: left}

.classCaseStudiesDetailsContainer{position: relative; width: 157px; float: left; text-align: center}

.ImageBackgroundCaseStudy{ background-image: url(../Images/casestudies/background.png); background-repeat: no-repeat; width: 153px; height: 127px}

.ImageBackgroundCaseStudy img{margin: 5px 0px 0px 5px;}

.classCaseStudiesDetailsContainer a{font-size: 1em}
.classCaseStudiesDetailsContainer a:hover{font-size: 1em; text-decoration: underline}

.content_casestudy {background-color:#ffffff; padding:5px}

#casestudy_maincontent{width: 470px; float: left}

#casestudy_images{width: 120px; float: right; margin-left: 10px;}

#casestudy_images_toggle{width: 15px; float: left; vertical-align: middle;  border-right: solid 1px #ccc; height: 100%}

#casestudy_images_container{ width: 100px; float: right;}

/* Checkout */

.tblCheckout {width:100%;}
.tblCheckout th {background-color:#c6e3f4; font-weight:bold; text-align:center; padding:3px;}
.tblCheckout td {padding:5px; border-bottom:1px solid #cccccc; text-align:center;}
.checkout {border:1px solid #cccccc; margin-bottom:20px;}
.checkout td {padding:5px 5px 3px 5px;font-size:120%;}
.checkout td.num {padding-right:0px; font-weight:bold;}
.checkout td.start {font-weight:bold; background-color:#666666; color:#EEEEEC;}
.checkout td.cur {font-weight:bold; background-color:#EEEEEC;}
.tblCheckout td input.checkoutDelete {top:5px; position:relative;}


/* Order History */
.Grid 
{ 
    background-color: #F5FAFF;
    font-family: Arial;
    color: #000000;
    font-size: 8pt;
    font-weight: bold;

}

.Grid td
{

}

.classGridViewHeaderLight
{
    background-color: #70b7db;
    font-family: Arial;
    font-size: 8pt;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    height:0px;
    border: none;
    border-right: Solid 1px #70b7db;
    border-bottom: Solid 1px #FFFFFF;
    text-transform: uppercase;
    padding: 5px 0px 5px 0px;
}

.classGridViewHeaderDark
{
    background-color: #3399CC;
    font-family: Arial;
    font-size: 7pt;
    font-weight: bold;
    color: #FFF;
    text-align: Left;
    height: 0px;
    border: none;
    padding-left: 12px;
    text-transform: uppercase;
        border-right: Solid 1px #fff;
    border-bottom: Solid 1px #fff;
}

.classGridViewHeaderDarkNoPadding
{
    border:none;
    background-color: #F5FAFF;
}


.NameCell
{
    color: #E88816;
    background-color: #EAF0FC;
    padding: 5px;
    border-right: Solid 1px #70b7db;
    border-bottom: Solid 1px #70b7db;
    text-align: center;
    font-weight: bold;
}
.NameCellNoPadding
{
    border:none;
    background-color: #F5FAFF;
}

.ControlCell
{
    color: #3399CC;
    background-color: #EAF0FC;
    padding: 5px;
    border-right: Solid 1px #70b7db;
    border-bottom: Solid 1px #70b7db;
    text-align: center;
}
