@charset "UTF-8";
/************************************
CSS Cpech Online v3.9.0

 1. ELEMENTOS GENERALES
 2. MENU
 3. LOGIN - OLVIDO CLAVE
 4. CONTENIDOS
 5. BLOQUE CURSOS - FOLLOW
 6. VENTANA MODAL
 7. BANNERS
 8. TOUR
 9. PIE
10. CONTACTO  Y EXPERIENCIA ONLINE
11. TABLAS SALON/HORARIO
12. PAGE PEEL
************************************/

/**********************
1. ELEMENTOS GENERALES
***********************/
#ads {
position:absolute;
top:-165px;
left:-40px;
z-index:99;
}

* {margin:0; padding:0;}
h1, h2, h3, p, ul {padding-bottom:1em;}
h1, h2, h3, h4 {line-height:1.2em;}
h1, h2, h3 {letter-spacing:-0.06em;}
h2 {font-size:1.2em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
ul, ol {margin-left:1.5em;}
fieldset {border:0;}
table td {padding:5px;}
table .even{background:none;}

html, body {height: 100%;}

body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:0.75em;
line-height:1.45em;
-background:#0f7ad1 url(../img/bg.jpg) repeat-x;
background:#eee;
}

#general {
position:relative;
width:960px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
border:1px solid #cdcdcd;
border-top:0;
border-bottom:0;
background:#fff;
}

#cabecera {
position:relative;
height:170px;
padding-bottom:10px;
background:url(../img/online.jpg) no-repeat;
}

#contenido {
background:#fff;
color:#555;
}

#logo {
position:absolute;
top:41px;
left:12px;
}

#logo a {
width:210px;
height:68px;
overflow:hidden;
text-indent:-999px;
display:block;
}

a, a:visited, a:active {color:#0044ad; outline:0;}
a:hover {color:#fb8b00; outline:0;}
a img {border:0;}

strong {color:#0044ad;}

/**********************
2. MENU PRINCIPAL
***********************/
#menu-principal {
position:absolute;
top:135px;
left:0;
width:960px;
height:35px;
margin-left:0;
list-style:none;
}

#menu-principal li {float:left;}
#menu-principal li.leaf {padding:0; margin:0; list-style:none;}

#menu-principal li a,
#menu-principal li a:active,
#menu-principal li a:visited {
height:35px;
text-indent:-999px;
overflow:hidden;
display:block;
background:url(../img/online.jpg) no-repeat;
}

#menu-principal li#front a
{width:55px; background:url(../img/home_btn.png) 0 0 no-repeat; position:absolute; top:0; left:0;}
#menu-principal li#servicios-de-cpech-online a
{width:180px; background-position:-40px -183px; margin-left:41px;}
#menu-principal li#cursos-de-cpech-online a
{width:164px; background-position:-220px -183px;}
#menu-principal li#especialistas-en-psu a
{width:145px; background-position:-384px -183px;}
#menu-principal li#que-computador-necesitas a
{width:191px; background-position:-529px -183px;}
#menu-principal li#preguntas-frecuentes a
{width:162px; background-position:-720px -183px;}
#menu-principal li#contacto a
{width:77px; background-position:-883px -183px;}

#menu-principal li#front a:hover {background-position:0 -37px;}
#menu-principal li#servicios-de-cpech-online a:hover {background-position:-40px -220px;}
#menu-principal li#cursos-de-cpech-online a:hover {background-position:-220px -220px;}
#menu-principal li#especialistas-en-psu a:hover {background-position:-384px -220px;}
#menu-principal li#que-computador-necesitas a:hover {background-position:-529px -220px;}
#menu-principal li#preguntas-frecuentes a:hover {background-position:-720px -220px;}
#menu-principal li#contacto a:hover {background-position:-883px -220px;}

#menu-principal li#servicios-de-cpech-online.activo a {background-position:-40px -257px;}
#menu-principal li#cursos-de-cpech-online.activo a {background-position:-220px -257px;}
#menu-principal li#especialistas-en-psu.activo a {background-position:-384px -257px;}
#menu-principal li#que-computador-necesitas.activo a {background-position:-529px -257px;}
#menu-principal li#preguntas-frecuentes.activo a {background-position:-720px -257px;}
#menu-principal li#contacto.activo a {background-position:-883px -220px;}

/***********************
3. LOGIN - OLVIDO CLAVE
************************/
#login {
position:absolute;
top:0px;
left:680px;
width:210px;
height:110px;
padding:20px 40px 0px 30px;
line-height:1.2em;
background:url(../img/online.jpg) -680px -301px no-repeat;
color:#0044ad;
}

