/* www.FORMandFUNCTION.com 'graphical massing' © Jonathan Gibson 2009  */

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

/*  FOUNDATION */
html body, body {
	color: silver;
	background-attachment: fixed;
	background-color: #707080;
	background-repeat: repeat;
	background: url('../art/coolwet.jpg');
	foreground-color: gainsboro;
	height: 100%;
	overflow: hidden;
	width: 100%;
	z-index: 0;
}

body {
	background: transparent; 
	background: url('../art/edge.gif') no-repeat 0 100%;
	background-attachment: fixed; 
	background-position: bottom left;
	position: fixed;
	z-index: 1; 
}

/* STRUCTURE: DIVide and Rules, Pinned Graphics */
#entablature {
	background-attachment: fixed; 
	background: url('../art/entablature_fill.gif') repeat-x left top;
	height: 100px;
	left: 0px; 
	line-height: 120px;
	margin: 0 0 0 0; 
	overflow: hidden; 
	padding: 0 0 0 0; 
	position: absolute; 
	text-indent: 180px; 
	top: 0px; 
	width: 1280px; 
	z-index: 200;
}	/* header structure */

#entablature h1 {
	font-size: xx-large;
	font-variant: small-caps;
	font-weight: normal;
	letter-spacing: -.05em;
	line-height: 80px;
	word-spacing: -.05em;
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	padding: 0 0 0 0;
	text-align: center;
	text-indent: 165px;
	text-shadow: dimgray 0px 0px 60px;
	width: 480px;
}

#entablature h1:first-letter {
	font: inherit;
	font-size: 1.25em;
}

.header {
	background-color: darkslateblue; /* alt clrs: MediumSlateBlue CadetBlue CornflowerBlue LightSteelBlue */
	display: inline; }

#cornice {
	background-attachment: fixed; 
	background-color: indigo; 
/*	background: transparent; */
 	background: url('../art/golden_fibonacci.gif') no-repeat; 
	background-position: center center;
	height: 100px;
	left: 0px; 
	margin: 0 0 0 0; 
	overflow: hidden; 
	padding: 0 0 0 0; 
	position: absolute; 
	top: 0px; 
	width: 160px;
	z-index: 201;
}	/* apex of classical structures and cornerstone of most site design rules */

#architrave {
	background-color: palevioletred;
	background: url(../art/controls/btn_menu_bgd.gif) repeat-x;
	border-bottom: sienna solid 1px; 
	border-top: rosybrown solid 1px; 
	height: 38px;
	left: 0px;
	margin: 0 0 0 0;
	overflow: hidden; 
	padding: 0 0 0 160px;
	position: relative; 
	right: 0px;
	top: 100px;
	width: 100%;
	z-index: 300; 
}	/* horizontal beam holds navigational frieze */

#frieze {
/*	background-position: top right; */  /* may not work if within a containing block */
	background: url('../art/ditherbits_west.gif') no-repeat 100% 0%;
	border: none;
	display: inline; 
	line-height: 38px;
	left: 160px;
	margin-bottom: 0;
	text-align: justify;
	width: 320px;
	z-index: 301;
} /*  navigation ribbon  */

#pillar {
	border-bottom: #404040 solid 1px;
	border-left: #474747 solid 1px;
/* 	border-right: #404040 solid 1px; */
	border-top: #202030 solid 1px;
	bottom: 0px;
	font: inherit;
	left: 159px; 
	margin: 0;
	overflow: hidden;
	padding: 0 -20px 0 -20px;
	position: absolute;	
	top: 139px;
	width: 319px; /* iPhone minimum dimension */
	z-index: 100;
}   /* vertical container for main content display */

#pillar h1 {
	color: gainsboro;
	font-size: large;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 5px; 
	padding-right: 5px;
	text-align: justify;
	width: 80%;
}

