/* www.FORMandFUNCTION.com 'format and styling' © Jonathan Gibson 2009  */
/*  forms styling : inputs and buttons, focus/selection/links, actions */

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

/* Linkages and Interactivity FX */
* html a {
	border-style: hidden; 
	border-width: 0px; 
	b\order-style: visible; 
	b\order-width: 1px; 
} /* Hides annoying visual 'focus' where some browsers place outlines on top of href'd TXT + IMGs.  Backslash-hack feeds IE5+IE6 */

a {
	background: none; 
	border-bottom: cadetblue solid 1px;
	color: cyan; 
	cursor: pointer;
	font-weight: bold;
	/* min-width: 120%; */
	text-decoration: none;	
	text-shadow: steelblue 0px 0px 0px;
	outline: none;
}

a.ul {
	cursor: pointer;
	display: inline;
	float: left;
	list-style-type: none;
	line-height: 40px;
	font:inherit;
}

* html a:visited {
	border-bottom: salmon 1px solid;
	border-style: hidden; 
	border-width: 0; 
	cursor: pointer;
	outline: none;
} 

a:visited {
	color: whitesmoke;
	cursor: pointer;
	background: none;
	border-bottom: cadetblue 1px dotted;
	font-weight: bold;
	min-width: 150%;
	outline: none;
	text-decoration: none;
}

* html a:active {
 	background: transparent; 
	b\ackground: opaque;
	border-style: hidden; 
	b\order-style: visible; 
	border-width: 0px; 
	b\order-width: 1px; 
	cursor: pointer;
} /* Hides automatic 'focus' of some browsers  */
/* 2nd line passes newer rule to IE6/IE5Mac */

a:active {
	cursor: pointer;
	text-decoration: none;
}	
	

a:hover {
	background-color: steelblue;
	border-bottom: dodgerblue 1px solid;
	color: whitesmoke;
	cursor: pointer;
	display: inline;
	height: 100%;
	min-width: 150%;
	text-shadow: midnightblue 0px 0px 1px;
}

* html a:hover {	
	border-style: hidden; 
	border-width: 0px; 
	b\ackground: opaque; 
	b\ackground-color: steelblue; 
	b\order-style: visible;
	b\order-width: 1px;
	b\order-bottom: dodgerblue 1px solid;
	cursor: pointer;
} /* hide visual pixel debris caused by certain browser focus */


/*  Menu as Unordered List  */
.navigator {
	height: 38px; /* 20px grid reconciled w/border geometry */
	list-style: none; 
	margin: 0; 
	padding: 0 0 0 0; 
	position: relative; 
	text-align: center;
	}
.navigator li {
	float: left;
}
.navigator li a {
	color: dodgerblue; 
	cursor: pointer;
	display: block; 
	float: left; 
	font-family: 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif;
	font-size: 13px; 
	font-weight: bold;
	height: 38px;
	line-height: 38px;
	padding: 0 0 0 10px;
	text-decoration: none; 
	text-align: center;
}
#helmsman ul {
	border: none;
	cursor:pointer;
	display:block;
	display: table; 
	height: 38px; 
	font-family:'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif;
	font-size: x-small; 
	font-variant: small-caps; 
	float: left;
	list-style: none; 
	margin: 0 auto; 
	padding: 0; 
	position: relative; 
	text-align: justify; 
	white-space: nowrap; 
}

#helmsman li {
	border: none;
	display: table-cell; 
	font-family: inherit;
	margin: 0; 
	padding: 0 10px 0 10px;
	text-align: center; 
	text-indent: -0.5em;
}
#helmsman li a {
	background: url(../art/controls/btn_menu_west.gif) no-repeat;
	color: maroon; 
	cursor: pointer; 
	display: block; 
	float: left; 
	font-weight: bold; 
	height: 38px; 
	line-height: 38px; 
	l\ine-height: 38px; /* feeds Firefox and IE ... for 'em' sizes*/
	text-decoration: none; 
	text-align: center; 
	padding: 0 0 0 -0.5em; /* offset left side of right-hand bgd img */
}
#helmsman li a b {
	background: url(../art/controls/btn_menu_east.gif) no-repeat right top;
	display: block; 
	float: left; 
	padding: 0 15px 0px 10px; /* adjusts btn text whitespace */
}
#helmsman li.present a {
	background:url(../art/controls/btn_present_west.gif) no-repeat;
	color: whitesmoke; 
}   /* visual indicator of current topic displayed */
#helmsman li.present a b {
	background: url(../art/controls/btn_present_east.gif) no-repeat right top;
}
#helmsman li a:hover {
	background: url(../art/controls/btn_hover_west.gif) no-repeat;
	color: mistyrose; 
}
#helmsman li a:hover b {
	background: url(../art/controls/btn_hover_east.gif) no-repeat right top;
}
#helmsman li.present a:hover {
	color: white; 
	background: url(../art/controls/btn_present_west.gif) no-repeat; cursor:pointer;
	text-shadow: rgba(0,0,0,0.01) 0 0 3px;
}
#helmsman li.present a:hover b {
	background: url(../art/controls/btn_present_east.gif) no-repeat right top;
}




/* All Rights Reserved - All Wrongs Revenged  */