/* knollyarns.css
version 1.0
August 09
author: CW at desalo.com
*/
body {margin: 3em 0 0 0; /* creates a forced margin at the top, but nowhere else */
	  padding: 0; /* we want the image to be flush with left edge when viewport is not large */
	  text-align: center; /* centred if viewport large enough, but flush with left edge if not */
	  background: #fff; /* white */}
.container {background: #001934;text-align: left; color:#fff;}
#banner {background: #001934;}
#logo {padding-bottom: 1em;}
	/**************
	   TOP NAVBAR
	 **************/
	ul#menu { width: 625px;/* before adding techinfo, was: 585px controls positioning of navbar, with higher number spreading it to the right. 585 seems to get the separator to the left of Contacts to line up with edge of leftcol image in most modern browsers */
	  margin: 0; margin-left:-2px; padding: 0 !important; padding: 0 0 0 10px;}
	ul#menu li {display: inline; list-style: none; margin: 0; padding: 0;}
	ul#menu li a {height:8px;/*helps adjust height of separators - higher number is longer separator downwards*/ 			float: left; padding: 1px 0 8px 0;/*helps adjust height of separators - higher number for bottom padding is 		longer separator downwards, higher number for top padding shoves words down and makes for a higher separator 		upwards*/
 		font-weight: 200; /*was: 500 lucida,helvetica,verdana,sans-serif*/
	  	letter-spacing: 2px; text-align: center; text-decoration: none; border-right: 1px solid #fff; /*was: #a8b0ba */
	  	color: #fff;}
	ul#menu li a.last  {border-right: 0px solid #fff;}/*was: #a8b0ba */
	ul#menu li a:hover {color: #314162; background: url(/img/bg/menu.gif) repeat-x bottom left;}
/*	ul#menu li a.here {
	  color: #314162;
	  background: url(/img/bg/menu.gif) repeat-x bottom left;
	font-weight:bold;
	}*/
	/* adjusts width of links in top navbar */
	ul.two li a {width: 50%;}
	ul.three li a {width: 33%;}
	ul.four li a {width: 25%;}
	ul.five li a {width: 20%;}
	ul.six li.shorter a {width: 14%;}
	ul.six li a {width: 16%;}
	ul.six li.longer a {width: 20%;}
	ul.seven li a {width: 14%;}
	ul.eight li a {width: 12.5%;}
	ul.eight li.shorter a {width: 8%;}
	ul.eight li.longer a {width: 15%;}
	ul.nine li a {width: 11%;}
	ul.eight li.shorter a {width: 5%;}
	ul.eight li.longer a {width: 15%;}
	/* this bit of magic styles the onstate of individual pages by reading which page we are on from the 
body's id attribute - body_home, etc. - and combining that with the nav list's li id attribute - nav_welc, etc. 
Could have used php, but this seems neater and faster, also works for multiple pages within a section, 
which is better than methods that need filenames to be specified and checked for using if else clauses*/
#body_home #nav_home a, 
#body_about-us #nav_about-us a,
#body_collections #nav_collections a, 
#body_agents #nav_agents a,  
#body_techinfo #nav_techinfo a, 
#body_contacts #nav_contacts a {/*font-weight:bold;*/text-decoration:none;color: #314162;} /*the lack of a comma after the last a is very important!! */
#menu a:hover {text-decoration:underline; /*padding-bottom:2px; border-bottom: 2px solid black;*/}
#body_privacy a#nav_privacy,
#body_terms a#nav_terms,
#body_news #nav_news,
#body_legal a#nav_legal {font-weight:bold;text-decoration:none;}
#navbar {background: #001934;}
/*end navbar*/
/* BORDERS */
.bannercopy {/*border-bottom: #fff was: #47596c  solid 1px */ ;padding-top:3em;}
.navcopy {border-top: #fff /*was: #788594 */ solid 1px;height:2em;padding-top:0.8em;}/*height and padding adjust navbar and separator positioning*/
.navcopy {border-bottom: #fff  /*was: #a8b0ba */solid 1px;}

.navcopy {border-top: #fff solid 1px/* CHANGEd from:966081 */;height:2em;padding-top:0.8em;}
.nav_breadcrumb {border-top: #fff/* CHANGEd from:788594 */ solid 1px;height:2em;padding-top:0.8em;}/*height and padding adjust navbar and separator positioning*/

/* end BORDERS */
.footercopy {font-size:1em;font-weight:200;border-top: #fff /*was: #a8b0ba */ solid 1px;}
.maincopy {font-size:1.1em;padding: 2em 4.1em 0 0;text-align: justify;}
.maincopy p {font-weight: 100;letter-spacing:2px; margin-bottom:1em;}
a:link {color:#436e9c;text-decoration: none;}
a:visited {color:#436e9c;text-decoration: none;}
a:hover {text-decoration: underline;}
h1 {font-size:2em; text-transform:uppercase;color:white;font-weight:100;letter-spacing:6px;text-align:left;}
h2 {font-size:0.9em; text-transform:uppercase;color:white;font-weight:100;letter-spacing:2px;text-align:left;margin-bottom:0.5em;}
#footer {background: #001934;}
#footer_left p {font-size:0.9em;padding:1.25em 0 0 2em;}
#footer_right p {text-align:right;padding:0.75em 4.5em 0 0;}/*adjust positioning via right-padding value to line up with right-edge of logo */


/*Brought in from Yarn pages*/

/* CAN MOVE TO knollyarns.css*/
.bannercopy {border-bottom: #fff;/* CHANGEd from:af869f */}
.navcopy {border-top: #fff/* CHANGEd from:966081 */ solid 1px;height:2em;padding-top:0.8em;}
.nav_breadcrumb {border-bottom: #fff/* CHANGEd from:a8b0ba */ solid 1px; border-top: #fff/* CHANGEd from:966081 */ solid 1px; text-align: right;}
p.breadcrumb {margin-right:4.75em;font-size:0.9em;letter-spacing:1px;}
.nav_breadcrumb a:link{text-decoration:none; color:#fff;}
.nav_breadcrumb a:visited{text-decoration:none; color:#fff;}

/* add this class to h1s that should not be transformed to uppercase, and do by hand instead */
.no_transform {text-transform:none;}

#ordercopy {clear:both;margin: 2em 0 -1em 1.5em;font-weight:400;letter-spacing:2px;}

/*compare*/
.navcopy {border-top: #fff/* CHANGEd from:966081 */ solid 1px;height:2em;padding-top:0.8em;}
.nav_breadcrumb {border-top: #fff/* CHANGEd from:788594 */ solid 1px;height:2em;padding-top:0.8em;}/*height and padding adjust navbar and separator positioning*/

.nav_breadcrumb {border-bottom: #fff/* CHANGEd from:a8b0ba */ solid 1px; border-top: #fff/* CHANGEd from:966081 */ solid 1px; text-align: right;}
p.breadcrumb {margin-right:4.75em;font-size:0.9em;letter-spacing:1px;}


.nav_breadcrumb a:link{text-decoration:none; color:#fff;}
.nav_breadcrumb a:visited{text-decoration:none; color:#fff;}


/*woolmarks*/

.relative {position: relative;}/* important for woolmark positioning, in combination with absolute for the #woolmark div */
#woolmarks {position: absolute ;display: block; /* So we can give the element a width */ top:461px; left:0px;}
p.woolmark {float:left;margin-right:1em;} 
#ordercopy {clear:both;margin: 2em 0 -1em 1.5em;font-weight:400;letter-spacing:2px;}