#pillar h5 {
	background:url('../art/deepend_shaddowstrip.png') repeat-x left top;
	border-style: none;
	color: gainsboro;
	display: block; 
	font-size: x-small;
	font-weight: normal;
	line-height: 4em;
	margin:0 0 0 0;
	padding-top: 20px;
	text-align: center;
	text-transform: uppercase;
	z-index: 200;
} 

#pillar h5:first-letter {
	font-size: 1.25em;
	font-weight:lighter;
	line-height: 2em;
}


#pillar ul {
	font: inherit;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 80%;
}

#piller li {
	font: inherit;
	padding-left: 1em;
	padding-right: 1em;
	display: table-cell;
	padding-bottom: 1em;
	width: 80%;
}

/* 	background: url('../art/charcoalwashglow.gif') repeat-x; */

#capital {
	background-color: dimgray;
	background-attachment: fixed;
	background: url('../art/deepsheen.jpg') repeat; 
	border-bottom: #404040 solid 10px; 
/*	border-left: #505060 solid 1px;
	border-top: #202040 solid 1px; */
	font: inherit;
	height: 90px; /* +10 for border-bottom = 100px  */
	left: 0px;
	margin: 0;
	padding: 0; 
	position: absolute;
	overflow: hidden;
	top: 0px;
	width: 320px;
	z-index: 101; 
}   /* top of pillar - content overview */

#capital p {
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
}
#capital p:first-letter {
	font-size: 1em; 
	font-weight: lighter; 
	line-height: 20px; 
}

#capital h2 {
	background:url('../art/deepend_shaddowstrip.png') repeat-x left top;
	border-style: none;
	display: block; 
	color: gainsboro;
	font-size: medium;
	letter-spacing: -.005em;
	margin: 0 0 20px 0;
	padding-left: 5%; 
	padding-top: 1em;
	padding-right: 5%;
	text-align: center;
	width: 90%;
}

#capital h2:first-letter {
    font: inherit;
	color: gainsboro;
	font-size: larger;
	font-weight: lighter; 
}
#capital h2:first-line {
	color: gainsboro;
}

#shaft {
	background-color: #353535;
	background: url('../art/charcoalwash.gif') repeat-x; 
	border-bottom: #474747 solid 5px; 
/*	border-left: #505060 solid 1px; */
	border-top: #303030 solid 1px; 
	bottom: 90px;
	font: inherit;
	position: absolute;	
	overflow: auto;
	top: 100px;
	width: 319px;
	z-index: 102; 
}   /* variable height container for any number of data 'flutes' -or- 'pennants' */

#shaft h2 {
	color: silver;
	font-size: medium;
	letter-spacing: -.005em;
	margin-bottom: 0;
	margin-top: 1em;
	margin-left: 1em;
	margin-right: .5em;
	padding-left: 0; 
	padding-right: 20px;
	text-align: center;
}

}
#shaft h2 img {
	margin-bottom: 10;
	margin-top: 10px;
	margin-left: 0;
	margin-right: 0;
	padding: 0 0 0 0;
}

#shaft h3 { 
	background: url('../art/flutes_overglow.gif') repeat; 
	border-top: #404050 solid 1px; /* grid reconciled */
	color: ghostwhite; 
	cursor: pointer;
	font-size: small;
	font: 1.3em, 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	text-align: center; 
/*	width: 80%; */
	letter-spacing: .025em; 
	line-height: 19px; /* adjusting grid for border fx */
	margin: 0px 0px 0px 0px; 
} /* Titles & topics for content [Pennant] */

#shaft h4 {
	background-color: #404040;
	background-color: transparent;
	background: url('../art/flutes_underglow.gif') repeat; 
	border-bottom: #353540 solid 1px; /* breaks 20px design grid...  */
	color: silver;
	cursor: pointer;
	font-size: small;
	font-size: 1.2em; 
	font: 'Gils Sans', Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-weight: lighter;
	letter-spacing: .1em;
	line-height: 19px; /* ...grid reconciled */
	margin-bottom: 0;
	margin-top: 0px;
	padding-top: 0px;
	text-align: center;
} /* topic tag-line for bottom of Pennant */

