/* 
This is the additional CSS file for the Global Lab Site 

This file assumes that YUI reset/grids is already in place

Any "sized" block element should consist of a container and a content element

- Put widths, heights and positions on the "container" elements

- Put borders and padding on the "content" elements


	Pixel to Percentage Relations 
	
	PX	%
	---  ----
	10	77
	11	85
	12	93
	13	100
	14	107
	15	114
	16	122
	17	129
	18	136
	19	144
	20	152
	21	159
	22	167
	23	174
	24	182
	25	189
	26	197
	27	208
	28	215
	29	223
	30	231
	31	238
	32	246
	33	254
	34	262
	35	269
	36	277
	37	285
	38	292
	39	300
	40	308

	WinFF  13px/em
	WinIE  13.33px/em
	


*/


body {
	background-color: #CDE8DD;
	color: #129561;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

img {
	border: 0px;
}


.filmstrip img {
	padding: 3px;
}






#sidebar-container {
	background-color: #7EC5A9;
	background-image: url(/images/global-lab-globes.gif);
	background-repeat: no-repeat;
	background-position: 4px 6px;
}

#sidebar-content {
	padding: 165px 0px 25px 0px;
}


#sidebar-content li {
}

#sidebar-content li a, #sidebar-content li strong {
	display: block;
	text-align: left;
	background-color: #EAF5F1;
	padding: 5px;
	margin: 1px 0px;
	text-decoration: none;
	font-weight: bold;
	color: #129561;
	font-size: 120%;
}

#sidebar-content li a.nav-selected, #sidebar-content li strong.nav-selected, #sidebar-content li a:hover {
	background-color: #129561;
	color: #ffffff;
}

#sidebar-content li .join a.nav-selected, 
#sidebar-content li .join strong.nav-selected,  
#sidebar-content li .join a:hover,
#sidebar-content li .bioindicators a.nav-selected, 
#sidebar-content li .bioindicators strong.nav-selected,
#sidebar-content li .bioindicators a:hover
{
	background-color: #E40038;
	color: #ffffff;
}

#sidebar-content li .snapshot a.nav-selected, 
#sidebar-content li .snapshot strong.nav-selected,  
#sidebar-content li .snapshot a:hover,
#sidebar-content li .map a.nav-selected, 
#sidebar-content li .map strong.nav-selected,  
#sidebar-content li .map a:hover,
#sidebar-content li .weather-climate a.nav-selected, 
#sidebar-content li .weather-climate strong.nav-selected,
#sidebar-content li .weather-climate a:hover
{
	background-color: #139A68;
	color: #ffffff;
}

#sidebar-content li .contexts a.nav-selected, 
#sidebar-content li .contexts strong.nav-selected,  
#sidebar-content li .contexts a:hover,
#sidebar-content li .looking-future a.nav-selected, 
#sidebar-content li .looking-future strong.nav-selected,
#sidebar-content li .looking-future a:hover
{
	background-color: #129561;
	color: #ffffff;
}

#sidebar-content li .sun-plants a.nav-selected, 
#sidebar-content li .sun-plants strong.nav-selected,  
#sidebar-content li .sun-plants a:hover
{
	background-color: #F27E1B;
	color: #ffffff;
}


#languages-container {
	margin: 20px 0px 0px 0px;
}

#languages-content {
	padding: 5px;
}
	
	/*.language-item img {
		border: 2px solid #7EC5A9;
	}
	
	#sidebar-content #languages-container #languages-content span.language-item-selected li {
		border: 2px solid #990000;
	}*/






#doc3 {
	margin: 0px;
}



.yui-t1 #yui-main .yui-b {
	margin-left: 12em;
}

.yui-t1 .yui-b {
	width: 12em;
}












#topbar-container {
	width: 100%;
}

