/*============================================

MetroBox by SONHLAB.com - version 1.4
Website: http://sonhlab.com
Documentation: http://docs.sonhlab.com/metrobox-unique-responsive-lightbox/

============================================*/

/* START METROBOX - REQUIRED */
#metrobox {
	position:fixed;
	z-index:99991;
	display:none;
	width:100%;
	height:100%;
	top:0;
    left: 0;
	/*overflow:hidden;*/
}
#mb-station {
	display:none;	
}

.mb-imgholder, .mb-videoholder, .mb-videoholder *  {
	z-index:99998;
	margin:auto;
}

/* Comment Zone */
#mb-commentzone {
	position:absolute;
	z-index:99999;
	height:100%;
}

.mb-comments {
	position:relative;
}

.mb-cmmes {
	height:100%;
	position:relative;
}
.mb-author {
	margin-bottom:1em;
	height:5em;
}
.mb-cmuser, .mb-cmmessage, .mb-cmdate {
	display:block;
	
}
.mb-cmmessage, .mb-cmdate {
	font-size:1em;
	line-height:1.5em;
}
.mb-cmuser {
	font-size:1.5em;
	line-height:150%;
}

/* End Comment Zone */



/* Custom Content Zone */
#mb-customzone {
	position:absolute;
	z-index:99999;
	height:100%;
}
.mb-customholder {
	position:relative;
}
.mb-customcontent {
	position:relative;
	height:100%;
}


/* End Custom Content Zone */
.mb-subtoolbar {
	background:#999;
	height:48px;
	width:100%;
}
.mb-cmhidebt, .mb-customhidebt {
	background:#111 url(../images/metrobox/close-white-48a.png) no-repeat;
	cursor:pointer;
	height:48px;
	width:48px;
	position:relative;
	float:right;
	z-index:999999;
	display:none;
}


.mb-loading {
	background:transparent;
	height:36px;
	width:36px;
	padding:6px;
	position:relative;
	float:right;
	z-index:999999;
}
.mb-loadimg {
	position:relative;
	width:36px;
	height:36px;
}

.mb-textlightstyle {
	font-family: sans-serif;
	color:#fafafa;
	height:100%;
}
.mb-textlightstyle a {
	color:#fafafa;	
}
.mb-textdarkstyle {
	font-family:sans-serif;
	color:#000;
	height:100%;
}
.mb-textdarkstyle {
	color:#1E1E1E;	
}


.mb-show {
	cursor:pointer;	
}

#mb-contentzone {
	position:fixed;
	margin:auto;
	z-index:99998;
	display:none;
    border-top: 4px solid #34CB98;
    border-bottom: 2px solid #2b2b2b;
}

#mb-header {
	height:48px;
	width:100%;
	position:fixed;
}
#mb-close {
	float:right;
	/*background:url(/Content/plugins/metrobox/images/metrobox/close-white-48a.png) no-repeat;*/
	cursor:pointer;
	height:48px;
	width:48px;
    margin-right: 15px;
    color: #FFF;
}
#mb-next {
	float:right;
	background:url(../images/metrobox/next-white-48.png) no-repeat;
	cursor:pointer;
	height:48px;
	width:48px;
}
#mb-prev {
	float:right;
	background:url(../images/metrobox/prev-white-48.png) no-repeat;
	cursor:pointer;
	height:48px;
	width:48px;
}

.mb-disable {
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}

#mb-loadingholder {
	width:5em;
	height:5em;
	position:fixed;
	top:50%;
	left:50%;
	padding:0.6em;
	z-index:99999;
	display:none;
    background: transparent;
	margin-top:-2.5em;
	margin-left:-2.5em;
	border-radius:0.5em;
}
#mb-loading {
	position:relative;
	background:url(../images/loading.gif) no-repeat;
	width:60px;
	height:60px;
}

#mb-cmshowbt {
	background:url(../images/metrobox/comment-white-48.png) no-repeat;
	cursor:pointer;
	height:48px;
	width:48px;
	position:relative;
	float:right;
}
#mb-custombt {
	background:url(../images/metrobox/info-white-48.png) no-repeat;
	cursor:pointer;
	height:48px;
	width:48px;
	position:relative;
	float:right;
}



#mb-footer {
	position:fixed;
}

/* MODERN BROWSERS */
@media screen and (orientation: portrait) {
	#mb-header {
		top:0;
	}

	#mb-footer {
		height:48px;
		width:100%;
		bottom:0;
	}

	#mb-contentzone{
		width:90%;
		height:70%;
		left:5%;
		top:15%;
	}

	.mb-imgholder {
		overflow:hidden;
	}
	
	.mb-responsive-img {
		width:100%;
		margin:auto;
		display:block;
		position:relative;
	}
	
	.mb-videoholder {
		width:90%;
		height:70%;
		position:fixed;
	}
	
	.mb-responsive-video {
		height:100%;
		width:100%;
		margin:auto;
		display:block;
		position:relative;
	}
	
}

