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

@keyframes animatezoom
{
    from {transform:scale(0)} 
    to   {transform:scale(1)}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


html 
{
    overflow-y: scroll;
}

body {
    color: purple;
    font-size: 16px;  
    text-align:center; 
    font-family: arial; 
          -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
    margin:0px;
}


p 
{
    color: #555555;
    font-size: 16px;
}
  
textarea 
{
    color: gray;
    font-size: 16px;
}  

h1 {  
	
	font-size: 18px; 
	font-weight: bold; 
	color: white;
	margin: 0;
	padding:0;
}

h2 {  
	font-size: 22px; 
	font-weight: bold; 
	margin: 0;
	padding:0;
	color: gray;
	text-shadow: 1px 1px 1px white;
}

h3 {  
	font-size: 20px; 
	font-weight: bold; 
	color: gray;
	margin: 0;
	padding:0;
}



h4 {  
	font-size: 14px; 
	font-weight: bold; 
	color: gray;
	margin: 0;
	padding:0;
}


a   
{
    font-size: 16px; 
    font-weight: bold; 
    color: gray; 
    text-decoration: none;
    cursor:pointer;
    }

a:hover {  
	font-size: 16px; 
	font-weight: bold;
	color: gray; 
}

ul {list-style-position: outside;}
li {list-style-image: url("images/bullet2.gif")}

 div#banner { 
   position: fixed; 
   top: 0; 
   left: 0; 
   background-color: white; 
   width: 100%; 
   z-index:1000;
   height: 32px;
   padding: 5px 0 5px 0;
   background: #FFFFFF url(/images/button_bg.png) bottom left; 
 }
 
 div#banner a
 {
    font-weight:normal;   
 }
 
  div#bannerdev { 
   position: fixed; 
   top: 0; 
   left: 0; 
   background-color: white; 
   width: 100%; 
   border-bottom: 3px solid cyan;
   height: 32px;
   padding: 5px 0 5px 0;
   background: #FFFFFF url(/images/button_bg.png) bottom left; 
   z-index:1000;
 }
 
 div#bannerdev a
 {
    font-weight:normal;   
 }
 
 div#banner-content { 
   width: 100%; 
   margin: 0 auto; 
   padding: 5px;
 }
 
 div#menu-profile{
    position:fixed;
    top:20px;
    right:10px;
    height:600px;
    z-index:300000;
    background-color:#555555;
    color:#ffffff;
    font-size:28px;
    overflow:hidden;
    cursor:pointer;
    border-radius:10px;
    border:5px solid white;
 }
 
  div#menu-profile div{
    padding:20px;
    text-align:left;
  
  }
  
  div#menu-profile div:hover{
    color:#555555;
    background-color:#eeeeee;
  
  }
 
  div#footerbanner { 
   position: fixed; 
   bottom: 0; 
   left: 0; 
   background-color: white; 
   width: 100%; 
   z-index:1000;
   padding: 5px 0 5px 0;
   height: 35px;
   background: #FFFFFF url(/images/button_bg.png) bottom left; 
   border-top:1px outset #DDDDDD;
 }

 
 div#main-content  
 {
 
    top:0px;
   width: 100%;
   
   padding-top: 80px;
   padding-bottom:175px;
   text-align:center;
   overflow:auto;
}

div.main-content-home 
 {
 
    top:0px;
   width: 100%;
   
   padding-top: 90px;
   padding-bottom:15px;
   text-align:center;
   overflow:auto;
}

div.main-content-home-narrow
 {
 
    top:0px;
   width: 100%;
   
   padding-top: 100px;
   padding-bottom:15px;
   text-align:center;
   overflow:auto;
}


 div#footer { 
   width: 100%; 
   margin: 0 auto; 
   margin-top:10px;
   margin-bottom:65px;
   height: 20px;
   clear:both;
 }
 
 div.social-feed
 {
     width:50%;
     text-align:center;
     float:left;
 }

 div#play-splottery  
 {
   width:200px;
   margin: 0 auto;
   margin-top: 30px;
   font-size:24px;
}

div#display-option
{
    width:200px;
    margin: 0 auto;
    margin-top: 20px;
    font-size:24px;
    
}

div#options-header
{
    width:200px;
    margin: 0 auto;
    font-size:20px;
}


 div#mode-options  
 {
   margin: 0 auto;
   
   top:0px;
   padding-top:130px;
   margin-bottom: 30px;
   text-align:center;
}

