/* Nine Tails Tattoo by Alex
Responsive Column Sizes
Wrapper = 1008px
Col Width = 136px / 16.831%

************/

/* Reset ************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select {
	vertical-align: middle;
}

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



/* Group ************/

.group:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* Site ************/

html {
	font-size: 62.5%; /* 1em/rem = 10px */
}

body {
	background: #151412 url('../images/bkgrd_body.png');
	line-height: 24px;
	font-size: 16px;
	font-size: 1.6rem;
	font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",serif;
	color: #281910;
	padding: 1.5em 0;
}

.wrapper {
	position: relative;
	max-width: 1008px;
	margin: 0 auto;
	background: #fdf2ab url('../images/bkgrd_wrapper.png') repeat-y 0 0;
	box-shadow: 0 0 20px rgba(0,0,0,1);
}

/* Header (Masthead) ************/

.header {
	background: url('../images/bkgrd_header.png') no-repeat 0 0;
	clear: both;
	height: 227px;
	padding: 3em 0;
}

.logo {
	text-indent: -9999px;
	width: 188px;
	height: 227px;
	margin: 0 auto;
}

.logo a {
	background: url('../images/logo.png') no-repeat 0 0;
	width: 188px;
	height: 227px;
	display: block;
}

.cart {
	position: absolute;
	right:110px;
	top:185px;

}

.cart .itemstotal a {
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	font-size:1.4em;
}


/* Navigation ************/

nav {
	width: 80.1587302%;
	margin: 0 auto;
}

nav ul {
	border-bottom: 3px double #281910;
}

nav ul:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

nav li {
	display: inline;
}

nav li a {
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	display: block;
	float: left;
	text-align: center;
	width: 14.2857143%;
	text-transform: uppercase;
	color: #151412;
	font-size: 24px;
	line-height: 36px;
	font-size: 2.4rem;
	font-weight: 400;
	transition: all 0.3s ease-in-out;
}

nav li a:hover, nav li a:focus {
	color: #d91a00;
}

body.artwork nav li.artwork a, body.artists nav li.artists a, body.studio nav li.studio a, body.contact nav li.contact a, body.journal nav li.journal a, body.portfolio nav li.portfolio a {
	color: #d91a00;
}

/* Section ************/

section[role=main] {
	width: 80.1587302%;
	margin: 2em auto;
}

/* Forms ************/

input[type=text], textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",serif;
	color: #281910;
	font-weight: 400;
	font-size: 1em;
	border: 0;
	padding: 4px;
	width: 100%;
	opacity: 0.75;
	transition: all 0.3s ease-in-out;
}

textarea {
	height: 208px;
	resize: none;
}

input[type=text]:focus, textarea:focus {
	opacity: 1;
	box-shadow: 0 0 3px #7c7754;
}

