@media screen and (max-width: 480px) {
  #user_wrap {
    width:40% !important;
  }
  #meet_wrap {
    left:40% !important;
    width:60% !important;
  }
  #soln_wrap {
    display: none !important;
  }
}


body {
    margin:0;
    padding:0;
    background-color:#cde;
    font-family:sans-serif;
  }

/*
 * Three-column, responsive layout.
 */

#user_wrap {
    position:absolute;
    top:3ex;
    left:0;
    width:25%;
  }
#meet_wrap {
    /* Want this to be min-height:100vh, so have to play with the box model. */
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:25%;
    width:50%;
    padding-top:3ex;
    background-color:white;
    min-height:100vh;
  }
#soln_wrap {
    position:absolute;
    top:3ex;
    right:0;
    width:25%;
  }


/*
 * #user
 */

#user { margin:0; margin-left:2ex; padding:0; }

#new_user_wrap { display:none }
#new_user_wrap.show {
    display:block;
    padding:0.5ex 0.5ex 0.5ex 20px;
  }
div#user_list > div {
    position:relative;
    cursor:pointer;
    padding:0.5ex 0.5ex 0.5ex 20px;
  }
div#user_list > div > input {
    position:absolute;
    right:0.5ex;
  }
div#user_list > div > label { /* Bigger than input[checkbox], to help on touch */
    position:absolute;
    top:0;
    right:0;
    margin:0;
    width:3ex; height:100%;
    padding:0;
  }
div#user_list > div > span {
    position:absolute;
    display:block;
    width:10px; height:10px;
    top:0;
    left:5px;
    bottom:0;
    margin:auto 0 auto 0;
  }
div#user_list > div.Yes   > span { border:solid 1px black; background-color:#8f8; }
div#user_list > div.No    > span { border:solid 1px black; background-color:#f88; }
div#user_list > div.Maybe > span { border:solid 1px black; background-color:#fc8; }


/*
 * #meet
 */

#meet { margin:0; padding:0 1ex; }
.cal {
    display:inline-block;
    vertical-align:top;
    margin:2ex 1ex;
    border:none;
    padding:0;
  }
#PLUS {
    display:inline-block;
    vertical-align:bottom;
    margin:2ex 1ex;
  }

caption, th { color:gray }

td { padding:0 }
td > button {
    margin:0;
    border:none;
    width:100%;
    background-color:#f8f8f8; padding:0.3ex;
    text-align:center;
    font-family:monospace;
    border-bottom:5px solid #f8f8f8;
  }
td button::-moz-focus-inner { border:none }

/* Display for current view user. */
td.NONE > button  { background-color:white }
td.Yes > button   { background-color:#cfc }
td.No > button    { background-color:#fcc }
td.Maybe > button { background-color:#feb }

/* Display for ALL (with uderscore). */
td._NONE > button  { border-bottom:5px solid white }
td._Yes > button   { border-bottom:5px solid #cfc }
td._No > button    { border-bottom:5px solid #fcc }
td._Maybe > button { border-bottom:5px solid #feb }

td.complete > button      { font-weight:bold }
td.complete._Yes,
td.complete._Maybe { outline:1px solid black; }
td.complete._Yes > button   { border-bottom:5px solid #8f8 }
td.complete._No > button    { border-bottom:5px solid #f88 }
td.complete._Maybe > button { border-bottom:5px solid #fc8 }

td.complete.Yes._Yes > button { background-color:#8f8 }

td>button { text-decoration:none; color:black }
.past { opacity:0.25 }
.view { background-color:white }
.curr { font-weight:bold }
.grey { color:gray }

button {cursor:pointer}
button[disabled] {cursor:default}


/*
 * #soln (Solution)
 */

#soln { margin:0 2ex; padding:0; }
#solution { margin:2ex 0; background-color:white; padding:0.2ex; }
#solution div { padding:0.2ex }
#solution div.complete._Yes   { background-color:#cfc }
#solution div.complete._Maybe { background-color:#feb }

/*
 * HEADER BAR
 */

#hdr {
    position:fixed;
    z-index:10;
    top:0;
    left:0;
    right:0;
    margin:0;
    height:2ex;
    padding:0.5ex 0.5em;
    background-color:black;
    color:#cde;
  }
.hdr_item {
    display:none;
    float:right;
    padding-left:1em;
  }
#hdr.show>.hdr_item {
    display:block;
  }
#hdr h1 {
    display:inline;
    margin:0;
    padding:0;
    font-size:100%;
    color:white;
  }
.hdr_button {
    width:1em;
  }
.hdr_button img {
    margin:0;
    padding:0;
    height:100%;
    width:auto;
  }
.hdr_item a {
    text-decoration:none;
    color:white;
  }


/*
 * POPUPS
 */

#popups>div {
    display:none
  }
#popups>div.show {
    display:block;
    position:fixed;
    z-index: 100;
    left:0; top:0;
    width:100%; height:100%;
  }
.popup_back {
    position:fixed;
    left:0; top:0;
    width:100%; height:100%;
    opacity:0.5;
    background-color:gray;
  }
.popup {
    box-sizing:border-box;
    position:relative;
    z-index: 101;
    width: 60ex;
    top: 20%;
    margin-left: auto;
    margin-right: auto;

    border: solid 2px black;
    background-color: white;
    padding:3ex;
  }
.popup table { margin:2ex 0 }

#edit_user_form > table td { vertical-align:bottom }
#edit_user_new {display:none}
#edit_user_new.show {display:table-row}


#detail > .popup {
    width: 80%;
    max-height: 60%;
    overflow: auto;
  }
#detail table { margin-left:auto; margin-right:auto; }
#detail th,
#detail td {
    color:black;
  }
#detail thead div {
    overflow: visible;
    margin:3px;
    width:3ex;
    transform: translate(-40%) rotate(-45deg) translate(50%);
  }
#detail tbody th div {
    text-align:right;
    font-weight:normal;
    margin:3px;
    padding:0 3px;
  }
#detail th div.complete._Yes   { background-color:#cfc }
#detail th div.complete._Maybe { background-color:#feb }

#detail td div {
    overflow:visible;
    margin:3px;
    width:3ex;
    text-align:center;
  }
#detail td div.Yes   { background-color:#cfc }
#detail td div.No    { background-color:#fcc }
#detail td div.Maybe { background-color:#feb }


/*
 *  HELP
 */

h1 {
    font-style:italic;
    font-weight:normal;
    font-size:x-large;
  }

.example_icon {
    display:inline-block;
    vertical-align:bottom;
    margin-right:0.5ex;
    padding:2px;
    background-color:black;
    color:white;
    font-weight:bold;
  }