/* @override http://graphiceyedea.co.uk/11/wp-content/themes/eye-min/style.css */

/*
Theme Name: eye minimal
Theme URI: http://graphiceyedea.co.uk
Description: grids x3
Version: 2.2
Author: Prisca Schmarsow
Author URI: http://graphiceyedea.co.uk
*/

/*-------------------------------------------------------------*/

/* *********************** template notes ***********************
#wrap 					*all content

header 					h1, p
						blog title (h1), blog description (p)

nav						ul
						categories, then pages
aside					ul [inc dynamicSidebars & widgets if in use]
						sidbar with search, links + additional
						(postlists etc, see extra ids/classes)

#content				*all page content (+ classes assigned by WP)
						article > post on category page
						article h3 > post title (+ link) on category page
						article.pagepost > post on page
						article.pagepost h2 > post title on page

footer					ul

*** extras ***

form#searchform			searchbox
input#searchsubmit		submit button, searchbox

*********************** END template notes *********************** */

/*-------------------------------------------------------------*/

/* *********************** COLOURS ***********************
#fafafa		rgb(250,250,250)		background
#5b5b5b		rgb(91,91,91)			grey, text colour - base

*********************** END template notes *********************** */

/*-------------------------------------------------------------*/

/* post nav - top strip */

@import url("postnav.css");

/*-------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   thanks, Eric :-)
*/

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, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Vollkorn', Georgia, serif;
	font-size: 1em;
	font-weight: normal;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	background: rgb(250,250,250) url(images/noise2.png) repeat;
	background-attachment: fixed;
	color: rgb(91,91,91);
	word-spacing: .16em;
	line-height: 1.24;
	border-bottom: 2px solid #333;
	border-bottom: 2px solid rgba(14,14,14,.2);
	-moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
	-webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
	-o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
	border-image:         url(images/border1-bw.png) 3 repeat repeat;
}


ol, ul {
	list-style: none;
	font-size: 1em;
	line-height: 1.46;
	margin: 0 0 1.86em 0;
}
ol li {
	margin: 0 0 1em 0;
}
blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

/*******************************************************
GENERAL
*******************************************************/
html {
	background: url(images/noise.png);
	background-attachment: fixed;

}
#wrap {
    width: 980px;
    min-height: 800px;
    position: absolute;
	top: 0;
	left: 50%;
	margin-left: -490px;
}

a {
	position: relative;
	z-index: 202;
	color: #999;
	text-decoration: none;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
a:hover, a:active, a:focus {
	color: #000;
	outline: none;
}
:focus {
	outline: none;
}
.clear {
	clear: both;
}
input, textarea {
	color: #000;
}
/*******************************************************
HEADER
*******************************************************/
header {
	width: 186px;
    position: relative;
    z-index: 200;
}
header a {
	border: 0;
	color: #000;
}
header h1 {
	width: 135px;
	margin: 80px 0 0 28px;
	font-size: 1.46em;
	line-height: .86;
	color: #666;
	/*text-indent: .7em;*/
	text-align: center;
}
header h2 {
	width: 135px;
	margin: 1.2em 10px 0 28px;
	color: #666;
	font-size: .8em;
	line-height: 1.2;
	text-align: center;
}

header em {
	display: block;
	color: #000;
	font-size: 2em;
	text-indent: 0;
	font-style: normal;
}

/*******************************************************
NAV
*******************************************************/
nav {
	width: 146px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 28px;
	overflow: hidden;
	border-right: 1px solid #333;
   -moz-border-image:    url(images/border2-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border2-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border2-bw.png) 3 repeat repeat;
   border-image:         url(images/border2-bw.png) 3 repeat repeat;
}
nav ul {
	width: 135px;
	margin: 242px 0 50px 0;
	text-align: center;
}
nav ul li {
	margin: 0 0 12px 0;
	padding: 0 0 6px 0;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
	font-size: .8em;
	color: #999;
}
nav ul li:last-child {
	border-bottom-width: 0;
}
nav ul li a {
	border: 0;
}
nav ul li a, nav ul li a:link, nav ul li a:visited {
	display: block;
	width: 135px;
	margin: 0 0 4px 0;
	font-size: 1.46em;
	color: #333;
}


nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
	font-style: italic;
	color: #000;
}
 /*submenu*/
