/* normalizing styles */
body, div, d1, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, input, p, blockquote, th, td { 
margin: 0; padding: 0; 
}
h1, h2, h3, h4, h5, h6 { 
font-size: 100%;
padding: 0;
margin: 0;
}
ol, ul {
list-style-type: none;
}
adress, caption, cite, code, dfn, em, th, td, var {
font-style: normal; 
font-weight: normal;
}
table {
border-collapse: collapse; 
border-spacing: 0;
}
fieldset, img {
border: 0;
}
caption, th {
text-align: left;
}
q:before, q:after { content: ''; 
}
form {
padding: 0;
margin: 0;
}
/* /normalizing */


/* layout */
html { 
height: 100%;
}

body {
font-size: 12px;
font-family: Arial, Helvetica, SunSans-Regular, Sans-Serif;
background: url(../images/body_htg.jpg) repeat-x 2px 0 #292a2a;
color:#333;  
text-align:center;
margin:0;
padding:0;
height: 100%;
}

#container_box {
background: url(../images/header_htg.png) no-repeat;
margin: 0px auto;
padding: 0;
width: 970px;
height: auto;
}

#branding {
padding: 0;
margin: 30px 0 0 30px;
height: 90px;
width: 210px;
float: left;
background:url(../images/all4foto_logo.jpg) no-repeat 10px 0 transparent;
overflow: hidden;
}

#branding a {
text-indent: -2000px;
height: 70px;
background-position: top;
display: block;
}

#nav_quick {
float: left;
padding: 0;
margin: 67px 0 0 0;
width: 600px;
height: 40px;
text-align: right;
float: right;
padding-right: 30px;
}

#nav_quick ul{
float: right;
}

#nav_quick li{
float:left;
padding: 2px 10px 0 25px;
margin-left: 8px;
height: 18px;
border-right: solid 1px #ccc;
}

#nav_quick a {
color: #666;
text-decoration: none;
}

#nav_quick a:hover {
color: #ff6600; 
}

#nav_quick li.database {
background: url(../images/bullet_database.gif) no-repeat;
}

#nav_quick li.contact {
background: url(../images/bullet_contact.gif) no-repeat;
}

#nav_quick li.imprint {
background: url(../images/bullet_imprint.gif) no-repeat;
border: none;
}

#nav_quick li.lange_de {
background: url(../images/bullet_de.gif) no-repeat;
}

#nav_quick li.lange_en {
background: url(../images/bullet_en.gif) no-repeat;
border: none;
}

#nav_quick li.de_current {
background: url(../images/bullet_de_current.gif) no-repeat;
}

#nav_quick li.en_current {
background: url(../images/bullet_en_current.gif) no-repeat;
}

.sprites {
position: relative;
background: no-repeat;
clear: both;
margin: 0 40px 0 40px;
height: 150px;
width: 890px;
}

img#sprites {
width:890px;
height: 150px;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 6;
}

img#filter {
width:890px;
height: 150px;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 8;
}

div.shadow {
background: url(../images/shadow.png) no-repeat;
height: 150px;
width: 890px;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

#content_box {
background: url(../images/content_htg.gif) repeat-x bottom left #fff;
width:950px;
margin: 9px 10px 0 10px;
padding: 0 0 70px 0;
text-align:left;
display: block;
}

#content_main ul {
list-style-type: none;
}
#content_main ul li {
background: url(../images/bullet.gif) no-repeat 0 4px;
padding-left: 15px;
}

#nav_main {
background-color: #333333;
background-position: top left;
width: 890px;
height: 50px; 
margin: 0 40px 0 40px;
padding: 0px;
}

#nav_main ul {
margin: 0;
overflow: hidden;
}

#nav_main li {
float: left;
margin: 0;
padding: 0;
}


