#content {  
  height: auto !important;
  height: 100%;
  min-height: 100%;
  text-align: left;
}

#content,
#width {
  width: 980px;  
  margin: 0 auto;
}

.width { width:980px; margin:0 auto }

img { border:none }

#header {
  position: relative;
  height: 304px;
  color: #C6D2DC;
  background: url(header.jpg) no-repeat top center;
}

#topbar {
  width: 100%;
  position: absolute;
  top: 0; 
  left: 0;  
  padding-top: 3px;  
  font-size: 11px;
  color:#448AAE !important;
}

#topbar a {
  color: #000;
}

#topbar a:hover {
  color: #444;
}


/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/

#mainMenu { 
  	float: right;
  	width: 100%;
  	clear: both;
	margin:0 }

#mainMenu ul {
	list-style: none;
	height:36px;
 	margin: 0;
  	padding: 0 }

#mainMenu li {
  	display: inline;  
 	margin: 0;
  	padding: 0 }

#mainMenu li a {
	float: left;
	margin: 0 5px;
	padding: 0;
	display:block;
	height:36px;
	font-size:18px;
	font-weight:bold;
	font-family:"trebuchet ms", arial, verdana;
	text-decoration: none;
	text-transform: uppercase;
	color: #DCE0E3;
}

#mainMenu li a span {
	padding:7px 20px;
  	float: left;
  	cursor: pointer;
}

#mainMenu li a:hover,
#glossary #glossary_a,
#preface #preface_a,
#workbook #workbook_a,
#text #text_a,
#teachers #teachers_a {
  color: #FFF;
  background: #8D9B81 url(nav_left.gif) repeat-x;  
  
}

#mainMenu li a:hover span,
#mainMenu li a.here span,
#glossary #glossary_a span,
#preface #preface_a span,
#workbook #workbook_a span,
#text #text_a span,
#teachers #teachers_a span
 {
  background: url(nav_right.gif) no-repeat right;  
}

#mainMenu li a.last {
  margin-right: 0;
}

#sub-mainMenu { 
  float: left;
  width: 100%;
  clear: both; 
  margin-bottom: 1em;
}

#sub-mainMenu ul {
	border-top: #98A490 solid 2px;
	border-right: #98A490 solid 2px;
  	margin: 0;
  	padding: 0;
  	position: relative;
  	top: -4px !important;
  	right:17px;
}

#sub-mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#sub-mainMenu li a {
  float: left;
  margin: 0 5px;
  padding: 0;
  font: 11px "trebuchet ms", serif;
  text-decoration: none;
  text-transform: uppercase;
  color: #DCE0E3;
}

#sub-mainMenu li a span {
  float: left;
  padding: 5px 1em;
  cursor: pointer;
}

#sub-mainMenu li a:hover,
#sub-mainMenu li a.here {
  	color: #FFF;
 	text-decoration:underline;  
}

#sub-mainMenu li a.last {
  margin-right: 0;
}


/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/
.intro {
	list-style-type: none; 
	margin-bottom: 0pt; 
	margin-top: 6pt;
}
.chapter {
	color: fuchsia;
}
ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url("foo.gif");
  font: 400 1.3em "trebuchet ms", serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #B5CFE3;
  background: #5F5F5F;
}

/* Active menu item */
.sideMenu li.here {   
  padding: 0;
  color: #B5CFE3;  
}

.sideMenu li.here ins {
  display: block;
  padding: 1px 5px;
  text-decoration: none;
  background: #494949;
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url(light_bullet.gif) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #FFF;
  background: #575757 url(light_bullet.gif) no-repeat 10px 0px;
}

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  padding: 20px 0px;
}




/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/

#footer {
  	width: 100% !important;
  	clear: both !important;
  	padding: 12px 0 !important;
  	background: #717d69 url(footer_bottom.gif) repeat-x !important; }
#footer p {
	margin: 0 auto;
	padding: 12px 30px;
}
#footer #copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif !important;
	font-size:11px !important;
  	width: 100%;
	margin:0 auto !important;
  	text-align:center !important; 
  	font-size: 10px !important;
  	text-transform: uppercase !important;
  	color: #FFF !important }

#footer #copyright a {
  	text-decoration:underline !important;
  	color: #E3EFDC !important;
  	font-weight:bold !important }

#footer #copyright a:hover {color: #FFF !important }


/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width66 {
  width: 66%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32%;
}

.width25 {
  width: 24.7%;
}



/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}

.alignMiddle {
  vertical-align: middle;
}

.alignTop {
  vertical-align: top;
}

.alignBottom {
  vertical-align: bottom;
}



/**************************************************************
   Margin/Padding Classes to space out boxes
 **************************************************************/

.marginLeft { margin-left: 15px }
.marginRight { margin-right: 15px }
	.marginRight-7 { margin-right:7px }
.marginTop { margin-top: 15px }
.margin { margin: 12px 15px 10px 15px }

.paddingTop { padding-top: 15px }
.last{
	float:right;
}


/**************************************************************
   Templates
 **************************************************************/


.sidebar h1, .main-window h1 {
	margin:0 0 15px 0 !important;
	font-size: 18px;
	letter-spacing: -1px;
	color: #FFF;
	background:none !important
}
.main-window h1, .main-window h2 {
	padding-top: 10px;
}
.leftColumn h1 {
	font-size: 14px !important;
}

.sidebar h2, .main-window h2 {
	margin:0 0 15px 0 !important;
	padding:0 !important;
}

.sidebar p, .main-window p {
	margin:0 !important;
	padding:10px 0;
}

.sidebar a, .main-window a {
	color:#B5CFE3;
}


/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.relative {
  position: relative;
}

/* Start hide from IE-mac \*/
.heightFix {
  height: 1%;
}
/* End hide from IE-mac */

.small {
  font-size: 0.8em;
}

.big {
  font-size: 1.2em;
}

.bold {
  font-weight: bold;
}

.uppercase {
  text-transform: uppercase;
}

.green {
  color: #A1FF45;
}

.red {
  color: #EA1B00;
}

.grey {
  color: #575757;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}

.whiteBg {
  background: #FFF;
}

.greyBg {
  background: #575757;
}

.darkGreyBg,
.footerDarkGreyBg {
  background: #494949;
}






/* NEW CSS */

.sidebar {
	width:239px;
	border-right:1px solid #4c4c4c;
	margin:0;
	padding:0 }
	
	.sidebar span.top {
		display:block;
		width:209px;
		padding:15px;
		background:#1a1a1a url("sidebar_top.gif") no-repeat top; }
		
.main-window {
	width:739px;
	margin:0; padding:0;
	padding-left: 15px;
	background:#313131 url("main_top.gif") no-repeat top;
	 }
	
	.main-window span.top {
		display:block;
		width:699px;
		padding:20px;
/*		background:#313131 url("main_top.gif") no-repeat top;*/
}
#page .chapter {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}

#page .chapter p {padding:5px 0 0 0; margin:0;}

#page .chapter p.bold {font-weight:bold;}

#page .chapter h2 {margin:0; padding:0;}



/* unclicked style div.more */

#page div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}

#page div.more i.hide {display:none;}

#page div.more p {display:none;}

#page div.more img {display:none;}



/* clicked style div.click */

#page div.click i.show {display:none;}

#page div.click i.hide {display:block;}

#page div.click p {display:block;}

#page div.click img {display:block; float:left; padding-right:10px;}