/*------------------------------------------------------------------ 
[MASTER STYLESHEET] 
Projekt:    								Site Freekmovie - Firmenporträt 2010
Version:    								1.0 
Letzte Aenderung:				    03/09/10 [Aenderungsindex: 001] 
Bestimmt fuer:							Friedr. Freek GmbH
Verwendung fuer:   		      Freek Site Freekmovie - Firmenporträt 2010
Autor: 										  Friedr. Freek GmbH
-------------------------------------------------------------------*/ 

/*------------------------------------------------------------------ 
[ALLGEMEINE HINWEISE] 
- line-height gibt den Durchschuss der Zeile an. Der Durchschuss ist der Abstand von der Grundlinie einer Zeile zur nächsten. Eine Angabe der Einheit ist nicht notwendig. 
- inherit = erben
- text-indent rückt die erste Zeile ein
- margin gibt den Außenabstand der Box an
- padding gibt den Innenabstand der Box an
- Abkürzung für einen einheitlichen Rahmen > border: 4px solid #f33;
- Größenangaben in pt px em und %
	   6   pt =  8 px = 0.5   em =  50   %
	   7   pt =  9 px = 0.55  em =  55   %
	   7.5 pt = 10 px = 0.625 em =  62.5 %
	   8   pt = 11 px = 0.7   em =  70   %
	   9   pt = 12 px = 0.75  em =  75   %
	  10   pt = 13 px = 0.8   em =  80   %
	  10.5 pt = 14 px = 0.875 em = 87.5  %
	  11   pt = 15 px = 0.95  em = 95    %
	  12   pt = 16 px = 1     em = 100   %
	  13   pt = 17 px = 1.05  em = 105   %
	  13.5 pt = 18 px = 1.125 em = 112.5 %
	  14   pt = 19 px = 1.2   em = 120   %
	  14.5 pt = 20 px = 1.25  em = 125   %
	  15   pt = 21 px = 1.3   em = 130   %
	  16   pt = 22 px = 1.4   em = 140   %
	  17   pt = 23 px = 1.45  em = 145   %
	  18   pt = 24 px = 1.5   em = 150   %
- Wenn man Außenabstände für Textelemente wie Absätze setzt, wird man oft verschiedene Einheiten verwenden wollen. Der linke und der rechte Außenabstand kann beispielsweise
  in Pixel angegeben werden. Den oberen und unteren Außenabstand kann man dagegen in em setzen, so dass der vertikale Freiraum zwischen Absätzen relativ zur Textgröße der Absätze 
  dimensioniert ist.
- padding:.5em 1em .5em 1em;	Kurzschreibweise, immer angefangen bei "top" dann "right", "bottom" und "left", also im Uhrzeigersinn 
- Um das Layout auch für den IE6 zu zentrieren ist im CSS unter body folgende Angabe notwendig > text-align:center; ACHTUNG! Damit der Text aber wieder linksbündig ist, muss man einen Container z.B. main_wrapper um den gesamten Inhalt der Seite bauen und dort "text-align" wieder auf "left" setzen

/*------------------------------------------------------------------ 
[DEBUGGEN] 
Box-Modell einschalten
-------------------------------------------------------------------*/ 
/*
* {
  border:1px solid #999;
}
*/

/*------------------------------------------------------------------ 
[INHALTSVERZEICHNIS] 
 1. BODY
	 1.1 TYPOGRAPHIE
  1.2 SONSTIGES
 2. UEBERSCHRIFTEN
 3. ABSAETZE
 4. LINKS
  4.1 BUTTONLINKS 
 5. LISTEN
 6. CONTENT #main_wrapper, #content
 7. HEADER #header, #header_content
 8. FOOTER #footer, #footer_content, #footer_links, #footer_address
 9. FORMULARE
10. SONSTIGES 
-------------------------------------------------------------------*/  

/*------------------------------------------------------------------ 
[1. BODY] 
-------------------------------------------------------------------*/  
body {
	/*------------------------------------------------------------------ 
	[1.1 TYPOGRAPHIE]
	-------------------------------------------------------------------*/ 
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;         /* Serifenloseschriftfamilie */
   font-size:14px;																/* Standardschriftgröße */		
   text-align:center;															/* Zentriert das Layout auch für den IE6; ACHTUNG! Damit Text wieder linksbündig ist, muss ein Container z.B. main_wrapper um den gesamten Inhalt der Seite vorhanden sein. "text-align" hier wieder auf "left" setzen */
   color:#dbdbdb;																	/* Standardschriftfarbe */
   line-height:16px;
   
	/*------------------------------------------------------------------ 
	[1.2 SONSTIGES]
	-------------------------------------------------------------------*/ 
   background-color:#1b1b1b;													 									/* Standardhintergrundfarbe */
   height:100%;																		 											/* Standardhöhe, damit Footer am Browserende */
}

