/*Main styles - shared styles, other style sheets build on these components*/

/*html elements*/
body {
	margin-top: 0px;
	margin-left: -100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	
}

p, li  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	margin-top: 0px;
	color:#626262;
}

h1  {
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top: 0px;
	margin-bottom:8px;
}

h2  {
	font-size: 90%;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top: 0px;
	margin-bottom:5px;
}

a:link  {
	color:#2A5B98;
	text-decoration:underline;
}

a:visited  {
	color:#898989;
	text-decoration:underline;
}

/*positioning divs*/
#wrapper  { /*holds all the divs and is needed to add the background mandala on the left side
of page*/
	width:1000px;
	margin-right: auto;
	margin-left: auto;
}

#mandalaLeft  { /*holds images of mandala backgrounds on left of page. Must change the image
for every template*/
	width:150px;
	float:left;
}

#textWrapper  { /*holds all the content divs. topnav, topBanner, titlebar, sidebar, textarea and bottominfo*/
	float:right;
	width:850px;
}

#topNav  { /*holds the top navigation items*/
	width: 850px;
	height:25px;
}

#topBanner  { /*holds the logo and the drop down menus*/
	width: 850px;
	height:74px;
	background-image: url(../images/bkgr_topBanner.jpg);
	background-color: #DFDDDE;
	background-repeat: no-repeat;
}

#logo  { /*holds the logo. You need this div in order for Explorer 6 to correctly place the topMenus
on the right of the page*/
	width: 393px;
	height:74px;
	float:left;
}

#topMenus  { /*holds the drop down menus at the top*/
	width:350px;
	height:74px;
	float:right;
	padding-top: 20px;
	padding-bottom: 0px;
}

/*I needed to add these divs around the dropdown forms, otherwise they would just stack
on top of each other rather than sit side-by-side*/

.formRight  { /*holds the left dropdown menu form*/
	float:right;
}

.formLeft  { /*holds the right dropdown menu form*/
	float:left;
}

#titleBar  { /*holds the titles for each page. Titles are editable and sit in a <p>*/
	width: 843px;
	height:24px;
	border: 1px solid #FFFFFF; 
}

#titleBar p {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	font-size: 14px;
	margin-bottom: 0px;
	margin-top: 3px;
	padding-left: 5px;
}

#sidebar  { /*holds the sidebar info. This is the base element. Additional characteristics are
added by the other style sheets*/
	width:223px;
	float:left;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;	
	min-height: 300px; 
}

#sidebar p  {
	font-size: 80%;
	font-weight: bold;
	color:#424242;	
}

#sidebar ol  {
	list-style-position: outside;
}

#sidebar li  {
	font-size: 80%;
	font-weight: bold;
	color:#424242;
	line-height: 140%;
		
}

#sidebar a:link  {
	color:#424242;
	text-decoration: none;
	
}

#sidebar a:visited  {
	color:#727272;
	text-decoration: none;
}

#sidebar a:hover  {
	color:#999999;
	text-decoration:underline;
}

#textareaTop  { /*holds the top mandala. This needed to be different from those
pages that hold text. You don't want any padding on this one*/
	width:614px;
	float:right;
	background-color:#FFFFFF;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	height: 614px;
	padding: 0px;
}

#textarea  { /*holds the text*/
	width:584px;
	padding-left:15px;
	padding-right:15px;
	padding-top:20px;
	padding-bottom:20px;
	float:right;
	background-color:#FFFFFF;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	min-height: 600px;
}


#bottominfo  { /*holds the address info at the bottom*/
	width:616px;
	float:right;
	padding-top: 5px;
	color: #FFFFFF;
	text-align: right;
}

#bottominfo  p  {
	font-size: 70%;
	color: #FFFFFF;
}

#bottominfo  a:link  {
	color: #FFFFFF;
	text-decoration:underline;
}

#bottominfo  a:visited  {
	color: #FFFFFF;
	text-decoration:underline;
}

.title {
	font-weight: bold;
}
h2.principle {
	font-size: 85%;
} .caption {
	font-style: italic;
}
.journaltitle {
	font-style: italic;
}
#wrapper #textWrapper #textarea #form1 td {
	padding: 5px;
	font-size: 75%;
	color:#626262;
	vertical-align: top;
}
#wrapper #textWrapper #textarea #form1 td p {
	padding: 5px;
	font-size: 100%;
	color:#626262;
}