/************************************************************************************
!
!              Datei:   formate.css
!              Autor:   Ralf Barten
!              Version: 1.0 
!
************************************************************************************/

/************************************************************************************
!
!              Die genutzten Farben (ändern mit ersetzen alle)
!              
!              #d9d9d9     allgemeine Hintergrundfarbe in body
!              #d3a447     Hintergrundfarbe des Kopfes in header und nav
!              #f5ca73     Hintergrundfarbe der eigentlichen Seite (ändern mit ersetzen alle)
!              #d38647 	   Hintergrundfarbe der Navigationstabs	in nav a
!              #ffe0a3     Hintergrundfarbe des aktiven Nav-tabs und des darunterliegenden Bereiches (ändern mit ersetzen alle)  
!                   
!
************************************************************************************/



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


body {
          font-family : verdana,arial,helvetica;
          font-size : 12px;
		  font-weight: normal;
		  color: #243e79;
		  line-height: 1.5;
          background-color:  #d9d9d9;      /*   allgemeine Hintergrundfarbe   */
		  margin-top: 2px;
		  margin-bottom: 40px;
		  margin-left: 50px;
		  margin-right: 50px;
}

header
{
	 background-color:  #d3a447;  
	 padding:  1px 20px 1px 0;
}

div#umschlag {
	background-color:  #f5ca73;    
	text-align: left;
	width: 960px;
	padding: 0;
	margin: 0 auto 0 auto;  
	position: relative;
}

div#umschlag_breit {
	background-color:  #f5ca73;    
	text-align: left;
	padding: 0;
	margin: 0 auto 0 auto;  
	position: relative;
}



#wrapper {
	background-color:  #f5ca73;    
	text-align: left;
	width: 960px;
	padding: 10px 0px 55px 0px;
	margin: 0px auto 0 auto;  
	
	border-top: 30px solid #ffe0a3;
}

nav {
	overflow: hidden;
	 background-color:  #d3a447;     
	/*padding: 10px 10px 38px 10px;	/*   dirty das padding-bottom ist so eingestellt, dass die Navileiste sich gut farblich einpasst  */
	
}

nav ul {
	list-style: none;
	float: right;
	width: auto;
	font-size: 11px;
	margin-bottom: 0;
}

nav li {
	float: left;
	margin: 0;
	margin-right: 5px;
	 
}
nav a {
	display: block;
	padding: 10px 15px 10px;
	background: #d38647;
	border: 1px solid #8f480d;
	border-radius: 10px 10px 0 0;
	text-decoration: none;
}

nav a:hover, nav a:focus {
	color: #000000;
	background-color: #ffe0a3;           			
	border-bottom-color: #ffe0a3;          			
}

nav a:visited {
	color: #085656;
			
}

nav a:active {
	color: #000000;
	background-color: #ffe0a3;          			
	border-bottom-color:#ffe0a3;           			
}
nav li.active a {
	color: #000000;
	background: #ffe0a3;           			
	border-bottom-color: #ffe0a3;          
}


nav ul.ebene2 {
	position: absolute;
	right: 0;  
	top: auto;     
	display: block;
	width: auto;
	height: auto;
	font-size: 90%;
	padding-top: 0.5em 0 0 0;
	margin: 0;
	
}


nav ul.ebene2 a {
  background: none; 
  border: none; 
}
nav ul.ebene2 a:hover,
nav ul.ebene2 a:focus {
  background: none; 
  color: #d90000; 
}

/* aktiver Tab für die zweite Navigationsebene */ 
nav  li.active2 a  {  
  background:none; 
  color: #d90000; 
} 


/*  Schema 01  eine Box  */
#box01_1 {
	background-color:  #f5ca73;  
	width: 960px;
	float: left;
	padding-top: 18px;
	padding-bottom: 36px;
}

/*  Schema 03  zwei Boxen nebeneinander:    breit - schmal  */
#box03_1 {
	background-color:  #f5ca73;  
	width: 592px;
	float: left;
	padding-top: 18px;
	padding-bottom: 36px;
}
#box03_2 {
	background-color:  #f5ca73;  
	width: 368px;
	float: right;
	padding-top: 18px;
	padding-bottom: 36px;
}

#kontaktformular {
	width: 500px;
	float: left;
	margin-top: 25px;
	margin-left: 45px;
	background-color: #d38647;
	border-style: solid;
	border-color: #b56726;
	border-width: 1px;

}


.formularfeld:hover, .formularfeld:focus
{
		background-color: lightgrey;
}

footer {
	clear: both;   
	text-align: left;
	width: 960px;
	padding: 10px 0px 30px 0px;
	border-top: 1px solid #8c8c8c;
	background-color: #d38647;
	margin: 0 auto 0 auto;  
	/*position:fixed;
	bottom: 2px;       */    /*    für feststehenden Footer      */
}

