/**
 * Main Styling File for the ZUMediaPlayer
 */

@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);


/**
 * ZU Player Container
 */

@media only screen and (max-width: 1200px) {
	.zu-container {
		font-size       : 80%;
	}
}

@media only screen and (max-width: 900px) {
	.zu-container {
		font-size       : 65%;
	}
}

@media only screen and (max-width: 750px) {
	.zu-container {
		font-size       : 50%;
	}
}

@media only screen and (max-width: 750px) {
	.zu-container {
		font-size       : 40%;
	}
}

.zu-container {
	margin              : 0;
	padding             : 0;
	width               : 100%;
	display             : inline-block;
	position            : relative;
	color               : #fff;
	font-family         : 'Oxygen', sans-serif;
}

.zu-container:after {
	padding-top         : 4.84375%;
	display             : block;
	content             : '';
}

.zu-bg {
	background-image    : url(../img/00_ENGINE/PLAYER/BACKGROUNDS/zothers/background_blank.png);
	background-repeat   : no-repeat;
	background-size     : contain;
	background-position : center;
	top                 : 0;
	bottom              : 0;
	left                : 0;
	right               : 0;
	position            : absolute;
	z-index             : 100;
}

.zu-controls {
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	right               : 0;
	left                : 0;
	z-index: 150;
}


/**
 * ZU Player Controls
 */

.zu-controls > * {
	position            : absolute;
	top                 : 34%;
}

/* Playlist */

.zu-playlist {
	left                : 6.74%;
	height              : 34%;
	width               : 16.45%;
	border-radius       : 20px;
	background          : rgba(255,255,255,0.1);
}

.zu-playlist:hover {
	background          : rgba(255,255,255,0.15);
}

/* Ambient */

.zu-ambient {
	left                : 25.38%;
	height              : 34%;
	width               : 11.88%;
	border-radius       : 20px;
	background          : rgba(255,255,255,0.1);
}

.zu-ambient:hover {
	background          : rgba(255,255,255,0.15);
}

/* Volume */

.zu-volume {
	left                : 38.78%;
	height              : 34.40%;
	width               : 1.614%;
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/volume_normal.png) no-repeat;
	background-size     : contain;
}

.zu-mute {
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/volume_mute.png) no-repeat;
	background-size     : contain;
}

/* Positive Timer */

.zu-pos-timer {
	left                : 41.48%;
	top                 : 37%;
	height              : 28%;
	width               : 2.5%;
	font-size           : 83%;
}

/* Previous */

.zu-prev {
	left                : 44.58%;
	top                 : 23%;
	height              : 52.68%;
	width               : 3.958%;
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/bw_normal.png) no-repeat;
	background-size     : contain;
}

.zu-prev:active {
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/bw_mo.png) no-repeat;
	background-size     : contain;
}

/* Play-Pause Button */

.zu-play {
	left                : 49.48%;
	top                 : 25%;
	height              : 50.53%;
	width               : 2.135%;
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/play_normal.png) no-repeat;
	background-size     : contain;
}

.zu-play:active {
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/play_clic.png) no-repeat;
	background-size     : contain;
}

.zu-playing {
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/pause_normal.png) no-repeat;
	background-size     : contain;
}

.zu-playing:active {
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/pause_clic.png) no-repeat;
	background-size     : contain;
}

/* Next button */

.zu-next {
	left                : 52.48%;
	top                 : 23%;
	height              : 52.68%;
	width               : 3.958%;
	background          : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/fw_normal.png) no-repeat;
	background-size     : contain;
}

.zu-next:active {
	background      	: url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/fw_mo.png) no-repeat;
	background-size 	: contain;
}

/* Negative timer */

.zu-neg-timer {
	left                : 56.48%;
	top                 : 37%;
	height              : 28%;
	width               : 2.8%;
	font-size           : 83%;
}


/* Fullscreen button */

