1 /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
\r
4 * What follows is the result of much research on cross-browser styling.
\r
5 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
\r
6 * Kroc Camen, and the H5BP dev community and team.
\r
9 /* ==========================================================================
\r
10 Base styles: opinionated defaults
\r
11 ========================================================================== */
\r
27 * Remove text-shadow in selection highlight: h5bp.com/i
\r
28 * These selection rule sets have to be separate.
\r
29 * Customize the background color to match your design.
\r
33 background: #b3d4fc;
\r
38 background: #b3d4fc;
\r
43 * A better looking default horizontal rule
\r
50 border-top: 1px solid #ccc;
\r
56 * Remove the gap between images, videos, audio and canvas and the bottom of
\r
57 * their containers: h5bp.com/i/440
\r
64 vertical-align: middle;
\r
68 * Remove default fieldset styles.
\r
78 * Allow only vertical resizing of textareas.
\r
85 /* ==========================================================================
\r
87 ========================================================================== */
\r
96 /* ==========================================================================
\r
98 ========================================================================== */
\r
106 /* CSS3 Multiple backgrounds with a fallback */
\r
108 /* Gradient background, various fallbacks */
\r
109 background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #e4e4e4 100%);
\r
110 background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #e4e4e4 100%);
\r
111 background-image: -webkit-gradient(radial, center center, 0, center center, 498, color-stop(0, #FFFFFF), color-stop(1, #e4e4e4));
\r
112 background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #e4e4e4 100%);
\r
113 background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #e4e4e4 100%);
\r
115 // background:url('../img/bg_gradient.jpg') no-repeat center center,url('../img/bg_tile.jpg');
\r
121 position: relative;
\r
125 font:24px/1.3 'Open Sans Condensed',sans-serif;
\r
129 text-transform: none;
\r
140 display: inline-block;
\r
141 color: #fff !important;
\r
144 text-transform: uppercase;
\r
145 text-decoration: none !important;
\r
147 padding: 0 30px 0 30px;
\r
148 background: #22cc11;
\r
149 margin: 10px 0 0 0;
\r
152 .downloadbutton:hover {
\r
153 background: #33dd22;
\r
156 .downloadbutton small {
\r
157 text-transform: none;
\r
160 margin: -28px 0 0 0;
\r
164 .downloadbutton img {
\r
167 display: inline-block;
\r
168 background-repeat: no-repeat;
\r
169 margin: 10px 10px 10px 0px;
\r
174 text-decoration: none;
\r
180 text-decoration:none;
\r
185 border-top: 1px solid #aaa;
\r
186 font:20px/1.3 'Open Sans Condensed',sans-serif;
\r
191 nav a, nav a:visited {
\r
193 text-decoration: none;
\r
199 text-decoration: none;
\r
207 padding: 6% 0 100px;
\r
210 text-align: center;
\r
213 font-family:'Open Sans Condensed';,sans-serif;
\r
214 text-shadow:1px 1px 0 rgba(255,255,255,0.5);
\r
224 text-align: center;
\r
227 font-family:'Open Sans Condensed';,sans-serif;
\r
228 text-shadow:1px 1px 0 rgba(255,255,255,0.5);
\r
240 text-align: center;
\r
243 @media screen and (min-height: 1100px) {
\r
249 @media screen and (min-height: 1000px) {
\r
255 @media screen and (min-height: 900px) {
\r
261 @media screen and (max-width: 700px), screen and (max-height: 700px) {
\r
264 padding: 4% 0 80px;
\r
268 padding: 1% 0 10px;
\r
278 @media screen and (max-width: 500px), screen and (max-height: 650px) {
\r
281 padding: 4% 0 70px;
\r
295 @media screen and (max-width: 420px), screen and (max-height: 550px) {
\r
298 padding: 3% 0 40px;
\r
321 border-bottom: 1px solid #aaa;
\r
325 font-family: 'Open Sans Condensed',sans-serif;
\r
327 margin: 0 auto 0px;
\r
329 text-align: center;
\r
335 /* ==========================================================================
\r
337 ========================================================================== */
\r
340 * Image replacement
\r
344 background-color: transparent;
\r
347 /* IE 6/7 fallback */
\r
348 *text-indent: -9999px;
\r
359 * Hide from both screenreaders and browsers: h5bp.com/u
\r
363 display: none !important;
\r
364 visibility: hidden;
\r
368 * Hide only visually, but have it available for screenreaders: h5bp.com/v
\r
373 clip: rect(0 0 0 0);
\r
378 position: absolute;
\r
383 * Extends the .visuallyhidden class to allow the element to be focusable
\r
384 * when navigated to via the keyboard: h5bp.com/p
\r
387 .visuallyhidden.focusable:active,
\r
388 .visuallyhidden.focusable:focus {
\r
398 * Hide visually and from screenreaders, but maintain layout
\r
402 visibility: hidden;
\r
406 * Clearfix: contain floats
\r
408 * For modern browsers
\r
409 * 1. The space content is one way to avoid an Opera bug when the
\r
410 * `contenteditable` attribute is included anywhere else in the document.
\r
411 * Otherwise it causes space to appear at the top and bottom of elements
\r
412 * that receive the `clearfix` class.
\r
413 * 2. The use of `table` rather than `block` is only necessary if using
\r
414 * `:before` to contain the top-margins of child elements.
\r
419 content: " "; /* 1 */
\r
420 display: table; /* 2 */
\r
429 * Include this rule to trigger hasLayout and contain floats.
\r
436 /* ==========================================================================
\r
437 EXAMPLE Media Queries for Responsive Design.
\r
438 These examples override the primary ('mobile first') styles.
\r
439 Modify as content requires.
\r
440 ========================================================================== */
\r
442 @media only screen and (min-width: 35em) {
\r
443 /* Style adjustments for viewports that meet the condition */
\r
447 (-o-min-device-pixel-ratio: 5/4),
\r
448 (-webkit-min-device-pixel-ratio: 1.25),
\r
449 (min-resolution: 120dpi) {
\r
450 /* Style adjustments for high resolution devices */
\r
453 /* ==========================================================================
\r
455 Inlined to avoid required HTTP connection: h5bp.com/r
\r
456 ========================================================================== */
\r
460 background: transparent !important;
\r
461 color: #000 !important; /* Black prints faster: h5bp.com/s */
\r
462 box-shadow: none !important;
\r
463 text-shadow: none !important;
\r
468 text-decoration: underline;
\r
472 content: " (" attr(href) ")";
\r
475 abbr[title]:after {
\r
476 content: " (" attr(title) ")";
\r
480 * Don't show links for images, or javascript/internal links
\r
484 a[href^="javascript:"]:after,
\r
485 a[href^="#"]:after {
\r
491 border: 1px solid #999;
\r
492 page-break-inside: avoid;
\r
496 display: table-header-group; /* h5bp.com/t */
\r
501 page-break-inside: avoid;
\r
505 max-width: 100% !important;
\r
521 page-break-after: avoid;
\r