/* global --------------- */
body
{
	background: #999 url(images/pattern_101.jpg) repeat;
	font-family: Verdana, sans-serif;
	font-size: large;
	margin: 0; 
	padding: 0;
}

/*
div.container
{
	border: 1px solid black;
	background-color: white;
	color: #333;
	margin: 50px auto;
	width: 90%;
	padding: 20px 20px 50px;
	min-height: 400px;
}
*/

div.container
{
	background-color: white;
	color: #333;
	margin: 35px auto;
	padding: 20px 20px 50px 20px;
	min-height: 400px;
	border-bottom: 2px solid #999;
}



a.next { position: absolute; top: 0; left: 0; display:block; width: 100%; height: 25px; text-align: center; font-weight: bold; font-size: 1em;  padding: 10px 0; color: #fff; background-color: black; text-decoration:none; border: none; }



h1 { padding-bottom: 10px; border-bottom: 1px solid gray; }
h1.demo { border: none; }


div.demopage  { width: 700px; font-family: Georgia; padding: 20px; color: black; background-color: #fff;  border: 4px solid #369; margin: 20px 0;}
div.demopage p, div.demopage h2 { margin: 0 0 10px 20px; }
div.demopage h1 { padding-bottom: 0; margin: 0;  border: none; }

div.code { font-family: Monaco, "Courier New", monospaced; font-size: 120%; padding: 20px 0px;}

.html{ padding: 6px; color: black; background-color: #eee;  border: 1px solid #ccc; margin: 20px 0;}

.css {  padding: 6px; background-color: #ffc; color: red; border: 1px solid #FFE59F;}
.css strong { font-weight: bold; color: #900; }


p.highlight { padding: 20px; font-weight: bold; color: black; background-color: #ff6; border-top: 1px solid #C66; border-bottom: 1px solid #C66;}

div.sizetest h2 { font-size: 130%; }
div.sizetest img { border: 1px solid red; margin-left: 50px; }

a img { border: none; }
img.float-right { float: right; margin-left: 20px;}
.center { text-align: center; }

.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }

ul.spaced li { margin-top: .5em; }

/* titles and intros --------------- */

body.title h1 { font-size: 400%; color: #CC0033; text-align:center; border: none; }
body.title .fancy { font-family: Zapfino, script; font-size: 90%; color: black; position: relative; top: -.6em; }
body.title h2 { font-family: Georgia; font-size: 200%; line-height: 150%;color: #333; text-align:center; border: none;}

body#startpage h1 { margin: 30px 0 0; padding: 0;}
body#startpage h2 { margin: -20px 0 0; padding: 0;}

body.intro ul, body.intro p {font-size: 120%; line-height: 160%;}
body.contents ol {font-size: 170%; line-height: 200%;}


body.design div.container { text-align: center; }
body.design div.container img { border: 2px solid gray; }

/* layout --------------- */
div.layout {  border: 1px solid black; color: white; background: #ccc;}
div.layout#fixed { width: 500px;}
div.layout#fluid { width: 100%;}

div.layout div#header { padding: 10px; height: 40px; background-color: #369; border-bottom: 15px solid gray; font-size: 170%; font-weight: bold;
background: white url(images/blueheader.jpg) left top no-repeat
}
div.layout div#content { font-size: 80%; color: black; padding: 10px;  background-color: white; margin-left: 20%; }
div.layout div#footer { padding: 4px 10px; height: 20px; background-color: #69c; }
div.layout div#photo { height: 200px; width: 175px;  background-color: black; float: right; margin-left: 10px;  }

div.fauxcol-fixed { height: 300px; width: 500px; background: white url(images/fauxcol-fixed.png) repeat-y; border: 1px solid black; }
div.fauxcol-liquid { height: 300px; width: 100%; background: white url(images/fauxcol-wide.png) 25% 0 repeat-y; border: 1px solid black; }

div.fauxcol-liquid2
{
	height: 300px;
	width: 100%;
	background-image: url(images/fauxcol-liquid-20p-5.png);
	right: 20%;
	top: 0;
	repeat: repeat-y;
	background-repeat: repeat-y;
	background-position: 80% 0;
}

/* color --------------- */
p.attribution { font: italic 12px/14px Georgia; padding-bottom: 12px; text-align: left;}

div.cal { width: 32%; float: left; display: inline; font-size: 90%;}
div.cal td { font-size: 18px; text-align: center; padding: 4px;}
div.cal table caption { display:none; }
div.cal th { font-weight: normal;  color: gray; }

div#bad table td a { color: #06C; text-decoration:none;}
div#bad table td strong { color: red; font-weight: normal; }
div#ok table td strong { color: red; font-weight: normal; padding: 2px; border: 1px solid red; }
div#good table td a { color: #06C; text-decoration:underline; font-weight:bold;}
div#good table td strong { color: red; padding: 2px; background-color: #FF9; border: 1px solid red; }
div.cal table { border: 1px solid silver; }

div.colorbar { width: 330px; height: 25px; overflow:hidden;  }
body#contrast div.contrastbar
{
	width: 575px; 
	padding: 20px 10px;
	background-image: url(images/redgradient.jpg);
	background-repeat: repeat-y
	background-position: 0 0;
	border: 1px solid black;
}

body#contrast div.contrastbar p
{
line-height: 2em; text-align: center;
}

body#hsb h2 { margin-top:55px; }


/* banners --------------- */
div.banner
{
	height: 200px;
	overflow: hidden;
	border: 1px solid black;
}
div.banner h1 { font-family: Futura, serif; font-weight: bold; border-bottom: none; }
div#repeat { background: #D0E0BD url(images/simplebits.png) left top repeat-x; border: none; padding-top: 50px; padding-left: 15px; height: 150px; }

div#reveal, div#reveal1b { background: #90B280 url(images/flightplan1280.gif) left top no-repeat; }

div.banner h2 { font-family: Georgia; color: white; margin: 80px 0 0 50px; }

div#reveal1b h2 { margin-top: 30px; margin-left: 0; }

div#reveal2 { background: #90B280 url(images/flightplan1280.gif) right top no-repeat; }

div#reveal2b { background: #90B280 url(images/flightplan-mod.png) center top no-repeat; }

div#fadeout { background: #A3B6D9 url(images/ridge.jpg) left top no-repeat; }

div#collage-clear { background-color: transparent; border: none; height: 236px; }
div#collage { text-align: center; background: #5EB2E3 url(images/clouds.jpg) center top no-repeat; height: 240px; }
div#collage a img { margin: 10px; border: 1px solid white;}

div#textbanner {background: #999 url(images/global.png) left top no-repeat; padding: 30px 50px 0px 180px; color: white; }

div#textbanner h2 { font-family: Georgia; color: white; margin: 0; padding: 0;   }
/* widgets --------------- */

a#skip-content { display:block; width: 841px; height: 200px; border: 1px solid gray; background-image: url(images/bcs.png); }

a#skip-content:hover { background-image: url(images/bcs-hover.png); }


/* widgets --------------- */

#navbar {
	margin: 0px; 
	padding: 0; 
	list-style: none; 
	font-size: 11px; 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navbar li {
	margin: 0; 
	padding: 0; 
	float: left; 
	position: relative;
}

#navbar li a {
	border-left: 1px solid #717A8B;
	height: 17px; 
	display: block; 
	padding: 6px 28px; 
	margin: 0px; 
	color: #ccc;
	text-align: center; 
	text-transform: uppercase;
	text-decoration: none; 
	font-weight: bold;
	background: url(images/nav-bkgd.gif) repeat 0 0;
}


#navbar li a:hover { color: #fff; background: url(images/nav-bkgd-on.gif) repeat 0 0; }