/* NEW CSS MASTERSET FOR 2005 - 1/18/2005 LG */
/* set almost everything to 0 margin (www.leftjustified.com) */
/* moved POSITION ABSOLUTE to :ROOT so Firefox lets table with SELECT shrink properly!?  */
/* presumes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> */

/* --------------------------- */
/* overall common definitions  */

* {padding:0; margin:0; border:0;}
/* :root, html { height:100%; position:absolute;} /* activates 100% hieght somehow */
 :root, html { width:100%; position:absolute;} /* activates 100% hieght somehow */

body {
	background-image:url(../sitegraphics/bg-strip.gif);
	width:100%;
	font-family: Arial, helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color:#333;
	background-color:#FFF;
 	border-collapse: separate;
	border-spacing:0px;
	}

td {/* because tables don't inherit body style properties*/
	font-family: Arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	}

table, td, tr {
	vertical-align:top;
	border:0px;	
 	border-collapse: collapse;
	border-spacing:0px;
	}

/* restoring some of the '*' defaults */
pre, blockquote, label, #sandbox ul, ol, dl, fieldset, address { margin:1em 5%;}
#sandbox li, dd { margin-left:5%; }
fieldset { padding: .5em; }
p	{padding-bottom:.5em;}

	
/* this makes menus flyout on both IEPC and others if used with tvflyoutmenus.js */
#leftmenu li:hover ul, #header li:hover ul, #flyoutmenu li.sfhover ul  {
	display:block;
	z-index:199;
	}

/* --------------------------------------- */
/* how do the major areas relate in space? */
/* edit as a group to match position       */

div#header {
	height:129px;
	width:100%;
	}
	
div#leftmenu {
	width:120px;
	padding-top: 240px;
	padding-left:680px;
	}

div#sandbox {
	padding-top: 255px;
	padding-left: 32px;
	width:600px;
	}


/* --------------------------------- */
/* everything in center contents area*/
div#sandbox {
	position:relative;
	z-index:8;
	}

#sandbox h1 {
	color: #d19538;
	font-family: Georgia, Times, serif;
	font-weight:normal;
	font-size: 24px;
	font-variant: small-caps;
	margin-bottom:.8em;
	margin-left:68px;
	}


#sandbox h2 {
	color: #d19538;
	font-family: Georgia, Times, serif;
	font-weight:normal;
	font-size: 16px;
	margin-top:1em;
	margin-bottom:.5em;
	margin-left:154px;
	}
	
#sandbox p {
	line-height:18px;
	font-family:verdana, helvetica,san-serif;
	font-weight:normal;
	color:#333;
	margin-left:154px;
	margin-bottom:12px;
	}

#sandbox ul, #sandbox ol {
	margin-left:160px;
	color:black;
	margin-right:50px;
	}

#sandbox li {
	margin-bottom:3px;
	}
	
#sandbox table {
	margin-left:154px;
	}

#sandbox .form th {
	text-align:right;
	}

#sandbox .form textarea {
	width:260px;
	height:200px;
	font-family:verdana, helvetica,san-serif;
	}
	
#sandbox .callout {
	float:left;
	width:130px;
	clear:none;
	position:relative;
	left:0px;
	top:10px;
	height:auto;
	border-top:2px solid #a1633d;
	}

#sandbox .callout p {
	color:#426622;
	font-family:times, times new roman, times-roman, serif;
	font-style:italic;
	font-size:16px;
	line-height:24px;
	text-align:right;
	margin-left:0px;
	}

#sandbox .oldcallout {
	float:left;
	width:130px;
	clear:none;
	border-top:2px solid #a1633d;
	color:#426622;
	font-family:times, times new roman, times-roman, serif;
	font-style:italic;
	font-size:16px;
	line-height:24px;
	text-align:right;
	position:relative;
	left:0px;
	margin-left:-60px;
	top:10px;
	height:auto;
	}

hr {
	color: grey;
	border:1px solid grey;
	width:70%;
	margin-top: 12px;
	margin-bottom: 18px;
	}

#sandbox ul{ padding-top:0px; margin-top:0px;}

#sandbox td {
	padding:2px;
	padding-right:12px;
	padding-left:12px;
	border-bottom:1px solid #FDA;
	}

#sandbox input, #sandbox textarea {
	background-color:#aac;
	}

