/* -------------------------------------------------------
Stylesheet für WWW.JFK-CSF.CH
FORNAT Dezember 2008, Christof Elmiger
Letzte Änderung: 
----------------------------------------------------------*/

* {
margin:0;
padding:0;
border:0;
}

/* für IE 6 */
html {
	font-size: 70%;
}

/*für die anderen*/
html>body {
	font-size: 12px;
}


/*RASTER ZUM EIN/AUSBLENDEN 
-------------------------------*/
/* 
body,#wrapper,#header,#inhalt,#navigation,#hauptinhalt,#hinweis,#footer { background: transparent url(../img/raster-960.gif) top left no-repeat !important; color: black !important; }   
*/



/* Farbschema
----------------------


Dunkelster Braunton: #615D35 (aktiver Link)
Zweit...            #757041 (H4 Header, passiver Link)
Hellste Farbton: 827C49
Hintergrundfarbe Tabelle: E4E6C9

*/







/* DETAILFORMATIERUNG 
---------------------------------------------------*/

/* Allgemeine, Layerübergreifende Elemente 
--------------------------------------------*/

/* h1, #hauptinhalt h2, #hauptinhalt h3, #hauptinhalt h4, #hauptinhalt ul, #hauptinhalt p, #hinweis h2, #hinweis h3, #hinweis h4, #hinweis ul, #hinweis p, #navigation h2, #navigation ul, #navigation p {
	padding: 0 20px;	
} */

.versteckt {
	display: none;
}

.links {
  float: left;
  width: 42.5%;
  clear: left;
  padding: 0px 10px 0px 20px;	
}

.rechts {
  float: right;
  width: 42.5%;
  clear: right;
  padding: 0px 20px 0px 10px;	
}

.zweidrittel {
  float: left;
  width: 65%;
  clear: right;
}

.ganzebreite {
  float: left;
  width: 100%;
  clear: both;
}


h1,  h2,  h3,  h4,  ul, li,  p, span {
	padding: 0px 20px;	
	clear: both;
}


p.wichtigerhinweis {
	background: #E4E6C9;
}

p, span {
	font: 1.25em/1.3em Arial, sans-serif;
	margin-bottom: 0.4em;
    margin-top: 0.4em;
	clear: both;
    /* letter-spacing:0.02em */
}

li {
	font: 1.25em Arial, sans-serif;
      margin-bottom: 10px;
/* 	background: gray;*/
}

ul {
      list-style-type: none;
/* 	background: gray;*/
}

ul.xxx {
     list-style-type: disc;
     margin-left: 15pt;
/* 	background: gray;*/
}

h1 {
	font: 1.67em/0.9em Arial, sans-serif;;
	margin-top: 0.9em;
	margin-bottom: 0.9em;	
    font-weight: bold;
}

h2 {
	font: 1.5em/1em  Arial, sans-serif;;	
	margin-top: 0.9em;
	margin-bottom: 0.9em;	
    font-weight: bold;
}

h3 {
	font: 1.2em/1.13em Arial, sans-serif;	
	margin-top: 1.3em;
	margin-bottom: 0.5em;	
    font-weight: bold;
}

h4 {
  font: 1.2em/0.8em Arial, sans-serif;
  text-align: left;
  margin-top: 0.9em;
  margin-bottom: 0.5em;
  font-weight: bold;
  color: #757041;

}

h5 {
  font: 0.9em/0.8em Arial, sans-serif;
  text-align: right;
  padding: 2.5px 0px ;
  margin: 0px;
}

a:link, a:visited, a:active {
  color: black;
  text-decoration: none;
  background: url(../img/strich_h.gif) bottom repeat-x;
}
a:hover, a:focus {
  text-decoration: underline;
  font-weight: normal;
  color: #757041;
  background: none;
}

a:visited {
  color: #827C49;
}


a.heimlich:link, a.heimlich:visited, a.heimlich:active {
  color: black;
  text-decoration: none;
  background:none;
}
a.heimlich:hover, a.heimlich:focus {
  font-weight: normal;
  text-decoration: underline;
}

a.heimlich:visited {
  color: #827C49;
}

a.extern, a.extern:visited {
  font-weight: bold;
  text-decoration: none;
  background-color: transparent;
  background-image: url(../img/link_extern.gif);
  background-repeat: no-repeat;
  background-position: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
/*   border-width:1px;
  border-style:solid;
  border-color:#F55C17; */
}

a.extern:hover, a.extern:focus {
  text-decoration: underline;
  font-weight: normal;
  color: #757041;
  background-image: url(../img/link_extern.gif);
  background-repeat: no-repeat;
  background-position: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
}

a.intern {
  font-weight: bold;
  text-decoration: none;
  background-color: transparent;
  background-image: url(../img/link_intern.gif);
  background-repeat: no-repeat;
  background-position: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
/*   border-width:1px;
  border-style:solid;
  border-color:#F55C17; */
}

a.intern:hover, a.intern:focus {
  text-decoration: underline;
  font-weight: normal;
  color: #757041;
  background-image: url(../img/link_intern.gif);
  background-repeat: no-repeat;
  background-position: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
}


/* Tabellen */

table{
margin-left: 20px;
}

td, td img {
  vertical-align:top;
  font-size:12px; /* Grössenangabe in em funktioniert nicht; IE6/7 machen Probleme... */
}

td p {
  padding: 5px 5px 5px 5px;
  margin: 0;
}

tr.ungerade {
  background: #E4E6C9;
}

td.spalte_breit {
  width: 100%;
}


/*
HAUPTELEMENTE UND LAYERS
---------------------------------------------------*/

body {
  text-align: center;		
}