#shaft p {
	background-position: bottom left;   /* may not work if within a containing block */
	background: transparent;
	background: url ('../art/deepend_shallows.gif') repeat-x;
	line-height: 15px;
	margin-bottom: 10px;
	margin-top: 10px;
}
	
#poster {
	background: url('../art/charcoalwash.gif') repeat-x; 
	position: relative; 
	overflow: hidden;
	width: 100%;
	z-index: 105; 
}	/* Title treatment for pennant content w/o reveal */


.tapestry {
	background-color: gainsboro transparent; 
	background: url('../art/paper_warmgray.jpg') repeat; 
	color: dimgray;
	font-family: inherit;
	position: relative; 
	overflow: hidden;
	width: 100%;
	z-index: 105; 
	float: none;
}	/* alt bgd Pennant for lighter toned content */

.tapestry p {
	color: darkgray;
}

.tapestry h1 {
	color: dimgray;
}
.tapestry h2 {
	color: dimgray;
}

#stela {
	background: url('../art/charcoalwash.gif') repeat-x; 
	border-bottom: dodgerblue 1px solid; /* slight blue underglow */
	clear: both;
	position: relative; 
	overflow: hidden;
	width: 100%;
	z-index: 104; 
}	/* Title treatment for pennant content  */

#pennant {
	background-color: #353535;
	background: url ('../art/charcoal-washstrip.png') repeat-x;
	color: dimgray; 
	cursor: pointer;
	display: none;
	font-size: small; 
	letter-spacing: .05em;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 5px; 
	padding-right: 5px; 
	text-align:left; 
	width: 100%;
	z-index: 105;
}   /* container for revealable content in column */

#herald {
	background-color: #353535;
	background: url ('../art/coolwet.jpg') repeat-x;
	color: lightgray; 
	font: inherit;
	font-size: small; 
	letter-spacing: .025em;
	margin: 10px 0px 0px 0px; 
	text-align:left; 
	width: 80%;
	z-index: 106;
	display: visible;
}   /* container for light bgd content hanging off column */

#herald h1 {
	background-position: top left;   /* may not work if within a containing block */
	background: transparent;
	background: url ('../art/deepend_shallows.gif') repeat-x;
	cursor: pointer;
	padding: 0 0 0 0;
	position: fixed;
	width: 80%; 
}

#herald h2 {
	color: #202020; 
	font: 1.6em, Gils Sans, Frutiger, Myriad, Delicious, Futura, Helvetica, Verdana, 'Lucida Console', sans-serif; 
	font-size: medium; 
	font-weight: normal;
	line-height: 20px;
	letter-spacing: 1.125em; 
	margin: 0px 0px 0px 0px; 
	text-align: left; 
	width: 80%; 
}

#stylobase {
	background-color: #303030;
	background: url('../art/deepsheen.jpg') repeat; 
	bottom: 0px;
	border-bottom: #404040 solid 10px;
/*	border-left: #505060 solid 1px; */
	border-top: #474747 solid 5px; 
/*	border-right: #353535 dotted 1px; */
	height: 55px;
	left: 0px; 
	margin: 1em 0 0 0; 
    overflow: hidden;
	padding: 0 0 20px 0; 
	position: absolute;
	width: 319px;
    z-index: 103; 
    clear: none;
}   /* bottom of piller */

#stylobase 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: 30px;
	letter-spacing: .25em; 
	margin: 0 0 0 0; 
	text-align: center; 
	text-shadow: #333343 0 7px 20px;
	width: 80%; 
}



#prytania {	
	background-attachment: fixed;
	background: transparent; 
	background-position: top right; 
/* 	background: url('../art/ditherbits_east.gif') repeat-y 0 160px; */
	background: url('../art/shadowshade_deep2.gif') repeat-x 0 0; 
	bottom: 0px; 
	left: 0px; 
	margin: 0 0 0 0; 
	overflow: hidden; 
	padding: 0px .5em 0 0;
	position: absolute;	
	right: 160px;
	top: 140px; 
	vertical-align: middle; 
	width: 160px; 
	z-index: 30; 
}	/* For items beyond pillar: area left of Column */

#prytania h1 {
/*	color: #202030; */
	color: #1F2F2F;
	display: block;
	font-size: medium;
	font-weight: normal; 
	letter-spacing: -.05em;
	line-height: 1.25em;
	margin: 3em .2em .5em 1em;
	padding: 0;
	text-align: left;
	text-shadow: #606070 0 5px 10px;
	width: 100px;
	word-spacing: -.125em;
}

#prytania h1:first-letter {
/*	color: #151520;*/
	font: inherit;
	font-size: larger;
	font-weight: lighter;
}


#prytania h2 {
/*	color: #252525;*/
	color: darkslategray;
	font-size: small;
	font-weight: normal;
	letter-spacing: -.025em;
	line-height: 1em;
	margin: .5em .05em .5em 1em;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
}

#prytania h5 {
/* 	background:url('../art/shadowshade2.gif') repeat-x left top; */
	border-style: none;
	color: darkgoldenrod;
	display: block; 
	font-size: x-small;
	font-weight: normal;
	line-height: 2em;
	margin: 0 0 0 0;
	padding-top: 2em;
	text-align: center;
	text-shadow: #505060 0 13px 13px;
	text-transform: uppercase;
	z-index: 200;
}
#prytania h5:first-line {
/* 	background:url('../art/shadowshade2.gif') repeat-x left top; */
	border-style: none;
	color: orange;
	display: block; 
	font: inherit;
	font-weight: bold;
	margin: 0 0 0 0;
	padding-top: 2em;
	text-shadow: #505060 0 13px 13px;
	text-transform: uppercase;
	z-index: 200;
}

#prytania p {
/*	color: #202020;*/
	color: #1F2F2F;
	font-size: x-small;
	font-weight: lighter;
	line-height: 1.5em; 
	letter-spacing: -.0125em;
	margin-bottom: -2em;
	margin-left: 1em;
	margin-right: .5em;
	margin-top: 0;
	padding-left: -20px;
	padding-right: -40px;
}

#prytania dfn {
	font: inherit;
} 

#prytania p:first-letter {
	font-size: larger; 
	font-variant: normal;
	line-height: 1.5em;  
} /* must agree with 'p' above */

#prytania p:first-line {
	color: #050515; 
	font-variant: normal;
}

.none_shall_pass { 
/* 	background: url('../art/deepend.gif') repeat-x 0px 100%;  */
	background-position: bottom; 
	float: right; 
	margin: 0 0 0 0; 
}   /* log-on region */

#portal {
	align: bottom;
	background-position: bottom center; 
	background: transparent; 
	background: url('../art/locus_focus.gif') no-repeat 0px 100%; 
	bottom: 0px;  /* move up 50px to break w/grid for a good visual cause  */
	font-size: xx-small; 
	font-size: 9px; 
	font-variant: small-caps; 
	font-weight: bolder; 
	height: 160px; 
	left: 5px; 
	letter-spacing: .05em; 
	text-align: left; 
	margin: 0; 
	overflow: hidden; 
	padding: 0; 
	/*position: fixed; */
	position: absolute;
	width: 150px; 
	z-index: 45; 
}   /* Two-line div for secure log-on mechanism  */
    /* Text styles make v. small font stronger */

#keymaster {
	bottom: 0px;
	background-position: bottom center; 
	position: absolute;	
	text-align: center;
	z-index: 49;
}

