/**
 * Styling der Meldungen: Error, Notice, usw.
 * NUR Verwendbar mit Joomla >= 3.3, da Bootstraped. 
 *
 * Erfolgsmeldung: /kontakt.html erfolgreich absenden
 * Fehlermeldung: registrierung.html mit neuem Benutzer registrieren ohne reCaptcha auszufüllen
 * Warnhinweis: /mitgliederbereich aufrufen, da registrierter Bereich
 *
 * @author: PM, RH, siehe https://trello.com/c/LRDBZEEQ
 * @link http://getbootstrap.com/2.3.2/components.html#alerts
 * @link http://docs.joomla.org/Display_error_messages_and_notices
 **/
 #system-message-container{ width:100%; margin:0 auto}
	#system-message {
		padding: 10px; 
		background: #ECF0F1;
		margin-bottom: 15px;
		padding: 0px;
		background: none;
	}
	
	

	#system-message .alert {
		padding: 8px 35px 8px 14px;
		margin-bottom: 20px;
		text-shadow:none;
		background-color: #26425E;
		border: 1px solid white;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		padding:15px 15px 15px 42px;
		color: white;
	}
	#system-message .alert h4 {
		margin: inherit;
		margin-bottom: 14px;
	}
	.js-message-container .alert-success h4, 
	.js-message-container .alert-success,	
	#system-message .alert.alert-message .alert-message,
	#system-message .alert.alert-notice .alert-message,
	#system-message .alert h4,
	#system-message .alert.alert-warning .alert-message {
		color: white;
		text-shadow: none;
	}
	
	.js-message-container .alert-error, 
	.js-message-container .alert-danger, 
	#system-message .alert-danger, 
	#system-message .alert-error {
		color: white;
		background-color: #26425E;
		border-color: white;
		border-radius: 0px;
	}
	.js-message-container .alert-error h4,
	.js-message-container .alert-error,
	#system-message .alert-error .alert-message,
	#system-message .alert-error h4 {
		color: white;
		text-shadow: none;
	}
	
	
	#system-message .alert-success {
		color: #468847;
		background-color: #dff0d8;
		border-color: #468847;
	}
	#system-message .alert-success .alert-message,
	#system-message .alert-success h4 {
		color: #468847;
	}
	
	
	#system-message .alert-info {
		color: #3a87ad;
		background-color: #d9edf7;
		border-color: #3a87ad;
	}

	#system-message .alert-info .alert-message p,
	#system-message .alert-info .alert-message,
	#system-message .alert-info h4 {
		color: #3a87ad;
	}

	
	
	#page .js-message-container button.close:hover,
	#system-message .alert .close:hover {
		color: white; 
		
		background-color: transparent;
		border: 0px solid transparent;
	}
	.js-message-container button.close,
	#system-message .alert .close {
		position: relative;
		top: -2px;
		right: 0px;
		line-height: 20px;
	}
	.js-message-container button.close, 
	#system-message button.close {
		padding: 0;
		cursor: pointer;
		background: transparent;
		border: 0;
		-webkit-appearance: none;
	}
	.js-message-container button.close,
	#system-message .close {
		cursor: pointer;
		float: right;
		font-size: 32px;
		font-weight: bold;
		/*line-height: 20px;*/
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		/*filter: alpha(opacity=20);*/
		padding: 3px 3px 10px 10px;
		z-index: 99999;
	}

	/* Nachricht soll immer oben sein */
		#messages_container {
			position: fixed;
		    top: 105px;
		    width: auto;
		    margin: 0 auto;
		    transform: translate(-50%, 0);
		    -ms-transform: translate(-50%, 0);
		    -webkit-transform: translate(-50%, 0);
		    left: 50%;
			z-index: 999999999999;
			text-align: center;
		}


	/* Message Container */
	.js-message-container button.close, 
		#messages_container #system-message .alert .close {
		    position: absolute;
		    top: 24px;
		    right: 20px;
		    line-height: 20px;
		    padding: 0;
		}
		.js-message-container .alert-error,
		#messages_container #system-message .alert {
            position: relative; /* Damit die Icons auch zur Box gehören, und nicht die Icons oben sich stapeln, wenn mehrere Boxen angezeigt werden. Testbar im Kontaktformular bei ENV=DEV. */
		    padding: 20px 70px;
	    	border-radius: 0;
		}
		.js-message-container #system-message-container h4,
		#messages_container #system-message .alert h4 {
		    display: block; /* Überschrift soll über dem Text stehen, nicht links daneben*/
		    margin: 0;
		    margin-bottom: 20px;
		    font-size: 20px;
		}
		.js-message-container #system-message-container .alert h4 + div, 
		#messages_container #system-message .alert h4 + div {
		    display: inline-block;
	        font-size: 17px;
		}



	/* Warning Message */
		.js-message-container .alert.alert-success,
		#messages_container #system-message .alert.alert-message {
			border-color:white ;
			background-color: #31BFD4 ;
			border-radius: 0px;
		}