/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* #Base 1248 Grid */
/* Sistema de maquetación para HEADER básico */
header #div_logo{ float:left;box-sizing: border-box; padding-top:0rem }/* hay que escribir correctamente el selector porque sino podemos tener problemas de flotación */
header #div_headings{ float:left;box-sizing: border-box; padding-top:1rem }
header #div_logo{ padding-right:1rem }
header #div_headings{ padding-left:2rem }
header #div_headings h5{ color:#aaa }
/* Modificando formato de caracter y párrafo como fondos, color de fuente y alineación de texto */
header>div{ background-color: #ffffff;color:#007d40} /* border-bottom: 2px solid #007d40 */
header>div>div>div>div:first-child{ text-align:center }
.bg-gray-ddd{ background-color:#ddd }
.bg-gray-eee{ background-color:#eee }
/* Haciendo que la lista del navegador se despliegue inline y con block conseguimos poder dimensionar con padding y margin cada item de la lista */
header nav{ text-align:right; margin-top:1rem }
header nav ul li{ display:inline-block; padding:0 2rem 0 0 }
#main-section{ background-image: url(../images/greenteg-bg.png) }
#main-article1{ background-color: rgba(255, 255, 255, 0.7);border-bottom:2px solid #007d40 }
#main-article2{ background-color: rgba(255, 255, 255, 0.8);border-bottom:2px solid #007d40 }
#secondary-article1{ background-color: rgba(255, 255, 255, 0.8) }
/* Paddings & Margins */
/* Separando secciones con padding top y bottom (no con margin) o se podría hacer con o para el bottom definir la clase "add-bottom" en las distintas secciones. Este espaciado podemos configurarlo en base.css por defecto */
section{ padding:2rem 0 2rem 0 }
/* Modificando el ancho de
(aunque sea una marca única sin principio y fin, hay que recordar que no debe utilizar la barra "/" de cierre)*/
hr{ margin-right:1rem;margin-left:1rem }
/* Especific Typography */
.prominent{ font-size: 24px; font-size: 2.4rem; line-height: 1.5; letter-spacing: -.5px; letter-spacing: -.05rem }
a.list-link{ color:#aaa; font-size: 19px; font-size: 1.9rem; font-weight: 400; line-height: 1.5; letter-spacing: -.5px; letter-spacing: -.05rem }
a.list-link:link { color: #777;text-decoration:none }
a.list-link:visited { color: #777;text-decoration:none }
a.list-link:hover { color: #007d40;text-decoration: underline;cursor:pointer }
a.list-link:active { color: #007d40;text-decoration: underline }
.custom.mode1 { font-weight:500 }
/* Otros Estilos */
#logo{ margin-top: 1rem; margin-left: 1rem }
h1{ margin-bottom: 0 }
figure.article-img-left, div.article-div-content-right, figure.article-img-left-reduced, div.article-div-content-right-reduced, figure.article-img-left-nofloat, div.article-div-content-right-nofloat{ float:left;box-sizing: border-box }
figure.article-img-left, figure.article-img-left-reduced, figure.article-img-left-nofloat{ width:23% }
div.article-div-content-right, div.article-div-content-right-reduced, div.article-div-content-right-nofloat{ width:67% }
figure.article-img-list ul{ text-align:center }
figure.article-img-list ul li{ display:inline-block; padding:0 0.5rem 0 0 }
span.red{ color:#de2826 }
span.red+span{ color:#000000 }
#subir{ position:fixed; bottom:0; right:0;color:#fff; opacity:.5; padding:10px; z-index:2000; display:none; }
/* footer styles */
.super{ margin-bottom: -51px; }
.super:after { content: ""; display: block; height: 50px; }
footer div{ display:block; height:50px; }
footer div{ background-color:#ffffff;color:#444 }
footer nav{ text-align:center }
/* ------------ */
/* Standard 960 (devices and browsers) */
@media only screen and (min-width: 977px) and (max-width: 1264px) {
/*header #div_logo img{ border:1px solid #F90 }*/
}
/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 976px) {
/*header #div_logo img{ border:1px solid #F3F }*/
figure.article-img-left, figure.article-img-left-reduced, figure.article-img-left-nofloat{ width:20% }
div.article-div-content-right, div.article-div-content-right-reduced, div.article-div-content-right-nofloat{ width:65% }
#subir img{ width:80px }
}
/* All Mobile Sizes (devices and browser) */
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 497px) and (max-width: 767px) {
/* Se puede definir una propiedad width para cada div (logo y headings) en % de tal forma que conseguimos que el contenido textual se adapte distribuyéndose por el div y la imagen necesitaria en su tag "img" incluir la clase "scale-with-grid" o redefinir su width en % también. El problema es que el texto quedaría mal al haber definido en base.css unos headings tan grandes. Lo mejor en este caso es redimensionar logo y headings. NOTA: Si no utilizamos la propiedad "box-sizing:border-box" en la regla de cada div, los % para definir la propiedad width deben sumar menos de 100% con el objeto de que los 2 div permanezcan flotando a la izquierda ya que hay que compensar los paddings y bordes definidos en este caso (esto ocurriría si el encabezado del eslogan fuera un h2 y no un h4, aunque en el siguiente media-query sí ocurriría con encabezado h4) */
/* Ejemplo usando % para los divs donde el width del tag img permanece igual y los headings también, aunque no es práctico para versiones móviles ya que el header ocuparía mucho espacio*/
/*header #div_logo{ width:25% }
header #div_headings{ width:75% }*/
/* Ejemplo modificando width del tag img y las dimensiones de los headings empleados. NOTA: Al redimensionar la imagen si lo hacemos en % el ancho del divisor que la contiene no se adapta a las nuevas dimensiones, con lo que habría que definirla en px (no en rem porque si modificamos el global en el tag html corremos el riesgo de reducir en exceso la imagen)*/
header #div_logo img{ width:130px }
header #div_headings h1{ font-size: 25px; font-size: 2.5rem; margin-bottom: 10px;
margin-bottom: 1rem }
header #div_headings h4{ font-size: 15px; font-size: 1.5rem;margin-bottom: 10px;
margin-bottom: 1rem }
#logo{ margin-top: 3.7rem }
.super { margin-top:17rem }
figure.article-img-left, figure.article-img-left-reduced, figure.article-img-left-nofloat{ width:20%;margin-right:10px;margin-right:1rem }
div.article-div-content-right, div.article-div-content-right-reduced, div.article-div-content-right-nofloat{ width:60% }
#subir img{ width:60px;}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 496px) {
header #div_logo img{ width:100px; margin-left:10px }
header #div_headings{ padding-left:10px; padding-left:1rem; }
header #div_headings h1{ font-size: 20px; font-size: 2.0rem; margin-bottom: 10px;
margin-bottom: 1rem }
header #div_headings h5{ font-size: 15px; font-size: 1.5rem; margin-bottom: 10px;
margin-bottom: 1rem }
#logo{ margin-top: 1rem }
header nav{ text-align:right; margin-top:0rem }
header nav ul li a{ font-size: 10x; font-size: 1rem }
hr.greenline-margintop{ margin-top: 5px;margin-top: 0.5rem }
.prominent{ font-size: 16px; font-size: 1.6rem; line-height: 1.5; letter-spacing: -.3px; letter-spacing: -.03rem }
a.list-link{ font-size: 14px; font-size: 1.4rem; line-height: 1.3; letter-spacing: -.3px; letter-spacing: -.03rem }
figure.article-img-left{ width:20%;margin:0 auto }
div.article-div-content-right{ width:70% }
figure.article-img-left-reduced{ width:15%; margin:0 auto }
div.article-div-content-right-reduced{ width:80% }
figure.article-img-left-nofloat{ float:none;width:100%; margin:1rem auto }
div.article-div-content-right-nofloat{ width:100% }
figure.article-img-left-nofloat img.scale-with-grid.reduced{ max-width: 60% }
#subir img{ width:50px;}
}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/