/* 
Theme Name: ich-du-ihr
Description: Theme fuer das Online-Projekt der EMS-Babelsberg JG05
Version: 1.0
Author: Timo Wirth, Aperto AG
Author URI: http://www.aperto.de
*/



* {
    margin: 0;
    padding: 0;
}


body { /* font: default 16px to 10px */
    font: 62.5% 'lucida sans unicode','lucida grande', helvetica, arial, sans-serif;   
	background: #323232  url(img/bg-gradient.jpg) 0 0 repeat-x;
}



/* LINKS
--------------- */

a {
    color: #333;   
	background: #e9e5e5;     
	text-decoration: none;
}
a:visited {
    color: #444;
}
a:hover,
a:active, 
a:focus  {
 	text-decoration: underline;  
}    

.mehr a,
li a,
.box a {
	padding: 0 2px; 
}


  
h2 a:hover,
h2 a:active, 
h2 a:focus,
h3 a:hover,
h3 a:active, 
h3 a:focus {
	border-bottom: 2px solid #000 !important;
	color: #000 !important;
}

img {
	border: none;
}                

img a {
	border: none;
}

.clear {
clear: both;
display: block;
}



/* hidden */
.skip a, 
.aural, 
hr {
    position: absolute;
    overflow: hidden;
    left: -2000px;
    width: 1px;
    height: 1px;
}

.skip a:active, .skip a:focus {
    position: absolute;
    z-index: 1000;
    overflow: visible;
    width: auto;
    height: auto;
    font-weight: bold;
    top: -20px;
    left: 0;
    background: #000;
    color: #fff;
    text-decoration: underline;
    padding: 5px 10px;
    font-size: 130%; 
}

#wrapper {
    position: relative;
	margin: 20px auto 0 auto;
	width: 899px; 
}

/* KOPF 
------------ */

#branding {   
	clear: both;
	float: left;
	margin: 40px 0 0 0;
	background: transparent; 
	position: relative;
	width: 899px;        
}
h1 {   
	position: absolute;
	bottom: 0;
	float: left;
	margin: 0 0 0 10px; 
	width: 220px;
	height: 80px;
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/ichduihr.gif) 0 100% no-repeat;    
}
   
h1 a {
	display: block; 
	border: none;
	text-decoration: none; 
	background: transparent;  
}

h1 strong {
	display: block;  
	width: 220px;
	height: 80px; 
	text-indent: -9999px;
}

#claim {
	float: right;
	width: auto; 
	margin: 0 10px 0 0;
	max-width: 430px;
	font-size: 170%;
	line-height: 1.3em;    
	text-align: right; 
}



/* NAVIGATION 
-------------------------*/

#nav {
	clear: both; 
	padding: 20px 0 0 0;         
}
#nav ul {
    clear: both;
	float: left;
	list-style: none;
}
#nav li {
	float: left;  
	display: inline;
	position: relative;  
	margin: 0 10px 0 0; 
	width: 293px; 
	height: 69px;
}   
#nav li#mod3 {
	margin-right: 0;
}    
#nav li a {     
	float: left;
	display: block;
	text-decoration: none;
	color: #000; 
	width: 293px;  
	height: 69px;  
    font-size: 160%;
 	margin: 0;
	padding: 0;
} 
#nav li span {
	display: block;
	position: absolute; 
	bottom: 10px; 
	left: 40px;  
}
#nav li a:hover,
#nav li a:focus, 
#nav li a:active {
	color: #000 !important;  	
}     

/* Farbleitsystem */

/* default alle grau */
#nav li#mod1 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab1.gif) 0 -69px no-repeat;    
	color: #555;
} 
#nav li#mod2 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab2.gif) 0 -69px no-repeat;     
	color: #555;     
}    
#nav li#mod3 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab3.gif) 0 -69px no-repeat;
	color: #555;
}          

/* Startseite - alle weiss */
#welcome #nav li#mod1 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab1.gif) 0 0 no-repeat;
} 
#welcome #nav li#mod2 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab2.gif) 0 0 no-repeat;
}    
#welcome #nav li#mod3 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab3.gif) 0 0 no-repeat;
}          

/* standort mit mir */
#rub1 #nav li#mod1 a {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab1.gif) 0 0 no-repeat;    
	color: #000;  
}

/* mit dir */
#rub2 #nav li#mod2 a {
   	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab2.gif) 0 0 no-repeat;  
	color: #000;  
}

/* mit euch  */
#rub3 #nav li#mod3 a {
   	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/tab3.gif) 0 0 no-repeat;
	color: #000;     
}     


/* INHALSTBEREICH 
------------------- */

#main {
	clear: left;
	position: relative;  
	padding: 30px 0 30px 0;
	background: #fff;
	overflow: hidden;    
	width: 898px;
}


