/* -------------------------
GLOBAL
---------------------------- */ 

html, body { width: 100%; height:100%; }
body { background: #ECECEC url(/img/bg.png) no-repeat;}

h1, h2, h3, h4 { font-family:'Duru Sans', sans-serif; font-weight: bold !important; color: #203967; }
h1 { font-size: 26px; letter-spacing: -1px; }
h2 { font-size: 20px; letter-spacing: -1px; }
h3 { margin-bottom: 5px; font-size: 17px; letter-spacing: -1px; line-height: 1.2em; }
h4 { margin-bottom: 4px; font-size: 17px; }

p, td, th, a, li, span, label, input, textarea , select, address, button { font: normal 18px ; color: #555; line-height: 1.2em; font-family:'Duru Sans', sans-serif;}
p { margin-bottom: 15px; }
* p:last-child { margin-bottom: 0 !important; }
a { color: #00899D; text-decoration: none; }
a:hover { color: #19B4CA; }
strong { font-weight: bold !important; }
em { font-style: italic; }
small {
	font-size: 16px;
}

/* -------------------------
COMMON
---------------------------- */

.page { clear: both; margin: 0 auto; width: 900px; }
.wrapper { padding: 20px 18px !important; width: 864px !important; }
.col-l, .col-m { float: left; width: 288px; }
.col-r { float: right; width: 288px; }
.title { display: block; font-size: 16px; font-weight: bold; margin-bottom: 3px; color: #203967; }
.register { background: url(/img/register.png) no-repeat; display: block; margin: 0 auto; width: 850px; height: 84px; text-indent: -9999px; }
.date { display: block; font-size: 11px; font-style: italic; color: #777; }
.sign-up {background: url(/img/sign_up.png) no-repeat; display: block; margin: 0 auto; width: 125px; height: 39px; text-indent: -9999px; }
.error-msg { background: url(/img/fallo.png) 0 3px no-repeat; padding-left: 45px; height: 36px; font-size: 13px; font-weight: bold !important; color: #B41010; line-height: 36px; }
.done-msg { background: url(/img/acierto.png) 0 3px no-repeat; padding-left: 45px; height: 36px; font-size: 13px; font-weight: bold !important; color: #000; line-height: 36px; }
.banner { background-color: #C7E5E5; padding: 7px 15px; border: 1px solid #8DBEBE; font-size: 13px; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.banner a { font-size: inherit; font-weight: bold; }

/* -------------------------
HACKS
---------------------------- */ 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/* -------------------------
HEADER
---------------------------- */

#main-header { background-color: #000; width: 100%; height: 120px; }
#main-header .shadow { background: url(../images/layout/bg_line_1x2.png) repeat-x; display: block; position: absolute; top: 45px; width: 100%; height: 2px; }
#logo-tutytic a { background: url(/img/logo_test.png) no-repeat; display: block; position: absolute; z-index: 100; margin: 0px 0 0 0px; width:324px; height: 99px; text-indent: -9999px; }
#main-nav { float: left;}
#main-nav ul li { float: left; margin: 90px -5px; height: 23px; text-align: center; }
#main-nav ul li a { display: block; padding: 0 20px; height: 23px; font-weight: bold !important; color: #FFF; text-shadow: #000 1px 1px 0; line-height: 1.7em; }
#main-nav ul li a:hover { color: #BBB; }
#main-nav ul li.selected { background: url(../images/layout/bg_sel_68x23.png) center center no-repeat; }
#main-nav ul li.selected a:hover { color: #FFF; }
#main-nav ul li a.external { color: #DDD; }

/* -------------------------
FOOTER
---------------------------- */

#main-footer { background-color: #2A1502; margin-top: 40px; width: 100%; }
#main-footer p, #main-footer a { font-size: 12px; }
#main-footer p {
	color: #fff;
	font-size: 16px;
	text-align: right;
}
#main-footer .shadow { background: url(../images/layout/bg_shadow_1x12.png) repeat-x; display: none; position: absolute; margin-top: -6px; width: 100%; height: 6px; }
#main-footer .top-wrapper { background-color: #385a99; border-bottom: 1px solid #000; padding-bottom: 10px; width: 100%; min-height: 50px; }
#main-footer .bot-wrapper { background-color: #4b7196; border-top: 1px solid #5d8dbd; padding-bottom: 10px; width: 100%; }
#main-footer .bot-wrapper .col-l { width: 360px; }
#main-footer .bot-wrapper .col-r { width: 504px; }
#main-footer .page h2 { margin-bottom: 10px; height: 35px; text-indent: -9999px; }
#main-footer .bot-wrapper section { width: 432px; } 
#about-us { padding-left: 30px; width: 258px }


/* -------------------------
CONTENIDO
---------------------------- */



/** Main **/

#slogan { background: url(/img/slogan.png) no-repeat; float: left; margin-top: 70px; width: 689px; height: 41px; text-indent: -9999px; }
#intro .btn-entrar {background: url(/img/lectura.png) no-repeat; display: block; float: right; margin-top: 65px; width: 100%; height: 41px; text-indent: -9999px; }

#intro figure { background: url(/img/cuadro-ppal.png) no-repeat; clear: both; position: relative; top: 40px; width: 900px; height: 314px; }
#contenido-precios { clear: both; position: relative; top: 40px; width: 900px; height: 314px; }
#contenido-registro { clear: both; position: relative; top: 40px; width: 900px; height: 314px; }
#contenido-contacto { clear: both; position: relative; top: 40px; width: 900px; height: 314px; }

#caract-intro { background: url(/img/bg_caract.png) no-repeat; margin-top: 130px; padding: 18px; width: 864px; }
#features-intro figure { background: url(../images/main/pict_direction_89x38.png) no-repeat; position: absolute; margin: -38px 0 0 785px; width: 89px; height: 38px; text-indent: -9999px; }
#features-intro h2 { background: url(../images/text/text_features_103x20.png) no-repeat; margin-bottom: 25px; width: 103px; height: 20px; text-indent: -9999px; }
#caract-item div { background: url(../images/icon/icon_set_80x1050.png) no-repeat; margin-bottom: 25px; padding: 0 10px 0 90px; width: 188px; min-height: 80px; }
#caract-calc { background-position: 0 0px !important; } 
#caract-segui { background-position: 0 -150px !important; }
#caract-correct { background-position: 0 -450px !important; }
#caract-opc { background-position: 0 -600px !important; }
#caract-control { background-position: 0 -750px !important; }
#caract-adap { background-position: 0 -900px !important; }

#brief .col-l { width: 576px; }
#brief .col-r { width: 288px; }
#brief .col-l h2 { background: url(../images/text/text_youramvs_530x25.png) no-repeat; margin-bottom: 25px; width: 530px; height: 25px; text-indent: -9999px; }
#brief .col-l ul li { float: left; padding: 0 30px 20px 45px; width: 213px; }
#brief .col-l ul li.good { background: url(/img/acierto.png) 0 3px no-repeat; }
#brief .col-l ul li.bad { background: url(/img/fallo.png) 0 3px no-repeat; color: #999; }
#brief .col-l ul li.bad .title { color: #999; }
/*------------------
FORMULARIO DE REGISTRO
----------------------------*/
#registro-texto {
	position:relative;
	width: 100%;
	height: 380px;
	margin-left:200px;
	margin-top: 50px;
}
#registro-texto2 {
	position:relative;
	width: 100%;
	margin-top: 50px;
}

#registro-texto form {font: normal 18px 'SFCartoonistHandRegular'; color: #555; line-height: 1.2em; }
#registro-texto2 form {font: normal 18px 'SFCartoonistHandRegular'; color: #555; line-height: 1.2em; }
#registro-header {
	position:relative;
	width: 100%;
	height: 50px;
	margin-top: 70px;
	margin-left: 20px;
}
.formulario input[type='text'], .formulario textarea{
	padding: 7px 6px;
	/* width: 294px; */
	border: 1px solid #385A99;
	resize: none;
	box-shadow:0 0 0 3px #EEF5F7;
	margin: 5px 0;
}
.formulario input[type='password']:focus, .formulario textarea:focus{
	outline: none;
	box-shadow:0 0 0 3px #dde9ec;
}
.formulario input[type='password'], .formulario textarea{
	padding: 7px 6px;
	width: 294px;
	border: 1px solid #385A99;
	resize: none;
	box-shadow:0 0 0 3px #EEF5F7;
	margin: 5px 0;
}
.formulario input[type='text']:focus, .formulario textarea:focus{
	outline: none;
	box-shadow:0 0 0 3px #dde9ec;
}
.formulario input[type='submit']{
	border: 1px solid #CED5D7;
	box-shadow:0 0 0 3px #EEF5F7;
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: bold;
	text-shadow: 1px 1px 0px white;
	
	background: #e4f1f6; 
	background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
	background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%); 
}

#condiciones {
	text-align:right;
	width:100%;
}

#condicioneslink{
	margin-top: 50px;
	position:relative;
	text-align:center;
	}
	

#registrarse {
	margin-top: -20px;
	width: 100%;
	text-align:center;
}
/*-------------------------
CLAVE PERDIDA
---------------------------*/
#claveperdida{
	margin-top: 90px;
	margin-left: 60px;
	position:relative;
	width:100%;
}

.forgot{
	font-size:10px;
	color: #fff;
}
.forgot a{
	text-decoration:none;
	font-size:14px;
	color: #fff;
	text-align:right;
}

/*-------------------
PERFIL
-------------------*/

#perfil{
	font: normal 18px 'SFCartoonistHandRegular'; 
	color: #555; 
	line-height: 1.2em;
	margin-top: 90px;
	margin-left: 60px;
	position:relative;
	width:100%;
	}
