/*
Theme Name: Real Aotearoa
Theme URI: http://realaotearoa.co.nz
Description: Real Aotearoa	=
Version: 0.1
Author: Tim Snadden
Author URI: http://dna.co.nz/
*/

/* Begin Typography & Colors */

/*RESET  ###################################################################*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,th,td{margin: 0;padding: 0; }table{border-collapse:collapse;border-spacing: 0; }fieldset,img{border: 0; }address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal; }li{list-style:none; }caption,th{text-align:left; }h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; }q:before,q:after{content:''; }abbr,acronym {border: 0;font-variant:normal; }sup{vertical-align:text-top; }sub{vertical-align:text-bottom; }

a img { border: none; } /* Remove annoying border on linked images. */

body { 
	background: #F3F1E7 url(images/bg-body.gif) repeat-y; 
  color: #222; 
  font: 12px Georgia, serif;
}

/*Headings #################################################################*/

h1 { margin-bottom: 40px; }

h1 a { 
	background: url(images/logo.png) no-repeat 0 0; 
	color: #000;
	display: block; 
	height: 135px; 
	width: 140px; 
}

h1 a:hover { 
	background-position: 0 -135px; 
	color: #222; 
}

h2 { 
	font: 29px arial, "helvetica neue", helvetica, sans-serif; 
	letter-spacing: -1px;
	margin: 0 0 8px -2px;
	text-transform: uppercase;
}

h3 {
	color: #000;
	font: bold 14px arial, "helvetica neue", helvetica, sans-serif;
	margin-bottom: 8px;
}

h4 { 
	color: #222; 
	font: bold 11px arial, "helvetica neue", helvetica, sans-serif;
	margin-bottom: 7px;
}

h4.border {	border-top: 1px solid #CCC; }

h4.border span {
	border-top: 1px solid #00FFCC;
	display: -moz-box; /* firefox 2 - set properly below */
	display: inline-block;
	padding-top: 12px;
	position: relative;
	top: -1px;
}

/*Sidebar ##################################################################*/

#navigation {
	border-top: 1px solid #CCC;
	margin-bottom: 2em;
	margin-left: 0;
}

#navigation li {
	border-bottom: 1px solid #CCC;
	list-style: none; 
	text-transform: uppercase;
}

#navigation a { 
	color: #222; 
	font-weight: bold; 
	line-height: 24px; 
}

#navigation li.current_page_item > a:after { 
	color: #00A383; 
	content: ' ›';
	font-weight: bold; 
}

#navigation a:hover, #navigation li.current_page_item a { 
	color: #000; 
	text-decoration: none; 
}

#sidebar ul.secondary { 
	margin-bottom: 7px;
	margin-left: 0; 
}

#sidebar ul.secondary li { 
	border-bottom: none; 
	list-style: none;
	text-transform: none; 
}

#sidebar ul.secondary a { 
	color: #666; 
	font-weight: normal; 
	line-height: 17px;
}

#sidebar ul.secondary a:hover {	color: #4F4F4F; }

#sidebar ul.secondary li.current_page_item a { 
	color: #222;
	font-weight: bold;
}

#sidebar form { margin-bottom: 17px; }

#sidebar input.text {	width: 98px; }

/* Header ##################################################################*/

#header, #product-detail { 
	border-bottom: 1px solid #CCC; 
	border-top: 1px solid #CCC; 
	height: 133px; 
	margin-bottom: 40px; 
	position: relative;
}

#header-content { 
	bottom: 0; 
	left: 0; 
	position: absolute; 
}

#sort-by { 
	color: #222;
	font: 11px/9px arial, "helvetica neue", helvetica, sans-serif;
	text-transform: uppercase;
	margin: -2px 0 12px;
}

#sort-by a:link, #sort-by a:visited {
	color: #222;
	margin: 0 7px;
	padding-bottom: 10px;
}

#sort-by a.selected {	font-weight: bold; }

#sort-by a.selected, #sort-by a:hover { 
	border-bottom: 3px solid #00E6B8; 
	color: #000;  
	text-decoration: none; 
}

#sort-by a.next {
	font-weight: bold; 
	line-height: 9px; 
	margin: 0; 
}

#sort-by a.next:hover { 
	border-bottom: none; 
	font-weight: bold; 
	margin: 0; 
	text-decoration: underline; 
}

/* Product thumbs ##########################################################*/

.product-thumb { margin-bottom: 22px; }

.product-thumb a { 
	border-bottom: 1px solid #00FFCC; 
	display: block; 
	height: 130px; 
	position: relative; 
}

