/* -------------------------------------------------------------------------------------------- */
body {
    font-family:        verdana,"Lucida Grande",arial,helvetica,sans-serif;
    font-size:          100%;       /* 16px casi siempre, utilizar aquí em's falla en IE */
    background-color:   #DDDDDD;    /*#EEEEEE;*/
    margin:             0px;
}

/* -------------------------------------------------------------------------------------------- */

/* los enlaces tienen un subrayado en el footer y en el contenido */
a {
    text-decoration:    none;
    color:              black;
    border-bottom:      thin dotted #000000;
}

a:link {
    text-decoration:    none;
    color:              black;
    border-bottom:      thin dotted #000000;
}

a:visited {
    text-decoration:    none;
    color:              black;
    border-bottom:      thin dotted #000000;
}

a:hover {
    background-color:   #FFFFCC;
}

/* -> menú izquierda */

#left-menu a {
    border-bottom:      none;
}

#left-menu a:link {
    border-bottom:      none;
}

#left-menu a:visited {
    border-bottom:      none;
}

.menu-heading a:hover {
    color:              black;
}

/* -> cabecera */

#header a {
    border-bottom:      none;
}

#header a:link {
    border-bottom:      none;
}

#header a:visited {
    border-bottom:      none;
}

#header a:hover {
    background-color:   transparent;
}

/* -> contenido */

#content a {
    border-bottom:      thin dotted #000000;
}

#content a:link {
    border-bottom:      thin dotted #000000;
}

#content a:visited {
    border-bottom:      thin dotted #000000;
}

#content a:hover {
    background-color:   #FFFFCC;
}

/* -------------------------------------------------------------------------------------------- */
#container {
    width:              63em;
    margin-left:        auto;
    margin-right:       auto;
    margin-top:         0.5em;
    margin-bottom:      1em; 
}

#main-logo {
    width:              5em;
    height:             5em;
    float:              left;
    margin-top:         0.5em;
    /*
    position:           absolute;
    top:                0px;
    left:               0px;
    z-index:            1;
    */
}

#header, #footer, #left-menu, #right-menu, #content {
    background-color:   white;
}

#header {
    margin-bottom:      1em;
    text-align:         center;
}

#header-top {
    width:              40em;
    margin-left:        auto;
    margin-right:       auto;
}

#header-top h1 {
    margin:             0px;
    position:           relative;   /* para que flote por encima del logo */
    padding:            0.2em;
}

#header-bottom {
    background-color:   #99FF00; /* verde intenso que tiene el logo de gestalt a los lados */
    height:             1.5em;      /* *toDO* por qué tengo que forzarle aquí una altura? */
}

#header-bottom img {
    width:              9.5em;
    margin-left:        1em;
}

#content {
    width:              35em;
    padding:            1em 1em 1em 1em;
    text-align:         justify;
}

#content p {
    margin:             1em 0px 1em 0px;
}

#content em, #content quote, #content blockquote {
    font-style:         italic;
}

#content blockquote {
    margin-left:        3em;
    margin-right:       3em;
}

/* CSS 2.1 */
#content p:first-child, #content h4:first-child {
    margin-top:         0px;
}

#content .right {
    float:              right;
    margin:             1em 0px 1em 1em;
}

#content .left {
    float:              left;
    margin:             1em 1em 1em 0px;
}

#content .right-top {
    float:              right;
    margin:             0px 0px 1em 1em;
}

#content .left-top {
    float:              left;
    margin:             0px 1em 1em 0px;
}

#content-header {
    width:              31.111111111111111111111111111111em; /* 35em (#content.width) / 1.125em (h2) */
    padding-left:       0.88888888888888888888888888888889em;  /* 1em (#content.padding) / 1.125em (h2) */
    padding-right:      0.88888888888888888888888888888889em;  /* 1em (#content.padding) / 1.125em (h2) */
    font-size:          1.125em; /* copiado de <h2> */
    font-weight:        bold; /* copiado de <h2> */
}

