* {
  font-family: Arial;
  font-size: 9pt;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial;
  font-size: 8pt;
  background-color: #FFFFFF;
}

div.header {
  margin: 0px auto;
  position: relative;
  width: 100%;
  height: 115px;
  background-image: URL("../pics/bg/body_bg.gif");
}

div.centerheader {
  margin: 0px auto;
  position: relative;
  bottom: 30px;
  width: 1000px;
  height: 85px;
}

div.topmenu {
  margin: 0px auto;
  position: relative;
  top: 85px;
  width: 1000px;
  height: 30px;
  background-image: URL("../pics/bg/nav_bg.gif");
}

.topmenunavig {
  font-family: Arial;
  font-size: 10pt;
  font-weight: bold;
  color: #AAAAAA;
  text-align: center;
}

div.main {
  margin: 0px auto;
  position: relative;
  width: 1000px;
  text-align: left;
}

div.leftmenuframe {
  margin: 0px;
  position: relative;
  float: left;
  width: 200px;
  left: 0px;
  background-color: #F0F2F4;
  text-align: center;
}

div.leftinfoframe {
  margin: 0px;
  position: relative;
  width: 200px;
  height: 70px;
  float: left;
}

div.username {
  position: absolute;
  font-weight: bold;
  top: 14px;
  left: 40px;
}

div.logout {
  position: absolute;
  font-size: 8pt;
  font-weight: bold;
  top: 44px;
  left: 40px;
}

div.leftmenuframebar {
  margin: 0px;
  position: relative;
  width: 200px;
  height: 10px;
  background-color: #394852;
  left: 0px;
}

div.leftmenu {
  margin: 0px auto;
  position: relative;
  top: 5px;
  text-align: center;
}

div.leftmenugradient {
  position: relative;
  height: 150px;
  width: 200px;
  top: 15px;
  background-image: URL("../pics/bg/menu_gradient.jpg");
}

div.infoframe_info {
  border: 2px solid #009CDA;
  height: 70px;
  width: 790px;
  float: left;
  margin: 5px 0;
  background-color: #EFF8FC;
}

div.infoframe_warning {
  border: 2px solid #E2C822;
  height: 70px;
  width: 790px;
  float: left;
  margin: 5px 0;
  background-color: #FFF9D7;
}

div.infoframe_error {
  border: 2px solid #CA3F22;
  height: 70px;
  width: 790px;
  float: left;
  margin: 5px 0;
  background-color: #FFEBE8;
}

div.contentframe {
  position: relative;
  float: left;
  width: 790px;
  padding: 0px 5px;
}

div.footer {
  clear: both;
  margin: 0px auto;
  position: relative;
  width: 969px;
  height: 142px;
  background-image: URL("../pics/bg/footer_bg.gif");
  background-repeat: no-repeat;
}

div.copyright {
  position: absolute;
  left: -20px;
  padding: 5px;
  width: 400px;
  color: #52565B;
}

table.navig {
  font-family: Arial;
  font-size: 9pt;
  border-spacing: 0px;
  border-width: 0px;
  background-color: white;
}

td.navig {
  font-size: 9pt;
  height: 19px;
  border-spacing: 0px;
  border-width: 0px;
  text-align: left;
}

td.navigInv {
  font-size: 9pt;
  height: 0px;
  border-spacing: 0px;
  border-width: 0px;
  text-align: left;
}

