/* base */
   

p, h1, h2, h3 {margin: 10px 10px 0px 0px; padding:0;}
div {margin: 10px 10px 0px 10px; padding:0;}
body {background-color:#EDF1F9; /*#483d8b*/ /*#4C4C66*/ /*#CCD9CC*/ font-family:verdana, sans-serif; color:rgb(128,128,128)}


h1 {
    margin: 0px 0px 0px 20px;
    font-family: 'Cinzel Decorative', cursive;
    color: #600;
  /*  text-shadow: 2px 2px 2px #b58f4d;  */
    
    font-weight: bold;    font-size:16px;     
}

/* Hyperlinks, Formatierung */
a.classpersoanfrage:link {color: black; font-size:100%;}
a.classpersoanfrage:visited {color: black; font-size:100%;}
a.classpersoanfrage:hover {color:#950000; font-size:100%;}
a.classpersoanfrage:active {color: black; font-size:100%;}   


p {margin:5px 10px 10px 0px; font-size:12px}
img {float:left; margin:10px 0px 5px 0px; }
a img {border:none; margin-top:0px 0px 5px 5px; float:left;}
textarea, input {font-family:verdana; font-size:12px}


/* Start Formatierung und Anordnung Bilder */
.img-basic
{

 position: relative;
	vertical-align:left;
	padding: 10px 10px 10px 10px;
	border: 0px solid gainsboro;
	background: none;
  float: left;
   

font-size: 0.7em;


} 

/* Start Formatierung und Anordnung Team und Beschreibung */
div.teamfigure {
  float: left;
  
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.teamfigure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.teamscaled {

}
/* Ende Formatierung und Anordnung Team und Beschreibung */








.left-inner-container { margin-left: 30px; }
.right-inner-container {
	margin-left: 30px;
	max-width: 710px;

.left-inner-container { margin-right: 0; }
	.right-inner-container {	margin-left: 0;	}

	h1 {
		margin-top: 0;
		margin-bottom: 20px;
	}
	.templatemo-logo h1 {
		border: none;
		max-width: none;
	}
	.left-container, .right-container {	padding-top: 0px; }
	.templatemo-logo .col-lg-6, .templatemo-logo .col-md-6, .templatemo-logo .col-sm-6 { padding-top: 0; }
}

/* Ende Formatierung und Anordnung Bilder */




/* main */   
#main {width:850px; height:480px; position:absolute; top:50%; left:50%; margin:-290px auto auto -525px}
#navigation {
	position:absolute;      
	top:0px; 
	left:0px;    /*zieht gas ganze Menü nach links bzw. rechts*/
	width:150px; /*Schrift weiter an blauen Balken rücken oder davon entfernen*/
	height:520px
	        }
#background {position:absolute; top:0px; border-top:16px solid #EDF1F9; border-bottom:16px solid #000049;left:150px; width:690px; height:520px; background:url(dateien/background.jpg) top left no-repeat}
/*backgroundimage - Festlegung der Position des Fotos auf dem blauen Balken*/
#backgroundimage {position:absolute; top:340px; left:4px; width:252px; border-top:1px solid white;height:170px}
   
/*Position des jeweiligen Themenbildes*/
#topicimage {position:absolute; top:-100px; left:290px; width:390px; height:200px}

/*unter Zeile bestimmt Position, Farbe, Grösse, Schriftart von forteMens auf dem blauen Balken*/
#pwge-01 {font-size:26px; margin:20px auto auto 10px; color:rgb(255,255,255); font-family: 'Roboto' , light; }
#pwge-02 {font-size:20px; margin:20px auto auto 10px; color:rgb(255,255,255); font-family: 'Roboto' , light;}
#pwge-03 {font-size:20px; margin:80px auto auto 18px; color:rgb(255,255,255); font-family: 'Roboto' , light;}
#pwge-04 {font-size:20px; margin:10px auto auto 18px; color:rgb(255,255,255); font-family: 'Roboto' , light;}
#pwge-05 {font-size:20px; margin:10px auto auto 18px; color:rgb(255,255,255); font-family: 'Roboto' , light;}


/* Content - Inhaltsformatierung, event. wieder löschen */
#content h1 {font-size:115%}
#content h2 {font-size:100%}
#content_padding_2 p {margin:10px 0 15px 0;}
#content ul {}
#content_padding_2 ul li {margin-left:5px; padding-left:0px; list-style-type:none;}
#content_padding_2 img {}
         #content ul li {margin-left:5px; padding-left:0px; list-style-type:none;}


#content {border:1px solid red; position:absolute; top:25px; left:416px; width:390px; height:30px} /*Grösse der Box über Scrollbalken*/
#content_padding {padding: 0px 0px 0px 0px; border:2px solid green; width:400px; height:460px; overflow-y:auto; overflow-x: hidden;} /*Grösse der Scrollbox*/
#content_padding_2 { padding: 0px 0px 0px 0px; border:1px solid blue; width:365px; height:400px} /*Grösse der Box in der Scrollbox*/
/* navigation */
#navigation ul {font-family: 'Roboto', light;  margin:20px 3px 0px -80px; padding:1px}   /* -80px --> auto */

#navigation ul li {list-style-type:none; text-align:right; font-size:14px; margin:0; padding:2px; line-height:14px

                        font-family: 'Roboto' , light;         
    color: #600;
   /* text-shadow: 2px 2px 2px #b58f4d; */
    
        }





#navigation a {color:#000049;text-decoration:none; }
#navigation a:hover {color:#7a7a7a;}
#navigation a:active {color:rgb(0,0,0)}
#navigation a.activelink {color:rgb(0,0,0)}
ul#nav_1 {}
ul#nav_2 {margin-top:18px}/*Zahlpx schiebt alles nach oben/unten*/
ul#nav_3 {position:absolute; bottom:10px; right:0px}

/* content */
table.profiltabelle {font-size:12px; padding:0px; margin:0px; border-spacing:0px; border:none}
#content a {color:rgb(0,0,0); text-decoration:underline}

/* form */
#kontaktformular {font-size:12px; margin:0px; padding:0px; border-spacing:0px; border:none}
#kontaktformular td {vertical-align:top; text-align:right; padding:3px;}
#kontaktformular input {width:190px}
#kontaktformular select {width:195px}
#kontaktformular textarea {width:300px}

 
 
 /* Hyperlink für Datenschutz (DSGVO), Formatierung */
a.dsgvo:link {text-decoration:none; padding-left: 20px; color: #950000; font-weight: bold; font-size:100%;}
a.dsgvo:visited {color: #950000; font-size:100%;}
a.dsgvo:hover {color:#191970; font-size:100%;}
a.dsgvo:active {color: black; font-size:100%;} 


input.checkboxinput {  color: red; 
                      width:55px; 
                      align:left;   
                    } 


@keyframes hover-color {
  from {
    border-color: #c0c0c0; }
  to {
    border-color: #990033; } }    /* Checkbox deaktiviert und Hover */

.magic-radio,
.magic-checkbox {
  position: absolute;
  display: none; }

.magic-radio[disabled],
.magic-checkbox[disabled] {
  cursor: not-allowed; }

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 30px;        
  cursor: pointer;
  vertical-align: middle; }
  .magic-radio + label:hover:before,
  .magic-checkbox + label:hover:before   { padding: 0px 2px 2px 2px; color: white; background: #990033; font: bold; font-size: 12px;
                                                                                             
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-name: hover-color; }     
  .magic-radio + label:before,
  .magic-checkbox + label:before {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 7px;                  /* breite box*/
    display: inline-block;
    width: 14px;
    height: 14px;
    content: '';
    border: 3px solid #191970; }
  .magic-radio + label:after,
  .magic-checkbox + label:after {
    position: absolute;   
    display: none;        
    content: '\2714'; }

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
  cursor: not-allowed;
  color: #e4e4e4; }
  .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  .magic-checkbox[disabled] + label:hover,
  .magic-checkbox[disabled] + label:before,
  .magic-checkbox[disabled] + label:after {      
    cursor: not-allowed; }
  .magic-radio[disabled] + label:hover:before,
  .magic-checkbox[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none; }
  .magic-radio[disabled] + label:before,
  .magic-checkbox[disabled] + label:before {
    border-color: #e4e4e4; }

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {  
  animation-name: none; }

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
  display: block; }

.magic-radio + label:before {
  border-radius: 50%; }

.magic-radio + label:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3e97eb; }

.magic-radio:checked + label:before {
  border: 1px solid : #990033; }

.magic-radio:checked[disabled] + label:before {
  border: 1px solid #c9e2f9; }

.magic-radio:checked[disabled] + label:after {  
  background: #c9e2f9; }

.magic-checkbox + label:before {  
  border-radius: 3px; }

/* Checkbox aktiviert per Klick */
.magic-checkbox + label:after {
  top: 0px;
  left: 0px;
  background: #990033;           color: white;
              width: 20px;
    height: 25px;                 top: 0;
    left: 0;
    padding-left: 7px;   
  transform: rotate(0deg);     font-size: 16px;
  border-width: 2px;
  border-style: solid;        
  border-color: #fff;          
  border-top: 0;
  border-left: 0; }

/* wenn Box aktiviert und danach hover */
.magic-checkbox:checked + label:before {
  border: #3e97eb;  
  border-bottom: 5px solid #990033; 
  background: #3333CC; }         /* Bei Klick ändert sich Farbe Hintergrund */

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;              
  background: #c9e2f9; }
  
  
  
  
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/       
/*                                                                            */
/*                            BOTTON BOXEN                                    */
/*                                                                            */
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/   

   

/*---------------------------------------------------------------------------*/
/*-- CSS- EIGENSCHAFTEN FUER FORMULARE INNERHALB DER WEBSITE --*/ 
/*-- fieldset gruppiert Elemente innerhalb von Formularen, mit legend-Element kann --*/
/*-- zusätzlich eine Überschrift für das fieldset-Element definiert werden --*/ 
/*---------------------------------------------------------------------------*/
/*fieldset { padding-left: 1em; }*/
.button { background-color: #87ae12; border: none; color: #f8f8f8; }

input.sendButton {
   padding: 0px 0px 0px 0px;
   font-size: 12px;
   color: white;
   font-weight: bold;
   font-style: normal;
   background-color: #102b61;
   height: 18px;
   width: 100px;
   cursor: pointer;
   border: 1px solid #576675;
}

input.sendButton:hover {
   font-size: 12px;
   color: #FFFFFF;
   font-weight: bold;
   font-style: normal;
   background-color: #102b61;
   height: 20px;
   width: 100px;
   cursor: pointer;
   border: 1px solid #FFFFFF;
   
   opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
box-shadow: 3px 3px 10px 5px #102b61;
/* border:3px inset #708090; */             

 
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#102b61', Strength=8, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color='#102b61', Strength=8, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color='#102b61', Strength=8, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color='#102b61', Strength=8, Direction=270);
    /* IE 8 */
}

input.clearButton {
   font-size: 12px;
   color: #000000;
   font-weight: normal;
   font-style: normal;
   background-color: #E4E4E4;
   width: 132px;
   cursor: pointer;
   border: 1px solid #576675;
}

input.clearButton:hover {
   font-size: 12px;
   color: #FFFFFF;
   font-weight: normal;
   font-style: normal;
   background-color: #4C4C66;
   width: 132px;
   cursor: pointer;
   border: 1px solid #FFFFFF;
   
   opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
box-shadow: 3px 3px 10px 5px #4C4C66;
/* border:3px inset #708090; */             

 
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#4C4C66', Strength=8, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color='#4C4C66', Strength=8, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color='#4C4C66', Strength=8, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color='#4C4C66', Strength=8, Direction=270);
    /* IE 8 */
   
   
   
   
   
}







/****************************************************************/
/*****************************************************************/
/***                   DATEI- UPLOAD - FILE                  *****/
/****************************************************************/
/****************************************************************/   

/* BOX FUER ANZEIGE GELADENEN DATEIINHALT */ 

div.file-upload {
    background-color:#fff;
   border: 1px solid red;
    border-radius:5px;
    display:inline-block;
    height: 30px;  
    margin: 3px 0px 3px 0px;               
    padding:3px 0px 3px 0px;      
    position:relative;
    width:auto;
}




.file-upload-input {
  width: 285px;
  height: 18px;
  color: white;
  font: bold 0.2em Arial, sans-serif;            
  font-size: 14px;
  padding: 5px 5px;               cursor:pointer;    display: input-block;              
  border: none;     
  background-color: #C0C0B2;            
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  float: left;
  /* IE 9 Fix */
}

.file-upload-input:hover, .file-upload-input:focus {
  background-color: #b5b5a4;
  outline: none;                  
}

/* BUTTON BOX FUER AUSWAHL ZU LADENDEN DATEIINHALT */ 
.file-upload-button {
  cursor: pointer;
  display: inline-block;
  color: #fff;
  font-size: 12px;            
  height: 30px;
  font-weight: bold;        
  padding: 5px 20px;
  border: none;
  margin-left: -1px;
  background-color: #79B30B;
  float: left;
  /* IE 9 Fix */
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.file-upload-button:hover {
  background-color: #79B30B;
}

.file-upload + .file-upload-button {
    height:38px;  width: auto;       
}


div.upload {
    background-color:#fff;
   border: 1px solid red;
    border-radius:5px;
    display:inline-block;
    height: 30px;  
    margin: 3px 0px 3px 0px;               
    padding:3px 0px 3px 0px;      
    position:relative;
    width:auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;           
    opacity: 0;            
    cursor:pointer;      
    position:absolute;  
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;                   
    height: 30px;
    margin-right:40px;   /*erhöhen für mehr Platz im input Feld*/     
    padding:3px 20px 3px 0px;     
    width: auto;
    
    box-sizing: content-box;
}

.dateiName {
    font-family: Arial;       
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;  width: auto;       
}