/*------------------------------------------------------------------ 
[2. UEBERSCHRIFTEN] 
-------------------------------------------------------------------*/  
h1 {
  height:123px;
  text-indent:-999em;
  width:789px;
}

.filmstrip_content h2 {
  text-indent:-999em;
}

#footer_content h2, #contactform h2, #recommendform h2 {
  font-size:16px;
  font-weight:bold;
  margin-top:25px;
  margin-bottom:15px;    
}

h1#headline_freekmovie {
  background:url("../pics/headline_freekmovie2010.png") no-repeat;
  height:79px;
}

h1#headline_footer {
  background: url("../pics/headline_footer.png") no-repeat;
  margin:8px auto 8px auto;                        /* 7px + 8px = 15px; Grafik 45px + 15px = 60px Abstand zwischen den Inhalten */
  height:45px;
}

h2#headline_trailer {
  background:url("../pics/headline_trailer.png") no-repeat;
  height:35px;
}

h2#headline_movie {
  background:url("../pics/headline_movie.png") no-repeat;
  height:35px;
}

/*------------------------------------------------------------------ 
[3. ABSAETZE] 
-------------------------------------------------------------------*/ 
p {
  margin-bottom:14px;    
}

#content p {
  margin-top:14px;    
}

#contactform p, #inquiryform p, #recommendform p {
  width:459px; 
  text-align:left; 
}

/*------------------------------------------------------------------ 
[4. LINKS] 
-------------------------------------------------------------------*/
a {
  color:#777777;
  text-decoration:none;  
}

a:hover {
  color:#dbdbdb;  
}

a.top {
  background:url("../pics/top.png") no-repeat scroll left top transparent;
  display:block;
  width:30px;
  height:31px;
  margin-top:-10px;
  margin-left:760px;
  outline:none;										/* entfernt die gepunktete Linie um Links */
}

/* BUTTON BEIM HOVERN VON NACH OBEN */
.top:hover {
  background-position:0px -31px;
  display:block;
  cursor:pointer;
}

	/*------------------------------------------------------------------ 
	[4.1 BUTTONLINKS]
	-------------------------------------------------------------------*/ 
  /* BUTTON KONTAKTFORMULAR OEFFNEN */
  a.contactform_btn {
    background:url("../pics/contactform_btn.png") no-repeat scroll left top transparent;
    display:block;
    width:240px;
    height:51px;
    margin-left:-8px;
    margin-top:-10px;
    outline:none;  /* entfernt die gepunktete Linie um Links */
  }
  
  /* BUTTON WEITEREMPFEHLEN */
  a.recommend_btn {
    background:url("../pics/recommend_btn.png") no-repeat scroll left top transparent;
    display:block;
    width:240px;
    height:51px;
    margin-left:-8px;
    margin-top:-10px;
    outline:none;  /* entfernt die gepunktete Linie um Links */
  }
  
  /* BUTTONS BEIM HOVERN VON KONTAKTFORMULAR OEFFNEN UND JETZT WEITEREMPFEHLEN */
  .contactform_btn:hover, .recommend_btn:hover {
    background-position:0px -51px;
    display:block;
    cursor:pointer;
  }
  
  /* BUTTON FLASH-VERSION STARTEN */
  a.flv_btn {
    background:url("../pics/flashversion_btn.png") no-repeat scroll left top transparent;
    display:block;
    width:316px;
    height:66px;
    float:left;
    margin-left:50px;
    margin-bottom:0px;
    margin-top:10px;
    outline:none;  /* entfernt die gepunktete Linie um Links */
  }
  
  /* BUTTON WMV-VERSION STARTEN */
  a.wmv_btn {
    background:url("../pics/wmvversion_btn.png") no-repeat scroll left top transparent;
    display:block;
    width:316px;
    height:66px;
    float:none;
    margin-left:400px;
    margin-bottom:0px;
    margin-top:10px;
    outline:none;  /* entfernt die gepunktete Linie um Links */
  }
	
  /* BUTTON MP4-VERSION STARTEN */
  a.mp4_btn {
    background:url("../pics/mp4version_btn.png") no-repeat scroll left top transparent;
    display:block;
    width:316px;
    height:66px;
    float:none;
    margin-left:400px;
    margin-bottom:0px;
    margin-top:10px;
    outline:none;  /* entfernt die gepunktete Linie um Links */
  }
  
  /* BUTTONS BEIM HOVERN VON FLASH-VERSION STARTEN UND WMV-VERSION STARTEN */
  .flv_btn:hover, .wmv_btn:hover {
    background-position:0px -66px;
    display:block;
    cursor:pointer;
  }
  
  /* BUTTON DIREKT ZUM FILM */
  a#header_button {
    background:url("../pics/jump_to_movie.png") no-repeat scroll left top transparent;
    display:block;
    width:166px;
    height:41px;
    position:absolute;
    left:634px;
  }
  
  /* BUTTON BEIM HOVERN VON DIREKT ZUM FILM */
  #header_button:hover {
    background-position:0px -46px;
    display:block;
    cursor:pointer;
  }
  
