/* stylesheet for screen presentation */
/* FONTS */

#menu ul a , #buttons a {
	font-size: 84% ;	/* 85% is too big in IE */
	}
#navigation button {
	font-size: 100% ;
}
#navigation a , a#end, a.end, address a, a.footnote {
	text-decoration: none ;
	}
legend , #menu a , #language img , #navigation button {
	font-weight: bold ;
	}

/* END FONTS */

/* Tweaks for content */
h1 {
	line-height: normal ;
	padding: 0.5em ;
	margin: 0 0 0.5em ;
	}
* > #content .left , * > #content .right { /* if IE gets the height: auto, it distorts pictures with a width attribute. Can't defuse this, have to hide it */
	max-width: 60% ;	/* leave enough space for text */
	heig\ht: auto ;		/* scale to match width */
	}
a#end, a.end {	/* creep into the 0.5em bottom padding, but not all the way to the bottom */
	display: block ;
	clear: both ;
	width: 15em ;
	position: relative ;
	top: 0.4em ;
	line-height: 120% ;
	padding-bottom: 0.1em ;
	text-align: right ;
	margin: 0 0 0 auto ;
	}
a#end {
	visibility: hidden;
}
abbr , acronym , .defined {
	cursor: help ;
	}
/* end tweaks */

/* LAYOUT */

#top {	/* put z-index here not on #language or Opera 8.51 hides it */
	position: relative ;
	z-index: 2 ;
}
a#language {		/* a needed for specificity */
	float: right ;
	position: relative ;
	top: 0.5em ;
	right: 10.5em ;	/* top right of heading bar */
	margin: 1px ;	/* extra shift for content border */
	padding: 1px ;	/* highlight around flag on :hover */
	}
html {
	margin: 0 ;				/* get rid of any defaults */
	padding: 0 4px 0 0 ;	/* 4px for content and menu borders */
	height: 100.05% ; 		/* force vertical scroll bar for consistent horizontal positioning */
	}
body {
	max-width: 56.5em ;
	margin: 0 auto ;
	padding: 0.5em ;
	}
#content , #copyright {
	max-width: 42em ;
	min-width: 15em ;
	padding: 0 0.5em 0.1px ;	/* 0.1px bottom so firefox 1.0 wraps around margin of last element */
	margin: 0 10em 0 auto ;		/* up to 3em on left for visual balance in big window */
	}
#content {
	padding: 0.5em ;
	border-style: solid ;
	position: relative ;	/* in case I want to position something in it */
	}
#copyright p {
	margin: 0 ;
	text-align: center ;
	}
/* video */
iframe {
	display: block;
	margin: 1em auto;
}

#navigation {
	float: right ;
	line-height: normal ;	 /* for IE7b2 spare space in submenu */
	}
#menu , #buttons {
	position: fixed ;	/* inherit left position from #navigation */
	width: 9.5em ;
	margin: 0.5em 0 0.5em -9.5em ;
	}
#menu {
	top: 0 ;
	z-index: 1 ;		/* menu covers buttons in small window */
	border-style: solid ;
	}
#buttons {
	bottom: 0 ;
	text-align: center ;
	}
#navigation ul , #navigation li , #menu a {
	display: block ;
	padding: 0 ;
	list-style: none ;	/* for IE5 - IE7b2 */
	}
#menu * , #buttons * {
	margin: 0 ;
	}
#navigation li , #menu a {
	/* #navigation li for Gecko BUG 286368 (active link outline causes reflow/scrollbar) */
	/* #menu a for IE7b2 spare space under links */
	overflow: hidden ;
	}
#menu a {
	line-height: 1.5em ;
	padding-left: 0.5em ;
	white-space: nowrap ;
	}
#navigation .backmenu a {
	padding-bottom: 0.5em ;
	}
#menu ul {	/* submenu */
	max-height: 6.9em ;	/* 5 lines */
	overflow: auto ;
	}
#menu ul a {
	padding-left: 1.4em ;
	margin: 0 ;
	}
#buttons li {
	padding-left: 2px;	/* to match borders on menu and menu items */
	}
#buttons , a#language {
	line-height: 100% ;
	}
#buttons button {
	margin-bottom: 0.5em ;
	width: 76% ;
	height: 2em ;
	}
a img {
	border-style: none ;
	}
/* LAYOUT ENDS */

/* CONTACT FORM */

.contact form {
	padding: 0.25em;
}

.contact fieldset {
	padding-left: 6em ;
	text-align: right ;
}
.contact legend {
	margin-left: -4em ;
}
.contact label {
	margin-left: -6em ;
}
.contact #from , .contact #subject {
	width: 100% ;
}
.contact .error {
	color: #800 ;
}

/* CONTACT FORM ENDS */

/*	CORNERS */

