body {
	font-family: Helvetica, sans-serif;
	background-image:url(/images/munich-allianz-arena-120289_alt_fade.jpeg);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100% auto;
	background-color:#000;
}

@media only screen and (max-width:800px){
	body{
		margin:3px;
	}
}
@media only screen and (min-width:800px){
	body{
		margin:8px;
	}
}

header{
	float:left;
	clear:left;
	display:grid;
	grid-gap:10px;
	margin:0 0 10px 0;
	color:#fff;
	width:100%;
}

body>section{
	float:left;
	clear:left;
	width:100%;
	box-sizing:border-box;
}

#signupTournament,
#signedin {
	width:100%;
	float:left;
	clear:left;
	margin:0;
}

#signin{
	width:100%;
	float:left;
	clear:left;
	margin:0;
}

input[name="Signout"]{
	position:absolute !important;
	top:-23px !important;
	right:17px !important;
	width:70px !important;
	height:30px !important;
}

#signup>fieldset,
#signupTournament>fieldset,
#signin>fieldset,
#roomForm>fieldset{
	float:left;
	clear:left;
	margin:0;
	padding:17px;
	width:100%;
	box-shadow:0 0 10px #000;
	background:rgba(0, 0, 0, 0.65);
	box-sizing:border-box;
	height:100%;
	border:1px solid #999;
	position:relative;
}

header>form>fieldset>legend{
	font-size:1.2rem;
	text-shadow:0 0 3px #000;
	color:#fff;
}

@media only screen and (min-width:900px){
	header{
		grid-template-columns: repeat(2, 1fr);
	}

	#signup,
	#signupTournament,
	#signedin {
		grid-row:1;
		grid-column:1;
	}

	#signin{
		grid-row:1;
		grid-column:2;
	}
}

@media only screen and (max-width:900px){
	header{
		grid-template-columns: repeat(1, 1fr);
	}

	#signup,
	#signupTournament,
	#signedin {

		grid-row:1;
		grid-column:1;
	}

	#signin{
		grid-row:2;
		grid-column:1;
	}
}

#signin>fieldset>div{
	float:left;
	clear:left;
	padding:0;
	margin:0;
	width:100%;
}

#signin>fieldset>ul>li{
	float:left;
	width:100%;
}

#signin>ul>li>input,
#signin>ul>li>label{
	float:left;
	clear:left;
}

#signup>fieldset>div>input[type="submit"],
#signupTournament>fieldset>div>input[type="submit"],
#signin>fieldset>div>input[type="submit"],
#roomForm>fieldset>div>input[type="submit"]{
	width:100%;
	box-sizing:border-box;
	height:40px;
	margin:17px 0 0;
}

input[type="submit"]{
	box-sizing: border-box;
	background: #5581b2;
	color: #fff;
	border:1px solid #000;
	appearance: none;
	-webkit-appearance:none;
	width:100%;
}

input[type="text"],
input[type="password"]{
	height: 40px;
	line-height:40px;
	width:100%;
	box-sizing: border-box;
	background: #fff;
	color: #000;
	border:1px solid #000;
}


#savePredictions{
	position: fixed;
	bottom: 20px;
	right: 20px;
	line-height: 51px;
	height:51px;
	box-sizing:border-box;
	z-index:1;
	box-shadow: 0 0 10px #000;
}

#savePredictions>input[type="submit"]{
	float:left;
	clear:left;
	width:100%;
	height:100%;
}

#savePredictions>input[type="submit"]:hover{
	float:left;
	clear:left;
	width:100%;
	height:100%;
	outline:1px solid #ccc;
}

#savePredictions>input[type="submit"].changed{
	animation-iteration-count: infinite;
	animation-duration: 1.2s;
	animation-name: pulse;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 3px #000;
	}

	10% {
		box-shadow: 0 0 5px #020;
	}

	20% {
		box-shadow: 0 0 7px #040;
	}

	30% {
		box-shadow: 0 0 9px #060;
	}

	40% {
		box-shadow: 0 0 11px #080;
	}

	50% {
		box-shadow: 0 0 13px #0a0;
	}

	60% {
		box-shadow: 0 0 11px #080;
	}

	70% {
		box-shadow: 0 0 9px #060;
	}

	80% {
		box-shadow: 0 0 7px #040;
	}
	
	90% {
		box-shadow: 0 0 5px #020;
	}

	100% {
		box-shadow: 0 0 3px #000;
	}
}


/* Sign in / Sign out */

