/* styles for Sample Website (C) Odyssey 2004: LG 7/21/2004 initial definitions */


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

body {
	top:0;
	left:0;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	font-family: Verdana, Helvetica, Arial, san-serif;
	font-size: 12px;
	line-height: 18px;
	color:#222;
	background-color:#fff;
/*	background-image:url(../sitegraphics/whiterock_header.jpg); */
	background-repeat:no-repeat;
 	border-collapse: separate;
	border-spacing:0px;

/*	behavior: url(../common/csshover.htc); /* so ie to apply hover effects to other than A */
	/* Tell NS4 to ignore what follows.... */ 
	/*/*/ 
	position:absolute;
	/* Okay, we can let NS4 see the rest.... */ 	
	}

p, td {  /*td because tables don't inherit style properties*/
	padding:0;
	margin:0;
	padding-bottom:.5em;
	font-family: Verdana, Helvetica, Arial, san-serif;
	font-size: 11px;
	}

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

	
/* --------------------------------------- */
/* how do the major areas relate in space? */
/* edit these together to match position   */

div#header {
	height:190px;
	height:130px;
	}
	
div#leftmenu {
	width:250px;
	}

div#leftcontent {
	padding-top: 210px;
	padding-top: 130px;
	}


div#sandbox {
	padding-top: 150px;
	padding-left: 250px;
	width:700px;
	}

/* width above is wrong, except for IE5.5 Width below is correct for MOST browsers*/

div#sandbox {
  voice-family: "\"}\""; /* some browsers have a parsing bug */
                         /* and will ignore the following rules */
  voice-family: inherit;
  width: 450px;
}
	
/*planned enhancements*/
/*div#rightmenu {
	width:206px;
	width:10px;
	}
	
div#footer {
	height:0px;
	}
*/


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

#sandbox strong {
	color:#444
	}

#sandbox p {
	margin:0;
	margin-bottom:1em;
	}

#sandbox a.buttonstyle, #sandbox a.button  {
	display:block;
	float: left;
	width:200px;
	background-color:#36afcd;
	color:white;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	padding:4px;
	border:6px solid white;
	}

#sandbox td {
	padding-left:6px;
	padding-right:6px;
	padding-top:4px;
	padding-bottom:4px;
	}
	
#sandbox a:hover {
	color:black;
	}

#sandbox img {
	float:right;
/*	margin-right:-50px; */
	padding-right:15px;
	padding-top:15px;
	padding-left:15px;
	padding-bottom:10px;
	}
	
#sandbox center img {
	margin-left:-50px;
	float:none;
	padding:10px;
	}

	
#sandbox img.nowrap {
	margin-right:auto;
	padding:0px;
	float:none;
	}

.align_left, .left_align {
	text-align:left;
	}

.align_center, .left_center {
	text-align:center;
	}

#sandbox img.align_left, #sandbox img.left_align, #sandbox img.resize {
	float:left;
	margin-right:auto;
	padding:0px;
	padding-right:16px;
	padding-bottom:16px;
	clear:left;
	}

#sandbox img.align_center, #sandbox img.center_align {
	float:none;
	text-align: center;
	display: block;
	margin-left: auto;
    margin-right: auto;
    padding:0px;
	clear:both;
	}

#sandbox img.resize {
	margin-right:auto;
	padding:0px;
	width:33%;
	}


#sandbox h1 {
	font-size:21px;
	margin-left:-20px;
	margin-right:-100px;
	color:#36afcd;
	font-family: arial,helvetica, san-serif;
	font-weight:normal;
	letter-spacing:.5em;
 	text-transform:uppercase;
	width:350px;
	}

h2 {
	font-size:13px;
	margin-left:-20px;
	color:#333;
	font-family: arial,helvetica, san-serif;
	}

h3 {
	font-size:12px;
	color:#36afcd;
	font-family: arial,helvetica, san-serif;
	}

.invisiblelink, .invisiblelink:hover, .invisiblelink:visited {
	color:#333;
	text-decoration: none;
	}

