/*  
			Part 1: MELA special css rules in tandem with paperbat.css
			==========================================================
			- extra panels
			- extra pads
			- extra Mela font sizes
			- MELA header
			- MELA receiver
			- MELA nav bar
			- modal alerter
			- MELA content menu
			- MELA options menu
			. GAME-WRAPPER BASE
			- jQuery classes
			- MEDIA QUERIES / BREAKPOINTS
			Part 2: Additional css rules (media query independent)
*/

.strip100 {
	width:100%;}

/* ----------------------------------------------------------------------- extra panels */	
.panelperc18-75 {
	width:18%}	
.panelperc25 {
	width:28%}
/* panel to define with JS or element styles */
.panelx {}

/* ------------------------------------------------------------------------- extra pads */
.pad {
	padding:15px;}
.pad5-10 {
	padding:5px 10px}
.pad5-10-0 {
	padding:5px 10px 0}	
.pad8-10 {
	padding:8px 10px}	
.pad10-15 {
	padding:10px 15px}	
.pad10 {
	padding:10px}	
.pad5 {
	padding:5px;}	
.pad-no-top5 {
	padding:0 0 5px;}		
.pad-no-bottom {
	padding:15px 15px 0 15px}	
.pad-no-top {
	padding:0 15px 15px}
.pad-no-topbottom {
	padding:0 15px}
	
/* -------------------------------------------------------------- extra Mela font sizes */

.mela-fsize15 {
	font-size: 0.938em}	
.mela-fsize14 {
	font-size: 0.875em}	
.mela-fsize12 {
	font-size: 0.750em}	
	
/* ------------------------------------------------------------------------ MELA header */	

#mela-topstrip100 {
	background:#4d6978 url("../img/topstrip_bg.png") repeat-x;
	background-position:0px -25px;
	color:white;
	left:0;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100%;
	z-index:99}
	
#mela-topstrip {
	display:block;
	height:inherit}	
	
#mela-head-chapterline {
	font-size:1.75em;
	font-weight:400;
	padding:20px 10px 0}
	
#mela-header-lw-logo {
	padding:30px 10px 0;
	text-align:right}
	
#mela-header-sm-minilogo {
	padding-top:20px;
	padding-right:10px;
	text-align:right}
	
/* ---------------------------------------------------------------------- MELA receiver */	
	
#mela-receiver-holder {
	display:block;
	min-height:600px;
	overflow:hidden;
	position:relative}	
	
#mela-receiver {
	display:block;
	min-height:600px;
	position:relative}
	
/* Level 4-03 */
.receiver-holder-def {
	background-color:white}

.receiver-def {
	background-color:white;
	color:#2a3c47}	
	
/* js-show if viewportClass < 5 */
#mela-container-cushion {
	display:none;
	height:52px}
	
.mela-centerMiddleMe {
	text-align:center}	
	
/* ----------------------------------------------------------------------- MELA nav bar */			
	
#mela-nav-receiver-holder {
	background-color:rgb(77, 105, 120); /* changeW */
	left:0;
	overflow:auto;
	position:fixed;
	top:0;
	width:100%;
	z-index:99}

#mela-nav-receiver {
	/* background-color:rgb(77, 105, 120); */  /* changeW */
	color:white;
	display:block;
	height:48px}
	
.mela-nav-numbers {
	font-weight:600;
	padding-top:3px}	
	
[class*='mela-nav-btn'] {
	color:#dbdbdb;
	cursor:pointer}

#mela-goprev, #mela-gonext {
	cursor:pointer}	

.mela-nav-btn-menu, .mela-nav-btn-gonext {
	padding-right:15px}
	
.mela-nav-btn-goprev, .mela-nav-btn-options {
	padding-left:15px}

.mela-nav-spinner {
	color:#dbdbdb;
	display:none;
	font-size:1.5em}
	
/* ---------------------------------------------------------------------- modal alerter */

#mela-def-alert-modal {
	background:#f5f5f5;
	border:solid 1px #2a2a2d;
	box-shadow: 0px 0px 4px #868688;
	border-radius:6px;
	left:100px;
	width:250px;
	position:fixed;
	top:100px;
	z-index:500}	
	