.product-thumb a:hover { 
	border-color: #000; 
	color: #222; 
	text-decoration: none; 
}

.product-thumb a:hover span.product-price { color: #222; }

.product-thumb a span { 
	bottom: 0; 
	display: block; 
	margin-bottom: 7px; 
	position: absolute; 
}

.product-thumb a span.product-name { 
	color: #222; 
	left: 0; 
	width: 95px; 
}

.product-thumb a span.product-price { 
	right: 0; 
	text-align: right; 
	width: 55px; 
}

/*Footer ###################################################################*/

#copyright, #footer { 
	border-top: 5px solid #EEE; 
	padding-top: 10px; 
}

#footer form { margin-bottom: 7px; }

#footer label { display: none; }

#footer input.text { width: 103px; }

/*Text elements ############################################################*/

p { 
	line-height: 17px;
	margin-bottom: .7em;  
}

p.intro { 
	font-size: 14px; 
	line-height: 20px; 
}

a { 
	color: #00A383; 
	text-decoration: none; 
}

a:hover, a:active, a:focus { 
	color: #000; 
	text-decoration: underline;
}

strong, b, .bold { font-weight: bold; }

em, i, .italic { font-style: italic; }

/*Lists ####################################################################*/

li ul, li ol { margin: 0 0 0 1.5em; }

ul, ol { margin: 0 0 .7em 1.5em; }

ul li { list-style-type: disc; }

ol li { list-style-type: decimal; }

dl { margin: 0 0 .7em 0; }

dl dt { font-weight: bold; }

dd { margin-left: 1.5em; }

ul.artists {	margin-left: 0; }

ul.artists li { 
	list-style: none; 
	margin-bottom: 8px;
}

/*Misc classes #############################################################*/

.ancillary { 
	color: #666; 
	font-family: arial, "helvetica neue", helvetica, sans-serif;
	font-size:  11px;
	line-height: 15px;
}

.hide { display: none; }

.first { 
	margin-left: 0; 
	padding-left: 0; 
}

.last { 
	margin-right: 0; 
	padding-right: 0; 
}

.top { 
	margin-top: 0; 
	padding-top: 0; 
}

.bottom {
	margin-bottom: 0; 
	padding-bottom: 0; 
}

.normal { font-weight: normal; }

.text-right { text-align: right; }

.inline { display: inline; }

.inline-block { 
	display: -moz-inline-box; /* Firefox 2. Reset below */
	display: inline-block; 
}

/*Pagination ###############################################################*/

.pagination { 
	clear: both; 
	text-align: right; 
}

.pagination-top {
	margin-bottom: 11px; 
	margin-top: -27px; 
}

a.previous, a.next { 
	color: #222;
	font: bold 11px arial, "helvetica neue", helvetica, sans-serif;
	text-transform:uppercase;
}

a.next:after { 
	background-color: #FFF;
	color: #00A383; 
	content: ' ›';
	font-weight: bold; 
	text-decoration: none;
}

a.previous:before { 
	background-color: #FFF;
	color: #00A383; 
	content: '‹ ';
	font-weight: bold; 
	text-decoration: none;
}

