/*	==================================================
	Typography and Colors - all media
	
	NOTE: Because so many typography attributes are the
	same, this style sheet is primarily organized by 
	attributes, rather than by selectors.
	
	This means that to change all of the attributes of
	a specific selector, you will need to search for all
	instances of that selector.
	
	Keep in mind, of course, that layout attributes 
	are specified elsewhere.
	--------------------------------------------------	*/

@import url(layout.css);
@import url(contact-forms.css);

/*	==================================================
	Font Families
	--------------------------------------------------	*/

body, #announce p, #site-doc p, .txtError {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	}

/*h2, .product .price, #product .price, #listings .product strong, h3.cart, .progress, #amount-due, #events h3 {
	font-weight: normal; /* Keeping this here b/c it's important when specifying these fonts 
	font-family: "ITC Franklin Gothic Med", "Franklin Gothic Medium", "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, sans-serif;
	}*/

h3, #breadcrumb, .brand, .term, #sizing-link, #close-sizing, .picture,
#user, #cart, #categories, #search, .tell-a-friend, h3.cart a { 
	font-family: Arial, Helvetica, sans-serif;
	}

/*	==================================================
	Font Sizing
	--------------------------------------------------	*/

body {
	font-size: 62.5% /* reset to 10px baseline */
	}

h3.cart a, #advanced, .note, #site-doc .note {
	font-size: 0.9em
	}

.enroll label { font-size: 1em }

#home, #home a, h3, #product h4, label, #sizing-chart, #gateway strong, #shopping-cart .submit a, #site-doc p, #site-doc li, #listings .product a, .txtError, #account, #added-msg, .enroll {
	font-size: 1.1em
	}

#listings .pagination_top, #listings .pagination_bottom, .empty-cart em, #shopping-cart #checkout a, #go-back, #pending-notice {
	font-size: 1.2em
	}

h1#header, h3.cart, .progress {
	font-size: 1.3em
	}

#events h3, #listings .product strong, #listings em {
	font-size: 1.5em
	}

h2 {
	font-size: 1.8em
	}

/*	==================================================
	Line Height
	--------------------------------------------------	*/

h2, .brand, .term, #sizing-link, #content #breadcrumb { 
	line-height: 1
	}

#events h3 {
	line-height: 1.2
	}

#header a, h3.cart, #search h3, .item, .item .term, #coupon-code strong, #checkout strong, .txtStockWarn em, #added-msg {
	line-height: 1.3
	}

form h3, #listings .product a {
	line-height: 1.4
	}

#content p, #content li, #content td, .description, label.cb, label.radio {
	line-height: 1.5
	}

#listings .pagination_top, #listings .pagination_bottom, #site-doc p, #announce p, #announce p strong {
	line-height: 1.6
	}

h3 {
	line-height: 1.8
	}

/*	==================================================
	Font Weight, Text Decoration, Text Transform
	--------------------------------------------------	*/

#listings .product strong, h3.cart, .progress, #amount-due, label.cb, label.radio,
#events h3, #announce p strong, #advanced, #sizing-chart th, #sizing-chart td {
	font-weight: normal
	}

h1#header, h2, #content strong, th, caption, label, .brand, #breadcrumb a, #breadcrumb em, #added-msg, 
#cart, h3, h3.cart a, a.asc, a.dec, #features a, .empty-cart em, #go-back em, .submit input, em input, #place-order, #return {
	font-weight: bold
	}

#header a, #site-docs a, .picture #main, #categories a, .empty-cart em, 
#featured-products a, #listings .product a, #checkout a, #go-back, 
a.enrolled, a.incart, a.pending { text-decoration: none }

#header a strong, #cart a strong, #header a#return, a.enrolled:hover, a.incart:hover, a.pending:hover { text-decoration: underline }

.brand, .term, #sizing-link, h3, h3.cart a, .pending em { text-transform : uppercase }

h3 em, .progress, #amount-due, #events h3, h3.cart, #search h3 { text-transform: none }


#user, #cart, #categories, #search, .tell-a-friend {
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.5;
	}

#listings .brand {
	font-size: 90%;
	line-height: 1.5;
	letter-spacing: .05em;
	}

#sizing-chart th, #sizing-chart td { text-align: center }
#sizing-chart td, #site-doc td { font-family: Georgia, Times, serif; font-size: 1.1em; }
#sizing-chart td strong { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: .909em }

#content #checkout strong {
	font-weight: normal;
	background: #ffc /* url(../styleImages/ui/alert.gif) no-repeat 11px 1em */;
	}

/*	==================================================
	List styles for special cases.
	--------------------------------------------------	*/

#site-doc li {
	line-height: 1.4;
	margin-bottom: .3em;
	}

#site-doc ol li {
	list-style: decimal;
	}

#site-doc ul li {
	padding-left: 1em;
	background: /* url(../styleImages/ui/list_sq_876.gif) no-repeat left .6em */;
	}

/*	==================================================
	Text colors all-at-once.
	--------------------------------------------------	*/
#header a:hover strong, #header #return:hover, .term, body, 
#site-docs a, #listings .product a, .empty-cart em, #go-back em, #announce p, #user a { 
	color: #333
	} /* dark gray */