.mela-alert-modal-topstrip {
	background:#db4f23;
	color:white;
	padding:2px 5px}	
	
.mela-alert-modal-message	{
	font-size:0.875em;
	padding:5px}
	
.mela-alert-modal-question	{
	font-size:0.875em;
	font-weight:700;
	padding:5px;
	text-align:center}	

.mela-alert-modal-buttons-holder {
	margin-bottom:8px;
	overflow:hidden;}
	
.mela-alert-modal-buttons-holder div {
	cursor:pointer;
	float:left;
	padding:4px 0;
	text-align:center;
	width:50%}	
	
#mela-alert-modal-cancel {
	color:#db4f23}	
#mela-alert-modal-continue {
	color:#2a9432}	
	
/* ------------------------------------------------------------------ MELA content menu */

#mela-content-menu-holder {
	display:none;
	height:auto;
	min-height:240px;
	overflow:auto;
	position:fixed;
	/* position:absolute; */
	width:250px;
	z-index:98}

#mela-content-menu {
	background:rgb(42, 42, 45);
	background:rgba(42, 42, 45, 0.9);
	color:#f5f5f5;
	min-height:240px;
	padding:10px;
	position:absolute;
	width:250px;}
	
#mela-content-menu.mela-menu-bottom {
	border-top-right-radius:8px;
	left:-240px}
#mela-content-menu.mela-menu-top {
	border-bottom-left-radius:8px;
	left:240px}	
		
.mela-menu-chapter-box {
	border-top:solid 1px #868688;
	display:block;
	overflow:auto;
	width:100%}
	
.mela-menu-chapter-box:after {
	clear:both}	
	
.mela-menu-chapter-box div {
	float:left}
	
.mela-menu-chapter-title {
	font-weight:600;
	padding:6px 1px;
	/* margin-right:5px; */
	width:190px;}	
	
.mela-menu-chapter-btn {
	cursor:pointer;
	font-size:1.5em;
	text-align:center;
	width:40px;}
	
.mela-menu-chapter-btn:hover {
	color:#f3c3b4}	
	
.mela-menu-ctnr-item {
	padding:6px 0 6px 10px;
	display:block;
	overflow:auto;
	width:100%}
	
.mela-menu-chapter-title, .mela-menu-ctnr-item {
	cursor:pointer;
	font-size:0.938em} 
	
.mela-menu-chapter-title:hover, .mela-menu-ctnr-item:hover {
	background-color:rgba(219, 79, 35, 0.6)}
	
.mela-menu-current-item {
	background-color:rgba(77, 105, 120, 0.6)}

/* ------------------------------------------------------------------ MELA options menu */
	
#mela-options-menu-holder {
	display:none;
	height:auto;
	min-height:60px;
	overflow:hidden;
	position:fixed;
	width:300px;
	z-index:98}
	
#mela-options-menu {
	background:rgb(245, 245, 245);
	background:rgba(245, 245, 245, 0.9);
	border-left:solid 1px #868688;
	border-top:solid 1px #868688;
	border-top-left-radius:8px;
	left:0;
	min-height:60px;
	padding:5px;
	position:absolute;
	top:40px;
	width:300px}	
	
#mela-options-menu-btnrow div {
	color:#4d6978;
	cursor:pointer;
	float:left;
	text-align:center;
	width:20%}	
	
#mela-options-menu-btnrow div.borderRight {
	border-right:dotted 1px #868688}	
	
#mela-options-menu-descs div {
	color:#2a2a2d;
	float:left;
	font-size:0.625em;
	padding-top:3px;
	text-align:center;
	width:20%}	
#mela-options-menu-descs div.x2 {
	width:40%}	
	
/* ------------------------------------------------------------ game-wrapper base class */

#game-wrapper {
	/* border: 1px solid #eef7fd; */
	display:block;
	/* margin:15px; */
	position:relative}	
	
/* --------------------------------------------------------------------- jQuery classes */	

.mela-container-big {
	display: block;
	height:600px;
	overflow:hidden}	
	
.mela-nav-receiver-big {
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;}	
	
/* -------------------------------------------------------- MEDIA QUERIES / BREAKPOINTS */

