@import "common.less"; /* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ /* ============================================================================= Normalize.css is intended to be used as an alternative to CSS resets. It is suggested that you read through the normalize.css file and customise it to meet the design requirements of a project rather including it as a "black box". @see http://nicolasgallagher.com/about-normalize-css/ Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ @see http://snook.ca/archives/html_and_css/no_css_reset/ ========================================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ /* * Corrects block display not defined in IE6/7/8/9 & FF3 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /* * Corrects inline-block display not defined in IE6/7/8/9 & FF3 */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* * Prevents modern browsers from displaying 'audio' without controls * Remove excess height in iOS5 devices */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 * Known issue: no IE6 support */ [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* Instead of relying on the fonts that are available on a user's computer, you can use web fonts which, like images, are resources downloaded to the user's browser. Because of the bandwidth and rendering resources required, web fonts should be used with care. Numerous resources for web fonts can be found on Google. Here are a few websites where you can find Open Source fonts to download: - http://www.fontsquirrel.com/fontface - http://www.theleagueofmoveabletype.com In order to use these fonts, you will need to convert them into formats suitable for web fonts. We recommend the free-to-use Font Squirrel's Font-Face Generator: http://www.fontsquirrel.com/fontface/generator The following is an example @font-face declaration. This font can then be used in any ruleset using a property like this: font-family: Example, serif; Since we're using Sass, you'll need to declare your font faces here, then you can add them to the font variables in the _base.scss partial. */ /* @font-face { font-family: 'Example'; src: url('../fonts/example.eot'); src: url('../fonts/example.eot?iefix') format('eot'), url('../fonts/example.woff') format('woff'), url('../fonts/example.ttf') format('truetype'), url('../fonts/example.svg#webfontOkOndcij') format('svg'); font-weight: normal; font-style: normal; } */ /* * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units * http://clagnut.com/blog/348/#c790 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ html { /* * To use a 14px font size on the page, delete the 16px and 12px declarations. * To use a 12px font size on the page, delete the 16px and 14px declarations. */ /* Use a 12px base font size */ font-size: @FSsmaller; /* 16px x @FSsmaller = 12px */ /* Use a 14px base font size */ font-size: 87.5%; /* 16px x .875 = 14px */ /* Use a 16px base font size */ font-size: 100%; /* 1 */ font-size: 62.5%; -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ /* Establish a vertical rhythm. */ line-height: 1.5em; } /* * Instead of relying on the fonts that are available on a user's computer, you * can use web fonts which, like images, are resources downloaded to the user's * browser. Because of the bandwidth and rendering resources required, web fonts * should be used with care. * * Numerous resources for web fonts can be found on Google. Here are a few * websites where you can find Open Source fonts to download: * - http://www.fontsquirrel.com/fontface * - http://www.theleagueofmoveabletype.com * * In order to use these fonts, you will need to convert them into formats * suitable for web fonts. We recommend the free-to-use Font Squirrel's * Font-Face Generator: * http://www.fontsquirrel.com/fontface/generator * * The following is an example @font-face declaration. This font can then be * used in any ruleset using a property like this: font-family: Example, serif; @font-face { font-family: 'Example'; src: url('../fonts/example.eot'); src: url('../fonts/example.eot?iefix') format('eot'), url('../fonts/example.woff') format('woff'), url('../fonts/example.ttf') format('truetype'), url('../fonts/example.svg#webfontOkOndcij') format('svg'); font-weight: normal; font-style: normal; } */ /* * Addresses font-family inconsistency between 'textarea' and other form elements. */ html, button, input, select, textarea { /* The following font family declarations are based on the Microsoft core web * fonts which are common fonts available on most computer systems. The DejaVu * and Nimbus Sans fonts are commonly available on Linux systems where the MS * fonts are less common. Tahoma and Helvetica are also widely available. * * A user's web browser will look at the comma-separated list and will * attempt to use each font in turn until it finds one that is available * on the user's computer. The final "generic" font (sans-serif, serif or * monospace) hints at what type of font to use if the web browser doesn't * find any of the fonts in the list. font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif; font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif; font-family: Georgia, "Times New Roman", "DejaVu Serif", serif; font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif; font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif; font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; font-family: "Courier New", "DejaVu Sans Mono", monospace; */ font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; /* JEC */ font-family: helvetica, arial, sans-serif; } /* * Addresses margins handled incorrectly in IE6/7 */ body { margin: 0; } /* ============================================================================= Links ========================================================================== */ /* * The order of link states are based on Eric Meyer's article: * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states */ a:link { } a:visited { } .hover a:hover, a:focus { } a:active { } /* * Addresses outline displayed oddly in Chrome */ a:focus { outline: thin dotted; } /* * Improves readability when focused and also mouse hovered in all browsers * people.opera.com/patrickl/experiments/keyboard/test */ .hover a:hover, a:active { /* boer aendres jeth */ outline: 0; } /* ============================================================================= Typography To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins so that the line height of our base font becomes the basic unit of vertical measurement. We use multiples of that unit to set the top and bottom margins for our block level elements and to set the line heights of any fonts. For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm ========================================================================== */ /* * Addresses font sizes and margins set differently in IE6/7 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 */ h1 { font-size: @FSdefaultH1; line-height: 1.2em; font-weight: normal; letter-spacing: 0.05em; margin: 0 0 0.5em 0; padding: 0; } h2 { font-size: @FSdefaultH2; // font-size: 1.3em; line-height: 1.807em; /* 3rem / 1.5em = 2em */ margin-top: 1em; /* 1.5rem / 1.5em = 1em */ margin-bottom: 0.5em; } h3 { font-size: @FSdefaultH3; // font-size: 1.17em; line-height: 1.282em; /* 1.5rem / 1.17em = 1.282em */ margin-top: 1.282em; margin-bottom: 1.282em; } h4 { font-size: 100%; // font-size: 1em; line-height: 1.5em; /* 1.5rem / 1em = 1.5em */ margin-top: 1.5em; margin-bottom: 1.5em; } h5 { font-size: 100%; // font-size: 0.83em; line-height: 1.807em; /* 1.5rem / 0.83em = 1.807em */ margin-top: 1.807em; margin-bottom: 1.807em; } h6 { font-size: 100%; // font-size: 0.75em; line-height: 2em; /* 1.5rem / .75em = 2em */ margin-top: 2em; margin-bottom: 2em; } /* Thematic break */ hr { height: 1px; border: 1px solid #666; padding-bottom: -1px; margin: 1.5em 0; } /* * Addresses styling not present in IE7/8/9, S5, Chrome */ abbr[title] { border-bottom: 1px dotted; cursor: help; white-space: nowrap; } /* * Addresses style set to 'bolder' in FF3+, S4/5, Chrome */ b, strong { font-weight: bold; } blockquote { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.5em 30px; } /* * Addresses styling not present in S5, Chrome */ dfn { font-style: italic; } /* * Addresses styling not present in IE6/7/8/9 */ mark { background: #ff0; color: #000; } /* * Addresses margins set differently in IE6/7 */ p, pre { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 0 0 0.5em 0; font-size: 100%; // font-size: 1.3em; line-height: 1.5em; } /* * Corrects font family set oddly in IE6, S4/5, Chrome * en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ pre, code, kbd, samp, tt, var { font-family: "Courier New", "DejaVu Sans Mono", monospace, sans-serif; _font-family: 'courier new', monospace; font-size: 100%; // font-size: 1em; line-height: 1.5em; } /* * Improves readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * 1. Addresses CSS quotes not supported in IE6/7 * 2. Addresses quote property not supported in S4 */ /* 1 */ q { quotes: none; } /* 2 */ q:before, q:after { content: ''; content: none; } /* @todo Determine how big element affects vertical rhythm. */ small { font-size: @FSsmaller; // font-size: @FSsmaller; } /* * Prevents sub and sup affecting line-height in all browsers * gist.github.com/413930 */ sub, sup { font-size: @FSsmaller; // font-size: @FSsmaller; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ /* * Addresses margins set differently in IE6/7 */ dl, menu, ol, ul, .item-list ul /* Drupal override */ { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.5em 0; } .item-list ul li { /* Drupal override */ margin: 0; } dd { margin: 0 0 0 30px; /* LTR */ } ul ul, ul ol, ol ul, ol ol, .item-list ul ul, .item-list ul ol, .item-list ol ul, .item-list ol ol { margin: 0; /* Turn off margins on nested lists. */ } /* * Addresses paddings set differently in IE6/7 */ menu, ol, ul, .item-list ul /* Drupal override */ { padding: 0 0 0 30px; /* LTR */ } /* * Corrects list images handled incorrectly in IE7 */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 * 2. Improves 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; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ /* vertical-align: bottom; */ /* Suppress the space beneath the baseline */ /* Responsive images */ /* @todo Add responsive embedded video. */ max-width: 100%; height: auto; } /* * Corrects overflow displayed oddly in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ /* * Addresses margin not present in IE6/7/8/9, S5, O11 */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE6/7 */ form { margin: 0; } /* * Define consistent border, margin, and padding */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.5em 0.625em 1em; } /* * 1. Corrects color not being inherited in IE6/7/8/9 * 2. Corrects text not wrapping in FF3 * 3. Corrects alignment displayed oddly in IE6/7 */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ /* LTR */ } /* * 1. Corrects font size not being inherited in all browsers * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome * 3. Improves appearance and consistency in all browsers */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet */ button, input { line-height: normal; /* 1 */ } /* * 1. Improves usability and consistency of cursor style between image-type 'input' and others * 2. Corrects inability to style clickable 'input' types in iOS * 3. Removes inner spacing in IE7 without affecting normal text inputs * Known issue: inner spacing remains in IE6 */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ *overflow: visible; /* 3 */ } /* * Re-set default cursor for disabled elements */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to content-box in IE8/9 * 2. Removes excess padding in IE8/9 * 3. Removes excess padding in IE7 Known issue: excess padding remains in IE6 */ input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /* * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ .boxSizing(content-box); } /* * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * Removes inner padding and border in FF3+ * 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; } /* * 1. Removes default vertical scrollbar in IE6/7/8/9 * 2. Improves readability and alignment in all browsers */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ============================================================================= Tables ========================================================================== */ /* * Remove most spacing between table cells */ table { border-collapse: collapse; border-spacing: 0; /* width: 100%; */ /* Prevent cramped-looking tables */ /* Add vertical rhythm margins. */ margin-top: 1.5em; margin-bottom: 1.5em; } /* * Drupal provides table styling which is only useful for its admin section * forms, so we override this default CSS. (We set it back in forms.css.) */ th { text-align: left; /* LTR */ padding: 0; border-bottom: none; } tbody { border-top: none; } td { vertical-align: top; } .clearboth { clear: both; } .displayNone { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; line-height: 1px !important; font-size: 1px !important; }