html,body {
  width:100%;
  height:100%;
  margin: 0;
  padding: 0;
}
body#control {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color:#333333;
  background-color: #202020;
}
textarea { line-height: 1.2em; }
iframe { vertical-align: middle; }
:focus {
  outline: none;
  box-shadow: 0 0 4px #fff;
}
* {
  box-sizing: border-box;
}
#control_container {
  display: table;
  width:900px;
  margin:auto;
  background-color: #dd6600;
  border: 10px solid #dd6600;
  border-radius: 12px;
}
h1 {
  font-family: inherit;
  font-size: 14pt;
  font-weight: bold;
  color: #22479f;
  margin: 0px 0px 8px 0px;
}
h2 {
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: #333333;
  margin: 0px 0px 3px 0px;
}
h3 {
  font-family: inherit;
  font-size: 10pt;
  font-weight: bold;
  color: #097f45;
  margin: 0px 0px 3px 0px;
}
th {
  text-align: left;
}

td.boxed {
  padding: 5px;
  border: 1px solid #555555;
}

td.image_grid {
  text-align: center;
  border:1px solid #555555;
}

td.nav_cat {
  color: #555555;
  background-color: #DDDDDD;
  font: 12px inherit bold;
  padding-left: 5px;
}

td.nav_item {
  color: #555555;
  background-color: #FFFFFF;
  padding-left: 15px;
  font-size: 12px;
  cursor: default;
}

td.over {
  color: #550000;
  background-color: #EEEEEE;
  cursor: pointer;
}

tr.odd {
  background-color: #EEEEFF;
}

tr.even {
  background-color: #FFFFFF;
}

table {
  font-size: 12px;
  color: #555555;
}
input#txtUsername,
input#txtPassword {
  font-family: inherit;
  font-size: 13px;
  padding: 0 3px;
}

#header {
  margin:0;
  padding:0;
  width: 100%;
  background-color: #dd6600;
}
#header h1 {
  color: #f0f0f7;
  background-color: #34a;
  padding: 6px 8px 5px 8px;
  border-radius: 4px;
}
#header .row {
  position:relative;
  margin: 0;
}
#header .row:nth-child(1) {
  height: 84px;
}
#header .welcome {
  margin-top: -8px;
  font-size: 9px;
  padding: 2px;
  color: #fff7f7;
}
#header .cell {
  vertical-align: top;
}
#header .cell:first-child {
  position: absolute;
  left: 0;
  text-align: left;
  width: 50%;
  min-width: fit-content;
}
#header .cell:last-child {
  position: absolute;
  right:0;
  text-align: right;
}
#header .row:nth-child(2) {
}

#version_box {
  position: relative;
  bottom: 28px;
  right: 26px;
  font-size: 10px;
  text-align: right;
color: #eee;}

#ctrl_page_title {
  color: #f0f0f0;
  font-size: 12px;
  font-weight: bold;
  margin-top: 4px;
  padding: 4px 8px;
  background-color: #333;
  border-radius: 4px;
}
#ctrl_page_title span {
  color:#11dd11;
  font-family: monospace;
}

/* pop-up ajax mesage div */
#msgDiv {
  position: absolute;
  visibility: hidden;
  min-width: 200px;
  min-height: 28px;
  font-size: 14px;
  color: #eee;
  text-align: center;
  overflow: visible;
  padding: 6px;
  background-color: #333;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
  z-index: 9999;
}

#ctrl_content {
  position:relative;
  width:100%;
  height: 540px;
}

#control #fullSizeImage {
  padding: 3px;
  background-color: #666;
  height: auto;

}
#control #fullSizeImage .imageTitle {
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 0 0 3px 0;
  width:100%;
  text-align: center;
}

#login_outer {
  display:table;
  width:100%;
  height:100%;
  margin:0;
}
#login_inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: url(images/keys_login.jpg) no-repeat center #202020;
}
#login_content {
  display: block;
  text-align: center;
  width: 320px;
  margin: 60px auto;
  padding: 22px;
  background-color: rgba(255,190,0,0.92);
  border-radius: 12px;
}
#login_content h1 {
  font-size: 39px;
  font-weight: bold;
  color: #1b5df9;
  margin-top: 12px;
  text-align: center;
}
#login_content h2 {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin: auto;
  text-align: center;
}

#login_content #login_msg {
  margin: 10px 0;
}
#login_content form { margin:0; }
#login_content label { display: block; padding-top:0.2em; font-size: 0.8em; font-weight: normal; }
#login_content input[type=text],
#login_content input[type=password] {
  color: #7700ff;
  margin-top: 12px;
  width: 240px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  background-color: #f7f7f7;
}
#login_content #btnLogin { font-size: 13pt; }
#login_content form div:last-child { text-align: right; }
#login_msg { text-align: center; }
#login_msg span { font-weight: bold; }
#login_msg div { margin-top: 12px; }
#login_msg .msg_loggedout { color: #aa00ff;; }
#login_msg .msg_error { color: #FF0000; }
#login_msg .msg_default { color: #0022ff; }

.purple {
  color:#7700aa;
}
.blue {
  color:#3444aa;
}
.green {
  color:#4cdd0f;
}
.yellow {
  color:#e8af25;
}
.orange {
  color:#dd6600;
}
.bgpurple {
  background-color:#7700aa;
}
.bgblue {
  background-color:#3444aa;
}
.bggreen {
  background-color:#4cdd0f;
}
.bgyellow {
  background-color:#e8af25;
}
.bgorange {
  background-color:#dd6600;
}
.bold {
  font-weight: bold;
}
.inline {
  display: inline-block !important;
}

div input,
div select,
div textarea {
  font-family:inherit;
  font-size:8pt;
  font-weight: normal;
  color: #22479f; /* blue */
}
#imageOverLay {
  background-color: black;
  opacity: 0.88;
  z-index: 20;
}
#fullSizeImage { z-index: 30; }