@charset "utf-8";
body{
	color: #ddd;
	font-family: 'Barlow', sans-serif;
}
a, a:visited{
	margin: 0;
	padding: 0;
	color: #ddd;
	text-decoration: none;
}
h1, h2, h3, h4{
	font-family: 'Aldrich', sans-serif;
	color: #eee;
}
	*, ::before, ::after { 
  box-sizing: margin-box; 
}
div.wrapper{
	margin: 0px auto 0 auto;
	padding: 0;
	max-width: 1400px;
}
div.wrapper div.head-container{
	margin: 0;
	padding: 0;
	width: 100%;	
	background-color: #023337;
  	border-top-left-radius: 12px;
  	border-top-right-radius: 12px;
	display: grid; 
	grid-gap: 0;
	grid-template-rows:122px; 
	grid-template-columns: 100%;
	grid-template-areas: "logo";
}
div.wrapper div.head-container div{
	marching: 0;
	padding: 58px 0 0 22px;	
	font-family: 'Aldrich', sans-serif;
}
div.wrapper div.head-container div.head-logo{
	padding-top:22px;
}
div.wrapper div.head-container div.head-logo img.logo-eva{
	margin: 0;
	padding: 0;
	width: 100px;
	height: 36px;
}
div.wrapper div.head-container div.head-sf, div.wrapper div.head-container div.head-tk, div.wrapper div.head-container div.head-bucks{
	display: none;
}

/* Zeilen und Spalten mit member-row und stats-box -> media queries siehe unten*/
div.wrapper div.member-row{
	margin: 14px 0 0 0;
	padding: 0;
  	border-top-right-radius: 18px;
  	border-bottom-right-radius: 18px;
	display: grid; 
	grid-gap: 0;
  	grid-template-rows: 98px 112px 108px; 
  	grid-template-columns:100%;
	grid-template-areas:
		"membername"
		"stats1"
		"stats2"
	;	
}
div.member-row div.member-name{
	font-size: 1.1em;
	padding: 25px 4px 0 12px;
	background: linear-gradient(45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 73%,rgba(0,0,0,0) 100%);
	grid-area: membername;
}
/*link auf name*/
div.member-row a:active{
	color: #fff;
}
div.member-row div.member-name img{
	margin: 0 4px 0 0;
	padding: 0;
	width: 10px;
	height: 13px;
	opacity: 0.6;
}
div.member-row.tk div.stats.tk{
	grid-area: stats1;
	padding-top: 4px;
}
div.member-row.tk div.stats.sf{
	grid-area: stats2;
}
div.member-row.sf div.stats.sf{
	padding-top: 4px;
}
div.member-row div.bucks{
	display: none;
}
div.member-row div.stats{
	display: grid; 
  	grid-template-rows:108px; 
  	grid-template-columns:20% 80%; 
}

/* keine Angaben im Header unter 1200px weil Stats untereinander gefaltet -> Fraktionen werden in den Stats jeweils über den Titeln angezeigt*/
div.wrapper div.member-row div.stats.sf div.titel:before{
	content:"StarForce";
	display: block;
	font-family: 'Aldrich', sans-serif;
	color: #aaa;
	text-shadow: none;
	font-weight: bold;
}
div.wrapper div.member-row div.stats.tk div.titel:before{
	content:"Teichkräfte";
	display: block;
	font-family: 'Aldrich', sans-serif;
	color: #aaa;
	text-shadow: none;
	font-weight: bold;
}


div.member-row div.stats div.badge{
	text-align: center;
}
div.member-row div.stats div.badge img{
	margin: 7px 0 0 0;
	padding: 0;
	width: 80px;
	height: 73px;
}
div.member-row div.stats div.titel{
	padding: 12px 4px 0 4px;
}
div.member-row.sf div.stats.sf div.titel, div.member-row.tk div.stats.tk div.titel{
	font-weight:bold;
	text-shadow: 0px 2px 7px rgba(0, 0, 0, 1);
}
div.member-row div.stats div.bucks{
	padding: 25px 24px 0 0;
	text-align: right;
}

/* member-row mit Rangstufe und Fraktion als Klasse zum Einfärben */
div.wrapper div.member-row.reservist{
	background-color: #024045;
}
div.wrapper div.member-row.mannschaft.sf{
	background-color: #046772;
}
div.wrapper div.member-row.unteroffizier.sf{
	background-color: #098f99;
}
div.wrapper div.member-row.offizier.sf{
	background-color: #0db9bf;
}
div.wrapper div.member-row.mannschaft.tk{
	background-color: #1f6b38;
}
div.wrapper div.member-row.unteroffizier.tk{
	background-color: #298c4a;
}
div.wrapper div.member-row.offizier.tk{
	background-color: #54a66f;
}