#login a:hover {color: #fff;}
#login h2 {font-size:1.2em; text-transform:uppercase;}

#login label {
font-size:0.8em;
font-weight:bold;
width:45px;
display:block;
float:left;
}

#login input {
height:16px;
margin-bottom:0.3em;
text-align:center;
border:1px solid #0044ad;
background:url(../img/online.jpg) 0px -301px;
}

#login #rut, #login #clave {width:80px;}
//#login #dv {width:20px;}
#login span.rut {font-size:0.9em;}

#login input.boton, .boton {
width:65px;
height:25px;
font-size:0.9em;
font-weight:bold;
border:0;
color:#fff;
background:url(../img/boton.png) no-repeat;
margin-bottom:0;
}

.olvido_clave .mensajes {color:#d00;}
.olvido_clave label {
margin-right:10px;
font-weight:bold;
color:#0044ad;
}
.olvido_clave input {
height:16px;
margin-right:10px;
text-align:center;
border:1px solid #ddd;
}

.olvido_clave input.boton {
width:65px;
height:25px;
margin:5px 0 10px 0;
font-size:0.9em;
font-weight:bold;
text-transform:uppercase;
border:0;
color:#fff;
background:url(../img/boton.png) no-repeat;
}
.olvido_clave .form_ej {font-size:0.9em;}
.olvido_clave #rut3 {width:70px;}
.olvido_clave #respuesta2 {width:160px;}
.olvido_clave #nva_clave1, .olvido_clave #nva_clave2 {width:90px;}

/**********************
4. CONTENIDOS
***********************/
#contenido {position:relative; padding:0 10px; overflow:hidden;}

#contenido h1, #contenido h2, #contenido h3, #contenido h4 {color:#0044ad;}
#principal h1 {padding-bottom:0.5em;}
#principal h2 {font-size:1.6em;}
#principal h3 {font-size:1.25em; font-weight:normal; letter-spacing:0;}

#lateral {float:right; width:270px;}
#principal {float:left; overflow:hidden;}
#principal,#principal_sup {width:640px;}

#principal, .block-wrap {padding-left:30px; background:url(../img/cajas.jpg) top left no-repeat;}
#principal_int, .block-inner {min-height:250px; padding:20px 30px 20px 0; background:url(../img/cajas.jpg) top right no-repeat;}

#principal_sup .block-wrap, #principal_sup .block-inner {padding:0; background:none;}

hr.clear { color: #fff; border: 0px #fff; clear: both; height: 0; }
/* Paginas */
#principal_int {width:610px; min-height:250px; overflow:hidden;}
#principal_int .view {position:relative; overflow:hidden;}
#principal_int .view .row {width:610px;margin-right:30px; text-align:justify;}
#principal_int .content {text-align:justify;}
#principal_int .view .row .content img,
#lateral .block .content img {margin:0 5px;}
/* Cotenidos subtemas */
.contActivo {position:relative; top:0; left:0; display:block;}
.contOculto {position:absolute; top:0; left:640px; display:none;}
.exActivo {position:relative; top:0; left:0; display:block;}
.preActivo {position:absolute; top:0; left:640px; display:block;}

.contOculto, .exActivo, .preActivo {position:relative; top:0; left:0; display:block;}

/* Columnas */
.content-column {float:left;}
.content-column-4,
.content-column-3,
.content-column-2 {width:295px;}
.content-column-3.content-column-first,
.content-column-4.content-column-first,
.content-column-4.content-column-last {width:auto; float:none; clear:left;}

.content-column-last {padding-left:20px;}

.content-column-4.odd {padding-left:20px;}
.content-column-4.content-column-first,
.content-column-4.content-column-last {padding:0;}
/* Quotes */
#principal_int .quote {
clear:both;
width:400px;
margin:auto;
text-align:right;
background:url(../img/quotes1.png) top left no-repeat;
}
#principal_int .quote_int {
background:url(../img/quotes2.png) bottom right no-repeat;
}
#principal_int .quote h4 {
font-family:Baskerville, 'Times New Roman', Times, serif;
font-weight:normal;
font-style:italic;
font-size:1.5em;
line-height:1.15em;
letter-spacing:0.05em;
padding:0;
color:#666;
border-bottom:1px dotted #999;
}
#principal_int .quote img {padding:2px 5px;}