#topbar-content {
		border: 12px solid #000099;
}





	
	#site-info-container {
		height: 60px;
		background-color: #7EC5A9;
	}
	
	#site-info-container.en {
		background-image: url(/images/global-lab-word-en.gif);
		background-repeat: no-repeat;
		background-position: 5px 15px;
	}
	
	#site-info-container.ru {
		background-image: url(/images/global-lab-word-ru.gif);
		background-repeat: no-repeat;
		background-position: 5px 15px;
	}
	
	
	
	#site-info-content {
	}


	#login-info-container {
		text-align: right;
		height: 60px;
		position: relative;
	}
	
	#login-info-content {
		margin-right: 25px;
	}

	
	
		#page-chapter-tab-container {
			position: absolute;
			right: 25px;
			bottom: -4px;
		
		}
		
		#page-chapter-tab-content {
		}
		
		#page-chapter-tab-content ul {
			list-style-type: none;
			padding: 0px;
			margin: 0px;
		}
	
	



#page-container {
	position: relative;
	width: 100%;
}

#page-content {
	position: relative;
	text-align: left;
	margin-right: 25px;
	background-color: #ffffff;
}

#page-container.lessons-cover #page-content {
	background-image: none;
	height: 600px;
}

#page-container .yui-u {
	background-image: url(/images/global-lab-page-crease.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #FFFFFF;
	min-height: 400px;
}

#page-container .first {
	background-image: none;
	background-color: #ffffff;
}

#page-container.site-home .yui-u {
	background-color: #9FB3D8;
	background-repeat: no-repeat;
	background-position: left top;
	height: 600px;
}

#page-container.site-home .first {
	background-image: none;
	background-color: #ffffff;
}

#page-container.lessons-cover .yui-u {
	background-color: #9FB3D8;
	background-image: url(/images/book-cover-right-small.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 600px;
}

#page-container.lessons-cover .first {
	background-image: none;
	background-color: #ffffff;
}

#page-content h1 {
	font-size: 152%;
}

#page-content h2 {
	font-size: 136%;
}

#page-content h3 {
	font-size: 122%;
}

#page-content h1, 
#page-content h2, 
#page-content h3, 
#page-content h4, 
#page-content h5, 
#page-content h6 {
	color: #129561;
	font-weight: bold;
	margin: 0em 0em 1em 0em;
}

#page-content p {
	font-size: 122%;
	margin: 0em 0em 1em 0em;
}

#page-content td {
	/*font-size: 122%;*/
}

#page-content ul {
	padding-left: 35px;
	margin: 0em 0em 1em 0em;
}

#page-content li {
	font-size: 122%;
	margin: 0em 0em 1.2em 0em;
	list-style-type: disc;
}


.page-content-box {
	padding: 10px;
}


.page-crease {
	background-image: url(/images/global-lab-page-crease.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #FFFFFF;
	height: 400px;
}

.site-home td {
	background-color: #CDE8DD;
	background-repeat: no-repeat;
	background-position: right top;
	height: 600px;
}

.site-home .page-crease {
	background-color: #9FB3D8;
	background-repeat: no-repeat;
	background-position: left top;
	height: 600px;
}

.site-home .page-content-box {
	background-color: #CDE8DD;
}

#bd.ru .lessons-cover .page-crease {
	background-color: #9FB3D8;
	background-image: url(/images/book-cover-right-small.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 600px;
}

#bd.en .lessons-cover .page-crease {
	background-color: #9FB3D8;
	background-image: url(/images/book-cover-right-small-en.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 600px;
}

#page-flip-previous-container {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 50px;
	height: 50px;
}

#page-flip-previous-content {
}

#page-flip-next-container {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 50px;
	height: 50px;
}

#page-flip-next-content {
}




#copyright-container {
}

#copyright-content {
	text-align: center;
	font-size: 85%;
	font-style: italic;
	padding: 5px;
}







label {
	float: left;
	width: 100px;
	text-align: right;
	font-weight: bold;
	clear: left;
	padding-right: 10px;
}

table label {
	width: auto;
	float: right;
}




