/* 

 _|_|_|_|_|    _|_|      _|_|_|  _|    _|  _|_|_|  
     _|      _|    _|  _|        _|  _|      _|    
     _|      _|    _|  _|        _|_|        _|    
     _|      _|    _|  _|        _|  _|      _|    
     _|        _|_|      _|_|_|  _|    _|  _|_|_| 

© CSS von Tilman Ockert - tocki.de - blog.tocki.de
  
*/


* { padding: 0; margin: 0; }

a { outline: none; }

a img, a:link img { 
	border: none; 
	}
	
body {
	background: #212121 url(../css-bilder/body.gif) repeat-x;
    overflow:auto;
	overflow: -moz-scrollbars-vertical;
	}
	
/* ----------------- TYPO ---------------------- */

body {
	font-family: Arial, Helvetica, sans-serif;
 	font-size: 13px;
	color: #cbc8c5;
	}

a:link,  a:visited, a:active {
		color: #0098ff;
		text-decoration: none;
		}
a:hover{
		color: #ff01d8;
		text-decoration: underline;
		}
	
h3, h3 a:link, h3 a:visited, h3 a:active {
		color: #0098ff;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 25px;
		font-weight: bold;
		font-style: italic;
		text-decoration: none;
		}
h3 a:hover{
		color: #ff01d8;
		}

h4, h4 a:link, h4 a:visited, h4 a:active {
		color: #cbc8c5;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 18px;
		font-weight: bold;
		font-style: italic;
		text-decoration: none;
		}
h4 a:hover{
		color: #0098ff;
		}

.breadcrumb a{
	padding: 0 5px;
	text-decoration: none; 
	color: #0098ff;
	}

.breadcrumb a:hover{
	color: #000;
	background-color: #ff01d8;
	}
	
.breadcrumb a.selected{
	color: #000;
	background-color: #0098ff;
	}	
		
		
.titleFONT { 
		color: #cbc8c5; 
		font-size: 25px;
		font-weight: bold;
		font-style: italic;
		font-family: Georgia, "Times New Roman", Times, serif;
		}

.subtitleFONT {  
		color: #cbc8c5; 
		font-size: 13px;
		font-weight: normal;
		font-family: Arial, Helvetica, sans-serif;
		}
		
#logo p {
		vertical-align:bottom;
		margin: 35px 0px 0px 5px;
		display: inline;
		}
		
	#logo p span {
		color: #ff01d8;
		}

.infobox p{
	margin: 35px 0px 0px 0px;
	width: 700px;
	line-height: 20px;
	}

.erklaerbox p{
	margin: 35px 0px 0px 0px;
	width: 650px;
	line-height: 20px;
	display: inline;
	}
		
.submenue-box p{
	float: left;
	margin-left: 0px;
	display: inline;
	}	
/* ----------------- Box modell ---------------------- */


#wrapper { 
	margin: 0 auto;
	width: 965px;
	}
#header {
	color: #333;
	width: 960px;
	padding: 0px;
	height: 150px;
	margin: 0px;
	/* border-bottom: 1px groove #cbc8c5; */
	float: left;
	display: inline;
	background: url(../css-bilder/back_TockiT.png) 0 -20px no-repeat;
	}	
	
	#logo {
		margin: 55px 0px 0px 110px;
		color: #7f8081;
		float: left;
		display: inline;
		}
	#logo p {
		display: block;
		margin: 3px 0px 0px 5px;
		}
	
	#breadcrumb {
		float: left;
		display: block;
		margin: 140px 0px 0px 0px;
		position: absolute;
		color: #7f8081;
		}
		
	.likes {
		margin: 10px 0 0 0;
		float: right;
		text-align: right;
		position: relative;
		width: 250px;
		}
	
	#menue {
		margin: 83px 0px 0px 0px;
		float: right;
		display: inline;
		}
	
