﻿@import url('http://fonts.googleapis.com/css?family=Coustard');

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}

a:link,a:visited {
  font-weight:700;
  color:#B0C4DE;
  text-decoration:none;
}

a:hover,a:active {
  font-weight:700;
  color:#FF4500;
}

#header {
  float:left;
  width:960px;
  height:92px;
/* background: #ccc; */
/* padding: 20px; */
}

#logo {
  display:inline-block;
  margin:-8px 5px 0 20px;
    background:url('../images/logo.jpg') center no-repeat;                           
    cursor:pointer;
	width:100px;
	height:100px;
	  float:left;
}

#logo-text {
  display:inline-block;
  text-align: center;
  margin-top:18px;
  font-size:40px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  text-shadow: 1px 1px 1px #000, 
               3px 3px 10px #000000; 
  letter-spacing: 0px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}

#radio {
 width: 200px; 
 display: inline-block; 
 margin:0 0 0 30px;
}

#cssmenu ul,#cssmenu li,#cssmenu a {
  list-style:none;
  margin:0;
  padding:0;
  border:0;
  line-height:1;
}

#cssmenu {
  border:1px solid #133e40;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
  border-radius:5px;
  float:left;
  width:960px;
  background:linear-gradient(to bottom,#2f3138,#1f2227) repeat scroll 0 0 #25282e;
  box-shadow:0 -1px 0 rgba(0,0,0,0) inset;
}

#cssmenu ul {
  zoom:1;
}

#cssmenu ul:before {
  content:'';
  display:block;
}

#cssmenu ul:after {
  content:'';
  display:table;
  clear:both;
}

#cssmenu li {
  float:left;
  margin:5px 5px 5px 0;
  border:1px solid transparent;
}

#cssmenu li a {
  padding:1px 15px;
  display:block;
  border:1px solid transparent;
  text-transform:uppercase;
  font-style:normal;
  font-weight:700;
  box-sizing:border-box;
  color:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
/* height: 45px; */
  line-height:25px;
  text-decoration:none;
}

#cssmenu li.active-menu a {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
  border-radius:5px;
  display:block;
  background:#721292;
  border:1px solid #133e40;
  -moz-box-shadow:inset 0 5px 10px #133e40;
  -webkit-box-shadow:inset 0 5px 10px #133e40;
  box-shadow:inset 0 5px 10px #133e40;
}

#cssmenu li:hover a {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
  border-radius:5px;
  display:block;
  background:#A319D1;
  border:1px solid #133e40;
  -moz-box-shadow:inset 0 5px 10px #133e40;
  -webkit-box-shadow:inset 0 5px 10px #133e40;
  box-shadow:inset 0 5px 10px #133e40;
}

#alpha-music {
  background:#1c1c1c;
  padding:5px 0;
  display:block;
  float:left;
  font-family:verdana,sans-serif;
  font-size:18px;
  letter-spacing:0;
  margin:5px 0 0 0;
  width:960px;
  text-align:center;
  text-decoration:none;
  color:gray;
}
#alpha-music a:link { 
color: #737373; 
display: inline-block;
width:15px;
}
#alpha-music a:visited { color: #737373; }
#alpha-music a:hover { 
  color: #B8B8B8; 
  background:#721292;
}
#alpha-music a:active { color: #A319D1; }

#breadcrumbs {
  background:#333333;
  padding:5px;
  display:block;
  font-family:verdana,sans-serif;
  font-size:14px;
  letter-spacing:0;
}

#container {
  z-index: 100;
  margin:0 auto;
  width:960px;
}

#content-container {
  float:left;
}

.btn1 {
    background-color: #000000; /* Green */
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  font-size:20px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  text-shadow: 1px 1px 1px #000, 
               3px 3px 10px #000000; 
  letter-spacing: 0px;
  font-weight:700;
  color:#fff;
    margin: 6px 0 0 2px;
}

