@charset "utf-8";
/* CSS Document css/style.css | by 
  ___  __  __  ____  ____  _____     ___  ____  ____  ___  __    ____  ____ 
 / __)(  )(  )(_  _)(  _ \(  _  )   / __)( ___)(_  _)/ __)(  )  ( ___)(  _ \
( (_-. )(__)(  _)(_  )(_) ))(_)(   ( (_-. )__)  _)(_ \__ \ )(__  )__) )   /
 \___/(______)(____)(____/(_____)   \___/(____)(____)(___/(____)(____)(_)\_)
 ___________________________________________________________________________________________
 ____    ____    ____    ____  __  __  _  _  ____        
(  _ \  (_  _)  (  _ \  (_  _)(  )(  )( )/ )( ___)    
 )(_) ).-_)(     )(_) ).-_)(   )(__)(  )  (  )__)  
(____/ \____)   (____/ \____) (______)(_)\_)(____)       
 __  __  ____  ___  __  __  ____  __			 __  __  _____  __    ____  _  _  ____  ____  _____ 
(  \/  )(_  _)/ __)(  )(  )( ___)(  )	  ___	(  \/  )(  _  )(  )  (_  _)( \( )( ___)(  _ \(  _  )
 )    (  _)(_( (_-. )(__)(  )__)  )(__	 (___)	 )    (  )(_)(  )(__  _)(_  )  (  )__)  )   / )(_)( 
(_/\/\_)(____)\___/(______)(____)(____)			(_/\/\_)(_____)(____)(____)(_)\_)(____)(_)\_)(_____)

 ___________________________________________________________________________________________
|																					    	|
|  Dj Djuke aka Miguel Molinero | Guido Geisler | 71254 - Ditzingen | info<at>djdjuke.de	|
|___________________________________________________________________________________________|
*/
/*__________________________________________________________________________________________
|																					    	|
| Standard Tag Formatiereung (h1-h6 | p | a ...	)											|
|___________________________________________________________________________________________|
*/

* {
margin: 0px;
padding: 0px;
}

body {
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	color: #413D3A;
	background-image:url(../images/body-background.jpg);
	background-repeat:repeat-x;
}

h2, h3, .dtus {
	padding-bottom:3px;
	margin-bottom:3px;
	font-size: 15px;
	font-variant:small-caps;
}

h3 {
	font-size: 12px;
}

.dtus {
	font-weight:bold;
	line-height:12px;
}
 
 h5 { 
 margin-bottom:5px;
 }

h5.video {
	margin-top:15px;
}

.toTopH3 {
	display:none;
}

p, p.engl, dd.dates a, dd.dates  {
	font-size:11px;
	line-height:15px;
} 

p.engl {
	margin-bottom:6px;
	padding-bottom:5px;
	padding-left:5px;
	font-style:italic;
	color:#B9C575;
	border-left:1px dotted #B9C575;
	border-bottom:1px dotted #B9C575;
}

p.about {
	margin-bottom:10px;
	padding-bottom:5px;
	line-height:16px;	
	border-bottom:1px dotted #ccc;		
}

.short {
		width:395px;
}

div#logo h1 {
	text-indent:-9999px;
}

.w {
	padding-bottom:2px;
	font-weight:bold;
}

.urgent {
		color:#F00;
}

a, a:visited { 
	color:#066;
	outline: none;
	text-decoration:none;
}

a:hover {
	color:#060;
}

a.home {
	display:inline-block;
	width:21px;
	height:21px;
	background-image:url(../images/home.png);
}

a.home:hover {
	background-image:url(../images/home_hover.png);
}


p a.hb {
	font-size:10px;
}



p a.hb:hover {
	background-color:#FF0;
	cursor:default;
}

strong {
	color:#FF0;
}

input {
	padding-top:1px;
	padding-right:5px;
	font-size:10px;
	border:none;
	background-color:transparent;
}

img, img:focus {
	border:none;
}

hr {
	margin-top:3px;
	margin-bottom:3px;
}

span.hr10, span.hr50, span.hr100, span.hr150, span.hr200 {
		display:block;
		margin-bottom:3px;
		height:1px;
		background-image:url(../images/hr.png);
}

