/*

Name: Quernstone
Description: Quernstone knitwear store in Orkney.
Version: 1.0
Author: Neil Ford
Author URI: http://lone-turtle.com/

*/

/*----------------------------------------------
    RESETS
----------------------------------------------*/


html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}
	
div,p,blockquote,ul,li,ol,dl,dt,dd,table,tr,td,th,img,a img,object,form,fieldset,input,textarea {margin: 0; padding: 0;}

ul {list-style-type: none;}
img, a img {display: block;  border: none;}
fieldset { border: 1px solid #efefef;}
object {margin: 0; padding: 0; border: 0;}

h1,h2,h3,h4,h5 {
	font-size: 16px;
	line-height: 32px;
	font-family: Clarendon, Georgia, Times, serif;
	padding: 0;
	margin: 0;
	font-weight: normal;
	color: #fff;
}

p {
	margin: 0 0 16px 0;
}

abbr {cursor: help; border-bottom: 1px dotted #eee; color: #eee;}
acronym {cursor: help; border-bottom: 1px dotted #eee; color: #eee;}

a {font-weight: bold;}
a:link {background:transparent; color:#C8FC7A; text-decoration: none;}
a:visited {background: transparent; color: #C8FC7A; text-decoration: none;}
a:hover {background:transparent; color:#fff; text-decoration: underline;}
a:active {background:transparent; color:#fff; text-decoration: none;}
a:focus{background:transparent; color:#fff; text-decoration: none;}


/*----------------------------------------------
    LAYOUT
----------------------------------------------*/

body {
	background: #000;
	color: #fff;
	text-align: center;
	font: 11px/20px "Trebuchet MS", Arial, helvetica, sans-serif;;
}

div#wrap {
	width: 960px;
	margin: 0 auto 0 auto;
	text-align: left;
	background: #000;
	color: #ddd;
}

div#wrap2 {
	width: 960px;
	float: left;
	display: inline;
	padding: 16px 0 0 0;
	background: #000;
	color: #ddd;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
}

div#header {
	width: 960px;
	float: left;
	display: inline;

}

h1#logo {
	width: 160px;
	height: 48px;
	float: left;
	display: inline;
}

/* For sub pages  */
h2#logo {
	width: 160px;
	height: 48px;
	float: left;
	display: inline;
}

div#miniContact {
	width: 240x;
	height: 48px;
	float: left;
	display: inline;
	margin: 0 0 0 16px;
	
	background: #000;
}

div#miniContact p {
	margin: 0;
	padding: 0;
	line-height: 24px;
}

div#scriptOff {
height:30px;
width:240px;
float: right;
background: url(../images/cart.gif) 0 0 no-repeat;
border: 1px solid #888;
display: inline;
font-size: 11px;
line-height:16px;
padding: 8px 8px 8px 40px;
z-index: 1000;
text-align: center;
margin: 0 16px 0 0;
}

div#googlecart-widget-control {
text-decoration:underline;
height:46px;
width:248px;
float: right;
background: url(../images/cart.gif) 0 0 no-repeat ;
border: 1px solid #888;
display: inline;
line-height: 48px;
padding: 0 0 0 40px;
z-index: 1000;
margin: 0 16px 0 0;
}

div#googlecart-widget-control a:link {color: #333;}
div#googlecart-widget-control a:visited {color: #333;}
div#googlecart-widget-control a:hover {color: #f30;}
div#googlecart-widget-control a:focus {color: #f90;}
div#googlecart-widget-control a:active {color: #f90;}


div#siteNav {
	clear: both;
	width: 960px;
	float: left;
	display: inline;
	padding: 16px 0 0 0;
	text-transform:capitalize;
	background: #000 url() 0 0 repeat-x;
}

div#siteNav ul {float: left; display: inline; width: 960px; background: #000 url(../images/navBG.jpg) 0 0 repeat-x; padding: 0 0 0 0;}
div#siteNav ul li {display: inline; float: left; margin: 0 0 0 0; border-right: 1px solid #444;}
div#siteNav ul li a {margin-top: -1px; display: block; text-align: center; line-height: 32px; width: 96px; float: left; text-decoration: none;border-top: 1px solid #555;}
div#siteNav ul li a:link {background: #222; color:#ddd;border-bottom: 1px solid #555;}
div#siteNav ul li a:visited {background: #222; color:#ddd;border-bottom: 1px solid #555;}
div#siteNav ul li a:hover {background: #000;color: #fff;border-bottom: 1px solid #555;}
div#siteNav ul li a:focus {background: #000;color: #fff;border-bottom: 1px solid #555;}
div#siteNav ul li a:active{background: #000;color: #fff;border-bottom: 1px solid #555;}

span.navSelected {
display: block;
text-align: center;
line-height: 32px;
width: 96px;
float: left;
background: #000;
color: #C8FC7A;
font-weight: bold;
font-weight: bold;font-size: 14px;
border-bottom: 1px solid #000;border-top: 1px solid #555;margin-top: -1px;
}

