html {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;		
	height: 100%;
	line-height: 1.6em;
}

body {
	margin: 0;
	width: 100%;
	height:100%;
	background-color: #f5f5f5;
	color: #818181;
	text-align: center;
	white-space: nowrap;
}

body > * {
	text-align: left;
	white-space: normal;	
}

body:before {
	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle; 
}

a {
	color: grey;
}

a.command {
	display: block;
	font-size: 12px;
	margin-top: 20px;
	text-align: center;
}

form {
	display: inline-block;
	vertical-align: middle;
	/*top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);*/

	width: 320px;	
	padding: 20px 25px;
	box-sizing: border-box;
	background-color: #f5f5f5;
	
}

@media (min-width: 500px) {
	body {
		background-color: #f5f5f5;
	}
	
	form {
		border: 1px solid lightgrey;
		padding: 20px 40px;
		border-radius: 5px;
		background: #f7f7f7;
	}	
	
	a.command {
		margin-left: -40px;
		margin-bottom: -20px;
		margin-top: 30px;
		padding: 5px 0;
		width: calc(100% + 80px);
		background: #F0F0F0;
	}	
}

@media print {			
	form {		
		width: 100%;
		position: static;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
			border: 0;
	}
	
	.buttons, .no-print {
		display:none;
	}
}

.row {
	margin: 12px 0px;
}

.row.app {
	margin-bottom: 30px;
}


label {
	margin-right: 10px;
}

select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: white;
	padding: 2px;
	background: white right 10px center no-repeat url(./images/selectbox-trigger.png);
	
	/* hide drop down arrow */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* hide drop down arrow */
select::-ms-expand {
    display: none;
}

input[type=text], input[type=email], input[type=password], select {
	width: 100%;

	border: 1px solid lightgrey;
	height: 40px;
	padding: 10px;
	box-sizing: border-box;
	margin-top: 5px;
	border-radius: 3px;
	font-size: 16px;
}

select {
	padding-top: 7px;
}

.error {
	color:red;
	font-size: 90%;
	margin-bottom: 10px;
}

.row.buttons {
	margin-top: 30px;
	margin-bottom: 0px;
}

#logo {
	height: 32px;
	margin: 20px auto;
	display: block;
}
 
button, a.button {
	background: #818181;
	border: 0;
	border-radius: 3px;
	color: white;
	font-size: 14px;
	line-height: 1.5em;
	padding: 10px 20px;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
}

button:not(:first-child), a.button:not(:first-child) {
	margin-left: 10px;
}

button[type=submit] {
	background: #99CC00;
}

button[type=submit]:only-child {
	width: 100%;
}

input[type=checkbox],
input[type=radio] {
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox] + label,
input[type=radio] + label {
  margin-left  : -2em;
  line-height  : 1.5em;
  word-wrap: break-word;
}

input[type=checkbox] + label > span,
input[type=radio] + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : top;
}

input[type=checkbox]:checked + label > span:before {
  content     : 'x';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=radio]:checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}