/*=================================*/ /* Pico Default Theme /* By: Gilbert Pellegrom /* http: //dev7studios.com /*=================================*/ /* Reset Styles /*---------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1; color: black; background: white; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* HTML5 tags */ header, section, footer, aside, nav, article, figure { display: block; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* Sharper Thumbnails */ img { -ms-interpolation-mode: bicubic; } /* Input Styles /*---------------------------------------------*/ input, textarea, select { padding: 5px; font: 400 1em Verdana, Sans-serif; color: #666; background: #fff; border: 1px solid #999999; margin: 0 0 1em 0; } input:focus, textarea:focus, select:focus { color: #000; background: #fff; border: 1px solid #666666; } /* Main Styles /*---------------------------------------------*/ body { font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; } a, a:visited { color: #2EAE9B; text-decoration: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } a:hover, a:active { color: #000; text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: #000; line-height: 1.2em; margin-bottom: 0.6em; } h1 { font-size: 2em; } h2 { font-size: 1.7em; } h3 { font-size: 1.5em; margin-top: 2em; } p { margin-bottom: 1em; } ol, ul { padding-left: 30px; margin-bottom: 1em; } b, strong { font-weight: bold; } i, em { font-style: italic; } u { text-decoration: underline; } abbr, acronym { cursor: help; border-bottom: 0.1em dotted; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } code { font-family: Courier, "Courier New", Monaco, Tahoma; background: #eee; color: #333; padding: 0px 2px; } pre { background: #eee; padding: 20px; margin-bottom: 1em; overflow: auto; } blockquote { font-style: italic; margin: 0 0 1em 15px; padding-left: 10px; border-left: 5px solid #dddddd; } /* Structure Styles /*---------------------------------------------*/ .inner { width: 850px; margin: 0 auto; } #header { background: #2EAE9B; padding: 60px 0; margin-bottom: 80px; color: #afe1da; } #header a { color: #afe1da; } #header h1 a, #header a:hover { color: #fff; } #header h1 { font-weight: bold; margin: 0; float: left; } #header .menu-icon { display: none; width: 35px; height: 35px; background: #afe1da url(menu-icon.png) center; } #header nav { float: right; list-style: none; margin: 0; padding: 0; } #header nav a { font-weight: bold; margin-left: 20px; } #header a:hover#menu-icon { background-color: #444; border-radius: 4px 4px 0 0; } #header ul { list-style: none; } #header li { display: inline-block; float: left; } #footer { background: #707070; padding: 60px 0; margin-top: 80px; color: #C0C0C0; } #footer a { color: #ddd; } #footer a:hover { color: #fff; } /* Misc Styles /*---------------------------------------------*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Media Queries /*---------------------------------------------*/ /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .inner { width: 85%; } .inner img { width:100%; } #header { margin-bottom: 40px; } #header h1 a { font-size:1em; } #header .menu-icon { display:inline-block; } #header nav a { color: #000; } #header nav a:hover { color: #afe1da; } #header nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #fff; border: 5px solid #444; right: 2.7em; top: 100px; width: 80%; border-radius: 4px 0 4px 4px; z-index: 9999; } #header nav li { text-align: center; width: 100%; padding: 10px 0; margin: 0; } #header nav:hover ul { display: block; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .inner { width: 85%; } .inner img { width:100%; } #header { margin-bottom: 30px; } #header h1 a { font-size:1em; } #header .menu-icon { display:inline-block; } #header nav a { color: #000; } #header nav a:hover { color: #afe1da; } #header nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #fff; border: 5px solid #444; right: 0em; top: 100px; width: auto; border-radius: 4px 0 4px 4px; } #header nav li { text-align: center; width: 100%; padding: 10px 0; margin: 0; } #header nav:hover ul { display: block; } }