/*

+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|    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;
}

:focus { outline: 0; }
a:active, a:focus {
    outline: 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:#666;
	background: url(../images/bg2.jpg) top left repeat-x  #fff; /* Uncomment to display the grid */
	padding:0 1em;
}
#wrapper{
	width:94em;
	margin:0 auto;
}
#header{
	width:94em;
	padding-top:1.5em;
	margin-bottom:1.0em;
    padding-bottom:2em;
    text-align:right;
    background: transparent url(../images/logo2.jpg) 0 5px no-repeat;
}
/*NAVIGATION
-------------------------------------------------------- */
#nav{
	font-size:1.75em;
    color:#333;
}
#nav a{
    text-decoration:none;
	font-variant:small-caps;
	color:#989898;
    padding:3px;
}
#nav a:hover, #nav a.active {
	text-decoration:none;
    color:#FAFAFA;
}
#nav span{
	float:right;
	margin-top:-1.2em;

}
/*FOOTER NAVIGATION
-------------------------------------------------------- */
#footer {
    border-top: 2px solid #989898;
    padding-top:.5em;
	margin-top:1.5em;
    padding-bottom:1.5em;}

#footer-nav{
	word-spacing:0.2em;
    color:#333;
}
#footer-nav a{
    text-decoration:none;
	color:#989898;
	font-variant:small-caps;
}
#footer-nav a:hover{
	text-decoration:none;
    color:#333;
}

/*BREADCRUMB NAVIGATION
-------------------------------------------------------- */
#crumbs {
    float: left;
    padding-top: .5em;
    margin-bottom: .5em;
}
#crumbs p {
    font-size:1.2em;
	line-height:1.5em;
	margin-bottom:.5em;
}

/*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:1.5em;
	margin-bottom:2em;
}
.standard {
    float:left;
    padding-top: 0;
    margin-bottom:-1.6em;
}
/* 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;
}
/*-------------------------------------------+
|                                            |
|                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:#333;
	font-size:3em;
	margin-bottom:0.6em;
	font-style:italic;
	line-height:1.2em;
}
h2{
	color:#333;
	font-size:2em;
	margin-bottom:0.9em;
	line-height:0.9em;
}
h3{
	color:#333;
	font-size:1.5em;
	margin-bottom:1.2em;
	line-height:1.2em;
	font-variant:small-caps;
}
h4{
	color:#333;
	font-size:1.2em;
	margin-bottom:1.5em;
	line-height:1.5em;
	font-variant:small-caps;
}
h5{
	color:#333;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
	font-variant:small-caps;
}
h6{
	color:#333;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
}
/*LINKS
-------------------------------------------------------- */
p a{
	color:#333;
}
p a:hover{
	text-decoration:none;
}
h1 a{
	color:#333;
}
h1 a:hover{
	text-decoration:none;
}
li a{
	color:#333;
}
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;
    border-top: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
    padding: .5em;
}
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: "Consolas", Courier, "Courier New", monospace;
	background:#ddd;
	font-size:1em;
}

pre {
    font-family: "Consolas", Courier, "Courier New", monospace;
	font-size:1.2em;
}

/*-------------------------------------------+
|                                            |
|               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 #aaa;
    background-color: #fff;
	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 #aaa;
    background-color: #fff;
	margin-bottom:1.8em;
	margin-left:2em;
	margin-top:0.3em;
}

img.img {
    font-size:1em;
	padding:4px;
	border:1px solid #aaa;
    background-color: #fff;

}


/*  Portfolios
-------------------------------------------------------- */

#portfolio {}



/*  END Portfolios
-------------------------------------------------------- */

/*CONTACT FORM STYLES
-------------------------------------------------------- */
form.hform {
    overflow: hidden;
}

.hform p {
width: 30em;
clear: left;
margin: 0;
padding: .67em 0 .67em 0;
padding-left: 12.92em; /*width of left column containing the label elements*/
height: 1%;
}