#cart, #cart a, #breadcrumb a, #breadcrumb em, .quantity, label, h3.cart, .item strong, .txtOldPrice { 
	color: #777 
	} /* gray */

#header a:hover, a, #cart a.pending strong, #search h3, #user strong, .product .price, #product .price, .txtError, #cart-items th, .orders th, #coupon-code strong {
	color: #42a5e9 
	} /* Blue */

#header a strong, #breadcrumb, h2, #user, #site-docs, #listings .brand, #features, #events h3, #features a { 
	color: #feb231
	} /* Gold */

.submit input, em input, #place-order, #listings h2 span, #shopping-cart .progress, .picture #main em, #features h2, #features p, #features a:hover, #features a.focus, #cart a strong { 
	color: #fff
	} /* White */

#shopping-cart .progress strong, h3, caption, #sizing-chart th, #sizing-chart strong, .pending em,
#gateway strong, #checkout strong, #announce p strong, #site-doc strong, .txtStockWarn, 
.validation-advice, .divEmailError, #return a:hover, #cart a:hover strong, label.cb, label.radio, input { 
	color: #000
	} /* Black */

/* Hover states after link colors have been declared*/
a:hover, #breadcrumb a:hover, #cart a:hover strong { color: #333 }

#user a:hover, #site-docs a:hover { color: #42a5e9 }

#listings a:hover { color: #000 }

/* ERROR MATCHING */
.fill_required .req, .fill_required .req * { color: #000 }

#added-msg { color: #f00 }

/*	==================================================
	Border colors, Backgrounds
	--------------------------------------------------	*/

#cart a {
	border-bottom: 3px solid #c8e648;
	}

input, textarea, select, #listings .product a, #listings img, #listings .product, 
#main, #MainProdImage, p.txtError, #checkout strong, #searchbox, .divEmailError, .divEmailInfo, #go-back, #pending-notice a { border: 1px solid }

.submit input, em input, #place-order { border: 2px solid }

#main #MainProdImage, #place-order strong { border: 0 }

#listings h2 span, .progress span {
	border-right: 8px solid #55b4f4;
	}

.enroll, #outOfStock em, p.alert, div.alert, #site-doc table { border-width: 1px 0 }

.register h3, #advanced-search h3 , #cart-items td, .orders td { border-bottom-width: 1px }

.register h3.progress, #cart-items .txtStockWarn { border-bottom-width: 0 }

.picture #main em {
	padding: 2px 6px 4px;
	background: #bbab90;
	border-width: 1px 1px 0 0;
	}

select, .register h3, #advanced-search h3 { border-color: #ccc }

input, textarea, #searchbox { border-color: #999 #ccc #ccc #999 }

.submit input, em input, #place-order, #go-back, #pending-notice a { border-color: #c8e648 #90ae13 #90ae13 #c8e648 }

/* ERROR MATCHING */
.fill_required .req, .fill_required .req * { border-color: #444 }

/* Go one better if the browser can handle it */
.fill_required .req input[value=""] { border-color: #f33; background: #ffc }

p.submit, #due, .enroll, #sizing-chart, #new-account, #no-account, #keep-shopping, #site-doc table { border-color: #feb231 }

#cart-items td, .orders td, #listings #sort_by, #listings .pagination_bottom, #main, #MainProdImage { border-color: #f4f1df }

#listings .product a, #listings img, #listings .product, .picture #main em { border-color: #fff }

#listings .product a:hover img, #outOfStock em, .alert, .validation-failed { border-color: #42a5e9 !important }

p.txtError, #checkout strong, .divEmailError { border-color: #ff6 }

.divEmailInfo { border-color: #6cf }

.picture #main:hover { border-color: #ec3 }

#content #place-order strong { background: none }

.submit input, em input, #place-order, #cart a { background: #a0c600 }

.picture #main:hover em { background: #777 }

.txtError, .validation-advice, .divEmailError { background: #ffc }

.divEmailInfo { background: #d4f0fe }

th { background: #f4f1df }

#cart a strong {
	background: url(../styleImages/cart2.gif) no-repeat 8px 4px;
	}

#cart a.pending strong { background-image: url(../styleImages/cart.gif); }

/*#listings h2, .progress { 
	background: url(../styleImages/ui/main-panel-top.png) no-repeat -5px botto,;
	}*/

#shopping-cart .progress { background-position: -614px bottom }

#listings h2 span, .progress span {
	background: #a0c600 /* url(../styleImages/ui/header-gradient.png) repeat-x top */;
	}

#featured-products a.focus {
	background: /* url(../styleImages/ui/arrow-white-up.gif) no-repeat 11px 50% */;
	}

.txtStockWarn { background: /* url(../styleImages/ui/ie/alert-gradient.gif) repeat-x top */ }
.txtStockWarn em { background: url(../styleImages/ui/arrow2-black-down.gif) no-repeat 16px 50% }

/*	==================================================
	Some things we just want to hide, but might as well
	have in the code
	--------------------------------------------------	*/

#product .options h4, #breadcrumb strong { display: none }