/* -----------------------------------------------------------
   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)
#fc0; orange (header, footer)
#ff3; yellow (links contrasted)
#ccc; grey 
#fc9; background portada purple.
*/

* html table, * html input, * html textarea, * html select{/* IE hack*/
font-size: 100%;
}
html{
	/*font-size in percentage to correct distortions on some browsers when zooming takes place on behalf of the user.*/
font-size:100.01%;
}

body {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif, "Arial Unicode MS";
margin: 0 auto;
padding: 0 2em;
font-size:81.25%;
color:black;
cursor: default;
position:relative; /*reference for absolute image enlarging*/
max-width: 70em;
}

* {
line-height: 1.2;/* 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 */
font-size:1em;
}


/* 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, a:focus {text-decoration: underline;}

a:hover img, a:focus img {
text-decoration:none;/*Mozilla maintains underline on images in hovered links!*/
}

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

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

address {
text-align:center;
margin: auto;
font-weight: bold;
font-style: normal;
}

blockquote {
margin: 0.5em 5em 0em 0em;
font-style: italic;
}

button {
cursor: pointer;
cursor: hand;
font-weight: bold;
text-align:center;
background-color:#9c3;
}

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

dd {margin: 0.35em 0em 0em 2em;;
}

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

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

em {
font-style: italic;
}

fieldset{border-width: 1px; border-color: #9c3;}

input, textarea, select {
cursor: auto;
font-size: 0.8em;
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: 10em;
text-align: right; 
font-weight: bold;
margin-right: 2em;
cursor: pointer;
}

.formgeneric p{
clear: both;
}

.formgeneric input, .formgeneric textarea{
width:20em;   /*this has priority over size!*/
}

h1 {
clear:both;
margin:0.4em 0% 0em 0%; /*careful: margin=0.5*font-size(1.3)*/
font-size: 1.3em;
font-weight: bold;
font-variant: small-caps;
color: #9c3;
padding-bottom: 0.2em;
/*background-color:#9c3;environment*/
}

h2 {
clear:both;
margin: 1.5em 0% 0em 0%;/* bug Mozilla: does not understand margin with float */
font-size: 1.1em;
line-height:100%;
text-transform:lowercase;
font-variant: small-caps;
font-weight: bold;
padding-bottom: 0.3em;
border-bottom: 2px solid #9c3;
}


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

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: #9c3;
margin-bottom: 0.5em;
font-size:1em;
text-transform:lowercase;
}

h1:first-letter, h2:first-letter,h3:first-letter, h4:first-letter, h5:first-letter {
	text-transform:uppercase;
}
h1,h2,h3,h4, h5{
font-family: Verdana, Arial, sans-serif, "Arial Unicode MS";
}
hr {margin: 0em 0% 0em 0%}

img{
border: 1px solid black;
}

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

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

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

samp {
font: 1em monospace;
}

small {
font-size: 0.9em;
}

strong {
font-weight: bold;
}

sub {
font-size: 0.7em;
}

sup {
font-size: 0.7em;
}

table{
width:100%;
clear: both;
margin: 1em 0 0 0;
border-collapse: collapse;
font-family: verdana;
font-size: 0.85em;
}

th {
font-weight: bold ;
border: 1px solid #9c3; 
text-align:center;
vertical-align:middle;
font-size:1em;
}

td {
padding:0.2em;
vertical-align:middle;
font-size:1em;
}

tt {font: 1em monospace}

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

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

h3 + ul, h3 + ol {margin-top: 0.5em;}
li {
margin: 0.4em 0em 0em 0em;
}

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 :Alphabetical order
   ----------------------------------------------------------- */
.agrandarimagen{
text-align:center;
padding-bottom:5px;
}

.iconzoom, .scaled .iconzoom{
width: 20px;
border:0px;
}
.author{
text-align:center;
font-weight: bold;
}
/* 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;
font-family: 'Lucida handwriting';
}
.centerinline{
text-align:center;
}
/* centering blocks horizontally */
.centeringh1 {
text-align: center; /* bug ie for normally centers inline and no blocks*/
}
.centeringh1 * { 
position: relative; 
margin-right: auto;
margin-left: auto;
 /* width: it is compulsory to put a value, call class .wN*/
}