#content {
	margin-bottom: 5px;
	overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
	width: 965px;
	float: left;
	}
	
	.slidertext {
		position: absolute; 
		padding: 10px 25px 15px 0px; 
		bottom: 0px; 
		width: 940px;
		text-align:right;
		background: url(../css-bilder/displaybox-back.png);
		float: left;
		}
	
	.blocks {
		margin: 2px 0px 20px 0px;
		width: 965;
		float: left;
		}

	.submenue-box {
		position: relative; 
		overflow: hidden; 
		margin: 15px 0px 0px 1px;
		width: 918px; /* 2px weniger, als rechnerisch, da die Boxes 2px weniger breit sind als 960 */
		height: 15px;
		padding: 20px;
		background: #272727;
		float: left;
		display: inline;
		}

	.submenue-box-help {
		float: left;
		margin: 0px;
		padding: 0px;
		}
		
	.halbe-box {
		position: relative; 
		overflow: hidden; 
		margin: 15px 0px 34px 0px;
		width: 438px;
		height: 250px;
		padding: 20px;
		background: #272727;
		float: left;
		display:inline;
		}
		
		.halbe-box img {
			float: left;
			margin: 0px 20px 0px 0px;
			}
		
	.infobox {
		position: relative; 
		overflow: hidden; 
		margin: 15px 0px 34px 0px;
		width: 920px;
		height: 400px;
		padding: 20px;
		background: #272727;
		float: left;
		display:inline;
		}
		
	.erklaerbox {
		position: relative; 
		overflow: hidden; 
		margin: 15px 0px 34px 0px;
		width: 940px;
		padding: 20px 0px 20px 20px;
		background: #272727;
		float: left;
		display:inline;
		}
	
	.leistungsbox {
		position: relative;
		overflow: hidden;
		display: inline;
		width: 220px;
		margin: 0px 20px 30px 80px;
		float: right;
		text-align: left;
		}
		
	.leistungsbox img {
		float: right;
		margin-top: 5px;
		}
	
	.leistungsbox span {
		display: box;
		line-height: 20px;
		}
		
		
	.infobox img{
		margin: 35px 0px 0px 0px;
		float: right;
		display: inline;
		}
	
#footer { 
	width: 960px;
	border-top: 1px groove #cbc8c5;
	height: 60px;
	clear: both;
	margin: 0px;
	padding-top: 20px;
	text-align: center;
	}



/* ----------------- Menue ---------------------- */

ul#menu {
	margin: 0;
	padding-left:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:30px;
	font-size:12px;
	font-weight:bold;
	text-transform: uppercase;
	font-family:Arial, Helvetica, sans-serif;
	float: right;
	}

ul#menu li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	}
	
ul#menu li a {
	display:block;
	float:left;
	color: #cbc8c5;
	text-decoration:none;
	padding:8px 20px 0 4px;
	height:22px;
	background:transparent url(../css-bilder/nav_bg.gif) 0px -60px no-repeat;	
	}
	
ul#menu li a:hover {
	color: #ff01d8;
	height:22px;
	background:transparent url(../css-bilder/nav_bg.gif) 0px 0px no-repeat;		
	}
	
ul#menu li a.current {
	color: #0098ff;
	display:inline;
	height:22px;
	background:transparent url(../css-bilder/nav_bg.gif) 0px -30px no-repeat;	
	float:left;
	margin:0;
	}

/* ----------------- SubMenue filter ---------------------- */


ul#filter { 
	float: left; 
	font-size: 15px;
	list-style: none; 
	margin-left: 5px; 
	width: 500px;
	}
	
ul#filter li { 
	float: left;
	line-height: 15px;
	margin-right: 0px;
	padding-right: 2px;
}
	
ul#filter a { 
	padding: 0 5px;
	text-decoration: none; 
	color: #0098ff;
	}
	
ul#filter a:hover { 
	color: #000;
	background-color: #ff01d8;
	}
	
ul#filter li.current a { 
	color: #000;
	background-color: #0098ff;
	}
	


/* ----------------- SocialIcons ---------------------- */


.social-menue{
	float: right;
	margin-left: 40px;
	}



ul#social-menue-list {
	width: 460px;
	list-style: none;
}

ul#social-menue-list li { display: inline; }
	
ul#social-menue-list li a {
	display: block; float: left; height: 78px;
	background-image: url(../css-bilder/social-Icons.jpg); text-indent: -9999px;
}

	ul#social-menue-list li a.twitter {
		width: 459px; margin-bottom: 2px; background-position: 0 0;	
	}
	
	ul#social-menue-list li a.blog {
		width: 459px; margin-bottom: 2px; background-position: 0 -80px;	
	}
	
	ul#social-menue-list li a.xing {
		width: 459px; margin-bottom: 2px; background-position: 0 -160px;	
	}
	
	ul#social-menue-list li a.facebook {
		width: 459px; margin-bottom: 2px; background-position: 0 -240px;	
	}
	
	ul#social-menue-list li a.image {
		width: 459px; background-position: 0 -320px;	
	}
	
	
	ul#social-menue-list li a.twitter:hover, ul#social-menue-list li a.twitter:focus {
		background-position: -461px 0;	
	}
	
	ul#social-menue-list li a.blog:hover, ul#social-menue-list li a.blog:focus {
		background-position: -461px -80px;	
	}
	
	ul#social-menue-list li a.xing:hover, ul#social-menue-list li a.xing:focus {
		background-position: -461px -160px;	
	}
	
	ul#social-menue-list li a.facebook:hover, ul#social-menue-list li a.facebook:focus {
		background-position: -461px -240px;	
	}
	
	ul#social-menue-list li a.image:hover, ul#social-menue-list li a.image:focus {
		background-position: -461px -320px;	
	}