/* The code either generates a spread-page or a left-page and a right-page */


#spread-page-container {
	width: 100%;
}

#spread-page-content {
	padding: 10px;
}





#left-page-container {
	float: left;
	width: 50%;
}

#left-page-content {
	padding: 10px 30px 10px 10px;
			border: 12px solid #ffcc00;
}





#right-page-container {
	width: 50%;
	margin-left: 50%;
}

#right-page-content {
	padding: 10px 10px 10px 30px;
			border: 12px solid #00ff00;
}






.clear-floats {
	clear: both;
	font-size: 1px;
}




.form-field-info {
	font-size: 85%;
	display: block;
	color: #999999;
}



.heading-description {
	font-size: 90%;
	font-weight: normal;
}

.heading-link:link, .heading-link:visited {
	font-size: 70%;
	font-weight: normal;
	text-decoration: underline;
	padding-left: 20px;
}





/*
#global-map-container {
	position: relative;
	width: 826px;
	height: 393px;
	margin: auto;
	background-image: url(/images/world-map.png);
	background-repeat: no-repeat;
	background-position: left top;
}
*/

#global-map-container {
}

#global-map-content {
}



		#annotatedimage {
			position: relative;
			background-repeat: no-repeat;
			background-position: left top;
		}
		
		input,select,textarea {
			background-color: #CDE8DD;
		}
		
		#login-info-content input, #login-info-content select, #login-info-content textarea {
			background-color: #ffffff;
		}
	
	    .panelArea {
		   position:absolute; 
		   height: 25px; 
		   width: 125px;
		   top:10px; 
		   left:10px; 
		   border:3px solid #ff0000;
		   vertical-align: middle;
		   /*background-image: url(background.png);*/
		   /*background-color: #f7f7f7;*/
	    }
	
	    .panelHandle {
		   position: absolute; 
		   bottom:0px; 
		   right: 0px; 
		   width:10px; 
		   height:10px;
		   background-color:blue;
		   font-size: 1px;
		   cursor: move;
	    }

		.panel-delete-button {
			position: absolute;
			top: 0px;
			right: 0px;
			cursor: pointer;
			cursor: hand;
		}
		
		.panel-info-button {
			position: absolute;
			top: 0px;
			left: 0px;
			cursor: pointer;
			cursor: hand;
		}
		
		.dialog {
			background-color: #ffffff;
		}


.reg-form td {
	vertical-align: top;
	padding: 5px;
}

/*.reg-form {
	font-size: 80%;
}

#page-content p {
	font-size: 90%;
}*/

#page-content .class-info-table td {
	vertical-align: middle;
	padding: 3px 10px;
	border-bottom: 1px solid #7EC5A9;
	border-top: 1px solid #7EC5A9;
}

#page-content .slideshow td {
	vertical-align: top;
	padding: 5px;
	background-color: #ECEFF6;

}

#page-content .slideshow {
	margin-top: 20px;
}

.importantButton {
	padding: 0px;
	text-align: center;
	font-size: 150%;
	padding: 0px;
	background-color: #97D58C;
	color: #0B41A2;
}

.heading-description {
	font-size: 90%;
	font-weight: normal;
}

iframe.external-content {
	width: 820px;
	height: 575px;
	border: 0px;
}


#table-of-contents ul {
	padding: 0px;
	list-style-type: none;
}

#table-of-contents li {
	font-size: 120%;
	margin: 0px;
	padding: 10px;
	border-top: 1px solid #777777;
	border-bottom: 1px solid #777777;
	list-style-type: none;
}

#table-of-contents li.selected {
	/*background-color: #CDE8DD;*/
	font-weight: bold;
}

#table-of-contents a {
	display: block;
	margin-right: 60px;
	text-decoration: none;
	color: #0B41A2;
	font-weight: normal;
}

#table-of-contents strong {
	display: block;
	margin-right: 60px;
	text-decoration: none;
	color: #0B41A2;
	font-weight: bold;
}

