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

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: url('../images/background.png') repeat-y top center #ece8e1;
} 


#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:660px;
	float:right;
  padding: 20px;
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}


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: 133px;
  background: url('../images/bg-header.gif') repeat-x 0 45px;
  position: relative;
  z-index: 10;
}
#header #logo {
  float: left;
  margin: 13px 0 0 15px;
}
#topNav ul {
	padding-top: 62px;
  float: left;
  padding-left: 25px;
}
#topNav li {
	float: left;
  margin-right: 25px;
  font-size: 14px;
  list-style: none;
}
#topNav li a {
  color: white;
}
#topNav a:hover {
	text-decoration:none;
}


#header #search {
	float:right;
	width:180px;
	margin-top: 59px;
	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 {
	line-height: 23px;
  background: #C31230;
  padding: 0 8px;
  cursor: pointer;
  font-size: 12px;
  margin: 0;
  color: #fff;
  border: 0;
  background: url('../images/search-button.png') no-repeat 0 0;
}









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

#topBar {
	margin:0;
	width:940px;
	height:68px;
  margin-bottom: 15px;
}

#topBar #basket {
	float:right;
	margin:0;
	width:305px;
	height:75px;
  position: relative;
}
#topBar #basket .donkey-tag{
  position: absolute;
  top: -65px;
  left: -18px;
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
  z-index: 2;
}
#topBar #basket .donkey-total {
  z-index: 2;
  position: absolute;
  top: -15px;
  left: 141px;
  padding: 1px 9px;
  background: white;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 12px;
}
#topBar #basket .donkey-checkout {
  position: absolute;
  top: 23px;
  left: 139px;
  z-index: 1;
  background-position: top right;
  width: 152px;
  overflow: hidden;
}


#topBar img {
	float:left;
}


#topBar #basket p {
	font-size:13px;
	font-weight:bold;
	color:#232323;
	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 #siteTitle {
  margin-bottom: 10px;
  height: 180px;
}


#sideNav ul {
	background: #C31230;
  border: 3px solid #C4C500;
  overflow: hidden;
  margin-top: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#sideNav ul.price {
	background: #232323;
  border: 3px solid #C31230;
}
#sideNav ul.happyhooves {
	background: #C31230;
  border: 3px solid #C4C500;
}


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


#sideNav li a {
	font-size:13px;
  color: #fff;
}


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


#sideNav #searchPrice,
#sideNav .listHead {
	font-size: 16px;
  font-weight: bold;
  color: white;
  line-height: 33px;
  padding-bottom: 0;
}
#sideNav .listHead h2 {
  line-height: 33px; 
}
#sideNav .listHead h2 a {
  font-size: 16px;
  color: #fff;  
}

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

#stamp {
  font-weight: bold;
  font-size: 12px;
  width: 567px;
  line-height: 17px;
}
#stamp p {
  padding: 10px;
  background: white;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}








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

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

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


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


div#productList{
	border-left:1px solid #c4c500;width:698px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}

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


#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:20px;
	float:left;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
}


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

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

#productPage #right {
	width:340px;
	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 12px;
}

#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:20px;
}

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

#footer #SPANAlogo {
	float:left;
  width: 100px;
  height: 47px;
  margin-top: 20px;
}

#footer ul {
  overflow: hidden;
  padding: 10px 15px;
  background: #C4C500;
}
#footer li {	
	float:left;
	list-style:none;
	font-size:12px;
	padding-right:15px;
}


#footer li a {
	color:#232323;
  font-weight: bold;
}
#footer li a:hover {
	color:#232323;
}
#footer .facebook,
#footer .twitter  {
  width: 56px;
  height: 56px;
  overflow: hidden;
  position: absolute;
  overflow: hidden;
  display: block;
  text-indent: -9999px;
  background: #232323;
  
}
#footer .twitter {
  top: 25px;
  right: 5px;
  background: url('../images/twitter.png') no-repeat 0 0;
}
#footer .facebook {
  top: 25px;
  right: 63px;
  background: url('../images/facebook.png') no-repeat 0 0;
}

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

#footer #legal p {
	margin-bottom: 5px;
}
	

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