/*
===================================
CSS Basic Styles

Description: 	Styles the Basic CSS Tags
Author: 		Felix Kreitner
Date:			28.11.2009
*/

/*
========================================================
BASE
========================================================
*/

body {
	background-color:		#b6b6b6;
	background-image: 		url(../images/background.jpg);
	background-repeat: 		no-repeat;
	background-position: 	center top;
}

#container,
.container {
	position:				relative;
	margin:					0 auto;
	width:					1000px;
}

#header,
#menu,
#content,
#footer {
	padding:				0 27px;
}

.company {
	color:					#d1002d;
}

.trans {
	color:					#e09329;
}

.safety {
	color:					#008854;
}

.binding {
	color:					#00529e;
}

.industrial {
	color:					#e9001e;
}

/*
========================================================
HEADER
========================================================
*/

#header {
	position:				relative;
	margin:					15px 0 0 0;
	height:					100px;
	z-index:				10;
	background-image: 		url(../images/background-header.png);
	background-repeat: 		no-repeat;
	background-position: 	left top;
}

#header .section {
	position:				relative;
	height:					97px;
	z-index:				15;
}

#header .topright {
	float:					right;
	text-align:				right;
	padding-top:			12px;
}

#header form {
	clear:					both;
	padding-top:			15px;
	text-align:				right;
}

#header form div {
	text-align:				right;
	float:					right;
}

#header form input.txt {
	float:					left;
	margin:					0;
	padding:				9px 5px;
	width:					142px;
	font-size:				11px;
	cursor:					text;
	border:					0;
	background-image: 		url(../images/background-searchinput.jpg);
	background-repeat: 		no-repeat;
	background-position: 	left top;
}

#header form input.fssubmit {
	float:					left;
	margin:					0 0 0 0;
	padding:				0 0 0 0;
}

#header a.logo {
	display:				block;
	padding-top:			12px;
	width:					149px;
	height:					57px;
	text-indent:			-5600px;
	background-image: 		url(../images/logo-ruhstrat.gif);
	background-repeat: 		no-repeat;
	background-position: 	left 12px;
}

/*
========================================================
TEASER
========================================================
*/

#teaser {
	display:				block;
	position:				relative;
	min-height:				231px;
	height:					auto !important;
	height:					231px;
	background-repeat: 		no-repeat;
	background-position: 	left top;	
}

#teaser.overlap {
	min-height:				280px !important;
	height:					auto !important;
	height:					280px !important;
}

#teaser .headline {
	position:				absolute;
	bottom:					9px;
	left:					24px;
	color:					#FFF;
	font-family:			RotisSansSerifRegular, Arial, Helvetica, sans-serif;
	font-size:				20px;
}

#teaser.overlap .headline {
	bottom:					58px;
}






#teaserextended {
	position:				relative;
	height:					322px;
	padding:				0 0 0 20px;
}

#teaserextended .inner {
	position:				absolute;
	bottom:					30px;
}

#teaserextended h3 {
	margin:					0;
	padding:				0;
	width:					340px;
	color:					#000;
	text-transform:			uppercase;
	font-family:			RotisSansSerifRegular, Arial, Helvetica, sans-serif;
	font-size:				13px;
}

#content #teaserextended ul {
	margin:					10px 0 0 0 !important;
	padding:				0 !important;
	list-style:				none !important;
}
	
#content #teaserextended ul li {
	margin:					0 0 4px 0;
	padding:				0;
	list-style:				none;
	background-image:		url(../images/background-teaserlink.jpg) !important;
	background-repeat: 		no-repeat;
	background-position: 	left top;
}
	
#content #teaserextended ul li a {
	display:				block;
	width:					315px;
	padding:				4px 0 4px 25px;
	font-size:				12px !important;
	color:					#000 !important;
	background-repeat: 		no-repeat;
	background-position: 	10px 9px;
	text-decoration:		none;
	
}

#content #teaserextended ul li a:hover {
	text-decoration:		none;
	background-color:		#999;
	color:					#FFF !important;
}




















#teaser.extended {
	position:				relative;
	display:				block;
	padding:				0 0 0 20px;
	min-height:				322px;
	height:					auto !important;
	height:					322px;
}

#teaser.extended .inner {
	position:				absolute;
	bottom:					30px;
}

#teaser.extended h3 {
	margin:					0;
	padding:				0;
	width:					340px;
	color:					#000;
	text-transform:			uppercase;
	font-family:			RotisSansSerifRegular, Arial, Helvetica, sans-serif;
	font-size:				13px;
}

#teaser.extended ul {
	margin:					10px 0 0 0;
	padding:				0;
	list-style:				none;
}
	
#teaser.extended ul li {
	margin:					0 0 4px 0;
	padding:				0;
	list-style:				none;
	background-image:		url(../images/background-teaserlink.jpg) !important;
	background-repeat: 		no-repeat;
	background-position: 	left top;
}
	
#teaser.extended ul li a {
	display:				block;
	width:					315px;
	padding:				4px 0 4px 25px;
	font-size:				12px !important;
	color:					#000 !important;
	background-repeat: 		no-repeat;
	background-position: 	10px 9px;
	text-decoration:		none;
	
}

#teaser.extended ul li a:hover {
	text-decoration:		none;
	background-color:		#999;
	color:					#FFF !important;
}

.overlap > #breadcrumb {
	display:				block;
	height:					400px !important;
}

