/*

  ELEMENT DEFINITIONS

*/

  /* Smooth Scrolling */
  html { scroll-behavior: smooth }
  @media screen and (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    /*background-color: #fcfcfc;*/
    border: none;
    color: #000;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:  14px;
    line-height:  normal;
    overflow-x: hidden;
    background: rgb(253,253,253);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(239,239,239,1) 0%, rgba(244,244,244,1) 3%, rgba(253,253,253,1) 50%, rgba(244,244,244,1) 97%, rgba(239,239,239,1) 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(239,239,239,1) 0%,rgba(244,244,244,1) 3%,rgba(253,253,253,1) 50%,rgba(244,244,244,1) 97%,rgba(239,239,239,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(239,239,239,1) 0%,rgba(244,244,244,1) 3%,rgba(253,253,253,1) 50%,rgba(244,244,244,1) 97%,rgba(239,239,239,1) 100%);
  }

  a,
  a:link { color:#00B2EB; text-decoration:underline; }
  a:visited { color:#00B2EB; text-decoration:underline; }
  a:hover { color:#00B2EB; text-decoration:underline; }
  a:active { color:#00B2EB; text-decoration:underline; }

  .underline { text-decoration: underline; }

  a.dropdown-toggle { text-decoration: none; }

  h1, h2, h3, h4, h5, h6 {
    display: block;
    color: #000;
    background-color: transparent;
    font-weight: 400;
  }

  h1	{
    color:#003c78;
    font-size: 2.5em;
    line-height: 1em;
    padding:5px;
  }
  h2	{
    color:#003c78;
    font-size: 1.75em;
    line-height: 1em;
    padding:5px;
    margin-bottom:0;
  }
  h3	{
    color:#003c78;
    font-size: 1.25em;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    padding:5px;
    margin-bottom:0;
  }

  h4	{ font-size: 1em; font-weight: normal; }
  h5	{ font-size: 0.75em; }
  h6	{ font-size: 0.5em; }

  ol li {
    line-height: 1.2em;
    margin: 3px 0; }

  form { margin: 0; padding: 0; }
  img  { border:none; }

  select, option, input, textarea {
    font-size:1em;
    font-family:tahoma, arial, helvetica, sans-serif;
    /* background-color:#FFF; breaking select boxes*/
    /* color:#000; breaking select boxes*/
    margin-left:0;
  }
  textarea { overflow: auto; }

/* Volunteer Form */
  .mReg { padding:0; margin:0; }
  .mReg li { clear:both; list-style:none; list-style-image:none; margin:5px 0; padding:2px; }
  .mReg li label { float:left; width:40%; text-align:right; padding:0 2px 0 0; margin:0; }

  li.mRegLOnly { width:99%; text-align:left; margin:0; padding:0; }
  li.mRegROnly { width:99%; margin:0; margin-left:40%; padding:0; }
  div.mRegAlert { margin:0 0 1em 40%; padding:0; color:#C00; text-align:left; background-color:#FFF; }

  div.mRegRadio { width:50%; text-align:left; margin:0 0 1em 40%; padding:1px 4px; }
  div.mRegRadio input { vertical-align:middle; }
  div.mRegRadio img   { margin:2px 2px 0 4px; }

  div.mRegRadioWide 			 { width:100%; text-align:left; margin:0 0 1em 0; padding:1px 4px; }
  div.mRegRadioWide input { vertical-align:middle; margin:0; padding:0; }
  div.mRegRadioWide table { display:inline;margin:0;padding:0; }
  div.mRegRadioWide img   { margin:2px 2px 0 4px; }

  div.mRegRadioHoriz 			 { display:inline; margin:0; padding:4px 8px; border:1px solid #eee; }
  div.mRegRadioHoriz input { vertical-align:middle; }
  div.mRegRadioHoriz img   { margin:2px 2px 0 4px; }

  #align_letf { display:none!important; }
/* Volunteer Form */


  #mass-emailer .metro h1 {
    font-size: 2em;
  }

  #mass-emailer .metro h2 {
    font-size: 1.6em;
  }

  #mass-emailer .metro .row {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-gap: 2.5%;
  }

  #mass-emailer .metro div.floatright .row {
    grid-template-columns: 45% 45%;
    grid-gap: 5%;
  }

  #mass-emailer .metro .row.single {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  #mass-emailer .metro .row.triple {
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-evenly;
  }

  #mass-emailer .metro .row.four {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #mass-emailer .metro .row.top {
    align-items: start;
  }

  #mass-emailer .metro .row.top > div.center > div.grid {
    max-height: 220px;
    overflow-y: auto;
  }

  #mass-emailer .metro .row label.strong {
    font-weight: 700;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1px;
    justify-content: center;
    align-items: center;
  }
  #mass-emailer .metro .row.two label.strong {
    grid-template-columns: 1fr 1fr;
  }

  #mass-emailer .metro .row label.strong > input {
    justify-self: right;
    margin: 0 5px 0 0;
  }

  #mass-emailer .metro .row label > span {
    text-align: left;
  }

  #mass-emailer .metro .row > label {
    text-align: right;
  }

  #mass-emailer .metro .row .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
    justify-content: center;
    align-items: center;
  }

  #mass-emailer .metro .row .grid.triple {
    grid-template-columns: 1fr 1fr 1fr;
  }

  #mass-emailer .metro .row .grid.double {
    grid-template-columns: 1fr 1fr;
  }

  #mass-emailer .metro .row .grid.single {
    grid-template-columns: 1fr;
    justify-content: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #mass-emailer .metro .row .grid label,
  #mass-emailer .metro .row .grid.double label {
    grid-template-columns: 1fr 6fr;
    padding: 2px 1px;
  }

  #mass-emailer .metro .row .grid.double label,
  #mass-emailer .metro .row .grid.single label {
    display: grid;
    grid-template-columns: 1fr 9fr;
  }

  #mass-emailer .metro .row .grid {
    text-align: left;
  }

  #mass-emailer .metro .row .grid label {
    align-self: center;
    justify-self: stretch;
    overflow: hidden;
  }
  #mass-emailer .metro .row .grid label * {
    max-width: 98%;
    overflow-x: hidden;
    display: inline-block;
    align-self: center;
  }

  #mass-emailer .metro label.highlighted {
    background-color: #B5E9F9;
  }

  #mass-emailer .metro .grid label.highlighted {
    background-color: #FFD25D;
  }

  #mass-emailer .metro label.highlighted + div {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5e9f9+0,f0f0f0+100 */
    background: #6ed4f3; /* Old browsers */
    background: -moz-linear-gradient(top, #6ed4f3 0%, #f0f0f0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6ed4f3 0%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6ed4f3 0%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ed4f3', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
  }

  #mass-emailer .metro .row > select,
  #mass-emailer .metro .row > label {
    font-size: 1.15em;
    line-height: 1.3em;
  }

  #mass-emailer .metro .row > select,
  #mass-emailer .metro .row > select option {
    padding: 3px
  }

  #mass-emailer .metro .row.functions button,
  #mass-emailer .metro .row input[type=text],
  #mass-emailer .metro .row a.button,
  #mass-emailer .metro .row input[type=submit] {
    font-size: 1.35em;
    line-height: 1.5em;
  }

  #age_sub_filter,
  #product_sku_sub_filter {
    border-top:1px solid #AAA;
  }

  #mass-emailer .metro .grid.clean,
  #mass-emailer .metro .grid.filter-list {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 1%;
    justify-content: center;
    align-items: center;
  }

  #mass-emailer .metro .grid.clean {
    grid-row-gap: 0.5em;
  }

  #mass-emailer .metro .grid.clean label,
  #mass-emailer .metro .grid.clean input,
  #mass-emailer .metro .grid.clean select,
  #mass-emailer .metro .grid.filter-list * {
    margin: 0;
    padding: 0.25em;
  }

  #mass-emailer .metro .grid.clean label,
  #mass-emailer .metro .grid.clean input,
  #mass-emailer .metro .grid.clean select,
  #mass-emailer .metro .grid.filter-list h2 {
    font-size: 1.3em;
    line-height: 1.35em;
  }
  #mass-emailer .metro .grid.clean label,
  #mass-emailer .metro .grid.filter-list h2 {
    text-align: right;
  }


  #mass-emailer .metro .grid label.top {
    align-self: start;
  }

  #mass-emailer .metro .full button {
    width: 100%;
  }

/* Microsoft at it again.... hopefully this helps! - makes the options visible on massemail page in MS Edge */
@supports (-ms-ime-align:auto) {

  #mass-emailer .metro .row.top > div.center > div.grid {
    max-height: none;
  }

}


/* Table */

.metro .table.hovered tbody tr {
  -webkit-transition: background-color 0.45s ease;
  -o-transition: background-color 0.45s ease;
  -moz-transition: background-color 0.45s ease;
  transition: background-color 0.45s ease;
}

.metro .table.hovered tbody tr:hover {
  background-color: rgba(28, 183, 236, 0.1);
  -webkit-transition: background-color 0.45s ease;
  -o-transition: background-color 0.45s ease;
  -moz-transition: background-color 0.45s ease;
  transition: background-color 0.45s ease;
}

.metro table.striped tr.hovered:hover,
.metro div.hovered:hover,
.metro ul.hovered li:hover,
.metro ol.hovered li:hover,
.metro li.hovered:hover,
.metro tr.hovered:hover,
.metro .table.hovered-cells tbody tr td:hover {
  background-color: rgba(28, 183, 236, 0.1);
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  -moz-transition: all 0.45s ease;
  transition: all 0.45s ease;
}/*A*/