a.previous:hover, a.next:hover, a.previous:hover:before, a.next:hover:after { color: #000; }

.pagination a.previous { margin-right: 11px; }

.pagination a.next { margin-left: 11px; }

/*Grid #####################################################################*/

/* A container should group all your columns. */
.container {
	background: #FFF url(images/bg-vignette.jpg) no-repeat;
	padding: 40px 0 40px 40px;
  width: 950px;
}

/*Columns ##################################################################*/

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12 {
  float: left;
  margin-right: 20px; 
}

/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 60px; }
.span-2  { width: 140px; }
.span-3  { width: 220px; }
.span-4  { width: 300px; }
.span-5  { width: 380px; }
.span-6  { width: 460px; }
.span-7  { width: 540px; }
.span-8  { width: 620px; }
.span-9  { width: 700px; }
.span-10 { width: 780px; }
.span-11 { width: 860px; }
.span-12 { width: 940px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 80px; } 
.append-2  { padding-right: 160px; } 
.append-3  { padding-right: 240px; } 
.append-4  { padding-right: 320px; } 
.append-5  { padding-right: 400px; } 
.append-6  { padding-right: 480px; } 
.append-7  { padding-right: 560px; } 
.append-8  { padding-right: 640px; } 
.append-9  { padding-right: 720px; } 
.append-10 { padding-right: 800px; } 
.append-11 { padding-right: 880px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 80px; } 
.prepend-2  { padding-left: 160px; } 
.prepend-3  { padding-left: 240px; } 
.prepend-4  { padding-left: 320px; } 
.prepend-5  { padding-left: 400px; } 
.prepend-6  { padding-left: 480px; } 
.prepend-7  { padding-left: 560px; } 
.prepend-8  { padding-left: 640px; } 
.prepend-9  { padding-left: 720px; } 
.prepend-10 { padding-left: 800px; } 
.prepend-11 { padding-left: 880px; } 

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1  { margin-left: -80px; }
.pull-2  { margin-left: -160px; }
.pull-3  { margin-left: -240px; }
.pull-4  { margin-left: -320px; }
.pull-5  { margin-left: -400px; }
.pull-6  { margin-left: -480px; }
.pull-7  { margin-left: -560px; }
.pull-8  { margin-left: -640px; }
.pull-9  { margin-left: -720px; }
.pull-10 { margin-left: -800px; }
.pull-11 { margin-left: -880px; }
.pull-12 { margin-left: -960px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {
	float: left;
	position: relative;
}

.push-1  { margin: 0 -80px 12px 80px; }
.push-2  { margin: 0 -160px 12px 160px; }
.push-3  { margin: 0 -240px 12px 240px; }
.push-4  { margin: 0 -320px 12px 320px; }
.push-5  { margin: 0 -400px 12px 400px; }
.push-6  { margin: 0 -480px 12px 480px; }
.push-7  { margin: 0 -560px 12px 560px; }
.push-8  { margin: 0 -640px 12px 640px; }
.push-9  { margin: 0 -720px 12px 720px; }
.push-10 { margin: 0 -800px 12px 800px; }
.push-11 { margin: 0 -880px 12px 880px; }
.push-12 { margin: 0 -960px 12px 960px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 { 
	float: right;
	position:relative;
}

/*Misc classes and elements ################################################*/

/* In case you need to add a gutter above/below an element */
.prepend-top { margin-top: 12px; }

.append-bottom { margin-bottom: 12px; }

/* Use this to create a horizontal ruler across a column. */
hr {
	background: #CCC; 
	border: none; 
	clear: both; 
	color: #CCC;
	float: none; 
	height: 1px;
	margin: 0 0 1.45em;
	width: 100%; 
}

hr.space {
	background: #FFF;
	color: #FFF;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
	clear: both; 
	content: "\0020"; 
	display: block; 
	height: 0; 
	overflow: hidden; 
	visibility: hidden; 
}

.clearfix, .container { display: block; }

/* Regular clearing - apply to column that should drop below previous ones. */

.clear { clear: both; }

/*Forms ####################################################################*/

form { 
	font-family: arial, "helvetica neue", helvetica, sans-serif; 
	font-size: 11px; 
}

form ul { 
	display: block; 
	float: left; 
	margin-bottom: 0; 
	margin-left: 0; 
}

form ul li { 
	clear: both;
	list-style: none; 
	margin-bottom: 18px; 
}

form ul li.horizontal { 
	clear: none; 
	float: left; 
	margin-right: 20px; 
	width: 140px; 
}

form ul li.last { margin-right: 0; }

label { 
	display: block; 
	font-weight: bold; 
	margin-bottom: 3px; 
}

select { 
	border: 1px solid #CCC; 
	padding: 2px 0;
	width: 100%; 
}

textarea {
	border: 1px solid #CCC; 
	height: 125px; 
	padding: 3px;
	width: 292px; 
}

input, select, textarea { 
	font: 1em arial, "helvetica neue", helvetica, sans-serif; 
	color: #666; 
	margin-bottom: 4px;
}

input.secondary {
	background-color: #D4D4D4;
	border: none;
	color: #000;
	cursor: pointer;
	padding: 3px 5px;
}

input.secondary:hover {	background-color: #B8B8B8; }

input.text { 
	border: 1px solid #CCC; 
	padding: 3px; width: 132px;
}

sup.required { 
	color: #C00; 
	font-weight: bold;
}

input.submit { 
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px; 
	background-color: #00A383; 
	border-radius: 2px;
	border: none; 
	color: #FFF;  
	cursor: pointer;
	font-size: 14px; 
	font-weight: bold; 
	padding: 3px 0; 
	text-align: center; 
	width: 140px;
}

input.submit:hover { 
	background-color: #222;
	color: #00E6B8;
}

input.checkbox, .wpcf7-checkbox input { 
	margin: 0 3px 3px 0; 
	vertical-align: middle;  
}

.wpcf7-list-item-label { font-weight: bold; }

p.note { margin-bottom: 12px; }

/*Product detail ###########################################################*/

#product-detail { 
	height: auto;
	min-height: 417px;
	padding-top: 6px; 
	position: relative;
}

#product-detail #gallery.js-gallery { margin-bottom: 40px; }

#product-detail a.next, #product-detail a.previous { 
	color: #666; 
	cursor: pointer; 
}

#message-container { 
	clear: both;
	text-align: center; 
}

