BODY, HTML {
  padding: 5px;
  margin: 0;
  border: 0;
  background: #E6E5E3 url(../jape/img/background.png) repeat-x 0 0;
}

BODY, HTML,
DIV, SPAN, TD {
  font: 8pt Arial, sans-serif; 
  color: #333;   
}


img { display:block; }

.passwd { display: inline !important; margin-left: 2px; }

a:link { color:black; }
a:visited { color:black; }
a:hover { color:black; }
a:active { color:black; }
a:focus { color:black; }


.scal table {border-collapse: collapse;}

.scal table.cal_table {
	width: 437px;
	font-size:12px;
}

.scal table.cal_table td {
	text-align: center;
}

.scal table.cal_table thead tr.calheader td {
	cursor: pointer;
}

.scal table.cal_table tbody.cal_wrapper tr.weekboxname td {
	background: #000;
	color: #fff;
	width: 64px;
	font-weight: bold;
	font-size: 12px;
	border-top: 1px solid #787878;
}

.scal table.cal_table tbody.cal_wrapper tr.weekbox td.daybox {
	cursor: pointer;
	border: 1px solid #787878;
}

.scal table.cal_table tbody.cal_wrapper tr.weekbox td.dayboxsunday {
	background: #cccccc;
}

.scal table.cal_table tbody.cal_wrapper tr.weekbox td.dayboxsaturday {
	background: #cccccc;
}

.scal table.cal_table tbody.cal_wrapper tr.weekbox td.dayoutmonth {
	color: #888888;
}

.scal table.cal_table tbody.cal_wrapper tr.weekbox td.dayselected {
	background: #E00008;
	color: #ffffff;
}

.scal table.cal_table tbody.cal_wrapper tr.weekbox td.today {
	background: #FF9999;
}

/*
tinyscal - a mini version of the calendar type.  useful in tight spaces.
 usage: define class of base element as "scal tinyscal" as tinyscal is
        dependent on scal.
*/
.tinyscal table.cal_table {
	font-size: 11px;
	width: 154px;
}

.tinyscal table.cal_table tbody.cal_wrapper tr.weekboxname td {
	width: 20px;
}

.tinyscal table.cal_table tbody.cal_wrapper tr.weekboxname td {
	font-size: 11px;
}

/*
slick - an image based version of tinyscal.
 usage: define class of base element as "scal tinyscal slick" as slick is
        dependent on scal and tinyscal.
*/
.scal.slick
{
    font-family:Arial, sans-serif;
}

.scal.slick .calheader
{
    background:#787878 center left;
}


.scal.slick table.cal_table
{
    border: 1px solid #888888;
}


.scal.slick table.cal_table thead tr.calheader td.caltitle
{
    color: #ffffff;
}

.scal.slick table.cal_table tbody.cal_wrapper tr.weekbox td
{
    background:#cccccc center left;
}

.scal.slick table.cal_table tbody.cal_wrapper tr.weekbox td.dayboxsunday {
	background: #ffffff;
}

.scal.slick table.cal_table tbody.cal_wrapper tr.weekbox td.dayboxsaturday {
	background: #cccccc;
}

.scal.slick table.cal_table tbody.cal_wrapper tr.weekbox td.dayselected
{
    background:#787878 center left;
}

.scal.slick table.cal_table tbody.cal_wrapper tr.weekbox td.today
{
    background:#ccc center left;
    color: #787878;
    font-weight: bold;
}

.scal.slick table.cal_table tbody.cal_wrapper tr.weekboxname td
{
    background:#787878 center left;
}

/* [TOPBAR] ------------------------------------------------ */
.topbar_left, .topbar_middle,
.topbar_right {
  height: 72px;
  background-repeat: no-repeat;
}

.topbar_left {
  background-image: url(../jape/img/topbar/topbar_left.png);
  width: 220px;
}

.topbar_middle {
  background-image: url(../jape/img/topbar/topbar.png);
  background-repeat: repeat-x;
}

.topbar_middle DIV {
  float: right;
  height: 25px;
}

.topbar_middle DIV IMG, 
.topbar_middle DIV SPAN {
  float: left;
}

.topbar_middle DIV SPAN {
  padding: 5px 0 0 0;
}

.topbar_right {
  background-image: url(../jape/img/topbar/topbar_right.png);
  width: 222px;
}

IMG.topbar_divider {
  margin: 5px 7px;
}

IMG.topbar_icon {
  margin: 0 8px 0 2px;
}

#throbber {
  width: 23px;
  height: 23px;
}

.throbber_still, 
.throbber_active {
  background-repeat: no-repeat;
}

.throbber_still {
  background-image: url(../jape/img/topbar/throbber_still.gif);
}

.throbber_active {
  background-image: url(../jape/img/topbar/throbber_animation.gif);
}

