@charset "ISO-8859-1";

/* General -------------------------------------------------------------- */ 
body  {
	font: 68.8% Tahoma, Arial, Helvetica, sans-serif;
	background: url(../images/bg_top.jpg) top repeat-x #FFF ;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #7E7E7E;
}

h1 { font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-0.1em;
	color:#0FA2EE;
	text-transform:uppercase;
	font-size: 2em;
	line-height: 2;
	width:auto;
	margin-top: 0.5em;
	background:url(../images/icono-title.gif) no-repeat 0% 50%;
	padding-left:15px;

} 

h2 { font-size: 1.5em; margin-bottom: 0.75em; font-weight:normal!important; font-weight:bold } 

strong {color:#0FA2EE}
p { margin: 0 0 1.5em; } 
a { color:#0FA2EE; text-decoration:underline }  

blockquote { margin:0 0 1em 0; font-size:1.5em; line-height:1.1; font-weight:normal !important; font-weight:bold} 

#linea {
	background:url(../images/linea.gif) repeat-x;
	height:7px;
	width:99%
}
#linea2 {
	background:url(../images/linea2.gif) repeat-x;
	height:7px;
	width:95%; margin:0 auto
}

#path {
	width:500px;
	font-size:80%;
	text-transform:uppercase;
	height: 10px;
}

.blue {color:#0FA2EE;}

#container { 
	width: 909px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
#header { padding: 0; margin:0}

/* Lateral Derecho -------------------------------------------------------------- */

#sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 10px 0 0 0;
	background: #EBF2F4;
}

#title01 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	background:url(../images/bg-title01.jpg) no-repeat #0FA2EE;
	height:33px;
	line-height: 33px;
	padding: 0 0 0 60px;
	width:140px;
	color:#FFFFFF;
	text-transform:uppercase

}

#title02 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:9px;
	background:url(../images/bg-title02.jpg) no-repeat #09B0BE;
	height:33px;
	line-height: 33px;
	padding: 0 0 0 60px;
	width:140px;
	color:#FFFFFF;
	text-transform:uppercase

}

#formAccesos,#formLogin {
	font-size:90%;
	width:90%;
	margin: 0 auto;
	padding: 10px 0;
}
#formAccesos label { clear:left;float:left;width:100%; margin-bottom:10px}
/* hide from IE mac \*/
#formAccesos label {float:none}
/* end hiding from IE5 mac */

#formAccesos label input {
	width:100px;
	float:left;
	margin-left:10px;
	color: #8A8989;
	border:#7F9DB9 1px solid;
	margin-bottom: 10px;
}

#formAccesos label span {
	display:block;
	color:#595959;
	float:left;
	text-align:left;
	width:50px;
	line-height:1.7
}


#formLogin {
	font-size:90%;
	width:90%;
	margin: 0 auto;
	padding: 10px 0;
}
#formLogin label { clear:left;float:left;width:100%; margin-bottom:10px}
/* hide from IE mac \*/
#formLogin label {float:none}
/* end hiding from IE5 mac */

#formLogin label input {
	width:100px;
	float:left;
	margin-left:10px;
	color: #8A8989;
	border:#7F9DB9 1px solid;
	margin-bottom: 10px;
}

#formLogin label span {
	display:block;
	color:#595959;
	float:left;
	text-align:left;
	width:50px;
	line-height:1.7
}

/* Boton Ingresar */	
	
a#boton_ingresar {
	display:block;
	float: right;
	margin: 0px 10px;
	width:105px;
	height:33px; /* aqui esta el truco */
	text-indent:-9999px;
	background: url(../images/boton-ingresar.jpg) top left no-repeat;
	}
			
a#boton_ingresar:hover {
	background-position: 0 -33px/* con esto cambiamos la porcion de imagen que se muestra */}


/* Boton Enviar */	
	
a#boton_enviar {
	display:block;
	float: right;
	margin: 0px 10px;
	width:105px;
	height:33px; /* aqui esta el truco */
	text-indent:-9999px;
	background: url(../images/boton-enviar.jpg) top left no-repeat;
	}
			
a#boton_enviar:hover {
	background-position: 0 -33px/* con esto cambiamos la porcion de imagen que se muestra */}

a#boton_registrar {
	background:url(../images/icono01.gif) top left no-repeat;
	padding: 0 0 0 20px;
	width:100px;
	height:20px;
	color:#7E7E7E;
	text-decoration:none;
	float:left;
	margin:5px 0
	}



/* Contenido Principal -------------------------------------------------------------- */

#mainContent {
	margin: 0; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 10px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	float: right;
	width: 650px;
} 


/*--------------left menu----------------*/

