/*************************** SECCION 1 ******************************************/ /* */ /* Definiciones de estilo para texto y secciones generales */ /* */ /********************************************************************************/ /* css Zen Garden submission 217 - 'Screen Filler', by Elliot Jay Stocks, http://elliotjaystocks.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* TYPEKIT_KIT_ID: lxq7gid */ /* ================================================ CSS Zen Garden theme for Typekit 01 ================================================ Handcrafted by Elliot Jay Stocks http://elliotjaystocks.com/ Last updated on 18.11.2013 ================================================ 01 Sensible Defaults 02 Typography 03 Layout 04 Media Queries ================================================ */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ * { margin:0; padding:0; /* So sue me */ } div, article, section, header, footer, nav, figure, li { position:relative; } /* For absolutely positioning elements within containers */ .group:after { display: block; height: 0; font-size: 0; content: "."; clear: both; visibility: hidden; } /* For clearing */ * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Apply a natural box layout model to all elements — see http://paulirish.com/2012/box-sizing-border-box-ftw */ ::-moz-selection { background:#333; color:#fff; } ::selection { background:#333; color:#fff; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) 36 / 16 = 2.25em (36px equivalent) 48 / 16 = 3em (48px equivalent) 60 / 16 = 3.75em (60px equivalent) 72 / 16 = 4.5em (72px equivalent) 96 / 16 = 6em (96px equivalent) */ /* Rendering */ body, input, textarea { color:#333; /*-webkit-font-smoothing:antialiased;*/ } /* Families */ body { font-family:"tablet-gothic", verdana, arial, sans-serif; /* Weights from Typekit: 300, 400 */ } h2, h3 { font-family:"tablet-gothic-condensed", "arial narrow", arial, verdana, sans-serif; /* Weights from Typekit: 200, 900 */ } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight:normal; } h1 { background:#ea2e49; color:#fff; display:inline-block; margin-bottom:1em; padding:0.5em 1em; } h2 { color:#fff; font-weight:900; /* Heavy */ font-size:6em; letter-spacing:1px; line-height:1em; } h3 { font-size:2.25em; font-weight:200; /* Thin */ letter-spacing:1px; line-height:1em; padding:0.5em 0 0.25em 0; } /* Links */ a { border-bottom:1px solid rgba(0,0,0,0.2); color:#333; text-decoration:none; -moz-transition:border-color 0.2s ease-in-out; -ms-transition:border-color 0.2s ease-in-out; -o-transition:border-color 0.2s ease-in-out; -webkit-transition:border-color 0.2s ease-in-out; transition:border-color 0.2s ease-in-out; } a:hover { border-color:#ea2e49; } section.intro div.summary p a, div.explanation p a, div.participation p a { color:#fff; } div.participation p a:hover { border-color:#fff; } /* Paragraph styles */ p, li { font-size:1em; font-weight:400; /* Regular */ line-height:1.5em; padding:0.5em 0; } h1, section.intro div.summary p, div.requirements p:last-child { font-weight:300; letter-spacing:2px; text-transform:uppercase; } section.intro div.summary p:last-child, div.requirements p:last-child { border-top:1px solid #ea2e49; margin-top:1em; padding-top:1.5em; } /* Other bits & bobs */ em, strong { font-style:normal; font-weight:400; } /* ---------------------------------------------------------------------------------------------------------- 03 Layout --------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ html { background:#daede2; padding:5%; } body { background:#77c4d3; } div.page-wrapper { z-index:2; } section.intro { padding:5%; } section.intro div.summary { color:#fff; padding:15% 0; } section.intro div.preamble { background:rgba(255,255,255,0.9); color:#333; margin-left:-30%; padding:5% 5% 5% 15%; } div.main { padding:5%; } aside.sidebar { background:rgba(246,247,146,0.9); padding:5%; } aside.sidebar ul { padding:0.5em 0 2em 0; } aside.sidebar ul li { color:rgba(0,0,0,0.4); list-style:none; margin:0; padding:0 0 0.825em 0; } footer { background:rgba(246,247,146,0.9); clear:both; color:#fff; padding:1em 5%; width:50%; } footer a { margin-right:0.5em; } div.explanation { color:#fff; padding:5%; } div.participation { background:rgba(234,46,73,0.9); color:#fff; padding:5%; } div.benefits { background:rgba(255,255,255,0.9); margin-top:10%; padding:5%; } div.requirements { background:rgba(255,255,255,0.9); padding:5%; } /* ---------------------------------------------------------------------------------------------------------- 04 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /* 1 and up */ @media screen and (min-width:1px) { body { font-size:85%; } } /* 550 and up */ @media screen and (min-width:550px) { h2 { font-size:5em; } section.intro { width:66.6%; } aside.sidebar { position:absolute; right:0; top:2.5%; width:32.75%; } div.extra1 { background:rgba(51,55,69,0.9); bottom:0; right:0; position:fixed; top:0; width:30%; z-index:1; } div.explanation { float:left; width:50%; } div.participation { float:left; width:49%; } div.benefits { float:left; } div.requirements { float:left; } } /* 650 and up */ @media screen and (min-width:650px) { div.benefits { margin-top:12%; width:30%; } div.requirements { width:69%; } } /* 700 and up */ @media screen and (min-width:700px) { body { font-size:90%; } } /* 800 and up */ @media screen and (min-width:800px) { body { font-size:100%; } } /* 900 and up */ @media screen and (min-width:900px) { body { font-size:110%; } } /* 1500 and up */ @media screen and (min-width:1500px) { body { font-size:125%; } } /* 1800 and up */ @media screen and (min-width:1800px) { body { font-size:150%; } } /* 2100 and up */ @media screen and (min-width:2100px) { body { font-size:175%; } } /* 2500 and up */ @media screen and (min-width:2500px) { body { font-size:200%; } } /*************************** SECCION 2 ******************************************/ /* */ /* Definiciones de estilo para la Galeria de fotos */ /* */ /********************************************************************************/ ul.enlarge{ list-style-type:none; /*remove the bullet point*/ margin-left:0; } ul.enlarge li{ display:inline-block; /*places the images in a line*/ position: relative; z-index: 0; /*resets the stack order of the list items - later we'll increase this*/ margin:10px 40px 0 20px; } ul.enlarge img{ background-color:#eae9d4; padding: 6px; -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ul.enlarge span{ position:absolute; left: -9999px; background-color:#eae9d4; padding: 10px; font-family: 'Droid Sans', sans-serif; font-size:.9em; text-align: center; color: #495a62; -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); box-shadow: 0 0 20px rgba(0,0,0, .75); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; } ul.enlarge li:hover{ z-index: 50; cursor:pointer; } ul.enlarge span img{ padding:2px; background:#ccc; } ul.enlarge li:hover span{ top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/ } ul.enlarge li:hover:nth-child(2) span{ left: -100px; } ul.enlarge li:hover:nth-child(3) span{ left: -200px; } /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/ ul.enlarge img, ul.enlarge span{ behavior: url(pie/PIE.htc); }