nav ul li ul {
	width: 96%;
	margin: 10px auto 0 auto;
	text-align: center;
}
nav ul li ul li {
	margin: 0 0 6px 0;
	padding: 0 0 1px 0;
}
nav ul li ul li:last-child {
	margin: 0;
}
nav ul li ul li a, nav ul li ul li a:link,nav ul li ul li a:visited {
	display: block;
	margin: 0 0 4px 0;
	font-size: 1.246em;
}
nav ul li ul li a:hover, nav ul li ul li a:active, nav ul li ul li a:focus {

}
/* JS enabled */
html.js nav ul li ul {
	display: none;
}
/* show submenu + highlight on 'geekery'pages */
html.js body.tutorials nav ul li ul, html.js body.blog nav ul li ul, html.js body.feed nav ul li ul {
	display: block;
}
/* highlight 'geekery' menu item */
html.js body.tutorials nav ul li#menu-item-2101 a, html.js body.blog nav ul li#menu-item-2101 a, html.js body.feed nav ul li.current-menu-parent.menu-item-2101 a {
	font-style: italic;
	color: #666;
}
html.js body.tutorials nav ul li#menu-item-2101 ul li a, html.js body.blog nav ul li#menu-item-2101 ul li a, html.js body.feed nav ul li.current-menu-parent.menu-item-2101 ul li a {
	font-style: normal;
	color: #666;
}
/* highlight current in submenu */
html.js body.tutorials nav ul li#menu-item-2101 ul li.current-menu-item a, html.js body.blog nav ul li#menu-item-2101 ul li.current-menu-item a, html.js body.feed nav ul li.current-menu-parent.menu-item-2101 ul li.current-menu-item a {
	font-style: italic;
	color: #666;
}
/* current highlighting - menu general */
nav ul li.current-menu-item a, nav ul li.current-menu-item a:link, nav ul li.current-menu-item a:visited {
	font-style: italic;
	color: #666;
}
nav ul li.current-menu-item ul li a, nav ul li.current-menu-item ul li a:link, nav ul li.current-menu-item ul li a:visited {
	font-style: normal;
	color: #666;
}

/* PS info */
nav strong {
	position: relative;
	z-index: 200;
	display: block;
	width: 135px;
	text-align: center;
	color: #666;
	font-size: 2.26em;
	font-weight: normal;
	line-height: .8;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
nav strong.info-border {
	display: block;
	height: auto;
	text-indent: 0;
	text-align: center;
	border-top: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
   font-size: 1em;
   line-height: 1.8;
   color: #999;
}
nav strong:hover {
	color: #000;
	background-position: 0 28px;
}

/* JS enabled */
html.js nav strong:hover {
	cursor: pointer;
}

nav aside {
	width: 135px;
	padding: 20px 0 10px 0;
	font-size: .76em;
	text-align: center;
}
/* JS enabled */
html.js nav aside {
	display: none;
}
nav aside img {
	display: block;
	margin: .6em 0;
}
nav aside em {
	display: block;
	width: 135px;
	margin: .6em 0;
	text-align: center;
}
nav aside ul#social {
	height: auto;
	margin: 0;
	overflow: hidden;
}
nav aside ul#social li {
	border: 0;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	float: left;
}
nav aside ul#social li a {
	display: block;
	width: 32px;
	height: 32px;
	text-indent: -999px;
	border: 0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
/* twitter */
nav aside ul#social li#twit {
	background: url(images/twitter.png) no-repeat;
}
nav aside ul#social li#twit a {
	background: url(images/twitter-col.png) no-repeat;
	opacity: 0;
}
nav aside ul#social li#twit a:hover {
	opacity: 1;
}
/* forrst */
nav aside ul#social li#forr {
	background: url(images/forrst.png) no-repeat;
}
nav aside ul#social li#forr a {
	background: url(images/forrst-col.png) no-repeat;
	opacity: 0;
}
nav aside ul#social li#forr a:hover {
	opacity: 1;
}
/* gimmebar */
nav aside ul#social li#gimm  {
	background: url(images/gimme.png) no-repeat;
}
nav aside ul#social li#gimm a {
	background: url(images/gimme-col.png) no-repeat;
	opacity: 0;
}
nav aside ul#social li#gimm a:hover {
	opacity: 1;
}

/* lastFM */
nav aside ul#social li#last  {
	background: url(images/lastfm.png) no-repeat;
}
nav aside ul#social li#last a {
	background: url(images/lastfm-col.png) no-repeat;
	opacity: 0;
}
nav aside ul#social li#last a:hover {
	opacity: 1;
}

/*******************************************************
CONTENT
*******************************************************/
#content {
	position: relative;
	top: 42px;
	left: 343px;
	width: 450px;
	min-height: 22em;
	padding: 0 0 60px 0;
	z-index: 100;
}
#content article {
	position: relative;
	margin: 0 0 4em 0;
}
/* search form on 404 */
#content article form#searchform {
	display: block;
	float: none;
	margin: 0;
}
#content article form#searchform	input {
	display: block;
	width: 160px;
}

/* content elements */
#content article h2 {
	font-size: 1.5em;
}
#content article h3 { }
#content article h4 {
	clear: left;
	margin: 1em 0;
}

