html { height: 100% }
body { font: |fontSize| |fonts|; height: 100%; margin: 15px 0 0 0 }
pre { font: 100% |fonts|; margin: 0 }
h1 { font-size: 12pt; margin:6px 0 6px 0 }
h2 { font-size: 11pt; margin:6px 0 6px 0; font-style: italic;
     font-weight: normal }
h3 { font-size: 10pt; margin:4px 0 4px 0; font-weight: bold }
h4 { font-size: 10pt; margin:4px 0 4px 0 }
h5 { font-size: 9pt; margin:0; font-style: italic; font-weight: normal;
     background-color: #d7dee4 }
h6 { font-size: 9pt; margin:0; font-weight: bold }
a { text-decoration: none; color: #114353 }
a:visited { color: #114353 }
table { font-size: 100%; border-collapse: collapse }
form { margin: 0; padding: 0 }
p { margin: 0 0 5px 0 }
abbr { cursor: help; text-decoration: none }
acronym { cursor: help }
input { font: 92% |fonts| }
input[type=image] { border: 0; background: none; cursor: pointer }
input[type=checkbox] { border: 0; background: none; cursor: pointer }
input[type=radio] { border: 0; background: none; cursor: pointer }
input[type=file] { border: 0px solid #d0d0d0; cursor: pointer }
input[type=button] { border: 1px solid #d0d0d0; margin: 0 3px;
  background-color: #f8f8f8; cursor: pointer }
input[type=submit] { border: 1px solid #d0d0d0; background-color: #f8f8f8;
  cursor: pointer }
input[type=password] { border: 1px solid #d0d0d0; padding: 0 2px;
  margin-bottom:1px; line-height: 1.4em; font-family: |fonts| }
input[type=text] { border: 1px solid #d0d0d0; padding: 0 2px;
  margin: 0 2px 1px 0; line-height: 1.4em; font-family: |fonts| }
select { border: 1px solid #d0d0d0; background-color: white; overflow-y: auto;
         font-family: |fonts| }
textarea { width: 99%; font: 100% |fonts|; border: 1px solid #d0d0d0;
           background-color: white }
label { color: #555555; font-size: 11px; margin: 3px 0;
        text-transform: uppercase }
.subLabel { text-transform: none; padding-left: 5px; font-size: 105% }
th { font-weight: normal; font-style: italic }
legend { padding-bottom: 2px; padding-right: 3px; color: black }
ul { line-height: 1.2em; margin: 0 0 0.2em 0.6em;  padding: 0;
     list-style: none outside none }
ul li { margin: 0; background-image: url("ui/li.gif"); padding-left: 10px;
        background-repeat: no-repeat; background-position: 0 4px }
img { border: 0; vertical-align: middle }
audio { margin: 2px 0 }

.main { width: 900px; height: 95%; box-shadow: 3px 3px 3px #A9A9A9;
  border-left: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4;
  margin-left: auto; margin-right:auto; display: table }
.mainWide { width: 100%; height: 100%; border: 0; box-shadow: none }
.payload { width: 100%; position: relative }
.row { display: table-row }
.top { height: 89px; vertical-align: top; position:fixed; top:0; left:0;
       background-color: transparent }
.topLinks { padding-top: 5px }
.topLinks>a, .topLinks>select { margin-right: 1em }
.lang { margin-right: 6px }
.userStrip { background-color: #B0B0DF; width: 100%; z-index: 1 }
.userStripText { padding: 0 0.3em; color: whitesmoke }
.userStrip a { color: #e7e7e7 }
.userStrip a:visited { color: #e7e7e7 }
.changePassword { color: #494949 !important; font-style:italic; font-size: 90% }
.breadcrumb { font-size: 11pt; padding-bottom: 6px }
.login { margin: 3px; color: black }
.goSource { font-weight: bold }
input.button { color: #666666; height: 25px; cursor: pointer;
  padding: 0 12px 0 26px; background-color: white; background-repeat: no-repeat;
  background-position: 8px 25%; box-shadow: 2px 2px 2px #888888 }
div.button { font-size: 90%; padding: 4px 8px 4px 23px; background-color: white;
  background-repeat: no-repeat; box-shadow: 2px 2px 2px #888888;
  border: 1px solid #d0d0d0; margin-right: 5px }
input.buttonSmall { font-size: 85%; height: 20px }
input.buttonIcon { vertical-align: bottom; margin: 0; border: 0;
  background-color: transparent; background-position: 0 100%;
  padding: 0 0 0 16px; box-shadow: none}
input.buttonFixed { width: 120px; padding: 0 0 0 10px; margin-bottom: 3px }
.fake { background-color: #e6e6e6 !important ; cursor:help !important }
.xhtml { background-color: transparent; padding: 4px; font-size: 95% }
.xhtml img { margin-right: 5px }
.xhtml p { margin: 3px 0 7px 0 }
.xhtml table td, .xhtml table th { border: 1px solid grey; padding: 3px }
.xhtml table th { background-color: #f0f0f0 }
.clickable { cursor: pointer !important }
.unclickable { pointer-events:none; cursor:default; color: grey !important }
.editable { cursor: crosshair !important }
.help { cursor: help }
.refLink { font-style: italic; padding-left: 5px; font-size: 90%;
           color: #555555 }
.refBar { margin-bottom: 4px }
.buttons { margin-left: 4px }
.objectButtons { margin-top: 5px }
.rel { position: relative }
.message { position: fixed; top: 27px; left: 50%; font-size: 90%;
  width: 600px; border: 1px #F0C36D solid; padding: 6px;
  background-color: #F9EDBE; text-align: center; margin-left: -300px;
  border-radius: 3px; box-shadow: 0 2px 4px #A9A9A9;
  z-index: 10; max-height: 50vh; overflow:auto }
.messagePopup { width: 80%; top: 0; left: 0; margin-left: 10px }
.test { width: 100%; text-align: center; color: #160b5f; font-weight: bold;
        padding: 1em 0; background-image:linear-gradient(#e21212, transparent);
        font-size: 110% }
.wrongBrowser { background-image: linear-gradient(transparent, #e21212);
                text-transform: uppercase }
.focus { margin: 7px 0; padding: 7px; background-color: #dce1f0;
         border-radius: 2px 2px 2px 2px; box-shadow: 0 2px 4px #A9A9A9;
         font-weight: bold }
.focus td { padding: 4px 0px 4px 4px }
.discreet { font-size: 90%; color: #555555 }
.discreet table td, .discreet table th { border: 1px solid grey; padding: 3px }
.title {}
.subTitle { font-size: 90%; color: #555555 }
.subTitle table { border-collapse: collapse }
.subTitle table td, .subTitle table th { border: 1px solid grey; padding: 3px;
  position: initial }
.lostPassword { font-size: 90%; color: white }
.current { font-weight: bold }
.portlet { width: 170px; border: 10px solid white; background-color: white;
           vertical-align: top; padding-bottom: 30px; position: relative }
.sidebar { margin: 0 0 30px 2px }
.portletContent { padding: 10px; background-color: #e5e2ff }
.portletTitle { font-size: 110%; margin-bottom: 8px; padding: 5px 5px 10px 5px;
                background-color: white }
.portletSep { border-top: 15px solid white }
.portletGroup { font-variant: small-caps; font-weight: bold; font-size: 110%;
                margin: 0.1em 0 0.3em ; border-bottom: 1px dashed #c0c0c0 }
.portletSearch { font-size: 90%; font-style: italic }
.portletCurrent { font-weight: bold }

.inputSearch { height: 15px; width: 132px; margin: 3px 6px 2px 3px !important }
td.search { padding-top: 8px }
.searchFields { width: 100%; margin-bottom: 8px }
.content { padding: 10px 10px 30px 10px; display: table-cell;
           vertical-align: top; width: 100% }
.popup { display: none; position: fixed; z-index : 100; background: white;
         padding: 18px; border: 1px solid grey; box-shadow: 2px 2px 2px #888888}
.dropdown { display:none; position: absolute; top: 12px; left: 1px;
            border: 1px solid #cccccc; background-color: white;
            padding: 3px 4px 3px; font-size: 8pt; font-weight: normal;
            text-align: left; z-index: 2; line-height: normal }
.liveSearch { top: 19px; padding: 0; width: 250px }
.lsSelected { background-color: #d9d7d9 }
.lsNoResult { text-align: center; padding: 3px 3px; font-style: italic }
.dropdownMenu { cursor: pointer; font-size: 93%; position: relative }
.dropdown a:hover { text-decoration: underline }
.addForm { display: inline }
.addFormMenu { display: inline; padding: 0 5px 0 3px }
.inline { display: inline }
.inlineIcon { float: right; cursor: pointer; padding: 0 3px 10px 0 }
.list { margin-bottom: 3px; border-collapse: separate; border-spacing: 7px }
.list td, .list th { color: #555555; padding: 10px }
.list th { font-weight: bold; font-size: 95%;
           position: sticky; position: -webkit-sticky; top:-2px;
           background-color: rgba(222,222,230,0.9) }
.list a { font-weight: bold }
.compact { font-size: 95%; width: 100% }
.compact th, .compact td { padding: 4px }
.compact tr { vertical-align: middle }
.grid { border-collapse: separate; border-spacing: 3px }
.grid th { font-size: 90%; padding: 3px 5px 0 5px; text-align: left;
           background-color: #e4e8f9;
           position: sticky; position: -webkit-sticky; top: -2px }
.grid td { padding: 3px }
.grid th, .grid td { padding: 1px 4px }
.small { text-align: left; margin: 5px 0 }
.small th { background-color: #e4e8f9; border: 1px solid grey; padding: 1px 5px}
.small td { border: 1px solid grey; padding: 1px 5px }
.popup .grid th, .popup .grid td { border: 1px solid grey }
.calTable { font-size: 95% }
.calTable td { border: 5px solid white; color: #555555; padding: 10px }
.calEvt { width: 100% }
.calEvt td { border: 0; padding: 0 3px 0 1px; margin: 0 }
.calMany { background-color: #c1c5c7 }
#confirmActionPopup { max-height: 500px; overflow-y: auto }
#summary { margin: 8px }
#summaryCell { height: 15px; padding: 4px 0 3px 3px;
               border-bottom: 3px solid white }
.timeline { font-size: 85%; color: #555555 }
.timeline tr { height: 18px }
.timeline th { background-color: white; text-align: center;
               padding: 0 1px !important }
.timeline td { text-align: center; padding: 0 1px; border: 4px solid #f7f7f7 }
.timeline a { font-size: 100% !important }
.tlLeft { text-align: left !important; padding-left: 1px !important }
.tlRight { text-align: right !important; padding-right: 1px !important }
.msgTable { margin: 6px 0; width: 100%; font-size: 93% }
.msgTable tr { vertical-align: top }
.msgTable td, .msgTable th { border: 1px solid grey; color: #555555;
                             padding: 0px 5px; text-align: left }
.msgTable th { background-color: #f0e3b8; font-style: italic;
               font-weight: normal }
.cellGap { padding-right: 0.4em }
.cellWE { color: #797979; font-style: italic;
          background-color: #f2f2ff !important }
.no td, .no th {
  border: 0 !important; padding: 0 !important; margin: 0 !important;
  background-color: transparent !important; font-size: 95% }
.no a { font-weight: normal }
.hidden { visibility: hidden }
.simpleLabel { text-transform: none; padding-right: 3px }
.translationLabel { background-color: #EAEAEA; border-bottom: 1px dashed grey;
                    margin-top: 0.5em; margin-bottom: 0.5em }
.section1 { font-size: 120%; margin: 0.45em 0em 0.1em 0;
            padding: 0.3em 0em 0.2em 0.1em; background-color: #eef3f5;
            border-top: 1px solid #8CACBB;border-bottom: 1px solid #8cacbb }
.section2 { font-size: 14px; padding: 6px; text-transform: uppercase;
            border-bottom: 1px dashed #cccccc; border-top: 1px dashed #cccccc;
            background-color: #f9f9f9 }
.section3 { font-size: 11px; font-weight: bold; text-transform: uppercase;
            padding: 2px 0px; background-color: #a1aeb5; text-align: center;
            color: white }
.even { background-color: rgba(222, 222, 230, 0.6) }
.odd { background-color: rgba(246, 246, 246, 0.8) }
.refMenuItem { border-top: grey 1px dashed; margin-top: 3px; padding-top: 3px }
.header { margin-bottom: 5px; background-color: whitesmoke;
          border: 3px solid white }
.by { padding: 5px; font-size: 97% }
.underline { border-bottom: 1px dotted grey }
.state { font-weight: bold; border-bottom: 1px dashed grey }
.historyLabel { font-variant: small-caps; font-weight: bold }
.history>tbody>tr>td { border-top: 3px solid white; padding: 3px 5px }
.history>tbody>tr>th { font-style: italic; text-align: left; padding: 3px 5px;
                       background-color: white }
.changes { margin: 4px 0 }
.changes>tbody>tr>td, .changes>tbody>tr>th {
  border: 1px solid #e0e0e0; padding: 5px }
.topSpace { margin-top: 15px }
.topSpaceS { margin-top: 5px }
.bottomSpace { margin-bottom: 15px }
.paraSpace { margin: 3px 0 }
.phase { background-color: #f9f9f9; box-shadow: 2px 2px 2px #888888;
         margin-bottom: 6px }
.phase td { padding: 6px 7px; border-right: 1px solid #d0d0d0; font-size: 96% }
.currentPage { background-color: #e6e6e6 }
.pageLink { margin-right: 8px }
.code { font-family: "Lucida Console","Courier New" }
.codePara { background-color: #EEFFCC; border-color: grey;
            border-style: solid none; border-width: 1px medium;
            color: #333333; line-height: 120%;
            padding: 10px; margin: 10px 0 10px 0 }
.homeTable { background-color: #E3E3E3; border-top: 1px solid grey }
.homeTable td { padding: 10px 5px 10px 10px }
.homeTable th { padding-top: 5px; font-size: 105% }
.first { margin-top: 0px }
.error { margin: 5px }
.smaller, .smaller select { font-size: 95% }
.pod { padding: 0 15px 0 5px }
.podLast { padding-left: 5px }
.podTable { line-height: 20px }
.hide { display: none }
.tabs { position: relative; bottom: -2px;
        border-collapse: separate; border-spacing: 4px 0 }
.tabs td { padding: 3px 20px; text-align: center; font-size: 95%;
           border-top-left-radius: 5px; border-top-right-radius: 5px;
           border-bottom: |tabBorder|; font-weight: bold }
.tabCur { border-top: |tabBorder|; border-right: |tabBorder|;
          border-left: |tabBorder|; background-color: #fbfbfb;
          border-bottom: none !important }
.tabSep { border-bottom: |tabBorder|; padding-bottom: 1px }
.tab { background-color: #f1eeee }

.language {color: #555555; font-size: 7pt; border: grey 1px solid; padding: 2px;
           margin: 0 2px 0 4px; font-family: monospace }
.highlight { background-color: yellow }
.highlightRow { font-weight: bold; background-color: yellow; opacity: 0.6 }
.globalActions { margin-bottom: 4px }
.objectActions { margin: 7px 4px }
.smallbox { margin: 0; vertical-align: middle }
@keyframes blinkingBg {
  0% { background-color: white; color: grey }
  50% { background-color: grey; color: white }
  100% { background-color: white; color: grey }
}
@-webkit-keyframes blinkingBg {
  0% { background-color: white; color: grey }
  50% { background-color: grey; color: white }
  100% { background-color: white; color: grey }
}
.blinkBg {
  -webkit-animation: blinkingBg 1s infinite;
  animation: blinkingBg 1s infinite;
}
.legend { font-size: 90%; color: grey }
.legendRight { float: right; margin-left: 10px }
.legend td { padding: 1px 0px; border: 0 !important }
.footer { width:100%; font-size: 95%; height: 14px; padding: 0.5em 0;
  position: absolute; bottom: 0; background-color: #CBCBC9;
  border-top: 3px solid #e4e4e4; text-align:right }
.footerWide { position: fixed }
.footerContent { padding: 0 0.5em }
/* Bugfix for the calendar class from jscalendar */
.calendar { z-index: 10 }
/* Classes for collapsible elements */
.expandCollapse { padding-right: 4px; cursor: pointer }
.showHide { position: absolute; top: 10px; left: 0px; cursor: pointer }
.showHideInv { position: absolute; top: 10px; right: 0px; cursor: pointer }
/* Classes for gridder's thumbnails */
.thumbnail { font-size: 105%;  background-color: white; padding: 10px;
             border-radius: 15px; min-height: 300px; max-height: 350px;
             overflow: hidden; position: relative }
.thumbmore { position: absolute; bottom: 0; left: 0; width: 100%;
             text-align: right; margin: 0; padding: 50px 0 25px 0;
             background-image: linear-gradient(to bottom, transparent, white) }
.thumbmore img { padding-right: 30px }
.thumbtable td { padding: 0 5px 3px 5px }
