/**{
padding: 0;
margin: 0;
}*/
body {
text-align:center; 
/*position: absolute; /*IMPORTANT. This makes sure that when you resize the window the content of the page stays fixed instead of all mashing together.*/
font-size:100%;
}

#pagewrapper {
width: 1000px;
text-align:left;
margin: 0 auto;
}



a {
color:  DimGray;
text-decoration: none;
}

a:hover {
color: Gray;

}

#menu {
float: left;
width: 200px;
height: 450px;
/*border-width: 1px;
border-style: solid;
border-color: #4c4377;*/
margin: 25px 0px 0px 5px;
z-index: 1; /*to make the menu go on top of the main body. For the z-index to work the position has to be set. If you don't want it absolute, just set it to relative.*/
}

#menu img{
	padding-top: 30px;
	padding-left: 20px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}

#menu ul li a {
font: 16px calibri, helvetica, sans-serif;
display: block;
color:  #4c4377;
text-decoration: none;
padding: 25px 10px 25px 10px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #4c4377;

}

#menu h2 {
font: bold 16px calibri, Verdana, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 10px;
color: #fff;
background: #4c4377;
text-transform: uppercase;
}



#menu a:hover, #menu ul li a.menuactive {
color: white;
background-color: #4c4377;
font-weight: bold;
}


/*#innermenu li {
padding: 20px 0px 20px 5px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #4c4377;
}*/

#innermenu ul li li{
padding: 5px;

}


#innermenu ul li li a{
font: bold 14px calibri, Verdana, helvetica, sans-serif;}

#menu li {position: relative;
font: bold 12pt calibri, Verdana, helvetica, sans-serif;}




#menu ul ul ul{
position: absolute;
top: 25%;
left: 100%;
width: 110%;
border-width: 2px;
border-style: solid;
border-color: #4c4377 #4c4377 #4c4377 #fff;
font: bold 12pt calibri, Verdana, helvetica, sans-serif;
padding: 0;

}


div#menu ul ul ul 
{display: none;}

div#menu ul ul li:hover ul 
{display: block;}

#menu  ul ul li:hover ul  a {

padding: 5px 2px 5px 2px;
border: none
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul 
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#mainbody{
/*position: absolute;
 
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;*/
float: right;

top: 200px;
/*left: 60%;*/
width: 730px;
/*border-width: 1px;
border-style: solid;
border-color: #4c4377;*/
text-align: justify;
font: 12pt calibri, Verdana, helvetica, sans-serif;
color:#000;
padding: 10px 20px 10px 20px;
z-index: 0; /*This is VERY IMPORTANT. It makes the body text go underneath the menu so the pop-out links in the menu go over the text. This is the ONLY WAY I have gotten this to work. For some reason this div is set to be on top regardless of whether it's set up here or at the end of the file. Originally this was set to -1 but it doesn't work in firefox2 and none of the links are clickable.*/
}

/*#innermain{
position: relative;
left: -60%;
}*/

#mainbody h1{
position: absolute;
top: -120px;
left: 0;
font: 40px calibri,Verdana, helvetica, sans-serif;
}

#mainbody h2{
	text-align: center;
}

#mainbody a {
color:  #4c4377;
text-decoration: none;
}


#mainbody a:hover {
color: #D00;

/*background: #fff;*/
}

#mainbody li {
padding: 2px;
}

/*#mainbody ul {
font:  11pt calibri, Verdana, helvetica, sans-serif;

}*/

#mainbody div.video_container{
margin-left: 60px;
}

#mainbody .figure{
text-align: center;
font-size: 0.9em;
margin-bottom: 50px;
}

#mainbody .figure_float{

float:left; 
height:auto;
padding-right:10px;
font-size: 0.8em;
color: gray;
max-width: 300px;
}

#mainbody .note
{
	font-size: 0.9em;
}

#resources th{
text-align: right;
min-width: 120px;
padding-right:20px;
}

#resources tr.bottom td, tr.bottom th{

padding-bottom:40px;
}

#resources td.title
{
	text-decoration: underline;
}

span.login{
position: absolute;
left: 900px;
font: 13px calibri,Verdana, helvetica, sans-serif;

}

table.data_table{
text-align: center;
width: 400px;
}

table.data_table th{
background-color: #4c4377;
color: white;
}

table.data_table tr:nth-child(even)
{
	background-color: #CCCCCC;
}

table.data_table tr:nth-child(odd)
{
	background-color: #EAEAEA;
}

table.data_table em
{
	font-weight: bold;
}

#title{
position: absolute;
top: 110px;
left: 250px;
width: 100%;
font: 40px calibri,Verdana, helvetica, sans-serif;

}
#sublink li{
font: bold 11pt calibri, Verdana, helvetica, sans-serif;}

li.currentpage{
/*font: bold 18px calibri, helvetica, sans-serif;*/
color: #D00;


}

input.normal, select.inline, span.indented{
position: absolute;
left: 250px;
}
div.select{
display:inline-block;
}

form{
position: relative;
padding: 0px 0px 0px 75px;
/*font: 15px calibri, helvetica, sans-serif;*/
font: 11pt calibri, Verdana, Arial, Helvetica, sans-serif;
}

input.submit{
position: relative;
}

#notes{
position: relative;
left: 20px;
font: 11pt calibri, Verdana, helvetica, sans-serif;
}

a.left{
position: absolute;
left: 5%;
}

a.right{
position: absolute;
right: 5%;
}
#float
{
position: absolute;
}

#floatOpera
{
position: absolute;
padding: 0px 0px 0px 0px;
}

#radio{
/*position: absolute;*/
padding: 0px 0px 0px 170px;

}

#radio_front{
position: absolute;
left: 35%;

}

/*blockquote{
font-style: italic;
background-color: #E9D3FF;
padding: 20px;
}*/

blockquote {
font-size: 1.1em;
font-style: italic;
width: 500px;
margin: 10px auto 20px auto;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

blockquote:before {
display: block;
content: "\201C";
font-size: 70px;
position: absolute;
left: -10px;
top: -20px;
color: #7a7a7a;
}



.error{
color: red;
}
/* End of 'tookit' */