
/* breadcrumbs */
.gb-breadcrumbs li { font-size:.7em;}

#view-lyrics { /*padding-top:1em;*/}

#view-lyrics .top-bg { background: /*url(../../img/rihanna.jpg)*/  no-repeat center center fixed; background-size: cover; height:280px; width:100%; position:absolute; z-index:-99999; left:0;}
#view-lyrics .top-bg-inner { width:100%; height:100%; background:#000; opacity:0.8;}

#view-lyrics section.main-sec {  width:100%;  float: right; /*border:1px solid #F90;*/}
#view-lyrics .section-inner {margin-right:360px; /*border:1px solid #000;*/ padding:1em;}


/*top sec*/
#view-lyrics .top-sec { height: 260px;}
#view-lyrics .top-sec h1 { font-size:2em; display:inline; color:#f6ef6c;}
#view-lyrics .top-sec em.translation { color:#ddd; font-size:.8em; }
#view-lyrics .top-sec h6 { font-size:1.2em; color:#fff; margin:.5em 0 1em 0;}
#view-lyrics .top-sec h6 a {color:#fff;}
#view-lyrics .top-sec ul.meta li { margin-bottom:.5em; color:#ddd; font-size:.7em;}
#view-lyrics .top-sec ul.meta li a {color:#ddd;}

#view-lyrics .top-sec ul.meta li.views { margin-top: 1em; font-size: .7em;}
#view-lyrics .top-sec ul.meta li.views img { width: 20px; vertical-align: middle;}



/*mobile youtube player*/
#view-lyrics .top-sec .mobile-play-sec { float:left; display:none;}
#view-lyrics .top-sec .mobile-play-sec img { width:40px; vertical-align:middle;}
#view-lyrics .top-sec .mobile-play-sec span { vertical-align:middle; color:#f6ef6c; font-size:.85em; font-weight:200;}

#view-lyrics .top-sec .rt-mobile-video-popup { display:none;}
#view-lyrics .top-sec .mobile-youtube-popup {position: absolute; z-index:9999; position:fixed; bottom: 0; right: 0;}
#view-lyrics .top-sec .mobile-youtube-popup { width:250px; height:140px; margin: 0 .5em .5em 0; background:#333; /**/}
#view-lyrics .top-sec .mobile-youtube-popup #rt-mobile-video-container {  width:100%; height:100%;}

#view-lyrics .top-sec .mobile-youtube-control-sec {  position:absolute; z-index:9998; position:fixed; bottom:0; left:0; background:#fff; width:100%; ; padding: .7em 0 .5em 2em; border-top: solid 1px #cecece;}
#view-lyrics .top-sec .mobile-youtube-control-sec { -webkit-box-shadow: 0px -1px 8px -3px rgba(0,0,0,1); -moz-box-shadow: 0px -1px 8px -3px rgba(0,0,0,1);
                                                                             box-shadow: 0px -1px 8px -3px rgba(0,0,0,1);}


#view-lyrics .top-sec .mobile-youtube-control-sec a.close-popup img { width:20px;}

/*#view-lyrics .top-sec .mobile-youtube-popup a.close-popup { display: block;  font-size:.6em; background:#555; color:#fff; width:35px; padding:.4em;}
#view-lyrics .top-sec .mobile-youtube-popup a.close-popup {position: absolute; bottom: 160px; left:0;  margin: 0 .5em .5em 0;}*/


#view-lyrics .top-sec p.vote-sec { float:right; font-size:75em; color:#FFCDCE;    /* border:1px solid #F00;*/}
#view-lyrics .top-sec ul.vote-sec { float:right; width:130px;   /* border:1px solid #F00;*/}
#view-lyrics .top-sec ul.vote-sec li { float:left; font-size:.8em; color:#eee; font-size:.7em; width:63px;}
#view-lyrics .top-sec ul.vote-sec li a { vertical-align:middle;  display:table-cell;}
#view-lyrics .top-sec ul.vote-sec li span { padding-left:.6em; vertical-align:middle;  display:table-cell;}

