body {
	height:100%;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;	
	color:#666;
	font-family: helvetica, arial, sans-serif;
	font-size:12px;
	background-color:white;
	padding-bottom:50px;}

table {	
	border-collapse:collapse;
	empty-cells:show;
	vertical-align:top;}
	
td, div {
	text-align:left;
	vertical-align:top;
	padding:0px;
	font-size:12px;}

img {
	border-style:none;}
	
div.iECenter {
	text-align:center;
	width:100%;}

table.firefoxCenter {
	margin: 0 auto;}
	
ul {
	padding:0px;
	margin:0px 10px 0px 20px;}
	
li {
	font-size:12px;
	padding: 0px 0px 10px 0px;}
	
a {
	color:#666;
	color:#7b414f;
	outline: none;}

td.squad, td.team {padding:4px 5px; font-size:14px; border: 1px solid black; text-align:center;w1idth:120px;white-space: nowrap;vertical-align:middle;user-select: none;touch-action: manipulation;}
td.squadSelectable {cursor: pointer;}
td.squadSelectable:hover, td.squadSelected, td.squadVoted {background-color: black;color:#FFF;}

td.scorer {padding:3px 0px; font-size:12px;}
td.scorerSelectable:hover {cursor: pointer; color:red;}

.score {padding:4px 15px; font-size:14px; text-align:center;}
.Yellow {background-color: Yellow;}
.Blue {background-color: Blue; color:white}
.White {background-color: White;}
.Red {background-color: Red; color:white}	
.Black {background-color: Black; color:white;}
.Gray {background-color: Gray; color:white;}
.Purple {background-color: Purple; color:white;}
.Pink {background-color: #FF69B4; color:white;}
.Green {background-color: Green; color:white;}
.aOffset {text-decoration:none;padding-right:15px;padding-left:15px;color:#666;}

table.honours td {padding:11px; font-size:12px; border:1px solid #666;}

tr.honoursHeading td, td.honoursHeading, div.honoursHeading {text-align:center;font-size:14px;  background-color: #7b414f; color:white;}

svg.star, svg.star:hover {
	width:45px;
}
svg.starSelected, svg.star:hover {
	/*
	width:90px;
	fill: #000000;
	filter: grayscale(100%) sepia(100%);		
	invert(50%);
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);	
	 invert(79%) sepia(72%) saturate(1132%) hue-rotate(356deg) contrast(102%);
	*/
	filter: brightness(0) saturate(50%);
	
}
/*------------------------------------------------------ Layout */
table.main {
	margin: 0 auto;
	width:780px;
	bo1rder:1px solid black;}

#stats td { 
	text-align:right;
	padding-right:12px;
}

#se1lected td {
	background-color:#ccc;}

.stats .selected, .stats tbody .selected {
    background-color: #6ccbfb;
    color: #fff;
}
tr.statsHeading td {
	padding-right:4px;
	text-align:center;
	vertical-align:bottom;
	font-weight:bold;
	
}
tr.statsAnalysis td {
	border-bottom:1px solid grey;
}
.stats td {
	text-align:center;
}
td.analysis {
	text-align:left;
	color:#7b414f;
	font-weight:bold;
}
tr.streaksSuperHeading td {
	text-align:left;
	color:white;
	background-color:#7b414f;
	font-weight:bold;
	padding:3px;
}

tr.streaksHeading td {
	text-align:left;
	color:#7b414f;
	background-color:white;
	font-weight:bold;
	padding:3px;
	border-bottom:1px solid #7b414f;
}
tr.streaks td {
	text-align:left;
	padding:3px 5px 1px 3px;
}

td.selectedColumn {
	background-color: #6ccbfb;
    	color: #fff;
}
td.header {
	padding:15px;
	background-color:#496346;
	color:white;
	background-image: url(/images/layout/loheader2.jpg);
	background-repeat:repeat-y;}
	

span.constructor {
	color:#fafc3e;}
	
td.leftHeader {
	background-image: url(/images/layout/loheader2.jpg);
	background-repeat:repeat-y;}
	
td.rightHeader {
	background-image: url(/images/layout/roheader2.jpg);
	background-repeat:repeat-y;
	background-position: right;
	background-color:#496346;}

table.menu {
	width:100%;}

td.menu {
	border-top:1px solid white;}

td.leftMenu {
	border-right:1px solid white;
	border-top:1px solid white; 
	background-image: url(/images/layout/mlo.jpg);
	background-repeat:repeat-y;}

td.rightMenu {
	border-top:1px solid white;
	background-image: url(/images/layout/mro.jpg);
	background-repeat:repeat-y;}


td.menuSelected {
	padding: 8px;
	font-size:13px;	
	font-weight:bold;
	vertical-align:middle;
	color:white;
	border-right:1px solid white;
	b1order-top:1px solid white;
	background-color:#496346;
	background-image: url(/images/menu/selected.jpg);
	background-repeat: repeat-x;
	}

td.menuFiller {
	width:100%;
	background-color:#7b414f;
	border-right:1px solid white;}

a.menuUnselected {
	padding: 8px;
	display: block;
	font-size:13px;
	text-decoration:none;
	color:white;
	border-right:1px solid white;
	background-color: #7b414f;		
	background-image: url(/images/menu/unselected.jpg);
	background-repeat: repeat-x;
	background-position: top;
	font-weight:bold;}

a.menuUnselected:hover {
	background-color: #496346;		
	background-image: url(/images/menu/selected.jpg);
	background-repeat: repeat-x;}

td.content {
	width:100%;
	padding:8px;
	padding-top:40px;
	padding-bottom:30px;
	color:#666;
	/*background-image: url(/images/layout/li.jpg);
	background-repeat:repeat-y;*/}

span.content {
	font-weight:normal;
	color:#666;}

td.leftBorder {
	vertical-align:bottom;
	background-image: url(/images/layout/lo.jpg);
	background-repeat:repeat-y;}

td.leftBorderInner {
	background-image: url(/images/layout/li.jpg);
	background-repeat:repeat-y;}
	
td.rightBorderInner {
	background-image: url(/images/layout/ri.jpg);
	background-repeat:repeat-y;}
	
td.rightBorderOuter {
	background-image: url(/images/layout/ro.jpg);	
	background-repeat:repeat-y;}

td.footer {
	background-image: url(/images/layout/b.jpg);	
	background-position: bottom;
	background-repeat:repeat-x;
	background-color:#f9f9f9;
	//border-top:1px solid #999;
	color:#666;
	padding:5px;
	text-align:center;
	text-align:right;}

a.footer, a.footer:hover {
	color:#666;
	text-decoration:none;}
	
a.footer:hover, span.footerSelected {
	text-decoration:underline;}

td.footerLeft, td.footerRight {
	vertical-align:bottom;
	height:1px;}
	
td.footerLeft {
	background-image: url(/images/layout/lo.jpg);
	background-repeat:repeat-y;}
	
td.footerright {
	background-image: url(/images/layout/ro.jpg);
	background-repeat:repeat-y;}
	
td.highlight {
	padding:10px;}

img.climateCare {
	border:1px solid #999;}

/*------------------------------------------------------ Home */
span.logo {
	padding:2px;
	background-color:#496346;
	color:white;
	font-weight:bold;
	font-size:18px;}

tr.person {
	cursor: pointer;}

table.leaders td {border:0px; padding:1px;}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration:underline;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


tr.honoursEntry td {
	padding-top:25px;
	padding-bottom:25px;
	text-align:center;
	vertical-align:middle;
}

.popuptable {
    border-collapse: collapse;   /* must be on the table */
    border-spacing: 0;           /* must be on the table */
    margin: 0;
    padding: 0;
    width: 100%;                 /* optional � makes it fill the popup nicely */
}

.popuptable td,
.popuptable th {
   padding: 1 !important;       /* the !important beats any other rules */
    margin: 0;
    border: none;
    line-height: 1.2;            /* reduces vertical height if you want it tighter */
    text-align: center;         /* or left, whatever you prefer */
    color:#fff;
}
.popup .popuptext table {
    border-collapse: collapse;
}

#keyDiv {
            display: none; /* Hidden by default */
            padding-top: 5px;
            #background-color: #f0f0f0;
            margin-top: 10px;
}

.custom-select {
    padding: 3px 7px;
    border: 1px solid #7b414f;
    border-radius: 5px;
    background-color: #7b414f;
    color: white;
    margin-bottom:15px;
}

.toggle-btn {
    cursor: pointer;   
    background: white;
    color: #7b414f;
    border: 1px solid #7b414f;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top:10px;
}

.toggle-btn:hover {
	background: #7b414f;
    	color: white;
}


.tablePadded {}

.tablePadded td {padding:3px;}