@import url("https://www.hammerfall.net/hf-cdn/css/navigation.css");
@import url("https://www.hammerfall.net/hf-cdn/css/status.css");
@supports (display: grid)
{
	@media screen
	{
		*
		{
			margin: 0px;
		}
		:root {
			--backgroundColor: #030609;
			--backgroundImage: url("../img/background.png");
			/*background-image: url("https://www.hammerfall.net/hf-cdn/img/background.png");*/
			--Color_CrumbDivider: #ffffff;
		}
		.grid
		{
			display: grid;
		}
		.grid-song
		{
			display: grid;
		}
		.grid-video
		{
			display: grid;
		}
		.grid-calendar
		{
			display: grid;
		}
		.grid-celebrate
		{
			display: grid;
		}
		.grid-news
		{
			display: grid;
		}
		.grid-contact
		{
			display: grid;
		}
		.grid-footer
		{
			display: grid;
		}
	}
	@media screen and (max-width: 960px)
	{
		:root {

		}
	}
	@media screen and (min-width: 960px)
	{
		:root {
			
		}
		.grid
		{
			grid-template-columns: auto 640px 320px auto;
			grid-template-rows: auto auto auto auto;
			grid-template-areas: 
				"artwork logotype logotype ."
				"navigation navigation navigation navigation"
				". full full ."
				". content sidebar ."
				"footer footer footer footer"
			;
		}
		#full
		{
			grid-area: full;
		}
		#content
		{
			grid-area: content;
		}
		#sidebar
		{
			grid-area: sidebar;
		}
		#logotype{grid-area: logotype;}
		#footer{grid-area: footer;}
		.navigation{grid-area: navigation;}
	}
}
body
{
	background-color: var(--backgroundColor);
	background-image: url("../img/background.png");
	background-position: top center;
	background-repeat: repeat;
	background-attachment: fixed;

}
h2{color: #999999; border: 1px solid rgba(255,255,255,0.25); padding: 4px; text-align: center; background-color: rgba(0,0,0,0.75); border-bottom: 0px;}
img{width: 100%; vertical-align: bottom;}
a{color: #ff9900; text-decoration: none;}
a:hover{color: #ff7744;}
.active a{color: #ffffff; cursor: default;}
.grid div div{color: #ffffff;}
.connecting {background: yellow;}
.online {background: green;}
.offline {background: red;}
#status
{
	opacity: 0.0;
	font: bold 1em sans-serif;
	color: #ffffff;
	padding: 0.5em;
}
#birthday{background-color: #000000; text-align: center; padding: 10px; color: #ffffff;}
#ajax{background-color: #ff00ff;}

#module-news{padding: 1px 0px 0px 1px;}
#module-news{display: grid;}
#module-news div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-news div img{border: 1px solid rgba(255,255,255,0.25);}
#module-news div span{margin: 12px 0px 0px 0px;}
#module-song .grid-news img{grid-area: icon;}
#module-song .grid-news p.title {grid-area: title;}
.grid-news
{
	grid-template-rows: auto auto;
	grid-template-areas: 
		"title"
		"image"
	;
}

#module-offer{padding: 1px 0px 0px 1px;}
#module-offer{display: grid;}
#module-offer div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-offer div:hover{background-color: rgba(255,255,255,0.25);}
#module-offer div img{border: 1px solid rgba(255,255,255,0.25);}
#module-offer div p{margin: 12px 0px 0px 0px;}

#module-band{padding: 1px 0px 0px 1px;}
#module-band{display: grid;}
#module-band div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-band div img{border: 1px solid rgba(255,255,255,0.25);}
#module-band div p{margin: 12px 0px 0px 0px;}

#module-contact{padding: 1px 0px 0px 1px;}
#module-contact{display: grid;}
#module-contact div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-contact div img{border: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.25);}
#module-contact div p{margin: 0px 0px 0px 0px;}
#module-contact div h3{margin: 6px 0px 0px 0px;}

#module-discography{padding: 1px 0px 0px 1px;}
#module-discography{display: grid;}
#module-discography div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-discography div img{border: 1px solid rgba(255,255,255,0.25);}
#module-discography div p{margin: 12px 0px 0px 0px;}

#module-merch{padding: 1px 0px 0px 1px;}
#module-merch{display: grid;}
#module-merch div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-merch div img{border: 1px solid rgba(255,255,255,0.25);}
#module-merch div p{margin: 12px 0px 0px 0px;}

#module-song{padding: 1px 0px 0px 1px;}
#module-song{display: grid;}
#module-song div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(30,215,96,0.9);}
#module-song a:hover div{background-color: rgba(30,215,96,1.0);}
#module-song div p{margin: 0px 0px 0px 8px; align-self: center;}
#module-song .grid-song img{grid-area: icon;}
#module-song .grid-song p.title {grid-area: title;}
.grid-song
{
	grid-template-columns: 32px auto;
	grid-template-areas: 
		"icon title"
	;
}

#module-video{padding: 1px 0px 0px 1px;}
#module-video{display: grid;}
#module-video div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,0,0,0.9);}
#module-video a:hover{background-color: rgba(255,0,0,1.0);}
#module-video div p{margin: 0px 0px 0px 8px; align-self: center;}
#module-video .grid-video img{grid-area: icon;}
#module-video .grid-video p.title {grid-area: title;}
.grid-video
{
	grid-template-columns: 32px auto;
	grid-template-areas: 
		"icon title"
	;
}

#module-celebrate{padding: 1px 0px 0px 1px;}
#module-celebrate{display: grid;}
#module-celebrate div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-celebrate div p{margin: 0px 0px 0px 8px; align-self: center; text-align: center;}
#module-celebrate .grid-celebrate p.title {grid-area: title;}
.grid-celebrate
{
	grid-template-columns: auto;
	grid-template-areas: 
		"title"
	;
}

#module-calendar{padding: 1px 0px 0px 1px;}
#module-calendar{display: grid;}
#module-calendar div{border: 1px solid rgba(255,255,255,0.25); padding: 12px; background-color: rgba(255,255,255,0.125);}
#module-calendar div p{margin: 0px 0px 0px 8px; align-self: center;}
#module-calendar .grid-calendar img{grid-area: icon;}
#module-calendar .grid-calendar p.location {grid-area: location;}
#module-calendar .grid-calendar p.date {grid-area: date;}
#module-calendar .grid-calendar p.postponed {text-decoration: line-through;}
#module-calendar .grid-calendar p.link {grid-area: link; margin-top: 8px;}
#module-calendar .grid-calendar .grid_link {margin-right: 8px; border: 1px solid; padding: 4px;}
#module-calendar .grid-calendar .grid_link_soldout {color: #ff0000;}
#module-calendar .grid-calendar .grid_link_vip {color: #88ff00;}
#module-calendar .grid-calendar .grid_link_vip:hover {color: #22aa00;}
.grid-calendar
{
	grid-template-columns: 32px auto;
	grid-template-rows: auto auto;
	grid-template-areas: 
		"icon date"
		"icon location"
		"icon link"
	;
}
.ellipsis{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#footer
{
	margin-top: 8px;
	padding: 8px;
	text-align: center;
	color: #999999;
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: rgba(255,255,255,0.25);
	background-color: rgba(0,0,0,0.75);
}