@import 'vars.scss'; @import 'mixins/collection.scss'; @import "compass/css3/box-shadow"; /* * 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. */ /* ============================================================================= HTML5 element display ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block } audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * http://clagnut.com/blog/348/#c790 * 2. Force vertical scrollbar in non-IE * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ html { font-size: 100%; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html.js { overflow:hidden; } body { margin: 0; font-size: 0.75em; line-height: 1.3; } body, button, input, select, textarea { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #606b73; } /* * These selection declarations have to be separate * No text-shadow: twitter.com/miketaylr/status/12228805301 * Also: hot pink! */ ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } /* ============================================================================= Links ========================================================================== */ a, a:visited { color: #4881d7; text-decoration:none; } a:visited { color:#2969ca; } a:focus { outline: thin dotted } /* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: 0; text-decoration:underline; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: bold } blockquote { margin: 1em 40px } dfn { font-style: italic } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none } q:before, q:after { content: ""; content: none; } small { font-size: 85% } /* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em } sub { bottom: -0.25em } h1, h2, h3, h4, h5, h6 { margin:0 0 .5em; } h1 { font-size:3em; } h2 { font-size:2.5em; } h3 { font-size:2em; } h4, h5, h6 { font-size:1.167em; } p { margin:0 0 1.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px } nav ul, nav ol { list-style: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * Improve image quality when scaled in IE7 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ img { border: 0; -ms-interpolation-mode: bicubic; } /* * Correct overflow displayed oddly in IE9 */ svg:not(:root) { overflow: hidden } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0 } /* ============================================================================= Forms ========================================================================== */ form { margin: 0 } form ul { list-style:none; margin:10px 0 0; padding:10px 0 0; clear:both; border-top:1px solid #e2e2e2; li { margin:0 0 15px; &:first-child { border-top:none; padding-top:none; } &:last-child { border-bottom:none; padding-bottom:none; } } } ::-webkit-input-placeholder { color: #bbb; } :-moz-placeholder { color: #bbb; } fieldset { margin: 0 0 15px; /*background:#f1f1f1;*/ border:none; @include border-radius(4px); /*@include box-shadow(0 1px 0 0 #fff inset);*/ padding:0; ul li:last-child { padding-bottom:0; } } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; padding: 0; font-size:1.5em; font-weight:700; display:block; color:#ed6104; } .ie6 legend, .ie7 legend { margin-left: -7px; margin-top:-28px; } .ie8 legend { margin-top:-24px; } .oldie legend { font-size:1.167em; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; display: block; font-weight: 700; margin: 0 0 10px; padding: 7px 15px 0 0; &.singleChoiceLabel { @include inline-block; } &.multiChoiceLabel { } } .multicheckboxOptions, .radioOptions { label { width:auto; margin:0 15px 10px 0; font-weight:normal; @include inline-block; } input { margin:2px 5px 0 0; } } input[type=radio], input[type=checkbox] { position:relative; top:2px; } .dateInput { input { width:60px; } select { width:100px; &:first-child { width:60px; } &:last-child { width:70px; } } } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box } input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } /* * Remove inner padding and border in FF3/4 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Remove default vertical scrollbar in IE6/7/8/9 */ textarea { overflow: auto; vertical-align: top; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd } input, select, textarea { padding:6px; border-top:1px solid #9a9a9a; border-left:1px solid #a8a8a8; border-right:1px solid #a8a8a8; border-bottom:1px solid #bbbbbb; @include vertical-gradient(#fff,#fcfcfc,20px,'fff','fcfcfc'); @include border-radius(3px); @include box-shadow(0 2px 3px 0 rgba(50,50,50,0.15) inset,0 1px 0 0 #fff); width:300px; &:focus { border-color:#ed6104; } } select { width:314px; } textarea { width:80%; height:160px; max-height:600px; max-width:980px; } input[type="checkbox"], input[type="radio"] { padding:none; background:none; @include box-shadow(none); border:none; } input[type="file"] { @include box-shadow(none); } form ul .description { float: left; margin-left: -205px; margin-top: -25px; width: 190px; span { font-weight:bold; } } form.descriptions li { padding-left:205px; @include clearfix; } .js form fieldset.actions { display:none; } .ui-widget-content fieldset { background:#fff; padding:0; } li.submit { padding-bottom:0; } /* ============================================================================= Tables ========================================================================== */ table { margin-bottom:20px; border-spacing: 0; width:100%; table-layout:fixed; background:#fff; .ie7 & { border-collapse: collapse; width:auto; zoom:1; } caption { font-weight: 700; margin: 0 0 10px; padding: 7px 15px 0 0; text-align:left; } } thead { font-size:1.167em; th { color:#fff; font-weight:bold; background:#5f97eb; border:1px solid #447fd8; border-right:none; border-left:none; } } tbody { tr { &.even{ td { background:#f3f7fb; } } } td { border-right:1px solid #dadee1; &:last-child { border-right:none; } } } th { text-align:left; } td, th { vertical-align:top; padding:4px 8px; word-wrap:break-word; } .recaptchatable { width:auto; table-layout:auto; background:#fff; }