@media screen and (orientation: landscape) and (min-height:481px) {
	#mb-header {
		top:0;
	}
	#mb-footer {
		height:48px;
		width:100%;
		bottom:0;
	}

	#mb-contentzone {
		width:90%;
		height:70%;
		left:5%;
		top:15%;
	}
	
	.mb-imgholder {
		width:90%;
		height:70%;
		position:relative;
		overflow:hidden;
	}
		
	.mb-responsive-img {
		height:100%;
		margin:auto;
		display:block;
		position:relative;
		
	}
	
	.mb-videoholder {
		width:90%;
		height:70%;
		position:fixed;
	}
	
	.mb-responsive-video {
		height:100%;
		width:100%;
		margin:auto;
		display:block;
		position:relative;
	}
	
}

@media screen and (orientation: landscape) and (max-height:480px) { /* Show Toolbar at sides */
	#mb-header {
		width:48px;
		height:100%;
		right:0;
	}

	#mb-footer {
		width:48px;
		height:100%;
		left:0;
	}

	
	#mb-contentzone {
		width:60%;
		height:90%;
		left:20%;
		top:5%;
	}
	
	.mb-imgholder {
		width:60%;
		height:90%;
		position:relative;
		overflow:hidden;
	}
		
	.mb-responsive-img {
		height:100%;
		margin:auto;
		display:block;
		position:relative;
		
		
	}
	
	.mb-videoholder {
		width:60%;
		height:90%;
		position:fixed;
	}
	
	.mb-responsive-video {
		height:100%;
		width:100%;
		margin:auto;
		display:block;
		position:relative;
	}
	
}


@media screen and (min-width:768px) {
	#mb-commentzone, #mb-customzone {
		/*height:100%;*/
		width:30em;
		top:0;
		right:0;
		display:none;
	}
	
	.mb-author {
		margin-bottom:1em;
		height:5em;
	}

	.mb-useravatar {
		float:left;
		width:4em;
		height:4em;
		padding:0.5em;
	}
	.mb-useravatar img {
		width:4em;
		height:4em;
	}
	.mb-meszone {
		float:left;
		width:24em;
		padding:0.5em;
		
	}

}


@media screen and (min-width:640px) and (max-width:767px) {
	#mb-commentzone, #mb-customzone {
		/*height:100%;*/
		width:30em;
		top:0;
		right:0;
		display:none;
	}
	
	.mb-author {
		margin-bottom:1em;
		height:5em;
	}
	
	.mb-useravatar {
		float:left;
		width:4em;
		height:4em;
		padding:0.5em;
	}
	.mb-useravatar img {
		width:4em;
		height:4em;
	}
	.mb-meszone {
		float:left;
		width:24em;
		padding:0.5em;
	}
}

@media screen and (min-width:481px) and (max-width:639px) {
	#mb-commentzone, #mb-customzone {
		/*height:100%;*/
		width:100%;
		top:0;
		right:0;
		display:none;
	}
	
	.mb-author {
		margin-bottom:1em;
		height:5em;
	}
	
	.mb-useravatar {
		float:left;
		width:10%;
		padding:2%;
	}
	.mb-useravatar img {
		width:100%;
	}
	.mb-meszone {
		float:left;
		width:82%;
		padding:2%;
	}
}

@media screen and (max-width:480px) {
	#mb-commentzone, #mb-customzone {
		/*height:100%;*/
		width:100%;
		top:0;
		right:0;
		display:none;
	}
	
	.mb-author {
		margin-bottom:2%;
		height:14%;
	}
	
	
	.mb-useravatar {
		float:left;
		width:10%;
		padding:2%;
	}
	.mb-useravatar img {
		width:100%;
	}
	.mb-meszone {
		float:left;
		width:82%;
		padding:2%;
	}

}
/* END MODERN BROWSERS */




#mb-contentzone > .mb-content, .mb-content {
	position:relative;
	height:100%;
	width:100%;
	min-height:100%;
	min-width:100%;
	z-index:99998;
}



/* END METROBOX */









/* START jScrollPane - REQUIRED */
.jspContainer {
	overflow: hidden;
	position: relative;
	border:0;
}

.jspPane {
	position: absolute;
	width:100% !important;
}

.jspVerticalBar {
	position: absolute;
	z-index:9999;
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
}

.jspHorizontalBar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 14px;
}

.jspVerticalBar *,
.jspHorizontalBar * {
	margin: 0;
	padding: 0;
}

.jspCap {
	display: none;
}

.jspHorizontalBar .jspCap {
	float: left;
}

.jspTrack {
	position: relative;
}

.jspDrag {
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}

.jspArrow {
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled {
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow {
	height: 16px;
}

.jspHorizontalBar .jspArrow {
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus {
	outline: none;
}

.jspCorner {
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
	margin: 0 -3px 0 0;
}
/* END jScrollPane */


/* Scrollbar Style for Mobile Devices */
.mb-mobilescroll {
	overflow:auto !important;
	-webkit-overflow-scrolling:touch !important;
}
.mb-offmainscrollbar {
	overflow:hidden;
}



/* MISC */
.breakline {
	width:100%;
	height:0.3em;
	margin:0.5em 0;
}
.lastbreakline {
	width:100%;
	height:0.3em;
	margin-top:1em;
}

.thumbnails { float:left; height:9em; margin-bottom:1em; margin-right:1em;}
.thumbnails img { max-height:9em;} 

.left { float:left; }
.hs { float:left; width:10px; height:100px; }

#mb-titleheader h2 {
    margin: 5px 5px 5px 25px;
   color: #fff;
   text-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1);
    font-family: 'Open Sans',arial;
    font-weight: 600;
    letter-spacing: -1px;
}