/* centering blocks vertically */
.centeringv1 {
position: relative; /* put width and height */
}
.centeringv1 img, .centeringv1 div, .centeringv1 p {  /* prefer the second syntax */
position: absolute; /* absolute means placed w.r.t. the first positioned ancestor (relative or absolute) or if not body while relative is an offset(top, right) with respect to the in-flow normal position*/
top: 50%;
height: 50px;
line-height: 50px; /*line-height=height => text vertically centered in the include box: line-height is the height of the one-line block and by default the line is centered, works for one line*/
margin-top: -25px; /* shift half the height of the object */
}

.clearf{/*clear floats*/
clear:both;
font-size:0.1em;
height: 0.1em;/*necessary for IE*/
overflow: hidden;
}
.clearleft{
clear: left;
}
.frameright {
clear: right; /*prevent adjacent blocks*/
float: right;
min-width:18em;
line-height: 1.1;
padding: 0.5em 0.5em;
background-color: #ffc;
border: 1px solid #9c3;
text-align: left;
margin-left: 0.5em ;
margin-top: 10px;
margin-bottom: 0.25em; /* margin-bottom on floats is necessary */
width: 18em;
font-family: verdana;
font-size:0.8em;
}
.frameleft {
clear: left; /*prevent adjacent blocks*/
float: left;
line-height: 1.1;
padding: 0.5em 0.5em;
background-color: #ffc;
border: 1px solid #9c3;
text-align: left;
margin-right: 0.5em ;
margin-top:10px;
margin-bottom: 0.25em; /* margin-bottom on floats is necessary */
width: 18em;
min-width:18em;
font-family:verdana;
font-size:0.8em;
}


div.leftmargin{
position:absolute; /*w.r.t. body*/
top: auto; /* as if static*/
left: 2em; /* padding on body*/
width:10em;
font-size: 0.85em;
line-height:110%;
text-align:right;
font-weight: bold;
font-style: italic;
color: #9c3;
}
.modulo{
/*position in the navegation*/
margin-top:0.5em;
font-size: 0.9em;
border-left:8px solid #9c3;
padding-left:5px;
}
.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 */
.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;
}

.indentleft {
text-align: left;
}

.scaled{
width: 170px;
}
.scaled img{
width: 170px;
}

.scaledvertical{
width: 125px;
}

.scaledvertical img{
width: 125px;
}

/* for enlarging images hovering*/
.zoom {
}

.submitbutton{
background-color: #eee; 
text-align:center;
font-weight: bold;
cursor: pointer; /*in this order: pointer and IE hand*/
cursor: hand;
border: 1px solid #9c3;
}

input.submitbutton:hover, button.submitbutton:hover{
background-color: #9c3;
}

.smaller {
font-size: 0.85em;
}
.bigger{
font-size:1.2em; /*bigger*smaller ~ 1*/
}

.ulinside{
list-style-position: inside;
}

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

.w100 {width: 100px;}
.w150 {width: 150px;}
.w200 {width: 200px}
.w350 {width:350px;}
.w50pcent {width: 49%;}
.hfloath{height:160px;}

/* estilos para la página de enlaces*/
.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;
}

#footer{
margin-top: 0.5em;
clear: both;
margin-left: 11.5em;
text-align:right;
border-top: 2px solid #9c3;
padding-top: 0.5em;
padding-bottom: 0.5em;
}

#header{
height:85px;
overflow:hidden; /* in case the text size is increased in the browser */
background-color: #ffc;
color: black;
font-weight: bold;
font-size: 12px;
border: 1px solid #9c3;
/*border : height does not include border!*/
}
#header img{
border: 0px;
}

#imgmenu  {
margin-bottom:5px;
}

