@charset "UTF-8";
/* CSS Document */

   body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #fffff9;
    	margin: 0; 
    	padding: 0;
    	text-align: left; 
    	color:#ffffff;
		background-position:260px 0;
	background-attachment:fixed;
	background-repeat:no-repeat;
		 overflow-y: scroll;
			  letter-spacing: 0.2px;
    }
	
	* + html body {
    overflow: hidden;
}
* html body {
    overflow: hidden;
}
	
		a:active, a:focus {
    outline: medium none;
}

img {
    border: 0 none;
    outline: 0 none;
}
	
.vita, .schmuck {
	background-image:url(../images/backs/anette_kley_start.jpg);
    }
	
	.service, .altgold {
	background-image:url(../images/backs/altgold.jpg);
    }
	
	.kontakt {
	background-image:url(../images/backs/kontakt.jpg);
    }
	
	.impressum {
	background-image:url(../images/backs/impressum.jpg);
    }
	
	.start {
	background-image:url(../images/backs/index.jpg);
    }
	
#container { 
    	width: 100%;  
    	margin: 0; 
    	border: 0px solid #000000;
    	text-align: left; 
		font-size:13px;
		line-height:18px;
    } 
	
	.small { 
		font-size:11.5px;
		line-height:17px;
    } 
    
  #left {
    	float: left; 
    	width: 12em; 
    	padding: 15px 0; 
 }   

#mainContent {
    margin: 125px 0 0 200px;
    width: 310px;
    height: 100%;
    padding: 125px 40px 60px 120px;
}
	
	.start #mainContent{ 
background-image:url(../images/backs/gruen.png);
height:360px;
    } 
	 .vita #mainContent { 
background-image:url(../images/backs/gruen.png);
    } 
	.schmuck #mainContent { 
background-image:url(../images/backs/schwarz.png);
    width: 700px;
    height: 100%;
    padding: 125px 40px 200px 120px;
    } 
	.service #mainContent, .altgold #mainContent { 
background-image:url(../images/backs/rot.png);
height:360px;
    } 
	
	.kontakt #mainContent { 
background-image:url(../images/backs/tuerkis.png);
height:360px;
    } 
	
	.impressum #mainContent { 
background-image:url(../images/backs/gruen.png);
    } 
    
    /* Verschiedene wieder verwertbare Klassen */
    .fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }

   p
{
padding:0 0;
}
a
{ 
  	color:#ffffff;
text-decoration:underline;
}
a:hover
{ 
color:#362e23;
text-decoration:underline;
}

#oben
{
position:absolute;
top:20px;
left:20px;
width:370px;
height:200px;
background-repeat:no-repeat;
}

.start #oben
{
background-image:url(../images/oben_index.jpg);
}

.vita #oben, .schmuck #oben
{
background-image:url(../images/oben.jpg);
}

.service #oben, .altgold #oben
{
background-image:url(../images/service.jpg);
}

.altgold #oben
{
background-image:url(../images/altgold.jpg);
}

.kontakt #oben
{
background-image:url(../images/kontakt.jpg);
}

.impressum #oben
{
background-image:url(../images/impressum.jpg);
}

h1
{
		font-size:13px;
		line-height:17px;
}

.start #bild
{
	   margin: -55px -15px -40px 0;
    text-align: right;
}

.schmuck #mainContent img{
border: 2px solid #FFFFF9;
    margin: 15px 15px 0 0;
}

#mainContent li
{
   margin-left: -25px;
}
#mainContent #bild
{
  width:109px;
  height:100px;
  float:right;
     margin-top: -60px;
    margin-right: -20px;
}