/*  Estilos CSS3
    Modelo de Cajas
*/

/*------------------------------------
    Reglas para dispositivos móviles
  ------------------------------------ */
*, h1 {
    padding            : 0;
    margin             : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    -webkit-transition : all .5s linear;
    -moz-transition    : all .5s linear;
    -ms-transition     : all .5s linear;
    -o-transition      : all .5s linear;
    transition         : all .5s linear;
}

body {
    background: #dde url(../img/bg7.png);
    color: #333;
    font-size: 14px;
}

#main {
    max-width : 100%;
    width     : 96%;
    margin    : 2% auto;
    background: rgba(240,240,240,0.2);
    padding: 1%;
}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6 {
    width   : 100%;
    padding : 1%;
    margin  : 1% 0;
}
a, a:link, a:visited { text-decoration: none; color: #009; }
a:hover, a.active { color: #ddd; }
/* imagen responsive */

.img-resp { max-width : 98%; height    : auto; }
.formula  { width: 45%; }

.linea { margin: 20px 0; height: 1px;}
p { margin: 0 0 0 10px;}

h2, h3 { margin: 8px 0; }
ol, ul { margin: 0 0 0 35px; }
.fila { clear: both; }
.cierra {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.izdo   { text-align: left;    }
.centro { text-align: center;  }
.dcho   { text-align: left;    }
.justi  { text-align: justify; }

.izda   { display:inline; float:left; margin: 5px 15px 5px 0;}
.dcha   { display:inline; float:right; margin: 5px 0 5px 15px;}
.centra { display: block; margin: 0 auto;}

.bg-w { background: rgba(255,255,255,0.1); }
.bg-k { background: rgba(0,0,0,0.1); }
.bg-r { background: rgba(255,200,0,0.1); }
.bg-g { background: rgba(0,255,0,0.1); }
.bg-b { background: rgba(0,0,255,0.1); }

.tx-w { color: rgba(255,255,255,0.5); }
.tx-b { color: rgba(0,0,0,0.5); }
.tx-r { color: rgba(255,0,0,0.5); }
.tx-g { color: rgba(0,255,0,0.5); }
.tx-b { color: rgba(0,0,255,0.5); }

form {
    margin: 10px 0 10px 0;
    padding: 10px;
}

input,button {
    margin: 10px 4px;
    font-size: 1.5em;
    text-align: center;
    max-width: 75%;
}

.ppal {
    font-size: 1.3em;
    padding: 4px 10px;
}
.ppal2 {
    font-size: 0.8em;
    padding: 4px 10px;
}
.secu {
    font-size   : 0.8em;
    padding     : 2px 4px;
    color       : #666;
    font-weight : 100;
}
.solucion {
    max-width : 100%;
    height    : 232px;
    padding   : 20px;
    margin    : 10px;
    font: 1.5em serif;
    font-weight : lighter;
    overflow: auto;
}
code {
    /*font-weight: 900;*/
}

.info {
    max-width   : 100%;
    height      : 96px;
    padding     : 10px 20px;
    margin      : 10px;
    font        : 1.5em serif;
}

/*-------------------------------
    Reglas PC's de escritorio
  ------------------------------- */
@media (min-width: 600px) {
    #main {
        max-width: 800px;
        background: rgba(250,250,250,0.5);
    }
    .col-1,.col-2,.col-3,.col-4,.col-5,.col-6 {
        float        : left;
        display      : block;
        margin-right : 2%;
    }
    .col-1 { width: 15%; }
    .col-2 { width: 32%; }
    .col-3 { width: 49%; }
    .col-4 { width: 66%; }
    .col-5 { width: 83%; }
    .col-6 { width: 100%; }
    .final { margin-right: 0;}
    .info  { height: 64px;
    }
}

.nota:before {
    background: green;
    color: white;
    content: "Nota";
    font-style: normal;
    left: -1.5em;
    padding: 0.15em 0.25em;
    position: absolute;
    top: -0.2em;
    transform: rotate(-5deg);
}
.nota {
    background: #ddffdd;
    color: green;
    font-style: italic;
    margin-left: 2em;
    padding-left: 2em;
    position: relative;
}

.ejem:before {
    background: rgba(0,0,0,0.6);
    color: #eeeeee;
    content: "Ejemplo";
    font: 1em Helvetica Neue,sans-serif,Droid Sans Fallback;
    left: -2.25em;
    padding: 0.25em;
    position: absolute;
    top: 0;
    transform: rotate(-10deg);
}
.ejem {
    background: rgba(0,0,0,0.1);
    color: #333;
    display: block;
    margin-left: 2em;
    padding: 1em 1em 1em 2em;
    position: relative;
}

.aviso:before {
    background: none repeat scroll 0 0 red;
    color: yellow;
    content: "Aviso";
    font-style: normal;
    left: -4.25em;
    padding: 0.15em 0.25em;
    position: absolute;
    top: -0.2em;
    transform: rotate(-5deg);
}
.aviso {
    background: none repeat scroll 0 0 transparent;
    color: red;
    font: italic bolder 1em Helvetica Neue,sans-serif,Droid Sans Fallback;
    margin: 2em 0 2em 6em;
    padding-left: 2em;
    position: relative;
}

.ayuda:before {
    background: rgba(0,0,128,0.6);
    color: #fff;
    content: "info";
    font-style: normal;
    left: -1.5em;
    padding: 0.15em 0.25em;
    position: absolute;
    top: -0.2em;
    transform: rotate(-5deg);
}
.ayuda {
    background: rgba(0,0,128,0.1);
    color: #00f;
    font-style: italic;
    margin-left: 2em;
    padding: 0.8em;
    position: relative;
}