#perfil h1{
	background-color: #CCC;
	width:100%;
}

/*-------------------------
CUBAS
---------------------------*/
ul#nav_operac{
	margin-top: 30px;
	display: block;
	height: 40px;
        

	}
ul#nav_operac li{
	display: block;
	float: left;
	width: 150px;
	margin: 0px 5px;
	height: 40px;
	line-height: 40px;
	font-size: 26px;
	text-align: center;
	color: #385a99;
	}

ul#nav_operac a{
	color: #385a99;
	}	

ul#nav_operac a:hover li{
	font-size: 30px;
}

ul#nav_operac a:hover li#salir{
	background: url(../img/fondoli2.png);
}
ul#nav_operac a:hover li#paginanueva{
	background: url(../img/fondoli2.png);
}
ul#nav_operac a:hover li#evaluar{
	background: url(../img/fondoli2.png);
}
div#pizarra{
	height: 400px;
	background: #fff;
	border: 15px solid #a7a8ad;
	color: #000;
}


div#pizarra li{
	color:#000;
}

div#pizarra a:hover li{
	background: url('../img/fondoli.png');
}
div#teacher{
	background: url(../img/teacher.png);
	width: 200px;
	height: 200px;
	float: right;
	margin-top: -170px;
}


.piza{
	font-size: 30px;
	margin: 10px;
	margin-top: 30px;
	float: left;
}
.lista_horizon{
	float: left;
	margin: 10px;
}

