/* www.FORMandFUNCTION.com 'style-o-base' © Jonathan Gibson 2009  */
/*  browser reconciliation + misc cascade origins */
/* basic building blocks; grid, font adjustments, margins + padding, alignment rules */

/*  Inspiration for this design lies in several small conciets...
    Logic & layout is ordered on classic greek Doric temple and mythology.
    Orientation of code + context are imagined by standing on the Acropolis 
    looking North to the Parthenon, ie: '.east' is right half of an element.
    Post and Lintel construction is fundamental to human design. Archetypes embodied 
    in ancient egypt to ionic caryatids run right through how we order data 'columns' 
    today; in simple memos, or complex publications, we expect a 'head' 'body' + 'foot'.
    Proportions and sizes for this site generally use the timeless Golden Rule {of Thirds} 
    modernized via Rennaissance era Fibonacci sequences and coaxed into the XXIst 
    through pixelated binary display filters.
    Take all that + remix w/design codes of constructivist artist Piet Mondrian makes
    an orderly dynamic layout expandable for richer content with the élan of an iPhone.    */

/* SET BASIC STYLES */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,big,small,pre,form,code,kbd,samp,tt,fieldset,p,blockquote,dfn,cite,q,address,th,td,input,select {
	line-height: 2em;
}	/* Establishing baseline FnF standard 10x10 x2 [visually 10px, actual/logically 20px] vertical grid */

/* Text Formats  */
html body, body {
	font-size: 62.5%;  /* aligns default 16pt browser font into 1em=10pixels / using %'s fixes IE scaling bug */
	font-family: 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-weight: lighter; 
	height: 100%;
	width: 100%;
}	/*  Setting size as '1 em' fixes IE scaling bug. Using '%' makes user-defined text changes snap to predictable steps via local browser prefs/presets */ 
	
/* IE 4-6 Windows escape hatch for IE6 */
* html body {  
	font-size: medium; 
	font-size: small; 
	font-weight: lighter; 
}	/* Font-SIZE scales older Internet Explorer's default font into 'normal' range. */

html>body {
	line-height: 20px; 
} 	/* resets vertical grid with call ignored by IE6, used by all others */ 

html {
	overflow: hidden; 
} /* Furthers application conciet by moving scrollbars from page to browser window when needed */

img {
	border: 0;
	border: none; 
	clear: both;
	margin-bottom: 10px; 
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
	max-width: 100%; 

} 	/* stops big images breaking layout in browsers supporting max-width */
	/* margin-top/bottom makes sure all objects respect 20px grid */
* html img {
		background: transparent;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='' sizingMethod='crop');
	} /* fix for IE6 and PNG files */

/* PRIMARY BUILDING BLOCKS */
hr {
	border: 0;
	border-top: 1px #ccc solid;
	margin: 10px 0;
}

th,input,select {
	background-color: silver;
	color: #405060 ; 
}
td, input, select {
	font-size: x-small; 
	font-family: sans-serif; 
	letter-spacing: .001em;
	text-align: center; 
	line-height: 1em; 
}

/*  STYLE Errata, Paragraph Layout  */
p, ol { 
	letter-spacing: .05em; 
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 5px; 
	padding-right: 5px; 
/*	letter-spacing: .125em; */
/*	margin-bottom: 20px; */
} /*  default 20px margin-bottom after paragraphs forces design grid */

p {
	line-height: 2em; 
} /* grid, grid, grid... er, Vertical Grid, VG, vg... */

p {
	color: lightgray; 
	font-size: small; 
	text-align:left; 
	margin-bottom: 40px;
	padding-bottom: 20px;
} 

p acronym abbr {
	border-bottom: slategray 1px dotted;  /* visual style breaks grid */
	color: gainsboro;
	cursor: help;
	line-height: 20px; /* aligns style back to grid */
	text-shadow: slategray 0px 0px 0px; 
} /* slight visual emphasis indicates more data such as descriptive info for visualy impaired devices */

p:first-line {
	color: gainsboro; 
}


/* STYLE ADAPTION  */
em		{ 
	font-style: italic; 
}
strong	{ 
	font-weight: bold; 
}
b {
	font-weight: bold; 
}

.italics-fixed {
	font: inherit;
	text-align: justify; 
	font-style: italic; 
}

h1 {
	color: silver;
	font-size: x-large; 
	font: 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-weight: bolder;
	letter-spacing: .25em;
	margin: 0 0 0 0; 
	text-align: left;
	text-shadow: dimgray 0 0 0;
	width: 100%;
	word-spacing: -.0125em;
}	/* masthead message */

h1:first-letter {
	font: inherit;
	font-size: 1.25em;
	font-weight: lighter;
}

h2 { 
	color: silver; 
	font: 1.5em, 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-size: medium; 
	font-weight: normal;
	line-height: 15px;
	letter-spacing: .25em; 
	margin: 0 0 0 0; 
	text-align: center; 
	width: 80%; 
}

h3 { 
	color: ghostwhite; 
	font: 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-size: medium;
	font-weight: lighter;
	text-align: center; 
	letter-spacing: -.012em; 
	line-height: 20px;
	margin: 0px 0px 0px 0px; 
} 

h4 {
	background-color: #404040;
	background-color: transparent;
	background: url('../art/coolwet.jpg') repeat; 
	border-bottom: dimgray solid 1px; /* breaks 20px design grid...  */
	color: gainsboro;
	font-size: small;
	font-size: .5em; 
	font-weight: bolder;
	line-height: 19px; /* ...grid reconciled */
	margin-bottom: 0;
	margin-top: 0;
	padding-top: 0;
	text-align: center;

} /* topic tag-line for bottom of Pennant */

h5 {
	background: transparent;
	border-style: none;
	color: #202030;
	display: block; 
	font-size: x-small;
	font-weight: normal;
	line-height: 10px;
	margin:0 0 0 0;
	padding-top: 1em;
	text-align: center;
	font-variant: small-caps;
	z-index: 200;
} 

h5:first-letter {
	font-size: 1.25em;
	font-weight:lighter;
	line-height: 20px;
}

h6 {
	background: transparent;
/*	background-color: #404040;
	background-color: opaque;                                  */
	font: .8em, 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-weight: lighter;
	font-size: small;
	font-stretch: ultra-expanded;
	font-variant: small-caps;

	line-height: 40px; 
	margin-bottom: 10px;
	text-align: center;

} /*  'Topic' navigation display */


/* List formatting*/
ul li {
	color: gainsboro; 
	display: block; 
	font-family: 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-size: small; 
	font-weight: lighter;
	line-height: 20px; 
	list-style-position: outside;
	list-style-type: none;  
	margin: 0 0 0 0; 
	padding: 0 .5em 0 1em;
	text-align: left;
	/* NOTE constrain...  width: 54px;  /* ...270px min. usable iPhone width ÷ 5 topics */
}

ul li helmsman {
	text-indent: 0;
}
ul {
	margin-top: 0; 
}  /* de-formats auto-styling of some browsers for <li> navigation container */

dl {
	color: gainsboro; 
	display: inline; 
	first-letter: clear; 
	font-family: sans-serif; 
	font-size: small; 
	font-variant: small-caps; 
	letter-spacing: .1em; 
	list-style-type: none; 
	line-height: 20px; 
	margin: 0px 0px 0px 0px; 
	text-align: left; 
	text-indent: -.5em;
}

/* NAMING CONVENTIONS
	. [periods] precede Class Selector names
	# [pound] precedes ID Selector names

  */




/* All Rights Reserved - All Wrongs Revenged  */