@charset "UTF-8";
/* CSS Document */

/************************************
Cpechonline CSS v3.7

1. ELEMENTOS GENERALES
2. MENU
3. LOGIN Y EXPERIENCIA ONLINE
4. CONTENIDOS
5. BLOQUE CURSOS - FOLLOW
6. VENTANA MODAL
7. BANNERS
8. TOUR
9. PIE

************************************/


/**********************

1. ELEMENTOS GENERALES

***********************/

#miedo {
position: absolute;
top: -165px;
left: -40px;
z-index: 99;
}

#matriculas {
position: absolute;
top: -165px;
left: -40px;
z-index: 99;
}

#avonni {
position: absolute;
top: -220px;
left: -40px;
z-index: 99;
}

#avonni_pie {
position:absolute;
top:5px;
right:130px;
}
#avonni_pie img, #avonni img, #matriculas img, a img { border: 0; }

* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { padding-bottom: 1em; }
h1, h2, h3, h4 { line-height: 1.2em; }
h1, h2, h3 { letter-spacing: -0.06em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
fieldset { border: 0; }

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;
}

#general {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
background: #fff;
position: relative;
}

#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; }

strong { color: #0044ad; }

/**********************

2. MENU

***********************/

#menu {
position:absolute;
top:135px;
left:0;
width:960px;
height:35px;
list-style: none;
}

#menu li { float: left; }

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

#menu li a#home {width:55px;background:url(../img/home_btn.png) 0 0 no-repeat;position:absolute;top:0;left:0;}
#menu li a#btn_que { width: 167px; background-position: -25px -183px;margin-left:25px; }
#menu li a#btn_como { width: 114px; background-position: -192px -183px; }
#menu li a#btn_requisitos { width: 181px; background-position: -306px -183px; }
#menu li a#btn_sala { width: 121px; background-position: -487px -183px; }
#menu li a#btn_docentes { width: 132px; background-position: -608px -183px; }
#menu li a#btn_preguntas { width: 143px; background-position: -740px -183px; }
#menu li a#btn_contacto { width: 77px; background-position: -883px -183px; }

#menu li a:hover#home {background-position:0 -37px;}
#menu li a:hover#btn_que { background-position: -25px -220px; }
#menu li a:hover#btn_como { background-position: -192px -220px; }
#menu li a:hover#btn_requisitos { background-position: -306px -220px; }
#menu li a:hover#btn_sala { background-position: -487px -220px; }
#menu li a:hover#btn_docentes { background-position: -608px -220px; }
#menu li a:hover#btn_preguntas { background-position: -740px -220px; }
#menu li a:hover#btn_contacto { background-position: -883px -220px; }

#menu li.activo a#home {background-position:0 0;}
#menu li.activo a#btn_que { background-position: -25px -257px; }
#menu li.activo a#btn_como { background-position: -192px -257px; }
#menu li.activo a#btn_requisitos { background-position: -306px -257px; }
#menu li.activo a#btn_sala { background-position: -487px -257px; }
#menu li.activo a#btn_docentes { background-position: -608px -257px; }
#menu li.activo a#btn_preguntas { background-position: -740px -257px; }
#menu li.activo a#btn_contacto { background-position: -883px -257px; }

/*******************************

3. LOGIN Y EXPERIENCIA ONLINE

********************************/

#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, #experiencia_form label {
font-size: 0.8em;
font-weight: bold;
width: 50px;
display: block;
float: left;
}

#login input, #experiencia_form 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: 100px; }
#login #dv { width: 20px; }

#experiencia_form { font-weight: bold; color: #0044ad; }
#experiencia_form label { text-transform: uppercase; }
#experiencia_form input { width: 100px; margin-bottom: 10px; }

#login input.boton, #experiencia_form 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;
}


/**********************

4. CONTENIDOS

***********************/

#columna_lateral, #columna_principal {float:right;}
#columna_principal {width:670px;}

#contenido { position: relative; padding: 0 10px; }
#contenido h1, #contenido h2, #contenido h3, #contenido h4 { color: #0044ad; }
#contenido h2 { text-transform: uppercase; }

.caja_interior h2, .caja_interior h3 { margin-bottom: -0.5em;}