@media only screen and (min-width:900px){

	#signupTournament>fieldset>div,
	#roomForm>fieldset>div{
		display:grid;
		grid-gap:5px;
		grid-template-columns: repeat(3, 1fr);
		margin:0;
		box-sizing:border-box;
	}
	#signupTournament>fieldset>div>label{
		display:none;
	}
	#signupTournament>fieldset>div>input[name="username"]{
		grid-column:1;
		grid-row:1;
		width:100%;
	}
	#signupTournament>fieldset>div>input[name="password"]{
		grid-column:2;
		grid-row:1;
		width:100%;
	}
	#signupTournament>fieldset>div>input[name="rooms"]{
		grid-column:1/3;
		grid-row:2;
		width:100%;
	}
	#signupTournament>fieldset>div>input[type="submit"]{
			grid-column:3;
			grid-row:1/3;
	}

	#signup>fieldset>div,
	#signin>fieldset>div{
		display:grid;
		grid-gap: 5px;
		grid-template-columns: repeat(3, 1fr);
	}

	#signup>fieldset>div>input[name="username"],
	#signin>fieldset>div>input[name="username"]{
		grid-column:1/3;
		grid-row:1;
	}
	#signup>fieldset>div>input[name="password"],
	#signin>fieldset>div>input[name="password"]{
		grid-column:1/3;
		grid-row:2;
	}
	#signup>fieldset>div>input[type="submit"],
	#signin>fieldset>div>input[type="submit"]{
		grid-column:3;
		grid-row:1/3;
	}
	#signup>fieldset>div>label,
	#signin>fieldset>div>label{
		display:none;
	}
	#signup>fieldset>div>input[type="submit"],
	#signupTournament>fieldset>div>input[type="submit"],
	#signin>fieldset>div>input[type="submit"]{
		height:auto;
		margin:0;
	}

	#roomForm>fieldset>div>p{
		grid-row:1;
		grid-column:1/4;
	}
	#roomForm>fieldset>div>label{
		grid-row:2;
		grid-column:1/3;
	}

	#roomForm>fieldset>div>input[name="rooms"]{
		grid-column:1/3;
		grid-row:3;
		width:100%;
	}
	#roomForm>fieldset>div>input[type="submit"]{
		grid-column:3;
		grid-row:3;
		margin:0;
		height:auto;
	}

	.feedback{
		grid-column:1/3;
		grid-row:4;
		float:left;
		clear:left;
		color:#f66;
		text-decoration:underline;
		max-width:100%;
		word-wrap:break-word;
	}
}

footer{
	float:left;
	clear:left;
	margin:25px 0 0;
	background: rgba(0, 0, 0, 0.85);
	/*border:1px solid #fff;*/
	box-shadow: 0 0 10px #000;
	box-sizing:border-box;
	width:100%;
	padding:10px;
	color:#fff;
}

footer>div>ul{
	float:left;
	clear:left;
	list-style:square;
	padding:0 0 0 15px;
	margin:0;
}

footer>div>p{
float:left;
}

#contact>.icon{
	float:left;
	clear:left;
	font-size:3rem;
	margin:0 5px 0 0;
}
#contact>p{
	float:left;
	width:75%;
}

.footerHeading{
	float:left;
	clear:left;
	width:100%;
	font-size:2rem;
	border-bottom: 1px solid #fff;
	margin:10px 0 5px;
}

#attribution>ul{
	float:left;
	clear:left;
	list-style:none;
	margin:0;
	padding:0;
}
#attribution>ul>li{
	margin:10px 0;
	float:left;
	clear:left;
}
#attribution>ul>li>a,
#attribution>ul>li>a>img{
	float:left;
	clear:left;
}

#attribution>ul>li>p{
	float:left;
	clear:left;
	margin:10px 0;
}

#about>p{
clear:left;
}

@media only screen and (min-width:1800px){
	#about,
	#contact,
	#attribution,
	#tournamentLogos{
		float:left;
		width:25%;
		padding:15px;
		box-sizing:border-box;
	}
}
@media only screen and (min-width:900px) and (max-width:1800px){
	#about,
	#contact,
	#attribution,
	#tournamentLogos{
		float:left;
		width:50%;
		padding:15px;
		box-sizing:border-box;
	}
}
@media only screen and (max-width:900px){
	#about,
	#contact,
	#attribution,
	#tournamentLogos{
		float:left;
		clear:left;
		width:100%;
		box-sizing:border-box;
	}
}

.flash{
	float:left;
	clear:left;
	width:100%;
	margin:15px 0;
	padding:5px 0;
	text-align:center;
	color:#fff;
}

.alert{
	background:rgba(50, 0, 0, 0.75);
	border:1px solid #f00;
}

.info{
	background:rgba(0, 50, 0, 0.75);
	border:1px solid #0f0;
}

#amnesty{
	float:left;
	clear:left;
	width:100%;
	border-top:1px solid #ccc;
	display:grid;
	grid-template-columns: 50% 50%;
	align-items: center;
	padding:10px 0;
}
#amnesty>img{
	grid-row:1;
	grid-column:1;
	display: block;
	max-width: 100%;
	height: auto;
}
#amnesty>a{
	text-decoration:none;
	grid-row:1;
	grid-column:2;
}
#amnesty>a>blockquote{
	padding:5%;
	box-sizing:border-box;
	color:#fff;
	margin:0;
}
#amnesty>a>blockquote:before {
	color:#fff;
	content: open-quote;
	font-size:4em;
	line-height: 0.1em;
	margin-right:10px;
	vertical-align:-0.4em;
}

#amnesty>a>blockquote:after {
	color:#fff;
	content:close-quote;
	font-size:4em;
	line-height:0.1em;
	margin-left:10px;
	vertical-align:-0.5em;
}

a {
	color:#77a3d4;
	text-decoration:underline;
}