/* STARTSEITE 
----------------- */

#welcome #main {
	background: transparent;      
	margin: 0;
	padding: 0;
}
 
.col {               
	 display: inline;
	float: left; 
	margin: 0 11px 0 0; 
  	padding: 15px 0 170px 0;
	width: 292px;    
	background: #fff; 
	height: 74em;
}   
#col-3 {             
      margin-right: 0;
}

.col .opener,
.col .story,
.col .special {
	margin: 20px 15px 30px 15px;
} 
.col .opener {
	margin-top: 0;
}

.col img {
	display: block;
	margin: 0 0 10px 0;
	border: none;
	background: transparent;  
	
	
} 
.img-wrapper a {
	border: none;
	background: transparent; 
	padding: 0;
	line-height: 1;
	
}  

#col-1 h2 a,
#col-1 h3 a  {
	background: none;
	border-bottom: 2px solid #bbdc1f; 
	text-decoration: none;
}
#col-2 h2 a,
#col-2 h3 a  {
	background: none;
	border-bottom: 2px solid #f3ed29; 
	text-decoration: none;
} 
#col-3 h2 a,
#col-3 h3 a  {
	background: none;
	border-bottom: 2px solid #d592c7; 
	text-decoration: none;
}   



.col h2 {              
	margin: 0 0 5px 0;
	font-size: 260%;      
	font-style: italic; 
	font-weight: normal;
	font-family: georgia, 'times new roman', serif;  
	line-height: 1.3em;      
}    
.col h3 {              
	margin: 0 0 5px 0;
	font-size: 180%;  
	font-weight: normal;     
	font-style: italic;
	font-family: georgia, 'times new roman' serif; 
	line-height: 1.3em;    
}
.col p {
	font-size: 130%;
	line-height: 1.3em;
} 

/* Special box star */   

.special {    
	padding: 18px 0 0 27px;
}    
#col-1 .special {
	background:    url(http://ichduihr.ems-projekte.de/wp-content/uploads/star-green.gif) 0 0 no-repeat;
}   
#col-2 .special {
	background:  url(http://ichduihr.ems-projekte.de/wp-content/uploads/star-yellow.gif) 0 0 no-repeat;
}   
#col-3 .special {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/star-pink.gif) 0 0 no-repeat;
}  
.special h3 {   
	position: relative; 
	margin: 0 0 3px 0;                   
}
.special h3 a {
   background: transparent !important;
}   
.special p {
	margin: 5px 0 0 30px;
}       

         





/* RUBRIKENSEITE 
-------------------- */

#section {
display: none;
}



    


/* TEASER 
---------------- */ 
 
#teasers {
	width: 555px;  
	margin: 0 0 0 25px;
}

.teaser {          
	overflow: hidden;
	clear: both;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;         
	border-bottom: 1px solid #bababa; 
	height: 1%;
}
.teaser h2 {          
	margin: 0 0 10px 0;
	font-size: 260%;      
	font-style: italic; 
	font-weight: normal;
	font-family: georgia, 'times new roman', serif;  
	line-height: 1.3em; 
}  
.teaser h2 a {          

}  
.teaser img {
	float: right;
	margin: 0 0 0 10px;
}

.teaser p {
	font-size: 130%;
	line-height: 1.3em;
}

em.mehr,
a.mehr  {
	font-style: normal;
}
a.mehr  {
    float: left;
}

em.mehr a,
#artikel a.mehr {
	border: 0;
}

   

/* Farbleitsystem */

.teaser h2 a  {     
	color: #333;
	background: none;
	border-bottom: 2px solid #bbdc1f; 
	text-decoration: none;      
}
#rub2 .teaser h2 a  {
	border-bottom: 2px solid #f3ed29;     
}    
#rub3 .teaser h2 a  {
	border-bottom: 2px solid #d592c7;     
}    
.teaser h2 a:hover,
.teaser h2 a:active, 
.teaser h2 a:focus  {     
	color: #000 !important;
	border-bottom: 2px solid #000 !important;   
}    

    
/* promos ressortseite */  

#promos {
	position: absolute;
	right: 20px;
	top: 35px;   
	width: 250px;  
}
.promo {
	margin: 0 0 20px 0; 
	position: relative; 
	padding: 0 0 23px 0;   
}
.promo h4 {    
	margin: 0;  
	padding: 10px 80px 10px 10px;      
	font-size: 180%;      
	font-style: italic; 
	font-weight: normal;
	font-family: georgia, 'times new roman', serif;  
	line-height: 1.3em;   
}
#promos h4 a {
	background: #fff;   
	text-decoration: none; 
	color: #333;
	border-bottom: 2px solid #bbdc1f;   
	
	
	    
}  
/* farbleitsystem */      

