@charset "iso-8859-1";

#container
{
	margin: 0px auto;
	width: 980px;
	background:#ffffff;
}
#TopOfPage
{
   background: #ffffff;
   position:fixed;
   top:0;
	width:100%;
   z-index:5;
}

#header
{
    width: 980px;
	 height: 86px;
	/* float: left;
	clear: left; */
	/* background:#FFFFFF; */
	padding-top: 5px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#header h1 { margin: 0; }
#header img {
   float:left;
   margin-top: 0px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 0px;
} 
#header a { text-decoration: none; }

#header_details
{
   padding: 5px 10px 5px 5px;
   text-align: center;
   font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;   
   font-size : 9pt;
}
#right_container {
   position:absolute;
   left:698px;
   /* float: right; */
   /* clear: right; */
   z-index:6;
}
#contact_details {
   width: 275px;
   padding-right: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   text-align: right;
   margin-bottom:0px;
   font-size: 8pt;
   visibility:hidden;
}
#contact_details A:link,A:vistited {
   color: #0046ad; 
}
#contact_details A:hover {
   color: red;
}

#search-box {
   position: relative;
   width: 275px;
}
#search-keywords {
   border: 1px #CCC solid;
   background-color: #f6f6f6;
   width: 275px;
   padding-left: 3px;
   color: #8e8e8e;
}
#search-submit {
   position: absolute;
   top: 2px;
   right: 4px;
}

#navigation {
   margin-top: 10px;
   padding-top: 5px;
   padding-bottom: 5px;	
   padding-left: 10px;
   clear:both; 
   float: left;
   width: 100%;
   background:#383838;
}

