/*---------------------------------------------------------------------

SAFESITE CSS 

(c)2008-2009 | Dave Needham

Fileformat: 	RFC678 1974
		CSS 2.0: www.w3.org/TR/CSS2/

Colorscheme:
		Red:	#C62828;
		BG Lightgrey: #DDE2E8;
		BG Darkgrey: #B7BDC6;
		Darkgrey: #6E7077;
		nav-highlight: #D8E1E9;

---------------------------------------------------------------------*/

/* Structure --------------------------------------------------------*/

 .last {text-align:right;}

html, body {margin: 0; padding: 0; overflow:auto;} 


body {
	margin:0; 
	padding:0; 
	text-align:center;
	font-family: verdana, sans-serif;
	font-size: 0.75em;
	background-color: #DDE2E8;
	}

#page {
	margin: 10px auto 0 auto;
	width:972px; 
	text-align:left;
	text-align:left;
	overflow:hidden;
	}

#content {
	/* width is: 972px */
	background-image: url('images/page_bg.png');
	width:100%;
	padding:0 0 0 7px;
	float:left;
	display:inline;
	background-repeat: repeat-y;
	}

img {
	border:0;
	}

/* Head and Login ---------------------------------------------------*/

#head{
	background-image: url('images/page_top.png');
	padding:12px 0 0 0;
	margin:0px;
	height:62px;
	background-repeat:no-repeat;
	background-position: top left;
	width: 100%;
	clear:left;
	}

#head a {
	color:	#C62828;
	text-decoration:none;
	}

#head p {
	margin:0; padding:0;
	}

#toggle{
	float:right;
	width:8em;
	clear:both;
	}

#login-errors {
	width:200px; 
	float:right; 
	clear:none; 
	margin: -3px 0 0 0;
	padding:0;
	}

#login-errors p {
	color: #6E7077;
	margin:0; 
	padding:0;
	font-size:0.75em; 
	line-height:1.8em;
	}

#toggle a, #login  {
	text-align:right;
	clear:both;
	width: 2.75em;
	border:0;
	margin: 0px 35px 0 0;
	color:	#C62828;
	background-image: url('images/log-in.png') ; 
	background-repeat:no-repeat;
	background-position: left center;
	background-color:#fff;
	padding: 0 0 0 16px;
	height:18px;
	cursor:pointer;
	}

#toggle a:hover, #login-panel #login:hover {
	background-image: url('images/log-out.png') ; 
	}

#login-panel {
	display:none;
	float:right;
	width: 16em;
	margin: 0 26px 0 0;
	}

#login-panel label {
	font-size:0.75em; 
	width:6em; 
	display:block; 
	float:left;
	margin: 0 1em 1px 0;
	text-align: right;
	}

#login-panel input {
	font-size:0.75em; 
	width:12em; 
	border:1px solid #ccc;
	margin: 0 0 1px 0;
	float:left;
	}

#login-panel #login {
	line-height: 1.5em;
	height:1.5em;	
	margin: 0px 8px 0 0;
	font-size:1em !important;
	width:4em !important;
	float:right;
	clear:both;
	border:0px !important;
	text-align:right;	
	}

#logged-in {float:right; width: 30em;}

#logged-in a {
	float:right;
	margin: 0 0 7px 0;
	padding: 0 36px 0 16px;
	background-image: url('images/log-in.png'); 
	background-repeat: no-repeat;
	}
#logged in .profile {
	background-image:none;
	}


/* Navigation -------------------------------------------------------*/


#navigation {
	width:954px;
	background-image: url('images/nav_bg.png');
	background-repeat: repeat-x;
	height:50px;
	margin:0px 7px 0 0;
	border: 1px solid #6E7077;
	border-width: 1px 0 0 0;
	}

.skip {
	position: absolute;
	left: -999px;
	width: 990px;
	}

#nav {
	clear:both; 
	width:100%;
	}

/* all lists */


#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 50px;
	}

#nav a {
	display: block;
	text-align:center;
	line-height:33px;
	height: 36px;
	color: #6E7077;
	text-decoration: none;
	width:100%;
	}

#nav a:hover {
	background-color:#fff;
	color:#C62828;
	}

#nav li {
	float: left;
	width:20em;
	margin: 1px 0 0 0;
	border: 2px solid #fff;
	border-width: 0 3px 0 0;
	line-height: 28px;
	color: #6E7077;
	}

