/* neat nav trick - must declare each cat name here*/
ul.subnav {display:none;}
body.drawings ul.drawings_nav {display:block;}
body.projects ul.projects_nav {display:block;}
body.drawn_type ul.drawn_type_nav {display:block;}
body.sketchbook ul.sketchbook_nav {display:block;}
body.editorial ul.editorial_nav {display:block;}
body.books ul.books_nav {display:block;}
body.pages ul.pages_nav {display:block;}
body.bio ul.bio_nav {display:block;}
body.store ul.store_nav {display:block;}



/* rotating top banner */
html {padding-top: 80px; background: #fff url(http://johnhendrix.com/portfolio/public/images/banners/rotate.php) top center no-repeat;  margin: 0px auto;}

/* Colours */

body, a { color: #151515; }
a { }
a:hover {text-decoration: underline;}
em { color: #999; }

/* Typography */

body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; line-height: 1.3; }
ul li, p, em { font-size: 12px; font-style: normal; }
h1 {font-size: 1.0em; font-weight: 900;  text-transform: uppercase;}
h1 a {display:block; height: 110px; width: 420px; margin-left: -110px; background: #fff url(http://johnhendrix.com/portfolio/public/images/jhtitle3.jpg) top left no-repeat;}
	h1 a:hover {color: black;}
	h1 a span {display:none;}

a { text-decoration: none; }

/* Layout */

body { padding: 10px 0px 40px; text-align: center; }
div#container { margin: 0px auto; width: 980px; padding: 5px 0px; text-align: left;  }

.col { float: left; margin: 0px; padding: 0px; }
.col .col { margin: 0px; }

.one { width: 60px; }
.two { width: 140px; }
.three { width: 220px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 460px; }
.seven { width: 540px; }
.eight { width: 760px; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }

p, h2 { margin: 0px 0px 5px; }
h2 {font-size:1.4em; font-weight:900;  padding-top: 10px;}

hr { display: block; clear: both; margin: 0px 0px 2px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
.col hr { margin: 0px; }

em.three { margin: 0px 0px 0px 0px; }

div#navigation { margin: 15px 0px 0px 0px;  }
div#navigation ul { list-style: none; padding: 0px 0px 0px 0px; margin: 0px; text-align: left; }
div#navigation ul li { margin: 0px; }
div#navigation ul li.selected { color: #999;}
div#navigation ul li.selected a { color: #999; cursor: default; }
div#navigation ul li em { display: block; margin: 5px 0px 0px; font-size: 1.2em; font-weight: 900; color: #333;  }

div#navigation ul li a {display: block; height: 20px; width: 140px; margin-left: -44px;  background: #fff url(http://johnhendrix.com/portfolio/public/images/cat-type6.gif) top left no-repeat; background-position: 0px 4px;}
div#navigation ul li em a span {color: yellow; display: none;}

div#navigation ul li#blog a:hover {background-position: 0 -18px;}
div#navigation ul li#blog em.selected a {background-position: 0 -18px; }

div#navigation ul li#Books a {background-position: 0 -40px;}
div#navigation ul li#Books a:hover {background-position: 0 -62px;}
div#navigation ul li#Books em.selected a {background-position: 0 -62px; }

div#navigation ul li#Editorial a {background-position: 0 -84px;}
div#navigation ul li#Editorial a:hover {background-position: 0 -106px;}
div#navigation ul li#Editorial em.selected a {background-position: 0 -106px; }

div#navigation ul li#DrawnType a {background-position: 0 -128px;}
div#navigation ul li#DrawnType a:hover {background-position: 0 -150px;}
div#navigation ul li#DrawnType em.selected a {background-position: 0 -150px; }

div#navigation ul li#Sketchbook a {background-position: 0 -174px;}
div#navigation ul li#Sketchbook a:hover {background-position: 0 -196px;}
div#navigation ul li#Sketchbook em.selected a {background-position: 0 -196px; }

div#navigation ul li#About a {background-position: 0 -218px;}
div#navigation ul li#About a:hover {background-position: 0 -240px;}
div#navigation ul li#About em.selected a {background-position: 0 -240px; }

div#navigation ul li#Store a {background-position: 0 -262px;}
div#navigation ul li#Store a:hover {background-position: 0 -284px;}
div#navigation ul li#Store em.selected a {background-position: 0 -284px; }

div#twitter {background: transparent url(http://johnhendrix.com/portfolio/public/images/top-border.gif) top left repeat-x; margin-top: 30px; padding-top: 5px;}
	div#twitter h4 {font-weight: normal;  font-size: 9px; color: #777; padding-top: 5px; font-family: 'Trebuchet MS', Trebuchet, sans-serif; letter-spacing: .2em;}
	div#twitter h4 a {color: #777; font-family: 'Trebuchet MS', Trebuchet, sans-serif; letter-spacing: .2em;}
	div#navigation div#twitter ul li {padding: 5px 0px; font-size: 10px; color: #666; clear: left;}
	div#navigation div#twitter ul li a {background: transparent; backgroung-image: none; margin-left: 0; display: inline; height: inherit; text-decoration: underline; color: #666; }


div.description {width: 760px; padding-top: 10px;}
div.description h2 {margin-top: 0; padding-top: 0; padding-bottom: 5px; margin-bottom: 5px; color: #999; font-size: 19px; font-weight: normal; font-style: italic;}
div.description h2 a {color: #999;}
div.description p {line-height: 18px; font-size: 11px;}

div#navigation ul.subnav {padding: 8px 0px 20px 42px; font-size: 0.8em;}
div#navigation ul.subnav li a {line-height: 22px; font-size: 12px; font-style: italic; clear: both; width: auto; border: none; background-image: none; display: inline;  height: auto; color: #000;}
div#navigation ul.subnav li a:hover {color: #cc0000; text-decoration: none;}

div#content { margin: 0px 0px 0px 20px; }

div#media { clear: both; padding: 0px; }
div.media { margin: 0px 0px 10px; }
div.home div#media { padding: 0px; }
div.description div#media { padding: 0px 0px 0px 0px; }
p#gallery-count, div#gallery-navigation { display: none; }
body.category div#media, body.index div#media {margin-top: 25px;}

p#gallery-count span {color: #666; font-weight: bold; letter-spacing: 0.15em; font-size: 0.9em;}
body.js-enabled p#gallery-count em {font-size: 1.5em; font-family: Garamond, serif;  }
div#gallery-navigation p {margin-bottom: 0;}
div#media img {}

div#image-wrapper { overflow: hidden; width: 760px; }
div#image-wrapper div#image-holder { width: 100000000px; }
div#image-wrapper div#image-holder div.image { float: left; width: 760px; }

p#footer { margin: 0px 0px 0px 160px;  color: #999; width: 760px;}
p#footer em { display: block; }

a.atom-rss {color: #666; margin: 0px 0px 0px 3px; padding: 1px 3px 1px 4px; font-size: 0.93em; letter-spacing: 0.08em; background: #ccc; }
a:hover.atom-rss  {color: #fff; background-color: orange; text-decoration: none;}

/* bio page */
table#about h3 {margin-top: 0; padding-top: 0; padding-bottom: 5px; margin-bottom: 5px; color: #999; font-size: 19px; border-bottom: 1px solid #333; font-weight: normal; font-style: italic; }
table#about ul {padding-left: 0; margin-left: 20px; padding-top: 5px; margin-top: 0;}
table#about p, table#about li {line-height: 18px; font-size: 11px;}
p#footer a img{border: none;}
p#footer {}
div.description table#about p strong {color: #DF7E00; }

/* Javascript-enabled styles */
body.js-enabled p#gallery-count, body.js-enabled div#gallery-navigation { display: block; }
body.js-enabled p#project-count { display: none; }
body.js-enabled div#media div.image { display: none; }
body.js-enabled div#media div.image:first-child { display: block; }
#gallery-navigation {padding-left: 10px;}

a#previous-image, a#next-image {color: #fff; }
a#previous-image img, a#next-image img {padding-top: 5px; }
a#previous-image em, a#next-image em { font-size: 1.5em; line-height: 1.3em;}