html,body {
width: 100%;
}
body {
position: relative;
background-color: #e6f7ff;
/* for test site */
/*background-color: grey;*/
}
/* HIDE SMALL MUSIC PLAYER */
img[src*="content/classic_skin_dark/open-button-normal-top.png"] {
display: none;
/*this image dictates the size area alowed for
the minimize button. I made this image 1px by 1px*/
}
img[src*="content/classic_skin_dark/open-button-selected-top.png"] {
display: none;
}
img[src*="content/classic_skin_dark/equalizer.png"] {
display:none;
}
img[src*="content/classic_skin_dark/close-button-normal.png"] {
display:none;
}
@font-face{
font-family: dancingscript;
src: url(../fonts_icons/fonts/dancingscript.ttf)
}
@font-face{
font-family: orbitron;
src: url(../fonts_icons/fonts/orbitron.woff)
}
@font-face{
font-family: junction;
src: url(../fonts_icons/fonts/junction.woff)
}
@font-face{
font-family: blackout;
src: url(../fonts_icons/fonts/blackout.woff)
}
@font-face{
font-family: newwave;
src: url(../fonts_icons/fonts/newwave.woff);
}
#load_font_orbitron_before_page {
font-family: orbitron;
}
#load_font_junction_before_page {
font-family: junction ;
}
#load_font_blackout_before_page {
font-family: blackout;
}
#load_font_newwave_before_page {
font-family: newwave;
}
/* don't think I need this
#music_player_running {
color: red;
}
*/
h1, h2, h3, h4, h5, h6 {
font-family: arial, sans-serif;
letter-spacing: 1px;
word-spacing: 1px;
line-height: 17px;
margin: 10px 0;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 19px;
padding: 5px 10px;
}
h5 {
font-family: times, serif;
font-style: italic;
font-size: 17px;
}
h6 {
font-size: 16px;
}
p {
font-family: arial, sans-serif;
font-size: 19px;
letter-spacing: 0.1px;
line-height: 24px;
margin: 20px;
}
/* LINKS */
p a {
padding: 0 6px;
}
a:link {
color: white;
text-decoration: none;
background-color: black;
border-radius: 5px;
letter-spacing: 1px;
font-family: arial, sans-serif;
}
a:visited {
color: white;
text-decoration: none;
background-color: black;
}
a:hover {
color: #cccccc;
text-decoration: none;
background-color: black;
}
a:active {
color: #cccccc;
text-decoration: none;
background-color: black;
}
#main_body {
overflow: hidden;
width: 100%;
height: auto;
min-height: 700px;
margin-top: 44px;
padding-top: 10px;
padding-bottom: 100px;
}
#homepage_logo {
display: block;
width: 450px;
height: auto;
margin: 40px auto 50px auto;
}
@media screen and (max-width: 700px){
#homepage_logo {
width: 64%;
}
}
@media screen and (max-width: 480px){
#homepage_logo {
width: 307px;
}
}
@media screen and (max-width: 310px){
#homepage_logo {
width: 98%;
}
}
/* ~~~~~~~~~~ AVATAR ~~~~~~~~~~~~~ */
#intro_text_avatar_wrap {
width: 730px;
height: 315px;
display: none;
margin: 0 auto;
}
#intro_text_wrap {
float: left;
width: 400px;
height: 200px;
overflow: hidden;
margin-top: 62.5px;
}#intro_text_wrap h3 {
font-size: 36px;
color: black;
margin-left: 20px;
font-family: orbitron , arial , sans-serif;
font-weight: bold;
}#intro_text_wrap p {
font-size: 32px;
font-family: dancingscript , serif;
}
#intro_avatar_wrap {
width: 315px;
height: 315px;
border-radius: 50%;
box-shadow: 0 0 10px black;
overflow: hidden;
background: white;
}#intro_avatar_wrap img{
width: 300px;
height: 300px;
box-shadow: 0 0 5px black;
border-radius: 50%;
display: block;
/* this is centering the image inside the round div */
margin: 7.5px auto;
}
#bend_frantic_peace {
display: none;
font-family: orbitron , serif;
text-align: center;
font-size: 36px;
}
#text_below_avatar {
display: none;
font-size: 32px;
font-family: dancingscript , serif;
text-align: center;
}
@media screen and (max-width: 740px)
{
#intro_text_avatar_wrap {
width: 400px;
height: 500px;
}
#intro_text_wrap {
display: none;
}
#bend_frantic_peace {
display: block;
}
#intro_avatar_wrap {
float: none;
margin: 0 auto;
display: block;
}
#text_below_avatar {
display: block;
}
}@media screen and (max-width: 410px)
{
#intro_text_avatar_wrap {
width: 100%;
height: 550px;
}
#bend_frantic_peace {
font-size: 9vw;
}
#intro_avatar_wrap {
width: 78%;
height: auto;
}
#intro_avatar_wrap img{
width: 94%;
height: auto;
}
}@media screen and (max-width: 305px)
{
#text_below_avatar {
font-size: 12vw;
}
}
/* ~~~~~~~~~~~ EVENTS ~~~~~~~~~~~~ */
#events_wrap {
display: none;
width: 800px;
margin: 80px auto 80px auto;
padding-bottom: 20px;
height: auto;
box-shadow: 0 0 2px black;
border-radius: 20px;
background: #F2F2F2;
overflow: hidden;
}
#events_wrap h3{
text-align: center;
font-family: newwave;
font-size: 32px;
padding: 8px 0 6px 0;
}
.category_event_wrap , .event_details_wrap {
width: calc(100% - 80px);
height: 40px;
box-shadow: 0 0 2px black;
margin: 0 auto;
}
.mobile_event_when {
display: none;
}
/* desktop shows header and information same size */
.category_event , .event_details {
float: left;
padding: 5px;
margin: 5px;
box-shadow: 0 0 2px black;
text-align: center;
}
.category_event {
font-weight: bold;
background: black;
color: white;
}
.event_details {
padding: 2px 5px;
background: white;
}
i.events_icons {
display: none;
font-size: 24px;
margin-right: 20px;
}
i.show_question_icon {
display: inline;
}
.event_details p {
padding: 0;
margin: 0;
font-size: 16px;
}
/* specific section */
.when_event , .when_details {
width: 115px;
}
.where_event , .where_details {
width: 300px;
}
.time_event , .time_details {
width: 68px;
}
.cost_event , .cost_details {
width: 35px;
}
.age_event , .age_details {
width: 60px;
}
.more_event , .more_details {
width: 20px;
border-radius: 50%;
}
.more_details {
text-align: center;
}
@media screen and (max-width: 820px)
{
#events_wrap {
width: 450px;
}
.category_event_wrap {
display: none;
}
.desktop_event_when {
display: none;
}
.mobile_event_when {
display: inline;
}
.event_details_wrap {
height: 280px;
background: radial-gradient(#2E2E2E,black 80%);
margin: 10px auto;
box-shadow: 0 0 2px black;
border-radius: 20px;
}
.event_details {
width: 500px;
box-shadow: none;
text-align: left;
background: none;
}
.where_details {
margin-top: 20px;
font-weight: bold;
}
i.events_icons {
float: left;
display: inline;
color: white;
margin-left: 10px;
}
i.margin_left_icon {
margin-left: 13px;
margin-right: 24px;
}
i.margin_right_icon {
margin-right: 22px;
}
i.shrink_icon {
font-size: 20px;
}
.event_details p {
float: left;
margin-top: -3.5px;
background: white;
padding: 4px 0 3px 8px;
border-radius: 3px;
width: 278px;
}
}
@media screen and (max-width: 470px)
{
#events_wrap {
width: 300px;
margin: 40px auto 80px auto;
}
#events_wrap h3{
letter-spacing: 6px;
line-height: 30px;
}
.events_header {
letter-spacing: 14.4px;
}
.event_details_wrap {
width: 94%;
height: 290px;
}
.event_details p {
width: 200px;
}
i.events_icons {
float: left;
display: inline;
color: white;
margin-left: 2px;
}
i.margin_left_icon {
margin-left: 5px;
margin-right: 24px;
}
i.margin_right_icon {
margin-right: 22px;
}
}
@media screen and (max-width: 313px)
{
#events_wrap {
width: 100%;
border-radius: 0;
}
.event_details_wrap {
width: 98%;
}
.event_details {
width: 98%;
}
.event_details p {
width: 70%;
}
i.events_icons {
float: left;
display: inline;
color: white;
margin-left: 2px;
}
i.margin_left_icon {
margin-left: 5px;
margin-right: 24px;
}
i.margin_right_icon {
margin-right: 22px;
}
}
@media screen and (max-width: 240px)
{
#events_wrap h3{
font-size: 13vw;
}
}
#home_page_video_cover {
display: none;
margin: 0 auto;
width: 960px;
height: 540px;
}
#home_page_video_cover img{
width: 100%;
height: 100%;
box-shadow: 0 1px 2px 2px black;
}#home_page_video_cover:hover img{
opacity: .9;
cursor: pointer;
}
@media screen and (max-width: 1073px)
{
#home_page_video_cover {
width: 90%;
height: auto;
}
}
header#mainheader {
position: relative;
width: 100%;
/* WARNING CHANGING HEIGHT BREAKS LOTS OF CODE
relating to where controler position is */
height: 62px;
background-color: #1a1a1a;
background: linear-gradient(#4d4d4d, black);
}
#header_logo {
float: left;
margin: 3px 0 3px 4px;
padding: 3px 7px 3px 2px;
width: 50px;
height: 50px;
background: white;
border-radius: 28px;
box-shadow: 0 0 3px 1px black ;
}
header#mainheader h1 {
position: relative;
float: left;
font-size: 30px;
text-align: left;
margin: 28px 0 0 -11.5px;
font-weight: normal;
color: #A9F5F2;
text-shadow: 0 0 9px black;
font-family: orbitron;
-webkit-text-stroke: .8px black;
}
div#page_title {
z-index: 9;
position: absolute;
bottom: 0px;
right: 65%;
height:27px;
width: auto;
margin-bottom: -14px;
background: #E6F7FF;
border-radius: 4px;
}#page_title h2 {
margin-top: 5px;
margin-left: 2px;
display: none;
padding: 0 5px;
font-size: 20px;
font-family: orbitron;
color: black;
cursor: default;
}@media screen and (max-width: 1150px)
{
div#page_title {
right: 30%;
}
}@media screen and (max-width: 340px)
{
div#page_title {
right: 30%;
height: 20px;
margin-bottom: -8px;
}
div#page_title h2 {
font-size: 14px;
}
}@media screen and (max-width: 275px)
{
div#page_title {
right: 16%;
}
}
/* Navigation */
nav#main_nav {
float: right;
margin: 14px 15px 0 0;
padding: 5px 0 5px 5px;
border-radius: 8px;
background-color: black;
box-shadow: 0 0 20px #595959;
box-shadow: 0 2 25px black;
cursor: default;
}
nav#main_nav li {
display: inline;
margin: 0 5.5px 0 0;
}
div.navbtn {
color: white;
font-size: 32px;
cursor: pointer;
} div.navbtn a:hover {
color: #cccccc;
}
div#header_navbtn {
display: none;
float: right;
margin: 15px 20px 0 0;
}
div#fixed_navbtn {
z-index: 9999;
display: none;
position: fixed;
top: 15px;
right: 20px;
color: black;
text-shadow: 0 0 2px white;
}div#fixed_navbtn:hover {
text-shadow: 0 0 .8px #2E2E2E , 0 0 1px white;
}
div#player_show_navbtn {
z-index: 9;
position: fixed;
top: -200px;
right: 20px;
color: black;
text-shadow: 0 0 2px white;
}div#player_show_navbtn:hover {
text-shadow: 0 0 .8px #2E2E2E , 0 0 1px white;
}
div#navbackbtn {
position: absolute;
top: 14px;
right: 21px;
display: block;
color: white;
font-size: 32px;
cursor: pointer;
} div#navbackbtn a:hover {
color: #cccccc;
}
@media screen and (max-width: 432px)
{
div#header_navbtn {
margin: 14px 7px 0 0;
}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 405px)
{
header#mainheader h1 {
font-size: 7.3vw;
}
}
@media screen and (max-width: 340px)
{
#header_logo {
display: none;
}
header#mainheader h1 {
font-size: 24px;
margin: 21px 0 0 10px;
}
div#fixed_navbtn {
top: 3px;
right: 7px;
}
div#navbackbtn {
top: 13px;
right: 8px;
}
}
@media screen and (max-width: 275px)
{
header#mainheader {
height: 40px;
}
header#mainheader h1 {
font-size: 8.3vw;
margin: 11px 0 0 4px;
}
div#header_navbtn {
font-size: 20px;
margin-top: 9px;
}
div#navbackbtn {
font-size: 20px;
top:8px;
}
div#fixed_navbtn {
top: 5px;
font-size: 20px;
}
div#player_show_navbtn {
font-size: 20px;
}
}
nav#mobile_nav {
z-index: 999999999999;
display: none;
position: fixed;
top:0;
right:0;
width: 320px;
height: 100vh;
opacity: .95;
z-index: 11000;
box-shadow: -2px -2px 4px black;
background-color: black;
background: linear-gradient(#333333,black);
animation-name: mobile_nav_animation;
animation-duration: .3s;
}
@keyframes mobile_nav_animation
{
from {height: 0px;}
to {height: 100%;}
}
.mobile_nav_box_shadow {
position: fixed:;
top:0;
right:7px;
width: 320pc;
height: 55px;
box-shadow: 0 2px 2px black;
background: black;
opacity: .3;
}
#mobile_nav_content_wrap {
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
div#mobile_nav_content {
/*
display: none; */
height: 380px;
width: 185px;
margin: 23px 0 0 20px;
}
#mobile_nav ul {
padding-bottom: 200px;
}
#mobile_nav li {
list-style-type: none;
margin: 10px 0;
}
/* NAV LINKS BUTTONS */
.nav_links {
background: #151515 ;
color: white;
border: none;
font-size: 16px;
border-radius: 5px;
}
.nav_links:hover {
background: #2E2E2E;
cursor: pointer;
}
#play_music_main_nav_btn {
margin: 0 2px 0 15px;
font-size: 16px;
border-radius: 3px;
border: none;
font-family: arial;
font-weight: bold;
background-color: white;
color: black;
box-shadow: 0 0 2px white;
}
#play_music_main_nav_btn:hover {
box-shadow: 0 0 2px black inset;
cursor: pointer;
border-radius: 4px;
}
#play_music_mobile_nav_btn {
font-size: 20px;
background-color: white;
border-radius: 5px;
border: none;
color: black;
font-family: arial;
padding: 4px 8px;
margin-left: 1px;
font-weight: bold;
box-shadow: 0 0 2px white;
width: 163px;
}
#play_music_mobile_nav_btn:hover {
box-shadow: 0 0 2px black inset;
cursor: pointer;
}
.mobile_nav_links {
background: #151515;
color: white;
border: none;
font-size: 19px;
cursor: pointer;
border-radius: 5px;
padding: 5px 0;
}
.mobile_nav_links:hover {
background: #1C1C1C;
}
#mobile_nav_top_link {
margin-top: 5px;
}
.mobile_nav_text {
margin-left: 5px;
}
/* START MEDIA SCREEN WIDTH */
@media screen and (max-width: 1150px)
{
nav#main_nav {
display: none;
}
div#header_navbtn {
display: block;
}
nav#mobile_nav {
display: none;
}
/* When nav#mobile_nav is display
block this will be ready */
div#mobile_nav_content {
display: block;
}
} /* END MEDIA SCREEN WIDTH */
/* START MEDIA SCREEN WIDTH */
@media screen and (max-width: 600px)
{
nav#mobile_nav {
display: none;
position: fixed;
top:0px;
right:0;
width: 100%;
height: 100vh;
opacity: .95;
z-index: 11000;
box-shadow: none;
background-color: black;
background: linear-gradient(#333333,black);
animation-name: mobile_nav_animation;
animation-duration: 1s;
}
div#mobile_nav_content {
margin: 23px auto 0 auto;
}
} /* END MEDIA SCREEN WIDTH */
@media screen and (max-width: 340px)
{
.mobile_nav_box_shadow {
height: 35px;
}
}
#pictures_nav_icon {
margin-left: 51px;
padding-right: 5px;
}
#videos_nav_icon {
margin-left: 63px;
padding-right: 5px;
}
#downloads_nav_icon {
margin-left: 26px;
padding-right: 7px;
}
#discography_nav_icon {
margin-left: 13px;
padding-right: 7px;
}
#lyrics_nav_icon {
margin-left: 81px;
padding-right: 8px;
}
#bio_nav_icon {
margin-left: 97px;
padding-right: 6px;
}
#contact_nav_icon {
margin-left: 55px;
padding-right: 5.2px;
}
/* ~~~ RESPONSIVE LIGHTBOX
FOR IMAGES AND VIDEOS ~~ */
.lightboxcontainer {
width:100%;
text-align:left;
}
.lightboxleft {
width: 40%;
float:left;
}
.lightboxright {
width: 60%;
float:left;
}
.lightboxright iframe {
min-height: 390px;
}
.divtext {
margin: 36px;
}
@media (max-width: 800px) {
.lightboxleft {
width: 100%;
}
.lightboxright {
width: 100%;
}
.divtext {
margin: 12px;
}
}
#loader_icon {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
/* TOOL TIP HIDE PLAYER */
div#tip_hide_player {
display: none;
z-index: 999;
position: fixed;
top: 99px;
left: 32px;
width: 160px;
height: 50px;
}#tip_hide_player i {
position: absolute;
top: 20px;
left: 0;
font-size: 25px;
text-shadow: 1px 2px 0 white;
background: rgb(230,247,255);
border-radius: 50%;
cursor: default;
animation: tipBounce 3s 3;
} @keyframes tipBounce
{
0% { top: 20px;}
50% { top: 0px; }
100% { top: 20px;}
}
#tip_hide_player p {
float: right;
letter-spacing: 2px;
font-size: 17px;
padding: 2px 5px;
margin: 12px 0 0 10px;
background: rgb(230,247,255);
border-radius: 5px;
cursor: default;
}
/* ~~~~~~~~~ MUSIC CONTROLLER ~~~~~~~~~~~ */
#music_controller {
position: fixed;
z-index: 9000;
top: -200px;
left: 100px;
width: 90px;
height: 90px;
}#music_controller:hover .mpcontrol_arrows {
text-shadow: 0 0 .8px #2E2E2E , 0 0 1px white;
}#music_controller:hover #play_pause_btn{
box-shadow: 0 0 2px 2px black , 0 0 2px 2px white;
}
#play_pause_btn {
position: absolute;
top: 50%;
left: 50%;
margin-left: -14px;
margin-top: -13.5px;
/* Find altered width in JS currently 28px width */
width: 150px;
height: 27px;
border: none;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px 1px black;
cursor: pointer;
overflow: hidden;
}
i#play_btn {
/* So play button hidden by text */
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -6px;
font-size: 18px;
}
i#pause_btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -8px;
font-size: 18px;
}
#play_pause_icon_and_text {
font-size: 24px;
color: black;
letter-spacing: 1.3px;
font-weight: bold;
text-align: center;
}
p#hide_text_play_music {
position: absolute;
display: inline;
top: -2px;
left: 24px;
background: white;
/* So text can cover play button */
z-index: 2;
margin: 4px 0 0 0;
padding: 0;
}
/*hides controls not player*/
#controller_hide_controls_arrow {
position: absolute;
top: 5px;
left: 50%;
margin-left: -15px;
display: none;
cursor: pointer;
width: 30px;
height: 20px;
text-shadow: 0 0 5px white;
}#controller_hide_controls_arrow i {
font-size: 16px;
margin-left: 10px;
}#controller_hide_controls_arrow:hover > i {
font-size: 25px;
margin-left: 8px;
margin-top: -4px;
}
#controller_show_arrow {
position: absolute;
bottom:5px;
left: 50%;
margin-left: -15px;
display: none;
cursor: pointer;
width: 30px;
height: 20px;
text-shadow: 0 0 5px white;
}#controller_show_arrow i {
position: absolute;
bottom: 0;
margin-left: 10px;
font-size: 16px;
}#controller_show_arrow:hover > i {
font-size: 25px;
margin-left: 8px;
margin-bottom: -4px;
}
#controller_left_arrow {
position: absolute;
left:1px;
top: 50%;
margin-top: -15px;
width: 18px;
height: 30px;
display: none;
cursor: pointer;
text-shadow: 0 0 5px white;
font-size: 16px;
}#controller_left_arrow i {
margin: 7px 0 0 6px;
font-size: 16px;
}#controller_left_arrow:hover > i {
font-size: 25px;
margin-top: 2px;
margin-left: 4px;
}
#controller_right_arrow {
position: absolute;
right: 1px;
top: 50%;
margin-top: -15px;
width: 18px;
height: 30px;
display: none;
cursor: pointer;
text-shadow: 0 0 5px white;
font-size: 16px;
}#controller_right_arrow i {
margin: 7px 0 0 6px;
font-size: 16px;
}#controller_right_arrow:hover > i {
font-size: 25px;
margin-top: 2px;
}
/* not part of controller. This is
attached to the player to hide it*/
#caret_up_hide_player {
z-index: 9;
position: fixed;
top: -200px;
left: 22px;
cursor: pointer;
width: 34px;
height: 30px;
}#caret_up_hide_player i {
position: absolute;
top: 0;
left: 50%;
margin-left: -6px;
font-size: 24px;
color: black;
text-shadow: 0 0 2px white;
}#caret_up_hide_player:hover > i{
text-shadow: 0 0 4px white , 0 0 2px #2E2E2E;
font-size: 25px;
}
#caret_right_show_controls {
z-index: 9999;
position: fixed;
top: 90px;
left: -50px;
cursor: pointer;
width: 23px;
height: 30px;
}#caret_right_show_controls i {
position: absolute;
top: 50%;
left: 0;
margin-top: -8px;
font-size: 19px;
color: black;
-webkit-text-stroke: .3px white;
text-shadow: 0 0 2px white;
}#caret_right_show_controls:hover {
font-size: 20px;
}
@media screen and (max-width: 1000px){
#music_controller {
left: 50%;
margin-left: -102px;
}
}
/* ~~~~~~~~~ LIRYCS PAGE / DOWNLOADS PAGE ~~~~~~~~~~~ */
/* ALL LYRICS INDEX */
.song_nav{
display: none;
position: fixed;
top:0;
left:0;
overflow: scroll;
width: 360px;
height: 100vh;
z-index: 11000;
background-color: black;
background: linear-gradient(#333333,black);
-webkit-overflow-scrolling: touch;
animation-name: song_nav_animation;
animation-duration: .4s;
}
@keyframes song_nav_animation
{
from {width: 0;}
to {width: 360px;}
}
.song_nav_content {
display: block;
height: 100%;
overflow: scroll;
}
.song_nav_backbtn {
position: absolute;
top: 10px;
right: 17px;
display: inline;
color: white;
font-size: 32px;
cursor: pointer;
}
.song_nav_backbtn i:hover {
color: #cccccc;
}
.project_title_for_songs {
color: white;
margin: 10px 0 10px 10px;
font-weight: normal;
}
.song_nav ul {
padding-bottom: 150px;
}
.song_nav li {
list-style-type: none;
animation-name: fadein_lyrics_nav;
animation-duration: 3s;
animation-direction: forwards;
}
@keyframes fadein_lyrics_nav
{
from{opacity: 0}
to {opacity: 1}
}
.song_nav a {
background-color: black;
font-size: 17px;
margin: 10px 56px 10px 15px;
display: block;
border-radius: 5px;
box-shadow: 0 0 10px #4d4d4d;
padding: 7px 0;
}
.song_nav span {
margin-left: 10px;
}
.song_nav a:hover {
box-shadow: 0 0 10px black;
}
nav.song_nav i.menubars {
background-color: transparent;
box-shadow: none;
padding: 0;
}
@media screen and (max-width: 715px)
{
.project_title_for_songs {
text-align: center;
margin: 10px 0 10px -50px;
}
.song_nav{
width: 100vw;
}
@keyframes song_nav_animation
{
from {width: 0;}
to {width: 100vw;}
}
.song_nav li {
width: 360px;
margin: 0 auto;
}
}
@media screen and (max-width: 360px)
{
.song_nav ul {
width: 100%;
margin: 0;
}
.song_nav li {
width: 100%;
margin: 0;
}
}
@media screen and (max-width: 290px)
{
.song_nav a {
font-size: 5.8vw;
}
}
/* ~~~~~~~~~~LYRICS SECTION ARTICLE ~~~~~~~~~~~~ */
/* LYRICS */
section#lyrics_wrap {
display: none;
top: 90px;
width: 800px;
height: auto;
margin: 0 auto;
}
@media screen and (max-width: 800px)
{
section#lyrics_wrap {
width: 98%;
}
}
article.lyrics_from_project {
width: 100%;
background-color: #EFF8FB;
box-shadow: 0 0 5px black;
overflow: auto;
margin-top: 60px;
}
header.project_headers {
width: 90%;
height: auto;
margin: 90px auto 0 auto;
text-align: center;
box-shadow: 0 0 5px 5px black;
border-radius: 30px;
}
header.project_headers h2 {
color: black;
text-shadow: none;
padding: 20px;
}
section.lyrics_container{
width: 94.3%;
height: auto;
margin: 20px auto;
padding-top: 110px;
padding-bottom: 40px;
}
header.lyrics_header h3{
font-family: arial, sans-serif;
font-weight: bold;
font-size: 22px;
padding: 15px 0;
text-shadow: none;
color: white;
background-color: black;
box-shadow: 0 0 5px 1px #003333;
}
header.lyrics_header h5{
font-family: times, serif;
font-style: italic;
font-size: 16px;
margin: 10px 0;
/* padding-left: 20px; don't think I need */
background-color: white;
box-shadow: 0 2px 4px black;
}
.lyrics_text p {
margin: 20px 20px;
text-align: justify;
}
footer.lyrics_footer {
background-color: aqua;
box-shadow: 0 0 5px black;
width: 100%;
height: auto;
font-size: 11px;
overflow: hidden;f
}
.copyright_wrap {
margin: 10px 0;
}
.copyright_wrap p {
font-size: 14px
}
.copyright_start {
display: inline;
margin: 0;
}
.current_year {
display: inline;
margin: 0;
}
.copyright_end {
display: inline;
margin: 0 0 0 5px;
}
@media screen and (max-width: 400px)
{
.lyrics_text p {
margin: 20px 1px;
}
.display_block_at_sm_screen {
display: block;
}
}
@media screen and (max-width: 200px)
{
.copyright_end {
display: block;
}
}
/* ~~~~~~~~~~~~ DISCOGRAPHY ~~~~~~~~~~~~~~~ */
/*MAIN PROJECT CONTAINER*/
article.project_wrap {
width: 1200px;
height: auto;
overflow: hidden;
margin: 50px auto 0 auto;
}
/*LEFT COLUMN*/
section.project_art_wrap {
float: left;
width: 600px;
overflow: hidden;
}
/*RIGHT COLUMN*/
section.track_listing_wrap {
float: left;
width: 600px;
overflow: hidden;
}
/* FOR MAIN PROJECT CONTAINER */
article.project_wrap header {
width: 96%;
margin: 0 2%;
padding: 5px 0 .1px 0;
height: 65px;
background-color: #1a1a1a;
color: white;
box-shadow: 0 0 2px white;
text-align: center;
border-radius: 10px
}
article.project_wrap h3 {
margin: 0;
padding:0;
}
article.project_wrap h3 {
margin: 0;
padding: 0;
}
article.project_wrap hr {
width: 20px;
}
/* FOR LEFT COLUMN project art wrap */
figure.project_art {
width: 400px;
margin: 20px auto;
}
figure.project_art img {
width: 400px;
height: 400px;
margin: 0 auto;
border-radius: 20px;
box-shadow: 0 1px 2px black;
}
figure.project_art figcaption {
width: 100%;
box-shadow: 0 0 2px black;
text-align: center;
padding-bottom: 5px;
margin-top: -10px;
border-radius: 10px;
}
p.discography_copyright {
padding-top: 5px;
margin-bottom: 5px;
font-size: 12px;
word-spacing: 2px;
}
p.discography_produced_by , p.discography_artwork_by {
font-size: 14px;
font-weight: bold;
margin:0;
}
/* FOR RIGHT COLUMN track listing */
ol.track_listing {
width: 400px;
margin: 20px auto;
padding-bottom: 20px;
box-shadow: 0 0 2px black;
list-style-position: outside;
}
ol.track_listing li {
position: relative;
padding: 8px 0;
border-bottom: 2px dotted black;
margin-left: 40px;
}
p.track_title_feat_prod {
padding: 0;
margin:0;
font-size: 16px;
background: #e6f7ff;
}
span.discography_main_text {
font-weight: bold;
}
span.discography_sub_text {
display: block;
margin: 5px 0 0 5px;
}
i.show_hide_discography_icons_btn {
display: none;
position: absolute;
top: 3px;
right: 3px;
color: black;
padding: 0 1px;
font-size: 22px;
}
i.show_hide_discography_icons_btn:hover {
cursor: pointer;
color: #0B0B3B;
}
div.choice_icons_wrap {
z-index: 1;
position: absolute;
right: 0;
top: 11px;
width: 130px;
height: 15px;
}
a.discography_icons {
margin: 0 12px;
font-size: 16px;
padding: 0;
background: none;
color: black;
border: none;
position: relative;
}
a.discography_icons:hover {
cursor: pointer;
}
a[title="Share Song"] {
display: none;
}
.fa-share-alt {
/* TEMPORaRY */
opacity: .3;
cursor: not-allowed;
}
i.inactive_icon_no_lyrics {
opacity: .3;
cursor: not-allowed;
}
/* FIRST MEDIA SCREEN */
@media screen and (max-width: 1200px)
{
/*MAIN PROJECT CONTAINER*/
article.project_wrap {
width: 1000px;
}
/*LEFT COLUMN*/
section.project_art_wrap {
width: 500px;
}
/*RIGHT COLUMN*/
section.track_listing_wrap {
width: 500px;
}
} /* END MEDIA SCREEN AND */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SECOND MEDIA SCREEN */
@media screen and (max-width: 1000px)
{
/*MAIN PROJECT CONTAINER*/
article.project_wrap {
width: 850px;
}
/*LEFT COLUMN*/
section.project_art_wrap {
width: 425px;
}
/*RIGHT COLUMN*/
section.track_listing_wrap {
width: 425px;
}
} /* END MEDIA SCREEN AND */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* THIRD MEDIA SCREEN */
@media screen and (max-width: 853px)
{
/*MAIN PROJECT CONTAINER*/
article.project_wrap {
width: 550px;
}
/*LEFT COLUMN*/
section.project_art_wrap {
width: inherit;
}
/*RIGHT COLUMN*/
section.track_listing_wrap {
width: inherit;
}
} /* END MEDIA SCREEN AND */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FOURTH MEDIA SCREEN */
@media screen and (max-width: 550px)
{
/*MAIN PROJECT CONTAINER*/
article.project_wrap {
width: 100%;
}
figure.project_art {
width: 70%;
}
figure.project_art img {
width: 100%;
height: auto;
}
} /* END MEDIA SCREEN AND */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FIFTH MEDIA SCREEN Blue button arives and options leave*/
@media screen and (max-width: 420px)
{
figure.project_art {
width: 90%;
}
ol.track_listing {
width: 98%;
margin: 20px 1%;
}
i.show_hide_discography_icons_btn {
display: inline;
z-index: 10;
}
p.track_title_feat_prod {
margin-top: -5px;
z-index: 2;
width: 100%;
position: relative;
}
div.choice_icons_wrap {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e6f7ff;
}
a.discography_icons {
top: 8px;
}
} /* END MEDIA SCREEN AND */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SIXTH MEDIA SCREEN */
@media screen and (max-width: 300px)
{
figure.project_art {
width: 98%;
}
figure.project_art figcaption {
width: 200px;
margin: 0 auto;
}
span.displayblock_discography {
display: block;
}
} /* END MEDIA SCREEN AND */
/* BIOGRAPHY */
#bio_intro_video_wrap {
width: 600px;
height: auto;
margin: 0 auto;
padding: 5px 5px 1px 5px;
border-radius: 10px;
box-shadow: 0 0 4px black;
position: relative;
background-image: url("../img/logos/black_logo.svg");
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
}
video#bio_intro_video {
width: inherit;
height: auto;
border-radius: 10px;
}
header#bio_header {
width: 700px;
height: auto;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 0 2px black;
background: black;
}
header#bio_header h3 {
padding: 10px 10px;
text-align: center;
color: white;
}
.text_wrap {
width: 98%;
max-width: 800px;
height: auto;
margin: 0 auto;
overflow: hidden;
}
.textbox {
margin: 20px 5px;
background: white;
border-radius: 20px;
box-shadow: 1px 1px 2px black, 0 0 4px black inset;
}
.textbox p {
text-align: justify;
padding: 0 0 30px 0;
margin: 0 20px;
}
.textbox h4 {
padding: 30px 0 0 0;
text-align: center;
}
.warning_textbox {
background: #FFFF00;
}
.textbackground {
width: 40%;
height: auto;
background-color: white;
color: black;
}
@media screen and (max-width: 813px)
{
#bio_intro_video_wrap {
width: 74%;
}
video#bio_intro_video {
width: 100%;
}
header#bio_header {
width: 87%;
}
} /* END MEDIA SCREEN WIDTH */
@media screen and (max-width: 400px)
{
#bio_intro_video_wrap {
width: 94%;
}
header#bio_header h3 {
font-size: 5vw;
padding: 5px 3px;
}
.text_wrap {
width: 100%;
}
.textbox {
border-radius: none;
box-shadow: none;
background: none;
}
.textbox p {
padding: 0;
margin: 0;
}
}
/* ---- VIDEOS / PICURES / LYRICS / DOWNLOADS---- */
#click_area_hide_opened_tabs {
width: 100%;
height: 100%;
overflow: hidden;
}
.tabs {
display: block;
width: 208px;
margin: 45px auto 0 auto;
height: auto;
background: black;
background: linear-gradient(darkgrey, black);
box-shadow: 0 4px 2px black;
cursor: pointer;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tabs h3 {
color: white;
font-size: 17px;
padding-top: 3px;
text-align: center;
}
.opened_tabs {
display: none;
background: #f2f2f2;
background: radial-gradient(white, #f2f2f2);
width: 810px;
height: auto;
margin: 0 auto;
box-shadow: 0 0 5px black, 0 0 3px black inset;
overflow: hidden;
border-radius: 8px;
}
/* Video on discography has inline
css to override positioning from this
.tabs_content */
.tabs_content {
float: left;
width: 190px;
margin: 10px 0 10px 10px;
box-shadow: 0 0 5px black;
cursor: pointer;
animation-name: fadein_img;
animation-duration: 2s;
animation-timing-function: cubic-brezier(0,0,0,1);
animation-iteration-count: 1 ;
}
@keyframes fadein_img {
from { opacity: 0; }
to { opacity: 1; }
}
.tabs_content_tn_small , .tabs_content_tn_large {
box-shadow: 0 0 5px black;
width: inherit;
overflow: hidden;
}
.tabs_content_tn_small img {
margin: 10px 35px;
width: 120px;
height: 120px;
}
.tabs_content_tn_large img {
margin: 10px 35px;
width: 120px;
height: 90px;
}
.tabs_content_title {
background: black;
font-size: 14px;
text-align: center;
width: 90%;
margin: 8px 5%;
border-radius: 5px;
padding: 5px 0;
color: white;
font-family: arial, sans-serif;
letter-spacing: .9px;
}
@media screen and (max-width: 820px)
{
#none_clickable_area {
width: 410px;
}
.opened_tabs {
width: 410px;
}
}
@media screen and (max-width: 450px)
{
#none_clickable_area {
width: 210px;
}
.opened_tabs {
width: 210px;
}
}
/* ~~~~ OVERLAY OPTIONS use on downloadpage~~~~~ */
.option_overlay {
display: none;
position: fixed;
top:0;
left:0;
overflow: scroll;
width: 100vw;
height: 100vh;
opacity: .85;
z-index: 11000;
background-color: black;
background: linear-gradient(#333333,black);
}
.wrap_option_overlay {
display: inline-table;
width: 100vw;
height: 100vh;
position: relative;
top:0;
left:0;
}
.content_option_overlay {
display: table-cell;
text-align: center;
width: 100px;
height: 200px;
background: black;
vertical-align: middle;
}
a.link_download_option {
font-family: arial;
color: white;
}
a.link_download_option {
cursor: pointer;
}
a.cancel_overlay_options {
color: yellow;
font-size: 17px;
font-family: arial;
}
a.cancel_overlay_options:hover {
cursor: pointer;
}
/* Currently for discography inside options overlay */
.share_icon_wrap {
width: 300px;
margin: 0 auto;
height: 300px;
box-shadow: 0 0 2px white;
}
i.share_icons {
color: white;
font-size: 70px;
}
i.share_icons:hover {
cursor: pointer;
}
/* ~~~~ DOWNLOAD PAGE ~~~~~ */
hr.hr_divide_download_options {
width: 20px;
margin: 15px auto;
}
a.link_download_option {
font-size: 19px;
}
/* ~~~~ CONTACT PAGE ~~~~~ */
#iframe_contact_form {
width: 99%;
height: 80vw;
margin: 0 auto;
overflow: hidden;
}
/* ~~~~~~~~ FOOTER ~~~~~~~~~~~~~~ */
#footer_url{
font-size: 22px;
margin: 0 0 6px 12px;
font-family: newwave;
letter-spacing: 2px;
}
footer#mainfooter {
clear: both;
width: 100%;
height: auto;
background: linear-gradient(#1a1a1a, #000000);
box-shadow: 0 0 8px black;
overflow: hidden;
}
#mainfooter_content {
width: 100%;
height: auto;
margin: 2px auto 10px auto;
overflow: hidden;
}
nav#footer_nav {
margin: 0 auto 17px auto;
width: 625px;
}
nav#footer_nav ul {
margin-left: 4px;
}
nav#footer_nav li {
display: inline;
cursor: default;
}
nav#footer_nav button {
border: none;
}
.footer_nav_icons {
background: transparent;
color: white;
font-size: 30px;
cursor: pointer;
margin: 20px 13px;
}
#copyright_wrap {
width: 100%;
height: auto;
color: white;
margin-bottom: 45px;
padding: 5px;
text-align: center;
}
/* for MAINFOOTER AND FOR FOOTER AT END OF LYRICS */
#copyright_wrap p {
font-size: 14px;
}
.footer_copyright_start {
display: inline;
margin: 0;
letter-spacing: 1px;
}
.footer_current_year {
display: inline;
margin: 0;
letter-spacing: 1px;
}
.footer_copyright_end {
display: inline;
margin: 0 0 0 5px;
letter-spacing: 1px;
}
img#footer_logo {
display: block;
margin: 0 auto 10px auto;
width: 150px;
height: 150px;
}
@media screen and (max-width: 648px)
{
#footer_url{
text-align: center;
margin-left: 0;
}
nav#footer_nav {
display: none;
}
#copyright_wrap {
margin-bottom: 10px;
}
}
@media screen and (max-width: 400px)
{
#footer_allrights_display_block {
display: block;
}
}
@media screen and (max-width: 250px)
{
#footer_url{
font-size: 2vw;
}
.footer_copyright_end {
display: block;
}
}
/* ~~~~~~~~~~~ NOSCRIPT ~~~~~~~~~~~ */
#noscript_wrap {
position: fixed;
top: 5%;
bottom: 5%;
left: 50%;
transform: translate(-50%, 0);
width: 490px;
background: black;
box-shadow: 0 0 0 5px white, 0 0 4px 10px black;
border-radius: 10px;
z-index: 10000;
overflow-y: scroll;
/*overflow-y: auto;*/
}
#noscript_h1_wrap {
background: white;
width: 450px;
margin: 20px auto;
border-radius: 5px;
}
h1#noscript_h1 {
color: black;
text-align: center;
font-size: 29px;
padding: 10px 0 10px 0;
}
div#noscript_text {
width: 400px;
margin: 0 auto;
}
#noscript_text p {
color: white;
font-size: 22px;
font-family: arial;
font-style: italic;
letter-spacing: .7px;
}
#noscript_text span {
color: yellow;
font-size: inherit;
white-space: nowrap ;
}
div#explain_noscript {
padding-top: 5px;
box-shadow: 0 0 2px white;
width: 455px;
margin: 40px auto 0 auto;
}
div#explain_noscript h2 {
letter-spacing: 2px;
text-shadow: 1px 1px yellow, -1px -1px white;
text-align: center;
color: black;
}
div#explain_noscript p {
margin: 0 0 20px 0;
padding: 10px;
color: white;
}
#no_script_howto {
background-color: white;
padding: 5px;
border-radius: 5px;
}
#no_script_howto a{
color: blue;
background: white;
padding: 0;
}
/* Remember this social_icons_wrap is
in the footer section of this code wtf FIND OUT THEN DELETE*/
#noscript_wrap {
margin: 10px auto 50px auto;
}
@media screen and (max-width: 550px){
#noscript_wrap {
margin: 0;
border-radius: 0;
width: 100vw;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: none;
transform: none;
}
#noscript_h1_wrap {
width: 94%;
margin: 20px auto;
}
}/* END @MEDIA SCREEN AND */
@media screen and (max-width: 480px){
h1#noscript_h1 {
font-size: 6.1vw;
}
#noscript_text span {
white-space: pre-wrap;
}
div#explain_noscript {
width: 94%;
}
}/* END @MEDIA SCREEN AND */
@media screen and (max-width: 380px){
div#noscript_text {
width: 100%;
margin: 0 2px 0 2px;
}
div#noscript_text p{
padding: 0;
margin: 10px;
}
div#explain_noscript h2 {
font-size: 7.8vw;
}
.noscript_br_whole_text {
display: block;
}
}/* END @MEDIA SCREEN AND */