input[type=submit], button {
	border-radius: 8px;
	background: #151412;
	color: #f0ede6;
	text-align: center;
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	text-transform: uppercase;
	padding: 4px 48px;
	border: 0;
	font-size: 1.4em;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

input[type=submit]:hover, input[type=submit]:focus,
button:hover, button:focus {
	background: #d91a00;
}

/* Informed FreeForm ************/

.stayintouch {
	padding: 0.84em 0 0;
	clear: both;
}

.stayintouch label {
	padding: 0 0 0.6em 0;
	display: block;
}

.stayintouch .name {
	width: 390px;
	width: 48.267%;
	float: left;
}

.stayintouch .email {
	width: 390px;
	width: 48.267%;
	float: right;
}

.stayintouch .buttons {
	clear: both;
	text-align: right;
	padding: 16px 0;
	margin: 16px 0;
}

/* Artists ************/

.mugshot {
	float: left;
	position: relative;
	margin: 0 3.96% 3.96% 0;
	width: 136px;
	width: 16.8316832%;
	background: #fff;
	padding: 0.81447963%;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
	line-height: 0;
}

.mugshot img {
	width: 100%;
	height: auto;
}

.artists article {
	clear: both;
}

/* Journal ************/

.journal article {
	width: 672px;
	width: 79.207%;
	float: left;
	padding: 0 0 2em 0;
}

.journal article header h2 {
	margin-top: 0;
}

.journal section aside {
	width: 136px;
	width: 16.831%;
	float: right;
}

.journal section aside h3 {
	margin-top: 0;
}

a.more:hover {
	color: #d91a00;
}

figure.summary {
	clear: both;
	margin: 0 1em 1em 0;
}

.summary img {
	padding: 4px;
	background: #fff;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
	width:100%;
}

.post {
	margin: 0 0 1em 0;
}

.post img {
	padding: 4px;
	background: #fff;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
	width:100%;
	height: 100%;
}

.journal .meta {
	height: 3em;
}

.journal .meta time {
	float: left;
	display: inline-block;
	margin: 0;
	padding: 0 1em 0 0;
}

.journal article p a {
	font-weight: 700;
}

.journal article p a:hover, .journal article p a:focus {
	color: #d91a00;
}

/* Pagination ************/

.paginate {
	clear: both;
}

.paginate p {
	margin: 0;
}

.pagination a, .pagination .current, .pagination .ellipsis {
	margin: 0 0.5em 0 0;
}

/* Aside ************/

aside li a {
	display: block;
	color: #281910;
}

aside li a:hover {
	color: #d91a00;
}

aside ul {
	margin: 0 0 2em 0;
}

/* Portfolio Landing ************/

.landing article {
	width: 304px;
	width: 37.6237624%;
	padding: 0 0 4em 0;
}

.landing .kanae {
	float: left;
}

.landing .mie {
	float: right;
}

.landing figure img {
	background: #fff;
	padding: 9px;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
	width: 94.897%;
}

.landing a.more {
	display: none;
}

/* Shop Product List ************/

/*

3cols @ 248px = 30.6930693%
32px margins = 3.960396%

*/

.prods figure {
	width:29.4554455%;
	float:left;
	margin:0 4.6% 0 0;
}

.prods figure img {
  width:100%;
	background: #fff;
	padding: 9px;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
}

.prods:last-child figure {
	margin:0;
}

.prods figure h2 {
	font-size:2rem;
	border:0;
	margin:0;
}

/* Shop Product Detail ************/

.product-detail article h1 {
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	text-transform: capitalize;
	margin:0 0 1em 0;
	font-size: 2rem;
}


.product .product-detail {
	clear: both;
}

.product .photo {
	width: 48.01980198019802%;
	float: left;
}

.product .photo img {
	background: #fff;
	padding: 9px;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
}

.product .description {
	width: 48.01980198019802%;
	float: right;
}

.product-detail .photo img {
	display: block;
	width:100%;
}

.product-detail .slides a img {
	opacity: 0.6;
}

.product-detail .slides a:hover img {
	opacity: 1;
}

.product-detail .slides a:nth-of-type(4n) {
	margin-right: 0;
}

.product-meta li {
	margin: 0 0 0.5em 0;
}

.product-detail .carousel,
.product-detail .no-carousel,
.product-detail #carousel {
	clear: both;
	padding-top: 8px;
}

.product-detail .carousel li,
.product-detail .no-carousel li,
.product-detail #carousel li {
	float: left;
	margin: 0 8px 8px 0;
}

.product-detail .no-carousel li:nth-of-type(4n) {
	margin-right: 0;
}

input#add-to-basket {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #151412;
	color: #f0ede6;
	text-align: center;
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	text-transform: uppercase;
	padding: 4px 48px;
	border: 0;
	font-size: 2.4rem;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	clear:both;
	margin:1em 0;
}

/* Basket / Checkout ************/

.basket h1 {
  font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	width: 100%;
	font-size: 72px;
	font-size: 7.2rem;
	text-align: center;
	line-height: 1.5;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-shadow: #fdf2ab -1px 1px 0,
	#fdf2ab -2px 2px 0,
	#d91a00 -3px 3px 0,
	#d91a00 -4px 4px 0;
	margin: 0.5em 0;
}

.bagitems {
	width: 100%;
	display: table;
	clear: both;
}

.bagitems th {
	text-align: left;
	border-bottom: 3px double #454545;
	padding: 1em 0;
}

.bagitems tbody tr.item td {
	border-bottom: 1px solid #454545;
	padding: 1em 0;
}

tr .update {
	padding: 1em 0;
}

.totals {
	border-top: 1px solid #757575;
	clear: both;
	padding: 2em 0 0;
}

