* {
    box-sizing: border-box;
}

html {
    height:100%;
      background-image: url("../Pics/bg.png");
     }

/* body */
.main {
  
    margin:0;
    font-family:'Montserrat',Verdana;
    font-size:12pt;
    line-height:20pt;
    padding:0;
    height:100%;
}


#container {
    background-image: url("../Pics/skull.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    min-height:100%;
    position:relative;
}

#header {
    text-align:center;
}

#logo {
    border:0;
    padding:30px 0;
    width:90%;
}

#headerlinks {
    font-family:'Codystar';
    font-size:40pt;
    line-height:50pt;
    background-color:black;
    color:yellow;
    text-align:justify;
    text-align-last:justify;
    padding:0px 50px;
    text-transform:uppercase;
    font-weight:900;
}



#main_content {
    margin:20px;
    padding-bottom:100px;
}

#footer {
    height:100px;
    clear:both;
    bottom:0;
    width:100%;
}

#footerimg {
    width:100%;
}

.box {
    background: rgba(256,256,256,0.9); 
    width:68%;
    color:black;
    border:1px solid black;
    margin-top:30px;
    padding:20px;
}

.secondary_box {
    background: rgba(0,0,0,0.7); 
    width:30%;
    float:right;
    color:white;
    border:1px solid black;
    margin-top:0px;
    padding:20px;
}

.clearmobile {
    display:none;
}

.youtube {
    width:560px;
    height:315px;
}

  .maxwidth {
	max-width:400px;
  }
  

h1 {
    font-size:25pt;
    line-height:30pt;
    font-weight:bold;
    text-align:center;
}

.box h1 {
    color:white;
    text-shadow:0px 0px 20px black, 0px 0px 20px black,0px 0px 20px black, 0px 0px 50px yellow;
}

.secondary_box h1 {
    color:black;
    text-shadow:0px 0px 20px white, 0px 0px 20px white,0px 0px 20px white, 0px 0px 20px white, 0px 0px 50px yellow;
}

h2 {
    font-size:18pt;
    line-height:20pt;
    text-align:center;
    color:yellow;
    text-shadow:0px 0px 20px, 0px 0px 20px black, 0px 0px 20px black,0px 0px 20px black, 0px 0px 50px black;
}

h3 {
    font-size:18pt;
    line-height:20pt;
    text-align:center;
}

a, .toggle, .mtoggle {
    color:yellow;
    text-decoration:none;
    font-weight:bold;
}

.box a, .box .toggle {
    color:black;
    text-shadow:0px 0px 20px yellow, 0px 0px 20px yellow,0px 0px 20px yellow, 0px 0px 20px yellow;
}

.secondary_box a, .mtoggle {
    text-shadow:none;
    font-weight:normal;
}

.center {
    text-align:center;
}


#twittertext {
    font-size:11pt;
    margin-top:15px;
}

#twitterdate {
    font-size:9pt;
    text-align:right;
    border-bottom:1px dotted yellow;
}

#twitteroutro {
    padding-top:25px;
}

.newslist a, .songlist a, .reportlist a, .reportlist li, .secondary_box .vaultlist a {
    font-size:11pt;
}

ul.newslist, ul.songlist, ul.reportlist, .secondary_box ul.vaultlist {
    list-style-type: none;
    margin: 0;
    padding-left:10px;
}

ul.newslist .active, .newsyear .active, ul.songlist .active, .secondary_box ul.vaultlist .active{
    color:black;
    background-color:yellow;
    text-shadow:none;
    border-radius: 25px;
    padding: 2px 10px;
    margin-left:-10px;
}

ul.reportlist li.active {
    background-color:yellow;
    text-shadow:none;
    border-radius: 25px;
    padding: 2px 10px;
    margin-left:-10px;
    color:black;
}

ul.reportlist li.active a {
    color:black;
}

.tourdates {
    margin:0 auto;
}

.tourdate td {
    min-width: 120px;
    vertical-align: top;
}

.inline {
    display:inline;
}

.small {
    font-size:10pt;
}

.cancelled {
	text-decoration:line-through;
}

select {
	border: 1px solid black;
	background-color: white;
	color: #000;
	font-weight:bold;
	padding:5px;
}

input, textarea {
    color: black;
	background-color: yellow;
	border: 1px solid black;
	font-weight:bold;
	border-radius:25px;
	padding:5px 15px;
 }

ul.links {
        list-style-type: none;
}

.gbbox {
    padding:20px 20px 0 20px;
}

.alignright {
    text-align:right;
}

#commentbild {
    background-color:black;
}

.bild {
    float:left;
    height:220px;
    width:220px;
    text-align:center;
}

.clearphotos {
    clear:left;
}

img {
    max-width:100%;
}


@media all and (max-width: 630px) {
    .youtube {
	width:400px;
	height:225px;
    }
    .maxwidth {
	max-width:300px;
    }
}
@media all and (max-width: 475px) {
    .youtube {
	width:300px;
	height:169px;
    }
     .maxwidth {
	max-width:200px;
    }
    .tourdates td {
	display:block;
    }
    .tourdates .tourdate td:nth-of-type(1) {
	padding-top:20px;
    }
}
@media all and (max-width: 370px) {
    .youtube {
	width:200px;
	height:112px;
    }
     .maxwidth {
	max-width:150px;
    }
}

@media all and (min-width: 800px) {
    #secondary_mobile, #facebook_mobile {
	display:none;
    }
    .menutoggle {
	display:none;
    }
}

@media all and (max-width: 799px) {
    .secondary_box {
	float:left;
	width:100%;
	padding:0px 20px;
    }
    .clearmobile { 
   clear: both;
display:block;
}
    .box {
	 width:100%;
    }
    #secondary_browser, #facebook_browser {
	display:none;
    }
    .menutoggle {
	float:right;
	font-size:15pt;
	padding-right:10px;
    }
    #headerlinks {
	font-size:20pt;
	line-height:30pt;
    }
    h1 {
    font-size:15pt;
    line-height:20pt;
    }
    h2, h3 {
    font-size:12pt;
    line-height:15pt;
   }
   dd {margin-left:0px; }
}

@media all and (max-width: 499px) {
 #headerlinks {
	font-size:15pt;
	line-height:20pt;
 }
}