@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; 
}

input:-webkit-autofill::first-line {
  font-family: 'Helvetica Neue', 'Arial', Arial, sans-serif !important;
  font-size: 20px !important;
}

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:10px;
    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: 0px;
   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.edit-del-control{
    position: absolute;
    bottom: 0;
    right: 0;
    width:60px;
    height:27px;
    padding:3px;
    display:flex;
    justify-content:space-evenly;
 }
 
  div.host-del-control{
    position: absolute;
    bottom: 0;
    right: 0;
    width:90px;
    height:27px;
    font-size:12px;
    padding:3px;
    display:flex;
    justify-content:space-evenly;
    
 }
 
 div.host-del-control div{
    padding:0px 3px 0px 3px;
    }
 
 div.host-control{
    width:50px;
    font-size:12px;
    display:flex;
    justify-content:center;
    
 }
 
 div.scores-grid
 {
    display:flex;
    justify-content:center;
    padding:40px 10px 0px 10px;   
 }
 
 div.rounds-grid{
    display:flex;
    overflow-x:auto;
    padding-bottom:20px;
 }
 
 div.round-scores{
    width:110px;
    margin:auto;
 }
 
  div.quiz-scores{
    width:70px;
 }
 
 div.round-header
 {
     height:100px;
     padding-top: 10px;
     border-top-left-radius:10px;
     border-top-right-radius:10px;
 }
 
  .round-header b{
    font-size:20px;
 }
 
   .round-header div{
    font-size:20px;
 }
 
 div.teams-list{
    min-width:250px;
 }
 
 div.team-name
 {
     height:40px;
     font-size:18px;
     display:flex;
     justify-content:space-between;
     position:relative;
     max-width:250px;
     padding-top: 10px;
     padding-left:5px;
     border-top-left-radius:10px;
     border-bottom-left-radius:10px;
 }
 
 div.team-name div{
    overflow:hidden;
    text-align:left;
    max-width:200px;
    }
    
div.team-handicap-container{
    height:27px;
    width:20px;
}

div.team-handicap-container-selector{
    height:27px;
    width:20px;
    position:absolute;
    bottom:0 !important;
    left:0;
    padding-left:2px !important;
}
 
 div.team-handicap{
    font-weight:normal;
    font-size:14px !important;
    color:red !important;
    padding-left:2px !important;
    padding-top:4px !important;
 }
 
 div.team-handicap-plus{
    font-weight:normal;
    font-size:14px !important;
    color:green !important;
    padding-left:2px !important;
    padding-top:4px !important;
    z-index:100;
 }
 
 div.round-score
 {
     height:40px;
     display:flex;
     justify-content:space-evenly;
     font-size:20px;
     padding-top: 10px;
 }
 
 .round-score-end{
    height:40px;
     display:flex;
     justify-content:space-evenly;
     font-size:20px;
     padding-top: 10px;
     border-top-right-radius:10px;
     border-bottom-right-radius:10px;
 }
 
 .round-score, .round-score-end b{
    font-size:24px;
 }
 
 div.round-score-left
 {
     width:20px;
     text-align:right;
 }
 
  div.round-score-middle
 {
     width:45px;
     z-index:100;
 }
 
  div.round-score-right
 {
     width:30px;
     margin-left:-3px;
 }
 
 .round-score-highlight{
    background-color: Aqua;
 }
 
 div.round-holder
 {
     font-size:16px;
     padding-top:7px;
     background-color:Purple;
     color:White;
     width:55px;
     height:25px;
     border-radius:7px;
     margin-top:-3px;
     margin-left: -5px;
 }
 
 div.joker
 {
     height:30px;
     width:32px;
     background-image: url("../images/joker_sml.jpg");
     background-repeat:no-repeat;
 }
 
 div.joker:hover
 {
     opacity:0.3;
     cursor:pointer;
 }
 
  div.add-joker
 {
     height:30px;
     width:32px;
     
 }
 
 div.add-joker:hover
 {
     background-image: url("../images/joker_sml.jpg");
     background-repeat:no-repeat;
     opacity: 0.3;
     cursor:pointer;
 }
 
 div.joker-star
 {
     height:30px;
     width:32px;
     background-image: url("../images/redstar.jpg");
     background-repeat:no-repeat;
     position:relative;
 }
 
 div.joker-star-score
 {
     position:absolute;
     top: 50%;
     left:50%;
     transform: translate(-50%, -50%);
     color:Yellow;
 }
 
 div.pass
 {
     height:49px;
     width:32px;
 }
 
 div.pass:hover
 {
     opacity:0.9;
     cursor:pointer;
     background-image: url("../images/pass_sml.jpg");
     background-repeat:no-repeat;
 }
 
 div.add-pass
 {
     height:49px;
     width:32px;
 }
 
 div.add-pass:hover
 {
     background-image: url("../images/pass_sml.jpg");
     background-repeat:no-repeat;
     opacity: 0.9;
     cursor:pointer;
 }
 
 div.user-controls
 {
     padding:25px;
 }

 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.quiz-title
{
    font-size:32px; 
    padding:5px;  
}

