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

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

*.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: 1024px;
	padding-left: 0em;
        padding-top: 0px;
        margin-top: 0px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
}
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: 10px;
	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:link.aside {
	color: Yellow;
}
a:visited {
	color: Green;
}
a:visited.aside {
	color: lightcyan ;
}
/*  ------------------------------------------------------------------
						  for pages with menu at the left 
     ----------------------------------------------------------- */

p.menu{ position: fixed;
	left: 0%;
	top: 130px;
	width: 135px;
        background-color: #61ed54;
        padding: 10px;
}

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

H1.rightOfMenu {
	width: 400px;
}
H3.rightOfMenu {
	width: 400px;
}
H4.rightOfMenu {
	width: 400px;
}
div.aside {
    position: absolute;
    left: 660px;
    top: 230px;
    width: 270px;
    font-family: Arial,Helvetica,sans serif;
    border: 2px solid #FF0000;
    padding: 10px;
    background-color: #888;
    color: #FFFFFF;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    text-align: center;
    
}
div.publicity {
    position: absolute;
    left: 640px;
    top: 20px;
    width: 150px;
}
/* --------------------------------------------------------
                  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: 600px;
	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.tutorialtest{
	margin-left: 10px;
	width: 800px;
	min-width: 500px;
	padding: 10px;
	margin-left: 40px;
	margin-bottom: 0px;
	border-style: solid;
	border-width: 1px;
	color: Black;
	background-color: #FFFFCC;
        position: absolute;
        top: 130px;
}
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: #FFDDCC;
}
div.testintro h3,h4 {
	width: 400px;
}
/* -------------------------------------------------------------
                     buttons below test or tutor item 
----------------------------------------------------------------------- */
div#buttonsbelow {border-style: none;
	border-width: 1px;
	padding: 5px;
	margin-left: 10px;
	margin-top: 0px;
	width: 100px;
        position: absolute;
        top: 80px;
        left: 700px;
}
span#firstbutton {position: absolute;
	top: 5px;
	left: 0px;
}
span#secbutton {position: absolute;
	top: 70px;
	left: 0px;
}
span#thirdbutton {position: absolute;
	top: 135px;
	left: 0px;
}
/* -------------- end buttons below test or tutor item ------------------------ */



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



/* -------------------------------------------------------------
                             table for map and text frames
----------------------------------------------------- */
table#mapAndText {display: table;
        table-layout: auto;
	border-width: 1px; 
	border-style: solid;
	border-color: Black;
        width: 600px;
        max-width: 600px;
        padding: 0px;
        border-collapse: collapse;
}

/* -------------- left half of frame, if there is an image ------ */

td.imgcell {
    display: table-cell;
    border-right: 1px solid black;
    padding: 20px;
}




/*----------------------  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  --------------  */