* {
	font-family: Arial;
	font-size: 18px;
	padding:0;
	margin:0;
	box-sizing: border-box;
}

body {
  margin-top:3em;
}

div#header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:3em;
	vertical-align: middle;
	background:#48f;
	box-shadow: 0px 4px 8px #727272;
}

div#header img {
	height:2.25em;
	margin:.25em;
	transition: all .2s;
}

div#header .header1 {
	color:#fff;
	text-decoration:none;
	font-size:1.2em;
}

div#header .header2 {
	color:#c8c8c8;
	font-size:0.8em;
	text-shadow: 1px 1px 0px #000;
}

div#footer {
	color:#646464;
	background:rgba(255,255,255,0.5);
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	height:1.2em;
	font-size:0.66em;
	text-align: center;
}

div#content {
	max-width: 100%;
	width: 1280px;
	min-width: 400px;
	margin: auto;
	margin-top: 3em;
	padding: 0.5em;
	min-height:75%;
}

input[type="number"], input[type="text"], input[type="password"] {
	width: 360px;
	margin:.5em;
	margin-left:10px;
	font-size:1.5em;
	border: none;
	border-bottom: thin solid gray;
}
input[type="button"], input[type="submit"] {
	float:right;
	margin:.5em;
	margin-right:10px;
	font-size:1.2em;
	padding:.5em;
	border-radius:.5em;
	border:thin solid gray;
	background: linear-gradient(0deg, #c8c8c8 0, #e0e0e0 100%);
	box-shadow: 1px 2px 3px #c8c8c8;
}
textarea {
	width:100%;
	max-width:100%;
	min-width:360px;
	height:64px;
	min-height:64px;
}
div#content div.vote, div#content div.answer {
	padding-bottom: 1em !important;
}

h1 {
	font-size:1.5em;
}
h2 {
	font-size:1.33em;
}

form>p {
	text-align: justify;
}

div#drawer {
	position:fixed;
	top:3em;
	bottom:0;
	left:-360px;
	width:360px;
	background:linear-gradient(90deg, #000000 0, #242424 100%);
	transition: left .5s ease-in-out;
}

div#drawer i {
	display:block;
	color:#fff;
	line-height:2.25em;
	font-size:1.5em;
	margin-left:1em;
}

div#drawer a:link, div#drawer a:hover, div#drawer a:visited {
	display:block;
	line-height:2.25em;
	text-align: center;
	font-size:1.15em;
	color:#fff;
	text-decoration: none;
	border-top:thin solid rgba(200,200,200,0.5);
	border-bottom:thin solid gray;
}

div#drawer a:hover {
	background:rgba(255,255,255,0.15);
}

div.keyinput {
	display: block;
	width: 400px;
	margin: auto;
}

.rotated {
	transform:rotate(-90deg);
}

.small {
	font-size:.8em;
}

div.vote {
	margin:auto;
}

div.vote > div {
	display:inline-block;
	width:55px;
	height:55px;
	margin:0; padding:0;
	border-top:thin solid gray;
	border-bottom:thin solid gray;
	background:linear-gradient(0deg, #c8c8c8 0, #d0d0d0 100%);
	text-align:center;
	line-height:55px;
	color:#484848;
	transition: all .3s;
	cursor: pointer;
}
div.vote > .option1.selected {
	color:#000000;
	font-weight: bold;
	background: #80d254;
	background: linear-gradient(to bottom, #80d254 0%,#47ba2a 50%,#1caa00 51%,#4fcb2d 100%);
}
div.vote > .option2.selected {
	color:#000000;
	font-weight: bold;
	background: #aad254;
	background: linear-gradient(to bottom, #aad254 0%,#77ba2a 50%,#55aa00 51%,#84cb2d 100%);
}
div.vote > .option3.selected {
	color:#000000;
	font-weight: bold;
	background: #d2d054;
	background: linear-gradient(to bottom, #d2d054 0%,#a7ba2a 50%,#8eaa00 51%,#b8cb2d 100%);
}
div.vote > .option4.selected {
	color:#000000;
	font-weight: bold;
	background: #d2a654;
	background: linear-gradient(to bottom, #d2a654 0%,#ba9d2a 50%,#aa8e00 51%,#cba92d 100%);
}
div.vote > .option5.selected {
	color:#000000;
	font-weight: bold;
	background: #d27c54;
	background: linear-gradient(to bottom, #d27c54 0%,#ba6d2a 50%,#aa5500 51%,#cb742d 100%);
}
div.vote > .option6.selected {
	color:#000000;
	font-weight: bold;
	background: #d25456;
	background: linear-gradient(to bottom, #d25456 0%,#ba3d2a 50%,#aa1c00 51%,#cb402d 100%);
}
div.vote > .optionN {
	width:110px;
	color:rgba(0,0,0,0);
}
div.vote > .optionN.selected {
	font-weight: bold;
	background: #5481d2;
	background: linear-gradient(to bottom, #5481d2 0%,#2a49ba 50%,#001caa 51%,#2d4fcb 100%);
}

div#live {
	margin-bottom: 3em;
}
div.liverowheader {
	font-weight: bold;
}
div.liverow {
	display: flex;
	flex-direction: row;
	width: 100%;
}
div.liverow .text {
	flex: 1 1 50%;
}
div.liverow .mw {
	width: 2em;
	text-align: center;
}
div.liverow .pzwrapper {
	width: 5em;
	position: relative;
}
div.liverow .pzwrapper span {
	position: absolute;
	top:0;
	left:0;
	height: 1.2em;
}
div.liverow .pzwrapper .bar {
	background: linear-gradient(90deg, #64c848 0, #ffffff 5em);
	border: 1px solid #006400;
	display: block;
	transition: width .3s;
}
div.liverow .pzwrapper .value {
	width: 100%;
	text-align: right;
}