#left-menu {
    width:              12em;
    float:              left;
    margin-bottom:      1em;
    position:           relative; /* para posicionar de forma absoluta a #middle-panel */
}

.menu-heading a, .menu-subheading a {
    display:            block;
}

#right-menu {
    width:              12em;
    float:              right;
    margin-bottom:      1em;
}

#footer {
    height:             3em;
    margin-top:         1em;
    margin-bottom:      1em;
    clear:              both;
    text-align:         center;
}

#footer p {
    vertical-align:     middle;
    /* esto viene a que no consigo centrar verticalmente el texto con vertical-align */
    padding-top:        0.5em;
    padding-bottom:     0.5em;
    line-height:        1em;
}

#middle-panel {
    position:           absolute; /* con respecto a #left-menu */
    top:                0px;
    margin-left:        13em;
}

/* -------------------------------------------------------------------------------------------- */
h1 {
    font-size:          2.5em;
    font-weight:        bold;
    line-height:        1em;
}

h2 {
    font-size:          1.125em;
    font-weight:        bold;
}

h3 {
    font-size:          1.125em;
    font-weight:        normal;
}

h4 {
    font-size:          1.125em;
    font-weight:        bold;
}

h5 {
    font-size:          1em;
    font-weight:        bold;
}

img {
    border:             0px;
}

/* -------------------------------------------------------------------------------------------- */
.menu-heading, .menu-subheading {   /* porque los h2/h3 tienen padding por defecto */
    padding:            0px;
    margin:             0px;
}

.menu-heading {
    padding:            0.3em;
    background-color:   red;
    color:              white;
}

.menu-heading a {
    color:              white;
}

.menu-subheading {
    padding:            0.3em;
    color:              black;
}

/* -------------------------------------------------------------------------------------------- */
.post-short {
    background-color:   white;
    margin-top:         1em;
    padding:            1em;
}

.post-short-head {
    position:           relative;
    border-bottom:      1px solid black;
    padding-bottom:     0.5em;
    margin-bottom:      1em;
}

/*
.post-short-date {
    font-weight:        bold;
    border-right:       1px solid black;
    width:              2.8em;  // el doble de .post-short-day:font-size
}

.post-short-day {
    font-size:          1.4em;
    color:              #555555;
}

.post-short-month {
}
*/

.post-short-title {
    font-weight:        bold;
    font-size:          1.2em;
}

.post-short-title a {
    border-bottom:      none !important;
}

.highlight {
    background-color:   rgb(255, 255, 204);
    /*font-weight:        bold;*/
}

.post-short-meta {
    font-weight:        normal;
    font-size:          0.6em;
    color:              #555555;
}

.post-short-body {
}

.post-short-footer {
    margin-top:         1em;
}

.post-short-footer a {
    font-weight:        bold;
}

/* -------------------------------------------------------------------------------------------- */
.clear-right {
    clear:              right;
}

.clear-left {
    clear:              left;
}

.centered {
    text-align:         center;
}

.justify{
    text-align:         justify;
}

.position-relative {
    position:           relative;
}

/* -------------------------------------------------------------------------------------------- */
#flickr-badge, #youtube-badge {
    margin:            1em auto 1em auto;
}

#right-menu a {
    border:            none;
}

/* -------------------------------------------------------------------------------------------- */
.ads {
    margin:            0.75em;
    border:            0.25em solid #80ffff;
}

/* -------------------------------------------------------------------------------------------- */
#email-access a {
    position:          absolute;
    top:               0px;
    right:             0px;
    width:             50px;
    height:            50px;
    border:            none;
}
#email-access a:hover {
    background-color: rgb(255, 255, 204);
}

/* -------------------------------------------------------------------------------------------- */
#content p.attribution-small {
  font-size: 0.35em;
  margin:    0px;
}

#content p.attribution-big {
  font-size: 0.75em;
  margin:    0px;
}