/* Calendar */

  .metro table.table.month tbody tr td {
    padding: 3px 4px;
  } /* Overwrite metro padding on tables*/

  .metro table.table.month .listview-outlook .list-group .group-title {
    padding-right: 0;
  }

  .metro table.table.month .listview-outlook .list-group .group-heading {
    font-size: 0.8em;
    font-weight: normal;
    background-color: #ededed;
    padding: 2px;
  }

  .metro table.table.month .listview-outlook .list-group .group-heading .floatright,
  .metro table.table.month .listview-outlook .list-group .group-title .floatright {
    margin: 0;
    padding: 1px 4px;
  }

  .metro table.table.month .cal-location {
    color: #111111;
    font-size: 0.9em;
    line-height: 1em;
  }



  /*
  .metro table.table.month .cal-on .listview-outlook .list-group .group-heading [class*="icon-"],
  .metro table.table.month .cal-on .listview-outlook .list-group .group-title [class*="icon-"] {
    margin: 3px 3px 0 0;
  }
  */

  /* Smallest is just a little smaller for calendar */
  .metro table.table.month td .smallest {
    font-size: 0.7em;
    line-height: 1.35em;
    margin-bottom: 5px;
  }

  .cal-border-bottom {
    padding-bottom: 3px;
    border-bottom: 1px solid #efefef;
  }

  .cal-nav    {
    font-size: 1em;
    margin: 0;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .cal-nav td {
    border: none;
    vertical-align: middle;
    text-align: center;
  }
  .cal        {
    font-size:1em;
    margin:0;
    padding:0;
    width:100%;
    border:none;
    background-color:#EEE;
    color:#000;
    text-align:left;
  }
  .cal-head   {
    background-color:#AAAAAA;
    color:#FFF;
    width:14%;
    text-align:left;
  }

  table.table .cal-head {
    text-align: center;
  }

  .cal-on {
  }
  .cal-off    {
    background-color:#EEE;
    color:#000;
    width:14%;
    text-align:left;
  }
  .cal-off td {
    border:none;
  }
  .cal-alert  {
    color:#000;
    text-align:right;
    height:50px;
    background: url("../pub/images/headerbg.jpg") repeat-x scroll right bottom #efefef;
  }
  .cal-week   {
    background-color:#FFF;
    color:#000;
    width:90%;
    text-align:left;
  }
  .cal-week-date  {
    font-weight:bold;
    text-align:right;
    padding:0;
    margin:0;
  }
  .cal-month-date {
    font-weight:bold;
    text-align:left;
  }
  .cal-hilite {
    background-color:#ABD2FA;
    color:#16499A ;
    width:14%;
  }

  .cal-hilite .list-group {
    background-color:#ffffff!important;
  }

  .cal-entry {
    position: relative;
    text-align: left;
    width: 100%;
    max-height: 200px;
    /*border: 1px solid #cccccc;
    background: #f5fafe none; */
    float: left;
    margin: 0;
    padding: 3px 3% 3px 3%;
    color: #000000;
    font-size:0.82em;
    line-height: 1.15em;
  }

  /* WEEK ENTRY VIEW */
  .table.week .cal-entry {
    width: 130px;
    padding: 3px;
    margin: 0 5px 5px 0;
    float: left;
    min-height: 50px;
  }
  .table.week .cal-entry-game {
    width: 130px;
    padding: 3px;
    margin: 0 5px 5px 0;
    float: left;
    min-height: 50px;
  }
  .table.week .cal-entry-game:hover,
  .table.week .cal-entry-game:active {

  }

  .table.week .cal-entry.top {
    width: 100%;
    min-height: 30px;
  }


  .metro .table.week .cal-on > .smallest {
    margin-top: 3px;
    margin-bottom: 3px;
    border-bottom: 1px solid #dedede;
  }

  .metro .table.week .smallest a.button {
    margin-top: 5px;
  }

  /*	.cal-on .cal-entry:first-child {
      border-width: 1px 1px 0 1px;
      padding-bottom: 5px;
        }
        .cal-on .cal-entry:last-child {
          border-width: 0 1px 1px 1px;
          padding-top: 5px;
        }
        .cal-on .cal-entry.top {
          border-top-width: 1px;
        }
  */


  .cal-entry-game {
    position: relative;
    text-align: left;
    width: 100%;
    max-height: 200px;
    border: 1px solid #cccccc;
    float: left;
    margin: 2px 0;
    padding: 3px 3% 3px 3%;
    color: #000000;
    background-color: #f5fafe;
    font-size:0.82em;
    line-height: 1.15em;
    -moz-box-shadow: 0px 6px 10px -9px #7498cc;
    -webkit-box-shadow: 0px 6px 10px -9px #7498cc;
    box-shadow: 0px 6px 10px -9px #7498cc;
  }

  .cal-entry-game > .full-size.image-right.image-button.small {
    font-size: 0.9em;
    line-height: 1.35em;
  }

  .cal-entry-game:hover,
  .cal-entry-game:active {
    background-color: #ffffff;
    -moz-box-shadow: 0px 5px 12px -5px #22467a;
    -webkit-box-shadow: 0px 5px 12px -5px #22467a;
    box-shadow: 0px 5px 12px -5px #22467a;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  .metro .cal-entry-game .button.small {
    padding: 0;
    margin: -1px 0 4px 4px;
  }

  .cal-btn:hover  {
    background-color:#EEE;
    padding:3px 6px;
    border:1px solid #EEE;
  }
  .cal-btn        {
    background-color:#FFF;
    padding:3px 6px;
    border:1px solid #EEE;
  }
  .cal-more-info  {
    position:relative;
    float:right;
    margin:2px;
    width:16px;
    height:16px;
    background:transparent url(../pub/images/ui-icons_222222_256x240.png) 0 0 no-repeat;
    background-position: -176px -192px;
  }
  .cal-no-more-info {
    display:block;
    float:right;
    margin:2px;
    width:16px;
    height:16px;
    background:transparent url(../pub/images/ui-icons_222222_256x240.png) 0 0 no-repeat;
    background-position: -208px -192px;
  }

  .cal-text-cancel  {
    position:relative;
    float:right;
    margin:2px;
    width:16px;
    height:16px;
    background:transparent url(../pub/images/ui-icons_222222_256x240.png) 0 0 no-repeat;
    background-position: -128px -96px;
  }

/* Calendar */
  .game_info     { padding:5px; }
  .game_info p   { margin-left:5px; }

  .text_info     { padding:5px; }
  .text_info p   { margin-left:5px; }
  .cal-send-text { }
  .sms_message   { background-color:#CCC; padding:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

  .facility_booked { background-color: #cfd4ad !important; }
  .sub_table { border-top:1px solid #BBB; border-left:1px solid #BBB; color:#666; margin:0 0 0 50px; }
  .sub_table th.rightborder { border-right:1px solid #BBB; }


  .sms_history { }
  .sms_history td { text-align:left; padding:2px; }
  .sms_history th { text-align:left; background-color:#efefef; padding:2px; }


/* Large Selection */
  table.large_selection { width:600px; margin:0 auto; }
  table.large_selection h1 { text-align:center; background-color:transparent; color:#00B2EB; font-size:1.8em; }

  ul.large_selection { margin:0; padding:0; list-style:none; text-align:left; font-family:Arial, Helvetica, sans-serif; color:#00B2EB; }
  ul.large_selection li { padding:5px 20px 5px 0px; width:auto; display:inline-block; border:1px solid #fff; }
  ul.large_selection label { padding:0 0 0 5px; font-size:2em; color:#00B2EB;  }

  ul.large_selection li.selected { background-color:#CfCfCf; border:1px solid #00B2EB; }

  .large_button { padding:8px 1em; font-size:1.5em; font-family:Arial, Helvetica, sans-serif; border-color:#00B2EB; font-weight:bold; background-color:#4D4D4D!important; color:#fff; }
  td.archived_seasons { display:none; }


/* Selected attribute on tables */
  .metro .selected,
  .metro .selected td { background-color: rgba(28, 183, 236, 0.1); }


/* REF ASSIGNMENT */
  .metro #day-tabs ul.tabs li a {
    font-size: 0.9em;
  }

  /* For the Viewport in the pop-up */
    .row.ntm.viewport {
      position: relative;
      max-height:280px;
      overflow-y: hidden;
    }

    .row.ntm.viewport > div.span12 {
      padding-bottom: 8px;
    }

  /* For the Table data in the viewport in the pop-up */
    .row.ntm.viewport.scrollable {
      overflow-y: auto;
    }

    .row.ntm.viewport.scrollable table {
      margin-bottom: 0!important;
      padding-bottom: 0;
    }


  fieldset.ref_assign_by_day legend { font-size:1.2em; line-height:normal; margin-bottom:0; padding:0 15px 0 10px;  }
  fieldset.ref_assign_by_day legend strong { font-size:1.6em; }
  fieldset.ref_assign_by_day h2 { background-color:transparent; font-size:1.1em; }

  div.currentPage { border:1px solid #CCCCCC; background-color:#EEEEEE; padding:5px 10px; margin:0 auto; width:auto; vertical-align:middle; text-align:left; display:block; }
  div.currentPage a.replace { display:inline; font-size:1em; margin:0; padding:0; background-color:transparent; text-decoration:underline !important; }
  div.currentPage p { margin:3px 0 4px 0; padding:0; }
  div.currentPage p span { margin:0 10px; padding:0; }
  div.currentPage .input_submit {padding: 3px 10px; }

  span.centered { display:block; margin:0; padding:0; text-align:center; }

  /* tabs */
    .tabtop 	 { list-style: none; padding:0; margin:0; }
    .tabtop li { float:left; position:relative; top:3px; margin: 0 -1px 0 0;  padding:4px ; background-color:#f6f6f6;
                border: 1px solid #000; border-bottom-width: 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; }

    .tabtop li a { text-decoration:none; padding:4px 8px 4px 8px; background-color:transparent; }

    .tabtop .tabselected { position:relative;top:1px; border: 1px solid #000;padding-top:4px;border-bottom-width: 0; background-color: white; }

    .tabbottom { list-style: none;padding:0; margin:0 0 50px 0; }

    .tabbottom li { float: left; padding: 4px; margin: 0 -1px 0 0; border: 1px solid #000; background-color:#f6f6f6;
                    border: 1px solid #000; border-top-width: 0; -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; }

    .tabbottom li a { text-decoration:none; padding:4px 8px 4px 8px; }

    .tabbottom .tabselected { position:relative; top:-1px; padding-top: 3px;padding-bottom: 4px;border: 1px solid #000;border-top-width: 0;background-color:#FFF; }

    .tabcontent { clear:both; border: 1px solid; padding:5px; background-color:#FFF; z-index:10; }

    .day-stats > span {
      padding: 0 3px;
    }
    .day-stats > span:first-child {
      border-radius: 4px 0 0 4px;
    }
    .day-stats > span:last-child {
      border-radius: 0 4px 4px 0;
    }

    #rptRefPayrollConfirmedDivn,
    #rptRefPayrollCancelledDiv,
    #rptRefPayrollUnconfirmedDiv { display:none; }

    /* NOT IN USE:
        .tblRefPayroll { width:100%; border:1px solid #999; margin:0 auto; clear:both; border-collapse:collapse; }
        .tblRefPayroll caption { text-align:center; margin:0 auto; color:#fff; padding:5px; background-color:#000; }
        .tblRefPayroll td { padding:1px; font-size:0.8em; border:1px solid #eee; }
        .tblRefPayroll th { padding:1px; border-bottom:3px double #999; background-color:#eee; text-align:left; font-size:0.8em; }
    */

  /* REPORT NOTES */
    #note_shortform { width:98%; text-align:left }
    #note_text			{ width:99%; padding:1px; height:10em; }
    .report_note_box { border:1px #000 solid; margin:5px; padding:5px; font-size:0.8em; text-align:center; }
    .note {text-align:left; }

  /*  */
    tr.hidden td { display:none; }
    .clearall { clear:both; }

    .small_btn { margin:0; padding:0; font-size:11px; letter-spacing:0.1em;  }

    .arrow_dn { padding-right:14px!important; background:transparent url(../pub/images/arrow_dn.gif) right no-repeat; }
    .arrow_up { padding-right:14px!important; background:transparent url(../pub/images/arrow_up.gif) right no-repeat; }
    .arrow_rt { padding-right:14px!important; background:transparent url(../pub/images/arrow_right.gif) right no-repeat; }
    .arrow_lt { padding-left:14px!important; background:transparent url(../pub/images/arrow_left.gif) left no-repeat; }

    .recurrance { margin:0; padding:0!important; width:34px; border:none; background-color:transparent; }
    .recurrance img { margin:0!important; padding:0!important; }

  /*.hidden tr  td { display:none; }*/
  .errorMessage { color:#000000; font-weight:bold; padding:1px;  }

  optgroup {
    text-decoration: none;
    font-style: normal;
    padding: 4px 2px 0 2px;
    background-color: #8a8a8a;
    color: #ffffff;
    text-indent: 5px;
  }

  optgroup > option {
    margin-left: 0;
    padding-left: 5px;
  }

  .gray1 td { background-color:#cfcfcf; }
  .gray2 td { background-color:#dfdfdf; }
  .gray3 td { background-color:#efefef; }
  .resetOfficial	{ cursor:default; }

  p.active { font-size:1.4em; color:#009900; float:right; font-weight:bold; margin:0; padding:0; display:none; }
  p.activate { font-size:1.4em; color:#FFFF00; float:right; font-weight:bold; margin:0; padding:0; display:none; }

  button.reset 	{ margin:0; padding:0; font-size:11px; letter-spacing:0.1em; }
  button.save 	{ margin:0; padding:0; font-size:11px; letter-spacing:0.1em; font-weight:bold; }

  fieldset.ref_assign_by_day { margin:30px 10px 20px 10px; padding:10px 5px; }
  fieldset.ref_assign_by_day h2 { margin:20px 10px 10px 10px;  font-size:1.3em; }
  fieldset.ref_assign_by_day table td { font-size:0.9em; }
  fieldset.ref_assign_by_day table td.in_focus { width:250px; }
/* END REF ASSIGNMENT */

/* 2016 Equipment Manager update to css */
  .metro div.tab-control ul.tabs li.active,
  .metro div.tab-control ul.tabs li.active a {
    color: #004050 !important;
    background-color: #ffffff!important;
    -moz-transition: -moz-background-color 0.123s linear;
    -webkit-transition: -webkit-background-color 0.123s linear;
    transition: background-color 0.123s linear;
  }


/* BEGIN: Equipment */
  #addEquipment,
  #editEquipment,
  #signInOutEquipment { display:none; }
  #addEquipment h2 { margin-top:10px; }

  tr.addTeam td { vertical-align:middle !important; background-color:#FE9; border-top:2px solid #FC6; border-bottom:2px solid #FC6; }

  .noBottomMargin { margin-bottom:0!important; }
  .red { color:#DD0000; }
  .blue { color:#0000DD; }
  .grayText		{ color:#BBBBBB; }

  /*button.input_submit { font-size:0.95em; padding:0 2px !important; font-family:tahoma, arial, helvetica, sans-serif; }*/

  #cmdShowNewEquipment,
  #cmdShowSignInOut,
  #cmdReturns	{ margin:2px 0 0 10px; padding:0; color:#00B2EB;  background-color:transparent; border:none; text-decoration:underline!important; }
/* END: Equipment */


.maxwidth.w50 { max-width: 50px; }
.maxwidth.w100 { max-width: 100px; }
.maxwidth.w150 { max-width: 150px; }
.maxwidth.w200 { max-width: 200px; }
.maxwidth.w250 { max-width: 250px; }


.capitalize { text-transform: capitalize!important; }

.close-on-click { cursor: pointer; }

.floatright	  { float:right; }
.floatright.imp { float:right!important; }
.floatleft    { float:left; }
img.floatleft { margin-right: 6px; }

.hidden,
.hidden1,
.hidden2    { display:none!important; }
.alignright { text-align:right!important; }
.alignleft 	{ text-align:left!important; }

.metro table th.verticalalignmiddle,
.metro table td.verticalalignmiddle,
.metro div.verticalalignmiddle,
.metro tr.verticalalignmiddle > td {
  vertical-align: middle!important;
  display: table-cell!important;
}
.metro table th.verticalaligntop,
.metro table td.verticalaligntop,
.metro div.verticalaligntop,
.metro tr.verticalaligntop > td {
  vertical-align: top;
}
.metro table th.verticalalignbottom,
.metro table td.verticalalignbottom,
.metro div.verticalalignbottom,
.metro tr.verticalalignbottom > td {
  vertical-align: bottom;
}

.metro h1.strong,
.metro h2.strong,
.metro h3.strong,
.metro .strong { font-weight: bold; }

.metro h1.not-strong,
.metro h2.not-strong,
.metro h3.not-strong,
.metro .not-strong { font-weight: normal; }

.metro .no-bullets,
.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.no-bullets li {
  list-style: none;
  margin: 0;
}
.no-bullets.padded li {
  margin-bottom: 0.5em;
}

.no-bullets li.floatleft {
  margin-left: 5px;
  display: block;
  float: left;
}
.no-bullets li.floatleft:first-child {
  margin-left: 0;
}

.strong,
h3.strong { font-weight: bold; }

/*h3.right { margin-top: 5px; margin-right: 20px; } */


.vTop { vertical-align:top !important; }

#core { float:left; width:70%; padding:0; margin:0; }

#input_area { width:800px; margin:5px auto; }

#informationBOX { width:28%; float:right !important; padding:5px; margin:0 0 10px 0; }
#informationBOX p strong { font-size:1.2em; }
#informationBOX ol { padding:0; margin-bottom:0; margin-top:5px; margin:5px 0 0 5px; list-style-type:decimal; list-style-position:inside; }
#informationBOX ol li { padding:1px; margin:2px 0; }
#informationBOX ul { list-style:none; margin:0 5px; }
#informationBOX ul li { padding:1px; margin:2px 0; /*border-bottom:1px solid #eee;*/ }


/* Layout */

  #clubname {
    color: #039BCA;
    font-size: 1.6em;
    padding: 5px;
    margin: 0;
    background-color: transparent;
  }

  #status_bar {
    margin-top: 0;
  }

  #content {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  #footer {
    min-height: 55px;
    margin: 20px 0 0 0;
    padding: 10px 10px;
    clear: both;
    color: #ffffff;
    background-color: #555555;
  }

  #footer h3 { color: #ffffff; }

  #footer a img {
    margin-bottom: 5px;
  }

  #ya,#ya2,#ya3,#ya4,#ya5,#ya6,#ya7 { background-color:transparent !important; }

  .event_conflict { background-color:#FE9; }
  .lightgray { background-color:#ededed; }
  .centered { text-align:center; }
  .right { text-align:right; }
  .left { text-align:left; }
  .center { text-align:center; }
  .printlink { margin:0; padding:0; height:15px; float:right; }

  .ref_conf_label {}
  .ref_conf_game {font-weight:bold; }
  .ref_conf_date { font-size: 1.2em; color:#c33; }
  .ref_conf_team {}
  .ref_conf_location {color:#33c; }

  table.topleft td { text-align:left; vertical-align:top; }

  .fieldGroup { display:block; width:90%; margin:10px auto; text-align:right; padding:5px 15px 5px 0; border-color:#FE9; }
  .fieldGroup legend { color:#630; font-weight:bold; }

  .teamGroup { display:block; width:90%; margin:10px auto; text-align:right; padding:5px 15px 5px 0; border-color:#03C; }
  .teamGroup legend { color:#03C; font-weight:bold; }

  #teamInfo, #rosterSelect { display:block; width:100%; }

  legend a { width:100%; cursor:default; }
  legend a:hover { text-decoration:underline; }
  legend a:active { text-decoration:underline; }

/* Menus */

  #homeMenu, .menuList { list-style:none; margin:10px 0; padding:0; }
  #homeMenu li,
  .menuList li { line-height:1.5em; }

/* LISTS for admin bits */
  ul.admin_table { list-style-type:none; padding:10px 0; }
  ul.admin_table li { margin:0 10px 5px 10px; padding:0;  }
  ul.admin_table li label { font-size:12px; display:block; margin:0 0 3px 0; }
  ul.admin_table li input,
  ul.admin_table li select { font-size:12px; }
  ul.admin_table li input[type=button],
  ul.admin_table li input[type=submit] { color:#00B2EB; background-color:#efefef; border:1px solid #999; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:4px 8px; cursor:pointer; }

/* TABLES for various admin bits */
  #admin_table,
  .admin_table { width:100%; border:1px solid #999; margin:0 auto; clear:both; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px; margin:10px 0; }
  #admin_table caption,
  .admin_table caption { text-align:center; font-weight:bold; margin:0 auto; color:#003C78; padding:2px; background-color:#F6F6F6; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
  #admin_table td,
  .admin_table td { padding:1px; height:20px; }	/* border-bottom:1px solid #888; 	*/
  #admin_table td.admin_label,
  .admin_table td.admin_label { width:15em; text-align:right; }
  #admin_table td.admin_label_big,
  .admin_table td.admin_label_big { width:20em; text-align:right; }
  #admin_table th,
  .admin_table th { padding:2px 1px; border-bottom:1px solid #999; background-color:#eee; text-align:left; }
  #admin_table th.admin_label,
  .admin_table th.admin_label { width:13em; text-align: right; vertical-align: top; padding:4px 0 0 0; }
  /*#admin_table td div.alert { width:100%; padding:2px; margin:0; background-color:#FED8D9; }*/
  #admin_table select,
  .admin_table select { min-width:70px; }
  #admin_table select.multiple,
  .admin_table select.multiple { width: 70px; height: 100px; }

  * table.align-top tr td,
  #admin_table.align-top tr td,
  .admin_table.align-top tr td { vertical-align:top; }

  input.move_button {min-width: 40px; padding:0 8px 0 5px; }
  td.fac_edit { border-left:1px solid #888; padding-left:5px !important;  vertical-align: top; }

  .input_checkbox,
  .input_image,
  .input_radio { border:none; background:none !important; padding:0; margin:0; }
  .input_submit { color:#000; background-color:#D8E0F5 !important; }

  .date-picker { cursor: pointer; }

/* Classes */
  .row_bg { background-color: #eee !important; }
  .disabled { background-color:#D9E4FF !important; }
  .noborder { border:none !important; }

  .alert {
    padding:5px;
    border:1px solid #C00;
    /*background-color: #FD9;*/
    background-color: #FFE7E1;
    font-weight:bold;
    color:#000;
    text-align:left;
  }

/* TD which holds all error messages (error messages are in DIVs */
  .admin_error {
    vertical-align:middle;
    font-weight:bold;
    color:#A00 !important;
    text-align:left;
  }

  .admin_error div {
    margin:0;
    padding:0;
    background-color:transparent;
  }

.successMsg { color:#03C; text-transform:uppercase; }

.link { border:none; background-color:transparent !important; text-decoration:underline; cursor:pointer; }
.dynamicAdmin {}
.admin_info { font-size:0.9em; text-align:right; font-weight:bold; color:#0066CC; }
.admin_buttons { padding:2px !important; text-align:right; }
.admin_buttons input { background-color:#D8E0F5; text-align:center; padding:0 3px; }
.admin_data { text-align:left; vertical-align:middle; padding:0 0 0 5px !important; height:22px; }
.admin_function { text-align:right; vertical-align:middle; padding:0 10px 0 0 !important; }
.admin_function a { padding:0 3px; margin:1px; font-size:0.9em; }
.admin_function a:link { background-color:transparent; color:#333; text-decoration:none;  }
.admin_function a:visited { background-color:transparent; color:#333; text-decoration:none;  }
.admin_function a:hover { background-color:#00B2EB; color:#FFF; text-decoration:none !important; }
.admin_function a:active { background-color:#00B2EB; color:#FFF; text-decoration:none !important; }


a.button,
a.button:link { text-decoration: none; }


.statusNotification {
  color:#00B2EB;
  text-align:right;
  vertical-align:middle;
  font-size:1.3em;
  letter-spacing:0.05em; }



/* More Info Links  [?] */
.moreInfo { padding:0 3px; margin:1px; border:1px solid #333; text-decoration:none; font-size:0.9em; }
a.moreInfo:link { background-color:#eee; color:#333; text-decoration:none;  }
a.moreInfo:visited { background-color:#eee; color:#333; text-decoration:none;  }
a.moreInfo:hover { background-color:#00B2EB; color:#FFF; text-decoration:none !important; }
a.moreInfo:active { background-color:#00B2EB; color:#FFF; text-decoration:none !important; }

.justify { text-align: justify; }
.strong { font-weight:bold; }
.gray { color:#666; }

* .REDCARD 	 { background-color:#F00; color:#FFF; text-align:center; vertical-align:middle!important; padding:0!important; }
* .YELLOWCARD { background-color:#FF0; color:#000; text-align:center; vertical-align:middle!important; padding:0!important; }

* tr.new td { border-top:2px solid #3CC; }

/* Player Discipline page */
.penalty-info { margin-left:5px; }
.penalty-info p { margin:0.5em; }
.game-info { opacity:0.8; border-color:#06C; color:#06C; margin-right:5px; }
.action-history { border-color:#444; color:#444; margin:5px; }

#admin_table fieldset select,
.admin_table fieldset select { min-width:30px; }
fieldset { margin:0 0 0 0; padding:2px; border-color:#EEE; }
legend   { font-weight:bold; margin:0 0 0 0; line-height:normal; padding:0 2px 0 2px; }

/* Equipment page style
------------------------------------------- */
  ul#report-list { margin:5px; padding:0; list-style-type:none; text-align:center; }
  ul#report-list li { text-align:center; }
  ul#equipment-list,
  ul#equipment-out-list { margin:10px 0 0 0; padding:10px; list-style-type:none; border:1px solid #999; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
  ul#equipment-list li,
  ul#equipment-out-list li { margin:0; padding:3px 2px; border:1px solid #fff; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; }
  ul#equipment-out-list li.equipment-header,
  ul#equipment-list li.equipment-header { display:block; width:100%; border-bottom:1px solid #CCC; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; margin-bottom:2px; }
  .equipment-inventory { display:inline-block; width:60px; padding:4px 0 3px 0; text-align:right; }
  .equipment-controls	 { margin:0 5px; }
  .equipment-item	.equipment-controls	{ float:right; display:inline-block; }
  .equipment-controls a:link,
  .equipment-controls a { display:inline-block; border:1px solid #999; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:4px 8px; text-decoration:none; cursor:pointer; }
  .equipment-controls a:hover,
  .equipment-controls a:active { background-color:#dfdfdf; text-decoration:none; }
  .equipment-controls a.highlight { background-color:#dfdfdf; }
  .equipment-name 	{ display:inline-block; width:auto; text-align:left; padding:4px 0 3px 5px; }

.reports { background-color:#fafafa; margin:5px 0 0 0; }
#report-holder { margin:5px 0 0 0; padding:0 0 5px 0; }
#report-holder h2 { margin:0 0 5px 0; padding:10px; }
#report-holder p  { margin:10px; }

a.xls-gen:link,
a.xls-gen:visited { display:inline-block; border:1px solid #999; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:4px 8px; text-decoration:none; cursor:pointer; }
a.xls-gen:hover,
a.xls-gen:active { background-color:#dfdfdf; text-decoration:none; }

.report-list a:link,
.report-list a { display:inline-block; border:1px solid #999; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:4px 8px; text-decoration:none; cursor:pointer; }
.report-list a:hover,
.report-list a:active { background-color:#efefef; text-decoration:none; }

.eqo-inventory { display:inline-block; width:30px; padding:4px 0 3px 0; text-align:right; }
.eqo-equip 		 { display:inline-block; width:130px; padding:4px 0 3px 0; }
.eqo-duedate 	 { display:inline-block; width:70px; padding:4px 0 3px 0; }
.eqo-recipient { display:inline-block; width:auto; padding:4px 0 3px 0; }
.rounded { border:1px solid #999; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }

.errorMsg { color:#C00; display:inline; }
#sign-in-msg { color:#C00; }


/* On Division Build page
************************/
  .new-entry { border:2px solid #066987; padding:2px; background-color:#dbdfff; margin-top:5px; }
  .new-entry tr th { background-color:#dbdfff; color:#066987; text-align:center; vertical-align:middle; line-height:1.6em; font-size:1.1em; }

  tr.navElement th { font-size:1.1em; text-align:right; padding:6px; border:1px solid #ddd; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; }

  input.fee { width:30px; padding-left:1px; }

  table.inner { width:100%; padding:5px 3px 3px 3px; border:1px solid #ddd; border-top:none; -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; }

  .inner.discipline { background-color:#f2f2f2; border:1px solid #999; margin:5px 0 0 0; padding:3px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }

  .inner.discipline tr.top td { padding-top:5px; }
  td.border-bottom,
  .inner.discipline td.border-bottom { border-bottom:1px solid #666; padding-bottom:10px; }
  .inner.discipline tr:last-child td.border-bottom { border-bottom:none; padding-bottom:5px; }


/* Game Dashboard
**************************/
  .pup-highlight { background-color:#ef8c08; }
  .pup-lowlight { background-color:#dedede; }
  .pup-highlight a:link,
  .pup-lowlight a:link,
  .pup-highlight a:visited,
  .pup-lowlight a:visited { color:#fff }
  span.pup-lowlight,
  span.pup-highlight { padding:1px 5px; margin-right:1px; height:14px; font-size:10px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; }


/* Team Officials
**************************/
  div.team-official-assigned {}
  div.team-official-assigned p {clear:both; }
  div.team-official-assigned p span.tof-first-name {float:left;width:400px;padding:3px; }
  div.team-official-assigned p span.tof-subrole {float:left;width:330px;padding:3px; }
  div.team-official-assigned p span.tof-remove {float:left;width:80px;padding:3px; }



/* Toolbar with help link
**************************/
  div.site-toolbar {
    background: #f5f6f6;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iI2UzZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU4JSIgc3RvcC1jb2xvcj0iI2M4YzdjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiOGJhYzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  #f5f6f6 0%, #e3eaea 12%, #c8c7cc 58%, #b8bac6 100%, #cccccc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(12%,#e3eaea), color-stop(58%,#c8c7cc), color-stop(100%,#b8bac6), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(top,  #f5f6f6 0%,#e3eaea 12%,#c8c7cc 58%,#b8bac6 100%,#cccccc 100%);
    background: -o-linear-gradient(top,  #f5f6f6 0%,#e3eaea 12%,#c8c7cc 58%,#b8bac6 100%,#cccccc 100%);
    background: -ms-linear-gradient(top,  #f5f6f6 0%,#e3eaea 12%,#c8c7cc 58%,#b8bac6 100%,#cccccc 100%);
    background: linear-gradient(to bottom,  #f5f6f6 0%,#e3eaea 12%,#c8c7cc 58%,#b8bac6 100%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#cccccc',GradientType=0 );
    border: 1px solid #888888;
    border-image: none;
    border-radius: 0 0 6px 6px;
    border-width: 0 1px 1px 1px;
    border-top: none;
    font-size: 12px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    margin: 0 15px 0 0;
    padding: 2px 20px 4px 20px;
    width: auto;
    position: absolute;
    top:-1px;
    right: 22px;
  }

  div.site-toolbar a,
  div.site-toolbar a:link,
  div.site-toolbar a:hover,
  div.site-toolbar a:active {
    text-decoration: none;
    color: #000000;
  }
  div.site-toolbar a:hover,
  div.site-toolbar a:active {
    text-decoration: underline;
  }


/* http://sonspring.com/journal/clearing-floats */

  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

  .clearfix:before,
  .clearfix:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .clearfix:after {
    clear: both;
  }




/* Metro extra code
**************************/
  .metro .smaller,
  p.smaller,
  .metro .table tr td.smaller,
  .smaller { font-size: 0.9em; }

  .metro .padded {
    margin-top: 5px;
  }

  .metro .smallest,
  .metro h3 .smallest,
  p.smallest,
  .metro .table tr td.smallest,
  .smallest { font-size: 0.8em; }

  p.smallest {
    line-height: 1.3em;
  }

  .metro h3 .smaller { font-size: 0.8em; }

  .metro h3 .smallest { font-size: 0.7em; }

  .metro .row .span5 .fg-darkGreen em.smallest {
    padding-right: 3px;
  }

  table th {font-weight: normal; text-align: center; }

  .metro .image-button {
    line-height: 1.5em;
  }

  .metro .right .toolbar .button	{
    float: right;
    margin-left: 1px;
    margin-right: 1px;
  }

  .metro table.facility {
    margin: 0;
    padding: 0;
  }

  .metro table.facility td {
    margin: 0;
    padding: 3px 2px;
    text-align: left;
    vertical-align: middle!important;
    border-right: none!important;
  }

  .metro table.facility th {
    border-bottom: 1px solid #A7A7A7;
  }

  .metro table.facility td .input-control.checkbox {
    margin: 0 0;
  }

  .metro table.facility input[type=text]  {
    width: 42px;
    margin-bottom: 2px;
    border: 1px solid #A7A7A7!important;
  }

  .noborder,
  .metro .noborder {
    border: none!important;
  }

  .metro .row.highlight hr {
    background-color: #aaaaaa;
    border: 0 none;
    color: #aaaaaa;
    height: 1px;
    margin: 10px 0;
  }

  .highlight {
    margin-bottom: 10px;
    border: 1px solid #cccccc;
  }

  .highlight .span6 h1,
  .highlight .span6 h2,
  .highlight .span6 h3,
  .highlight .span6 h4,
  .highlight .span6 h5,
  .highlight .span6 p,
  .highlight .span6 blockquote,
  .highlight .span6 ul,
  .highlight .span6 ol {
    margin-left: 10px;
  }

  .metro .container .grid .row .span12 .row .span7 h3,
  .metro .container .grid .row .span12 .row .span7 address {
    margin-left: 10px;
  }

  .metro .container .grid .row .span12 .row h3.floatright {
    margin: 5px 10px 0 0;
  }

  .metro .toolbar button,
  .metro .toolbar .button {
      padding: 8px;
  }

  a.image-button {
    text-decoration: none;
  }

  table.table.middle tr td {
    vertical-align: middle;
  }

  .metro .grid.fluid .row label.span4.right {
    margin-left: 2.12766%;
  }

  .metro fieldset {
    border: 2px solid #EAEAEA;
    margin-bottom: 10px !important;
    margin-top: 0;
    position: relative;
  }

  a.noul {
    text-decoration: none!important;
  }

  /* Larger fonts  */
  .enlarge   { font-size: 1em; }
  .enlarge-1 { font-size: 1.1em; }
  .enlarge-2 { font-size: 1.2em; }
  .enlarge-3 { font-size: 1.3em; }
  .enlarge-4 { font-size: 1.4em; }
  .enlarge-5 { font-size: 1.5em; }
  .enlarge-6 { font-size: 1.6em; }
  .enlarge-7 { font-size: 1.7em; }
  .enlarge-8 { font-size: 1.8em; }
  .enlarge-9 { font-size: 1.9em; }
  .enlarge-2x { font-size: 2em; }
  .enlarge-3x { font-size: 3em; }
  .enlarge-4x { font-size: 4em; }

/* Coordinates
**************************/
  #coords_gen_help {
    border-top: 1px solid #CCCCCC;
    margin-top: 5px;
    padding-top: 10px;
    padding: 10px 6px 5px;
  }
  #coords_gen_help ol {
    list-style-position: outside;
    margin-left: 22px;
  }


/* Metro Menu
**************************/

  .horizontal-menu {
    background-color: #CCCCCC;
  }

  /* Role Selector */
  .metro .navigation-bar nav.navigation-bar-content a.element.place-right.noul .input-control {
    margin-top: 7px;
  }

/* Season Selector Area
**************************/
  .padded-box {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 1em;
  }
  .padded-box h4 {
    width: 90%;
    margin-left: 5%;
  }
  .padded-box a,
  .padded-box button {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 1px;
  }
  .padded-box .input-control.select select {
    width: 90%;
    margin-left: 5%;
    color: #222222;
  }


/* Login area
**************************/
  .login {
    min-height: 300px;
  }

  .login > .row > .span6 {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  #password-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .logo {
    max-height: 35px;
    float: left;
    margin: 5px 10px 5px 0;
  }

/* Home page
*************************/

label.condensed {
  margin-top: 0;
  margin-bottom: 0;
}

.overflow-hidden {
  overflow: hidden;
}

a.ref-status {
  margin-left: 2px;
}

/*
.metro .container .grid .row .span8 > a.image-button {
  margin-bottom: 5px;
}

*/

/* Record/Edit Game Results
**************************/
.metro .official-no-show {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #cccccc;
}

.metro .record-game-officials select {
  font-size: 0.9em;
}

.metro .record-game-officials .input-control.checkbox {
  margin-top: 0;
  margin-bottom: 0;
}


/* Referee Assignment
**************************/

  input.date {
    text-align: center;
  }

  .metro .container .grid .row .tab-control .frames .span3.right.floatright {
    float: right;
    margin-left: 0;
  } /* TODO: Find all elements that utilize the above and give them a nlm class. */

  .metro .container .grid .row .tab-control .frames .span3.right.floatright label {
    margin-bottom: 0;
  }

  .metro div.full[class*="span"] button {
    width: 100%!important;
  }

  .relative {
    position: relative;
  }

  body.metro .container #refAssignWin,
  body.metro .container #ref-details-window {
    display: none;
  }

  #referee_list,
  #send_list {
    min-height: 200px;
    max-height: 450px;
  }

  /*
    .metro .tab-control .tabs li.active,
    .metro .tab-control .tabs li.active,
    .metro .tab-control .frames #monday,
    .metro .tab-control .frames #tuesday,
    .metro .tab-control .frames #wednesday,
    .metro .tab-control .frames #thursday,
    .metro .tab-control .frames #friday,
    .metro .tab-control .frames #saturday,
    .metro .tab-control .frames #sunday {
      background-color: #f2f9ff!important;
    }
  */

  .metro .window .content .grid .row .span12 table.table thead tr th,
  .metro .window .content .grid .row .span12 table.table thead tr th.icon-arrow-up-2,
  .metro .window .content .grid .row .span12 table.table thead tr th.icon-arrow-down-2 {
    color: #ffffff!important;
    width: auto!important;
    display: table-cell!important;
    font-weight: 400!important;
  }

  .metro.window-overlay .window.shadow {
    -moz-box-shadow: 0 0 20px 2px #5b5b5b;
    -moz-box-shadow: 0 0 20px 2px rgba(81,81,81, 0.75);
    -webkit-box-shadow: 0 0 20px 2px #5b5b5b;
    -webkit-box-shadow: 0 0 20px 2px rgba(81,81,81, 0.75);
    box-shadow: 0 0 20px 2px #5b5b5b;
    box-shadow: 0 0 20px 2px rgba(81,81,81, 0.75);
  }

  .metro .listview-outlook .list-group .group-content {
    position: relative;
    margin-bottom: 5px;
  }
  .metro .listview-outlook .list .list-content {
    padding-left: 3px;
    padding-right: 3px;
  }

  .metro .listview-outlook .list.boxed {
    margin: 10px 0;
    border: 1px solid #D7D8D9;
  }

  .metro .listview-outlook .list.boxed:first-child {
  /*	margin-top: 0; */
  }

  .metro .listview-outlook .list.boxed:hover,
  .metro .listview-outlook .list.boxed:hover *,
  .metro .listview-outlook .list.boxed .list-content:focus,
  .metro .listview-outlook .list.boxed .list-content:hover {
    background-color: transparent;
    cursor: default;
  }

  .metro .listview-outlook .list.boxed .list-title.white-space-normal {
    font-size: 14px;
    /*line-height: 1.38em;
    font-weight: 400;
    font-family: helvetica, arial, 'lucida grande', sans-serif; */
  }

  .metro .listview-outlook .list.boxed a,
  .metro .listview-outlook .list.boxed a:link,
  .metro .listview-outlook .list.boxed a:hover {
    text-decoration: none;
  }

  .metro .listview-outlook .list-group .group-content .list .list-content .smaller {
    font-size: 0.7em;
    line-height: 1em;
  }

  .game-results-link {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    display: block;
    position: absolute;
    z-index: 3;
    width: 28px;
    height: 32px;
    top: 35px;
    left: 4px;
    font-size: 0.1px;
    color: transparent;
    background: transparent url(../pub/images/small-clipboard.png) 0 0 no-repeat;
  }

  .game-results-link:hover {
    -moz-transition: -moz-box-shadow 0.333s linear;
    -webkit-transition: -webkit-box-shadow 0.333s linear;
    transition: box-shadow 0.333s linear;
    -moz-box-shadow: 0px 0px 6px -1px #000000;
    -webkit-box-shadow: 0px 0px 6px -1px #000000;
    box-shadow: 0px 0px 6px -1px #000000;
  }

  .metro .list .list-content.grid .row .list-remark {
    position: relative;
  }

  .metro .list .list-content.grid .row .list-remark button {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .metro .list .list-content.grid .row .ref-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .metro .list .list-content.grid .row .ref-list li {
    height: 28px;
    margin: 0 0 4px 0;
    clear: both;
  }

  .metro .list .list-content.grid .row .ref-list li .ref-details {
    width: 91%;
  }

  .metro .list .list-content.grid .row .hl {
    padding-top: 4px;
    padding-left: 2px;
    line-height: 18px;
  }

  /*
  .metro .list .list-content.grid .row .hl.list-remark:hover {
    background-color: #EEEEEE;
    -webkit-transition: background-color 0.333s linear;
    -moz-transition: background-color 0.333s linear;
    transition: background-color 0.333s linear;
  }
  */

  .metro .list .list-content.grid .row .hl.list-remark span.tele {
    text-align: right;
    color: #A20025;
    position: absolute;
    right: 47px;
    bottom: 0;
  }

  .metro .list .list-content.grid .row .hl.list-remark:hover button {
    background-color: #2186cc;
    color: #ffffff;
    -webkit-transition: background-color 0.666s linear;
    -moz-transition: background-color 0.666s linear;
    transition: background-color 0.666s linear;
  }



/* UPDATE to make dropdowns and inputs inline
****************************************************************************/

  .metro .input-control.select.inline select,
  .select.inline,
  .metro .input-control.text.inline input,
  .input.inline {
    display: inline-block;
    width: auto;
    float: left;
    margin-right: 2px;
  }

  .inline-block {
    display: inline-block;
  }

  .tall {
    font-size: 14px;
    line-height: 18px;
    padding: 6px 0;
  }

/* Role Selector in Menu area - icon */
  .metro .role-selector:after {
    bottom: 0;
    content: "›";
    margin-left: 0.45em;
    position: absolute;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    left: 100%;
    margin-left: -20px;
    margin-top: -16px;
    position: absolute;
    top: 50%;
    padding-right: 1px;
  }


/* Work in progress: Loading animation with css */

  .loading-animation {
    z-index: 999998;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .loading-animation p {
    position: absolute;
    bottom: 1px;
    left: 47%;
    font-size: 1em;
    line-height: 1.4em;
    z-index: 999999;
  }




  .hidden-spinner {
    opacity: 0;
  }
  .spinner	{
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -ms-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

  .super-overlay {
    height: auto;
    background-color: #ffffff;
  }

  .super-overlay * {
    color: #000000;
  }

  .centered.super-overlay {
    display: block;
    padding: auto;
    margin: 0 auto;
    z-index: 100000;
  }

  .super-overlay .spinner {
    margin: 0.75em auto;
  }

/* LOGIN page - conditional message in header area */


body.metro #old-browser {
  display: none;
}

ul.horizontal {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.horizontal li {
  float: left;
  margin: 3px 1em 3px 0;
  padding: 0;
}

ul.horizontal li:last-child {
  margin-right: 0;
}



/* PAGE SPECIFIC SUB MENUS */

  .sub-select {

  }

  .sub-select > form > div {
    margin-top: 7px;
    padding-left: 5px;
    padding-right: 5px;
  }


  .underneath nav {
    -webkit-box-shadow: inset 0px 2px 5px 0px rgba(77, 77, 77, 0.66);
    -moz-box-shadow: inset 0px 2px 5px 0px rgba(77, 77, 77, 0.66);
    box-shadow: inset 0px 2px 5px 0px rgba(77, 77, 77, 0.66);
  }

  .underneath nav a.sub-select:link,
  .underneath nav a.sub-select:visited {
    background-color: transparent!important;
  }

  .underneath nav a.sub-select:hover,
  .underneath nav a.sub-select:active {
    background-color: #00aafd!important;
  }

  .underneath nav ul li a.active {
    background-color: #1BA1E2;
    -webkit-box-shadow: inset 0px 0px 10px 4px rgba(22, 73, 154, 0.27 );
    -moz-box-shadow: inset 0px 0px 10px 4px rgba(22, 73, 154, 0.27 );
    box-shadow: inset 0px 0px 10px 4px rgba(22, 73, 154, 0.27 );
    -webkit-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    -moz-transition: all 3s ease-in;
    transition: all 3s ease-in;
  }


/* MASSEMAIL HISTORY */
  .table th.diagonal {
    height: 80px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    position: relative;
    vertical-align: bottom;
    padding: 0;
    font-size: 12px;
    line-height: 0.8;
    border-width: 0 0 1px 0!important;

    padding: 0!important
  }

  .table th.diagonal > div {
    position: relative;
    top: 0px;
    left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
    height: 100%;
    -ms-transform:skew(-45deg,0deg);
    -moz-transform:skew(-45deg,0deg);
    -webkit-transform:skew(-45deg,0deg);
    -o-transform:skew(-45deg,0deg);
    transform:skew(-45deg,0deg);
    overflow: hidden;
    border-left: 1px solid #ffffff;
  }

  .table th.diagonal span {
    -ms-transform:skew(45deg,0deg) rotate(315deg);
    -moz-transform:skew(45deg,0deg) rotate(315deg);
    -webkit-transform:skew(45deg,0deg) rotate(315deg);
    -o-transform:skew(45deg,0deg) rotate(315deg);
    transform:skew(45deg,0deg) rotate(315deg);
    position: absolute;
    bottom: 35px; /* 40 cos(45) = 28 with an additional 2px margin*/
    left: -20px; /*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    /*width: 100%;*/
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
    //*white-space: nowrap; /*whether to display in one line or not*/
  }





/* MASSEMAIL */

  label > i.floatleft { margin-left: 10px;}


  .fileinput-button {
    position: absolute;
    overflow: hidden;
    background-color:#eee;
    padding: 5px;
    top: 7.5px;
  }
  .fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    direction: ltr;
    cursor: pointer;
    background-color:#333;
  }

  ul.files {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .files-container {
    display: inline-block;
    width: 83%;
    margin-left: 17%;
    margin-top: -1px;
  }

  ul.files li {
    padding: 5px 7px;
    clear: right;
    display: block;
  }

  ul.files li .atr {
    float: right;
  }

  .massemail_select {
    height: 150px;
    -webkit-transition: all 0.666s;
    -o-transition: all 0.666s;
    -moz-transition: all 0.666s;
    transition: all 0.666s;
  }

  #ref_id option:after {
      content: " ";
      height: 5px;
      width: 5px;
      border-radius: 5px;
      display: inline-block;
  }

  #show-draft-selector {
    cursor: pointer;
    width: 200px;
    padding-right: 0;
    text-align: right;
  }

  #show-draft-selector select {
    font-size: 10pt;
    line-height: 1.2em;
    margin: 4px 2px 0;
    padding: 0 5px;
    width: 90%;
  }

  #team_id option:after,
  #ref_id option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
  }

  option.red:after { background: #c00; }
  option.green:after { background: #0c0; }
  option.blue:after { background: #00c; }

  .massemail_select option {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .massemail_select.striped option:nth-child(odd) {
    background: #f5f5f5!important;
  }

  .massemail_date {
    border: 1px solid #d9d9d9;
    background-color: #f3f3f3!important;
    padding-top:5px;
    margin-bottom:10px;
  }

  #courses,
  #associates {
    border: 1px solid #d9d9d9;
    background-color: #f3f3f3;
    border-width: 0 1px 1px 1px;
    margin-top: -20px;
  }

  #courses > .input-control,
  #associates .input-control {
    margin-bottom: 5px;
  }

  #courses > .input-control,
  #associates .input-control,
  #associates h4 {
    padding-left: 10px;
  }

  #associates h4 .floatright {
    margin-right: 10px;
  }

  .massemail_select.recipients {
    height: 275px;
  }

  .closeSelect  {
    display: none;
    opacity: 0;
    -webkit-transition: all 0.333s;
    -o-transition: all 0.333s;
    -moz-transition: all 0.333s;
    transition: all 0.333s;
  }

  .closeSelect.opened {
    -webkit-animation: slide-down 0.333s;
    -moz-animation: slide-down 0.333s;
    -ms-animation: slide-down 0.333s;
    -o-animation: slide-down 0.333s;
    animation: slide-down 0.333s;
    height: 100%;
    opacity: 1;
    display: block;
    -webkit-transition: all 0.333s;
    -o-transition: all 0.333s;
    -moz-transition: all 0.333s;
    transition: all 0.333s;
  }

  .massemail_select.make-taller {
    height: 500px;
    -webkit-transition: all 1.333s;
    -o-transition: all 1.333s;
    -moz-transition: all 1.333s;
    transition: all 1.333s;
  }

  /*
    #recipients optgroup {
      border: 1px solid #95caff;
      border-width: 1px 1px 0 1px;
      margin-bottom: 0;
      background-color: #f7fbff;
      padding: 5px 3px 4px 5px;
      line-height: 2em;
    }

    #recipients optgroup option {
      padding: 2px 4px;
    }

    #recipients optgroup option:first-child {
      margin-top: 5px;
    }

    #recipients optgroup option:last-child {

    }
  */


  /* Registration dialog box reports in iFrame */
  .clean-iframe {
    width: 100%;
    height: 500px;
    border: none;
    margin: 0;
    padding: 10px;
  }

  /* Clubhub */

  .clubhub-text {
    font-style: italic;
  }

  .clubhub-text:focus,
  .clubhub-text:active {
    font-style: normal;
  }

  .clubhub-post * {
    -webkit-transition: height .6s linear, background-color 1s linear;
    transition: height .6s linear, background-color 1s linear;
  }

  .clubhub-post form {
    margin-bottom: 0;
    margin-top: 0;
  }
  .clubhub-post {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,.456);
    padding: 15px 0px 15px 0px;
    margin: 15px 0 20px 0;
  }

  .clubhub-post.minimized {
    background-color: #f3f3f3;
    border: 1px solid rgba(0,0,0,.2);
    padding:  5px 0px 5px 0px;
    margin: 5px 0 20px 0;
    background-color: #f3f3f3;
  }

  .clubhub-post.minimized .row .span2 label {
    display: none;
  }

  .clubhub-post.minimized .row.functions,
  .clubhub-post.minimized .row.season,
  .clubhub-post.minimized .row.share {
    display: none;
  }

  .clubhub-post.minimized .row .span2 label.show {
    display: block;
  }


  .clubhub-post textarea#clubhub_text {
    max-width: 450px;
  }

  .grid.clubhub-post.minimized form textarea#clubhub_text {
    height: 40px!important;
    min-height: 40px;
    max-height: 90px;
  }

  #disWindow {
    border: 1px solid #444;
    width: 618px;
    height: 300px;/*
    position: absolute;
    top: 0;
    left: 0;
    background:rgba(200,200,200,0.55);*/
    -webkit-transition: background .6s ease;
    transition: background .6s ease
    font-family: Roboto,Arial,Helvetica,sans-serif;
  }

/* Grid view vs List view */
  .metro .listview.clubhub.clearfix .list-content * {
    max-width: 278px;
  }
  .metro .listview.clubhub.clearfix .list-content iframe,
  .metro .listview.clubhub.clearfix .list-content img {
    max-height: 200px;
  }

  .metro .listview.clubhub.clearfix .list-content.grid {
    height: 368px!important;
  }


  .metro .listview.clubhub.clearfix .list-content a.button.lightbox {
    padding: 0;
  }



  /* Set height specifically, so it isn't busted when populated */
  .window .content a.lightbox img {
    height: 250px;
  }

  .window .content a.lightbox img,
  .listview-outlook.clubhub a.lightbox img  {
    max-width: 250px;
    max-height: 250px;
  }


  /* Attach Link */
    .metro .clubhub-popup-link textarea img {
      max-width: 100%;
    }
    .metro .clubhub-popup-link input {
      max-height: 36px;
      min-height: 32px;
      font-size: 14px;
      line-height: 18px
    }
    .metro .clubhub-popup-link textarea {
      font-size: 11px;
      line-height: 14px;
      max-width: 380px;
      max-height: 88px;
      height: 88px;
      min-height: 60px;
    }


  /* Attach Document/file download */
    .metro .timeline-dl,
    .metro .clubhub-dl {
      padding-top: 35px;
      width: 200px;
      height: 200px;
      font-size: 3em;
    }


  .metro div[id*="clubhub-popup-"] {
    background-color: #fbfbfb;
    border: 1px solid rgba(0,0,0,.456);
    padding: 15px 0px 15px 0px;
    margin: 15px 0 20px 0;
    box-shadow: 0 2px 30px 0 rgba(0,0,0,.4);
  }


  /* Clubhub on Homepage */

  #clubhub-launcher {
    border: 1px solid rgba(27,161,226, 0.22);
  }

  .metro .listview-outlook.clubhub {

  }

  .metro .listview-outlook.clubhub .list.boxed {
    border-color: rgba(27,161,226, 0.22);
    -webkit-box-shadow: 0px 0px 4px 1px rgba(27,161,226, 0.123);
    -moz-box-shadow: 0px 0px 4px 1px rgba(27,161,226, 0.123);
    box-shadow: 0px 0px 4px 1px rgba(27,161,226, 0.123);

    -webkit-transition: -webkit-box-shadow 3.45s ease;
    -o-transition: -o-box-shadow 3.45s ease;
    -moz-transition: -moz-box-shadow 3.45s ease;
    transition: box-shadow 3.45s ease;
  }

  .metro .listview-outlook.clubhub .list.boxed:hover .list-content,
  .metro .listview-outlook.clubhub .list-content,
  .metro .listview-outlook.clubhub .list-content:hover {
    border: none;
  }



  /* FOR HOME PAGE Clubhub pinned class */
    .metro .pinned {
      background: transparent url('../pub/images/bolt.png') 5px 2px no-repeat;
      padding-left: 30px!important;
      min-height: 38px;
    }

    .metro .not-pinned {
      background: none;
      padding-left: 30px!important;
      min-height: 38px;
    }


    .metro .white-space-normal {
      white-space: normal!important;
    }



  .metro .mceSelectList {
    width: auto!important;
  }

  /* Fix for IE < 8 */
  @media screen\9 {
      .fileinput-button input {
        filter: alpha(opacity=0);
        font-size: 100%;
        height: 100%;
      }
    }

  .progress {
    overflow:hidden;
    height:20px;
    margin-bottom:20px;
    background-color:#f5f5f5;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
  }
  .progress-bar {
    float:left;
    width:0;
    height:100%;
    font-size:12px;
    line-height:20px;
    color:#fff;
    text-align:center;
    background-color:#428bca;
    -webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition:width .6s ease;
    transition:width .6s ease
  }
  .progress-striped .progress-bar {
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size:40px 40px
  }
  .progress.active .progress-bar {
    -webkit-animation:progress-bar-stripes 2s linear infinite;
    animation:progress-bar-stripes 2s linear infinite
  }
  .progress-bar-success {
    background-color:#5cb85c
  }
  .progress-striped .progress-bar-success {
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
  }
  .progress-bar-info {
    background-color:#5bc0de
  }
  .progress-striped .progress-bar-info {
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
  }
  .progress-bar-warning {
    background-color:#f0ad4e
  }
  .progress-striped .progress-bar-warning{
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
  }
  .progress-bar-danger {
    background-color:#d9534f
  }
  .progress-striped .progress-bar-danger {
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
  }

.metro .container .grid.fluid .row .input-control.select.nlm .row.ntm.validation-helper,
.validation-helper {
  -webkit-box-shadow: inset 0px 0px 16px 4px rgba(229, 20, 0, 0.27 );
  -moz-box-shadow: inset 0px 0px 16px 4px rgba(229, 20, 0, 0.27 );
  box-shadow: inset 0px 0px 16px 4px rgba(229, 20, 0, 0.27 );

  -webkit-transition: -webkit-box-shadow 3.45s ease;
  -o-transition: -o-box-shadow 3.45s ease;
  -moz-transition: -moz-box-shadow 3.45s ease;
  transition: box-shadow 3.45s ease;
}

.metro .container .grid.fluid .row .input-control.select.nlm .row.ntm.highlight-helper,
.metro .container .row .tr.highlight-helper,
.highlight-helper {
  -webkit-box-shadow: inset 0px 0px 16px 4px rgba(0, 138, 0, 0.31 );
  -moz-box-shadow: inset 0px 0px 16px 4px rgba(0, 138, 0, 0.31 );
  box-shadow: inset 0px 0px 16px 4px rgba(0, 138, 0, 0.31 );
  -webkit-transition: -webkit-box-shadow 3.45s ease;
  -o-transition: -o-box-shadow 3.45s ease;
  -moz-transition: -moz-box-shadow 3.45s ease;
  transition: box-shadow 3.45s ease;
}

.highlight-helper.quick {
  -webkit-box-shadow: inset 0px 0px 3px 2px rgba(0, 138, 0, 0.21 );
  -moz-box-shadow: inset 0px 0px 3px 2px rgba(0, 138, 0, 0.21 );
  box-shadow: inset 0px 0px 3px 2px rgba(0, 138, 0, 0.21 );
  -webkit-transition: -webkit-box-shadow 1.45s ease;
  -o-transition: -o-box-shadow 1.45s ease;
  -moz-transition: -moz-box-shadow 1.45s ease;
  transition: box-shadow 1.45s ease;
}

tr.highlight-helper.fadeout,
.highlight-helper.fadeout {
  -webkit-box-shadow: inset 0px 0px 6px 1px rgba(255, 255, 255, 0.99 );
  -moz-box-shadow: inset 0px 0px 6px 1px rgba(255, 255, 255, 0.99 );
  box-shadow: inset 0px 0px 6px 1px rgba(255, 255, 255, 0.99 );
  -webkit-transition: all 7.532s linear;
  -o-transition: all 7.532s linear;
  -moz-transition: all 7.532s linear;
  transition: all 7.532s linear;
}

tr.block {
  display: block;
  cursor: pointer;
}





/* Player Cards */
  table.card-container {
    height: 5cm;
    padding: 0;
    z-index: 5;
    position: relative;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
  }
  table.card-container td.photo-frame {
    text-align: right;
    vertical-align: top;
    padding: 0.1cm 0 0cm 0cm;
    width: 2.8cm;
  }
  table.card-container td.photo-frame img {
    height: 3.5cm;
    width: 2.6cm;
    max-width: 2.6cm;
    max-height: 3.5cm;
    border: 1px solid #000000;
  }
  div.water {
    background: transparent url('pub/images/card-watermark.jpg') 1.6cm 0.5cm no-repeat;
  }
  table.card-info {
    width: 100%;
  }
  table.card-info tr > td {
    padding-left: 0.1cm;
    background-color: transparent;
  }
  table.card-info tr td h3 {
    font-family: Arial Black,Arial Bold,Gadget,sans-serif;
    color: #333;
    font-size: 11pt;
    line-height: 13pt;
    font-weight: 700;
    margin: 0;
    text-align: right;
  }
  table.card-info tr td label {
    color: #555555;
    font-size: 6pt;
    line-height: 7pt;
    font-weight: 400;
    margin: 0;
  }
  table.card-info tr td {
    font-size: 10pt;
    line-height: 12pt;
    font-weight: 400;
    padding-bottom: 2pt;
  }
  table.card-info tr td.date {
    font-size: 9pt;
    line-height: 10pt;
  }
  table.card-info .card-year {
    font-family: Arial Black,Arial Bold,Gadget,sans-serif;
    font-size: 16pt;
    line-height: 18pt;
    font-weight: 700;
    text-align: center;
    width: 1.2cm;
    padding: 0!important;
  }
  table.card-info tr td.two {
    width: 2.2cm;
    padding-left: 0.25cm;
  }
  table.card-info tr td.three {
    width: auto;
  }

  .player-card {
    position:relative!important;
    border: 1px dotted #9a9a9a;
  }

  /* this class shows up after every 10 player cards generated */
    .metro .grid.fluid.player-card-template .row {
      margin-bottom: 0.1cm!important;
    }
    .metro .grid.fluid.player-card-template .row.page-break {
      margin-bottom: 0cm!important;
      page-break-after: always!important;
    }

    .metro .grid.fluid.player-card-template .row.page-break table.card-container {
      height: 4.7cm;
    }


.metro option:disabled,
option:disabled {
  background-color: #efefef!important;
  color: #999999!important
}

#sticky {
  padding: 0.5ex;
  width: 600px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}

#sticky.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  z-index: 10000;
  border-radius: 0 0 0.5em 0.5em;
}

table#facilities_by_day tbody tr td {
  height: 45px!important;
  font-size: 0.8em;
  overflow: hidden
}


/* Animations for buttons/links */

  .fade-in {
    -webkit-animation: fade-in 0.6667s;
    -moz-animation: fade-in 0.6667s;
    -ms-animation: fade-in 0.6667s;
    -o-animation: fade-in 0.6667s;
    animation: fade-in 0.6667s;
  }

  .fade-in.fast {
    -webkit-animation: fade-in 0.333s;
    -moz-animation: fade-in 0.333s;
    -ms-animation: fade-in 0.333s;
    -o-animation: fade-in 0.333s;
    animation: fade-in 0.333s;
  }

  .fade-in.slow {
    -webkit-animation: fade-in 1.333s;
    -moz-animation: fade-in 1.333s;
    -ms-animation: fade-in 1.333s;
    -o-animation: fade-in 1.333s;
    animation: fade-in 1.333s;
  }

  .fade-in.super.slow {
    -webkit-animation: fade-in 3.5813s;
    -moz-animation: fade-in 3.5813s;
    -ms-animation: fade-in 3.5813s;
    -o-animation: fade-in 3.5813s;
    animation: fade-in 3.5813s;
  }

  .fade-out,
  .dismiss:hover {
    -webkit-animation: fade-out 0.333s;  /*, slide-up 0.333s */
    -moz-animation: fade-out 0.333s;  /*, slide-up 0.333s */
    -ms-animation: fade-out 0.333s;  /*, slide-up 0.333s */
    -o-animation: fade-out 0.333s;  /*, slide-up 0.333s */
    animation: fade-out 0.333s;  /*, slide-up 0.333s */
  }

/* iframe for display content from a client website */

  #cms-iframe {
    width: 100%;
    float: right;
    height: 300px;
    overflow: auto;
  }

/* code to support preview page for CMS installs */

  div.list-area h1 {
    margin: 5px 0 20px 0;
  }
  div.list-area h2 {
    background-color: #283e4b;
    color: #1ba1e2;
    padding: 10px 20px;
    margin: 0;
  }

  ul.cms-installs {
    margin: 0 0 30px 0;
    padding: 5px;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    overflow: hidden;
    transition: box-shadow 0.33s ease-in-out;
    box-shadow: inset 16px 16px 40px -2px rgba(188,188,188, 0.65);
  }
  ul.cms-installs:hover {
    box-shadow: inset 0px 0px 25px 0px rgba(99,99,99, 0.45);
  }

  ul.cms-installs:empty {
    display: none;
  }

  ul.cms-installs > li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 5px 0px rgba(99,99,99, 0.45);
    transition: box-shadow 0.33s ease-in-out;
    border: 1px solid #fff;
    border-top-width: 2px;
  }
  ul.cms-installs > li:hover {
    box-shadow: 0px 0px 30px -5px rgba(27,161,226, 0.75);
    border-color: #1ba1e2;
  }
  ul.cms-installs > li {
    list-style-type: none;
    margin: 2px;
    padding: 0;
    display: grid;
    grid-template-columns: 5fr 1fr 1fr  2fr;
    grid-gap: 1px;
  }
  ul.cms-installs > li > div {
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 5px;
  }
  ul.cms-installs > li > div .image-button,
  ul.cms-installs > li > div a.button {
    margin: 0;
    padding: 22px 0 0 0;
    min-height: 4.2rem;
    height: 100%;
    border-radius: 5px;
    flex-grow: 1;
    font-size: 1.3em;
  }
  ul.cms-installs > li > * {
    overflow: hidden;
    padding: 5px;
  }
  ul.cms-installs > li h4 {
    font-size: 1.05em;
    line-height: 1.45em;
    padding: 5px 10px;
    margin: 0;
    min-height: 5rem;
    letter-spacing: 1px
  }

  ul.cms-installs > li > h5,
  ul.cms-installs > li > h6 {
    margin-right: 5px;
  }

  .navigation {
    background-color: #1ba1e2;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    margin-bottom: 20px;
  }

  .navigation .grid.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    grid-column-gap: 3px;
  }
  .navigation .grid.flex li {
    background: transparent;
    flex-grow: 1;
    padding: 1px;
    border-radius: 5px;
  }
  .navigation .grid.flex li > a {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
  }
  .navigation .grid.flex li > a:hover {
    border-radius: 7px;
    background-color: #3cb0e8;
  }

  .grid.x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
  }

  .grid.x3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1px;
  }

  .grid.x4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
  }

  ul.cms-installs > li > div .image-button {
    padding-left: 10px;
    padding-top: 5px;
  }
  ul.cms-installs > li > div .image-button > span {
    padding-top: 12px !important;
    border-bottom-right-radius: 5px!important;
    border-top-right-radius: 5px!important;
    background-color: transparent;
  }

  .metro .image-button.left {
    text-align: left;
  }

  .metro .input-control.color input,
  .metro .input-control.color {
    width: 100%;
    padding: 0;
  }

  .metro .input-control.color input {
    height: 32px;
    padding: 0 5px;
  }





/* Side scrolling tables */

  table.fixedcells {
    width: 300px;
    table-layout: fixed;
  }
  table.fixedcells tr {
    height: 1em;
  }
  table.fixedcells td {
    overflow: hidden;
    white-space: nowrap;
    height: 45px;
  }

  .metro table#facility-grid tbody td {
    height: 45px;
    margin: 0;
  }

/* Animations
    -webkit-animation: rs1140to940 2s; /* Safari and Chrome * /
    -moz-animation: rs1140to940 2s; /* Firefox * /
    -ms-animation: rs1140to940 2s; /* Internet Explorer * /
    -o-animation: rs1140to940 2s; /* Opera * /
    animation: rs1140to940 2s;

*/
  @keyframes fade-in {
      from { opacity: 0.1; }
      to   { opacity: 1; }
  }

    /* Firefox */
    @-moz-keyframes fade-in {
        from { opacity: 0.1; }
        to   { opacity: 1; }
    }

    /* Safari and Chrome */
    @-webkit-keyframes fade-in {
        from { opacity: 0.1; }
        to   { opacity: 1; }
    }

    /* Internet Explorer */
    @-ms-keyframes fade-in {
        from { opacity: 0.1; }
        to   { opacity: 1; }
    }​

    /* Opera */
    @-o-keyframes fade-in {
        from { opacity: 0.1; }
        to   { opacity: 1; }
    }​

  @keyframes fade-out {
      from { opacity: 1; }
      to   { opacity: 0; }
  }

    /* Firefox */
    @-moz-keyframes fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

    /* Safari and Chrome */
    @-webkit-keyframes fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

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

    /* Opera */
    @-o-keyframes fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
    }​


  @keyframes slide-down {
    from { height: 0%; }
    to   { height: 100%; }
  }
    /* Firefox */
    @-moz-keyframes slide-down {
      from { height: 0%; }
      to   { height: 100%; }
    }

    /* Safari and Chrome */
    @-webkit-keyframes slide-down {
      from { height: 0%; }
      to   { height: 100%; }
    }

    /* Internet Explorer */
    @-ms-keyframes slide-down {
      from { height: 0%; }
      to   { height: 100%; }
    }​

    /* Opera */
    @-o-keyframes slide-down {
      from { height: 0%; }
      to   { height: 100%; }
    }​


  @keyframes slide-up {
      from { height: 100%; }
      to   { height: 0%; }
  }

    /* Firefox */
    @-moz-keyframes slide-up {
        from { height: 100%; }
        to   { height: 0%; }
    }

    /* Safari and Chrome */
    @-webkit-keyframes slide-up {
        from { height: 100%; }
        to   { height: 0%; }
    }

    /* Internet Explorer */
    @-ms-keyframes slide-up {
        from { height: 100%; }
        to   { height: 0%; }
    }​

    /* Opera */
    @-o-keyframes slide-up {
        from { height: 100%; }
        to   { height: 0%; }
    }​


  @keyframes rs1140to940 {
      from { width: 1140px; }
      to   { width: 940px; }
  }

    /* Firefox */
    @-moz-keyframes rs1140to940 {
        from { width: 1140px; }
        to   { width: 940px; }
    }

    /* Safari and Chrome */
    @-webkit-keyframes rs1140to940 {
        from { width: 1140px; }
        to   { width: 940px; }
    }

    /* Internet Explorer */
    @-ms-keyframes rs1140to940 {
        from { width: 1140px; }
        to   { width: 940px; }
    }​

    /* Opera */
    @-o-keyframes rs1140to940 {
        from { width: 1140px; }
        to   { width: 940px; }
    }​


/* Animations */

  keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
  }
  @-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
  }

  @-webkit-keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    49%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(1px); }
    51%   { -webkit-filter: blur(0px); }
    100%   { -webkit-filter: blur(0px); }
  }

  @-webkit-keyframes rainbow {
    100% { -webkit-filter: hue-rotate(360deg); }
  }

  @-webkit-keyframes fall {
    0%   { -webkit-transform: none; }
    100%   { -webkit-transform: rotateX(-90deg); }
  }



/* NEW 2020 - Pup3 Classes for New UI */

  /* HEADER */
  body.pup3 header {
    position: fixed;
    top: 0px;
    background-color: #fff;;
    width: inherit!important;
    z-index: 1000;
  }
  body.pup3 .navigation-bar {
    position: fixed;
    top: 45px;
    width: inherit!important;
    z-index: 1000;
  }

  body.pup3 .list-area .grid h2 {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 1000;
  }
  /* Pushes main content down to accommodate the fixed header */
  body.pup3 header + div + div {
    margin-top: 90px;
  }

  /* iframe stuff for displaying client installs */
  body.pup3 #cms-iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height:10px;
    overflow: auto;
    o pacity: 0;
    transition: height 1s linear, width 0.5s ease-in-out, opacity 0.75s ease-in border 0.45s linear;
    border: 2px solid transparent;
    z-index: 100;
  }

  body.pup3 #cms-iframe.active {
    opacity: 1;
    width: 50vw;
    height: 50vh;
    border: 2px solid blue;
    z-index: 100000;
  }

















/* Hover/focus/active checkboxes */
.uni-checkbox {
  /* Use the following unicode for content ( \25A2 | \25FB | \25EF | \25CE | \2610 ='unchecked' - \25A3 | \25C9 | \25FC | \2611 | \2612 ='checked')  */
}

/* Buttons with icons, without extra markup  */
  .uni-accept,
  .uni-decline {
    font-size: 0.83rem;
    line-height: 1.3rem;
    position: relative;
  }

  [class^="uni-"]:before,
  [class*="uni-"]:before {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    speak: none;
    font-size: 1.15rem;
    line-height: 1.3rem;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0 5px 0 0;
    position: relative;
    left: -3px;
    top: 1.5px;
  }
  .uni-accept::before {
    content: '\2611';		/* others: 2295, 229A, 22B3, 23FA, 2611 */
  }
  .uni-decline::before {
    content: '\2612';  /* others:  2573, 2326, 2327, 2297, 2298, 229F, 22A0, 2611, 2612 */
  }

  .uni-yes::before {
    content: '\2713';		/* others: 2295, 229A, 22B3, 23FA, 2611 */
  }
  .uni-no::before {
    content: '\2573';  /* others:  2573, 2326, 2327, 2297, 2298, 229F, 22A0, 2611, 2612 */
  }