#table-of-contents a:hover {
	text-decoration: underline;
}


#page-content ul.sub-list {
}

#page-content ul.sub-list li {
	list-style: circle;
	padding: 2px;
	margin: 0px;
}

.form-table td {
	padding: 4px;
	vertical-align: top;
}

.data-graph-list {
}

.data-graph-list td {
	padding: 3px;
	border: 1px solid #cccccc;
	text-align: center;
	vertical-align: middle;
	background-color: #CDE8DD;
}

.data-graph-list th {
	padding: 10px;
	background-color: #ffffff;
}

.data-graph-list .x-axis th {
	border-top: 2px solid #134B9A;
}

.data-graph-list .y-axis th {
	border-right: 2px solid #134B9A;
	text-align: right;
}

.data-graph-list td.table-hover {
	background-color: #ffcc00;
}

.data-graph-list td.table-cell-hover {
	background-color: #009900;
}

.data-graph-list td.table-cell-selected {
	background-color: #ffcc00;
}


.student-list {
	border: 1px solid #999999;
}

.student-list td, .student-list th {
	padding: 5px;
	border: 1px solid #cccccc;
}

.student-list th {
	background-color: #999999;
}

.table-header th {
	background-color: #7EC5A9;
	font-weight: bold;
	border: 1px solid #ffffff;
	padding: 3px;
}

.table-data td {
	background-color: #CDE8DD;
	border: 1px solid #ffffff;
	padding: 3px;
}

/******************************************
INVESTIGATION LIST ITEM STYLES
******************************************/

#page-content ul.investigation-list {
	padding-left: 25px;
}

#page-content ul.investigation-list li {
	background-position: center left;
	background-repeat: no-repeat;
	list-style-type: none;
	padding: 10px 0px 10px 50px;
}


#page-content ul.investigation-list li a {
	color: #0B41A2;
	text-decoration: none;
}

#page-content ul.investigation-list .workbench-list-sub-item {
	margin-top: 10px;
	padding: 0px;
	list-style-type: square;
	font-size: 90%;
}


#page-content ul.investigation-list li a:hover {
	text-decoration: underline;
}

ul.investigation-list .teacher-list-item {
	background-image: url(/images/icons/gif/teacher-books.gif);
}

ul.investigation-list .student-list-item {
	background-image: url(/images/icons/gif/student-books.gif);
}

ul.investigation-list .journal-list-item {
	background-image: url(/images/icons/gif/student-journal.gif);
}

#page-content ul.investigation-list .workbench-list-item {
	background-image: url(/images/icons/gif/workbench.gif);
	background-position: left top;
}

ul.investigation-list .resources-list-item {
	background-image: url(/images/icons/gif/internet-globe.gif);
}

ul.investigation-list .discussion-list-item {
	background-image: url(/images/icons/gif/discussion.gif);
}

ul.investigation-list .findings-list-item {
	background-image: url(/images/icons/gif/findings.gif);
}


#sub-navigation ul {
	padding-left: 25px;
}

#sub-navigation ul li {
	background-position: center left;
	background-repeat: no-repeat;
	list-style-type: none;
	padding: 10px 0px 10px 50px;
}

#sub-navigation ul li a {
	color: #0B41A2;
	text-decoration: none;
}

#sub-navigation ul li a:hover {
	text-decoration: underline;
}



#sub-navigation li.collection-list-item {
	background-image: url(/images/icons/gif/collections.gif);
}

#sub-navigation li.data-list-item {
	background-image: url(/images/icons/gif/data-center.gif);
}

#sub-navigation li.history-list-item {
	background-image: url(/images/icons/gif/history.gif);
}


.class-header-table {
	font-size: 120%;
}

.class-header-table th {
	font-weight: bold;
}

/*********************************************
     TABLE SORTER STYLES
*********************************************/