#content , #menu {
	-moz-border-radius: 0.75em ;
	-webkit-border-radius: 0.75em ;
	border-radius: 0.75em ;
}
#menu > :first-child , #menu > :first-child > :first-child {
	-moz-border-radius-topleft: 0.75em ;
	-moz-border-radius-topright: 0.75em ;
	-webkit-border-top-left-radius: 0.75em ;
	-webkit-border-top-right-radius: 0.75em ;
	border-top-left-radius: 0.75em ;
	border-top-right-radius: 0.75em ;
}
#menu > :last-child , #menu > :last-child > :last-child ,
#menu > :last-child li:last-child a {
	-moz-border-radius-bottomleft: 0.75em ;
	-moz-border-radius-bottomright: 0.75em ;
	-webkit-border-bottom-left-radius: 0.75em ;
	-webkit-border-bottom-right-radius: 0.75em ;
	border-bottom-left-radius: 0.75em ;
	border-bottom-right-radius: 0.75em ;
}
h1 , a#language , #buttons .button {
	-moz-border-radius: 0.25em ;
	-webkit-border-radius: 0.25em ;
	border-radius: 0.25em ;
	}
#navigation ul#menu {
	padding-bottom: 0.3px ; /* make up for disappearing bottom border rounding error */
	}

/* END CORNERS */

/* COLORS */
#content {
	background: white ;
	}
form , form#content {
	background: #ddd ;
}
legend {
	color: black ;
}
a:link , #buttons :visited , address :visited , a.footnote:visited {
	color: #00b ;
	}
a:visited {
	color: #909 ;
	}
a:hover , address a:hover , a.footnote:hover {	/* contact + footnote here to override visited color */
	color: #b00 ;
	}
h1 , #menu a:link , #menu a:visited , a#language:link , a#language:visited {
	color: white ;
	}
abbr , acronym , .defined {
	border-bottom: 1px solid ;
	border-bottom-color: #aaa ! important ;	/* important for Mozilla */
	}
h2:target:before , h3:target:before {
	content: "\2022\A0" ; /* •(bullet) + non-break space */
	}
#content .proposition , li:target {
	background: #ffb ;
	}
code , pre.code , samp {
	background: #e8e8e8 ;
	}
#menu , fieldset {
	border-color: white ;
	}
#menu a , a#language {
	border-style: solid ;	/* dark line around highlight on :hover */
	}
#navigation #menu li a.dead {	/* #navigation + li for specificity: override class selectors below and :hover */
	color: inherit ;			/* fails in IE7b2. Kludge below */
	background: transparent ;
	cursor: default ;
	}

/* DEFAULT B/W */
body {
	background: #999 ;
	}
#menu , div #menu a.dead:hover { /* .dead here kludge for IE7b2: color: inherit above fails */
	color: #999 ;
	}
h1 , #menu {
	background: black ;
	}
#content , #menu a , a#language {
	border-color: black ;
	}
#menu a:hover , #menu a:focus ,
a#language:hover , a#language:focus ,
.sidebar {
	color: black ;
	background: #eee ;
	}
/* B/W ENDS */

/* ERROR TWEAK: background image */
.error #content {
	background: white url("/images/nowhere.jpg") right 90% no-repeat;
}

/* HOME: GREEN */
body.home {
	background: #9a9 ;
	}
.home #menu {
	color: #9a9 ;
	}
.home h1 , .home #menu {
	background: #010 ;
	}
.home #content , .home #menu a , .home a#language {
	border-color: #010 ;
	}
.home #menu a:hover , .home #menu a:focus ,
.home a#language:hover , .home a#language:focus ,
.home .sidebar , .home form , .home form#content {
	color: #010 ;
	background: #dde8dd ;
	}
/* GREEN ENDS */

/* BLOG: CYAN */
body.blog {
	background: #9aa ;
	}
.blog #menu {
	color: #9aa ;
	}
.blog h1 , .blog #menu {
	background: #011 ;
	}
.blog #content , .blog #menu a , .blog a#language  {
	border-color: #011 ;
	}
.blog #menu a:hover , .blog #menu a:focus ,
.blog a#language:hover , .blog a#language:focus ,
.blog .sidebar {
	color: #011 ;
	background: #dee ;
	}
/* CYAN ENDS */

/* SAQS: SWAMP */
body.saqs {
	background: #998 ;
	}
.saqs #menu {
	color: #998 ;
	}
.saqs h1 , .saqs #menu {
	background: #080800 ;
	}
.saqs #content , .saqs #menu a , .saqs a#language  {
	border-color: #080800 ;
	}
.saqs #menu a:hover , .saqs #menu a:focus ,
.saqs a#language:hover , .saqs a#language:focus ,
.saqs .sidebar {
	color: #110 ;
	background: #ddc ;
	}
/* SWAMP ENDS */

/* ARTICLE: BLUE-GRAY */
body.article {
	background: #99a ;
	}
.article #menu {
	color: #99a ;
	}
.article h1 , .article #menu {
	background: #111118 ;
	}
.article #content , .article #menu a , .article a#language  {
	border-color: #111118 ;
	}
.article #menu a:hover , .article #menu a:focus ,
.article a#language:hover , .article a#language:focus ,
.article .sidebar {
	color: #111118 ;
	background: #dddde7 ;
	}
/* BLUE-GRAY ENDS */

/* CODE: BLUE */
body.coding {
	background: #99b ;
	}
.coding #menu {
	color: #99b ;
	}
.coding h1 , .coding #menu {
	background: #003;
	}
.coding #content , .coding #menu a , .coding a#language  {
	border-color: #003 ;
	}
.coding #menu a:hover , .coding #menu a:focus ,
.coding a#language:hover , .coding a#language:focus ,
.coding .sidebar {
	color: #003 ;
	background: #dde ;
	}
/* BLUE ENDS */

/* COLORS END */