/* Sitrio CSS Document */

/*
* Grilla adaptable 
* Basado en Skeleton V1.2
*/

/* #Grilla 960 base
================================================== */

    .contenedor                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .contenedor .columna,
    .contenedor .columnas                         {	float: left; display: inline; margin-left: 0px; margin-right: 0px; }
    .fila                                        { margin-bottom: 20px; }

    /* Clases para columnas anidadas */
    .columna.primera, .columnas.primera               { margin-left: 0; }
    .columna.ultima, .columnas.ultima               { margin-right: 0; }

    /* Grilla Base */
    .contenedor .uno.columna,
    .contenedor .uno.columnas                     { width: 40px;  }
    .contenedor .dos.columnas                     { width: 100px; }
    .contenedor .tres.columnas                   { width: 160px; }
    .contenedor .cuatro.columnas                    { width: 220px; }
    .contenedor .cinco.columnas                    { width: 280px; }
    .contenedor .seis.columnas                     {
	width: 370px;
}
    .contenedor .siete.columnas                   {
	width: 440px;
}
    .contenedor .ocho.columnas                   { width: 460px; }
    .contenedor .nueve.columnas                    { width: 520px; }
    .contenedor .diez.columnas                     { width: 580px; }
    .contenedor .once.columnas                  { width: 640px; }
    .contenedor .doce.columnas                  {
	width: 740px;
}
    .contenedor .trece.columnas                { width: 760px; }
    .contenedor .catorce.columnas                { width: 820px; }
    .contenedor .quince.columnas                 { width: 880px; }
    .contenedor .diesiseis.columnas                 {
	width: 960px;
}

    .contenedor .uno-tercio.columna                { width: 300px; }
    .contenedor .dos-tercios.columna               { width: 620px; }

    /* Offsets */
    .contenedor .offset-de-uno                   { padding-left: 60px;  }
    .contenedor .offset-de-dos                   { padding-left: 120px; }
    .contenedor .offset-de-tres                 { padding-left: 180px; }
    .contenedor .offset-de-cuatro                  { padding-left: 240px; }
    .contenedor .offset-de-cinco                  { padding-left: 300px; }
    .contenedor .offset-de-seis                   { padding-left: 360px; }
    .contenedor .offset-de-siete                 { padding-left: 420px; }
    .contenedor .offset-de-ocho                 { padding-left: 480px; }
    .contenedor .offset-de-nueve                  { padding-left: 540px; }
    .contenedor .offset-de-diez                   { padding-left: 600px; }
    .contenedor .offset-de-once                { padding-left: 660px; }
    .contenedor .offset-de-doce                { padding-left: 720px; }
    .contenedor .offset-de-trece              { padding-left: 780px; }
    .contenedor .offset-de-catorce              { padding-left: 840px; }
    .contenedor .offset-de-quince               { padding-left: 900px; }



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .contenedor                                  { width: 768px; }
        .contenedor .columna,
        .contenedor .columnas                         { margin-left: 10px; margin-right: 10px;  }
        .columna.primera, .columnas.primera               { margin-left: 0; margin-right: 10px; }
        .columna.ultima, .columnas.ultima               { margin-right: 0; margin-left: 10px; }
        .primera.ultima                                { margin-left: 0; margin-right: 0; }

        .contenedor .uno.columna,
        .contenedor .uno.columnas                     { width: 28px; }
        .contenedor .dos.columnas                     { width: 76px; }
        .contenedor .tres.columnas                   { width: 124px; }
        .contenedor .cuatro.columnas                    { width: 172px; }
        .contenedor .cinco.columnas                    { width: 220px; }
        .contenedor .seis.columnas                     { width: 268px; }
        .contenedor .siete.columnas                   { width: 316px; }
        .contenedor .ocho.columnas                   { width: 364px; }
        .contenedor .nueve.columnas                    { width: 412px; }
        .contenedor .diez.columnas                     { width: 460px; }
        .contenedor .once.columnas                  { width: 508px; }
        .contenedor .doce.columnas                  { width: 556px; }
        .contenedor .trece.columnas                { width: 604px; }
        .contenedor .catorce.columnas                { width: 652px; }
        .contenedor .quince.columnas                 { width: 700px; }
        .contenedor .diesiseis.columnas                 { width: 748px; }

        .contenedor .uno-tercio.columna                { width: 236px; }
        .contenedor .dos-tercios.columna               { width: 492px; }

        /* Offsets */
        .contenedor .offset-de-uno                   { padding-left: 48px; }
        .contenedor .offset-de-dos                   { padding-left: 96px; }
        .contenedor .offset-de-tres                 { padding-left: 144px; }
        .contenedor .offset-de-cuatro                  { padding-left: 192px; }
        .contenedor .offset-de-cinco                  { padding-left: 240px; }
        .contenedor .offset-de-seis                   { padding-left: 288px; }
        .contenedor .offset-de-siete                 { padding-left: 336px; }
        .contenedor .offset-de-ocho                 { padding-left: 384px; }
        .contenedor .offset-de-nueve                  { padding-left: 432px; }
        .contenedor .offset-de-diez                   { padding-left: 480px; }
        .contenedor .offset-de-once                { padding-left: 528px; }
        .contenedor .offset-de-doce                { padding-left: 576px; }
        .contenedor .offset-de-trece              { padding-left: 624px; }
        .contenedor .offset-de-catorce              { padding-left: 672px; }
        .contenedor .offset-de-quince               { padding-left: 720px; }
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .contenedor { width: 300px; }
        .contenedor .columnas,
        .contenedor .columna { margin: 0; }

        .contenedor .uno.columna,
        .contenedor .uno.columnas,
        .contenedor .dos.columnas,
        .contenedor .tres.columnas,
        .contenedor .cuatro.columnas,
        .contenedor .cinco.columnas,
        .contenedor .seis.columnas,
        .contenedor .siete.columnas,
        .contenedor .ocho.columnas,
        .contenedor .nueve.columnas,
        .contenedor .diez.columnas,
        .contenedor .once.columnas,
        .contenedor .doce.columnas,
        .contenedor .trece.columnas,
        .contenedor .catorce.columnas,
        .contenedor .quince.columnas,
        .contenedor .diesiseis.columnas,
        .contenedor .uno-tercio.columna,
        .contenedor .dos-tercios.columna  { width: 300px; }

        /* Offsets */
        .contenedor .offset-de-uno,
        .contenedor .offset-de-dos,
        .contenedor .offset-de-tres,
        .contenedor .offset-de-cuatro,
        .contenedor .offset-de-cinco,
        .contenedor .offset-de-seis,
        .contenedor .offset-de-siete,
        .contenedor .offset-de-ocho,
        .contenedor .offset-de-nueve,
        .contenedor .offset-de-diez,
        .contenedor .offset-de-once,
        .contenedor .offset-de-doce,
        .contenedor .offset-de-trece,
        .contenedor .offset-de-catorce,
        .contenedor .offset-de-quince { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .contenedor { width: 420px; }
        .contenedor .columnas,
        .contenedor .columna { margin: 0; }

        .contenedor .uno.columna,
        .contenedor .uno.columnas,
        .contenedor .dos.columnas,
        .contenedor .tres.columnas,
        .contenedor .cuatro.columnas,
        .contenedor .cinco.columnas,
        .contenedor .seis.columnas,
        .contenedor .siete.columnas,
        .contenedor .ocho.columnas,
        .contenedor .nueve.columnas,
        .contenedor .diez.columnas,
        .contenedor .once.columnas,
        .contenedor .doce.columnas,
        .contenedor .trece.columnas,
        .contenedor .catorce.columnas,
        .contenedor .quince.columnas,
        .contenedor .diesiseis.columnas,
        .contenedor .uno-tercio.columna,
        .contenedor .dos-tercios.columna { width: 420px; }
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .contenedor:despues { condiezt: "\0020"; display: block; hocho: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columnas,
    or wrap each fila of columnas in a <div class="fila"> */
    .clearfix:antes,
    .clearfix:despues,
    .fila:antes,
    .fila:despues {
      condiezt: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      hocho: 0; }
    .fila:despues,
    .clearfix:despues {
      clear: both; }
    .fila,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columnas */
    .limpio {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      hocho: 0;
    }