#heading {	
	background: url('../art/locus_azimuth.gif') no-repeat 0px 100%; 
	background: transparent;
	bottom: 0px; 
	left: 0px; 
	margin: 0 0 0 0; 
	overflow: hidden; 
	position: absolute;	
	top: 140px; 
	z-index: 46; 
}	/* contact info  */	

#bearing {	
	background: url('../art/locus_zenith.gif') no-repeat 0px 100%; 
	background: transparent;
	bottom: 0px; 
	left: 0px; 
	margin: 0 0 0 0; 
	overflow: hidden; 
	position: absolute;	
	top: 140px; 
	width: 150px; 
	z-index: 47; 
}

#veritas {
	clear: both;
	float: none;
}   /* integrity */
/* 
#stela {
	background:url(../art/deepsheen.gif);
	background-repeat: repeat;
	background-attachment:fixed;
	z-index: 106;
}	*/


/*  SCRAPS 
bottom: 0px;
font: inherit;
left: 160px; 
margin: 0;
overflow: hidden;
padding: 0 -20px 0 -20px;
position: absolute;	
top: 140px;
width: 320px; 
z-index: 100;


*/

#agora {
	background-color: #202020;
	background-attachment: fixed;
	background: transparent; 
	background-position: top left; 
/*	background: url('../art/grid_gold.gif') repeat 0 0; */
	top: 140px;
	bottom: 0px;
	right: 100%;
	left: 500px;
	margin: 0 0 0 0; 
	overflow: hidden; 
	position: absolute;
	width: 100%;
	z-index: 400;
}   /* active space east of the content column */

/*
#errata {
	background-color: #202020;
	background-attachment: fixed;
	background: transparent; 
	background-position: top left; 
	background: url('../art/grid_gold.gif') repeat 0 0; 
	top: 140px;
	bottom: 0px;
	right: 100%;
	left: 500px;
	margin: 0 0 0 0; 
	overflow: hidden; 
	position: absolute;
	width: 320px;
	z-index: 500;
}   /* info detail space east of the content column */


#shade {
	background-attachment: fixed; 
	background-position: bottom left; 
	background: url('../art/electrowash.gif') repeat-x 0 100%;
	height: 100%; 
	margin: 0px; 
	padding: 0px; 
	position: fixed;
	width: 100%; 
} /* background angled graphic element */ 

 
#shade {
	background-attachment: fixed; 
	background-position: bottom left; 
	background: url('../art/edge.gif') no-repeat 0 100%;
	height: 100%; 
	margin: 0px; 
	padding: 0px; 
	position: fixed;
	width: 100%; 
} /* background angled graphic element */ 

/* #trace {
	background-attachment: fixed; 
	background-position: top left; 
	background: url('../art/grid_gold.gif') no-repeat 0 0; 
	height: 100%; 
	left: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	overflow: hidden; 
	top: 100%;
	top: 0px;	
	width: 100%; 
	z-index: 15; 
} /* interstitial graphic element layer fx */

#sheen {
	background-attachment: fixed; 
	background-position: top left; 
	background: url('../art/sheen.gif') no-repeat 0 0; 
	height: 100%; 
	left: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	overflow: hidden; 
	top: 100%;
	top: 0px;	
	width: 100%; 
	z-index: 11; 
} /* This is the background angled graphic element */

.unfurl{ /*class added to contents when open*/
	color: WhiteSmoke;
	}
.furl{ /*class added to contents when closed*/
	color: Silver;
	}
.content {
	position: relative;
	}

/* Docent/Concierge placement of elements */
.floatright {
	display: inline;
	float: right;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 0px;
	margin-top: 0px;
	padding: 0;
}

.floatleft {
	display: inline;
	float: left;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 5px;
	margin-top: 0px;
	padding: 0px;
}

.west { 
	float: left; 
	margin: 0 0 0 0; 
} 	/* Assumes a look North: pushes items left */ 

.east { 
	float: right; 
	margin: 0 0 0 0; 
} 	/* pushes items into the dawn */



/* All Rights Reserved - All Wrongs Revenged  */