/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #5b5b5b;
    
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

acronym {cursor: help;}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

a, a:link, a:visited {color: #4F8E4F; text-decoration: none;}
a:hover, a:focus, a:selected {color: #000;}


/* =======================================================
   
   ========================================================================== */
html { font-size: 62.5%; } 


body {
    font: 1.6rem/1.4 'Source Sans Pro', Helvetica Neue, Helvetica, Arial, sans-serif;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.2%; /* 16:9 */
  padding-top: 0px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h1 {
  font-size: 3.8rem;
  margin-top: 0.2em;
  font-weight: 200;
  text-transform: uppercase;
}

h2 {
  font-size: 3rem;
  font-weight: 200;
  
}

h3 {
  font-size: 2rem;
  font-weight: 200;
 
}

h4 {
	font-size: 1.65rem;
	font-weight: bold;
}

h4 + h4 {margin-top: -1rem;}

/* page subtitle */
h1 + h2 {
  font-size: 1.8rem;
  margin-left: 47px;
  margin-top: -3.4rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
h1 + h2 span {
		font-size: 0.7em;
		display: block;
	}
.page h1 + h2 {font-size: 2rem; margin-left: 0;}
.page li {margin-bottom: 1em;}
.faqPage p strong:first-child {display: block; margin-bottom: 7px;}
h2 + h5 {font-size: 1.4rem; margin-top: -2.6rem; font-weight: normal;}
/* ==============
    do not abbreviate the line below to margin: 30px 0 as it breaks the grid containers, if used on them as it overides their left-right margins;
   ============== */
.margin-30 {margin-top: 30px; margin-bottom: 30px;}




/* ==============
    MOBILE 1ST: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav a {
   color: #4F8E4F;
}

nav a:hover,
nav a:visited,
nav a:selected,
nav a:focus {color: #4F8E4F;}


nav a:hover {
    text-decoration: none;
}

/* ==============
    MOBILE 1ST: Main
   ============== */

 .wrapper {overflow: hidden; width: 100%; left: 0; top: 0; position: absolute;}

.topMenuWrapper {text-align: center;}


.topMenuWrapper nav {text-align: center; }

.topMenuWrapper .logo {margin: 10px 0 10px;}


/* ==============
    menu launch and display -- many of these require overiding in the 'non-mobile' section
   ============== */
.mainMenuWrapper {background-color: #545454; height: 36px; position: relative;}
.menuTrigger {display: block; float: left; color: white; height: 27px; line-height: 27px;  margin-left: 5px;
	padding: 0px 29px 0 0px; margin-top: 4px; background: #0B1620; border-radius: 4px; cursor: pointer; }

.menuTrigger span::before {content: "";
    position: absolute;
    left: 13px;
    display: block;
    width: 14px;
    top: 2px;
    height: 0;
    box-shadow: 0 10px 0 1px #fff,0 16px 0 1px #fff,0 22px 0 1px #fff;}

.mainMenuWrapper nav {width: 220px; height: 100%; position: fixed; left: -220px; top: 0; background: #545454;  box-sizing: border-box;
}

.container {-webkit-transition: -webkit-transform 500ms ease; transition: transform 500ms ease; }

.container::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
	transition: opacity 0.4s, transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.menuOpen .container {
 transform: translate3d(220px, 0, 0);
 -webkit-transform: translate3d(220px, 0, 0);
}

/* only show shadow for **open** menu... */
.menuOpen .mainMenuWrapper nav {box-shadow: 5px 0 8px rgba(0,0,0,0.5); padding: 10px; finoverflow: hidden;}

.menuOpen .mainMenuWrapper li {padding: 5px 10px; font-size: 1.2em; overflow: hidden; position: relative;}
.menuOpen .mainMenuWrapper li:hover {overflow: visible;}

.menuOpen li div {
	max-height: 0;
	transition: max-height 0.5s ease; 
	-webkit-transition: max-height 0.5s ease;
	position: relative;
	overflow: hidden;

}
.menuOpen li:hover div { top: 0; max-height: 500px;}


.menuOpen .mainMenuWrapper li li {font-size: 0.8em;}
.menuOpen .mainMenuWrapper span {color: white; cursor: pointer;}
.menuOpen .mainMenuWrapper a {color: white;}

.mainMenuWrapper li span {padding-right: 1.5em;}

.mainMenuWrapper li span::after {
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-right: none;
				border-left-color: #fff;
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

.mainMenuWrapper li:hover span::after {border: 0.313em solid transparent; border-bottom: none;
				border-top-color: #fff;}

				
.menuOpen .container::before {
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.bannerWrapper {
   background-color: #4F8E4F;
   height: 400px;
   min-height: 300px;
   max-height: 650px;
   height: 60vh;
}

.insetIntoBanner {
		margin-top: 0px;
	}


.homepageBanner {background: url(/img/homepage-banner-low.jpg) no-repeat left center #161F15; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

  .bannerFeatureLeft {color: white;  padding: 15px 30px 15px 20px; background: rgba(1,17,30,0.6); border-radius: 5px;}
  .bannerFeatureLeft h2 {margin: 0 0 1rem 0; font-size: 2.6rem; line-height: 1;}
  .bannerFeatureLeft p {font-size: 1.8rem; margin: 0.4rem 0;}

  .ticklist {list-style-type: none; margin: 20px 0 0 20px; padding: 0;}
  .ticklist li {margin: 0; padding: 0 0 6px 35px; position: relative;}
  .ticklist li:before {
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    left: 0px;
    content: " ";
    top: 0.75rem;
    transform: rotate(-45deg);
   
  }
.bannerFeatureRight .ticklist li, .pageFeature .ticklist li {padding-left: 20px;}
  .bannerFeatureRight .ticklist li:before, .pageFeature .ticklist li:before {width: 6px; height: 6px;}
.pageFeature .ticklist li:before {border-color: #585858;}

  .bannerFeatureLeft .rightBlock {text-align: right;}
  .button.ctaHomepage {background-color: rgba(202, 61, 0, 0.8); padding: 15px 20px; }
  .button.ctaHomepage:hover {background-color: #711F00;}

  .boilerPlate h1 {text-transform: uppercase; text-align: center; font-weight: normal;}
.boilerPlate p {font-size: 1em; text-align: center; }
   
   
   
  .footer-social {margin-top: 10px;}
  .copyright {line-height: 55px;}
	.top-footer-wrapper {background: #18191B; color: #AFB3B4; margin: 30px 0 0 0; padding: 30px 0;}

	.top-footer-wrapper a, .top-footer-wrapper a:visited {color: #408AE1;}

	.top-footer-wrapper a:hover, .top-footer-wrapper a:focus {color: #EE7C0A;}

	footer h3 {font-weight: normal; color: white; font-size: 1.4em; text-transform: uppercase;}

	.bottom-footer-wrapper a {color: white; font-size: 2rem; }

	.bottom-footer-wrapper {background: #000; color: #FFF; padding: 15px 0;}

  .regulatory {display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 0;}
  .regulatory img {margin-right: 15px; }
  .regulatory img:last-child {margin-right: 0;}


/* ==========================================================================
   Media Queries [mlr] edit below was 680px

    above mobile widths -- overidable for wider than 1023 in next MQ
   ==================== */
@media only screen and (min-width: 768px) {

   

   .topMenuWrapper {height: 100px; text-align: left;}

   .topMenuWrapper .logo {margin-top: 10px;}

   .mainMenuWrapper {background-color: #081C27;  background-color: #154A68; height: 46px; position: relative;}

   .mainMenuWrapper nav {width: auto; height: auto; position: static; left: 0; top: 0; background: none;}

	.mainMenuWrapper ul{
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row nowrap;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		align-items: center;
		min-height: 46px;
		flex-flow: row nowrap;
	}


	.mainMenuWrapper li a, .mainMenuWrapper li span {
		text-decoration: none;
		display: block;
		padding: 0.4em 0.75em;
		color: #fff;
		line-height: 1;
		font-size: 0.85em;
		text-align: center;
		  transition: background-color 0.2s ease 0s;
border-radius: 16px;
	}


	.mainMenuWrapper li span {padding-right: 1.5em;}

	/* 1 line below overides the menu style's right pointing arrow so both normal and hover state use downpoiting arrow */
	.mainMenuWrapper li span::after {border: 0.313em solid transparent; border-bottom: none;border-top-color: #fff;}

	.mainMenuWrapper li a:hover, .mainMenuWrapper li span:hover {background-color: #081C27; color: white; cursor: pointer; }


	.mainMenuWrapper li {position: relative; }
	.mainMenuWrapper li div {box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 46px; opacity: 0; visibility: hidden; width: 220px; height: 200px; background: #383838; transition: all 0.4s ease; transition-delay: 0.12s;}

	/* hover styles... */
	.XXXmainMenuWrapper li:hover {overflow: visible; background-color: #383838; }
	.mainMenuWrapper li:hover span {color: #4F8E4F;}/* top-level font color on hover over submenu... */

	.mainMenuWrapper li:hover div {opacity: 1; visibility: visible;}

	/* li > li a needs different styling from parent... */
	.mainMenuWrapper ul ul {display: block; text-align: left;}
	.mainMenuWrapper li li {padding-bottom: 0.5em;}
	.mainMenuWrapper li li a {font-size: 1em; padding: 0.75em 0.5em 0.75em 1.2em; line-height: 1em; }
	.mainMenuWrapper li li a:hover {background-color: #081C27;}


	.menuTrigger {display: none;}



	.topMenuWrapper ul {
		margin-top: 40px;
		float: right;
	width: inheit;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row nowrap;
		flex-flow: row nowrap
		align-items: center;

	}

	.topMenuWrapper li {border-right: 2px solid #ccc; min-width: 70px; }
	.topMenuWrapper li:last-child {border: none;}

	.topMenuWrapper a {
		text-decoration: none;
		display: block;
		padding: 0 0.5em;
		
		line-height: 1.2em;
		color: #505050;
		font-size: 1em;
	}	

	.topMenuWrapper a:hover {color: #4F8E4F;}


	.bannerFeatureLeft {margin-top: 40px;}
	.bannerFeatureLeft h2 {
	  font-size: 3rem;
	  margin: 0 0 2rem;
	}

  .ticklist {}


	.homepageBanner {background: url(/img/homepage-banner-high.jpg) no-repeat center center #161F15; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}



	.insetIntoBanner {
		margin-top: -65px;
		background-color: rgba(240,240,240,0.58);
		border: 5px solid rgba(0,0,0,0.2);
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border-radius: 8px;
		min-height: 400px;
    padding-bottom: 20px;
	}


	.insetIntoBanner h1 {margin-top: 1.5em; margin-bottom: 0.75em;}
	.hpTravelInsurance, .hpMotorInsurance {text-align: left; margin-top: 1.5em; margin-bottom: 1.5em;}
	.hpTravelInsurance h2, .hpMotorInsurance h2 {font-size: 1.3em;}



/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}




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



}


@media only screen and (min-width: 1024px) {
/* ====================
    WIDE: CSS3 Effects
   ==================== */

    

/* ============
    WIDE: Menu
   ============ */

    .mainMenuWrapper li a, .mainMenuWrapper li span {
		padding: 0.4em 1em;
		font-size: 1em;
	}

	.mainMenuWrapper li span {padding-right: 1.5em;}

	.topMenuWrapper a {
		padding: 0 0.5em;
		line-height: 1.2em;
		font-size: 1em;
	}	



/* ============
    WIDE: Main
   ============ */

    
}

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

/* ===============
    Maximal Width
   =============== */

   /* ============
    WIDE: Menu
   ============ */

    .mainMenuWrapper a {
		padding: 0 1.2em;
		font-size: 1.2em;
	}

	.hpTravelInsurance h2, .hpMotorInsurance h2 {font-size: 1.5em;}
}



























/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}








/* ==========================================================================
   added
   ========================================================================== */






.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
}

.loadingMessage {
  color: rgb(21, 74, 104);
  height: 40px;
  left: -90px;
  position: absolute;
  text-align: center;
  top: 30px;
  width: 200px;
}

.formIsBeingSubmitted .loading {display: block;}


/* Transparent Overlay */

.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}


/* :not(:required) hides these rules from IE9 and below */

.loading:not(:required) {
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  box-shadow: rgba(21, 74, 104, 1) 1.5em 0 0 0, rgba(21, 74, 104, 1) 1.1em 1.1em 0 0, rgba(21, 74, 104, 1) 0 1.5em 0 0, rgba(21, 74, 104, 1) -1.1em 1.1em 0 0, rgba(21, 74, 104, 1) -1.5em 0 0 0, rgba(21, 74, 104, 1) -1.1em -1.1em 0 0, rgba(21, 74, 104, 1) 0 -1.5em 0 0, rgba(21, 74, 104, 1) 1.1em -1.1em 0 0;
}





@keyframes spinner {
  0% {
   
    transform: rotate(0deg);
  }
  100% {
   
    transform: rotate(360deg);
  }
}




.hpRegulatory {
  float: right;
  font-size: 1.2rem;
  margin: 10px 0 0;
}



.center {text-align: center;}
.left {text-align: left;}

.modal {position: fixed; top: 0; left: 0; height: 0; width: 0; cursor: progress; background: rgba(0,0,0,0.5); visibility: hidden; opacity: 0;}


/* svg setup */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: middle;
}

/* button setup */
.button, a.button, input[type=button], input[type=submit], button {
  border: 0 none;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 1.6rem;
  XXXXXXmargin-bottom: 20px;
  margin-top: 20px;
  padding: 5px 20px;
  min-width: 120px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease 0s;
  vertical-align: middle;
  background-color: #888;
  color: white;
  border-radius: 3px;
}

.button:hover, .button:focus, .button:active, a.button:hover, input[type=button]:hover, input[type=submit]:hover, button:hover {
  color: white;
  transition: all 0.2s ease 0s;
  background-color: #444;
}

.button .icon {
  font-size: 120%;
  margin-right: 5px;
  margin-top: -2px;
}

.ctaHomepage .icon {margin: -4px -5px 0 0;}



.smallButton, a.smallButton {
	font-size: 1em;
	padding: 3px 10px;
	min-width: 30px;
	margin: 3px 0;
}

.tinyButton, a.tinyButton {margin: 2px 0; font-size: 0.8em; padding: 2px 10px;}

.XXXXsmallButton .icon {margin-top: -2px; margin-right: 0;}

.goButton {background-color: #4f8e4f!important;}
.goButton:hover {background-color: #3cb33c!important;}

.activeManageButton {background-color: #11657E!important;}
.activeManageButton:hover {background-color: #0B7B9C!important;}

.dangerButton {background-color: #9C3814 !important;}
.dangerButton:hover {background-color: #E83C00!important;}

.cancelButton {background-color: #ccc !important;}
.cancelButton:hover {background-color: #ddd !important;}

.greyButton {background-color: #666 !important;}
.greyButton:hover {background-color: #333 !important;}

.button.floatRight {float: right; margin-right: 0px; margin-top: 0; margin-bottom: 0;}
.button.floatRightMargin {float: right;}
.rightMargin15 {margin-right: 15px;}
.leftMargin15 {margin-left: 15px;}
.smallButton.floatRight {margin-top: 6px; margin-right: 6px;}

button:disabled {background-color: #ccc!important; color: #aaa!important;}
button:disabled:hover {background-color: #ccc!important; cursor: not-allowed; color: #aaa!important;}

/* Form feedback */

.formIsBeingSubmitted {cursor: progress;}
.formIsBeingSubmitted .modal {height: 100%; width: 100%; visibility: visible; opacity: 1; transition: opacity 0.5s ease;}

.postResultBox {width: 100%;  margin: 15px 0;}
.postResultBox div {border: 1px solid #585858; border-radius: 3px; padding: 5px 15px 10px 15px; background: #efefef}
.postResultBox h2 {margin-top: 15px;}

.postResultBox.success div {
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #3c763d;
}

.success {color: #3c763d;}

.postResultBox.alert div {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.postResultBox.error div {
	border-color: #ebccd1;
	background-color: #f2dede;
	color: #a94442;
}

.postResultBox.alert.infoHelp div{
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}


#formAlert {height: 0; overflow: hidden; opacity: 0; margin: 0;  transition: opacity 0.75s;}
#formAlert.show {height: auto; overflow: visible; opacity: 1;
	margin: 15px 0 5px 0;}

/* form layout */
#invitationList {margin-bottom: 5px; counter-reset: countEntries;}
.list-item {margin: 5px 0; vertical-align: middle; padding: 3px 0;counter-increment: countEntries;}

.list-item::before{content: counter(countEntries) ". ";}
#insertCount::before {content: counter(countEntries) " ";}

.row {clear: both; overflow: hidden; margin: 5px 0; padding: 3px 0;}
.row label {width: 180px; display: inline-block; vertical-align: middle; margin-right: 15px; line-height: 1.2;}
.longRows .row label {width: 320px;}
.radioHolder label {width: auto; float: none;}
.icon-warning { 
	animation: pulse 1s cubic-bezier(.95,.05,.8,.04) infinite alternate;
}
@keyframes pulse {
	 0% {
	    fill: rgba(255, 255, 255, 1);
	 }

	 100% {
	    fill: rgba(255,255,255,0.1);
	    
	 }
}



.row input[type=text], .row input[type=password], .row input[type=email] {width: 200px;}
.long input[type=text], .row input[type=password], .row input[type=email] {width: 280px;}
.row textarea {width: 320px; height: 60px; font-size: 13px;}
.row .helpText {font-size: 0.8em; display: inline-block; line-height: 1; margin-left: 10px;}
.row input.tiny {width: 35px;}
.row input.small {width: 90px;}
.row input.medium {width: 180px;}
.row input.large {width: 480px;}

.row label.noWidth {width: auto;}
.row label.topLabel {vertical-align: top;}

.XXXrow input + em {font-style: normal; background: grey; display: inline-block; width: 18px; height: 16px; margin: 0 0 0 10px;}
.XXXrow input:focus:required:invalid + em {background-color: red;}
.XXXrow input:valid + em, .row input:in-range + em {background-color: green;}

/* Player make Predictions */
.fixtureHeader {background-color: #ddd; font-weight: bold; margin-top: 10px; padding-left: 5px;}
.fixtureRow {clear: both; overflow: hidden;  padding: 0 0 4px; vertical-align: middle;}
.fixtureRow:nth-child(odd) {background-color: #eee;}
.fixtureRow span {display: inline-block; width: 280px;  margin-right: 15px; margin-left: 30px; overflow: hidden; line-height: 1.2; vertical-align: middle; text-overflow: ellipsis;}
.fixtureRow label {display: inline-block; width: 100px; margin-right: 15px; padding-left: 5px; border-radius: 3px;}
.fixtureRow label:hover {background-color: rgba(0,0,0,0.1);}
.fixtureRow input[type=radio] {margin-right: 5px;}

input[type=email]:-moz-read-only, input:-moz-read-only {
  border: none;
}
input[type=email]:read-only, input:read-only {
  border: none;
}
input[type=text],input[type=email],input[type=number], input.showIfReadOnly {border: 1px solid #585858}
input:focus {border-color: #0078D7;}
/* play/manage home screen boxes */
.XXXlm_admin_gameBox, .XXXplayer_gameBox {
  background: #eee none repeat scroll 0 0;
  border-radius: 3px;
  margin-bottom: 10px;
  padding: 2px 10px 10px 10px;
}

.XXXlm_admin_gameBox h3, .XXXplayer_gameBox h3 { margin-top: 5px;

}

.debugInfo {color: #777; font-size: 1.2rem;}

.gameWeekStrap {
  color: #4e6c88;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: -15px;
  padding-top: 0;
}

.tinyText {font-size: 1rem;}

.socialLinkDisp {border-bottom: 1px solid #ccc; font-size: 1.0rem;}

/* Player account */
th {text-align: left;}

.dataTable {width: 100%; margin-bottom: 5px; border-collapse: collapse;}

.dataTable td, .dataTable th {padding: 1px 3px;}
.dataTable th {background-color: #ddd; padding: 3px;}
.dataTable thead th {border-bottom: 1px solid #aaa; padding-bottom: 4px;}
.dataTable tr:nth-child(odd) td {background-color: #fff;}
.dataTable tr:nth-child(even) td {background-color: #eee;}
.dataTable .currencyCell {text-align: right; padding-right: 10px;}
.dataTable tbody tr td:first-child {padding-left: 10px; }

.dataTable tr:nth-child(odd) td.predCorrect {background-color: #B2DFB8;}
.dataTable tr td.predCorrect {background-color: #a4ceaa;}
td.right, th.right, .rightAlign {text-align: right; padding-right: 15px;}

.tableCellSubLine {display: block; font-size: 0.8em; margin: -2px 0 2px 0; color: #444;}

.limitWidth200 {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nowrap, .noWrap {white-space: nowrap;}

.countRows {counter-reset: rowCount;}
.countRows tbody tr td:first-child {counter-increment: rowCount}
.countRows tbody tr td:first-child::before {content: counter(rowCount) ". ";}

tr.ruleTop td {border-top: 1px solid #ccc;}

.largeTable td {font-size: 1em;}
.largeTable th {font-size: 0.85em; line-height: 1;}

table thead tr th:first-child {border-radius: 3px 0 0 0;}
table thead tr th:last-child {border-radius: 0 3px 0 0;}
table tbody tr:last-child td:first-child {border-radius: 0 0 0 3px;}
table tbody tr:last-child td:last-child {border-radius: 0 0 3px 0;}

.predictionSummary th, .predictionSummary td {text-align: center;}
.predictionSummary tr:nth-child(odd) td.predCorrect {background-color: #B2DFB8;}
.predictionSummary tr td.predCorrect {background-color: #a4ceaa;}
.predictionSummary tr td:first-child {white-space: nowrap; font-size: 0.9em; text-align: left;}

.predictionSummary tr:first-child th {padding-top: 7px;}

th.leftBorder {border-left: 1px solid #aaa;}
td.leftBorder {border-left: 1px solid #ccc;}

.smallResultsTable {font-size: 1.2rem; width: 100%; text-align: left;}
.smallResultsTable th {font-size: 1.3rem;padding: 2px 3px;}
.smallResultsTable td {padding: 2px 3px;}

.sideBox {background-color: #eee; }
.infoBox {border-radius: 5px; margin-bottom: 15px; font-size: 1.4rem; overflow: hidden; padding-bottom: 10px;}
.infoBox:first-child {margin-top: 1.25em;}
.infoBox h3 {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  border-radius: 3px 3px 0 0;
  color: white;
  margin-top: 0;
  padding: 5px 5px 5px 7px;
}

.sideBar .sideBox div {text-align: center;}

.moneyDisplay {
  display: block;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}
.moneySubline {
  display: block;
  line-height: 1;
  margin-top: -0.9rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.4rem;
}

.maxJPReached  {display: block; line-height: 1; font-weight: normal; padding: 0 5px; font-size: 12px;}

.moneyDisplay .tinyText {display: block; line-height: 1; margin-top: -0.5rem; margin-bottom: 1.5rem; font-weight: normal;}

.cashDisplay {color: #4E6B20;}
.managerPage .cashDisplay {color: #154A68;}

.playerPage h1 {color: #344021;}
.managerPage h1 {color: #213940;}

.playerBox h3, .playerBox .button, .playerPage .button, .playerPage .infoBox h3 {background-color: #344021;}
.managerBox h3, .managerBox .button, .managerPage .button, .managerPage .infoBox h3 {background-color: #213940;}
.managerPage .button {background: #154A68;}
.playerPage .button {background: #4e6b20}

.player_gameBox.player_nextUp h3 {background-color: #4E6B20;}


.leagueBox {color: white; margin-top: 1.25em; border-radius: 3px; padding: 10px 10px; }
.leagueBox .icon-date {
  font-size: 2rem;
  margin-right: 3px;
  margin-top: -4px;
}
.playerPage .leagueBox {background-color: #344021;}
.managerPage .leagueBox {background-color: #213940;}

.leagueBox  h3 {
    font-size: 2.1rem;
    margin-bottom: 0;
    margin-top: 0;

  margin-left: 3rem;
  text-indent: -2.8rem;

 }
.leagueBox p {
  font-size: 1.4rem;
  margin-bottom: 0;
  margin-left: 3rem;
  margin-top: 0;
}

.infoBox h3 .icon {font-size: 140%; margin-right: 0;}
.infoBox h3 .icon-noScale {font-size: 100%; margin-top: -4px; margin-right: 4px;}
.infoBox h3 .iconLargeMargined {font-size: 140%; margin: -2px 7px 0 0;}
.resultsBox h3 .icon {margin-right: 7px;}

.icon-nudgeUp {margin-top: -5px;}

.infoBox h3 .icon-coin-pound {margin-right: 5px; margin-top: -5px;}
.infoBox h3 .icon-warning {margin-right: 5px; margin-top: -5px; font-size: 120%;}
.infoBox h3 .icon-podium {margin-top: -3px;}
.infoBox h3 .icon-play3 {margin-top: -3px; margin-right: 2px; font-size: 120%;}

.button .icon-play3 {margin: -3px 0 0 8px; font-size: 80%;}

.infoBox.limitHeight ul:first-of-type {
  max-height: 200px;
  min-height: 200px;
  overflow-y: scroll;
}

div.restrictHeight {
 max-height: 300px;
  min-height: 300px;
  overflow-y: scroll;
}

h4 ~ .icon {
  margin-right: 4px;
  margin-top: -2px;
}

.infoBox > div:first-of-type {margin: 5px; padding-bottom: 10px;}

.statBox h3 {background-color: #705870;}
.resultsBox h3 {background-color: #62874d;}
.alertBox {background-color: #F6F1EA;!important}
.alertBox h3, .alertBox .alertButton, .alertButton {background-color: #C67915!important}
.alertButton:hover {background-color: #E48C1A!important;}
.alertBox .deadline {color: #922900; font-weight: bold;}

.greyRow {background-color: #ddd; text-align: center; font-size: 1.2em; padding: 7px 0; }

.subBox {margin-top: -25px; padding-left: 5px;}
.subBox + .subBox {  margin-top: 15px;}
.subBox h4 {margin-top: 0; margin-bottom: 0.5em;}
.subBox h4:nth-of-type(n+2) {margin-top: 1.5em;}

.sideBox .subBox h4 {font-size: 1.5rem;}

.socialPromote {font-size: 2.5rem;}
.socialPromote a {display: inline-block;margin-left: 5px;}
.socialPromote a.twitter {color: #55acee;}
.socialPromote a.facebook {color: #3b5998;}

.chart {
  position: relative;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0%;
  margin: 0;
}
.pieTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 18px 6px;
  border-radius: 2px;
  background: rgba(255,255,255,.97);
  color: #444;
  font-size: 1.2rem;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
  -webkit-transform: all .3s;
     -moz-transform: all .3s;
      -ms-transform: all .3s;
       -o-transform: all .3s;
          transform: all .3s;
  pointer-events: none;
}
.pieTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(255,255,255,.95);
      line-height: 0;
}
.chart path { cursor: pointer; }


/* ==========================================================================
   MESSAGING
   Consolidated. Replaces the CSS snippets given in the step 3, 4, 5, 6 and 8
   integration notes — if you pasted those in, delete them and use this instead.

   Append to the end of css/stylesheet.css. pageHeader.php serves
   stylesheet.css, not stylesheet.min.css, so nothing needs rebuilding.
   ========================================================================== */


/* --------------------------------------------------------------------------
   MENU BADGE

   The badge is a <span> inside the main menu, and .mainMenuWrapper li span is
   the selector used for dropdown PARENTS. It gives every span in the menu
   display:block, its own padding, a border-radius, padding-right:1.5em and an
   ::after that draws the little arrow. The badge inherits all of it and ends up
   looking like a dropdown.

   Rather than narrow the existing selectors — which would risk the real
   dropdowns — these rules override them for .menuBadge specifically. Each
   selector below is deliberately at least as specific as the rule it beats:

     .mainMenuWrapper li span            (0,1,2)  <  .mainMenuWrapper li span.menuBadge        (0,2,2)
     .mainMenuWrapper li span::after     (0,1,3)  <  .mainMenuWrapper li span.menuBadge::after (0,2,3)
     .mainMenuWrapper li:hover span::after (0,2,3) < .mainMenuWrapper li:hover span.menuBadge::after (0,3,3)

   If you ever restyle the menu, keep the arrow suppression: it is the visible
   symptom if this regresses.
   -------------------------------------------------------------------------- */

.mainMenuWrapper li span.menuBadge,
.menuOpen .mainMenuWrapper li span.menuBadge {
    display: inline-block;
    width: auto;
    min-width: 1.1em;
    padding: 0.1em 0.45em;
    margin-left: 0.35em;
    border-radius: 1em;
    background: #b3120e;
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    cursor: inherit;
}

/* kill the dropdown arrow in both normal and hover states */
.mainMenuWrapper li span.menuBadge::after,
.mainMenuWrapper li:hover span.menuBadge::after {
    content: none;
    display: none;
    border: none;
}

/* the badge sits inside the link, so it must not react to hover on its own */
.mainMenuWrapper li a:hover span.menuBadge,
.mainMenuWrapper li span.menuBadge:hover,
.mainMenuWrapper li:hover span.menuBadge {
    background: #b3120e;
    color: #fff;
}

/* the same badge is reused as an inline count in page headings, where none of
   the menu rules apply */
.messagesPage .menuBadge {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 1em;
    background: #b3120e;
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    vertical-align: middle;
}


/* --------------------------------------------------------------------------
   INBOX LIST
   -------------------------------------------------------------------------- */

.messagesPage .messageFolders,
.messagesPage .messageFilters {
    list-style: none;
    margin: 0 0 0.75em 0;
    padding: 0;
}

.messagesPage .messageFolders { float: left; }
.messagesPage .messageFilters { float: right; }

.messagesPage .messageFolders li,
.messagesPage .messageFilters li {
    display: inline-block;
    margin-right: 0.5em;
}

.messagesPage .messageFolders li.on a,
.messagesPage .messageFilters li.on a {
    font-weight: bold;
    text-decoration: none;
    cursor: default;
}

.messagesTable tr.unreadMessage td,
.messagesTable tr.unreadMessage td a {
    font-weight: bold;
}

.messagesTable .broadcastFlag {
    font-size: 0.8em;
    font-weight: normal;
    white-space: nowrap;
}

.messagesTable td input.messageCheck {
    margin: 0;
}

.messagesPage .messageBulkActions {
    margin-top: 1em;
    padding-top: 0.8em;
    border-top: 1px solid #ddd;
}

.messagesPage .messageBulkActions button {
    margin-right: 0.3em;
    margin-bottom: 0.3em;
}

.messagePagination {
    margin-top: 1em;
    text-align: right;
}

.messagePagination span {
    margin-right: 0.75em;
}


/* --------------------------------------------------------------------------
   SINGLE MESSAGE
   -------------------------------------------------------------------------- */

.messagesPage .messageHeaderTable th {
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
}

.messagesPage .messageBody {
    margin-top: 1.25em;
    padding-top: 1em;
    border-top: 1px solid #ddd;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.messagesPage .reportNote,
.reportedMessagesPanel .reportNote {
    font-size: 0.85em;
    font-style: italic;
}


/* --------------------------------------------------------------------------
   COMPOSE
   -------------------------------------------------------------------------- */

.messagesPage .fullWidth {
    width: 100%;
    box-sizing: border-box;
}

.messagesPage .fieldHint,
.messagingSettingBox .fieldHint {
    display: block;
    margin-top: 0.3em;
    font-size: 0.85em;
    color: #666;
}

.messagesPage .broadcastOption {
    padding: 0.6em 0.8em;
    margin-bottom: 1em;
    background: #f4f4f4;
    border-left: 3px solid #999;
}

/* Recipient picking uses searchableOptionList (sol), the same component as the
   Choose Fixtures screen. sol.css is loaded by pageHeader.php and does the bulk
   of the work; these are only the surrounding bits. */

.messagesPage #chosenRecipients {
    margin-top: 0.5em;
}

.messagesPage #recipientCount {
    margin-top: 0.4em;
}

/* sol renders its own absolutely positioned dropdown; give the surrounding
   infoBox room so it is not clipped */
.messagesPage .sol-container {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   REPORTING
   -------------------------------------------------------------------------- */

.messagesPage .reportMessage {
    margin-top: 1.5em;
    padding-top: 0.8em;
    border-top: 1px solid #ddd;
}

.messagesPage .reportLink {
    font-size: 0.9em;
}

.messagesPage .reportForm {
    margin-top: 0.8em;
    padding: 0.8em;
    background: #f7f4f4;
    border-left: 3px solid #b3120e;
}

.messagesPage .cancelLink {
    margin-left: 0.8em;
    font-size: 0.9em;
}

.reportedMessagesPanel .inlineForm {
    display: inline-block;
    margin: 0;
}

.reportedMessagesPanel .reportActions .button {
    margin-bottom: 0.2em;
}


/* --------------------------------------------------------------------------
   NARROW SCREENS

   The site's own breakpoint for the horizontal menu is 768px, so these sit
   below it. The inbox table keeps all its columns rather than collapsing:
   sender, subject and date are all needed to decide what to open.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .messagesPage .messageFolders,
    .messagesPage .messageFilters {
        float: none;
    }

    /* stack the bulk action buttons full width so they are tappable */
    .messagesPage .messageBulkActions button {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    .messagesPage .messageBulkActions button.floatRight {
        float: none;
    }

    /* date is the least useful column when space is tight */
    .messagesTable th:last-child,
    .messagesTable td:last-child {
        font-size: 0.85em;
    }

    /* report actions wrap onto their own lines rather than overflowing */
    .reportedMessagesPanel .reportActions .button,
    .reportedMessagesPanel .inlineForm {
        display: block;
        margin-bottom: 0.3em;
    }

    .reportedMessagesPanel .inlineForm button {
        width: 100%;
    }

    .messagePagination {
        text-align: center;
    }
}




@media only screen and (max-width: 767px) {
	* {box-sizing: border-box;}
	.grid-container {padding: 0;}
	.topMenuWrapper .logo {  margin: 10px 0 10px -10px;  max-width: 280px;}
	.topMenuWrapper nav { left: 50px;  position: absolute;    top: 100px;  z-index: 999;}
	.topMenuWrapper nav li {display: inline-block; color: white;}
	.topMenuWrapper nav li.welcome {display: none;}
	.topMenuWrapper nav li:not(:last-child):after {content: '|'; margin-left: 5px; margin-right: 5px;}
	.topMenuWrapper nav li a {color: white; font-size: 0.8em;}

	h1 {font-size: 2.3rem; line-height: 1; text-transform: none;}
	h3 {font-size: 1.7rem;}
	h4 {margin: 1rem 0; font-size: 1.4rem;}


  .button.floatRight {margin-bottom: 1.25em;}

	.infoBox {margin-bottom: 0;}
	.infoBox h3 {font-size: 1.4rem;}
	.infoBox.limitHeight ul:first-of-type {
		min-height: 0;
		margin-bottom: 0;
		max-height: 160px;
	}

  .statBox div, .resultsBox div {overflow-x: auto;}

	.longRows .row label, .row label {width: auto; display: block; margin-right: 0; margin-bottom: 3px;}
	.row textarea {width: 100%;}
	.row .helpText {margin: 3px 0 3px 0;}
	.row label:empty {display: none;}
	.long input[type="text"], .row input[type="password"], .row input[type="email"] {
	    width: 100%;
	}

	.bannerFeatureLeft h2 {font-size: 2rem}

	td.limitWidth200 {max-width: 100%; white-space: pre-wrap;}

	.squashMobile tbody tr td:first-child {
	  padding-left: 3px; font-size: 1.6rem; padding-top: 5px;
	}

	.squashMobile tbody tr td:last-child {
	  padding-bottom: 5px;
	}

	.squashMobile td {
	  display: block;
	  width: 100%;
	}

	h1 + h2 {
	  font-size: 1.8rem;
	 margin-left: 0;
	 margin-top: -1rem;
	 margin-bottom: 0;
	}

	

	
	
	.smallButton, a.smallButton {font-size: 0.8em; line-height: 1; }

	.gameWeekStrap {margin-top: 0;}

	.button, a.button, input[type="button"], input[type="submit"], button {
	  font-size: 1.2rem;
	}

	.goButton {margin: 10px 0;}

	.infoBox ul {
	 margin-left: 0;
	 padding-left: 2rem;
	}

	.leagueBox {margin-top: 0.5em;}
	.leagueBox h3 {
	  font-size: 1.3rem;
	  font-weight: bold;
	  line-height: 1;
	  margin-left: 0;
	  text-indent: 0;
	  text-align: center;
	}
	.leagueBox p {margin-left: 0; margin-top: 5px; font-size: 1.2rem; text-align: center;}

	.wideTableHolder {
	  overflow-x: auto;
	}

	.fixtureRow span {
		margin: 9px 0 9px 5px;
		margin-right: 0;
		width: 100%;
		
		font-size: 1.5rem;
		font-weight: bold;
	}

	.fixtureRow label { width: 33%; font-size: 1.6rem; margin: 15px 0;}

   .regulatory {flex-direction: column;}
   .regulatory img {margin-right: 0; margin-bottom: 1em;}

}