body, html {
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
font-family:'cabinregular',Arial;
background:#ffffff;
font-size:14px;
color:#000000;
-webkit-text-size-adjust: none;
}

a:hover, a:active, a:focus {
outline:0;
}

a {
text-decoration:underline;
color:#000000;
}

b, strong {
font-weight:normal;
font-family:'cabinbold'
}

i, em {
font-style:normal;
font-family:'cabinitalic'
}

h1,h2,h3,h4,h5,p {
margin:0;
font-weight:normal;
}

h1 {
font-family:'expresswayregular';
font-size:32px;
text-transform:uppercase;
color:#fff;
line-height:0.75;
text-shadow: 1px 1px 5px rgba(150,150,150,0.5);
}

h1 span {
font-size:24px;
}

h1.club-name {
float:left;
}

h2 {
font-family:'chunkfiveroman';
color:#000;
font-size:25px;
margin:0 0 20px 0;
}

h2 .subtext {
display:block;
font-size:12px;
font-family:'cabinregular';
}

p {
margin-bottom:12px;
}

.clear {
clear:both;
}

#holder {
width:100%;
min-height:100%;
height:100%;
display:table;
position:relative;
}

#half-bg {
position:absolute;
width:50%;
height:100%;
top:0;
left:0;
background:#ECECEC;
}

.limit-width {
max-width:1200px;
min-width:260px;
padding:0;
margin:0 auto;
position:relative;
}

.standard-padding {
padding:30px;
}

#header .standard-padding {
padding:40px 30px;
}

#header {
width:100%;
z-index:1;
position:relative;
background:#cccccc;
}

#main {
width:100%;
z-index:2;
display:table-row;
height:100%;
}

#main-centred {
display: table;
height:100%;
}

#sections-holder {
display:table-row;
height:100%;
}

#left-holder {
display:table-cell;
background:#ececec;
width:260px;
min-width:260px;
height:100%;
height:100%;
}

#right-holder {
display:table-cell;
background:#ffffff;
height:100%;
box-sizing: border-box;
font-size:1.3em;
width:100%;
}

.expand-btn {
display:none;
background:#000;
color:#fff;
text-decoration:none;
text-align:center;
padding:20px;
cursor:pointer;
}

.expand-btn.open::after {
content:'\0000a0\0000a0\25B2';
}

.expand-btn.closed::after {
content:'\0000a0\0000a0\25BC';
}

.form-label {
float:left;
clear:both;
padding:7px 0;
margin-bottom:10px;
}

.text-input {
background:#f6f6f6;
background:#f6f6f6;
border:1px solid #8c8c8c;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding:6px 8px;
font-size:12px;
font-family:'cabinregular';
line-height:1.2;
color:#333;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
width:100%;
box-sizing:border-box;
height:34px;
}

.text-input:focus {
background:#ffffff;
}

#fp-link {
font-size:11px;
font-family:cabinregular;
text-decoration:none;
}


.remember-cb {
float:left;
cursor:pointer;
}

.remember-cb .checkbox {
width:20px;
height:20px;
background-position:20px 20px;
background-repeat:no-repeat;
background-image:url("../images/remember-tick.png");
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
display:inline-block;
margin-right:7px;
margin-top:4px;
border:1px solid #8c8c8c;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}

.remember-cb span {
padding-top:6px;
display:inline-block;
vertical-align:top;
color:#565656;
}

.btn {
border:0;
padding:6px 12px;
margin:0;
float:right;
font-size:inherit;
cursor:pointer;
color:#ffffff;
font-family:'cabinregular';
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background:#2c2c2c;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
text-decoration: none;
}

.btn:hover {
background:#6b6b6b;
}

.btn.disabled {
  opacity:0.7;
  cursor: wait;
}

#si-holder {
position:relative;
width:258px !important;
height:48px;
border:1px solid #8c8c8c;
float:right
}

#si-image {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

#si-refresh {
display:block;
position:absolute;
bottom:3px;
right:3px;
border:0;
width:16px;
height:16px;
}

.header-left {
float:left;
width:75%;
box-sizing:border-box;
}