/*Menu paginas interiores */
#lateral .block-wrap.menu h2 {padding-bottom:1em;}
#lateral .block-wrap.menu a {text-decoration:none; display:block;}
#lateral .block-wrap.menu ul.menu {padding:0;margin:0;}
#lateral .block-wrap.menu li {
margin:0;
padding:5px;
line-height:1.3em;
border-bottom:1px dotted #0044ad;
}
#lateral .block-wrap.menu li.first {border-top:1px dotted #0044ad;}
#lateral .block-wrap.menu li.leaf {list-style:none;}
#lateral .block-wrap.menu li.activo, #lateral .block-wrap.menu li.activo a:hover {font-weight:bold;cursor:default;color:#0044ad;}

/*Navegacion paginas interiores*/
#cont-nav {text-align:right;clear:both;color:#0044ad;font-size:0.9em;padding-top:1em;}
#cont-nav span {padding:0 0.25em;cursor:pointer;}
#cont-nav span:hover {color:#fb8b00;}
#cont-nav span.titulo, #cont-nav span.titulo:hover,
#cont-nav span.activo, #cont-nav span.activo:hover {font-weight:bold;cursor:default;color:#0044ad;}
#cont-nav span.titulo {padding:0;}
#cont-nav span.last {padding-right:0;}

/* Leer mas */
.leer-mas {padding-bottom:1em;}
.leer-mas .contenido p {padding:0}

/* Contenido Front */
#info-front h2 {font-size:1.4em;}
#info-front h3 {padding-bottom:0; font-size:1.1em; font-weight:bold;}
.mainCol {width:190px; padding-bottom:10px; float:left;}
.mainCol.odd {padding:0 20px 10px;}
.mainCol img {margin:-2px 4px -4px -2px;border:0;}
#info-front .destacado {
width:170px;
padding:0 10px;
border:1px dotted #0044ad;
border-left:0;
border-right:0;
color:#fff;
background: url(../img/experiencia-bg.jpg) top right no-repeat;
}
#info-front .destacado h2,
#info-front .destacado h3,
#info-front .destacado a {color:#fff;letter-spacing:0.02em;}

.noCol {clear:left; width:auto; color:#0044ad;overflow:hidden;}
#servDesc {width:190px;padding-right:20px;float:left;}
#servList {float:left; list-style:disc;}
#servList li {width:auto;float:none;padding-bottom:0;}

.avonniHome {width:410px;height:142px;margin:0 auto;padding-left:145px;background:url(../img/avonni-home.jpg) no-repeat;}
.avonniHome h2 {padding:55px 0 0 0;font-size:1.1em;}
.avonniHome p { margin:0; }

/**************************
5. BLOQUE CURSOS - SOCIAL
***************************/
#cursos ul {margin-left:0;}
#cursos li, #social li { margin: 0; padding: 0; height: 32px; overflow: hidden;}

#cursos li a {
font-size: 0.95em;
font-weight: bold;
line-height: 30px;
height: 30px;
padding: 1px 0 1px 32px;
display: block;
background: url(../img/cursos.png) no-repeat;
}

#cursos li a#cursos_lc { color: #c33e96; background-position: 0 0; }
#cursos li a#cursos_mt { color: #aebf28; background-position: 0 -32px; }
#cursos li a#cursos_sh { color: #f09000; background-position: 0 -64px; }
#cursos li a#cursos_cb { color: #0090e8; background-position: 0 -96px; }
#cursos li a#cursos_bl { color: #0090e8; background-position: 0 -128px; }
#cursos li a#cursos_fs { color: #0090e8; background-position: 0 -160px; }
#cursos li a#cursos_qm { color: #0090e8; background-position: 0 -192px; }

#cursos li a:hover#cursos_lc { background-position: 0 -224px; }
#cursos li a:hover#cursos_mt { background-position: 0 -256px; }
#cursos li a:hover#cursos_sh { background-position: 0 -288px; }
#cursos li a:hover#cursos_cb { background-position: 0 -320px; }
#cursos li a:hover#cursos_bl { background-position: 0 -352px; }
#cursos li a:hover#cursos_fs { background-position: 0 -384px; }
#cursos li a:hover#cursos_qm { background-position: 0 -416px; }

#social, #social ul {margin:0;}
#social li {float:left; margin-right:0.4em;}
#social li a {
width:32px;
height:32px;
text-indent:-999px;
display:block;
background:url(../img/social.png) no-repeat;
}

#social li a#youtube {background-position:0 0;}
#social li a#twitter {background-position:0 -32px;}
#social li a#flickr {background-position:0 -64px;}
#social li a#facebook_fan {background-position:0 -96px;}
#social li a#facebook_grupo {background-position:0 -128px;}
#social li.clear {clear:both; float:none; height:12px;}

#social li.twitterWidget {clear:both;float:none;height:auto;margin:0;}

