/* -----------------------------------------------------------------------------------------------------------------
	common
----------------------------------------------------------------------------------------------------------------- */	
	/* some nice to have resets */
	p,div, body, img { padding: 0; margin: 0; }
	a img{ border: none; }
	
	/* Clearing floats without extra markup - Based on How To Clear Floats Without Structural Markup by PiE
	   [http://www.positioniseverything.net/easyclearing.html] */
	.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
	/* Regular clearing -  apply to column that should drop below previous ones. */
	.clear { clear: both; }
	
/* -----------------------------------------------------------------------------------------------------------------
	site layout
----------------------------------------------------------------------------------------------------------------- */

body {
	background-color: black;
}

#wrap {
	width: 1179px;
	text-align: left;
	margin: 0 auto;
}

#header {
	width: 1179px;
	height: 243px;
	background: url(img/bg_header.jpg) center center no-repeat;
  float: left;
  clear: both;
}

#main {
  float: left;
  clear: both;
  background: url(img/bg_main.jpg) bottom no-repeat;
  width: 1179px;
}

#left {
	background: url(img/bg_left_top.jpg) top right no-repeat;
	height: 653px;
	width: 246px;
	float: left;
}

#center {
	width: 696px;
	float: left;
}

#navigation {
	height: 23px;
	width: 696px;
	background: url(img/bg_menu.jpg) no-repeat;
}

#contentwrap {
	float: left;
	clear: both;
  background: url(img/bg_main_top.jpg) top no-repeat;
}

#content {
	width: 490px;
	float: left;
  padding-bottom: 25px;
  min-height: 550px;
}

#sidebar {
	width: 206px;
	height: 492px;
	background: url(img/bg_sidebar.jpg) no-repeat;
	float: right;
  padding-top: 20px;
}

#footermenu {
  position: relative;
  left: 5px;
  top: -20px;
  font-size: 11px;
  color: #cc261d;
}

#footer {
	height: 88px;
	width: 696px;
	background: url(img/bg_bottom.jpg) no-repeat;
	float: left;
}

#right {
	background: url(img/bg_right_top.jpg) top left no-repeat;
	height: 653px;
	width: 237px;
	float: left;
}
	
/* -----------------------------------------------------------------------------------------------------------------
	predefined layout
----------------------------------------------------------------------------------------------------------------- */


	.colmask { position: relative; clear: both; width: 100%; overflow: hidden; }
	.colmask .col1, .colmask .col2, .colmask .col3, .colmask .col4 { float: left; }
	
	/* |-------------------------50%-------------------------|-------------------------50%-------------------------| */
	.p50x50 .col1, .p50x50 .col2 { width: 49.9%; }
	/* |----------20%----------|----------------------------------------80%----------------------------------------| */
	.p20x80 .col1 { width: 19.9%; }
	.p20x80 .col2 { width: 79.9%; }
	/* |------------25%------------|--------------------------------------75%--------------------------------------| */
	.p25x75 .col1 { width: 24.9%; }
	.p25x75 .col2 { width: 74.9%; }
	/* |----------------------------------------80%----------------------------------------|----------20%----------| */
	.p80x20 .col1 { width: 79.9%; }
	.p80x20 .col2 { width: 19.9%; }
	/* |---------------30%---------------|-----------------------------------70%-----------------------------------| */
	.p30x70 .col1 { width: 29.9%; }
	.p30x70 .col2 { width: 69.9%; }
	/* |-----------------------------------70%-----------------------------------|---------------30%---------------| */
	.p70x30 .col1 { width: 69.9%; }
	.p70x30 .col2 { width: 29.9%; }
	/* |----------------33%----------------|----------------33%----------------|----------------33%----------------|  */
	.p33x33x33 .col1, .p33x33x33 .col2, .p33x33x33 .col3 { width: 33.2%; }
	/* |------------25%------------|-------------------------50%-------------------------|------------25%------------|  */
	.p25x50x25 .col1, .p25x50x25 .col3 { width: 24.45%; }
	.p25x50x25 .col2 { width: 50.9%; }	
	/* |------------25%------------|------------25%------------|------------25%------------|------------25%------------| */
	.p25x25x25x25 .col1, .p25x25x25x25 .col2, .p25x25x25x25 .col3, .p25x25x25x25 .col4 { width: 24.9%; }
	
	/* getting equal hight blocks; works due to the hidden overflow on colmask */
	.equal .col1, .equal .col2, .equal .col3, .equal .col4 { margin-bottom: -30000px; padding-bottom: 30000px; }
	
	/* set the default margin for the content div */
	#contentMain { margin: 0 10px; }
	
/* -----------------------------------------------------------------------------------------------------------------
	YOUR everything else
----------------------------------------------------------------------------------------------------------------- */
	body, td { color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	a { color: #cc261d; text-decoration: underline; }
		a:hover { color: white; text-decoration: underline; }
	
  h1, h2, .red {
    color: #cc261d;
  }
  
	#nav {
		margin: 0;
		overflow: hidden;
		margin-left: 30px;
	}
	
	#nav li {
		float: left;
		list-style: none;
	}
  
  #nav a {
    color: white;
  }
	
	.breadcrumb { padding: 1px 0 10px 10px; font-size: 11px; margin-top: 5px; }

  .sidebarbox label {
    display: block;
    float: left;
    clear: both;
  }
  
  .sidebarbox input {
    display: block;
    float: left;
    clear: left;
  }
  
  .sidebarbox input.csc-mailform-submit {
    margin-left: 5px;
  }
  
  .sidebarbox fieldset div {
    float: left;
  }
  
  .sidebarbox fieldset {
    padding: 9px;
    margin: 0;
  }
  
  
	/* FORM */
	fieldset { border: none; }
	textarea { width: 450px; }
	legend { padding: 0 10px; }
	label { display: block; float: left; line-height: 18px;}
	input.csc-mailform-radio { width: 10px; }
	#mailformBereich label, #mailformNewsletter_abonnieren label { float: none; display: inline; }
  
  #content #mailform label {
    width: 100px;
    text-align: right;
    padding-right: 5px;
  }
  
  #content #mailform textarea {
    width: 310px;
  }
  
  #content #mailform fieldset div {
    padding: 3px 0;
  }
  
  #content #mailform #mailformformtype_mail {
    margin: 0 auto;
    display: block;
  }
  
  
  
/* -----------------------------------------------------------------------------------------------------------------
	FCEs
----------------------------------------------------------------------------------------------------------------- */

.sidebarbox {
  border: 3px solid #cc261d;
  -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
  margin-top: 30px;
}

.sidebarbox .header {
  background: #cc261d;
  font-weight: bold;
  margin: 0;
  font-size: 1.2em;
  color: white;
  padding: 0 0 2px 2px;
}

.sidebarbox .content {
  background: black;
}

.product .image {
	text-align: center;
}

.product .content {
  overflow: hidden;
}

.product .content .left {
  float: left;
  width: 232px;
  border-right: 1px solid #cc261d;
  padding: 7px 7px 7px 0;
  padding-bottom: 10007px;
  margin-bottom: -10000px;
}

.product .content .right {
  float: right;
  width: 223px;
  padding: 7px 0 7px 7px;
}

.product .content .right .price {
  background: url(img/bg_price.png) no-repeat center center;
  text-align: center;
  height: 105px;
  font-weight: bold;
  font-size: 24px;
  padding-top:45px;
}