#rub1 .promo {  
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/promo_b_mitmir.gif) 0 100% no-repeat;  

}   
#rub1 .promo h4 {
   background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/promo_t3_mitmir.gif) 0 0 no-repeat;
}     


#rub2 .promo {
    background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/promo_b_mitdir.gif) 0 100% no-repeat;   
}   
#rub2 .promo h4 {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/promo_t3_mitdir.gif) 0 0 no-repeat;  
}   
#rub2 .promo h4 a  {
	border-bottom: 2px solid #f3ed29;     
}    

#rub3 .promo {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/promo_b_miteuch.gif) 0 100% no-repeat;   
}   
#rub3 .promo h4 {
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/promo_t3_miteuch.gif) 0 0 no-repeat;   
}    
#rub3 .promo  h4 a  {
	border-bottom: 2px solid #d592c7;     
}    
    
/* stars */     
  
.promo h5 {
	position: absolute; 
	top: 20px;
	right: 10px; 
	
	width: 60px;
	height: 60px; 
	text-indent: -9999px;
}

#rub1 .promo h5 { 
   	background:    url(http://ichduihr.ems-projekte.de/wp-content/uploads/star-green.gif) 0 0 no-repeat;  
} 
#rub2 .promo h5 {
   	background:    url(http://ichduihr.ems-projekte.de/wp-content/uploads/star-yellow.gif) 0 0 no-repeat;  
} 
#rub3 .promo h5 {
		background:    url(http://ichduihr.ems-projekte.de/wp-content/uploads/star-pink.gif) 0 0 no-repeat; 
}     





   
  


    




/* ARTIKELSEIE / TEXTEBENE
--------------------------- */

/* text + randspalte */


/* Farbleitsystem randspalte */
#content {
	float: left;
	margin: 0 0 20px 0;
}

/* text */
#artikel {
	float: left;  
	display: inline;
	width: 555px;
	margin: 0  25px;
	line-height: 1.4em;
}
	
#artikel p {
	margin: 10px 0;
	font-size: 130%;  
	line-height: 1.3em;
}

#artikel li {
	font-size: 130%;
}

p.vorspann {
	font-weight: bold;
}

#artikel h2 {
	font-size: 320%;                              
	font-weight: normal;     
	font-style: italic;
	font-family: georgia, 'times new roman' serif;   
	line-height: 1.2em;
}

/* zwischentitel */
#artikel h3 {
    clear: both;
    margin: 20px 0 0 0;
	font-size: 180%;  
	font-weight: normal;     
	font-style: italic;
	font-family: georgia, 'times new roman' serif; 
}

	  
#artikel h3.mod {
    clear: both;
    margin: 5px 0 0 0;
}  	
#artikel h4 {
	margin-top: 30px;
	font-size: 130%;
}	
	
	
ul {

}


li {
}     

#page #artikel ul {
	margin-left: 1em;
}



/* auslagerung */


.box {
	float: right;
	margin: 8px 0 10px 20px;
	padding: 10px;
	width: 220px;  
	background: #e4e4e4;
}
.box2 {
    float: none;
    margin: 20px 0 10px 0;
    width: auto;  
	background: #eaeaea;  
}
#artikel .box h4 {    
	margin-top: 0;
	font-size: 180%;    
	line-height: 1.3em;
	font-weight: normal;     
	font-style: italic;
	font-family: georgia, 'times new roman' serif;   
}     
#artikel .box p {
	margin: 10px 0 0 0;
	line-height: 1.2em;
    padding: 0 0  5px 0;
}
#artikel .box ul {
	list-style: none;
	margin: 10px 0;    
}
#artikel .box li {
	margin: 0 0 5px 0;
	padding: 0 0 0 10px;
	background: url(img/icon_link2.gif) 0 .4em no-repeat;    
	font-size: 130%;     
	line-height: 1.3em;
}


/* Bilder */

/* aufmacher bild im Artikel */
dl#foto {
    clear: both;
	float: none;
    border: none;    
    margin: 0 10px 10px 0;
	width: 555px;
	overflow: hidden;
}
dl#foto dt {
}
dl#foto dd {
   padding: 0;
   font-size: 100%;
}
#artikel dl#foto img {
	float: none;
	margin: 0;
    border: none;
}

/* weitere Fotos*/
#artikel img {
    clear: both;
	float: left;
	margin: 2px 10px 20px 0;
}
        
.foto-box {
	margin: 0 0 40px 0;
}


/* gallery */

.gallery {
clear: both;
margin: 20px 0 30px 0;
}

#artikel .gallery img {    
    line-height: 1em;
    clear: none;
    margin: 0 1px 1px 0;
}


blockquote {
margin: 0 60px 0 20px;
padding: 0 80px 0 0;
font-size: 120%;
line-height: 1.4em;
}


p.author {
clear: both;
}
      