.header-right {
float:right;
width:25%;
text-align:right;
box-sizing:border-box;
}


.header-logo {
height:130px;
left:50%;
position:absolute;
top:15px;
z-index:1;
}

.left-form .text-input.large {
height:110px;
}

.mobile-season {
display:none;
font-size:15px;
margin-top:7px;
}

.logout {
position:absolute;
right:30px;
bottom:-38px;
height:20px;
display:block;
font-size:13px;
padding:9px 16px;
border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
z-index:10;
}

.message  {
padding:12px;
color:#fff;
margin-bottom:15px;
}

.message.error {
background:#840101;
}

.message.success {
background:#044F0A;
}

.message.info {
background:#0776B7;
}

.inner-left-holder {
width:260px;
}

#predictions-holder .fixture {
margin-bottom:15px;
font-size:14px;
}

#predictions-holder .fixture .status {
width:20px;
position:absolute;
right:0;
top:0;
height:100%;
}

#predictions-holder .fixture .status.predicted {
background:url('../images/tick.png') no-repeat center center #31b02b;
}


#predictions-holder .fixture .status.not-predicted {
background:url('../images/cross.png') no-repeat center center #c61818;
}

#predictions-holder .fixture .details {
border:1px solid #9c9c9c;
padding:15px 35px 15px 15px;
background:#fff;
position:relative;
cursor:pointer;
}

#predictions-holder .fixture .details .opponent {
font-size:14px;
}

#predictions-holder .fixture .details .countdown {
font-size:12px;
color:#000;
}

#predictions-holder .fixture .details .competition {
font-size:11px;
color:#000;
}


#predictions-holder .fixture .prediction {
border-right:1px solid #9c9c9c;
border-left:1px solid #9c9c9c;
border-bottom:1px solid #9c9c9c;
padding:15px;
background:#fff;
display:none;
}

.input-holder {
margin-bottom:10px;
position:relative;
}

.input-holder span {
position:absolute;
top:8px;
left:0;
}

#edit-fixture {
max-width:380px;
margin: 0 auto;
padding:20px;
}

#edit-fixture .input-holder {
width:200px;
float:left;
}

#edit-fixture span.label {
position:relative;
width:130px;
display:block;
float:left;
margin-right:10px;
clear:left;
padding-top:8px;
}

.text-input:disabled {
opacity:0.5;
cursor:default;
}



.input-holder.stacked {
padding-left:0 !important;
}

.input-holder.stacked span {
width:100% !important;
position:relative;
top:0;
padding-bottom:5px;
display:block;
}

#predictions-holder .input-holder {
padding-left:80px;
}

#predictions-holder .input-holder span {
width:80px;
}

#login-register-holder .input-holder {
padding-left:100px;
}

#login-register-holder .input-holder span {
width:100px;
}

.input select {
width:100%;
}

#forgotten-password {
margin-bottom:30px;
display:none;
}

#register {
margin-top:30px;
}

.expandable {
border-radius:8px;
overflow: hidden;
margin-top:25px;
}

.expandable h2 {
font-size:18px;
display:block;
padding:15px 20px;
margin:0;
cursor:pointer;
}

.expandable h2 .triangle {
float:right;
width:16px;
margin-top:4px;
}

.expandable h3 {
font-family:cabinbold;
font-size:inherit;
margin:15px 0;
}

.expandable h3 span {
font-family:cabinregular;
}

.expandable .expanded {
padding:20px;
background:#f5f5f5;
font-size:0.9em;
display:none;
}

.expandable .expanded.open {
display:block;
}

.expandable li span {
color:#222;
padding-left:5px;
display:block;
}

.expanded ul {
margin-bottom:0;
margin-top:15px;
}


table {
border-spacing:0;
width:100%;
border-collapse:collapse;
}

table td {
border-bottom:1px solid #cecece;
}

table th {
background:#DDDDDD;
color:#000;
font-family:'cabinregular';
border-top:1px solid #cecece;
}

table th,td {
padding:6px;
}

.odd td {
background:#ffffff;
}

