 /* styles.css in tennis_APP/static/css */

div       /*
    styles.css
    Initial code generated by thesitewizard.com's Layout Wizard 3.0.0
*/
          tab here         
img { 
    max-width: 100% ;   
    max-width: inherit;
    width: 100%;
    height: auto ;
}
/*
input, select, button, textarea {
    max-width: 50% ;
}*/

input   {
    text-align:center;
}

meter, progress, output {
    max-width: 100% ;
}


html{
    
    height: 100vw;
}

div#tswsidecol {     /* side column which includes menu */
    text-align:center;
    display: inline-block;
    float: left;
    width: 10% ;
    color: #000 ;
    background-color: transparent ;
    margin-left: 0; margin-right: auto;
    padding-left: 5px ;
    padding-right: 5px ;
    height: 100%;
    
    
}

#weekchoice {     /* div of Week dropdown */
    text-align:center;
    float:none;
    width: 88% ;
    height:5.2vh;
    margin-right: 5%;
    padding-left: 3px ;
    padding-right: 3px ;
    background-color: #73CEFB; /*#73CEFB;*/
    color:#1F2739;
            
    border: 2px yellow groove;
    border-radius: 5px;        
    /*color: red; ;
    background-color: transparent ;*/
}

#weekchoice-staff {     /* div of Week dropdown --- Staff */

    display: inline-block;
    text-align: center;
    float:left;
    display:inline-block;
    margin-left: 25%;
    margin-top: 1.25%;
    background-color: #73CEFB;     /*#73CEFB;*/
    color:#1F2739;
    line-height: 1.2em;
    font-size:1em;
    font-weight:bold;
    height: 1.8%;
    width: 31%;
    padding: 0%;
    border-style:groove; border-width: 5px; border-color: yellow;  border-radius:15px; 
}
            
    /*color: red; ;
    background-color: transparent ;*/
    
/*    from tswheader2
    #tswheader2 {
    text-align: center;
    margin: 20px auto; 
    margin-bottom: 2px;
        
    line-height: 2em;
           dk bkue #1F2739; Dark Blue #414141;  #040505;   #99ccff;    
    background-color: #73CEFB;
    color:#1F2739;                yellow  #FB667A;   yellow #FB667A;  Blue  #4DC3FA  #1F2739     
               med Blue #4DC3FA;     #1F2739; lt blue  #2192FF     white    #FFFFFF;  Dar-blue  #1F2739; 
    font-family:"Comic Sans MS";
    font-size: 1.3em;
    font-weight:bold;
    height:2.3em;
    width: 25%;
    border: inset; border-width: 3px; border-color:black;


*/   
    

.weekof {     /* dropdown */
    text-align:center;
    float:none;
    width: 33%;
    height: 20%;
    margin-left: 0; margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #73CEFB;
    border:1px yellow inset;
    border-radius: 2px;                    /*  #4D608C;    #1F2739;*/
    color:#1F2739;
    font-weight:bold;    
    font-size: .9em;            
    /*color: red;
    background-color: transparent ;*/
}


#tswcontent {   /* content portion of form  (main column below banner) */
    float:left;
    display: inline-block;
    /*margin-left: 0; 
    margin-right: auto;*/
    width: 88%;
    /*height: 100%;*/
    color: #ffffff;
    background-color: transparent ;
    margin-top: -2%;
    margin-bottom: 0%;
}


option {
        background-color: #73CEFB;
        border-color: red;
        width: 80%;
        color:#1F2739;    
}

.mybutton {
    box-shadow: 1px 1px 1px 0px #f0f7fa;
    background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
    background-color:#33bdef;
    border-radius:6px;
    border:1px #057fd0 inset;
    display:inline-block;
    cursor:pointer;
    color: #1F2739;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    padding:1px;
    text-decoration:none;
    text-align: center;
    width: 100%;
    text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
    background-color: #FFF842;
    color: #403E10;
      font-weight: bold;
      box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
      transform: translate3d(6px, -6px, 0);

     transition-delay: 0s;
     transition-duration: 0.4s;
     transition-property: all;
  transition-timing-function:linear;

    
    /*background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
    background-color:#019ad2;*/
}

.myButton:active {
    position:relative;
    top:1px;
}

#page-data{
    width: 100%;
    display: inline-block;
    height: 100%;
    
}