/* randspalte artikel */
#extras {
	float: left;
	display: inline;  
	margin: 0 0 0 15px;
	width: 250px;
}

#extras h3 {  
	margin: 0 0 5px 0;
	font-size: 180%;  
	font-weight: bold;     
	font-style: italic;
	font-family: georgia, 'times new roman' serif;   
	
}
#extras ul {
	margin: 0 0 0 0;
	list-style: none;
}
#extras li {
	font-size: 130%;     
	padding: 10px 0 10px 0;
	margin: 0 0 0 0;  
	border-top: 1px solid #bababa;
}    





/* table */


table {
clear: left;
margin: 0 0 30px 0;
    border-collapse: collapse;
    border-spacing: 0;
    caption-side: top;
    empty-cells: show;
}
th {
border-bottom: 3px solid #000;
}

th, td {
vertical-align: top;
text-align: left;
width: 33%;
}

td {
padding: 5px 10px 5px 5px;
border: 1px solid #000;
}

    


/* FORMULARE / KOMMENTARE 

--------------------------------------- */



h3#kommentare {
	clear: left;
    margin: 30px 0 10px 0;
}

ol#kommentarliste li {
	margin: 0 0 20px 1.5em;
	padding: 0 0 0 0;
}

ol#kommentarliste p {
	margin: 0 0 3px 0;
}
 

fieldset {
	clear: left;
    margin: 30px 0 0 0;
    border: 1px dotted #ccc;
    padding: 10px;
}

legend {
    padding: 3px 10px;
    background: #000;
    color: #fff;
}

label {
    clear: left;
    display: block;
    margin: 10px 0 4px 0;
}

input, textarea {
    border: 1px solid #ccc;
    width: 300px;
}

textarea {
    width: 500px;
}

input#abschicken { /* button */
    margin: 10px 0 0 0;
    padding: 0px 7px;
    display: block;
    width: auto;
    border: 2px outset #666;
    font-weight: normal;
}



input:focus,
textarea:focus { /* highlight active form field */
    border: 1px solid pink;
} 


/* FOOTER 
----------- */

#footer {
    clear: both;  
	overflow: hidden;
    margin: 5px  10px 50px 10px;   
	padding: 0 0 50px 0;
    padding: 5px 0 0 0;
    font-size: 130%;
    text-align: right;
}


#footer a {
	border: 0; 
	background: transparent;    
	text-decoration: underline;
	color: #fff;
}

/* impressum etc. */
#footer ul {
    float: right;
    margin: 0 0 0 0
}

#footer li {
   display: inline;
   margin-left: 10px;
}

#footer li.rss a {
}

#footer li img {
    vertical-align: bottom;        
 	border: 2px solid #fff;
}

/* wp cc */
p.credit {
float: left;
text-align: left;
color: #fff;
    margin: 5px 0 0 0;
}

/* IMPRESSU M
------------------------- */

#page h2 {
margin: 20px 0 0 0;
}

address {
font-style: normal;
border-left: 5px solid #ccc;
padding-left: 10px;
}

#page #artikel ul {
margin: 10px 0 10px 1em;
}
#page #artikel li {
margin: 0 0 3px 0;
}                   

/* teaser-switcher-Band 
------------------------ */

#welcome #footer { 
	position: relative;
	top: -130px;
}


#teaser-wrapper {     
  position: relative;  
  top: -160px;
left: -25px; 
  width: 860px;
  margin: 0;
  padding: 0 46px; /* space for prev and next */ 

background: transparent url(http://ichduihr.ems-projekte.de/wp-content/uploads/bg-slider.gif) 0 0 no-repeat;        
                                                                      
}      

#teaser-wrapper .prev a {
	position: absolute;  
	display: none;
	top: 0;
	left: 0;
	width: 46px;
	height: 141px;
	background: url(http://ichduihr.ems-projekte.de/wp-content/uploads/slid-prev.gif) 5px 45px no-repeat;  
	text-indent: -9999px;    
	outline: none;    
}  
#teaser-wrapper .next a {
	position: absolute;
	display: none;
	top: 0;
	right: 0;
	width: 46px;
	height: 131px;
	background:   url(http://ichduihr.ems-projekte.de/wp-content/uploads/slid-next.gif) 10px 45px	 no-repeat;
  	text-indent: -9999px; 
	outline: none;
}
#teaser-wrapper .next a.show,
#teaser-wrapper .prev a.show {
	display: block;
}
#teaser-wrapper .teaser {       
	overflow: hidden;   
	clear: none; 
	float: left;
	width: 140px;
	color: #fff;
	height: 118px;   
	margin: 13px 13px 0 0;
	padding: 0;
	border: none;   
	background: #cfcfcf;
}   
    
#teaser-wrapper .teaser img {     
	display: block;
	float: left;
	margin: 0;
	border: none;
}  
   
#teaser-wrapper .teaser a {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}