html {
	height: 100%;
	margin: 0px;
	padding: 0px;	
}

body { 
	margin: 0px;
	padding: 0px;	
	font-family: Verdana,Arial,Helvetica,sans-serif; 	
	background-image:url(../images/bg.jpg);
	background-color: #F9EAC3;	
	background-size: cover;
	background-repeat:repeat-y;
	background-attachment: fixed;
	font-size: 100%;
	display;static;
	min-width:270px;
}


#container {
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	margin-top:30px;
	text-align:center;
	width:100%;
	padding: 0px;
	max-width:1024px;
}

/*	background-image:url(../images/home_page_top.png);*/

 a {
	 color:#26969B;
	 text-decoration:none;
	 font-weight:bold;
 }

 a:hover{
	 color:#A79E65;
	 text-decoration:underline;
	 font-weight:bold;
 }

.logged_div_container {
	display:inline-block;
	text-align:right;
	width:930px;
	margin:-30px 0px -35px 0px;
}

.logged_div {
	transition: all 0.5s ease;
	float:right;
	text-align:right;
	line-height:25px;
	padding:10px 26px;
	border-radius:12px;
}

.logged_div:hover {
	transition: all 0.5s ease;
	background: rgba(0, 0, 0, 0.5);
  color:#ffffff;
}

.logged_div:hover a {
	transition: all 0.5s ease;
  color:#ffffff !important;
}

.logged_div p {
	margin:0;
	padding:0;
	font-size:95%;
	font-weight:bold;
}

.logout_button {
	margin:0;
  padding:5px 9px;
  margin-right:-9px;
  margin-left:3px;
  font-size:11px;
  color:#000000;
  border-radius:3px;
}

.logout_button:hover {
  color:#ffffff;
  text-decoration:none;
  background-color:#32A1CA;
}

.login_div {
	display:inline-block;
	text-align:right;
	width:915px;
	margin:-15px 0px -15px 0px;
}

 .login_button {
 	margin-left: 10px;
	background-color:#2532A9;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-size:12px;
	font-weight:bold;
	padding:9px 20px !important;
	border-radius:3px;
	text-decoration:none;
}
.login_button:hover {
	background-color:#384CFF !important;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1.0;
	color:#ffffff;
	text-decoration:none;
}

#page_top, #unit_links, #home_page_content, #page_bottom {
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	width:990px;	
	max-width:990px;
	min-width:900px;
	border:solid 0px #dddddd ;
}

#copyright {
	clear:left;
	float:left;
	width:400px;
	font-size:60%;
	margin-top:30px;
	margin-bottom:-10px;
}

#copyright_logged {
	clear:left;
	float:left;
	width:350px;
	font-size:60%;
	margin-top:45px;
	margin-bottom:-25px;
}

#copyright a, #copyright_logged a {
	margin-right:8px;
}

#page_top{
	margin:0px;
	padding:0px;
	background-repeat:no-repeat;
  border:solid 0px;
  font-size:90%;
  height:200px;
}

#unit_links_left_end {
		background-image:url(../images/unit_link_bg_left_end.png);
		background-repeat: no-repeat;
		background-position: bottom left;
		width: 8px;
		float: left;
		height: 22px;
    margin-top:9px;
		margin-left:26px;
	}

#unit_links {
		text-align:top;
    text-decoration:none;
    font-size:80%;
		background-image:url(../images/unit_link_bg.png);
		background-position: top right;
		background-repeat: no-repeat;
		height:22px;
		padding-top:3px;
    margin-top:8px;
		margin-left: 25px; 	
	}

#nav_path {
	margin-top:0px;
	padding:4px;
	text-align:left;
	font-style: italic;
	color: #ffffff;
	font-weight:600;
	font-size:110%;
}

#home_page_content {
	margin-top:40px;
	padding-top:0px;
	display:block;
	text-align:center;
	font-size:90%;
	clear:both;
}

#about_this_resource{
	font-size:80%;
	color: #1F1B16;
}

#about_this_resource:hover {
	color:#32A1CA;
	text-decoration:none;
}


.about {
	float:right;
	margin-right:56px;
	margin-top:-10px;
}