div.quiz-date
{
    font-size:24px;   
}

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:center;
    -webkit-justify-content: center;
}

div.quiz-form{
    margin-top:50px;
    margin:0 auto;
    display:flex;
    
    flex-wrap:wrap;
    flex-direction: column;
}

div.form-input-row{
    display:flex;
    justify-content:center;
}

div.form-input-label{
    width:200px;
    font-size:24px;
    padding:15px 10px 10px 10px;
    text-align:right;
}

div.form-input-content{
    min-width:500px;
    padding:10px;
    text-align:left;
}
.form-input-content input{
    font-size:24px;
    color:Blue;
    width:500px;
}

.form-input-content div{
    font-size:24px;
    padding:5px 10px 0px 10px;
    color:Blue
}

.form-input-checkbox{
    font-size:48px;
}

 .CheckBoxLabelClass{
    background: url("../images/unchecked.png") no-repeat;

    height: 50px;   
    width: 50px;
    display: block;
}

.CheckBoxLabelClass:hover{
    text-decoration: underline;
}

.LabelSelected{
     background: url("../images/checked.png") no-repeat; 

    height: 50px;   
    width: 50px;
    display: block;

}

div.team-selector-container{
    display:flex;
    justify-context: space-evenly;
    flex-wrap:wrap;
}

div.team-selector{
    width:200px;
    border:2px solid blue;
    border-radius:5px;
    margin: 0 10px 10px 0;
    text-align:center;
    cursor:pointer;
    position:relative;
    padding:5px 5px 25px 5px;
}

div.team-selector:hover{
    color:Red;
    border:2px solid red;

}





.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;
}


.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;
}



.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:3px 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:red;
	border: 3px solid red;
	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;
}






.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:300px;
    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;
    color:Black;
    font-size:24px!important;
    -moz-border-radius:5px;-webkit-border-radius:5px;
	padding: 5px 10px 5px 10px;
	*padding: 2px 4px 2px 4px;    
    margin:10px;  
    width:200px;
    height:40px;
    text-align:center;
 }

.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
{
    position:fixed; 
    top:35%; 
    left: 40%;
    width:400px;
    background-color:white;
    display:none;
    padding:40px;
    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;   
}


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

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



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;   
}


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




/*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;
}

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;
}

div#overlay {
    /*background-color: rgba(1, 1, 1, 0.2);*/
    /*background: radial-gradient(white,silver);*/
    background:radial-gradient(rgba(255,255,255,1) 30%, rgba(94,81,77,0.7)); 
    opacity:0.8;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index:1000000;
}

div#quizzer_spinner {
    width:184px;
    height:77px;
    background-image: url('../images/monkey_count.gif');
    background-repeat:no-repeat;
    left: 50%;
    position: fixed;
    top: 50%;
    bottom: 0;
    right:0;
    transform: translate(-50%, -50%);
    z-index:1000001;
}