@CHARSET 'UTF-8';

/*
 * Author: RSmith
 * Created: Feb 27, 2009
 * Description: All major styles that control site layout (e.g.: Structure)
 */

/*
 * README: If medium in most browsers is 16px,
 * 1em would then equal 16px.
 * 1em = 10px makes for easy math
 * 62.5% gives us the magic 10px in a re-sizable, IE-friendly way
 * Formula for sizing in ems: child px / parent px = child ems
 * E.g.: If I want an 18px width, 18px / 10px = 1.8em (width is 1.8em)
 * Font size in ems credit: Dan Cederholm & Richard Rutter
 *
 * DO NOT ADD COLORS HERE!
 * Please note that all colors all managed within colors.css.
 */


/* ///////////////////////////////////////////////////
 * @IMPORT(s)
 * /////////////////////////////////////////////////// */
@import url('reset.css');


/* ///////////////////////////////////////////////////
 * CORE STRUCTURE
 * /////////////////////////////////////////////////// */
body#z1r {
	font-family: Helvetica, Arial, san-serif;
	font-size: 62.5%; /*NOTE: Sets base font size to 10px ... see above*/
	height: 100%;
	position: relative; /*NOTE: ie fix adjusted*/
	text-align: left;
	}
#container {
	background: none; no-repeat top left;  /*NOTE: ie6.css fix adjusted for height*/
	height: 100%;
	position: relative; /*NOTE: ie fix adjusted*/
	margin: 0 auto;
	width: 91.7em; /*917px / 10px = 91.7em;*/ /*NOTE: Width MUST be set in ems!*/ 
	}

#b, #f {
	/*NOTE: Every main container except #h*/
	position: relative; /*NOTE: ie fix adjusted*/
	}
#b.home {
	width: 91.7em !important; /*NOTE: Fill up entire width of #container*/
	}


/* ///////////////////////////////////////////////////
 * GENERAL TYPOGRAPHIC STYLES
 * /////////////////////////////////////////////////// */
h1 {font-size: 2.6em; /*NOTE: Same as 26px*/}
h2 {font-size: 2.2em; /*NOTE: Same as 22px*/}
h3 {font-size: 2.0em; /*NOTE: Same as 20px*/}
h4 {font-size: 1.6em; /*NOTE: Same as 16px*/}
h5 {font-size: 1.4em; /*NOTE: Same as 14px*/}
h6 {font-size: 1.2em; /*NOTE: Same as 12px*/}

h1, h2, h1 a, h2 a {
	text-transform: uppercase;
	}

p  {
	font-size: 1.149em; /*NOTE: All paragraphs will default to 11px unless over-ridden w/ !important*/
	line-height: 1.5em;
	margin: 1em 1em 1em 0; /*NOTE: No left margin!!!*/
	}

/* ///////////////////////////////////////////////////
 * LINK STYLES
 * /////////////////////////////////////////////////// */
a:link, a:visited,
a:hover, a:active, a:focus {
	cursor: pointer !important;
	outline: none;
	text-decoration: none;
	}


/* ///////////////////////////////////////////////////
 * UNORDERED LISTS
 * /////////////////////////////////////////////////// */
ul li {
	display: inline;
	list-style-type: none;
	}


/* ///////////////////////////////////////////////////
 * GLOBAL HR STYLES
 * /////////////////////////////////////////////////// */
hr {
	border: none;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #333;
	margin: 1em 0 !important;
	width: 100%;
	}
div.z1rHR {clear: both;}
div.z1rHR hr {display: none;}
#products div.z1rHR hr {
	background-color: #666;
	clear: both;
	display: block;
	height: 1px !important;
	margin: 1em 0;
	overflow-y: hidden; 
	}


/* ///////////////////////////////////////////////////
 * FLOAT, HIDE & CLEAR ME!
 * /////////////////////////////////////////////////// */
.hide,
#h #navMain span,
#b dl.adr dt {
	/*NOTE:
	 *Any HTML text being replaced by a PNG graphic should
	 *use the .hide class OR be added and/or be added here.
	 */
	left: -9999px;
	position: absolute;
	}

.clear {clear: both;}
.clearLeft {clear: left;}
.clearRight {clear: right;}

.left {float: left;}
.right {float: right;}


/* ///////////////////////////////////////////////////
 * #primaryCol & #secondary Styles
 * /////////////////////////////////////////////////// */
#b #primaryCol {
	float: left;
	height: 100%;
	width: 50em;
	}
#b #secondaryCol {
	float: right;
	height: 100%;
	width: 29.5em;
	}

#b #secondaryCol img {
	float: right;
	}


/* ///////////////////////////////////////////////////
 * #primaryCol & #secondaryCol Shared Styles
 * /////////////////////////////////////////////////// */
#b #primaryCol p,
#b #secondaryCol p {
	line-height: 1.5em;
	margin-top: 0;
	text-align: left;
	}
	
	/* ///////////////////////////////////////////////////
	 * #wheretobuy Styles
	 * /////////////////////////////////////////////////// */
	#b #wheretobuy #primaryCol{
		float: left;
		width: 28.6em; /*80.5 - (1 + 47.9 + 1) - 2 = 29.6*/
		}
	#b #wheretobuy #secondaryCol {
		float: right;
		width: 49.9em; /*80.5 - 28.6 - 2 = 49.9*/
		}
	
	
	/* ///////////////////////////////////////////////////
	 * #company Styles
	 * /////////////////////////////////////////////////// */
	#b #company #primaryCol.about {
		float: left;
		width: 28.6em; /*80.5 - (1 + 47.9 + 1) - 2 = 28.6*/
		}
	#b #company #secondaryCol.about {
		float: right;
		width: 49.9em; /*80.5 - 28.6 - 2 = 49.9*/
		}
	
	#b #company #primaryCol.requestcatalog {
		float: left;
		width: 28.6em; /*80.5 - (1 + 47.9 + 1) - 2 = 28.6*/
		}
	#b #company #secondaryCol.requestcatalog {
		float: right;
		width: 49.9em; /*80.5 - 28.6 - 2 = 49.9*/
		}