/*

+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|    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: #333
BODY COLOUR: #666
LINKS: #333
-------------------------------------------------------- */


/* 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: "Lucida Sans", Arial, Verdana, sans-serif; /* Georgia, "Times New Roman", serif; */
	color:#666;
	background: #fafafa;/* Uncomment to display the grid */
	padding:0;
}
#wrapper{
	width:94em;
	margin:0 auto;
}

#header_wrapper {
    width:100%;
	margin: 0 auto;
	background: #fff;
	height:120px;
}
    #header{
        width:94em;
        height:118px;
        margin:0 auto;
    }
	#logo {
		float:left;
        position:relative;
        top:1em;
		width:463px;
		height:90px;
		margin:0;
		padding:0;
		border:none;
	}

	#address {
		float:right;
        position:relative;
        top:1em;
		width:155px;
		height:87px;
		margin:0;
		padding:0;
		border:none;
	}

#banner_wrapper {
    width:100%;
	margin: 0 auto;
    border-top: 2px solid #ccc;
	background: transparent url(../images/banner.jpg) top left repeat-x;
	height:27.2em;
}

#banner {
	width: 94em;
	margin: 0 auto;
}
#bannerText {
	width: 44em;
	float: left;
	padding-top: 2em;
}
    #bannerText p {
        font-size:1.2em;
        color:#ccc;
    }

#bannerImage {
	height: 25.0em;
	width: 44.0em;
	float:right;
	background: transparent url(../images/banner.png) 0 .5em no-repeat;
}


/*NAVIGATION
-------------------------------------------------------- */
#menu_wrapper {
    width:100%;
	margin: 0 auto;
	background: transparent url(../images/menu.jpg) top left repeat-x;
	height:6.0em;
}

#menu {
    width: 94em;
    margin: 0 auto;
    height: 5.7em;
}
    #menu a {
        margin-right:   1em;
        margin-top:     1em;
    }


#sf-wrapper {
    width: 100%;
    background: #e5e5e5;
    border-top: 1px solid #d8d8d8; 
    border-bottom: 1px solid #d8d8d8; 
}
#sf-inner {
    width: 94em;
    margin: 0 auto;
}

/*  MAIN NAVIGATION
-------------------------------------------------------- */
#main_wrapper {
	width: 98em;
	margin: 0 auto;
	background: #fafafa;
}
	#main {
		width:94em;
		padding:2em 2em 5em 2em;
		background: #fafafa;
	}


/*FOOTER NAVIGATION
-------------------------------------------------------- */
#footer_wrapper {
    width:100%;
	margin: 0 auto;
	background: transparent url(../images/footer.jpg) top left repeat-x;
	height:9.8em;
}
    #footer {
		width:94em;
		margin:0 auto;
		padding-top: .5em;
		color: #333;
	}
	#footer a {
		text-decoration: none;
		color: #4a4a4a;
        font-weight: bold;
	}
	#footer a:hover {
		text-decoration: none;
		color: #336699;
	}
	#footer_right {
		text-align: right;
		height: 9.8em;
		background: transparent url(../images/creditcards.gif) top right no-repeat;
	}
/*GRIDS
-------------------------------------------------------- */
/* Set styles common among all grids - all grid divs must be assigned this class */
.generic{
	float:left;
	padding-top:1em;
	margin-bottom:2em;
}

.noborders {
    border: none;
}