div.odd {
background:#ffffff;
}

.main-table {
font-family:cabinregular;
font-size:14px;
}

.main-table td.em, .main-table td.em a {
color: #d40101;
text-decoration: none;

}

.main-table  td, th {
border-right:1px solid #CECECE;
text-align:center;
padding:6px;
}

.main-table tr td:first-child, tr th:first-child {
border-left:1px solid #CECECE;
}

#mobile-match-details  {
display:none;
}

.main-table th.lmTH, #mobile-match-details {
border-top:1px solid #CECECE;
border-bottom:1px solid #CECECE;
color:#d40101;
background:#cecece;
}

.lmTH span, #mobile-match-details span {
font-family:cabinregular;
font-weight:normal;
color:#666;
display:inline-block;
margin-left:5px;
}

td.empty, th.empty {
width:0px;
background:transparent !important;
border-bottom:0;
}

.main-table td {
vertical-align:middle;
}

.movement {
font-size:11px;
line-height:1;
}

.movement.down, .movement.down a {
color:#CE6666;
}

.movement.same, .movement.same a {
color:#617FCC;
}

.movement.up, .movement.up a {
color:#72CC61;
}

.movement .movement-image {
display:inline-block;
margin-right:3px;
vertical-align: top;
width:11px;
height:11px;
background-repeat:no-repeat;
background-position:center center;
}

.movement.down .movement-image {
background-image:url('../images/down.png');
}

.movement.same .movement-image {
background-image:url('../images/same.png');
}

.movement.up .movement-image {
background-image:url('../images/up.png');
}


td.fit-content, th.fit-content {
width:1px;
white-space: nowrap;
}

.top-right-btn {
float:right;
font-size:14px;
text-decoration:none;
margin-bottom:10px;
}

#toggle-last-match-btn {
display:none;
}

.stats-user-select {
float:right;
width:200px;
height:60px;
padding-left:50px;
}

#add-users-btn-holder {
position: relative;
height:1px;
}

#compare-btn {
font-size:12px;
top:-15px;
float:none;
position:absolute;
right:0;
}

.btn.chart-user-option, .btn.chart-user-option:hover {
background:#cccccc;
color:#666666;
margin:0 0 5px 5px;
font-size:0.9em;
float:none;
display: inline-block;
}

/*.btn.chart-user-option.on id localized*/

#main-stats{
margin-top:15px;
text-align: center;
}

#compare-checkboxes {
padding:10px;
background:#e2e2e2;
margin-bottom:15px;
text-align:left;
}

.stat-holder {
display:inline-block;
text-align:center;
font-family:"cabinbold";
}

.stat-holder {
width:140px;
margin:10px;
display:inline-block;
vertical-align:top;
background:#EFEFEF;
padding:20px;
}

.stat-holder.wide {
width:232px;
}

.stat-holder.circle .circle-holder {
width:100px;
height:100px;
display:table;
font-family:"chunkfiveroman";
margin:10px auto 0 auto;
border-radius:50%;
font-size:2em;
}

.stat-holder .circle-holder span {
display:table-cell;
vertical-align: middle;
}

.stat-holder.circle .circle-holder span .deactivated {
font-size:12px;
font-family:"cabinregular";
}

.stat-holder .extend-info a {
display:block;
font-family:"cabinregular";
}

.stat-holder .extend-info {
padding:10px;
margin-top:6px;
position:relative;
}

.stat-holder.circle .extend-info.with-link:before {
position:absolute;
display:block;
width:2px;
height:6px;
left:49.5%;
top:-6px;
background:inherit;
content:"";
}

.stat-holder .extend-info-add {
font-family:"cabinregular";
padding:10px;
margin-top:1px;
}

.highcharts-container {
width:100% !important;
height:100% !important;
}

.selectric-user-select {
width:200px;
-ms-transform:scale(1.2);
transform:scale(1.2);
-ms-transform-origin:right top;
transform-origin:right top;
}

#admin-nav a {
display:block;
margin-bottom:12px;
padding:15px;
font-size:15px;
text-decoration:none;
background:#AFAFAF;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}