#message {
	border-bottom: 1px solid #ddd;
	color: #EB3F14;
	display: -moz-inline-box; /* Firefox 2 - reset below */
	display: inline-block;
	margin-bottom: 23px;
	padding: 6px 10px 3px;
}

#message .note { 
	color: #666; 
	font-style: italic;
}

a.previous span.ancillary, a.next span.ancillary { 
	font-variant: normal;
	font-weight: normal; 
}

a:link.price, a:visited.price {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background-color: #222;
	border-radius: 2px;
	color: #00E6B8;
	display: block;
	font-size: 14px;
	margin-bottom: 14px;
	padding: 5px 7px 6px;
}

a.price span { font-weight: bold; }

#product-detail a.next:hover, #product-detail a.next:hover span.ancillary, 
#product-detail a.previous:hover, 
#product-detail a.previous:hover span.ancillary { color: #000; }

/*Gallery ##################################################################*/

/* Basic display for no javascript. js-gallery class is added via js */
#gallery { 
 margin: 22px 0 12px;
}

#gallery li { list-style: none; }

#gallery.js-gallery {
	width: 620px;
	height: 420px;
	position: relative;
	clear: both;
}

#gallery.js-gallery li {
	position: absolute;
	width: 620px;
	height: 420px;
}

#thumbs {
	bottom: -3px;
	margin: 0;
	position: absolute;
	right: 0;
}

#thumbs li {
	cursor: pointer;
	float: left;	
	height: 50px;
	list-style: none;
	margin: 0 0 0 12px; 
	padding: 0 0 15px 0; 
	width: 80px;
	overflow: hidden;
}

#thumbs li img { width: 80px; height: 50px}

#thumbs li.active { border-bottom: 3px solid #00E6B8; cursor: default; }
#thumbs li.active a:hover { cursor: default; }

#thumbs a:focus { outline: none; }

/*Proverb ##################################################################*/

blockquote { 
	border-top: 1px solid #B9E6DD; 
	color: #00A383; 
	float: left;
	font-family: arial, "helvetica neue", helvetica, sans-serif; 
	font-size: 11px;
}

blockquote p { 
	line-height: 15px; 
	margin-bottom: 7px; 
}

blockquote.narrow { 
	margin-top: -10px;
	width: 100px; 
}

blockquote p.maori { 
	border-top: 3px solid #D9F1ED; 
	font-size: 14px; 
	line-height: 14px;
	margin-bottom: 4px;
	padding-top: 7px;
	text-transform: uppercase; 
}

cite { font-style: italic; }

/*Home page ################################################################*/

#map { 
	display: block; 
	height: 207px; 
	margin: 0 auto; 
	overflow: hidden; 
	width: 146px; 
}

#map:hover img { 
	position: relative; 
	top: -207px;
}

#home-header { 
	border-bottom: 1px solid #CCC; 
	border-top: 1px solid #CCC; 
	margin-bottom: 18px; 
	position: relative;
	height: 454px;
}

#home-header .pagination { 
	bottom: 20px; right: 0;
	position: absolute; 
}

.caption {
	bottom: 7px; 
	font-family: arial, "helvetica neue", helvetica, sans-serif; 
	font-size: 12px; 
}


.js-gallery .caption {
	left: 0; 
	position: absolute;
}

.caption span.title { 
	color: #222; 
	font-weight: bold; 
}

.caption span.artist { color: #666; }

.caption span.price, .caption span.view { 
	font-weight: bold; 
	padding: 0 3px;
}

/*CONTACT FORM #############################################################*/

#speak { border: none; }

.wpcf7-not-valid-tip { font-weight: bold; color: #900; }

div.wpcf7-response-output {
	background-color: #66CC33;
	clear: both;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	padding: 0.85em 1em;
}

div.wpcf7-spam-blocked, div.wpcf7-validation-errors { background-color: #E06D61; }

span.wpcf7-form-control-wrap {	position: relative; }

.wpcf7-display-none { display: none; }