#nav li ul { /* second-level lists */
	
	width: 20em;
	left: -999em;
	background-color: #fff;	
	border:1px solid #DDE2E8;
	border-width: 1px;
	position: absolute;
	display:inline;
	margin:0;
	}

#admin #nav li {width:5em;} 

#admin #nav #testimonials {width:8em;}
#admin #nav #homepage {width:9em;}
#admin #nav #H_S {width:10em;}
#admin #nav li li {width: 20em;}

/* Heights */

#nav li ul li {
	padding:0;
	margin:0;
	height: 1.75em;
	line-height:1.75em;
	word-spacing:-1px;
	width: 100%;
	}

 #nav li ul li a, #nav li ul a:hover {
	text-align:left;
	padding: 0;
	margin:0;
	height: 1.75em;
	line-height:1.75em;
	word-spacing:-1px;
	text-indent: 1em;
	}

#nav li ul li {
	border: 1px solid #c1c4c6;
	border-width: 0 0 1px 0;
	}

#nav li ul a:hover {
	
	background-color:#d8e1e9;
	color: #000;
	}

 /* third-and-above-level lists */

#nav li ul ul {
	margin: -1.75em 0 0 20em;
	float:left; width:20em;
	display:inline !important;
	}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
	}

/* lists nested under hovered list items */

#nav li:hover ul, #nav li.sfhover ul { 
	left: auto;
	display:inline;
	}
	
#nav li li:hover ul, #nav li li.sfhover ul {
	left: auto !important;
	display:inline;
	}

/* top level widths */

#nav .nav-home{
	width:35px;
	}

#nav .about {
	width: 9.5em;
	}
#nav .products{
	width: 6em;
	}
#nav .surveying{
	width: 6.5em;
	}
#nav .supply_only{
	width: 13em;
	}

#nav .education{
	width: 6em;
	}

#nav .cpd {
width:5em;
}

#nav .video{
	width: 5em;
	}

#nav .news{
	width:4.5em;
	}

#nav .downloads{
	width:7em;
	}

#nav .links{
	width:4em;
	}

#nav .nav-home a {
	width: 35px;
	height: 0px;
	padding: 36px 0 0 0;
	overflow: hidden;
	background-image: url('images/nav_home.png');
	background-position: 0 0px;
	background-repeat:no-repeat;
	}
	
#nav .nav-home a:hover {
	background-image: url('images/nav_home.png');
	background-position:  1px -180px;
	background-repeat: no-repeat;
	}

#home #nav .nav-home a {padding-top: 50px;}

#nav .nav-more {	
	background-image: url('images/nav_arrow.png');
	background-position: 95% 50%;
	background-repeat: no-repeat;
	}

/* Breadcrumb -----------------------------------------------------*/

#breadcrumb {
	margin:0 0 10px 20px; 
	padding:0; 
	text-indent:0; 
	clear:both;
	width: 994px;
	display:inline;
	float:left;
	overflow:hidden;
	}

#breadcrumb li{
	background-image: url('images/breadcrumb_arrow.png');
	background-position: 0% 50%;
	background-repeat: no-repeat;
	float:left; 
	text-indent:0; 
	margin:0; 
	padding:0;
	list-style-type:none; 
	padding:0 1em 0 1em; 
	}

#breadcrumb .home {
	padding: 0;
	background-image:none;
	}

#breadcrumb a {
	text-decoration:none; 
	color:#6E7077;	
	background-image:none;
	margin:0; 
	padding:0;
	}

#breadcrumb a:hover {
	color: #C62828;
	}
#detail .third ul,
#cpd .third ul {
	list-style-type:none; 
	margin: 1em 0 0 0;
	padding:0;
	}

#detail .third ul li a,
#cpd .third ul li a  {
	line-height: 2em; 
	width: 100%; 
	display:block;
	color: #000;
	}

#detail .third ul li a:hover,
#detail .third ul li a:visited:hover,
#cpd .third ul li a:hover,
#cpd .third ul li a:visited:hover {
	text-decoration:none;
	background-color: #D8E1E9;
	}

#detail .third ul li,
#cpd .third ul li  {
	border: 1px solid #ccc; 
	border-width: 0 0 1px 0;
}

/* Body Layout ------------------------------------------------------
   
   thirds and sixths are 1px out on the right.
   otherwise the two-column would have to be out.
   
   these use "display:inline;" because otherwise IE6 does the bad
   double margins error

*/


.full , .half , .third , .two-thirds , .two-sixths , .sixth 
	{
	margin: 0 0 20px 20px;
	padding:0;
	float:left;
	display:inline;
	}