span.hr10 {
		width:10px;
}

span.hr50 {
		width:50px;
}

span.hr100 {
		width:100px;
}

span.hr150 {
		width:150px;
}

span.hr200{
		width:200px;
}

div#left {
	float:left;
	width:180px;
}

div#right {
	float:right;
	width:180px;
}

div#center {
	margin-left:200px;
	width:180px;
}

object {
	margin-bottom:5px;
}

/*__________________________________________________________________________________________
|																					    	|
|  BilderGallery (pics.html)																|
|___________________________________________________________________________________________|
*/

div.photo {
	position:relative; 
	margin:0 auto 20px auto;
	padding:20px;
	width:600px; height:330px;  
	background:url(../gallery/gallery_back.png); 
	text-align:left; 		
}

div.photo img.default {
	position:absolute; 
	left:334px; 
	top:25px; 
	z-index:0;
}

div.photo ul.topic {
	position:relative; 
	padding:0; 
	margin:0; 
	list-style:none; 
	width:218px; 
	height:auto; 
	z-index:10;
}

div.photo ul.topic li {
	display:inline; 
	width:54px; 
	height:20px; 
	float:left;
}


div.photo ul.topic li a.set {
	display:block; 
	font-size:11px; 
	width:54px; 
	height:20px;  
	background:transparent; 
	text-align:center; 
	line-height:18px; 
	color:#aaa; 
	text-decoration:none;
}


div.photo ul.topic li a ul, 
div.photo ul.topic li ul {
	display:none;
}

div.photo ul.topic li a:hover,
div.photo ul.topic li:hover a {
	color:#606B75;
}

div.photo ul.topic li a:hover em, 
div.photo ul.topic li:hover em {
	display:block; 
	position:absolute; 
	left:-18px;
	top:-18px; 
	width:634px; 
	height:364px; 
	z-index:-1; 
	border:1px solid #888;
}

div.photo ul.topic li a:hover ul, 
div.photo ul.topic li:hover ul {
	display:block; 
	position:absolute;
	padding:0; 
	margin:0; 
	width:216px; 
	height:150px; 
	left:0; 
	top:20px; 
	list-style:none; 	
}

div.photo ul.topic li a:hover ul li, 
div.photo ul.topic li:hover ul li {
	float:left; 
	margin:6px;
	display:inline; 
	width:24px; 
	height:24px; 
}

div.photo ul.topic li a:hover ul li a, 
div.photo ul.topic li:hover ul li a {
	float:left; 
	display:block; 
	width:24px; 
	height:24px; 
	cursor:default; 
	background:url(../gallery/arrow.gif) no-repeat; 
	text-decoration:none;
}

div.photo ul.topic li a:hover ul li a span,
div.photo ul.topic li:hover ul li a span {
	visibility:hidden; 
	position:absolute;
	padding:6px; 
	width:206px; 
	height:115px; 
	top:200px; 
	left:0; 
	color:#000; 
	font-weight:normal; 
	font-size:10px;  
	text-align:left; 
	line-height:15px;
}

div.photo ul.topic li a:hover ul li a img, 
div.photo ul.topic li:hover ul li a img {
	display:block; 
	width:22px; 
	height:22px; 
	border:1px solid #666; 
	border-top-color:#ccc;
}

div.photo ul.topic li a:hover ul li a:hover, 
div.photo ul.topic li:hover ul li a:hover {
	position:relative;
	white-space:normal;
}

div.photo ul.topic li a:hover ul li a.vert:hover img, 
div.photo ul.topic li:hover ul li a.vert:hover img {
	position:absolute; 
	left:-12px; 
	top:-20px; 
	width:48px; 
	height:64px; 
	border-color:#fc0;
}

div.photo ul.topic li a:hover ul li a.hor:hover img, 
div.photo ul.topic li:hover ul li a.hor:hover img {
	position:absolute; 
	left:-20px; 
	top:-12px; 
	width:64px; 
	height:48px; 
	border-color:#fc0;
}

