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

body {
margin:0;
padding:0;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#515151;
text-align:center;
height:100%;  
font-size:13px;
background: url(../gfx/bg.jpg) repeat-x top center #fff;
}   

img {
border:none;
}

h1 {
font-size:26px;
color:#e2007a;
font-weight:normal;
margin:5px 0 23px 0;
line-height:32px;
} 

h2 {
font-size:17px;
color:#000000;
font-weight:normal;
margin:25px 0 11px 0;
} 

h3 {
font-size:15px;  
color:#e2007a;
font-weight:normal;
margin:5px 0 10px 0;
}

a {    
color:#515151;
font-weight:normal;
font-style:italic;
text-decoration:none; 
}

a:hover {    
color:#e2007a;  
text-decoration:underline;
}

a span {    
color:#e2007a;
font-weight:normal;
font-style:normal;
text-decoration:none; 
}

p {
margin:20px 0 20px 0;
}

p.def {
margin:20px 0 2px 0 !important;
font-style:italic;
color:#b3b3b3;
}

ul {
margin:10px 0 0 -15px;
}

#all {
position:relative;
margin:auto;  
width:965px;
text-align:left;
min-height:100%;
height:100%; 
}

#header {
padding:0 0 0 0; 
} 

#logo {    
float:left;  
}  

#suche {    
float:left;
background: url(../gfx/suche.jpg) no-repeat;
width:292px;
height: 105px; 
margin:17px 0 0 85px;     
-moz-box-shadow: 0 0 2em #fda4d5;
-webkit-box-shadow: 0 0 2em #fda4d5;
box-shadow: 0 0 2em #fda4d5;
}

.box_white {
border:1px solid #dadada;
padding:20px;
margin-bottom:20px;
font-family:Courier New;
font-size:12px;
}

.box_white span {
color:#e2007a; 
font-size:12px;
} 

.box_white b {
color:#b3b3b3;
font-style:italic;
font-weight:normal;  
font-family:Verdana,Arial,Helvetica,sans-serif;
}


/* ---------- Navi ------------ */

#navi {    
float:left;
padding:0 0 0 0;   
}
#navi span {   
color:#fff;
padding:0 20px 0 0;  
}   
#navi a {    
color:#fff; 
font-style:normal;
font-weight:normal;
text-decoration:none;
}   

div.parentBoxA, 
div.parentBoxB, 
div.parentBoxC, 
div.parentBoxD, 
div.parentBoxE {
float:left;
position:relative;
color:#fff;
padding:8px 0 14px 15px;
margin-left:0px;
font-size:17px; 
}

div.parentBoxA:hover, 
div.parentBoxB:hover, 
div.parentBoxC:hover, 
div.parentBoxD:hover, 
div.parentBoxE:hover {
background-color:#e3017d;
cursor:pointer; 
}

div.parentBoxA > div#childBoxA, 
div.parentBoxB > div#childBoxB, 
div.parentBoxC > div#childBoxC, 
div.parentBoxD > div#childBoxD, 
div.parentBoxE > div#childBoxE {
display:none;
visibility:hidden; 
}

div#childBoxA a:hover, 
div#childBoxB a:hover, 
div#childBoxC a:hover, 
div#childBoxD a:hover, 
div#childBoxE a:hover  {    
color:#000; 
}        

div#childBoxA div, 
div#childBoxB div, 
div#childBoxC div, 
div#childBoxD div, 
div#childBoxE div {    
float:left;  
padding:0 20px 0 0;
margin:2px 20px 0 0;
/* border-right:1px solid #FDA4D5; */    
font-size:15px;
min-height:60px;
}  

div#childBoxA div br, 
div#childBoxB div br, 
div#childBoxC div br, 
div#childBoxD div br, 
div#childBoxE div br {    
line-height:22px;
}    

div.parentBoxA:hover > div#childBoxA, 
div.parentBoxB:hover > div#childBoxB, 
div.parentBoxC:hover > div#childBoxC, 
div.parentBoxD:hover > div#childBoxD, 
div.parentBoxE:hover > div#childBoxE {
display:block;
visibility:visible; 
position:absolute;  
width:550px;
background-color:#e3017d;
padding:15px;
margin:8px 0 0 0; 
font-size:17px; 
font-weight:bold; 
z-index:1200;
}
 
div.parentBoxE:hover > div#childBoxE {
display:block;
visibility:visible; 
position:absolute;  
width:300px;
background-color:#e3017d;
padding:15px;
margin:8px 0 0 -100px !important; 
font-size:17px; 
font-weight:bold; 
z-index:1200;
}
div.parentBoxA:hover > div#childBoxA {
margin-left:-16px;
}

div.parentBoxB:hover > div#childBoxB {
margin-left:-50px;
}