#tableside   {
    display: inline-block;
    float:left; 
    width: 85% ;
    border-style :groove; 
    border-color:burlywood; 
    /*border:1000px;*/
    margin-left:9%;
    margin-top: 1%;
}
#courttimeside   {
    display: inline-block;
    float:left; 
    width: 35% ;
    /*height: 100%;*/
    border-style :groove; 
    border-color:burlywood; 
    /*border:1000px;*/
    margin-left:5%;
    margin-top: 1%;
}

    

.courttimetable {
    border-collapse: collapse; border-spacing: 0;
    text-align:center;
    table-layout: fixed;
    /*width: 100%; */
    
    margin-right:0;
    border:medium; border-style:groove; border-color:yellow;
    overflow: hidden;
    /*border-left:0;border-left-style:none;*/
}
    
.courttimetable th {    
    /*display:inline-block;*/
    text-align:center;
    /*border: o; border-style:none; border-color:pink;*/
    border:thin; border-style:solid; border-color:pink;
}

/*.courttimetable td:hover{

    background-color: #FFF842;
    color: #403E10;
    font-weight: bold;
    box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
    transform: translate3d(6px, -6px, 0);
    
    transition-delay: 0s;
        transition-duration: 0.4s;
        transition-property: all;
          transition-timing-function:linear;
}*/

.courttimetable tr:focus{
    background-color: white;
    color:black;
}



.courttimetable td {
    width:inherit;
    text-align: center;
    border:thin; border-style:solid; border-color:orange;
    
    
}

.courttimetable td input {    
    font-size: .85em;
    font-weight: 400;
    width: 100%;
    color: #e2a762;
    background-color:transparent;
    border:0;
    text-align:center;
    
    
}

.playerstable{ 
    display:inline-block;
    border-collapse:separate; 
    border-spacing: 0;
    text-align:center;
    table-layout: auto;
    width: 70%;
    /*margin-right:0;*/
    border:medium; border-style:groove; border-color:yellow;
    overflow:hidden;
}

.dropped_playerstable{
    display:inline-block;
    /*float:left;*/
    border-collapse:separate; 
    border-spacing: 0;
    text-align:center;
    table-layout:inherit;
    width: 80%;
    /*min-height: 50%;*/
    margin-top: -2%;
    margin-left:2%;    
    border:medium; border-style:dotted; border-color:red;
    overflow:hidden;
    padding-bottom: 20%;
}

.newplayerstable{ 
    display:inline-block;
    border-collapse:separate; 
    border-spacing: 0;
    text-align:center;
    table-layout: auto;
    width: 95%;
    height:20%;
    /*margin-right:0;*/
    border:medium; border-style:groove; border-color:yellow;
    overflow:scroll;
}




.playerstable tbody {
    display:inline-block;
    width: 100%;
    padding:1%;
    text-align:center ;
}

.playerstable tr {
    display:inline-block;
    width: 100%;
    text-align:center;
}

#anyarea1 {
    /*display:inline-block;*/
    width: 100%;
    color: #C07923;
    border: 0;
}

#playersside   {
    display: inline-block;
    overflow:hidden;
    float:left; 
    width: 52% ;
    height: 100%;
    border-style :groove; 
    border-color:burlywood; 
    border:thick; 
    /*border:1000px;*/
    margin-left:5%;
    margin-top: 1%;
}

#Aplayers{


    display: inline-block;
    overflow:hidden;
    width:27%;
    /*height: 100%;*/
    float:left;
    margin-top: 0;
    text-align: center;
}

#Bplayers{
    display: inline-block;
    overflow:hidden;
    width:27%;
    margin-left: 5%;    
    /*height: 100%;*/
    float:left;
    margin-top: 0;
    text-align: center;

}

#newplayers{
    display: inline-block;
    overflow:hidden;
    width:25%;
    margin-left: 0%;
    margin-top:0%;    
    height: 200em;
    float:left;
    margin-top: 0;
    text-align: center;

}


#dropped_players{
    display: inline-block;
    overflow:hidden;
    width:30%;
    margin-left: 12%;
    margin-top:10%;    
    /*height: 100%;*/
    float:left;
    margin-top: 0;
    text-align: center;
    border:0px;
    border-style:none;
    border-color:red;
}