/* small */
@media screen and (max-width: 559px) {
	#mela-head-chapterline {
		font-size:1.125em;
		letter-spacing:0px;
		padding:8px 5px 0}
	#mela-header-sm-minilogo {
		padding-top:10px}	
	.mela-fsize15, .mela-fsize14, .mela-fsize12 {
		font-size: 1em}	
	.break-s33 {
		width:33%} 	
	.break-s .pad {
		padding:15px 15px 0 15px}
	.mela-centerMiddleMe {
		font-size:90%}
	.s-img-50 {max-width:50%; height:auto}	
	.s-img-75 {max-width:75%; height:auto}	
}

/* medium */
@media screen and (min-width: 560px) and (max-width: 823px) {
	#mela-head-chapterline {
		font-size:1.5em;
		padding:8px 5px 0}
	#mela-header-sm-minilogo {
		padding-top:15px}
	.mela-fsize15, .mela-fsize14, .mela-fsize12 {
		font-size: 1em}	
	.break-m66 {
		width:66%}
	.break-m33 {
		width:33%}	
	.break-m .pad {
		padding:15px 15px 0 15px}
	.mela-centerMiddleMe {
		font-size:95%}
	.m-img-50 {max-width:50%; height:auto}	
	.m-img-75 {max-width:75%; height:auto}	
}

/* large */
@media screen and (min-width: 824px) and (max-width: 1139px) {
	#mela-head-chapterline {
		font-size:1.5em;
		letter-spacing:1px;
		padding:13px 5px 0}
	#mela-header-lw-logo {
		padding-top:20px}
}		

/* wide */
@media screen and (min-width: 1140px) {
	#mela-head-chapterline {
	letter-spacing:1px}
}	

/* detect standalone */
@media all and (display-mode: standalone) { 
	
}
		
/*  
			Part 2: Additional css rules (media query independent)
			======================================================
			- body classes
			- base font / font style classes
			- general Layout
			- special Layouts
			- special img props
			- Font Awesome Lists
*/

/* ----------------------------------------------------------------------- body classes */ 

body {
	color:#2a2a2d;
	font-family: 'Open Sans', sans-serif;
	font-size:1em;
	font-weight:400;}
	
body.wideBG {
	background-color:white}
body.tightBG {
	background-color:white}	
	
/* ----------------------------------------------------- base font / font style classes */ 		

/* Open Sans: 400,400italic,600,600italic,700,700italic,300,300italic */
.fos-i {
	font-style:italic;}
.fos-sb {
	font-weight:600;}
.fos-sbi {
	font-style:italic;
	font-weight:600;}
.fos-b {
	font-weight:700;}
.fos-bi {
	font-style:italic;
	font-weight:700;}
.fos-l {
	font-weight:300}	
.fos-li {
	font-style:italic;
	font-weight:300}		

/* Open Sans Condensed: 300,300italic */	
.fosc {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:300;}
.fosc-i {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style:italic;
	font-weight:300;}	
	
/* --------------------------------------------------------------------- general Layout */

p {
	margin:0 0 10px 0}
	
.alignRight {
	text-align:right}	
.alignCenter {
	text-align:center}	
	
.hiColorRed {
	color:#db4f23}
	
.cfmin {
	clear:both;
	font-size:1px;
	margin:0;
	padding:0}	

/* nowhere used */	
.containerVC {
	position: relative;
	width: 100%;
	height: 500px;
}
/* nowhere used */
.containerVC-middleMe {
	margin: 0 auto;
	position: relative;
	width: 100%;
	text-align:center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}		
	
/* -------------------------------------------------------------------- special Layouts */	
	
.divCB {
	display:block;
	text-align:center}	
	
.borderRight {
	border-right:1px solid #2a2a2d}	
	
/* ------------------------------------------------------------------ special img props */	

.imgL {
	float:left;
	margin:0 10px 10px 0}
	
.imgB {
	display:block;
	margin:0 0 10px 0}
	
.img-rc6 {
	/* border:0px solid #; */
	border-radius:6px}
	
.img-a {
	cursor:pointer;}

.img-a:hover {
	border-radius:20px}	
		
/* ----------------------------------------------------------------- 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:#4d6978;
	top: 7px;}