/*
========================================================
MENU
========================================================
*/

#menu {
	display:				block;
	height:					53px;
	background-image: 		url(../images/background-content.png);
	background-repeat: 		repeat-y;
	background-position: 	left top;
}

#menu .ico {
	display:				block;
	height:					53px;
	padding-left:			48px;
	background-repeat: 		no-repeat;
	background-position: 	left 3px;
}

#menu .ico.company {
	background-image: 		url(../images/icon-company.jpg);
}

#menu .ico.binding_posts {
	background-image: 		url(../images/icon-binding-posts.jpg);
}

#menu .ico.transformers {
	background-image: 		url(../images/icon-transformers.jpg);
}

#menu .ico.emergency_power_supplies {
	background-image: 		url(../images/icon-emergency-power-supplies.jpg);
}

#menu .ico.industrial_furnaces {
	background-image: 		url(../images/icon-industrial-furnaces.jpg);
}

#menu ul.sectionnav
#menu ul.sectionnav li {
	margin:					0;
	padding:				0;
	list-style:				none;
}

#menu ul.sectionnav li {
	margin-left:			3px;
}

#menu ul.sectionnav li,
#menu ul.sectionnav li a {
	display:				block;
	float:					left;
}

#menu ul.sectionnav li a {
	margin:					0;
	padding:				1px 10px 0 10px;
	height:					16px;
	text-decoration:		none;
	color:					#191919;
	text-transform:			uppercase;
	font-size:				11px;
	background-image: 		url(../images/background-menucolors.jpg);
	background-repeat: 		repeat-x;
	background-position: 	left bottom;
}

#menu ul.sectionnav li a:hover,
#menu ul.sectionnav li a.current {
	color:					#FFF !important;
}

#menu ul.sectionnav li a.sec662:hover,
#menu ul.sectionnav li a.sec662.current {
	background-position: 	left top;
}

#menu ul.sectionnav li a.sec691:hover,
#menu ul.sectionnav li a.sec691.current {
	background-position: 	left -17px;
}

#menu ul.sectionnav li a.sec257:hover,
#menu ul.sectionnav li a.sec257.current {
	background-position: 	left -34px;
}

#menu ul.sectionnav li a.sec666:hover,
#menu ul.sectionnav li a.sec666.current {
	background-position: 	left -51px;
}

/*
========================================================
CONTENT
========================================================
*/

#content {
	padding-top:			2px;
	min-height:				400px;
	height:					auto !important;
	height:					400px;
	background-image: 		url(../images/background-content.png);
	background-repeat: 		repeat-y;
	background-position: 	left top;
}

#content label.left{
	margin-left: 5px;
}

/*
========================================================
BREADCRUMB
========================================================
*/

#breadcrumb {
	padding:			5px 0 5px 0;
}

#breadcrumb .message {
	margin-right:		10px;
	color:				#525252;
}

#content ul#crumblist {
	float:				left;
}

#content ul#crumblist,
#content ul#crumblist li {
	margin: 			0;
	padding: 			0;
	list-style: 		none !important;
	background-image:	none !important;
	border:				0;
}

#content ul#crumblist li,
#content ul#crumblist li a {
	display:			inline;
	color:				#525252;
	text-decoration: 	none;
	font-size:			13px;
}

#content ul#crumblist li {
	padding:			0 0 0 0;
	font-size:			14px;

}

#content ul#crumblist li a {
	padding:			0 0 0 0;
	font-size:			12px !important;
}

#content ul#crumblist li a:hover,
#content ul#crumblist li.last,
#content ul#crumblist li.last a {
	color:				#d1002d;
}

#content ul#crumblist li.first a {
	padding:			0;
}

/*
========================================================
LEFTCOL
========================================================
*/

#leftcol
{
	float:				left;
	width:				640px;
	padding-top:		10px;
}

#leftcol img.border,
#leftcol .border
{
	padding:			5px;
	border:				1px solid #b4b4b4;
}










/*
========================================================
RIGHTCOL
========================================================
*/

#rightcol
{
	float:				right;
	width:				265px;
	padding-top:		10px;
}

#rightcol a.btn,
#rightcol div.btn
{
	display:			block;
	margin-bottom:		20px;
}

#rightcol .btn img
{
	float:				left;
}

/*
========================================================
FOOTER
========================================================
*/

#footer {
	display:				block;
	padding:				20px 27px 15px 27px;
	background-image: 		url(../images/background-footer.png);
	background-repeat: 		no-repeat;
	background-position: 	left bottom;
}

#footer a {
	color:					#000;
	text-decoration:		none;
}

#footer a:hover {
	text-decoration:		underline;
}

#footer ul,
#footer ul li {
	margin:					0;
	padding:				0;
	list-style:				none;
	background-image:		none;
}

#footer ul li {
	display:				inline;
}

#footer .adressblock {
	width:					460px;
}

#footer ul.firstline {
	border-bottom:			1px solid #000;
	padding-bottom:			3px;
}

#footer ul.secondline {
	padding-top:			3px;
}

#footer ul li,
#footer ul li {
	border-right:			1px solid #000;
	padding-left:			4px;
	padding-right:			6px;
}

#footer ul li.last,
#footer ul li.last {
	border-right:			0;
	padding-right:			0;
}

#footer ul li.first,
#footer ul li.first {
	padding-left:			0;
}

#footer .foonav {
	padding-top:			23px;
}