#footer_left { 
	float:left;
	text-align: left;
	width: 280px;
	padding-left: 20px;
}
#footer_middle { 
	float:left;
	text-align: center;
	width: 300px;
	
}
#footer_right1 { 
	float:right;
	text-align: left;
	width: 140px;
	padding-right: 20px;
}
#footer_right2 { 
	float:right;
	text-align: left;
	width: 140px;
	padding-right: 20px;
}
h1 {
    color: #8f640d;
	font-size : 24px;
    text-align: center;
	margin-top: 20px;
	margin-bottom: 50px;
}
h2 {
    color: #243e79;
	text-align: center;
    font-family: “times new roman”, serif; 
	margin-top: 30px;
	margin-bottom: 20px;
}
h2.left {
	text-align: left;
	padding-left: 100px;
}
h2.left_40 {
	text-align: left;
	padding-left: 40px;
}
h3 {
    color: sienna;
   
	text-align: center;
}
h4 {
    color: black;
    text-align: center;
    margin-top: 10px;
	margin-bottom: 10px;
}
h5 {
    color: darkcyan;
    background-color: #cd853f;
}
h6 {
    color: #b22222;
    background: #ffa74f;
}

p  {
		color: #243e79;
		border-style: none;
		border-width: 1px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 45px;
		padding-right: 45px;
		margin: 20px, 50px, 15px, 100px;
		
}
p.news
{
	border-style: none;
	margin-left:100px;
	margin-right:100px;
	text-align:justify;
	background-color: #8598c4;
}
p.intro
{
	color: #f5ca73;
	border-style: none;
	margin-left:100px;
	margin-right:100px;
	text-align:justify;
	background-color: #176c6c;
}
p.mailversand
{
	border-style: none;
	margin-left:300px;
	margin-right:200px;
	text-align:justify;
	background-color: #8598c4;
}

p.rand
{
	border-style: solid;
	border-width: 1px;
	color: #122960;
	border-color: #06687f;
	border-top-left-radius: 10px 5px;
	border-top-right-radius: 10px 5px;
	border-bottom-left-radius: 10px 5px;
	border-bottom-right-radius: 10px 5px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 80px;
	margin-bottom: 100px;
	padding-left: 25px;
	padding-right: 25px;
	text-align:justify;
	background-color: #8598c4;
}

p.menue
{
	border-style: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left:5px;
	margin-right:5px;
	text-align:justify;
	background-color: #8598c4;
}
p.error
{
	color: white;
	border-style: none;
	margin-left:300px;
	margin-right:300px;
	text-align:center;
	background-color: #eb6238;
}

table {
        margin-left: 45px;
        border: 2px solid grey;
}


td, th {         
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
}

tr  {
        border-bottom: 1px solid lightgrey; 
}




table.orig
{
		color: #243e79;
		border-style: none;
		border-width: 1px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 45px;
		padding-right: 25px;
		margin: 20px, 50px, 15px, 100px;
}
td.orig{
    padding:8px;
}
caption
{
	font-size: 14px;
	font-weight:bold;
}
a:link
{
	color:blue;
}
a:visited
{
	color:darkmagenta;
}
a:hover
{
	color:crimson;
}
a:active
{
	color:firebrick;
	text-decoration: overline, underline;
}
a:focus
{
	color:firebrick;
	text-decoration: overline, underline;
}


ul, ol
{
	padding-left:100px;
}
ul.ebene1
{
	padding-left:60px;
}
ul.ebene2
{
	
	
	padding-left:20px;
}
dd
{
	padding-left:50px;
}

ul
{
	list-style-type:disc;
}
ol.ablauf
{
	padding-left:400 px;
	font-size: 16px;
	font-weight:bold;
	color: #b56726;
}
li
{
	margin-bottom: 10px;
}
dt
{
	padding-left:30px;
}


img
{
	border:0px;
}
/************************************************************************************
!
!              Formatierung der Bilder auf den Seiten
!              
!
************************************************************************************/
#img_logo
{
width:280px; height:146px;
top:0px; left:0px; margin-left: 20px; margin-top:5px; float: left;
}

#chessboard
{
width:250px; height:250px;
top:0px; left:0px; margin-left: 50px; margin-top:15px;
}


#headline
{
top:0px; left:0px; margin-right: 150px; margin-top:15px; float: right;
}

#img_abwaerts
{
width:228px; height:204px; margin-left: 20px; margin-bottom: 20px;

}
#img_alligator
{
width:275px; height:168px; margin-left: 20px; margin-bottom: 20px;

}
#img_bruecke
{
width:351px; height:122px; margin-left: 0px; margin-bottom: 20px;

}
#img_euroscheine
{
width:300px; height:225px; margin-top: 30px; margin-left: 20px; margin-bottom: 20px;
border-style: solid; border-width: 4px; border-color: white;
}
#img_indianisch
{
width:200px; height:358px; margin-left: 20px;
border-style: solid; border-width: 4px; border-color: white;
}

