body {
    font-family: Arial, serif;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: small;
    position: relative;
}

html > body {
    font-size: small;
}

.clear {
    clear: both;
}

html {
    background-color: #7e7a76;
}

/**
 * Login Styles
 */
#loginForm {
    margin: 20px 0;
}

#loginForm .layoutBox {
    font-size: 100%;
    border: 1px solid #000000;
    margin: 0 auto;
    background-color: #ffffff;
    width: 328px;
    border-radius: 7px;
    padding-top: 7px;
    box-shadow: 0 1px 4px 5px #9F9C99;
}

#loginForm .layoutBox .header {
    background: #e2e2e2 url('../beDesign/images/header-bg.png') repeat-x;
    padding: 0 0 0 10px;
}

#loginForm .layoutBox .header .logo {
    background: url('../beDesign/images/header-logo.png');
    height: 73px;
    width: 308px;
}

#loginForm .layoutBox .header .loginMessage {
    font-weight: bold;
    text-align: center;
    height: 15px;
    padding: 5px;
}

#loginForm .layoutBox .inputSection {
    padding: 7px;
}

#loginForm .layoutBox .inputSection .inputElement {
    width: 180px;
    float: right;
}

#loginForm .layoutBox .inputSection .submitButton {
    text-align: center;
    margin-bottom: 10px;
}

#loginForm .layoutBox .inputSection .submitButton input {
    width: 150px;
    border-radius: 4px;
}

#loginForm .layoutBox .loginErrorList ul {
    font-size: 90%;
}

#loginForm .phpSettingErrorBox {
    padding: 10px;
}

#loginForm .phpSettingErrorBox h2 {
    font-size: inherit;
    color: red;
}

#loginForm .phpSettingErrorBox .setting {
    font-style: italic;
}

/**
 * Form Styles (viel zu allgemein, wenn kein #content vorne dran steht.. macht Ext kaputt)
 */
.cb-plugin-workspace input[type=text],
.cb-plugin-workspace input[type=password],
.cb-plugin-workspace textarea,
.cb-plugin-workspace select {
    padding: 3px;
    border: 1px solid #000000;
    color: #000000;
    font-family: Arial, serif;
    font-size: 12px;
}

.cb-plugin-workspace input[type=text]:focus,
.cb-plugin-workspace input[type=password]:focus,
.cb-plugin-workspace textarea:focus,
.cb-plugin-workspace input.focus,
.cb-plugin-workspace textarea.focus,
.cb-plugin-workspace select:focus {
    border: 1px solid #F79D5B;
}

.cb-plugin-workspace input[type=submit] {
    border: #555555 1px solid;
    padding: 1px 5px;
    background: url("../images/button_bg.jpg") repeat-x left top;
    margin-bottom: 10px;
}

.cb-plugin-workspace input[type=submit]:hover {
    border: #D86B0A 1px solid;
    background-color: #F5F5F5;
    color: #D86B0A;
    cursor: pointer;
}

.cb-plugin-workspace input[type=submit].not-important {
    background: #e2e2e2 none;
}

.cb-plugin-workspace input.inputError[type="text"],
.cb-plugin-workspace input.inputError[type="password"],
.cb-plugin-workspace select.inputError,
.cb-plugin-workspace textarea.inputError,
.cb-plugin-workspace .inputError input[type="text"],
.cb-plugin-workspace .inputError input[type="password"],
.cb-plugin-workspace .inputError select,
.cb-plugin-workspace .inputError textarea {
    background-color: #FCE1E1;
    border: 1px solid #BD0003;
}

/**
 * Header Styles
 */
#header {
    color: #7e7a76;
    height: 80px;
    background: url('../beDesign/images/header-bg.png') repeat-x top left;
}

#header .logo {
    float: right;
    padding: 0 10px;
}

#header .info {
    padding: 10px 0 0 55px;
}

#header .info strong {
    font-weight: bold;
}

/**
 * Menu Styles for TAB Menu
 */
