body {
   font-family: 'Roboto', sans-serif; 
   font-size:1.3vw;
    background-color: #C0C0C0;
}
input[type=text],input[type=date],input[type=integer],input[type=tel],input[type=password],input[type=number],select {
  clear: both;
  padding: 0.5vw 0.5vw;
  margin: 0.5vw 0;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
  font-size:120%;
}
.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) ".golf"; 
}
#sr_container {
    width: 290px;
    display: table;
    margin: 0 auto 0 auto;
    padding-left: 6px;
}
.draw_wrapper {
    display: table;
    margin: 0 auto 0 auto;
}
.draw_details {
    display: table;
    margin: 0 auto 0 auto;
    color: #daa520;
    font-family: sansita, verdana;
    font-size: 2vw;
}
.summary_wrapper {
    display: inline-block;
    margin: 0 auto 0 auto;
    margin-left: 3px;
    border-radius:4px;
    border:2px solid green;
    float: left;
    padding: 4px 2px 2px 2px;
    text-align: center;
    min-width: 8vw;
    min-height: 8.5vw;
}
textarea {
  width:100%;
}
.openslogo {text-align: center;}

input[type=text]:focus {
  background-color: #DBE6E0;
}

a {
    color:green;
    text-decoration: none;
}
a:hover {
    color: darkgreen;
    font-weight: bold;
}
.make-bigger {
    font-size: 150%;
}
.make-smaller, .cut_off_date {
    font-size: 90%;
}
.make-tiny {
    font-size: 70%;
}
.make-red {
    color:red;
}
.make-green {
    color:green;
}
.make-orange {
    color:orange;
}

/* TAB BOX ELEMENTS */
.progress_buttons {text-align:center;margin-top:40px;}
.auto_overflow {overflow:auto;}
.float_right {margin:auto;}
.invalid {background-color: #ffdddd;}

/* Hide all steps by default: */
.tab {display: none;}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {opacity: 1;}
.step.finish {background-color: #4CAF50;}
/* END */



.right_pad {margin-right:9vw;}
#leftpad {
    min-width:5%;
    float: left;
}
#leftbox { 
    background:white; 
    width:70%; 
    margin: auto 5px auto auto;
    padding: 3px 6px 3px 2vw;
    float: left;
    border: 2px solid green;
    border-radius: 6px;
} 
#adbox {
    width:20%;
    float: left;
}
#hustlebox {
    border: 2px solid green;
    border-radius: 6px;
    min-height: 5vw;
    margin-bottom: 0.2vw;
    
}
#googleads {
    border: 2px blue solid;
    border-radius: 6px;
    min-height: 500px;
}
#rightpad {
    width:5%;
    float:right;
}

#rightbox { 
    font-family: sansita;
    font-size: 1.5vw;
    background:green; 
    max-width: 30%;
    margin: auto;
    padding: 3px 6px 3px 6px;
    display: flex;
    justify-content: space-between;
}
#rightbox a {
    color:white;
    text-decoration: none;
}
#rightbox a:hover {
    color: black;
    font-weight: bold;
}
#rightbox div {
    text-align: center;
    width: 25%;
}

#rightbox div:first-child {
    border-left: 0;
}

#rightbox div:last-child {
    border-right: 0;
}

#copyright { 
    clear: both;
    font-family: sansita;
    font-size: 1vw;
    background:green; 
    color: white;
    max-width: 30%;
    margin: auto;
    padding: 3px 6px 3px 6px;
    text-align: center;
}

#footer { 
    clear: both;
    font-family: sansita;
    font-size: 1vw;
    background:green; 
    color: white;
    max-width: 30%;
    margin: auto;
    padding: 3px 6px 3px 6px;
    display: flex;
    justify-content: space-between;
}
#footer a {
    color:white;
    text-decoration: none;
}
#footer a:hover {
    color: black;
    font-weight: bold;
}
#footer div {
    text-align: center;
    width: 25%;
}

#footer div:first-child {
    border-left: 0;
}

#footer div:last-child {
    border-right: 0;
}

