body {
   font-family:      "DejaVu Sans", Arial, sans-serif;
   line-height:      1.2em;
}

header {
   background-color: #E4F2E1;
}

div.header-image {
   float:            left;
   margin-left:      10px;
}

div.header-contents {
   height:           80px;
   margin-left:      192px;
}

div.contents {
   width:            80%;
   margin:           auto;
   margin-top:       1em;
}

h2.header {
   display:          inline-block;
}

header h2.header-alt {
   display:          none;
   margin-top:       0;
   padding-left:     10%;
}

@media (max-width: 575px) {
   header h2.header {
      display:       none;
   }
   header h2.header-alt {
      display:       inline-block;
   }
}

/*
 * menu styling
 */
div.menu {
   background-color: #F8F8F8;
   padding-left:      10%;
}

div.menu ul {
   list-style-type:  none;
   padding-left:     0;
   color:            black;
   margin-top:       0;
}

div.menu a {
   color:            inherit;
   display:          block;
   text-decoration:  none;
   padding:          3px 0;
}

div.menu a.selected {
   color:            #00007F;
}

div.menu li {
   margin:           4px 0;
   padding-left:     1.5em;
   padding-right:    1.5em;
}

div.menu li.top {
   display:          inline-block;
   text-align:       left;
   padding:          4px 1.5em 4px 1.5em;
   cursor:           default;
   margin-left:      -1.5em;
}

div.menu li:hover, div.menu a:hover {
   color:            white;
   background-color: black;
}

div.menu li.top ul {
   visibility:       hidden;
   position:         absolute;
   transform:        translateX(-1.5em);
   margin-top:       4px;
   z-index:          1;
   background-color: #E5F1F4;
   border:           1px solid black;
}

div.menu li.top:hover ul {
   visibility:       visible;
   transition:       0.15s 0.15s;
   width:            15em;
}

div.menu li li ul {
   position: relative;
   left: 16.5em;
   top: calc(-0.5em + 4px);
}


/*
 * context menu
 */
div.context {
   float: right;
   margin-right: 24px;
   margin-top: 24px;
}

div.context ul {
   list-style-type:  none;
   padding-left:     0;
   color:            black;
   margin-top:       0;
}

div.context a {
   color:            inherit;
   display:          block;
   text-decoration:  none;
   padding:          3px 1.5em;
}

div.context a.selected {
   color:            #00007F;
}

div.context li {
   margin:           4px 0;
}

div.context li.top:hover {
   color:            inherit;
   background-color: inherit;
}

div.context li:hover, div.context a:hover {
   color:            white;
   background-color: black;
}

div.context li.top ul {
   visibility:       hidden;
   position:         absolute;
   right:            24px;
   margin-top:       0px;
   z-index:          1;
   background-color: #E5F1F4;
   border:           1px solid black;
}

div.context li.top:hover ul {
   visibility:       visible;
   transition:       0.15s 0.15s;
}

div.context svg {
   width:            2em;
   height:           2em;
}

/*
 * Styles for the detail view
 */
table.detailview {
   border:           1px solid #4C99C5;
   margin-top:       6px;
   width:            100%;
}

table.detailview tr.even {
   background-color: #E5F1F4;
}

table.detailview tr.odd {
   background-color: #F8F8F8;
}


/*
 * Styles for the grid
 */

div.grid {
   font-size:        0.9em;
   line-height:      1em;
}

div.grid table {
   border:           1px solid #4C99C5;
   margin-top:       6px;
   width:            100%;
}

div.grid table th a {
   text-decoration:  none;
   color:            white;
}

div.grid tr.even {
   background-color: #E5F1F4;
}

div.grid tr.odd {
   background-color: #F8F8F8;
}

div.grid th {
   font-weight:      bold;
   color:            white;
   background-color: #4C99C5;
   padding:          0.3em 1em;
}

div.grid td.button-row {
   text-align:       center;
   white-space:      nowrap;
}

.grid-button img {
   margin:           0 4px;
}

.grid-summary {
  margin:            10px 0 6px 2px;
  padding-bottom:    4px;
  color:             #0E509E;
  float:             left;
}

.grid-pager {
   font-size:        0.9em;
   margin-top:       10px;
   text-align:       right;
}

.grid-pager a {
  text-decoration:   none;
  color:             #0E509E;
  border:            1px solid #9AAFE5;
  padding:           1px 6px 1px 6px;
  margin:            2px;
}

.grid-pager a.selected {
   color:            #FFFFFF;
   background-color: #9AAFE5;
}

.grid-pager a.disabled {
   color:            grey;
}

div.grid td input {
   width:            calc(100% - 12px);
}

div.grid #submit {
   visibility:       hidden;
}

.button-row img {
   width:   1.1em !important;
   height:  1.1em !important;
}


/* form styles */
span.error {
   color:            red;
}

table.form tr.even {
   background-color: #E5F1F4;
}

table.form tr.odd {
   background-color: #F8F8F8;
}

table.form td {
   padding: 3px 1em 3px 3px;
}

label::after {
  content:           ":";
}

/* form styles */
input {
   padding:          3px;
}

input.formbutton, button.formbutton {
   margin:           12px 22px;
   padding:          4px 12px;
   line-height:      1.2em;
}

/* style for tabs */
div.tabheader {
   margin-top:       1em;
   border-bottom:    2px solid #4C99C5;
}

div.tabheader h3 {
   display:          inline-block;
   margin-bottom:    0;
   padding:          0.5em;
   border-radius:    8px 8px 0 0;
   color:            black;
   background-color: #E5F1F4;
}

div.tabheader h3.selected {
   color:            white;
   background-color: #4C99C5;
}

div.tabheader h3 a {
   display:          block;
   color:            black;
   text-decoration:  none;
}

/*
 * general
 */
body {
   font-size: 1em;
}

select {
   border:           1px solid black;
   padding:          4px;
   min-width:        14em;
}