#nav_main .main_list li  a { 
background:url(../images/main_nav_de.jpg);
text-indent: -3000px;
display: block; 
height: 50px; 
width: 178px;
background-repeat: no-repeat;
font-weight: bold;
color: #5e5e5e;
font-size: 14px;
}

#nav_main ul.main_list li.hover a {
background:url(../images/main_nav_de_hover.jpg);
color: #952011;
text-decoration: none;
}

#nav_main .main_list li.current a { 
background:url(../images/main_nav_de_current.jpg);
}

#nav_main .main_list li  a.cat2_de,
#nav_main .main_list li.hover  a.cat2_de { 
background-position: 0 0;
}

#nav_main .main_list li  a.cat3_de,
#nav_main .main_list li.hover  a.cat3_de { 
background-position: -178px 0;
}

#nav_main .main_list li  a.cat4_de,
#nav_main .main_list li.hover  a.cat4_de { 
background-position: -356px 0;
}

#nav_main .main_list li  a.cat5_de,
#nav_main .main_list li.hover  a.cat5_de { 
background-position: -534px 0;
}

#nav_main .main_list li  a.cat6_de,
#nav_main .main_list li.hover  a.cat6_de { 
background-position: -712px 0;
}


#nav_main  .main_list ul.menu_list_sub { 
position: absolute;
display: none;
z-index: 100;
background: url(../images/main_nav_layer.png) 0 0 repeat-x; 
text-align: left;
padding-top: 10px;
}

#nav_main .main_list ul.menu_list_sub li { 
float: none; 
overflow: hidden; 
width: auto; 
height: 30px;
}

#nav_main .main_list ul.menu_list_sub li a { 
width: auto;
text-indent: 0px;
display: block;
background: url(../images/layer_bullet.gif) no-repeat 11px 0;
padding: 0 10px 0 35px; 
color: #c9c9c9; 
font-weight: bold;
}

#nav_main .main_list ul.menu_list_sub li a:hover {
width: auto;
text-indent: 0px;
display: block;
background: url(../images/layer_bullet_hover.gif) no-repeat 11px 0;
color: #ff6600; 
text-decoration: none; 
}

#nav_spacer {
margin: 0;
padding: 0;
width: 1px;
float: left;
}

#nav_sub {
margin: 25px 0 0 0;
padding: 0 0 0 0;
width: 207px;
float: left;
}

#nav_sub ul {
margin: 0 0 0 30px;
}

#nav_sub ul li {
padding: 8px 0 0 25px;
background:url(../images/nav_sub.png) no-repeat;
height: 28px;
line-height: 19px;
}

#nav_sub ul li.current {
background:url(../images/nav_sub_current.png) no-repeat;
}

#nav_sub ul li a {
color: #666;
font-weight: bold;
text-decoration: none;
}

#nav_sub ul li a:hover {
color: #ff6600;
}

#nav_sub ul li.third_level {
background:none;
padding: 4px 0 0 25px;
margin-top: -5px;
}

#nav_sub ul li.third_level .current {
color: #ff6600;
}

#content_main {
margin: 25px 15px 0 15px;
padding-bottom: 50px;
width: 520px;
height: 100%;
float: left;
}

img.content_spacer {
height: 250px;
float: left;
}

#content_teaser {
width: 158px;
margin: 15px 0 0 0;
float: left;
background:url(../images/teaser_top.png) no-repeat 0 43px;
}

#content_teaser h2 {
color: #FF6600;
font-size: 16px;
padding-top: 10px;
}

div.news_teaser {
width: 150px;
margin-left: 8px;
}

div.news_teaser p span {
width: 150px;
height: 30px;
display:block;
background:url(../images/teaser_sub.png) no-repeat 0 bottom;
}

#content_teaser div.news_teaser h2 {
color: #333;
font-size: 13px;
padding-bottom: 4px;
}

.info {
padding-bottom: 20px;
}

.info span.imagetext {
display: block;
color: #666666;
}

