/*

+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|    TYPOGRIDPHY - TYPOGRAPHICAL AND GRID LAYOUT CSS FRAMEWORK FROM HARRY ROBERTS OF CSS WIZARDRY    |
|                                                                                                    |
+-------------------------------------------------+--------------------------------------------------+
|                                                 |                                                  |
|   TYPOGRIDPHY IS © COPYRIGHT OF HARRY ROBERTS   |   v 0.1.1                                        |
|   IT IS FREE TO BE USED AND MODIFIED PROVIDED   |   May 2008                                       |
|   THIS TEXT REMAINS INTACT -- CSSWIZARDRY.COM   |   http://csswizardry.com                         |
|                                                 |                                                  |
+-------------------------------------------------+--------------------------------------------------+



COLOUR REFERENCES
BODY BG: #FFF
TOP STRIP: #000
BODY COLOUR: #666
LINKS: #000
-------------------------------------------------------- */


/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,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;
}
ol,ul {
  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;
}
/*---------- END RESET ----------*/


/*-------------------------------------------+
|                                            |
|            MAIN STRUCTURE STYLES           |
|                                            |
+-------------------------------------------*/
html{
  font-size:100%;
  min-height:101%;
}
body{
  font-size:62.5%;
  font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
  color:#666;
  /* background: url(grid.gif) top center repeat-y #fff; */
  background: #fff;
  padding:0 1em;
}
#wrapper{
  width:106em;
  margin:0 auto;
}
#header{
  width:94em;
  padding-top:1.5em;
  margin-bottom:2em;
}
/*NAVIGATION
   */
#nav{
  font-size:2em;
}
#nav a{
  font-variant:small-caps;
  color:#000;
}
#nav a:hover{
  text-decoration:none;
}
#nav span{
  float:right;
  margin-top:-1.2em;
}
/*FOOTER NAVIGATION
   */
