/*
-----------------------------------------------------------------------
URL: http://www.norbro.co.uk
Created by JG1 Ltd
Design / CSS / XHTML - Paul "Hurricane" Ashcroft
CMS and other wonders - Vince "Whirlwind" Lee
-----------------------------------------------------------------------

CONTENTS

	1: SITE MASTER SETUP (including reset from Tripoli and HTML5 reset)

	2: TYPOGRAPHY/DESIGN 
		2.1 - font embedding
		2.2 - general
		2.3 - titles
		2.4 - text
		2.5 - links
		2.6 - misc

	3: LAYOUT
		3.1 - container
		3.2 - header
			3.2.1 - branding
			3.2.2 - navigation
		3.3 - content
		3.4 - primary content
		3.5 - secondary content
		3.6 - tertiary content
		3.7 - footer
		3.8 - wrapper
	
	4: GLOBAL ELEMENTS / CONTROLS
		4.1 - accessibility
		4.2 - site navigation
			4.2.1 - primary navigation
			4.2.2 - secondary navigation
			4.2.3 - tertiary navigation
		4.3 - buttons
		4.4 - lists
		4.5 - forms
			4.5.1 - generic form styling
		4.6 - tables
		4.7 - icons

	5: TEMPLATE / PAGE SPECIFIC
		5.1 - index page
		5.2 - sub pages
	
	6: USEFUL CLASSES


/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */

/* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */
* { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal }
/* end of import */
section, article, aside, header, footer, nav, figure, hgroup { display:block }
body { height:100%; text-align:center; background:#000 }
ul { list-style:disc outside }
ol { list-style:decimal outside }


/* -----------------------------------------------
2. TYPOGRAPHY / DESIGN
----------------------------------------------- */
/* 2.1 - font embedding */
@font-face { font-family: 'TitilliumText22LThin'; src: url('../fonts/TitilliumText22L001-webfont.eot'); src: url('../fonts/TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/TitilliumText22L001-webfont.woff') format('woff'),  url('../fonts/TitilliumText22L001-webfont.ttf') format('truetype'),  url('../fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TitilliumText22LLight'; src: url('../fonts/TitilliumText22L002-webfont.eot'); src: url('../fonts/TitilliumText22L002-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/TitilliumText22L002-webfont.woff') format('woff'),  url('../fonts/TitilliumText22L002-webfont.ttf') format('truetype'),  url('../fonts/TitilliumText22L002-webfont.svg#TitilliumText22LLight') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TitilliumText22LRegular'; src: url('../fonts/TitilliumText22L003-webfont.eot'); src: url('../fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/TitilliumText22L003-webfont.woff') format('woff'),  url('../fonts/TitilliumText22L003-webfont.ttf') format('truetype'),  url('../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TitilliumText22LMedium'; src: url('../fonts/TitilliumText22L004-webfont.eot'); src: url('../fonts/TitilliumText22L004-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/TitilliumText22L004-webfont.woff') format('woff'),  url('../fonts/TitilliumText22L004-webfont.ttf') format('truetype'),  url('../fonts/TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TitilliumText22LBold'; src: url('../fonts/TitilliumText22L005-webfont.eot'); src: url('../fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/TitilliumText22L005-webfont.woff') format('woff'),  url('../fonts/TitilliumText22L005-webfont.ttf') format('truetype'),  url('../fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TitilliumText22LXBold'; src: url('../fonts/TitilliumText22L006-webfont.eot'); src: url('../fonts/TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/TitilliumText22L006-webfont.woff') format('woff'),  url('../fonts/TitilliumText22L006-webfont.ttf') format('truetype'),  url('../fonts/TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg'); font-weight: normal; font-style: normal; }

/* 2.2 - general */
html { font-size:62.5%; font-family:TitilliumText22LRegular, Arial, Helvetica, sans-serif; line-height:1.4em; color:#707070 }
code, kbd, samp, pre, tt, var, input, input[type='password'], textarea { font-size:1.1em; font-family:TitilliumText22LRegular, Arial, Helvetica, sans-serif }

::selection { background:#ff2500; color:#fff }
::-moz-selection { background:#ff2500; color:#fff }

/* 2.3 - titles */
h1 { font-size:3em; color:#000; margin:0 0 12px 0; text-rendering:optimizeLegibility }
h2 { font-size:2em; color:#000; margin:0 0 12px 0; text-rendering:optimizeLegibility }
h3 { font-size:2em; color:#000; margin:0 0 12px 0; text-rendering:optimizeLegibility }
h4 { font-size:1.4em; color:#000; margin:0 0 12px 0; text-rendering:optimizeLegibility }
h5 { font-size:1.2em; color:#000; margin:0 0 12px 0; text-rendering:optimizeLegibility }
h6 { font-size:1.1em; color:#000; margin:0 0 12px 0; text-rendering:optimizeLegibility }
h1, h2, h3, h4, h5, h6 { font-family:TitilliumText22LBold, Arial, Helvetica, sans-serif; font-weight:normal }

body#sub div#primary-content header h1 { font-family:TitilliumText22LXBold, Arial, Helvetica, sans-serif; text-transform:uppercase; margin-bottom:20px }

/* 2.4 - text */
p { font-size:1.3em; margin:0 0 1.4em 0; line-height:1.3em; color:#707070 }
strong { font-family:TitilliumText22LBold, Arial, Helvetica, sans-serif; font-weight:normal }
 
/* 2.5 - links */
a { color:#ff2500; text-decoration:underline; -moz-transition:color .4s linear; -0-transition:color .4s linear; -webkit-transition:color .4s linear; transition:color .4s linear }
a:hover { color:#000; text-decoration:none }
a:visited {  }
a:active {  }

/* 2.6 - misc */
ul { margin:0 0 12px 0; font-size:1.1em }
ol { margin:0 0 12px 0; font-size:1.1em }
dl { margin:0 0 12px 0; font-size:1.1em }
hr { display:block; color:#171717; background-color:#171717; width:100%; height:1px; border:none; clear:both }
address { font-size:1.1em; color:#666; font-style:normal; line-height:1.4em }


/* -----------------------------------------------
3. LAYOUT
----------------------------------------------- */

/* 3.1 - container */
div#container { width:100%; background:#fff url("../images/backgrounds/main.jpg") top center no-repeat  }

/* 3.2 - header */
header { width:195px; float:left; background:url("../images/backgrounds/header.png") top left no-repeat }
div#branding { text-align:center; padding-top:27px }
div#contact-details { margin:60px 20px 30px 15px }

section header { background:none; margin:0; border:0; width:auto; height:auto; float:none }

/* 3.3 - content */
div#content { width:775px; float:right; background:#fff }

/* 3.4 - primary content */
div#primary-content {  }

/* 3.5 - secondary content */
div#secondary-content { padding:0 20px }

/* 3.6 - tertiary content */
div#tertiary-content {  }

/* 3.7 - footer */
footer { background:url("../images/backgrounds/footer.png") top center no-repeat; margin-top:50px }
footer div.wrapper { padding:40px 8px }

section footer { background:none; padding:0 }

/* 3.8 - wrapper */
div.wrapper { width:970px; margin:0 auto; text-align:left }

/* -----------------------------------------------
4. GLOBAL ELEMENTS / CONTROLS
----------------------------------------------- */

/* 4.1 - accessibility */
ul#skiplinks { display:none }
ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } 
ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto }

/* 4.2 - site navigation */
/* 4.2.1 - primary navigation */
nav#primary-navigation { padding-top:38px }
nav#primary-navigation ul { list-style:none; margin:0 20px 0 15px }
nav#primary-navigation ul li { border-bottom:1px solid #222; padding:5px }
nav#primary-navigation ul li:last-child { border-bottom:0 }
nav#primary-navigation ul li a { color:#fff; text-decoration:none; font-size:1.2em }
nav#primary-navigation ul li a:hover { color:#ff2500 }

/* 4.2.2 - secondary navigation */

/* 4.2.3 - tertiary navigation */

/* 4.2.4 - pagination */
div.pagination { clear:left; float:left; padding:20px 0 0 0; position:relative; left:50%; text-align:center }
div.pagination ol { list-style:none; float:right }
div.pagination li { float:left; color:#b8b8b8; padding:0 10px; border-left:1px solid #b8b8b8; font-size:1.2em; position:relative; right:50% }
div.pagination li.on { color:#000 }
div.pagination li.title { color:#000; border-left:none }
div.pagination li.previous { background:url("../images/buttons/pagination/previous.gif") left no-repeat; padding:0 10px 0 20px; border-left:none }
div.pagination li.next { background:url("../images/buttons/pagination/next.gif") right no-repeat; padding:0 20px 0 10px }

/* 4.2.5 - footer links */
p#site-credit a {text-decoration:none;}
p#site-credit a:hover {color:#707070;}
p#site-credit span { background:url("../images/global/jg1.png") no-repeat 0 0; text-indent:-3000px; width:23px; height:23px; display:inline-block; position:relative; top:-4px }
/* 4.3 - buttons */

/* 4.4 - lists */
ul.generic-list { list-style:none; padding:0 8px; margin-bottom:8px }
ul.generic-list li { background:url("../images/global/bullet.png") no-repeat 0 5px; font-size:1.1em; padding:0 0 8px 14px; line-height:1.3em }
ul.generic-list li ul { list-style:none }
ul.generic-list li ul li { font-size:0.8em }

ol.generic-list { padding:0 16px }
ol.generic-list li { font-size:1.4em; padding-bottom:12px; line-height:1.3em; color:#707070 }
ol.generic-list li ol { margin:12px 16px 0 16px }
ol.generic-list li ol li { font-size:0.8em }

/* 4.5 - forms */
/* 4.5.1 - generic form styling */
div.generic-form form fieldset { border:none; border-bottom:1px solid #e0e0e0; padding-bottom:20px; margin-bottom:20px }
div.generic-form form fieldset:last-child { border-bottom:none }
div.generic-form form label { color:#515151; float:left; width:220px; text-align:right; margin:12px 15px 0 0; font-size:1.4em }
div.generic-form form input.text { -moz-transition:all .20s .1s linear; -0-transition:all .20s .1s linear; -webkit-transition:all .20s .1s linear; transition:all .20s .1s linear; width:340px; border:1px solid #f2f8fd; outline:none; padding:9px 10px 10px 10px; margin:0; background:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; -moz-box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; color:#666; font-size:1.4em }
div.generic-form form textarea { -moz-transition:all .20s .1s linear; -0-transition:all .20s .1s linear; -webkit-transition:all .20s .1s linear; transition:all .20s .1s linear; width:340px; height:140px; border:1px solid #f2f8fd; outline:none; padding:11px 10px 10px 10px; margin:0; background:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; -moz-box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; color:#666; font-size:1.4em }
div.generic-form form select { -moz-transition:all .20s .1s linear; -0-transition:all .20s .1s linear; -webkit-transition:all .20s .1s linear; transition:all .20s .1s linear; width:340px; border:1px solid #f2f8fd; outline:none; padding:10px; margin:0; background:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; -moz-box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; box-shadow:0 1px 1px rgba(0,0,0,0.30) inset; color:#666; font-size:1.4em }
div.generic-form form input.text:hover, div.generic-form form textarea:hover, div.generic-form form select:hover { border-color:#dcdcdc!important; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15) inset; -moz-box-shadow:0 1px 1px rgba(0,0,0,0.15) inset; box-shadow:0 1px 1px rgba(0,0,0,0.15) inset }
div.generic-form form input.text:focus, div.generic-form form textarea:focus, div.generic-form form select:focus { border-color:#ff2500!important; -moz-box-shadow:0 0 5px 0 #ff2500; -webkit-box-shadow:0 0 5px 0 #ff2500; box-shadow:0 0 5px 0 #ff2500; outline:none }
div.generic-form form .button { padding:10px 14px; background:#000; border:0; color:#fff; font-size:1.4em }
div.generic-form form .button:hover { background:#ff2500 }
div.generic-form form ol { margin:0 15px; padding:0 }
div.generic-form form ol li { list-style:none; padding:3px 0; margin:3px 0; clear:both }
div.generic-form form ol li span.error { display:block; background:#feffe0 url("../images/icons/alert.png") no-repeat 8px 12px; padding:13px 0 12px 30px; border:1px solid #fdf1bf; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; color:#F6580A!important; width:250px; font-size:1.3em; margin:-3px 0 20px 210px; clear:both; float:left }
div.generic-form form ol li.chk label { margin:5px 0 10px 7px; float:none; padding:0; display:inline }
div.generic-form form ol li.chk input { margin:5px 0 10px 235px; border:0 none }
div.generic-form form ol li.radio { color:#515151; font-size:1.4em }
div.generic-form form ol li.radio label { font-size:1.0em }
div.generic-form form ol li.radio input { margin:12px 3px 5px 20px }
div.generic-form form ol li.radio input:first-child { margin-left:0!important }

/* 4.6 - tables */
section#banner-d h2:nth-of-type(1) { margin-top:0 }
section#banner-d h2 { margin-top:30px }
section#banner-d table {  }
section#banner-d table tr {  }
section#banner-d table th { width:50%; border-bottom:1px solid #eee; font-family:TitilliumText22LBold, Arial, Helvetica, sans-serif; font-weight:normal; font-size:1.3em; padding:6px 0 }
section#banner-d table td { width:50%; border-bottom:1px solid #eee; font-size:1.3em; padding:6px 0 }

/* 4.7 - icons */

/* -----------------------------------------------
5. TEMPLATE/PAGE SPECIFIC
----------------------------------------------- */

/* 5.1 - index page */
div#contact-details ul { list-style:none }
div#contact-details ul li { font-size:1.2em; padding-bottom:5px }

body#home div#secondary-content section { width:168px; margin-right:20px; float:left }
body#home div#secondary-content section:last-child { margin-right:0 }
body#home div#secondary-content section h1 { font-size:1.6em }

div#banner { background:url("../images/banners/home.jpg") top center no-repeat }
div#banner p { font-family:TitilliumText22LBold, Arial, Helvetica, sans-serif; font-size:2.2em; padding:425px 35px 30px 35px }

section#banner-a { background:url("../images/banners/sub-1.jpg") top center no-repeat; padding:250px 30px 20px 30px }
section#banner-b { background:url("../images/banners/sub-2.jpg") top center no-repeat; padding:250px 30px 20px 30px }
section#banner-c { background:url("../images/banners/sub-3.jpg") top center no-repeat; padding:250px 30px 20px 30px }
section#banner-d { background:url("../images/banners/sub-4.jpg") top center no-repeat; padding:250px 30px 20px 30px }
section#banner-e { background:url("../images/banners/sub-5.jpg") top center no-repeat; padding:250px 30px 20px 30px }
section#banner-f { background:url("../images/banners/sub-6.jpg") top center no-repeat; padding:250px 30px 20px 30px }

/* 5.1.1 - primary content */

/* 5.1.2 - secondary content */

/* 5.2 - generic sub page */

/* -----------------------------------------------
6. USEFUL CLASSES
----------------------------------------------- */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.clr { overflow:hidden; clear:both; height:1px; margin-top:-1px }
.la { text-align:left }
.ra { text-align:right }
.ca { text-align:center }
.fl { float:left }
.no-img { float:left; padding:0; background:none!important }
.fr { float:right }
.vt { vertical-align:top }
.vm { vertical-align:middle }
.vb { vertical-align:bottom }
.nb { border:0 none }