div#sports-menu
{
    width:50%;
    min-width:220px;
    display:block;
    float:left;
    margin-top:20px;
}

.sport-options
{
    width:100%;
   display:grid;
   justify-content:center;
   -webkit-justify-content:center;
   padding:0 0 30px 0;
   clear:both;
   grid-template-columns:repeat(auto-fill, 470px) ;
   /*grid-template-rows:150px;*/
    grid-row-gap: 5px;
}

div#groups-menu 
{
    width:50%;
    min-width:220px;
    display:block;
    float:left;
    margin-top:20px;
}

div#tournaments-menu 
{
    width:100%;
    display:block;
    float:left;
    margin:10px;
}

div.tournament-container{
    margin:0 auto;
    margin:10px 0 50px 0px;
    position:relative;
}

div.tournament-leaderboard-link
{
    position:absolute;
    top:-20px;
    left:50%;
    width:130px;
    color:red;
    border:2px solid red;
    padding:5px; 
    font-size:16px;
    font-weight:bold;
    border-radius:5px;
    background-color:white;
    cursor:pointer;
}

div.tournament-leaderboard-link:hover
{
    color:White;
    background-color:Red;
}

div.nav-container{
    margin:0 auto;
    margin-top:50px;
    padding-top:50px;
    display:flex;
    display: -webkit-flex;
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    justify-content:space-around;
    -webkit-justify-content: space-around;
}

div#matches-menu 
{
    width:40%;
    display:block;
    float:left;
    margin:10px;
}

div#match-form 
{
    width:100%;
    margin:10px;
}

div.match-container
{
    padding:0 10% 0 10%;
}

div#ticket-summary{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    padding:20px 0px 0 0px;
}

div#ticket-form 
{
    margin:40px;
}
div#pager-container-left
{
    width:50px;
    height:150px;
    position:fixed;
    top:120px;
    left:0px;
    z-index:200000;
}

div#pager-container-right
{
    width:50px;
    height:150px;
    position:fixed;
    top:120px;
    right:0px;
    z-index:200000;
}