.full {
	width: 914px;
	}

.half {
	width:447px; 
	}
.third {
	width: 291px;
	}
.two-thirds {
	width:603px;
	}
 
.sixth {	
	width:136px;
	}

.two-sixths {	
	width:272px;
	}

.split {
	width: 953px;
	float:left;
	height:12px; 
	background-image: url('images/split.png');
	background-repeat: repeat-x;
 	}

/* Images Frames -----------------------------------------------------*/

#main_image { margin: 10px 0 20px 20px; width:914px; height: 160px;}

.image_inside_third {width:290px; height:54px;}

.two-thirds #main_image {width: 100%; margin: 10px 0 0 0; overflow:hidden;}

#photo_frame { margin: 20px 18px 0 0;}

#cad_frame { margin: 20px 0 0 0;}


/* Typography -------------------------------------------------------*/

h1, h2, h3 {
	line-height: 1em;
	margin: 1em 0 0 0;
	}

h1	{
	font-weight: bold; 
	font-size: 2.5em; 
	color: #C62828;
	}

.two-thirds h1 	{
	margin-top:0;
	}

h2	{
	font-size: 1.5em; 
	color: #6E7077;
	margin: 1em 0 1em 0;

	}
h3	{
	font-size: 1em; 
	color: #6E7077;
	}

h5 {
	font-size: 1.5em; 
	color: #6E7077;
	margin: 1em 0 1em 0;
	}

#content address {font-style:normal; padding: 0 0 1em 0;}

a {color:#C62828; text-decoration:none;}
a:hover {text-decoration:underline;}

dt{ 
	margin:0; 
	padding:0;
	margin:0 0 0 0;
	} 
dd {
	margin:0; 
	padding:0;
	margin:0 0 2em 0;
	}

dd a {
	color:#000;
	}

P, ul{
	line-height:1.5em; 
	margin: 1.5em 0 0 0;
	}
ul {padding:0;}

.two-thirds li,
.half li  {
	list-style-type:none;
	background-image: url('images/bullets/red-bullet.png');
	background-repeat:no-repeat;	
	background-position: left 5px;	
	padding: 0 0 0 20px;
	margin: 0.75em 0 0 0;
}

/* Pages ----------------------------------------------------------*/

#homepage .split {
margin: 0 0 15px 0;}

#newsletters .third h2 {margin:0;}

#services h2{height:2em;}

#gallery {border: 1px solid #6E7077; border-width: 0 0 1px 0; padding: 0 0 10px 0; display:block; float:left; width:100%; margin: 0 0 20px 0;}
#gallery img {width:77px; display:block; float:left; padding: 10px;}
#gallery a {display:block; float:left; width: 98px; border:1px solid #fff;}

#gallery a:hover {background-color:#D8E1E9; border-color:#6E7077;}
#products .installation {border: 1px solid #ccc; float:left; border-width: 0 0 1px 0; margin: 0 0 1.5em 0;}
#products .installation a {margin: 1em 0 1em 0}
#products .third h2  {margin-top:0;}

#training td, #training th 
	{
	line-height:2em;
	}

th, b {color:#6E7077;}

#training  table 
	{
	width: 95%; 
	border: #ccc 1px solid; 
	border-width: 0 0 2px 0;
	padding: 0 0 1em 0;
	}
.middle {
	text-align: center;
	}

#detail strong {width: 9em; display:block; float:left;}

#runcorn, #crawley {
	margin: 1em 0 1em 0;
	}
.jobs	{
	margin:1em 0 0 0;
	}

#installations .third {height:20em; margin-bottom: 30px;}

#installations .full a,
#installations .third a
#products_index .full a,
#products_index .third a,
.more
 {
	float:right; 
	background-image:url('images/more.png');
	background-repeat: no-repeat;
	padding: 0 22px 0 0;
	display:block;
	text-align:right;
	background-position: center right;
}

#installations .third h2 {display:block; height:2em;}

#installations .third P {display:block; height:4.5em; margin-bottom:1em; overflow:hidden;}

#installations .image {background-position:top right;}

#installations .third a, #newsletters .third a{
	background-image:url('images/more.png');
background-repeat: no-repeat;	
padding: 0 22px 0 0;
	display:block;
	text-align:right;
	background-position: center right;
	}

.autocad, .components {
	list-style-type:none; 
	margin:0 0 20px 0; 
	padding:0;
	vertical-align:middle;
border: 1px solid #ccc;
	border-width: 0 0 2px 0;
}