/* Footer */
div.wrapper div.footer-container{
	margin: 8px 0 0 0;
	padding: 0 0 12px 0;
	width: 100%;	
	background-color: #023337;
  	border-bottom-left-radius: 12px;
  	border-bottom-right-radius: 12px;
	font-size: 0.7em;
	text-align: center;
	color: #098f99;
	font-family: 'Aldrich', sans-serif;
}
div.wrapper div.footer-container img.logo-eva{
	margin: 44px 0 12px 0;
	padding: 0;
	width: 75px;
	height: 27px;
	opacity: 0.4;
}
@media only screen and (min-width: 720px) {
div.wrapper div.member-row{
	margin: 13px 0 0 0;
	padding: 0;
  	border-top-right-radius: 12px;
  	border-bottom-right-radius: 12px;
	display: grid; 
	grid-gap: 0;
  	grid-template-rows:98px 98px; 
  	grid-template-columns:24% 76%;
	grid-template-areas:
		"membername stats1"
		"membername stats2"
	;	
}
div.member-row div.member-name{
	border-right: 1px solid #023337;
}
div.member-row div.stats{
	display: grid; 
  	grid-template-rows:98px; 
  	grid-template-columns:19% 66% 15%; 
}
div.member-row div.stats{
  	grid-template-rows:98px; 
}
div.member-row div.bucks{
	display: block;
}
div.member-row.tk div.stats.tk{
	padding-top: 4px;
}
div.member-row.sf div.stats.sf{
	padding-top: 4px;
}
}
@media only screen and (min-width: 1200px) {
/* den HEADER mit Spaltenazeige gibt es nur hier in LG: */
div.wrapper div.head-container{
	margin: 12px 0 2px 0;
	padding: 0;
	width: 100%;	
	background-color: #023337;
  	border-top-left-radius: 12px;
  	border-top-right-radius: 12px;
	display: grid; 
	grid-gap: 0;
	grid-template-rows:122px; 
	grid-template-columns: 18% 30% 11% 30% 11%;
	grid-template-areas: "logo starforce badge teichkraft badge";
}
div.wrapper div.head-container div.head-sf, div.wrapper div.head-container div.head-tk, div.wrapper div.head-container div.head-bucks{
	display: block;
}
div.wrapper div.head-container div{
	marching: 0;
	padding: 58px 0 0 22px;	
	font-family: 'Aldrich', sans-serif;
	font-weight:bold;
	text-shadow: 0px 2px 7px rgba(0, 0, 0, 1);
	font-size: 2em;
}
div.wrapper div.head-container div.head-bucks{
	padding-left: 0;
	text-align: right;
}
div.wrapper div.head-container div.head-bucks img{
	margin: 18px 22px 0 0;
	padding: 0;
	width: 44px;
	height: 32px;
	opacity: 0.4;
}

/* das Grid von member-row wird in LG einzeilig: */
div.wrapper div.member-row{
	margin: 7px 0 0 0;
	display: grid; 
  	grid-template-rows:85px; 
  	grid-template-columns:18% 41% 41%;
	grid-gap: 0;
	grid-template-areas:
		"membername stats1 stats2"
	;
}

/*link auf row*/
a:hover div.member-row{
	border: 1px solid #ccc;
	margin: 6px 0 -1px 0;

}
/*link auf name*/
div.member-row a:hover{
	color: #fff;
}
div.member-row div.stats{
	display: grid; 
  	grid-template-rows:85px; 
  	grid-template-columns:20% 60% 20%; 
}
div.member-row div.stats.sf{
	border-right: 1px solid #023337;
}
div.member-row div.stats div.badge img{
	margin: 0;
	padding: 0;
	width: 92px;
	height: 85px;
}

div.member-row div.stats div.titel{
	padding: 25px 4px 0 4px;
}
/*zweizeilig wird oben ein padding eingeschoben, um Raum zu bekommen, das Padding wird hier aufgehoben:*/
div.member-row.tk div.stats.tk, div.member-row.sf div.stats.sf{
	padding-top: 0px;
}

/*die SF/TK - Angabe entfällt in LG, weil LG das im Header macht: */
div.wrapper div.member-row div.stats.sf div.titel:before{
	content: none;
}
div.wrapper div.member-row div.stats.tk div.titel:before{
	content: none;
}

/*die SF/TK - Sortierug in den Stats entfällt: */
div.member-row.tk div.stats.tk{
	grid-area: stats2;
}
div.member-row.tk div.stats.sf{
	grid-area: stats1;
}
}