#menu {
    color: #7e7a76;
    position: relative;
    height: 107px;
    padding: 0 36px;
    background: url('../beDesign/images/menu-bg.png') repeat-x top left;
}

#menu .shadow {
    position: absolute;
    top: 103px;
    left: 0;
    height: 8px;
    width: 100%;
    background: url('../beDesign/images/menu-shadow.png') repeat-x top left;
}

#menu .plugin-group ul {
    float: left;
}

#menu .plugin-group li {
    float: left;
    height: 100%;
    margin: 0 1em 0 0;
    padding: 0 0 0 9px;
}

#menu .plugin-group li a {
    padding: 9px 17px 0 0;
    height: 25px;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 130%;
}

#menu .plugin-group .icon {
    padding-left: 38px;
    background: url('../beDesign/images/puzzle-inactive.png') 8px 0px no-repeat;
    display: block;
    height: 100%;
}

#menu .plugin-group li.active {
    background: url('../beDesign/images/menu-tab-left.png') no-repeat top left;
}

#menu .plugin-group li.active a {
    background: url('../beDesign/images/menu-tab-right.png') no-repeat top right;
    color: #7e7a76;
}

#menu .plugin-group li.active .icon {
    background: url('../beDesign/images/puzzle-active.png') 8px 0px no-repeat;
}

#menu .plugins {
    position: absolute;
    left: 36px;
    top: 43px;
    height: 60px;
    display: none;
}

#menu .plugins li {
    margin: 0 13px 0 13px;
}

#menu .plugin-link {
    text-align: center;
    text-decoration: none;
    color: #7e7a76;
}

#menu .plugin-link.active, #menu .plugin-link:hover {
    color: #d86b0a;
}

#menu .plugin-link span {
    text-align: center;
    display: block;
}

/* menu standard image */
#menu .plugin-link img.active {
    margin: 0 auto;
    display: none;
}

#menu .plugin-link img.inactive {
    margin: 0 auto;
    display: block;
}

/* menu hover image */
#menu .plugin-link:hover img.active, #menu .plugin-link.active img.active {
    display: block;
}

#menu .plugin-link:hover img.inactive, #menu .plugin-link.active img.inactive {
    display: none;
}

#menu .plugins li {
    float: left;
}

#menu .plugins.active {
    display: block;
}

/**
 * styles of the content area
 */
#content {
    color: #7e7a76;
}

/* styles for the shadow */
/* top shadow row */
.content-panel .tl {
    background: url('../beDesign/images/content-shadow-tl.png') top left no-repeat;
}

.content-panel .tl {
    background: url('../beDesign/images/content-shadow-tr.png') top right no-repeat;
}

.content-panel .tc {
    background: url('../beDesign/images/content-shadow-tb.png') top left repeat-x;
    height: 6px;
    margin: 0 6px;
}

/* center styles */
.content-panel .ml {
    background: url('../beDesign/images/content-shadow-lr.png') top left repeat-y;
}

.content-panel .mr {
    background: url('../beDesign/images/content-shadow-lr.png') top right repeat-y;
}

.content-panel .mc {
    margin: 0 6px;
    background-color: #ffffff;
}

/* bottom shadow row */
.content-panel .bl {
    background: url('../beDesign/images/content-shadow-tl.png') top left no-repeat;
}

.content-panel .bl {
    background: url('../beDesign/images/content-shadow-tr.png') top right no-repeat;
}

.content-panel .bc {
    background: url('../beDesign/images/content-shadow-tb.png') bottom left repeat-x;
    height: 6px;
    margin: 0 6px;
}

/* styles for the content */
#workspace {
    padding: 10px;
}

.cb-plugin-workspace {
    /*
    padding: 10px;
    margin: 0 40px;
    */
}

.cb-plugin-workspace .plugin-menu ul {
    float: left;
    width: 100%;
    background: url('../beDesign/images/content/plugin-menu-bg.png') repeat-x bottom;
}