div.customer_quote {
background:url(../images/customer_htg.gif) no-repeat;
padding: 22px 1px 10px 27px;
margin-top: 30px;
}

div.customer_quote p {
width: 325px;
color: #ff6600;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

div.customer_quote span.customer,
div.customer_quote span.company  {
color: #000;
display: block;
}

div.customer_quote span.apo {
background:url(../images/apostroph.gif) no-repeat 0 1px;
width: 18px; 
height: 18px;
line-height: 18px;
display: inline-block;
}

div.customer_quote img {
float: right;
margin-right: 15px;
padding: 1px;
}

div.customer_logos img {
float: left;
border: solid 1px #cccccc;
margin: 12px 25px 12px 0;
}

div.customer_logos { 
margin-top: 0px;
}

span.copyright {
font-size: 11px;
color: #666666;
}

p.info a.infolink {
padding-left: 26px;
background:url(../images/link.gif) no-repeat 0 3px;
}

#site_info { 
text-align: right;
padding-right: 20px;
margin-top: 10px;
}

#site_info a {
line-height: 20px;
color: #4d4d4d;
text-decoration: none;
}

#site_info a:hover {
color: #fff;
}

a:link { text-decoration: none; color:#ff6600; }  
a:visited { text-decoration: none; color:#ff6600; } 
a:hover { text-decoration: underline; color:#000; }
a:active { text-decoration: none; color:#ff6600; }
a:focus { text-decoration: none; color:#ff6600; } 


h1 {
font-size: 20px;
}

h2 {
font-size: 16px;
color: #666;
padding-bottom: 20px;
}

h2 span.cat {
color: #ff6600
}

h3 {
font-size: 14px;
}

h3.news {
margin-bottom: 3px;
}

h4 {
font-size: 12px;
}

h4.date {
font-size: 12px;
font-weight: normal;
font-style: italic;
margin: 0;
padding: 0 0 5px 0;
}

span.cat {
background:url(../images/hcat.gif) no-repeat top right;
padding-right: 7px;
margin-right: 8px;
}

p {
padding: 0px;
margin: 0 0 15px 0;
line-height: 18px;
}

.small {
font-size: 10px;
}

#news {
width: 120px; 
height: 15px; 
margin: 10px 0 0 0px;
font-size: 11px;
line-height: 12px;
}

hr {
 border: 0px; /* Für Firefox und Opera */
 background: url(../images/line.gif) no-repeat;
 margin-bottom: 25px;
}

ul.profile span.title { width: 100px; display:block; float: left; font-weight: bold; }
ul.profile li { clear: both; }
li.profits ul, li.results ul, li.bike ul, li.wheels ul, li.team-members ul { padding-left: 100px;}

.vcard {
padding-bottom: 30px;
}

ul.agb h3 {
padding-top: 20px;
}

.flRight {
float: right;
margin-left: 10px;
}

.flLeft {
float: left;
margin-right: 10px;
}

.flRight img,
.flLeft img {
background-color: #FFF;
border: 1px solid #CCC;
padding: 5px;
}

span.image { margin-bottom: 20px;}

/* Kontaktadressen */

address span,
div.web_contact span {
font-style: normal;
line-height: 20px;
}

address span.type,
div.web_contact span.type {
font-weight: bold;
display: block;
margin-top: 14px;
padding-left: 25px;
}

address .adr span.type {
background: url(icon_kontakt_adresse.gif) no-repeat;
}

address .adr span.org {
border-right: solid 1px #333333;
padding-right: 4px;
}

address .adr span.fn {
padding-left: 4px;
}

address .adr span.street-address {
display: block;
}

address .tel span.type {
background: url(icon_kontakt_office.gif) no-repeat;
}

address .mobile span.type {
background: url(icon_kontakt_handy.gif) no-repeat;
}

address .fax span.type {
background: url(icon_kontakt_fax.gif) no-repeat;
}

div.web_contact .formular span.type {
background: url(icon_kontakt_mail.gif) no-repeat;
}

div.web_contact .xing span.type {
background: url(icon_kontakt_xing.gif) no-repeat;
}

div.web_contact .skype span.type {
background: url(icon_kontakt_skype.gif) no-repeat;
}

/*
.vcard, .adr, .org, .fn, .street-address, .postal-code, .locality, .country-name, .tel, .type, .value, .email, .url {
font-style: normal;
line-height: 20px;

}

.type {
font-style: bold;
}*/

/* Kontaktformular */

div.formgen { 
margin: 0; 
padding: 0; 
width: 520px;
}

div.formgen div.formblock { 
margin: 0; 
padding: 6px 0 10px 0; 
width: 245px; 
}

div.formgen #form0,
div.formgen #form2,
div.formgen #form4,
div.formgen #form6,
div.formgen #form7,
div.formgen #form81,
div.formgen #form101 {
float: left;
}

div.formgen #form1,
div.formgen #form3,
div.formgen #form5,
div.formgen #form91 {
float: right;
}


div.formgen label { 
font-family: Arial, Helvetica, sans-serif;
height: 20px;
padding: 0;
margin: 0;
font-weight: bold;
display: block;
}

div.formgen input.formtext {
height: 18px;
padding: 1px;
width: 240px;
border: 1px solid #B4B4B4;
}

div.formgen div#form6 {
width: 520px;
}

div.formgen div#form6 input.formtext {
width: 516px;
}

