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
135 small a, small a:visited {
\r
148 display: inline-block;
\r
149 color: #fff !important;
\r
152 text-transform: uppercase;
\r
153 text-decoration: none !important;
\r
155 padding: 0 30px 0 30px;
\r
156 background: #22cc11;
\r
157 margin: 10px 0 0 0;
\r
160 .downloadbutton:hover {
\r
161 background: #33dd22;
\r
164 .downloadbutton small {
\r
165 text-transform: none;
\r
168 margin: -28px 0 0 0;
\r
172 .downloadbutton img {
\r
175 display: inline-block;
\r
176 background-repeat: no-repeat;
\r
177 margin: 10px 10px 10px 0px;
\r
182 text-decoration: none;
\r
188 text-decoration:none;
\r
193 border-top: 1px solid #aaa;
\r
194 font:20px/1.3 'Open Sans Condensed',sans-serif;
\r
199 nav a, nav a:visited {
\r
201 text-decoration: none;
\r
207 text-decoration: none;
\r
215 padding: 6% 0 100px;
\r
218 text-align: center;
\r
221 font-family:'Open Sans Condensed';,sans-serif;
\r
222 text-shadow:1px 1px 0 rgba(255,255,255,0.5);
\r
232 text-align: center;
\r
235 font-family:'Open Sans Condensed';,sans-serif;
\r
236 text-shadow:1px 1px 0 rgba(255,255,255,0.5);
\r
248 text-align: center;
\r
251 @media screen and (min-height: 1100px) {
\r
257 @media screen and (min-height: 1000px) {
\r
263 @media screen and (min-height: 930px) {
\r
269 @media screen and (max-width: 700px), screen and (max-height: 700px) {
\r
272 padding: 4% 0 80px;
\r
276 padding: 1% 0 10px;
\r
286 @media screen and (max-width: 500px), screen and (max-height: 650px) {
\r
289 padding: 4% 0 70px;
\r
303 @media screen and (max-width: 420px), screen and (max-height: 550px) {
\r
306 padding: 3% 0 40px;
\r
329 border-bottom: 1px solid #aaa;
\r
333 font-family: 'Open Sans Condensed',sans-serif;
\r
335 margin: 0 auto 0px;
\r
337 text-align: center;
\r
343 /* ==========================================================================
\r
345 ========================================================================== */
\r
348 * Image replacement
\r
352 background-color: transparent;
\r
355 /* IE 6/7 fallback */
\r
356 *text-indent: -9999px;
\r
367 * Hide from both screenreaders and browsers: h5bp.com/u
\r
371 display: none !important;
\r
372 visibility: hidden;
\r
376 * Hide only visually, but have it available for screenreaders: h5bp.com/v
\r
381 clip: rect(0 0 0 0);
\r
386 position: absolute;
\r
391 * Extends the .visuallyhidden class to allow the element to be focusable
\r
392 * when navigated to via the keyboard: h5bp.com/p
\r
395 .visuallyhidden.focusable:active,
\r
396 .visuallyhidden.focusable:focus {
\r
406 * Hide visually and from screenreaders, but maintain layout
\r
410 visibility: hidden;
\r
414 * Clearfix: contain floats
\r
416 * For modern browsers
\r
417 * 1. The space content is one way to avoid an Opera bug when the
\r
418 * `contenteditable` attribute is included anywhere else in the document.
\r
419 * Otherwise it causes space to appear at the top and bottom of elements
\r
420 * that receive the `clearfix` class.
\r
421 * 2. The use of `table` rather than `block` is only necessary if using
\r
422 * `:before` to contain the top-margins of child elements.
\r
427 content: " "; /* 1 */
\r
428 display: table; /* 2 */
\r
437 * Include this rule to trigger hasLayout and contain floats.
\r
444 /* ==========================================================================
\r
445 EXAMPLE Media Queries for Responsive Design.
\r
446 These examples override the primary ('mobile first') styles.
\r
447 Modify as content requires.
\r
448 ========================================================================== */
\r
450 @media only screen and (min-width: 35em) {
\r
451 /* Style adjustments for viewports that meet the condition */
\r
455 (-o-min-device-pixel-ratio: 5/4),
\r
456 (-webkit-min-device-pixel-ratio: 1.25),
\r
457 (min-resolution: 120dpi) {
\r
458 /* Style adjustments for high resolution devices */
\r
461 /* ==========================================================================
\r
463 Inlined to avoid required HTTP connection: h5bp.com/r
\r
464 ========================================================================== */
\r
468 background: transparent !important;
\r
469 color: #000 !important; /* Black prints faster: h5bp.com/s */
\r
470 box-shadow: none !important;
\r
471 text-shadow: none !important;
\r
476 text-decoration: underline;
\r
480 content: " (" attr(href) ")";
\r
483 abbr[title]:after {
\r
484 content: " (" attr(title) ")";
\r
488 * Don't show links for images, or javascript/internal links
\r
492 a[href^="javascript:"]:after,
\r
493 a[href^="#"]:after {
\r
499 border: 1px solid #999;
\r
500 page-break-inside: avoid;
\r
504 display: table-header-group; /* h5bp.com/t */
\r
509 page-break-inside: avoid;
\r
513 max-width: 100% !important;
\r
529 page-break-after: avoid;
\r