@charset "utf-8";
/*
	SHEMC CSS-Layout
	Project: SHEMC Webvisitenkarte
	Date: 12.04.2010
	Author: Dennist Osterkamp
	Version: 1.0
*/

/**################################
 * #### Global 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,
	b, u, i, center,
	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-size: 100%;
		vertical-align: baseline; */
		background: transparent;
	}
	body { line-height: 1;  /* overflow-y: scroll; */ }
	ol, ul { list-style: none; }
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '.';
		content: none;
	}
	:focus { outline: 0; }

	p {	margin: 0 0 18px; }
	li, dd { margin-bottom: 6px; }
	p, li, dl, dd, dt {	line-height: 155%; }

	ins { text-decoration: none; }
	del { text-decoration: line-through; }
	table {	border-collapse: collapse; border-spacing: 0; }
	
/**################################
 * #### Main Element Styles #######
 * ################################
 */ 
	body {
		font: 11px/1.6em Verdana, Geneva, sans-serif;
		text-align: center;
		background: transparent url(img/bg-body.jpg) 50% 0 no-repeat;
		color: #000;
		text-align: center;
	}
	
	#pageWrapper { margin: 0 auto; text-align: left; width: 920px; padding: 0; background: transparent url(img/bg-page-wrapper.jpg) scroll 100% 0 no-repeat; }
	#header { position: relative; padding: 30px; }	
	
	#leftBar { float: left; width: 475px; margin-bottom: 21px; }
	#rightBar { float: right; width: 415px; margin-right: 30px; padding-top: 215px; }
	
	#leftBar-YouTube { float: left; width: 533px; margin-left: 30px; }
	