ul#ejercicios{
	display: block;
	font-size: 25px;
	text-align: center;

	
}
	ul#ejercicios li{
		float: left;
		display: block;
		line-height: 27px;
		width: 27px;
		height: 27px;
		border: 1px solid #cccccc;
		font-family:Verdana, Geneva, sans-serif;
	}
	
	ul#ejercicios input{
		text-align: center;
		font-size: 20px;
		width: 25px;
		height: 25px;
		line-height: 27px;
		font-family:Verdana, Geneva, sans-serif;
                border: 0px;
		
	}
.tabla {
	width: 100%;
	margin-top: 10px;
	}
.tabla th{
		border: 1px solid #A4C4D0;
		font-size: 24px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		background: url("../img/fondoth.jpg");
		color: #fff;
	}
.tabla .modo1 td{
		background: url("../img/fondotd1.jpg");
		border: 1px solid #A4C4D0;
		text-align: center;
		height: 26px;
		line-height: 26px;
		
	}
.tabla .modo2 td{
		background: url("../img/fondotd2.jpg");
		border: 1px solid #A4C4D0;
		text-align: center;
		height: 26px;
		line-height: 26px;
		
	}
.tabla .none td{
	background: #fff;
	border: 0px;
}
div#paginacion_resultados{
	width: 300px;
	text-align: center;
	float: left;
	height: 360px;
}
div#resumen{
	width: 590px;
	margin-left: 310px;
	margin-top: 20px;
}


