/**********************************************
 * Hoja de estilos para el sitio luismedel.com
 * 
 * Autor: Luis Medel <luis@luismedel.com>
 * Julio 2008
 *
 *
 * Notas de desarrollo:
 * - Lo que deberķa ser #content_splash_clase se convierte
 *   en #content_splash_clase por culpa del maldito pedazo de #%&$?*
 *   de Internet Explorer.
 **********************************************/

a, abbr, acronym, applet, blockquote, body, del, div, em, fieldset, form, h1,
h2, h3, h4, h5, h6, html, iframe, img, label, legend, li, object, ol, p, pre,
span, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: inherit;
}

body {
    font-size: 80%;
    background: #ffffff url(/gfx/pgrisclaro_body.jpg) left top no-repeat;
}

h1 { font-size: 185%; }
h2 { font-size: 165%; }
h3 { font-size: 135%; }
h4 { font-size: 115%; }

h1, h2, h3, h4, h5 {
    font-weight: normal;
    margin-bottom: 1em;
}

p { margin-bottom: 1em; }

a, a:visited {
    color: #2a8dc4;
    text-decoration: none;
}

a:hover {
    color: #53b3e8;
    text-decoration: underline;
}


#navigation {
    float: right;
    width: 650px;
    margin-top: 40px;
    display: inline;
}

#navigation #menu {
    list-style: none;
    color: #9c9c9c;
    margin: 15px 0px 0px 0px;
    padding: 0px;
}

#navigation #menu li {
    display: inline;
    margin: 0px;
    padding: 0px;
}

#navigation #menu a {
    text-decoration: none;
    margin: 0px;
    padding: 6px 8px 6px 8px;
    color: #9c9c9c;
    background-color: transparent;
    background-position: left -2000px;
    background-repeat: repeat-x;
    border: 1px solid #ffffff;
}

#navigation #menu li.hola a { background-image: url(/gfx/pbazul.jpg); }
#navigation #menu li.que_hago a { background-image: url(/gfx/pbrojooscuro.jpg); }
#navigation #menu li.contacto a { background-image: url(/gfx/pbverde.jpg); }
#navigation #menu li.acerca_de a { background-image: url(/gfx/pbazulgris.jpg); }
#navigation #menu li.blog a { background-image: url(/gfx/pbazul2.jpg); }

#navigation #menu li.hola a:hover,
#navigation #menu li.hola.activo a {
    background-position: left top;
    color: #ffffff;
    border-right: 1px solid #023569;
    border-bottom: 1px solid #023569;
}


#navigation #menu li.que_hago a:hover,
#navigation #menu li.que_hago.activo a {
    background-position: left top;
    color: #e6a4a4;
    border-right: 1px solid #8a5d5d;
    border-bottom: 1px solid #8a5d5d;
}

#navigation #menu li.contacto a:hover,
#navigation #menu li.contacto.activo a {
    background-position: left top;
    color: #eaf267;
    border-right: 1px solid #668a5d;
    border-bottom: 1px solid #668a5d;
}

#navigation #menu li.acerca_de a:hover,
#navigation #menu li.acerca_de.activo a {
    background-position: left top;
    color: #ffffff;
    border-right: 1px solid #668a5d;
    border-bottom: 1px solid #668a5d;
}

#navigation #menu li.blog a:hover,
#navigation #menu li.blog.activo a {
    background-position: left top;
    color: #a2e2f2;
    border-right: 1px solid #5d818a;
    border-bottom: 1px solid #5d818a;
}


#header {
    background-color: transparent;
    height: 175px;
    color: #000000;
}

#header #logo {
    float: left;
    margin: 20px 0px 0px 0px;
}

#header #tagline {
    float: left;
    margin-top: 1em;
    color: #a0a0a0;
}

#content_splash_hola #img_splash {
    float: right;
    width: 288px;
    height: 288px;
}

#content_splash_que_hago #img_splash {
    float: left;
    width: 288px;
    height: 288px;
}

#content_splash_acerca_de #img_splash {
    float: right;
    width: 288px;
    height: 288px;
}