/*
media only screen and (max-width: 629px) {
    div#tswsidecol {
        float: none ;
        width: 10% ;
    }
    div#tswcontent {
        float: none ;
        width: 80% ;
    }
} */
div#tswcontproper {
    padding-left: 5px ;
    padding-right: 5px ;
}
#tswcontainer {   /*Includes The left and main columns below the header*/
    display: inline-block;
    color: inherit;
    background-color: transparent ;
    width: 100%;
    margin-top: 1%;
    height: 100%;
    
}
/*
div#tswsideproper, div#tswothersideproper {
    padding-left: 5px ;
    padding-right: 5px ;
}
*/
.tswheader {
    width: 45%; 
    padding:1%; 
    height: 5%;
    text-align: center;
    margin: 10px auto;
    /*vertical-align: middle;*/
    line-height: 1.2em;
    background:#414141;               /* #040505;       #99ccff;    */
    color: #FFFFFF;                             /*blue #2192FF     white    #FFFFFF;*/;
    font-family:"Comic Sans MS";
    font-size:40px;
    font-weight:bold;
    /*height: 20px;*/
    border:inset; border-width: 1px; border-color: white;       /*#4DC3FA;*/
}
#tswheader2 {
    text-align: center;
    margin: 1% auto; 
    margin-bottom: 0px;
    /*margin-left: 0;*/
    /*vertical-align: middle;*/
    line-height: 2em;
          /* dk bkue #1F2739; Dark Blue #414141;  #040505;   #99ccff;    */
    background-color: #73CEFB;
    color:#1F2739;            /*    yellow  #FB667A;   yellow #FB667A;  Blue  #4DC3FA  #1F2739     */
           /*    med Blue #4DC3FA;     #1F2739; lt blue  #2192FF     white    #FFFFFF;  Dar-blue  #1F2739; */
    font-family:"Comic Sans MS";
    font-size: 1.3em;
    font-weight:bold;
    height:2em;
    width: 20%;
    border: inset; border-width: 3px; border-color:black;
}

 #tswheader2A {
    text-align: center;
    margin-left: 45%;
    margin-top:1%; 
    margin-bottom: 0px;
    /*margin-left: 0;*/
    vertical-align: middle;
    line-height: 1.2em;
          /* dk bkue #1F2739; Dark Blue #414141;  #040505;   #99ccff;    */
    background-color:#FFFF60; /*#73CEFB;*/
    color:#1F2739;            /*    yellow  #FB667A;   yellow #FB667A;  Blue  #4DC3FA  #1F2739     */
           /*    med Blue #4DC3FA;     #1F2739; lt blue  #2192FF     white    #FFFFFF;  Dar-blue  #1F2739; */
    font-family:"Comic Sans MS";
    font-size: 1.3em;
    font-weight:bold;
    height:1.3em;
    width: 10%;
    border: inset; border-width: 2px; border-color:firebrick;
    border-radius:6px;
    float:inherit;
    
    
}

 
 
 
 
 
 
 .ContentBox{display:-moz-inline-stack;display:inline-block;width:inherit;height:inherit;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}

/*
******************************************************************

    color: #000080 ;
    background-color: #000000 ;

*/

/*
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
*/


body {
    
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1.42em;
  color:#A7A1AE;
  background-color:#1F2739;
  top: 500px;
  background-image:
  url('https://www.esrassociates.com/tennis/static/images/TennisBalls1a.jpg'); 
  width: 100%;    
  display: inline-block;
 }


h1 {
  font-size: 1.3em; 
  font-weight: 500;
  line-height: .5em;
  text-align: center;
  /*color: #4DC3FA;*/
}

h2 {
  
  font-weight: 300;
  text-align: center;
  display: block;
  line-height: 2.1em;
  padding-bottom: 1em;
  
}

h2 a {
  font-weight: 700;
  text-transform: uppercase;
  color: #FB667A;
  text-decoration: none;
}

h3 {
  font-size:.8em; 
  font-weight: 300;
  text-align: center;
  display: block;
  line-height:1em;
  padding-bottom: 2em;
  color: #FB667A;
}

.grid {
    display: grid;
    width: 100%;
    height: 100%;
    margin-left: 0;
        margin-right: auto;
        margin-top: 0px; 
        margin-bottom: auto; 
    padding: 0px;
    
    grid-template-columns: 13%  7%  repeat(8, 1fr);  /*repeat(12, 1fr);*/
     grid-auto-rows: 35px;

    grid-auto-flow: row;      
    grid-gap: 5px; 
    /*align-content: stretch;*/
    }
    
/*grid-template-areas: "header header header header header header header header header header header header header header header" 
                         "row row row row row row row row row row row row"; */



/*
grid ~ div {
    display: inline-block;
    vertical-align: middle;    
}
*/