.zu-fullscreen {
	left               : 59.98%;
	top                : 37%;
	height             : 27.95%;
	width              : 1.822%;
	background         : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/fullscreen_icon_expand.png) no-repeat;
	background-size    : contain;
}

.zu-minimize {
	background         : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/fullscreen_icon_reduce.png) no-repeat;
	background-size    : contain;
}

/* Progress bar */

.zu-progress {
	left               : 62.72%;
	top                : 35.5%;
	height             : 32.5%;
	width              : 11.88%;
	background         : rgba(255,255,255,0.1);
	border-radius      : 20px;
	overflow           : hidden;
}

.zu-progress-gradient {
	width               : 100%;
	height              : 100%;
	background-image    : -webkit-gradient(
		linear,
		left top,
		right top,
		color-stop(0, #9722C9),
		color-stop(0.43, #09C2D6),
		color-stop(0.57, #09C2D6),
		color-stop(0.73, #225594)
	);
	background-image    : -o-linear-gradient(right, #9722C9 0%, #09C2D6 43%, #09C2D6 57%, #225594 73%);
	background-image    : -moz-linear-gradient(right, #9722C9 0%, #09C2D6 43%, #09C2D6 57%, #225594 73%);
	background-image    : -webkit-linear-gradient(right, #9722C9 0%, #09C2D6 43%, #09C2D6 57%, #225594 73%);
	background-image    : -ms-linear-gradient(right, #9722C9 0%, #09C2D6 43%, #09C2D6 57%, #225594 73%);
	background-image    : linear-gradient(to right, #9722C9 0%, #09C2D6 43%, #09C2D6 57%, #225594 73%);
}

/* Effects button (rocket button) */

.zu-effect {
	left               : 74.98%;
	top                : 35%;
	height             : 33.33%;
	width              : 1.614%;
	background         : url(../img/00_ENGINE/PLAYER/AUDIO/ICONS/visual_effects_icon.png) no-repeat;
	background-size    : contain;
}

/* Spectrum Visualization */

.zu-spectrum {
	left               : 76.88%;
	height             : 34%;
	width              : 16.45%;
	border-radius      : 20px;
	background         : rgba(255,255,255,0.1);
	overflow           : hidden;
}

.zu-spectrum img {
	height              : 100%;
	width               : 97%;
}


/**
 * ZU Player Control Boxes
 */

.zu-box-left, .zu-box-right {
	float               : left;
	height              : 100%;
	text-decoration     : none !important;
	color               : #fff !important;
}

.zu-box-left {
	width               : 80%;
	padding             : 0.5% 6%;
	padding-right       : 1%;
	white-space         : nowrap;
	overflow            : hidden;
	text-overflow       : ellipsis;
}

.zu-box-right {
	width               : 20%;
	border-left         : 1.5px rgba(255,255,255,0.6) solid;
	text-align          : center;
}

.zu-box-right img {
	max-height          : 60%;
	max-width           : 70%;
}

.zu-ambient .zu-box-right img {
	width               : 50%;
}

.zu-playlist:hover .zu-box-left {
	font-size           : 0;
}

.zu-playlist:hover .zu-box-left:before {
	width               : 100%;
	display             : block;
	font-size           : 14px;
	text-align          : center;
	content             : attr(data-hover);
}


/**
 * ZU Player Panel
 */

/* Panel Container */

 .zu-panel {
	position           : absolute;
	width              : 16.45%;
	height             : 265%;
	font-size          : 0.9em;
	border-radius      : 0 0 10px 10px;
	z-index            : 75;
	display            : none;
}

.zu-panel-hidden {
	overflow           : hidden;
}

/* This extra div to ease the making sliding animation */

.zu-panel-slide {
	position           : relative;
	width              : 100%;
	height             : 100%;
	border-radius      : 0 0 10px 10px;
	-webkit-box-shadow : inset 0px -1px 0px 1px rgba(255, 255, 255, 0.5);
	-moz-box-shadow    : inset 0px -1px 0px 1px rgba(255, 255, 255, 0.5);
	box-shadow         : inset 0px -1px 0px 1px rgba(255, 255, 255, 0.5);
	top                : -100%;
	
}

/* Panel Content Container */

 .zu-panel-inner {
	position           : relative;
	z-index            : 5;
	width              : 100%;
	height             : 85%;
	/* border-radius      : 0 0 10px 10px;
	-webkit-box-shadow : 0px 2px 3px 0px rgba(255, 255, 255, 0.86);
	-moz-box-shadow    : 0px 2px 3px 0px rgba(255, 255, 255, 0.86);
	box-shadow         : 0px 2px 3px 0px rgba(255, 255, 255, 0.86); */
	
	-webkit-box-shadow : 0px 2px 1px -1px rgba(31, 28, 102, 0.77);
	-moz-box-shadow    : 0px 2px 1px -1px rgba(31, 28, 102, 0.77);
	box-shadow         : 0px 2px 1px -1px rgba(31, 28, 102, 0.77);

 }

/* Panel Content */

.zu-panel-content {
	position           : relative;
	z-index            : 10;
	width              : 100%;
	height             : 100%;
	overflow           : auto;
}

.zu-panel-content a, .zu-panel-content-no-scroll a {
	display            : block;
	padding            : 2.33% 5%;
	color              : #001655 !important;
	text-decoration    : none !important;
}

.zu-panel-content a:hover, .zu-panel-content-no-scroll a:hover {
	background         : #5c93d1;
	-webkit-box-shadow : 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow    : 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow         : 0px 0px 5px 0px rgba(0,0,0,0.75);
}

 /* Panel Content Styling separated due to scroll plugin */

.zu-panel-content .mCustomScrollBox {
	border-radius      : 0 0 10px 10px;
}

.zu-panel-content .mCSB_container, .zu-panel-content-no-scroll {
	background         : rgba(255, 255, 255, 1);
	width              : 94%;
	border-radius      : 0 0 0 10px;
	-webkit-box-shadow : 3px 0px 4px 0px rgba(17, 17, 17, 0.26);
	-moz-box-shadow    : 3px 0px 4px 0px rgba(17, 17, 17, 0.26);
	box-shadow         : 3px 0px 4px 0px rgba(17, 17, 17, 0.26);
	opacity            : 0.85;
}

.zu-panel-content-no-scroll, .zu-panel-content .mCS_y_hidden {
	width              : 100%;
	overflow           : hidden;
	border-radius      : 0px;
}

.zu-panel-content-no-scroll {
	height             : 100%;
}

.zu-panel-content.mCS_no_scrollbar {
	background         : rgba(255, 255, 255, 1);
	opacity            : 0.85;
}

.zu-panel-content a:hover, .zu-panel-content-no-scroll a:hover {
background : rgb(255,255,255);
}

.zu-panel-content.mCS_no_scrollbar .mCSB_container {
	-webkit-box-shadow : none;
	-moz-box-shadow    : none;
	box-shadow         : none;
	background         : transparent;
}

/* Scroll bar styling for panel content */

.zu-panel .mCSB_scrollTools {
	left               : 93.9%;
	width              : 5.6%;
}

.zu-panel .mCSB_draggerRail {
	opacity            : 0;
}

.zu-panel .mCSB_dragger_bar {
	width              : 80% !important;
}

/* Footer */

 .zu-panel-bottom {
	position           : relative;
	background         : rgba(255, 255, 255, 1);
	z-index            : 1;
	width              : 100%;
	height             : 20%;
	top                : -5%;
	border-radius      : 0 0 10px 10px;
	-webkit-box-shadow : inset 0px -2px 2px 1px rgba(255,255,255,0.61);
	-moz-box-shadow    : inset 0px -2px 2px 1px rgba(255,255,255,0.61);
	box-shadow         : inset 0px -2px 2px 1px rgba(255,255,255,0.61);
	opacity            : 0.85;
}

.zu-panel-bottom-left, .zu-panel-bottom-right {
	display            : inline-block;
	height             : 60%;
	bottom             : 0;
	position           : absolute;
	font-size          : 0.90em;
	text-decoration    : none !important;
	color              : #001655 !important;
}

.zu-panel-bottom-left img, .zu-panel-bottom-right img {
	height             : 60%;
	display            : inline;
}

.zu-panel-bottom-left span, .zu-panel-bottom-right span {
	display            : inline;
}

.zu-panel-bottom-left {
	left               : 0;
	padding-left       : 5%;
}

.zu-panel-bottom-right {
	right              : 0;
	padding-right      : 5%;
}


/**
 * ZU Player Specific Panels
 */

/* Playlist Panel */

.zu-panel-playlist {
	left               : 6.84%;
	top                : 76.6%;
	z-index : 1000;
}

.zu-panel-playlist .zu-panel-content a {
	width              : 100%;
	white-space        : nowrap;
	overflow           : hidden;
	text-overflow      : ellipsis;
	padding            : 0.5% 4%;
}

.zu-playlist-current-item:before {
	content            : '---->> ';
}

.zu-playlist-current-item:after {
	content            : ' <<----';
}

/* Ambient Panel */

.zu-panel-ambient {
	left               : 25.38%;
	top                : 76.6%;
	width              : 11.88%;
	z-index            : 1000;
}

.zu-panel-ambient .zu-panel-content a {
	height             : 33.3%;
}

.zu-panel-bottom-right-switch {
	right              : 2%;
	bottom             : 7%;
	position           : absolute;
	width              : 35%;
	height             : 60%;
}

/* Volume Panel */

.zu-panel-volume {
	left               : 38.58%;
	top                : 76.6%;
	width              : 2.1%;
	height             : 150%;
	border-radius      : 0 0 7px 7px;
	/* -webkit-transform: translateZ(0); */
}

.zu-panel-volume .zu-panel-slide {
	-webkit-transform: translateZ(0);
}

.zu-panel-volume .zu-panel-content-no-scroll {
	border-radius      : 0 0 7px 7px;
}

.zu-panel-volume .zu-panel-content-no-scroll .zu-volume-control {
	top                : 10%;
	height             : 80%;
}

/* Progress Panel */

.zu-panel-progress {
	left               : 62.78%;
	top                : 76.6%;
	width              : 11.88%;
}

.zu-panel-progress .zu-panel-content-no-scroll a:first-child {
	text-align         : center;
	border-bottom      : 1px rgba(255,255,255,0.5) solid;
	font-size          : 1.25em;
	padding            : 2% 4%;
}

.zu-panel-progress .zu-panel-content-no-scroll a {
	position           : relative;
	height             : 20%;
	padding            : 2% 4%;
	padding-left       : 21%;
}

.zu-panel-progress .zu-panel-content-no-scroll a img {
	left               : 4%;
	position           : absolute;
	width              : 14%;
}

/* Pages Panel */

.zu-panel-pages {
	left               : 80.95%;
	top                : 76.6%;
	width              : 11.88%;
}

.zu-panel-pages .zu-panel-content-no-scroll a {
	position           : relative;
	height             : 20%;
	padding            : 2% 4%;
	padding-left       : 21%;
}

.zu-panel-pages .zu-panel-content-no-scroll a img {
	left               : 4%;
	position           : absolute;
	width              : 14%;
}

.zu-panel-pages a {
     color: #001655 ! important;
     margin-top: 5px;
}

.zu-panel-pages a img {
     margin-top: -2px;
}

.zu-panel-pages .zu-panel-content-no-scroll {
     background-color: rgb(232, 239, 249);
}

.zu-panel-pages .zu-panel-bottom {
top                : 0%;
	height: 17%;
}

/* Logout Panel */

.zu-panel-logout {
	left               : 6.95%;
	top                : 76.6%;
	width              : 11.88%;
	height: 220%;
}

.zu-panel-logout .zu-panel-content-no-scroll {
     background-color: rgb(232, 239, 249);
}

.zu-panel-logout .zu-panel-bottom {
top                : 0%;
	height: 17%;
}

.zu-panel-logout .zu-panel-bottom img{
     margin-top:2px !important;
}

/* Login Panel */
.zu-panel-login {
	left               : 6.95%;
	top                : 76.6%;
	width              : 292px;
}

.zu-panel-login .zu-panel-bottom {
	top                : 0%;
	height: 17%;
}

.lp-links a {
	 color: #001655 !important;
	 display: inline;
    margin: 0px;
    padding: 0px;
}

.lp-links a:hover {
    cursor: pointer;
    background-color: white;
    padding: 0px;
}

.zu-panel-login .zu-panel-content-no-scroll {
     background-color: rgb(232, 239, 249);
}

.zu-panel-login .zu-panel-inner {
     height: 95%;
}

.lp-h1
{
 margin-top: 5px; color: rgb(0, 22, 85); font-size: 17px;
}

.lp-icon
{
margin-left: 10px; margin-right: 10px; height: 24px; vertical-align: -4px;
}

.lp-form
{
width:80%; margin:0 auto;
}

.lp-loginbtn
{
background-image: url("../images/previous_next_button.png"); background-size: 100% 100%; border: medium none; color: rgb(0, 22, 85); margin-right: 8px; padding: 3% 18%;
}

.lp-links
{
margin-top:5px;
}



/* Spectrum Panel */

.zu-panel-spectrum {
	left               : 76.88%;
	top                : 76.6%;
	width              : 16.25%;
}

/* Video Panel */

.zu-panel-video {
	top                : 76.6%;
	left               : 24.3%;
	width              : 51.66%;
	height             : 627.95%;
	z-index            : 50;
	display            : none;
}

.zu-panel-video.zu-panel-hidden {
	z-index            : 0;
}

.zu-panel-video .zu-panel-content-no-scroll {
	background         : rgba(67,98,177,1);

}

.zu-panel-video .zu-panel-slide {
	-webkit-box-shadow : 0px 1px 0px 1px rgba(255, 255, 255, 0.86);
	-moz-box-shadow    : 0px 1px 0px 1px rgba(255, 255, 255, 0.86);
	box-shadow         : 0px 1px 0px 1px rgba(255, 255, 255, 0.86);
	top: -101%;
}

.zu-panel-video-bottom {
	z-index            : -2;
	position           : relative;
	top                : -32%;
	left               : 25%;
	height             : 40%;
	width              : 50%;
	background         : rgba(67,98,177,0.9);
	border-radius      : 50% 50%;
	-webkit-box-shadow : 0px 0px 0px 2px rgba(255, 255, 255, 0.86), inset 0px -4px 4px 0px rgba(255,255,255,0.2);
	-moz-box-shadow    : 0px 0px 0px 2px rgba(255, 255, 255, 0.86), inset 0px -4px 4px 0px rgba(255,255,255,0.2);
	box-shadow         : 0px 0px 0px 2px rgba(255, 255, 255, 0.86), inset 0px -4px 4px 0px rgba(255,255,255,0.2);
}

/* Video Panel Controls */

.zu-panel-video-control {
	position           : absolute;
	top                : 82%;
	left               : 30%;
	width              : 40%;
	height             : 20%;
}

.zu-panel-video-setting, .zu-panel-video-arrow, .zu-panel-video-expand {
	position           : relative;
	display            : inline-block;
	width              : 20%;
	height             : 70%;
	background-size    : contain;
	background-repeat  : no-repeat;
}

.zu-panel-video-setting {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/gear_icon_normal.png');
}

.zu-panel-video-setting:active {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/gear_icon_clicked.png');
}

.zu-panel-video-arrow {
	width              : 40%;
	top                : 12%;
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_normal.png');
	margin-left        : 5%;
}

.zu-panel-video-arrow:active {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_clicked.png');
}

.zu-panel-video-expand {
	margin-left        : 6%;
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/fullscreen_video_normal.png');
}

.zu-panel-video-expand:active {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/fullscreen_video_clic.png');
}

.zu-panel-hidden .zu-panel-video-setting, .zu-panel-hidden .zu-panel-video-expand {
	display            : none;
}

.zu-panel-hidden .zu-panel-video-arrow {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_normal_flipped.png');
	left               : 34%;
	top                : 35%;
	width              : 33%;
}

.zu-panel-hidden .zu-panel-video-arrow:active {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_clicked_flipped.png');
}


/* Social Panel */

.zu-panel-social {
	top                : 76.6%;
	left               : 30.3%;
	width              : 39.66%;
	height             : 261.95%;
	z-index            : 50;
	display            : none;
}

.zu-panel-social table a:hover{
	background-color: #3A4C9E;
}

.zu-panel-social.zu-panel-hidden {
	z-index            : 0;
}

.zu-panel-social .zu-panel-content-no-scroll {
	background         : rgba(67,98,177,1);

}

.zu-panel-social .zu-panel-slide {
	-webkit-box-shadow : 0px 1px 0px 1px rgba(255, 255, 255, 0.86);
	-moz-box-shadow    : 0px 1px 0px 1px rgba(255, 255, 255, 0.86);
	box-shadow         : 0px 1px 0px 1px rgba(255, 255, 255, 0.86);
	top: -101%;
}

.zu-panel-social-bottom {
	z-index            : -2;
	position           : relative;
	top                : -32%;
	left               : 25%;
	height             : 46%;
	width              : 50%;
	background         : rgba(67,98,177,0.9);
	border-radius      : 50% 50%;
	-webkit-box-shadow : 0px 0px 0px 2px rgba(255, 255, 255, 0.86), inset 0px -4px 4px 0px rgba(255,255,255,0.2);
	-moz-box-shadow    : 0px 0px 0px 2px rgba(255, 255, 255, 0.86), inset 0px -4px 4px 0px rgba(255,255,255,0.2);
	box-shadow         : 0px 0px 0px 2px rgba(255, 255, 255, 0.86), inset 0px -4px 4px 0px rgba(255,255,255,0.2);
}

.social-h1{
    text-align:center;
    padding:6%;
    font-size:20px;
}

/* Social Panel Controls */

.zu-panel-social-control {
	position           : absolute;
	top                : 72%;
	left               : 29%;
	width              : 40%;
	height             : 30%;
}

.zu-panel-social-arrow {
	position           : relative;
	display            : inline-block;
	width              : 20%;
	height             : 70%;
	background-size    : contain;
	background-repeat  : no-repeat;
}

.zu-panel-social-arrow {
	width              : 40%;
	top                : 12%;
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_normal.png');
	margin-left        : 5%;
}

.zu-panel-social-arrow:active {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_clicked.png');
}

.zu-panel-hidden .zu-panel-social-setting, .zu-panel-hidden .zu-panel-social-expand {
	display            : none;
}

/* .zu-panel-hidden .zu-panel-social-arrow {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_normal_flipped.png');
	left               : 34%;
	top                : 35%;
	width              : 33%;
}

.zu-panel-hidden .zu-panel-social-arrow:active {
	background-image   : url('../img/00_ENGINE/PLAYER/VIDEO/arrow_big_clicked_flipped.png');
} */

.zu-playlist-current-item {
background-color: white;
}

a.zu-playlist-current-item {
    color: #192A9A !important;
}


/**
 * On/off Switch For Ambient Panel
 * From: http://proto.io/freebies/onoff/
 */

.onoffswitch {
	position            : relative;
	width               : 100%;
	-webkit-user-select : none;
	-moz-user-select    : none;
	-ms-user-select     : none;
	height              : 100%;
}

.onoffswitch-checkbox {
	display             : none;
}

.onoffswitch-label {
	display             : block;
	overflow            : hidden;
	cursor              : pointer;
	border              : 1px solid #666666;
	border-radius       : 10px;
	margin-bottom       : 0;
	height              : 100%;
}

.onoffswitch-inner {
	display             : block;
	width               : 200%;
	margin-left         : -100%;
	-moz-transition     : margin 0.3s ease-in 0s;
	-webkit-transition  : margin 0.3s ease-in 0s;
	-o-transition       : margin 0.3s ease-in 0s;
	transition          : margin 0.3s ease-in 0s;
	height              : 100%;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
	display             : block;
	float               : left;
	width               : 50%;
	height              : 100%;
	padding             : 0;
	font-size           : 0.8em;
	-moz-box-sizing     : border-box;
	-webkit-box-sizing  : border-box;
	box-sizing          : border-box;
	border-radius       : 10px;
	box-shadow          : 0px 10px 0px rgba(0,126,245,0.3) inset;
}

.onoffswitch-inner:before {
	content             : "ON";
	padding             : 1% 10%;
	background-color    : #3ea0f0;
	color               : #FFFFFF;
	border-radius       : 10px 0 0 10px;
}

.onoffswitch-inner:after {
	content             : "OFF";
	padding             : 1% 7%;
	background-color    : #FFFFFF;
	color               : #666666;
	text-align          : right;
	box-shadow          : 0px 10px 0px rgba(0,0,0,0.08) inset;
	border-radius       : 0 10px 10px 0;
}

.onoffswitch-switch {
	display             : block;
	width               : 40%;
	margin              : 0px;
	background          : #FFFFFF;
	border              : 1px solid #666666;
	border-radius       : 50%;
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	right               : 60%;
	-moz-transition     : all 0.3s ease-in 0s;
	-webkit-transition  : all 0.3s ease-in 0s;
	-o-transition       : all 0.3s ease-in 0s;
	transition          : all 0.3s ease-in 0s;
	background-image    : -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
	background-image    : -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
	background-image    : -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
	background-image    : linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
	box-shadow          : 0 1px 1px white inset;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left         : 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right               : 0;
}


/**
 * Needed for the twinkling stars effect
 */

/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */

@keyframes move-twink-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : -10000px 5000px;
    }
}
@-webkit-keyframes move-twink-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : -10000px 5000px;
    }
}
@-moz-keyframes move-twink-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : -10000px 5000px;
    }
}
@-ms-keyframes move-twink-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : -10000px 5000px;
    }
}

@keyframes move-clouds-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : 10000px 0;
    }
}
@-webkit-keyframes move-clouds-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : 10000px 0;
    }
}
@-moz-keyframes move-clouds-back {
    from {
	background-position : 0 0;
    }
    to {
	background-position : 10000px 0;
    }
}
@-ms-keyframes move-clouds-back {
    from {
	background-position : 0;
    }
    to {
	background-position : 10000px 0;
    }
}

.stars, .twinkling, .clouds {
	position            : absolute;
	top                 : 0;
	left                : 0;
	right               : 0;
	bottom              : 0;
	width               : 100%;
	height              : 100%;
	display             : block;
}

.stars {
	background          : #000 url(../img/stars.png) repeat top center;
	z-index             : -3;
}

.twinkling{
	background          : transparent url(../img/twinkling.png) repeat top center;
	z-index             : -2;

	-moz-animation      : move-twink-back 200s linear infinite;
	-ms-animation       : move-twink-back 200s linear infinite;
	-o-animation        : move-twink-back 200s linear infinite;
	-webkit-animation   : move-twink-back 200s linear infinite;
	animation           : move-twink-back 200s linear infinite;
}

.clouds{
	background          : transparent url(../img/clouds.png) repeat top center;
	z-index             : -1;

	-moz-animation      : move-clouds-back 200s linear infinite;
	-ms-animation       : move-clouds-back 200s linear infinite;
	-o-animation        : move-clouds-back 200s linear infinite;
	-webkit-animation   : move-clouds-back 200s linear infinite;
	animation           : move-clouds-back 200s linear infinite;
}

#main_wrapper
	{
		min-height:400px;
	}