.interior_contenido ul { padding-left: 1em; }
.interior_contenido ul li { margin-bottom: 10px; }

.contWrap {
padding-left:30px;
background:url(../img/contwrap.jpg) top left no-repeat;
}
.mainCont {
padding:20px 30px 20px 0;
background: url(../img/contwrap.jpg) top right no-repeat;
}

#homeCont {width:610px;list-style:none;}
#homeCont li {width:190px;padding-bottom:10px;float:left;}
#homeCont li.odd {padding:0 20px;}
#homeCont li.noCol {width:auto;}
#homeCont li img {margin:-2px 4px -4px -2px;border:0;}
#homeCont h3{padding-bottom:0;}

#servDesc {width:190px;padding-right:20px;float:left;}
#servList {float:left;list-style:disc inside;}
#servList li {width:auto;float:none;padding-bottom:0;}

#cursos, #follow {width:240px;}

#cursos .mainCont, #follow .mainCont {list-style:none; padding-bottom:20px;}

.caja_interior h3 { padding-top: 0.3em; border-top: 1px solid #ccc; }
.caja_interior h3.sinborde { border-top: none; }

hr.clear { color: #fff; border: 0px #fff; clear: both; height: 0; }

.caja_interior {
width: 640px;
padding-left: 30px;
background: url(../img/online.jpg) 0px -339px no-repeat;
}
.interior_contenido {
padding: 20px 30px 0 0;
background: url(../img/online.jpg) -30px -339px no-repeat;
}

.interior_contenido .first { margin-right: 15px; }
.columnizeMe .first {padding-right:15px;}
.columnizeMe3 .first { padding-right: 15px; }
.columnizeMe3 .last { padding-left: 15px; }

.columnaDestacada {
width: 80%;
height: auto;
margin: auto;
margin-bottom: 1em;
padding: 1em;
border: 1px solid #0044ad;
background: #dfe8f5;
color: #333;
}

#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 { border-collapse: collapse; text-align: center; }

#horarios td { width: 65px; font-weight: bold; border-right: 1px solid #0044ad; border-bottom: 1px solid #0044ad; }
#horarios .dias { padding: 4px; border: 1px solid #0044ad; font-weight: bold; background: #0044ad url(../img/sombra_celda.png) bottom repeat-x; color: #fff; }
#horarios .horario { width: 90px; padding: 2px 0; border: 1px solid #0044ad; background: #c3def4 url(../img/sombra_celda.png) bottom repeat-x; color: #0044ad; }

#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; }

/**************************

5. BLOQUE CURSOS - FOLLOW

***************************/

#cursos li, #follow 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: #a81111; background-position: 0 0; }
#cursos li a#cursos_mt { color: #73a82c; background-position: 0 -32px; }
#cursos li a#cursos_sh { color: #f09000; background-position: 0 -64px; }
#cursos li a#cursos_cb { color: #8b43b6; background-position: 0 -96px; }
#cursos li a#cursos_bl { color: #8b43b6; background-position: 0 -128px; }
#cursos li a#cursos_fs { color: #8b43b6; background-position: 0 -160px; }
#cursos li a#cursos_qm { color: #8b43b6; 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; }

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

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

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

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

#follow 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:auto;margin:0;float:left;}



/**********************

6. VENTANA MODAL

***********************/

#modal {
width: 610px;
padding: 20px 30px;
margin: 0;
color: #555;
background: #fff url(../img/modal.png) no-repeat; }
#modal strong { color: #0044ad; }
#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; color: #0f7ad1; }

/**********************

7. BANNERS

***********************/

.e_horizontal {width:670px;height:292px;overflow:hidden;position:relative;}
.e_vertical {width:270px;height:400px;overflow:hidden;}
.banners {list-style: none;}
.banners li {display: inline;}
.banners img {border: 0;}

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

#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;}

#bannerClick .cLink {
display:block;
position:absolute;
z-index:10;
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

***********************/
#general {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;padding:0 2em;}
#pie .sitemap {text-align:left;float:left;margin:0 1em;}
.sitemap dt {font-weight:bold;padding-top:0.5em;color:#0044ad;}
.sitemap dd {font-size:0.9em;}
.sitemap a{color:#0044ad;}