#img_medi01
{
width:215px; height:329px; margin-left: 40px;

}
#img_mediationsablauf
{
width:508px; height:425px; margin-left: 40px; margin-bottom: 20px;

}
#img_muengsten
{
width:540px; height:405px; margin-left: 20px; margin-bottom: 20px;
border-style: solid; border-width: 4px; border-color: white;
}
#img_paragraph
{
width:184px; height:183px; margin-left: 40px; margin-bottom: 20px;

}
#img_ruine
{
width:250px; height:378px; margin-left: 40px; margin-bottom: 20px;
border-style: solid; border-width: 4px; border-color: white;
}
#img_schiff
{
width:357px; height:193px; margin-left: 40px; margin-bottom: 20px;

}
#img_sonnenuntergang
{
width:500px; height:297px; margin-left: 20px; margin-bottom: 20px;

}
#img_steintuerme
{
width:268px; height:332px; margin-left: 20px; margin-bottom: 20px;
border-style: solid; border-width: 7px; border-color: white;
}
#img_telefon
{
width:135px; height:436px; margin-left: 90px; margin-bottom: 20px;

}
#img_turm
{
width:250px; height:385px; margin-left: 20px; margin-right:20px; 
border-style: solid; border-width: 4px; border-color: white;
}
#img_wellen
{
width:560px; height:198px; margin-left: 20px;
border-style: solid; border-width: 4px; border-color: white;
}


/*    ein bißchen crossfade-Spielerei   */

#crossfade {
  position:relative;
  height:215px;
  width:295px;
  margin:0 auto;
}
#crossfade img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#crossfade img.top:hover {
  opacity:0;
}

/************************************************************************************
!
!              Erweiterungen des neuen Projektes 
!              
!
************************************************************************************/

 /*   zur in der Designphase 
div	{
	border:2px solid black;
	padding: 5px;
}
*/

#logout {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

#username {
	float: left;
}

#btn_logout {
  float: right;
  background-color: antique_white;
}

#btn_login {
	 margin: 20px 0 0 0;
     
    position: relative;
    
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
	
  

  min-width: 300px;
 	min-height: 30px;
  background-color: antique_white;
}

tr.highlight {
	 font-weight: bold; 
	 background-color: antiquewhite;
}


p.aktuell
{
	border-style: none;
	padding-left:100px;
	padding-right:60px;
	text-align:justify;
	
}

.x-small {
	 font-size: x-small; 
}


.small {
	 font-size: small; 
}

.smaller {
	 font-size: medium; 
}

.larger {
	 font-size: large; 
}

.link_button {
	color: #d38647;
	background-color: antiquewhite;
	text-decoration: none;
	display: inline-block;
	
	text-align: center;
	margin: 15px;
	padding: 10px;
	border-style: groove;
	border-width: 1pt;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 2px 3px #888;
	-webkit-box-shadow: 5px 2px 3px #888;
	box-shadow: 5px 2px 3px #888;
}

#rangliste {
	margin: 0 0 0 500px;
    
}


p.infobox
{
	border-style: solid;
	border-width: 1px;
	color: darkblue;
	border-color: darkblue;
	border-top-left-radius: 10px 5px;
	border-top-right-radius: 10px 5px;
	border-bottom-left-radius: 10px 5px;
	border-bottom-right-radius: 10px 5px;
	width: 50%;
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 5%;
	padding-right: 5%;
	text-align:center;
	background-color: tan;
}

p.infoheader
{
	font-size: 14px;
	font-weight:bold;
	color: sienna;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 0px;
	padding-right: 25px;
	text-align:center;
	
}


#rangliste {
	position: absolute;
	right: 50px;
	top: 100px;
}
#tabelle {
	clear: left;
  	
}
#runden {
	clear: left;
  	
}
#tn_liste {
	clear: left;
  	text-align:center;
}

.center {
	text-align:center;
}


p.date
{
	font-size: 12px;
	margin-top: 40px;
	margin-bottom: 20px;
	text-align:center;
	
}

.float_left
{
	float: left;
	width: 40%;
}

.float_right
{
	float: right;
	width: 40%;
}



/*  im Versuchsstadium  14.02.2000  */
form
{
    margin: 1.5em 0 0 0; 
    padding: 0; 
}

.field
{
    padding-top: .5em;
}

label
{
    font-weight: bold; 
    float: left; 
    width: 20%;
    margin-right: 1em; 
    text-align: right; 
}

#submit 
{
    margin-left: 35%; 
    padding-top: 1em; 
}


/*   von Matchanalyzer abgeguckt:    */


input[type="text"] {
            margin-bottom: -1px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        input[type="password"] {
            margin-bottom: 20px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

/*
    LOGIN-PAGE
*/
.wrapper {
    margin-top: 80px;
    margin-bottom: 80px;
}

.form_signin {
    max-width: 380px;
    min-width: 250px;
    padding: 15px 35px 45px ;
    margin: 0 auto;
    background-color: wheat;
    border: 1px solid rgba(0,0,0,0.1);
}

.form-signin-heading,
.checkbox {
    margin-bottom: 30px;
}

.checkbox {
    font-weight: normal;
}

.form_control {
	float:left;
	width:130px;
    position: relative;
    font-size: 11px;
    height: auto;
    margin-top: 10px:
}



/*   für eine feste Numerierung i der linken Spalte einer sortable Tabelle 
	 in der Formatierung der für td definierten	Attibute  */
table.sortable tbody {
    counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
    content: "";
    display: table-cell;
    text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
     text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
}


.matchanalyzer-login-logo {
    float: right;
    height: 42px;
}


/*  Ende Versuchsstadium    */