/* -------------------------------------------------------------------------------------------------------------------------------- LessGuides CSS stylesheet Creator: Ari Palo (aripalo.fi) Based on Less Framework 3 by Joni Korpi (lessframework.com) -------------------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------------------- Resets (combined version of html5doctor.com/html-5-reset-stylesheet & Less Framework 3 resets) -------------------------------------------------------------------------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* tables still need cellspacing="0" in the markup */ hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } a img {border: 0;} /* -------------------------------------------------------------------------------------------------------------------------------- Some reasonable settings here... not really resets... let's just leave them here -------------------------------------------------------------------------------------------------------------------------------- */ /* Force vertical scrollbar */ html { overflow-y: scroll; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* -------------------------------------------------------------------------------------------------------------------------------- Typography -------------------------------------------------------------------------------------------------------------------------------- */ .gigantic { font-size: 110px; line-height: 120px; letter-spacing: -2px; } .huge, h1 { font-size: 60px; line-height: 72px; letter-spacing: -2px; color: rgb(60,97,158); margin: 0 0 20px 0; font-family: 'TitilliumMaps29L1wt', Helvetica, Arial, sans-serif; } .large, h2 { font-size: 32px; line-height: 40px; margin: 40px 0 20px 0; color: rgb(60,97,158); } .big, h3 { font: 20px/36px 'TitilliumMaps29L800wt', Helvetica, Arial, sans-serif; font-weight: bold; margin: 0 0 10px 0; letter-spacing: 1px; } .normal, body { font: 18px/30px 'TitilliumMaps29L400wt', Helvetica, Arial, sans-serif; color: #333; } .small { font-size: 13px; line-height: 18px; } strong {font-family: 'TitilliumMaps29L800wt', Helvetica, Arial, sans-serif; font-weight: bold;} p {margin: 0 0 10px 0;} /* -------------------------------------------------------------------------------------------------------------------------------- stuff.. -------------------------------------------------------------------------------------------------------------------------------- */ ul {list-style: none;} ul li {margin: 0 0 20px 0;} a:link {text-decoration: underline; color: rgb(60,97,158); font: 20px/36px 'TitilliumMaps29L800wt', Helvetica, Arial, sans-serif; font-weight: bold;} a:visited {color: rgb(116,130,154);} a:active, a:hover {color: rgb(67,151,246);} /* -------------------------------------------------------------------------------------------------------------------------------- Default 8-column layout --------------------------------------------------------- For tablets at 768 px, netbooks, and old browsers. --------------------------------------------------------- 60 px columns, 24 px gutters, 60 px margins, 768 px total --------------------------------------------------------- 1 2 3 4 5 6 7 8 60px 144px 228px 312px 396px 480px 564px 648px -------------------------------------------------------------------------------------------------------------------------------- */ body { background: rgb(232,232,232); padding: 40px 60px 0; width: 648px; -webkit-tap-highlight-color: rgb(255,255,0); margin: 0 auto 80px auto; } ::selection {background: rgb(255,255,0);} ::-moz-selection {background: rgb(255,255,0);} #example { height: 600px; background: rgb(60,97,158); } /* -------------------------------------------------------------------------------------------------------------------------------- 13-column layout --------------------------------------------------------- For laptops, desktops, and hdtvs at 1280 px and beyond. --------------------------------------------------------- 60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars) --------------------------------------------------------------------------------------- 1 2 3 4 5 6 7 8 9 10 11 12 13 60px 144px 228px 312px 396px 480px 564px 648px 732px 816px 900px 984px 1068px -------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 1212px) { body { padding: 40px 72px 0; width: 1068px; } } /* -------------------------------------------------------------------------------------------------------------------------------- 5-column layout --------------------------------------------------------- For 480 px mobiles, narrow browsers, and landscape iPhones. --------------------------------------------------------- 60 px columns, 24 px gutters, 42 px margins, 480 px total --------------------------------------------------------- 1 2 3 4 5 60px 144px 228px 312px 396px -------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) and (min-width: 480px) { body { padding: 40px 42px 0; width: 396px; } } /* -------------------------------------------------------------------------------------------------------------------------------- 3-column layout --------------------------------------------------------- For all iPhones, iPod Touches, and other 320 px mobiles. --------------------------------------------------------- 60 px columns, 24 px gutters, 46 px margins, 320 px total --------------------------------------------------------- 1 2 3 60px 144px 228px -------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 479px) { body { padding: 40px 46px 0; width: 228px; } /* Example usage */ h1 {font-size: 46px; line-height: 52px;} h2 {font-size: 24px; line-height: 32px;} h3, big {font-size: 18px; line-height: 24px;} .normal, body, p {font-size: 16px; line-height: 30px;} a {word-wrap: break-word;} } /* -------------------------------------------------------------------------------------------------------------------------------- PRINT STYLES -------------------------------------------------------------------------------------------------------------------------------- */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } }