html {
	width:  100%;
	height: 100%;
}

body {
	position: absolute;
	width:     inherit;
	min-height:   100%;
	margin:        0px;
	padding:       0px;
	background:  black;
}

hr {
	color: #eb9800;
}

a:link {
	color: #4c7bb4;
}

a:visited {
	color: #4b2570;
}


.tooltip {
	position:    relative;
	display: inline-block;
}

.tooltip .tooltip-text {
	position:  absolute;
	left:           50%;
	bottom:        100%;
	width:        120px;
	margin-left:  -60px;
	padding:    5px 0px;
	z-index:          1;
	visibility:  hidden;
	text-align:  center;
	color:        white;
	background-color: black;
	border: 1px solid #eb9800;
}

.tooltip:hover .tooltip-text {
	visibility: visible;
	transition: visibility 0s ease 0.6s;
}


div.header {
	margin:  0px;
	padding: 0px;
}

div.location {
	margin:              0px;
	padding:        5px 20px;
	color:             white;
	font-size:       x-small;
	font-family: "monospace";
	font-style:       normal;
}

div.location span {
	color: #eb9800;
}

div.main {
	position:   relative;
	width:       inherit;
	margin-top:     80px;
	margin-bottom: 150px;	/* margin + footer.height */
	color:          grey;
	font-size:       80%;
	font-weight:  normal;
}

div.page-nav, div.page-nav-img {
	position: absolute;
	left:          0px;
	width:       150px;
	height:       100%;
}

div.page-nav-img {
	background: url(/images/upr.png);
	background-position: center top; 
	background-repeat:     repeat-y;
}

div.content {
	position:  relative;
	margin-left:  150px;	/* same as page-nav.width */
	margin-right: 100px;
	padding-left:  25px;
}

div.content a.back-to-top {
	position: relative;
	float:       right;
}

div.footer {
	position: absolute;
	left:          0px;
	right:         0px;
	bottom:        0px;
	height:       50px;
	text-align: center;
	color:     #eb9800;
	border: 1px solid #eb9800;
}

div.acknowledgement {
	font-size: xx-small;
	font-style:  italic;
	font-weight: normal;
	text-align:  center;
}

table.img-bar {
	width:       100%;
	border-width: 0px;
	border-collapse: collapse;
}

tr.img-bar {
	text-align: center;
}

td.img-bar {
	padding: 5px 1px 5px 1px;
	border:  0px solid black;
}


div.menu-bar {
	margin:  0px;
	padding: 0px;
	font-family: "DejaVu Sans";
	border:  1px solid #eb9800;
	background-color: black;
}

div.menu {
	position: relative;
	display:  inline-block;
}

div.menu-bar a:hover, div.menu:hover .menu-title { background-color: #eb9800; }

button.menu-title {
	padding: 8px 18px 8px 18px;
	color:          white;
	font-size:       16px;
	font-weight:     bold;
	text-align:    center;
	text-decoration: none;
	border:          none;
	background-color: black;
}

div.menu-items {
	position: absolute;
	display:      none;
	min-width:   125px;
	max-width:   300px;
	right:         0px;
	z-index:         1;
	border: 1px solid #eb9800;
	background-color: black;
}

div.menu:hover .menu-items { display: block; }

div.menu-bar a {
	padding: 8px 18px 8px 18px;
	float:           left;
	color:          white;
	font-size:       16px;
	font-weight:     bold;
	text-align:    center;
	text-decoration: none;
}

div.menu-items a {
	padding: 1px 10px 1px 10px;
	float:           none;
	display:        block;
	color:          white;
	font-size:        90%;
	font-weight:   normal;
	text-align:      left;
	text-decoration: none;
}

div.menu-items a:hover { background-color: #eb9800; }


div.footer-last-update {
	position:       absolute;
	right:               4px;
	bottom:              0px;
	float:             right;
	text-align:        right;
	font-family: "monospace";
	font-size:      xx-small;
	font-style:       normal;
	color:              grey;
}


hr.system {
	color: #eb9800;
}

ul {
	list-style-image: url("/images/bullet-norm.gif");
}

/* Standard table layout */
table.std {
	margin:          5px;
	caption-side: bottom;
	border: thin solid #eb9800;
}

table.std caption {
	padding:   4px 6px;
	font-style: normal;
	color:       white;
}

table.std th {
	padding:   4px 8px;
	text-align: center;
	font-style: italic;
	color:        grey;
	border-bottom: thin solid #eb9800;
}

table.std td {
	padding:   1px 8px;
	font-style: normal;
	color:        grey;
	border:       none;
}

table.std tfoot td {
	padding:   4px 6px;
	border-top: thin solid #eb9800;
}

/* Table layout System overview */
table.system-overview {
	margin:  0px;
	border: none;
}

table.system-overview tr td {
	text-align:    left;
	vertical-align: top;
}

table.system {
	margin:         0px;
	border-spacing: 20px 2px;
	border:        none;
}

table.system tr th {
	padding-top:    8px;
	padding-bottom: 1px;
	font-style:  italic;
	color:         grey;
	border:        none;
}

table.system tr td {
	padding: 1px 8px 1px 8px;
	width:        290px;
	color:         grey;
	vertical-align: top;
	border:        none;
}

table.system tr td:first-child {
	width:        100px;
	color:     seagreen;
	vertical-align: top;
	border:        none;
}

table.system tr td.host {
	font-family: "monospace";
}

table.system tr td.photo {
	position:     relative;	/* reference for .system-opts */
	text-align:     center;
	vertical-align: middle;
}

div.system-opts {
	position: absolute;
	top:           0px;
	right:         0px;
}

table.system tr td.separator {
	height: 2px;
	border-bottom: thin solid #eb9800;
}

table.system tr td.blank {
	height:  2px;
	border: none;
}

table.system tr td.footnote:first-child {
	width:    100%;
	color: inherit;
	font-size: 90%;
}

/* Modal dialog for displaying full-size images of thumbnails. */
.modal {
	position: fixed;
	left:       10%;
	right:      10%;
	top:        10%;
	bottom:     10%;
	width:    800px;
	height:   600px;
	margin:    auto;
	padding:    2em;	/* 2x font size of image description */
	z-index:      1;
	overflow:  auto;
	display:   none;
	background-color: black;
	background-color: rgba(0,0,0,0.9);
	border: thin solid #eb9800;
}

img.modal-content {
	position: absolute;
	left:          0px;
	right:         0px;
	top:           0px;
	bottom:        0px;
	margin:       auto;
	max-width:   800px;	/* same as .modal width */
	max-height:  600px;	/* same as .modal height */
	display:     block;
}

/* Image description */
p.modal-content {
	position: absolute;
	left:          0px;
	right:         0px;
	bottom:        4px;
	margin:        0px;
	font-size:     1em;
	font-style: italic;
	text-align: center;
	color:       white;
}

.modal-close {
	position: absolute;
	top:           0px;
	right:         0px;
	font-size:    25px;
	text-align: center;
	transition:    0.3;
	color:       white;
	background-color: black;
	border: thin solid #eb9800;
}

.modal-close:hover {
	cursor: pointer;
	color:    white;
	background-color: #eb9800;
	text-decoration: none;
}

#thumbnail:hover {
	cursor: pointer;
	opacity:    0.7;
}


/* Thumbnails table */

table.thumbnails {
	border-spacing:    10px 15px;
/*
	border-image-width:      1px;
	border-image-slice:        7;
	border-image-repeat: stretch;
	border-image-source: url(/images/table-border.png);
*/
	border:    1px solid #eb9800;
}

td.thumbnails {
	padding:        1px;
	width:        300px;
	height:       120px;
	text-align:  center;
	vertical-align: top;
	font-size:  x-small;
	color:        white;
}

tr:last-child td.thumbnails {
	border-right:  0px;
	border-bottom: 0px;
}

// vim:ts=4:sw=4:noet:ft=css