/* icomoon (http://icomoon.io/) icon webfont */
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-yf73jm');
	src:url('fonts/icomoon.eot?#iefix-yf73jm') format('embedded-opentype'),
		url('fonts/icomoon.woff?-yf73jm') format('woff'),
		url('fonts/icomoon.ttf?-yf73jm') format('truetype'),
		url('fonts/icomoon.svg?-yf73jm#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="fp-icon-"], [class*=" fp-icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fp-icon-cog:before {
	content: "\e600";
}
.fp-icon-pie:before {
	content: "\e606";
}
.fp-icon-stats:before {
	content: "\e605";
}
.fp-icon-bars:before {
	content: "\e607";
}
.fp-icon-remove:before {
	content: "\e608";
}
.fp-icon-menu:before {
	content: "\e60a";
}
.fp-icon-info:before {
	content: "\e609";
}
.fp-icon-cancel-circle:before {
	content: "\e603";
}
.fp-icon-checkmark-circle:before {
	content: "\e604";
}
.fp-icon-close:before {
	content: "\e601";
}
.fp-icon-checkmark:before {
	content: "\e602";
}
/* end icon webfont */

.widget div.football-pool-widget form { margin: 0; padding: 0; }
.widget div.football-pool-widget label, .widget div.football-pool-widget p { font-size: 80%; }
.widget div.football-pool-widget h3 { 
	width: auto; 
	margin: 0 0 .25em; 
	padding: 0 .5em; 
	color: #fff; 
	background-color: #ccc; 
	font-weight: bold; 
	font-size: .8em; 
	line-height: 1.8em; 
	vertical-align: middle; 
}
.widget div.football-pool-widget h3 a, 
.widget div.football-pool-widget h3 a:link, 
.widget div.football-pool-widget h3 a:visited, 
.widget div.football-pool-widget h3 a:hover, 
.widget div.football-pool-widget h3 a:active { color: #fff; }
.widget div.football-pool-widget div { padding: 0 0 .25em; }
.widget div.football-pool-widget p, .widget div.football-pool-widget div div { padding: 0 .5em; }
.widget div.football-pool-widget input.text, .widget input.textarea { width: 80%; }
.widget div.football-pool-widget { padding: 0; margin: 0; }

#sidebar ul .widget_footballpoolnextpredictionwidget p a { display: inline; }

td.flag img { border: 1px solid #ccc; min-width: 10px; }
td.numeric { text-align: right; }

.matchinfo { border-spacing: 0 5px; border-collapse: separate; }
table.matchinfo td a { text-decoration: none; }
table.matchinfo td a:hover { text-decoration: underline; }
table.matchinfo { border: none; width: 100%; max-width: 700px; }
table.matchinfo td { padding: 0 .2em .1em 0; border: none; font-size: .9em; }
table.matchinfo .matchtype { color: #fff; background-color: #000; font-weight: bold; font-size: .8em; line-height: 1.8em; vertical-align: middle; text-align: center; }
table.matchinfo .matchdate { color: #fff; background-color: #ccc; font-weight: bold; font-size: .8em; line-height: 1.8em; vertical-align: middle; }
table.matchinfo td.flag { text-align: center; }
table.matchinfo td.time { text-align: left; font-size: .7em; padding-left: 1em; }
table.matchinfo td.home { text-align: right; padding-right: .5em; }
table.matchinfo td.away { text-align: left; padding-left: .5em; }
table.matchinfo td.score { text-align: center; font-weight: bold; padding: 0 .5em; }
table.matchinfo .fp-joker { background-image: url(images/site/ball_over.jpg); background-repeat: no-repeat; cursor: pointer; min-width: 30px; min-height: 20px; display: inline-block; }
table.matchinfo .fp-nojoker { background-image: url(images/site/ball.jpg); background-repeat: no-repeat; cursor: pointer; min-width: 30px; min-height: 20px; display: inline-block; }
table.matchinfo .closed .fp-joker, table.matchinfo .closed .fp-nojoker,
table.matchinfo .fp-joker.readonly, table.matchinfo .fp-nojoker.readonly { cursor: default; }
table.matchinfo tr.matchstats td { vertical-align: middle; }
table.matchinfo span.matchstats img { min-width: 16px; }
table.matchinfo td.matchstats { text-align: right; }
table.matchinfo th { color: #fff; background-color: #000; font-weight: bold; font-size: .8em; line-height: 1.8em; vertical-align: middle; }
table.matchinfo th.username { max-width: 200px; }
table.matchinfo tr.linked-question td { padding: 5px 0 5px; }
table.matchinfo tr.linked-question td div { border: none; }

table.statistics  { width: 100%; max-width: 500px; }
table.statistics th { color: #fff; background-color: #000; font-weight: bold; font-size: .8em; line-height: 1.8em; vertical-align: middle; }
table.statistics td { border-bottom: 1px solid #ccc; }
table.statistics td.result { text-align: center; }

table.prediction-table-questions a, .match-table a { text-decoration: none; }
table.prediction-table-questions a:hover, .match-table a:hover { text-decoration: underline; }

.nopointer { cursor: default!important; }

input.prediction { width: 3em; text-align: right; }
div.buttonblock { margin: 1em 0 3em; }

img.team-photo.thumb { width: 150px; height: 79px; border: 0; cursor: pointer; }
img.stadium-photo.thumb.stadium-list,
img.team-photo.thumb.team-list { float: left; margin: 0 5px 10px 0; }
img.team-photo { width: 301px; height: 159px; border: 0; cursor: pointer; }
img.stadium-photo { border: 0; }
img.stadium-photo.thumb { width: 150px; border: 0; }
ol.team-list, ol.stadium-list { list-style-type: none; margin: 0; padding: 0; }
ol.team-list li, ol.stadium-list li { clear: both; margin-bottom: 5px; }

/* group ranking */
div.ranking { border: 1px solid #000; padding: .25em; margin: 0 2em 2em 0; width: 100%; max-width: 300px; float: left; }
div.ranking h2 { margin: .2em 0; padding: 0; }
table.ranking { border: none; border-collapse: collapse; width: 100%; }
table.ranking th { text-align: center; font-weight: normal; font-style: italic; border-bottom: 1px solid #000; }
table.ranking td { padding: .1em .5em; }

.group-ranking th.wins, .group-ranking td.wins, .group-ranking th.draws, .group-ranking td.draws, .group-ranking th.losses, .group-ranking td.losses { background-color: #ddd; }
.group-ranking th.plays, .group-ranking td.plays, .group-ranking th.points, .group-ranking td.points { background-color: #ccc; }
.group-ranking th.team, .group-ranking td.team, .group-ranking th.goals, .group-ranking td.goals { background-color: #e1dfdf; }
.group-ranking td.goals, .group-ranking th.goals { font-size: .6em; padding: .1em .2em; }
.group-ranking th.team, .group-ranking th.points, .group-ranking td.points, .group-ranking th.plays, .group-ranking td.plays { font-weight: bolder; }
.group-ranking td.team, .group-ranking th.team { width: 45%; }

table.ranking td { font-size: 80%; }
table.ranking td.plays, table.ranking td.points { font-size: 90%; }

/* group ranking in a widget */
li.widget div.football-pool-widget div.ranking { float: none; border: none; width: auto; padding-left: .5em; }
li.widget div.football-pool-widget div.ranking h2 { display: none; }
li.widget div.football-pool-widget div.ranking th { font-size: 80%; }

/* group ranking as shortcode */
div.entry div.ranking.shortcode { float: none; }

table.pool-ranking { border-collapse: collapse; }
table.pool-ranking td { padding-left: .5em; }
table.pool-ranking tr.currentuser { background-color: #e1dfdf; } 
#rankingsbox table.pool-ranking tr.currentuser { background-color: #transparent; } 
table.pool-ranking tr.currentuser td, 
table.pool-ranking tr.currentuser td a, 
table.pool-ranking tr.currentuser td a:visited { color: #000; font-weight: bolder; }
table.pool-ranking td.score  { text-align:right; padding-right: 1em; }
table.pool-ranking { font-size: 100%; }
table.pool-ranking.ranking-widget { font-size: 75%; }
table.pool-ranking.ranking-page { width: 100%; max-width: 500px; }

table.ranking-shortcode { width: 100%; max-width: 300px; }

table.gamesbox td { padding: 1px 2px; font-size: 75%; }
table.gamesbox td.score { white-space: nowrap; }

table.teaminfo { margin-top: 10px; }
table.teaminfo, table.teaminfo td, table.teaminfo tr { border: none; }
table.teaminfo tr th { vertical-align: top; text-align: left; padding: 0 2em 1em 0; }
table.teaminfo tr td { padding: 0 0 1em 0; }

.errormessage { color: #f00; margin: .5em 0; padding: 0; }
.error { color: #f00; border: 1px solid #000; padding: .5em; }

/* div.chart { border: 1px solid #000; } */
div.chart-wrapper { position: relative; padding-bottom: 80%; }
div.chart-inner { position: absolute; width: 100%; height: 100%; }
div.chart { margin-bottom: 2em; }
/*
div.chart.right { float: right; padding-left: 10px; }
div.chart.left { float: left; padding-right: 20px; }
div.chart.stats-pie { float: left; margin-right: 20px; }
*/

div.statistics { float: right; }
a.statistics { 
	background-image: url(images/site/stats.png); 
	display: block; 
	width: 62px; 
	height: 62px; 
	text-indent: -2000px; 
}
a.statistics:hover { background-position: 0 62px; }

label { cursor: pointer; }

span.username { color: #000; font-weight: bolder; }

div.bonus { border-bottom: 1px solid #000; }
div.bonus, p.bonus, input.bonus { width: 100%; max-width: 670px; }
.match-table div.bonus, .match-table p.bonus, .match-table input.bonus { width: 100%; }
div.bonus.userview { margin-top: 1em; padding-bottom: .5em; }
div.bonus.userview p { margin: 0; padding: 0; }
div.bonus.userview span { color: #000; }
div.bonus.userview p.question { font-weight: bolder; }
p.bonus { background-color: #eee; padding: 2px; font-weight: bolder; }
p.bonus.image { background: none; }
span.bonus { color: #aaa; font-size: 75%;  }
span.bonus.points { float: right; }
span.bonus.reminder { color: #ccc; font-weight: bolder; }
span.extra { font-size: 80%; color: #666; }
div.bonus ul.multi-select { list-style: none; margin: 0; padding: 0; }
div.bonus p, div.bonus li { clear: both; }
div.bonus ul.multi-select label { display: block; margin-bottom: 10px; }
div.bonus ul.multi-select input[type=radio], 
div.bonus ul.multi-select input[type=checkbox] { float: left; display: block; height: 13px; width: 15px; }
div.bonus ul.multi-select span { 
	margin-left: 20px;
	padding-left: 10px;
	display: block;
	width: 100%;
	max-width: 650px; /* standard column max-width = 670px */
}
/* handle the multi-select option with user input */
div.bonus ul.multi-select label + span { width: 100%; max-width: 650px; float: left; }
div.bonus ul.multi-select label + span input[type=text] { width: 100%; }
div.bonus ul.multi-select label.user-input span { width: 100%; max-width: 650px; }

/* example 4 column layout for question with ID 1
#q1 ul.multi-select li { float: left; width: 25%; }
*/

.widget_footballpoollastgameswidget div.football-pool-widget p,
.widget_footballpool-rankingwidget div.football-pool-widget p { padding: 2px 3px; margin: 0; font-size: 75%; }

div.football-pool-widget .widget.button { 
	border: 1px solid #e1dfdf; 
	padding: 2px 10px; 
	margin: 0 5px; 
	float: right; 
	text-decoration: none; 
	-moz-border-radius: 5px;
	border-radius: 5px; 
	background-color: #ccc;
}
div.football-pool-widget .widget.button:hover {
	background-color: #e1dfdf;
	color: #ccc;
}

.widget_footballpoolshoutboxwidget div.wrapper { 
	height: 240px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0 0 1em 0;
}
.widget_footballpoolshoutboxwidget textarea { width: 100%; }
.widget_footballpoolshoutboxwidget a.name { font-weight: bolder; }
.widget_footballpoolshoutboxwidget span.date { font-size: 70%; float: right; }
.widget_footballpoolshoutboxwidget span.notice { font-size: 75%; }
.widget_footballpoolshoutboxwidget p { font-size: 80%; margin: 0; }
.widget_footballpoolshoutboxwidget hr {
	margin: 3px 3px 5px;
	border: none 0; 
	border-top: 1px dashed #ccc; /*the border*/ 
	height: 1px; /*whatever the total width of the border-top and border-bottom equal*/
}

.widget_footballpoolnextpredictionwidget div.football-pool-widget p {
	margin-bottom: 5px;
}
ul li.widget_footballpoolnextpredictionwidget div.football-pool-widget a {
	display: inline;
}

.widget div.football-pool-widget div.ranking { padding: 0 .5em; margin: 0; } 

/* avatars */
.pool-ranking .avatar { 
	padding: 0 .5em 0 0; vertical-align: middle; 
}
#sidebar .widget div.football-pool-widget .pool-ranking .avatar,
.widget div.football-pool-widget .pool-ranking .avatar {
	padding: 0 .5em 0 0; vertical-align: middle; 
}

.prediction-table-questions td .correct { color: #12c312; }
.prediction-table-questions td .wrong { color: #ff2133; }
.prediction-table-questions.statistics { width: 390px; }

p.bonus .no-answer:after { 
	content: '...';
	font-weight: normal;
}

td.num-predictions, td.ranking.score { text-align: right; }

span.charts-settings-switch { float: right; cursor: pointer; font-size: 80%; }
span.charts-settings-text:before { content: "settings"; font-size: 75%; }

/* userselector */
#fp-charts-settings { display:none }
.user-selector {  }
.user-selector ol { 
	margin: 0; padding: 0;
	display: block;
	overflow: auto;
	width: 100%;
	height: 150px;
	border: none;
	list-style: none;
}
.user-selector ol li.selected { background-color: #e1dfdf; }

.ranking-select-block { margin-bottom: 1em; }

/* media queries

	breakpoints:
		phone		( max-width: 767px )
		tablet		( min-width: 768px ) and ( max-width: 979px )
		desktop		( min-width: 980px )
*/
@media ( max-width: 767px ) {
	/* match and prediction table */
	.matchinfo { border-spacing: 0 20px; border-collapse: separate; }
	.matchinfo td.home, .matchinfo td.away { font-size: 125%; padding: 0 2px; }
	.matchinfo td.time, .matchinfo td.flag { display: none; }
	.matchinfo td.matchtype { font-size: 140%; }
	/* widgets */
	.widget div.football-pool-widget table.pool-ranking.ranking-widget { font-size: 100%; }
	.widget div.football-pool-widget p, .widget div.football-pool-widget td { font-size: 120%; }
	.widget div.football-pool-widget .wrapper.fp-shoutbox p { font-size: 130%; }
	.widget div.football-pool-widget .wrapper.next-prediction-countdown { font-size: 130%; }
	.widget div.football-pool-widget span.notice { font-size: 100%; }
}
@media ( min-width: 768px ) and ( max-width: 979px ) {

}
@media ( min-width: 980px ) {

}
@media ( min-width: 768px ) {
	.pie-chart.stats-page { max-width: 50%; }
}