.autocad img {
	width: 44px;
 	height:44px; 
	vertical-align:middle;
	}

.autocad a,
#video-library .third ul a{
	display:block; 
	width:100%; 
	text-decoration:none !important;  
	border:1px solid #ccc; 
	border-width: 0 0 1px 0; 
	color: #000; 
	}

#video-library .third ul {
	list-style-type:none; 
	margin:0;
	padding:0;
	}

#products #content  ul a:hover
#video-library .third ul a:hover {
	background-color: #D8E1E9;
	}

#video-library .third  h2 {
margin:0 0 0 0;
line-height: 1.5em;
	}

/* Elements --------------------------------------------------------*/

.get_adobe h2{
	background-image: url('images/bullets/acrobat.gif');
	background-position: 0 50%;
	background-repeat: no-repeat;
	padding: 0 0 0 25px;
	margin: 12px 0 0.5em 0;
	}

.get_adobe p {
	padding: 0; margin:0;
	}

/* Forms   -----------------------------------------------------------

Forms are based on a 2 column split.

*/

form {margin:0; padding:0;}

#content label {
	text-align:left;
	width: 136px;
	float: left;
	padding: 0 12px 0 0;
	margin: 0 0 0.5em 0;
	}

#content input, #content textarea{
	border: 1px solid #B7BDC6;
	width: 295px;
	margin: 0 0 0.5em 0;
	padding: 0 0 0 0;
	}
#content .checkbox {
	width: 1em !important;
	height:1em;
	}

#content select {border:1px solid #B7BDC6;}

#content .error {
	color: #C62828; 
	font-weight:bold; 
	padding: 0 0 0 2em ; 
	line-height: 1.5em;
	background-image: url('images/warning.png');
	background-repeat:no-repeat;
	}

#content .submit {
	background-image: url('images/submit.png');
	background-color: #fff;
        height: 36px;
	padding: 36px 0 0 4px !important;
	border: none !important;
	width: 138px !important;
	float:right;
	cursor:pointer;
	background-repeat: no-repeat;
	overflow:hidden;
	}

#register #content .submit {
	background-position: -294px 0px;
	}

#confirm #content .submit {
	background-image: url('images/submit.png');
	background-position: -441px 0px;
	background-repeat: no-repeat;
	}

#contact #content select{
	width:  295px;
	}

#contact #content .submit {
	margin: 1em 0 0 0 !important;
	background-position: -147px 0px;
	}

#health_safety_footer .submit {
	margin: 1em 0 0 0 !important;
	background-position: -147px 0px;
	}

#quiz #content input {
	width: 20px;
	height: 1em;	
	margin: 0 0 2em 0;
	}

#quiz #content label {
	width: 400px;
	height:2em;
	margin: 0 0 1em 0;	
	}

#quiz #content .submit {
	margin: 1em 0 0 0 !important;
	background-position: -147px 0px;
	}
#quiz #content p {
	font-weight:bold;
	}

#certificate #content .submit {
	background-image: url('images/submit-certificate.png');
	}
#signup {margin: 1.5em 0 0 0; width:100%; clear:left;}
#signup .submit {	
	background-position: -147px 0px;
	}

#day, #month, #year  {width:2em !important; margin-right: 1em !important;}

#day  {width:3em !important; margin-right: 1em !important;}

#year {width:5em !important;}



/* Call to Actions --------------------------------------------------*/

#content .call, 
#content .question 
{
	width:100%; 
	float:left;
	clear:both;
	background-image:none !important;	
}

#content .call .half p, 
#content .question .half p
	{
	padding: 0 0 0 90px; 
	background-image: url('images/contact_exclaim.png');
	background-repeat:no-repeat;
	background-position: 15px center;
	}

#content .call h2, 
#content .question h2
	{
	padding: 0; 
	}

#content .question .two-sixths 
	{
margin-top: 3em;
	width: 400px; 
	}

#content .question .half p
	{
	background-image: url('images/contact_question.png') !important;
	}

#detail .question .half p,
#supply_only .question .half p
	{
	background-image: url('images/contact_download.png') !important;
	}

#product_action {
	background-image: url('images/contact_exclaim.png');
	background-repeat:no-repeat;
	padding: 0 0 0 60px;
	height: 4em;
	background-position: 0 center;	
	}

#product_action h2 {margin:0; padding:0;}

/* Flashbook */

