/* ===============================================================================
Stylesheet für Miss Tula Trash - Stand Januar 2010
Aufbau 1. Kalibrierung und allgemeine Styles
       2. Styles für Layoutbereiche
	   3. Sonstige Styles
================================================================================= */

/* =======================================
Kalibrierung und allgemeine Styles
========================================= */

/* Kalibrierung der wichtigsten Abstände */
* { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 0.7em; }
h3 { margin-bottom: 0.5em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }

/* Allgemeine Selektoren */
body { 
   color: white; /* Schriftfarbe */
   background-image:url(images/misstula_hintergrund.gif); /* Hintergrundbild */
   background-color:black;
   font-family: Arial, Helvetica, sans-serif; 
   font-size: small; /* Schriftgröße */ 
}

h1 { font-size: 150%; }
h2 { font-size: 140%; }
h3 { font-size: 140%; }

address {
text-align: center;
font-style: normal;
font-size: 80%;
letter-spacing: 2px;
line-height: 1.5em;
}

/* Hyperlinks allgemein */
a {color: #ee1a98; text-decoration: none; border-bottom: 1px solid #ee1a98; outline: 0; }
a:link {color: #ee1a98; }
a:visited {color: #ee1a98; }

/* Allgemeine Klassen und IDs */
.skiplink {
position: absolute;
top: -2000px;
left: -3000px;
width: 0px;
height: 0px;
overflow: hidden;
display: inline;
}

#logo {
color: black;
}

.bildlinks {
float:left;
padding: 3px;
border: 5px solid #ccc;
margin-right: 10px;
margin-bottom: 10px;
}
.bildrechts {
float:right;
padding: 3px;
border: 5px solid #ccc;
margin-bottom: 10px;
margin-left: 10px;
}
.clearing { clear: both; }

/* ==========================
Styles für die Layoutbereiche 
=========================== */

#kopfbereich {
position:absolute;
top: 18px;
left: 40 px;
margin: 0 0 0 10px;
}

#menu{
position:absolute;
top: 42px;
left: 230px;
}
#menu ul { 
width: 740px;
}

#menu li  { 
display: inline;
list-style-type: none;
}

#menu a{
border: 0;
}

#menu #navi01 a {
display: block;
float: left;
width: 46px;
height: 38px;
background: transparent url(images/home.gif) 0 0 no-repeat;
}
#menu #navi01 a:hover {
background-position: 0 -39px;
}

#startseite #menu #navi01 a {
background-position: 0 -39px;
}

#menu #navi02 a{
display: block;
float: left;
margin-left: 25px;
width: 62px;
height: 38px;
background: transparent url(images/events.gif) 0 0 no-repeat;
}

#menu #navi02 a:hover {
background-position: 0 -39px;
}

#events #menu #navi02 a,
#events_09 #menu #navi02 a,
#events_08 #menu #navi02 a {
background-position: 0 -39px;
}

#menu #navi03 a{
display: block;
float: left;
margin-left: 25px;
width: 68px;
height: 38px;
background: transparent url(images/gallery.gif) 0 0 no-repeat;
}

#menu #navi03 a:hover {
background-position: 0 -39px;
}

#gallery #menu #navi03 a,
#gallery_02 #menu #navi03 a,
#gallery_03 #menu #navi03 a,
#gallery_04 #menu #navi03 a,
#gallery_05 #menu #navi03 a,
#gallery_06 #menu #navi03 a,
#gallery_07 #menu #navi03 a,
#gallery_08 #menu #navi03 a,
#gallery_09 #menu #navi03 a,
#gallery_events #menu #navi03 a 
  {
background-position: 0 -39px;
}

#menu #navi04 a{
display: block;
float: left;
margin-left: 25px;
width: 50px;
height: 38px;
background: transparent url(images/story.gif) 0 0 no-repeat;
}

#menu #navi04 a:hover {
background-position: 0 -39px;
}

#story #menu #navi04 a {
background-position: 0 -39px;
}

#menu #navi05 a{
display: block;
float: left;
margin-left: 25px;
width: 54px;
height: 38px;
background: transparent url(images/studio.gif) 0 0 no-repeat;
}

#menu #navi05 a:hover {
background-position: 0 -39px;
}

#studio #menu #navi05 a {
background-position: 0 -39px;
}

