/** * Author: Matt Hinchliffe * Created: 12/01/2011 * Modified: 12/10/2011 * * Find out more about this stylesheet at * * Contents: * 1. Reset * 2. HTML, body, fonts * 3. Base elements * 4. Common classes * 5. Forms * * Naming conventions: * - Hyphens are used for easily readable names. E.G. '#home-page-tabs' * - Underscores denote an extended class. E.G. '.large_button' extends '.button' * * Formatting: * - Keep selectors as short as possible. IDs and classes are much faster and more maintainable than traversing * - Indentation (using tabs only) denotes that the selector is a child element or an extension of the previous * - Property and value pairs on new lines * - Line up vendor prefixes with spaces * * Property order: * It is best to group properties by type and order them in a consistant way... * - Position (E.G. position, top, left, float) * - Layout box (E.G. display, box sizing, width, height, padding, margin, borders) * - Text (E.G. weight/style, line height, text size, font face, color, decoration) * - Backgrounds * - Other stuff (E.G. Box shadow, cursor, opacity, z-index) * * A note on font units: * Root em or 'rem' units are relative to the root () element. When used in correspondence with a base * 10px font size this gives you the flexibility of predictable, resizable font without lots of rounding errors. * This unit requires a fallback for < IE 9 and < Opera 12. Rounding differences between rendering engines will * mean your design will never be pixel perfect when using relative units. * * Font stacks: * - Normal: Arial, sans-serif * - Alternate: Cambria, Georgia, Times, 'Times New Roman', serif * - Mono: Consolas, "Lucida Console", Monaco, monospace * * Colours: * - Dark grey #333 * - Grey #666 * - Light grey #999 */ /** * 1. Reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, table, caption, tbody, tfoot, thead, tr, th, td, fieldset, form, label, legend, input, textarea, button { margin:0; padding:0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } fieldset, img { border:none; } ul, ol { list-style-position:inside; } blockquote, q { quotes:none; } blockquote:before, blockquote:after { content:none; content:''; } abbr, acronym, dfn, var { font-style:normal; font-variant:normal; } address { font-style:normal; } address span { display:block; } input, select, textarea, button { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; outline:none; } legend { -webkit-margin-collapse:separate; } select { vertical-align:middle; cursor:pointer; } button, .button { display:inline-block; width:auto; border:none; white-space:nowrap; cursor:pointer; -webkit-appearance:normal; -moz-appearance:normal; appearance:normal; } button::-moz-focus-inner, input::-moz-focus-inner { padding:0; border:none; } textarea { display:block; height:auto; resize:none; } /** * 2. HTML, Body */ /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; *behavior: url(boxsizing.htc); } html, body { min-height:100%; } html { font-size:62.5%; /* 10px, set in % for IE resize consistency */ } body { line-height:18px; font-size:13px; /* Fallback for rem unit */ line-height:1.8rem; font-size:1.3rem; font-family:Arial, Helvetica, sans-serif; color:#171717; } ::-webkit-selection { color:#fff; background:rgba(0, 0, 0, 0.5); text-shadow:none; } ::-moz-selection { color:#fff; background:rgba(0, 0, 0, 0.5); text-shadow:none; } ::selection { color:#fff; background:rgba(0, 0, 0, 0.5); text-shadow:none; } /** * 3. Base elements */ /* Headers, paragraphs, lists */ /** * I took the idea of using duplicate class names from OOCSS, it allows your markup to define * the correct structure when the design does not take this into account. For this reason it is * safer to use padding rather than margins so that the classes can be used on elements with * margins that collapse such as or within tables (). */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight:normal; font-family:Arial, Helvetica, serif; } h1, .h1 { padding-bottom:14px; line-height:40px; /* You could easily work out line heights as a unit-less, relative number in your project */ font-size:30px; padding-bottom:1.4rem; /* There's no harm in defining padding in pixels only */ line-height:4.0rem; font-size:3.0rem; color:#d33030; /*text-transform:lowercase;*/ } h2, .h2 { padding-bottom:10px; line-height: normal; font-size:25px; color:#d33030; } h3, .h3 { padding-bottom:10px; line-height:30px; font-size:23px; padding-bottom:1rem; line-height:3.0rem; font-size:2.3rem; /*text-transform:lowercase;*/ } h4, .h4 { padding-bottom:6px; line-height:28px; font-size:20px; padding-bottom:0.6rem; line-height:2.8rem; font-size:2.0rem; color:#d33030; /*text-transform:lowercase;*/ } h5, .h5 { padding-bottom:10px; line-height:26px; font-size:17px; padding-bottom:1rem; line-height:2.6rem; font-size:1.7rem; } h6, .h6 { padding-bottom:0; line-height:24px; font-size:13px; line-height:2.4rem; font-size:1.3rem; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; } p, ul, ol, dd { margin-bottom:18px; margin-bottom:1.8rem; } ul, ol { margin-left:20px; } /* Quotes */ blockquote, q, cite { font-style:italic; font-family:Georgia, Times, serif; } blockquote { margin:0 40px; } blockquote .quotation { /* Defined using a class as citations must also be within a paragraph */ text-indent:-0.5em; } blockquote .quotation:before, q:before { content:'\201C'; } blockquote .quotation:after, q:after { content:'\201D'; } cite { font-weight:bold; } /* Monospace */ pre, code, kbd, var { font-family:Consolas, "Lucida Console", Monaco, monospace; } pre { overflow:auto; } code, kbd, var { line-height:1; } /* Help */ abbr[title], acronym[title], dfn[title] { border-bottom:1px dotted; cursor:help; } /* Links */ a { color:#d33030; text-decoration:none; } a:visited { color:#d33030; text-decoration:underline; } a:hover, .selected a { text-decoration:underline; } a:active, a:focus { outline:1px dotted #ccc; outline-offset:1px; } /* Tables */ table { /*margin-bottom:1.5em;*/ border:none; border-collapse:collapse; border-spacing:0; line-height:1.5; } caption, th, td { text-align:left; vertical-align:top; } /** * 4. Common classes */ /* Alternatively coloured links */ .alt-link, .alt-links a { color:#171717; text-decoration:underline; } .alt-link:visited, .alt-links a:visited { color:#171717; } .alt-link:hover, .alt-links a:hover { text-decoration:underline; } /* Text alignment */ .align-left { text-align:left; } .align-centre { text-align:center; } .align-right { text-align:right; } /* Font size variations */ .small-text { line-height:18px; font-size:11px; line-height:1.8rem; font-size:1.1rem; } p.small-text { margin-bottom:14px; margin-bottom:1.4rem; } .medium-text { font-size:13px; font-size:1.3rem; } .large-text { line-height:30px; font-size:22px; line-height:3rem; font-size:2.2rem; } p.large-text { margin-bottom:30px; margin-bottom:3rem; } /* Text colours */ .black { color:#000; } .dark-grey { color:#6d6d6d; } .grey { color:#878787; } .light-grey { color:#a8a8a8; } .white { color:#fff; } .orange { color:#febd11; } /* Text properties */ .em, em { font-style:italic; } .strong, strong { font-weight:bold; } /* Utility classes */ .replace { display:block; overflow:hidden; text-indent:-9999px; background:transparent no-repeat 0 0; } .hidden { position:absolute; left:-9999px; } .base { margin:0; padding:0; } ul.base, ol.base { list-style-type:none; } img.base { display:block; } .break, .break-list > li { margin-bottom:20px; padding-bottom:20px; background: url(../img/mc-dot.gif) repeat-x 0 bottom transparent; } #main-content .break, #main-content .break-list > li { background: url(../img/mc-dot.gif) repeat-x 0 bottom transparent; } #main-content .break-list > li.last { background:none; } #upper-footer-one .break { background: url(../img/fOne-dot.gif) repeat-x 0 bottom transparent; } #upper-footer-two .break { background: url(../img/fTwo-dot.gif) repeat-x 0 bottom transparent; } #upper-footer-three .break { background: url(../img/fThree-dot.gif) repeat-x 0 bottom transparent; } .ico { padding-left:25px; margin-left:5px; } .ico-phone { width:17px; height:21px; padding-bottom:5px; background: url(../img/phone_symbol.gif) no-repeat transparent; } .ico-newsletter { width:17px; height:21px; padding-bottom:5px; padding-left:30px; background: url(../img/newsletter_symbol.jpg) no-repeat transparent; } /* Floats and clearfix */ .left { float:left; } img.left { display:block; margin:0 15px 1.5em 0; } .right { float:right; } img.right { display:block; margin:0 0 1.5em 15px; } .clear { /* clear:right may leave elements 'stranded' if your baseline breaks */ clear:left; display:block; } .cf:after { clear:both; display:block; height:0; line-height:0; visibility:hidden; content:"."; } /* Inline list */ .inline-list { margin-left:0; list-style-type:none; } .inline-list > li { display:inline; margin:0; } /* Block list + Red Buttons */ .block-list { margin-left:0; list-style-type:none; } .block-list li { float:none; } .block-list a, .red-btn { display:block; margin-bottom:5px; padding:3px 10px; color:#000; background-color:#ececec; } .block-list a:hover, .block-list a.selected { color:#fff; } /* Inline definition list */ .inline-definitions { overflow:hidden; } .inline-definitions dt, .inline-definitions dd { margin:0; padding:8px 8px; } .inline-definitions dt { float:left; clear:left; padding-right:10px; width: 100%; font-weight: bold; height: 100%; } .inline-definitions dt:after { } .inline-definitions dt.shaded, .inline-definitions dd.shaded { background-color:#ececec; } /* Numbered definition lists */ .numbered-definitions { counter-reset:numbered; } .numbered-definitions dt:before { counter-increment:numbered; content:counter(numbered) '. '; } /* Comma separated list */ .tag-list { margin-left:0; text-transform:capitalize; } .tag-list li { float:left; display:block; } .tag-list li:before { content:',\0000a0'; /* Non-breaking space */ } .tag-list li:first-child:before { content:''; } /* Pipe separated list */ .separated-list { margin-left:0; text-transform:capitalize; } .separated-list li { float:left; display:block; } .separated-list li:before { content:'\0000a0\0000a0\0000a0|\0000a0\0000a0\0000a0'; /* Non-breaking space */ } .separated-list li:first-child:before { content:''; } /* Slash separated list */ .slash-separated-list { margin-left:0; text-transform:lowercase; } .slash-separated-list li { float:left; display:block; } .slash-separated-list li:before { content:'\0000a0\0000a0\0000a0/\0000a0\0000a0\0000a0'; /* Non-breaking space */ } .slash-separated-list li:first-child:before { content:''; } /** * 5. Forms */ fieldset { overflow:hidden; } /* Labels */ label, .label { display:inline; white-space:nowrap; margin-right:10px; } label dfn { font-size:0.857em; } label dfn[title] { border:none; } /* Text inputs, text areas and select boxes */ input, select, textarea, button, .button { height:17px; /* To match the line-height for browsers that do not recognise line-height property on form elements */ padding:2px 5px; border:none; border-radius:3px; font:normal 0.8em/17px Arial, Helvetica, sans-serif; /* Gecko defines line-height as 'normal', roughly 17px relative to 14px */ text-transform:normal; background:#eee; } input:focus, select:focus, textarea:focus { color:#454545; z-index:1; /* For Opera */ -webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow:0 0 15px rgba(0, 0, 0, 0.5) inset; box-shadow:0 0 15px rgba(0, 0, 0, 0.5) inset; /* Inset shadows won't display in Opera. There is a hack (apply a border-radius) but that sucks; don't use it */ } input[type=checkbox], html input[type=radio], html input[type=file] { /* Go native, otherwise build a new input with a little JS */ width:auto; height:auto; padding:0; background:none; } textarea { height:8em; } /* Placeholders */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#666; } input:-moz-placeholder, textarea:-moz-placeholder { color:#666; } /* Buttons */ button, .button { /* See text inputs/textarea/select boxes above */ margin-left:-7px; letter-spacing:0.1rem; color:#fff; background: #5c5c5c; /* Old browsers */ background: -moz-linear-gradient(top, #5c5c5c 0%, #303030 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#303030)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5c5c5c 0%,#303030 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5c5c5c 0%,#303030 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5c5c5c 0%,#303030 100%); /* IE10+ */ background: linear-gradient(top, #5c5c5c 0%,#303030 100%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c5c5c', endColorstr='#303030',GradientType=0 );*/ /* IE6-9 */ /* Replaced filter specifics for IE6-9 with PIE due to border-radius and gradient bug */ -pie-background: linear-gradient(#5c5c5c, #303030); behavior: url(/PIE.htc); } a.button:hover, a.button:visited, button:hover { color:#fff; text-decoration:none; background:#303030; background: -moz-linear-gradient(top, #303030 0%, #5c5c5c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#5c5c5c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #303030 0%,#5c5c5c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #303030 0%,#5c5c5c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #303030 0%,#5c5c5c 100%); /* IE10+ */ background: linear-gradient(top, #303030 0%,#5c5c5c 100%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#5c5c5c',GradientType=0 );*/ /* IE6-9 */ /* Replaced filter specifics for IE6-9 with PIE due to border-radius and gradient bug */ -pie-background: linear-gradient(#303030, #5c5c5c); behavior: url(/PIE.htc); } /* Form layout */ .row { margin-bottom:1em; } /* Inline labels (requires .cf) */ .inline label, .inline .label, .inline input, .inline select, .inline button, .inline .button { /* Extends .row */ float:left; } .inline label, .inline .label { width:120px; padding-top:5px; /* To match input padding (and border width if necessary) */ line-height:17px; /* Match input/select 'normal' line height */ line-height:1.7rem; } /* Checkboxes and radio buttons */ .checkbox input, .radio input { vertical-align:baseline; background:none; } .checkbox label, .radio label { display:inline; padding:0 0.25em; } .ngg-gallery-thumbnail-box { width: 23%; float: left; margin-right: 5px; left: -5px; } .announcement{ width: 100%; padding: 10px; background-color: #d33030; color: #FFFFFF; text-align: center; }