html, body {
	margin:  0;
	padding: 0;
	background: #eee;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body, td {
	font-family: sans-serif;
	font-size:   14px;
}

[onClick] {
	cursor: pointer;
}

/* -------------------- *
 * Side navigation menu *
 * -------------------- */
.context-menu[menu=side-menu] {
	top:  16px;
	left: 16px;
}

.context-menu[menu=side-menu] a {
	color: #785b1d;
}

select {
	background: #fff;
}

input[type=text].invisible {
	padding:   0;
	margin:    0;
	border:    0;
	width:     100%;
	padding:   5px;
	font-size: 16px;
}

#logo {
	position:     relative;
	margin:       0 auto 0 auto;
	padding:      0px 0px 24px 24px;
	width:        100%;
	max-width:    900px;
	background:   #fff;
	border-left:  1px solid #aaa;
	border-right: 1px solid #aaa;
}

#logged-in-user {
	float:      right;
	font-style: italic;
	font-size:  12px;
	color:      #003158;
	margin-top: 12px;
}

#content {
	padding:       16px 24px 24px 24px;
	width:         100%;
	max-width:     900px;
	margin-left:   auto;
	margin-right:  auto;
	background:    #fff;
	border-left:   1px solid #aaa;
	border-right:  1px solid #aaa;
	border-bottom: 1px solid #aaa;
}

a {
	text-decoration: none;
}

.button {
	padding:         16px;
	background:      #003158;
	margin-bottom:   16px;
	width:           200px;
	text-align:      center;
	font-weight:     bold;
	color:           #fff;
	text-decoration: none;
	user-select:     none;
}

.button:last-child {
	margin-bottom: 0;
}

h1 {
	color:       #003158;
	font-size:   22px;
	margin:      32px 0 8px 0;
	font-family: 'Playfair Display', serif;
}
h1:first-child {
	margin-top: 0;
}

h2 {
	color:       #003158;
	font-size:   18px;
	margin:      32px 0 8px 0;
	font-family: 'Playfair Display', serif;
}

select, input[type=text], input[type=date], input[type=number] {
	border:        1px solid #003158;
	border-radius: 2px;
}

select, input {
	font-size:     14px;
	padding:       4px;
	margin-top:    2px;
	margin-bottom: 2px;
}

label {
	user-select: none;
}

#menu-timebank {
	position:   absolute;
	display:    none;

	border:     2px solid #000;
	background: #fffff0;
	padding:    16px;

	z-index:    2048;

	-webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
             box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
}

#menu-cancel {
	position:   absolute;
	display:    none;
	top:        0;
	left:       0;
	opacity:    0;
	z-index:    1024;
}

.menu-item {
	margin-bottom: 16px;
	font-size:     16px;
}

.menu-item:last-child {
	margin-bottom: 0;
}

/* ----------------- *
 * Table adjustments *
 * ----------------- */
td.valign-top {
	vertical-align: top;
	padding-top:    6px;
}

/* ------------- *
 * Context menus *
 * ------------- */
div.context-menu {
	position:   absolute;
	display:    none;

	border:     2px solid #000;
	background: #fffff0;
	padding:    16px;

	z-index:    2048;

	-webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
             box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
}

#context-menu-cancel {
	position:   fixed;
	display:    none;
	top:        0;
	left:       0;
	opacity:    0;
	z-index:    1024;
}

.context-menu > .item {
	margin-bottom: 16px;
	font-size:     16px;
}

.context-menu > .item:last-child {
	margin-bottom: 0;
}


small {
	color: #888;
}

small:after {
	content: "";
	display: block;
	height:  16px;
}