/* Catch-all definitions */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }

/* Main element definitions */
a:link { color: #FAFAFA; }
a:visited { color: #F5F5F5; }
a:hover, a:active { color: #F0F0F0; }
body { background-color: #000060; color: #FFFFFF; line-height: 1.6em; font-size: 0.8em; }
body, input, select, textarea { font-family: Tahoma, Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.55em; font-weight: normal; }
h2, h3, h4, h5, h6 { margin-top: 1em; }
h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
img { border: 0px; vertical-align: middle; }
p { margin-bottom: 0.5em; }
ol, ul { margin-left: 1.2em; padding-left: 1.2em; }

.root { width: 960px; margin: 0 auto; padding: 10px 0; }
#header {
	background: #000060;
	background: linear-gradient(to bottom, #000060 0%,#000030 100%);
}
#header h1 { font-size: 1.5em; line-height: 24px; margin: 0; }
#header h1 img { width: 24px; vertical-align: bottom; margin-right: 8px; }
#header select { margin: 0 0 0 8px; }
#main { background: #000020; }
#footer {
	background: #000060;
	background: linear-gradient(to bottom, #000030 0%,#000060 100%);
	font-size: 0.8em;
}

.align-right { text-align: right; }
.align-center { text-align: center; }
.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; }
.float-left { float: left; }
.float-right { float: right; }
.note { margin: 1em 2em 0 1em; font-size: .85em; }

.goalkeeper { background-color: #338800; }
.firstteam { background-color: #8888FF; }
.benched { background-color: #0000FF; }

ul.browse { list-style-type: none; margin: 0; padding: 0; font-size: 0.75em; }
ul.browse li { display: inline; }
ul.browse li a { display: block; padding: 0px; text-align: center; text-decoration: none; margin-bottom: 1px; }

ul.browse.large { font-size: 1em; }
ul.browse.large li a { padding: 5px; float: left; width: 33%; margin: 0 1px 1px 0; }

.team { background-color: #AA4400; border-top: 1px solid #FF7711; border-left: 1px solid #FF7711; border-right: 1px solid #662211; border-bottom: 1px solid #662211; }
.league { background-color: #662211; }
.team.selected { background: #338800; border-top: 1px solid #45b700; border-left: 1px solid #45b700; border-right: 1px solid #2e7a00; border-bottom: 1px solid #2e7a00; } 
.back { background-color: #0088FF; }

table.players { border-collapse: collapse; width: 100%; font-size: 0.75em; }
table.players td, table.players th { border: 1px solid transparent; border-bottom: 1px solid #000020; padding: 1px 2px; }

.skill_class0 { background-color: #000000; }
.skill_class1 { background-color: #FF0000; }
.skill_class2 { background-color: #ff6a00; }
.skill_class3 { background-color: #ffb400; color: #000000; }
.skill_class4 { background-color: #ffe100; color: #000000; }
.skill_class5 { background-color: #f6fb00; color: #000000; }
.skill_class6 { background-color: #a8d100; }
.skill_class7 { background-color: #338800; }

.message { border: 1px solid #338800; background: #c6e7b2; padding: 10px; color: #215900; font-size: .9em; }

/*-- forms --*/
form { font-size: 1em; }

form fieldset {
	background: rgba(255,255,255,.1);
	border: 0;
	padding: 10px;
	margin-bottom: 10px;
}

form fieldset.submit {
	background: transparent;
}

form div.error { padding: 5px 10px; text-align: center; border: 1px solid red; background-color: #FFEEEE; margin-bottom: 10px; }
form fieldset legend { font-size: 1.1em; color: #FFFFFF; }
form label { display: block; float: left; width: 120px; margin: 5px 0 0; text-align: right; }
	form label.inline, form .checkboxes label { display: inline; float: none; margin: 0px; text-align: left; }
form input, form textarea, form select { width: auto; margin: 5px 0 0 10px; font-size: 1em; padding: 6px; border-radius: 4px; border: 0; }
textarea { overflow: auto; }
form ul.checkboxes { margin-top: .3em; margin-left: 120px; padding: 0; list-style: none; }
form ul.checkboxes.inline li { display: inline-block; margin-right: 10px; }
	form ul.checkboxes.inline li:last-of-type { margin-right: 0; }
form ul.checkboxes.nationality { height: 160px; overflow-y: scroll; }
form ul.checkboxes.nationality li { width: 18%; margin-right: 0; }
form select.skill { width: 64px; }
input[type="submit"] {
	background: #0088FF;
	font-weight: bold;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
}
	
/* 160px in next declaration is the sum of the label width and input left padding */
form small { display: block; margin: 0 0 5px 130px; padding: 1px 3px; font-size: 0.8em; }
form .required { font-weight: bold; }
form br { clear: left; }


/*-- responsivity --*/
.desktop { display: block !important; }
span.desktop { display: inline !important; }
table.desktop { display: table !important; }
col.desktop { display: table-column !important; }
th.desktop, td.desktop { display: table-cell !important; }
tr.desktop { display: table-row !important; }
.mobile, span.mobile, table.mobile, col.mobile, th.mobile, td.mobile, tr.mobile { display: none !important; }

/*-- columns --*/
.columns { margin: 0 -.6em; }
.columns.tight { margin: 0 -.3em; }
.columns:after { clear: both; content: ''; display: block; }

.c10, .c15, .c16, .c20, .c25, .c30, .c33, .c40, .c50, .c60, .c66, .c75, .c70, .c80, .c83, .c90, .c100 { float: left; position: relative; min-height: 1px;}
.c10 { width: 10%; }
.c15 { width: 15%; }
.c16 { width: 16.66%; }
.c20 { width: 20%; }
.c25 { width: 25%; }
.c30 { width: 30%; }
.c33 { width: 33.33%; }
.c40 { width: 40%; }
.c50 { width: 50%; }
.c60 { width: 60%; }
.c66 { width: 66.66%; }
.c70 { width: 70%; }
.c75 { width: 75%; }
.c80 { width: 80%; }
.c83 { width: 83.33%; }
.c90 { width: 90%; }
.c100 { width: 100%; }

.columns > .c10, .columns > .c15, .columns > .c16, .columns > .c20, .columns > .c25, .columns > .c30, .columns > .c33, .columns > .c40, .columns > .c50, .columns > .c60, .columns > .c66, .columns > .c70, .columns > .c75, .columns > .c80, .columns > .c83, .columns > .c90,.columns > .c100 { padding: 0 .6em; }
.columns.tight > .c10, .columns.tight > .c15, .columns.tight > .c20, .columns.tight > .c25, .columns.tight > .c30, .columns.tight > .c33, .columns.tight > .c40, .columns.tight > .c50, .columns.tight > .c60, .columns.tight > .c66, .columns.tight > .c70, .columns.tight > .c75, .columns.tight > .c80, .columns.tight > .c83, .columns.tight > .c90, .columns.tight > .c100 { padding: 0 .3em; }
.c10.float-right, .c15.float-right, .c20.float-right, .c25.float-right, .c30.float-right, .c33.float-right, .c40.float-right, .c50.float-right, .c60.float-right, .c66.float-right, .c70.float-right, .c75.float-right, .c80.float-right, .c90.float-right, .c100.float-right { float: right; }

/* mobile */
@media only screen and (max-width: 480px) {
	
	body { font-size: .8em; -webkit-text-size-adjust: 100%; }

	.mobile { display: block !important; }
	span.mobile { display: inline !important; }
	table.mobile { display: table !important; }
	col.mobile { display: table-column !important; }
	th.mobile, td.mobile { display: table-cell !important; }
	tr.mobile { display: table-row !important; }
	.desktop, span.desktop, table.desktop, col.desktop, th.desktop, td.desktop, tr.desktop { display: none !important; }

	.columns, 
	.columns.tight { 
		margin: 0 -.3em; 
	}
	
	.cm10, .cm15, .cm16, .cm20, .cm30, .cm33, .cm40, .cm50, .cm60, .cm66, .cm70, .cm80, .cm83, .cm90, .cm100 { 
		float: left; 
		min-height: 1px; 
	}
	.cm10 { width: 10%; }
	.cm15 { width: 15%; }
	.cm16 { width: 16.66%; }
	.cm20 { width: 20%; }
	.cm25 { width: 25%; }
	.cm30 { width: 30%; }
	.cm33 { width: 33.33%; }
	.cm40 { width: 40%; }
	.cm50 { width: 50%; }
	.cm60 { width: 60%; }
	.cm66 { width: 66.66%; }
	.cm70 { width: 70%; }
	.cm75 { width: 75%; }
	.cm80 { width: 80%; }
	.cm80 { width: 80%; }
	.cm83 { width: 83.33%; }
	.cm100 { width: 100%; }
	
	.columns > .cm10, .columns > .cm15, .columns > .cm16, .columns > .cm20, .columns > .cm30, .columns > .cm33, .columns > .cm40, .columns > .cm50, .columns > .cm60, .columns > .cm66, .columns > .cm70, .columns > .cm80, .columns > .cm83, .columns > .cm90, .columns > .cm100 {
		padding: 0 .3em; 
	}
	
	/* desktop columns respond */
	.columns > .c10, .columns > .c15, .columns > .c16, .columns > .c20, .columns > .c25, .columns > .c30, .columns > .c33, .columns > .c40, .columns > .c50, .columns > .c60, .columns > .c66, .columns > .c70, .columns > .c75, .columns > .c80, .columns > .c83, .columns > .c90, .columns > .c100, .columns.tight > .c10, .columns.tight > .c16, .columns.tight > .c20, .columns.tight > .c25, .columns.tight > .c30, .columns.tight > .c33, .columns.tight > .c40, .columns.tight > .c50, .columns.tight > .c60, .columns.tight > .c66, .columns.tight > .c70, .columns.tight > .c75, .columns.tight > .c80, .columns.tight > .c83, .columns.tight > .c90, .columns.tight > .c100 { 
		padding: 0 .3em; 
	}
	
	/* mid columns respond */
	.columns > .cr10, .columns > .cr15, .columns > .cr16, .columns > .cr20, .columns > .cr25, .columns > .cr30, .columns > .cr33, .columns > .cr40, .columns > .cr50, .columns > .cr60, .columns > .cr66, .columns > .cr70, .columns > .cr75, .columns > .cr80, .columns > .cr83, .columns > .cr90, .columns > .cr100, .columns.tight > .cr10, .columns.tight > .cr16, .columns.tight > .cr20, .columns.tight > .cr25, .columns.tight > .cr30, .columns.tight > .cr33, .columns.tight > .cr40, .columns.tight > .cr50, .columns.tight > .cr60, .columns.tight > .cr66, .columns.tight > .cr70, .columns.tight > .cr75, .columns.tight > .cr80, .columns.tight > .cr83, .columns.tight > .cr90, .columns.tight > .cr100 { 
		padding: 0 .3em; 
	}

	.root { width: 100%; padding: 2%; }
	ul.browse.large li a { float: none; width: 100%; margin: 0 0 1px 0; }

	form label { float: none; width: auto; margin: 5px 0 5px; text-align: left; }
	form ul.checkboxes { margin-left: 0; }

	table.players td, table.players th { line-height: 1.6em; }

}


@media only screen and (min-width: 480px) and (max-width: 800px) {
	
	.columns { 
		margin: 0 -.2em; 
	}
	
	.cr10, .cr16, .cr20, .cr30, .cr33, .cr40, .cr50, .cr60, .cr66, .cr70, .cr80, .cr83, .cr90, .cr100 { 
		float: left; 
		min-height: 1px; 
	}
	.cr10 { width: 10%; }
	.cr15 { width: 15%; }
	.cr16 { width: 16.66%; }
	.cr20 { width: 20%; }
	.cr25 { width: 25%; }
	.cr30 { width: 30%; }
	.cr33 { width: 33.33%; }
	.cr40 { width: 40%; }
	.cr50 { width: 50%; }
	.cr60 { width: 60%; }
	.cr66 { width: 66.66%; }
	.cr70 { width: 70%; }
	.cr75 { width: 75%; }
	.cr80 { width: 80%; }
	.cr83 { width: 83.33%; }
	.cr90 { width: 90%; }
	.cr100 { width: 100%; }
	
	.columns > .cr10, .columns > .cr15, .columns > .cr16, .columns > .cr20, .columns > .cr30, .columns > .cr33, .columns > .cr40, .columns > .cr50, .columns > .cr60, .columns > .cr66, .columns > .cr70, .columns > .cr80, .columns > .cr83, .columns > .cr90, .columns > .cr100 {
		padding: 0 .2em; 
	}
	
	/* desktop columns respond */
	.columns > .c10, .columns > .c15, .columns > .c16, .columns > .c20, .columns > .c25, .columns > .c30, .columns > .c33, .columns > .c40, .columns > .c50, .columns > .c60, .columns > .c66, .columns > .c70, .columns > .c75, .columns > .c80, .columns > .c83, .columns > .c90, .columns > .c100, .columns.tight > .c10, .columns.tight > .c16, .columns.tight > .c20, .columns.tight > .c25, .columns.tight > .c30, .columns.tight > .c33, .columns.tight > .c40, .columns.tight > .c50, .columns.tight > .c60, .columns.tight > .c66, .columns.tight > .c70, .columns.tight > .c75, .columns.tight > .c80, .columns.tight > .c83, .columns.tight > .c90, .columns.tight > .c100 { 
		padding: 0 .2em; 
	}
	
}