/* -----------------------------------------------------------
   COMMON HTML STYLES: Grouped by elements in alphabetical order
   ----------------------------------------------------------- */
/*list of colors 

#f36; red (border menus)
#6cf; blue (not used)
#ffc; cream (light, for mouseover)
#9c3; green (environment, titles); #72b34c (menu hovering)
#fc0; orange (header, footer)
#ff3; yellow (links contrasted)
#ccc; grey 
#fc9; background portada purple.
*/
html{
background-color:rgb(242, 241, 219);
font-size:100.01%; /*to enable a better scaling when zooming in some browsers*/
}

* html table, * html input, * html textarea, * html select{/* IE hack*/
font-size: 100%;
}

body {
font-family: Verdana, Arial, sans-serif, "Arial Unicode MS";
margin: 0 auto;
padding: 0 2em;
font-size: 87.5%; /*87.5%; /*This is 14px  starting from 16px*/
color:black;
cursor: default;
position:relative; 
max-width: 55em;
}

*{
font-size: 1em;
line-height: 1;/* scale factor: line-height(em) = scale* font-size*/
margin: 0em; /* set margins on each individula markup put bottom to 0 and control top*/
padding : 0em;/* the same for padding */
}

/* the a classes should be in this order*/
a {
cursor: pointer;
text-decoration: none;
background: transparent;
color:blue;
}

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: blue;
text-decoration:none;
}

a:hover {
text-decoration: underline;
}

a:active {
color: blue;
text-decoration:none;
}

a img, a:hover img, a:focus img{
border: 0px none; /* no border for clickable images */
text-decoration: none;
}

caption {
caption-side: top; /* could be bottom*/
margin: 0.1em 0 0 0;/*different interpretations Mozilla and IE*/
background-color: #ffd201; 
/*border: 1px solid #9c3;*/
padding-bottom:0.2em;
font-weight:bold;
font-family:verdana;
}

dd {
margin: 0.35em 0em 0em 2em;
text-align:justify;
}

dl {margin: 0.5em 0% 0em 0%}

dt {
margin: 0.35em 0% 0em 0%;
font-weight: bold;
}

em {
font-style: italic;
}

img{
border:1px solid black;
}

input {
cursor: auto;
font-size: 1em;
font-family:  inherit;
}

textarea {
font-size: 1em;
font-family:  Verdana, Arial, sans-serif, "Arial Unicode MS";/* does not accept inherit?*/
}

label{
font-weight:bold;
}

h1 {
clear:both;
margin:0.2em 0em 0em 0em; /*careful: margin-computed = margin*font-size*/
font-size: 1.5em;
font-weight: bold;
font-variant: small-caps;
text-transform:capitalize;
color: green;
padding-bottom: 0.2em;
}

h2 {
clear:both;
margin: 1.5em 0% 0em 0%;
font-size: 1.1em;
color: green;
font-variant: small-caps;
text-transform:lowercase;
font-weight: bold;
padding-bottom: 0.3em;
border-bottom: 1px solid #008000;
}


h3 {
margin: 0.5em 0% 0em 0%;
font-size: 1em;
font-weight: bold;
clear:left;
border-left: 5px solid #9c3;
padding-left: 10px; 
}

h3 + p {margin-top: 0.25em;}

h4 {
margin: 0.5em 0% 0em 0%;
font-size: 1em;
font-weight: bold;
}

h5 {/* for titles of frames */
font-weight: bold;
text-align:center;
background-color: #92cf6f;
text-transform:lowercase;
}

h3:first-letter, h4:first-letter,h5:first-letter{
text-transform:uppercase;
}

hr {margin: 0em 0% 0em 0%}

p {
margin: 0.75em 0% 0.75em 0%;
text-align: justify;
line-height: 1.1;
}

h3 + p {margin-top: 0.25em;}

pre {
margin: 0em 0% 0em 0%;
font: 1em/1 monospace; /* font-size + line-height */
}

small {
font-size: 0.9em;
}

strong {
font-weight: bold;
}
b{
font-weight: bold;
}

sub {
font-size: 0.8em;
}

sup {
font-size: 0.8em;
}

table{
width:100%;
clear: both;
margin: 1em 0 0 0;
border-collapse: collapse;
border: 1px solid black;
}

th {
font-weight: bold ;
border: 1px solid black; 
text-align:left; 
padding-left: 1em;
vertical-align:middle;
line-height: 1.2em;
}

td {
padding-left:1em;
vertical-align:middle;
line-height: 1.2em;
}

tt {font: 1em monospace}

