/*
-------------------------------------------------
URI: http://www.thewebsite.co.uk/
Created by AMAZE
-------------------------------------------------

CONTENTS

1: Site Master Setup (including reset.css)

2: LAYOUT
	2.1 main form
	2.2 container
	2.3 header
	2.4 primary content
	2.5 secondary content
	2.6 tertiary content
	2.7 (content) column sizes
		2.7.1 fixed container
		2.7.2 secondary content size
		2.7.3 tirtiary content size
	2.8 footer
	
3: GLOBAL ELEMENTS / CONTROLS
	3.3 accessibility
	3.1 primary navigation
	3.2 secondary navigation
	
4: TEMPLATE / PAGE SPECIFIC
	
5: USEFUL CLASSES

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */

/* Imported from yahoo UI reset css - http://developer.yahoo.com/yui/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,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 of import */

body { color: #000; height: 100%; min-width: 775px; font: 62.5%/1.4 Arial, Helvetica, sans-serif }
img	{ background: none }
select, input, textarea { padding: 2px; border: 1px solid #000 }
input.nb { border: 0 none }
hr { background: #fff; width: 100%; height: 1px; margin: 3px auto 0 0; clear: both }
hr.double { border: none 0; background: #fff; width: 100%; height: 2px; margin: 3px auto 0 0; text-align: left; clear: both }
:link,:visited { text-decoration: none }
p.small { font-size: .80em; margin: 10px 0 0 0; color: #9c9c9c }
em { font-style: italic}

/* -----------------------------------------------
2. LAYOUT
----------------------------------------------- */

/* 2.1 - main form */
form.main { width: 100%; height: 100% }

/* 2.2 - container */
div#container { position: relative; background: white; font-size: 1.1em; width: 715px; margin: 30px auto 0 auto }

/* 2.3 - header */
div#header { position: relative; margin: 0 0 7px 0 }

/* 2.4 - primary content */
div#primary-content { position: relative; clear: both }

/* 2.5 - secondary content */
div#secondary-content { position: relative; clear: both; margin: 8px 0 0 0 }

/* 2.6 - tirtiary content */
div#tirtiary-content { position: relative; clear: both }

/* 2.7 - footer */
div#footer { position: relative }

/* -----------------------------------------------
3. GLOBAL ELEMENTS / CONTROLS
----------------------------------------------- */

/* 3.1 - accessibility */
ul#skiplinks { display: none }
ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden } 
ul#skiplinks a:active, ul#skiplinks a:focus { position: static; width: auto; height: auto }

/* 3.2 - primary navigation */

/* 3.3 - secondary navigation */

/* -----------------------------------------------
4. TEMPLATE/PAGE SPECIFIC
----------------------------------------------- */

/* 4.1 - logo */
div#logo { float: left; width: 231px }
div#logo h1 { background: url(../images/bg-logo.gif) left top no-repeat; width: 231px; height: 108px; font-family: "Times New Roman", Times, serif; font-size: 2.8em; font-weight: bold; color: #fff }
div#logo h1 span.small { font-size:11px!important; font-family:Arial, Helvetica, sans-serif; display: block; font-weight: normal; color: #000; position: absolute; top: 10px; left: 50px }
div#logo h1 span.red { color: #f26422; display: block; position: absolute; top: 13px; left: 35px }
div#logo h1 span.white { display: block; position: absolute; top: 40px; left: 55px; font-weight: normal }
div#logo p { color: #50771a; position: absolute; top: 84px; left: 16px }

/* 4.2 - primary-navigation */
ul#primary-navigation { float: left }
ul#primary-navigation li { float: left; width: 121px; height: 108px }
ul#primary-navigation li.one { background: url(../images/bg-nav-1.gif) left top no-repeat }
ul#primary-navigation li.two { background: url(../images/bg-nav-2.gif) left top no-repeat }
ul#primary-navigation li.three { background: url(../images/bg-nav-3.gif) left top no-repeat }
ul#primary-navigation li.four { background: url(../images/bg-nav-4.gif) left top no-repeat }
ul#primary-navigation li a { height: 18px; width: 121px; text-transform: uppercase; color: #fff; display: block; text-align: center; padding: 80px 0 0 0 }
ul#primary-navigation li a:hover { color: #ffffd8 }

/* 4.3 - dictionary */
div#dictionary-wrapper { width: 207px; background: #efefef; margin: 0 4px; padding: 4px 8px; float: left; font-family:"Times New Roman", Times, serif }
div#dictionary-wrapper dt { float: left; font-weight: bold; padding: 0 5px 0 0; clear: both }
div#dictionary-wrapper dd { margin: 0 0 10px 0 }

/* 4.4 - main content block */
div#main-content-block { float: left; width: 242px; background: top right no-repeat; padding: 10px 230px 10px 10px; border: 1px solid #eaeaea; color: #767676 }
div#main-content-block h2 { color: #f0af37; text-transform: uppercase; font-size: 3em; line-height: 1em }
div#main-content-block h2 span { color: #93bc3c }
div#main-content-block h3 { text-transform: uppercase; font-size: 1.3em; margin: 2px 0 }
div#main-content-block h3 strong { font-weight: bold }
div#main-content-block a { color: #93bc3c; text-transform: uppercase; font-weight: bold; float: right }
div#main-content-block a:hover { text-decoration: underline }
div#main-content-block ul { margin: 0 0 0 10px; list-style: square }
div.test-block { width: 322px!important; padding: 10px 150px 10px 10px!important; height: 252px }

/* 4.4 - main content block price */
div#main-content-block-price { float: left; width: 452px; background: top right no-repeat; padding: 10px 10px 10px 10px; border: 1px solid #eaeaea; color: #767676 }
div#main-content-block-price h2 { color: #f0af37; text-transform: uppercase; font-size: 3em; line-height: 1em; width: 242px }
div#main-content-block-price h2 span { color: #93bc3c }
div#main-content-block-price h3 { text-transform: uppercase; font-size: 1.3em; margin: 2px 0; width: 242px }
div#main-content-block-price h3 strong { font-weight: bold }
div#main-content-block-price p { width: 242px }
div#main-content-block-price a { color: #93bc3c; text-transform: uppercase; font-weight: bold; float: right }
div#main-content-block-price a:hover { text-decoration: underline }
div#main-content-block-price ul { margin: 10px 0 0 10px; list-style: square }
div#main-content-block-price ul li { margin: 0 0 6px 0 }
div.test-block { width: 322px!important; padding: 10px 150px 10px 10px!important; height: 252px }

/* 4.5 - footer */
div#footer { background: #e8e8e8; border-bottom: 5px solid #dbdbdb; padding: 10px; margin: 7px 0 0 0; clear: both }
div#footer ul { float: right }
div#footer ul li { float: left }
div#footer ul li a { color: #999; border-right: 1px solid #999; padding: 0 15px }
div#footer ul li a:hover { text-decoration: underline }
div#footer ul li.last a { border-right: 0 none; padding: 0 5px 0 15px }
div#footer p { color: #999; float: left }

/* 4.6 - single-col */
div.single-col { width: 231px; float: left }

/* 4.7 - double-col */
div.double-col { width: 482px; float: left; margin: 0 0 0 2px }

/* 4.8 - links */
div#links-content-block { margin: 0 4px; border: 1px solid #eaeaea }
div#links-content-block h2 { background:  url(../images/icn-links.gif) 7px 5px no-repeat #e1ac06; color: #fff; text-transform: uppercase; font-weight: bold; padding: 7px 0 4px 28px; margin: 3px }
div#links-content-block ul { margin: 8px 9px }
div#links-content-block ul li { padding: 0 0 2px 0 }
div#links-content-block ul li a { color: #575757; text-decoration: underline; background: url(../images/icn-links-arrows.gif) left 6px no-repeat; padding: 0 0 0 14px }

/* 4.9 - testimonials */
div#testimonials-content-block { margin: 0 4px 8px 4px; border: 1px solid #eaeaea; position: relative }
div#testimonials-content-block h2 { background:  url(../images/icn-testimonials.gif) 10px 7px no-repeat #93bc3c; color: #fff; text-transform: uppercase; font-weight: bold; padding: 7px 0 4px 28px; margin: 3px }
div#testimonials-content-block img { float: left; margin: 0 0 0 4px }
div#testimonials-content-block img.diethead { position: absolute; top: 3px; right: 3px }
div#testimonials-content-block p.quote { margin: 20px 5px 5px 92px; color: #777}
div#testimonials-content-block p.strap { margin: 10px 5px 5px 92px; color: #000}
div#testimonials-content-block a { float: right; margin: 0 10px 0 0; font-weight: bold }

/* 4.9 - goals */
div#goals-content-block { margin: 0 4px 8px 4px; border: 1px solid #eaeaea; position: relative }
div#goals-content-block h2 { background:  url(../images/icn-testimonials.gif) 10px 7px no-repeat #fe0000; color: #fff; text-transform: uppercase; font-weight: bold; padding: 7px 0 4px 28px; margin: 3px }
div#goals-content-block img { float: left; margin: 0 0 0 4px }
div#goals-content-block h3 { color: #5883ad; margin: 10px 0 -10px 10px; font-weight: bold }
div#goals-content-block p { margin: 10px 10px 10px 10px }
div#goals-content-block p.last { font-weight: bold; font-style: italic }
div#goals-content-block p a { font-weight: bold; background:url(../images/icn-links-arrows.gif) no-repeat left 5px; padding: 0 0 0 11px; font-weight: normal; color: #575757; text-decoration: underline; display: block; float: right; margin: 0 0 10px 0 }

/* 4.9 - goals */
div#joining-content-block { margin: 0 4px 8px 4px; border: 1px solid #eaeaea; position: relative }
div#joining-content-block h2 { background:  url(../images/icn-testimonials.gif) 10px 7px no-repeat #93bc3c; color: #fff; text-transform: uppercase; font-weight: bold; padding: 7px 0 4px 28px; margin: 3px }
div#joining-content-block img { float: left; margin: 0 0 0 4px }
div#joining-content-block h3 { color: #5883ad; margin: 10px 0 -10px 10px; font-weight: bold }
div#joining-content-block p { margin: 10px 10px 10px 10px }
div#joining-content-block p.last { margin-left: 95px }
div#joining-content-block p a { font-weight: bold; background:url(../images/icn-links-arrows.gif) no-repeat left 5px; padding: 0 0 0 11px; font-weight: normal; color: #575757; text-decoration: underline; display: block; float: right; margin: 7px 0 10px 0 }

/* 4.9 - forum content block */
div.forum-content-block { margin: 0 4px 8px 4px; border: 1px solid #eaeaea; position: relative }
div.forum-content-block h2 { background:  url(../images/icn-arrow.gif) 10px 9px no-repeat #e2ab08; color: #fff; text-transform: uppercase; font-weight: bold; padding: 7px 0 4px 28px; margin: 3px }
div.forum-content-block h3 { color: #5883ad; margin: 10px 0 -10px 10px; font-weight: bold }
div.forum-content-block p { margin: 10px 10px 10px 10px }
div.forum-content-block p a { font-weight: bold; background:url(../images/icn-links-arrows.gif) no-repeat left 5px; padding: 0 0 0 11px; font-weight: normal; color: #575757; text-decoration: underline; display: block; float: right; margin: 0 0 10px 0 }

/* 4.10 - wide home advert block */
div#wide-banner-home { background: right top no-repeat #eff2f7; padding: 9px }
div#wide-banner-home h2 { color: #ecb302; text-transform: uppercase; font-size: 2em; font-weight: bold; float: left; margin: 0 10px 0 0 }
div#wide-banner-home h3 { color: #6781ba; font-weight: bold; text-transform: uppercase; font-size: 1.1em; padding: 10px 0 0 0 }
div#wide-banner-home p { clear: both; padding: 0 150px 0 0; margin: 0 }
div#wide-banner-home a { font-weight: normal; color: #89ac10; text-decoration: underline }

/* 4.11 - newsletter archives */
div#newsletter-archives { width: 219px; float: left; padding: 10px 10px 10px 12px }
div#newsletter-archives h3 { color: #7fa52b; text-transform: uppercase; font-weight: bold; font-size: 1.1em }
div#newsletter-archives dl { clear: both; border-bottom: 1px dotted black; padding: 0 0 10px 0; margin: 10px 0 0 0 }
div#newsletter-archives dl.last { border-bottom: 0 none }
div#newsletter-archives dt { float: left; margin: 0 10px 0 0 }
div#newsletter-archives dd { color: #6f6f6f }
div#newsletter-archives dd a { font-weight: bold; color: #6781ba }

/* 4.12 - small banner home */
div.small-banner-home { float: right; width: 205px; height: 55px; margin: 10px 0 0 0; padding: 10px }
div.small-banner-home h3 { color: #fff; font-size: 1.4em; font-weight: bold; line-height: 1em }
div.small-banner-home input.textbox { width: 130px }
div.small-banner-home input { font-size: 10px }
p.green-text-box { color: #496904; width: 140px; font-size: .90em; float: right }
p.green-text-box a { color: #fff; text-decoration: underline }

/* 4.12 - large banner home */
div.large-banner-home { float: right; width: 205px; height: 160px; margin: 10px 0 0 0; padding: 10px; background-color: #e1ac06!important }
div.large-banner-home h3 { color: #fff; font-size: 1.4em; font-weight: bold; line-height: 1em }
div.large-banner-home input.textbox { width: 130px }
div.large-banner-home input { font-size: 10px }

/* 4.13 - coach block */
div#coach-block { padding: 10px }
div#coach-block h2 { color: #7fa52b; font-size: 1.1em; font-weight: bold; text-transform: uppercase; margin: 0 0 4px 6px }
div#coach-block img { float: left; border: 2px solid #ecf0ef }
div#coach-block p { margin: 0 0 0 122px }

/* 4.14 - course */
div.course { margin: 0 border: 1px solid #eaeaea; position: relative }
div.course h3 { color: #7fa72d!important; margin: 10px 0 0 10px!important; font-weight: bold!important; font-size: 1.1em }
div.course p { margin: 10px 10px 10px 10px }
div.course p a { font-weight: bold; background:url(../images/icn-links-arrows.gif) no-repeat left 5px; padding: 0 0 0 11px; font-weight: normal; color: #575757; text-decoration: underline; display: block; float: right; margin: 0 0 10px 0 }
div.course img { float: left; margin: 0 10px 0 0 }
div.course h3.last { clear: both; padding-top: 10px; color: #5883ad!important; font-size: 1em }
div.course ul { list-style: circle; margin: 5px 0 0 25px; padding: 0 10px 0 0 }
div.course ul li { padding: 0 0 3px 0 }

/* 4.15 - contact */
div.contact { padding: 6px 10px; width: 205px!important }
div.contact h2 { color: #7ea62b; text-transform: uppercase; font-weight: bold; font-size: 1.1em }
div.contact h3 { color: #5883ae; font-weight: bold; margin: 8px 0 0 0 } 
div.contact img { float: left; margin: 8px 8px 0 0 }
div.contact a { font-weight: bold; text-decoration: underline; color: #000 }

/* 4.16 - test-bottom-block */
div.test-bottom-block { padding: 5px 15px 5px 15px!important }
div.test-bottom-block h3 { color: #7ea62b; font-weight: bold; text-transform: uppercase }
div.test-bottom-block p { margin: 0 0 13px 0 }
div.test-bottom-block p span { margin: 0 0 0 15px; font-weight: bold; color: #5383b1 }

/* -----------------------------------------------
5. USEFUL CLASSES
----------------------------------------------- */

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } /* Non IE clearfix */
.clr { overflow: hidden; clear: both; height: 1px; margin-top: -1px }
.la { text-align: left }
.ra { text-align: right }
.ca { text-align: center }
.fl { float: left }
.fr { float: right }
.vt { vertical-align: top }
.vm { vertical-align: middle }
.vb { vertical-align: bottom }