/*  ---------------------------------------------------------------------
							for all of the website
--------------------------------------------------------------------------  */

BODY {
	background-color : White;   /* because of style checker  */
	color : Black;
	background-image : url(contour.gif);
	margin-left : 10px;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
}
div.contain {   /*  for positioning of elements inside   */
	position: relative;
	height: 60ex;
}

*.plain{   /*     basic text for all of the website   */
	font-family: "Times New Roman", Times, serif;
	font-size: 17px;
	font-weight: normal;
	margin-left: 10px;
	margin-top: 0;
	margin-bottom: 15px;
}

*.changed{   /*     basic text for all of the website   */
	font-family: "Times New Roman", Times, serif;
	font-size: 17px;
	font-weight: normal;
	color: black;
	margin-left: 10px;
	margin-top: 0;
	margin-bottom: 15px;
}
p.header{   /* website title and icons on top   */
	width: 600px;
	padding-left: 2em;
}
H1 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align : center;
	margin-top: 20px;
}
H3 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-align : left;
	margin: 0px;
	margin-bottom: 4px;
	margin-top: 16px;
}
H4 {
	font-family: Times, TimesNR, serif;
	font-size: 17px;
	font-weight: bold;
	text-align : left;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-left: 10px;
	margin-bottom: 2px;
}
a:link {
	color: Blue;
}
a:visited {
	color: Purple;
}
/*  ------------------------------------------------------------------
						  for pages with menu at the left 
     ----------------------------------------------------------- */

p.menu{ position: relative;
	left: 0%;
	top: 0%;
	width: 150px; 
}

div.rightOfMenu {
	position: absolute;
	top: 0px;
	left: 140px;
	height: auto;
	margin-left: 15px;
	width: 460px;
	}

H1.rightOfMenu {
	width: 400px;
}
H3.rightOfMenu {
	width: 400px;
}
H4.rightOfMenu {
	width: 400px;
}
/* --------------------------------------------------------
                  styles for page without menu on the left 
 -------------------------------------------------------------------- */

H1.nomenu {   /*   inherits from H1    */
	width: 600px;
}
H3.nomenu {       /*   inherits from H3    */
	width: 600px;
	text-align: center;
}
h4.nomenu {	background-color: transparent;
	color:  rgb(0%,0%, 70%);
	text-align: center;
}

div#contactform {line-height: 2em; padding-right: 1em;}


/*  ----------------------------- -----------------------------------------------
             feedback and results at top of tutorial or drill or test item 
--------------------------------------------------------------------------*/
div.feedback {
   width: 590px;
	height: 36px;
	border-width: 0px;
	font-size: small;
	background-color: Yellow;
	color: Black;
	position: relative;
}
span.progress {
	position: absolute;
	left: 3%;
	top: 4px;
	background-color: Aqua;
	padding: 5px;
}

span.time {          /* only for drill-and-practice items   */
	position: absolute;
	left: 60%;
	top: 4px;
	background-color: Orange;
	color: Olive;
	padding: 5px;
}
span.results { position: absolute;
	left: 45%;
	text-align: right;
	padding: 5px;
	top: 4px;
	background-color: #FFA07A;
}
span.correct {background-color:#99ff00; 
     color: #006600; padding: 5px; top: 4px;}
span.error { background-color:#ffff66; 
	color: #ff3300; padding: 5px; top: 4px}



/* --------------------------------------------------------------
             introductory test and practice items without maps
-----------------------------------------------------------------------*/
div.testintro {
	margin-left: 10px;
	width: 500px;
	min-width: 500px;
	padding: 10px;
	margin-left: 40px;
	margin-bottom: 0px;
	border-style: solid;
	border-width: 1px;
	color: Black;
	background-color: #FFFFCC;
}
div.testintro h3,h4 {
	width: 400px;
}
/* -------------------------------------------------------------
                     buttons below test or tutor item 
----------------------------------------------------------------------- */
div#buttonsbelow {height: 60px;
	border-style: none;
	border-width: 1px;
	padding: 5px;
	margin-left: 10px;
	margin-top: 0px;
	width: 300px; 
	position: relative; }
span#firstbutton {position: absolute;
	top: 5px;
	left: 0px;
}
span#secbutton {position: absolute;
	top: 5px;
	left: 110px;
}
span#thirdbutton {position: absolute;
	top: 5px;
	left: 220px;
}
/* -------------- end buttons below test or tutor item ------------------------ */