#sandbox img {
	float:right;
	padding-left:24px;
	padding-bottom:8px;
	margin-right:-80px;
}


 #sandbox img, #sandbox .captionedimage, #sandbox .captionedimage td, #sandbox .captionedimage img, #sandbox .captionedimage caption  {
	text-align:center;
	padding:0;
	border:0;
	margin:0;
	float:right;
	margin-left:10px;
	caption-side:right;
 	font-weight:bold;
 	line-height:12px;
	font-size:12px;
	}

/* ---------------------------- */
/* everything in the top area   */
div#header {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:10;
	overflow:visible;
	white-space:nowrap;
	}

	
#header ul { 
	list-style: none;
	padding:0;
	border:0;
	margin:0;
	padding-left:48px;
	}

#header li { 
	display:block;
	position:relative;
	float:left;
	width:auto;
	height:auto;
	}

#header li a { /*most menu styling should go here */
	display:block;
	width:auto;
	color:#768866;
	text-decoration:none;
	font-weight:bold;
	font-size:13px;
	border-top:5px solid #baccaa;
	padding-left:12px;
	padding-right:12px;
	line-height:18px;
	margin-left:2px;
	margin-right:1px;	
	}

#header li a:hover, #header li a.selected {
	border-top:5px solid #426622;
	background-color: #dceecc;
	color:#426622;
	font-style:italic;
	}

/* topmenu dropdown submenus*/	
#header li ul {
	position:absolute;
	top:auto;
	left:auto;
	display:none;
	list-style:none;
	padding-left:0px;	
	}

#header ul ul li {
	padding:0 !important;
	margin:0 !important;
	float:none;
	display:block;
	width:auto;
	height:auto;
	background-color:#baccaa;
	}

#header ul ul li a, #header ul ul li a:hover {
	width:130px;
	display:block;
	text-decoration:none;
	background-color:#fdc;
	color:black;
	font-size:12px;
	background-color:#baccaa;
	border-top:1px solid white;
	border-bottom:1px solid black;
	}
	

/*alternatively...simple sample button with changing bg image on hover*/
#home { background-image: url(../sitegraphics/menu-home-off.gif); width:100px; }
#home:hover { background-image: url(../sitegraphics/menu-home-on.gif); }


/* --------------------------- */
/* everything in the left menu */


div#leftmenu {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	z-index:5;
	font-size:13px;
	font-weight:bold;
	color:white;
	line-height:24px;
	}
	

/* the left mainmenu */
#leftcontent ul{
	list-style: none;
	width: auto;	/*not setting width HERE makes menu not jump?! */
	}

#leftcontent li {
	display:block;
	position:relative;
	width:209px;
	height:25px;
	}
	
#leftcontent li a {
	text-align:right;
	display:block;
	width:100%;
	height:100%;
	line-height:25px;	/*should be same as LI height for ie55 */
	color:black;
	background-image: url(../sitegraphics/leftmenu-off.jpg);
	font-family: Georgia, Times, Times New Roman, serif;
	text-transform:uppercase;
	text-decoration:none;
	font-weight:bold;
	font-size:14px;
	}
	
#leftcontent li a:hover{
	background-image: url(../sitegraphics/leftmenu-on.jpg);
	}

/* leftmenu flyout submenus*/	
#leftcontent li ul {
	position:absolute;
	top:0px;
	left:186px;
	display:none;
	list-style: none;
	}

#leftcontent ul ul li {
	display:block;
	width:auto;
	height:auto;
	}
	
#leftcontent ul ul li a {
	width:160px;
	display:block;
	text-align:left;
	text-decoration:none;
	text-transform:none;
	color:black;
	font-size:13px;
	line-height:17px;
	padding:0px;
	padding-left:10px;
	background-image: none;
	background-color:#acc;
	border-top:1px solid white;
	border-left:1px solid white;
	border-bottom:1px solid black;
	border-right:1px solid black;
	}

#leftcontent ul ul li a:hover {
	background-image: none;
	background-color:#ccc;
	}

#leftcontent .aftermenu {
	background: url(../sitegraphics/leftmenu-bottom.jpg) no-repeat left bottom;
	padding-left:32px;
	}


/* this "Holly hack" somehow fixes IE's bug of treating newlines in our 2nd-level  ul as whitespace?*/
/* Fix IE...only read by IE. Hide from IE Mac \*/
* html #leftcontent ul li { float: left; }
* html #leftcontent ul li a { height: 1%; }
/* End */


/* hack allows 100% hieght for bg elements on all browsers except safari which never goes further*/
.stopsafari { color: green; ! }  /* it's the ! */
html {height:100%;}