/* CSS For the Mellowood web pages */

/* Drop down menu. This is modified from example
	http://www.htmldog.com/articles/suckerfish/dropdowns/
*/

#menu, #menu ul { /* all lists */
    padding: 0;
    margin: 0;
	list-style: none;
    background: #eeeeee url(images/grad.jpg);
	color: Black;
    width: 100%;
}

#menu a {
	display: block;
    border-width: .2em;
	border-style: Solid;
	border-color: Black;
	margin: 0px;
	padding: .2em .8em .1em .8em;
	background: #eeeeee url(images/grad.jpg);
	color: Black;
    font-weight: Bold;
	font-family: serif;
    font-size: 1.4vm;
	text-decoration: none;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
    border-radius: 8px;
}

#menu li { /* all list items */
	float: left;
	width: 9em; /* width needed or else Opera goes nuts */
    zindex: 10;
}

#menu li ul { /* second-level lists */
	position: absolute;
    background: #eeeeee url(images/grad.jpg);
	color: Black;
	width: 8em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
   zindex: 10;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 8em;
    zindex: 10;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
	left: -999em;
    zindex: 10;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
    zindex: 10;
}


/*************************************************/

/* Default style for the main content */

body {
	margin: 0em;
    font-family:helvetica, sans-serif;
	padding: 0px;
	background: #black;
}


/* Some boxes that we use to separate content. */

div.box {
	border: thick  gray  solid;
	background-color: white;
    background-image: url(images/boxgrad.jpg);
	padding: 4%;
	margin: .2em;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
    border-radius: 10px;
}

div.topbox {
	text-align: center;
	background-color: #99bdf4;
	padding: .5em;
	border: .3em solid black;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
    border-radius: 10px;
}


#content {
	text-align: justify;
	background-color: #eeeeee;
	padding: 2em;
	border: .5em solid black;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
    border-radius: 10px;
    background-image: url(images/contentgrad.jpg);
}

/* leftnav and main are used for 2 panel layouts. Use each in div tags. */

#leftnav{
    font-size: 1.5vw;
	float: left;
    width: 18%;
    border: medium  #c0c0c0  solid;
	background-color: #97e3ff;
    background-image: url(images/boxgrad.jpg);
	margin: .2em;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
    border-radius: 10px;
  }

#leftnav p {font-style: italic; font-weight: bolder;}

#main{
    margin-left:20%;
  }


/* Our Headers */

h1, h2, h3, h4, h5 {text-align: center; line-height:80%;  color:#002266; font-family: serif; } 
h1 { font-size: 3vw; }
h2 { font-size: 2.5vw }
h3 { font-size: 1.7vw }
h4 { font-size: 1.6vw }
h5 { font-size: 1.5vw }

/* paragraphs. By default all pg. have a reverse/handing indent. 
   the .med and .sm define small fonts with narrower line spacing and no indent.
*/

p {text-indent: -.5em; padding-left:1em; }

p.med { font-size: 2vm; line-height:70%; text-align:left; text-indent:0em} 
p.sm {  font-size: 1.6vm; line-height:74%; text-align:left; text-indent:0em}
p.medfull { font-size:1.8vm; line-height:96% ; text-align:left; text-indent:0em }

/*********  EOF ***********/