div.formfields {line-height: 160%;
   margin-left: 10px;
}



/* -------------------------------------------------------------
                             table for map and text frames
----------------------------------------------------- */


#mapAndText {display: table;
	border-width: 1px; 
	border-style: solid;
	border-color: Black;
	width: 600px;
	min-width: 450px; 
	max-width: 600px;
}	
/* -------------- left half of frame, if there is an image ------ */
td.imgcell {
	text-align: center;
	width: 200px;
	padding: 10px; 
	margin: 0px;
	background-color: #FFFFCC;
	border: 1px black solid;
	}

/* -------------- right half of frame, if there is an image, else over whole frame ------ */
td.testtext {display: table-cell;
	padding: 10px;	
	text-align: left;
	color: Black;
	background-color: #FFFFCC;
	max-width: 450px;
}
td.testtext h3 {
	width: 400px;
}

/*----------------------  end of  mapAndText table --------------------*/



/* ---------------------------------------------------------------
               table made for coordenates of jungle route 
 -------------------------------------------------------------------  */

#coord {display: table;
	table-layout: fixed; 
	width: 400px;
	border-collapse: collapse;
	height: auto;
	border-width: 1px;
	border-style: solid;
	border-color: Black;
	margin-left: 1em;
}
#coord col#c1 {	width: auto;}
#coord col#c2 {	width: 15%;}
#coord col#c3, 
#coord col#c4 {width: 14%;}
#coord col#c5 {	width: 50%;}

#coord tr {display: table-row; height: 20px; border: 1px solid; } 
#coord tr.odd {background-color: #ADD8E6;}
#coord tr.even {background-color: White;} 
#coord td {border: 1px solid black; text-align: right; 
           padding-right: 3px; padding-left: 5px;} 
#coord #r1 {text-align: center; font-weight: bolder;}
#coord td#c5  {text-align: left;}

#coord caption { color: Black; background-color: #CC9933; margin: 1em; 
         caption-side: top; font-size: large; }

/*  -------------------------------------- end of coord table styling    -- */



/*  ------------------------ -----------------------------------------------
                          table for colores de signos  
          ------------------------------------------------------------  */
#colorsig {display: table;
	width: 450px;
	border-collapse: collapse;
	height: auto;
	border: black;
	border-width: 1px;
	border-style: solid;
	margin-left: 20px;
}
#csr1c1, #csr2c1, #csr3c1, #csr4c1, #csr5c1, #csr6c1 
	{display: table-cell; width: 14%; text-align: right; padding-right: 4px; 
	 border-style: solid; border-color: black; border-width: 1px;}
#csr1c1 {background-color: #8B4513; color: White; } 
#csr2c1 {background-color: Black;   color: White; } 
#csr3c1 {background-color: Blue;    color: White;}
#csr4c1 {background-color: Green;   color: White;} 
#csr5c1 {background-color: Yellow;  color: Black;} 
#csr6c1 {background-color: White;   color: Black;}
#csr1c2, #csr2c2, #csr3c2, #csr4c2, #csr5c2, #csr6c2 
	{display: table-cell; text-align: left; padding-left: 4px;
	border-style: solid; border-color: Black; border-width: 1px;}

/* --------------------- end table for colores de signos  --------------  */


/*  ------------------------ -----------------------------------------------
                          form for possible and preferred days of week  
          ------------------------------------------------------------  */
div#quedias {width: 435px; height: 70px; position: relative; 
     margin: 15px;}
span#puedes  {position: absolute; width:  80px; top: 0px; left:   0px; border: 1px solid;
				border-right: none; padding: 5px; line-height: 165%;}
span#altpued {position: absolute; width: 120px; top: 0px; left:  80px; border: 1px solid; 
				border-left: none; padding: 5px;}
span#prefs   {position: absolute; width:  80px; top: 0px; left: 220px; border: 1px solid;
				border-right: none; padding: 5px; line-height: 165%;}
span#altpref {position: absolute; width: 120px; top: 0px; left: 300px; border: 1px solid;
				border-left: none; padding: 5px;}
				
/* --------------------- end form for possible and preferred days of week  --------------  */