#menu #navi06 a{
display: block;
float: left;
margin-left: 25px;
width: 67px;
height: 38px;
background: transparent url(images/contact.gif) 0 0 no-repeat;
}

#menu #navi06 a:hover {
background-position: 0 -39px;
}

#contact #menu #navi06 a {
background-position: 0 -39px;
}

#menu #navi07 a{
display: block;
float: left;
margin-left: 25px;
width: 67px;
height: 38px;
background: transparent url(images/friends.gif) 0 0 no-repeat;
}

#menu #navi07 a:hover {
background-position: 0 -39px;
}

#friends #menu #navi07 a {
background-position: 0 -39px;
}

#menu #navi08 a{
display: block;
float: left;
margin-left: 25px;
width: 96px;
height: 38px;
background: transparent url(images/disclaimer.gif) 0 0 no-repeat;
}

#menu #navi08 a:hover {
background-position: 0 -39px;
}

#disclaimer #menu #navi08 a {
background-position: 0 -39px;
}

#textbereich{
position:absolute;
top: 90px;
left: 230px;
width: 670px;
background-color: #000;
padding: 10px;
border: 1px dashed #FFF;
}

#galeriebereich{
position:absolute;
top: 90px;
left: 230px;
width: 670px;
}

#bildbereich{
position: absolute;
top: 90px;
left: 150px;
}

#newsbereich {
position:absolute;
top: 570px;
left: 210px;
}

#text_schmal{
position:absolute;
top: 102px;
left: 440px;
width: 460px;
background-color: #000;
padding: 10px;
border: 1px dashed #FFF;
}

#bild_gross{
position:absolute;
top: 102px;
left: 230px;
border: 1px solid #FFF;
}

#subnavi{
position:absolute;
top: 220px;
left: 10px;
width: 180px;
background-color: #000;
padding: 10px;
border: 1px dashed #FFF;
}

#subnavi li {
margin-bottom: 5px;
}

#subnavi a {
color: #FFF;
text-decoration: none; 
border-bottom: 1px solid #FFF; 
outline: 0;
}

#gallery #subnavi01 a,
#events #subnavi01 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_02 #subnavi02 a,
#events_09 #subnavi02 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_03 #subnavi03 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}


#gallery_04 #subnavi04 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_05 #subnavi05 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_06 #subnavi06 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_07 #subnavi08 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_08 #subnavi09 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_09 #subnavi10 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_10 #subnavi11 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}

#gallery_events #subnavi07 a{
color: #ee1a98;
text-decoration: none; 
border-bottom: 1px solid #ee1a98; 
outline: 0;
}


/* ======================
Sonstige Styles
======================= */

/*Linktext verstecken*/
.unsichtbar {
position: absolute;
left:-5000px;
top:-5000px;
display:inline;
height:0;
width:0;
}

/* Kontaktformular */
form {
background-color: #eee;
width: 370px;
padding: 20px;
border: 1px solid #8c8c8c;
}
label {
display: block;
cursor: pointer;
}
input#absender,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
height: 7em;
}
input#absender:focus,
textarea:focus {
background-color: #d9d9d9;
}

/* Galerie */
div.galerie {
overflow: hidden;
padding: 0 10px 10px 0;
margin: 0 3px 0 0;
}
* html div.galerie { height: 1%; } /* IE6 */

div.galerie img {
float: left;
padding: 0;
border: 1px solid #FFF;
margin-right: 10px;
}

/* News */
div.news {
float: left;
overflow: hidden;
width: 330px;
background-color: #000;
padding: 10px;
border: 1px dashed #FFF;
margin: 0 0 10px 20px;
}
* html div.news { height: 1%; } /* IE6 */

/* =Hoverbox Code */

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

/*.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}*/

.hoverbox img
{
	background: #fff;
	border-color: #fff;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 0px;
	vertical-align: top;
	width: 155px;
	height: 155px;
}

.hoverbox li
{
	background: #eee;
	/*border-color: #fff;
	border-style: solid;
	border-width: 1px;*/
	color: inherit;
	display: inline;
	float: left;
	margin: 0 10px 10px 0;
	padding: 0;
	position: relative;
}

.hoverbox .preview
{
	border-color: #fff;
	width: 220px;
	height: 160px;
}