div.formgen div#form7 {
width: 520px;
clear: both;
}

div.formgen div#form7 .formtextfield {
width: 518px;
height: 140px;
border: solid 1px #b4b4b4;
clear: both;
}

/* START special positioning */
div.formgen div#form8 {
position: relative;
float: right;
height: 75px;
border: solid 0px red;
}

div.formgen div#form8 span.newscheck {
float: left;
height: 50px;
display: block;
margin: 0 4px 0 0;
border: solid 0px red;
}

div.formgen div#form8 span.newshint {
font-size: 10px;
display: block;
width: 200px;
}

div.formgen div#form9 {
position: relative;
float: left;
height: 50px;
top: 20px;
border: solid 0px pink;
}

div.formgen div#form9 span.captcha {
width: 112px;
font-size: 10px;
display: block;
float: left;
line-height: 16px;
}

div.formgen div#form9 img.formcaptcha {
float: right;
border: solid 1px #666666;
margin-right: 1px;
}

div.formgen div#form10 {
position: relative;
float: left;
height: 75px;
top: -66px;
border: solid 0px green;
}

div.formgen div#form10 input#el_10 {
position: relative;
top: 40px;
font-family: courier new;
font-size: 16px;
letter-spacing: 1px;
}
/* END special positioning */

#formsubmit {
width: 518px;
height: 60px;
padding: 0;
position: relative;
top: -30px;
clear: both;
}

input.formsubmit { 
background:url(../images/senden.gif) 0 2px no-repeat; 
float: right;
padding: 0; 
border: 0; 
height: 36px; 
width: 177px;
color: #fff;
font-weight: bold;
cursor: pointer;
}

#formsubmit small { 
float: left;
}

label.formerror {
color: #ff6600;
}

.forminfo {
background-color: #fff;
color: #ff6600;
padding: 4px 0 4px 0;
margin-bottom: 10px;
width: 520px;
font-weight:bold;
}

#form-module-thanks { padding: 10px 0 30px 0; }

/* soft login image database */
#softlogin {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1000;
 display: none; 
 background-color: black; 
 color: #fff;
}

#softloginForm h3 {
color: #666;
font-size: 16px;
text-align: left;
text-indent: 100px;
padding: 30px 0 10px 0;

}

#softloginForm {
width: 450px;
height: 320px;
background: #FFF url(../images/content_htg.gif) repeat-x scroll left top;
z-index: 2000;
display: none;
}