table.tablesorter thead tr .header {
	background-image: url(/images/widgets/tables/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
	background-image: url(/images/widgets/tables/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
	background-image: url(/images/widgets/tables/desc.gif);
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #657ABB;
}






/**** STYLES FOR STUDY SITES ****/

.panel
{
	position: absolute;
	width: 50px;
	height: 50px;
	left: 240px;
	top: 70px;
	cursor: move;
	border: 2px solid #ff0000;
}
.view-panel {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 240px;
	top: 70px;
	cursor: pointer;
	border: none;
}
.resizeSE,
.resizeE,
.resizeNE,
.resizeN,
.resizeNW,
.resizeW,
.resizeSW,
.resizeS
{
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: #ffffff;
	border: 1px solid #ff0000;
	overflow: hidden;
}
.resizeSE{
	bottom: -10px;
	right: -10px;
	cursor: se-resize;
}
.resizeE
{
	top: 50%;
	right: -10px;
	margin-top: -5px;
	cursor: e-resize;
}
.resizeNE
{
	top: -10px;
	right: -10px;
	cursor: ne-resize;
}
.resizeN
{
	top: -10px;
	left: 50%;
	margin-left: -5px;
	cursor: n-resize;
}
.resizeNW{
	top: -10px;
	left: -10px;
	cursor: nw-resize;
}
.resizeW
{
	top: 50%;
	left: -10px;
	margin-top: -5px;
	cursor: w-resize;
}
.resizeSW
{
	left: -10px;
	bottom: -10px;
	cursor: sw-resize;
}
.resizeS
{
	bottom: -10px;
	left: 50%;
	margin-left: -5px;
	cursor: s-resize;
}
#annotated-image-container
{
	position: relative;
	width: 400px;
	height: 300px;
}

.infoButton {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 18px;
	background-image: url(/images/icons/information.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

.closeButton {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 18px;
	height: 18px;
	background-image: url(/images/icons/cancel.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

img.panel-background {
	width: 400px;
	height: 300px;
}



.clicktip {
	position: absolute;
	left:0px;
	top:0px;
	width:250px;
	background-color:#f0f5FF;
	border: 1px solid #000;
	z-index: 50;

}

.notes-title {
	font-size: 120%;
	font-weight: bold;
	padding: 5px 5px 10px 5px;
}

.notes-desc {
	font-size: 100%;
	font-weight: normal;
	border-top: 1px solid #cccccc;
	padding: 5px;
}

.notes {
	position: absolute;
	left:0px;
	top:0px;
	width:250px;
	background-color:#f0f5FF;
	border: 1px solid #000;
	z-index: 50;
}

.notes-handle  {
	background-color:#5588bb;
	padding:2px;
	text-align:center;
	font-weight:bold;
	color: #FFFFFF;
	vertical-align:middle;
}

.notes-content  {
	padding:5px;
}



/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.4.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.4
 * @date November 17, 2007
 * @category jQuery plugin
 * @copyright (c) 2007 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}














.jquery-database-box   {display: inline; font-size: 20px; line-height: 20px; cursor: pointer; cursor: hand;}
.jquery-database       {display: inline;}
.jquery-database .mark {display: inline;}

.jquery-database img {vertical-align: middle; width: 46px; height: 44px;}
.jquery-database img {background: transparent url(/images/gl-database-radio.gif) no-repeat;}

.jquery-database img {
	background-position: 0px 0px;
}
.jquery-database-hover img {
	background-position: 0px -44px;
}
.jquery-database-checked .jquery-database img {
	background-position: 0px -91px;
}
.jquery-database-checked .jquery-database-hover img {
	/*background-position: 0px -136px;*/
	background-position: 0px -91px;
}

.jquery-database-disabled img{
	background-position: 0px -176px;
}
.jquery-database-checked .jquery-database-disabled img{
	background-position: 0px -220px;
}




.help-item-style {
	position: absolute;
	width: 300px;
	background-color: #204A87;
	border: 2px solid #CDE8DD;
	color: #ffffff;
	font-size: 140%;
	padding: 3px;

}