.menu_inner {width: 33%; margin: 0 auto; background: lightgreen;text-align: center;}
.menu_left {float: left; text-align: center;}
.menu_right {float: right; text-align: center;}
.button_inner {width: 33%; margin: 0 auto; padding: 0; }
.button_left {float: left; text-align: left;}
.button_right {float: right; padding-right: 1.6vw; text-align: right;}
h1{ 
    color:green; 
    text-align:center;
    font-family: 'Sansita', sans-serif;
    font-size: 3vw;
} 
h2{ 
    color:green; 
    text-align:left;
    font-family: 'Sansita', sans-serif;
    font-size: 2vw;
} 
#entered_heading {
    font-family: 'Sansita', sans-serif;
}
.inp_std {
    font-size: 1.1vw;
}
.entry_text {
    float:left;
    width:10%;
}
.player_entry_name {
    float:left;
    width:22%;
}
.date {
    float:left;
    width:16%;
}
.club {
    float:left;
    width:24%;
}
.competition {
    float:left;
    width:30%;
}
.cost {
    float:left;
    text-align: right;
    width:7%;
}
.entries {
    float:left;
    text-align: right;
    width:8%;
}
.t_cost {
    float:left;
    text-align: right;
    width:7%;
}
.t_playing {
    float:left;
    text-align: right;
    width:8%;
}
.name {
    float:left;
    width: 33%;
}
.handicap {
    float:left;
    width: 12%;
}
.cdh {
    float:left;
    width: 15%;
}
.dob {
    float:left;
    width: 16%;
}
.underline {
    border-bottom: 1px solid black;
}
.line {
    padding: 4px 0px 4px 0px;
    clear: both;
}
.my_entries {clear: both;}
.button {
  font-family: sansita;
  background-color: green;
  border: none;
  color: white;
  padding: 0.5vw 2vw 0.7vw 2vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.6vw;
  margin: 1vw 0.2vw;
  cursor: pointer;
}
.smaller {
    font-size: 70%;
    color: red;
    position: relative;
    left: 0px;
    top: -0.4vw;
    z-index: 1;
}
#clear_it {
    background:#E0EEE0; 
    padding: 0;
    margin: 0;
    clear: both;
}
.ogtooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.ogtooltip .ogtooltiptext {
  visibility: hidden;
  width: 260px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -15px;
  left: 105%;
  margin-left: 3px;
}

.ogtooltip:hover .ogtooltiptext {
  visibility: visible;
}

#hideDiv {
    background:green; 
    margin:0 auto; 
    color:#fff; 
    padding:0.5vw; 
    text-align:left;
}

.checklabel {
	display:inline-block;
	border:2px solid #000;
	background:#f2f2f2;
	border-radius:2px;
	text-align:center;
	padding:0.5vw 0.7vw;
	font-size:1.9rem;
	box-shadow:0 0 5px 5px rgba(0,0,0,0.2);
	margin: 0 0 1vw 0;
	min-width: 30%;
}
.checklabel:hover {
	border-color:blue;
}

.hustlebox {
  text-align:center;
  float: left;
  font-size: 1.8vw;
  border-radius: 5px;
  text-decoration: none;
  color: black;
  background-color: #EEEEFF;
  box-shadow: 2px 2px 2px gray;
  margin: 3px 8px 13px 8px;
  display: block;
  padding: 11px 6px 9px 6px;
  width: 31%;
  min-height: 4vw;
}

.player_checkbox {
	right:10px;
	top:15px;
	width: 1.5vw;
	height: 2vw;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border:none;
	padding:0;
	border-radius:0;
	vertical-align: middle;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:transparent;
	background-position:-10em -10em;
	transition:.3s ease;
	outline:0;
}
.player_checkbox:focus + label{
	border-color:black;
} 
.player_checkbox:active + label {
	background-color: #ddd;
}
.player_checkbox:checked + label {
	background-color: seagreen;
	color:white;
}

.h-entered {background-color: green;color:white;}
.h-self-entered {background-color: seagreen;color:yellow;}
.is-available, .h-available {background-color: orange;color:black;}
.is-entered {background-color: red;}
.is-requested {background-color: yellow;}
.is-restricted {background-color: blue;color:white;}
.is-early, .make-early {background-image: url("../images/early.png"); background-repeat:no-repeat; background-position: top left;}
.is-late, .make-late {background-image: url("../images/late.png"); background-repeat:no-repeat; background-position: top right;}