#page_top h1, h2, h3, h4 {
	text-align:left;
}

	/*
	  opacity:0.7;
	*/

#page_top h1{
	margin-top:30px;
	margin-left:20px;
	text-align:left;
	font-size:130%;
	font-weight:600;
}

#page_top p {
	color:#ffffff;
	font-weight:400;
	margin-top:10px;
	margin-right:20px;
	font-size:100%;
	margin-left:470px;
}
#title_image {
	margin-top: 5px;
	float:left;
  width: 400px;
  margin-bottom:3px;
}

#logo_image {
	border: 0px
	solid #000000;
	margin-top:20px;
	float:right;
	width:380px;
}

#logo_mobile {
	display:none;
}

#page_top #acknowledgements {
	font-size:80%;
	text-decoration:italic;
	float:right;
	padding:2px;
	border:0px solid #cccccc;
	text-align:left;
	background-color:none;
	color:#223333;
	
}
#page_top #acknowledgements .acklink {
	background-color:#ffffff;
	margin:0px;
	padding:0px;
	float:left;
}

#page_top #acknowledgements a{
	color:#888888;
	text-decoration:none;
	background-color:none;
}	

#page_top #acknowledgements a:hover{
	color:#446666;
	background-color:underline;	
}


#page_top #acknowledgements img{
	border:none;
}	



#page_top h2 {
	color:brown;
	font-weight:400;
	padding-top:0px;
	padding-right:20px;
	padding-left:20px;
	margin-top:25px;
	margin-left:40px;
	margin-right:20px;
	padding-bottom:0px;
	font-size:220%;
	float:left;
	border:5px solid white;
	font-weight:800;
	background-color:clear;
}

#page_top h2 #home {
	font-size:80%;
	
}

#page_top h3 {
	margin-top:-5px;
	color:#404060;
	font-weight:600;
	font-size:90%;
	margin-left:470px;
}

#page_top h4 {
	margin-top:-15px;
	color:#404060;
	font-weight:600;
	font-size:70%;
	margin-left:470px;
}


#page_content h1 {
	font-size:150%;
	color:#404060;
	font-weight:800;
}

#copyright a, #copyright_logged a, #unit_links a, #unit_links a:visited {
	text-decoration:none;
	color:#000000;
	padding:3px;
}

#nav_path a{
	text-decoration:none;
	color:#ffffff;
	padding:3px;
}


#copyright a:hover, #copyright_logged a:hover, #unit_links a:hover{
	color:#B22222;
	text-decoration:underline;
}

#nav_path a:hover{
	color:yellow;
	text-decoration:underline;
}

.invisibleLink {
	visibility:hidden;
}

.instructionalContent {
	margin-left: 5px;
}

.module {
	margin:3px;
	display:inline-block;
	border-radius:10px !important;
}

.link_image {
	border:solid 1px rgba(01,01,01,0.9);
	display:inline-block;
	height:125px;
	width:220px;
	padding-top:0px;
	margin:5px;
	background: rgba(01,01,01,0.7) 70%;
	position:relative;
	zoom:1; 
	*display: inline;
	line-height:150%;
	border-radius: 10px !important;
}

.link_image img {
	border-radius:10px 10px 2px 2px !important;
}

.link_image:hover {
	background: rgba(01,01,01,0.9) 90%;
}

.link_image a:hover {
	color:#ffffff;
	text-decoration:none;
}

.link_image a {
	color:#dedede;
	text-decoration:none;
	font-size:85%;
	top:20px;
	line-height:25px;
	border-radius:10px !important;
}

.imgTrans{
	filter:blendTrans(duration=0.6);
	border:0px;
	border-radius:10px 10px 2px 2px !important;
	display:block;
}

.imgTransAppear{
	filter:blendTrans(duration=0.6);
	border:0px;
	border-radius:10px 10px 2px 2px !important;
	display:none;
}

.module:hover .imgTrans {
	display:none;
}

.module:hover .imgTransAppear {
	display:block;
}

.td_center, .td_center tr td {
  	padding:0px;
  	margin:0px;
  	border:none;
  	height:23px;
  	vertical-align: middle;
  	line-height:15px;
  	width:100%;
  }

