/* @override http://test.nicktoye.co.uk/jpf/workspace/css/default.css */

/* 
	Title:     Default Styles
	Project:   JPF Systems
	Author:    nick@nicktoye.co.uk
	Created:   12th May 2009
*/

/* =html */

html {
	margin-bottom: 1px !important;
	height: 100% !important;
}

/* =body */

body {
	background: #1f1f1f;
}

#content ul li {
	padding-left: 10px;
	background: url(../img/bullet.gif) no-repeat 0 5px;
}

ul.generic li {
	background: none !important;
	padding: 0 !important;
}

/* =container */



#container {
	background: #fff;
	width: 980px;
}

/* =branding */

#branding {
	height: 100px;
	position: relative;
	margin: 0 20px;
}

#branding h1 {
	text-indent: -3000px;
	width: 180px;
	height: 60px;
	margin: 0;
	position: relative;
	top: 20px;
	background: url(../img/logo.png) no-repeat;
}

p#tag {
	position: absolute;
	top: 20px;
	right: 0;
	font-size: 1.3em !important;
	margin: 0;
	text-align: right;
}

p#tag em {
	display: block;
}

p#tag em strong {
	color: #DE2828;
}

p#tag span {
	font-size: 130%;
	font-weight: bold;
	bottom: -1px;
	color: #DE2828;
	position: relative;
}


/* =navigation */

ul#navigation {
	height: 28px;
	margin: 0 20px 0 20px;
	background: url(../img/nav.png) repeat-x;
	margin-bottom: 0;
	position: relative;
	z-index: 10;
}

ul#navigation li {
	float: left;
	list-style: none;
}

ul#navigation li.grid_1 {
	text-align: center;
	margin: 0;
	width: 100px !important;
}



ul#navigation li.grid_3 {
	text-align: center;
	margin: 0;
	width: 170px !important;
}

ul#navigation li.omega, ul#navigation li.omega a {
	width: 170px !important;
	margin-left: 0;
}

ul#navigation li#adc a {
	background: url(../img/nav-auto.png) repeat-x 0px 0;
	height: 25px;
	display: block;
	line-height: 25px;
	text-align: center;
}

ul#navigation li.grid_1 a {
	float: left;
	background: url(../img/nav-divider.png) no-repeat right 1px;
	height: 25px;
	line-height: 26px;
	/line-height: 25px;
	width: 100px;
}

ul#navigation li.grid_3 a {
	float: left;
	background: url(../img/nav-divider.png) no-repeat right 3px;
	height: 25px;
	line-height: 25px;
	width: 170px;
}
	
ul#navigation li a:hover {
	background: url(../img/nav-hover.png) repeat-x 0 -28px;
}

ul#navigation li#adc a:hover, ul#navigation li#alu a:hover {
	background-position: 0 -28px;
}

ul#navigation li a.active {
	background: url(../img/nav-hover.png) repeat-x 0 0px;
}

/* =breadcrumbs */
#content h2 {
	clear: both;
}

#breadcrumbs {
	border: 1px solid #dedede;
	height: 2.3em;
	font:85%/165% "Lucida Grande", Lucida, Verdana, sans-serif;
	float: left;
	padding-right: 10px;
}

#breadcrumbs li {
	float: left;
	line-height: 2.3em;
	padding-left: .7em !important;
	color: #777;
	font-weight: bold;
	background: none !important;
}

#breadcrumbs li a {
	display: block;
	padding: 0 15px 0 0;
	background: #F8F8F8 url(../img/crumb.gif) no-repeat right center;
	font-weight: normal;
}

#breadcrumbs li a:link, #breadcrumbs li a:visited {
	text-decoration: none;
	color: #777;
}

#breadcrumbs li a:hover, #breadcrumbs li a:focus {
	color: #dd2c0d;
}


/* =slideshow */



#slideshow {
	position: relative;
	height: 295px;
	margin: -5px 20px 0 20px;
	z-index: 5;
}

#slideshow ul {
	margin: 0;
	list-style: none;
}

#slideshow ul li {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	opacity: 0.0;
	margin: 0;
}

#slideshow ul li.active {
	z-index: 10;
	opacity: 1.0;
}

#slideshow ul li.last-active  {
	z-index: 9;
}

#slideshow ul li img {
	width: 938px;
	height: 295px;
	display: block;
	border: 1px solid #3d3d3d;
	border-top: 0;
}