#navigation ul.topmenu, ul.topmenu ul { display: block; margin: 0px auto 0px auto; padding: 0px; width:960px;}
#navigation ul.topmenu li { display: inline; list-style: none; position: relative; margin: 0px; padding : 0px 22px 0px 0px; }
#navigation ul.topmenu li ul { display: block; position: absolute; left: 0; top: 21px; visibility: hidden; width: 20em; z-index: 1000; background-color : #fff; border : 1px solid #000; border-top: 0; }
#navigation ul.topmenu a { color : #ffffff; text-decoration:none; }
#navigation ul.topmenu a:hover { color:#03abf6;}
#navigation ul.topmenu li ul li { margin: 0 0 0 -1.5em; padding: 0; display: block; width: 100%; margin : 0px 0px 5px 0px; background-color : #fff; color : #000; border : 1px solid #000; border-top:0; border-left:0; border-right:0;}
#navigation ul.topmenu li ul li a { display: block; margin: 0; padding: 3px 0 3px 10px; width: 95%;  color : #000; }
/* #navigation ul.topmenu li ul li a { display: block; margin: 0; padding-top:10px; width: 95%;  color : #000; } */
#navigation ul.topmenu li.submenu:hover { padding-bottom: 30em; }
#navigation ul.topmenu li.submenu:hover ul { left: 0; visibility: visible; }
#navigation ul.topmenu li.submenu:hover ul li { margin-bottom: 0px; }
#navigation ul.topmenu li.submenu:hover ul li:hover { background-color: #383838;} 
/* Make submenus scrollable if too tall to fix nicely if the window is not very tall*/
#navigation ul.topmenu li.submenu ul { max-height:650px; overflow-y:auto; }
@media (max-height: 375px) { #navigation ul.topmenu li.submenu ul { max-height:115px; overflow-y:auto; } }
@media (max-height: 500px) and (min-height:376px) { #navigation ul.topmenu li.submenu ul { max-height:180px; overflow-y:auto; } }
@media (max-height: 600px) and (min-height:501px) { #navigation ul.topmenu li.submenu ul { max-height:276px; overflow-y:auto; } }
@media (max-height: 700px) and (min-height:601px) { #navigation ul.topmenu li.submenu ul { max-height:440px; overflow-y:auto; } }
@media (max-height: 800px) and (min-height:701px) { #navigation ul.topmenu li.submenu ul { max-height:506px; overflow-y:auto; } }
@media (max-height: 850px) and (min-height:801px) { #navigation ul.topmenu li.submenu ul { max-height:606px; overflow-y:auto; } }

#content
{
   position: relative;
   clear: left;
   padding: 10px 20px 10px 20px;
   z-index:4;
}

#content h2
{
	color:#000;
	font-size: 160%;
	margin: 0 0 .5em;
}

#footer
{
   width: 100%;
   background: #383838;
   font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
   font-size: 10px;
   text-align: center;
   color:white;
   padding-top: 0px;
   padding-bottom: 15px;
   position:relative;
   z-index:4;
}
.TwoColumnsLeft {
   clear:left;
   display:block;
   vertical-align:middle;
   width:450px;
   float:left;
   margin-left:0px;
   margin-top:25px;
   position:relative;
}
.TwoColumnsRight {
   padding-left:30px;
   display:block;
   vertical-align:middle;
   width:450px;
   float:left;
   padding-left:30px;
   margin-top:25px;
   position:relative;
}

.Table200x250 {
   display:table-cell;
   vertical-align:middle;
   width:200px;
   height:250px;
   /* line-height:250px; */
   margin-right:35px;
   text-align:center;
   float:left;
}
.Table200x250 a { font-size:10pt;font-weight:bold;text-decoration:none; }

.Table200x350 {
   display:inline-block;
   vertical-align:middle;
   width:200px;
   height:350px;
   margin-left:18px;
   margin-right:17px;
   text-align:center;
}
.Table200x350 a { font-size:10pt;font-weight:bold;text-decoration:none; }
.Table200x350 img {display:inline-block; max-width:200px; max-height:310px; width: auto; height: auto; text-align:center;}

.Table275x250 {
   display:table-cell;
   vertical-align:middle;
   width:275px;
   height:250px;
   margin-right:35px;
   text-align:center;
   float:left;
}
.Table275x250 a { font-size:10pt;font-weight:bold;text-decoration:none; }
.Table275x250 img { max-width:275px; max-height:227px; width: auto; height: auto; text-align:center;}
.Table275x250 a:hover { opacity:0.85;}

.Table300x320 {
   display:table-cell;
   vertical-align:middle;
   width:300px;
   height:320px;
   margin-right:8px;
	margin-bottom:55px;
   text-align:center;
   float:left;
}
.Table300x320 a { font-size:10pt;font-weight:bold;text-decoration:none; }
.Table300x320 img { max-width:300px; max-height:320px; width: auto; height: auto; text-align:center;}
.Table300x320 a:hover { opacity:0.85;}


/* SupplierPartnerTables - used for supplier logo display in SupplierPartners.php */
.SupplierPartnersTable {
   display:inline-block;
   width:250px;
   height:100%;
   margin:30px 30px 40px 30px;   
   text-align:center;
   vertical-align:middle;
}
.SupplierPartnersTable a { font-size:10pt;font-weight:bold;text-decoration:none; }
.SupplierPartnersTable img { max-width:230px; max-height:150px; width: auto; height: auto; text-align:center;}
.SupplierPartnersTable a:hover { opacity:0.85;}


/* TableDisplayProducts used to display item cells in DisplayProducts.php */ 
.TableDisplayProducts {
   display:inline-block;
   vertical-align:middle;
   width:205px;
   min-height:200px;
   margin: 10px 10px 10px 10px;
   padding: 0px 3px 0px 3px;
   text-align:center;
   background-color: #e0e0e0;
   cursor: pointer; cursor: hand;
}
.TableDisplayProducts a { font-size:10pt;text-decoration:none; }
.TableDisplayProducts img {display:inline-block; max-width:200px; max-height:110px; width: auto; height: auto; text-align:center;}
.TableDisplayProducts:hover { background-color:#ffffb0; opacity:0.85;}
.TableDisplayProducts a:hover { opacity:0.85;}
.TableDisplayProducts a p.blu:hover { color:#ff0000; opacity:0.85;}

/* TableProductIndex used for heading cells in the top-level Product Index page [Products.php] */
.TableProductIndex {
   display:inline-block;
   vertical-align:middle;
   width:250px;
   height:295px;
   margin: 10px 17px 10px 18px;
   text-align:center;
   color:white;
   font-weight:bold;
   padding:10px;
}
.TableProductIndex a { color:white; text-decoration:none; }
.TableProductIndex a:hover { color:#e0e0e0; opacity:0.85;}
.TableProductIndex img { border: 0px; }

.ItemAliasText { color:#006060; font-weight:bold; }
.blu { color:#0066b4; }
.bla { color:black; }


BODY
{
/*   background-image:url('Images/bgimage.jpg'); */
/*   background-attachment: fixed; */
   background-repeat:repeat-x;
   background-color: #031A3A;
   color           : black;
   font-family     : Verdana, Helvetica, Arial, Geneva, sans-serif;
   text-align      : left;
   font-size       : 10pt;
   padding         : 1pt;
	margin          : 0;
}

A:link,A:vistied { color: #0046ad; }
A:hover
{
   color           : red;
}
a, img {
    border:none;
    outline:none
}
H1, H2, H3, H4, H5, H6
{
   font-size: 30px;
   color: #03abf6;
   font-family     : "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight     : normal;
   font-style      : normal;
   padding         : 0px 0px 0px 0px;
   margin          : 0px 0px 0px 0px;
}
H1
{
   font-size       : 24pt;
   width           : 100%;
   text-align      : left;
}
H2
{
   font-size       : 20pt;
   font-weight     : bold;
   width           : 100%;
   text-align      : center;
}
H3
{
   font-size       : 16px;
   color: #323232;
   font-weight     : bold;
   padding-bottom  : 5px;
   margin-bottom   : 0px;
   margin-top      : 0px;
   text-decoration : underline;
}
H4
{
   font-size       : 14pt;
}
H5
{
   font-size       : 12pt;
}
H6
{
   font-size       : 10pt;
}

HTML {
overflow-y: scroll;
}


.BreadcrumbNav { text-align:right; white-space:nowrap; font-size:7pt; padding-right:0px; }
.BreadcrumbNav a { text-decoration:none; color: blue;}
.BreadcrumbNav a:hover { color: red;}
.BreadcrumbNav img { padding:0px 5px 0px 2px; } 

.ShadedButton{
color:#fff;
background-image: url("Images/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding:0 10px;
font-size: 12px;
text-decoration: none;
display:inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
margin:3px 0;
line-height: 28px;
border-color: #e1e1e1;
background-color: #f8f8f8;
position: relative;
font-weight:bold;
}

.ShadedButton:hover{
background-position: 0 -4px;
opacity:0.8;
color:#fff;
text-decoration: none;
}

.ShadedButton.dark , .ShadedButton.dark:hover{
color:#444;
}

.ShadedButton.black{background-color: #222; 	border-color: #222; text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); color: #fff; }
.ShadedButton.red{background-color: #B02B2C; 	border-color: #B02B2C; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); color: #5d1a1b; }
.ShadedButton.orange{background-color: #edae44; 	border-color: #edae44; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); color: #745521; }
.ShadedButton.green{background-color: #83a846; 	border-color: #83a846; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); color: #415324; }

.ShadedButton.blue{background-color: #02adf9; 	border-color: #01a4ec; text-shadow: 0 1px 0 rgba(0, 143, 208, 0.4); color: #ffffff; }

.ShadedButton.aqua{background-color: #4ecac2; 	border-color: #4ecac2; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); color: #286460; }
.ShadedButton.teal{background-color: #5f8789; 	border-color: #5f8789; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); color: #314445; }
.ShadedButton.purple{background-color: #745f7e; 	border-color: #745f7e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); color: #3c3240; }
.ShadedButton.pink{background-color: #d65799;	border-color: #d65799; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); color: #692b4b; }
.ShadedButton.silver{background-color: #d7d7d7; 	border-color: #d7d7d7; text-shadow: 0 1px 0 rgba(255, 255, 255, 1); color: #444; }
.ShadedButton.grey{background-color: #555; 	border-color: #555; text-shadow: 0 1px 0 rgba(0, 0, 0, 1); color: #fff; }

.ShadedButton.small{
padding:0 4px 0px 4px;
font-size: 10px;
line-height: 22px;
}

.ShadedButton.large{
padding:0 10px 0px 10px;
font-size: 13px;
line-height: 33px;
}

.ShadedButton.xl{
padding:0 17px 0px 17px;
font-size: 14px;
line-height: 42px;
}

.ShadedButton span{
position: relative;
}

.selectable-table {
    border-collapse: collapse; 
    border: 1px solid #d4d4d4;
    border-spacing: 0;
    margin: 0 0 10px;
}
.selectable-table td, th { border: 1px solid #d4d4d4; padding: 5px 5px 5px 5px; text-align: left; vertical-align: top;}
.selectable-table th { background:#999999; }
.selectable-table tbody tr:even { background:#ededed;}
.selectable-table tbody tr:nth-child(even) { background:#ededed;}
.selectable-table tbody tr:hover { background:#e1defc; cursor:pointer;}
.selectable-table tbody tr td a { text-decoration:none;}