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

CONTENTS

1: SITE MASTER SETUP (including reset from Tripoli)

2: TYPOGRAPHY/DESIGN (to be plugged in from designer-sheet

3: LAYOUT
	3.1 main form
	3.2 container
	3.3 header
	3.4 primary content
	3.5 secondary content
	3.6 tertiary content
	3.7 secondary and tertiary content widths
		3.7.1 fixed container size
		3.7.2 secondary content size
		3.7.3 tertiary content size
	3.8 footer
	
4: GLOBAL ELEMENTS / CONTROLS
	4.1 accessibility
	
5: TEMPLATE / PAGE SPECIFIC
	
6: USEFUL CLASSES

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

/* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */
* { margin: 0; padding: 0; text-decoration: none; outline: none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none } table { border-collapse: collapse; border-spacing: 0 } caption, th, td, center { text-align: left; vertical-align: top } q { quotes: "" "" } font { color: inherit !important; font: inherit !important; color: inherit !important } marquee { overflow: inherit !important; /*-moz-binding: none*/ } blink { text-decoration: none } nobr { white-space: normal }
/* end of import */
body { text-align: center; min-width: 775px; }
ul { list-style: disc outside }
ol { list-style: decimal outside }

/* This forces a vertical scrollbar to prevent horizontal page jumping in Firefox between those with and those without */
html, body { height: 100%; margin-bottom: 1px; padding: 0 }

/* -----------------------------------------------
2. TYPOGRAPHY / DESIGN
----------------------------------------------- */

html { font-size: 62.5%; font-family: Verdana, Arial, Helvetica, sans-serif ; line-height: 1.4em; color: #000 }
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 1.1em; font-family: Verdana, Arial, Helvetica, sans-serif }
h1 { font-size: 2.5em; color: #6100D9; margin: 0 0 12px 0; padding: 15px; }
h2 { font-size: 2.3em; color: #000000; margin: 0 0 12px 0; padding: 5px; }
h3 { font-size: 2.3em; color: #000000; margin: 0 0 12px 0; padding: 0px; }
h4 { font-size: 1.8em; color: #565252; text-decoration: underline; margin: 12px 0 12px 0; padding: 0px; }
h5 { font-size: 1.2em; color: #000; margin: 0 0 12px 0; padding: 0px; }
h6 { font-size: 1.1em; color: #6100D9; margin: 0 0 12px 0; padding: 5px; }
p {  font-size: 1.2em; color: #000; margin: 0 0 12px 0; padding: 0 ;  }
p.content { font-size: 1.3em; color: #000000; margin: 0 0 12px 0; padding: 0px; line-height: 120% }
p.success { font-size: 1.5em; color: #000000; margin: 80px 0 12px 0; padding: 0px; line-height: 120% }	
table.one { table-layout: fixed;  font-size: 1.3em; color: #000000; padding: 5px 5px 5px 5px; margin-bottom: 80px;}

a { font-weight: bold;  }
a:hover { color: red }
a:visited { color: #800000 }
a:active { color: #FD8D8D  }
ul { margin: 0 0 12px 0; font-size: 1.1em }


ol { margin: 0 0 12px 0; font-size: 1.1em }
dl { margin: 0 0 12px 0; font-size: 1.1em }
hr { display: block; background: #aaa; color: #aaa; width: 100%; height: 1px; border: none }
address { font-size: 1.1em; color: #000 }
blockqoute {  }
table { border-top: 1px solid #ccc border-left: 1px solid #ccc }
th, td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc }
fieldset { border: 1px solid #ccc; }
legend { background: #fff; }
label { font-size: 1.1em }
textarea, input[type='text'], select { border: 1px solid #000; background: #fff; font-size: 11px; color: #000 }

div#logo{  float: left; margin: 0 0 40px -15px}
div#gallery{  float: right; border: 1px  solid #000000; margin: 0 0 20px 20px}
#gallery img {display: inline; float: left; }
div#thumbnail {   border: 1px  solid #000000; }
div#form { margin-top: 40px }


/* navigation list */
#navigation { /*border: 1px black solid;*/ margin-left: 5px; }
#navigation li { list-style: none; padding-bottom: 6px; }
#navigation a { font-size: 1.3em; }

/* -----------------------------------------------
3. LAYOUT
----------------------------------------------- */

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

/* 2.2 - container */
div#container { margin: 0 auto; position: relative; text-align: left }

/* 2.3 - header */
div#header { position: relative; height: 50px; text-align: center; background: #C0C0C0; margin: 10px 0px 15px 0px}

/* 2.4 - wrapper */
div#wrapper {  }

/* 2.5 - primary content */
div#primary-content { position: relative; float: right; background: #FFFFFF; }

/* 2.6 - secondary content */
div#secondary-content { float: left; position: relative; background: #FFFFFF; }

/* 2.7 - tertiary content */
div#tertiary-content { float: right; position: relative; background: #FFFFFF; }

/* 2.8 - secondary and tertiary content widths */

	/* 2.8.1 - container width */
	div#container { width: 700px }

	/* 2.8.2 - secondary content width */
	div#primary-content { width: 535px }
	div#secondary-content { width: 165px }
	
	/* 2.8.3 - teriary content width */
	div#tertiary-content { width: 535px }
	
/* 2.9 - footer */
div#footer { clear: both; position: relative; text-align: center; background: #C0C0C0; }

div.thumbnails { margin-bottom: 10px }

/* -----------------------------------------------
4. 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 }

/* -----------------------------------------------
5. TEMPLATE/PAGE SPECIFIC
----------------------------------------------- */


/* -----------------------------------------------
6. USEFUL CLASSES
----------------------------------------------- */

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
.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 }
.nb { border: 0 none }