@media all
{

/* 
	        All styling except for the major containers can be found here         
	        Looking to change the main layout of the page? Check out layout.css    
 
			TABLE OF CONTENTS
			-----------------
			0. Base layout and major container properties			
			1. Base styling - Heads
			2. Base Styling - Content: paragraphs, lists, blockquotes, links and other common styles
			3. Base Styling - Forms
			4. Base Styling - Tables
			5. Special styling for each container, images, icons, etc.
			6. Tools - text-image replacement, clearing etc.
			-----------------
			
		NOTE:Quickly skip through the major sections by doing a find for ++ 
		      Inside a section you can skip around the major parts of it (if it exists) by doing a find for //
*/

/* ------- 0. Base layout and major container properties 
-------------------------------------- // */ 
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}
/* remember to define focus styles! */
:focus {outline:0}
body {line-height:1; color:black; background:white; font-size:66% /* Sets a font-size baseline that makes 1em = 10 pixels HANDY, now fone-size of 1em = a font size = 10px */}
ol, ul {list-style:none}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0}
caption, th, td {text-align:left; font-weight:normal}
blockquote:before, blockquote:after, q:before, q:after {content:""}
blockquote, q {quotes:"" ""}

/* Layout */
body {background:#19354f url('../img/bg_body.jpg') 0 0 repeat-x; color:#768b9b; font:normal normal 100 66%/1.6em 'Helvetica Neue',Arial,Helvetica,sans-serif}
#page_margins {margin:0 auto; width:1000px}
#page {background:transparent url('../img/bg_page.jpg') 0 0 no-repeat; padding:0 0 0 35px}
	#header {height:242px}
		#header_content {}
	#mainContainer {}
		#main {}
			#mainContent {background:transparent url('../img/bg_mainContent.jpg') 0 194px no-repeat; float:right; position:relative; width:686px;}
				#mainContent_content {padding:80px 45px 15px 40px; position:relative;}
					.karma {float:right; position:relative; width:206px;}
						.karma ul {list-style:none; margin:0; padding:0 0 0 14px;}
						.karma ul li {list-style:none; margin:0 0 20px; padding:64px 14px 18px; width:164px}
				.mainContent_bottomcap {background:transparent url('../img/bg_mainContent_bottomcap.gif') 0 0 no-repeat; display:block; height:18px; width:637px; position:absolute; bottom:-18px; left:19px;}
			#sideBar {margin-right:667px; width:295px;}
				#sideBar_content {}

	#footer {/*background:transparent url('../img/bg_footer.jpg') 279px 0 no-repeat;*/ width:100%;}
		#footer_content {padding:28px 45px 13px 310px}

/* ------- 1. Base styling - Heads
-------------------------------------- // */ 
	h1,h2,h3,h4,h5,h6 {color:#3885c4; font-family:Helvetica,'Helvetica Neue',Arial,sans-serif; line-height:1.3em; margin:1em 0 0.5em 0; padding:0}
	h1 {color:#5d6d7a; font-size:2.1em; font-weight:100; margin-top:0;}
	h1.names {font-size:2.8em;}
		h1 small {font-size:0.6em; line-height:0.6em;}
	h2 {font-size:1.9em; font-weight:100;}
	h3 {font-size:1.7em; font-weight:100;}
	p+h3 {margin-top:1.5em;}
	h4 {color:#84b1d0; font-size:1.3em; font-weight:100; margin-top:0;}
		h4 strong {color:#fff; font-size:1.2em; font-weight:100;}
	h1+h4 {margin-top:-0.8em;}


/* ------- 2. Base Styling - Content: paragraphs, lists, blockquotes, links and other common styles
-------------------------------------- // */ 
	p {font-size:1.3em; margin:0.9em 0 0.5em 0; padding:0; line-height:2.6em; color:#363b3f}
	blockquote {margin-left:10px}
		blockquote p {}
	strong {font-weight:900}
	b {font-weight:100}
	em, i {font-style:italic}
    code {font-family:"Courier New", Courier, monospace; font-size:1em; white-space:pre}
	big {font-size:1.2em}
	small {font-size:0.8em}
/* LISTS */
	ul {line-height:1.4em; list-style:disc; margin:1.6em 0 2em 0; padding:0}
	ol {font-size:1.0em; line-height:1.4em; margin:0 0 1.5em 0; padding:0}
		li {font-size:1.1em; margin:0 0 0.25em 33px; padding:0}
		ul li {}
		ol li {}
	dl {margin:0 0 1.5em 0; padding:0; line-height:1.4em}
	dl dt {font-weight:bold; margin:0.25em 0 0.25em 0; padding:0}
	dl dd {margin:0 0 0 30px; padding:0}
/* LINKS */	
	a {color:#3174ab}


/* ------- 3. Base Styling - Forms
-------------------------------------- // */ 
	form {margin:0; padding:0}
	form dfn {display:block; font-style:normal; position:absolute; left:0; top:1px; width:50px; text-align:right;}
	form div,
	form p {font-size:1em; margin:0 0 1em 0; padding:0; position:relative;}
	label {}
	fieldset {border:0; padding:0; margin:0 0 0.5em 0}
	fieldset legend {color:#666; font-size:1.1em; font-weight:bold; margin:0 0 0 0px; padding:0; background-color:white}
	* html fieldset legend {margin:0 0 10px -10px}
	fieldset ul {list-style:none; margin:0 0 1.5em 0; padding:0}
	fieldset ul li {list-style:none; margin:0 0 0.5em 0; padding:0}
	
	input, select, textarea {background:#e9ebee; border:1px solid #526980; font-size:1em; font-family:arial, helvetica, verdana, sans-serif; margin:0 0 0 55px; padding:2px; width:140px}
	input, select {vertical-align:middle;}
	input:focus, select:focus, textarea:focus {background:#fff;}

	textarea {width:200px; height:8em}
	input.check {border:none; width:auto; height:auto; margin:0}
	input.radio {border:none; width:auto; height:auto; margin:0}
	input.file {height:auto; width:250px}
	input.readonly {background-color:transparent; border:none}
	
	input.image {border:none; width:auto; height:auto}
    form div.submit {margin:1em 0}
    form div.submit input {height:2em; width:15em}
	label dfn {font-style:normal}


/* ------- 4. Base Styling - Tables
-------------------------------------- // */  
	table {
        font-size:1em; margin:0 0 1.5em 0; padding:0}
	table caption {font-weight:bold; margin:0 0 0 0; padding:0 0 1.5em 0}
	th {font-weight:bold; text-align:left}
	td {font-size:1em}
	

/* ------- 5. Special styling for each container, images, icons, etc.
-------------------------------------- // */  
/* reusable general clasees */
	.vcard {font-size:1.1em; line-height:1.4em; padding:1.5em 0 1em}
	div.hr {height:1px; margin:1.5em 10px; border-bottom:1px dotted black}
	.details {font-size:1em; line-height:2em;}
	.contesthead {}
	.contest {list-style:none; margin-bottom:0;}
		.contest li {background:transparent url('../img/bullet-starfish.gif') 0 0 no-repeat; padding:1px 0 3px 22px;}
	.contesttotal {font-size:1.2em; margin-top:0;}
	
	.button {
	   width:auto; overflow:auto; border:0; padding:4px 14px; color: #05111c; vertical-align: middle; cursor:pointer;
	   background: #536a80 url('../img/bg_button.gif') 0 0 repeat-x;
	   -webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	   border-radius: 8px;
	   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	   box-shadow: rgba(0,0,0,1) 0 1px 0;
	   text-shadow: rgba(0,0,0,.4) 0 1px 0;
	   text-decoration:none;
		}
	#mainContent .button {background-position:0 -8px; color:#fff;}
	.button:hover {background:#cbd3db; color:#000000;}
	#mainContent .button:hover {background:#536a80; color:#fff;}
	.button:active {background: #8c8c8c; }
	
	.back {background:transparent url('../img/icon_back.gif') 0 1px no-repeat; padding-left:16px;}

/* inner container styles */
	#header {position:relative;}
		#header_content {}
			#header h3 {margin:0; padding:0;}
				#header h3 a {display:block; height:136px; left:10px; position:absolute; text-indent:-999px; top:14px; width:234px;}
	#mainContainer {}
		#main {}
			#mainContent {}
				#mainContent_content {}
					.karma {}
						.karma ul {}
						.karma ul li {}
							.karma ul li ul {margin:0; padding:0;}
								.karma ul li ul li {font-size:1em; margin:0 0 0.25em; padding:0;}
						.karma em {font-size:1.2em; font-style:normal; font-weight:900;}
						.karma ul li.contact {background:transparent url('../img/bg_contact.jpg') 0 0 no-repeat; color:#fff; padding-bottom:31px;}
							.contact a {color:#fff; font-size:0.9em;}
						.karma ul li.pdf {background:transparent url('../img/bg_pdf.jpg') 0 0 no-repeat;}
							.pdf p {color:#566571; font-size:0.9em; line-height:1.3em;}
							.pdf p.pdf-link {margin-top:0.5em; text-align:center;}
					h2.connect {background:transparent url('../img/head_connect.gif') 0 0 no-repeat; height:41px; margin:1.5em 0 1em; text-indent:-999em;}
					ul.social-links {list-style:none; margin:0; text-align:center;}
						ul.social-links li {display:inline; list-style:none; margin:0 10px 0 0;}
						
								
			#sideBar {}
				#sideBar_content {}
					ul.promos {list-style:none; margin:0;}
						ul.promos li {margin:0 0 12px;}
							ul.promos li a {}
						ul.promos li.kingfisher {}
							ul.promos li.kingfisher a {background:transparent 0 0 url('../img/bg_kingfisher-done.jpg') no-repeat; display:block; height:265px; text-indent:-999em; width:295px;}
						ul.promos li.cren {}
							ul.promos li.cren a {background:transparent 0 0 url('../img/bg_cren.gif') no-repeat; color:#fff; display:block; font-size:1.2em; line-height:1.8em; padding:18px 22px 115px 22px; text-decoration:none; width:220px;}
						ul.promos li.newsletter {}
								ul.promos li.newsletter form {background:transparent url('../img/bg_newsletter.gif') 0 0 no-repeat; height:128px; padding:72px 22px 0; width:220px;}
									ul.promos li.newsletter fieldset {}
										ul.promos li.newsletter p {margin:0 0 0.25em;}
							
	#footer {}
		#footer_content {}
			#footer h4 {text-align:right;}
				#footer h4 strong{display:block;}
				#footer h4 a {color:#fff;}
		
		
/* ------- 6. Tools - text-image replacement, clearing etc.
-------------------------------------- // */ 

/* clearing */
	.stretch,
	.clear {clear:both; height:1px; margin:0; padding:0; font-size:15px; line-height:1px}
		.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden}
	
	* html>body .clearfix {display:inline-block; width:100%}
	* html .clearfix {/* Hides from IE-mac \*/height:1%;/* End hide from IE-mac */}

/* replace */
	.replace {display:block; background-repeat:no-repeat; background-position:left top; background-color:transparent; }
	/* tidy these up */
		.replace * {text-indent:-10000px; display:block; background-repeat:no-repeat; background-position:left top; background-color:transparent;	}
		.replace a {text-indent:0}
		.replace a span {text-indent:-10000px}

/* accessibility */
     span.accesskey {text-decoration:none}
     .accessibility {position:absolute; top:-999em; left:-999em}
	 hr {display:none}
	 #header img,
	 .karma h3 {position:absolute; top:-999em; left:-999em}
/* end accessibility */