.totals dt + dd {
	height: 2em;
}

.totals dt {
	width: 30%;
	float: left;
}

.totals dd {
	width: 59%;
	float: left;
}

.total, .total + dd {
	font-size: 2rem;
}

.voucher-code {
	clear: both;
	padding: 2em 0;
	margin: 1em 0 2em 0;
	border-top: 1px solid #757575;
	border-bottom: 1px solid #757575;
}

.buttons {
	clear: both;
	padding: 2em 0;
}

.basket-contents {
	margin: 1em 0 0 0;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #757575;
	clear: both;
}

.basket legend {
	display: none;
}

.basket form li {
	margin: 0 0 1em 0;
}

.basket label {
	display: block;
	width: 100%;
	margin: 1em 0;
}

.billing {
	width: 48.019802%;
	float: left;
}

.shipping {
	width: 48.019802%;
	float: right;
}

#checkout_form_gateway_fields legend {
font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
padding:2em 0;
font-size:1.4em;
text-transform:uppercase;
}

/* Portfolio ************/

.brick {
	float: left;
	position: relative;
	margin: 0 0 32px 0;
	width: 128px;
	padding: 4px;
	background: #fff;
	box-shadow: 0 0 3px rgba(140, 117, 27, 0.3);
}
.brick a img {
	display: block;
}

.navigation .bottom {
	clear: both;
}

/* Contact ************/

.map {
	float: right;
	width: 472px;
}

.flexible-map {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
	box-shadow: 0 0 3px rgba(140,117,27,0.3);
	border: 1px solid #ddce86;
}

.flexible-map iframe,
.flexible-map object,
.flexible-map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#map {
	width: 472px;
	height: 280px;
}

.opening, .address {
	float: left;
	width: 304px;
	width: 37.623%;
}

.opening dl dt {
	width: 136px;
	width: 44.736%;
	float: left;
}

.opening dl dd {
	width: 136px;
	width: 44.736%;
	float: right;
}

.opening dl dd:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}

.form {
	clear: both;
}

.freeform label {
	padding: 0 0 1em;
	display: block;
}

.freeform .message {
	width: 58.415%;
	float: right;
}

.freeform .personaldetails {
	width: 37.623%;
	float: left;
}

.freeform .buttons {
	clear: both;
	text-align: right;
}

.thanks {
	text-align: center;
}

.thanks p.back a {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-size: 16px;
	font-size: 1.6rem;
	background: #151412;
	color: #f0ede6;
	text-align: center;
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	text-transform: uppercase;
	padding: 4px 48px;
	border: 0;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.thanks p.back a:hover, .thanks p.back a:focus {
	background: #d91a00;
}


/* Typography ************/

.header h1, .thanks h1 {
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	width: 100%;
	font-size: 72px;
	font-size: 7.2rem;
	text-align: center;
	line-height: 1.5;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-shadow: #fdf2ab -1px 1px 0,
	#fdf2ab -2px 2px 0,
	#d91a00 -3px 3px 0,
	#d91a00 -4px 4px 0;
	margin: 0.5em 0;
}

.main h1 {
	position: absolute;
	left: -9999em;
}

.portfolio h2, .artwork h2 {
	margin: 0 0 0.84em 0;
	font-size: 36px;
	font-size: 3.6rem;
	border: 0;
}

h2, h3 {
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	margin: 2em 0 1em;
	font-size: 24px;
	font-size: 2.4rem;
	text-transform: uppercase;
	border-bottom: 1px solid #281910;
	line-height: 48px;
}

aside h3 {
	font-family: "atrament-web-1","atrament-web-2", "helvetica neue", helvetica, arial, sans-serif;
	margin: 2em 0 1em;
	font-size: 24px;
	font-size: 2.4rem;
	text-transform: uppercase;
	line-height: 48px;
}

p {
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0 0 1em;
}

.footer {
	background: url('../images/bkgrd_footer.png') no-repeat 100% 100%;
	height: 18em;
	clear: both;
	font-size: 14px;
	font-size: 1.4rem;
}

.footer .inner {
	width: 80.1587302%;
	margin: 0 auto;
	padding: 4em 0;
	border-top: 3px double #281910;
}

.footer .vcard {
	float: left;
	width: 320px;
	position: absolute;
}

.footer .vcard .org, .footer .vcard .adr {
	position: relative;
	left: 0;
}

.footer .vcard .email, .footer .vcard .tel {
	position: relative;
	right: 0;
}

.footer .vcard a {
	color: #281910;
}

.footer ul.social-stuff {
	float: right;
}


/* Modules ************/

/* Colorbox ************/
#colorbox, #cboxOverlay, #cboxWrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	overflow: hidden;
}
#cboxOverlay {
	position: fixed;
	width: 100%;
	height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
	clear: left;
}
#cboxContent {
	position: relative;
}
#cboxLoadedContent {
	overflow: auto;
}
#cboxTitle {
	margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
	cursor: pointer;
}
.cboxPhoto {
	float: left;
	margin: auto;
	border: 0;
	display: block;
	max-width: none;
}
.cboxIframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
	box-sizing: content-box;
}