body, #footer {
  /* background: #E4E6C9; */
  background: white;
  /* background: #D1CEB3; */
 /*  background: #D1C875; */  
}

body.index {
  /* background: #E4E6C9; */
  background: white;
}

/* ul, li { */
	/* list-style-type: none; */
/* } */

#wrapper {
	background: white;
	text-align: justify;			
	width: 960px;
	margin: 0 auto;
	}
	
#wrapper_index {
  margin: 120px auto;
  background: white;
  text-align: left;			
  width: 960px;
}	

#header {
  background: url(../img/logo_jfkcsf.jpg) no-repeat;
  background-position:30px 30px;
  /* background: gray; */
  /* color:  #827C49; */
  color:  #827C49;
  padding: 30px 0px 45px 160px;

}




/* Layerspezifisch 
--------------------------------------------------------*/


/*Header*/
#header h1 {  
	font: 1.35em/1.15em Arial, sans-serif;
    font-style:italic;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
  font-weight: normal;
  /* font-variant: small-caps; */
}

#header h1#de {  
    padding-left: 110px;
  /* font-variant: small-caps; */
}
#header h1#fr {  
    padding-left: 100px;
  /* font-variant: small-caps; */
}
#header h1#it {  
    padding-left: 90px;
  /* font-variant: small-caps; */
}
#header h1#rr {  
    padding-left: 80px;
  /* font-variant: small-caps; */
}

#header a {
 text-decoration: none;
 color: #757041;
 background: none; 
}  

#header a:hover, #header a:focus {
  font-weight: bold; 
}

#header a.active {
  color: #615D35;
  font-weight: bold; 
}

/* Navigation*/

#navigation {
	width: 180px;	
	float: left;
}


#navigation ul {
  /* background: blue; */
  padding-right: 0px;
  padding-left: 40px;
}

#navigation li {
  /* background: orange; */
  padding: 10px 0px 10px 0px;
  margin: 0px;
  list-style-type: none;
  display: block;
  font-variant: small-caps;
  font-style: italic;
  letter-spacing:0.075em
}

#navigation li a {
 text-decoration: none;
 color: black;
  background:none;
}

#navigation li a:hover {
  font-weight: bold;
  color: #757041;
  display: inline; /* Damit Punkte nur unterhalb Text erscheinen */
  background: url(../img/strich_h.gif) bottom repeat-x;
}


#navigation li.active {
  font-weight: bold;
  display: block;
  width: 140px;
  background: url(../img/strich_h_v.gif) bottom right no-repeat;
}

#navigation li.active a {
 color: #615D35;
}

#navigation li.aboveactive {
  display: block;
  width: 140px;
/*   background: url(../img/punkte_aboveactive.gif) bottom right no-repeat;
 */
  background: url(../img/strich_v.gif) bottom right repeat-y;

}

#inhalt {
	float: right;
	width: 780px;
}
  
#hauptinhalt {
  float: left;
  width: 580px;
  min-height: 350px;
  background-image:url(../img/strich_h.gif); 
  background-repeat:repeat-x;
}

#hauptinhalt_breit { /* Diese Variante wird benötigt, wenn die volle Breite nach rechts genutzt werden soll (zB für dokumente.html) */
  float: left;
  width: 740px;
  height: 350px;
  background-image:url(../img/strich_h.gif); 
  background-repeat:repeat-x;
}


/* Hinweis*/

#hinweis {
  width: 160px; /* Eigentlich 200px breit; um nach Rechts ein 60cm-Padding zu erhalten, welches auch für die Strichlilinie gilt (Hintergrundbild), müssen wir die Layer etwas verschmalern */
  margin: 0 0 0 0;  
  float: left;
  color: black;
  background-image:url(../img/strich_h.gif); 
  background-repeat:repeat-x;
  padding: 0 0 0 0;
}

#hinweis ul {
  padding: 0 0 0 0;
  margin: 20px 0 0 0;
  width: 160px;
}

#hinweis ul.boxoben {
  margin: 20px 0 0 0;
}

#hinweis ul.boxmitte {
  margin: 80px 0 0 0;
}

#hinweis ul.boxunten {
  margin: 220px 0 0 0;
}

#hinweis li {
  list-style-type: none;
  display: block;
  background: #EED8AE;
  font: 1.0em/1.1em Arial, sans-serif;
  text-align: left;
  padding: 0px 10px 5px 10px ;
  margin: 0px;
  
}

#hinweis li.hinweis_start {
  background: url(../img/box_top.gif) bottom left no-repeat;
}

#hinweis li.hinweis_schluss {
  background: url(../img/box_bottom.gif) top left no-repeat;
}

#hinweis li.titel {
  font-weight: bold;
  padding: 10px 10px 2px 10px;
}

#hinweis a {
 text-decoration: none;
 color: black;
}

#hinweis a:hover {
  font-weight: bold;
  
}





#schlussbild { /* layer unterhalb des inhalt-layers, rechts unterhalb des Hinweis-Layers positioniert */
    width: 200px;	
	float: right;
	overflow: visible;
	direction: rtl; /*Richtung des Overflows*/
}

#schlussbild img {
    vertical-align: bottom;
    margin-right: 40px;
}


/* Footer */

#footer {
	clear: both;
	color: black;
}

#footer p {
  font: 0.83em/0.8em Arial, sans-serif;
  text-align: right;
  padding: 5px 0px ;
  margin: 0px;
}

#footer h5 {
  padding-right: 40px;
}

#footer a {
  color:black;
}





/* BILDER 
-------------------------------------------------------------*/
.flagge {
  height: 35px;
  float: right;
  margin: 0 10px 0 10px;
}

.bild_in_text {
  height: 75px;
  float: left;
  margin: 5px 10px 0px 0px;
}