body{
margin:auto;
background: url(./picker_comics/bg.jpg) repeat;
font:14px verdana, sans-serif;

}

A:link {
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000000;      
background-color: inherit;
}

A:visited {
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000000;      
background-color: inherit;
}
A:active {
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000000;      
background-color: inherit;
}
A:hover {
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight:bold;
color: #9D3B32;      
background-color: inherit;
}

a img{
border: none;
margin-right:3px;
margin-bottom:12px;
}

#nav {
margin: 0;
padding: 0;
list-style: none;
display: inline;
overflow: hidden;
width: 271px;
}
#nav li {
margin: ;
padding: 0;
list-style: none;
display: inline;
width: 271px;
float: left;
}

#nav a.home {
float: left;
background: url(./picker_comics/b_home.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.home:hover {
float: left;
background: url(./picker_comics/b_home2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.home:active {
float: left;
background: url(./picker_comics/b_home2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.home2 {
float: left;
background: url(./picker_comics/b_home2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.home2:hover {
float: left;
background: url(./picker_comics/b_home2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.home2:active {
float: left;
background: url(./picker_comics/b_home2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.comix {
float: left;
background: url(./picker_comics/b_comix.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.comix:hover {
float: left;
background: url(./picker_comics/b_comix2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.comix:active {
float: left;
background: url(./images/b_comix2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.comix2 {
float: left;
background: url(./picker_comics/b_comix2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.comix2:hover {
float: left;
background: url(./picker_comics/b_comix2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.comix2:active {
float: left;
background: url(./picker_comics/b_comix2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.flyer {
float: left;
background: url(./picker_comics/b_flyer.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.flyer:hover {
float: left;
background: url(./picker_comics/b_flyer2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.flyer:active {
float: left;
background: url(./picker_comics/b_flyer2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.flyer2 {
float: left;
background: url(./picker_comics/b_flyer2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.flyer2:hover {
float: left;
background: url(./picker_comics/b_flyer2.gif) no-repeat;
width: 200px;
height: 50px;

}
#nav a.flyer2:active {
float: left;
background: url(./picker_comics/b_flyer2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.pinsel {
float: left;
background: url(./picker_comics/b_pinsel.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.pinsel:hover {
float: left;
background: url(./picker_comics/b_pinsel2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.pinsel:active {
float: left;
background: url(./picker_comics/b_pinsel2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.pinsel2 {
float: left;
background: url(./picker_comics/b_pinsel2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.pinsel2:hover {
float: left;
background: url(./picker_comics/b_pinsel2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.pinsel2:active {
float: left;
background: url(./picker_comics/b_pinsel2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.bleistift {
float: left;
background: url(./picker_comics/b_bleistift.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.bleistift:hover {
float: left;
background: url(./picker_comics/b_bleistift2.gif) no-repeat;
width: 205px;
height: 50px;
}
#nav a.bleistift:active {
float: left;
background: url(./picker_comics/b_bleistift2.gif) no-repeat;
width: 205px;
height: 50px;
}

#nav a.bleistift2 {
float: left;
background: url(./picker_comics/b_bleistift2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.bleistift2:hover {
float: left;
background: url(./picker_comics/b_bleistift2.gif) no-repeat;
width: 205px;
height: 50px;
}
#nav a.bleistift2:active {
float: left;
background: url(./picker_comics/b_bleistift2.gif) no-repeat;
width: 205px;
height: 50px;
}


#nav a.stuff {
float: left;
background: url(./picker_comics/b_stuff.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.stuff:hover {
float: left;
background: url(./picker_comics/b_stuff2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.stuff:active {
float: left;
background: url(./picker_comics/b_stuff2.gif) no-repeat;
width: 200px;
height: 50px;
}


#nav a.stuff2 {
float: left;
background: url(./picker_comics/b_stuff2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.stuff2:hover {
float: left;
background: url(./picker_comics/b_stuff2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.stuff2:active {
float: left;
background: url(./picker_comics/b_stuff2.gif) no-repeat;
width: 200px;
height: 50px;
}



#nav a.contact  {
float: left;
background: url(./picker_comics/b_contact.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.contact:hover  {
float: left;
background: url(./picker_comics/b_contact2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.contact:active  {
float: left;
background: url(./picker_comics/b_contact2.gif) no-repeat;
width: 200px;
height: 50px;
}


#nav a.contact2  {
float: left;
background: url(./picker_comics/b_contact2.gif) no-repeat;
width: 200px;
height: 50px;
}
#nav a.contact2:hover  {
float: left;
background: url(./picker_comics/b_contact2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.contact2:active  {
float: left;
background: url(./picker_comics/b_contact2.gif) no-repeat;
width: 200px;
height: 50px;
}


#nav a.linksbutton   {
float: left;
background: url(./picker_comics/b_links.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.linksbutton:hover   {
float: left;
background: url(./picker_comics/b_links2.gif) no-repeat;
width: 200px;
height: 50x;
}

#nav a.linksbutton:active  {
float: left;
background: url(./picker_comics/b_links2.gif) no-repeat;
width: 200px;
height: 50px;
}


#nav a.linksbutton2   {
float: left;
background: url(./picker_comics/b_links2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.linksbutton2:hover   {
float: left;
background: url(./picker_comics/b_links2.gif) no-repeat;
width: 200px;
height: 50x;
}

#nav a.linksbutton2:active  {
float: left;
background: url(./picker_comics/b_links2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.criticsbutton  {
float: left;
background: url(./picker_comics/b_shirts.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.criticsbutton:hover   {
float: left;
background: url(./picker_comics/b_shirts2.gif) no-repeat;
width: 200px;
height: 50x;
}

#nav a.criticsbutton:active  {
float: left;
background: url(./picker_comics/b_shirts2.gif) no-repeat;
width: 200px;
height: 50px;
}


#nav a.criticsbutton2   {
float: left;
background: url(./picker_comics/b_shirts2.gif) no-repeat;
width: 200px;
height: 50px;
}

#nav a.criticsbutton2:hover   {
float: left;
background: url(./picker_comics/b_shirts2.gif) no-repeat;
width: 200px;
height: 50x;
}

#nav a.criticsbutton2:active  {
float: left;
background: url(./picker_comics/b_shirts2.gif) no-repeat;
width: 200px;
height: 50px;
}

#layout{
margin:auto;
background: transparent;
width: 950px;
}
/*                                                               Überschrift  
                                                          ------------------------ */      
#head{
margin:auto;
color:black;
background: url(./picker_comics/namenszug2.gif) no-repeat;
width: 890px;
height: 130px;
margin-left: 5px;
}

#content{
margin:auto;
background: transparent;
}

#left{
float: left;
margin: 0px;
font:11px verdana, sans-serif;
color:#FFFFFF;
width: 271px;
height: 10px;
background-color: transparent;
padding:0px;
}
/*                                                                Center
                                                          -------------------------*/
#center{
float: left;
margin: 0px;
font:11px verdana, sans-serif;
color:#FFFFFF;
width: 250px;
height: 350px;
background: url(picker_comics/center.gif) no-repeat;
background-color:transparent;
padding:30px;
margin-left: 29px;
}
#center3{
float: left;
margin: 0px;
font:11px verdana, sans-serif;
color:#FFFFFF;
width: 250px;
height: 350px;
background: url(picker_comics/bg.gif) no-repeat;
background-color:transparent;
padding:30px;
margin-left: 29px;
}
#right{
float: right;
margin-left:0px;
margin-right:0px;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #000000;      
width: 320px;
height: 450px;
background: url(picker_comics/character21.gif) no-repeat right bottom;
padding:0px 0px 0px 0px;
}

#center2{
float: left;
margin: 0px;
font:11px verdana, sans-serif;
color:#FFFFFF;
width: 250px;
height: 350px;
background: url(picker_comics/center6.gif) no-repeat;
background-color:transparent;
padding:30px;
margin-left: 29px;
}


form {
font-family: Verdana, sans-serif;
font-size: 14px;
color: #000000;      
background-color: transparent;
}

.inputbox {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 12px;
color            : #333333;
background       : #FEF4EA;
padding          : 2px;
border           : 1px solid;
border-color     : #9D3B32;
margin-top       : 2px;
margin-bottom       : 4px;
}

.button {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 12px;
color            : #000000;
font-weight      : bold;
border           : 1px solid;
border-color     : #5C502A;
background       : url("picker_comics/button_form_01.gif") repeat;
padding          : 2px 2px 3px 2px;
margin-top       : 1px;
}

.button:hover {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 12px;
color            : #000000;
font-weight      : bold;
border           : 1px solid;
border-color     : #5C502A;
background       : url("picker_comics/button_form_02.gif") repeat;
padding          : 2px 2px 3px 2px;
margin-top       : 1px;
}



#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	  
	width: 250px;
	height: 250px;
	margin: 0 auto;
	border: 2px solid #000000;
	}

#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: transparent url(picker_comics/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(picker_comics/back.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(picker_comics/next.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 11px Verdana, Helvetica, sans-serif;
    color: #3E3E3E;
    font-weight: bold; 
    background-color: #E8E4DB;
	margin: 0 auto;
    padding:4px 0px 4px 0px;
    border: 2px solid #000000;
    border-top: 0px solid #000000;
	}

#imageData{
	padding:0 10px; 
	}
#imageData #imageDetails{ text-align:center; width: 92%; float: left; margin-bottom:5px; }	
#imageData #caption{ text-align:center; font-weight: normal;	}
#imageData #numberDisplay{ text-align:center; display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavshirt{ width: 25px; float: left;  margin-left: -93%; padding-bottom: 1.0em;	}
#imageData #bottomNavClose{ width: 25px; float: right; margin-right: -1%; padding-bottom: 1.0em;	}	
#imageData #bottomNavcharactershirt{ width: 110px; float: right;  margin-right: 72%; padding-bottom: -5.0em;	}


	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: transparent;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

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

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	
	
	/*                                    Formular-code 
       -------------------------------------------------------------------------------------*/

       	form.cmxform fieldset { 
background: url("picker_comics/hi_bg.gif") repeat; 
margin-bottom: 10px; 
border: 1px solid;
border-color: #748B6A;} 

form.cmxform legend { 
background:#748B6A;   
color: #F1ECDA;
padding: 2px 5px 3px 5px; 
font-weight: bold; 
border: 1px solid;
border-color:#748B6A;} 

form.cmxform label { 
display: inline-block; 
line-height: 1.8; 
vertical-align: top; 
font-weight: bold; 
} 
form.cmxform fieldset ol { 
margin: 2; 
padding: 0; 
} 

form.cmxform fieldset li { 
list-style: none; 
padding: 2px; 
margin: 0; } 

form.cmxform fieldset fieldset { 
border: none; 
margin: 1px 0 0; 
} 
form.cmxform fieldset fieldset legend { 
padding: 0 0 2px; 
font-weight: normal;
} 

form.cmxform fieldset fieldset label { 
display: block; 
width: auto; 
} 

form.cmxform label { 
width: 10px; /* Width of labels */ 
} 

form.cmxform fieldset fieldset label { 
margin-left: 1px;
/* Width plus 3 (html space) */ 
}

.button {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 11px;
color            : #5C502A;
border           : 1px solid;
border-color     : #5C502A;
background       : url("picker_comics/h1_bg.gif") repeat;
padding          : 3px 2px 5px 2px;
margin-top       : 1px;
margin-left       : 2px;
}

.button:hover {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 11px;
color            : #B7A362;
border           : 1px solid;
border-color     : #5C502A;
background       : url("picker_comics/h1_bg_hover.gif") repeat;
padding          : 3px 2px 5px 2px;
margin-top       : 1px;
margin-left       : 2px;
}

.inputbox2 {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 11px;
color            : #333333;
background       : #F7F5ED;
padding          : 2px;
border           : 1px solid;
border-color     : #7F7045;
margin-top       : 2px;
margin-bottom       : 4px;
margin-left       : 0px;
}

 


.select {
font-family      : Verdana, Arial, Helvetica, Times,serif;
font-size        : 11px;
color            : #333333;
background       : #F7F5ED;
padding          : 1px;
border           : 1px solid;
border-color     : #7F7045;
margin-top       : 1px;
margin-bottom       : 2px;
}

form {
font-family: Verdana, sans-serif;
font-size: 11px;
color: #333333;      
background-color: #F1ECDA;
padding: 6px;
border           :2px solid;
border-color     : #000000;
}

