"

From 2014.igem.org

/* _____ _ _ _ _ |_ _| | | | | | | | | | | | |__ __ _| |_ ___ | |_ ___ _ __ ___ __ _| |_ ___ ___ ___ | | | '_ \ / _` | __/ _ \ | __/ _ \| '_ ` _ \ / _` | __/ _ \ / _ \/ __| _| |_ | | | | (_| | || __/ | || (_) | | | | | | (_| | || (_) | __/\__ \ \___/ |_| |_|\__,_|\__\___| \__\___/|_| |_| |_|\__,_|\__\___/ \___||___/ Oh nice, welcome to the stylesheet of dreams. It has it all. Classes, ID's, comments...the whole lot:) Enjoy responsibly! @ihatetomatoes */ /* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Chrome Frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Parallax Scroll ========================================================================== */ body, html { height: 100%; min-height: 100%; background-color: #ffffff; } body { } .no-js { padding-top: 106px; } h2 { margin-top: 0; } .loading { background: url('../img/ico_loading.gif') no-repeat center center; } section { min-width: 960px; opacity: 0; } .loaded section, .no-js section { opacity: 1; -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out; } main { overflow-x: hidden; } #preload { width: 1px; height: 1px; overflow: hidden; position: absolute; top: 0; left: 0; } .bcg { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100%; width: 100%; } .hsContainer { width: 100%; height: 100%; overflow: hidden; position: relative; } .hsContent { max-width: 700px; position: absolute; left: 50%; top: 50%; } .hsContent h2 { color: #fff8de; background-color: rgba(0,0,0,0.5); padding: 10px 5px; font-size: 35px; line-height: 38px; margin-bottom: 12px; } .hsContent p { width: 400px; color: #b2b2b2; } .hsContent a { color: #b2b2b2; text-decoration: underline; } /* Slide 1 */ #slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')} #slide-1 .hsContent { bottom: 200px; top: auto; } /* Slide 2 */ #slide-2 .bcg {background-image:url('../img/bcg_slide-2.jpg')} #slide-2 .hsContent { margin-left: -450px; top: auto; } #slide-2 h2 { position: fixed; top: 70%; } /* Slide 3 */ #slide-3 .bcg {background-image:url('../img/bcg_slide-3.jpg')} #slide-3 .hsContent { margin-left: -239px; } #slide-3 h2 { color: #f2ead6; background-color: rgba(0,0,0,0.6); } /* Slide 4 */ #slide-4 .bcg {background-image:url('../img/bcg_slide-4.jpg')} #slide-4 .hsContent { margin-left: -450px; } #slide-4 h2 { background: none; padding-left: 0; padding-right: 0; } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }