/**********************************************************************************************
	Stylesheet
	Title	: Kesko
***********************************************************************************************
		
	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
	
	2. LAYOUT
	
	3. TYPOGRAPHY
	
***********************************************************************************************/


/* 	1. BASE
===============================================================================================*/	


/* 	1.1 Reset
-----------------------------------------------------------------------------------------------*/	

	* {margin:0;padding:0;} 


	html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, h1 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-align: left; }
	q { quotes: none; }
	q:before, q:after { content: ""; content: none; }
	a, ins, del { text-decoration: none; }
	table { border-collapse: collapse; border-spacing: 0; }
	th, td { vertical-align: top; }
	th { text-align: left; }


/* 	1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/	

	ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }
	
/* 	1.3 Clearfix
-----------------------------------------------------------------------------------------------*/

	.clearfix:after,
	.upcoming-events .title:after,
	.upcoming-events ul li:after,
	.title-page:after,
	.sidebar-nav li:after,
	.content .article li:after,
	.content .view-events-by li:after,
	.content .list-events li:after,
	.primary .title-events:after,
	.form:after,
	.form li:after,
	.footer-inner:after,
	.features ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
	.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
	.clearfix {display: inline-block;}
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%;}
	.clearfix {display: block; clear: both; }
	/* End hide from IE-mac */
	
/* 	1.4 Default Styles
-----------------------------------------------------------------------------------------------*/	

	body { font: 62.5%/1.3 Arial, Helvetica, sans-serif; text-align: center; color: #333; background: #3c7fb6; }
	hr { display: none; }
	strong { font-weight: bold; }
	em { font-style: italic; }
	del { text-decoration: line-through; }
	th { font-weight: normal; }
	address, cite, dfn { font-style: normal; }
	li { list-style: none; }
	abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
	input, textarea, select { font-family: Arial, Helvetica, sans-serif; }
	img { border: 0; }
	
	.fl { float: left; }
	.fr { float: right; }
	
	a { color: #3c7fb6; }
	
	
/* 	2. LAYOUT
===============================================================================================*/		
	
	html, body, #wrap { height: 100%;}

	body > #wrap { height: auto; min-height: 100%;}
	
	#wrap { background: transparent url(../img/bg_wrap.png) top left repeat-y; width: 900px; margin: 0 auto;}
	
	#main { width: 800px; background: #ffffff; margin: 20px auto 0 auto; padding-bottom: 30px;  }  /* must be same height as the footer */
	
		.home-left { width: 400px; }
		.home-right { width: 370px; text-align: center; }
	
	#header, #nav, #imgpanel { width: 850px; margin: 0 auto; }
	
	#header { height: 100px; }
	
		#logo { margin: 15px 0 0 15px; }
		#logo h1 { background: #fff url(../img/logo.png) top left no-repeat; text-indent: -9999px; }
		#logo h1 a { display: block; width: 275px; height: 75px; }
	
		#topnav { width: 240px; height: 25px; margin: 75px 15px 0 0; }
		#topnav ul { list-style-type: none;  }
		#topnav li { display: inline; font-size: 1.1em; font-weight: bold; margin-right: 10px; padding-top: 5px; }
		#topnav li a { padding-top: 10px; }
		#topnav li a span { margin-left: 27px;}
		
			#topnav li.home { background: #ffffff url(../img/topnav_home.png) top left no-repeat;  }
			#topnav li.suppliers { background: #ffffff url(../img/topnav_suppliers.png) top left no-repeat;  }
			#topnav li.contact { background: #ffffff url(../img/topnav_contact.png) top left no-repeat;  }
	
	#nav { height: 30px; background: #3070ad url(../img/bg_mainnav.png) top left repeat-x;  }
	
		#nav ul { list-style-type: none; padding-top: 5px; text-align: center;}
		#nav li { display: inline; font-size: 1.5em;  margin-right: 60px; }
		#nav li.last { margin-right: 0px; }
		#nav li a { color: #ffffff; }
	
	#imgpanel { height: 150px;  }
	
	#suppliers img { margin: 20px; }
	
	#footer {position: relative;
		margin: -30px /* negative value of footer height */ auto 0 auto;
		height: 30px;
		clear:both;
		width: 850px; 
		background: #666666; }
	
	#footer p { text-align: left; color: #eeeeee; padding: 10px 0 0 10px;} 

/* 	3. TYPOGRAPHY
===============================================================================================*/		
	
	#main h2 { color: #3070ad; font-size: 2em;  margin-bottom: 20px;   }
	#main h2.bigred { color: #cc0000; }
	
	#main p { margin: 0 10px 20px 0; font-size: 1.3em; }
	#main p.big { margin: 0 10px 0 0; font-size: 1.8em; font-weight: normal; }
	#main p.bigred { margin: 0 10px 15px 0; font-size: 1.8em; font-weight: normal; color: #cc0000; }
	
	img.mid { margin: 0 auto; width: 800px;}