div.photo ul.topic li:hover ul li a:focus, 
div.photo ul.topic li:hover ul li a:active,
div.photo ul.topic li a:hover ul li a:active {
	position:static; 
	outline:0;
}

div.photo ul.topic li:hover ul li a:focus.vert img, 
div.photo ul.topic li:hover ul li a:active.vert img, 
div.photo ul.topic li a:hover ul li a:active.vert img {
	position:absolute; 
	left:270px; 
	top:-19px; 
	width:240px; 
	height:320px; 
	padding:4px 44px; 
	background:#000; 
	z-index:10;
}

div.photo ul.topic li:hover ul li a:focus.hor img, 
div.photo ul.topic li:hover ul li a:active.hor img,
div.photo ul.topic li a:hover ul li a:active.hor img {
	position:absolute; 
	left:271px; 
	top:-19px; 
	width:320px; 
	height:240px; 
	padding:44px 4px; 
	background:#000; 
	border:0; 
	z-index:10;
}

div.photo ul.topic li:hover ul li a:focus span, 
div.photo ul.topic li:hover ul li a:active span,
div.photo ul.topic li a:hover ul li a:active span{
	visibility:visible;
}


/*__________________________________________________________________________________________
|																					    	|
|  Navigation Efeckt Hover																	|
|___________________________________________________________________________________________|
*/

ul#menuback {
	overflow: auto;	
	margin: 0px 10px;
	width: 384px;
	list-style: none;
	background: url(../images/menu-bg.jpg);
}

ul#menuback li.shutter {
	display: block;
	float: left;
	width: 64px;
	height: 27px;
}

ul#menuback li#shutter1 {
	background:url(../images/about.jpg) no-repeat; 
}

ul#menuback li#shutter2 {
	background:url(../images/history.jpg) no-repeat; 
}

ul#menuback li#shutter3 {
	background:url(../images/gallery.jpg) no-repeat; 
}

ul#menuback li#shutter4 {
	background:url(../images/promo.jpg) no-repeat; 
}

ul#menuback li#shutter5 {
	background:url(../images/presse.jpg) no-repeat; 
}

ul#menuback li#shutter6 {
	background:url(../images/con_imp.jpg) no-repeat; 
}

a.link {
	display: block;
	width: 64px;
	height: 27px;
	background: url(../images/window.png) no-repeat bottom center;
	text-indent: -9999px;
}
/*__________________________________________________________________________________________
|																					    	|
|  Demo Cds / Videos (demo.html)															|
|___________________________________________________________________________________________|
*/

div.qitem {	
	position:relative;
	float:left;
	width:110px;
	height:110px;	
	border:1px solid #222;	
	margin:2px 4px 2px 4px;;
	background-color:#CCC;
}



a.cdbox {
	font-weight:bold;
	color:#36F;
	cursor:pointer;
}


a.cdbox span.demo {
	display: none;
	font: 11px arial,helvetica,sans-serif;
	color: #223641;
}

a.cdbox:hover span.demo  {
	position: absolute;	
	display: block;
	width: 104px;
	height:104px;
	top: 0px;
	left: 0px;
	text-decoration: none;
	padding: 3px;
	background: #b3b9be;
}


div.qitem a.cd1 {
	display:block;
	width:110px;
	height:110px;	
	background-image:url(../images/2.png);
	background-repeat:no-repeat;
}

div.qitem a.cd2 {
	display:block;
	width:110px;
	height:110px;	
	background-image:url(../images/3.png);
	background-repeat:no-repeat;
}
div.qitem a.cd3 {
	display:block;
	width:110px;
	height:110px;	
	background-image:url(../images/4.png);
	background-repeat:no-repeat;
}
div.qitem a.cd4 {
	display:block;
	width:110px;
	height:110px;	
	background-image:url(../images/5.png);
	background-repeat:no-repeat;
}

div.qitem a.cd5 {
	display:block;
	width:110px;
	height:110px;	
	background-image:url(../images/6.png);
	background-repeat:no-repeat;
}

div.qitem span:hover {
	background-position:-999px 0px;
}