.nh {                        /* header cells, formerly div.header */
    /*grid-area: header;*/
    grid-row-start: 1;
      grid-row-end: 2;
      margin-top: 0;
      margin-bottom: 0px;
       /*height: 70px;*/      
  
    font-weight: bold;
    font-size: 1.1em;
    line-height: 0.5em;
    text-align: center;
       /*vertical-align:  middle;*/ 
    color: #4DC3FA;    /*yellow lt blue #4DC3FA;   #FB667A;   white; #FB667A;*/
    background-color: #1F2739;
    border:5px;
    border-color:orangered;
    /*display: inline;
    vertical-align: middle;*/ 
    
    }

.nr {
  /*grid-area: rowhead;*/
   
  grid-row-start: auto;
  grid-row-end: span 2;
 
  grid-column-start: 1;
  grid-column-end: 2;
 
  /*height: 110px;*/
  text-align: center;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 2%;
  
  /*background-color: #2C3446; */
  /*background-color: #323C50; */
  background-color: #1F2739;
  vertical-align: middle;
}

.nc1 {
  /*grid-area: rowhead;*/
  text-align: center;
  font-size: 1.0em;
  
  grid-column: 2 / span 1;    
  grid-row:  auto / span content 2;
  
  line-height: 1.1em;
  vertical-align: middle;
  height: 74px;
  font-weight: bold;
 
  margin-top: auto;
  margin-bottom: 2%;
  background-color: #323C50;  
    -webkit-box-shadow: 0 2px 2px -2px #0E1119;
       -moz-box-shadow: 0 2px 2px -2px #0E1119;
            box-shadow: 0 2px 2px -2px #0E1119;
}
    
.comment_div {

  height: 1em; 
  text-align:right;
  vertical-align:bottom;  
  width: 100%; 
  overflow:hidden;
  color: red;
  display: inline-block;
  margin-top:.1%;
}  
  
.comment_button{
    
    margin-top:0%;
    padding-top:0;
    font-size:x-large;
    color: red;
    background-color: transparent;
    border-style:none;
}  
  
.nc {
  /*grid-area: row;*/
  
 /* grid-column: auto 3 / content span 1;*/    
  /*grid-row: content 3 / content span 1;*/      

/*  grid-column: content 3 / content span 1;*/

  grid-row:  auto / span content 1;
  
  text-align: center;
  font-size: .9em;
  line-height: 1.8em;
  /*height: 45px;*/
  vertical-align: middle;
  font-weight: bold;
 
  margin-top: 0;
  margin-bottom: auto;
  background-color: #323C50;  
    -webkit-box-shadow: 0 2px 2px -2px #0E1119;
       -moz-box-shadow: 0 2px 2px -2px #0E1119;
            box-shadow: 2px 2px 2px -2px yellow;    /*#0E1119;*/
}

/*.grid>.nr:nth-child(even) {
    grid-column: 3 / span 1;
    color:black;
    background-color: yellow;
}
*/

/*.grid >  .nc1:nth-child(odd){
    grid-column: 3 / span 1;
    color:black;
    background-color: yellow;
}
*/

/*.grid >  .nc:nth-child(odd){
    grid-colulumn: 3 / span 1;
    color:black;
    background-color: yellow;
}
*/


.grid >.nr:hover, .nc1:hover, .nc:hover {

background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);

   transition-delay: 0s;
      transition-duration: 0.4s;
      transition-property: all;
  transition-timing-function:linear;
}

#courttime-locked {
    color: red;
    
}

/* Background-color of the odd rows 
container tr:nth-child(odd) {
.nr nth-child(odd) {    
      background-color: #323C50;


/* Background-color of the even rows 
.container tr:nth-child(even) {
.grid.nr nth-child(even) {
    background-color: #2C3446;
}
*/

/*
tr:nth-child(even)    {
    background-color: red;
{
    
}
tr:nth-child(odd)
    background-color: blue;
}
*/

/*
.grid   div:nth-of-type(odd) {
  background:#323C50;
}

.grid  div:nth-of-type(even) {
  background: #2C3446;
}
*/







.blue { color: #185875; }
.yellow { color: #FFF842; }


 div.header {
    grid-area: header;
    height: 100px;
    background-color: #1F2739;
     color: yellow;
}



/* ************************************************************ */

/*.container td, .container th {*/
.grid td, .grid th {   
      padding-bottom: 0%;
      padding-top: 0%;
    padding-left:0%;
      padding-right:0%;
      width: 85px;
     text-align:  center;
}


/*.container th { */
.grid th {
      background-color: #1F2739;
     /* height : 10px;*/
}

/*.container td:first-child {*/
    .grid td:first-child {
     /*color: #FB667A;*/ 
}    



@media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}

