* {
	box-sizing: border-box;
}

a:hover {
    cursor: pointer;
}

img {
    max-width: 100%;
    height:auto;
}

body {
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    font: 13pt Georgia, Times New Roman, Times, serif;
	background: #f0f0f0;
    height: 100%;
}

.desktop {
	display: block;
}

.mobile, .mobile_inline {
	display: none;
}

#wrapper {
    height: 100vh;
    width: 100vw;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px auto 1fr 50px;
}

#header {
	background: #007396 url(/img/gears.gif) left bottom no-repeat;
	display: grid;
	grid-template-rows: 100%;
  	grid-template-columns: 100%;
  	overflow: hidden;
}

#navhdr {
	background: #73d1df url(/img/shade.gif) left top repeat-x;
	margin-top: 20px;
	height: 80px;
	margin-left: 100px;
	margin-right: 100px;
	display: grid;
	grid-template-columns: 100%;
  	grid-template-rows: auto auto;
}

#logo {
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 20px;
	color: #ffffff;
	font-size: 38px;
	font-weight: bold;
}

#logo a {
    text-decoration: none;
    color: #fff;
}

sup {
    position: relative;
    font-size: 30%;
    line-height: 0;
    vertical-align: baseline;
    top: -1.2em;
    font-weight: normal;
	font-style: normal;
	opacity: 0.8;
	padding-left: 0;
	margin-left: -0.5em;
}

.centerrow {
    display:grid;
    grid-template-columns: 1fr;
    overflow-y: hidden;
    background: #f0f0f0;
    padding-left: 100px;
    padding-right: 100px;
}

.content {
	background-color: #ffffff;
	padding: 20px;
}

.starthidden {
	display: none;
}

.maincell, #scratchbox {
    min-width: 150px;
    text-align: center;
}

.maincell textarea {
	font: 12pt "Lucida Grande", Lucida, Verdana, sans-serif;
  	border: 1px solid #aaa;
  	width: 130px;
}

#scratchbox textarea {
	font: 11pt "Lucida Grande", Lucida, Verdana, sans-serif;
  	border: 1px solid #aaa;
}

.scrollcontent {
    background: white;
    overflow-y: scroll;
    min-width: 150px;
    margin-right: 10px;
    margin-left:  10px;
}

.scrollfooter {
    text-align: center;
    position: absolute;
    bottom: 30px;
    width: 150px;
    height: 24px;
    color: #fff;
	font-size: 14px;
	font-style: italic; 
	vertical-align: middle;
}

.subgrid {
	background: white;
    display: grid;
    grid-template-columns: 1fr auto auto auto auto auto auto 1fr;
    overflow-y: hidden;
}

.footer {
    background: #007396;
    height: 50px;
}

#footermain {
	height: 50px;
	margin-left: 100px;
	margin-right: 100px;
	background: #73d1df url(/img/shade.gif) left top repeat-x;
	font: 10pt Georgia, Times New Roman, Times, serif;	
	padding: 10px;
	color: #007396;
}

.smallbold {
	font-weight: bold;
	font-size: small;
}

.smallfont, #availList, #takenList {
	font: 12pt Georgia, Times New Roman, Times, serif;	
}

.small {
	font-size: small;
}


.pluscell h4 {
	text-align: center;
	font-size: 28pt;
	font-weight: bold;
	margin: 10px 0 0;
	padding: 0;
}

#combine {
	padding-top: 20px;
	font: 12pt Georgia, Times New Roman, Times, serif;
	width: 150px;
}

#combine p {
	margin-left: 10px;
	margin-right: 10px;
}

#results h4 {
	text-align: center;
}

#checkOne {
	
	padding-bottom: 20px;
}

.availHeader {
	font: 12pt Georgia, Times New Roman, Times, serif;
	background-color: #2da82e;
	color: #fff;
	font-weight: bold;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.takenHeader {
	font: 12pt Georgia, Times New Roman, Times, serif;
	color: #fff;
	font-weight: bold;
	background-color: #848484;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#taken {
	margin-bottom: 10px;
}

#available {
	margin-bottom: 20px;
}

/* Vue transitions: */


.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/* screen size between 500-900 pixels: */

@media screen and (max-width: 900px) {
	
	.nowide {
		display: none;
	}
	
	#navhdr, #footermain {
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.maincell {
	    min-width: 80px;
	    text-align: center;
	}
	
	.maincell textarea {
		font-size: 11pt;
	  	border: 1px solid #aaa;
	  	width: 90%;
	}
	
	.subgrid {
		background: white;
	    grid-template-columns: auto auto auto auto auto auto;
	}
	
	.centerrow {
	    background: white;
	    padding-left: 10px;
	    padding-right: 10px;
	}

	#leftpad {
		display: none;
	}
	
	select {
	  font-size: 12px;
	  height: 34px;
	  padding-left: 5px;
	  padding-right: 5px;
	}
}

/* material icons: */

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* the end */