article p.postmetadata {
	width: 135px;
	position: absolute;
	left: -158px;
	top: 46px;
	text-align: right;
	color: #999;
	font-size: .8em;
	line-height: 1.36;
}
p.postmetadata span {
	display: block;
}
p.postmetadata span.tag {
	display: block;
	padding: 2px 0;
	margin: 0 0 6px 0;
	border: none;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
span.tag a {
	border: 0;
}
p.postmetadata em {
	display: block;

}
article img.attachment-feat-img {
	width: 445px;
	height: auto;
}
/* images */
.alignright, .floatright {
	float: right;
	margin: 0 -155px 0 10px;
}

.floatleft {
	float: left;
	margin: 0  0 0 -155px;
}
.floatleft.thn {
	float: left;
	margin: 0 2px 2px 0;
}
.floatleft.thn50 {
	margin: 5px 0 0 -125px;
}
/* flickr images */
#flickrbadge {
	display: block;
	padding: 0 0 0 0;
	background: url(images/flickr_blog.gif) no-repeat;
	background-position: 6px 0;
}

#flickrbadge .flickr_badge_image a img{
	display: block;
	float: left;
	margin: 2px;
	padding: 2px;
	border: 1px solid #999;
}
#flickrbadge .flickr_badge_image a:hover img {
	padding: 0;
	border: 3px solid #fff;
}


.flickrposted  {
	float: right;
	margin: 0 -155px  0 10px;
	font-size: .8em;
	color: #999;
}
.flickrposted a {
	color: #999;
}
.flickrposted img, .flickrposted img {
	display: block;
}
/* posts nav */
.navigation {
	clear: both;
	display: block;
	overflow: hidden;
	margin: 3em 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
.navigation div {
	width: 47%;
	padding: 0 1%;
}
.navigation div a {
	display: block;
	border: 0;
	-webkit-transition: all .16s ease-in-out;
	-moz-transition: all .16s ease-in-out;
	-o-transition: all .16s ease-in-out;
	transition: all .16s ease-in-out;
}
.navigation div a:hover, .navigation div a:active,.navigation div a:focus {
	background: rgba(255,255,255,.5);
	color: #000;
}

.navigation div#next {
	float: right;
	text-align: right;
}
.navigation div#prev {
	float: left;
	text-align: left;
}
/*******************************************************
WORK
*******************************************************/
#content article.work {
	width: 445px;
	position: relative;
	margin: 0 0 54px 0;
}
article.work h2 {
	margin: 0;
}
article.work h2 span {
	display: block;
	width: 135px;
	margin: 1.2em 0 0 315px;
	text-align: right;
	font-size: .6em;
	line-height: 1.1;
	font-style: italic;
	color: #333;
	color: rgba(0,0,0,.2);
}
/* *********************** contact form *********************** */

.visual-form-builder li {
	clear: both;
	margin: 0;
	padding: 6px 1% 9px;
	width: 64%;
}
.visual-form-builder label {
	display: block;
}
.visual-form-builder input,
.visual-form-builder textarea {
	width: 260px;
    padding: 6px;
    background: #fff;
    background: rgba(255,255,255,.6);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    -moz-border-image: url(images/border1-bw.png) 3 repeat repeat;
    -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
    -o-border-image: url(images/border1-bw.png) 3 repeat repeat;
    border-image: url(images/border1-bw.png) 3 repeat repeat;
    font-size: 1.1em;
}
.visual-form-builder textarea {
    width: 460px;
}
.visual-form-builder label, label.desc {
	display: block;
	margin: 0;
	padding-bottom: 3px;
	color: #000;
}
.visual-form-builder label span {
	color: #BC1212;
	vertical-align: middle;
	font-size: 1.4em;
	line-height: 1;
}
label.vfb-error {
	color: #BC1212;
	font-size: 90%;
	display: block;
	margin: .3em 0;
}
label.vfb-error:before {
	content: ' ✗ ';
	font-family: 'Arial Unicode', monotype;
}
input.vfb-error, select.vfb-error, textarea.vfb-error {
	border: 1px solid #BC1212;
}
.visual-form-builder input[type="submit"] {
   display: block;
   width: 236px;
   padding: .3em;
   background: transparent;
   border: none;
   border-width: 0;
   border-bottom: 2px solid #666;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
   font-size: 1.3em;
   color: #666;
}
.visual-form-builder input[type="submit"]:hover,  .visual-form-builder input[type="submit"]:active,  .visual-form-builder input[type="submit"]:focus {
   border-color: #333;
   color: #000;
   font-style: italic;
   cursor: pointer;
}
.visual-form-builder input:hover,  .visual-form-builder input:active,  .visual-form-builder input:focus,
.visual-form-builder textarea:hover,  .visual-form-builder textarea:active,  .visual-form-builder textarea:focus {
	padding: 5px;
	border-width: 2px;
	background: #fff;
	color: #666;

}
.visual-form-builder textarea:hover,  .visual-form-builder textarea:active,  .visual-form-buildertextarea:focus {
	padding: 5px;
	border-width: 2px;
	background: #fff;
	color: #666;
}