div.match-pager-left
{
    width:210px;
    position:absolute;
    top:100%;
    left:-90px;
    text-align:center;
    font-size:24px;
    font-weight:bold;
    padding:15px 10px 15px 10px;
    transform-origin: left top 50%;
    border-bottom:2px solid #cccccc;
    border-right:2px solid #eeeeee;
    border-left:2px solid #999999;
    color:#aaaaaa;
    background-color:#eeeeee;
    text-shadow: 1px 1px 1px white;
    z-index:20000;
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
    transform: rotate(270deg);
    cursor:pointer;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

div.match-pager-left:hover
{
    background-color:#dddddd;
    color:#555555;
}

div.match-pager-left-narrow
{
    width:170px;
    position:absolute;
    top:100%;
    left:-80px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    padding:5px 5px 5px 5px;
    transform-origin: left top 50%;
    border-bottom:2px solid #cccccc;
    border-right:2px solid #eeeeee;
    border-left:2px solid #999999;
    color:#aaaaaa;
    background-color:#eeeeee;
    text-shadow: 1px 1px 1px white;
    z-index:20000;
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
    transform: rotate(270deg);
    cursor:pointer;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

div.match-pager-left-narrow:hover
{
    background-color:#dddddd;
    color:#555555;
}

div.match-pager-right
{
    width:210px;
    position:absolute;
    top:100%;
    left:-90px;
    text-align:center;
    font-size:24px;
    font-weight:bold;
    padding:15px 10px 15px 10px;
    transform-origin: left top 50%;
    border-bottom:2px solid #cccccc;
    border-left:2px solid #eeeeee;
    border-right:2px solid #999999;
    color:#aaaaaa;
    background-color:#eeeeee;
    text-shadow: 1px 1px 1px white;
    z-index:20000;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    cursor:pointer;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

div.match-pager-right-narrow
{
    width:170px;
    position:absolute;
    top:100%;
    left:-54px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    padding:5px 5px 5px 5px;
    transform-origin: left top 50%;
    border-bottom:2px solid #cccccc;
    border-left:2px solid #eeeeee;
    border-right:2px solid #999999;
    color:#aaaaaa;
    background-color:#eeeeee;
    text-shadow: 1px 1px 1px white;
    z-index:20000;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    cursor:pointer;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

div.match-pager-right:hover
{
    background-color:#dddddd;
    color:#555555;
}

div.match-pager-right-narrow:hover
{
    background-color:#dddddd;
    color:#555555;
}



.play-option
{
    cursor:pointer;
    width:200px;
    margin: 0 auto;
    border:2px solid blue;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
	clear:both;
	color:blue;
	font-weight:bold;
	background-color:#f0faff;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    
    text-shadow: 1px 1px 1px #aaaaaa;
}

.play-option:hover
{
    background-color:blue;
	color:white;
	opacity: 1.0;
	cursor:pointer;
}

.nav-option
{
    width:200px;
    margin: 0 auto;
    border:1px solid #ddd;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
	clear:both;
	color:#888888;
	font-weight:bold;
	background-color:white;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    
    text-shadow: 1px 1px 1px #aaaaaa;
}

.nav-option:hover
{
    background-color:silver;
	color:white;
	opacity: 1.0;
	cursor:pointer;
}

.admin-option
{
    width:200px;
    margin:0 auto;
    text-align:center;
    border:1px solid purple;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
	color:white;
	font-weight:bold;
	background-color:purple;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    
    text-shadow: 1px 1px 1px pink;
}

.admin-option:hover
{
    
	background-color:white;
	color:purple;
	cursor:pointer;
}

.team-option
{
    float:left;
       width:250px;
    margin:5px;
    text-align:center;
    border:1px solid purple;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
	color:purple;
	font-weight:bold;
	background-color:white;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    height:25px;
    overflow:hidden;
}

.team-option:hover
{
    background-color:purple;
	color:white;
	cursor:pointer;
}


div#live-tournaments{
    width:100%;
    position:absolute;
    left:0px;
    top:42px;
    background-color:#aaaaaa;
    display:table;
    border-top: 1px solid white;
    
}


#live-tournaments div {
  display:table-cell;
  text-align:center;
  height:100%;
    vertical-align:middle;
	padding:3px 10px 6px 10px;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
}



 div.tournament-banner
 {
    cursor:pointer; 
    color:#888888;
    background-color:#dddddd; 
    font-size:16px; 
 }
 
 div.tournament-banner:hover
 {
     color:#888888;
     background-color:Yellow;
 }
 
  div.tournament-banner-narrow
 {
    cursor:pointer; 
    color:#888888;
    background-color:#dddddd; 
    font-size:12px; 
 }
 
 div.tournament-banner-narrow:hover
 {
     color:#888888;
     background-color:Yellow;
 }
 
  div.tournament-banner-selected
 {
    cursor:pointer; 
    color:white;
     background-color:#888888; 
     border:2px solid yellow;
     font-size:16px; 
 }
 
  div.tournament-banner-selected-narrow
 {
    cursor:pointer; 
    color:white;
     background-color:#888888; 
     border:2px solid yellow;
     font-size:12px; 
 }

.player-option
{
    width:250px;
    margin:10px auto;
    text-align:center;
    border:2px solid #ddd;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;
	color:green;
	background-color:yellow;
	font-weight:bold;
	margin:10px;

	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    
    text-shadow: 1px 1px 1px #aaaaaa;
}

.player-option:hover
{
    border:2px solid #ddd;
    font-size:24px!important;
	background-color:green;
	color:white;
	cursor:pointer;
}

.player-option-narrow
{
    width:200px;
    margin:10px auto;
    text-align:center;
    border:2px solid #ddd;
    font-size:20px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;
	color:green;
	background-color:yellow;
	font-weight:bold;
	margin:10px;

	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    
    text-shadow: 1px 1px 1px #aaaaaa;
}

.player-option-narrow:hover
{
    border:2px solid #ddd;
    font-size:20px!important;
	background-color:green;
	color:white;
	cursor:pointer;
}

.match-option-outer 
{
    margin: 0 auto;
    
    width:410px;
    /*margin:10px 50px 10px 10px;*/
    padding:10px 10px 10px 10px;
    text-align:center;
    position:relative;
    min-height:130px;
}

.match-option-outer-narrow 
{
    margin: 0 auto;
    
    width:280px;
    /*margin:10px 50px 10px 10px;*/
    padding:10px 10px 10px 10px;
    text-align:center;
    position:relative;
    height:130px;
}

.match-option-single
{
    width:410px;
    margin:0 auto;
    padding:25px 0 25px 0;
    margin-bottom:25px;
    height:150px;
} 

.match-option-single-narrow
{
    width:300px;
    margin:0 auto;
    padding:25px 0 25px 0;
    margin-bottom:25px;
    height:150px;
} 

.match-option
{
    
    width:320px;
    margin:10px 0 0 20px;
    text-align:center;
    color:purple;
    border:2px solid purple;
    font-size:24px!important;
    font-weight:bold;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
	padding: 20px 10px 20px 10px;
	*padding: 2px 4px 2px 4px;
	float:left;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    position:relative;
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
}

.match-option-narrow
{
    
    width:240px;
    margin:10px 0 0 15px;
    text-align:center;
    color:purple;
    border:2px solid purple;
    font-size:16px!important;
    font-weight:bold;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
	padding: 20px 5px 20px 5px;
	*padding: 2px 4px 2px 4px;
	float:left;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    position:relative;
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
}

.match-option:hover
{
    color:White;
	background-color:purple;
	cursor:pointer;
}

.match-option-narrow:hover
{
    color:White;
	background-color:purple;
	cursor:pointer;
}

div.match-option-tournament{
    font-size:28px;
}

div.match-option-tournament-narrow{
    font-size:20px;
}

div.match-option-teams{
    font-size:24px;
    padding:10px 0 10px 0;
}

div.match-option-teams-narrow{
    font-size:18px;
    padding:5px 0 5px 0;
}


.control-edit 
{
    position:absolute;
    top:0px;
    right:10px;
    width:50px;
    cursor:pointer;
    border:1px solid #cccccc;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
}

.control-edit:hover
{
    border:2px solid #cccccc;
}

.control-del 
{
    position:absolute;
    top:20px;
    right:-10px;
    width:50px;
    cursor:pointer;
    border:1px solid #cccccc;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
}

.control-del:hover
{
    border:2px solid #cccccc;
}

.match-pool 
{
    text-align:center;
    width:130px;
    float:left;
    border: 1px solid #cccccc;
    color:red;
    font-size:30px;
    font-weight:bold;
    padding:5px 10px 5px 10px;
    background-color:White;
    text-shadow: 1px 1px 1px #dddddd;
    vertical-align:middle;
    position:absolute;
    top:-25px;
    left:-30px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.match-pool-narrow
{
    text-align:center;
    width:90px;
    float:left;
    border: 1px solid #cccccc;
    color:red;
    font-size:20px;
    font-weight:bold;
    padding:5px 5px 5px 5px;
    background-color:White;
    text-shadow: 1px 1px 1px #dddddd;
    vertical-align:middle;
    position:absolute;
    top:-15px;
    left:-15px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.user-ticket-count
{
    font-size:36px;
    text-shadow: 2px 2px 1px silver;
    position:absolute;
    bottom:10px;
    right:-50px;
    color:blue;
    font-weight:bold;
}

.user-ticket-count-narrow
{
    font-size:24px;
    text-shadow: 2px 2px 1px silver;
    position:absolute;
    bottom:10px;
    right:-30px;
    color:blue;
    font-weight:bold;
}

.leader-option
{
    width:200px;
    margin: 0 auto;
    border:2px solid red;
    font-size:24px!important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 0px 5px 0px;
	*padding: 2px 0px 2px 0px;
	clear:both;
	color:red;
	font-weight:bold;
	background-color:white;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
    
    text-shadow: 1px 1px 1px #aaaaaa;
    
}

.leader-option:hover
{
    background-color:red;
	color:white;
	opacity: 1.0;
	cursor:pointer;
}


.or-option
{
    width:10%;
    margin:100px auto 20px auto;
    text-align:center;
    display:block;
    float:left;
}

.logo 
{
    width:230px;
    display:block;
    float:left;
    margin:-3px 0 0 2px;
    height:35px;
    border-radius:5px;
}

.logo-narrow
{
    width:160px;
    display:block;
    float:left;
    margin:-3px 0 0 2px;
    height:35px;
    border-radius:5px;
}

div.logo
{
     float:left;
     display:inline;  
}

img.logo
{
    width:35px;
    height:35px;
    border:1px solid white;
}

div.logotxt
{
    float:left;
    display:inline;
    margin:2px 0 0 10px;
    text-shadow: 1px 1px 1px #fff;
    font-size:22px;
}

div.logotxt-narrow
{
    float:left;
    display:inline;
    margin:7px 0 0 5px;
    text-shadow: 1px 1px 1px #fff;
    font-size:14px;
}

.login-top 
{
    display:block;
    float:right;
    margin-right:100px;
    border:none;
    margin-top:5px;
    height:25px;

}

.user-credentials
{
    text-align:right;
    font-size:18px;
}

.user-credentials-narrow{
    text-align:right;
    font-size:14px;
}

.user-credentials a
{
    font-size:22px;
}

.user-credentials-narrow a
{
    font-size:14px;
}

.user-credentials span
{
    font-size: 22px; 
	font-weight: bold; 
	margin: 0;
	padding:0;
	color: gray;
	text-shadow: 1px 1px 1px white;  
}

.user-credentials-logo{
    text-align:right; 
    width:55px; 
    padding:0px 0px 0px 5px;
}

.user-credentials-logo-narrow{
    text-align:right; 
    width:0px; 
    padding:0px 0px 0px 0px;
    display:none;
}

.credentials-notifications{
    padding:0px 5px 10px 15px;
}

.credentials-notifications-narrow{
    padding:0px 5px 10px 5px;
}

.credentials-splotts{
    overflow:hidden;
    padding:5px 5px 10px 5px;
    text-align:center;
}

.credentials-splotts-narrow{
    overflow:hidden;
    padding:10px 0px 10px 0px;
    text-align:center;
    
}

.credentials-cash{
    overflow:hidden;
    padding:5px 15px 10px 5px;
}

.credentials-cash-narrow{
    overflow:hidden;
    padding:10px 5px 10px 5px;
}

.login-input
{
    width:200px;
    font-size:20px;
}

.loginpanel
{
    
    text-align:center;
    margin: 0 auto;
    margin-top:100px;
}

.loginpanel-component{
    margin-bottom:15px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

.loginpanel-component div{
    min-width:200px;
}

label
{
    font-size:24px;
}

.small
{
    font-size:12px;
}

.gradientButton  {
    border:1px solid #ddd;
    font-size:24px!important;
    -moz-border-radius:5px;-webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;
	background: #FFFFFF url(/images/button_bg.png) bottom left;  
	color:#666666;    
    margin:10px;  
 }

.gradientButton:hover  {
    border:1px solid #aaa;
	color:gray;  
	cursor:pointer;      
    margin:10px;          
} 

.gradientButton-narrow  {
    border:1px solid #ddd;
    font-size:12px!important;
    -moz-border-radius:5px;-webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;
	background: #FFFFFF url(/images/button_bg.png) bottom left;  
	color:#666666;    
    margin:10px;  
 }

.gradientButton-narrow:hover  {
    border:1px solid #aaa;
	color:gray;  
	cursor:pointer;      
    margin:10px;          
} 

.form-field
{
    font-size:20px;
    text-align:center;
}

.score-field
{
    font-size:34px;
    text-align:center;
    border:none;
    font-weight:bold;
    background-color:yellow;
    min-width:60px;
}

.cash-field
{
    font-size:28px;
    text-align:right;
    border:1px solid silver;
}

.twitter-field
{
    font-size:34px;
    text-align:left;
    border:1px solid silver;
}


.competitors
{
    display:flex;
    justify-content: space-around;
    margin: 5px;  
    flex-wrap:wrap;
}

.score 
{
    min-width:80px;
    max-width:100px;
    font-size:34px;
    text-align:center;
    margin:0 auto;
    border:2px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;
    font-weight:bold;
    color:White;
    background-color:purple;
}

.score-narrow
{
    min-width:80px;
    max-width:100px;
    font-size:28px;
    text-align:center;
    margin:0 auto;
    border:2px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;
    font-weight:bold;
    color:White;
    background-color:purple;
}

.vs
{
    font-size:28px; 
    color:Purple;
    padding:10px 5px 10px 5px;
    min-width:40px;
    
}

.vs-narrow{
    font-size:22px; 
    color:Purple;
    padding:10px 5px 10px 5px;
    width:100%;
}

.match-name
{
    width:100%;
    font-size:28px;
    margin:0px;   
    color:Purple;
}

.competitor
{
    min-width:150px;
    margin:0px;
    font-size:40px;
    color:Purple;
    font-weight:bold;
    vertical-align:middle;
}

.competitor-narrow
{
    min-width:150px;
    margin:0px;
    font-size:28px;
    color:Purple;
    font-weight:bold;
    vertical-align:middle;
}

.competitor-container
{
    flex-grow:2;
    width:40%;
}

.match-date
{
    width:100%;
    font-size:24px;
    clear:both;
    margin:10px 0 10px 0;
    color:Purple;
    font-weight:bold;
}

.match-date-narrow
{
    width:100%;
    font-size:18px;
    clear:both;
    margin:10px 0 10px 0;
    color:Purple;
    font-weight:bold;
}

.match-details
{
    width:100%;
    font-size:18px;
    clear:both;
    margin:10px 0 30px 0;
    color:Purple;
}

.match-status
{
    width:100%;
    font-size:18px;
    clear:both;
    margin:10px 0 10px 0;
}

.admin-controls
{
    width:100%;
    clear:both;
    margin:10px 0 10px 0;
}

.player-controls
{
    width:100%;
    clear:both;
    margin:10px 0 10px 0;
}

.help-popup
{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:fit-content;
    background-color:white;
    display:none;
    padding:20px;
    text-align:center;
    border-radius:10px;
    border:2px solid silver;
    z-index:1100;
    box-shadow: 5px 5px 5px #888888;
    animation:animatezoom 0.6s;
}

.cash-input
{
    border:none;
    font-size:20px;
    width:50px;   
}


.ticket-list
{
    min-width:380px;
    margin-top:20px;
}

.ticket-list-narrow
{
    margin:0 auto;
    margin-top:20px;
    margin-bottom:20px;
}

.tickets-match 
{  
    min-width:380px;
    padding:10px;
    border:2px solid #ddd;
    margin:0 auto;
    display:table;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    box-shadow: 5px 5px 5px #888888;
}

.tickets-match-narrow 
{  
    max-width:285px;
    padding:5px;
    border:2px solid #ddd;
    margin:0 auto;
    display:table;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.tickets-match-narrow table, .tickets-match-narrow a{
    font-size:12px;
    }

.tickets-match-narrow label{
    font-size:16px;
}

.tickets-summary 
{  
    clear:both;
    width:80%;
    padding:10px;
    border:2px solid #ddd;
    margin:0 auto;
    margin-top:0px;
    margin-bottom:40px;
    display:table;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    box-shadow: 5px 5px 5px #888888;
}

.tickets-user
{
    width:80%;
    padding:10px;
    border:2px solid #ddd;
    margin:0 auto;
    display:table;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    box-shadow: 5px 5px 5px #888888;
}

.ticketlist-container{

    width:100%;

}

.ticketlist-header-row td{
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
    background-color: #eee;
}

.ticketlist-header-row label{
    font-size:12px;
}


.table-cell-link
{
    cursor:pointer;
    
}

.table-cell-link:hover
{
    background-color:Purple;
    color:White;
    
}

div#transaction-table
{
    width:80%;
    min-width:500px;
    padding:10px;
    border:1px solid #ddd;
    margin:0 auto;
    margin-top:20px;
}

.jackpot
{
    color:Red;
    font-weight:bold;
}

.match-pot-container{
    max-width:600px;
    margin:auto;
    border:1px solid purple;
    padding:0 0 20px 0;
    border-radius:10px;
    background-color:#fffeee;
    position:relative;
}


.match-pot 
{
    
    clear:both;
    margin:10px 0 10px 0;
    padding:25px 0 5px 0;
    overflow:auto;
    color:red;
    font-size:40px;
    font-weight:bold;
    text-shadow: 1px 1px 1px #aaaaaa;
    vertical-align:middle;
    position:relative;
}

.match-pot-narrow
{
    
    clear:both;
    margin:10px 0 10px 0;
    padding:15px 0 5px 0;
    color:red;
    font-size:28px;
    font-weight:bold;
    text-shadow: 1px 1px 1px #aaaaaa;
    vertical-align:middle;
    position:relative;
}

.match-pools{
    display:flex;
    padding:0px 0 0px 0;
    justify-content: space-around;
    flex-wrap:no-wrap;
}

.match-pools div{
    padding:5px;
    width:30%;
}   

span.match-pools-label{
    color:#00cc00;
    font-size:16px;
}

span.match-pools-label-narrow{
    color:#00cc00;
    font-size:12px;
}

tr.ticket{
    font-size: 16px;
}

tr.ticket-narrow{
    font-size: 12px;
}

tr.winning-ticket
{
    color:Red;
    font-weight: bold;
    font-size: 16px;
}

tr.winning-ticket-narrow
{
    color:Red;
    font-weight: bold;
    font-size: 12px;
}

td.player-highlight 
{
    font-weight:bold;
    background-color:Purple;
    color:White;
    border:3px solid purple; 
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}

div.main-title
{
    color:silver;
    font-size:40px;
    font-weight:bold;  
    text-shadow: 1px 1px 1px #333333;
    margin:0 0 30px 0;
    clear:both;
    overflow:auto;
    height:100px;
    top:0px;
    padding:110px 0 0 0;
    position:fixed;
    width:100%;
    -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    background-color:White;
    /*background: url('../images/Bg-top-mask.png') repeat-x 0 0;*/
    z-index:500;
}

div.main-title-narrow
{
    color:silver;
    font-size:28px;
    font-weight:bold;  
    text-shadow: 1px 1px 1px #333333;
    margin:0 0 30px 0;
    clear:both;
    overflow:auto;
    height:100px;
    top:0px;
    padding:110px 0 0 0;
    position:fixed;
    width:100%;
    -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    background-color:White;
    /*background: url('../images/Bg-top-mask.png') repeat-x 0 0;*/
    z-index:500;
}

#curtain {
  position: fixed;
  _position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
    
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear;
    -ms-transition: background 0.25s linear;
    -o-transition: background 0.25s linear;
    transition: background 0.25s linear;
}

div.admin-message
{
    font-size:24px;
    padding:20px;   
}

table.leader-table
{
    font-size:24px;
    padding:0 20px 0 20px;   
}


table.leader-table-narrow, table.leader-table-narrow label
{
    font-size:12px;
    padding:0 5px 0 5px;   
}

div.leader-table
{
    margin:10px 0 40px 0;   
}

div.context-container
{
    position:absolute;
    top: 40px;
    right:20px;
}


/*message classes*/


div.game-message-container
{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000000;
    opacity:0.5;
    z-index:1001;
}

div.game-message
{
    font-size:24px;
    position: fixed;
    top:15%;
    left:25%;
    width:50%;
    padding:30px;
    background-color:#fff;
    opacity:1;
    z-index:1002;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

div.game-message-text
{
    margin-bottom:40px;
}

div.game-message-off
{
    margin-top:40px;
    font-size:16px;
    color:#cccccc;
    float:right;
}


.message-show
{
	width:350px;
	border:3px solid #725b4d;
	position:absolute;
	top:50px;
	left:40%;
	border-radius:10px;
	background-color:White;
	display:block;
	color: #725b4d;
	font-size:28px;
	padding:10px 10px 10px 10px;
	box-shadow:5px 5px 5px #333333;
	-webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.message-hide 
{
	display:none;
	-webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
}

/*end of message classes*/


/*form classes*/

div.input-form
{
    margin: 20px 0 0 0;   
    
}

div.input-form-row
{
    clear:both;
}

div.form-label
{
    float:left;
    width:35%;
    text-align:right;
    padding:10px 5px 5px 5px;
    margin:3px 0 0 0;
    font-size:20px;
}

div.form-content
{
    float:left;
    width:60%;
    text-align:left;
    padding:5px;
    font-size:20px;
}

div.form-content input
{
    font-size:20px;
    width:350px;
    padding:5px;
}

input.date-input
{
    width:150px;
    text-align:center;
}

div.form-content select
{
    font-size:20px;
    width:350px;
    padding:5px;
}


/*end of form classes*/


/*notifcations & comments classes*/

.comments-container
{
    min-width:380px;
    margin:20px;
    position:relative;
}

.comments-container-narrow
{
    max-width:285px;
    margin:0 auto;
    margin-top:20px;
    position:relative;
}

.comments-post-control
{
    position:absolute;
    padding:5px;
    top:-30px;
    left:60px;   
    min-width:150px;
    background-color:White;
    font-size:24px!important;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border:2px solid #cccccc;
    color:#666666;
    cursor:pointer;
    text-shadow: 1px 1px 1px silver;
    text-align:left;
    font-weight:bold;
    z-index:900;
}

.comments-post-control-narrow
{
    position:absolute;
    padding:5px;
    top:-20px;
    left:20px;   
    min-width:150px;
    background-color:White;
    font-size:18px!important;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border:2px solid #cccccc;
    color:#666666;
    cursor:pointer;
    text-shadow: 1px 1px 1px silver;
    text-align:left;
    font-weight:bold;
    z-index:900;
}

.comments-list
{
    
    margin:0 auto;
    padding:10px 0 0 0;
    border:2px solid #dddddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    height:auto;
}

.user-comment-container
{
    background-color:#ffffff;
    border-bottom: 1px dotted #cccccc;
    min-width:230px;
    display:table;
    text-align:left;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    
}

.user-icon
{
    display:inline-block;  
    padding:10px;
    width:40px;
}

.user-comment
{
    padding: 15px 10px 10px 10px;
    display:inline-block;
    text-align:left;
    font-size:16px;
    font-weight:normal;
    color:#555555;
    font-style:italic;
    /*text-shadow: 1px 1px 1px silver;*/
    width: calc(100% - 160px);
}

.user-comment-narrow
{
    padding: 10px 5px 5px 5px;
    display:inline-block;
    text-align:left;
    font-size:12px;
    font-weight:normal;
    color:#555555;
    font-style:italic;
    /*text-shadow: 1px 1px 1px silver;*/
    width: calc(100% - 110px);
}

div.comment-field-container{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    filter     : alpha(opacity=60);
    z-index:300000;
}


div.comment-field{
    font-size:24px;
    position: fixed;
    top:15%;
    left: 50%;
    transform: translateX(-50%);
    width:70%;
    padding:40px 20px 40px 20px;
    min-height:250px;
    max-width:600px;
    background-color:#fff;
    opacity:1;
    z-index:310000;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

.comment-field textarea
{
    font-size:18px;
    color:#555555;
    text-align:left;
}

.comment-left
{
    float:left;   
}

.comment-right
{
    float:right;
    text-align:right;
}

.comment-right-narrow
{
    float:right;
    width:25px;
    text-align:right;
}

.user-comment-control-container
{
    display:flex;
    -webkit-display:flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding:10px 0 0 0px;
}

.notifications-container
{
    width:49px;
    height:30px;
    background-image: url(../images/speech.png);
    position:relative;
    cursor:pointer;
}

.notifications-count
{
    
    position:absolute;
    top:-2px;
    left:-5px;
    border:1px solid white;
    background-color:Red;
    color:White;
    padding:2px;
    font-size:12px;
    display: inline-flex;
    -webkit-display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    vertical-align: middle;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
	box-shadow:1px 1px 1px #333333;
	z-index:500;
}

.notifications-tickets-container
{
    width:100px;
    height:30px;
    position:relative;
    cursor:pointer;
    text-align:center;
    margin:0 auto;
}

.notifications-tickets-container-narrow
{
    width:70px;
    height:30px;
    position:relative;
    cursor:pointer;
    text-align:center;
    margin:0 auto;
}

.notifications-tickets-count
{
    
    position:absolute;
    top:-4px;
    right:-5px;
    border:1px solid white;
    background-color:#38afff;
    color:White;
    padding:2px;
    font-size:12px;
    font-weight:normal;
    display: inline-flex;
    -webkit-display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    vertical-align: middle;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
	box-shadow:1px 1px 1px #333333;
	z-index:500;
}

.notifications-list-container
{
    width:100%;
    max-width:800px;
    height:auto;
    margin:0 auto;   
}

.notifications-item-container
{
    cursor:pointer;
    background-color:#eeeeee;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin:5px;
    padding:5px;
}

.notifications-item-container-notify
{
    
    cursor:pointer;
    background-color:#33A5F7;
    color:White;
    font-style:italic;
    
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin:5px;
    padding:5px;
}

.notifications-item
{
    cursor:pointer;
    text-align:left;
    padding:20px 10px 0 10px;
    width:auto;
    position:relative;
}

.notifications-item-container-notify:hover, .notifications-item-container:hover
{
    background-color:blue;
    color:White;
}

/*end of notifications clases*/

/*Profile classes*/

.profile-item{
    font-size:28px;
    display:table-row;
}

.profile-item-narrow{
    font-size:14px;
    display:table-row;
}

.profile-item-label{
    
    width:30%;
    display:table-cell;
    text-align:right;
    padding:10px;
    color:#cccccc;
}

.profile-item-label{
    
    width:30%;
    display:table-cell;
    text-align:right;
    padding:10px;
    color:#cccccc;
}

.profile-item-content{
    display:table-cell;
    width:65%;
    padding:10px;
    
    text-align:left;
}

.profile-item input{
    font-size:28px;
    color:Purple;
}

.profile-item-narrow input{
    font-size:14px;
    color:Purple;
}


/*end of profile classes*/

.edit-image
{
    height:35px;
    width:40px;
    position:relative;
    overflow:hidden;
    background-image: url('../images/edit-icon-48.png');
    background-repeat: no-repeat;
    background-size: 90%;
    cursor:pointer;
}

.user-image
{
    height:40px;
    width:40px;
    position:relative;
    overflow:hidden;
    background-image: url('../images/person_ph_40.gif');
    border-radius: 50%;
    border:1px solid silver;
}

.user-initials
{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    zindex:0;
    z-index:1;
    opacity:1;
    font-weight:bold;
    color:Purple;
    font-style:normal;
    font-size:14px;
    text-align:center;
   
}

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}