.btn12 {background-color: #008CBA;} /* Blue */
.btn13 {background-color: #f44336;} /* Red */ 
.btn14 {background-color: #e7e7e7; color: black;} /* Gray */ 
.btn15 {background-color: #555555;} /* Black */

#content {
  background:#202020;
  width:635px;
  padding:10px;
  display:block;
  float:left;
  margin:5px 5px 0 0;
  color:#999999;
}
#content-home {
  background:#202020;
  width:960px;
  display:block;
  float:left;
  margin:5px 5px 0 0;
  color:#999999;
}

#content h2 {
  margin:0;
  color:#cccccc;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-style:bold;
}

#rightside {
  float:right;
  width:300px;
  display:block;
  margin:0 auto;
}
.rightbox1 {
  margin-top:5px;
  padding:5px 15px 5px 15px;
  border-radius: 15px 50px;
  border: 2px solid #ffffff;
  background: #FF9933;
  font-family:verdana,sans-serif;
  font-size:14px;
  letter-spacing:0;
}

.rightbox1 h3 {
    display: block;
    margin:0 0 0 0;
    font-weight: bold;
}

.rightbox2 {
  margin-top:5px;
}

.box2nopad img {
  display:block;
}

.adsbanner {
  margin-top:15px;
}

#footer {
  position:relative;
  background-color:#333333;
  color:#F0E6F0;
  text-align:center;
  padding:15px 0;
  width:960px;
  top:5px;
}
#version {
  position:absolute;
  color:#cccccc;
  left:10px;
  bottom:15px;
}
.gcount {
  position:absolute;
  color:#cccccc;
  right:10px;
  bottom:15px;
}

/*** search start ***/
#search {
  float:right;
  display:inline-block;
  margin:43px -116px 0 0;
}
/*** share end ***/

/**** SHARE START ****/
#share1 {
  float:right;
  display:inline-block;
  margin-right:-5px;
}

.share-icon {
  display:inline-block;
  float:left;
  margin:4px;
  width:32px;
  height:32px;
  cursor:pointer;
  vertical-align:middle;
  background-image:url(../images/fp_slideshow/share-icons.png);
}

.share-facebook {
  background-position:0 0;
}

.share-facebook:hover {
  background-position:0 -40px;
}

.share-twitter {
  background-position:-40px 0;
}

.share-twitter:hover {
  background-position:-40px -40px;
}

.share-pinterest {
  background-position:-80px 0;
}

.share-pinterest:hover {
  background-position:-80px -40px;
}

.share-linkedin {
  background-position:-240px 0;
}

.share-linkedin:hover {
  background-position:-240px -40px;
}

.share-googleplus {
  background-position:-120px 0;
}

.share-googleplus:hover {
  background-position:-120px -40px;
}

.share-stumbleupon {
  background-position:-360px 0;
}

.share-stumbleupon:hover {
  background-position:-360px -40px;
}

.share-email {
  background-position:-320px 0;
}

.share-email:hover {
  background-position:-320px -40px;
}
/**** SHARE END ****/

/* pagination START */
ul.pagination {
    text-align:center;
    color:#999999;
}
ul.pagination li {
    display:inline;
    padding:0 3px;
}
ul.pagination a {
    color:#999999;
    display:inline-block;
    padding:5px 10px;
    border:1px solid #000000;
    text-decoration:none;
    background:#333333;
}
ul.pagination a:hover,
ul.pagination a.current {
    background:#474747;
    color:#ffffff;
}
/* pagination END */
/**** SLIDER START ****/
#slider1_container {
  position:relative;
  margin:5px 0 0 0;
  top:0;
  left:0;
  width:960px;
  height:350px;
  overflow:hidden;
}

#loading {
  position:absolute;
  top:0;
  left:0;
}

#loading1 {
  filter:alpha(opacity=70);
  opacity:.7;
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#loading2 {
  position:absolute;
  display:block;
  background:url(../images/fp_slideshow/loading.gif) no-repeat center center;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#slides {
  cursor:move;
  position:absolute;
  left:0;
  top:0;
  width:960px;
  height:350px;
  overflow:hidden;
}

