#pageheader { font: 16pt "Segoe UI"; padding:	8px 8px 8px 8px; border-bottom: 2px solid #CC3846; margin: 0px 0px 0px 0px; }
#upperexpand {float: right; height: 24px; background-position: 6px 7px; background-repeat: no-repeat; font: bold 8pt "Segoe UI"; padding: 5px 0px 0px 20px;}
#state { display: none; }

.pagetext a { text-decoration: none; }
.pagetext a:hover { text-decoration: underline; }

.page {
  display: none;
  max-height: calc(100% - 153px);  /* tabs height + pageheader height */
  overflow-y: auto;
}

.tabbackground {
  position: absolute;
  bottom: 0px;
  background: linear-gradient(#dedee2, #ffffff);
  width: 100%;
  padding-bottom: 2px;
  border-top: 2px solid #CC3846;
}

.tabbspacer {
  float: left;
  width: 30px;
}

.tabb {
  top: -2px;
  position: relative;
  float: left;
  height: 90px;
  width: 90px;
  margin-left: 2px;
  margin-right: 2px;
  text-align: center;
  font: bold 10pt "Segoe UI";
  border-top: 2px solid #CC3846;
  background:none;
  color: #888888;
}

body.tab-0 .tabb#tabb0,
body.tab-1 .tabb#tabb1,
body.tab-2 .tabb#tabb2,
body.tab-3 .tabb#tabb3,
body.tab-4 .tabb#tabb4 {
  border-top: none;
  width: 90px;
  border-left: 2px solid #CC3846;
  border-right: 2px solid #CC3846;
  border-bottom: 2px solid #CC3846;
  margin-left: 0;
  margin-right: 0;
  padding-top: 2px;
  background: #FFFFFF;
  color: #000000;
}

body.tab-0 .page#page-0,
body.tab-1 .page#page-1,
body.tab-2 .page#page-2,
body.tab-3 .page#page-3,
body.tab-4 .page#page-4 {
  display: block;
}

html.type-lexical-model .tabb#tabb1,
html.type-lexical-model .keyboard-specific {
  /* Hide keyboards tab for lexical model projects */
  display: none;
}

html.type-keyboard .tabb#tabb2,
html.type-keyboard .lexical-model-specific {
  /* Hide lexical-models tab for keyboard projects */
  display: none;
}


.help-container {
  display: none;
  clear: all;
}

body.show-help .help-container {
  display: table;
}

/*display: block; position: absolute; z-index: 100; right: 10px; top: 30px; width: 200px; height: auto; background: #fffffc; border: solid 1px red }*/

table.io img { border: none }
table.io {
  /* background-color: #fef3c1; */
  border: solid 1px #ad4a28;
  margin: 8px 16px;
}
table.io td {
  text-align: center;
  padding: 5px;
  font: bold 8pt "Segoe UI";
}
table.io td.arrow {
  padding: 5px 20px 5px 20px;
}
table.io th {
  font: bold 8pt "Segoe UI"
}

.pages { overflow-y: auto; padding-top: 12px; width: 100%; height: 100% }

.checkbox { background-image: url("chk_checkbox.gif");}
.checked { background-image: url("chk_checked.gif"); }

.headerimage {
  vertical-align: top;
  display: table-cell;
  width: 140px;
  margin: 5px 20px 0px 10px;
  text-align: center;
}

.quicklinks { margin-top: 16px; }
.quicklinks h3 { text-align: center }
.quicklinks ul { margin-left: 16px; padding-left: 12px; font: 8pt "Segoe UI"; margin-top: 4px; text-align: left }

.pagetext {
  vertical-align: top;
  display: table-cell;
  padding: 20px;
  font: 10pt "Segoe UI";
  text-align: justify;
}

.pagetext ul { margin: 0px 10px 10px 16px; }



.filelist { padding: 0 10px 10px 10px; clear: all; }

.file {
  margin-top: 5px;
  min-height: 24px;
  border: 2px solid #CEEDFB;
  padding: 2px 0px 2px 2px;
  display: block;
}

.fileexpand { float: left; width: 20px; height: 24px; background-image: url("btn_expand.gif"); background-position: 45% 50%; background-repeat: no-repeat; }
.fileexpand_empty { float: left; width: 20px; height: 24px; background-image: url("btn_expand_empty.gif"); background-position: 45% 50%; background-repeat: no-repeat; }
.filecontract { background-image: url("btn_contract.gif"); }
.fileicon { float: left; margin: 4px 2px 0px 0px; }
.filename { float: left; margin: 2px 0px 2px 2px; font: bold 12pt "Segoe UI"; }
.filedescription { float: left; margin: 5px 0px 0px 10px; font: 10pt "Segoe UI"; }

.filedetails {
  clear: both;
  display: none;
  padding-left: 20px;
  margin-bottom: 2px;
}

.filedetailtext { vertical-align: top;  font: 9pt "Segoe UI"; }
table.filedetailtext tr th { white-space: nowrap; vertical-align: top; text-align: left; padding-left: 0px; padding-right: 8px; }

.fileoptions {
  float: right;
  margin-right: 2px;
}

body { padding: 0px; margin: 0px; height: 100%; cursor: default}
html { height: 100%; overflow: hidden }

p { font: 10pt "Segoe UI"; margin: 4px 0 }
p.follow { color: #ad4a28; }
p.upgrade { font-weight: bold }
h2 { font: bold 12pt "Segoe UI"; margin: 4px 0 8px 0 }
h3 { font: bold 10pt "Segoe UI"; margin: 4px 0 }


/* Popup menu styles */

#menubackground {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(64,64,64,0.1);
  display: none;
}

#menubackground.show {
  display: block;
  z-index: 99;
}

.menu {
  position: absolute;
  display: block;
  background: white;
  visibility: hidden;
  border: solid 1px #ACA899;
  font: 8pt "Segoe UI";
  padding: 0px;
  background-image: url("menugrey.gif");
  background-repeat: repeat-y;
  background-position: 0 0;
  z-index: 100;
}

k\:menuitem {
  width: calc(100%-2px);
  padding: 4px 4px 4px 28px;
  margin: 1px;
  display: block;
  box-sizing: border-box;
}

k\:menuitem:hover {
  color: #000000;
  background: #FFE3DB;
  border: solid 1px #DB704F;
  padding: 3 3 3 27;
}

k\:menuitem.down {
  background: #DB704F;
}

/* Global Welcome elements */

#globalwelcome #pageheader {
  padding-left: 140px;
  background: #6D6C6F;
  border: none;
  color: #dadddc;
}

#globalwelcome #pageheader a {
  color: #dadddc;
}

#globalwelcome #pageheader .pagetext {
  display: inline-block;
  padding: 20px 20px 10px 20px;
}

#header-version,
#header-link {
  text-align: right;
}

#header-version {
  margin-bottom: 0;
}

#header-sil img {
  vertical-align: top;
  margin-left: 4px;
}

#header-sil > div {
  margin-top: 16px;
  display: inline-block;
  padding-left: 16px;
  font-size: 16pt;
}

#header-copyright {
  font-size: 8pt;
}