#social li.twitterWidget h3,
#social li.twitterWidget h4 {padding-bottom:0;}

#social li.twitterWidget a {width:auto;height:auto;text-indent:0;display:inline;background:none;}

#lastTwit li {margin:0;height:auto;float:left;padding-bottom:1em;}
#lastTwit h4 a {color:#0f7ad1;}
#lastTwit h4 a:hover {color:#fb8b00;}
.twitDate {font-size:0.8em;color:#222;}

#oldTwits li {height:auto;overflow:hidden;margin:0;float:left;}

/**********************
6. VENTANA MODAL
***********************/
#modal {
width:600px;
margin:0;
color:#555;
}
#modal strong { color:#0044ad; }
#modal h1, #modal h2, #modal h3 { color:#0044ad; }
#modal ol li { margin-bottom:1em; list-style-position:inside; }
#modal .column { width:48%; float:left; }
#modal .first.column { margin-right:15px; }
#modal br{ clear:both; }
#modal .pie { font-size:0.9em; line-height:1.4em; }

/**********************
7. BANNERS
***********************/
#bannerWrap {width:670px;height:292px;overflow:hidden;position:relative;}
#bannerWrap .banner {position:absolute;z-index:0;}
#bannerWrap .actual, #bannerWrap .siguiente {float:left;position:relative;z-index:10;}
#bannerWrap .navegar {z-index:5;}

#bannerFrame {position:absolute;top:0;left:0;width:670px;height:292px;overflow:hidden;z-index:99;}
#bannerList {position:absolute;top:20px;left:440px;padding:0 20px 0 10px;list-style:none;overflow:hidden;margin:0;}
#bannerList li{
width:190px;
padding:0.8em 5px;
border-bottom:1px dotted #0044ad;
line-height:1em;
font-size:0.9em;
color:#0044ad;
cursor:pointer;
}

#bannerNav {font-size:0.8em;text-transform:uppercase;font-weight:bold;color:#222;}
#bannerNav .prev {width:50%;float:left;}
#bannerNav .sig {display:block;text-align:right;}
#bannerList li.boldMe {font-size:0.85em;text-transform:uppercase;font-weight:bold;background:#cedce6;cursor:default;}

#bannerClick .cLink {
display:block;
position:absolute;
z-index:20;
top:10px;
left:10px;
width:429px;
height:272px;
}

/**********************
8. TOUR
***********************/
#tour_pasos {
list-style: none;
padding:0;
}

#tour_pasos li {width:190px;float:left;margin-left:20px;}
#tour_pasos li.primero {clear:left;margin-left:0;}
#tour_pasos li.salto {clear:both;float:none;margin:0;width:100%;}

#tour_pasos h4 {padding-bottom: 0;font-size: 1.2em;}
#tour_pasos p {padding-bottom: 0;}
#tour_pasos img {border:0;}

#tour_modal {
width:670px;
padding: 0;
margin: 0;
}

#banner_tour { margin: auto; }

/**********************
9. PIE
***********************/
#contenido {padding-bottom:280px;}

#pie {
position:relative;
width:900px;
height:250px;
margin:0 auto;
margin-top:-270px;
padding:20px 30px 0 30px;
text-align:center;
background:#cedce6 url(../img/pie.jpg) repeat-x;
color:#000;
overflow:hidden;
}

#pie a:hover{color:#000;}

#pie #sitemap {border-top:1px dotted #0044ad;}
#pie .sitemap {text-align:left;float:left;margin:0 10px;width:200px; line-height:1em;}
#pie .primero {height:190px; margin-left:15px; padding-bottom:0.5em; border-right:1px dotted #0044ad;}
.sitemap dt {font-weight:bold;padding:0.5em 0;color:#0044ad;}
.sitemap dd {font-size:0.9em;padding-bottom:0.5em;}
.primero dd {padding:0;}
.sitemap a{color:#0044ad;}
.primero img {height:46px;}

/*********************************
10. CONTACTO Y EXPERIENCIA ONLINE
**********************************/
#experiencia_form {font-weight:bold; color:#0044ad;}

#contacto-datos, #contacto-mensaje {float:left;width:49%;}

#contacto-form label, #experiencia_form label {
width:80px;
display:inline-block;
font-weight:bold;
color:#0044ad;
}
#contacto-form input, #experiencia_form input {
width:150px;
text-align:center;
border:1px solid #ddd;
}
#contacto-form input#contacto-enviar, #experiencia_form input.boton {
width:65px;
height:25px;
font-size:0.9em;
font-weight:bold;
border:0;
color:#fff;
background:url(../img/boton.png) no-repeat;
margin-bottom:0;
}
#contacto-mensaje label {width:auto;}
#contacto-mensaje textarea {
width:250px;
height:100px;
border:1px solid #ddd;
}

