html, body, #wrap {height: 100%;}
html { font-size: 16px; }
body {  
  background: #eee;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 62.5%; 
  line-height: 1.8em;
}

/*
--------------------------------------------
GENERAL HTML STYLES
--------------------------------------------
*/

h1 { font-size: 1.6em; font-weight: bold; color: #008DD2; padding: 0px 0px 0px 0px; }
h2 { font-size: 2.0em; font-weight: bold; color: #666; padding: 12px 0px 12px 22px; background: #FDE9CF url(../images/bg-h2.gif) top right repeat-y; border-bottom: 2px solid #ccc; }
h2 small { font-size: 0.7em; display: block; padding-bottom: 3px; }

h3 { font-size: 1.1em; font-weight: bold; color: #F66B01; padding: 6px 0px 8px 0px; }
h3.line { clear: both; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin-bottom: 6px; }

h4 { font-size: 1.0em; font-weight: bold; color: #008DD2; padding: 6px 0px 8px 0px; } 
h5 {}
h6 {}
p {
  padding-bottom: 8px;
}
ul {margin-bottom: 8px; }
li { padding-bottom: 4px; padding-left: 6px; list-style: square; margin-left: 24px; }
a { color: #F66B01; }
a:hover { color: #b3010f; }
blockquote { padding-left: 18px; padding-bottom: 6px;}
strong { font-weight: bold; }
em { font-style: italic }
img { padding: 0; margin: 0; }

/*
--------------------------------------------
COMMON STYLES
--------------------------------------------
*/
.hidden { visibility: hidden; }
.introduction { font-weight: bold; color: #F79021 }
.clear { clear: both; font-size: 1px; overflow: hidden; height: 1px; }
.indent { padding-left: 18px; }
.jumptocontent { display: none; }
.contentanchor { display: none; }
.error { padding: 6px 12px; background-color: #fee; border: 1px solid #d99; margin-bottom: 12px; }
.orange { color: #F79021; }

.breadcrumbs { font-size: 0.9em; padding-bottom: 18px; color: #999; }
.breadcrumbs a { color: #F8C182; text-decoration: none;  }
.breadcrumbs a:hover { text-decoration: underline; color: #F79021 } 


.logon-form { margin: 12px 24px 18px 24px; border: 1px solid #ccc; padding: 6px 12px 12px 12px;  }



/*
--------------------------------------------
PAGE STRUCTURE STYLES
--------------------------------------------
*/
#page {
  color: black;   
  background: white url(../images/bg-body.gif) top left repeat-y;
  width: 971px; margin: 0px auto 0px auto; 
}

#main-content {
 background: transparent url(../images/bg-main-content.gif) 38px 0px repeat-y; 
 padding-left: 38px;
  min-height: 600px;
overflow: auto; height: 1%;
}
.home #main-content {
  min-height: 520px;
}

#content-left {
  background: transparent url(../images/bg-content-left.jpg) 0px 132px repeat-x;
  width: 211px; float: left;
  padding-bottom: 12px;

}

#content { font-size: 1.2em; margin-left: 211px; padding-bottom: 24px; background: transparent url(../images/bg-swirl.gif) bottom right no-repeat; }
.home #content { background: none; padding-bottom: 12px;  }
.inner-content { padding: 12px 12px 12px 24px; }


#content table td, #content table th { padding: 2px 4px; }


/*
---------------------------------------------------------
ADDITIONAL STYLES
---------------------------------------------------------
*/

.banner-image { width: 722px; height: 203px; overflow: hidden; }
* html .banner-image { width: 716px; }

#home-categories, #home-categories li { padding: 0; margin: 0; list-style: none; }
#home-categories { overflow: auto; height: 1%; background: white; margin-left: 38px; padding-bottom: 70px; background: transparent url(../images/bg-swirl.gif) bottom right no-repeat; padding-top: 6px;}
* html #home-categories { margin-left: 24px; }

#home-categories li { 
  display: block; width: 162px; 
  height: 71px; float: left; background: #eee; 
  margin: 8px 12px; }


#home-categories li a { 
  display: block; 
  width: 152px; 
  height: 25px; 
  background: url(../images/btn-health.png) 0px 0px no-repeat;
  color: #ddd;
  padding-top: 46px;
  line-height: 25px;
  font-size: 1.2em;
  padding-left: 10px;
  text-decoration: none;
 }
 
li#h1 a { background-image: url(../images/btn-health.png); }
li#h2 a{ background-image: url(../images/btn-ebrochure.png); }
li#h3 a { background-image: url(../images/btn-bespoke.png); }
li#h4 a { background-image: url(../images/btn-shirts.png); }
li#h5 a { background-image: url(../images/btn-suiting.png); }
li#h6 a { background-image: url(../images/btn-aboutus.png); }
li#h7 a { background-image: url(../images/btn-workwear.png); }
li#h8 a { background-image: url(../images/btn-blouses.png); } 
li#h9 a { background-image: url(../images/btn-howtoorder.png); } 
li#h10 a { background-image: url(../images/btn-contactus.png); } 
 
#home-categories li a:hover { background-position: 0px -71px }

#home-search { background: #6A6A6A; color: #ccc; margin-left: 38px; padding: 3px 8px; font-size: 1.2em; text-align: right; }



.collections-list, .collections-list li { padding: 0; margin: 0; list-style: none; }

.collections-list { overflow: auto; height: 1%; padding-top: 12px; } 
.collections-list li { float: left; margin: 0 12px 12px 12px; }
.collections-list img { width: 178px; height: 210px; margin: 2px;}


.product-list, .product-list li { padding: 0; margin: 0; list-style: none; }
.product-list { overflow: auto; height: 1%; }
.product-list li { float: left; width: 180px; min-height: 100px; margin: 0 1em 1em 1em; padding: 8px 10px 8px 120px; position: relative; line-height: 1.3em; background: #FDD4B6; }
.product-list li.odd { clear: left; }
.product-list li {  -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.product-list li img { position: absolute; left: 8px; width: 100px; height: 100px; }
.product-list li .view-more { padding-top: 4px; float: right; }
.product-list li .view-more img { position: static; width: auto; height: auto; }
.product-list li .ref { padding: 0; margin: 0; font-weight: bold; font-size: 0.9em; } 
.product-list li .desc { padding: 0; margin: 0; font-size: 0.9em; }
.product-list li h4 { padding: 0; margin: 0; }

.product-details, .product-details li { padding: 0; margin: 0; list-style: none;}
.product-details { padding-left: 260px; position: relative; }
.product-details .product-image { position: absolute; left: 0; }
.product-details ul { }
.product-details li { padding: 0 0 0 108px; position: relative;}
.product-details strong { position: absolute; left: 0; }

.product-colours, .product-colours li { padding: 0; margin: 0; list-style: none; }
.product-colours { padding-top: 6px; padding-bottom: 12px; overflow: auto; margin-left: 24px; }
.product-colours li { float: left; width: 30%; line-height: 30px; margin-bottom: 6px; }
.product-colours li img { width: 30px; float: left; margin-right: 6px; }



/*
---------------------------------------------------------
NAVIGATION STYLES
---------------------------------------------------------
*/


#nav, #nav ul, #nav ul li { padding: 0; margin: 0; list-style: none;}

#nav { overflow: auto; height: 1%; padding-bottom: 1px; }

	#nav ul { /* all lists */
		padding: 0;
		margin: 0; 
		list-style: none;
		float : left;
		width: 211px;
		font-size: 1.2em; color: white;
    background-color: transparent; 
	}
	
	#nav ul li { /* all list items */
		position : relative;
		float : left;
		margin-bottom : 0px;
		width: 209px; height: 25px; 
		line-height: 25px; 
		padding: 0; 
	}
	
	  #nav ul li ul { /* second-level lists */
		  position : absolute;
		  left: -999em;
		  margin-left : 211px;
		  margin-top : -25px;
		  width: 211px;
	  }
	  #nav ul li ul {
      filter:alpha(opacity=90); opacity: 0.90; -moz-opacity:0.90; 
    }
	
	  #nav ul li ul li {
	    width: 205px; 
      height: 26px; 
	  }	
	
	    #nav ul li ul ul { /* third-and-above-level lists */
		    left: -999em;
		    margin-left : 205px;
		    margin-top : 0px;
	    }
	
  #nav ul li a {
    width: 209px;
    display : block;
    height: 25px;
    background:  transparent url(../images/bg-menu.gif) 0px -25px no-repeat;  
    text-decoration: none;
    text-indent: 20px;
    color: #FEE8D4;
    font-weight: bold;
  }
    #nav ul li ul li a {
      width: 205px;
      background: #333 url(../images/bg-menu-sub.gif) 0px 0px no-repeat;
      line-height: 22px;
      height: 22px;
      font-size: 1.2em;
      color: #ddd;
      text-indent: 24px;
    }	
      #nav ul li ul li ul li a {
        width: 205px;
        background-color: #ccc;
      }	
    
	#nav ul li a:hover {
		background-position: 0px 0px;
		color: white;
	}
	#nav ul li ul li a:hover {
		background-color: #900;
		background-position: 0px -26px;
    color: white;
	}
	#nav ul li ul li ul li a:hover {
		background-color: #900;
    color: white;
	}
	

	
	
	
	#nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li.sfhover ul ul, #nav ul li.sfhover ul ul ul {
		left: -999em; }
	
	#nav ul li:hover ul, #nav ul li li:hover ul, #nav ul li li li:hover ul, #nav ul li.sfhover ul, #nav ul li li.sfhover ul, #nav ul li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto; }
		

#nav ul li ul .hidden { visibility: visible; }


 #page #nav ul li ul li a {
   width: 205px;
   background-position: 0px -26px;
 }
 #page #nav ul li ul li a:hover {
   background-position: 0px 0px;
 }


/*
---------------------------------------------------------
FOOTER STYLES
---------------------------------------------------------
*/

#additional-info { background: #6A6A6A; color: #ccc; margin-left: 38px; padding: 3px 8px; font-size: 1.1em; }
#additional-info a { color: #ddd; text-decoration: underline; }
#additional-info a:hover { color: white;  }