body.productPage li#siteNav2 a.navSelected,
body.cat li#siteNav2 a.navSelected {
display: block;
text-align: center;
line-height: 32px;
width: 96px;
float: left;
background: #000;
color: #C8FC7A;
font-weight: bold;font-size: 14px;
border-bottom: 1px solid #000;border-top: 1px solid #555;margin-top: -1px;
}

div#content {
	clear: both;
	width: 960px;
	float: left;
	display: inline;
	padding: 32px 0 0 0;
	min-height: 500px;
}

div#secondaryContent {
	clear: both;
	width: 960px;
	float: left;
	display: inline;
	padding-top: 16px;

}

div#siteInfo {
	clear: both;
	width: 928px;
	float: left;
	display: inline;
	margin: 16px 0 0 16px;
	padding: 0 0 16px 0;
	
}

div#siteInfo h4 {
float:left;
width: 120px;
display: inline;
}

div#siteInfo ul {
	float: left;
	width: 800px;
	display: inline;
}

div#siteInfo ul li {
	display: inline;
	line-height: 32px;
	border-right: 1px solid #aaa;
	padding: 0 8px 0 7px;
}

div#siteInfo ul li a {
padding: 0;
text-transform:capitalize;
}

div#siteInfo ul li.lastItem {
	border-right: 0;
}

/*----------------------------------------------
    INDEX RULES (id="home" class="index")
----------------------------------------------*/

body#home div#content1 {
	float: left;
	clear: both;
	display: inline;
	width: 944px;
	min-height: 352px;
	position: relative;
	padding: 0 0 0 16px;
	margin: 0 0 16px 0;
	z-index: 100;
	background: #000 url(../images/splashBG.jpg) 204px bottom no-repeat;
}

body#home div#movie {
	width: 496px;
	height: 352px;
	clear: both;
	float: left;
	
}

body#home div#movie img{
	display: inline;
}

body#home div#introduction {
	float: right;
	width: 400px;
	padding: 0 16px 0 0;
	display: inline;
	margin: 0;
	/*
	margin: 0 0 102px 0;
	*/
}

p.message {
	font-size: 18px;
	line-height: 28px;
	margin: 0 0 18px 0;
	color: #fff;
}

p.message2 {
	font-size: 12px;
	line-height: 18px;
}

body#home div#thumbnails {
	width: 404px;
	float: right;
	display: inline;
	clear: right;
	position: absolute;
	bottom: 0;
	right: 16px;
}

body#home div#thumbnails ul {
float: left;
margin-left: 0;
}

body#home div#thumbnails ul li {
	margin: 4px 0 0 4px;
	width: 97px;
	height: 97px;
	padding: 1px 0 0 1px;
	display: block;
	float: left;
	
	background: #444;
}

body#home div#thumbnails ul li.gutterFix {
margin: 4px 0 0 0;
}

body#home div#thumbnails ul li a {
	display: block;
	float: left;
	width: 95px;
	border: 1px solid #333;
}

body#home div#content2 {
	width: 569px;
	padding: 7px 15px 15px 15px;
	border: 1px solid #eee;
	height: 189px;
	background: #000;
	float: left;
	clear:both;
	display: inline;
	margin: 0 14px 0 16px;
}

body#home div#content2 h4 {
	color:#84D904;
}



body#home div#content4 {
	width: 268px;
	padding: 7px  15px 15px 15px;
	border: 1px solid #84D904;
	height: 189px;
	background: #fff;
	float: right;
	display: inline;
	margin: 0 16px 0 0;
	text-align: left;
	position:relative;
	color: #333;
}

body#home div#content4 a:link {color:#84D904;}
body#home div#content4 a:visited {color:#84D904;}
body#home div#content4 a:hover {color:#65A703;}
body#home div#content4 a:active {color:#65A703;}
body#home div#content4 a:focus{color:#65A703;}

body#home div#content4 h4 {
	color:#84D904;
}

body#home div#content4 div{
	width: 298px;
	text-align: center;
	position:absolute;
	bottom:16px;
	left: 0;
}

body#home div#content4 div a img {
display: block;
margin: 0 auto;
}

/**
	ERROR PAGE (body#error  body.customerCare)
**/

body.customerCare div#content1 {
	float: left;
	clear: both;
	display: inline;
	width: 400px;
	min-height: 352px;
	position: relative;
	padding: 0 0 0 32px;
	margin: 0 0 16px 0;
	z-index: 100;
}


/**
	TERMS PAGE (body#terms  body.subPage)
**/

body.subPage div#content1 {
	float: left;
	clear: both;
	display: inline;
	width: 400px;
	min-height: 352px;
	position: relative;
	padding: 0 0 0 32px;
	margin: 0 0 16px 0;
	z-index: 100;
}

/**
	STOCKISTS PAGE (body#stockists  body.subPage)
**/

body#stockists h1 {
padding: 0 0 0 32px;
width: 896px;
}

body#stockists div#content2 {
	float: right;
	display: inline;
	width: 432px;
	min-height: 352px;
	position: relative;
	padding: 0 32px 0 0;
	margin: 0 0 16px 0;
	z-index: 100;
}

body#stockists table {
	width: 432px;
border-top: 1px solid #333;
border-left: 1px solid  #333;
}