a:link.error {
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

a:visited.error {
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

a:hover.error {
  font-size: 8pt;
  color: #CA3F22;
  text-decoration: none;
}

a:active.error {
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

/*#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.9;
    text-align: left;
}
#tooltip h3, #tooltip div { margin: 0; }*/
.tooltip {
  background-color: #37464F;
  border: 1px solid #fff;
  padding: 8px;
  min-width: 240px;
  max-width: 900px;
  display: none;
  color: #fff;
  text-align: left;
  font-size: 12px;
  z-index: 5000;
  /* outline radius for mozilla/firefox only */
  -moz-box-shadow: 0 0 10px #000;
  -webkit-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
}

.tooltip a, .tooltip a:active, .tooltip a:link, .tooltip a:visited {
  color: #fff;
}

/* SEMAFRAME */
table.main {
  margin-left: 0px;
  background-color: white;
  width: 900px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

table.detail {
  width: 100%;
  background-color: #FFFFFF;
  font-family: Arial;
  font-size: 9pt;
  margin-top: 7px;
  border-collapse: collapse;
  padding: 3px;
  line-height: 1.4;
}

table.login {
  text-align: left;
  width: 355px;
  font-family: Arial;
  font-size: 9pt;
  margin-top: 7px;
  border-collapse: collapse;
  border: 1px solid #666666;
  border-bottom-width: 0px;
  border-top-width: 0px;
  background-color: white;
}

table.coloredlist {
  width: 680px;
  font-family: Arial;
  font-size: 9pt;
  margin: 10px auto 0px auto;
  border-collapse: collapse;
  padding: 3px;
  line-height: 1.4;
}

td.coloredlistdata {
  text-align: left;
  border-bottom: 2px solid white;
  padding: 6px 3px;
  background-color: #EBEBEB;
}

td.headerbar {
  color: white;
  background: #394852;
  border: 0px;
}

table.letters {
  float: right;
}

table.letters td {
  text-align: center;
  width: 23px;
  height: 20px;
  cursor: pointer;
}

.listtitle {
  border-bottom: 1px solid #C3C3C3;
  background-color: #F0F2F4;
  vertical-align: top;
  padding: 3px;
  font-weight: normal;
}

.listdata {
  text-align: left;
  border-bottom: 1px solid #C3C3C3;
  padding: 4px 4px 4px 2px;
}

ul#info_text {
  margin: 2px;
}

ul.unstyled {
  list-style: none;
  margin: 0 !important;
  padding: 0;
}

/********************** FONT STYLES ***********************/
.pagefont {
  font-family: Arial;
  font-size: 9pt;
}

.titlefont {
  font-family: Arial;
  font-size: 10pt;
}

.fonttiny {
  font-family: Arial;
  font-size: 7pt;
}

/********************** FIELD STYLES ***********************/
input.ButtonPic {
  font-family: Arial;
  font-size: 9pt;
  height: 18px;
  color: #394852;
  background-image: url(../pics/button_background.jpg);
  border: 1px solid #394852;
}

input.norm {
  font-family: Arial;
  font-size: 9pt;
  background-color: #ffffff;
  border: 1px solid #394852;
  height: 18px;
  width: 140px;
}

.inputfield {
  border: 1px solid #C3C3C3;
  background: #FFF9D7;
  width: 150px;
}

.inputfield_medium {
  border: 1px solid #C3C3C3;
  background: #FFF9D7;
  width: 100px;
}

.inputfield_ml {
  border: 1px solid #C3C3C3;
  background: #FFF9D7;
  width: 135px;
}

.inputfield_large {
  border: 1px solid #C3C3C3;
  width: 300px;
}

.inputfield_max {
  border: 1px solid #C3C3C3;
  background: #FFF9D7;
  width: 580px;
}

.inputfield_small {
  border: 1px solid #C3C3C3;
  width: 80px;
}

.inputfield_border {
  border: 1px solid #C3C3C3;
}

.textfield_ml {
  border: 1px solid #C3C3C3;
  background: #FFF9D7;
  width: 550px;
}

textarea {
  border: 1px solid #C3C3C3;
  width: 300px;
  height: 100px;
}

textarea.ml {
  border: 1px solid #C3C3C3;
  width: 135px;
  height: 100px;
}

textarea.ml_tab {
  width: 550px;
  height: 180px;
}

.waitnote {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  font-size: 9pt;
  font-weight: bold;
  border: 0px;
  color: red;
  display: none;
}

.okbutton {
  font-family: Arial;
  font-size: 9pt;
  border: 1px solid #555555;
  width: 150px;
  background-color: #DDDDDD;
}

.submitbutton {
  font-family: Arial;
  font-size: 9pt;
  border: 1px solid #555555;
  width: 100px;
  background-color: #DDDDDD;
}

.pointercursor {
  cursor: pointer;
}

/********************** HREF STYLES ***********************/
a:link {
  font-size: 9pt;
  color: #394852;
  text-decoration: underline;
}

a:visited {
  font-size: 9pt;
  color: #394852;
  text-decoration: underline;
}

a:hover {
  font-size: 9pt;
  color: #028AD4;
  text-decoration: underline;
}

a:active {
  font-size: 9pt;
  color: #009CDA;
  text-decoration: underline;
}

/*********************** TABS *****************************/
/* root element for tabs */
ul.tabs {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  border-bottom: 1px solid #666;
  height: 30px;
}

/* single tab */
ul.tabs li {
  float: left;
  text-indent: 0;
  padding: 0;
  margin: 0 !important;
  list-style-image: none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a {
  background: url(/semaframe/src/pics/tabs.png) no-repeat -420px 0;
  font-size: 10pt;
  display: block;
  height: 30px;
  line-height: 30px;
  width: 134px;
  text-align: center;
  text-decoration: none;
  color: #333;
  padding: 0px;
  margin: 0px;
  position: relative;
  top: 1px;
  outline: none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
  background-position: -420px -31px;
  color: #fff;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
  background-position: -420px -62px;
  cursor: default !important;
  color: #000 !important;
}

/* Different widths for tabs: use a class name: s, l, xl */
/* width 1 */
ul.tabs a.s {
  background-position: -553px 0;
  width: 81px;
}

ul.tabs a.s:hover {
  background-position: -553px -31px;
}

ul.tabs a.s.current {
  background-position: -553px -62px;
}

/* width 2 */
ul.tabs a.l {
  background-position: -247px 0px;
  width: 174px;
}

ul.tabs a.l:hover {
  background-position: -247px -31px;
}

ul.tabs a.l.current {
  background-position: -247px -62px;
}

/* width 3 */
ul.tabs a.xl {
  background-position: 0 0px;
  width: 248px;
}

ul.tabs a.xl:hover {
  background-position: 0 -31px;
}

ul.tabs a.xl.current {
  background-position: 0 -62px;
}

/* initially all panes are hidden */
.panes .pane {
  /*    display:none; */
}

/* tab pane styling */
.panes div {
  /*    display:none; */
  padding: 15px 10px;
  border: 1px solid #999;
  border-top: 0;
  background-color: #fff;
}

/********************** MISC STYLES ***********************/
.clear {
  clear: both;
}

.bgcolorlight {
  background: #FFF9D7;
}

.bgcolorwrong {
  background: #FF8888;
}

.fgcolorwrong {
  color: red;
}

.wrong {
  background: #FF8888;
  border: 1px solid red;
}

.bgcolorgrey {
  background: #F0F2F4;
}

.bgcolordarkgrey {
  background: #394852;
}

.bordercolor {
  border-color: #C3C3C3;
}

.form_protection {
  display: none;
}

form {
  display: inline;
}

img {
  outline: none;
  border: none;
}

img.icon {
  cursor: pointer;
}

.field-wrap-line {
  padding: 5px 0;
}

.field-wrap input {
  margin-bottom: 5px;
  display: block;
}

img.flag {
  display: block;
  float: left;
  margin: 1px 4px 0 0;
}

img.list-icon {
  display: block;
  float: right;
  margin: 1px 0 0 4px;
}

img.progress {
  display: block;
  float: left;
  margin: 1px 6px 0 0;
}

span.progress {
  font-size: 11pt;
  font-weight: 700;
  margin: 0 5px 0 0;
}

span.progress.ordered {
  color: #CA3F22;
}

span.progress.delivered {
  color: #FFBD69;
}

span.progress.paid {
  color: #690;
}

span.progress.redeemed {
  color: #0C0;
}

.remove-icon {
  display: inline-block;
  position: relative;
  left: 10px;
  top: 5px;
}

/* filebrowser part */
#preview {
  width: 280px;
  height: 200px;
  padding: 0;
  margin: 0;
}

#preview img {
  max-width: 280px;
  max-height: 200px;
}

.staging-banner {
  position: fixed;
  background-color: red;
  line-height: 50px;
  width: 150px;
  top: 50%;
  left: 0;
  text-align: right;
  font-weight: 800;
  padding: 0 10px;
}

.margin-0 {
  margin: 0px;
}

.margin-top-0 {
  margin-top: 0px;
}

.margin-left-0 {
  margin-left: 0px;
}

.margin-right-0 {
  margin-right: 0px;
}

.margin-bottom-0 {
  margin-bottom: 0px;
}

.padding-0 {
  padding: 0px;
}

.padding-top-0 {
  padding-top: 0px;
}

.padding-left-0 {
  padding-left: 0px;
}

.padding-right-0 {
  padding-right: 0px;
}

.padding-bottom-0 {
  padding-bottom: 0px;
}

.margin-5 {
  margin: 5px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-left-5 {
  margin-left: 5px;
}

.margin-right-5 {
  margin-right: 5px;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

.padding-5 {
  padding: 5px;
}

.padding-top-5 {
  padding-top: 5px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-right-5 {
  padding-right: 5px;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.margin-10 {
  margin: 10px;
}

.margin-top-10 {
  margin-top: 10px;
}

.margin-left-10 {
  margin-left: 10px;
}

.margin-right-10 {
  margin-right: 10px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.padding-10 {
  padding: 10px;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-right-10 {
  padding-right: 10px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.margin-15 {
  margin: 15px;
}

.margin-top-15 {
  margin-top: 15px;
}

.margin-left-15 {
  margin-left: 15px;
}

.margin-right-15 {
  margin-right: 15px;
}

.margin-bottom-15 {
  margin-bottom: 15px;
}

.padding-15 {
  padding: 15px;
}

.padding-top-15 {
  padding-top: 15px;
}

.padding-left-15 {
  padding-left: 15px;
}

.padding-right-15 {
  padding-right: 15px;
}

.padding-bottom-15 {
  padding-bottom: 15px;
}

.margin-20 {
  margin: 20px;
}

.margin-top-20 {
  margin-top: 20px;
}

.margin-left-20 {
  margin-left: 20px;
}

.margin-right-20 {
  margin-right: 20px;
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.padding-20 {
  padding: 20px;
}

.padding-top-20 {
  padding-top: 20px;
}

.padding-left-20 {
  padding-left: 20px;
}

.padding-right-20 {
  padding-right: 20px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.margin-25 {
  margin: 25px;
}

.margin-top-25 {
  margin-top: 25px;
}

.margin-left-25 {
  margin-left: 25px;
}

.margin-right-25 {
  margin-right: 25px;
}

.margin-bottom-25 {
  margin-bottom: 25px;
}

.padding-25 {
  padding: 25px;
}

.padding-top-25 {
  padding-top: 25px;
}

.padding-left-25 {
  padding-left: 25px;
}

.padding-right-25 {
  padding-right: 25px;
}

.padding-bottom-25 {
  padding-bottom: 25px;
}

.margin-30 {
  margin: 30px;
}

.margin-top-30 {
  margin-top: 30px;
}

.margin-left-30 {
  margin-left: 30px;
}

.margin-right-30 {
  margin-right: 30px;
}

.margin-bottom-30 {
  margin-bottom: 30px;
}

.padding-30 {
  padding: 30px;
}

.padding-top-30 {
  padding-top: 30px;
}

.padding-left-30 {
  padding-left: 30px;
}

.padding-right-30 {
  padding-right: 30px;
}

.padding-bottom-30 {
  padding-bottom: 30px;
}