select{
	height: 26px;
	font-size: 20px;
	background: #385a99;
	color: #fff;
	line-height: 26px;
}
option{
	font-size: 15px;
	color:#000000;
	background: #fff;
}
input {
	font-size: 20px;
	background: #fff;
	color: #385a99;
	line-height: 26px;	
}
input:hover {
	background: #385a99;
	color: #fff;
	cursor: pointer;
}

.divleft{
	float: left;
	width: 30%;
}
.divright{
	float: right;
	width: 69%;
}

div#resumen{
    background: #a7a8ad;
    margin-left: 320px;
    width: 570px;
    padding: 5px;
    
}
div#resumen p{
    color: #fff;
}

/*-------------------------
POPUP
---------------------------*/

#popup {
    top: 44px;
    width: 100%; 
	height: 60px;
    background: url(/img/barra.png)  left bottom repeat-x;
    display: inline;
    position: absolute;
	font-family:  'SFCartoonistHandRegular';
	text-align:right;
	
}
 
#popup p {
	text-align:right;
    font-size: 13pt;    
    color: #34332d;
	padding-right:300px;
	font-family:  'SFCartoonistHandRegular';
	
}

#popup form {
    color: #fff;
    font-size: 20px;
}
 
a.hide {
    color: #fff; 
    text-decoration: none;
    font-family: 'ArrowFont'; 
    -webkit-transform:rotate(-90deg); 
    font-size: 30px; 
    position: relative;
    text-shadow: -1px 0px 1px rgba(255,255,255,0.8);
    margin-top: -40px;
	text-align:left;
	
}
 
a.hide:hover {
    color: #c44f21; 
}
 
span.showpop {
    display: block;
    position: fixed;
    -webkit-transform:rotate(90deg);
    margin-top: -70px;
}
 
/*a.showpoplink {
    background: #dde1c1;
    padding: 5px 10px 5px 40px;
     
    font-size: 30px; 
    margin-left: 5px;
    border: 4px solid #c44f21; 
    text-decoration: none;
    border-radius: 10px;
    -webkit-background-clip: padding-box;
    color: #34332d;
}
 
a.showpoplink:hover {
    color: #c44f21; 
}
*/



/* -------------------------
FONTS
---------------------------- 
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 10, 2012 01:18:38 PM America/New_York */



/*@font-face {
    font-family: 'SFCartoonistHandRegular';
    src: url('/font/SF_Cartoonist_Hand-webfont.eot');
    src: url('/font/SF_Cartoonist_Hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/SF_Cartoonist_Hand-webfont.woff') format('woff'),
         url('/font/SF_Cartoonist_Hand-webfont.ttf') format('truetype'),
         url('/font/SF_Cartoonist_Hand-webfont.svg#SFCartoonistHandRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SFCartoonistHandItalic';
    src: url('/font/SF_Cartoonist_Hand_Italic-webfont.eot');
    src: url('/font/SF_Cartoonist_Hand_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/SF_Cartoonist_Hand_Italic-webfont.woff') format('woff'),
         url('/font/SF_Cartoonist_Hand_Italic-webfont.ttf') format('truetype'),
         url('/font/SF_Cartoonist_Hand_Italic-webfont.svg#SFCartoonistHandItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SFCartoonistHandBold';
    src: url('/font/SF_Cartoonist_Hand_Bold-webfont.eot');
    src: url('/font/SF_Cartoonist_Hand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/SF_Cartoonist_Hand_Bold-webfont.woff') format('woff'),
         url('/font/SF_Cartoonist_Hand_Bold-webfont.ttf') format('truetype'),
         url('/font/SF_Cartoonist_Hand_Bold-webfont.svg#SFCartoonistHandBold') format('svg');
    font-weight: normal;
    font-style: normal;

}*/