body#stockists th {
border-bottom: 1px solid #333;
border-right: 1px solid  #333;
padding: 8px;
}

body#stockists td {
border-bottom: 1px solid #333;
border-right: 1px solid  #333;
padding: 8px;
}

/**
	COLLECTIONS PAGE (body#collection  body.index)
**/

body#collection div#content1 {
float: left;
display: inline;
width: 928px;
margin: 0 0 0 0;
}

body#collection h1 {
	margin: 0 0 0 32px;
}

body#collection div.category {
	width: 200px;
	margin: 16px 0 0 32px;
	display: inline;
	float: left;
	background: #111;
}

body#collection div.category h3 {
	line-height: 32px;
	width: auto;
	text-transform: capitalize;
	background: #000;
	text-align: center;
}

body#collection div.category a {
	width: 198px;
	height: 198px;
	display: block;
	text-decoration: none;
}

body#collection div.category a:link {border: 1px solid #333;}
body#collection div.category a:visited {border: 1px solid #333;}
body#collection div.category a:hover {border: 1px solid #555;}
body#collection div.category a:active {border: 1px solid #444;}
body#collection div.category a:focus{border: 1px solid #444;}

div.category img {
	background: #222;
	margin: 7px 0 0 7px;
	padding: 3px;
	border: 1px solid #888;
}

/**
	Contact PAGE (body#contact)  body.subPage)
**/

body#contact div#content1 {
	width: 896px;
}

body#contact div#content1 h3 {
	margin: 32px 0 0 0;
}

div#tradContact {
	width: 352px;
	padding: 16px;
	border: 1px solid #333;
	float: left;
	display: inline;
	background: #000;
}

div#emailForm {
	width: 446px;
	padding: 16px;
	border: 1px solid #333;
	float: right;
	display: inline;
	background: #000
	
}

/**
	Product PAGE (body#product($foo)  body.productPage)
**/

div.product{
float: left;
display: inline;
width: 928px;
margin: 0 0 0 16px;
min-height: 31em;

}


div#imageSection{
	float: left;
	width: 496px;
}

div#imageSection img {
	background: #222;
	margin: 0;
	padding: 3px;
	border: 1px solid #888;
}

div#imageSection p {
	text-align: center;
	color: #eee;
	padding: 8px 0;
}


div#formSection {
	float: right;
	width: 384px;
	margin: 0 16px 0 0;
}

div#formSection h1, div#formSection h2, div#formSection h3 {
	text-transform: capitalize;
}

div#colourPicker {
background: #333;	
}

div.swatchSection {
	float: left;
	display: inline;
	padding: 8px 0;
	width: 78px;
	height: 8.454545em;
	border: 1px solid #333;
	margin: 0 8px 8px 0;
	text-align: center;
	text-transform: capitalize;
	background: #222;
}

div.swatchSection label {
	display: block;
	width: auto;
	height: auto;

}

#subButton {
	margin-top: 16px;
	float: right;
}

div.swatchSection img {
	margin: 0 auto;
	border: 1px solid #fff;
}

input.colourBox {
	padding: 4px;
}

span.labelValue {
	display: block;
	padding: 4px;
}

.product-title, .product-price, .product-attr-colour {text-transform: capitalize; font-size: 14px; font-weight: bold; margin-bottom: 8px;}
.incVat {text-transform: capitalize; color: #fff; font-size: 18px; font-weight: bold; margin: 8px 0 16px 0;}
.incVat span {font-weight: normal; font-size: 11px;}
.product-price{display: inline;}

div#toolBox {
	clear:both;
}

div.priceWrap {
	margin: 0 0 16px 0;
	color: #999;
}

div.priceWrap abbr {
	color: #999;
}

#cartNotes {
	margin: 0 0 16px 0;
}

#noteLink a {
	text-decoration: none;
}

/**
	Category PAGE (body#($foo)category  body.cat)
**/

body.cat h1, body.cat h2, body.cat h3, body.cat h4 {
	text-transform: capitalize;
}

body.cat h1 {
	margin: 0 0 16px 16px;	
}

body.cat div.category img {
	width: 496px;
		display: inline;
	float: left;
	margin: 0 0 0 16px;
}
#catLinks {
	width: 400px;
	display: inline;
	float: right;
	
}

#catLinks a {
	text-transform: capitalize;
}

/*
	MISC .classes
*/

.hideThis {
	display: none;
}

body#contact div#content1 h3.firstHeader {
	margin-top: 0;
}

div#stockCall {
border: 1px solid #333;
padding: 16px;
margin-top: 32px;
}

div#stockCall img {
	text-align: center;
	margin: 0 auto;
}

body#terms div#content1 {
	float: left;
	width: 416px;
	display: inline;
}
body#terms div#content2 {
	float: right;
	width: 400px;
	display: inline;
	border: 1px solid #333;
	padding: 16px 16px 24px 16px;
	margin: 32px 32px 0 0; 
}

body#map div#content2 {
	float: right;
	width: 400px;
	display: inline;
	border: 1px solid #333;
	padding: 16px 16px 24px 16px;
	margin: 0 32px 0 0; 
}