@import "display.css";
@import "form.css";

/* Element */
p {
    margin-bottom: 1em;
}

.loadIndicator {
    float: right;
    width: 16px;
    height: 16px;
    margin: 7px 3px;
    background: transparent url("img/loading.gif") center center no-repeat;
}

.loadIndicator2 {
    width: 100%;
    height: 40px;
    text-align: center;
    margin-top: 60px;
    background: transparent url("img/loading2.gif") bottom center no-repeat;
}

.accessButton {
    float: right;
    margin: 7px 3px;
}

.toggleButton {
    cursor: pointer;
}

.separator {
    height: 20px;
    background: transparent url("img/separator.png") repeat-x center left;
}

.verticalSeparator {
    background: transparent url("img/separator.png") repeat-y top center;
}

embed, object {
    display: block;
    z-index: 500;
}

.captcha img {
    border: 1px solid #808080;
}

/* Override JQuery UI */
.ui-datepicker {
    z-index: 2000;
}

.calendar .ui-datepicker {
    width: 180px;
}

.ui-widget-content a:hover {
    color: #676767;
}

.ui-state-highlight a:hover {
    color: #676767;
}

.ui-effects-transfer {
    border: 2px dotted gray;
}

/* Behavior */
.middleVAlign {
    vertical-align: middle;
}

.middleVAlignChildren * {
    vertical-align: middle;
}

.centerAlign {
    text-align: center;
}

.justifyAlign {
    text-align: justify;
}

.invisible {
    display: none;
}

.income {
    color: #00844B;
}

.expense {
    color: #A91F00;
}

.footnote {
    margin-top: 10px;
    color: #777;
    font-size: 0.9em;
    text-align: justify;
}

/* Layout */
body {
    font: normal 12px Verdana;
    background: #49903b;
}

.background-top {
    min-height: 350px;
    background: #a7f298 url("img/background-top.png") repeat-x;
}

.background-bottom {
    min-height: 30px;
    background: #49903b url("img/background-bottom.png") repeat-x;
}

.container {
    width: 900px;
    margin: 0px auto;
}

/* Header */
.container-header {
    height: 50px;
}

.container-header a {
    color: #fff;
    text-decoration: none;
}

.container-header a:hover {
    color: #eee;
    text-decoration: underline;
}

.siteLogo {
    float: left;
    margin: 0px 5px;
}

.userPanel {
    float: right;
    margin: 5px 10px;
    color: #FFFFFF;
    text-align: right;
}

.userPanel br {
    font-size: 0.5em;
}

/* Footer */
.container-footer {
    color: #FFF;
    text-align: center;
    line-height: 20px;
    padding-top: 20px;
}

.container-footer a {
    color: #FFF;
    text-decoration: underline;
}

/* Body */
.container-body {
    width:100%;
    padding: 10px 0px;
}

.placeholder-left {
    float: left;
    width: 200px;
}

.placeholder-right {
    float: right;
    width: 200px;
}

.placeholder-middle {
}

.placeholder-middle.left {
    padding-right: 203px;
}

.placeholder-middle.right {
    padding-left: 203px;
}

/* Content */
.content {
    border: 1px solid #9BB786;
}

.content-header {
    background: #DBDBDB url("img/content-header.png") top left repeat-x;
    font: bold 1.1em Verdana, Arial;
    line-height: 30px;
    padding: 0px 10px;
    border-bottom: 1px solid #C0C0C0;
}

.content-body {
    padding: 15px 10px 15px 10px;
    background: #fff;
}

.content-body a {
    color: #1A6936;
    text-decoration: none;
}

.content-body a:hover {
    color: #26994E;
}

/* Sidebar */
.sidebar {
    border: 1px solid #42B267;
    margin-bottom: 5px;
}

.sidebar-header {
    background: #59C650 url("img/sidebar-header.png") top left repeat-x;
    color: #fff;
    font: bold 1.1em Verdana, Arial;
    line-height: 30px;
    padding: 0px 5px;
    border-bottom: 1px solid #42B268;
}

.sidebar-body {
    padding: 5px;
    background: #fff;
}

.sidebar-body a.menu {
    display: block;
    color: #1A6936;
    text-decoration: none;
    padding: 5px 0px;
    border-bottom: 1px solid #d7d7d7;
}

.sidebar-body a.menu:hover {
    color: #26994E;
}

.sidebar-body .section {
    padding: 5px 0px;
    font-weight: bold;
    border-bottom: 1px solid #777;
}

/* Display Tab */
.displayTabPanel {
    border-bottom: 1px solid #c6c6c6;
    padding: 0px 5px;
}

.displayTabPanel a {
    float: left;
    display: block;
    padding: 4px 6px;
    margin: 3px -1px -1px 0px;
    border: 1px solid #c6c6c6;
    color: #808080;
    background: #F4F4F4;
}

.displayTabPanel a:hover {
    color: #000;
}

.displayTabPanel a.active {
    padding: 7px 10px 4px 10px;
    margin: 0px -1px -1px 0px;
    color: #000;
    background: #fff;
    border-bottom: 1px solid #fff;
}