.admin-table th {
text-align: left;
background:#666666;
color:#ffffff;
}

.admin-table td {
text-align: left;
}

.hover-table td {
padding:0;
vertical-align: middle;
overflow:hidden;
}

.hover-table a.row-link, .hover-table span.row-link {
/* margin/padding solution from http://stackoverflow.com/a/15801081/3596962 */
margin:-100px;
padding:106px;
display:block;
font-family:"cabinregular";
font-weight: normal;
vertical-align: middle;
box-sizing: border-box;
text-decoration: none;
}

.admin-table a.row-link {
color:#000000;
}

.admin-table .even td, .admin-table .odd td {
background:none;
}

.admin-table .odd a.row-link {
background:#ffffff;
}

.admin-table .even a.row-link {
background:#eeeeee;
}

.admin-table .win a.row-link,
.admin-table .lose a.row-link,
.admin-table .draw a.row-link {
color:#ffffff;
text-align:center;
}

.admin-table .win a.row-link {
background:#298441 !important;;
}

.admin-table .lose a.row-link {
background:#E21D1D !important;;
}

.admin-table .draw a.row-link {
background:#FF981C !important;;
}

#cookie-disclaimer {
width:100%;
background:rgba(0,0,0,0.8);
color:#fff;
position:fixed;
bottom:0;
left:0;
font-size:15px;
line-height:1.5;
z-index:10;
vertical-align:bottom;
max-height:100%;
}

#cookie-disclaimer .standard-padding {
padding-top:20px;
padding-bottom:20px;
}

#cookie-message {
display:table;
width:100%;
}

#cookie-disclaimer #intro-text {
display:table-cell;
vertical-align:middle;
}

#cookie-disclaimer a {
color:#fff;
}

#cookie-policy {
background:#000000;
padding:20px;
margin-bottom:20px;
display:none;
overflow:auto;
}

#cookie-disclaimer #accept-cookie-policy {
padding-left:20px;
display:table-cell;
vertical-align:middle;
text-align:right;
}

#cookie-disclaimer  #accept-cookie-policy a {
display:inline-block;
text-decoration:none;
float:none;
padding:10px;
min-width:100px;
}

#full-page-overlay {
width:100%;
background:rgba(0,0,0,0.8);
display:none;
position:absolute;
z-index:100;
}

#overlay-body {
margin:3%;
padding-bottom:60px;
position:relative;
background:#fff;
}

#overlay-bottom {
height:40px;
padding:10px;
background:#ccc;
position:absolute;
bottom:0;
}

/* LOADING ANIMATION */

@-webkit-keyframes loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-moz-keyframes loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes loading-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@font-face {
  font-family: 'lightbox-icons';
  src: url("../js/lity/fonts/lightbox-icons.eot?55356177");
  src: url("../js/lity/fonts/lightbox-icons.eot?55356177#iefix") format("embedded-opentype"), url("../js/lity/fonts/lightbox-icons.woff?55356177") format("woff"), url("../js/lity/fonts/lightbox-icons.ttf?55356177") format("truetype"), url("../js/lity/fonts/lightbox-icons.svg?55356177#lightcase") format("svg");
  font-weight: normal;
  font-style: normal;
}

#loading-icon {
  position: fixed;
  z-index: 9999;
  width: 1.123em;
  height: auto;
  font-size: 38px;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  position: fixed;
  z-index: 2001;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  opacity: 1;
  font-size: 32px;
  text-shadow: 0 0 15px #fff;
  -moz-transform-origin: 50% 53%;
  -webkit-animation: loading-spin 0.5s infinite linear;
  -moz-animation: loading-spin 0.5s infinite linear;
  -o-animation: loading-spin 0.5s infinite linear;
  animation: loading-spin 0.5s infinite linear;
}

#loading-icon, #loading-icon:focus {
  text-decoration: none;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color, opacity, ease-in-out 0.25s;
  -moz-transition: color, opacity, ease-in-out 0.25s;
  -o-transition: color, opacity, ease-in-out 0.25s;
  transition: color, opacity, ease-in-out 0.25s;
}