/*	
h1 {
	font-size:15px;
	margin-left:-20px;
	color:#00b1eb;
	font-family: arial,helvetica, san-serif;
	}

h2 {
	font-size:13px;
	margin-left:-20px;
	color:#00b1eb;
	font-family: arial,helvetica, san-serif;
	}

h3 {
	font-size:12px;
	color:#0091cb;
	font-family: arial,helvetica, san-serif;
	}
*/

hr {clear:both;}


/* this is our login box for protected content */

#protected_login {
	margin-top:100px;
	background-color:#ffc;
	}

/* ---------------------------- */
/* everything in the top area   */
div#header {
/*	background-image:url(../sitegraphics/header-strip.gif);*/
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:10;
	}

/* in case you position header items with a table...*/
#header table{
	width: 100%;
	height: 100%;
	}

/* topmenu */	
#header ul { 
	position:absolute; 
	top:54px;
	left:120px;
	list-style: none;
	border:0;
	padding:0;
	margin:0;
	}

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

#header li a { /*most menu styling should go here */
	display:block;
	width:auto;
	border:0;
	margin:0;
	padding:0;
	color:black;
	text-decoration:none;
	font-family:arial,helvetica,san-serif;
	font-weight:bold;
	font-size:14px;
	line-height:16px;
	}

#header li a:hover {
	color:white;
	}

/* topmenu dropdown submenus*/	
#header li ul {
	position:absolute;
	top:auto;
	left:-1.3em; /*the value for ie windows*/
	display:none;
	margin:0;
	border:0;
	padding:0;
	list-style:none;
	}

#header li.flyout>ul { /*dropdown positioning for all other browsers: see ALAP */
	left:auto;
	}

#header ul ul li {
	float:none;
	display:block;
	width:auto;
	height:auto;
	border:0;
	padding:0;
	margin:0;
	}

#header ul ul li a {
	width:180px;
	display:block;
	text-decoration:none;
	color:white;
	border:0;
	margin:0;
	padding:0;
	font-size:12px;
	}

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

#leftcontent, #leftcontent li, #leftcontent ul {
	 border-collapse: collapse;
	 border-spacing: 2px;
	}

div#leftmenu {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	overflow:none;
	background-repeat: repeat-y;
	background-position: 0px 106px;
	z-index:5;
	}
	
div#leftcontent {
	position:relative;
	}

/* the left mainmenu */
#leftcontent ul{
	margin:0;
	padding:0;
	border:0;
	padding-left:60px;
	list-style: none;
	width: auto;
	}

#leftcontent li {
	display:block;
	position:relative;
	width:auto;
	margin:0px;
	padding:0px;
	border:0;
	height:24px;
	}
	
#leftcontent li a {
	display:block;
	width:140px;
	height:24px;
	border:0;
	padding:0;
	color:black;
	text-decoration:none;
	font-family:arial,helvetica,san-serif;
	font-weight:bold;
	font-size:11px;
	line-height:24px;
	}
	
#leftcontent li a:hover{
	color:#a85;
	background-color:#fed;
	}

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

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

#leftcontent ul ul li, #leftcontent ul ul li:hover {
	display:block;
	width:152px;
	height:auto;
	border:0px;
	padding:0px;
	margin:0px;
	margin-left:-17px;
    voice-family: "\"}\""; /*hide everything that follows from ie5 */
    voice-family: inherit;
	margin-left:0px;
	}
	
#leftcontent ul ul li a {
	width:150px;
	display:block;
	text-decoration:none;
	padding:0;
	margin:0;
	height:14px;
	color:black;
	background-color:#fed;
	padding:4px;
	border:1px solid #fff;
	border-bottom:1px solid #333;
	border-right:1px solid #333;
	font-size:11px;
	line-height:12px;
	}

#leftcontent ul ul li a:hover {
	color:red;
	}
	
	/* this makes menus flyout on both IEPC and others */
#leftmenu li:hover ul, #header li:hover ul, #flyoutmenu li.sfhover ul  {
	display:block;
	z-index:199;
	}