@charset "UTF-8";
/* CSS Document */
* {
	border: 0px;
	padding: 0px;
	margin: 0px;	
}
body {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	background-color: #555;
}
#main-container {
	width: 2000px;
	text-align: center;
	margin: 220px auto 0px auto;
	/*font-size: 1.8em;*/
}
table#legend {
	width: 100%;
	width: 98%;
	font-size: .9em;
	margin: 0px auto 20px auto;	
}
table#legend h2 {
	color: #CCC;	
}
table#legend td {
	padding: 10px 6px;
	font-size: .9em;
}
/* Class added to the round 3 results table to limit the legend, tables, and buttons to 1000px wide
since there are only 2 tables left. Tables go off center if wider than 1000px; */
.r3 {
	max-width: 1000px;
	margin: auto;
}
div.floater {
	float: left;
	max-width: 480px;
	text-align: center;
	margin: 0px 10px;	
}
/*For final round table standings only as there is only one single table*/
div.single-floater {
	float: none;
	max-width: 800px;
	text-align: center;
	margin: 0px auto;	
}
a {
	color: #000;
}
a:hover {
	color: #dc7200;
}
.sm-crest {width: 60px;height: 60px;}
.lg-crest {width: 100px;height: 100px;}
td.sweep {background: #ffec93 url(../images/sweep.gif) no-repeat right 10px;}
.red {background-color: #fe6363;}
td.blue {background: #93c8ff url(../images/battle.gif) no-repeat right 12px;}
.green {background-color: #47ae2f;}
.lighter-grey {background-color: #fff;}
.light-grey {background-color: #f2f2f2;}

/*Override the hover states from main.css*/
.green:hover {background-color: #47ae2f;}
/*Override the hover states from main.css*/
.red:hover {background-color: #fe6363;}
/*Override the hover states from main.css*/
h2 {color: #222;}

table {
	width: 480px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	border: none;
	border-collapse:collapse;
}
table.series-matchups, table.player-table {
	background-color:#fafafa;
}
/*For final round table standings only as there is only one single table*/
table.single-matchup, table.single-series-picks {
	width: 100%;
}
table.series-matchups tr, table.player-table tr {
    border-top: 1px solid #ccc;
    line-height: 2.4em;
}
table.series-matchups tr:first-of-type {
    border: 1px;
	background-color: #00afb1;
}
table.series-matchups tr:first-of-type td {
    padding: 10px 0px;
}
/* color wins numbers red */
table.series-matchups tr:nth-of-type(5) h2 {
	background-color: #fafafa;
	color: red;
}
table.series-picks {
	background-color:#fafafa;
	margin-bottom: 30px;
}
th {	
	color:#CCC;
	padding: 8px 0px 8px 8px;
	text-transform: uppercase;
	/*font-size: 1.4em;*/
}
tr {
	border: 0px;
	padding: 0px;
	margin: 0px;
}
td {
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	font-size: 1.2em;
}
tr.separator {
	color: #333;
	background-color: #00afb1;
}
th.screen-name, th.pick, th.in, th.num-games, th.points {
	background-color: #222;
	padding: 10px 0px;
}
th.screen-name {
	background-color: #222;
	padding: 10px 0px;	
}
th.names {
	background-color: #69dadb;
	padding: 10px 0px;
	color: #222;	
}
tr.lighter-grey th.names {
	background-color: #98e6e7;
	padding: 10px 0px;
	color: #222;	
}
td.reverse {
	background-color: #eee;
	color: #222;	
}
th.pick {
}
th.in, th.points {
	width: 10%;	
}
tr.blank-tr {
}
/*.dotted-td {
	background: transparent url(../images/dot.png) repeat-x 0px 2px;
	opacity: .1;
	height: 12px;
	line-height:8px;
	font-size: 0px;
	background-color: #FFF;
}*/
/*This is actually the line between each person*/
.dotted-td {
	height: 1px;
	background-color: #222;
}
table.series-picks th.names, table.series-picks td.logos, table.series-picks td.points, table.series-picks td.games {
	border-right: 1px solid #ccc;
}
table.series-picks td.player-points, table.series-picks td.games {
	border-left: 1px solid #ccc;	
}
/* This id the 2 up break point. The main container never shows 3 score cards wide Only 4 or 2 or 1 */
@media screen and (max-width: 2030px) {
#main-container {
	width: 1000px;
}
}
@media screen and (max-width: 1030px) {
#main-container {
	width: 94%;
}
table {
	width: 100%;
}
div.floater, div.single-floater {
	float: none;
	width: 60%;
	max-width: 94%;
	margin: 0px auto;	
}
div.single-floater {
	width: 80%;	
}

}
@media screen and (max-width: 700px) {
td {	
	}
th {
}
div.floater, div.single-floater {
	width: 96%;
}
td.sweep {background: #ffec93 url(../images/sweep.gif) no-repeat right 10px;}
td.blue {background: #93c8ff url(../images/battle.gif) no-repeat right 12px;}
}
@media screen and (max-width: 520px) {
div.floater, div.single-floater {
	width: 100%;
	margin: 0px;
	max-width: 100%;
}
}