/*
Theme Name: Pattern8-v3
Theme URI: http://www.rawsterne.co.uk
Description: Theme for pattern8.com
Version: 3.0
Author: John Rawsterne
Author URI: http://www.rawsterne.co.uk
Tags: patterns,pattern,pattern8
*/

/*! normalize.css v2.1.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}
audio,canvas,video {display: inline-block;}
audio:not([controls]) {    display: none;   height: 0;}
[hidden] {display: none;}
html {background: #fff;color: #000;font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body {margin: 0;}
a:focus {outline: thin dotted;}
a:active,a:hover {outline: 0;}
h1 {font-size: 2em;margin: 0.67em 0;}
abbr[title] {border-bottom: 1px dotted;}
b,strong {font-weight: bold;}
dfn {font-style: italic;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
mark {background: #ff0;color: #000;}
code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em;}
pre {white-space: pre-wrap;}
q {quotes: "\201C" "\201D" "\2018" "\2019";}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
figure {margin: 0;}
fieldset {border:none;margin:0;padding:0;}
legend {border: 0;padding: 0;}
button,input,select,textarea {font-family: inherit;font-size: 100%;margin: 0;}
button,input {line-height: normal;}
button,select {text-transform: none;}
button,
html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
button[disabled],html input[disabled] {cursor: default;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;}
input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
textarea {overflow: auto;vertical-align: top;}
table {border-collapse: collapse;border-spacing: 0;}

/* apply a natural box layout model to all elements */
*,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

/* micro clearfix */
.clearfix:before,.clearfix:after,.block-grid:before,.block-grid:after {content:" ";display: table;}
.clearfix:after, .block-grid:after {clear: both;}
.lt-ie8 .clearfix, .lt-ie8 .block-grid {*zoom: 1;}

img{max-width:100%;height:auto;}
embed, object, video{ max-width: 100%;height:auto; }
.no-js iframe, .no-js embed, .no-js object, .no-js video{max-width:100% !important;}