#footer-nav{
  word-spacing:0.2em;
}
#footer-nav a{
  color:#000;
  font-variant:small-caps;
}
/*GRIDS
-------------------------------------------------------- */
/* Set styles common among all grids - all grid divs must be assigned this class */
.generic{
  float:left;
  padding-top:1em;
  margin-bottom:2em;
  margin-top: 0.5em;
}
/* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */
.clear{
  clear:both;
}
/* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */
.end{
  margin-left:0 !important;
  margin-right:0 !important;
}
/* 220px */
.twotwenty{
  width:22em;
  margin-right:2em;
}
/* 280px */
.twoeighty{
  width:28em;
  margin-right:2em;
}
/* 340px */
.threeforty{
  width:34em;
  margin-right:2em;
}
/* 400px */
.fourhun{
  width:40em;
  margin-right:2em;
}
/* 460px */
.foursixty{
  width:46em;
  margin-right:2em;
}
/* 520px */
.fivetwenty{
  width:52em;
  margin-right:2em;
}
/* 580px */
.fiveeighty{
  width:58em;
  margin-right:2em;
}
/* 640px */
.sixforty{
  width:64em;
  margin-right:2em;
}
/* 700px */
.sevenhun{
  width:70em;
  margin-right:2em;
}
/* 760px */
.sevensixty{
  width:76em;
  margin-right:2em;
}
/* 820px */
.eighttwenty{
  width:82em;
  margin-right:2em;
}
/* 880px */
.eighteighty{
  width:88em;
  margin-right:2em;
}
/* 940px */
.nineforty{
  width:94em;
}
/* 1000px */
.onethou{
  width:100em;
}
/* 1060px */
.tensixty{
  width:106em;
}
/*-------------------------------------------+
|                                            |
|                FONT STYLES                 |
|                                            |
+-------------------------------------------*/
/*PARAGRAPHS
-------------------------------------------------------- */
.generic p{
  font-size:1.2em;
  line-height:1.5em;
  margin-bottom:1.5em;
}
/* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
p.intro:first-line{
  font-variant:small-caps;
}
/* Styles a drop cap on each paragraph with this class */
p.drop:first-letter{
  float:left;
  font-size:3em;
  margin-top:-0.05em;
  margin-right:0.1em;
  margin-bottom:-0.5em;
}
/*HEADINGS
-------------------------------------------------------- */
h1{
  color:#000;
  font-size:3em;
  margin-bottom:0.6em;
  font-style:italic;
  line-height:1.2em;
}
h2{
  color:#000;
  font-size:2em;
  margin-bottom:0.9em;
  line-height:0.9em;
}
h3{
  color:#000;
  font-size:1.5em;
  margin-bottom:1.2em;
  line-height:1.2em;
  font-variant:small-caps;
}
h4{
  color:#000;
  font-size:1.2em;
  margin-bottom:1.5em;
  line-height:1.5em;
  font-variant:small-caps;
}
h5{
  color:#000;
  font-size:1em;
  margin-bottom:1.8em;
  line-height:1.8em;
  font-variant:small-caps;
}
h6{
  color:#000;
  font-size:1em;
  margin-bottom:1.8em;
  line-height:1.8em;
}
/*LINKS
-------------------------------------------------------- */
p a{
  color:#000;
}
p a:hover{
  text-decoration:none;
}
h1 a{
  color:#000;
}
h1 a:hover{
  text-decoration:none;
}
li a{
  color:#000;
}
li a:hover{
  text-decoration:none;
}
/*ALL THE TRIMMINGS
-------------------------------------------------------- */
blockquote p{
  font-size:1.2em!important;
  line-height:1.5em!important;
  margin-bottom:1.5em!important;
  font-style:italic;
  font-weight:bold;
}
blockquote p cite{
  font-style:normal;
}
.generic strong{
  font-variant:small-caps;
}
.generic em{
  font-style:italic;
  font-weight:inherit;
}
.amp{ /* Give those ampersands a right sexy look */
  font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
  font-style:italic;
  font-weight:normal;
  line-height:inherit;
}
abbr{
  border-bottom:1px dotted #666;
  border-color:inherit;
  cursor:help;
}
.clear{
  clear:both;
}
.right-float{ /* Float any item to the right */
  float:right;
  margin-left:2em;
  margin-right:0;
}
.left-float{ /* Float any item to the left */
  float:left;
  margin-right:2em;
  margin-left:0;
}
.code{ /* Styling for and code type items */
  font-family:Courier, "Courier New", monospace;
  background:#ddd;
  font-size:1em;
}
/*-------------------------------------------+
|                                            |
|               IMAGE STYLES                 |
|                                            |
+-------------------------------------------*/
img{
  font-size:1em;
}
img.left-img{ /* Float any image to the LEFT and give it some margin */
  font-size:1em;
  float:left;
  padding:4px;
  margin-bottom:1.8em;
  margin-right:2em;
  margin-top:0.3em;
}
img.right-img{ /* Float any image to the RIGHT and give it some margin */
  font-size:1em;
  float:right;
  padding:4px;
  margin-bottom:1.8em;
  margin-left:2em;
  margin-top:0.3em;
}
/*CONTACT FORM STYLES
-------------------------------------------------------- */
#subscribe-form{
}
#subscribe-form label{
  width:5em;
  float:left;
  margin-top:0.6em;
}
#realname, #email{
  width:38em;
  height:20px;
  padding:3px;
  padding-top:5px;
  border:1px solid #aaa;
  margin-bottom:18px;
  background:#fff !important;
}
#realname:active, #email:active, #submit:active, 
#realname:focus, #email:focus, #submit:focus{
  border:1px solid #aaa;
}
#submit{
  clear:both;
  padding:5px;
  border:1px solid #aaa;
  background:#fff !important;
  cursor:pointer;
  margin-left:5em;
}
#reset{
  clear:both;
  padding:3px;
  border:none;
  background:#f00 !important;
  cursor:pointer;
  float:right;
  color:#fff;
  margin-top:-28px;
}
/*-------------------------------------------+
|                                            |
|                LIST STYLES                 |
|                                            |
+-------------------------------------------*/
ul{
  margin-bottom:1.8em;
  list-style:square inside;
}
ul li{
  font-size:1.2em;
  line-height:1.5em;
}
ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */
  font-variant:small-caps;
  list-style:none;
  color:#000;
}
li > ul, li > ol{
  margin-bottom:0;
  margin-left:5em;
}
li > ul li, li > ol li{
  font-size:1em;
}
ol{
  margin-bottom:1.8em;
  list-style:decimal inside;
}
ol li{
  font-size:1.2em;
  line-height:1.5em;
}
/*-------------------------------------------+
|                                            |
|               MISC. STYLES                 |
|                                            |
+-------------------------------------------*/

#splash_image {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10em;
  display: block;
}

#copyright {
  clear: both;
}

#copyright span { 
  float: right;
}

/* Top navigation */
/* Uses image replacement technique from http://wellstyled.com/css-replace-text-by-image.html */
/* Uses CSS dropdown similar to http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html */

#topnav ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}

#topnav li {
  position: relative;
  float: right;
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#topnav li ul {
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  display: block;
  visibility: hidden;
}

#topnav li ul li {
  display: list-item;
  float: none;
}

#topnav li:hover ul {
  visibility: visible;
}