#softloginForm  label {
text-align: left;
display: block;
}

#softloginForm  .formblock {
height: 65px;
margin: 0 auto;
padding: 0;
}

#softloginForm  #formUsername, 
#softloginForm  #formPassword {
height: 60px;
}

#softloginForm .forminfo {
width: 245px;
display: none;
text-align: left;
}

#softloginForm  #formerror {
height: 35px;
}

#softloginForm  .error {
border: solid 1px #FF6600;
}

#softloginForm  #formfooter {
width: 347px;
height: 30px;
float: right;
}

#softloginForm  #formfooter small {
float:left;
}

#softloginClose {
float: right;
cursor: pointer;
margin-right: 12px;
}


/* general lightbox styles */
#lightbox{	position: absolute;	left: 0; margin-top: -30px; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; margin-top: 10px;}
#nextLink { right: 0; float: right; margin-top: 10px; margin-right: 10px;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.png) 10px center no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.png) right center no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* custom lightbox styles */
div.lightbox_thumb {
  width: 95px;
  height: 95px;
  overflow: hidden;
  padding: 5px 0 0 5px;
  margin: 0 28px 28px 0;
  border: solid 1px #ccc;
  background-color: #fff;
  float: left;
}

div.lightbox_thumb img, div.lightbox_thumb a  {
  width: 90px !important;
  height: 90px  !important;
}

div.lightbox_thumb a {
  display: block;
  text-indent: -500px;
}


/* image carousel */

/* Copyright (c) 2006-2007, Bill W. Scott */
/* custom styles */
#mycarousel { 
  width: 520px !important; 
  height: 130px !important;
  margin-top: 50px;
}

div.carousel-clip-region { 
   width: 453px !important;
   height: 130px !important; 
   padding-left: 5px;
   background: url(../images/carousel_region.png) no-repeat;
}

div.carousel-clip-region ul.carousel-list { 
 margin-top: 8px;
 }

div.carousel-prev {
  float:left;
  cursor: pointer;
}

div.carousel-next {
  float: right;
  cursor: pointer;
}

li.carousel_thumb {
  background-image: none !important;
  list-style-type: none;
  padding-left: 0px !important;
}

li.carousel_thumb img, li.carousel_thumb a  {
  width: 90px !important;
  height: 90px  !important;
  text-indent: -500px;
}

li.carousel_thumb a {
  display: block;
}

li.carousel_thumb span {
  width: 95px;
  height: 95px;
  margin: 5px 0 0 5px;
  padding: 5px 0 0 5px;
  border: solid 1px #ccc;
  background-color: #fff;
  display: block;
}
/**/
 
.carousel-component { 
	position:relative;
	overflow:hidden;   /* causes the clipping */
	display:none; /* component turns it on when first item is rendered */
}
				
.carousel-component ul.carousel-list { 
	width:10000000px;
	position:relative;
	z-index:1;
}

.carousel-component .carousel-list li { 
	float:left;
	list-style:none;
	overflow:hidden;
	margin-left: 10px;
	width: 112px;
	height: 112px;
}

.carousel-component .carousel-clip-region { 
	overflow:hidden; /* Secret to the clipping */
	margin:0px auto;
	position:relative; 
}

/**
 * ==============================================================================
 * Safe to override. It is safe to override background, padding, margin, color,
 * text alignment, fonts, etc. Define a separate CSS file and override your style
 * preferences.
 **/

.carousel-component { 
	padding:0px;
	color:#618cbe;
	border: solid 0px red;
}
.carousel-component ul.carousel-list { 
	margin:0px;
	padding:0px;
	line-height:0px;
}
.carousel-component .carousel-list li { 
	text-align:center;
	margin:0px;
	padding:0px;
	font:10px verdana,arial,sans-serif;
	color:#666;
}
.carousel-component .carousel-vertical li { 
}
.carousel-component ul.carousel-vertical { 
}


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}