/* Colorbox User Styles ************/
#cboxOverlay {
	background: #000;
}
#colorbox {
}
#cboxContent {
	margin-top: 32px;
	overflow: visible;
}
.cboxIframe {
	background: #000;
}
#cboxError {
	padding: 50px;
	border: 1px solid #000;
}
#cboxLoadedContent {
	background: #000;
	padding: 10px;
}
#cboxLoadingGraphic {
	background: url('../images/loading.gif') no-repeat center center;
}
#cboxLoadingOverlay {
	background: #000;
}
#cboxTitle {
	position: absolute;
	top: -22px;
	left: 0;
	color: #000;
}
#cboxCurrent {
	position: absolute;
	top: -22px;
	right: 205px;
	text-indent: -9999px;
}
#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose {
	text-indent: -9999px;
	width: 20px;
	height: 20px;
	position: absolute;
	top: -20px;
	background: url('../images/controls.png') no-repeat 0 0;
}
#cboxPrevious {
	background-position: 0px 0px;
	right: 44px;
}
#cboxPrevious:hover {
	background-position: 0px -25px;
}
#cboxNext {
	background-position: -25px 0px;
	right: 22px;
}
#cboxNext:hover {
	background-position: -25px -25px;
}
#cboxClose {
	background-position: -50px 0px;
	right: 0;
}
#cboxClose:hover {
	background-position: -50px -25px;
}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
	right: 66px;
}
.cboxSlideshow_on #cboxSlideshow {
	background-position: -75px -25px;
	right: 44px;
}
.cboxSlideshow_on #cboxSlideshow:hover {
	background-position: -100px -25px;
}
.cboxSlideshow_off #cboxSlideshow {
	background-position: -100px 0px;
	right: 44px;
}
.cboxSlideshow_off #cboxSlideshow:hover {
	background-position: -75px -25px;
}

/* Media Querries ************/

@media (max-width:1008px) {

	body {
		background: #151412;
		padding: 1em;
	}

	section.map {
		float: none;
		clear: both;
		margin: auto;
	}

	section.address {
		float: right;
	}

	.wrapper {
		background: #fdf2ab url('../images/bkgrd_wrapper_tile.png');
		box-shadow: 0 0 0 rgba(0,0,0,0);
	}

	header.header, footer {
		background: #fdf2ab url('../images/bkgrd_wrapper_tile.png');
	}

	header.header {
		padding: 1em 0;
	}

}

@media (max-width:640px) {

	.cart {
	right: 10px;
	top: 10px;
	}

	header.header {
		padding: 1em 0;
	}

	nav ul {
		height: 100%;
	}

	nav li {
		display: block;
	}

	nav li a {
		width: 100%;
	}

	section.map {
		float: right;
		width: 100%;
	}

	.gmap {
		background: transparent;
		padding: 0;
		box-shadow: 0 0 0 rgba(140,117,27,0.0);
		border: 0;
		overflow: hidden;
	}

	#map {
		margin: 0 auto;
		width: 480px;
		height: 280px;
	}

	section.opening, section.address {
		float: none;
		width: 100%;
	}

	section.paginate, article.summary, article.entry {
		clear: both;
		width: 100%;
		float: none;
	}

	.journal section aside {
		width: 100%;
		float: none;
		clear: both;
	}

}