#topnav li {
  display: block;
  float: right;
  margin: 0 0 0 10px;
  padding: 0;
  position: relative;
  /* overflow: hidden; */
}

#topnav a span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
}

#topnav li, #topnav li a span {
  height: 44px;
}

#topnav li li {
  height: auto;
  margin: 0 5px;
}

#topnav a {
  text-decoration: none;
}

#topnav a:link {
  color: #aaa;
}

#topnav a:visited {
  color: #aaa;
}

#topnav a:hover {
  color: #000;
}

#topnav a:active {
  color: #000;
}

#topnav ul li ul li.selected a { 
  color: #000;
}


/* Home */
#topnav #homenav {
  float: left;
  margin: 0;
}

#homenav, #homenav span {
  width: 494px;
}

#homenav span {
  background: url("/images/banner.gif") top left no-repeat;
}

/* Shop */
#shopnav, #shopnav span {
  width: 43px;
}

#shopnav span {
  background: url("/images/shop-grey.gif") #fff bottom left no-repeat;
}

#shopnav span:hover, #shopnav.selected span{
  background: url("/images/shop-black.gif") #fff bottom left no-repeat;
}

#shopnav ul { 
  width: 100px;
}

/* Subscribe */
#subscribenav, #subscribenav span {
  width: 83px;
}

#subscribenav span {
  background: url("/images/subscribe-grey.gif") #fff bottom left no-repeat;
}

#subscribenav span:hover, #subscribenav.selected span {
  background: url("/images/subscribe-black.gif") #fff bottom left no-repeat;
}

/* Projects */
#projectsnav, #projectsnav span {
  width: 71px;
}

#projectsnav span {
  background: url("/images/projects-grey.gif") #fff bottom left no-repeat;
}

#projectsnav span:hover, #projectsnav.selected span {
  background: url("/images/projects-black.gif") #fff bottom left no-repeat;
}

#projectsnav ul {
  width: 100px;
}

/* Press */
#pressnav, #pressnav span {
  width: 49px;
}

#pressnav span {
  background: url("/images/press-grey.gif") #fff bottom left no-repeat;
}

#pressnav span:hover, #pressnav.selected span {
  background: url("/images/press-black.gif") #fff bottom left no-repeat;
}

#pressnav ul {
  width: 120px;
}

/* Biography */
#biographynav, #biographynav span {
  width: 88px;
}

#biographynav span {
  background: url("/images/biography-grey.gif") #fff bottom left no-repeat;
}

#biographynav span:hover, #biographynav.selected span {
  background: url("/images/biography-black.gif") #fff bottom left no-repeat;
}

/* Blog */
#blognav, #blognav span {
  width: 40px;
}

#blognav span {
  background: url("/images/blog-grey.gif") #fff bottom left no-repeat;
}

#blognav span:hover, #blognav.selected span {
  background: url("/images/blog-black.gif") #fff bottom left no-repeat;
}

/* Contact */
#contactnav, #contactnav span {
  width: 68px;
}

#contactnav span {
  background: url("/images/contact-grey.gif") #fff bottom left no-repeat;
}

#contactnav span:hover, #contactnav.selected span {
  background: url("/images/contact-black.gif") #fff bottom left no-repeat;
}

/* Gallery navigation */
/*
   Rollover technique taken from:
   http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html
   */
#arrows a
{
  float: left;
  margin: 0.4em 0.3em 0 0;
  padding: 12px 0 0 0;
  overflow: hidden;
  width: 12px;
  height: 0px !important; 
  height /**/:12px; /* for IE5/Win */
  background-position: top left;
  background-repeat:no-repeat;
}

#arrows a:hover
{
  background-position: 0 -12px;
}

#arrows #left 
{
  background-image: url(../images/left_arrow_rollover.gif);
}

#arrows #right
{
  background-image: url(../images/right_arrow_rollover.gif);
}

#portfolionav ul
{
  list-style: none;
  padding: 0 0 0 1em;
  margin: 4px 15px 0 0;
}

#portfolionav ul li
{
  margin: 0 0 4px 0;
  padding: 0;
}

#imagelinks, #imagelinks li
{
  display:inline;
}

#imagelinks
{
  padding: 0;
  margin: 0;
}

#imagelinks li
{
  margin: 0 0 0 0.2em;
  padding: 0;
}

#imagelinks a
{ 
  text-decoration: none;
}

#imagelinks a:link
{
  color: #aaa;
}

#imagelinks a:visited
{
  color: #aaa;
}

#imagelinks a:hover
{
  color: #000;
}

#imagelinks a:active
{
  color: #000;
}

#imagelinks a.disabled
{
  color: #000;
}