#loading-icon > span {
  display: inline-block;
  text-indent: -9999px;
}

#loading-icon:before {
  font-family: 'lightbox-icons', sans-serif;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  content: '\e805';
}

.lity-container {
width:100%;
height:100%;
padding:40px;
}

/* desktop */

#recaptcha-holder {
width:260px;
overflow:hidden;
display:block;
float:right;
}

#recaptcha {
  transform:scale(0.86);
  transform-origin:0 0;
}

/* needs to be specified here as can be changed inline by jquery */
@media only screen  and (min-width : 1007px) and (max-width: 1060px) {
	#left-holder {
    max-width:200px;
    width:200px;
	}
}

@media only screen  and (min-width : 1007px) {
	#left-holder {
	display:table-cell !important;
	}
}

@media only screen  and (max-width : 1006px) {

	#half-bg {
	display:none;
	}

	.header-logo {
	height:70px !important;
	float:left;
	background-size:contain;
	margin-left:0 !important;
	margin-right:20px;
	position:static;
	}

  /*
	h1.club-name {
	margin-bottom:30px;
	padding-bottom:0;
	}*/

	#header.home {
	padding-top:40px;
	padding-bottom:40px;
	}

	.mobile-season {
	display:block;
	}

	.header-right {
	display:none;
	}

	.header-left {
	width:100%;
	}

	#header {
	height:auto;
	}

	#header.home {
	height:50px;
	}

  .standard-padding, #header .standard-padding {
  padding:20px;
  }

	.header-logo, h1 {
	padding-bottom:10px;
	}

  #header .standard-padding {
  padding-bottom:10px;
  /*accounting for the h1 padding needed above*/
  }

	body {
	background:#ffffff;
	}

	div {
	height: auto;
	}

	#left-holder, #right-holder {
	display:block;
	width:auto;
	}

	#left-holder {
	display:none;
	}

	.inner-left-holder {
	width:auto;
	}

	#main-centred {
	height: auto;
	background:#fff;
	width:100%;
	}

	#main, #header {
	position:static;
	}

	.btn {
	width:auto;
	clear:both;
	float:right;
	}

	.form-label {
	width: 40% !important;
	}

	.text-input {
	font-size:12px;
	}

	.expand-btn {
	display:block;
	}

	.logout {
	border-top-left-radius:10px;
	-webkit-border-top-left-radius:10px;
	border-top-right-radius:10px;
	-webkit-border-top-right-radius:10px;
	bottom:20px !important;
	right:20px !important;
	z-index:4;
	background:rgba(255,255,255,0.75) !important;
	border:0 !important
	}


}

@media only screen  and (max-width : 767px) {
  .main-table {
  font-size:12px;
  }

  .lity-container {
  padding:50px 10px 10px 10px;
  }
}

/* needs to be specified here as can be changed inline by jquery */
@media only screen  and (min-width : 561px) {
	.mobile-show {
	display:none !important;
	}
}

@media only screen  and (max-width : 560px) {
	.logout {
	position:static;
	margin:0 0 20px 20px;
	clear:both;
	float:left;
	}

	#mobile-match-details {
	display:block;
	padding:6px;

	}

	.mobile-hide, .mobile-show{
	display:none;
	}

	.mobile-no-padding {
	padding:0;
	border-left:1px solid #cecece !important;
	}

	#mobile-push-out {
	width:100% !important;
	}

	.mobile-show {
	/*display:table-row;*/
	border-left:1px solid #cecece !important;
	}

	#toggle-last-match-btn {
	display:block;
	}

  .main-table {
  font-size:14px;
  }

}


@media only screen  and (max-width : 480px) {
	h1 {
	font-size:24px;
	line-height:1;
	clear:left;
	}

	h1 span {
	font-size:20px;
	}

	h1 span.mobile-season {
	margin-top:3px;
	}


	/*#left-holder {
	min-width:230px;
	}*/

	#header.home {
	overflow:hidden;
	}
}

@media only screen  and (max-width : 360px) {
}