.slides_text {
  position:absolute;
  width:700px;
  height:120px;
  top:250px;
  left:30px;
  padding:5px;
  text-align:left;
/* line-height: 36px; */
  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
  font-size:26px;
  color:#ffffff;
  text-shadow: 1px 1px 1px #000, 
               3px 3px 10px #000000; 
  text-transform:uppercase;
}

.slides_text2 {
  position:absolute;
  width:700px;
  height:120px;
  top:280px;
  left:30px;
  padding:5px;
  text-align:left;
/* line-height: 36px; */
  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
  font-size:30px;
  color:#ffffff;
  text-shadow: 1px 1px 1px #000, 
               3px 3px 10px #000000; 
  text-transform:capitalize;
}

.slideimage {
  height:350px;
  width:960px;
  overflow:hidden;
}

/* Slider bullets navigator 
  .bullet1 div           (normal)
  .bullet1 div:hover     (normal mouseover)
  .bullet1 .av           (active)
  .bullet1 .av:hover     (active mouseover)
  .bullet1 .dn           (mousedown)    */
.bullet1 div,.bullet1 div:hover,.bullet1 .av {
  background:url(../images/fp_slideshow/b21.png) no-repeat;
  overflow:hidden;
  cursor:pointer;
  margin-top:320px;
  margin-left:430px;
  z-index:1;
}

.bullet1 div {
  background-position:-5px -5px;
}

.bullet1 div:hover,.bullet1 .av:hover {
  background-position:-35px -5px;
}

.bullet1 .av {
  background-position:-65px -5px;
}

.bullet1 .dn,.bullet1 .dn:hover {
  background-position:-95px -5px;
}

/* jssor slider arrow navigator skin 21 css 
  .jssora21l              (normal)
  .jssora21r              (normal)
  .jssora21l:hover        (normal mouseover)
  .jssora21r:hover        (normal mouseover)
  .jssora21ldn            (mousedown)
  .jssora21rdn            (mousedown)
  */
.jssora21l,.jssora21r,.jssora21ldn,.jssora21rdn {
  position:absolute;
  cursor:pointer;
  display:block;
  background:url(../images/fp_slideshow/a21.png) center center no-repeat;
  overflow:hidden;
}

.jssora21l {
  background-position:-3px -33px;
}

.jssora21r {
  background-position:-63px -33px;
}

.jssora21l:hover {
  background-position:-123px -33px;
}

.jssora21r:hover {
  background-position:-183px -33px;
}

.jssora21ldn {
  background-position:-243px -33px;
}

.jssora21rdn {
  background-position:-203px -33px;
}
/**** SLIDER END ****/
/*** Video Section ***/
.sublist {
  float:left;
  display:inline;
  width:300px;
  background-color: #333333;
  margin:6px;
  border:1px solid #000000;
  color:#999999
  -webkit-box-shadow: 5px 5px 10px -5px #000000;
  -moz-box-shadow: 5px 5px 10px -5px #000000;
  box-shadow: 5px 5px 10px -5px #000000;
}
.sublist:hover {
  background-color: #181818;
  color:#ffffff
}

.sublist-imgwrap {
  position: relative;
  background-color: #000000;
  width:300px;
  height:150px;
  overflow: hidden; 
  margin-left: auto;
  margin-right: auto;
  -webkit-box-shadow: 0px 5px 5px #101010;
  -moz-box-shadow: 0px 5px 5px #101010;
  box-shadow: 0px 5px 5px #101010;
}
.sublist-imgwrap img {
  width: 100%;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all .5s ease;
  margin: -25px 0 0 0;
  opacity: .8;
}
.sublist-imgwrap:hover img {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 1;
}
/*
.sublist-imgwrap:after {
    position: absolute;
    background-color: #000000;
    content: 'Click Here';
    font-family: sans-serif;
    padding: auto;
    font-size: 1.4em;
    color: #ffffff;
	text-align: center;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 30px;
    opacity: 0;
    transition: opacity .5s linear;
    box-sizing: border-box;
}
.sublist-imgwrap:hover:after {
    opacity: .5;
}
*/
.sublist-song {
  padding:2px 10px 0 10px;
  width:290px;
  height:35px;
  font-size:18px;
}
.sublist-hits {
  padding:5px 5px 5px 10px;
  float:left;
  font-size:18px;
  color:#606060
}
.sublist-thumbs {
  padding:10px 10px 5px 5px;
  float:right;
}