#content_splash_contacto #img_splash {
    float: right;
    width: 288px;
    height: 288px;
}

#content_splash_blog #img_splash {
    float: right;
    width: 288px;
    height: 288px;
}


#content_splash_hola,
#content_splash_que_hago,
#content_splash_contacto,
#content_splash_acerca_de,
#content_splash_blog {
    clear: both;
    padding: 10px;
    margin-top: 1em;
    background-position: left 70px;
    background-repeat: repeat-x;
    color: #ffffff;
}

#txt_splash {
    padding-top: 80px;
}

#txt_splash a,
#txt_splash a:visited {
    color: #cecece;
    text-decoration: underline;
}

#blog_tagline {
    font-size: 120%;
    margin: 0px;
    padding: 0px;
}

#txt_splash a:hover {
    color: #ffffff;
}

#content_splash_hola {
    background-image:url(/gfx/pazul.jpg);
}

#content_splash_hola #txt_splash h2 {
    color: #8095b2;
}

#content_splash_hola #txt_splash {
    line-height: 160%;
    font-size: 125%;
}

#content_splash_que_hago {
    background-image:url(/gfx/projoosc.jpg);
}

#content_splash_que_hago #txt_splash h2 {
    color: #e6a4a4;
}

#content_splash_que_hago #txt_splash {
    line-height: 160%;
    font-size: 125%;
}

#content_splash_acerca_de {
    background-image:url(/gfx/pazulgris.jpg);
}

#content_splash_acerca_de #txt_splash {
    line-height: 160%;
    font-size: 125%;
}

#content_splash_contacto {
    background-image: url(/gfx/pverde.jpg);
}

#content_splash_contacto #txt_splash {
    line-height: 160%;
    font-size: 125%;
}

#content_splash_blog #txt_splash h2 {
    color: #d0e5ff;
}

#content_splash_blog {
    background-image:url(/gfx/pazul2.jpg);
}

#content_splash_blog #txt_splash {
    line-height: 160%;
    font-size: 125%;
}


#content_hola,
#content_que_hago,
#content_contacto,
#content_acerca_de,
#content_blog {
    clear: both;
    /*background: #ffffff url(/gfx/fondo-content.gif) left top repeat-x;*/
    background: #ffffff url(/gfx/fnd.gif) left top repeat-x;
    padding: 5em 10px 5em 10px;
    color: #000000;
}

#txt_content {
    font-size: 115%;
    line-height: 160%;
    color: #666666;
}

#txt_content h2,
#txt_content h3,
#txt_content h4,
#txt_content h5 {
    margin: 0.5em 0 0.5em 0;
    color: #666666;
}

#txt_content h2 a {
    color: #666666;
}

#content_hola #txt_content .columna_info {
    float: left;
    width: 480px;
    text-align: justify;
}

#content_hola #txt_content .columna_info img.izquierda {
    float: left;
}

#content_hola #txt_content .columna_info img.derecha {
    float: right;
    margin-left: 1.2em;
}

#content_hola #txt_content .columna_info ul {
    list-style: url(/gfx/bullet_blue.gif);
    margin: 0.5em 0em 0.5em 2em;
}

#content_hola #txt_content .columna_blog {
    float: left;
    width: 410px;
    margin-left: 40px;
    text-align: justify;
}

#content_hola #txt_content .columna_blog img.derecha {
    float: right;
}

#content_hola #txt_content .columna_blog h3 {
    margin: 0.5em 0px 0.2em 0px;
    padding: 0px;
}

#content_hola #txt_content .columna_blog li {
    list-style: inside square;
}


#content_hola #txt_content .columna_blog .post_summary {
    margin-bottom: 1em;
}

#content_hola #txt_content .columna_blog p {
    margin: 0px;
    padding: 0px;
}

#content_que_hago #txt_content .columnas {
    background-image: url(/gfx/fondo_columnas.gif);
    background-position: left top;
    background-repeat: repeat-y;
}

