/* 
========================================

Date: 11th August 2009

Author: Katrin Kerber

Written for: www.spanagifts.org and www.happyhooves.org

Valid xHTML & CSS

---------------------

Swatch colours:

red 			=	#c31230
dark green		=	#2c4d2c
light green		=	#b3bfa7
light grey		=	#ccc
dark grey		=	#333

=======================================


CSS INDEX:

	1. RESET/DEFAULT				line 49
	2. TYPOGRAPHY					line 111
	3. HEADER						line 163
	4. TOP BAR						line 268
	5. SIDE NAVIGATION				line 315
	6. PRODUCT CATEGORY LISTS		line 379
	7. PRODUCT DETAIL PAGE			line 439
	8. INFO PAGES					line 545
	9. FOOTER						line 582
	

======================================= */	










/* ===========  1. RESET/DEFAULT  =========== */


* 
{
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}


body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#333;		
	background: #fff url(../images/bg.jpg) top right repeat-x;
} 


#wrapper {
	margin: 0 auto;
	border-collapse:collapse;
	width:980px;		/* special width for IE6 and below */
}



html>body #wrapper {
	width:940px;
}
		


#shopContent {
	width:700px;
	float:right;
}

#infoContent {			/* Info pages */
	width:560px;
	float:left;
}


a img {
	border:none;
}









/* ===========  2. TYPOGRAPHY  =========== */

h1, h2 {
	font-weight:bold;
}


h1 { 		/* = product heading on product detail page */
	font-size:35px;
}


h2 {		/* = side nav and table headings */
	font-size:20px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h2 a { font-size:20px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
h2 a:hover { text-decoration:none; }
h3 {		/* product title in product lists */
	font-size:15px; font-weight:normal;
}


h4 {		/* sub heading on about us, FAQ etc pages */
	font-size:15px;
	font-weight:bold;
	padding-top:20px;
}

a {
	color:#333;
	text-decoration:none;
}


a:hover {
	text-decoration:underline;
}


.price {
	font-weight:bold;
}

strong {font-weight:bold;}







/* ===========  3. HEADER  =========== */

#header {
	height:95px;
}

#logo {
	width:260px;
	height:95px;
	margin-right:10px;
	float:left
}


#topNav ul {
	float:left;
	padding-top:65px;
	margin-right:10px;
}


#topNav li {
	list-style:none;
	float:left;
	height:30px;
	width:100px;
	font-size:16px;
	letter-spacing:1.2px;
	margin-right:20px;
}


#topNav li a {
	color:#fff;
	padding-top:6px;
	position:absolute;
	text-align:center;
	width:100px;
	height:30px;
}


#topNav .active a {			/* for IE6 and below */
	background:url(../images/active-tab.gif) no-repeat;
	color:#c31230;
	font-weight:bold;
}


html>body .active a {	
	background: url(../images/active-tab.png) no-repeat;
}

#topNav .active a:hover {
	text-decoration:none;
}


#header #search {
	float:left;
	width:180px;
	margin-top:64px;
	letter-spacing:1.2px;
}

#search img {
	float:left;
}

input.searchField {
	width:80px;
	height:19px;
	float:left;
	font-size:13px;
	font-weight:normal;
	color:#666;
	padding:4px 5px 0 5px;
}


#search input.submit {
	width:60px;
	padding-top:6px;
	color:#fff;
	font-size:16px;
	letter-spacing:1px;
	background:none;
	cursor:pointer;
	float:right;
}









/* ===========  4. TOP BAR  =========== */

#topBar {
	margin:20px 0 40px 0;
	width:940px;
	height:75px;
}

#topBar #basket {
	float:left;
	margin:20px 20px 0 0;
	width:220px;
	height:75px;
}


#topBar img {
	float:left;
}


#topBar #basket p {
	font-size:13px;
	font-weight:bold;
	color:#2c4d2c;
	text-align:center;
}


#topBar #basket span {		/* number of items in basket */
	font-size:25px;
}


#topBar #basket #checkoutBtn {
	width:160px;
	float:right;
}









/* ===========  5. SIDE NAVIGATION  =========== */

#sideNav {
	width:220px;
	float:left;
	margin-right:20px;
}


#sideNav .listHead {
	margin-top:20px;
	height:39px;
	background:#b3bfa7;
}


#sideNav .listHead h2 {
	padding:8px 0 0 10px;
}


#sideNav ul {
	border:1px solid #b3bfa7;
	padding:10px 10px 0 10px;
}


#sideNav li {
	list-style:none;
	padding-bottom:10px;
}


#sideNav li a {
	font-size:15px;
}


#sideNav #activeCategory a {
	font-weight:bold;
}


#sideNav #searchPrice {
	background:#eee;
	font-size:16px;
	font-weight:bold;
	padding:8px 10px 7px 10px;
	margin:0 -10px 15px -10px;
}