#videoPlayerContainer {
position:relative;
  width:635px;
  height:650px;
  color: #fff;
  background-color: #333333;

}    
.video-player {
  float:left;
  padding:0;
  clear:both;
}

/*** Video Section END ***/

#musicPlayerContainer {
position:relative;
  width:625px;
  height:295px;
  color: #fff;
  padding: 5px;
  background-color: #333333;
  /*** gradient borders START ***/
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6B008F), to(transparent)); 
   background-image: -webkit-linear-gradient(#6B008F, transparent); 
   background-image: -moz-linear-gradient(#6B008F, transparent), -moz-linear-gradient(#6B008F, transparent); 
   background-image: -o-linear-gradient(#6B008F, transparent), -o-linear-gradient(#6B008F, transparent); 
   background-image: linear-gradient(#6B008F, transparent), linear-gradient(#6B008F, transparent); 
   -moz-background-size: 10px 100%; 
   background-size: 10px 100%; 
   background-position: 0 0, 100% 0; 
   background-repeat: no-repeat; 
  /*** gradient borders END ***/
}

#content-title {
  padding:0 0 5px 10px;
  font-family:verdana,sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:0;
  text-align: center;
  clear:both;
}

.info-main-image {
  float:left;
  padding:5px 5px 0 5px;
  clear:right;
}
.info-main-image img {
  height:250px;
  width:250px;
  -webkit-box-shadow: 5px 5px 10px -5px #000000;
  -moz-box-shadow: 5px 5px 10px -5px #000000;
  box-shadow: 5px 5px 10px -5px #000000;
  padding:1px;
  border:1px solid #000000;
}

.musicList {
  float:left;
  background-color: #333333;
  margin:5px;
  color:#999999
}
.musicList:hover {
  background-color: #474747;
  color:#ffffff
}
.musicList img {
  position:relative; 
  float:left;
  height:100px;
  width:100px;
  -webkit-box-shadow: 5px 5px 10px -5px #000000;
  -moz-box-shadow: 5px 5px 10px -5px #000000;
  box-shadow: 5px 5px 10px -5px #000000;
  padding:1px;
  margin:0 10px 0 0;
  border:1px solid #000000;
}

.musicListSong {
  width:620px;
  clear:right;
  font-size:20px;
/*  border:1px solid #000000; */
}

#related-songs {
  padding:1px 0 0 0;
  display:block;
  clear:both;
}
/* Single-direction drop shadow */ 
.line1 hr { 
  position:relative;
  margin:0; 
  clear:both;
  height: 12px; 
  border: 0; 
  box-shadow: inset 0 -12px 12px -12px #330000; 
  }
.line2 hr { 
position:relative;
margin: 0px; 
  clear:both;
  height: 12px; 
  border: 0; 
  box-shadow: inset 0 12px 12px -9px #330000; 
  }  
.musicrelated {
  width:100%;
background-color: #333333;
  float:left;
margin:5px 5px 5px 0;
}

.musicrelated:hover {
  background-color: #474747;
  color:#ffffff
}

.musicrelated img {
  position:relative; 
  float:left;
  height:50px;
  width:50px;
  -webkit-box-shadow: 5px 5px 10px -5px #000000;
  -moz-box-shadow: 5px 5px 10px -5px #000000;
  box-shadow: 5px 5px 10px -5px #000000;
  margin:0 10px 0 0;
  border:1px solid #000000;
  vertical-align: middle;
}
.musicrelatedsong {
  clear:right;
  font-size:20px;
  margin-top:10px;
}
.related-title {
  clear:both;
  padding:0 0 5px 0;
  font-family:verdana,sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:0;
}

.pagination {
  float:left;
  padding:5px 5px 0 5px;
  clear:both;
}

.music-player {
  float:left;
  padding:5px 5px 0 5px;  
  width:300px;
  clear:right;
}

.hits {
	float:left;
	display:inline-block;
	margin:5px 5px 0 5px;
	padding:2px 5px 2px 5px;
     -moz-box-shadow:inset 0px 1px 0px 0px #6B008F;
     -webkit-box-shadow:inset 0px 1px 0px 0px #6B008F;
     box-shadow:inset 0px 1px 0px 0px #6B008F;
     background-color:#6B008F;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #000000;
     color:#ffffff;
     font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
     font-size:15px;
     text-decoration:none;
/*     text-shadow:0px 1px 0px #EAFF9D;  */
}

.download {
	float:left;
	margin:5px 0 0 5px;
	padding:2px 5px 2px 5px;
     -moz-box-shadow:inset 0px 1px 0px 0px #6B008F;
     -webkit-box-shadow:inset 0px 1px 0px 0px #6B008F;
     box-shadow:inset 0px 1px 0px 0px #6B008F;
     background-color:#6B008F;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #000000;
     display:inline-block;
     color:#ffffff;
     font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
     font-size:15px;
     text-decoration:none;
/*     text-shadow:0px 1px 0px #EAFF9D;  */
}

.info-artist {
	display:inline-block;
	font-size:18px;
	width:300px;
	height:20px;
	margin:10px 0 0 10px;
}

.info-song {
	display:inline-block;
	font-size:18px;
	width:300px;
	height:20px;
	margin-left:10px;
}

.info-genres {
	display:inline-block;
	font-size:18px;
	width:300px;
	height:20px;
	margin-left:10px;
}

.info-language {
	display:inline-block;
	font-size:18px;
	width:300px;
	height:20px;
	margin-left:10px;
}

.info-releasedin {
	display:inline-block;
	font-size:18px;
	width:350px;
	height:20px;
	margin-left:10px;
}

.info-thumbs {
	display:inline-block;
	width:350px;
	height:20px;
	margin:5px;
}

.fb-like {
	float:left;
	display:inline-block;
	margin:8px 0 0 5px;
}

#fb-commentspv {
background-color:#ffffff;
border:1px solid #000000;
}

