@charset "utf-8";
/* CSS Document */
html, body, form, fieldset {margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-size:12px;line-height:15px}

/* Neutraliza estilos: Elementos que deben llevar margen vertical: */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {margin:1em 0;padding:0}

/* Miscelaneos: */
form label {cursor:pointer;}
fieldset {border: none;}

/* Form field text-scaling */
input, select, textarea {font-size: 100%;}

/* Elimina los bordes punteados de Mozilla */
/*:-moz-any-link:focus {outline: none}*/
a {outline: none}

* { behavior: url(css/iepngfix.htc) }

img{border-style:none}
/* CONTENEDORES PRINCIPALES ============================= */
/* main | este es el marco princpal*/ 
body{background-color:#009DE2}
#main{width:100%}

/* wrapper | contiene todos los elementos de diagramacion*/
#wrapper{width:978px; position:relative;  margin:0 auto;padding:0;  background:#009DE2; overflow:hidden}
#wrapperJuegos{width:978px; margin:0 auto;padding:0;  background: #009DE2 url(../images/bgJuegos2.jpg) no-repeat top; overflow:hidden}
#wrapperComoJugar{width:978px; margin:0 auto;padding:0;  background:#009DE2 url(../images/bgComoJugar.jpg) no-repeat top; overflow:hidden}
#wrapperPremios{width:978px; margin:0 auto;padding:0;  background:#009DE2 url(../images/bgPremios.jpg) no-repeat top; overflow:hidden}
#wrapperCuenta { width:978px; margin:0 auto; padding:0; background:#009DE2 url(../images/bgCuenta.jpg) no-repeat top; overflow:hidden; }

#wrapper p, #wrapperJuegos p, #wrapperComoJugar p, #wrapperPremios p{margin:0px; padding:0px}
#header{height:100px}


/* header | toda la sección superior*/
#header #logo {float:left}

#header #mainNav {float:left;margin:20px 0 0 10px;;width:485px;}
#header #mainNav ul {margin:0;list-style:none;position:absolute}
#header #mainNav ul li {display:inline;}

/*#header #mainNav ul li ul#subnav-1 {position:absolute;top:28px;left:40px;padding:2px;padding-top:7px;width:119px;background:url(../images/bg_subnav.gif);display:none}*/
#header #mainNav ul li ul#subnav-1 {position:absolute;top:28px;left:40px;padding:2px;padding-top:7px;width:119px;background:url(../images/bg_subnav.gif);display:none}

#header #mainNav ul li ul li {display:block;height:62px;float:left;}
#header #mainNav ul li ul li a {display:block;width:119px;height:62px}
#header #mainNav ul li ul li a span {display:none}

#btnJuego1 a {background:url(../images/btnFutbolTrivia.gif) top left no-repeat}
#btnJuego2 a {background:url(../images/btncuevadeloso.jpg) top left no-repeat}
#btnJuego3 a {background:url(../images/btnDingbats.gif) top left no-repeat}

#header #buscador{width:280px; overflow:hidden;margin-top:3px;}
#header #buscador p {margin:0px; padding:0px; text-align:right}
#header #buscador .invita a{color:#FFFF00; font-size:12px}
.invitaInterna {color:#FFFF00; font-size:12px; text-decoration:none}
#header #buscador p a{color:#FFFFFF; text-decoration:none; margin:0px 5px 5px 5px;font-size:11px;}
#header #buscador label{display: inline-block; vertical-align: top;}
#header #buscador form {margin-top:5px; width:280px}
#formSearch{color:#999999; width:85%; height:19px; border:#003366 1px solid; background:#FFFFFF url(../images/bgInputForm.jpg) repeat-x left}
/*#formAmigo{width:85%; height:19px; border:#003366 1px solid; background:#FFFFFF url(../images/bgInputForm.jpg) repeat-x left; margin:2px 0px}*/

.formAmigo{width:50%; height:19px; border:#003366 1px solid; background:#FFFFFF url(../images/bgInputForm.jpg) repeat-x left; margin:2px 0px}
.formAmigoError{width:50%; height:19px; border:#ffff00 1px solid; background:#FFFFFF url(../images/bgInputForm.jpg) repeat-x left; margin:2px 0px}
#header #buscador #icoSearch{position:relative;}


/* imagenHome | Elementos de la imagen principal*/
#imagenHome{padding-left:4px; padding-top:75px}


/* Content | Elementos del área central*/
#content{width:735px; float:left;margin:0; padding-left:15px; clear:left}
#content .mainTitle{font-size:18px; color:#CCFF99; margin-left:15px; margin-top:70px}
#content .mainTitle2{font-size:18px; color:#FFF; margin-left:15px; margin-top:70px}
#content .gameTitle{font-size:18px; margin-left:35px; margin-top:40px; margin-bottom:5px}
#content .text{margin-left:15px; margin-top:70px; line-height:18px}
#content .textJuegos{margin-left:15px; margin-top:10px; line-height:18px; width:580px}
#content .text .yellow{color:#FFFF00; font-weight:bold}
.yellow{color:#FFFF00}
.yellowBold{color:#FFFF00; font-weight:bold}
.greenBold{color:#97EA25; font-weight:bold}

#generalInfo {margin-bottom:10px;height:368px;background:url(../images/bgGeneralInfo.jpg) no-repeat}
#generalInfo p.mainTitle, #generalInfo ul {display:none}
#generalInfo #btn_jugar_home {display:block;margin-top:202px;margin-left:580px}

#premiosInfo {margin:10px 0 10px 0;padding:20px;background:url(../images/bgCuadroTransparent.png) no-repeat top; width:628px;}
#premiosInfo h3 {font-size:16px}
#premiosInfo p{ margin:10px 0; }

#comoJugar {margin-bottom:10px;padding:0 10px}
#comoJugar h3 {font-size:16px}


/* zona media | aqui van los juegos*/
#carousel{margin-left:15px; width:675px; margin-top:50px; margin-bottom:50px}
#carousel2{margin-left:15px; width:675px; margin-top:20px; margin-bottom:50px}
#carousel #rotator{border:#99FF00 1px solid;background-color:none; overflow:auto}
#carouselJugar{ width:800px; margin-top:50px; margin-bottom:50px; clear:left; overflow:hidden}
#carouselPremios{width:640px;  margin-bottom:50px; clear:left; overflow:hidden; margin-left:10px}
#carouselPremios .premios{width:605px; height:177px; float:left; margin:0px; padding:0px; background:url(../images/bgPremiosDetalle.jpg) no-repeat; margin-bottom:20px;  padding-top:20px; margin-top:10px;}
#carouselPremios .premios .fotoPremio{margin:-30px 0px 0px 40px; float:left; position:relative}
#carouselPremios .premios h1{color:#000000; font-size:25px; margin:15px 15px 10px 180px; font-weight:bold}
#carouselPremios .premios p{color:#000000; margin-left:180px; margin-right:15px; font-size:11px; text-align:justify; width:350px}
#carouselPremios .premios #bntJugar{clear:both; margin-left:300px}

#juegosBoxes{overflow:hidden; width:740px; margin-left:5px}
.btnJugar{width:60px; margin:0 auto; display:block; padding-top:20px}

.btnJugarDetalle{margin-left:300px}

.btnJugarRight{text-align:right}


/* Other Links | Zona Inferior, aqui se ubican los boxes*/
#otherLinks{width:730px; overflow:hidden;}
#otherGames{width:630px; overflow:hidden; margin-left:15px; background:url(../images/bgSubJuegos.jpg) no-repeat; margin-bottom:20px}
#otherGames .titulo{margin:10px 0px 10px 25px}
.gameThumb{float:left; width:125px; height:100px; margin:10px 15px}


.rankJuegos{width:240px; height:400px; float:left}
.rankJuegosTabla{background:url(../images/bgJugadores.png) no-repeat top; width:250px; height:394px; padding:50px 10px 10px 0px}
.logoRanking img{display:block; margin:auto}


.boxes{width:212px;_width:209px; background:url(../images/bgLinks.png); height:260px; padding:5px; float:left}
.boxes #premio{margin-left:20px}
.boxes p{font-size:11px}
.boxes p{padding:0px 27px!important}
.boxesTitulo{margin-bottom:5px; height:30px; padding-left:30px; padding-top:10px}
.boxesTitulo p{display:none; padding-left:10px}
#sigIn{background:url(../images/bgSignIn.gif) top no-repeat; width:168px; height:112px; margin:0 auto; margin-top:8px}
#sigIn img{margin:7px 5px 0px 10px}
#sigIn .linea{width:146px; margin:0 auto; background:url(../images/bgLinea.gif) bottom repeat-x; margin-bottom:5px; margin-top:2px; background-position:0px 11px; padding-bottom:3px}
#sigIn .linea p{display:inline; padding:0px!important; color:#333333; font-size:11px;}
#bienvenido{margin:0px 0px 0px 10px; font-weight:bold}
.puntos1{font-size:18px!important; text-align:right}
.puntos2{text-align:right}
.tituloLinea {float:left; width:48px}
.puntajeLinea{width:50px; text-align:right; margin-left:90px; color:#333333}

#logged {width:167px; height:55px; margin:0 auto; margin-top:8px; overflow:hidden}
#logged #avatOn{float:left; clear:left;}
#lineaAvatar{background:url(../images/bgLinea2.gif) repeat-x bottom; width:109px; margin-left:55px; margin-top:1px}
#nickname{font-weight:bold; margin-left:10px; position:relative; top:-2px}





/* generales | contiene todos los elementos de diagramacion*/
#detalleJuego{margin:10px 0 10px 0;padding:20px;background:url(../images/bgCuadroTransparent.png) no-repeat top; width:628px; height:320px;}
#detalleJuego h3 {margin:0 0 0 305px;padding:0 15px;font-size:16px;}
#detalleJuego p{padding:15px; text-align:justify; margin-left:305px}

#Form{margin-left:20px; margin-bottom:20px}
#enviarAmigo{background:url(../images/bgEnviarAmigo.png) no-repeat top; width:418px; height:270px; float:left}
#enviarAmigo .titulo{margin:10px 0px 10px 25px}
#enviarAmigo p{width:370px; margin: 0 auto!important; font-size:11px}

#Ranking{padding:10px;margin-bottom:10px;}
#Ranking h3 {font-size:16px}

#cuadroRanking {height:300px;margin-left:5px;background:url(../images/bgCuadroRanking.png) no-repeat}
#cuadroRanking h3 { margin:0 0 20px 0; padding:10px; font-size:16px; }
#cuadroRanking td {padding:3px 0;}
#cuadroRanking img { margin:0 15px 0 10px; float:left; }

#topRank{overflow:hidden; width:680px; border:#FFFFFF 1px solid}
.topTenRank {width:235px; margin-left:5px;background:url(../images/bgBoxJuegos.png) no-repeat; padding:20px 40px; float:left; margin-right:20px}
.topTenRank td {padding:3px 0;}



#rankTabla{margin-left:16px}
#rankTabla td{padding:5px}
#rankTabla .posicion{text-align:left; width:20px}
#rankTabla .seudonimo{text-align:left; width:140px}
#rankTabla .puntaje{text-align:right}

#rankStars{margin-bottom:20px;background:url(../images/bgRankStars.png) no-repeat; width:735px; height:94px; padding-top:5px}
#rankStars p{margin:3px; font-size:9px}
#rankStars .module0{margin:3px; width:274px; float:left; }
#rankStars .module{margin:3px; width:73px; float:left; margin-left:13px; text-align:center}
#rankStars .module p{margin:4px}

#rankStars td {padding:8px 10px;}

.linkBox{float:left; background:url(../images/bgLinks.png) no-repeat top; width:228px; height:265px; margin-right:5px}
.linkBox #userHeader{width:156px; margin:0 auto; padding-top:5px}
.linkBox #userHeader #userSesion{display:inline; position:relative; bottom:5px; left:25px; font-size:12px}
.linkBox #userHeader #userSesion a{text-decoration:none; color:#FFFFFF}

.linkBox .titulo{margin:10px 0px 10px 25px}
.linkBox #usuario{width:167px; height:112px; margin:10px 30px; background:url(../images/bgLinksBox.jpg)}
.linkBox #usuario span{text-align:right}
.linkBox .usuarioInfo{margin:5px; background:url(../images/bgUsuario.gif) repeat-x bottom; padding-bottom:3px; color:#333333; font-size:11px}
.linkBox #logo{padding-top:20px}

.boxTitulo{height:45px}
.boxTitulo #logo img{padding:20px}

.boxTitulo p{display:none}

.linkBox p{width:170px; margin: 0 auto!important; font-size:11px}
#usersOnline{width:200px; height:180px; overflow:auto; margin-left:20px; font-size:11px}
#usersOnline li{list-style:none; margin-bottom:8px; line-height:12px}

#invitaAmigo{width:290px; height:125px; overflow:auto; margin-left:3px; font-size:11px}
#invita td{padding:3px 3px; color:#FF0000}

#invita	label {	padding-left: 20px; background: url(../images/unchecked.gif) no-repeat;	cursor: pointer; color: #FFFFFF}
#invita	.checked { background:#000000;}
#invita	label.checked {background: url(../images/checked.gif) no-repeat; color: #FFFFFF}
#invita	label.over {color: #B0DB6F}
#invita	.backtd td{background-color:#FFFF00;}
#invita	.backtdChecked{#FFFF00; background-color:#FF0000}
#btnEnviarAmigo{margin-left:200px; margin-top:10px; position:relative}
.selectAll {color:#FFFFFF; text-align:right; margin-left:140px; font-size:11px; background:url(../images/unchecked.gif) no-repeat 	; padding-left:20px}
.deselectAll {color:#FFFFFF; text-align:right; margin-left:150px; font-size:11px; background:url(../images/checked.gif) no-repeat 	; padding-left:20px}
#titInvita {margin-left:6px}
#invitaAmigoForm{}
#invitaAmigoFormLogin{margin-left:100px; font-size:12px; margin-top:0px;width:300px;overflow:hidden}
#btnEnviarAmigoLogin{margin-left:140px;}

.miCuentaMensajes{background:url(../images/bck_mensajes.gif) no-repeat top; width:184px; height:104px; padding:30px; float:left; margin-left:20px}
.miCuentaMensajes div.error {background:url(../images/icoMensajeError.gif) no-repeat top; width:50px; height:50px; margin: 0 auto}
.miCuentaMensajes div.valido{background:url(../images/icoMensajeValido.gif) no-repeat top; width:50px; height:50px; margin: 0 auto}
.miCuentaMensajes h1{text-align:center; color:#000000; font-size:13px; font-weight:bold}
.miCuentaMensajes p{text-align:center; font-size:11px; color:#000000}
.miCuentaMensajes p span a{color:#FFFF00; text-decoration:none}


/* Formulario de Sección MiCuenta | */
.miCuenta FIELDSET{margin-bottom:10px; padding:10px; width:600px}
.miCuenta FIELDSET p{padding:5px 10px}
.miCuenta p{margin:0px}
.miCuenta LEGEND{text-transform:uppercase; color:#FFFF00; font-weight:bold; font-size:15px;}
.miCuenta .buttonDiv{float:left; border:1px solid #CCCCCC; margin:10px; padding:8px; background-color:#FFFFFF; cursor:pointer}
#cajaTerminos { color:#000000; background:#FFFFFF; width:550px; height:200px; margin:0 0 10px 0; padding:10px; overflow:auto; }

#formAvatar{width:200px; height:19px; border:#003366 1px solid; background:#FFFFFF url(../images/bgInputForm.jpg) repeat-x left}
#email{width:200px; height:19px; border:#003366 1px solid; background:#FFFFFF url(../images/bgInputForm.jpg) repeat-x left}

#avatars{width:550px; margin:30px}
.miCuenta FIELDSET  label.acepto{color:#000033; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px}

#textMiCuenta { padding:10px; margin-bottom:10px; }
#textMiCuenta h3 { font-size:16px; }
#textMiCuenta td {padding:3px 0;}

#cuadroCuenta { height:320px; margin-left:5px; background:url(../images/bgCuadroRanking.png) no-repeat; }
#cuadroCuenta h3 { margin:0 0 20px 0; padding:10px; font-size:16px; }

/* Area del banner derecho | */
#advertising{width:180px; margin-left:793px;margin-top:-6px}
#banner120x600{width:160px; height:600px; background-color:none; margin-top:120px; _margin-top:122px; margin-left:3px; _margin-left:14px; margin-bottom:30px;}


/* Footer | contiene todos los elementos de diagramacion del footer*/
#footer{clear:both; text-align:right; color:#003D58; background:#009DE3 url(../images/bgFooter.gif) no-repeat top; width:978px; height:100px; padding-top:10px}
#pedroBar{background:url(../images/bgBarraPedro.jpg) repeat-x left; width:650px; border:#79B443 1px solid; font-size:10px;  text-align:center; color:#000000}
/*#pedroBar{background:url(../images/bgBarraPedro.jpg) repeat-x left; width:650px; border:#79B443 1px solid; font-size:10px;  text-align:center; margin-bottom:16px; margin-left:40px;margin-right:285px;}*/
#footer a{text-decoration:none; color:#003D58;}


#footer #logoMS{position:relative; top:6px; margin-right:25px}
#footer #texto2{padding-left:100px;margin-right:38px; }
#footer #s1{clear:both;text-align:right; width:1000px}
#footer #s1 a, #footer span a{margin:0px 5px 0px 5px;}


/* Mecánica | Velo de mecánica del juego -> se puede visualizar en el documento prueba_velo.html*/
#mecanica{background:#0E5A98 url(../images/bgMecanica.jpg) no-repeat top; padding:10px; width:620px; height:190px; overflow:hidden}
#mecanica p{margin:0px}
#mecanica #info{margin-left:310px; color:#FFFFFF}
#mecanica #info p#btnJugar{text-align:right; margin:10px 0px 0px 0px}


/* Inicio de Sesión */
#loginTitle { font-size:17px; margin:65px 0 0 5px; }
#loginDetalle{ margin:15px 0 10px 0; padding:20px; background:url(../images/bgCuadroTransparent.png) no-repeat top; width:628px; height:251px; text-align:center; }
#loginDetalle p{ padding:5px; text-align:center; margin-top:30px; }
#login { background:url(../images/bgIniciar.png) no-repeat; padding-top:25px; margin:30px auto 0 auto; width:392px; height:138px; }

/* Ayuda */
#wrapperAyuda { width:978px; margin:0 auto; padding:0; background:#009DE2 url(../images/bgAyuda.jpg) no-repeat top; overflow:hidden; }
#Ayuda {margin:10px 0 10px 0;padding:20px;background:url(../images/bgCuadroTransparent.png) no-repeat top; width:628px;}
#Ayuda h3 { margin:0 0 20px 0; font-size:16px; }
#Ayuda p { margin:10px 0; }
#Ayuda ol { margin:15px; }
#Ayuda ol li { margin:5px 15px; }


/* Ranking */
#miCuenta { width:317px; height:175px; float:left; background:url(../images/bck_mi_cuenta.gif) no-repeat 10px 0px; padding-left:10px; position:relative; margin-right:30px}
.rank { float:left; width:248px; padding-left:20px;}
.btnSalir { position:absolute; right:10px; top:8px;}
#miCuenta #WebAuthControl2 {float:right;margin-top:5px;}
..perfil { float:left;}
.perfil{ width:244px; height:80px; padding-top:15px; padding-left:15px;}
.perfil span{ color:#ffff00; font-size:15px; font-weight:bold;}
.perfil a{ color:#FFFFFF; font-size:10px}
.puntosCupones{clear:both; color:#4e4e4e; padding-left:20px; font-weight:bold;}
.puntosCupones td { background:url(../images/bck_puntos.gif) repeat-x bottom left; height:22px;}
.puntos{ font-size:18px;}
.textos{ width:110px;}
.activo{ background:url(../images/bck_activo.gif) no-repeat; color:#000000; font-weight:bold;}
.activo td { background:#8de61e}
.activo td.first { background: url(../images/bck_activo_first.gif) no-repeat;}
.activo td.last { background: url(../images/bck_activo_last.gif) no-repeat;}
.rank td{ height:16px;}


.errMessage1 {display:block;padding:3px 4px;margin:10px;width:637px;height:17px;background:url(../images/bgErrMessage.png) no-repeat;color:red}
.errMessage2 {display:block;padding:3px 4px;margin:10px;width:637px;height:17px;background:url(../images/bgErrMessage.png) no-repeat;color:green}

.errMessageRegistro1 {display:block;padding:3px 4px;margin:10px;width:590px;height:17px;background:url(../images/bgErrMessageRegistro.png) no-repeat;color:red}
.errMessageRegistro2 {display:block;padding:3px 4px;margin:10px;width:590px;height:17px;background:url(../images/bgErrMessageRegistro.png) no-repeat;color:green}
.top10{margin:0px!important}
#pedro {
    position: absolute;
    height: 400px;
	top:35px;
	left:360px;
	z-index:1;
}

/***************************Debugging*/
/*
* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }
*/