/* css Zen Garden submission 057 - 'This is Cereal' by Shaun Inman, http://www.shauninman.com/ */
/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
/* All associated graphics copyright 2003,  Shaun Inman */
/* Added: November 4th, 2003 */

/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */


/* Photography © Bradley Mason http://www.sxc.hu/browse.phtml?f=profile&l=bradleym */

.extra3,
.extra4,
.extra5,
.extra6 { display: none; }

/* Warning message styles for browsers that don't support CSS attribute selectors... */
.extra1 { position: absolute; top: 112px; left: 292px; width: 340px; height: 166px; background: url(txt_upgrade.gif) no-repeat; z-index: 10; }
.page-wrapper { padding: 296px 0 0 294px; z-index: 99; }
/* Clear the warning styles for those that do... */
div[class="extra1"] { display: none; }
div[class="page-wrapper"] { padding: 226px 0 0 294px !important; }

/* Spoon graphic and pull-quote */
.extra2 { position: absolute; top: 1200px; left: 0px; width: 229px; height: 580px; background: url(spoon_flake.png) no-repeat; z-index: 0; }
div[class="extra2"] { top: 712px !important; }

/* Coffee graphic */
.extra3 { display: block !important; position: relative; margin-left: 496px; height: 0; z-index: 0; }
.extra3::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -33px;
	width: 100%;
	height: 596px;
	background: url(coffee.jpg) no-repeat;
	}

/* Small logo */
div[class="extra4"] { display: block !important; position: relative; margin-left: 64px; width: 168px; height: 0; z-index: 3; }
div[class="extra4"]::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -33px;
	width: 100%;
	height: 98px;
	background: url(logo_small.gif) no-repeat;
	}


/* Photo Credit */
div[class="extra5"] { display: block !important; position: relative; margin-left: 4px; height: 0; z-index: 0; }
div[class="extra5"]::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -33px;
	width: 100%;
	height: 336px;
	background: url(txt_credit.gif) no-repeat;
	}

/* Quality text and SI logo */
div[class="extra6"] {
	display: block !important;
	position: absolute;
	top: 476px;
	left: 103px;
	width: 146px;
	height: 77px;
	background: url(txt_quality.gif) no-repeat;
	z-index: 0;
	}

body {
	margin: 0;
	padding: 0;
	background: url(bg_header.jpg) no-repeat #FFF;
	}

.summary,
.preamble,
.supporting { width: 336px; z-index: 1; }

p {
	text-align: justify; 
	font-family: Georgia,"Times New Roman",Times,serif;
	font-size: 11px; 
	line-height: 17px; 
	margin-top: 0; 
	color: #707070;
	}
p abbr { font-style: italic; }
abbr { border-style: none; }