/**#########################
 * #### Typography #########
 * #########################
*/
	a:link, a:visited { color: #; }
	a:hover, a:focus, a:active { color: #; }

	h1, h2, h3, h4, h5, h6 {
		line-height: 1.5em;
	}
	
	h2 { }
	h3 { }
	h4 { }
	h5 { }
	h5 { }

	small { font-size: 81.3%; }
	
/**#########################
 * #### HEADER #############
 * #########################
*/
	h1 { display: block; float: left; width: 502px; height: 117px; margin: 0; padding: 0; }
	h1 a { 
		display: block; 
		width: 502px; 
		height: 117px; 
		background: transparent url(img/shemc-logo-web.png) scroll 0 0 no-repeat; 
		overflow: hidden; 
	}
	h1 a span { display: block; text-indent: -999em; }

/**#########################
 * #### CONTENT  ###########
 * #########################
*/
	#leftBar .cover-left, #leftBar .cover-text, #leftBar .cover-amazon { display: block; }
	#leftBar .cover-left span, #leftBar .cover-text span, #leftBar .cover-amazon span { display: block; text-indent: -999em; }
	
	#leftBar .cover-left 	{ background: transparent url(img/bg-cover-left.jpg) scroll 50% 0 no-repeat; height: 451px; }
	#leftBar .cover-text 	{ background: transparent url(img/bg-info-cover-bot.jpg) scroll 50% 0 no-repeat; height: 121px; }
	#leftBar .cover-amazon 	{ background: transparent url(img/bg-amazon-link.jpg) scroll 50% 0 no-repeat; height: 60px; }

	#rightBar .amazon-player { margin: 0 auto; width: 336px; }

	.youtube-holder { background: url(img/youtube-bg.png) 0 0 no-repeat; padding: 7px 7px 8px; }
	.twitter-holder { float: right; margin-right: 30px; }
	
	#newsletter { padding-top: 96px; width: 868px; height: 133px; background: url(img/bg-newsletter.jpg) 0 0 no-repeat; margin: 21px 30px; }
	#newsletter form table { margin: 0 0 0 21px; }
	#newsletter form table td { padding: 5px 8px 5px 0; color: #fff; font-size: 12px; text-align:right }
	#newsletter form table td input { width: 180px; }
	#newsletter form table td select { width: 186px }
	#newsletter form table td .button { overflow: visible; padding: 0; margin: 0; line-height: 1; font-size: 12px; width: auto; border: 0 none; background: none; }
	#newsletter form table td .button { cursor: pointer; font-size: 13px; font-weight: bold; color: #fff; background: #641f23; padding: 5px 8px; border: 1px solid #521417; }
	
	
	
	#social 	{ float: right; margin-right: 8px; }
	#social ul 	{ clear: left; margin: 0 13px; }
	#social li 	{ float: left; margin-right: 8px; }
	#social a 	{ background: transparent url(img/bg-social-icons.png) 0 0 no-repeat; width: 46px; height: 46px; display: block; }
	#social a span { display: block; text-indent: -999em; }
	#social a.facebook 		 { background-position: 0 0; }
	#social a.facebook:hover { background-position: 0 -60px; }
	#social a.myspace	 	 { background-position: -57px 0; }
	#social a.myspace:hover  { background-position: -57px -60px; }
	#social a.twitter	 	 { background-position: -114px 0; }
	#social a.twitter:hover  { background-position: -114px -60px; }
	#social a.youtube	 	 { background-position: -171px 0; }
	#social a.youtube:hover  { background-position: -171px -60px; }

	#imprint { float: left; margin-left: 38px; font-size: 12px; color: #d3d3d3; }
	#imprint a { color: #fff; text-decoration: underline; }

/**#########################
 * #### HTML Replacement ###
 * #########################
*/
	.align-right 	{ text-align:right}
	.align-left 	{ text-align:left}	
	.center			{ text-align:center}
	
	.float-left  {float:left}
	.float-right {float:right}	

	.marg_auto {margin-left:auto;margin-right:auto}

	strong {font-weight:700}
	em, i  {font-style:italic}
	
	.uppercase { text-transform: uppercase; }

	big 	{ font-size:1.25em}
	.lhs {line-height:1em!important}
	.lhm {line-height:1.5em!important}
	.xbig	{ font-size:1.40em}
	big.first {font-size:2em;letter-spacing:1px }
	
	small, .fsmall {font-size:85%}
	.fxsmall {font-size:82%}
	.fxxsmall {font-size:72%}
	
	/*** Defining the main colors	***/
	.black 	{color:#333}
	.red	{color:#990000}
	.grey, .grey a {color: #959595; }
	.xgrey	{color:#999}
	.orange {color:#cc7722}
	.yellow {color:#ffdd11}
	.blue	{color:#336699}
	.green	{color:#608800}
	.purple, a.purple {color:#e2007a!important}
	
	.odd, .odd td,  .odd_column {background-color:#ffefef}
	.even, .even td, .even_column {background-color:#fff}	

	.hidden {display:none}
	.block {display:block}
	
	a img {border:0 none}
	
	.framed {background:white;padding:3px;border:1px solid #ccc}

	/*** Hiding skiplinks for CSS-View ***/
	#quickskip li {position:absolute;	visibility:hidden;	}		

	.rel {position:relative;z-index:2}
	
	.w_perc_90 {width:88%}
	.w_perc_85 {width:83%}
	.w_perc_80 {width:78%}
	.w_perc_75 {width:74%}
	.w_perc_70 {width:68%}
	.w_perc_65 {width:64%}
	.w_perc_60 {width:58%}
	.w_perc_55 {width:53%}
	.w_perc_50 {width:48%}
	.w_perc_45 {width:44%}
	.w_perc_40 {width:38%}
	.w_perc_35 {width:33%}
	.w_perc_33 {width:30%}
	.w_perc_30 {width:28%}
	.w_perc_25 {width:24%}
	.w_perc_20 {width:18%}
	.w_perc_15 {width:13%}
	.w_perc_10 {width:8%}
	.w_perc_5  {width:3%}		

	/* listen */
	.dotted  li, .squared li, .ordered li, .decimal li  {
		margin-left: 21px;
		padding:1px 0
	}
	.ordered li, .decimal li {
		list-style-type: decimal; 
		padding: 2px 0 5px;
		margin-bottom: 5px; 
		border-bottom: 1px dotted #ddcc44;
	}
	.dotted  li {list-style-type:disc}
	.squared li {list-style-type:square}
	
/**################################
 * #### Clearfix Hack #############
 * ################################
 */	
 	.clearfix:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		font-size:0.1em;
		visibility:hidden;
	}	

	.clearfix {display:inline-block}  /* ... Clearing f?r IE5/Mac und IE7 */

	* html .clearfix {height:1%}   /* ... f?r IE5 + IE6/Win | IE-Clearing aktivieren */
	.clearfix {display:block}      /* ... f?r IE5,IE6,IE7 | Mac-Einstellungen f?r IE/Win zur?cksetzen */