/**** Text Styles ****/

body {
    background-color:#00002F;
}


h1,h2,h3,h4{
    font-family: MainFont, sans-serif;
    color:white;
}
h5,h6 {
    color:#7E6BE8;
}

.nonlinkTxt {
    color:white;
    opacity:.6;
}


@font-face {
  font-family: MainFont;
  src: url(Cairo-Regular.ttf);
}


@font-face {
  font-family: LightFont;
  src: url(Cairo-Light.ttf);
}

@font-face {
  font-family: BoldFont;
  src: url(Cairo-Bold.ttf);
}

.container{
    padding-top:130px;
    padding-bottom:100px;
}

/**** Link Styles ****/

a:link {
  color:white;
  text-decoration: none;
}

a:visited {
  color:white;
  text-decoration: none;
}
/*
a:hover {
  color: rgba(126, 107, 232, 0.8);
  text-decoration: none;
}
*/

a:hover {
  color: #7E6BE8;
  text-decoration: none;
} 

a:active {
  color: #7E6BE8;
  text-decoration: none;
}

a:focus {
  color: #7E6BE8;
  text-decoration: none;
}



/**** Navbar ****/
.navbar {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.navbar .navbar-nav > li > a {
  color: white;
  font-family: MainFont,sans-serif;
  font-size:1.1em;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}




.nav.navbar-nav > li.active a{
  background: none;     
  background-color: none;
  color: #7E6BE8;
}

.nav.navbar-nav > li.active a:hover{
  background: none;     
  background-color: none;
  color: #7E6BE8;
}

.navbar .navbar-nav > li > a:hover {
  color: #7E6BE8;
}

.navbar-brand{
    margin-top: -10px; 
    vertical-align: middle;
}


#planetLogo{
        height:55px;
    }

/* SongList Table */


table{
  width: 100%;     
}
      
table, th, td {
  border: none;
  border-collapse: collapse;
  color:white;
  font-family:MainFont;
  text-align:left;
}


/*
tbody>tr>:nth-child(3){ 
text-align: center;
}

*/

th, td {
    padding: 15px;
}
      
th{
    color:#8D6EFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:.9em;
    
}
      
thead{
  border-bottom: 1px solid rgba(255, 255, 255, .3);
      
}
      
tr:nth-child(even) {
   /* background-color: #12123F; */
  border-top: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
     

tbody tr:hover  {
  background-color:rgba(255, 255, 255, .05);

}

/**** Dropdown ****/


button {
    background-color: transparent;
    border:none;
    outline:none;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color:#0d0f38;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 0px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color:none;
color: #7E6BE8;}

.dropdown:hover .dropdown-content {display:block;}

.dropdown:hover .dropbtn {background-color:none;color: #7E6BE8;}


/* DropDown Table */

.contributorTable th, td {
  border: none;
  border-collapse: collapse;
  color:white;
  font-family:MainFont;
  text-align:left;
}

.contributorTable th{
  color: #7E6BE8;
  font-style: italic;
  text-align: center;
}

.contributorTable tr:nth-child(even) {
   /* background-color: #12123F; */
  border:none;
} 


.contributorTable tbody tr:hover  {
   background-color:transparent;
}



.footer {
   padding:20px 100px 20px 100px;
}

.footerTxt{
   color: white;
   text-align: center;
   font-family: Mainfont, sans-serif;
   font-size:.9em;
   opacity:.4;
}




/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
  .container {
        padding-left:30px;
        padding-right:30px;
  }
  .navbar .navbar-collapse {
        padding-top:20px;
  }
    #planetLogo{
        height:50px;
   
    }
}
    

@media screen and (min-width: 1400px) {
    
}
      
@media screen and (min-width: 1600px) {
    .container{
        padding-top:150px;  
    }
    
    .navbar .navbar-nav > li > a {
        font-size:1.1em;
    }
    #planetLogo{
        height:60px;
   
    }
}

@media screen and (min-width: 1900px) {
      .container{
        padding-top:170px;
    }
}