/* typography */
body {font-size:1em;line-height: 1.618em;font-family: Helvetica, Arial, sans-serif;}
h1,h2,h3,h4,h5,h6{color:#fff;text-transform:none;margin:0.2em 0 0.5em 0;line-height: 1.4;text-rendering: optimizelegibility;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: normal;
}
h1 {font-size: 2.2em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.45em;}
h5 {font-size: 1.3em;}
h6 {font-size: 1.1em;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img {margin:0;}
p {font-size: 1em;line-height:1.618em;margin-bottom:1.618em;}
a:focus,a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
blockquote {border-left: 1px solid #dddddd;margin: 0 0 1.25em;padding: 0.5625em 1.25em 0 1.1875em;}
blockquote cite {color:#333333;display: block;font-size: 0.8125em;}
blockquote cite:before {content: " ";}
blockquote cite a, blockquote cite a:visited {color:#333333;}
blockquote, blockquote p {opacity:0.65;line-height: 1.6;}
strong {font-weight:bold;}
em,dfn {font-style:italic;}
dfn {font-weight:bold;}
sup,sub {line-height:0;}
abbr,acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre,code,tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul,li ol {margin:0 1.5em;}
ul,ol {font-size: 1em;line-height:1.618em;margin-bottom:1.618em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#ddd;background:rgba(0,0,0,0.08);text-align:left;}
th,td,caption {padding:4px 10px 4px 5px;border:#dddddd 1px solid;}
tr.even td {background:#f6f6f6;background:rgba(0,0,0,0.02);}
tfoot {font-style:normal;font-weight:normal;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.left{float:left;margin:0 20px 10px 0;}
.right{float:right;margin:0 0 10px 20px;}


/* Globals */
html{background:url("images/body-bg.png") repeat scroll center top #000;}
body{
color:#999;
background:rgba(255,255,255,0.1);
}

a, a:visited{outline: none;color:#00bff3;text-decoration:none;}
a:hover{outline: none;color:#fff;text-decoration:underline;}
a:active, a:focus { outline: none; }


.newfont{font-family:'Open Sans';}

.hide-for-mobile{display:none;}
.show-for-mobile{display:block;}


#wrapper{padding:0;}
#content{padding:0 10px;}
#main{width:100%;}






/* Normal Buttons ---------------------- */
.button, .button:visited { text-decoration:none;font-size:1em;width: auto; border-radius:0px;background: #00c546 url(//cdn.shopify.com/s/files/1/0059/7642/t/21/assets/button-bg-new.png?1577) repeat-x left center; border: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; color: #ffffff; cursor: pointer; display: inline-block; font-family: inherit;  line-height: 1; margin: 0; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; -webkit-transition: background-color 0.15s ease-in-out; -moz-transition: background-color 0.15s ease-in-out; -o-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out;text-transform:;

font-family:'Open Sans', Helvetica, Arial, sans-serif;

  
}
.button:hover, .button:focus { text-decoration:none;color: #ffffff; background-color: #00e752; }
.button:active { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; }
.button.large { font-size: 1.25em; padding: 15px 30px 16px; }
.button.medium { font-size: 1em; }
.button.small { font-size: 0.85em; padding: 7px 14px 8px; }
.button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background:#00c546; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.button.disabled:hover, .button[disabled]:hover { background: #00c546; }

.button.secondary{font-size:0.8em;}

/* Don't use native buttons on iOS */
input[type=submit].button, button.button { -webkit-appearance: none; }

/* Correct FF button padding */
input[type="submit"], input[type="text"], .button{line-height:normal !important;}


/* Header */
#header{position:relative;padding:10px;}
#header h1{margin:0;}
#header h1 a{display:inline-block;}
#show-menu{display:inline-block;background:#c00;padding:10px;line-height:1;color:#fff;border-radius:2px;position:absolute;top:20px;right:10px;}
#show-menu:hover{text-decoration:none;background:#f00;}

.header-actions{overflow:hidden;}
#colors{clear:both;width:100%;overflow:hidden;padding:10px 20px;background:#222;}
#colors h4{color:#fff;font-size:0.8em;padding:0;margin:0 0 5px 0;}
#colors a{display:inline-block;background:#ccc;width:30px;height:30px;text-indent:-999em;margin:0 10px 10px 0px;border:rgba(255,255,255,0.3) 1px solid;}
a#color-brown{background:#784819;}
a#color-red{background:#c00;}
a#color-orange{background:#ff5300;}
a#color-yellow{background:yellow;}
a#color-green{background:green;}
a#color-blue{background:blue;}
a#color-purple{background:purple;}
a#color-pink{background:pink;}
a#color-gray{background:gray;}
a#color-black{background:black;}
a#color-white{background:white;}
a#color-multi{background:url(images/multi.png);}
#colors a:hover{border-color:#fff;}

#navigation{font-size:0.8em;color:#888;background:black;}
#navigation ul{list-style:none;margin:0;padding:0;}
#navigation li{margin:0;border-bottom:#222 1px solid;}
#navigation li a{display:block;padding:12px 20px;font-size:1em;color: #bbb;text-transform:uppercase;}
#navigation li.rss a{padding-left:40px;background:url(images/ico-rss-trans.png) no-repeat 20px center;}
#navigation li a:hover{background-color:#222;color:white;text-decoration:none;}





/* Sidebar */
#sidebar{width:100%;background:none;padding:10px;line-height:1;overflow:hidden;}
#sidebar a{display:inline-block;width:125px;height:125px;margin:5px;border:none;line-height:1;float:none;overflow:hidden;}
#sidebar .bsap{display:inline-block;line-height:1;overflow:hidden;}

#sidebar a.adhere{border:none;text-align:center;color:#666;background:#000;padding-top:30px;}
#sidebar a.adhere:hover{background:#000;border-color:#777;color:#fff;text-decoration:none;}




/* Thumbnail displays */
#posts{overflow:hidden;width:100%;}
#posts .post{width:50%;padding-bottom:50%;float:left;margin:0;position:relative;}
.thumbnail .new{background:transparent url(images/ico-new-trans.png) no-repeat scroll left top;display:block;height:22px;position:absolute;right:10px;top:-6px;width:42px;z-index:200;}
.thumbnail{position:absolute;width:100%;height:100%;z-index:100;display:block;border:none;padding:0px 0;}
.thumbnail i{display:none;}
.thumbnail:hover{}









/* Single Post*/
#main-column, #sub-column, #comments{width:100%;}
#main-column{}
#sub-column{width:100%;padding-right:30px;}
.entry-artwork{width:100%;min-height:300px;}


#comments{clear:both;padding-top:30px;padding-bottom:30px;}
#comments h3{background:#171717 url(images/ico-comment.png) no-repeat scroll 16px center;font-size:0.9em;font-weight:bold;letter-spacing:0.2em;padding:7px 12px 7px 42px;text-transform:uppercase;}
#comments-list{border-top:1px solid #141414;padding:0 0 18px;}
#comments-list ol{border-bottom:1px solid #282828;margin:0 0 18px;}
#comments-list ol, #comments-list ul {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;}
#comments-list li{padding:20px 0;position:relative;}
#comments-list .comment-author {font-weight:bold;}
#comments-list .comment-author, #comments-list .comment-meta, #comments-list .comment-content, #comments-list .unapproved {display:block;margin-left:100px;}
#comments-list li .avatar{background:#171717 none repeat scroll 0 0;border:1px solid #282828;float:left;height:60px;margin-left:-95px;padding:4px;position:relative;width:60px;}
#comments-list .comment-meta{color:#666666;font-size:0.9em;padding:10px 0 9px;}
#comments-list .comment-meta a{color:#EEEEEE;font-style:italic;text-decoration:none;}
#comments-list .comment-content{padding-right:10px;}
.comment-reply-link{font-size:0.9em;padding:0 0 18px 50px;}
.comment-reply-link a{color:#EEEEEE;font-style:italic;text-decoration:none;}
#comments-list ul.children{margin-left:20px;}
#comments-list ul.children li {background:transparent url(images/ico-reply.png) no-repeat scroll 5px 20px;padding-left:25px;}
#form-allowed-tags p{color:#CCCCCC;font-size:0.75em;margin:0;}
ul.meta{border-bottom:1px solid #282828;border-top:1px solid #101010;margin:0;}
ul.meta li{border-bottom:1px solid #101010;border-top:1px solid #282828;list-style-image:none;list-style-position:outside;list-style-type:none;padding:10px 0 10px 24px;position:relative;}
.twitter{background:transparent url(images/icons/twitter.png) no-repeat scroll left center;}
.delicious{background:transparent url(images/icons/delicious.png) no-repeat scroll left center;}
.digg-this{background:transparent url(images/icons/digg.png) no-repeat scroll left center;}
.stumbleupon{background:transparent url(images/icons/stumbleupon.png) no-repeat scroll left center;}
.site-link{background:transparent url(images/icons/patternhead.png) no-repeat scroll left center;}
#download-links{overflow:hidden;padding:0.5em 0 1em;}
#download-links a{float:left;}
a.download-link{-moz-border-radius-bottomleft:20px;-moz-border-radius-bottomright:20px;-moz-border-radius-topleft:20px;-moz-border-radius-topright:20px;background:#222;border:1px solid #000;color:#555;cursor:pointer;display:block;font-family:Verdana,Arial,sans-serif;font-size:0.8em;font-weight:normal;line-height:1.2;margin:0.75em 0 0;padding:10px;position:relative;text-align:center;text-transform:uppercase;width:30%;}
a.download-link:hover{background:#AA0000;border:1px solid #AAAAAA;color:#FFFFFF;}
#download-links form{float:right;margin:0;padding:0;width:149px;}
#nav-below{clear:both;height:auto;overflow:hidden;padding-bottom:10px;padding-top:10px;}
.nav-previous{float:left;width:47%;}
.nav-next{float:right;width:47%;text-align:right;}
.nav-previous a, .nav-next a{border:1px solid #444;background:#222;color:#AAAAAA;cursor:pointer;display:block;font-family:Verdana,Arial,sans-serif;font-size:10px;font-weight:normal;line-height:1.2;padding:10px;position:relative;text-transform:uppercase;}
.adsense{margin:0 0 1.5em 0;}
#main-column .adsense {padding:10px 0;}
.single h1{font-size:1.8em;margin-bottom:0.25em;}
.post-ratings{margin:0 0 1em 0;}

/* Page */
.page #sub-column{background:#111;padding:20px;width:240px;color:#777;border:#333 1px solid;}
.page #sub-column a{color:#777;}
.page #sub-column a:hover{color:#fff;}
.page #sub-column ul{list-style:none;margin:0 0 2em 0;}
.page #sub-column ul ul{list-style:disc;margin:0 0 2em 40px;}
.page #sub-column h2{font-size:1.25em;color:#ccc;margin:0;}
#searchform label{display:block;}

/* Forms */
.form-section{padding:0 0 1em 0;}
.form-section input, .form-section textarea, .wpcf7-form input, .wpcf7-form textarea{padding:5px;border:#444 1px solid;background:#fff;color:#222;width:100%;}
.form-submit input, .wpcf7-form .submit{height:40px;background:#c00;color:#fff;text-transform:uppercase;border:none;padding:0px 15px;line-height:1;display:block;}



/* Footer */
#footer{background-color:#0F0F0F;border-top:1px solid #353535;color:#555555;margin-top:20px;padding:40px 0;z-index:0;}
#subsidiary{margin:0 auto;width:100%;max-width:1000px;padding:0 10px 30px 0;overflow:hidden;}
#subsidiary .aside{padding:10px;text-align:center;border-bottom:#333 1px solid;}
#subsidiary #third{border:none;}
#footer ul{list-style:none;margin:0;padding:0;line-height:1.5;}
#footer ul li{padding:5px 0;}
#footer #recentcomments li {border-bottom:none;}
#footer h3{color:#fff;font-size:1.2em;text-transform:uppercase;}
#footer a{color:#777;}
#footer a:hover{color:#ccc;}
#footer p{border-top:#333 1px solid;padding:30px 0;clear:both;margin-top:0px;font-size:0.8em;text-align:center;}

#footer #searchform{border-bottom:1px solid #222;margin:0 0 2em 0;padding:20px 0 50px 20px;position:relative;text-align:center;}

#footer #searchform h3{font-size:22px;padding:5px 0 5px 0;margin:0;}
#footer #s{height:40px;font-size:18px;border:none;padding:0 12px;background:#fff;color:#333;width:100%;max-width:300px;margin-right:10px;}
#footer #searchsubmit{height:40px;background:#0a0;padding:0 12px;margin:0;position:relative;text-transform:uppercase;color:#fff;font-size:18px;border:none;}

#second a{display:block;}



/* Pagination */
ul.page-numbers {
    list-style: none;
    margin: 30px 0;
    padding:0 10px;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.5;
    display: block;
    padding: 6px 12px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #555;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }







.preview{display:none;}

.preview{cursor:pointer;position:absolute;z-index:200;bottom: 0px;color:white;background:rgba(0,0,0,0.7);line-height:1;padding:15px 10px;width:100%;text-align:center;}


.preview-pattern{
    background:#333;
    display: block;
    position: fixed;
    width: 100%;
    visibility: hidden;
    left:0px;right:0px;top:0px;bottom:0px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: left, top, width;
    z-index: 2000;
opacity:0;
transition: all 0.3s;
}

.preview-pattern.is-visible {
    /* class added when user clicks on .cd-trigger */
    visibility: visible;
opacity:1;
}


.preview-pattern .close-me{font-size:22px;color:#fff;line-height:40px;display:block;width:40px;height:40px;padding:0px;background:rgba(0,0,0,0.7);text-align:center;position:absolute;right:0px;top:0px;}









@media (min-width: 640px) {
#posts .post{width:33.33%;padding-bottom:33.33%;}
}


@media (min-width: 800px) {
.show-for-mobile{display:none;}
.hide-for-mobile{display:block;}
#posts .post{width:20%;padding-bottom:20%;}
#show-menu{display:none;}
#header{background:rgba(0,0,0,0.2);}
#header h1{float:left;width:100%;max-width:200px;padding-top:20px;}
.header-actions{text-align:right;display:block !important;}
.header-actions a{text-align:left;}
#navigation{background:none;}
#navigation li{display:inline-block;border:none;}
#navigation li a{padding:0 10px;}
#navigation li a:hover{background-color:none;}
#colors{background:none;padding:10px;}
#colors a{margin:0 0px 10px 10px;}
.thumbnail:hover .preview{display:inline-block;}
}


@media (min-width: 960px) {
#content{margin-right:300px;}
#main{margin-right:-300px;float:left;}
#sidebar{float:right;width:300px;margin-right:-300px;}
#subsidiary .aside{width:33.33%;float:left;border:none;text-align:left;}
#posts{padding-right:30px;}
#main-column, #sub-column, #comments{padding-right:30px;}
}