p a, footer a { color: #866F5B; text-decoration: none;  border-bottom: 1px dotted #866F5B; }
p a:hover, footer a:hover { color: #A51A0A; border-style: none; }
footer>a { border-style: none !important; }

.preamble { margin-bottom: 2em; }
.preamble p:nth-child(3) { background: url(head_enlightenment.gif) no-repeat; padding-top: 2.4em; }
div[class="preamble"]>p:nth-child(3) { background: url(head_enlightenment.png) no-repeat !important; }

.explanation,
.participation,
.benefits,
.requirements { padding-top: 1.8em; margin-bottom: 2em; }


@media tty { /* Mid pass to square away some IE 5 PC hinkyness. */
	i{content:"\";/*" "*/}} .explanation p:nth-child(2),.participation p:nth-child(2),.benefits p:nth-child(2),.requirements p:nth-child(2) { padding-top: 1.8em; } /*";}
 	}/* */
 	
.explanation 	{ background: url(head_explanation.gif) no-repeat; }
.participation 	{ background: url(head_participation.gif) no-repeat; }
.benefits 		{ background: url(head_benefits.gif) no-repeat; }
.requirements 	{ position: relative; background: url(head_requirements.gif) no-repeat; z-index: 1; }

.summary { margin-bottom: 2em; }
div[class="summary"] { margin-bottom: 0 !important; }
.summary>p[class="p1"] { position: absolute; top: 230px; left: 108px; background: url(txt_demo.jpg) no-repeat; width: 143px; height: 0; padding-top: 57px; overflow: hidden; }
.summary>p[class="p2"] { position: absolute; top: 328px; left: 105px; background: url(txt_download.gif) 5px 5px; background-repeat: no-repeat; width: 107px; height: 29px; z-index: 15; margin: 0; color: #FFF; font-size: 1px; padding-top: 36px; }
.summary>p[class="p2"] a[href="zengarden-sample.html"] { position: absolute; top: 17px; left: 5px; width: 35px; height: 0px; padding-top:9px; overflow: hidden; }
.summary>p[class="p2"] a[href="zengarden-sample.html"]:hover { background: url(button_html_over.gif) no-repeat; }
.summary>p[class="p2"] a[href="zengarden-sample.css"] { position: absolute; top: 17px; left: 63px; width: 31px; height: 0px; padding-top:9px; overflow: hidden; }
.summary>p[class="p2"] a[href="zengarden-sample.css"]:hover { background: url(button_css_over.gif) no-repeat; }
div[class="summary"] a { border-style: none; }
/**/

/**/
.design-selection 	{ position: absolute; top: 324px; left: 105px; }
.zen-resources { position: absolute; top: 714px; left: 105px; }
.design-archives	{ position: absolute; top: 902px; left: 105px; }

/**/
div[class="design-selection"] 	 { top: 292px !important; left: 105px !important; background: url(button_select_design.gif) no-repeat; width: 149px; height: 37px; z-index: 300; }
div[class="zen-resources"] { top: 358px !important; left: 105px !important; background: url(button_resources.gif) no-repeat; width: 149px; height: 37px; z-index: 200; }
/**/

.design-selection h3,
.zen-resources h3,
div[class="design-archives"] h3 {
	position: absolute; top: -28px; left: 0px; 
	background: url(bg_menu_thin_top.gif) no-repeat; 
	width: 149px; height: 28px; line-height: 28px;
	padding-top: 5px;
	overflow: hidden;
	margin: 0;
	padding: 0 18px;
	color: #333;
	font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-size: 9px;
	}
/**/
div[class="design-selection"]>h3,
div[class="zen-resources"]>h3,
div[class="design-archives"]>h3 { top: -1000px !important; left: -1000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

div[class="design-selection"]:hover h3,
div[class="zen-resources"]:hover h3 { position: absolute; top: 5px !important; left: 5px !important; background: url(bg_menu_top.png) no-repeat; width: 203px !important; height: 0px !important; padding-top: 5px; margin: 0; }
/**/

.design-selection ul,
.zen-resources ul,
.design-archives ul {
	background: url(bg_menu_thin.gif) left bottom no-repeat;
	margin: 0;
	padding: 0 0 5px;
	list-style: none;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 149px;
	}

/**/
div[class="design-selection"]>nav>ul,
div[class="zen-resources"]>ul { position: absolute; top: -1000px; left: -1000px; width: 203px !important; background: url(bg_menu.png) left bottom no-repeat !important; }

div[class="design-selection"]:hover ul,
div[class="zen-resources"]:hover ul { position: absolute; top: 10px; left: 5px; }
/**/


.design-selection li,
.zen-resources li,
.design-archives li,
#lfavorites li {
	font-size: 9px; 
	color: #8B8C8C; 
	background: url(bg_menu_separator_thin.gif) no-repeat;
	padding: 8px 18px;
	}

@media tty { /* Mid pass to square away some IE 5 PC hinkyness. */
	i{content:"\";/*" "*/}} .design-selection li,.zen-resources li,div[class="design-archives"] li,#lfavorites li { width: 149px; padding: 6px 18px; } /*";}
 	}/* */

/**/
aside[class="sidebar"]>ul>li,
div[class="zen-resources"]>ul>li { background: url(bg_menu_separator.png) no-repeat !important; }


div[class="design-archives"]>ul>li:first-child,
div[class="zen-resources"]>ul>li:first-child { padding-top: 5px; background: url(o.gif) no-repeat !important; }
div[class="design-selection"] li:hover,
div[class="zen-resources"] li:hover { background: url(bg_menu_over.png) no-repeat !important; }

div[class="design-archives"] { position: absolute; top: 400px !important; left: 100px !important; background: url(well_design_archives.gif) 5px 0px no-repeat; width: 164px !important; height: 44px; z-index: 100; }
div[class="design-archives"]>nav>ul, div[class="design-archives"]>nav>ul>li { margin: 0; padding: 0; list-style: none; background: url(o.gif) no-repeat !important; }
div[class="design-archives"] .next a { background: url(button_next.gif) no-repeat; position: absolute; top: 14px; left: 50px; width: 45px; height: 0px; padding-top: 21px; overflow: hidden; z-index: 1; }
div[class="design-archives"] .previous a { background: url(button_prev.gif) no-repeat; position: absolute; top: 14px; left: 7px; width: 44px; height: 0px; padding-top: 21px; overflow: hidden; z-index: 2; }
div[class="design-archives"] .viewall a { background: url(button_view_all.gif) no-repeat; position: absolute; top: 14px; left: 99px; width: 53px; height: 0px; padding-top: 21px; overflow: hidden; }
div[class="design-archives"] .next a:hover { background: url(button_next_over.gif) no-repeat; }
div[class="design-archives"] .previous a:hover { background: url(button_prev_over.gif) no-repeat; }
div[class="design-archives"] .viewall a:hover { background: url(button_view_all_over.gif) no-repeat; }

/**/

.design-selection a { display: block; }
.design-selection a.designer-name { display:inline; font-size: 9px; text-transform: lowercase; }

.sidebar { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-size: 9px; }
.sidebar a,
.sidebar a:link,
.sidebar a:visited { font-size: 10px; color: #444; text-decoration: none; }
.sidebar a:hover { color: #A51A0A; }

.sidebar a.designer-name,
.sidebar a.designer-name:link,
.sidebar a.designer-name:visited { color: #8B8C8C;}
.sidebar a.designer-name:hover { color: #A51A0A; }
/**/


footer { font-family: geneva,arial,verdana,sans-serif; font-size: 9px; }
footer a { color: #866F5B; text-decoration: none; }
footer a:hover { color: #A51A0A; }

/**/
footer { position: relative; top: -5px; left: -5px; width: 327px; height: 48px; background: url(txt_footer.gif) 5px 5px no-repeat; z-index: 1; }
/* xhtml */
footer a.zen-validate-html { position: absolute; top: 17px; left: 105px; width: 33px; height: 0px; padding-top:9px; overflow: hidden; }
footer a.zen-validate-html:hover { background: url(button_xhtml_over.gif) no-repeat; }
/* css */
footer a.zen-validate-css { position: absolute; top: 17px; left: 145px; width: 18px; height: 0px; padding-top:9px; overflow: hidden; }
footer a.zen-validate-css:hover { background: url(button_css_footer_over.gif) no-repeat; }
/* cc */
footer a.zen-license { position: absolute; top: 17px; left: 170px; width: 13px; height: 0px; padding-top:9px; overflow: hidden; }
footer a.zen-license:hover { background: url(button_cc_over.gif) no-repeat; }
/* 508 */
footer a.zen-accessibility { position: absolute; top: 17px; left: 189px; width: 15px; height: 0px; padding-top:9px; overflow: hidden; }
footer a.zen-accessibility:hover { background: url(button_508_over.gif) no-repeat; }
/* aaa */
footer a.zen-github { position: absolute; top: 17px; left: 228px; width: 20px; height: 0px; padding-top:9px; overflow: hidden; }
footer a.zen-github:hover { background: url(button_aaa_over.gif) no-repeat; }

/* Move this junk out of the way */
header,
.preamble h3,
.supporting h3 { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; }