/* =main */

body.home #main, body.about-us #main, body.accreditations #main, body.products #main.col2, body.materials #main.col2, body.sites #main.col2, body.contact-us #main, body.members #main {
	background: url(../img/faux.png) repeat-y;
	margin: 20px 20px 30px 20px;
}

body.products #main, body.sites #main, body.materials #main, body.search #main, body.legislation-and-technical #main {
	background: 0;
	margin: 20px 20px 30px 20px;
}




/* =content */

#content {
	
	margin: 0px;
}

#content .gutter {
	padding: 0 20px 0 0;
}

/* =content/img-styles */

#content img {
	border: 1px solid #DFDFDF;
	padding: 1px;
}




#content img.full {
	width: 100%;
	margin: 0 0 15px 0;
}

#content img.left {
	float: left;
	margin: 0 15px 15px 0;
}

#content img.right {
	float: right;
	margin: 0 0 15px 15px;
}

#content h2 em {
	color: #3d3d3d;
	font-size: 65%;
	font-weight: normal;
}

#content.grid_12 {
	background:none;
}

a.switcher {
	background: url(../img/switcher-icon.gif) no-repeat right center;
	padding: 3px 20px 3px 0;
}

ul#products {
	padding-bottom: 25px;
	border-bottom: 1px solid #DFDFDF;
	margin: 0 0 15px 0;
}

ul#products li {
	display: inline;
	background: #ffd372;
	text-align: center;
	font-weight: bold;
	color: #3d3d3d;
	font-size: 1.2em;
	padding: 0;
}

ul#products li a {
	display: block;
	padding: 10px 0;
}



ul#products li img {
	display: block;
	margin: 0 auto 10px auto;
	width: 126px;
	height: 105px;
	opacity: .7;
	border: 1px solid #ffd372;
	padding: 0;
}

ul#products li:hover img {
	opacity: 1;
}

form#searchForm input {
	width:50%;
	font-size: 1.0em;
	padding: 3px 0;
	color: #999;
	text-indent: 5px;
	border: 1px solid #C6C6C6;
}

form#searchForm input#searchBtn {
	margin: 15px 0;
	width: 115px;
	height: 26px;
	background: url(../img/search-btn.png) no-repeat;
	border: 0;
	text-indent: -3000px;
	cursor: pointer;
	/display: block;
	/font-size: 0 !important;
	/line-height: 0 !important;
}

form#searchForm input#searchBtn:hover {
	background-position: 0 -26px;
}

ul#image-library {
	clear: both;
	margin: 10px 0;
	border: 1px solid #DCDCDC;
	border-left: 0;
	border-right: 0;
	padding: 10px 0;
}

ul#image-library h3 {
	margin-bottom: 5px !important;
}

ul#image-library li {
	display: inline;
	padding: 0;
	background: none;
}

ul#image-library li a {
	text-decoration: none;
}

ul#image-library li a:hover img {
	border: 1px solid #3d3d3d;
}

body.current-sites ul#image-library {
	width: 600px;
}

/* a.download {
	float: left;
	padding: 58px 0 0 0;
	background:  url(../img/document-icon48.png) no-repeat 5px 10px;
	text-align: center;
} */

a.download {
	float: left;
	padding: 32px 0 0 40px;
	background: url(../img/document-icon32.png) no-repeat 0 16px;
}

/* =main/legislation */

ul#legBoxes {
	padding-bottom: 25px;
	border-bottom: 1px solid #DFDFDF;
	margin: 0 0 15px 0;
}

ul#legBoxes li {
	display: inline;
	background: #ffd372;
	text-align: center;
	font-weight: bold;
	color: #3d3d3d;
	font-size: 1.1em !important;
	padding: 0;
}

ul#legBoxes li a {
	display: block;
	padding: 10px 0;
}



ul#legBoxes li img {
	display: block;
	margin: 0 auto 10px auto;
	width: 280px;
	opacity: .7;
	border: 1px solid #ffd372;
	padding: 0;
}

ul#legBoxes li:hover img {
	opacity: 1;
}

/* =main/current-sites */

ul#before-after {
	float: left;
}

ul#before-after li {
	text-align: center;
	font-style: italic;
	background: none !important;
	padding: 0 !important;
}

ul#before-after li img {
	width: 275px;
	height: 200px;
	display: block;
}



/* =main/affiliations */