/*------------------------------------------------------------------ 
[5. LISTEN] 
-------------------------------------------------------------------*/  
form li, div div li {
  text-align:left;
  margin-bottom:5px;  
  line-height:22px;
}

form li span, div div li span {
  width:125px;
  display:inline-block; 
  text-align:left;
}

dl {
  width:40%;
  float:left;  
}

dt {
  margin:20px auto 10px auto;  
  font-size:16px;
  font-weight:bold;
}

dd {
  margin-bottom:20px;  
}

/*------------------------------------------------------------------ 
[6. CONTENT] 
-------------------------------------------------------------------*/  
div#main_wrapper {
  text-align:left; 
  overflow:hidden;
}

div#content {
  margin:0px auto auto auto;
  width:800px;
  text-align:justify; 
}

/*------------------------------------------------------------------ 
[7. HEADER] 
-------------------------------------------------------------------*/ 
div#header {
  margin:0px auto 20px auto;
  background-image:url("../pics/header_bg.jpg");
  background-repeat:repeat-x;
  background-color:#1b1b1b;
  height:80px;

}
div#header_content {
  margin:auto;
  width:800px;  
  position:relative;
}

/*------------------------------------------------------------------ 
[8. FOOTER] 
-------------------------------------------------------------------*/ 
div#footer {
  clear:both;
  background-image:url("../pics/footer_bg.jpg");
  background-repeat:repeat-x;
  background-color:#242424;
  margin:auto;
}

div#footer_content, div#footer_links {
  margin:auto;
  padding:1px 0 0 0;
  width:800px;
}

div#footer_address {
  clear:both;
  margin:20px auto auto auto;
  width:800px;
  font-size:12px;
  padding-bottom:20px;
  text-align:center;
}

#footer_links {  
  background-image:url("../pics/footer_main.png");
  background-repeat:repeat-y;
} 

.footer_links_top {
  background-image:url("../pics/footer_top.png");
  background-repeat:no-repeat;
  height:12px;
}

.footer_links_main {
  padding:23px 35px 0px 35px;                  /* 35px - 12px = 23px     (12px gleich footertop und footerbottom png)  */
}

.footer_links_main ul {
  float:left;
  margin-bottom:11px;                  /* 35px - 12px - 12px = 11px     (12px gleich footertop und footerbottom png)  */
  margin-right:40px;
}

.footer_links_main ul li {
  height:20px;
  color:#777777;
  font-size:11px;  
}

.footer_links_main ul li a:hover {
  color:#dbdbdb;
}

.footer_links_bottom {
  background-image:url("../pics/footer_bottom.png");
  background-repeat:no-repeat;
  height:12px;
  clear:both;
}

/*------------------------------------------------------------------ 
[9. FORMULARE] 
-------------------------------------------------------------------*/ 
ul li input, ul li textarea {
  background-color:#EEEEEE; 
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
  font-size:14px;
  border-top:1px solid #BBBBBB;
  border-right:1px solid #DDDDDD;
  border-bottom:1px solid #CCDDCC;
  border-left:1px solid #BBBBBB;
  width:330px;
}

ul li textarea {
  width:454px;
  height:55px;
  overflow:auto;
  margin-bottom:10px;
}

.button { 											/* Hintergrundgrafik für Buttons wie "senden", "zurücksetzen" usw.  */
  background:url("../pics/button.png") no-repeat scroll left top transparent;
  display:inline-block;
  width:156px;
  height:51px;
  border:none;
  color:#FFFFFF;
  font-size:16px;
  font-weight:bold;
  margin-top:10px;
}

.button:hover {
  background-position:0px -51px;
  display:inline-block;
  cursor:pointer;
}

input.checkbox {
  background-color:#dbdbdb;  
  border:none;
  width:auto;
}

.feld {
	background-color:#FAFAFA;
}

.feldfocus {
	background-color:#F7CFCF;
}

/* Fehlermeldung bei Formularen standardmäßig ausblenden */
#form_kontakt_fehler, #form_anfrage_fehler, #form_weiterempfehlen_fehler {
  display:none;
  color:#E10000;
}

/*------------------------------------------------------------------ 
[10. SONSTIGES] 
-------------------------------------------------------------------*/  
.filmstrip_border {
  background:url("../pics/filmstrip_border.jpg") repeat-x;
  height:26px;
}

.filmstrip_wrapper {
  width:100%;
  background-color:#000;  
  text-align:center;
  margin:20px auto 40px auto;
  clear:both;
}

.filmstrip_content {
  margin:0px auto auto auto;
  width:800px;
  padding:20px;
}

.datiswech, div#ie6hint {
  display:none;  
}