html, body {
  margin: 0;
  height: 100%;
}

/* make sidebar full height of the screen and have a scrollbar if there's too much content */
#sidebar {
  float: left;
  width: 25%;
  height: 100%;
  overflow-y: auto;
}
.sidebarcontent {
  padding: 10px 10px 0; /* top, left/right, bottom */
}

#viewer {
  overflow: hidden;
  height: 100%;
  border: none;
}

#viewer iframe {
  height: 100%;
  width: 100%;
  border: none;
}

/* menu
 *
 * The menu is fully built by css without any javascript. How it works:
 *  - The thing that is visible is a label.
 *  - When the label is clicked the connected checkbox is toggled.
 *  - But the checkbox is always hidden.
 *  - Depending on the state of the checkbox the sub-list is visible or not.
 */
/* hide checkboxes used to make the menu clickable */
#menu input {
  display: none;
}

/* hide second level menu by default */
#menu li ul {
  display: none;
}

/* only display second level menu when clicked */
#menu li input:checked ~ ul {
  display: block;
}

/* hide default bullets */
#menu, #menu ul {
  list-style-type: none;
}

/* provide feedback to the user by showing the finger pointer on the labels for the hidden checkboxes */
#menu label {
  cursor: pointer;
}
/*
 * END OF menu
 */

/*
 * mainmenu
 *
 * This menu is to serve as the main navigation thing at the top of the page.
 * It is based on code fetched from https://stackoverflow.com/a/10468635/42580
 */
#mainmenu {
  /* Make the it stay at the top of the page */
  position: sticky;
  top: 0;
}
#mainmenu, #mainmenu ul {
    list-style: none;
    background-color: #474747;
    padding: 0 0 32px 0;
    margin: 0;
}
#mainmenu li {
    float: left;
    margin-right: 3px;
    position: relative;
}
#mainmenu ul {
    position: absolute;
    width: 400px;
    left: 0;
    padding: 0;
    display: none;
}
#mainmenu ul li {
    float: none;
    margin: 0;
    padding: 0;
    line-height: 32px;
}
#mainmenu a:link, #mainmenu a:visited {
    display: block;
    text-align: left;
    text-decoration: none;
    color: white;
    padding: 7px;
}
#mainmenu li:hover {
    background-color: #777;
}
#mainmenu li:hover ul {
    display: block;
}
#mainmenu li:hover li {
    border-bottom: 1px solid #666;
}
/*
 END OF mainmenu
 */

.info {
    max-width: 900px;
    margin: auto;
    padding: 0 10px; /* left and right = 10px */
}

/* statusbar on the main page */
.statusbar {
  background-color: #474747;
  margin: 0;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  /* Make the it stay at the top of the page */
  position: sticky;
  top: 0;
}

.statusbar a {
  color: white;
  text-decoration: none;
  padding-right: 10px;
}

/* the ul- and li-element defaults to a 40px padding, but that is too much I think */
ul,li {
  padding-left: 20px;
}

/* members */
thead th:nth-of-type(even), tbody td:nth-of-type(even), tbody tr:nth-of-type(odd) {
  background: rgba(255,255,136,0.5);
}

/* provide feedback to the user by showing the finger pointer and highlight colour on rows that are clickable */
#members tbody tr {
  cursor: pointer;
}
#members tbody tr:hover {
  background: rgba(255,136,255,0.5);
}

table tr.archived {
  text-decoration: line-through;
  background: #bbb;
  color: #555;
}

.actions {
  float: right;
}
.left {
    float: left;
    width: 65%;
}
.rightimg{
    float: right;
    width: 35%;
}
.rightimg img {
    margin: 1em 0 0 1em;
    width: 90%;
}


/*
 * Property pages
 */
#realestate_buttons .button { min-width: 200px; }
.button {
    display: inline-block;
    background: #bbb;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 3px 10px;
    margin-right: 10px; /* Make things left of this element have some space */
    text-align: center;
}
.button.help {
    float: right;
    background: #6e6;
}
.help-title, .help-info { display: none; }
.alertify .help-title, .alertify .help-info { display: block; }
.help-info p { margin-bottom: 10px !important; }

.radio_button {
    display: inline-block;
    border: 1px solid #888;
    border-radius: 4px;
    background: #bbb6;
    padding: 0 10px;
}
/* Make missing images be a red box */
img.x50 {
    display: inline-block;
    background: red;
    vertical-align: top;
}
#realestate_buttons,
.main-info,
.images {
    padding: 5px 10px;
}
.main-info input[type=text] { width: 100%; }
#image_viewer img {
    border: 1px solid black;
    margin-top: 5px;
    vertical-align: top;
    /* Make the image have a fixed minimum-width to avoid having the
     * update-fields to the right jump around when flicking through the
     * images. This is normally not an issue but could be problematic if some
     * images are to narrow. */
    min-width: 500px;
}

form { display: inline-block; }

.thumb { text-decoration: none; }
.thumb img { border: 2px solid #ddd; }
.thumb.active img { border-color: #79f; }

/* Rotate objects (will be used on images mainly). The first two is only dummy
 * classes to make coding easier. */
.rotate    {}
.rotate0   {}
.rotate90  { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }

/*
 * Merge pages
 */
#merge_candidates th {
  background: rgba(255,255,136,0.5);
  text-align: left;
}
#merge_candidates tr:not(.data_row) {
    background-color: #fb0;
}
.mergable {
    width: 15px;
    height: 15px;
    border: 1px solid #888;
    border-radius: 4px;
    display: none;
}
.mergable.yes { background: #0c0; display: block; }
.mergable.no { background: red; display: block; }
.not_mergable {
        color: white;
        background-color: #f00;
        margin: 2px;
        padding: 2px;
        border: 2px solid #fff;
        border-radius: 10px;
}