#language{
margin-top: 0.5em;
font-size:0.85em;
padding-left: 5px;
}

#main{
margin-left: 11.5em;
}
#maincontents{
margin-top: 1em;
}

#menuv{ /* vertical menu on the left. Dont't forget the attribute accesskey in the <a> markup: <a accesskey ="1"> => home> */
position: absolute; /* w.r.t. body */
left:2em;
top:91px;
width: 10em; /* for IE: width = contents+padding+border while normally it should be contents only => care, never use width and padding together */
background-color:inherit;
font-family:verdana;
}

#menuv div.submenutitle  {
font-size: 0.8em;
height: 1.5em;
line-height: 1.5em;
/*line-height is not taken into account here?*/
background-color: #eee; 
font-variant:small-caps;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border: solid 1px #9c3;
font-weight: bold;
width: 100%;
cursor: pointer;
text-decoration: none;
margin-bottom: 5px;
text-align:left;
}
.submenutitle a, .submenutitle a:link , .submenutitle a:visited, .submenutitle a:hover, .submenutitle a:active, .submenutitle a:focus {
display: block;
/*width: 100%;*/
text-decoration: none;
height: 1.5em;
line-height: 1.5em;
color: black;
padding-left: 2px;
}
.submenutitle a:hover {
background-color: #9c3;
}

#menuv ul{
list-style: none;
list-style-position:outside;
margin:0px;
margin-bottom:5px;
width: 100%;
z-index:100;
}

#menuv ul li{
width: 100%; /* items pile up, but with extra top and bottom margin in IE (see the IE has_layout property?, when the containing ul is positioned in absolute, the pb seems not not happen)*/
margin : 0px 0 2px 0;
/*border-bottom: solid 1px red;
border-left: solid 1px red;*/
}

#menuv ul  li a {
display: block;
margin: 0px;
font-size: 0.9em; 
width: 100%;
line-height: 1.2em;
/*height: 1.2em;*/
text-align:left;
}

#menuv ul  li a:hover, #menuv ul  li a:focus {
background-color: #9c3;
}

#menud {
z-index: 100;
width: 100%;
position: relative;/*necessary on IE to be displayed correctly on loading*/
}

#menud ul{
margin-top : 5px;
margin-left: 0em;
list-style-type :none;
}

#menud ul li{
float: left;
position: relative;
margin: 0.1em 1em 0em 0em;
width: 8em;
font-family:verdana;
}

#menud li a{
display : block;
border: 1px solid #9c3;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
background-color:#eee;
font-size: 0.9em; /* IE doesn't resize em! on links*/
text-align:center;
white-space: nowrap;
}

#menud a:hover, #menud a:focus{
background-color: #9c3;
}

/*table of contents*/
#toc {
margin-top: 10px;
}
#toc.frameleft{
	width:50%;
	float:none;
}
#tocContents{
	display: block;
}
#tocButton{
	font-weight: normal;
}
/* Signal active page in the vertical menu if necessary: in body is the Pageid*/
#Pportada1 a#portada1, 
#Preferencias1 a#referencias1,
 #PalbumGeneral1 a#albumGeneral1,
#Pgranja2 a#granja2,
#Ptalleres2 a#talleres2,
#Pitinerarios2 a#itinerarios2,
#Precursos2 a#recursos2,
#Ptarifas2 a#tarifas2,
#Pcampamentos3 a#campamentos3,
#Pinscripcion3 a#inscripcion3,
#PalbumVerano3 a#albumVerano3,
#Pprograma3 a#programa3,
#Palbergue4 a#albergue4,
#Pllegar5 a#llegar5,
#Pvoluntariado5 a#voluntariado5,
#Penlaces5 a#enlaces5
{
background-color: #9c3;/*green*/
}

/* signal the active page in horizontal menu if necessary */
#Paccessabilidadx a#accessabilidadx, #Pportada1 a#portadax, #Pcontactarx a#contactarx, #PmapaSitiox a#mapaSitiox{
background-color: #9c3;
}