/*************************/
/* Iimage Text Overlay 1 */
.ImageOverlay1Container {
  max-width: 297px;
  float:left; 
  display:inline; 
  margin:5px 5px 5px 9px;	
  width: 49%;
  -webkit-box-shadow: 5px 5px 10px -5px #000000;
  -moz-box-shadow: 5px 5px 10px -5px #000000;
  box-shadow: 5px 5px 10px -5px #000000;
  padding:1px;
  border:1px solid #000000;
}
.caption {
    position: relative;
    overflow: hidden;
    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.IOimageWrap {
  width:300px;
  height:200px;
  overflow: hidden; 
}
.IOimageWrap img {
  width: 100%;
  margin: -25px 0 0 0;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}
.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
  font-size:20px;
  font-weight:700;
  margin: 0;
  padding: 0 0 5px 0;
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );
    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
background: rgba(25, 25, 25, .5);
color:#cccccc;
}
.caption__overlay__title2 {
  font-size:20px;
  font-weight:500;
  margin-top:-5px;
}
.caption__overlay__content {
    margin: 0;
    padding: 0 0 .5em;
	color:#999999;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.error404 {
color: rgb(0, 0, 0);
font-size: 62px;
     font-family:arial;
text-align:center;
text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px, rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.15) 0px 3px 5px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.1) 0px 20px 20px;
}