.cb-plugin-workspace .plugin-menu li {
    float: left;
    border-right: 1px solid #7e7a76;
    height: 24px;
    padding: 6px 15px 0 15px;
    font-size: 14px;
}

.cb-plugin-workspace .plugin-menu .active {
    background: url('../beDesign/images/content/plugin-menu-active.png') top left repeat-x;
}

.cb-plugin-workspace .plugin-menu a {
    color: #7e7a76;
    text-decoration: none;
}

.cb-plugin-workspace .plugin-menu a:hover, .cb-plugin-workspace .plugin-menu .active a {
    color: #d96c0a;
}

.cb-plugin-workspace .plugin-content {
    padding: 30px 40px 30px 40px;
    clear:both;
}

.cb-plugin-workspace .plugin-content .inputError, #loginForm .inputError {
    color: #BD0003;
}

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

/*
 * FileUploadField component styles
 */
.x-form-file-wrap {
    position: relative;
    height: 22px;
}

.x-form-file-wrap .x-form-file {
    position: absolute;
    right: 0;
    -moz-opacity: 0;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 2;
    height: 22px;
}

.x-form-file-wrap .x-form-file-btn {
    position: absolute;
    right: 0;
    z-index: 1;
}

.x-form-file-wrap .x-form-file-text {
    position: absolute;
    left: 0;
    z-index: 3;
    color: #777;
}

/**
* Tolle Styles die immer wieder kehren
* Error Boxen, Message Boxen, Seitenk�pfe, Seitenk�pfe Beschreibung links und einem Link rechts
* Submit Boxen die immer rechts unter einem Formular sitzen
*/
.wrapbox h3.error {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #FF0000;
    border: 1px solid #606060;
    color: #FFFFFF;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}

.wrapbox h3.error span {
    display: block;
    padding: 3px;
}

.wrapbox h3.message {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #DDD;
    border: 1px solid #606060;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}

.wrapbox h3.message span {
    display: block;
    padding: 3px;
}

.wrapbox h3.header {
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: bold;
    background: #DDDDDD;
    border: 1px solid #606060;
}

.wrapbox h3.header span {
    display: block;
    padding: 3px;
}

.wrapbox h3.header .selected {
    font-weight: bold;
    padding: 3px;
}

.wrapbox h3.selection {
    text-align: left;
    margin: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 100%;
    font-weight: bold;
    background: #DDDDDD;
    border: 1px solid #606060;
}

.wrapbox h3.selection:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.wrapbox h3.selection ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrapbox h3.selection ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.wrapbox h3.selection li {
    float: left;
    margin: 0;
    padding: 0;
    padding-left: 3px;
}

.wrapbox h3.selection li.action {
    float: right;
    margin: 0;
    padding: 0 3px 0 0;
}

.wrapbox ul.selection, dl.selection {
    float: left;
    width: 100%;
    font-size: 100%;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

.wrapbox ul.selection li, dl.selection dt {
    float: left;
    margin: 0;
    padding: 3px;
}

.wrapbox ul.selection li.action, dl.selection dd {
    float: right;
    margin: 0;
    padding: 3px;
}

.wrapbox span.submit,
.wrapbox div.submit {
    display: block;
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

.wrapbox ul.two_column {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    clear: both;
}

.wrapbox ul.two_column li {
    float: left;
    width: 48%;
    margin: 0;
    padding: 3px;
}

/*
* Tab Settings
*/
.wrapbox ul.tabSelect {
    border-bottom: 1px solid #606060;
    height: 23px;
    margin: 0;
    padding: 0;
}

.wrapbox ul.tabSelect li {
    float: left;
    margin-right: 7px;
    text-align: center;
}

.wrapbox ul.tabSelect li a {
    background-color: #FFFFFF;
    color: #666666;
    display: block;
    height: 20px;
    padding: 3px 6px 0 6px;
}

.wrapbox ul.tabSelect li a:hover {
    color: #666666;
}

.wrapbox ul.tabSelect li a.active {
    background-color: #DDDDDD;
}

.wrapbox .tab-content {
    clear: both;
}

#loadContentModal {
    display: none;
    position: absolute;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .5;
    filter: alpha(opacity=50);
}

#loadContentModal.show {
    display: block;
}

#loadContentModalOverlay {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 9999;
    top: 50%;
    text-align: center;
}

#loadContentModalOverlay.show {
    display: block;
}

