/* ================================================================== *\ Table of contents (Ctrl/Cmd + F, and search for `$section` to jump to a section) 01. Base................Normalize.css (minified), important styles 02. Typography..........Basic typography elements 03. Non-typography......Important elements that are not type-based 04. Grids...............A simple grid system & handy width classes 05. Layout..............Common layout items (wrappers, islands, etc) 06. Buttons.............Basic styles, sizes, and shapes 07. Tables..............Styles for tabular data 08. Main................Your styles go here! 09. Helpers.............Some useful, global classes 10. Print...............Inlined, barebones print styles \* ================================================================== */ /* ================================================================== *\ Base ($base) \* ================================================================== */ /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{ font-family: SourceSansProRegular; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }body{ margin: 0; background-color: #55301C; }a:focus{outline:thin dotted}a:active,a:hover{color: #6F0, outline:0}h1{ font-size: 2em; margin: .67em 0; font-family: SourceSansProRegular; color: #7D421E; } h2 { font-size: 1.8px; margin: .67em 0 font-family: 'TitilliumText25L400wt'; } abbr[title]{border-bottom:1px dotted} .bg_white { background-color: #FFFFFF; padding-top: 10px; padding-bottom: 10px; } .text_center p a { color: #C6C6C6; text-decoration: underline; font-weight: bold; color: #EEC995; } b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{ font-family: 'TitilliumText25L400wt'; font-size: 1em }pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{ border-collapse: collapse; border-spacing: 0; width: 100%; } table tbody tr th { color: #FFFFFF; background-color: #0B1888; padding-top: 10px; padding-bottom: 10px; } table tbody tr td { padding: 5px; border-right-width: 1px; border-right-style: solid; border-right-color: #FFFFFF; } table tbody tr:nth-child(2n+1) { background-color: #EBEBEB } /* `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5 */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Set and to inherit the height of the viewport */ html, body { min-height: 100%; } /** * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH * 1. Force a vertical scrollbar - http://cbrac.co/163MspB * 2. Remove iOS text size adjust without disabling user zoom */ html { overflow-y: scroll; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ text-size-adjust: 100%; /* 2 */ } /** * 1. Customize `background` for text selections * 2. Remove `text-shadow` selection highlight - http://cbrac.co/Q6swON */ ::-moz-selection { background: #b3d4fc; /* 1 */ text-shadow: none; /* 2 */ } ::selection { background: #b3d4fc; /* 1 */ text-shadow: none; /* 2 */ } /* Change `background` for text selections when browser is unfocused */ ::selection:window-inactive { background: #d0d0d0; } /* Remove `background` on images when selected */ img::selection { background: transparent; } img::-moz-selection { background: transparent; } /* ================================================================== *\ Typography ($typography) Modular scale: 12px @ 1:1.333 (perfect fourth) Important number: 18px (maximum `font-size`) http://modularscale.com/scale/?px1=12&px2=18&ra1=1.333&ra2=0 Description -------------------- Cardinal uses a combination of modular scale, unit-less line heights, and `rem` units so that it is easy to scale the type and layout across your entire project. How it works -------------------- The root font size is first set to a value that feels comfortable on small feature phones (mobile devices with a viewport width less than 320px). Then, using `@media` queries, Cardinal increases the root font size at several common viewport widths, called breakpoints. You can tweak these `@media` queries and percentage values to suit your project. This is how the type and layout scale globally. NOTE: IE9 & IE10 do not recognize `rem` units when used with the `font` shorthand property. \* ========================================================================= */ html { font-size: 75%; } /* 12px */ @media only screen and (min-width: 320px) { html { font-size: 81.25%; } } @media only screen and (min-width: 480px) { html { font-size: 87.5%; } } @media only screen and (min-width: 640px) { html { font-size: 100%; } } @media only screen and (min-width: 960px) { html { font-size: 112.5%; } } @media only screen and (min-width: 1440px) { html { font-size: 150%; } } /** * 1. Inherits percentage declared on above as root `font-size` * 2. Unitless `line-height`, which acts as multiple of root `font-size` */ body { color: #444; font-size: 1rem; /* 1 */ font-family: 'TitilliumText25L400wt'; line-height: 1.5; /* 2 */ } /* Define a mobile tap highlight color (iOS 1.1.1+) */ a:link { -webkit-tap-highlight-color: #b3d4fc; color: #0B1888; text-decoration: none; } a:hover { text-decoration: none; } abbr, acronym, dfn[title] { cursor: help; } abbr a { text-decoration: none; } acronym { text-transform: uppercase; } blockquote { padding-left: 1rem; border-left: 5px solid #efefef; font-style: italic; font-family: 'TitilliumText25L400wt'; } blockquote p { margin: 0; } blockquote p + p { margin-top: 1rem; } .pie { background-color: #333; padding-top: 25px; padding-bottom: 15px; } /** * TIP: Use