html, body {
height:100%;
margin:0;
padding:0;
font-family:"bitstream vera sans","trebuchet ms","Lucida Grande","Lucida Sans Unicode",verdana;

background : url("../pic/b7.png") repeat scroll 0 0 #808080;
}

#head h1{
   Font-size:12px;
   color: #aaa;
   /*
   position : relative;
   top : -4px;
   margin-right :26px;*/
   text-align: right;
}

h1{
   Font-size:14px;
   margin-left:30px;
   color: #aaa;
}

#sb_art{
	background-color:#092B3B;
	color:#DDDDDD;
	border:1px solid gray;
	height:20px;
	position : relative;
	top:1px;
}

#sel{
	position : relative;
	left : 25px;
}

#go{
	height : 20px;
	border : 1px solid gray;
	background-color:#092B3B;
	font-size:13px;
	text-decoration : none;
	padding-left : 2px;
	padding-right : 2px;
	position : relative;
	top:1px;
}

#headline{
	position: relative;
	right:50px;
}

div.distance{
   /*
   margin-bottom : -300px;
   height : 50%;*/
   height : 13%;
}

a{
	color : #fff;
	/*color : wheat; */
}

a:hover{
  color : #fff;
}

a:visited{
  color : #fff; /*173C4D*/
  /*color : wheat;*/
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
  color : #fff;
}

:focus {
  -moz-outline-style:none;
}

#container{
	padding-bottom : 100px;
}
.container_lt{
   width : 445px;
   margin :5px;
   margin-left :10px;
   margin-top :20px;
   float :left;
   text-align :justify;
   /*border:1px dotted #21556D;*/
}

.container_lb{
   width : 445px;
   margin-left :10px;
   clear :left;
   float :left;
   text-align :justify;
   /*border-top:1px dotted #DDD;*/
  /* border:1px dotted #21556D; */
   margin-top: 40px;
}

.container_rt{
   width : 435px;
    margin-right :30px;
    margin-top :20px;
  /* border:1px dotted #21556D; */
   float :right;
   position : relative;
   text-align :justify;
   clear:right;
}

.container_rb{

   width : 435px;
   margin-right :30px;
   float :right;
   position : relative;
   text-align :left;
  /* border:1px dotted #21556D; */
   clear:right;
   margin-top: 40px;
}

.footer{
	color :#bbb;
	font-size :11px; 
	bottom :0px;
	position:fixed;
	height:80px;
	width:100%;
	background-color: #173C4D;
	border-top:1px solid #CCCCCC;
	/*background-image : url(../pic/footer2.jpg);*/
	background-repeat : repeat-x;
 }
 
 #footer-links{
	text-align : center;
 }

 .bookmark{
	left:5px;
	margin: 0 auto;
	width:980px;
	text-align:right;
	position:relative;
	top:-8px;
	height : 20px;
 }
 
 .bookmark img{
   margin-right : 3px;
   border:0px;
 }
 
 
#demotip a{
   color : wheat;
}

.chosenText{
	color : wheat;
}

.w3c {
 float:left;
 margin-left:10px;
 margin-top:5px;
}

#copyright{
	/*
	float : right;
	margin-right:10px;*/
	text-align : center;
}
#validator{
	float :left;
}

a img{
	border:0px;
}

.pic{
    width:85px; 
	height:85px;  
	background-image : url("../projects/lgpl-pic/kombi-pic.png");
	background-color : transparent;
	background-repeat : no-repeat;
}
.pic-left{
	float :left ;
	margin-right:15px;
}
.pic-right{
	float :right;
	margin-left:15px;
}
#pic1{
	background-position : 2px 0px;
}

#pic2{
	background-position : -84px 0px;
}

#pic3{
	background-position : -168px 0px;
}

#pic4{
	background-position : -251px 0px;
	min-height : 134px;
}
#pic5{
	background-position : -333px 0px;
}
#pic6{
	background-position : -419px 0px;
}

.tabs-bottom{
  margin : 3px 0 5px 27px;
}



/* ################################################  MAIN ENDE   ######################################################### */
/* ################################################  jQuery Bookmark styles v1.3.0 ####################################### */
#selectBookmark{
	/*float : left;*/
	margin-right:10px;
}

