/* pixel to em coversion: http://pxtoem.com/ ems based on default browser 1em text size of 16px */

/* --- Imports --- */
@import url("reset.css");
@import url("common.css");
@import url("cart-layout.css");
@import url("more-less.css");

body {
	background:#fff;
	color:#333;
	font-family:tahoma, 'trebuchet ms', verdana, arial, sans-serif;
	font-size:100.1%;
}

p {
	font-size:0.875em;
	line-height:1.4em;
	margin:0.5em 0;
}

strong {
	font-weight:600;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.825em 0 0.5em 0;
}

h1 {
	color: #804040;
    font-size: 1.75em;
	font-weight:600;
	margin:2.25em 0 1.25em 0.875em;
}

div#header h1 {
	display:none;
}

br.clear {
	clear:both;
	height:0;
}

a:link, a:visited {
	color:#006699;
	font-weight:bold;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

div#system-message {
	background:#666;
	color:#fff;
	font-size:1.5em;
	width:auto;	
}

div#system-message p {
	margin:15px;
}

#wrap { /* centers all, sets width, allows drop shadows off of colmask below */
    background: #fff;
    border: 1px solid #000;
    margin: 0.313em auto 0.626em auto;
    width: 56.875em;
}

#header {
    background: url(/images/clients/logos/jii-header.png) 50% 0 no-repeat #879890;
    border: 1px solid #000;
    height: 8.25em;
    margin: 0.313em auto 0 auto;
    padding: 0;
    width: 56.25em;
}

ul#nav {
    background: #c9dee1;
    border: 1px solid #000;
    margin: 8.5em 0 0 0;
    width: 56.125em;
}

ul#nav li {
    display: inline;
    float: left;
    font-size: 0.9em;
    list-style-type: none;
    margin: 0.125em 0;
}

ul#nav li a {
    color: #333;
    font-weight: normal;
    height: 1.25em;
    padding: 1.5em;
    text-decoration: none;
}

div.c1 {
	margin:0 auto;
	position:relative;
	width:56.25em;
}

div.c1 div.c3 {
	padding:0.25em;
	position:absolute;
	right:0.375em;
	top:0;
	width:10em;
}

div.c1 div.c3 h3 {
	color:#666;
	font-weight:600;
}

div.c1 div.c3 p {
    font-size:0.8em;
}

div#footer {
	color:#ccc;
	font-size:0.8em;
	text-align:center;
	margin:1em auto;
	width:56.25em;
}

div#checkout-cues {
	width:56.25em;
}

div#checkout-cues .col {
	width: 20em;
}

/* begin store specific properties pulled from cart-layout */

/* begin i_product properties */

div.product-box {
	float:left;
	margin:0 0 1.5em 2em;
	min-height:16em;
	width:20em;
}

div.product-box div.product-image {
	width:8.5em;
}

div.product-box div.product-info {
	margin:0;
	width:11em;
}

div.product-box div.product-info .price {
	font-size:1em;
	margin-bottom:0;
}

div.product-box h4 {
	color: #896241;
	display:block;
	font-size:1.313em;
	font-weight:600;
	margin:0 0 0.75em 0;
}


div.product-box div.product-info p {
	font-size:0.8em;
}

/* added by martin just to make sure it works... derek feel free to move/tweak */
/* I didn't change anything above this spot */
div.product-box-wrapper {
    clear: left; /* This makes it so the lower products don't dynamically redistribute
                    when someone clicks "more" and grows product-box-wrapper's height */
}

div.lead-product-box {
    float: none; /* Just here for good form, instruction. Not strictly necessary, since 
                    the width guarantees it won't have a second column even if it's 
                    floating left (by virtue of the div having both the 
                    'lead-product-box' and 'product-box' classes) */
    width: 650px;
}
div.lead-product-box div.product-image {
    float: right; /* remove this and add float: right to .product-info below to arrange the other way */
    width: 450px;
}
div.lead-product-box div.product-info {
    width: 180px;
}