/* *********************** comments form *********************** */
#respond {
	clear: both;
	display: block;
	margin: 2em 0;
}

#respond h2 {

}

form#commentform {

}

form#commentform div {
	margin: 0 0 1.6em 0;
	color: #9B9B9B;
}

form#commentform div label {
	display: block;
	font-size: 1em;
	color: #333;
}

form#commentform input, form#commentform textarea {
	width: 260px;
	padding: 6px;
	background: #fff;
	background: rgba(255,255,255,.8);
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	-moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   	-webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   	-o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   	border-image:         url(images/border1-bw.png) 3 repeat repeat;
   	font-size: 1.1em;
}

form#commentform textarea {
	width: 460px;
}

form#commentform input:hover, form#commentform input:active, form#commentform input:focus, form#commentform textarea:hover, form#commentform textarea:active, form#commentform textarea:focus {
	padding: 5px;
	border-width: 2px;
	background: #fff;
	color: #666;
}
form#commentform textarea:hover, form#commentform textarea:active, form#commentform textarea:focus {
	width: 460px;
	padding: 5px;
	border-width: 2px;
	border-color: #f7ba29;
	background: #fff;
	color: #666;
}

form#commentform input[type="submit"] {
	display: block;
	width: 270px;
	padding: .3em;
	background: transparent;
	border: none;
	border-width: 0;
	border-bottom: 2px solid #59be97;
	font-size: 1.3em;
	color: #666;
}

form#commentform input[type="submit"]:hover, form#commentform input[type="submit"]:active, form#commentform input[type="submit"]:focus {
	border-color: #f7ba29;
	color: #000;
	font-style: italic;
}

/* *********************** comments section *********************** */

section {
	width: 100%;
	margin: 6em 0;
}

section form#commentform {
	width: 460px;
}

section form#commentform textarea {
	width: 460px;
}

section form#commentform input#submit {
	width: 465px;
	border: 0;
	border-bottom: 2px solid #333;
	background: none;
	font-size: 1.2em;
	font-weight: bold;
}


ol.commentlist {
	margin: 0 0 6em 0;
}


ol.commentlist li {
	min-height: 120px;
	margin: 0 0 3em 0;
}



ol.commentlist li cite {
	width: 132px;
	position: absolute;
	left: -158px;
	text-align: right;
	color: #999;
	font-size: .8em;
	line-height: 1.36;
	display: block;
	padding: 2px 0;
	margin: 0 0 6px 0;
}

ol.commentlist li cite img.gravatar {
	display: block;
	float: right;
	width: 48px;
	height: 48px;
	margin: 0 0 3px 0;
	background: transparent;
}
ol.commentlist li cite span {
	clear: right;
	display: block;
}
ol.commentlist li cite div.commentnumber {
	color: rgb(205,205,205);
	float: left;
}
ol.commentlist li cite .commentnumber:before {
	content: ' \0023  ';
}
ol.commentlist li cite span.author {
	border: none;
	border-bottom: 1px solid #333;
	border-top: 0;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
   font-size: 1.26em;
}

ol.commentlist li p {
	margin: 0 0 1em 0;
}

p.pagination {
	border-bottom: 0;
	border-top: 1px solid #333;
	-moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
   font-size: 1.26em;

}


ol.commentlist li div.reply a {
	display: block;
	font-style: italic;
	color: rgb(205,205,205);
	border-top: 1px solid #333;
	border-bottom: 0;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
ol.commentlist li div.reply a:after {
	content: ' \2199  ';
}




/*******************************************************
PAGE CONTENT ~ WORK
*******************************************************/

body.work #content {
	position: relative;
	top: 40px;
	left: 343px;
	width: 606px;
	padding: 0 0 60px 0;
	margin: 0 0 0 0;
	z-index: 100;
}

body.work #content article {
	display: block;
	position: relative;
	padding: 0 0 0 157px;
	margin: 0 0 4.16em -157px;
}

body.work #content article h2 {
	margin: 0 0 12px 0;
	font-size: 1.56em;
	line-height: 1.2;
}
body.work #content article h2 a {
	display: block;
	border: 0;
}

body.work #content article img {
	position: absolute;
	margin: 0;
	border: 2px solid #333;
	border-width: 1px;
   -moz-border-image:    url(images/border-sq.png) 1 1 1 1 repeat repeat;
   -webkit-border-image: url(images/border-sq.png) 1 1 1 1 repeat repeat;
   -o-border-image:      url(images/border-sq.png) 1 1 1 1 repeat repeat;
   border-image:         url(images/border-sq.png) 1 1 1 1 repeat repeat;
   width: 604px;
   height: auto;
 	background: url(images/noise.png);
}
/*body.work #content article:hover img.size-full {
   width: 760px;
   margin: -12px 0 0 -156px;
}*/