#flashbook {
margin: 0 20px 0 20px; 
width:910px; 
border: 1px solid #6E7077; 
background-color:#DDE2E8;
}

/* Footer -----------------------------------------------------------*/

#footer {
	padding:24px 12px 12px 12px;
	background-image: url('images/page_bottom.png');
	background-repeat:no-repeat;
	background-position: top left;
	float:left;
	width:950px;
	}

#footer address a {
	float:right; 
	text-decoration:none; 
	color:#6E7077; 
	font-style: normal;
	}

#footer P {
	color: #545353;
	float:left;
	width:100%;
	clear:both;
	margin:0; 
	padding:0;
	}
	
#footer em {
	font-style:normal;
	text-transform:uppercase;
	}

/* SFIR -----------------------------------------------------------*/
	
/* These are standard sIFR styles : do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	}

.sIFR-replaced {
	visibility: visible !important;
	}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	height: 2.5em; 
	margin-left: -1px; 
	/* Pulls into visual line */
}

/* Memberships ----------------------------------------------------*/

.memberships dl {
	width:100%; 
	display:block; 
	float:left;
	}

.memberships dt {
	float:left;
	width:90px;
	margin:0 0 0 20px;
	}

.memberships img {
	width:90px;
	}

.memberships dd {
	float:left;  
	width:200px; 
	display:none;
	}

/* FAQ ----------------------------------------------------*/

#FAQ dt {
	font-weight:bold; 
	margin: 0 0 1em 0;
	}

#FAQ dd {
	font-weight:normal; 
	margin: 0 0 1em 0;
	}
	
/* PPE ----------------------------------------------------*/

#products #photo_frame {
	height:240px; 
	margin:0; 
	padding:0;
	}
#products .wrapper {
	float:left; 
	width:623px; 
	margin: 0 0 30px 0
	}
	
#products .wrapper h2 {margin:0;}

/* Downloads  ---------------------------------------------*/

#downloads #main a{
	padding: 0 0 0 50px;
	line-height: 60px;
	background-image: url('images/contact_download.png') !important;
	background-position:  left;
	background-repeat: no-repeat;
	display:block;
	border: 1px solid #ccc;
	border-width: 1px 0 1px 0;	
	margin: 1em 0 0 0;
	font-weight: bold;
	}
	
#downloads #main .half p {height:120px;}
#downloads #main .half h2 {height:2em;}

#order .submit {
	background-position: -147px 0px;
	}

#register .submit {
	background-position: -294px 0px;
	float:left;	
	margin: 20px 0 0 0 !important;
	}

.components {
	list-style-type:none;
	margin:0 0 2em 0;
	padding:0;
	}

.components li {
	border: solid #ccc 1px; 
	border-width: 0 0 1px 0;
	}

.components a {
	line-height:2em;
	color: #000;	
	width:100%;
	display:block;
	background:#fff;
	}

.components a:hover, 
.components a:visited:hover, 
.autocad a:hover {

	background-color:#DDE2E8 !important; 
	text-decoration:none;
	}
	
/* Calendar  ---------------------------------------------*/
.training-calendar-box {
	border: 2px solid #ccc; 
	border-width: 0 0 4px 0
	}

.training-calendar-box h2 {
	padding: 0 0 0 50px; 
	background-image: url('images/sidebar/calendar.png') !important; 
	background-repeat:no-repeat;
	}
.event {
	border: #B7BDC6 1px solid; 
	border-width: 1px 0 0 0;
	}
.event p {
	margin: 0 0 10px 0;
	}

/* Lightbox  ---------------------------------------------*/

#lightbox{ position: absolute;	left: 0; width: 100%; height:100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* Height Fixes ------------------------------------------*/

#safesite_map {width:293px; height:300px}
#runcorn, #crawley {height:73px;}

/* Social Media -----------------------------------------*/

.social_links {margin:-2px 0 0 340px; padding:0; position:absolute; display:block; width: 520px; clear:none;}
.social_links li {display:inline; margin: 0 0 0 2em;}
.social_links li a {color:#3b5998 !important; font-size:10px; padding: 0 0 0 15px; background-repeat:no-repeat;}

.social_links li a:hover {color:#6b89C8 !important;}

.social_links li a.facebook {background-image:url('images/logos/icon_facebook.gif');}
.social_links li a.twitter {background-image:url('images/logos/icon_twitter.gif');}
.social_links li a.google {background-image:url('images/logos/icon_google.gif');}