img.affiliated-logo {
	float: right;
	margin: 0 0 15px 15px;
	max-width: 200px;
}


/* =main/members */

table#memberDocs {
	background: #FFD372;
	margin: 0;
	width: 100%;
	border-top: 1px solid #CCAC66;
	border-left: 1px solid #CCAC66;
}

table#memberDocs thead {
	background: #F7E1B0;
	text-align: left;
	text-indent: 0px;
}

table#memberDocs th {
	padding: 2px 0;
	border-bottom: 1px solid #CCAC66;
	border-right: 1px solid #CCAC66;
	margin: 0;
	text-indent: 10px;
}

table#memberDocs th.file {
	width: 550px;
}

table#memberDocs th.size {
	width: 80px;
}

table#memberDocs th.download {
	width: 80px;
}


table#memberDocs td {
	text-indent: 10px;
	border-bottom: 1px solid #CCAC66;
	border-right: 1px solid #CCAC66;
	line-height: 20px;
}


table#memberDocs td.download {
	text-align: center;
	text-indent: 0;
}

table#memberDocs td.download a {
	text-decoration: none;
}

table#memberDocs td.download a img {
	border: 0 !important;
	position: relative;
	top: 3px;
	padding: 0 !important;
}


/* =main/contact */

/* FORMS/CONTACT FORM */

form#contactForm {
	background: #ffd372;
	padding: 10px;
	width: 580px;
	margin-bottom: 15px;
}

form#contactForm label {
	font-style: italic;
	margin-bottom: 15px;
	width: 580px !important;
	float: left;
	font-weight: bold;
}

form#contactForm span {
	display: block;
	margin-bottom: 2px;
}

#main p.error {
	text-align: center;
	color: #D60000;
	font-weight: bold;
	background: #FFE3A6;
	padding: 3px 0;
	margin: 0 auto 15px;
	border: 1px solid #B98F33;
	border-left: 0;
	border-right: 0;
}
	
#main p.success {
	text-align: center;
	color: green;
	font-weight: bold;
	background: #FFE3A6;
	padding: 3px 0;
	margin: 15px auto 15px;
	border: 1px solid #B98F33;
	border-left: 0;
	border-right: 0;
}


form#contactForm input {
	width: 575px;
	border: 1px solid #C6C6C6;
	font-size: 1.0em;
	padding: 3px 0;
	color: #999;
	text-indent: 5px;
}

form#contactForm textarea {
	width: 575px;
	height: 80px;
	border: 1px solid #C6C6C6;
	font-size: 1.0em;
	padding: 3px 0;
	color: #999;
	text-indent: 5px;
}

form#contactForm input.button {
	margin: 0;
	width: 115px;
	height: 26px;
	background: url(../img/send-btn.png) no-repeat;
	border: 0;
	text-indent: -3000px;
	cursor: pointer;
	
	display: block;
	font-size: 0 !important;
	line-height: 0 !important;
}

form#contactForm input.button:hover {
	background-position: 0 -26px;
}

label.required em {
	font-size: 85%;
	font-weight: normal;
}

/* =sidebar */

#sidebar {
	margin: 0px 0 30px 20px;
}



/* =sidebar/mailchimp */

#mailchimp-form {
	background: #ffd372 url(../img/mailchimp-bg.png) no-repeat bottom;
	width: 300px;
	padding-bottom: 15px;
}

#mailchimp-form h3 {
	background: url(../img/mailchimp-h3.png) no-repeat top;
	text-indent: -3000px;
}

#mailchimp-form form {
	width: 260px;
	margin: 20px auto 0;
	text-align: center;
}

#mailchimp-form form fieldset {
	margin: 0;
}

#mailchimp-form form input {
	width: 254px;
	font-size: 1.0em;
	padding: 3px 0;
	color: #999;
	text-indent: 5px;
	border: 1px solid #C6C6C6;
}

#mailchimp-form form input#submit {
	margin: 15px 0;
	width: 115px;
	height: 26px;
	background: url(../img/subscribe-btn.png) no-repeat;
	border: 0;
	text-indent: -3000px;
	cursor: pointer;
	font-size: 0 !important;
	line-height: 0 !important;
}
	
#mailchimp-form form input#submit:hover {
	background-position: 0 -26px;
}
	
