/*
-------------------------------------------------
URI: http://www.finchleymusic.com/
Created by Finchley Music
-------------------------------------------------

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 { height: 100%; text-align: center; min-width: 775px }
ul { list-style: disc outside }
ol { list-style: decimal inside }

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

html { font-size: 50%; font-family: arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height: 1.8em; color: #fff }
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 1.1em; font-family: monaco, "Lucida Console", courier, mono-space }
h1 { font-size: 1.6em; color: #fff; margin: 10px 5px 12px 0px; padding: 0px; }
h2 { font-size: 1.3em; color: #fff; margin: 5 0 12px 0; padding: 5px; }
h3 { font-size: 1.2em; color: #fff; margin: 0 0 12px 0; padding: 5px; }
h4 { font-size: 1.1em; color: #fff; margin: 0 0 12px 0; padding: 5px; }
p {  font-size: 1.1em; color: #fff; margin: 0 20px 0 0; padding: 5px; }
a { font-size: 1.1em; font-weight:bold; color: #6DB4F2 }
a:hover { color: #fff }
a:visited { color: #6DB4F2 }
a:active { color: #6DB4F2 }
ul { margin: 5px 5px 15px 5px; font-size: 1.3em }
ol { margin: 10px 0 12px 0; font-size: 1.1em }
dl { margin: 10px 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 }

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

/* 2.4 - wrapper */
div#wrapper { float: left; width: 100% }

/* 2.5 - primary content */
div#primary-content { position: relative }

/* 2.6 - secondary content */
div#secondary-content { float: left; position: relative; margin-left:-100% }

/* 2.7 - tertiary content */
div#tertiary-content { float: left; position: relative }

/* 2.8 - secondary and tertiary content widths */

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

	/* 2.8.2 - secondary content width */
	div#primary-content { margin-right: 429px }
	div#secondary-content { width: 150px; margin-left: -193px }
	
	/* 2.8.3 - tertiary content width */
	div#tertiary-content { width: 180px; margin-left: -417px }

/* 2.9 - footer */
div#footer { position: relative; clear: left }

/* -----------------------------------------------
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: 2px; clear: both; visibility: hidden }
.clr { overflow: hidden; clear: both; height: 1px; margin-top: 2px }
.la { text-align: left }
.ra { text-align: right }
.ca { text-align: center }
.headline { text-align: left; font-size: 100%; font-family: arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height: 1.4 em; color: #fff }
.date {font-size: 1em; color: #000000; margin: 0 10px -10px 0; padding: 2px; text-align: left;   font-size: 0.1%; font-family: arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height: 0.8 em; color: #fff }
.fl { float: left }
.fr { float: right }
.vt { vertical-align: top }
.vm { vertical-align: middle }
.vb { vertical-align: bottom }
.nb { border: 0 none }