ol {
margin: 0.5em 0% 0em 5%;
list-style: decimal;
list-style-position: inside;
}

ul {
margin:0.5em 0em 1em 1em;
list-style: square;
list-style-position: outside;
}

h3 + ul, h3 + ol {margin-top: 0.5em;}
li {
margin: 0.5em 0em 0em 0em;
list-style-position: outside;
}

li > ul, li >ol {margin-top: 0.5em;}
ol ul ol, ol ol {list-style: lower-alpha}

ol ol ol {list-style: lower-roman}

ul ul, ol ul ul, ul ol ul {list-style: circle}

ul ul ul {list-style: square}

/* -----------------------------------------------------------
   CLASSES
   ----------------------------------------------------------- */

.alignright{
text-align:right;
padding-right:2em;
}
.bigger {
font-size:1.3em;
}

/* cacheing images for preload <div class="cache"><img src=""><p>ignore image: non graphic browser</p></div>*/
.cache {
position: absolute;
display: none;
text-indent: -5000px;
left: -5000px;
top: -5000px;
}

.captionimage {
margin-top: 0.3em;
font-size: 0.85em;
font-weight: bold;
text-align: center;
border: 0px;
}

/* centering blocks horizontally */
.centeringh {
text-align: center; /* bug ie for normally centers inline and no blocks*/
}
.centeringh img, .centeringh div, .centeringh p { 
position: relative; /*this enables the inclusion of line-elements with margins and borders because normally only block elements can have dimensions and borders*/
margin-right: auto;
margin-left: auto;
 /* width: it is compulsory to put a value, call class .wN*/
/*text-align: left; /* to prohibit the center inherit property */
}
.centeringline{
text-align:center;
}

.clearf{
clear:both;/*for clearing floats*/
line-height:1;
height:1px;
font-size:1px;
overflow:hidden;
}

.enlargeimage{
text-align:center;
padding-bottom:5px;
}

.iconzoom, .scaled .iconzoom{
width: 20px;
border:0px;
}

.frameright {
clear: right; /*prevent adjacent blocks*/
float: right;
font-size:0.9em;
line-height: 1.1;
padding: 0.5em 0.5em;
background-color: #ffc;
border: 1px solid green;
text-align: left;
margin-left: 0.5em ;
margin-top: 10px;
margin-bottom: 0.25em; /* margin-bottom on floats is necessary */
width: 18em;
}
.frameleft {
clear: left; /*prevent adjacent blocks*/
float: left;
font-size:0.9em;
line-height: 1.1;
padding: 0.5em 0.5em;
background-color: #ffc;
border: 1px solid green;
text-align: left;
margin-right: 0.5em ;
margin-top:10px;
margin-bottom: 0.25em; /* margin-bottom on floats is necessary */
width: 18em;
}
.gototop{
  text-align: right;
  font-size: 0.9em;
}
.noscreen{/*for the non  viewable parts  on screen */
display: none;
}
.noprint {/* should be set to none in printstyles.css*/
}

.parindent{
text-indent: -5em;
margin-left: 5em;
}

/* positioning floating images on the left */
/* positioning floating images on the left */
.imageleft {
margin-right: 0.5em ;
margin-top: 10px;
margin-bottom: 0.25em;
float: left;
}

.imageright {
clear: right; /* prevent adjacent blocks */
margin-left: 0.5em ;
margin-top: 10px;
margin-bottom: 0.25em;
float: right;
direction:rtl; /*extends from right to left*/
}

.imageright img, .imageleft img{
border: 1px solid black; /* This shouldn't work because width is 100% and border is not included  but it does!*/
width:100%;
}

.indentleft {
text-align: left;
}

.scaled{
width: 150px;
}

.scaledvertical{
width: 125px;
}

.scaledvertical img{
width: 125px;
}

.smaller {
font-size: 0.9em;
}

.tabevenline td{/* to alternate background lines in tables */
background-color: #ffc;
}

.w100 {width: 100px;}
.w150 {width: 150px;}
.w200 {width: 200px}
.w250 {width:250px;}
.w300 {width: 300px;}
.w350 {width:350px;}
.w512 {width: 512px;}
.w30pcent {width:30%;}
.w50pcent {width: 50%;}

/* styles for the page of external links*/
.site{
	margin-bottom: 0.5em;
}
.site a{
	text-decoration:underline;
}
.site .url{
	font-size:0.85em;
	color: #9c3;
}
.site .description{
	margin-top:0.25em;
}
/* -----------------------------------------------------------
   SELECTORS : Alphabetical order
   ----------------------------------------------------------- */
