@charset "UTF-8";

html * { font-size: 100.01%; }

html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #b4c1da;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BB8420;
}

/*Allgemeine Textkonvertierungen*/

h1 {
text-transform: uppercase;
padding-top: 4px;
}

p, h1, h2 {
margin: 0;
}

h1, h2 {
padding-bottom: 4px;
}

p {
padding-bottom: 8px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin:0;
padding: 4px 0 2px 0;
}

p a, li a {
color: #BB8420;
text-decoration: none;
padding: 0 3px 0 3px;
}


li a:hover, p a:hover {
color: #ffffff;
background-color: #BB8420;
}



/*Spezielle Textkonvertierungen*/

.hervorhebung {
background-color: #eedfc4; /*2. Farbe hell*/
color: #BB8420; /*2. Farbe vollton*/
border-left: 1px solid #BB8420 !important; /*2. Farbe vollton*/
}

.hervorhebung a {
color: #BB8420; /*2. Farbe vollton*/
}

.hervorhebung a:hover {
color: #ffffff;
}


.negativ {
background-color: #BB8420;
color: #FFF !important;
}

.negativ a {
color: #fff !important;
}

.negativ a:hover {
color: #BB8420 !important;
background-color: #FFF;
text-decoration: underline;
}

.zweitefarbe {
background-color: #d1e9de; /*2. Farbe hell*/
}

.grau {
	color: #888; /*vollton*/
}

.datum {
color: #d7ad62;
padding-left: 5px;
}

.fett {
font-weight: bold;
}


.clearen {
	clear: both;
}

.bitte {
	color: #888;
    padding-bottom: 10px;
}

#abstand {
height: 35px;
clear: both;
}

#col02 a, #col03 a, #col04 a {
color: #BB8420;
text-decoration: underline;
}

#col02 a:hover, #col03 a:hover, #col04 a:hover {
text-decoration: none;
color: #fff;
}



/*Bildkonvertierungen*/

img {
border: 0;
}

.nichtverdraengt {  /*Bild wird nicht umflossen*/
margin: 4px 0 10px 0;
}



.verdraengt {  /*Bild wird umflossen*/
float: left;
padding: 0 15px 5px 0;
margin-top: 4px;
}

.galerie, .quer {
margin: 15px 15px 0 0;
padding: 0;
border: 1px solid #BB8420;
}

.galerie {
height: 100px;
}

.quer {
height: 70px;
}

#dozenten #col04 img {
	padding-bottom: 16px;
	margin-top:2px;
}




/*Grundlayout*/


#bild {
	width: 100%;
	height: 100%;
	z-index: 1;
	position: fixed;
}

#main {
width: 870px;
position: absolute;
left: 50%;
top: 40px;
margin-left: -445px;
padding-bottom: 80px;
z-index: 10;
}

#head {
background-image: url(../bilder/werkkunstschule_stoerer.gif);
background-repeat: no-repeat;
background-color: #FFF;
height: 74px;
font-size: 12px;
width: 870px;
}

#content {
background-color: #fff;
margin: 0;
padding: 15px;
width: 840px;
float: left;
margin-top: 20px;
}


/*Logo Unterzeile*/

#head p {
padding: 41px 0 0 130px;
margin: 0;
float: left;
display: inline;
color: #003399 !important; /*blau*/
}



/*Top-Navi*/

#head ul {
float: right;
padding: 37px 18px 0 0;
margin: 0;
color: #003399 !important; /*blau*/
}

#head li {
float: right;
text-align: center;
margin-left: 10px;
}

#head a {
color: #003399; /*blau*/
}

#head a:hover {
	color: #fff;
	background-color: #003399;
}

/*Key Visuals*/

#keyvisual {
width: 830px; height: 300px;
background-repeat:no-repeat;
border: 20px solid #ffffff;
margin-top: 20px;
}

#keyvisual1 {
width: 506px; height: 320px;
background-image: url(../bilder/keys/key_blaetter_kl.jpg);
background-repeat:no-repeat;
float: left;
border: 15px solid #FFF;
margin-top: 20px;
}


#keyvisual2 {
width: 284px; height: 320px;
background-image:url(../bilder/keys_verlauf/key_re.jpg);
background-repeat:no-repeat;
float: left;
margin-left: 20px;
border: 15px solid #FFF;
margin-top: 20px;
}


#keyvisual1 p, #keyvisual2 p {
clear: right;
color: #fff;
font-size: 9px;
text-align:right;
padding: 180px 13px 0 0;
}


