/* remember baseline *//* !INFO */
/*
*************************************************



VEGA ASSOCIATION OF GREAT BRITAIN	
General Screen Styles



Created by Abu von Bondvillain
http://www.clearstyle.uk.com



*************************************************
*/



/* !NOTES */
/* vertical rhythm
h1=14px  -  font-size = 14/12 = 1.167em - and to maintain line-height at 18px - line-height = 18/14 = 1.286em
68.75% x 16px (default) = 11px; 1.5 x 11 = 16.5px
images -- remember baseline */

/* Reduced size type with incremental leading
(http://www.markboulton.co.uk/journal/comments/incremental_leading/)

This could be used for side notes. For smaller type, you don't necessarily want to follow the 1.5x vertical rhythm -- the line-height is too much. 
   
Using this class, it reduces your font size and line-height so that for every four lines of normal sized type, there is five lines of the sidenote. eg:

New type size in em's: 10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
New line-height value:
     12px x 1.5 = 18px (old line-height)
     18px x 4 = 72px 
     72px / 5 = 14.4px (new line height)
     14.4px / 10px = 1.44 (new line height in em's)
     
Still 1.5 x normal font size as baseline */

/* stylesheet organisation / Style Guide
http://www.viget.com/inspire/organizing-your-stylesheet-using-css-edit/

my take:
1. info, notes, palette comments
2. meyer reset
3. general selectors
	* canvas colour
	* set vertical rhythym
	* set default fonts
	* text elements - a, p, ol, ul, etc...
	* forms
	* tables
	* images
4. universal classes
	* utility classes: .alt, .mir, .incr (incremental leading)
	* text classes: .foreign, .and, ...
5. universal layout
	* 2-column layout?
	* 3-columns with header and footer?
	* etc...
6. static layout
	* logo
	* footer styling
	* sidebar styling
	* general content styling
7. page-specific styling
	* items that only appear non-generally
	* if you need to modify an existing style just for one or a few pages, stick a unique ID high up (body tag is usually good) and toss your overrides at the end of the document.
	* odds and ends */


/* !PALETTE */
/*
grey blue:	#8598B5
light blue:	#ADBACD
border blue:#A1ADBE
title blue:	#5A657C
*/





/* !RESET */
/* -------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
	
:focus { outline: 0; } /* remember to define focus styles! */
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }





/* !GENERAL SELECTORS */
/* -------------------------------------------------------------*/

/* canvas colour */
html, body { background-color: #8998b3; }


/* vertical rhythm */
body { font-size: 68.75%; line-height: 1.5em; }
html>body { font-size: 11px; }


/* default fonts */
body { font-family: Geneva, "Lucida Grande", Verdana, Arial, sans-serif; color: #333; }
h1, h2, h3,
h4, h5, h6 { font-family: Georgia, Palatino, "Times New Roman", serif; }


/* headings */
h1, h2, h3, h4, h5, h6 { text-transform: lowercase; padding: 0 10px; }
h1 { font-size: 24px; line-height: 33px; color: #5A657C; text-transform: capitalize; text-align: center; }
h2 { font-size: 20px; line-height: 1.1em; letter-spacing: 1px; color: #5A657C; margin-bottom: 1.5em; }
h3 { font-size: 1.818em; line-height: 1.65em; }
h4 { font-size: 1.273em; line-height: 1.179em; letter-spacing: 1px; }


/* text elements */
p { text-align: justify; margin-bottom: 1.5em; padding: 0 10px; }

a { text-decoration: none; font-weight: bold; }
a:link, a:visited { color: #c30; }
a:hover { color: #e0861e; }
a:active { color: #95a580; }

ul, ol { margin-bottom: 1.5em; list-style-position: inside; padding: 0 10px; }
ul { list-style-image: url(../images/V.gif); }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }

blockquote { margin: 0 0 1.5em 1.5em; font-style: italic; }

address span { display: block; text-align: center; }

strong { font-weight: bold; }
em { font-style: italic; }

acronym { font-weight: normal; font-style: normal; border-bottom: 1px dotted #000; }

pre { font-size: xx-small; margin-bottom: 1.5em; background: #eee; border: 1px solid #ddd; padding: 1.5em; }

address { font: 10px/15px Verdana, Lucida, Arial, sans-serif; }

table { padding: 0 5px; width: 100%; margin-bottom: 3em; }
th { padding: 0 5px; font-weight: bold; border-bottom: 1px solid black; border-top: 1px solid black; } 
td { padding: 5px; border-bottom: 1px solid black; }
caption { padding: 10px; font-weight: bold; text-align: center; }


/* images */
img { margin: 0 0 1.5em 0; border: 1px solid #A1ADBE; padding: 2px; } li>img { margin: 1.5em 0; }





/* !GENERAL CLASSES */
/* -------------------------------------------------------------*/

.alt { display: none; }
.container { position: relative; padding: 0; margin: 0 auto; text-align: left; }
.foreign, .boatname { font-style: italic; }
.tagline { text-align: center; font: italic 14px "Century Gothic", Lucida, Verdana, sans-serif; }
.banner { background: #8598b5; margin: 10px; border: 4px solid #565d68; }
.banner p {
	color: #FFF;
	padding: 0 10px;
	text-transform: uppercase;
	}
.banner h3 {
	text-transform: capitalize;
	font-size: 14px;
	padding-bottom: 0;
	}
	



/* image replacement */
.mir { letter-spacing: -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/ html>body .mir { letter-spacing: normal; text-indent: -9999em; overflow: hidden; }
/* End of hack */

/* incremental leading */
p.incr, .incr p { font-size: 10px; line-height: 1.44em; margin-bottom: 18px; }





/* !STRUCTURE */
/* -------------------------------------------------------------*/

#wrapper { width: 830px; border-left: 2px solid #A1ADBE; background: #FFF url(../images/shadow.gif) repeat-y; }
#logo { width: 800px; height: 100px; border: 10px solid #FFF; background-image: url(../images/logo.jpg); }
#mainstage { width: 800px; position: relative; margin-left: 10px; background: url(../images/fauxcols.jpg) repeat-y; }
#content { width: 100%; float: left; margin-right: -306px; }
#main-content { margin-right: 316px; }
#sidebar { width: 306px; float: right; }
#footer { width: 800px; height: 100px; clear: both; border-top: 10px solid #FFF; border-bottom: 10px solid #FFF; background: url(../images/footer.jpg) #8598B5; }



/* !SIDEBAR */
/* -------------------------------------------------------------*/


#sidebar h3.linkheader { width: 286px; height: 20px;
	font-size: 12px;
	color: #FFF;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
	text-transform: uppercase;
	text-indent: 10px;
	background-color: #8598b5;
	color: #FFF;
	margin: 10px 0 0 10px;
	padding: 2px 0 0 0;
}

#sidebar li {
	list-style-image: none;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 12px;
	color: #888;
	text-align: left;
	text-transform: uppercase;
	margin-left: 10px;
}

#sidebar li a { color: #565d68; font-weight: normal; }
#sidebar li a:hover { color: #FFF; }


#sidebar li:first-child {
	margin-top: 5px;
}

#sidebar form { padding: 10px 20px; }