div.parentBoxC:hover > div#childBoxC {
margin-left:-100px;
}

div.parentBoxD:hover > div#childBoxD {
margin-left:-180px;
}   

div.parentBoxE:hover > div#childBoxE {
margin-left:-200px;
}


/* ---------- Content ------------ */ 

#content { 
margin:40px 0 0 0;   
padding:0;  
width:965px; 
line-height:18px;
background: url(../gfx/bg_content.gif) repeat-x top center #fff;
padding-bottom:80px;  
}


#links {    
float:left;  
width:590px;
margin:0 13px 0 0; 
padding:10px 10px 30px 10px;
background-color:#fff;
}  

#links img {  
margin:0 0 0 0; 
}  

.csslernen {
position:absolute;
background: url(../gfx/css-lernen-ganz-einfach.png) no-repeat;
width:258px;
height:209px;
top:210px;
left:695px;
z-index:1000;     
}

#rechts {    
float:left;  
width:250px; 
background-color:#fff;
padding:115px 20px 80px 23px;
margin:50px 0 0 20px; 
-moz-box-shadow: 0 0 3em #b0b0b0;
-webkit-box-shadow: 0 0 3em #b0b0b0;
box-shadow: 0 0 3em #b0b0b0; 
font-size:12px;
}   
 
#rechts h2 {
font-size:12px;
color:#000000;
font-weight:normal;
margin:10px 0 0 0;
}  
 
#rechts a {
font-size:10px;
} 

.abc {
line-height:13px;
}


/* ---------- Footer ------------ */ 
       
#footer {
width:100%;
text-align:left;
margin-top:80px;
font-size:12px;
background:-moz-linear-gradient(bottom,#f1f1f1,#b3b3b3); /* Firefox */
background:-webkit-gradient(linear,left top,left bottom,from(#b3b3b3),to(#f1f1f1)); /* Chrome, Safari */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3',endColorstr='#f1f1f1'); /* Internet Explorer */ 
padding:0;    
color:#6e6e6e;
}

#footer img {
margin:4px 10px 10px 0;
float:left;
border:6px solid #e9e9e9;
}

#footer .zertifikate  {
margin:20px 0 80px 0;
}

#footer .zertifikate img {
margin:4px 10px 10px 0;
float:left;
border:6px solid #cbcbcb;
}

#footer h3 {
font-size:15px;   
color:#6e6e6e;
font-weight:normal;
margin:0 0 2px 0;
text-transform:none;
}

.footertext {     
width:990px;
margin:auto;
padding:40px 0;
}

.footerbox {      
float:left;         
width:420px;
margin:0 0 0 0;
padding:0 0 50px 0;
color:#6e6e6e; 
line-height:19px;
}

.footerbox .link {            
margin-top:10px;
}


.footertext ul {   
margin:10px 0 15px -40px;
}             

.footertext li {   
background-image:none;
list-style:none;
margin:0;
padding:0 0 3px 0;
}             

#footer .footertext a {
color:#868686;
text-decoration:none;
border-bottom:1px dotted #868686;
border-right:none;
padding:0 0 2px 0;
font-size:12px;
}

#footer a:hover {
color:#fff;
font-weight:normal;
}

table {
width:590px; 
border:1px solid #CBCBCB;  
margin:0 0 20px 0;   
}

table tr {   
}

table td {
vertical-align:top;
margin-right:20px;
padding:5px 5px 7px 10px;
border-right:1px solid #CBCBCB; 
border-bottom:1px solid #CBCBCB;
}



/* --------------------------------- */ 
/* ---------- Beispiele ------------ */ 
/* --------------------------------- */ 

     
div.eckenrundung {
-moz-border-radius:3px 15px 5px 30px; /* Firefox */
-webkit-border-radius:3px 15px 5px 30px; /* Chrome, Safari */
-khtml-border-radius:3px 15px 5px 30px; /* Konqueror */
border-radius:3px 15px 5px 30px; /* CSS3 */
behavior:url(border-radius.htc); /* Internet Explorer */
width:548px;
height:150px; 
background-color:#ddd;
}