#page_bottom {
	padding:12px 0px;
	margin:0px;
	height:20px;
	font-size:60%;
}

#leftalign {
	float:left;	
}

#rightalign {
	float:right;	
}

.nestedMenu {
		padding:0;
		margin-left:5px;
	}
		
	.menuSub {
		list-style: circle;
		margin:0;
		padding:0;
		margin-left:10px;
	}
	
	.menumain {
		list-style: square;
		margin:0;
		padding:0;
		margin-left:0px;
	}
	
	.menu {
		list-style: circle;
		margin:0;
		margin-left:20px;
		padding:0;
	}
	
	#menus {
		margin:0;
		margin-left:20px;
	}
	
	#page_content #left_page #menus li{
	  height:25;
	  background-color: 
  }
	
	#page_content #left_page .menufolder {
		margin:0;
	  padding:5;
	  height:25;
	  list-style: square;
	}
	
	#page_content #left_page .menufolderopen {
		margin:0;
	  padding:5;
	  height:25;
	  list-style: disc;
	}
	
	.current_unit {	
		padding-left:3px;
		padding-right:3px;
		color:#B22222;
		font-weight:bold;
	}
	
	.imgdivbig {
		float:right;
		width:290px;
		padding:3px;
		font-size:80%;
		border:#CCCCCC solid 1px;
		margin-left:5px;
		background-color:#F9F9F9;
		display:none;
	}
	
		
	#main_content {
	  position:relative;
	  padding:10px;
	  padding-top:1px;
	  background-color:#ffffff;
	  min-height:600px;
	  opacity:none;
	}
	
	
	#control_buttons{
		font-size:75%;
		float:right;
		margin-right:25px;
		margin-top:7px;
  }

  #style_buttons{
		font-size:85%;
		float:right;
		margin-right:5px;
		margin-top:10px;
}

	
  #control_buttons{
		font-size:75%;
		text-align:right;
		margin-right:0px;
		margin-top:0px;
		margin-left:92%;
		margin-bottom:20px;
		width:60px;
}	

	#style_buttons span, #control_buttons span{
		background-color:#eeeeee;
		border:solid 1px #dddddd;
		margin-left:5px;
		padding-left:5px;
		padding-right:5px;
		cursor:hand;
	}
	
  	
	#page_heading_jff {
		background-image:url(../images/just_for_fun.jpg);
		width:100%;
		height:40px;
		background-repeat:no-repeat;
		color:yellow;
		background-color:yellow;
  }	
  
  #page_heading_jff h2 {
		text-align:center;
	}	
	
	#page_heading {
		padding:0px
		margin:0px;
		background-image:url(../images/bluegrad.jpg);
		width:100%;
		height:30px;
		background-color:#CCCCCC;
		margin:5px;
  }	
  
	#page_heading h2 {
		padding:0px;
		margin:0px;
		padding-left:10px;
		padding-top:5px;
		color:#224466;
		float:left;
	}

	
 #control_buttons a, #style_buttons a, #take_awayable a, 
 #GoToButton a, .slide_content a, #word_assn a, .content_link a {
		color:#0000ff;
  }

 #control_buttons a:hover, #style_buttons a:hover, 
 #take_awayable a:hover, #GoToButton a:hover, .slide_content a:hover, #word_assn a:hover, .content_link a:hover {
		color:#444488;
		text-decoration:underline;
 }
 
 /** popup styles **/
 
	#popup_page_content #right_page {
		background-color:#222233;
		text-align: left;
		font-size:90%;
		margin-left: 0px;
		padding-left: 10px;
		padding-right: 10px;
		margin-top: 5px;
		border: none #000000 1px;
		width: auto;
		min-height: 600px;
	}
	
 	#popup_main_content {
	  position:relative;
	  padding:10px;
	  margin-bottom:10px;
	  background-color:#ffffff;
		min-height: 520px;
	}
	
	td, th {
		margin:0px;
		padding:0px;
		border:solid 1px;	
	}
	
		
	table {
		border: #ECECEC 1px solid;
		padding:2px;
		margin:0px;
		margin-left:20px;
	}
	
	.greyHeader {
		background-color:#D3D3D3;
    text-align:center;
    padding:8px;
    border-style:solid;
		border-width:1px;
		border-color:black;
	}
	
	.tableContent {
		margin-left:15px;
		border-style:solid;
		border-width:1px;
		border-color:black;
		border-collapse:collapse;
		padding:5px;
		font-size: 95%;
	}
	
	.glossary_table {
		border: #000000 1px solid;
		padding:2px;
		margin:0;
		font-size:80%;
		border-style:none;
	}
	
	
	.table_row_light {
		background-color:#FFFFFE;

	}
	
	.table_row_dark {
		background-color:#F2EEEA;

	}
	
	.table_header {
		background-color:#FFFFFF;
		border-bottom:#000000 2px solid;
		margin-bottom:10px;
		color: #224466;
		border-style:none;
	}
	
	.glossary_table_data {
		border-style:none;
		padding-left: 5px;
	}
	
	.slide_image {
		height:200px;
	  width:250px;
	}
	
	
