/* ==========================================================================
   Styling and layout for screen media (mobile first)
   ========================================================================== */

@media screen {

    /* Layout
    ========================================================================== */

    body {
    margin: 0;
    background: #fafafa;
    }

    .wrapper {
    border-bottom: solid 1px #ccc;
    padding-top: 2.5em;
    background: #fff;
    }

    .wrapper .subtitulo {
        margin: 0 auto;
        width: 85%;
        padding-bottom: 1.5em;
        text-align: justify;
        margin-top: -1.5em;
    }

    .container,
    footer {
        margin: 0 auto;
        width: 90%;
        max-width: 1280px;
    }

    footer {
        text-align: center;
    }

    header {
        margin: 0 auto;
        width: none;
        max-width: none;
        padding-top: 0;
        padding-left: 5%;
        padding-right: 5%;
        background: url("/images/cms/gradiente_cabecera.png") repeat-x scroll left top #4C94E0;
    }

    header hgroup {
        padding-top: 10px;
    }

    header h1 {
        margin: 0;
    }

    header h3 {
        margin: 0.3em 0 0.7em 0;
    }

    nav {
        border: none;
        background: none;
        color: white;
    }

    nav ul {
        margin: 0 auto;
        padding: 0;
        list-style: none;
        list-style-image: none;
        float: right;
    }

    nav li {
        margin: 0;
    }

    nav li:last-child {
        border-bottom: 0;
    }

    nav li.active a {
        background: none repeat scroll 0 0 white;
        color: #21759B;
        text-shadow: none;
        border-radius: 6px 6px 6px 6px;
    }

    nav li:hover {
        background: none;
    }

    nav a {
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
        display: block;
        padding: .5em 3.125%;
        color: white;
    }

    [role="article"] {
        border-bottom: 1px solid #D9D9D9;
        margin-bottom: 1em;
        padding-bottom: 0.9em;
    }

    [role="complementary"] {
        margin-bottom: 2em;
        padding-top: 2em;
        border-top: dashed 2px #ccc;
    }


    [role="search"] p {
        margin-top: 0;
    }

    footer {
        padding: .5em 0;
    }

    [role="navigation"] {
        line-height: 1;
        position: absolute;
        right: 1em;
        padding-top: 5px;
    }

    div.feed-rss {
        position: absolute;
        top: 1em;
        right: 1em;
    }

    a.followme {
        margin-right: 7px;
    }

    .entry-content ul,
    .excerpt ul  {
        margin-left: 3em;
    }

    /* Logo y subtítulo del blog
    ========================================================================== */

    [role="banner"] .ciges {
        color: white;
        letter-spacing: 2px;
    }

    [role="banner"] h3  {
        color: #444444;
    }

    [role="banner"] .punto{
        color: #f1871f;
    }

    [role="banner"] .net {
        color: #65c5e5;
        font-weight: normal;
    }

    /* Estilos para código (coloreado con Geshi y metido a pelo con bc. o pre.)
    ========================================================================== */
    .javascript,
    .php,
    .bash,
    .ini,
    .python,
    .sql,
    .html5,
    pre  {
        margin-left: 4em;
        padding: 1em;
        background-color: #F7F7F7;
        border: 1px dotted #A0A0A0;
        /* El ancho está indicado más adelante (diferentes anchos en función de si es un móvil o un PC */
    }

    /* Tabla de contenidos
    ========================================================================== */

    div.toc,
    div.toc_sinimagen {
        margin-left: 1em;
        margin-bottom: 2em;
        padding: 1em;
    }
    div.toc h2,
    div.toc_sinimagen h2 {
        font-style: italic;
        font-family: Georgia,Times,"Times New Roman",Serif;
        color: #21759B;
        margin: 0;
    }
    
    /* div.toc {
        width: 30em;
    } */
    
    /* div.toc_sinimagen {
        width: 100%;
    } */
    

    /* Listados de etiqetas, articulos recientes ...
    ========================================================================== */
    [role="complementary"] h4 {
        margin-bottom: 10px;
        margin-top: 1em;
        border-bottom: 1px solid #DEDEDE;
    }

    /* Para el título de la primera sección quitamos el margen superior  */
    [role="search"] h4 {
        margin-top: 0;
    }

    [role="complementary"] ul {
        list-style: square outside none;
        margin-left: 0;
    }

    /* Links
    ========================================================================== */

    a {
        position: relative;
        text-decoration: none;
        color: #21759b;
        -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5);
    }

    [role="main"] a:hover, [role="main"] a:active,
    [role="complementary"] a:hover, [role="complementary"] a:active,
    footer a:hover, footer a:active,
    header h3 a:hover, header h3 a:active {
        color: #d54e21;
        text-decoration: none;
    }

    [role="main"] a:hover,
    [role="complementary"] a:hover,
    footer a:hover,
    header h3 a:hover, header h3 a:active {
        border-bottom: 1px solid #d54e21;
    }

    [role="main"] a:hover.button,
    [role="complementary"] a:hover.button,
    footer a:hover.button,
    header h3 a:hover.button, header h3 a:active.button {
        border-bottom: none;
    }

    a.followme:hover {
        border-bottom: 0;
    }

    a:hover, a:active {
        /* improves readability when focused and also mouse hovered in all browsers */
        outline: 0;
    }

    a:active {
        top: 1px;
    }

    a:focus {
        outline: thin dotted #06f;
    }

    /* Typography
    ========================================================================== */

    body {
        font-family: sans-serif;
        font-size: 0.8em;
        line-height: 1.5;
        color: #333;
    }

    nav {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }

    h1 {
        font-family: Georgia, Times, "Times New Roman", Serif;
        font-size: 2.5em;
        line-height: 1.23809523809524;
        letter-spacing: 0px;
        margin: .66666666666667em 0;
    }

    h1:first-child {
        margin-top: 0;
    }

    h1.entry-title  {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: normal;
        color: #21759b;
    }

    h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.25em;
        line-height: 1.42857142857143;
        margin: .75em 0;
    }

    .entry-content h1,
    .entry-content h2,
    .entry-content h3 {
        color: #21759b;
    }

    h3 {
        font-family: "Times New Roman", Serif;
        font-size: 1.2em;
        font-weight: normal;
        font-style: italic;
        margin: .76190476190476em 0;
    }

    .entry-content h3 {
        font-weight: bold;
    }

    h4 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.14285714285714em;
        margin: 0;
    }

    blockquote {
        font-size: 1.14285714285714em;
        font-style: italic;
        margin: .875em 0 .875em 0;
        padding: 1px .875em;
        -moz-border-radius: .35714285714286em;
        border-radius: .35714285714286em;
        background: #fff6d3;
    }

    dfn,
    q {
        font-style: italic;
        background: #fff6d3;
    }

    address {
        margin: 1em 0;
    }

    /* addresses styling not present in IE7-9, Safari5, Chrome */
    abbr[title],
    dfn[title] {
        border-bottom: dotted 1px;
        cursor: help;
    }

    mark,
    var {
        padding: 0 .21428571428571em;
        -moz-border-radius: .21428571428571em;
        border-radius: .21428571428571em;
        color: #333;
        background: #fff6d3;
    }

    var {
        font-weight: bold;
    }

    pre,
    code,
    kbd,
    samp {
        font-family: Cousine, Consolas, "Lucida Console", Monaco, monospace;
    }

    code,
    kbd,
    samp {
        font-size: .92857142857143em;
        padding: 0 .23076923076923em;
        color: #000088;
    }

    pre {
        font-size: .92857142857143em;
        overflow-x: auto;
        padding: 1em;
        background: #f7f7f7;
    }

    pre code {
        font-size: 0.8em;
        border: 0;
        padding: 0;
        background: none;
        color: #333333;
        font-family: monospace;
    }

    small,
    figcaption,
    tfoot,
    .footnote {
        font-size: .85714285714286em;
    }

    figcaption,
    tfoot,
    .footnote {
        color: #888;
    }

    figcaption {
        margin-top: .33333333333333em;
        font-style: italic;
    }

    /* Link to article edit form */
    .article_edit {
        font-style: italic;
        font-weight: bold;
        line-height: 1;
        margin-top: -0,5em;
    }
    
    /* Metadatos del artículo */
    #metadatos_articulo {
        padding: 0.5em 0;
    }

    /* Embedded content
    ========================================================================== */

    /* removes border when inside 'a' element in IE7-9, Firefox3, improves image quality when scaled in IE7 -
        code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
    }

    /* image alignemnts */
    img.align-left {
        float: left;
        margin: 1em 1em 1em 0;
    }
    img.align-right {
        float: right;
        margin: 1em 0 1em 1em;
    }
    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /* corrects overflow displayed oddly in IE9 */
    svg:not(:root) {
        overflow: hidden;
    }

    article img,
    article embed,
    article object,
    article video {
        max-width: 100%;
    }

    figure {
        margin: 0;
    }

    /* Añadido para subir un poco las imágenes en los listados de artículos */
    img.up4em {
        margin-top: -4em;
    }

    /* Imagen propia del artículo  */
    div.hfeed {
        position: relative;
    }

    img.article_image {
        float: right;
        margin: -3em 1em 1em 1em;
    }

    img.conborde {
        /* border: solid 1px #21759B; */
        padding: 5px;
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    }


    /* Tables
    ========================================================================== */

    table {
        margin: 0 auto 1em auto;
        border-collapse: collapse;
        border-spacing: 0;
        width: 80%;
        font-size: 0.8em;
        line-height: 1.5;
        text-align: right;
    }

    caption,
    .table_caption {
        font-style: italic;
        text-align: center;
        margin-bottom: .5em;
        color: #21759B;
        font-weight: bold;
    }

    th,
    td {
        border-bottom: solid 1px #ccc;
        padding: .28571428571429em .5em .28571428571429em 0;
    }

    th:last-child,
    td:last-child {
        padding-right: 0;
    }

    th,
    td {
        /* text-align: right; */
        text-align: left;
    }

    thead th,
    thead td {
        border-bottom: solid 2px #ccc;
    }

    tfoot th,
    tfoot td {
        border-bottom: 0;
        padding: .33333333333333em .58333333333333em .33333333333333em 0;
    }

    tfoot:last-child {
        padding-right: 0;
    }

    /* Lists
    ========================================================================== */

    #monthly-list {
        list-style: none;
        padding: 0;
    }

    #monthly-list li {
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        float: left;
        display: block;
        margin: 0 .5em .5em 0;
        min-width: 2.5em;
        border: solid 1px #ccc;
        -moz-border-radius: .35714285714286em;
        border-radius: .35714285714286em;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        background: #fff;
    }

    #monthly-list li:active {
        position: relative;
        top: 1px;
    }

    #monthly-list a {
        display: block;
        text-decoration: none;
        color: #333;
    }

    #monthly-list a:hover,
    #monthly-list a:focus {
        color: #1a1a1a;
    }

    #monthly-list a:focus {
        outline: 0;
    }

    #monthly-list a:active {
        top: 0;
    }

    #monthly-list a .archive-year {
        font-size: .85714285714286em;
        font-weight: bold;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
        -moz-border-radius: .35714285714286em .35714285714286em 0 0;
        border-radius: .35714285714286em .35714285714286em 0 0;
        padding: 0 .33333333333333em;
        background-color: #c5d4eb;
        /* Konqueror */
        background-image: -khtml-gradient(linear, left top, left bottom, from(#c5d4eb), to(#88acdc));
        /* Safari4+, Chrome */
        background-image: -webkit-gradient(linear, left top, left bottom, from(#c5d4eb), to(#88acdc));
        /* Safari5.1+, Chrome10+ */
        background-image: -webkit-linear-gradient(#c5d4eb, #88acdc);
        /* Firefox3.6 */
        background-image: -moz-linear-gradient(#c5d4eb, #88acdc);
        /* IE10 */
        background-image: -ms-linear-gradient(#c5d4eb, #88acdc);
        /* Opera11.10+ */
        background-image: -o-linear-gradient(#c5d4eb, #88acdc);
        /* CSS3 Compliant */
        background-image: linear-gradient(#c5d4eb, #88acdc);
        /* IE7-9 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c5d4eb',EndColorStr='#88acdc');
        /* hack to remove any border-radius in IE9 so we can keep filter gradients */
        border-radius: 0 \0;
    }

    #monthly-list a:hover .archive-year,
    #monthly-list a:focus .archive-year {
        background-color: #efede8;
        /* Konqueror */
        background-image: -khtml-gradient(linear, left top, left bottom, from(#efede8), to(#e9e7e0));
        /* Safari4+, Chrome */
        background-image: -webkit-gradient(linear, left top, left bottom, from(#efede8), to(#e9e7e0));
        /* Safari5.1+, Chrome10+ */
        background-image: -webkit-linear-gradient(#efede8, #e9e7e0);
        /* Firefox3.6 */
        background-image: -moz-linear-gradient(#efede8, #e9e7e0);
        /* IE10 */
        background-image: -ms-linear-gradient(#efede8, #e9e7e0);
        /* Opera11.10+ */
        background-image: -o-linear-gradient(#efede8, #e9e7e0);
        /* CSS3 Compliant */
        background-image: linear-gradient(#efede8, #e9e7e0);
        /* IE7-9 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efede8',EndColorStr='#e9e7e0');
        /* hack to remove any border-radius in IE9 so we can keep filter gradients */
        border-radius: 0 \0;
    }

    #monthly-list a .archive-month {
        -moz-border-radius: 0 0 .35714285714286em .35714285714286em;
        border-radius: 0 0 .35714285714286em .35714285714286em;
        padding: 0 .28571428571429em;
    }

    #monthly-list a:hover .archive-month,
    #monthly-list a:focus .archive-month {
        background: #fff6d3;
    }

    #monthly-list span {
        display: block;
        /* IE7 padding fix */
        *position: relative;
        *top: -2px;
    }

    [role="main"] #article-list {
        list-style: none;
        margin: 0 0 2em 0;
        padding: 0;
        border-top: solid 1px #ccc;
    }

    #article-list li {
        border-bottom: solid 1px #ccc;
        padding-top: 1em;
    }

    /* Forms
    ========================================================================== */

    /* corrects margin displayed oddly in IE6-7 */
    form {
        margin: 0;
    }

    /* remove default fieldset styling across browsers */
    fieldset {
        margin: 0;
        border: 0;
        padding: 0;
    }

    /* Corrects color not being inherited in IE7-9, corrects text not wrapping in FF3, corrects alignment displayed oddly in IE7 */
    legend {
        border: 0;
        padding: 0;
        white-space: normal;
        *margin-left: -7px;
    }

    /* improves appearance and consistency in all browsers */
    button,
    .button,
    input,
    select,
    textarea {
        font-size: 100%;
        margin: 0;
        vertical-align: baseline;
        /* improves appearance and consistency in IE7 */
        *vertical-align: middle;
    }

    /* colour placeholder text (Webkit and Mozilla only, so far) */
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #888;
    }

    input:-moz-placeholder,
    textarea:-moz-placeholder {
        color: #888;
    }

    /* suppress red glow that Firefox adds to form fields by default, even when user is still typing
        and kill phantom spacing and dotted border that appears in Firefox */
    input:invalid,
    button:invalid,
    select:invalid,
    textarea:invalid {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    input::-moz-focus-inner,
    button::-moz-focus-inner,
    select::-moz-focus-inner,
    textarea::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    /* remove inner padding and search cancel button in Safari, Chrome on OS X */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        -webkit-box-shadow: 0 0 7px #06f;
        -moz-box-shadow: 0 0 7px #06f;
        box-shadow: 0 0 7px #06f;
        /* Opera */
        z-index: 1;
    }

    input[type="file"]:focus,
    input[type="file"]:active,
    input[type="radio"]:focus,
    input[type="radio"]:active,
    input[type="checkbox"]:focus,
    input[type="checkbox"]:active {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    textarea,
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"] {
        font-family: Arial, Helvetica, sans-serif;
        font-size: .85714285714286em;
        text-align: left;
        border: solid 1px #ccc;
        padding: .5em;
        background: #fff;
        outline: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* remove iOS Safari default styling */
        -webkit-appearance: none;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    [role="complementary"] input[type="search"] {
        margin-right: 7px;
        width: 75%;
        display: inline-block;
        /* display and zoom IE7 fix for display:inline-block */
        *display: inline;
        *zoom: 1;
    }

    textarea[disabled],
    select[disabled],
    input[type="date"][disabled],
    input[type="datetime"][disabled],
    input[type="datetime-local"][disabled],
    input[type="email"][disabled],
    input[type="month"][disabled],
    input[type="number"][disabled],
    input[type="password"][disabled],
    input[type="search"][disabled],
    input[type="tel"][disabled],
    input[type="text"][disabled],
    input[type="time"][disabled],
    input[type="url"][disabled],
    input[type="week"][disabled] {
        background-color: #eee;
    }

    /* make sure disable elements really are disabled */
    button[disabled],
    input[disabled],
    select[disabled],
    select[disabled] option,
    select[disabled] optgroup,
    textarea[disabled] {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        color: #888;
        cursor: default;
    }

    textarea {
        min-height: 3em;
        /* removes default vertical scrollbar in IE7-9 */
        overflow: auto;
        /* improves readability and alignment in all browsers */
        vertical-align: top;
        -moz-resize: vertical;
        resize: vertical;
        width: 100%;
    }

    select {
        font-family: Arial, Helvetica, sans-serif;
        font-size: .85714285714286em;
        text-align: left;
        border: solid 1px #ccc;
        padding: .5em;
        background: #fff;
        outline: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    textarea,
    select[size],
    select[multiple] {
        height: auto;
    }

    optgroup {
        font-family: Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: normal;
        color: #333;
    }

    /* kill phantom spacing and dotted border that appears in Firefox */
    optgroup::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    .large input {
        width: 50%;
        min-width: 302px;
    }

    .large textarea {
        height: 156px;
    }

    .small input {
        width: 25%;
        min-width: 151px;
    }

    .small textarea {
        height: 5.5em;
    }

    /* addresses box sizing set to content-box and excess padding in IE7-9 */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        *height: 1em;
        *width: 1em;
    }

    .checkboxes span,
    .radiobuttons span {
        display: block;
    }

    .checkboxes input,
    .radiobuttons input {
        float: left;
        margin-right: .5em;
    }

    .checkboxes label,
    .radiobuttons label {
        float: left;
        display: block;
    }

    /* Buttons
    ========================================================================== */

    /* make buttons play nice in IE - http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
    input,
    button,
    .button {
        width: auto;
        overflow: visible;
    }

    button,
    .button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-background-clip: padding;
        -moz-background-clip: padding;
        -ms-background-clip: padding-box;
        -o-background-clip: padding-box;
        background-clip: padding-box;
        font-family: Arial, Helvetica, sans-serif;
        font-size: .85714285714286em;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: .5em 1em .5em;
        display: inline-block;
        /* display and zoom IE7 fix for display:inline-block */
        *display: inline;
        *zoom: 1;
        color: white;
        background-color: #3863AC;
        border: none;
    }

    /* TODO:  retocar los botones */
    button:active,
    .button:active,
    input[type="button"]:active,
    input[type="reset"]:active,
    input[type="submit"]:active {
        position: relative;
        top: 1px;
        color: #1a1a1a;
        background-color: #88acdc;
    }

    /* TODO:  retocar los botones */
    input[type="submit"].disabled,
    #paginator span.disabled {
        text-shadow: none;
        top: 0;
        cursor: default;
        color: #888;
        background-color: #e6e6e6;
    }

    #paginator {
        margin-bottom: 2em;
    }

    #paginator .button {
        padding: .1em 1em;
    }

    #paginator a.button {
        text-decoration: none;
        color: white;
    }

    #paginator-l {
        float: left;
    }

    #paginator-r {
        float: right;
    }

    /* Comments
    ========================================================================== */

    .comments {
        margin-bottom: 1em;
        -moz-border-radius: .35714285714286em;
        border-radius: .35714285714286em;
        padding: 1em 1em 1px;
        background: #f7f7f7;
    }

    .comments h4 span {
        font-weight: normal;
    }

    .comments h4 .comment-anchor {
        float: right;
    }

    .comments-author {
        background: #efefef;
    }

    #cpreview {
        margin-bottom: 2px;
        -moz-border-radius: .35714285714286em;
        border-radius: .35714285714286em;
        padding: 1em;
        background: #fff3d6;
    }

    .comments_error {
        background: #fff4f4 !important;
    }

    .required,
    .error_message li {
        color: #c00;
    }

    /* Añadidos al refactorizar la estructura de la web */
    img.gravatar {
        float: left;
        margin-right: 12px;
        border: solid #21759B 1px;
    }

    article.comments p.footnote {
        margin: 0;
    }

    /*div.toc {
        float: left;
    }*/

    div.entry-content {
        clear: both;
    }

    img.excerpt_image {
        float: right;
        margin: 1em 0.5em 5px 5px;
    }

}

/* addresses select alignment in Safari/Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    select,
    select[size="0"],
    select[size="1"] {
        height: 2.33333333333333em;
    }

    select:not([size]),
    select:not([multiple]) {
        position: relative;
        top: -1px;
    }

}