div.verlauf {
background:-moz-linear-gradient(bottom,#b3b3b3,#f1f1f1); /* Firefox */
background:-webkit-gradient(linear,left top,left bottom,from(#b3b3b3),to(#f1f1f1)); /* Chrome, Safari */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3',endColorstr='#f1f1f1'); /* Internet Explorer */ 
width:485px;
height:150px; 
background-color:#ddd;
}

div.ebene1 { 
position:absolute;
height:100px; 
width:505px;
left:25px;
top:1130px; 
background-color:#999999;
z-index:1;
}
  
div.ebene2 {  
position:absolute;
height:100px; 
width:505px;
left:45px;
top:1150px; 
background-color:#bcbcbc;
z-index:2;
}  

div.ebene3 { 
position:absolute;
height:100px; 
width:505px;
left:65px;
top:1170px; 
background-color:#dddddd;
z-index:3;
}

div.farben {
font-size:15px;  
padding:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
text-align:center;
color:white;
background-color:silver;
border-left:5px solid red;
border-right:5px solid purple; 
border-bottom:5px solid orange; 
border-top:5px solid pink;  
}

div.backgroundposition.left { 
background:url(../gfx/background-position.jpg) left top no-repeat;
width:115px;
height:62px;   
}  
 
div.backgroundposition.center {
background:url(../gfx/background-position.jpg) center center no-repeat;
width:115px;
height:62px;  
}    

div.backgroundposition.right { 
background:url(../gfx/background-position.jpg) right bottom no-repeat;
width:115px;
height:62px;  
} 

div.backgroundhover {
background:url(../gfx/background-image-hover.jpg) left top no-repeat;
width:200px;
height:50px;  
} 
 
div.backgroundhover:hover {
background:url(../gfx/background-image-hover.jpg) left bottom no-repeat;
cursor:pointer;
} 

     
div.solid {
width:548px;
height:30px; 
background-color:#ddd;
border-top:2px solid #E2007A;
} 
     
div.dashed {
width:548px;
height:30px; 
background-color:#ddd;
border-bottom:3px dashed #E2007A;
}  
     
div.dotted {
width:548px;
height:30px; 
background-color:#ddd;
border:1px dotted #E2007A;
}
     
div.outline { 
width:548px;
height:30px; 
outline:1px solid #E2007A;
border-top:3px solid #555;
background:#ddd;
}

div.rechtsfliessend {
float:right;
margin:0 10px 0 10px;
width:250px;
height:80px;
background:#ddd;
}  

div.linksfliessend {
float:left;
margin:0 10px 10px 0;
width:250px;
height:80px;
background:#ddd;
}


div.textgestaltung {
text-indent:0.6cm;
text-align:left;
white-space:pre;
word-spacing:normal;
letter-spacing:0.6em;
text-decoration:underline overline;
text-transform:uppercase;
}


div.kreis { 
-moz-border-radius:100px;  
-webkit-border-radius:100px;  
border-radius:100px;
width:100px;
height:100px; 
background-color:#ddd;
}           
     
div.schatten {              
-moz-box-shadow:1px 1px 6px #292929; /* Firefox */
-webkit-box-shadow:1px 1px 6px #292929; /* Chrome, Safari */   
-khtml-box-shadow:1px 1px 6px #292929; /* Konqueror */
box-shadow:1px 1px 6px #292929; /* CSS3 */   
width:540px;
height:150px; 
background-color:#ddd;
}          
     
div.schatten_2farbig {         
-moz-box-shadow:1px 1px 3px #E2007A,-1px -1px 3px #000; /* Firefox */
-webkit-box-shadow:1px 1px 3px #E2007A, -1px -1px 3px #000; /* Chrome, Safari */  
-khtml-box-shadow:1px 1px 3px #E2007A, -1px -1px 3px #000; /* Konqueror */   
box-shadow:1px 1px 3px #E2007A, -1px -1px 3px #000;  /* CSS3 */       
width:540px;
height:150px; 
background-color:#ddd;
}            
     
div.text_schatten {         
text-shadow:0 1px 0 #676767;  
color:#E2007A; 
font-size:70px;
padding:20px 10px;
}                      
     
div.text_outline {         
text-shadow:0 1px 0 #E2007A,0 -1px 0 #E2007A,1px 0 0 #E2007A,-1px 0 0 #E2007A; 
color:#fff; 
font-size:70px;
padding:20px 10px;
} 

div.schatten_01 {    
color:#E2007A; 
font-size:70px; 
padding:20px 10px;
text-shadow: 5px 5px 0px #ddd;
}

div.schatten_02 {     
color:#E2007A; 
font-size:70px;  
padding:20px 10px;
text-shadow: 
1px 1px 0px #ddd,
2px 2px 0px #ddd,
3px 3px 0px #ddd,
4px 4px 50px #000;
}

div.schatten_03 {    
color:#E2007A; 
font-size:70px; 
padding:20px 10px;
text-shadow: 
2px 2px 0px #fff,
-2px -2px 0px #fff,
-2px 2px 0px #fff,
2px -2px 0px #fff,
0px 0px 50px #000;
}

div.schatten_04 {     
color:#E2007A; 
font-size:70px;  
padding:20px 10px;
text-shadow: 
2px 2px 0px #ff0,
-2px -2px 0px #f0f,
-2px 2px 0px #0ff,
2px -2px 0px #0f0,
0px 0px 50px #000;
}

div.schatten_05 {     
color:#E2007A; 
font-size:70px;  
padding:20px 10px;
text-shadow: 
1px 1px 0px #777,
2px 2px 0px #777,
3px 3px 0px #777,
4px 4px 0px #888,
5px 5px 0px #888,
6px 6px 0px #888,
7px 7px 0px #999,
8px 8px 0px #999,
9px 9px 0px #999,
10px 10px 0px #aaa,
11px 11px 0px #aaa,
12px 12px 0px #aaa,
13px 13px 0px #bbb,
14px 14px 0px #bbb,
15px 15px 0px #bbb,
16px 16px 0px #ccc,
17px 17px 0px #ccc,
18px 18px 0px #ccc,
19px 19px 0px #ddd,
20px 20px 0px #ddd,
21px 21px 0px #ddd;
}

div.schatten_06 {     
color:#E2007A;    
padding:20px 10px;
font-size:70px;
text-shadow: 
1px 1px 0px #888,
2px 2px 0px #888,
3px 3px 0px #888,
4px 4px 0px #888,
5px 5px 0px #888,
6px 6px 0px #888,
7px 7px 0px #888,
8px 8px 0px #ddd,
9px 9px 0px #ddd,
10px 10px 0px #ddd,
11px 11px 0px #ddd,
12px 12px 0px #ddd,
13px 13px 0px #ddd,
14px 14px 0px #ddd,
15px 15px 0px #888,
16px 16px 0px #888,
17px 17px 0px #888,
18px 18px 0px #888,
19px 19px 0px #888,
20px 20px 0px #888,
21px 21px 0px #888;
}

div.schatten_07 {     
color:#E2007A; 
font-size:70px;  
padding:20px 10px;
text-shadow: 
1px 0px 5px #888,
2px 0px 5px #888,
3px 0px 5px #888,
4px 0px 5px #888,
5px 0px 5px #888,
6px 0px 5px #888,
7px 0px 5px #888,
8px 0px 5px #ddd,
9px 0px 5px #ddd,
10px 0px 5px #ddd,
11px 0px 5px #ddd,
12px 0px 5px #ddd,
13px 0px 5px #ddd,
14px 0px 5px #ddd,
15px 0px 5px #888,
16px 0px 5px #888,
17px 0px 5px #888,
18px 0px 5px #888,
19px 0px 5px #888,
20px 0px 5px #888,
21px 0px 5px #888;
}

div.schatten_08 {      
color:#E2007A; 
font-size:70px; 
padding:20px 10px;
text-shadow: 
2px 2px 0px #fff,
-2px -2px 0px #fff,
-2px 2px 0px #fff,
2px -2px 0px #fff,
3px 3px 0px #555,
-3px -3px 0px #555,
-3px 3px 0px #555,
3px -3px 0px #555,
4px 4px 0px #555,
-4px -4px 0px #555,
-4px 4px 0px #555,
4px -4px 0px #555;
}

div.schatten_09 {     
color:#E2007A; 
font-size:70px;  
padding:20px 10px;
background: #333;
text-shadow: 1px 1px 0px #555;
padding: 10px;
}

div.schatten_10 {     
color:#E2007A; 
font-size:70px;  
padding:20px 10px;
background: #777;
color: #ddd;
text-shadow: 1px 1px 0px #000;
padding: 10px;
}

div.font_face{
font-family:Younger than me;
src:url('Youngerthanme.ttf');
font-style:normal;
font-weight:normal;
font-size:70px;  
padding:20px 10px;
}

div.rotate { 
background:url("../gfx/css-lernen-ganz-einfach.png") no-repeat;  
height:209px;
width:258px;  
-moz-transform:rotate(30deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(30deg); /* Safari */
-o-transform:rotate(30deg); /* Opera */
-ms-transform:rotate(30deg); /* IE9 */
transform:rotate(30deg); /* W3C */  
}     
 
div.rotate_back { 
background:url("../gfx/css-lernen-ganz-einfach.png") no-repeat;  
height:209px;
width:258px;  
-moz-transform:rotate(-30deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(-30deg); /* Safari */
-o-transform:rotate(-30deg); /* Opera */
-ms-transform:rotate(-30deg); /* IE9 */
transform:rotate(-30deg); /* W3C */  
}   
  
div.translate_combined { 
width:50px;
height:50px; 
background-color:#ddd;
-moz-transform:rotate(30deg) scale(1.7);
-webkit-transform:rotate(30deg) scale(1.7); 
-o-transform:rotate(30deg) scale(1.7); 
-ms-transform:rotate(30deg) scale(1.7);
transform:rotate(30deg) scale(1.7);
}

div.nthchild table {
width:530px;
}  
div.nthchild tr:nth-child(odd) {
background-color:#E2007A;
color:#000;
}

div.nthchild tr:nth-child(even) { 
color:#E2007A;
background-color:#000;
}