#keyvisual1 img, #keyvisual2 img, #keyvisual img {
float: right;
margin: 0;
padding: 8px 4px 0 0;

}



#arbeiten #keyvisual {
background-image: url(../bilder/keys_verlauf/key_arbeiten.jpg);
}

#ausbildung #keyvisual {
background-image:url(../bilder/keys_verlauf/key_ausbildung.jpg);
}

#bewerben #keyvisual {
background-image:url(../bilder/keys/key_vier_gr.jpg);
}

#kommunikations #keyvisual {
background-image:url(../bilder/keys_verlauf/key_kommunikations.jpg);
}

#luebeck #keyvisual {
background-image:url(../bilder/keys_verlauf/key_luebeck.jpg);
}

#aktuelles #keyvisual {
background-image:url(../bilder/keys_verlauf/key_aktuelles.jpg);
}

#foerderung #keyvisual {
background-image:url(../bilder/keys/key_gruppe_gr.jpg);
}

#dozenten #keyvisual {
background-image:url(../bilder/keys_verlauf/key_faecher.jpg);
}

#impressum #keyvisual, #kontakt #keyvisual, #anfahrt #keyvisual {
background-image:url(../bilder/keys_verlauf/key_impressum.jpg);
}


/*Home Banner

#banner {
clear: left;
width: 869px; height: 55px;
background-color: #6382c1;
position: relative;
top: 12px;
}

*/



/*Haupt-Navi*/

#navi {
float: left;
width: 175px;
padding-left: 8px;
border-left: 1px solid #BB8420;
border-right: 12px solid #ffffff;/*weisser abstand*/
}

#home .h01, #aktuelles .h02, #kommunikations .h03, #ausbildung .h04, #arbeiten .h05, #dozenten .h06, #foerderung .h07, #luebeck .h08, #bewerben .h09  {
background-color: #BB8420;
color: #FFFFFF;
}

#impressum .s01, #anfahrt .s02, #kontakt .s03 {
background-color: #003399; /*Blau*/
color: #FFFFFF;
	
}

#navi a {
font-weight: bold;
}

#navi ul {
margin: -1px;
}


/*Spalten*/

#col02, #col03, #col04 {
border-left: 1px solid #BB8420;
padding: 3px 8px 0 8px;
}

#col02, #col03 {
float: left;
border-right: 12px solid #ffffff; /*weisser abstand*/
width: 189px;
}

#impressum #col02 {
width: 230px;
}

#impressum #col03 {
width: 200px;
}

#impressum #col04, #anfahrt #col04 {
width: 130px;

}



#col04 {
float: right;
width: 620px;
}

#home #col04  {
width: 189px;
}


/*Formulare*/

form  {
width: 650px;
line-height: 120%;
padding-bottom: 30px;
}

fieldset {
padding: 0;
margin: 25px 0 0 30px;
border: 0;
}

input {
display: block;
float: left;
width: 340px;
border: 0;
background-color: #ffffff ;
margin: 5px;
padding: 4px;
font-family: Arial, Helvetica, sans-serif;
color: #BB8420;
}

select {
border:0;
margin: 7px 12px 0 0;
width: 100px;

}

.knopf {
margin-top: 11px;
width: auto;
}

#betreff {
font-family: Arial, Helvetica, sans-serif;
color: #BB8420;
width: 340px;
height: 200px;
border: 0;
background-color: #ffffff ;
margin: 5px;
padding: 4px;
float: left;
}


.submit { 
background: #BB8420;
color: #ffffff;
border: 0;
width: 120px;
 }

.submit:hover {
background: #ffffff;
color: #BB8420;
}

 
label { 
width: 175px; 
margin: 5px;
padding: 5px;
float: left; 
text-align: right;
font-weight: normal;
}

.knopftext {
width: auto;
margin-left: 4px;
margin-right: 10px;
}

.gtag {
width: 55px;
margin-left: 3px;
}

.gmonat {
width: 75px;
}

.gjahr {
width: 65px;
}

.gtag, .gmonat, .gjahr {
background-color: #BB8420;
color: #fff;
height: 24px;
padding: 2px;
}

.message {
padding: 20px 0 20px 8px;
font-size: 18px;
}


#bewerben #col04 p, #kontakt #col04 p {
clear: left;
float: left;
width: 100%;
}

#kontaktadr {
padding: 30px 30px 0 230px;
}