/**
 * Ich will sehen, dass ich nach und nach das Design etwas verbessere.
 * Dafür nutze ich einen eigenen StyleSheet, um nicht das default Design zu beeinflussen.
 * 
 * Farben:
 *  - #111 : Schwarz für Schrift
 *  - #ccc : Grau für Rahmen
 *  - #eee : dezentes Grau für Hintergründe
 *  - #def : dezentes Blau für Hintergründe
 *  - #8ac : mittleres Blau für Markierungen
 *  - #039 : kräftigeres Blau für Hervorhebungen
 *  - #c00 : Rot zur Markierung von Fehlern 
 *  - #be9 : Grün als Erfolgsmeldung 
 *
 * Verläufe:
 *  - #eee, #ddd : dezentes Grau
 *  - #ccc, #aaa : kräftifgeres Grau
 *  - #cde, #bbe : dezentes Blau
 *  - #cde, #8ac : kräftigeres Blau
 *
 * Bitte die Verläufe nicht 10x duplizieren... ich versuche das CSS so zu halten, dass man einfach
 * seine eigenen Selektoren zu den vorhandenen Farbverläufen hinzufügt und alle weiteren Styles dann
 * separat setzt. Das verhindert, dass wir am Ende 100x den gleichen Verlauf definieren und anpassen.
 */

/** siehe layout.xhtml : @import url("../../Font-Awesome/css/font-awesome.css"); */

.rich-tab-disabled,
div.formHeader,
#header,
#navSubSub li,
#menu .mainmenu li {
	background-image: none;
	background: #ddd;
	background:         linear-gradient(top, #eee, #ddd);
	background:      -o-linear-gradient(top, #eee, #ddd);
	background:     -ms-linear-gradient(top, #eee, #ddd);
	background:    -moz-linear-gradient(top, #eee, #ddd);
	background: -webkit-linear-gradient(top, #eee, #ddd);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd'); /* Farben 6-stellig! */
}

.rich-tab-active,
#navSubSub .selected,
#menu .mainmenu li.active,
#menu .mainmenu li.active li {
	background-image: none;
	background: #8ac;
	background:         linear-gradient(top, #cde, #8ac);
	background:      -o-linear-gradient(top, #cde, #8ac);
	background:     -ms-linear-gradient(top, #cde, #8ac);
	background:    -moz-linear-gradient(top, #cde, #8ac);
	background: -webkit-linear-gradient(top, #cde, #8ac);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccddee', endColorstr='#88aacc'); /* Farben 6-stellig! */
}

#content {
	margin: 10px 8px;
}

#header {
	font-size: 0.9em;
	white-space: nowrap;
	margin: 0 0 10px 0;
	padding: 5px 10px;
	clear: both;

	box-shadow: 0 0 3px rgba(0,0,0,0.25);
	border-bottom: 1px solid #ccc;
}

#header ul li {
	margin: 0;
}

#header a,
#header span {
	display: inline-block;
	height: 16px;
	padding: 0 8px 0 0;
	color: #111;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#header .popup {
	background: none;
}

/* <a> für Link... <span> wenn dieser DISABLED ist... */
#header a:before,
#header span:before {
	font-family: FontAwesome;
	font-size: 1.25em;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-decoration: inherit;
	vertical-align: middle;
	margin-right: 5px;
	color: #888;
}
#header a:hover:before {
	color: #039;
}

#formLang {
	position: absolute;
	top: 5px;
	right: 5px;
}

input, textarea, select {
	background: #def;
	 
	        border-radius: 2px;
	     -o-border-radius: 2px;
	    -ms-border-radius: 2px;
	   -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#menu ul.mainmenu li {
	border-color: #ccc;
}

.rich-tab-active,
#menu ul.mainmenu li.active {
	border-color: #039;
}

#navSub .projectHeader,
#navSub .reportHeader  {
	background: #def;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	border-radius: 0;
	margin: 0 0 5px 0;
}

.rich-tab-bottom-line,
.rich-tabpanel-content {
	border-color: #8ac;
}
.rich-tab-inactive:hover,
#navSubSub li:hover,
#menu .mainmenu li.active li:hover {
	background: #8ac;
}

/* Damit der Footer mit dem Logo immer unten ausgerichtet bleibt, brauchen wir ein paar Settings, die zusammen passen. */
html, body {
    /* Bei 100% und 100vh wird bei manchen (allen?) Browsern, z.B. MS Edge, der vertikale Scrollbalken angezeigt. */
    height: 99%;
}
.wrapperLogo {
	min-height: 100%;
	margin: 0 0 -70px 0;
}
#logo .logo {
	margin: 0 0 0 10px;
}
#logo img {
	margin-left: 20px;
}
#logo, .pushLogo {
	margin: 50px 0 0 0;
	height: 50px;
}
#logo { /* Fix für main.css Vorgaben... */
	position: relative;
	box-shadow: 0 0 20px rgba(0,0,0,0.05);
	top: auto;
	right: auto;
	width: 100%;
	padding: 10px 0;
	margin: 0;
}

a:link,
a:active,
a:visited {
	color: #039;
}
a.awesome {
	color: #000;
}

legend.mandatory:after,
span.mandatory:after,
label.mandatory:after {
	color: #8ac;
	content: " ✹";
}

.facesMSGs li.info {
	border: 1px solid #ccc;
	background: #be9;
}

.blue.awesome,.blue.awesome:visited {
	background-color: #8ac;
}
.blue.awesome:hover {
	background-color: #8ac;
}
.awesome.copy,
.awesome.save,
.awesome.apply,
.awesome.selected,
.awesome.create {
	color: #111 !important;
}

div.formHeader {
	margin: 5px 8px;
	padding: 3px;
}
div.formHeader div.leftBox {
	padding: 4px;
}