body {
	background-color: #FFFFFF;
	position: relative;
	left: 1em;
	width: 46em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}
.header {
	height: 13em; 
	/* Change this height if you have a larger banner. Making the height of the header the same means the menu appears in the same place on the screen for all pages. */
}
.content {
	/* IE doesn't render margins & padding the same as other browsers. The border on the right side of the content makes this even more obvious than usual. Compare how a banner lines up with the border & sideimage in FF and IE. If you want the right border to line up exactly with the banner in IE, change the body width from 46em to 45. However, this makes the content narrower than the banner in every other browser. With the current settings, the banner will line up with images on the right side.
	Other options:
	* Change the banner size
	* Center the banner (looks the same in FF but a little weird in IE)
	* Use a small image and h1 for the titles rather than banners, as in BOCE */
	padding-left: 1em;
	padding-right: 1em;
	margin-top: 1em;
	border: thin groove #CCCCCC;
	padding-bottom: 1em;
}
a:link { color: #840000; text-decoration: underline }
a:visited {
	color: #ab5500;
	text-decoration: underline;
}
a:hover { color: #660000 }
a img {border: none; }
h1 {
	/* Use for Page Titles, including Topic Names. The color should be changed for different courses to match the theme. */
	font-size: xx-large;
	font-weight: bold;
	color: #660000;
	text-align: left;
	margin-bottom: 1em;
}
h2  {
	/* Use for titles such as Overview, especially if the banner doesn't include a page title */
	color: #660000;
	font-size: x-large;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
h3  {
	/* Use for section titles */
	color: #ab5500;
	font-size: large;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
}
h4 {
	/* Use for Activity titles */
	color: #840000;
	font-size: large;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
}
h5 {
	/* Use for subsections in Activities or Key Information */
	font-size: medium;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
}

h6 {
	color: #840000;
	font-size: small;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.footer {
	font-size: x-small;
	padding-top: 1em;
	text-align: center;
}
.xsmall {
	font-size: x-small;
}
.margintop {
	margin-top: 1em;
}
.marginleftbottom {
	margin-left: 1em;
	margin-bottom: 1em;
}
.marginrightbottom {
	margin-right: 1em;
	margin-bottom: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}
.margintopbottom {
	margin-top: 1em;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.screenshot {
	text-align: right;
	margin-top: 1em;
	margin-bottom: 1em;
}
.marginright {
	margin-right: 1em;
}
.indent {
	margin-left: 5em;
}
.sidebar {
	background-image: url(../../images/clipart/BOCEsidebar3.gif);
	/*background-image: url(images/clipart/BOCEsidebar3.gif);*/ /*This image will need to be changed for other course themes and colors. Pick something that can be tiled, at least vertically. This one is done with an image (the connections) and a gradiated color which matches the background color. This allows the box to expand horizontally for larger font sizes as well as vertically.*/
	background-repeat: repeat-y;
	float: right;
	width: 13em;
	margin-left: 1em;
	background-color: #CDFFCD;
	padding-left: 3.5em;
	border: medium double #000000;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 0.5em;);
}
.sidebarheading {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: large;
	font-style: normal;
	color: #000066;
	font-weight: bold;
}
caption {
	font-size: medium;
	font-weight: bold;
}
.shaded_content {
	background-color: #CDFFCD;
	margin-right: 3em;
	margin-left: 3em;
	padding: 1em;
	border: medium groove #666666;
}
.extra_nav {
	background-color: #EDF1FB;
	width: 70%;
	border: medium groove #666666;
	padding-right: 0.5em;
	padding-left: 0.5em;
}
.hanging_indent {
	text-indent: -3em;
	margin-left: 3em;
}
.hidden {
	margin-left: -100em;
}
a.hidden {
	margin-left: -100em;
}
.breadcrumb {
	font-family: Georgia, "Times New Roman", Times, serif;
}
.imageright {
	/*Use for images on the right side of the text.*/
	float: right;
	margin-bottom: 1em;
	margin-left: 1em;
}
.imageleft {
	/*Use for images on the left side of the text.*/
	float: left;
	margin-bottom: 1em;
	margin-right: 1em;
}
.imagecenter {
	/*Use for banners or other images you want to center horizontally. This has to be applied to a container around an image (like a <p> or <div>; it won't work if applied directly to the image.*/
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}
.sidebarquote {
	font-family: Georgia, "Times New Roman", Times, serif;
}
.iconindent {
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 5em;
	padding-bottom: 1em;
}
.reading {
/* This makes the reading on the activity pages tall enough that the icon doesn't bump into the activities below. If you're not using the reading icon, you don't need to use this. */
      min-height: 120px;
}

/* Navigation */
/* Requires access.js to work correctly */
/* from http://carroll.org.uk/sandbox/suckerfish/bones2.html */

#navmenu, #navmenu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	height: 2em;
}

#navmenu a {
	display: block;
	border: 0.1em solid #ab5500;
    border-right-color: #840000;
    border-bottom-color: #840000;
    padding: 0 0.75em;
    background: #ffcb46;
    color: #660000;
	font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: auto !important;
	height: 1%; /*For IE*/
	float: none !important; /*For Opera*/
    float: left; /*For IE*/
}

#navmenu a:hover, #navmenu a:focus {
text-decoration:underline;
}

#navmenu li { /* all list items */
	float: left;
	height: 2em;
	display: inline;
	position: relative;
}

#navmenu li ul { /* second-level lists */
	position: absolute;
	width: 20em; /* should control width of secondary lists, but isn't */
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	top: 2.1em; /* top and left are required to line up correctly in IE6 */
	left: 0;
}