.aged {background-color: lightgrey;}

.figure_container{
  
  display: -webkit-box;  
  display: -webkit-flex;
  display: -ms-flexbox;
  
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
} 

figure{
    float: left;
    width:24%;
    border-radius:4px;
    border:2px solid green;
    position:relative;
    padding:3.4vw 0.6vw 0.6vw;
    margin: 0 0.2vw 0.2vw 0;
    overflow: hidden;
}

figure:before {
    content: attr(data-title);
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 3vw;
    line-height: 3vw;
    text-indent: 0.6vw;
    border-bottom: 2px solid limegreen;
}
.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 2.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.3em;
}
.text-concat-notes {
   max-height: 8em; /* (Number of lines you want visible) * (line-height) */
}

/* pop up tee time forms
*/

.form-popup {
  display: none;
  position: fixed;
  margin-left: -100px;
  margin-bottom: 50px;
  bottom: 0;
  left: 50%;
  border: 3px solid #f1f1f1;
  z-index: 9;
  background-color: limegreen;
}
/* Add styles to the form container */
.form-container {
  max-width: 200px;
  padding: 10px;
}

@media only screen and (max-width: 1150px) {
  body {font-size: 1.7vw;}
  figure {width:33%;}
  #footer, #copyright {font-size:1.5vw;min-width: 50%;}
}
@media only screen and (max-width: 1040px) {
  .hustlebox {font-size: 2vw; min-width:47%;}
}
@media only screen and (max-width: 820px) {
  .hustlebox {font-size: 2.3vw; min-width:46%;}
}
@media only screen and (max-width: 950px) {
  body {font-size: 1.9vw;}
  #rightbox {font-size: 1.7vw;}
  figure {width:49%;}
  .button {font-size: 2.2vw;}
  h1 {font-size: 4vw;}
}
@media only screen and (max-width: 820px) {
  body {font-size: 2.1vw;}
  .button {font-size: 3.2vw;}
  #rightbox {font-size: 2.2vw;max-width: 50%;}
  figure {padding-top:4vw}
  figure:before {height: 3.8vw;}
  h1 {font-size: 4.5vw;}
}
@media only screen and (max-width: 720px) {
  body {font-size: 3vw;}
  .hustlebox {font-size:3.5vw;}
  #lefpad, #rightpad {width: 0px;}
  #leftbox, #adbox {width: 100%;}
  #rightbox {font-size: 3.2vw;max-width: 60%;}
  figure {width:49%;}
  figure:before {height:4.4vw;}
  .button {font-size: 3.7vw;}
  h2 {font-size: 3.7vw;}
  input[type=text],input[type=date],input[type=integer],select {font-size:110%;}
  h1 {font-size: 7vw;}
  #footer, #copyright {font-size:3vw;min-width: 100%;}
}
@media only screen and (max-width: 500px) {
  body {font-size: 5vw;}
  .hustlebox {min-width:95%;font-size:5vw;}
  #leftbox {width: 100%;}
  #rightbox {font-size: 4.2vw;max-width: 90%;}
  figure {width:99%;line-height: 100%;padding-top:8vw;overflow:hidden;}
  .button {font-size: 5.7vw;}
  h2 {font-size: 5.7vw;}
  figure:before {height: 8vw;line-height: 7vw;}
  .ogtooltip .ogtooltiptext {width: 100px; font-size:80%;}
  input[type=text],input[type=date],input[type=integer],select {font-size:90%;}
  .text-concat {max-height: 1.3em;line-height: 1.3em;}
  h1 {font-size: 7vw;}
  #footer, #copyright {font-size:4vw;min-width: 100%;}
  .make-bigger {font-size:100%;}
  .cut_off_date {font-size: 60%;}
}
@media only screen and (max-width: 360px) {
  body {font-size: 7vw;}
  .button {font-size: 6.5vw;}
  figure {padding-top:10vw;}
  figure:before {height: 10.5vw;padding-top:1.2vw;}
  .button_inner {width: 38%; margin: 0 auto; padding: 0; }
}