/* view site link */
body.work #content article strong a {
	position: relative;
	top: 122px;
	left: 34px;
	font-size: 1.46em;
	padding: 0 .46em;
	color: #999;
	line-height: 0;
	font-style: italic;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
body.work #content article strong a:after {
	content: ' \2197 ';
	font-size: .6em;
	padding: 0 3px;
}
body.work #content article:hover a {
	color: #666;

}
body.work #content article strong a:hover {
	color: #000;
}
body.work #content article strong a:hover:after {

}

body.work #content article em {
	display: block;
	color: #999;
}
 /* view screenshots */
body.work #content article ol {
	width: 80px;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 44px;
	left: 160px;
	z-index: -2;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
 /* view screenshots, display on hover */
body.work #content article:hover ol {
	display: block;
	position: absolute;
	left: 56px;
	z-index: 3;
}



body.work #content article ol li {
	float: left;
	margin: 0;
}
body.work #content article ol li a {
	display: block;
	width: 16px;
	height: 16px;
	float: left;
	padding: 1px;
	margin: 1px;
	border: 0;
	text-align: center;
	background: rgba(14,14,14,.1);
	color: #fff;
	line-height: 1;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
body.work #content article ol li a:hover, body.work #content article ol li a:active, body.work #content article ol li a:focus {
	background: #333;
	color: #fff;
}
body.work #content article ol li img.size-thumbnail {
	width: 16px;
	height: 16px;
}


body.work #content article h3 {
	position: absolute;
	top: 158px;
	left: 736px;
	left: 155px;
	display: block;
	height: ;
	width: 1em;
	font-size: 1.46em;
	line-height: 1.32;
	color: #999;
	text-align: center;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
body.work #content article h3:hover {
	color: #000;
	cursor: pointer;
}
body.work #content article dl {
	display: block;
	position: relative;
	top: 127px;
	width: 606px;
	padding: 20px 0 0 0;
	border-top: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
   font-size: .86em;
   line-height: 1.36;
}
body.work #content article dt {
	width: 135px;
	float: left;
	margin: 0 0 12px 0;
	text-align: left;
	color: #999;
	font-style: italic;
}
body.work #content article dd {
	margin:  0 155px 12px 157px;
}
body.work #content article p.postmetadata {
	width: 135px;
	position: relative;
	left: 450px;
	top: 74px;
	color: #999;
	font-size: .86em;
	line-height: 1.36;
	font-style: italic;
	text-align: right;
}
body.work #content p.postmetadata span {
	clear: both;
	display: block;
	width: 155px;
	padding: 0 0 6em 0;
	margin: 32px 0 30px 0;
	color: #ccc;
}

/*******************************************************
PAGE CONTENT ~ HOME
*******************************************************/

/* SITE INFO ~ via WP BLOCKS */
#note {
	position: absolute;
	top: 154px;
	left: 190px;
	width: 830px;

	font-style: italic;
	color: #999;
}
#note strong {
	font-size: 4em;
	line-height: .6;
	font-weight: normal;
	font-style: normal;
	float: left;
	width: 66px;
	color: #FCFCFC;
	text-shadow: 0 0 4px #e6e6e6;
}

#note p {
	left: 256px;
	width: 312px;
	margin: 0 68px 0 0;
	float: left;
	font-size: .8em;
	line-height: 1.2;
}

/* recent work */
body.work #content.recent {
	position: relative;
	top: 44px;
	left: 256px;
	width: 312px;
	padding: 0 0 0 0;
	margin: 0 0 8.6em 0;
	z-index: 100;
	overflow: hidden;
}


body.work #content.recent h1 {
	font-size: 1.4em;
	line-height: 1;
	padding: 0 0 14px 0;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
 /* work samples */
body.work #content.recent article {
	display: block;
	height: auto;
	width: 312px;
	padding: 0;
	margin: 0 0 .8em 0;
}
body.work #content.recent article h2 {
	margin: 0 0 2px 0;
	font-size: 1.22em;
	line-height: 1.2;
}

body.work #content.recent article img {
	position: absolute;
	margin: 0;
	border: 0;
  	width: 580px;
   	height: auto;
	clip:rect(0 312px 120px 0);
}
body.work #content.recent article p.postmetadata span {
	margin: 0;
	padding: 0;
	height: 8em;
}

/* view screenshots*/
body.work #content.recent article:hover ol {
	display: block;
	position: absolute;
	top: 126px;
	left: 150px;
	z-index: 3;
}

body.work #content.recent article ol {
	width: 160px;
	height: auto;
	position: absolute;
	top: 26px;
	left: 150px;
	margin: 0;
	padding: 0;
	z-index: -2;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* view site link */