.demoh {
	display:block;
	font-size:9px;
	margin-bottom:2px;
	color:#369ead;
}

.bf {	
	display:block;
	padding-bottom:2px;
	font-size:9px;	
	color:#000;
}


/*__________________________________________________________________________________________
|																					    	|
|  Formular (contact.html) | Loginbereich (index.html &amp; presse.html)					|
|___________________________________________________________________________________________|
*/

/*--------------   Contact Imprint --------------------*/
form.ci {
	margin:5px auto;
	width:661px;
}


input.ci, textarea.ci {
	cursor: pointer;
	border:none;
	border-bottom: 1px solid #788458;
	background-color: #fff;
	width: 192px;
	float:right;
	padding: 3px;
	font-size: 11px;
}



input#submit.ci {
	width: 335px;
	cursor: pointer;
	background-color: #ddd;
	font-weight: bold;
	color: #413D3A;
	float:left;
	padding: 1px 3px;
	border:none;
}

input#submit.ci:hover {
	cursor: pointer;
	font-weight: bold;
	color: #788458;
}


textarea.ci {
	border:1px dotted #788458;
	border-bottom: 1px solid #788458;
	float:left;
	width: 327px;
	height: 100px;
	overflow: auto;
	margin-bottom: 2px; 
	font-family: verdana, arial, sans-serif;	
}

input.ci {
	border:none;
	border-bottom: 1px solid #788458;
	background-color: #fff;
	width: 192px;
	float:right;
	padding: 3px;
	font-size: 11px;
}
input.ci:hover, textarea.ci:hover {
	background-color: #DADADA;
}

input.ci:focus, textarea.ci:focus {
	background-color:#BEC887;
}

/*--------------   Contact login / smallbox --------------------*/

div#login, div#loginsmall {
	margin: 60px 0 0 220px;
	padding:5px;
	width:250px;
	height:100px;
	border: solid 1px #000;
	background-image:url(../images/soft_60.png);
}

div#loginsmall {
	margin:0px;
	width:100px;
	height:120px;
}

input.lg, textarea.sm {
	cursor: pointer;
	border:none;
	border-bottom: 1px solid #788458;
	background-color: #fff;
	width: 120px;
	float:right;
	padding: 3px;
	padding-bottom:7px;
	font-size: 11px;
}

input.sm, textarea.sm {
	cursor: pointer;
	border:none;
	border-bottom: 1px solid #788458;
	background-color: #fff;
	width: 90px;
	padding: 3px;
	padding-bottom:7px;
	font-size: 11px;
}

input#submit.lg {
	width: 335px;
	cursor: pointer;
	background-color: #ddd;
	font-weight: bold;
	color: #413D3A;
	padding: 1px 3px;
	border:none;
}

/*--------------   Contact allgemeine formatierung  --------------------*/
dt.imp {
	padding-top:8px;
	font-size:10px;		
	font-variant:small-caps;
	font-weight:bold;
}

dd a, dd a:visited, dd.dates a, dd.dates a:visited {
	padding-left:20px;
	padding-bottom:3px;
	display:block;
	width:150px;
	font-size:11px;
	color:#069;
	text-decoration:none;
	line-height:12px;
	background-image:url(../images/weblink.png);
	background-position:left;
	background-repeat:no-repeat;
}

dd.dates a, dd.dates a:visited {
	background-image:url(../images/weblink_white.png);
	background-position:left;
	background-repeat:no-repeat;
}




fieldset {
	border: 0px solid;
	width: 290px;
	float:left;
	margin-top: 10px;
}

fieldset#contact {
	border-right:1px dotted #788458;
	padding:0 10px 10px 0;
	margin-right: 10px;
}

legend {
	font-weight: bold;
	padding-bottom: 10px;
	margin-left: -7px;
	color: #788458;	
}

p.label {
	width: 90px;
	height: 20px;
	display: block;
	float:left;
	line-height: 18px;
	font-size: 11px;
	padding: 2px 0;
}

p.lg {
	padding: 3px;
	line-height: 18px;
	font-size: 11px;
}

dd a:hover {
	background-color:#FF9;
}

.clear {
	clear: both;
}