@media only screen and (max-width : 1000px) {
	
	#container {
		margin-top:0px;
		width:auto;
		position: absolute;
		overflow: hidden;
	}
	#page_top, #unit_links, #home_page_content, #copyright, #copyright_logged, #page_bottom {
		margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
		width:auto;	
		min-width:auto;
	}
	#title_image {
		padding:0px;
		margin:0px;
		margin-top: 20px;
		float:none;
		margin-right:60px;
 	  width: 300px;
	}
	#logo_image {
		padding:0px;
		margin:0px;
		margin-top:0px;
		float:none;
		width:280px;
		margin-left:60px;
		margin-bottom:20px;
	}
	.login_div {
		display:inline-block;
		text-align:right;
		width:710px;
		margin:-35px 0px 10px 0px;
	}
	.login_button {
 	  margin:0px 5px 0px 5px;
 	  padding:9px 25px !important;
  }
  .logged_div_container {
		width:710px;
		margin:-45px 0px 0px 0px;
	}
	.logged_div {
		line-height:10px;
		padding:8px 15px;
	}
	.logged_div p {
		float:left;
		margin:0px;
		padding:7px 8px;
	}
	.logout_button {
		float:left;
		margin:0px;
		padding:8px 9px;
		border-radius:5px;
	}
	#copyright {
		width:370px;
		margin-top:10px;
		margin-bottom:-20px;
		margin-left:-8px;
		float:left;
	}
	#copyright_logged {
		margin-top:18px;
		margin-bottom:-20px;
		margin-left:-8px;
	}
	#copyright a, #copyright_logged a {
		margin-right:5px;
		float:left;
	}
	.about {
		float:none;
		margin:0px;
		margin-left:550px;
		margin-top:-30px;
		margin-bottom:10px;
	}
	.module {
		margin:5px;
	}
	#page_bottom {
		height:auto;
  }
	#leftalign {
		padding:10px;
		width:100%;
		float:none;
	}
	#rightalign {
		width:100%;
		float:none;
	}
}

@media only screen and (max-width : 765px) {
	#title_image {
		margin-right:50px;
	}
	#logo_image {
		margin-left:50px;
	}
	.about {
		margin-left:530px;
		margin-bottom:20px;
	}
	#copyright {
		margin-left:0px;
	}
	#copyright_logged {
		margin-top:15px;
		margin-left:0px;
	}
	.module {
		margin:0px;
	}
}

@media only screen and (max-width : 725px) {
	body { 
		background-size: 200%;
	}
	#title_image {
		margin-top: 25px;
		margin-right:20px;
 	  width:260px;
	}
	#logo_image {
		width:250px;
		margin-left:20px;
		margin-bottom:10px;
	}
	.login_div {
		text-align:center;
		width:auto;
		margin:-35px 0px 10px 0px;
	}
	.logged_div_container {
		width:auto;
		text-align:center;
		margin:-45px 0px 0px 0px;
	}
	.logged_div {
		text-align:center;
	}
	#copyright {
		margin-top:5px;
		margin-bottom:-10px;
		float:none;
	}
	#copyright_logged {
		margin-top:45px;
		margin-bottom:-5px;
		float:none;
	}
	#copyright a, #copyright_logged a {
		float:none;
	}
	.about {
		margin-top:-36px;
		margin-left:320px;
		margin-bottom:15px;
	}
	.module {
		margin:5px;
	}
}

