/* Custom CSS overrides */
/* --- ----------------------------------------------------------------------------- */
/* --- ---------------------- Individuelle Styles von mir ---------------------- --- */
/* --- ----------------------      Stand: 23.03.2016      ---------------------- --- */

/* 	IDs stellen eindeutig identifizierbare Elemente dar (nicht nur in CSS). D.h. diese dürfen auf einer Seite nur einmal vorkommen. 
	Dadurch ergibt sich, dass IDs direkt mit JavaScript durch getElementById() angesprochen oder auch als Ziel eines Hyperlinkes genutzt 
	werden können. Die Definition des Layouts einer ID erfolgt in CSS mit einem vorausgestellten #. 
	
	Unterschied zwischen einer Klasse und einer ID:
	-----------------------------------------------
	Innerhalb eines HTML Dokuments dürfen IDs nur einmal verwendet werden. In der Praxis dagegen können die meisten Browser auch mit einer 
	mehrfachen Verwendung einer ID innerhlab eines Dokumentes korrekt umgehen. Klassen dagegen können beliebig oft verwendet werden. IDs 
	können als Ankerziele verwendet werden. Ein weiterer Unterschied liegt in Wertigkeit, bei der IDs ein höheres Gewicht haben als Klassen. 
	D.h. wird ein HTML Tag mit einer ID und einer Klasse gestylt, werden die in der ID festgelegten Definitionen Übernommen und die der Klasse, 
	die nicht bereits in der ID vorhanden sind.
	*/
.main_back{
	background: rgb(184, 207, 239);
	background: -moz-linear-gradient(90deg, rgb(184, 207, 239) 30%, rgb(237, 246, 253) 100%);
	background: -webkit-linear-gradient(90deg, rgb(184, 207, 239) 30%, rgb(237, 246, 253) 100%);
	background: -o-linear-gradient(90deg, rgb(184, 207, 239) 30%, rgb(237, 246, 253) 100%);
	background: -ms-linear-gradient(90deg, rgb(184, 207, 239) 30%, rgb(237, 246, 253) 100%);
	background: linear-gradient(180deg, rgb(184, 207, 239) 30%, rgb(237, 246, 253) 100%);
}

/* --- Definieren der Standard-Schrift für alle Inhalte --- */
* { font-family: Arial, sans-serif; }