.bookmark_popup_text img {
	border: none;
	vertical-align: bottom;
}
.bookmark_popup {
	display: none;
	position: absolute;
	z-index: 100;
}
.bookmark_popup ul {
	float: left;
	width: 320px;
	border: 1px solid #aaa;
}
.bookmark_list {
	display: inline-block;
	/*float: left; AT*/
	list-style-type: none;
	font-size: 80%;
	margin: 0px;
	padding: 0px;
	margin-top:5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {  /* Safari3/Opera9 */
	.bookmark_list {
		font-size: 100%;
	}
}
html:first-child .bookmark_list {  /* Opera */
	font-size: 80%;
}
.bookmark_list li {
	float: left;
	width: 23%;
	margin: 0px 1px;
	padding: 1px;
	background-color: #eee;
	border: 1px outset;
}
.bookmark_compact {
	background-color: #999;
	/*border: 1px outset;*/
}
.bookmark_compact li {
	width: 16px;
	height: 16px;
	margin: 0px;
	padding: 2px;
	background-color: transparent;
	border: none;
}
.bookmark_list a {
	width: 100%;
	text-decoration: none;
	cursor: pointer;
}
.bookmark_list span {
	display: inline-block;
	width: 16px;
	height: 16px;
}
.bookmark_list span.bookmark_icons {
	background: url(../jquery/pic/bookmarks.gif) no-repeat center;
}
.bookmark_list img {
	border: none;
}

#vergleich_diy{
 width : 940px;
}
#vergleich_diy td{
	border : 1px solid lightgray;
}
#vergleich_diy td.noborder{
	border : 0px;
}

#vergleich_diy tr:hover{
	background-color : #173C4D;
}
#vergleich_diy  td.c1{
	background-color : #173C4D;
}


/* ################################################  jQuery Bookmark styles v1.3.0 ENDE ################################## */
/* ################################################  jQuery Scrollable ################################################### */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 980px;
	height:200px;

	/* custom decorations */
	/*
	border-top:1px solid #173C4D;
	border-bottom:1px solid #173C4D;
	background:url(../jquery/pic/h300.png) repeat-x; */
	left : -20px; /* wieder das von pane rückgängig machen*/
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	top: -2px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:25px 5px 20px 20px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	/*width:240px;*/
	height:150px;
	z-index:3;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9;
	position:relative;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../jquery/pic/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	/*float:left;*/
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}


/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../pic/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 

a.nextPage{
    position : relative;
	top:-155px;
	float :right;
	z-index:4;
}

a.prevPage{
    position : relative;
	top:-155px;
	z-index:4;
	float :left;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* ################################################  jQuery Scrollable ENDE ############################################## */
/* ################################################  jQuery Scrollable Visitenkarten ##################################### */


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable-visitenkarten {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 980px;
	height:300px;

	/* custom decorations */
	border-top:1px solid #173C4D;
	border-bottom:1px solid #173C4D;
	background:url(../jquery/pic/h300.png) repeat-x;
	left : -20px; /* wieder das von pane rückgängig machen*/
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable-visitenkarten .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	top: -2px;
}

/* single scrollable item */
.scrollable-visitenkarten img {
	float:left;
	margin:25px 5px 20px 20px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	/*width:240px;*/
	height:250px;
	z-index:3;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable-visitenkarten .active {
	border:2px solid #000;
	/*z-index:9999;*/
	position:relative;
}


/* this makes it possible to add next button beside scrollable */
.scrollable-visitenkarten {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse-visitenkarten {
	background:url(../jquery/pic/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	/*float:left;*/
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}


/* right */
a.right-visitenkarten 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right-visitenkarten:hover 		{ background-position:-30px -30px; }
a.right-visitenkarten:active 	{ background-position:-60px -30px; } 


/* left */
a.left-visitenkarten				{ margin-left: 0px; } 
a.left-visitenkarten:hover  		{ background-position:-30px 0; }
a.left-visitenkarten:active  	{ background-position:-60px 0; }

/* up and down */
a.up-visitenkarten, a.down-visitenkarten		{ 
	background:url(../jquery/pic/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up-visitenkarten:hover  		{ background-position:-30px 0; }
a.up-visitenkarten:active  		{ background-position:-60px 0; }

/* down */
a.down-visitenkarten 				{ background-position: 0 -30px; }
a.down-visitenkarten:hover  		{ background-position:-30px -30px; }
a.down-visitenkarten:active  	{ background-position:-60px -30px; } 

#visitenkarten a.nextPage{
    position : relative;
	top:-204px;
	float :right;
	z-index:4;
}

#visitenkarten a.prevPage{
    position : relative;
	top:-204px;
	z-index:4;
	float :left;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* ################################################  jQuery Scrollable Visitenkarten ENDE ################################ */
/* ################################################  jQuery Overlay  ##################################################### */


/* the overlayed element */ 

div.overlay { 
    /* growing background image */ 
    /*background:url(../pic/petrol.png) no-repeat !important; */
	background : url(../jquery/pic/gradient.png) repeat-x scroll 0 0 #3195C4;
	border : 1px solid wheat;
	color : white;
    /* dimensions after the growing animation finishes  */ 
    width:350px; 
    height:200px;
    /* initially overlay is hidden */ 
    display:none; 
    /* some padding to layout nested elements nicely  */ 
    padding:30px; 
	z-index: 40;
}

/* default close button positioned on upper right corner */ 
div.overlay div.close,
div.overlay-agb div.close { 
    background-image:url(../jquery/pic/close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

div.overlay-agb { 
    font-size : 0.9em;
	background : url(../jquery/pic/gradient.png) repeat-x scroll 0 0 #3195C4;
	border : 1px solid wheat;
	color : white;
    /* dimensions after the growing animation finishes  */ 
    width:1024px; 
    /*height:200px;*/
    /* initially overlay is hidden */ 
    display:none; 
    /* some padding to layout nested elements nicely  */ 
    padding:30px; 
	z-index: 5;
}
div.overlay-agb .scroll{
	overflow-y:auto;
}

/* ################################################  jQuery Overlay ENDE ################################################# */
/* ################################################  jQuery Tabs ######################################################### */
.nav_top li{
	list-style-type:none;
	float:left;
	text-align:left;
	margin-right :25px;
	width :200px;
}

#nav {
	background:#173c4d;
	border-bottom:1px solid #CCCCCC;
	height:145px;	
	width:980px;
	border-right : 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	margin :0 auto;
}

#nav ul {	
	width:900px;
	margin:0 auto;	
}

#nav li {	
	/*border-right:1px solid #ddd;*/  /* AT */
	float:left;
	padding-left:1px;
	width:175px;
	list-style-type:none;
	text-align:center;
}

#nav a {
	color: gray; /*AT #333333*/
	display:block;
	padding:17px;
	position:relative;
	word-spacing:-2px;
	font-size:11px;		
	height:122px;
	text-decoration:none;
	
}	

#nav a.current {
	background:url(../jquery/pic/tab.png);	
	color : #333333;
	margin-left : -1px; /*AT*/
	border-bottom : 1px solid #173C4D;
	border-left : 1px solid #092b3b;
	border-right : 1px solid #092b3b;
	position : relative;
	
	
}

#nav img {
	background-color:#fff;
	border:1px solid #ccc;
	margin:3px 0 5px 27px;
	padding:4px;		
	display:block;
}

#nav strong {
	display:block;		
	font-size:13px;
}