body.work #content.recent article strong a {
	position: relative;
	top: 100px;
	left: 24px;
	font-size: 1em;
	padding: 0 .46em;
	color: #999;
	line-height: 0;
	font-style: italic;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
body.work #content.recent article h3 {
	position: absolute;
	top: 126px;
	left: 0;
	display: block;
	width: 1em;
	font-size: 1em;
	line-height: 1.32;
	color: #999;
	text-align: center;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}

body.work #content.recent article dl {
	display: block;
	position: relative;
	top: 102px;
	width: 312px;
}
body.work #content.recent article dd {
	margin:  0 0 12px 138px;
}




 /* sidebar */
body.work #sidebar {
	display: block;
	position: absolute;
	top: 244px;
	left: 636px;
	width: 312px;
	padding: 0 0 60px 0;
	margin: 0 0 0 0;
	z-index: 100;
}
body.work #sidebar h2 {
	font-size: 1.4em;
	line-height: 1;
	padding: 0 0 12px 0;
	margin: 0 0 14px 0;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
body.work #sidebar h2 a {
	display: block;
	color: #333;
	border: 0;
}
body.work #sidebar ul li ul {
	font-size: .86em;
	margin: 0 0 3.6em 0;
}
body.work #sidebar ul li ul li {
	margin: 0 0 1.8em 0;
	font-style: italic;
	color: #999;
}
body.work #sidebar ul li ul li a {
	display: block;
	margin: 0 0 6px 0;
	font-size: 1.26em;
	line-height: 1.1;
	font-style: normal;
	color: #333;
	border-bottom: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}

body.work #sidebar ul li ul li  a:after {
	content: ' \2197 ';
	font-size: .8em;
	padding: 0 3px;
}
/* twitter */
body.work #sidebar ul li.widget_twitter ul {
	font-size: .86em;
}
body.work #sidebar ul li.widget_twitter ul li {
	margin: 0 0 1.46em 0;
	font-style: italic;
	color: #999;
}
body.work #sidebar ul li.widget_twitter ul li a {
	display: inline;
	margin: 0 0 6px 0;
	font-size: 1.26em;
	line-height: 1.1;
	font-style: normal;
	border: 0;
}

body.work #sidebar ul li.widget_twitter ul li  a:after {
	content: '';

}
body.work #sidebar ul li.widget_twitter ul li a.timesince {
	font-size: .82em;
	color: #ccc;
}

/*******************************************************
PAGE CONTENT ~ FEEDS
*******************************************************/

body #content article.feed {

}
body #content article.feed iframe {
	max-width: 400px;
	height: 40%;
}

#content article.pagepost.feed p, #content article.pagepost.feed img, #content article.pagepost.feed object {
	width: 400px;
	height: auto;
}

#content article.pagepost.feed #creditfooter a img {
	display: none;
}
#content article.pagepost.feed ul li {
	position: relative;
	margin: 0 0 4.6em 0;
}
#content article.pagepost.feed p.date {
	width: 135px;
	position: absolute;
	left: -158px;
	top: 14px;
	text-align: right;
	color: #ccc;
	font-size: .8em;
	line-height: 1.36;
}
#content article.pagepost.feed span.headline {
	display: block;
	line-height: 2;
	font-size: 1.4em;
	border: 0;
}
#content article.pagepost.feed span.headline a, #content article.pagepost.feed h3 a{
	border: 0;
}
#content article.pagepost.feed span.headline a{
	display: block;

	text-decoration: none;
	border-top: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;

  }
/*******************************************************
PAGE CONTENT ~ BLOG
******************************************************

body.blog #content {
	margin: 1em 1em 3em 2em;
	width: auto;
	float: none;
}

body.blog #content article {
	margin: 2em 0;
}

body.blog #content a {
	text-decoration: none;
	border-bottom: 1px solid #f2f2f2;
}

body.blog #content article h3 {
	margin: 0 0 .6em 0;
}

body.blog #content article p.postmetadata {
	font-size: .8em;
	line-height: 2;
}
*/

/*******************************************************
footer
*******************************************************/
footer {
	width: 100%;
	padding: 16px 0 26px 0;
	bottom: 0;
	background: url(images/wp-icon32.png) no-repeat;
	background-position: 926px 6px;
	border-top-width: 1px;
	-moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
	-webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
	-o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
	border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
footer p {
	margin: 0 60px 0 0;
	color: #ccc;
	font-size: .8em;
	text-align: right;
}
footer p a {
	color: #999;
}
/*******************************************************
HOME PAGE
*******************************************************/

body.eyedea footer ul li#zootool {
	width: auto;
	padding: 1em;
	background: rgba(11,11,11,.2);
}

body.eyedea footer ul li#zootool h2.widgettitle {
	color: rgba(11,11,11,.2);
}

