/* UNIVERSALS */

body {background-color: #121212;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 95%;
    max-width: 960px;
    font-family: Courier New, Georgia, Verdana;
    color: #cccccc;    }

a:link, a:visited {border: 0 none;  color: #cccccc;}
a:hover, a:active {color: #c8386f; font-weight:bold;}

a.whitelink:link, a.whitelink:visited {border: 0 none;  color: #eeeeee;}
a.whitelink:hover, a.whitelink:active {color: white; font-weight:bold;}

p {font-size: 1.2em; text-align: left;}

h1 {font-size: 2.5em;
    display: block;
    font-weight: bold;
    margin: 0px 0px 10px;
}
h2 {
    font-size: 2.2em;
    display: block;
    font-weight: bold;
    margin: 0px 0px 10px;
}
h3 {
    font-size: 1.8em;
    display: block;
    font-weight: bold;
    margin: 0px 0px 10px;
}
h4 {
    font-size: 1.6em;
    display: block;
    font-weight: bold;
    margin: 0px 0px 10px;
}
h5 {
    font-size: 1.2em;
    display: block;
    font-weight: bold;
    margin: 0px 0px 10px;
}



/* COLORS (can include font info too) */

.sads-blue {background-color: #406a9a;}
.sads-teal {background-color: #076f89;}
.sads-purple {background-color: darkslateblue; color: whitesmoke;}
.sads-bronze {background-color: #5e423f;}

.pgr-eggplant {background-color: #311129; color: antiquewhite;}
.pgr-pink {background-color: #af38a0; border-color: #af38a0;}
.pgr-teal {background-color: #146077; color:antiquewhite}

.jg-purple {background-color: #4c4176;}
.jg-green {background-color: seagreen;}

.itw-lightbrown {background-color: #795a3f;}
.itw-darkbrown {background-color: #381e00;  color: #ddcebf;}
.itw-greentexture {background-color: #163112; color: #ddcebf;}

.ghb-red  {background-color:#3e0000;}

.nhj-brown  {background-color:#885712;}
.nhj-yellow  {background-color:#eeda57;}

.tdr-grey  { background-color:#4b3e3e; }
.tdr-darkred  {background-color: #531919; color: #cccccc;}

.wnr-pink {background-color: #c8386f;}
.wnr-purple {background-color: #362a65;}
.wnr-blue {background-color: #384589;}
.wnr-skyblue {background-color: #3d9df7;}

.videos-content {background-color:#581924; 
    text-align:center; font-size: 1.6em;    }




/* SECTIONS + LAYOUT  */

#content {
    display: block;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    border: 6px double white;
    box-sizing: border-box;
    overflow: auto;
}

#footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 960px;
    text-align: center;
    position:relative;
    z-index:0;
}


.artistbio-leftcolumn {
    width: 35%;
    box-sizing: border-box;
    padding-top: 20px;
    vertical-align: top;
    float: left;
    color: #121212;
    display: block;
    font-size: 1.2em;
    font-style: italic;
}
.artistbio-rightcolumn {
    width: 65%;
    box-sizing: border-box;
    padding: 0px 0px 20px 20px;
    vertical-align: top;
    float: left;
    color: #121212;
    display: block;
    font-size: 1.2em;
    font-style: italic;
}


.albumleftcolumn {
    width: 45%;
    box-sizing: border-box;
    padding: 20px 20px 20px 10px;
    vertical-align: top;
    text-align: center;
    display: block;
    float: left;
}
.albumrightcolumn {
    width: 55%;
    box-sizing: border-box;
    padding: 20px;
    vertical-align: top;
    display: block;
    float: left;
}

.singlesleftcolumn {
    width: 45%;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    display: block;
    float: left;
}
.singlesrightcolumn {
    width: 45%;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    display: block;
    float: right;
}



/* NAVIGATION */

#container-nav  {
    display:block;
    text-align:center;
    position:relative;
    z-index:0;
    white-space: nowrap;
}

.navbutton {width: 23%; border: 0;  max-width: 200px;}

.nav-wide {
    width:30%;
    border: 12px double #523f9d; 
    border-radius: 15px;
    box-sizing: border-box;
    box-shadow: 0px 0px 30px #121212;
    background-color: black;
    margin: 1%;
    position:relative;
    z-index:2;
    }
.nav-wide:hover {
    border-color: #c8386f;
    border-style: double;
    background-color: #c8386f;
    box-shadow: 0px 0px 50px #c8386f;
     }

.contactlink {margin-top:10px; margin-bottom:10px}
.contactlink:hover {filter: brightness(150%)}

.nav-inner {
    width:20%;
    box-sizing: border-box;
    border: 10px double #362a65; 
    border-radius: 10px;
    box-shadow: 0px 0px 20px #121212;
    background-color:#121212;
    position:relative;
    z-index:2;
    margin-bottom: 5px;
    }
.nav-inner:hover {
    border-color: #c8386f;
    border-style: double;
    background-color: #c8386f;
    box-shadow: 0px 0px 50px #c8386f;
     }

.inner-logo {
    display: block;
    margin-left:auto;
    margin-right:auto;
    margin-top: 40px;
    margin-bottom: 0px;
    position: relative;
    z-index: 3;
}
.inner-logo:hover  {
    filter: contrast(3);
}



/* PHOTOS AND VIDEOS */

.photos-wide {
    border: 12px solid #121212;
    box-sizing: border-box;
    width:100%;
    margin-bottom:20px;
    display:inline-block;
    box-shadow: 0px 0px 20px #121212;
}
.photos-left {
    border: 12px solid #121212;
    box-sizing: border-box;
    width:49%;
    float: left;
    margin-bottom:20px;
    box-shadow: 0px 0px 20px #121212;
}
.photos-right {
    border: 12px solid #121212;
    box-sizing: border-box;
    width:49%;
    float: right;
    margin-bottom:20px;
    box-shadow: 0px 0px 20px #121212;
}
.photos-third {
    border: 12px solid #121212;
    box-sizing: border-box;
    width:32%;
    margin-bottom:20px;
    box-shadow: 0px 0px 20px #121212;
}

.video {
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 50px;
    border: 20px double #362a65;
    background-color: #121212;
    box-shadow: -10px 10px 80px #121212;
}
.video:hover {
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 50px;
    border: 20px solid #3d9df7;
    box-shadow: -10px 10px 80px #121212;
}

.musicvidthumb {
    width: 45%;
    border: 10px double #121212;
    box-sizing: border-box;
    margin-bottom: 15px;
    box-shadow: 3px 3px 10px black;
}

.musicvidthumb:hover {
    width: 45%;
    border: 10px solid #c8386f;
    box-sizing: border-box;
    margin-bottom: 15px;
    box-shadow: 3px 3px 10px black;
}



/* HEADERS, BUTTONS, etc. */

.header {
    width: 100%;
    margin-top: 25px;
}

.horizline {
    height: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 20px 0px;
    margin-bottom: 10px;
}

.outsidelink {
    width:100%;
    box-sizing: border-box;
    border-radius: 30px;
    border: 3px solid #b5a99d;
    margin-top: 15px;
}
.outsidelink:hover  {filter: sepia(80%)}

.sociallink {
    margin-bottom:15px; box-sizing: border-box;
    width: 30%;
    border: 8px double #cccccc; 
    border-radius: 20px;
    box-shadow: 0px 0px 20px #121212;
}
.sociallink:hover   {border-color: #c8386f; border-style: solid}

/* INDEX-ONLY ... for now */

#index-content {
    display: block;
    background-color: #384589;
    border: 8px double #cccccc;
    border-radius: 40px;
    box-shadow: 0px 0px 50px inset #121212;
    box-sizing: border-box;
    padding: 10px 30px 20px;
    text-align: center;
    position:relative;
    z-index: 1;
    overflow: auto;
}

.latestreleases {
    width:100%;
    border: 10px double #121212;
    background-color: #cccccc;
    box-sizing: border-box;
    text-align:center;
}
.latestreleases:hover {border-color: #cccccc; box-shadow: 0px 0px 10px #cccccc;}
    
.button-index  {
    width:40%;
    box-sizing: border-box;
    border: 8px double #121212; 
    border-radius: 15px;
    box-shadow: 0px 0px 20px #121212;
    background-color: #362a65;
    position:relative;
    z-index:2;
    margin: 10px 2% 10px;
    white-space: nowrap;
    }
.button-index:hover {
    border-color: #c8386f;
    background-color: #c8386f;
    box-shadow: 0px 0px 50px #c8386f;
     }




/*  ARTISTS PAGES (not layout)  */

.artistshome-logo {
    width: 45%;
    border: 8px double black;
    box-sizing: border-box;
    margin: 10px 10px 10px;
    box-shadow: 5px 5px 20px #121212;
}
.artistshome-logo:hover {
    background-color: brown;
    border-color: brown;
    box-shadow: 5px 5px 20px brown;
}

.artists-frontphoto {
    width: 100%;
    border: 10px solid #121212;
    border-collapse: collapse;
    box-sizing: border-box;
    box-shadow: 5px 10px 50px black;
}

.bandbio {
    padding: 20px;
    border: 5px solid black;
    box-shadow: 5px 10px 50px black;
}
.bandmates {
    text-align: left;
    color: #121212;
    display: block;
    font-size: 1em;
    font-style: italic;
    padding: 10px;
}
.bandmember {
    font-size: 1.3em;
    font-weight: bold;
    display: inline-block;
}

.albumcover {
    width: 100%;
    border: 10px double #121212;
    box-sizing: border-box;
    margin-bottom: 25px;
    box-shadow: 8px 8px 30px black;
}

.tracklisting {
    font-size: 1.2em;
    margin: 10px 20px 10px
}

.listenbutton {
    width: 40%; 
    margin-bottom: 6px;
    box-sizing: border-box; 
    border: 3px solid #121212;
    border-radius: 20px;
    box-shadow: 0px 0px 10px black;
}

.listenbutton:hover {box-shadow: 0px 0px 30px #cccccc;}