/* panes */
#panes {
	background:#fff url(../jquery/pic/gradient.png) repeat-x scroll 0 0;
	background-color : #3195c4;
	border-left : 1px solid #ccc;
	border-right : 1px solid #ccc;
	width:980px;	
	height:455px;
	/*margin-bottom:-20px;*/
	/*padding-bottom:20px;*/
	
	/* must be relative so the individual panes can be absolutely positioned */
	position:relative;
	margin :0 auto;
	line-height : 1.2em;
}

/* crossfading effect needs absolute positioning from the elements */
#panes div.pane{
	display:none;		
	position:absolute;
	top:20px;
	left:20px;
	font-size:13px;
	color:#DDD; /*444*/	
	width:960px; /*width:940px; */
}

#panes img {
	float:left;
	margin-right:15px;		
}

#panes img.right {
	float:right;
}

#panes p.more {
	color:#000;
	font-weight:bold;
}

#panes h3 {
	margin:0 0 0 0;
	font-size:22px;
	font-weight:normal;
}

#head{
  width:980px;
  height:25px;
  background-color : #173C4D;
  border-left : 1px solid #ccc;
  border-right : 1px solid #ccc;
  border-top : 1px solid #ccc;
  margin :0 auto;
	position:relative;
}
/*
.overlay {
	display:none;
	width:500px;
	padding:20px;
	background-color:#ddd;
}*/

/* ################################################  jQuery Tabs ENDE #################################################### */
/* ################################################  jQuery Tooltip ###################################################### */

#demotip {
	display:none;
	background:transparent url(../jquery/pic/tooltip.png); /*black_arrow.png*/
	font-size:12px;
	height:62px; /*70*/
	width:350px; 
	padding:25px;
	color:#fff;	
	z-index : 2;
}




.panel_button {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 0px;
	width: 174px;
	height: 44px;
	background: url(../pic/panel_button.png);
	z-index: 20;
	filter:alpha(opacity=97);
	-moz-opacity:0.97;
	-khtml-opacity: 0.97;
	opacity: 0.97;
	cursor: pointer;
}
.panel_button img {
	position: relative;
	top: 5px;
	border: none;
}
.panel_button a {
	text-decoration: none;
	color: #ccc;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: -3px;
	left: 10px;
	font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
	color: #999999;
}
#toppanel {
	position: absolute;
	width: 980px;
	left: 0px;
	z-index: 25;
	text-align: center;

}
#panel {
	width: 980px;
	position: relative;
	top: 1px;
	height: 0px;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
	overflow: hidden;
	text-align: left;
}
#panel_contents {
	background: #173C4D;
	filter:alpha(opacity=97);
	-moz-opacity:0.97;
	-khtml-opacity: 0.97;
	opacity: 0.97;
	height: 449px;
	width: 980px;
	position: absolute;
	z-index: -1;
	border-bottom : 1px solid #ccc;
}