/* ZOOTOOL */

footer ul.zootool-badge {
	display: block;
	margin: 1em 0;
	padding: 0;
	overflow: hidden;
}

footer ul.zootool-badge li {
	float: left;
	padding: 0;
	margin: 0 4px 4px 0;
	background: rgba(11,11,11,.4);
	line-height: 0;
}

footer ul.zootool-badge li a {
	display: inline-block;
	border: 1px solid #000;
	background: #fff;
}

footer ul.zootool-badge li a img {
	opacity: .7;
	padding: 0;
	margin: 0;
}


/*******************************************************
CONTENT - GEEKERY SECTION
*******************************************************/
#content article.overview {
	display: block;
	min-height: 150px;
	position: relative;
	margin: 0 0 60px 0;

}
#content article.overview h2 {
	margin: 0 0 9px 0;
}
#content article.overview img  {
	display: block;
	position: absolute;
	left: -157px;
	top: 2px;
}
#content article.overview span.icon {
	display: block;
	width: 135px;
	position: absolute;
	left: -157px;
	top: 2px;
	text-align: center;
	font-size: 6em;
	color: #B7B7B7;
	color: rgba(183,183,183,.2);
}
article.overview p.postmetadata {
	display: block;
	width: auto;
	position: relative;
	top: auto;
	left: auto;
	margin: 1em 0;
	overflow: hidden;
	text-align: right;
	color: #999;
	font-size: .8em;
	line-height: 2;
	border-top: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
article.overview p.postmetadata span {
	float: left;
	border: none;
	margin: 0 1em 0 0;
}
article.overview p.postmetadata span.comnum {
	float: right;
}
article.overview .tag a {
	display: inline;
	border: none;
}
/*******************************************************
CONTENT - TUTORIAL SECTION
*******************************************************/
body.tutorials img.size-full {
	width: 445px;
	height: auto;
}
body.tutorials img.size-wide {
	width: 604px;
	height: auto;
}
body.tutorials img.size-wide.wider {
	width: 760px;
	height: auto;
	margin-left: -155px;
}
body.tutorials #content ol {
	list-style: decimal;
}
body.tutorials #content ul {
	list-style: square;
	margin: .6em 0;
}
body.tutorials #content ol li ul {
	list-style: square;
	margin: .6em 0 .6em 1em;
}
body.tutorials #content ol li ul li {
	margin: 0;
}
body.tutorials #content ol.commentlist {
	list-style: none;
}

/*******************************************************
CONTENT - SEARCH RESULTS
*******************************************************/
#content.search-results {
	display: block;
	width: 636px;
	overflow: hidden;
}
#content.search-results article.overview {
	display: block;
	width: 280px;
	padding: 5px;
	min-height: 200px;
	position: relative;
	margin: 0 24px 20px 0;
	float: left;
	font-size: .8em;
	border: 2px solid #333;
	border-width: 2px;
   -moz-border-image:    url(images/border-sq.png) 4 4 4 4 repeat repeat;
   -webkit-border-image: url(images/border-sq.png) 4 4 4 4 repeat repeat;
   -o-border-image:      url(images/border-sq.png) 4 4 4 4 repeat repeat;
   border-image:         url(images/border-sq.png) 4 4 4 4 repeat repeat;
}
#content.search-results article.overview h2 {
	margin: 6px 0 9px 0;
}
#content.search-results article.overview h2 a {
	border: 0;
}
#content.search-results article.overview h2 a:after {
	content: ' \21FE';
}
#content.search-results article.overview img  {
	display: block;
	width: 80px;
	height: 80px;
	position: relative;
	top: 0;
	left: 0;
	float: left;
	margin: 0 6px 0 0;
}
#content.search-results article.overview span.icon {
	display: block;
	width: 80px;
	height: 80px;
	position: relative;
	top: 0;
	left: 0;
	float: left;
	margin: 0 6px 0 0;
	top: 2px;
	text-align: center;
	font-size: 6em;
	color: #B7B7B7;
	color: rgba(183,183,183,.2);
}

#content.search-results article.overview p.postmetadata {
	display: block;
	width: 96%;
	position: absolute;
	top: auto;
	left: auto;
	bottom: 0;
	margin: 1em 0;
	overflow: hidden;
	text-align: right;
	color: #999;
	font-size: .8em;
	line-height: 2;
	border-top: 1px solid #333;
   -moz-border-image:    url(images/border1-bw.png) 3 repeat repeat;
   -webkit-border-image: url(images/border1-bw.png) 3 repeat repeat;
   -o-border-image:      url(images/border1-bw.png) 3 repeat repeat;
   border-image:         url(images/border1-bw.png) 3 repeat repeat;
}
#content.search-results article.overview p.postmetadata span {
	float: left;
	border: none;
	margin: 0 1em 0 0;
}
#content.search-results article.overview p.postmetadata span.comnum {
	float: right;
}
#content.search-results article.overview .tag a {
	display: inline;
	border: none;
}
#content.search-results article form#searchform {
	position: absolute;
	left: -50px;
	top: 80px;
}

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

