/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, 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; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ 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; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } /* change border colour to suit your needs */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } body { color: #333; font-size: 13px; font-family: "helvetica neue", arial, helvetica, "lucida grande", sans-serif; } h1, h2, h3, h4, h5, h6 { color: #111; font-family: "helvetica neue", Helvetica, arial, sans-serif; } /* Success, error & notice boxes for messages and errors. */ div.error, div.notice, div.success, #flash_failure, #flash_success, #flash_notice { border: 1px solid #ddd; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; margin-bottom: 12px; padding: 10px; } div.error, #flash_failure { background: #FBE3E4; border-color: #FBC2C4; color: #D12F19; } div.error a, #flash_failure a { color: #D12F19; } div.notice, #flash_notice { background: #FFF6BF; border-color: #FFD324; color: #817134; } div.notice a, #flash_notice a { color: #817134; } div.success, #flash_success { background: #E6EFC2; border-color: #C6D880; color: #529214; } div.success a, #flash_success a { color: #529214; } /* Misc classes and elements */ /* Use a .box to create a padded box inside a column. */ .box { background: #eee; margin-bottom: 16px; padding: 16px; } /* Use this to create a horizontal ruler across a column. */ hr { background: #ddd; border: none; clear: both; color: #ddd; float: none; height: 1px; margin: 0 0 12px; width: 100%; } hr.space { background: #fff; color: #fff; } /* for image replacement */ .ir { background-repeat: no-repeat; direction: ltr; display: block; overflow: hidden; text-align: left; text-indent: -9999px; } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { zoom: 1; } .ie7 img { -ms-interpolation-mode: bicubic; } @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } 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; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; } h2 { font-size: 24px; line-height: 1.2; margin-bottom: 6px; } h3 { font-size: 18px; line-height: 1.2; margin-bottom: 4px; } h4 { font-size: 16px; line-height: 1.3; margin-bottom: 4px; } h5 { font-size: 14px; margin-bottom: 4px; } h6 { font-size: 12px; margin-bottom: 4px; } /* Text elements */ p { line-height: 1.4; margin-bottom: 12px; } /* Use this if the image is at the top of the
. */ p img.top { margin-top: 0; } img { margin: 0 0 12px; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } address { font-style: italic; margin-top: 16px; } del { color: #666; } a, a:link { color: #1a4882; text-decoration: underline; } a:visited { color: #1a4882; } a:hover { color: #052246; } a:active, a:focus { color: #1a4882; } blockquote { border-left: 4px solid #d1d1d1; color: #666; font-style: italic; margin: 16px 0; padding-left: 12px; } strong { font-weight: bold; } em, dfn { font-style: italic; } dfn { font-weight: bold; } pre, code { margin: 12px 0; white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ word-wrap: break-word; /* IE */ } pre, code, tt { font: 12px 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } pre.code { background: #000; color: #fff; padding: 20px; } tt { display: block; line-height: 1.5; margin: 16px 0; } /* Forms */ /* * Remove inner padding and border in FF3/4 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ input[type="submit"]::-moz-focus-inner { border: 0; padding: 0; } form ol { list-style: none; margin: 0 0 12px 0; } form ol ol { margin-left: 0; } form ol li { list-style-position: outside; margin: 0 0 12px 0; } /*list-style-position fixes IE label margin bug*/ form ol ol li { list-style-position: outside; margin: 0 0 4px 0; } form ol li.error input { background: #FBE3E4; } p.inline-errors { color: #D12F19; } form ol li.file { background: #e1e1e1; border: 1px solid #c8c8c8; padding: 10px; } form abbr { border-bottom: 0; } label { display: block; } .required label { font-weight: bold; } .checkbox_field label, .radio_field label { font-weight: normal; } a.cancel { color: #7d0d0d; } .inline-hints { color: #666; font-size: 11px; margin-bottom: 4px; } /* Fieldsets */ fieldset { background: #f1f1f1; border: 1px solid #e3e3e3; margin: 0 0 16px 0; padding: 16px 16px 12px 16px; } fieldset fieldset, fieldset fieldset fieldset { border: 0; padding: 0; } legend { font-weight: bold; } .ie6 legend, .ie7 legend { margin-left: -7px; } fieldset.buttons { background: inherit; border: 0; padding: 0; } fieldset.buttons li { display: inline; } .radio fieldset { margin: 0; padding: 0; } /* Text fields */ input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] { font-size: inherit; padding: 3px 2px; width: 300px; } .ie6 input { vertical-align: text-bottom; } input[disabled='disabled'] { background-color: #fcfcfc; cursor: default; } input[type="checkbox"] { margin: 0 3px 0 0; position: relative; top: -2px; vertical-align: middle; } .ie7 input[type="checkbox"] { vertical-align: baseline; } input[type="radio"] { margin: 0 3px 0 0; position: relative; top: -2px; vertical-align: middle; } .check_boxes label { display: inline; padding: 0; vertical-align: middle; } .radio label { padding: 0; } /* Textareas */ textarea { font-size: inherit; height: 200px; margin: 0 6px 6px 0; padding: 5px; width: 440px; overflow: auto; } /* Select fields */ fieldset .select select { width: 200px; font-size: 11px; } optgroup { margin: 0 0 6px 0; } /* Date & Time */ form ol li.date select, form ol li.time select, form ol li.datetime select { display: inline; width: auto; } form ol li.date ol li, form ol li.time ol li, form ol li.datetime ol li { display: inline-block; } /* Tables */ table { margin-bottom: 24px; width: 100%; } th { border-bottom: 2px solid #ccc; font-weight: bold; text-align: left; } td { border-bottom: 1px solid #ddd; } caption, th, td { padding: 4px 10px 4px 0; } caption { background: #f1f1f1; margin-bottom: 12px; padding: 10px 0; } tr, td, th { vertical-align: middle; } /* Use this if you use span-x classes on th/td. */ table .last { padding-right: 0; } /* Lists */ ul, ol { list-style-position: inside; margin-bottom: 16px; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { line-height: 1.4; margin-bottom: 16px; } dl dt { font-weight: bold; margin-top: 6px; } dl dd { margin-bottom: 0em; } dd { margin-left: 6px; } li { line-height: 1.4; } ol ol, ol ul, ul ul, ul ol { margin-left: 12px; }