.hform label    {
    font-size:  1em;
    font-weight:    bold;
    text-align:     right;
    padding:        .17em 0 .33em 0;
    float:          left;
    margin-left:    -12.92em; /*width of left column*/
    width:          12.50em; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.hform input[type="text"], .hform input[type="password"],
.hform input[type="submit"], .hform input[type="reset"],
.hform textarea, .hform select, .hform input[type="button"]
{
    font-size:      1em;
    font-family:    Georgia, "Times New Roman", serif;
}

.hform input[type="text"], .hform input[type="password"]
{ /*width of text boxes. IE6 does not understand this attribute*/
    padding:        .33em;
    border: 1px solid #989898;
}

.hform select {
    padding:            .17em .25em;
    width:              15em;
    border: 1px solid #989898;
}
.hform input[type="checkbox"]
{
    vertical-align: middle;
}

.hform input.short      { width: 15em; }
.hform input.standard   { width: 25em; }
.hform input.long       { width: 35em; }

.hform textarea {
    width:          35em;
    height:         12.50em;
    padding:        .33em;
    border:         1px solid #989898;
}

.hform input[type="submit"], .hform input[type="reset"], .hform input[type="button"]
{
    padding: .5em .5em;
    border: 1px solid #bbb;
    cursor:pointer;
    color: #aaa;
    background-color: #f1f1f1;
}

.hform input[type="submit"]:hover, .hform input[type="reset"]:hover, .hform input[type="button"]:hover
{
    border: 1px solid #999;
    color: #777;
}

.formerror {
    color:          #cc0000;
    margin-left:    14em;
    font-size:      1.1em;
    font-family:    Georgia, "Times New Roman", serif;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}


form {
	overflow:hidden;
}
fieldset {
	border:.1em solid #bbb;
	padding:1em;
	position:relative;
	background:#e9e9e9;
	margin-bottom:1em;
}

legend {
	padding:.4em .8em;
	background:#fff;
	border:.1em solid #bbb;
    font-size: 1.21em;
}
fieldset.login p {
	margin-bottom:1em;
	margin-top:0pt;
}
fieldset p label {
	width:98%;
    padding: .2em;
    font-size: .92em;
}

fieldset p input, fieldset p textarea {
    font-size:      1em;
    font-family:    Georgia, "Times New Roman", serif;
	width:          98%;
    padding:        .33em;
}
fieldset p input[type="text"], fieldset p input[type="password"], fieldset p input[type="file"],
fieldset p textarea, fieldset p select {
    border: .1em solid #989898;
}

fieldset p select {
	width:98%;
    padding: .2em;
}

fieldset p input[type="checkbox"]
{
    vertical-align: middle;
    text-align: left;
    width: 98%;
    padding: .2em;
}

fieldset.login p label {
	float:left;
	line-height:2em;
	margin-right:3%;
	text-align:right;
	width:32%;
}
fieldset.login p input {
	width:60%;
}
fieldset.login input.button {
	margin-left:36%;
    padding:.2em .5em;
}
form p.notice {
	font-weight:bold;
}
input.search.text {
	width:66%;
}
input.search.button {
	width:28%;
	margin-left:2%;
}
fieldset input.button { padding:.15em .25em; }

/*  END FORMS
------------------------------------------------------------------- */

/*  PAYPAL BUTTON
------------------------------------------------------------------- */
.pp_submit /*, #pp_submit,#pp_submit2 */
{
  width: 114px;
  height: 29px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #e9e9e9 url(../images/purchase.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

/*  END PAYPAL BUTTON
------------------------------------------------------------------- */


/*  ERROR MESSAGES
------------------------------------------------------------------- */

div#messages {
    padding:            0;
    margin:             0;
    width:              94em;
    margin-top:         1em;
}

/* Success, error & notice boxes for messages and errors. */
.warning,
.error,
.message,
.success    { font-size: 1.2em; padding: 5px; margin:0 0 .5em 0; padding-left:30px; border: 2px solid #ddd; }

.warning    { background: #fffabc url(../images/icons/error.png) 5px no-repeat; color: #cc9933; border-color: #e9e5ac; }
.error      { background: #fbe3e4 url(../images/icons/exclamation.png) 5px no-repeat; color: #D12F19; border-color: #FBC2C4; }
.message    { background: #ddecef url(../images/icons/information.png) 5px no-repeat; color: #335f96; border-color: #acd1e5; }
.success    { background: #e6efc2 url(../images/icons/accept.png) 5px no-repeat; color: #529214; border-color: #C6D880; }

.warning a  { color: #0099cc; }
.error a    { color: #d12f19; }
.message a  { color: #817134; }
.success a  { color: #529214; }

/*  TABLES
------------------------------------------------------------------- */
table           { border-collapse: collapse; border-spacing: 0; font-size: 1.2em;}
caption, th, td { text-align: left; font-weight:400; }
table           { margin-bottom: 1em; width: 100%;}
th              { border-bottom: 2px solid #6678b1; color: #039; text-align:center; font-weight:bold; padding:.67em .67em;}
td              { border-bottom: 1px solid #ccc; color: #669; text-align:center; padding:.67em .67em;}
tfoot           { font-style: italic; }
caption         { color:#880000; padding:.67em; border-bottom:2px solid #6678b1; font-size: 1.2em;}

tbody tr:hover td { color:#009; background-color: #e7e7ef; }
td img          { border: none; }
#actions        { text-align: right; }

td a:link,
td a:visited,
td a:active             { text-decoration: none; color: #333;}
td a:hover              { text-decoration: underline; }


/*-------------------------------------------+
|                                            |
|                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:#333;
}
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                 |
|                                            |
+-------------------------------------------*/

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }


/* Styling for links above the list tables */
p#pagelinks
{
	margin-bottom: 1em;
	margin-top: 1em;
}

p#pagelinks a:link, p#pagelinks a:active, p#pagelinks a:visited
{
	color: #333; text-decoration:none;
}
p#pagelinks a:hover
{
    color: #cc0000; text-decoration:none;
}
p#pagelinks a:hover span.title
{
    color: #333; text-decoration:underline;
}
p#pagelinks a img { padding-right: .3em; }