#sideNav li span {			/* HH arriving soon announcement */
	font-size:15px;
	font-weight:bold;
}









/* ===========  6. PRODUCT CATEGORY LISTS  =========== */

#productList {
	width:700px;
	clear:left;
	float:left;
}

#productList .listHead {
	height:39px;
	background:#b3bfa7;
}


#productList .listHead h2 {
	padding:8px 0 0 10px;
}


div#productList{
	border-left:1px solid #b3bfa7;width:698px; 
}

#productList td {
	border-right:1px solid #b3bfa7;	border-bottom:1px solid #b3bfa7;
	padding:20px;
	width:193px;
}


#productList td .productThumb {
	width:190px;
	height:100px;
	margin-bottom:10px;
}


#productList td .price {
	font-size:18px;
	float:left;
	margin-top:20px;
}


#productList td .addBtn {
	margin-left:10px;
	margin-top:15px;
	float:right;
	cursor:pointer;
}









/* ===========  7. PRODUCT DETAIL PAGE  =========== */

#productPage {
	margin-bottom:40px;
	float:left;
}


#productPage #left {
	width:300px;
	margin-right:20px;
	float:left;
}

#productPage #left img {
	width:300px;
}

#productPage #right {
	width:380px;
	float:right;
}


#productPage h1 {
	margin-bottom:20px;
}


#productPage p {
	margin-bottom:20px;
}

#productPage span {
	font-weight:bold;
}

#productPage .code {
	font-style:italic;
	font-weight:normal;
}

#productPage #right ul{padding-left:20px;margin-bottom:20px;}

#productPage #price {
	float:left;
	font-size:25px;
	font-weight:bold;
}

#productPage label {
	font-size:14px;
	float:left;
	margin:5px 5px 0 0;
}

#productPage span.quantityField {
	float:left;
	font-weight:normal;
	padding-top:5px;
	padding-left:10px;	/* special margin for IE6 and below */
}

html>body #productPage span.quantityField {
	float:left;
	display:inline;
	margin:0 5px 0 35px;
}

#productPage input.quantityField {
	height:20px;
	width:50px;
	float:left;
	display:inline;
	font-size:13px;
	border:1px solid #999;
	padding:4px 5px 0 5px;
}

#productPage textarea:focus, #productPage input:focus {
	border:1px solid #333;
}

#productPage .addBtn {
	float:left;
}


/* HH gift card options */

#productPage #cardOptions {
	font-size:18px;
	font-weight:bold;
	margin:10px 0 20px 0;
}

div#ctl00_ContentPlaceHolder1_pnlHappyNews td{
	padding-bottom:20px;
}

#cardOptions input {
	margin:5px 5px 0 0;
}

#cardOptions #noCard {
	float:left;
}


/* ECARD form */
#eCardForm form {
	margin-top:40px;
}
	
#eCardForm label {
	width:140px;
	font-weight:bold;
	display:block;
	float:left;
	margin-right:10px;
	padding:5px 0;
}


#eCardForm p {margin-bottom:5px;}

#eCardForm input {
	clear:left;
	width:368px;
	height:20px;
	border:1px solid #999;
	padding:4px 5px 0 5px;
}

#eCardForm textarea {
	width:368px;
	border:1px solid #999;
	padding:4px 5px 0 5px;
	font-family:Arial, Helvetica, sans-serif;
}


#eCardForm textarea:focus, #addressForm input:focus {
	border:1px solid #333;
}

.previewBtn {
	float:left;
	margin:0 15px 0 85px;	/* for IE6 */
}

html>body .previewBtn {
	margin:0 15px 0 107px;
}
	








/* ===========  8. INFO PAGES  =========== */

#infoContent h1 {
	padding-bottom:20px;
}


#infoContent p {
	margin-bottom:10px;
	line-height:18px;
}

#infoContent p a {
	color:#c31230;
}

#infoContent ul {
	margin-bottom:20px;
}

#infoContent li {
	list-style:none;
	padding:5px 0;
}

#infoContent li a {
	color:#c31230;
}

#infoContent ol li{
	list-style:decimal;
	margin-left:20px;
}









/* ===========  9. FOOTER  =========== */

.clear
{
	clear:both;
	padding-top:60px;
	background:#fff;
	
}

#footer {
	padding:35px 0;
	border-top:1px solid #ccc;
}

#footer #SPANAlogo {
	float:left;
	width:87px;
}

#footer li {	
	float:left;
	list-style:none;
	font-size:12px;
	padding-left:15px;
}


#footer li a {
	color:#c31230;
	border-right:1px solid #333;
	padding-right:15px;
}

#footer #legal {
	float:left;
	width:823px;
	padding:15px 0 35px 15px;
	font-size:12px;
	line-height:18px;
}

#footer #legal a {
	color:#c31230;
}