#topbar_userbox {
  float: right;
  padding: 14px 25px 0 0;
  height: 25px;
}

#topbar_userbox span, 
#topbar_userbox img {
  float: left;
}

#topbar_userbox span {
  padding: 0;
  margin: 0 0 6px 0;
}

IMG.topbar_divider {
  margin: 5px 7px;
  padding: 0;
  width: 2px;
}

IMG.topbar_icon {
  margin: 0 8px 0 2px;
}

/* [FOOTER] ------------------------------------------------ */
.footer {
  height: 22px;
  color: #333;
  font-size: 8pt;
}

/* [LOGIN] ------------------------------------------------- */
TR.login_screen_wrap {
  background-color: #fff;
  border: 1px #9c9fa3;
  border-width: 0px 1px 1px 1px;
}

DIV.login_screen {
  background-color: #fff;
  height: 451px;
  text-align: center;
}

DIV.login_screen_box {
  background: #fff url(../jape/img/login/login.png) no-repeat center center;
  height: 315px;
  width: 495px;
  margin: auto;
  margin-top: 80px;
  vertical-align: middle;
  position: relative;
}

ul.login_screen_mask {
  width: 330px;
  position: relative;
  top: 125px;
  left: 123px;
  vertical-align: middle;
  list-style: none;
  border-width: 0px;
  padding: 0;
  font-size: 12px;
}

ul.login_screen_mask li {
  height: 25px;
  line-height: 20px;
  vertical-align: middle;
}

ul.login_screen_mask li label {
  width: 120px;
  font-weight: bold;
  color: #333;
  float: left;
  text-align: left;
}

ul.login_screen_mask li input {
  font-size: 12px;
  border: 1px #333333 solid;
  float: left;
  width: 150px;
}

ul.login_screen_mask li div {
    margin: 15px 0 0;
    padding: 0;
}

ul.login_screen_mask li div input, 
ul.login_screen_mask li div span {
  line-height: 21px;
  vertical-align: middle;
}

ul.login_screen_mask li div span {
  color: #333;
  float: left;
  padding: 0 0 0 10px;
  line-height: 21px;
}


.qrcode_screen_login_button,
.login_screen_login_button {
  font-size: 14px;
  vertical-align: middle;
  padding: 6px 0 0 10px;
  text-align: left;
  height: 27px;
  line-height: 27px;
  cursor: pointer;
  position: absolute;
}

.login_screen_login_button {
    right: 100px;
    top: 215px;
}

.qrcode_screen_login_button {
    right: 0px;
}

div.login_screen_login_button_left,
div.login_screen_login_button_middle,
div.login_screen_login_button_right {
    background-image: url(../jape/img/login/login_button.png);
    height: 27px;
    line-height: 27px;
    font-size: 14px;
    float: left;
}

div.login_screen_login_button_left {
    background-position: left top;
    width: 2px;
}
div.login_screen_login_button_middle {
    background-position: left bottom;
    background-repeat: repeat-x;
    padding: 0 5px;
}
div.login_screen_login_button_right {
    background-position: right top;
    width: 29px;
}


/* [WELCOME] ----------------------------------------------- */
#welcome_screen {
  background: #fff url(img/welcome.png) no-repeat 0 0;
  width: 688px;
  height: 388px;
  padding-top: 40px;
}

#welcome_screen span, 
#welcome_screen ul {
  width: 622px;
  position: relative;
  left: 10px;
  text-align: left;
}

#welcome_screen span {
  display: block;
  font-size: 9pt;
  padding-bottom: 40px;
}

#welcome_screen ul {
}

#welcome_screen ul li {
  font: 9pt Arial, sans-serif;
  padding: 5px 0 0 0;
}

#welcome_screen span#homeuse {
  position: relative;
  left: 10px;
  bottom: 60px;
  padding-bottom: 0;
}