#submenu {
	width:193px;
	float:left;
	margin:0 0 10px 3px !important;
	margin:0 auto;
	height: auto;
	overflow: hidden;
}
#submenu_top { background:url(../images/submenu_01.gif) no-repeat; width:193px; height:5px; margin:0}
#submenu_main {	background:url(../images/submenu_02.gif) repeat-y;	width:193px;overflow: hidden}

#submenu_main h1 {
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:0;
	color:#0FA2EE;
	text-transform:uppercase;
	font-size: 1.1em;
	font-weight:bold;
	line-height: 1;
	margin-top: 0.5em !important;
	margin-top:0;
	background: none
}

#submenu_main ul {
	list-style-type:none;
	width: 193px;
	margin:10px 0;
	padding:0;
}
#submenu_main li { display:block}

#submenu_main li a {
	display:block;
	text-decoration:none;
	padding:0 0 0 15px;
	height:30px;
	text-align:left;
	width:85%;
	margin:0 auto;
	color:#4F4F4F;
	border-bottom:#CCCCCC 1px dotted;	
	background:url(../images/arrow02.gif) top left no-repeat
}
#submenu_main li a:hover {
	background:url(../images/arrow02.gif) top left no-repeat #F3F3F3;
	color:#0FA2EE;
	margin:0 auto;
	height:30px;
	border-bottom:#CCCCCC 1px dotted;

}

#submenu_main li.selected a {background:url(../images/arrow02.gif) top left no-repeat #F3F3F3;
	color:#0FA2EE;
	margin:0 auto;
	height:30px;
	text-align:left;}

#submenu_footer {
	background:url(../images/submenu_03.gif) no-repeat;
	width:193px;
	height:6px;
	margin: 0;
}

/* Recomendaciones -------------------------------------------------------------- */

#listRecomend {
	width:95%;
	margin:10px auto
}

#listRecomend ul {list-style: none}

#listRecomend ul li { background:url(../images/arrow01.gif) top left no-repeat; padding: 0 0 0 20px; margin-bottom:20px}

/* Wallpapers -------------------------------------------------------------- */

#wall { width:90% !important; width:80% margin:0 auto; height:auto}
#wall li {
	width:200px;
	height:250px;
	float:left;
	margin-right:90px !important;
	margin-right:80px;
	background:url(../wallpapers/bg-wall.jpg) center top no-repeat
}
#wall li img { margin:10px 0 0 9px}
#wall li form {	margin:70px 0 20px 0}
#wall li form label { font-size:85%}
.selectBox { background:#0AAEBD; font-size:95% !important; font-size:90%; color:#FFFFFF}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FONT SIZER CSS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.fontResizer {
	display: block;
	float:right;
	margin-top:30px;
	font-size:9px
}

.fontResizer a { display: block; float: left; background:#30A2C7; margin-right:5px; width: 20px; height: 17px; text-align: center; line-height: 15px; color: #FFF; text-decoration: none; }

.fontResizer a:hover { color: #ccc; text-decoration: none; }

/* 
The following control the way the font-resizer links appear only 
Set the actual size-changes in the function call
*/

.smallFont { font-size: 90%}

.medFont { font-size: 100%}

.largeFont { font-size: 120% }

.curFont { background: #EEEEF7 }

/* Pie de Página -------------------------------------------------------------- */

#footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: url(../images/bg-footer.gif) top repeat-x #FFF; height:147px; margin-bottom:20px
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}


#footerMenu { width:800px; margin:0 auto; padding:0}
#footerMenu { padding:1px 0 0 0 !important}
#footerMenu ul { text-align:center; margin:20px 0}
#footerMenu ul li { float:left; text-transform:uppercase; font: .9em "Arial MT", Arial, Helvetica, sans-serif}
#footerMenu ul li a { text-decoration:none; margin:0 10px; color:#9B9B9B}
#footerMenu ul li a:hover {text-decoration:underline}

#footerPlus{
	width:850px;
	margin:0 auto;
	font-size:90%;
	font-size:.7ems; 
	padding:19px 0 0 0 !important;
}

#footerPlus p { margin: 0; padding-top:25px}

#footerLogo { background:url(../images/logo-x-28.jpg) no-repeat; width:137px; height:88px; float:left; display:block; cursor:pointer}

/* Misc classes -------------------------------------------------------------- */ 

.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } 

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/* Sound -------------------------------------------------------------- */

 

#sound {width:99% !important; width:100%;margin:0; height:auto; padding:0}

#sound li {  width:140px; height:160px; float:left; margin: 0 7px 10px 0 !important; margin:0 3px 10px 0; overflow:hidden}

#sound li img { margin:0 auto}

#sound p { text-align:center}

#sound li a { display:block;font-size:10px}