#content_que_hago #txt_content .columnas .columna {
    float: left;
    width: 280px;
    margin-right: 20px;
    margin-left: 20px;
}

#content_que_hago #txt_content .columnas_info {
    clear: both;
    margin: 3em 20px 0px 20px;
}

#content_que_hago #txt_content .columna_ancha {
    clear: both;
    margin: 3em 20px 0px 20px;
}

#content_que_hago #txt_content .columnas .columna img,
#content_que_hago #txt_content .columna_ancha img {
    float: right;
}

#content_que_hago #txt_content .columnas .columna h2,
#content_que_hago #txt_content .columna_ancha h2 {
    float: left;
}

#content_que_hago #txt_content .columnas .columna p,
#content_que_hago #txt_content .columna_ancha p {
    clear: left;
}

#content_que_hago #txt_content .salto_nivel {
    padding: 0px;
    clear: both;
    float: none;
}


#content_que_hago #txt_content .columna_servicios {
    float: left;
    width: 480px;
    margin-right: 15px;
}

#content_que_hago #txt_content .columna_servicios ul {
    list-style: url(/gfx/bullet_red.gif);
    margin: 0.5em 0em 0.5em 2em;
}

#content_que_hago #txt_content .columna_tecnologias {
    float: left;
    width: 400px;
    margin-left: 20px;
}

#content_que_hago #txt_content .columna_tecnologias img {
    margin: 0px 5px 0px 5px;
    vertical-align: middle;
}


#content_contacto div.msg_error {
    float: left;
    margin-left: 2em;
    font-size: 125%;
    display: none;
}

#content_contacto h2,
#content_contacto p {
    clear: both;
}

#content_blog {
}

#content_blog fieldset {
    margin-top: 2em;
    padding: 1em;
    border: 1px solid #ccc;
    background: url(/gfx/pform.jpg) left top repeat-x;
}

#content_blog fieldset .form_title {
    margin-bottom: 1.5em;
}

/*
#content_blog fieldset,
#content_blog form,
#content_blog p {
    margin: 0.5em 0px 0px 0px;
    padding: 0px;
}

#content_blog fieldset {
    margin-top: 2em;
    padding: 1em;
    border: 1px solid #ccc;
    background: url(/gfx/pform.jpg) left top repeat-x;
}

#content_blog fieldset h2 {
    margin-bottom: 1.5em;
}

#content_blog fieldset p {
    clear: both;
}

#content_blog fieldset input,
#content_blog fieldset textarea {
    float: left;
    padding: 0px;
    margin-bottom: 1.5em;
    margin-right: 1em;
}

#content_blog fieldset label {
    float: left;
    margin-right: 1em;
}

#content_blog fieldset label span {
    font-size: 0.8em;
    font-style: italic;
    font-weight: bold;
}

#content_blog fieldset textarea {
    width: 500px;
    height: 8em;
}
*/

#footer {
    clear: both;
    background: #ffffff url(/gfx/pgrisclaro.jpg) left top repeat-x;
    border-top: 1px dotted #b4b4b4;
    padding: 5em 10px 10px 10px;
    color: #666666;
    font-size: 115%;
    line-height: 160%;
}

#footer h1 {
    margin-bottom: 0.5em;
    font-size: 155%;
}

#footer #contacto {
    float: left;
    margin-bottom: 50px;
}

#footer #contacto ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#footer #copyright {
    float: left;
    font-size: 75%;
    text-align: left;
}

#footer #hecho_con {
    float: right;
    font-size: 75%;
    text-align: right;
}

.content_wrapper {
    width: 980px;
    float: none;
    margin: auto;
}

.footer_helper {
    clear: both;
}

fieldset input.text, fieldset textarea {
    border: solid 1px #ccc;
    width: 400px;
}

fieldset .wrapper {
    width: 600px;
    margin: 0.5em 0 1em 0;
}

fieldset .wrapper .errorlist {
    color: red;
}

fieldset .wrapper .nota {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

fieldset .wrapper .errorlist li {
    background: url(/gfx/error.png) left center no-repeat;
    padding-left: 20px;
    list-style: none;
}