/* --- Definieren sonstiger Schriftformatierungen --- */
/* --- Bewusst als gesonderte Klassen definiert, da dies die Flexiblität in der Verwendung durch Kombination von Style-Klassen erhöht. --- */
/* --- Beispiel: Nur <h1> definiert einfach eine Überschrift als Fettdruck in 14 Punkt Schriftgröße. Kombiniert mit den Klassen: "textschatten" */
.klein { font-size: 8pt; }
.fett { font-weight: bold; }
.kursiv { font-style: italic; }
.weiss { color: #FFFFFF; }
.hervor { color: #297ACC; }
.justify { text-align: justify; }
.textschatten { text-shadow: 2px 2px 2px rgba(190, 190, 190, 1); }
.linie_u { padding-bottom: 5px; border-bottom: 1px solid #a0a0a0; }
.ueber {
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 11pt;
	color: #404040;
	font-weight: bold;
	padding:5px;
	background-color: #DBE5F1;
	margin: 0 0 15px 0;
	border-top: 1px solid #a0a0a0;
	border-bottom: 1px solid #a0a0a0;
	}
	
/* --- Für den Schriftzug MS-Institut ---*/
.brand {
    font-family: Comic Sans MS, arial, sans-serif;
    font-size: 9pt;
    font-weight: 600;
    word-spacing: 6pt;
    text-transform: uppercase;
	}

/* --- Für die Überschrift jeder Seite ---*/
.seitentitel {
			font-family: 'Open Sans', sans-serif;
			font-size: 30px;
			font-weight: bold;
			line-height: 120%;
			margin: 0 0 10px 0;
			padding-bottom: 5px;
			color:#606060;
			border-bottom: 1px solid #606060;
			}

/* --- Definieren von Überschriften --- */
h1, h2, h3, h4 { font-weight: bold; }
h1 { font-size:20pt; color: #606060; text-shadow: 2px 2px 2px rgba(190, 190, 190, 1); line-height: 120%; margin: 0 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #606060; }
h2 { font-size:16pt; padding-bottom: 5px; border-bottom: 1px solid #a0a0a0; }
h3 { font-size:12pt; color: #297ACC; text-shadow: 2px 2px 2px rgba(190, 190, 190, 1); padding-bottom: 5px; border-bottom: 1px solid #a0a0a0; }
h4 { font-size:10pt; }

/* --- Definieren von Hintergründen --- */
.grau_b { 	background: #f5f5f5; }
.verlauf_b {
		background: rgb(41,122,204);
		background: -moz-linear-gradient(0deg, rgb(41,122,204) 0%, rgb(255, 255, 255) 100%);
		background: -webkit-linear-gradient(0deg, rgb(41,122,204) 0%, rgb(255, 255, 255) 100%);
		background: -o-linear-gradient(0deg, rgb(41,122,204) 0%, rgb(255, 255, 255) 100%);
		background: -ms-linear-gradient(0deg, rgb(41,122,204) 0%, rgb(255, 255, 255) 100%);
		background: linear-gradient(90deg, rgb(41,122,204) 0%, rgb(255, 255, 255) 100%);
		}

/* --- Details zu nachfolgender Style-Klasse finden sich hier: http://css3gen.com/css3-multi-column-generator --- */
.mehrspaltig {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	-moz-column-gap:20px;
	-webkit-column-gap:20px;
	column-gap:20px;
	font-size:13px;
	color:#4d4d4d;
	-moz-column-rule:1px solid #c0c0c0;
	-webkit-column-rule:1px solid #c0c0c0;
	column-rule:1px solid #c0c0c0;
	}

			
/* --- Kann für DIV-Container verwendet werden. --- */
.zentriert { display: table; margin-left: auto; margin-right: auto; }
.rechts { display: table; margin-left: auto; margin-right: 0; }
.links { display: table; margin-left: 0; margin-right: auto; }

/* --- Definieren von Trennlinien --- */
.hr_style { 
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(199, 199, 199, 0), rgba(199, 199, 199, 0.75), rgba(199, 199, 199, 0)); }

/* --- Ausrichten von Bildern --- */
.bild_r {
			float:right;
			margin: 0 0 0 10px; }

.bild_l {
			float:left;
			margin:0 10px 0 0; }

.masked {
		background: transparent url('/sites/ms-institut.de/files/pictures/pattern.png');
		border: 1px solid #d8d8d8;
		padding: 10px;
		margin: 0;
		}
		
/* --- -------------------------------------------------------------------------------- --- */
/* --- Boxen für z.B. Login. Ermöglicht die Darstellung von max. 3 Boxen nebeneinander. --- */
/* --- Details siehe unter: http://css3gen.com/css3-flexbox/ -------------------------- --- */
/* --- -------------------------------------------------------------------------------- --- */
#box-wrapper-inner {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	box-orient: horizontal;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;

	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	box-direction: normal;

	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	box-align: stretch;
}

#box1, #box2, #box3 {
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	box-ordinal-group: 1;

	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
}

/* --- Zum Löschen der in Boxen oder Bildern gesetzten float-Eigenschaft. Sollte zwingend nach dem DIV-Container für die Box-Darstellung verwendet werden. --- */
.clearing { clear: both; }

/* --- Rahmen, die im Fließtext der Homepage verwendet werden können. --- */
.box_ganz {
			padding: 15px 10px 15px 10px;
			border-radius: 12px;
			-moz-border-radius: 12px;
			-webkit-border-radius: 12px;
			border: 1px solid #c7c7c7; }
			
.box_head {
			font-weight: bold;
			margin: 25px 0 0 0;
			padding: 5px 10px 5px 10px;
			background: #e6e6e6;
			border-radius: 12px 12px 0px 0px;
			-moz-border-radius: 12px 12px 0px 0px;
			-webkit-border-radius: 12px 12px 0px 0px;
			border-top: 1px solid #c7c7c7;
			border-left: 1px solid #c7c7c7;
			border-right: 1px solid #c7c7c7; }

.box_mitte {
			margin: 0;
			padding: 5px 10px 5px 10px;
			border-top: 1px solid #c7c7c7;
			border-left: 1px solid #c7c7c7;
			border-right: 1px solid #c7c7c7; }
			
.box_text {
			margin: 0 0 15px 0;
			padding: 5px 10px 5px 10px;
			border-radius: 1px 0px 12px 12px;
			-moz-border-radius: 1px 0px 12px 12px;
			-webkit-border-radius: 1px 0px 12px 12px;
			border: 1px solid #c0c0c0; }

.box_shadow {
 			-webkit-box-shadow: 7px 7px 5px 0px rgba(209, 209, 209, 0.74);
			-moz-box-shadow:    7px 7px 5px 0px rgba(209, 209, 209, 0.74);
			box-shadow:         7px 7px 5px 0px rgba(209, 209, 209, 0.74); }

				
/* --- Für die Blockdarstellung der Sidebar (Breite: 300 Pixel) ---*/	
.sidebar_block {
    background: url("/sites/ms-institut.de/files/pictures/sidebar_back.png");
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
	margin-bottom: 15px;
    padding: 10px 18px 5px 18px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	max-width:302px;
}

		
/* --- -------------------------------------------------------------------------- --- */
/* --- ---------------------------------- Tables -------------------------------- --- */
/* --- -------------------------------------------------------------------------- --- */
table { border-spacing:0; margin: 0; border:0; width:100%; }
table tr.head { background:#B8CFEF; border-bottom: 1px solid #404040; border-top: 1px solid #404040; vertical-align: middle; }
table tr.ueber { font-size: 11pt; color: #404040; font-weight: bold; padding:5px; background-color: #DBE5F1; margin: 0 0 15px 0; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; }
table tr.odd { background:#f0f0f0; border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; }
table tr.even { background:#ffffff; border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; }

/* table td, table th { padding:5px; } */
/* Remove table borders
table.noborder td, table.noborder th, table.noborder tr { border:none; } */


/* --- -------------------------------------------------------------------------- --- */
/* --- --------------------------------- Formulare ------------------------------ --- */
/* --- -------------------------------------------------------------------------- --- */
.eingabefeld { 
			font-family: Verdana,Arial,sans-serif; 
			font-size:14px; 
			border: 1px solid #D5E8FF; 
			background-color: #FFFFFD; 
			text-align:left; 
			padding: 10px; 
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			}
.preis {
		font-size: 15px;
		color: #000000;
		text-align: center;
		background-color: #FFFFFF;
		border: 2px solid #297ACC;
		padding: 6px;
		font-weight: 700;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		-webkit-box-shadow: 0 2px 6px #afafaf inset; 
		-moz-box-shadow: 0 2px 6px #afafaf inset; 
		box-shadow: 0 2px 6px #afafaf inset;
		}
.rand_rot { border-color: #FF0000; }

.button { 
		color: #FFFFFF;
		padding: 5px 15px 5px 15px;
		background: rgba(184,207,239,1);
		background: -moz-linear-gradient(top, rgba(184,207,239,1) 0%, rgba(0,102,237,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(184,207,239,1)), color-stop(100%, rgba(0,102,237,1)));
		background: -webkit-linear-gradient(top, rgba(184,207,239,1) 0%, rgba(0,102,237,1) 100%);
		background: -o-linear-gradient(top, rgba(184,207,239,1) 0%, rgba(0,102,237,1) 100%);
		background: -ms-linear-gradient(top, rgba(184,207,239,1) 0%, rgba(0,102,237,1) 100%);
		background: linear-gradient(to bottom, rgba(184,207,239,1) 0%, rgba(0,102,237,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#1487d4', GradientType=0 );
		border-radius: 15px 15px 15px 15px;
		-moz-border-radius: 15px 15px 15px 15px;
		-webkit-border-radius: 15px 15px 15px 15px;
		border: 0px;
		-webkit-box-shadow: 10px 10px 16px 0px rgba(191,191,191,0.58);
		-moz-box-shadow: 10px 10px 16px 0px rgba(191,191,191,0.58);
		box-shadow: 10px 10px 16px 0px rgba(191,191,191,0.58);
		}
		
		
/* --- Angaben für die Warenkorbdarstellung --- */
.shop { vertical-align:top; background-color:#FFFFFF; font-size:10pt; font-family:helvetica, arial, sans-serif; font-weight:normal; padding:4px; }
.odd { background:#f0f0f0; border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; }
.even { background:#ffffff; border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; }
.summenzeile1 { background-color:#F0F0F0; font-size:14px; text-align:right; font-family:helvetica, arial, sans-serif; font-weight:bold; border-left:none; border-right:none; border-top:1px solid #b0b0b0; border-bottom:1px solid #b0b0b0; padding:0; margin:0; }
.summenzeile2 { background-color:#FFFFFF; text-align:right; font-size:14px; font-family:helvetica, arial, sans-serif; font-weight:normal; border-left:none; border-right:none; border-bottom:none; border-top:none; padding:0; margin:0; }
.summenfeld { border-style:none; font-family:helvetica, arial, sans-serif; background-color:#F0F0F0; font-size:14px; text-align:right; padding:2px; height:23px; }
.fehler { border: 1px solid #a0a0a0; padding:7px 7px 7px 35px; background-color:#F0F0F0; background-image: url(/sites/ms-institut.de/files/pictures/shop/warn.gif); background-repeat:no-repeat; background-position:5 7; font-size:9pt; font-family:helvetica, arial, sans-serif; font-weight:bold; }.korb_menue { font-size:0px; color: #FCFCFC; background-image: url(/sites/ms-institut.de/files/pictures/shop/korb_menue.gif); background-repeat:no-repeat; }
.preis, .zahl {
		font-size: 15px;
		color: #000000;
		text-align: center;
		background-color: #FFFFFF;
		border: 2px solid #297ACC;
		padding: 6px;
		font-weight: 700;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		-webkit-box-shadow: 0 2px 6px #afafaf inset; 
		-moz-box-shadow: 0 2px 6px #afafaf inset; 
		box-shadow: 0 2px 6px #afafaf inset;
		}
.rand_rot { border-color: #FF0000; }
.zahl { 	width:15px; padding: 4px 8px 4px 8px; margin-right: 8px; 
		-webkit-box-shadow: 4px 4px 13px 0px rgba(186, 186, 186, 0.86);
		-moz-box-shadow:    4px 4px 13px 0px rgba(186, 186, 186, 0.86);
		box-shadow:         4px 4px 13px 0px rgba(186, 186, 186, 0.86); }


/* --- Sonstige Definitionen --- */
textarea { white-space: nowrap; overflow: scroll; line-height:33px; width:100%; background:none; border:0px; }

.content-frame1 { 
				border:1px solid #ffffff; 
				-webkit-border-radius: 15px; 
				-moz-border-radius: 15px; 
				border-radius: 15px; 
				padding: 10px 15px 10px 15px; 
				overflow:hidden; 
				margin:0 0 0px 0; 
				-webkit-box-shadow: 0 2px 6px #efefef inset; 
				-moz-box-shadow:0 2px 6px #efefef inset; 
				box-shadow:0 2px 6px #efefef inset; }

.content-frame2 { 
				background: #F2F5FF; 
				border:1px solid #ffffff; 
				-webkit-border-radius: 15px; 
				-moz-border-radius: 15px; 
				border-radius: 15px; 
				padding: 10px 15px 10px 15px; 
				overflow:hidden; 
				margin:0 0 0px 0; 
				-webkit-box-shadow: 0 2px 6px #efefef inset; 
				-moz-box-shadow:0 2px 6px #efefef inset; 
				box-shadow:0 2px 6px #efefef inset; }
				

/* --- -------------------------------------------------------------------------- --- */
/* --- ------------------- Style-Definitionen für den Slider -------------------- --- */
/* --- -------------------------------------------------------------------------- --- */
/* 
* Javascript Slideshow 
*/
#slider { position:relative; margin:0 auto; padding:0;}
#slideshow { background: none; border: 0px; position:relative; display:none; }
#slideshow img { display:none; }

.slider-item { width:100%!important; max-width:100%!important; }
.slider-item .content { padding:30px 0 0 0; position:relative; }
.slider-item a { outline:none; }

#slider-controls-wrapper { padding:20px 0; display:none; } 
#slider-controls { display:block; text-align:center; } 
#slider-controls ul { display:block; overflow:hidden; margin:0; padding:0; text-align:center; }
#slider-controls ul li { display:inline; margin:0; padding:0; list-style:none; }
#slider-controls ul li a { width:17px; height:17px; background:url('/sites/ms-institut.de/files/pictures/inactive-slide.png') no-repeat center center; display:inline-block; padding:0; margin:0; outline:none; }
#slider-controls ul li a:focus { outline:none; }
#slider-controls ul li.activeSlide a:hover, #slider-controls ul li.activeSlide a { background:url('/sites/ms-institut.de/files/pictures/active-slide.png') no-repeat center center; }

/* 
* Slideshow Typography
*/
#slideshow h2 { margin:0 0 10px 0; color:#222222; font-size:30px; font-weight:bold; }