/* [TIPBOX] ------------------------------------------------ */
.tipbox_left, .tipbox_tip, 
.tipbox_divider, .tipbox_right {
  height: 76px;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

.tipbox_left IMG {
  width: 134px;
}

.tipbox_tip {
  background-image: url(../jape/img/tipbox/tip_middle.png);
  background-repeat: repeat-x;
  color: #fff;
  font-size: 11pt;
  font-weight: bold;
}

.tipbox_divider IMG {
  width: 2px;
}

.tipbox_right IMG {
  width: 8px;
}

/* [MENU] -------------------------------------------------- */
.menu_container {
  height: 31px;
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent url(../jape/img/menu.png) repeat-x 0 0;
}

.menuitem, 
.menuitem_active {
  color: #333333;
  line-height: 24px;
  height: 24px;
  padding: 1px 8px;
  margin: 1px 0 0 0;
  width: auto;
  font-size: 9pt;
  font-weight: bold;
  white-space: nowrap;
}

.menuitem_active {
    color: #ED7f00;
}

/* [BOXES] ------------------------------------------------- */
.box_header_left, 
.box_header_center, 
.box_header_right {
  background-repeat: no-repeat;
  height: 30px;
  line-height: 30px;
}

.box_header_left, 
.box_header_right {
  width: 4px;
  min-width: 4px;
}

.box_header_left {
  background-image: url(../jape/img/fieldset/fieldset_left.png);
}

.box_header_center {
  background-image: url(../jape/img/fieldset/fieldset_center.png);
  background-repeat: repeat-x;
  width: 100%;
}

.box_header_center span {
  font-weight: bold;    
}

.box_header_right {
  background-image: url(../jape/img/fieldset/fieldset_right.png);
}

.box_footer {
  height: 31px;
  width: 100%;
}

.box_footer_left, 
.box_footer_center, 
.box_footer_right {
  height: 31px;
  background-color: #fdfdfd;
}

.box_footer_left, 
.box_footer_right {
  width: 4px;    
}

/* [BUTTONS] ----------------------------------------------- */
.graphical_button {
  height: 27px;
  display: inline;
}

.graphical_button DIV.graphical_button_left, 
.graphical_button DIV.graphical_button_center, 
.graphical_button DIV.graphical_button_right {
  width: 6px;
  height: 27px;
  float: left;
  background-image: url(../jape/img/buttons/button_left.png);
  background-repeat: no-repeat;
}

.graphical_button DIV.graphical_button_center {
  background-image: url(../jape/img/buttons/button_center.png);
  background-repeat: repeat-x;
  line-height: 27px;
  width: auto;
  white-space: no-wrap;
}

.graphical_button DIV.graphical_button_center:hover {
  cursor: pointer;    
}

.graphical_button DIV.graphical_button_center IMG, 
.graphical_button DIV.graphical_button_center SPAN {
  float: left;
  cursor: pointer;
  margin: 0 3px 0 0;
}

.graphical_button DIV.graphical_button_center SPAN {
  line-height: 27px;
}

.graphical_button DIV.graphical_button_center IMG {
  margin: 5px 3px 0 0;    
}

.graphical_button DIV.graphical_button_right {
  background-image: url(../jape/img/buttons/button_right.png);
}

/* [WIDGET-BOX] -------------------------------------------- */
.widget_box_header_left, 
.widget_box_header_center, 
.widget_box_header_right {
  height: 23px;
  padding: 0;
}

.widget_box_header_left, 
.widget_box_header_right {
  background-repeat: no-repeat;
  width: 4px;
}

.widget_box_header_left {
  background-image: url(../jape/img/box/widget_left.png);
}

.widget_box_header_center {
  background-image: url(../jape/img/box/widget_center.png);
  background-repeat: repeat-x;
}

.widget_box_header_right {
  background-image: url(../jape/img/box/widget_right.png);
}

.widget_box_header_title {
  line-height: 21px;
  font-weight: bold;
  text-align: left;
  float: left;
  width: 330px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget_box_header_buttons {
  float: right;
  padding-top: 1px;
}


.reason_checkboxes {
  background-image: url(../jape/img/db_box_content_gradient.png);
  background-repeat: repeat-x;
  padding: 0 0 12px 0;
}

.reason_checkboxes TABLE {
  width: 100%;
}

.reason_checkboxes TABLE TD {
  height: 32px;
}

.reason_checkboxes TABLE TD DIV {
  border-right: 1px #a8a8a8 dotted;
}

.ellipsis {
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -moz-binding: url('jape/ellipsis.xml#ellipsis');
}

#qrcode {
    width: 662px;
    margin: 0 auto;
    position: relative;
}

#qrcode > p {
    text-align: justify;
}

ul.qrcodes_container {
    list-style: none outside none;
    margin: 0 0 5px 5px;
    padding: 40px 0 0 0;
}

.qrcodes_container li {
    display: inline-block;
    width: 159px;
    margin: 0 auto 0 auto;
    padding: 30px;
    position: relative;
}

.qrcodes_container img {
    float: left;
}

.qrcodes_container p {
    margin: 5px 0 0 0;
    float: left;
    font-style: italic;
}

.qrcodes_container a {
    margin: 0 0 5px 5px;
    float: right;
    text-align: right;
    font-size: 9px;
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

.qrcodes_container table {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #aaa;
    display: inline-table;
    left: 180px;
    padding: 3px;
    position: absolute;
    width: 280px;
    z-index: 2;
}

.qrcodes_container td:nth-child(2n) {
    text-align: left;
    font-weight: bold;
}

.qrcodes_container td:nth-child(2n+1) {
    text-align: right;
    white-space: nowrap;
}