/******** Core ********/
body{background:url(../img/bg.png) center fixed;background-size:100%;font-size:30px;color:#24313c}
#home{margin-top:100px;text-align:center}
header{position:fixed;z-index:200;background:#000;width:100%;top:0}
a.menu{color:#FFF;font-weight:700;line-height:50px;margin:0;padding:0 25px;text-decoration:none;z-index:1;position:relative}

.website{/*width:90%;*/padding:10px;background:rgba(255,255,255,0.8);border:2px solid #66c;border-radius:10px;margin:0 auto}
.website a{font-weight:700;font-style:italic;color:#000}
.screenshot { width:100%; /*max-width: 436px;*/ }
.screenshot2 { width:70%; margin: 10px 0px; }
.border { border: 3px solid #000; }

h1,h2,h3,h4,h5{margin-bottom:10px; clear:both;}
h2{color:#fff;background:url('../img/title.png') no-repeat; background-size: contain; background-position:center;width: 100%; text-align: center;padding:40px; font-size: 100%;}
h3{color:#003956;}
h4{color:#66c}

section#credits ul { padding:0px; margin:0px; clear:both; }
section#credits li.title {  font-weight:bold; font-style:italic; text-align: right; }
section#credits li { margin:0px; display:initial; text-align:left; padding-left: 20px; width: 48%; float: left; margin: 10px 0px;}

small{font-size:75%}
a{color:#ccf}
a:hover{color:#99c}
ul.songs{list-style:none;margin:0;padding:0}
ul.songs li{margin-top:10px}
ul.songs ul{list-style:none;color:#846666; margin:0px; margin-top:10px}
ul.songs ul li{margin-top:10px}
.songlist{background:rgba(255,255,255,1);border-radius:20px;text-align:center;padding:20px}
section{padding:0 60px; text-align:center; }
section:before{ content: ''; display: block; position: relative; width: 0; height: 3em; margin-top: -3em }
section#warnings { text-align: left; }
section#credits{ font-size: 18px; line-height:normal; }
section#legal { margin-bottom:100px;}

.col-parent{margin-top:10px; background: rgba(255,255,255,.8); padding: 20px 10px; }
.col{width:45%;display:inline-block;vertical-align:top;margin-right:50px}
.col p{display:block;clear:both;margin-bottom:20px}

.float{float:right;width:40%;max-width:400px}

table{border:1px solid #000;width:100%;background:#FFF;color:#000}
table tr td{padding:10px;border:1px solid #000}
table .color{background:#4aa6d9;color:#FFF; width:30%;}
table a { color:#99c;  text-decoration:underline;  }
table a:hover { color:#4aa6d9; }
.randamList{clear:both;border:2px dashed #4caaa2;margin:0 auto 16px;font-size:90%;color:#0F6755;background:#f2fcf9;overflow:hidden;padding:20px 16px 0!important}
.randamContent{clear:both;margin:0 auto;color:#0F6755;padding:20px 10px!important;overflow:hidden}


.legalsection { text-align:left; margin-bottom:20px; font-size:10px; line-height:normal; }


/****** Scroll to Top ******/
#scrollup{width:90px;height:90px;position:fixed;bottom:10px;right:20px;display:none;text-indent:-9999px;cursor:pointer;opacity:.8;z-index:2}
#scrollup:hover{opacity:1}
#scrollup img{display:block; width:100%;}


/******************* Updated Menu to address PS4 browser jQuery issues */
#nav { font-size: 18px; position: fixed; top: 0; width: 100%; }
#nav-button { color: #FFF;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 25px;     cursor: pointer;}
#nav ul{list-style:none;padding:0;margin:0;background:#1bc2a2}
#nav ul li{display:block;position:relative;float:left;background:#1bc2a2}

/* This hides the dropdowns */
#nav li ul{display:none}
#nav ul li a{display:block;padding:10px 20px;text-decoration:none;white-space:nowrap;color:#fff}
#nav ul li a:hover{background:#2c3e50}

/* Display the dropdown */
#nav li:hover > ul{display:block;position:absolute}
#nav li:hover li{float:none}
#nav li:hover a{background:#1bc2a2}
#nav li:hover li a:hover{background:#2c3e50}
.main-navigation li ul li{border-top:0}

/* Displays second level dropdowns to the right of the first level dropdown */
#nav ul ul ul{left:100%;top:0}

/* Simple clearfix */
#nav ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
#nav ul:after { clear: both; }

/*****************************************************/
/****** Main Navigation ******/
header nav { background:rgba(0,0,0,.3); position:relative; z-index:2; width:100%; float:left; padding:0px; }
header nav a {background-color:#44abe2; padding: 20px 0px; width:100% !important; text-decoration:none; color:#FFF; width:100%; height:inherit !important; font-weight:bold; font-size:21px; display: block;}
header nav a:hover { background: rgba(0,0,0,0.8) !important;  box-shadow: inset 0 -1px rgba(0,0,0,0);  color:#FFF !important;  }

header nav ul li { display:none;  }

.hamburger { display:inline-block}
.responsive li { display:inline !important; }
span.overlay{display:block; width:100%; height:100%; position:inherit; text-align:center; text-indent:inherit; white-space:nowrap; overflow: inherit; opacity:1; padding: 20px 0px; }





@media all and (max-width:1080px) {
body{font-size: 100%; }
.col{width:100%}
.float{width:100%;}
section { padding:0px; }

section#credits li.title { text-align:center; margin:0px; }
section#credits li { width: 100%; text-align:center; margin: 0px 0px 20px 0px; }

footer { min-width:1024px;}

}