/************************************************************
Created 13.02.2006
by eLab, eLearning Lab, USI/SUPSI
name: screen.css
description: stylesheet for screen media for project website
last modified: 01.03.2006
************************************************************/

/*  ---------------------------------------------------------
*	colors 
 *	Here are the main colors of the website, modify the color code
 */

	


/*  ---------------------------------------------------------
 *	HTML elements 
 */

	html { overflow: auto; }
	
	body  { margin: 0; padding: 0; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; /*background: #fff url(../images/bg.png) top top repeat-y;*/ background-color: #fff; text-align: center; }
	
	img	{ border: 0; margin: 0; padding:0; background: none; }

/*  ---------------------------------------------------------
 *	Main layout zones
 */

	#mainContainer { width: 750px; background: #fff url("../img/projLogo.jpg") top left no-repeat; margin-top:10px; margin-right:auto; margin-left:auto; padding:0px; text-align: left; border: 5px solid #c0c0c0;	}
	
	#popupContainer { width: 300px; margin-top:10px; margin-right:auto; margin-left:auto; padding:0px; text-align: left; border: 5px solid #c0c0c0; }
	
	#header { padding: 0; margin: 0; height: 80px; }
	
	#main { height: auto; padding: 0; margin: 0; background: none; }
	#footer { height: 40px; padding: 0; clear: both; margin: 0; }
	
	#popupFooter { padding: 0; clear: both; font-size: 12px; font-weight: bold; text-align: right; padding: 4px; }

/*  ---------------------------------------------------------
 *	Small layout zones
 */
	/* HEAD */
	/* GLOBALMENU */
		#main #globalMenu { margin: 0; padding: 0; font-size: 12px; font-weight: bold; line-height: 18px; background: none; }
	
		#main #globalMenu ul { margin: 0; padding: 0; list-style: none; text-align: right; }
		
		#main #globalMenu li { display: inline; padding: 2px 5px 2px 5px; /*background-image: url("../images/listSeparator.jpg"); background-repeat: no-repeat; background-position: bottom left; background-color: #fff;*/ }

		#main #globalMenu a:link,
		#main #globalMenu a:visited { text-decoration: none; color: #369; }
		
		#main #globalMenu a:hover,
		#main #globalMenu a:active { text-decoration: none; color: #369; }
		
		#main #globalMenu .separator { background-color: #369; padding: 2px 2px 2px 2px; }
	
	/* MENU1&2 */
		#main #menu1 ul,
		#main #menu2 ul { margin: 0; padding: 0; list-style: none; }
		
		#main #menu1 li,
		#main #menu2 li { display: inline; padding: 2px 10px 2px 10px; }
		
		#main #menu2,
		#main #menu1 {  line-height: 18px; }
		
		/* MENU1 */
			#main #menu1 { background-color: #369; text-align: center; color: #fff; font-size: 12px; font-weight: bold;	}
			
			#main #menu1 a:visited,
			#main #menu1 a:link { color: #fff; text-decoration: none; }
			
			#main #menu1 a:hover,
			#main #menu1 a:active { color:#ccc; text-decoration: none; }
			
			#main #menu1 .this,
			#main #menu1 .this a:visited,
			#main #menu1 .this a:link { background-color: #fff; color: #039; text-decoration: none; }
			
			#main #menu1 .this a:hover,
			#main #menu1 .this a:active { color:#ccc; text-decoration: none; }
		
		/* MENU2 */
			#main #menu2 { border-bottom: 14px solid #c0c0c0; background-color: #fff; font-size: 12px; font-weight: bold; }
	
			#main #menu2 a:visited,
			#main #menu2 a:link { color: #333; text-decoration: none; }
			
			#main #menu2 a:hover,
			#main #menu2 a:active { color:#ccc; text-decoration: none; }
			
			#main #menu2 .this,
			#main #menu2 .this a:visited,
			#main #menu2 .this a:link { color:#666; text-decoration: none; }
			
			#main #menu2 .this a:hover,
			#main #menu2 .this a:active { color:#ccc; text-decoration: none; }
			
	/* MAIN */
		#main #title { border-bottom: 5px solid #369; padding: 15px 0 4px 4px;	font-size: 2em; }
		
		#main #popupTitle { font-size: 1.5em; font-weight: bold; border-top: 5px solid #333; border-bottom: 5px solid #ccc;	margin: 0; padding: 4px; }		
		
		#main #body { clear: both; padding: 5px; }
		
		#main #body p,
		#main #body div,
		#main #bodyContainer #left p,
		#main #bodyContainer #left div,
		#main #bodyContainer #right #rightContent p,
		#main #bodyContainer #right #rightContent div	 { margin: 0 0 .6em 0; }
		
		#main #bodyContainer { clear: both; background-color: #c0c0c0; width: 750px; }
		
		#main #bodyContainer #left { width: 640px; float: left; padding: 5px; margin: 0; overflow: hidden; background-color: #fff; }
		
		#main #bodyContainer #right { float: right; width: 100px; padding: 0;	margin: 0; color: #fff;	/*height: inherit;*/ background: none; }
		
		#main #bodyContainer #right #rightContent { padding: 5px 5px 5px 10px; }
		
		#main #bodyContainer a,
		#main #bodyContainer a:link,
		#main #bodyContainer a:visited	{ color: #369; text-decoration: underline; }
		#main #bodyContainer a:active,
		#main #bodyContainer a:hover	{ color: #c0c0c0; text-decoration: underline; }
	
	
	/* FOOTER */
		#footer #partnerLogos { width: 580px; float: left; padding: 5px; }
	
		#footer #eLabLogo { float:right; margin: 0; padding: 10px; font-size: 12px; font-weight: bold; width: 140px; text-align: right; }
		
		#footer #eLabLogo a,
		#footer #eLabLogo a:link
		#footer #eLabLogo a:visited,
		#footer #eLabLogo a:hover,
		#footer #eLabLogo a:active { text-decoration: none; font-weight: bold; color: #333; }
		
		#popupFooter a,
		#popupFooter a:link
		#popupFooter a:visited,
		#popupFooter a:hover,
		#popupFooter a:active { text-decoration: none; font-weight: bold; color: #333; }

/*  ---------------------------------------------------------
 *	Special styles
 */

	/* BOXES (on the homepage) */
		#boxes { margin: 20px 0 0 0; padding: 5px; background-color: #369; text-align: center; height: 128px; }
		
		#boxes .box { margin: 0; padding: 6px; float: left; width: 136px; text-align: center; }
		#boxes .box p { background-color: #ccc; margin: 0 8px 0 8px; padding: 4px; text-indent: 0; text-align: left; font-size: 14px; font-weight: bold; }
		
		#boxes .box a,
		#boxes .box a:link
		#boxes .box a:visited,
		#boxes .box a:hover,
		#boxes .box a:active { text-decoration: none; font-weight: bold; color: #369; }
	/* BOXES (on the simple pages) */
		.box200 { padding-left: 169px; }
		.box200 div { position:relative; width: 202px; border: 1px dotted #039; text-align: center; padding: 5px; /*margin-left: 169px;*/  }	

		.box300 { padding-left: 119px; }
		.box300 div { position:relative; width: 302px; border: 1px dotted #039; text-align: center; padding: 5px; /*margin-left: 119px;*/ }	

		.box400 { padding-left: 69px; }	
		.box400 div { position:relative; width: 402px; border: 1px dotted #039; text-align: center; padding: 5px; /*margin-left: 69px;*/ }
		
	/* 2 COLUMNS */
	
		/* 100px 420px, USUALLY USED FOR PEOPLE LIST */
		.colContainer1042 { border: 1px dotted #039; width: 528px; clear: both; margin: 0; padding: 5px 5px 0 5px; }
		
		.colContainer1042 .colLeft { float: left; width: 100px; padding: 0; text-align: center; margin: 0; }
		
		.colContainer1042 .colLeft img { border: 1px solid #039; }
		
		.colContainer1042 .colRight { float: right; width: 418px; padding: 0; margin: 0; }
		
		/* 140px 380px, USUALLY USED FOR PARTNERS LIST */
		.colContainer1438 { border: 1px dotted #039; width: 528px; clear: both; margin: 0; padding: 5px 5px 0 5px; }
		
		.colContainer1438 .colLeft { float: left; width: 140px; padding: 0; text-align: center; margin: 0; }
				
		.colContainer1438 .colRight { float: right; width: 378px; padding: 0; margin: 0; }

		/* 220px 300px, USUALLY USED FOR PARTNER ISTITUTION DESCRIPTION */
		.colContainer2230 { border: 1px dotted #039; width: 528px; clear: both; margin: 0; padding: 5px 5px 0 5px; }
		
		.colContainer2230 .colLeft { float: left; width: 200px; padding: 0; text-align: center; margin: 0; }
				
		.colContainer2230 .colRight { float: right; width: 318px; padding: 0; margin: 0; }