/*

+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|    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:Georgia, "Times New Roman", serif;
  color:black;
  background:/* url(/images/grid.gif) top center repeat-y #fff */; /* Uncomment to display the grid */
  border-top:0.5em solid #666;
  padding:0 1em;
}
#wrapper{
  width:94em;
  margin:0 auto;
}
#header{
  width:94em;
  background-color: #666;
  padding-top:1.5em;
 /*  margin-bottom:2em; */
}
#header { background-color: transparent; height: 126px !important;}
#header ul li { display: inline; padding-left:1.5em; font-size:1.5em; }
#header ul li.caption { padding-left:0 }
#header a:hover { color:red; }

/*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 {
  padding-top:2.5em;
  border-bottom:0.75em solid #666;
  border-top:0.1em dotted #666;
}
#footer ul li { display: inline; padding-left:0.5em; font-size:1.5em; }
#footer a:hover { color:red; }
#footer img { display: none; }

#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{
  border-top:0.5em solid #666; /* The border at the top of each grid */
  float:left;
  padding-top:1em;
  margin-bottom:2em;
}
/* 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;
}
.forty {
/*  40px */ /* ONE                   */
  width:4em;
  margin-right:2em;
}
.onehundred {
/* 100px */ /* TWO                   */
  width:10em;
  margin-right:2em;
}
/* 160px */ /* THREE                 */
.onesixty{
  width:16em;
  margin-right:2em;
}
/* 220px */ /* FOUR                  */
.twotwenty{
  width:22em;
  margin-right:2em;
}
/* 280px */ /* FIVE                  */
.twoeighty{
  width:28em;
  margin-right:2em;
}
/* 340px */ /* SIX                   */
.threeforty{
  width:34em;
  margin-right:2em;
}
/* 400px */ /* SEVEN                 */
.fourhun{
  width:40em;
  margin-right:2em;
}
/* 460px */ /* EIGHT                 */
.foursixty{
  width:46em;
  margin-right:2em;
}
/* 520px */ /* NINE                  */
.fivetwenty{
  width:52em;
  margin-right:2em;
}
/* 580px */ /* TEN                   */
.fiveeighty{
  width:58em;
  margin-right:2em;
}
/* 640px */ /* ELEVEN                */
.sixforty{
  width:64em;
  margin-right:2em;
}
/* 700px */ /* TWELVE                */
.sevenhun{
  width:70em;
  margin-right:2em;
}
/* 760px */ /* THIRTEEN              */
.sevensixty{
  width:76em;
  margin-right:2em;
}
/* 820px */ /* FOURTEEN              */
.eighttwenty{
  width:82em;
  margin-right:2em;
}
/* 880px */ /* FIFTEEN              */
.eighteighty{
  width:88em;
  margin-right:2em;
}
/* 940px */ /* SIXTEEN              */
.nineforty{
  width:94em;
}
/*-------------------------------------------+
|                                            |
|                FONT STYLES                 |
|                                            |
+-------------------------------------------*/
/*PARAGRAPHS
-------------------------------------------------------- */
.generic p{
  font-size:1.5em;
  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{
/*  font-size:1.5em!important; */
/*  line-height:1.5em!important; */
/*  margin-bottom:1.5em!important; */
  border-left: thick dotted pink;
  font-style:italic;
  padding: 0 1em;
}

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;
}
pre{ /* Styling for and code type items */
  font-family:Courier, "Courier New", monospace;
  background:#ddd;
  font-size:1.5em;
  overflow:auto;
  padding: .5em;
  margin-bottom: .5em;
}
/*-------------------------------------------+
|                                            |
|               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;
  border:1px solid #ccc;
  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;
  border:1px solid #ccc;
  margin-bottom:1.8em;
  margin-left:2em;
  margin-top:0.3em;
}
/*CONTACT FORM STYLES
-------------------------------------------------------- */
#contact-form{
}
#contact-form label{
  width:10em;
  float:left;
  margin-top:0.6em;
}
#name, #form-email, #url, #location{
  width:42.7em;
  height:20px;
  padding:3px;
  padding-top:5px;
  border:2px solid #666;
  margin-bottom:18px;
  background:#fff !important;
}
#comments{
  width:43.8em;
  height:10em;
  padding:3px;
  border:2px solid #666;
  margin-bottom:18px;
  overflow:auto;
  background:#fff !important;
}
#name:active, #form-email:active, #url:active, #location:active, #comments:active, #submit:active, #name:focus, #form-email:focus, #url:focus, #location:focus, #comments:focus, #submit:focus{
  border:2px solid #000;
}
#submit{
  clear:both;
  padding:5px;
  border:2px solid #666;
  background:#fff !important;
  cursor:pointer;
  margin-left:9em;
}
#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.5em;
  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.5em;
  line-height:1.5em;
}
/*-------------------------------------------+
|                                            |
|               MISC. STYLES                 |
|                                            |
+-------------------------------------------*/


/*

	"I could eat a knob at night"
		-	Karl Pilkington

*/