/*lyrics-sec*/
#view-lyrics .lyrics-sec h3 { font-size:.95em; color:#aaa; font-weight: bold; float:left;}
#view-lyrics .lyrics-sec h3 em {color:#555;}
/*#view-lyrics .lyrics-sec .show-tran { font-size:.7em; color:#666; float:right; margin-top:1em;}*/

#view-lyrics .lyrics-sec .lyrics-content { font-size:.9em; color:#333; border-bottom: 1px solid #777; padding-bottom: 1em;}
#view-lyrics .lyrics-sec .lyrics-content em, #view-lyrics .lyrics-sec .lyrics-content i { display:block; margin-bottom:.5em; color:#333; font-weight:bold;}
#view-lyrics .lyrics-sec .lyrics-content span { display: table; margin-bottom:.5em;}
#view-lyrics .lyrics-sec .lyrics-content span.english-sen { background: #E7E8C3; color:#444; font-size:.86em; border: 1px solid #D3CB5D; }


#view-lyrics .lyrics-sec .no-lyric-content {}
#view-lyrics .lyrics-sec .no-lyric-content h6 { font-size: 1.5em; margin-bottom: 1em; text-align: center; color: #333;}
#view-lyrics .lyrics-sec .no-lyric-content p { font-size: 1em; text-align: center; color: #777;}
#view-lyrics .lyrics-sec .no-lyric-content a { display: block; width: 120px; background: #b5ac2a; color: #fff; padding: .8em; margin: 1em auto;}
#view-lyrics .lyrics-sec .no-lyric-content a { text-align: center; border-radius: 20px; font-weight: bold; font-size: 1em; }

#view-lyrics .lyrics-sec p.submitted-by { font-size:.8em; color:#777;}
#view-lyrics .lyrics-sec .action-sec { float:right; font-size:.9em;}
#view-lyrics .lyrics-sec .action-sec li { float:left; margin-right: 1.5em; margin-bottom:1em;}

#view-lyrics span.copyright { font-size:.7em; color:#777;}

/*related songs*/
#view-lyrics h6.related { font-size: .9em; font-weight:bold;  color:#555;}
#view-lyrics .related-songs { background:#fff; padding:.2em; border: 1px solid #ddd;}
/* #view-lyrics .related-songs .item { width:45%; float:left; margin: 0 .5em 1em 0;}
#view-lyrics .related-songs .item img { width:70px; float:left;}
#view-lyrics .related-songs .item .text { padding-left:.5em; float:left;}
#view-lyrics .related-songs .item .text em { display:block;}
#view-lyrics .related-songs .item .text em.song-title { font-size:.8em;  font-weight:bold;  color: #77820B; margin-bottom:.3em; }
#view-lyrics .related-songs .item .text em.artist { font-size:.67em; color:#999;} */

/* Somg lyric_info */
#view-lyrics .additional_song_info {background: #f9f9f9; border: 1px solid #ddd; padding: 1em;}
#view-lyrics .additional_song_info h6.heading { font-size: .95em; color: #999; font-weight: bold;}
#view-lyrics .additional_song_info h6.heading em { color: #555;}

#view-lyrics .additional_song_info ul.song_meta { font-size: .9em; max-width: 500px; color: #555; margin-top: 1em;}
#view-lyrics .additional_song_info ul.song_meta li { margin-bottom: 1em; border-bottom: 1px solid #ccc; padding-bottom: .5em;}
#view-lyrics .additional_song_info ul.song_meta li label { color: #888; width: 100px; display: inline-block;}
#view-lyrics .additional_song_info ul.song_meta li p { display: inline-block;  max-width: 300px;}
#view-lyrics .additional_song_info ul.song_meta li p img { width: 30px; vertical-align: middle;}
#view-lyrics .additional_song_info ul.song_meta li p a { color: #368da8;}