#mailchimp-form p.error {
	text-align: center;
	color: #D60000;
	font-weight: bold;
	background: #FFE3A6;
	width: 250px;
	padding: 3px 0;
	margin: 0 auto 15px;
	border: 1px solid #B98F33;
	border-left: 0;
	border-right: 0;
}
	
#mailchimp-form p.success {
	text-align: center;
	color: #3d3d3d;
	font-weight: bold;
	background: #FFE3A6;
	width: 250px;
	padding: 3px 0;
	margin: 15px auto 15px;
	border: 1px solid #B98F33;
	border-left: 0;
	border-right: 0;
}
	
	
/* =sidebar/feature */

#feature {
	margin-bottom: 15px;
	border-bottom: 1px solid #DFDFDF;
	padding-bottom: 15px;
}

#feature h3 {
	margin-bottom: 5px !important;
}

#feature img {
	width: 296px;
	height: 200px;
	border: 1px solid #DFDFDF;
	padding: 1px;
	margin-bottom: 5px;
}

#feature ul {
	position: relative;
	height: 200px;
	list-style: none;
}

#feature ul li {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	opacity: 0.0;
	margin: 0;
}

#feature ul li.active {
	z-index: 10;
	opacity: 1.0;
}

#feature ul li.last-active  {
	z-index: 9;
}

/* =sidebar/profiles */

#profiles {
	margin: 15px 0;
}

#profiles dl {
	float: left;
	border-bottom: 1px solid #DFDFDF;
	padding-bottom: 5px;
	margin-bottom: 15px;
	width: 300px;
}

#profiles dl dt {
	font-weight: bold;
	float: right;
	width: 225px;
}

#profiles dl dt em {
	font-weight: normal;
	font-size: 90%;
	margin: 0 0 0 5px;
	color: #D62119;
}

#profiles dl dd.bio p {
	margin: 0;
}

#profiles dl dd.img {
	float: left;
	margin: 0 10px 0 0;
}


#profiles dl dd.email a {
	font-size: 90%;
}

/* =sidebar/members-link */

div#members {
	
	background: #ffd372 url(../img/mailchimp-bg.png) no-repeat bottom;
	width: 300px;
	padding-bottom: 5px;
	margin-bottom: 15px;
}

div#members h3 {
	background: url(../img/members-h3.png) no-repeat top;
	text-indent: -3000px;
}

div#members form {
	width: 260px;
	margin: 20px auto;
}

div#members form label {
	font-style: italic;
	margin-bottom:  15px;
	float: left;
	width: 100%;
	font-weight: bold;
}

div#members form label input {
	display: block;
	width: 100%;
}

div#members form input#submit {
	margin: 25px auto 20px;
	width: 115px;
	height: 26px;
	background: url(../img/login-btn.png) no-repeat;
	border: 0;
	text-indent: -3000px;
	cursor: pointer;
	overflow: hidden;
	
	display: block;
	font-size: 0px !important;
	line-height: 0px !important;
}

div#members form input#submit:hover {
	background-position: 0 -26px;
}

div#members form p {
	margin: 0;
	font-size: .9em;
}

div#members form p.error {
	margin: 10px 0;
}

/* =sidebar/contact */

div.vcard {
	margin: 15px 0;
}

/* =footer */

#footer {
	border-top: 1px solid #b8b8b8;
	background: #d1d1d1;
	width: 980px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: .8em;
}
	
ul#sitemap {
	clear: both;
	width: 940px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.3em;
}

ul#sitemap li {
	list-style: none;
	display: inline;
	margin-right: 5px;
	padding-right: 5px;
	border-right: 1px solid #3d3d3d;
}

ul#sitemap li.last {
	border-right: 0;
}

ul#sitemap a {
	color: #3d3d3d;
	font-weight: bold;
}

ul#affiliation-footer {
	margin: 20px 0 20px 20px;
}

ul#affiliation-footer li {
	width: 140px;
	text-align: center;
}

ul#affiliation-footer img {
	height: 80px;
	margin: 0 auto;
	max-width: 140px;
	float: none;
	background: #fff;
	padding: 2px;
	border: 1px solid #b8b8b8;
}
	
#footer .vcard {
	width: 940px;
	margin: 10px auto;
	text-align: center;
}	

#footer .vcard li {
	display: inline;
	margin-right: 3px;
}

#footer .vcard li strong {
	display: block;
}

#footer .vcard ul {
	margin-bottom: 0;
}
	
#footer .vcard p {
	margin: 15px 0;
}