html, body {
	margin:    0;
	padding:   0;
	font-size: 17px;
}

body {
	background-color: #eee;
	font-family:      'Roboto', sans-serif;
}

td {
	font-family: 'Roboto', sans-serif;
}

#header {
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	justify-content: flex-start;

	background:      #840c42;
	height:          64px;
	padding-left:    16px;
	border-bottom:   2px solid #fff;

	font-family:     'Roboto', 'Roboto', sans-serif;
	font-weight:     bold;
	text-transform:  uppercase;
	color:           #fff;
}

#header div.item {
	margin-right:  16px;
	vertical-align: middle;
}
#header div.item:last-child {
	margin-right: 0;
}

#header div.item.text   { margin-right: 24px; }
#header div.item.text a {
	text-decoration: none;
	color:           inherit;
}

#header div.item.image     { margin-right: 8px; }
#header div.item.image img { height: 32px; }

#content {
	padding: 0;
}

#content > .column {
	float:   left;
	padding: 16px;
}

#content > .column > h1 {
	font-size:  22px;
	margin:     -16px 0 16px -16px;
	width:      calc(100% + 32px);
	background: #444;
	color:      #fff;
	padding:    8px;
}

#login-profile {
	margin-left:    auto;
	padding-right:  16px;
	font-size:      14px;
	text-transform: none;
}

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

@media only screen and (max-width: 430px) {
	#header div.item.text             { display: none; }
	#header div.item.image            { margin-right: 16px; }
	#header div.item.image:last-child { margin-right: 0px; }
}