/* 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;
}
h2.special {
    border-bottom: 1px dotted #ddd;
    margin-bottom:0.6em;
    padding-bottom: .3em;
}
h3{
	color:#333;
	font-size:1.5em;
	margin-bottom:1.2em;
	line-height:1.2em;
	font-variant:small-caps;
}
h3.special {
    border-bottom: 1px dotted #ddd;
    margin-bottom:0.9em;
    padding-bottom: .3em;
}
h3 a {
	text-decoration: none;
	color:#333!important;
}
h3 a:hover {
	text-decoration: underline;
}

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;
    text-decoration:none;
}
li a:hover{
	text-decoration:underline;
}
/*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;
	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;
}

img.noborder { border:none; }

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

.hform p {
width: 50em;
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:    "Lucida Sans", 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:    "Lucida Sans", 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;
}
/*-------------------------------------------+
|                                            |
|                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;
}

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: .5em; margin:0 0 .5em 0; padding-left:30px; border: 1px 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.ratestable     { border-collapse: collapse; border-spacing: 0; font-size: 1.2em;}
table.ratestable caption, .ratestable th, .ratestable td { text-align: left; font-weight:400; }
table.ratestable     { margin-bottom: 1em; width: 100%;}
table.ratestable th              { border-bottom: 2px solid #6678b1; color: #039; font-weight:bold; padding:.67em .67em;}
table.ratestable td              { border-bottom: 1px solid #ccc; color: #669; padding:.67em .67em;}
table.ratestable tfoot           { font-style: italic; }
table.ratestable tfoot tr td     { font-weight:    bold; }
table.ratestable caption         { color:#880000; padding:.67em; border-bottom:2px solid #6678b1; font-size: 1.2em;}
table.ratestable
table.ratestable tbody tr:hover td { color:#009; background-color: #e7e7ef; }
table.ratestable td img          { border: none; }
table.ratestable
table.ratestable td a:link,
table.ratestable td a:visited,
table.ratestable td a:active             { text-decoration: none; color: #333;}
table.ratestable td a:hover              { text-decoration: underline; }
#actions        { text-align: right; }

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

/*-------------------------------------------+
|                                            |
|               MISC. STYLES                 |
|                                            |
+-------------------------------------------*/
.awards { width:100%; overflow:hidden;}
.awards li { list-style: none; }
.awards li { float:left; border-right:1px solid #e3e3e3; padding:0 20px;}
.awards li.last { padding-right:0; border:none;}

.box { background:url(../images/box/box-bg.gif) left bottom repeat-x #fff; width:100%;}
.box .border-top {background:url(../images/box/border-top.gif) repeat-x top;}
.box .border-bot {background:url(../images/box/border-bot.gif) repeat-x bottom;}
.box .border-left {background:url(../images/box/border-left.gif) repeat-y left;}
.box .border-right {background:url(../images/box/border-right.gif) repeat-y right;}
.box .left-top-corner {background:url(../images/box/left-top-corner.gif) no-repeat left top;}
.box .right-top-corner {background:url(../images/box/right-top-corner.gif) no-repeat right top;}
.box .left-bot-corner {background:url(../images/box/left-bot-corner.gif) no-repeat left bottom;}
.box .right-bot-corner {background:url(../images/box/right-bot-corner.gif) no-repeat right bottom; }
.box .inner { padding:20px 30px 15px 30px;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}
.alignleft { text-align:left;}

table#hosting { font-size:1.2em; border:1px solid #dadada; width:100%;  border-collapse:collapse;}
table#hosting td { border:none;}
table#hosting td.cell-1 { width:35%; text-align:left;}
table#hosting td.cell-2 { text-align:center;}
table#hosting td.cell-3 { text-align:center;}
table#hosting td.cell-4 { text-align:center;}
table#hosting td.cell-5 { text-align:center;}
table#hosting tr.alt    { background: #e7e7ef;}
table#hosting thead td { background:#ebebeb; font-weight:bold; padding:7px 30px 7px 30px; border:1px solid #dadada;}
table#hosting tbody td { padding:6px 30px 6px 30px; border:1px solid #dadada; border-bottom:none; border-top:none;}
table#hosting tbody td.last { padding-bottom:20px;}

table#hosting tbody td a { color: #333; text-decoration: none; }
table#hosting tbody td a:hover { text-decoration: underline; }


/* FAQ Definition List Styling */


.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}