#loadContentModalOverlay div {
    width: 100px;
    margin: auto;
    padding: 5px;
    border: 1px solid #606060;
    background: #fff;
}

/*
* Footer Einstellungen
*/
#cbFooter {
    clear: both;
    font-size: 70%;
    text-align: center;
    width: 100%;
    height: 3%;
    color: wheat;
    margin-bottom: 10px;
}

#cbFooter a {
    color: wheat;
}

/*
* Diverse Styles f�r bestimmte Abs�tze usw
*/
.standardText {
    font-size: 100%;
}

a img {
    border: 0;
}

/* some default icons for leaf/folder */
.x-tree-node-expanded .x-tree-node-icon {
    background-image: url('../images/icon/folder.png');
}

.x-tree-node-leaf .x-tree-node-icon {
    background-image: url('../images/icon/folder.png');
}

.x-tree-node-collapsed .x-tree-node-icon {
    background-image: url('../images/icon/folder.png');
}

.x-tree-node-leaf .x-tree-node-icon.closed,
.x-tree-node-expanded .x-tree-node-icon.closed,
.x-tree-node-collapsed .x-tree-node-icon.closed {
    background-image: url('../images/icon/lock.png');
}

.x-tree-node-leaf .x-tree-node-icon.hidden,
.x-tree-node-expanded .x-tree-node-icon.hidden,
.x-tree-node-collapsed .x-tree-node-icon.hidden {
    background-image: url('../images/icon/folder_deactivated.png');
}

/**
* Plugin Einstellungen
*/
.cb-plugin .x-panel-header li {
    float: left;
    margin-right: 10px;
}

.cb-plugin .setting-enum dl:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.cb-plugin .setting-enum dt,
.cb-plugin .setting-enum dd {
    padding: 5px;
    margin: 0;
}

.cb-plugin .setting-enum dt {
    float: left;
    width: 42%;
    font-weight: bold;
    vertical-align: middle;
    clear: left;
}

.cb-plugin .setting-enum dd {
    float: left;
    width: 55%;
}

.cb-plugin .setting-enum dd input.text,
.cb-plugin .setting-enum dd select,
.cb-plugin .setting-enum textarea {
    width: 375px;
}

.cb-plugin .setting-enum dl.fit dt,
.cb-plugin .setting-enum dl.fit dd {
    padding: 0;
    width: auto;
}

.cb-plugin .setting-enum dl.fit dt,
.cb-plugin .setting-enum dl.fit dd {
    float: left;
    font-weight: bold;
    vertical-align: middle;
    padding: 0 5px 0 0;
}

/* Old Styles */
.tbl_style {
    background-color: #FFFFFF;
    font-family: Arial, serif;
    font-size: 11px;
}

.tbl_head_style {
    background-color: #DDDDDD;
    font-family: Arial, serif;
    font-size: 11px;
}

.tbl_head_style2 {
    background-color: #EEEEEE;
    font-family: Arial, serif;
    font-size: 11px;
}

a {
    font-size: 100%;
    font-family: Arial, serif;
    color: #D86B0A;
    text-decoration: underline;
}

a:hover {
    color: #f79d5b;
    text-decoration: none;
}

.tblBorder {
    font-family: Arial, serif;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
}

.tblBorder td {
    padding: 3px;
}

.tdBorder {
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
}

.tdBorder2 {
    border-bottom: 1px solid #000000;
}

.tdBorder3 {
    border-right: 1px solid #000000;
}

.tdBorder4 {
    border-left: 1px solid #000000;
}