/*  
			Client framework specific CSS RULES | Can be adapted on client turnover
			====================================================================================
*/

/* the class wideBG is added per JS, here background-color and background-image can be adapted */
body.wideBG {
	background-color:#fff}
body.tightBG {
	background-color:#fff}	
	
/* ---------------------------------------------------------------------- MELA receiver */	
	
/* Level 4-03 */
.receiver-holder-def {
	background-color:#fff}

.receiver-def {
	background-color:#fff;
	color:#2a2a2d}	
	
/* ------------------------------------------------------------------------ MELA header */

/* 100%-wide topstrip - background-image, background-position, font-color */ 
#mela-topstrip100 {
	background:#e4e4e4 url("../img/topstrip_bg.png") repeat-x;
	color:#3e3d40;
	text-shadow: 1px 1px #ebebeb;}
	
/* padding of client-logo for large-wide viewports */
#mela-header-lw-logo {
	padding:25px 10px 0;
	text-align:right}
	
/* padding of client-logo for small-medium viewports */
#mela-header-sm-minilogo {
	padding-top:20px;
	padding-right:10px;
	text-align:right}	
	
/* ----------------------------------------------------------------------- MELA nav bar */

/* background-color, possibly background-image, font-color */
#mela-nav-receiver {
	background-color:#e4e4e4;
	color:#3e3d40}
	
/* font-color (fontAwesome icons) */
[class*='mela-nav-btn'] {
	color:#ad4a9d}

/* color: spinning fontAwesome icon during container loading */	
.mela-nav-spinner {
	color:#3e3d40}
	
/* ------------------------------------------------------------------ MELA content menu */

/* background-color, font-color */
#mela-content-menu {
	background:rgb(229,229,229);
	background:rgba(229,229,229, 0.9) url("../img/cmenu_bg.png") repeat-x;
	color:#3e3d40}
	
/* color of seperation-lines in content menu  */
.mela-menu-chapter-box {
	border-top:solid 1px #cec9c5}
	
/* font-color of rolled-over area  */
.mela-menu-chapter-btn:hover {
	color:#ebebeb}
	
/* background-color of rolled-over area  */
.mela-menu-chapter-title:hover, .mela-menu-ctnr-item:hover {
	background-color:rgba(151,36,132, 0.6);
	color:#fff}

/* background-color of currently selected area (container)  */	
.mela-menu-current-item {
	background-color:rgba(213,166,205, 0.6)}
	
/* ------------------------------------------------------------------ MELA options menu */

/* background-color and border-colors */
#mela-options-menu {
	background:rgb(229,229,229);
	background:rgba(229,229,229, 0.9);
	border-left:solid 1px #968f88;
	border-top:solid 1px #968f88}
	
/* font-color (fontAwesome icons) */
#mela-options-menu-btnrow div {
	color:#a64e9a}
	
/* dotted seperation-lines */
#mela-options-menu-btnrow div.borderRight {
	border-right:dotted 1px #968f88}
	
/* font-color of text descriptions */
#mela-options-menu-descs div {
	color:#2a2a2d}
	
/* ----------------------------------------------------------------- Font Awesome Lists */
	
.fa-ul > li {
	display:block;
	font-size:0.938em;
	padding:4px 2px;
	width:95%}
	
.fa-ul > li.ul-mela-link {
	color:#cc6600;
	cursor:pointer}	
	
.fa-ul > li.ul-mela-link:hover {
	background-color:#e7ebed}		
	
.fa-li {
	color:#7482b0;
	top: 7px;}	

/* --------------------------------------------------------------------- general Layout */	

.hiColorRed {
	color:#813929}	

/* -------------------------------------------------------- MEDIA QUERIES / BREAKPOINTS */

/* small */
@media screen and (max-width: 559px) {
	#mela-topstrip100 {
		background:#e4e4e4 url("../img/topstrip_bgv1.png") repeat-x; }
	#mela-header-sm-minilogo {
		padding-top:2px}	
}

/* medium */
@media screen and (min-width: 560px) and (max-width: 823px) {
	#mela-topstrip100 {
		background:#e4e4e4 url("../img/topstrip_bgv2.png") repeat-x; }
	#mela-header-sm-minilogo {
		padding-top:6px}		
}

/* large */
@media screen and (min-width: 824px) and (max-width: 1139px) {
	#mela-topstrip100 {
		background:#e4e4e4 url("../img/topstrip_bgv3.png") repeat-x; }
	#mela-header-lw-logo {
		padding-top:15px}
}		

/* wide */
@media screen and (min-width: 1140px) {
	
}