html, body, div, canvas, p, span, strong, a, img, form, input, textarea, label, fieldset, i,em,b,strong,ul,li,h1,h2,h3,h4,h5,h6{
    padding: 0;
    margin: 0;
    font: inherit;
}

h1		{font-size: 2.4em; font-family: 'Lora', serif;}
h2		{font-size: 2.2em; font-family: 'Lora', serif;}
h3		{font-size: 1.6em; font-family: 'Lora', serif;}
h4		{font-size: 1.2em; font-family: 'Lora', serif;}
h5		{font-size: 0.7em;}
h6		{font-size: 0.5em;}


i,em {font-style: italic;}

b,strong	{font-weight: 900;}


html{
	height: 100%;
}

body{
	background: linear-gradient(0.50turn, #000000 0%, #909090 60%, #202020 100%);
	background-repeat: no-repeat;
	background-size: cover;
	color: #f0f0f0;
	padding: 5px;
}

a{
	color: #eee;
}

.bottom{
	position: fixed;
	bottom: 0.5em;
}

.header{
	width: 100%;
	/*height: 32px;*/
}
.header table{
	width:100%;
}
.header table td:first-of-type{
	width:100%;
}
.header table td:nth-last-of-type{
	width:25%;
	text-align: right;
	padding-right: 3em;
}
.header img{
	height: 32px;
}

.hidden{
	display:none;
}
.right{
	text-align: right;
}

.main-menu{
	display: flex;
	flex-direction: row;
}
.menu__element{
	flex:1;
	border: 2px solid #ccc;
	padding: 0.5em 1em;
	text-align: center;
}

.block{
	border: #eee 3px solid;
}
.device-container{
	display: flex;
	flex-wrap: wrap;
}

.device{
	flex: 1;
	/*min-width: 15em;*/
	min-height: 5em;
	/*max-width: 40em;*/
	max-height: 15em;

	border: #ccc 1px solid;
	border-radius: 1em;
	background-color: rgba(127,127,127,0.2);
	width: 30em;
	padding: 1em;
	margin: 1em;
}

.device-name{
	font-weight: bold;
	font-size: 1.2em;
}

.device-uuid{
	font-size: 0.7em;
}

.capabilities-one{
	border: #999 1px solid;
	margin-top: 2px;
}



@media screen and (max-device-width: 720px) {
    h1{font-size: 1.52em;}
    h2{font-size: 1.0em;}

}