#navmenu li ul ul /* third level lists */ { 
	margin: -1em 0 0 -1000em;
	position: absolute;
}

#navmenu li ul ul ul /* fourth level lists */ { 
	margin: -1em 0 0 -1000em;
	position: absolute;
}

#navmenu li ul ul ul ul /* fifth level lists */ { 
	margin: -1em 0 0 -1000em;
	position: absolute;
}

#navmenu li:hover ul ul, #navmenu li.sfhover ul ul,
#navmenu li:hover ul ul ul, #navmenu li.sfhover ul ul ul,
#navmenu li:hover ul ul ul ul, #navmenu li.sfhover ul ul ul ul,
#navmenu li:hover ul ul ul ul ul, #navmenu li.sfhover ul ul ul ul ul {
	margin-left: -1000em;
}

#navmenu li:hover ul, #navmenu li.sfhover ul { /* lists nested under hovered list items */
	margin-left: 0em;
}
#navmenu li li:hover ul, #navmenu li li.sfhover ul, /* hover for lower level menus */
#navmenu li li li:hover ul, #navmenu li li li.sfhover ul,
#navmenu li li li li:hover ul, #navmenu li li li li.sfhover ul,
#navmenu li li li li li:hover ul, #navmenu li li li li li.sfhover ul {
	margin-left: 12em;
	margin-top: -2.1em;
}

ul#navmenu ul li {
  width: 20em;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
/* from http://qrayg.com/learn/code/cssmenus/, with modifications */
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.sfhover a {
  background: #840000;
  color: #ffb000;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.sfhover li a {
  float: none; /* required or IE6 freaks out */
  background: #ffcb46;
  color: #660000;
  width: 20em;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.sfhover li a:hover,
ul#navmenu li.sfhover li.sfhover a {
  background: #840000;
  color: #ffb000;
  width: 20em;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.sfhover li.sfhover li a {
  background: #ffcb46;
  color: #660000;
  width: 20em;
  margin-left:1.75em;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.sfhover li.sfhover li a:hover,
ul#navmenu li.sfhover li.sfhover li.sfhover a {
  background: #ab5500;
  color: #ffcb46;
  width: 20em;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.sfhover li.sfhover li.sfhover li a {
  background: #ffcb46;
  color: #660000;
  width: 20em;
  margin-left:3.5em;
}

/* 4th Menu Hover Persistence */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover li:hover a,
ul#navmenu li.sfhover li.sfhover li.sfhover li a:hover,
ul#navmenu li.sfhover li.sfhover li.sfhover li.sfhover a {
  background: #ab5500;
  color: #ffcb46;
  width: 20em;
}

/* extra positioning rules for limited noscript keyboard accessibility */
/* from http://carroll.org.uk/sandbox/suckerfish/bones2.html, with changes */
#navmenu li a:focus + ul { margin-left: 0; }
#navmenu li li a:focus + ul { margin-left: 1012em; }
#navmenu li li a:focus { margin-left:1012em; width:10.25em; background: #000066; color: #FFF;}
#navmenu li li li a:focus {margin-left: 1012em; width:10.25em; background: #000066; color: #FFF;}
#navmenu li li li li a:focus {margin-left: 1012em; width:10.25em; background: #000066; color: #FFF;}
#navmenu li li li li li a:focus {margin-left: 1012em; width:10.25em; background: #000066; color: #FFF;}
#navmenu li:hover a:focus, #navmenu li.sfhover a.sffocus { margin-left: 0; }
#navmenu li li:hover a:focus + ul, #navmenu li li.sfhover a.sffocus + ul { margin-left: 12em;}
#navmenu li li li:hover a:focus + ul, #navmenu li li li.sfhover a.sffocus + ul { margin-left: 12em;}
#navmenu li li li li:hover a:focus + ul, #navmenu li li li li.sfhover a.sffocus + ul { margin-left: 12em;}
#navmenu li li li li li:hover a:focus + ul, #navmenu li li li li li.sfhover a.sffocus + ul { margin-left: 12em;}


/* special from pages */

/* index.php */
.siteinfo { width: 95%;
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	position:relative;
	left: 1em;
	right: 1em}
.coursebanner {
	/* This has to be applied to a container around an image (preferably a <div>; it won't work if applied directly to the image.*/
    text-align:center;
	margin-top:0px;
	margin-bottom:0px;
	padding-top: 1em;
	padding-right: 0px;
	padding-bottom: 1em;
	padding-left: 0px;
}