#divImage {
display:none;
clear:both;
}
   
#footer{
margin-top: 0.5em;
clear: both;
font-size:0.9em;
text-align:center;
border-top: 1px solid green;
padding-top: 0.1em;
padding-bottom: 2em;
}


table#header{
height:80px;
background-color: #ffd201;
border: 1px  solid green;
overflow:hidden;
text-align: center;
margin:0px;
padding: 0px;
}
table#header td{
padding: 0px;
margin:0px;
}

#header #logo {
float:left;
height:100%;
}
#header #textheader{
color:green;
opacity:0.5;
-khtml-opacity: 0.5;
font-size:1.6em;
font-weight:bold;
vertical-align:middle;
filter:alpha(opacity=50);
}
#maincontents{
margin-top: 1em;
}

/*menu horizontal*/
ul#tabsC{
margin:0em;
margin-top:1em;
padding:0em;
list-style:none;
}
#tabsC li {
float:left; /*could do with display: inline-block but IE bug*/
margin:0em;
margin-right:2px;
margin-bottom:2px;
padding:0em;
}
#tabsC li.clearf{
float:none;
}
#tabsC a {
display:block;
width:10em;
text-align:center;
margin:0;
/*can't put background color due to round corners, they would be covered by the background color: #b4dd9d*/
background:  url("images/tableftC.gif") no-repeat left top;
padding-left:3px;/*padding necessary so that the round background image is not overlapped with the background image in the span (4px is the width of the image, put -1px to allow for distortion when the page is zoomed*/
text-decoration:none;
}
#tabsC a span {
display:block;
font-weight:bold;
font-size:0.85em;
color: black;
background:  url("images/tabrightC.gif") no-repeat right top;
padding:4px 4px 4px 0px;
line-height: 1;
white-space: nowrap;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */

#tabsC a:hover {
/*can't put background color due to round corners: #7bba56*/
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}
/* signalling the active page in CSS only: nojavascript*/
#Pindex #tabsC  #index, 
#Pcontact #tabsC #contact,
#Pfaq #tabsC #faq,
#Plinks #tabsC #links{
background-position: 0% -42px;
}
#Pindex #tabsC  #index span,
#Pcontact #tabsC #contact span,
#Pfaq #tabsC #faq span,
#Plinks #tabsC #links span {
background-position:100% -42px;
color: green; /*color of the active link in menu*/
}
#toccontents{
  float:left;
}
#toccontents li{
  margin: 0.1em;
}
/* -----------------------------------------------------------
   Styling forms
   ----------------------------------------------------------- */

input, textarea, select {
cursor: auto;
font-size: 1em;
font-family:  Verdana, Arial, sans-serif, "Arial Unicode MS";/* does not accept inherit? on textarea*/
background-color: #ffc;
}

input:focus,  textarea:focus{/*not IE*/
background-color: #fff;
}

.formgeneric label{
float: left;
width: 17em;
font-weight:normal;
text-align: right; 
margin-right: 1em;
margin-left:1em;
margin-bottom: 0.25em;
cursor: pointer;
}
.formgeneric{
font-size: 0.95em;
}
.formgeneric fieldset{
}
.formgeneric .field{
clear: both;
margin-top:0.5em;
}
.formgeneric .field a{
cursor:help;
}
.formgeneric .field img{
height:1em;
/*vertical-align:bottom;*/
}

.formgeneric .tip{
margin-left: 19em;
text-align: justify;
padding-left:0.5em;
padding-right:0.5em;
border: 1px dashed green;
background:white;
}

.formgeneric input, .formgeneric textarea{
width:30em;   /*this has priority over the size  attibute in the html form but maxlength is unaffected.*/
}
.formgeneric .checkbox{
width:1em;
}
.formgeneric fieldset{
/*background-color: #eee;*/
width:55em;
border:1px solid green;
border-right:0px;
border-left:0px;
border-bottom:0px;
padding-bottom:5px;
}
.formgeneric legend{
font-weight:bold;
color:black;
}

.submitbutton{
background-color: #ffc; 
/*margin: 0px 10%;*/
padding-left: 0.5em;
padding-right: 0.5em;
text-align:center;
font-weight: bold;
color: black;
cursor: pointer; /*in this order: pointer and IE hand*/
cursor: hand;
border: 1px solid green;
}

a.submitbutton{
color:black;
font-size:0.9em;
}

a.submitbutton:hover, input.submitbutton:hover, button.submitbutton:hover{
text-decoration:none;
background-color: #72b34c;

/*green hover menu*/
}