@media only screen and (max-width : 600px) {
	#title_image {
		margin-top: 30px;
		margin-right:10px;
 	  width: 240px;
	}
	#logo_image {
		width:230px;
		margin-left:10px;
	}
	.about {
		margin-top:-50px;
	}
}

@media only screen and (max-width : 530px) {
	#title_image {
		margin-top: 30px;
		margin-right:10px;
 	  width: 220px;
	}
	#logo_image {
		width:210px;
		margin-left:10px;
		margin-bottom:10px;
		border-radius:0px !important;
	}
	.login_div {
		margin:-50px 0px 10px 0px;
	}
	.logged_div_container {
		margin:-55px 0px 0px 0px;
	}
	.about {
		margin-top:-55px;
		margin-left:260px;
		margin-bottom:15px;
	}
	.module {
		margin:0px;
		border-radius:0px !important;
	}
	.link_image {
	width:130px;
	height:74px;
	margin:3px;
	line-height:100%;
	display:table;
	border-radius:0px !important;
  }
  .link_image img {
		border-radius:0px !important;
	}
  .td_center, .td_center tr td {
  	padding:0px;
  	margin:0px;
  	border:none;
  	height:30px;
  	vertical-align: middle;
  	line-height:15px;
  	width:100%;
  }
  .imgTrans {
  	width:130px;
  	border-radius:0px !important;
  }
  .imgTransAppear {
  	width:130px;
  	border-radius:0px !important;
  }
  .link_image a {
	font-size:66%;
	border-radius:0px !important;
  }
}

@media only screen and (max-width : 485px) {
	#title_image {
		margin-top: 30px;
		margin-right:0px;
 	  width: 210px;
	}
	#logo_image {
		width:200px;
		margin-left:0px;
		margin-bottom:10px;
	}
}

@media only screen and (max-width : 445px) {
	#title_image {
		margin-top: 20px;
		margin-right:0px;
 	  width: 340px;
	}
	#logo_image {
		display:none;
	}
	#logo_mobile {
		display:block;
	}
	#logo_mobile img {
		width:320px;
	}
	.login_div {
		margin:10px 0px 10px 0px;
	}
	.logged_div_container {
		margin:0px 0px 5px 0px;
	}
	.about {
		margin-top:5px;
		margin-left:145px;
		margin-bottom:8px;
		font-size:15px;
	}
	.module {
		margin:5px;
	}
}

@media only screen and (max-width : 385px) {
	#title_image {
		margin-top: 20px;
		margin-right:0px;
 	  width: 310px;
	}
	#logo_mobile img {
		width:320px;
	}
	.login_div {
		margin:0px 0px 10px 0px;
	}
	.logged_div_container {
		margin:-15px 0px 5px 0px;
	}
	.about {
		margin-top:-10px;
	}
}

@media only screen and (max-width : 340px) {
	#title_image {
		margin-top: 20px;
		margin-right:0px;
 	  width: 290px;
	}
	#logo_mobile img {
		width:290px;
	}
	.about {
		margin-top:-22px;
		margin-left:135px;
		margin-bottom:12px;
	}
	.module {
		margin:0px;
	}
}

@media only screen and (max-width : 318px) {
	#title_image {
		margin-top: 20px;
		margin-right:0px;
 	  width: 270px;
	}
	#logo_mobile img {
		width:270px;
	}
	.about {
		margin-top:-35px;
	}
}

@media only screen and (max-width : 298px) {
	#title_image {
		margin-top: 20px;
		margin-right:0px;
 	  width:240px;
	}
	#logo_mobile img {
		width:240px;
	}
	.about {
		margin-top:-45px;
		margin-left:80px;
	}

	.link_image {
		height:125px;
		width:220px;
		padding-top:0px;
		margin:5px;
	}
	.link_image a {
		font-size:85%;
	}
	.link_image img {
		width:100%;
	}
	.module {
		margin:5px 0px;
	}

	.td_center, .td_center tr td {
  	height:23px;
  	line-height:15px;
  	font-size:95%;
  }


}