/*******************************************************
BODY
*****************************************************/

p {
	font-size: .86em;
	line-height: 1.46;
	margin: 0 0 1.86em 0;
}
p.desc {
	font-style: italic;
	color: #999;
}
blockquote {
	margin: 1.5em 0;
	font-weight: lighter;
	font-style: italic;
}
blockquote:before {
	content: " \201C ";
	float: left;
	font-size: 2em;
	font-style: normal;
	line-height: 1;
	color: #999;
	margin: 0 0 0 -.6em;
}
code {
	margin: 1em 0;
	white-space: pre;
	font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace;
	line-height: 1.5;
	color: #000;
	padding: 2px;
	background: rgba(223,237,253,.5);
	border-radius: 6px;
	word-wrap: break-word;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
}

cite {
	font-style: italic;
}

address {
	margin-top: 1.5em;
	font-style: italic;
}

pre {
	margin: 1.5em 0;
	white-space: pre;
}

strong {
	font-weight: bold;
}

em {
/*	font-weight: lighter;
	color: rgb(124,124,44);  */
}

del {
	text-decoration: line-through;
	color: #666;
}

/*******************************************************
HEADINGS
*******************************************************/

h1, h2, h3, h4, h5, h6 {
	display: block;
	margin: 0 0 .6em 0;
	text-transform: lowercase;
/*	text-shadow: 1px 1px 2px rgba(169,169,169,.46);  */
}

h1 {
	font-size: 2em;
	line-height: 1;
}

h2 {
	font-size: 1.76em;
	line-height: 1;
}
/* archive page */
h2#tag {
	display: inline-block;
	height: 1.4em;
	padding: 0 10px;
	position: relative;
	margin: 1em 0 0 -.3em;
	background: rgba(224,224,224,.2);
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
	color: rgb(184,184,184);
	font-size: 2em;
	text-transform: none;
	line-height: 1.6;
}
h2#tag:before {
	content: "";
	float: left;
	position: absolute;
	top: 0;
	left: -.7em;
	width: 0;
	height: 0;
	border-color: transparent rgba(224,224,224,.2) transparent transparent;
	border-style: solid;
	border-width: .7em .7em .7em 0;
}
h2#tag:after {
	content: "";
	position: absolute;
	top: .6em;
	left: -.3em;
	float: left;
	width: .3em;
	height: .3em;
	-moz-border-radius: .36em;
	-webkit-border-radius: .36em;
	border-radius: .36em;
	background: #fff;
	-moz-box-shadow: -1px -1px 2px rgba(179,179,179,.4);
	-webkit-box-shadow: -1px -1px 2px rgba(179,179,179,.4);
	box-shadow: -1px -1px 2px rgba(179,179,179,.4);
}

h3 {
	font-size: 1.52em;
	line-height: 1;
}

h4 {
	font-size: 1.46em;
	line-height: 1.2;
	letter-spacing: -.046em;
	text-transform: none;
}

h5 {
	font-size: 1.26em;
	font-weight: bold;
}

h6 {
	font-size: 1em;
	font-weight: bold;
}

/* remove smilie for WP stats */
img#wpstats{
	width:0px;
	height:0px;
	padding:0px;
	border:none;
	overflow:hidden;
	display: none;
}
/*******************************************************
#grid by Analog Coop Limited.
http://analog.coop
*******************************************************/

/*******************************************************
GRID
* notes from analog quoted:
* Dimensions - same width as your grid with gutters
* Grid (centered)
*******************************************************/

#grid {
    width: 980px;
    position: fixed;
	top: 0;
	left: 50%;
	margin-left: -490px;
}

/*******************************************************
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,
 * and use margins to set column gutters.
*******************************************************/

#grid div.vert {
	width: 135px;
	border: solid #B6C644;
	border-width: 0 1px;
	margin-right: 20px;
}

#grid div.vert.first-line {
	margin-left: 28px;
}

/*******************************************************
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding

 * 20px line height
*******************************************************/

#grid div.horiz {
    height: 19px;
	border-bottom: 1px dotted darkgray;
	margin: 0;
	padding: 0;
}

/*******************************************************
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids
* option in the hashgrid.js file.
* Vertical grid line colour for grid 1
*******************************************************/

#grid.grid-1 div.vert {
    border-color: #B6C644;
}

#grid.grid-2 {
	/* Adjustments */
    padding: 0 160px;
	width: 660px;
}

#grid.grid-2 div.vert {
	/* Vertical grid line colour for grid 2 */
    border-color: crimson;
}