html {
		height:100%;
	}
		body {
			font-family:-apple-system, BlinkMacSystemFont, 
		    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
		    "Fira Sans", "Droid Sans", "Helvetica Neue", 
		    sans-serif;
		    /* :( */
			margin:0;
			padding:0;
			-webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		    line-height:1.3em;
		    height:100%;
		    overflow:hidden;
		}
		*, *:before, *:after {
			box-sizing:border-box;
		}
		input[type=number]{
		    width: 50px;
		} 
		.input, .output {
			position:relative;
			padding:3px;
			height:100%;
			padding-top:73px;
			overflow-y:auto;
			overflow-x:hidden;
		}
		.output {
			padding:70px 0 0 0;
		}
		.header {
			z-index: 5;
			height:70px;
			position:fixed;
			width:100%;
			box-shadow:2px 0 4px rgba(0,0,0,.4);
			top:0;
			left:0;
		}
		.title {
			padding:0 10px;
			background-color: #6A1B9A;
			color:#FFF;
			height:40px;
			font-size:30px;
			line-height:40px;
			overflow:hidden;
		}
		.title img {
			display:inline;
			/*background-image: url(https://scs.synopticlabs.net/images/mw-sl-light-logo.png);
			background-size: fill;*/
		}
		.roles {
			overflow:auto;
			background-color: #607D8B;
			color:#fff;
			font-weight:400;
			height:30px;
			line-height:30px;
			cursor:pointer;

		}
		.role-output {
			background-color: #78909C;
			color:#fff;
		}
		.roles .role {
			float:left;
			width:50%;
			transition: width 0.6s;
			-webkit-transition: width .6s;
			text-align:center;
		}
		.roles .role .print {
			float:right;
			background-color: #90A4AE;
			padding:0 10px;
		}
		body.showresults .input {
			/*
			*	Make the inputs a different color
			*/
			width:50%;
			float:left;
			background-color: #CFD8DC;
		}
		body.showresults .output {
			/*
			*	Make the inputs a different color
			*/
			width:50%;
			float:left;
			background-color: #fff;
		}


		@media screen and (max-width:800px) {
			body.showresults .input {
				width:100%;
				float:none;
			}
			body.showresults .output {
				width:100%;
				float:none;
				display:none; /*displayed via code*/
			}
			.title {
				font-size:22px;
			}
			.roles .role {
				width:30%;
			}
			.roles .role.on {
				width:70%;
			}
			.roles .role.on:after {
				content:" \25C0";
			}
			/* default overrides. */
			body.showresults .output.showsmall {
				display:block;
			}
			.hidesmall {
				display:none;
			}
		}
		.ib {
			/*input block */
			clear:both;
			overflow:auto;
			padding:5px;
			background-color:rgba(255,255,255,.5);
			margin-bottom:6px;
			transition: box-shadow .5s;
			-webkit-transition: box-shadow .5s;
			box-shadow:1px 1px 3px rgba(0,0,0,.1);
			border-radius:2px;
		}
		.ib:hover {
			box-shadow:2px 2px 8px rgba(0,0,0,.2);
		}

		.tt {
			/* IB title */
			color:#311B92;
			font-weight:600;
			border-bottom:2px solid #B0BEC5;
			margin-bottom:2px;
			display: inline-block;
			line-height:22px;
		}
		.tt:after {
			content:" OK";
			color:#0A0;
			font-size:10px;
		    line-height:22px;
		}
		.ib.error {
			box-shadow: 0px 0px 8px rgba(200,0,0,.7);
		}
		.ib.error .tt {
			border-bottom-color:#c00;
		}
		.ib.error .tt:after {
			background-image: url('./warn.png');
		    background-size: 18px 18px;
		    background-repeat: no-repeat;
		    background-position:center left;
		    display: inline-block;
		    height: 22px;
		    color:#C00;
		    font-size:10px;
		    line-height:22px;
		    margin-left:10px;
		    padding-left:19px;
		    content:"CORRECTIONS REQUIRED";
		}
		html.svg .ib.error .tt:after {
			/* modernizr says we can use svg */
			background-image: url('./warn.svg');
		}
		th {
			text-align:left;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		td {
			padding:2px;
			/*border-bottom: 1px solid #DDD;*/
		}
		
		.sm {
			font-size:.9em;
		}
		.map-container {
			 height:100%;
			 width:100%;
			 position:relative;
		}
		
		.badge {
			font-size:11px;
			padding:3px;
			text-transform: uppercase;
			background-color:#FC0;
			border-radius:5px;
			font-weight:600;
		}
		tr.good td {
			color:#080;
		}
		tr.bad td {
			color:#A00;
		}
		button.hov {
			background-color: transparent;
			border:none;
			font-size:14px;
			color:#311B92;
			border-radius:3px;
			padding:8px 15px;
			transition: background-color .2s;
			-webkit-transition: background-color .2s;
			cursor:pointer;
			float:right;
			outline:none;
		}
		button.hov:hover {
			background-color: rgba(0,0,0,.1);
		}
		
		.input-edit {
			display: none;
			overflow:auto;
			padding:4px;
			border:1px solid #FFF;
			background-color: rgba(255,255,255,.7);
			border-radius:2px;
		}
		.input-data-message {
			color:#000;
			font-size:12px;

		}
		/*
		*	Map Stuff
		*/
		#firemarker {
		    background-image: url('./flame.png');
		    background-size: cover;
		    width: 30px;
		    height: 30px;
		    border-radius: 50%;
		    border:2px solid #FFF;
		    cursor: pointer;
		}
		.o-dist {
			line-height: 30px;
			text-align:center;
		}
		.o-dist img {
			max-height:30px;
			max-width:30px;
			vertical-align: middle;
			
		}
		
		.output-head, .output-back, .output-flank, .output-head-dist, .output-back-dist {
			width:45%;
			text-align:center;
		}
		.output-head, .output-back, .output-flank {
			background-color: #FFE0B2;
			border-radius:4px;
			overflow: hidden;
		}
		.output-head h3, .output-back h3, .output-flank h3 {
			margin:0;
			padding:5px;
			width:100%;
			background-color:#FFAB40;


		}
 		.output-head-dist, .output-back-dist {
			clear:both;
		}
		.output-fire-flank {
			display:table;
			clear:both;
			padding:4px 0;
			width:100%;
			position:relative;
			height:auto;
		}
		.output-fire, .output-flank {
			padding:0;
			display:table-cell;
			width:45%;
			text-align:center;
		}
		.output-fire {
			background-color: #FFA726;
			border-radius:4px;
			color:#000;
		}
		.output-fire hr {
			border-top: 1px solid #FF6D00;
			border-width: 1px 0 0 0;
			color:none;

		}
		.output-flank-dist {
			width:10%;
			display:table-cell;
			line-height:12px;
			/* this will center everything nicely*/
		}
		.readout {
			font-weight:600;
		}
		.output .unit {
			font-family: monospace;
			font-weight:400;
		}
		ul.output-toggles {
			padding:0;
			margin:0;
			text-indent: none;
			list-style:none;
			overflow:auto;
			position:fixed;
			right:0;
			z-index:99;
			width:inherit; /* this is sneaky */
			height:40px;
		}
		.output ul.output-toggles li {
			display:block;
			float:left;
			width:25%;
			list-style: none;
			padding:0;
			line-height:40px;
			margin:0;
			text-align:center;
			background-color:#CFD8DC;
			border-right:1px solid #ECEFF1;
			color:#000;
			cursor:pointer;
		}
		.output ul.output-toggles li:hover {
			cursor:pointer;
			background-color: #B0BEC5;
		}
		.output ul.output-toggles li.on {
			background-color: #ECEFF1;
		}
		.output-tab {
			height:CALC(100% - 40px);
			margin-top:40px;
			overflow:auto;
		}
		html.nocsscalc .output-tab {
			/* a class I add */
			height:100%;
			padding-top:40px !important;
			margin:0;
		
		}
		#tab-table input[type=text] {
			display:inline;
			border:none;
			width:auto;
		}
		#tab-table table {
			width:100%;
		}
		#tab-table td {
			border-bottom: 1px solid #DDD;
		}
		@media print {
			body, html {
				padding:0;
				margin:0;
				overflow:auto;
				height:auto;
			}
			.header {
				position:relative;
				height:auto;
				margin:0;
				padding:0;
			}
			.title {
				color:#000;
				font-size:20px;
				height:auto;
				position:relative;
				margin:0;
				padding:0;
			}
			.title img {
				display: none;
			}
			.roles {display:none;}
			body.showresults .input {display:none;}
			body.showresults .output {
				margin:0;
				padding:0;
				width:100%;
				display:block !important;
			}
			body.showresults ul.output-toggles {
				display:none;
			}
			body.showresults .output-tab {
				padding:0 !important;
				margin:0 !important;
				display:none !important;
				width:100%;
			}
			body.showresults .output-tab.forPrinting {
				display:block !important;
				height:auto;
			}
		}
		footer {
			position:relative;
		}