/************************
11. TABLAS SALON/HORARIO
*************************/
#instrucciones_salon {border:1px solid #999;}
#instrucciones_salon td {padding:2px 2px 2px 10px;}
#instrucciones_salon td.icono {
min-width:110px;
padding:2px;
text-align:center;
background:#e0dfe3;
}
#instrucciones_salon td.odd {background:#dfe8f5;}
/*
#horarios, #facebox #horarios {
width:610px;
border-collapse:collapse;
text-align:center;
}
#facebox #horarios { width:590px;}
#horarios td, #facebox #horarios td {
width:65px;
padding:2px;
font-weight:bold;
border-right:1px solid #0044ad;
border-bottom:1px solid #0044ad;
}
#horarios .dias, #facebox #horarios .dias {
padding:4px 0;
border:1px solid #0044ad;
font-weight:bold;
background:#0044ad url(../img/sombra_celda.png) bottom repeat-x;
color:#fff;
}
#horarios .horario, #facebox #horarios .horario {
width:90px;
padding:2px 0;
border:1px solid #0044ad;
background:#c3def4 url(../img/sombra_celda.png) bottom repeat-x;
color:#0044ad;
}
#horarios .non, #simbologia .non {
background:#fff url(../img/sombra_celda.png) bottom repeat-x;
color: #ccc;
}

#simbologia {border-collapse:collapse;}
#simbologia td {
width:65px;
border:1px solid #0044ad;
font-weight:bold;
text-align:center;
padding:2px 4px;
}
#simbologia .curso {
width:auto;
border:0;
font-weight:normal;
text-align:left;
padding:2px 6px 2px 0;
}

#horarios .lc, #simbologia .lc {
background:#a81111 url(../img/sombra_celda.png) bottom repeat-x;
color:#fff;
}
#horarios .mt, #simbologia .mt {
background:#73a82c url(../img/sombra_celda.png) bottom repeat-x;
color:#fff;
}
#horarios .sh, #simbologia .sh {
background:#f09000 url(../img/sombra_celda.png) bottom repeat-x;
color: #fff;
}
#horarios .cb, #simbologia .cb {
background:#8b43b6 url(../img/sombra_celda.png) bottom repeat-x;
color: #fff;
}
#facebox #horarios .non {
background:#fff url(../img/sombra_celda.png) bottom repeat-x;
color: #ccc;
}
*/
#horarios {width:610px;border-collapse:collapse;}
#horarios td {
width:65px;padding:2px;
font-weight:bold;text-align:center;
border:1px solid #cdcdcd;
overflow:hidden;
}
#horarios .cabecera td{
padding:4px 0;
border:1px solid #0044ad;
font-weight:bold;
background:#0044ad url(../img/sombra_celda.png) bottom repeat-x;
color:#fff;
}
#horarios .cabecera td.esquina {border:0;background:none;}
#horarios .horario {
width:90px;
padding:2px 0;
border:1px solid #cdcdcd;
background:#f3f3f3 url(../img/sombra_celda.png) bottom repeat-x;color:#0044ad;
}
#horarios .curso,
#simbologia .curso {
display:block;float:left;
width:26px;
margin:1px;padding:7px 3px;
font-size:0.7em;font-weight:bold;
color:#fff;
}
#horarios .mt,
#simbologia .mt {background:#aebf28 url(../img/sombra_celda.png) bottom repeat-x;}
#horarios .lc,
#simbologia .lc {background:#c33e96 url(../img/sombra_celda.png) bottom repeat-x;}
#horarios .cb,
#simbologia .cb {background:#0090e8 url(../img/sombra_celda.png) bottom repeat-x;}
#horarios .sh,
#simbologia .sh {background:#f09000 url(../img/sombra_celda.png) bottom repeat-x;}
#horarios .non,
#simbologia .non {background:#f3f3f3 url(../img/sombra_celda.png) bottom repeat-x;color: #ccc;}

#simbologia .titulo {width:240px;}
/*************
12. PAGE PEEL
**************/
#peel {position:absolute;top:0;left:0;overflow:hidden;z-index:99999;}
#peel-cont, #peel-ctrl {position:absolute;}
#peel-cont {top:0;left:0;width:245px;height:245px;}
#peel-ctrl {bottom:0;right:0;width:245px;height:255px;}

#peel-cont {background:url(../img/page-peel-msg.png);text-indent:-9999px;}
#peel-ctrl {position:absolute;bottom:0;right:0;}