#view-lyrics .additional_song_info .album-sec .head { display: block;}
#view-lyrics .additional_song_info .album-sec .head img { width: 70px; margin-right: .5em; display: inline-block; vertical-align: middle;}
#view-lyrics .additional_song_info .album-sec .head h6 {display: inline-block; }
#view-lyrics .additional_song_info .album-sec .head h6 em { display: block; font-weight: bold; font-size: 1.1em; color: #555; margin-bottom: .2em;}
#view-lyrics .additional_song_info .album-sec .head h6 span { font-size: .9em; color: #777;}

#view-lyrics .additional_song_info .album-sec .tracks { /*display: flex; flex-wrap: wrap;*/ columns: 2; max-width: 500px;}
#view-lyrics .additional_song_info .album-sec .tracks li {  margin: 0 0 .6em 0; font-size:.9em; font-weight: bold;}
#view-lyrics .additional_song_info .album-sec .tracks li .num { width: 22px; display: inline-block; color: #666;}
#view-lyrics .additional_song_info .album-sec .tracks li a { color: #666;}

/*sidebar*/
#view-lyrics #audio-video-container { width:100%; height:315px; display:none;  }

#view-lyrics aside {width:330px; float: right; margin-right: -100%;/* border:1px solid #000;*/ padding: 0 .5em 0 0;}
#view-lyrics aside .song-image {width: 326px; }
#view-lyrics aside .song-image img.artist { width:100%; border: 2px solid #eee; margin-top: 3em;}
#view-lyrics aside .song-image a.play-btn { width:85px; margin:0 auto; margin-top:-45px; display:block; font-size:.6em; color:#444;}

#view-lyrics aside .about-sec { font-size:.8em; color:#666;}
#view-lyrics aside .about-sec h6 { font-weight:bold;}
#view-lyrics aside .about-sec h6 span { margin-top:.4em; display:block; font-weight:normal;}
#view-lyrics aside .about-sec p { line-height:1.5em; }
#view-lyrics aside .about-sec ol { margin: 1em 0 0 1em;}

/*--------------------------------------------------------
  			Small Screen
---------------------------------------------------------*/

@media screen and (max-width: 800px) {

#view-lyrics .top-sec em.translation { display:block; font-size:.9em;}

/*sidebar*/
#view-lyrics aside {width:230px; }
#view-lyrics aside .song-image {width: 210px; }

}


@media screen and (max-width: 700px) {


/*top sec*/
#view-lyrics .top-sec h1 { font-size:1.5em;}
#view-lyrics .top-sec h6 { font-size:1em; }

#view-lyrics .top-sec .mobile-play-sec {display: block;}


#view-lyrics section.main-sec {   float: none; }
#view-lyrics .section-inner {margin-right:0; }

/*sidebar*/
#view-lyrics aside { display:none; }

}

@media screen and (max-width: 460px) {

#view-lyrics .top-sec em.translation { font-size:.7em; color: #ccc;}

#view-lyrics .related-songs .item img { width:60px; float: none; display:block; margin-bottom:.5em;}
#view-lyrics .related-songs .item .text { float: none;}
#view-lyrics .related-songs .item .text em.song-title { font-size:.75em;  font-weight:bold;  color: #77820B; margin-bottom:.3em; }
#view-lyrics .related-songs .item .text em.artist { font-size:.67em; color:#999;}

}


@media screen and (max-width: 360px) {

#view-lyrics .top-sec .mobile-youtube-popup { width:170px; height:110px; margin: 0 .5em 1em 0; }
/*#view-lyrics .top-sec .mobile-youtube-popup a.close-popup { bottom: 110px; right: 0;  margin: 0 .5em .5em 0;}*/

}


#view-lyrics .lyrics-sec .show-tran { display:block;  float:right; margin-top:1em;}
#view-lyrics .lyrics-sec .show-tran label.text { margin-bottom: 1em; font-size:.7em; color:#666; display:block; }

.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 80px;
	height: 15px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #E1B42B;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 16px;
	height: 16px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 69px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}
