/**
  * default.css
  * Ontowiki main style sheet, advanced theme
  * @author: Michael Haschke
  * @version: $Id: $

    CONTENT
    
    1. Layout
        1.1. Positions
        1.2. Windows
            1.2.1. Drop Down Menu
            1.2.2. Context Menu
            1.2.3. Tabs
            1.2.4. Content
                1.2.4.1. Inner Windows
        1.3. Generic Layout Helpers
            1.3.1. Marker
            1.3.2. Message Boxes
    2. Typography
        2.1. Headings
        2.2. Lists
            2.2.1. Bullets and Numbers
            2.2.2. Separations
        2.3. Standard margins and Paddings
        2.4. Images
        2.5. Links
        2.6. Tables
            2.6.1. Separations and Spacings
    3. Forms
        3.1. Buttons
        3.2. Input Fields
        3.3. Selects
        3.4. Grouping Form Elements
    4. Javascript Enhancements
        4.1. Windows
            4.1.1. Context Menu (Elements)
            4.1.2. Drop Down Menu
            4.1.3. Tabs
            4.1.4. Context Menu (Window)
        4.2. Context Enabled Elements
        4.3. Drag and Drop
        4.4. Resizer
    5. Etcetera

  */
  
@import url(default.dev.css);

/* 1. Layout ---------------------------------------------------------------- */


* {
    padding:0;
    margin:0;
}

body {
    font-family: sans-serif;
    line-height:1.5;
    background:url(./../images/layout-background-body.png) fixed no-repeat 97% 96% #eff9ff;
}

/* -- 1.1. Positions -------------------------------------------------------- */


div.section-mainwindows {
    position:static;
    width:auto;
    margin-left:17.5em;
}

div.section-sidewindows {
    position:absolute;
    width:17.5em;
    left:0;
    top:0;
}

/* -- 1.2. Windows ---------------------------------------------------------- */


div.window {
    font-size:0.8em;
    font-weight:500;
    color:#333;
    background-color:#f3f3f3;
    margin:1em 0.5em;
    position:relative;
    border:solid 1px #666;
    width:auto;
    overflow:hidden;
}

div.window .title {
    font-size:1em;
    font-weight:900;
    color:#fff;
    border-bottom:solid 1px #000;
    padding:0.3em 0.5em 0.2em 0.5em !important;
    margin:0 !important;
    line-height:1;
    background:url(../images/layout-windowtitle-gradient.png) repeat-x center #999;
}

div.window .title a {
    color:#fff;
    text-decoration:underline;
}
div.window .title a:focus, div.window .title a:hover {
    color:#07f;
}

/* ------ 1.2.1. Drop down menu --------------------------------------------- */

/* see clickmenu.css */

/* ------ 1.2.2. Context Menu ----------------------------------------------- */

div.window .contextmenu {
    background-color:transparent;
    border-top:solid 1px #000;
}

.contextmenu {
    background-color:#efefef;
    padding:1px;
}

.contextmenu ul, .contextmenu ol {
    list-style:none;
    margin-top:0;
    padding-top:0;
    margin-bottom:0;
    padding-bottom:0;
}
.contextmenu > ul, .contextmenu > ol {
    margin-left:0;
}

.contextmenu ul a, .contextmenu ol a, .contextmenu ul span, .contextmenu ol span {
    border:solid 1px transparent;
    display:block;
    color:#000;
    padding:0 0.5em;
}

.contextmenu ul a:hover, .contextmenu ol a:hover, .contextmenu ul span:hover, .contextmenu ol span:hover {
    border-color:#cdd7dd;
    background:url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}

hr.menusep, .contextmenu hr {
    border-top:solid 1px #ccc;
    border-bottom:solid 1px #fff;
    border-left-style:none;
    border-right-style:none;
    margin:0.5em 0.5em 0.5em 0.5em;
}

/* ------ 1.2.3. Window Tabs ------------------------------------------------ */

div.window .tabs {
    margin-top:0.5em;
    list-style:none;
    margin-left:0;
    padding:0 0.5em;
}

div.window .tabs li {
    float:left;
    white-space:nowrap;
}

div.window .tabs li a {
    display:block;
    position:relative;
    top:0.1em;
    border-color:#999;
    border-bottom-color:#666;
    border-width:1px 1px 0.1em 1px;
    border-style:solid;
    border-left-style:none;
    padding:0.5em 1em;
    text-decoration:none;
    color:#333;
    background:url(./../images/layout-tab-gradient.png) repeat-x bottom center #dfdfdf;
}
div.window .tabs li:first-child a {
    border-left-style:solid;
}

div.window .tabs li a:focus, div.window .tabs li a:hover {
    background-color:#eff9ff;
    text-decoration:underline;
}

div.window .tabs li.active a {
    border-color:#666;
    border-bottom:none;
    padding-bottom:0.6em;
    background:url(./../images/layout-tabactive-gradient.png) repeat-x top center #f2f2f2;
    z-index:1;
    color:#333;
    font-weight:bold;
}

/* ------ 1.2.4. Window Content --------------------------------------------- */

div.window .content {
    padding:0.25em 0.5em;
    width:auto;
    border:solid 1px transparent;
    border-top-style:none;
    overflow:auto;
    color:#333;
    clear:both;
    background:url(../images/layout-window-gradient.png) repeat-x top center #fff;
}
div.tabbed > .content {
    border-top:solid 1px #666;
}

body.javascript-off div.window div.window-buttons {
    display:none;
}

div.window span.sizer-vertical {
    display:none;
}

/* -------- 1.2.4.1. Inner Window in content -------------------------------- */

div.window div.has-innerwindows div.innercontent { /* content contains inner windows */
    width:70%;
    float:left;
    overflow:auto;
}

div.window .content div.innerwindows {
    width:29%;
    float:right;
    position:relative;
}

div.window .content .innerwindows .window {
    border-color:#ccc;
    font-size:1em;
    /*min-height:auto;*/ min-height:inherit;
}

div.window .content .innerwindows .window .title {
    background-color:#ddd;
    color:#000;
    border-color:#ccc;
    font-weight:normal;
}

/* -- 1.3. Generic layout helper -------------------------------------------- */

.width25, .width33, .width50, .width67, 
.width75, .width90, .width95, .width99
{
    min-width:inherit;
    max-width:inherit;
}

.width25 { width:25%; }
.width33 { width:33.3%; }
.width50 { width:50%; }
.width67 { width:66.6%; }
.width75 { width:75%; }
.width90 { width:90% !important; }
.width95 { width:95% !important; }
.width99 { width:99% !important; }

.width25.float-left  { width:24%; padding-right:1%; }
.width25.float-right { width:24%; padding-left:1%; }
.width33.float-left  { width:32.3%; padding-right:1%; }
.width33.float-right { width:32.3%; padding-left:1%; }
.width50.float-left  { width:49%; padding-right:1%; }
.width50.float-right { width:49%; padding-left:1%; }
.width67.float-left  { width:66.6%; padding-right:1%; }
.width67.float-right { width:65.6%; padding-left:1%; }
.width75.float-left  { width:74%; padding-right:1%; }
.width75.float-right { width:74%; padding-left:1%; }

.float-left { float:left; clear:none !important; overflow:hidden;}
.float-right { float:right; clear:none !important; overflow:hidden; }

.height-1line, .height-2lines, .height-3lines, .height-4lines, .height-5lines,
.height-6lines, .height-7lines, .height-8lines, .height-9lines, .height-10lines
{
    min-height:inherit;
    max-height:inherit;
}

.height-1line {height:1.5em;}
.height-2lines {height:3em;}
.height-3lines {height:4.5em;}
.height-4lines {height:6em;}
.height-5lines {height:7.5em;}
.height-6lines {height:9em;}
.height-7lines {height:10.5em;}
.height-8lines {height:12em;}
.height-9lines {height:13.5em;}
.height-10lines {height:15em;}

/* ---- 1.3.1. Marker ------------------------------------------------------- */

.even, tr.even td {
    background-color:transparent;
}

.odd, tr.odd td {
    background-color:#f6f6f6;
}

.marked, .selected, tr.marked td {
    background-color:#dee8ee !important;
    border-color:#cdd7dd !important;
}

.implicit {
    padding-left:16px;
    background-image:url(./../images/icon-implicit-mini.png);
    background-repeat:no-repeat;
    background-position:left center;
}

.system {
    padding-left:16px;
    background-image:url(./../images/icon-system-mini.png);
    background-repeat:no-repeat;
    background-position:left center;
}

.hidden {
    padding-left:16px;
    background-image:url(./../images/icon-hidden-mini.png);
    background-repeat:no-repeat;
    background-position:left center;
}



/* ---- 1.3.2. Message boxes ------------------------------------------------ */

.messagebox {
    width:auto;
    border:solid 1px #eee;
    background-color:#f6f6f6;
    padding:0.5em;
    margin-bottom:0.75em;
    overflow:hidden;
    display:block;
    float:none;
    clear:both;
}

.info {
    border-color:#eee;
    background-color:#f9f9f9;
    padding-left:26px;
    background:url(./../images/icon-info.png) no-repeat 5px 0.6em #f9f9f9;
}

.warning {
    background-color:#ffb;
    border-color:#eea;
    color:#000;
    padding-left:26px;
    background:url(./../images/icon-warning.png) no-repeat 5px 0.6em #ffb;
}

.error {
    border-color:#eaa;
    background-color:#fbb;
    color:#000;
    padding-left:26px;
    background:url(./../images/icon-error.png) no-repeat 5px 0.6em #fbb;
}

.success {
    border-color:#aea;
    background-color:#bfb;
    color:#000;
    padding-left:26px;
    background:url(./../images/icon-success.png) no-repeat 5px 0.6em #bfb;
}

.feed {
    color:#000;
    padding-left:26px;
    background:url(./../images/icon-feed.png) no-repeat 5px 0.6em #f6f6f6;
}

.content .feed h2 {margin-top:0;}

/* ------ 1.3.2.1. Status  bar ---------------------------------------------- */

.messagebox .statusline {
/*    width:50%;*/
    float:left;
    clear:left;
}

.messagebox .statustool {
    float:right;
    margin-left:2em;
    font-size:0.8em;
}

.messagebox .statustool ul {
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
}
.messagebox .statustool ul li {
    float:left;
}


/* 2. Typography ------------------------------------------------------------ */

/* -- 2.1. Headings --------------------------------------------------------- */

.content h1, .content h2, .content h3, .content h4, .content legend {
    color:#000;
    padding-left:0;
    margin-left:0;
    padding-right:1em;
    font-weight:normal;
}

.content h1 {
    margin-top:0.5em;
    margin-bottom:0.5em;
    font-size:1.5em;
}
.content h2, .content fieldset legend {
    margin-top:0.5em;
    margin-bottom:0.5em;
    font-size:1.5em;
}
.content h3, .content fieldset fieldset legend {
    margin-top:0.25em;
    margin-bottom:0.25em;
    font-size:1.25em;
}
.content h4, .content fieldset fieldset fieldset legend {
    margin-top:0.25em;
    margin-bottom:0.25em;
    font-size:1em;
    font-weight:bold;
}

/* -- 2.2. Lists ------------------------------------------------------------ */

ul, ol {
    margin-left:1.5em;
}

ul ol, ol ul, ul ul, ol ol {
    margin-left:1em !important;
}

/* ---- 2.2.1. Bullets and Numbers ------------------------------------------ */

.bullets-none {
    list-style-type:none;
    margin-left:0;
}

.bullets-disc {
    list-style-type:disc;
}

.bullets-square {
    list-style-type:square;
}

.bullets-decimal {
    list-style-type:decimal;
}

/* ---- 2.2.2. Separations -------------------------------------------------- */

ul.separated-vertical > li,
ol.separated-vertical > li {
    padding:0.1em 0;
    border-top:dotted 1px #ccc;
}
ul.separated-vertical > li:first-child,
ol.separated-vertical > li:first-child {
    border-top:none;
}

ul.separated-horizontal > li,
ol.separated-horizontal > li {
    display:inline;
    padding-left:0.5em;
    padding-right:0.4em;
    border-left:dotted 1px #ccc;
}
ul.separated-horizontal > li:first-child,
ol.separated-horizontal > li:first-child {
    padding-left:0;
    border-left:none;
}

/* -- 2.3. Standard margins and paddings ------------------------------------ */

.display-block,
p
{
    display:block;
    width:auto;
    margin-bottom:0.5em;
}   

/* -- 2.4. Images ----------------------------------------------------------- */

img {
    border:none;
    vertical-align:baseline;
}

table img {
    vertical-align:top;
}

img.boxed {border:solid 1px #333;}

img.clickicon, a.clickicon img {
    margin:0;
    padding:0;
    line-height:1;
    vertical-align:middle;
    min-height:1em;
    max-height:1.2em;
}

img.valuationicon, a.valuationicon img {
    margin:0;
    padding:0;
    line-height:1;
    vertical-align:middle;
    min-height:1em;
    max-height:1em;
}
/* -- 2.5. Links ------------------------------------------------------------ */

a {
    color:#07c;
    text-decoration:none;
}
a:focus, a:hover {
    color:#07f;
    text-decoration:underline;
}

a img.boxed { border-color: #07c; }
a:focus img.boxed, a:hover img.boxed { border-color: #07f; }

a.clickicon img, a img.clickicon {
    opacity:0.6;
}
a.clickicon:focus img, a:focus img.clickicon, a.clickicon:hover img, a:hover img.clickicon {
    opacity:1;
}

/* -- 2.6. Tables ----------------------------------------------------------- */

table {
    background-color:transparent;
    width:99%;
    margin-bottom:1em;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
    caption-side:top;
    table-layout:auto;
}

th, td {
    padding:0.2em;
    text-align:left;
    border-style:none;
    border-width:0;
}

th {font-weight:bold;}
td {font-weight:normal;}

table.backgrounded thead th, thead.backgrounded th
{
    background-color:#666;
    color:#fff;
}
table.backgrounded td {
    background-color:#eee;
}
table.backgrounded tr.odd td {
    background-color:#f6f6f6;
}


table caption {
    margin:0.25em 0;
    font-size:1em;
    font-weight:bold;
    color:#333;
    text-align:left;
}

/* ---- 2.6.1. Separations -------------------------------------------------- */

table.separated-vertical td {
    border-top:dotted 1px #ccc;
}
table.separated-vertical tr:first-child  td {
    border-top:none;
}
table.separated-vertical tbody tr:first-child td {
    border-top:solid 1px #aaa;
}
table.separated-vertical tbody:first-child tr:first-child td,
table.separated-vertical caption + tbody tr:first-child td,
table.separated-vertical thead + tbody tr:first-child td,
table.separated-vertical colgroup + tbody tr:first-child td {
    border-top:none;
}
table.separated-vertical th {
    border-bottom:solid 1px #aaa;
}

table.separated-horizontal th,
table.separated-horizontal td {
    border-left:dotted 1px #ccc;
}
table.separated-horizontal tr th:first-child,
table.separated-horizontal tr td:first-child {
    border-left:none;
}

table.spaced-vertical th,
table.spaced-vertical td {
    border-top:solid 2px #fff;
}
table.spaced-horizontal th,
table.spaced-horizontal td {
    border-right:solid 2px #fff;
}

/* -- 2.7. Icon buttons ----------------------------------------------------- */

.icon-button {
    display:block;
    float:left;
    clear:left;
    height:1em;
    width:16px;
    vertical-align:bottom;
    background-repeat:no-repeat;
    background-position:center;
    background-color:transparent;
    overflow:hidden;
    color:transparent;
    cursor:pointer;
    line-height:0.1;
    margin-top:0.25em;
    margin-right:0.2em;
}

.expand {
    background-image:url(./../images/icon-toggle-plus.png);
    width:10px;
}
.deexpand {
    background-image:url(./../images/icon-toggle-minus.png);
    width:10px;
}

/* 3. Forms ----------------------------------------------------------------- */

form {
    font-size:1em;
}

/* -- 3.1. Buttons ---------------------------------------------------------- */

/*
   Created by Kevin Hale [particletree.com]
   * particletree.com/features/rediscovering-the-button-element
*/

/* Button standard */
a.formbutton, button, input.formbutton,
div.window .content a.button, div.window .content input.button, /* !!DEPRECATED!! only for back compatibility in 0.8 */
input.button,
input.submit,
input.reset,
ul.minibutton li a,
li.minibutton a,
a.minibutton
{
  display:block;
  float:left;
  
  margin:0 0.6em 0.7em 0;
  padding:0.35em 0.7em 0.3em 0.7em;   /* Links */
  
  border-style: double;
  border-width: 3px;
  border-right-color: #999;
  border-bottom-color: #999;
  border-left-color: #ccc;
  border-top-color: #ccc;

  background:url(./../images/layout-button-menu-gradient.png) repeat-x top center #eee;
  color:#333;

  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size:1em;
  line-height:1.3;
  text-decoration:none;
  font-weight:normal;

  cursor:pointer;
}
button {
  width:auto;
  overflow:visible;
  white-space:nowrap;
}
button,
input.formbutton,
input.button,
input.submit,
input.reset
{
  padding:0.3em 0.5em 0.3em 0.5em;   /* Firefox */
  /* line-height:1.7; */          /* Safari */
  white-space:nowrap;
}


/* Minibuttons */
ul.minibutton li a,
li.minibutton a,
a.minibutton
{
    border-style:solid;
    border-width:1px;
    margin:0 0.3em 0.35em 0;
    padding:0.15em 0.5em 0.1em 0.5em;   /* Links */
}

/* Button mouse over */
a.formbutton:hover, a.formbutton:focus, button:hover, input.formbutton:hover,
div.window .content a.button:hover, div.window .content a.button:focus, /* !!DEPRECATED!! only for back compatibility in 0.8 */
input.button:hover,
input.submit:hover,
input.reset:hover,
ul.minibutton li a:hover,
li.minibutton a:hover,
a.minibutton
{
    border-right-color: #9aa6aa;
    border-bottom-color: #9aa6aa;
    border-left-color: #cdd7dd;
    border-top-color: #cdd7dd;
    color:#333;
    background:url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}

/* Button focused */
a.formbutton:active, button:focus, input.formbutton:focus,
div.window .content a.button:active, /* !!DEPRECATED!! only for back compatibility in 0.8 */
input.button:focus,
input.submit:focus,
input.reset:focus,
ul.minibutton li a:focus,
li.minibutton a:focus,
a.minibutton:focus
{
    border-left-color: #9aa6aa;
    border-top-color: #9aa6aa;
    border-right-color: #cdd7dd;
    border-bottom-color: #cdd7dd;
    color:#333;
    background:url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}

div.window .content a.button img,
button img, a.formbutton img {
  margin:0;
  padding:0;
  border:none;
  min-height:1em;
  max-height:1.2em;
  line-height:1;
  vertical-align:bottom;
}

/* Positive */

/* Negative */


/* -- 3.2. Input fields ----------------------------------------------------- */

input.text,
input.password,
input.checkbox,
input.radio,
textarea
{
    display:inline-block;
    border-left-color: #888;
    border-top-color: #888;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    border-style:solid;
    border-width:1px;
    margin:0;
    vertical-align:baseline;
    line-height:1;
    padding:2px;
    font-family:sans-serif;
    font-size:1.1em;
    font-weight:normal;
    color:#333;
    background:url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #f6f6f6;
}
table.edittable input.text,
table.edittable textarea {
    font-size:1em;
    margin-bottom:0.5em;
    vertical-align:text-top;
    min-width:inherit;
    min-height:inherit;
}

.no-min-width input,
.no-min-width textarea,
.no-min-width select {
    min-width:inherit;
}
.no-max-width input,
.no-max-width select {
    max-width:inherit;
}
.no-min-height textarea {
    min-height:inherit;
}

input.text, input.password
{
    min-width:10em;
}

input.checkbox, input.radio
{
    width:0.9em !important;
    height:0.9em !important;
    /*min-width:auto;*/ min-width:inherit;
    vertical-align:middle;
    color:#07c;
    padding:0;
    font-weight:bold;
    background:transparent;
    border-style:none;
}

textarea {
    min-width:30em;
    min-height:18.5em;
    padding:0;
    line-height:1.5;
    font-size:1em;
}

input:hover, textarea:hover {
    background-color:#eff9ff;
    color:#000;
}
input:focus, textarea:focus, select:focus, select:hover {
    background:#fff;
    color:#000;
}

/* -- 3.3. Selects ---------------------------------------------------------- */

select {
    min-width:20em;
    font-size:1em;
    max-width:20em;
    background:#f9f9f9;
    color:#000;
    display:inline-block;
    border-left-color: #888;
    border-top-color: #888;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    border-style:solid;
    border-width:1px;
    margin-bottom:0.5em;
    vertical-align:middle;
}
select.multiselect, select[multiple="multiple"], select.multiple {
    vertical-align:text-top;
    max-height:32em;
}
table.edittable select {
    min-width:inherit;
}

select optgroup {
    color:#000;
    font-weight:bold;
    font-style:normal;
    margin:0;
}
select:hover optgroup, select:focus optgroup {
    color:#07c;
}
select option {
    color:#000;
    padding:0;
    border:none; 
}
select.bigsize optgroup {
    margin-bottom:0.25em;
}
select.bigsize option {
    padding:0.1em 1em;
    border:solid 1px transparent; 
}
select option:hover {
    border-color:#cdd7dd;
    background:url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}
select option:focus, select option[selected]:focus {
    border-color:#07c;
    background:url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #07f;
}


/* -- 3.4. Grouping form elements ------------------------------------------- */

legend {
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

fieldset {
    border-style:none;
    border-width:0;
    margin-top:1em;
    margin-bottom:1em;
    padding-top:.5em;
    clear:both;
    float:none;
}

fieldset fieldset {
    border-top-style:solid;
    border-color:#999;
    border-width:1px;
    margin-top:0.75em;
    margin-bottom:0.75em;
    padding-top:.5em;
}

fieldset fieldset fieldset {
    border-style:dotted;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding-top:0.5em;
    padding-bottom:0.75em;
    padding-left:0.75em;
}

div.row-input, form.row-input div {
    padding:0.25em 0;
    border-width:1px 0;
    border-style:solid;
    border-color:transparent;
    background-color:transparent;
    overflow:hidden;
}
div.row-input:hover,
form.row-input div:hover,
tr.row-input:hover td,
table.edittable tr:hover td
{
    border-color:#ddd;
    background-color:#f0f0f0;
    border-style:solid;
}
div.row-input:focus, div.row-input:active,
form.row-input div:focus, form.row-input div:active,
tr.row-input:focus td, tr.row-input:active td,
table.edittable tr:focus td, table.edittable tr:active td
{
    border-color:#cdd7dd;
    background-color:#eff9ff;
}

div.input-justify-left,
form.input-justify-left div {
    clear:both;
}
div.input-justify-left label, div.input-justify-left textarea, div.input-justify-left select, div.input-justify-left input,
form.input-justify-left div label, form.input-justify-left div textarea, form.input-justify-left div select, form.input-justify-left div input
{
    display:block;
    float:left;    
    margin-right:2%;
}
.width50 div.input-justify-left label, .width50 div.input-justify-left select,
form.input-justify-left div.width50 label, form.input-justify-left div.width50 select
{
    margin-right:4%;
}

div.input-justify-left label,
form.input-justify-left div label {
    width:25%;
    text-align:right;
    padding-top:0.3em;
    overflow:hidden;
}
.width50 div.input-justify-left label,
form.input-justify-left div.width50 label {
    width:35%;
}
div.input-justify-left label.checkboxradio,
form.input-justify-left div label.checkboxradio {
    width:65%;
    margin-right:0;
    text-align:left;
}
.width50 div.input-justify-left label.checkboxradio,
form.input-justify-left div.width50 label.checkboxradio {
    width:55%;
}
div.input-justify-left input.checkbox,
form.input-justify-left div input.checkbox,
div.input-justify-left input.radio,
form.input-justify-left div input.radio {
    margin-top:0.4em;
    margin-right:0.5em;
    margin-left:27%;
}
.width50 div.input-justify-left input.checkbox,
form.input-justify-left div.width50 input.checkbox,
.width50 div.input-justify-left input.radio,
form.input-justify-left div.width50 input.radio {
    margin-left:39%;
}

div.input-justify-left input,
form.input-justify-left div input {
    width:40%;
}
div.input-justify-left select,
form.input-justify-left div select {
    margin-top:0.2em;
}
.width50 div.input-justify-left input, .width50 div.input-justify-left select,
form.input-justify-left div.width50 input, form.input-justify-left div.width50 select {
    width:55%;
}
div.input-justify-left textarea,
form.input-justify-left div textarea {
    width:55%;
}

div.input-justify-left .messagebox,
form.input-justify-left div .messagebox {
    margin-left:27%;
    margin-right:13%;
}
.width50 div.input-justify-left .messagebox,
form.input-justify-left div.width50 .messagebox {
    margin-left:39%;
    margin-right:1%;
}

div.actionbuttons {
    padding:1em 0 1em 27% !important;
    border:none !important;
    background-color:transparent !important;
    overflow:inherit !important;
}
.width50 div.actionbuttons {
    padding-left:39% !important;
}
div.actionbuttons * {
    float:none !important;
}


/* 4. Javascript Enhancements ----------------------------------------------- */

/* -- 4.1. Windows ---------------------------------------------------------- */

body.javascript-on div.is-minimized .title {
    position:static;
    margin-bottom:0 !important;
    border-bottom:none !important;
}
body.javascript-on .has-menu.is-minimized > .title {
    margin-bottom:0 !important;
}

body.javascript-on div.is-minimized .content,
body.javascript-on div.is-minimized .contextmenu,
body.javascript-on div.is-minimized span.sizer-vertical,
body.javascript-on div.is-minimized .tabs,
body.javascript-on div.is-minimized .cmDiv,
body.javascript-on div.is-minimized .cmDiv *,
body.javascript-on div.is-minimized ul.menu
{
    display:none !important;
}

body.javascript-on div.is-disabled {
    display:none !important;
}

/* ---- 4.1.1. Context Menu ------------------------------------------------- */

body.javascript-on div.window .contextmenu {
    position:absolute;
    left:-5000em;
}

div.contextmenu-enhanced .contextmenu {
    border:solid 1px #ddd;
    position:absolute;
    font-size:0.8em;
    top:0;
    left:0;
    line-height:1;
    min-width:15em;
}

div.contextmenu-enhanced .contextmenu li a, div.contextmenu-enhanced .contextmenu li span {
    padding:0.3em 1em;
    text-decoration:none;
    color:#000;
}

div.contextmenu-enhanced .button-windowclose {
    background-color:#efefef;
    right:-1em;
    top:-1px;
    border-color:#ddd;
    border-left-color:transparent;
}

div.contextmenu-enhanced .button:hover {
    background-color:#eff9ff;
    border-color:#dee8ee;
    border-left-color:transparent;
}

/* ---- 4.1.2. Window Menu -------------------------------------------------- */

body.javascript-on .has-menu > div.cmDiv {
    position:absolute;
    width:100%;
    top:1.5em;
}

body.javascript-on .has-menu > .title {
    margin-bottom:1.9em !important;
}

body.javascript-on .has-menu > .tabs {
    margin-top:2.4em;
}

/* ---- 4.1.3 Content Tabs -------------------------------------------------- */

body.javascript-on div.window .content .tabtitle {
    position:absolute;
    left:-5000em;
}

body.javascript-on .tabbed > .content {
    position:absolute;
    left:-5000em;
}

body.javascript-on div.window .activetabcontent {
    position:relative !important;
    left:auto !important;
}

/* ---- 4.1.4. Context Menu ------------------------------------------------- */

body.javascript-on div.window-buttons {
    display:block;
    position:static;
}

body.javascript-on div.window-buttons div.window-buttons-left {
    position:absolute;
    left:0.25em;
    top:0.25em;
}

body.javascript-on div.window-buttons div.window-buttons-right {
    position:absolute;
    right:0.25em;
    top:0.25em;
}

body.javascript-on div.window-buttons div.window-buttons-left .button {
    float:left;
}

body.javascript-on div.window-buttons div.window-buttons-right .button {
    float:right;
}

/*  div.windowbuttonscount-left|right-x :
    x - number of buttons which are left or right in window title
*/
body.javascript-on div.windowbuttonscount-left-1 .title {
    padding-left:1.5em !important;
}
body.javascript-on  div.windowbuttonscount-left-1 div.window-buttons-left {
    width:1em !important;
}
body.javascript-on div.windowbuttonscount-left-2 .title {
    padding-left:2.5em !important;
}
body.javascript-on  div.windowbuttonscount-left-2 div.window-buttons-left {
    width:2em !important;
}
body.javascript-on div.windowbuttonscount-left-3 .title {
    padding-left:3.5em !important;
}
body.javascript-on  div.windowbuttonscount-left-3 div.window-buttons-left {
    width:3em !important;
}

body.javascript-on div.windowbuttonscount-right-1 .title {
    padding-right:1.5em !important;
}
body.javascript-on  div.windowbuttonscount-right-1 div.window-buttons-right {
    width:1em !important;
}
body.javascript-on div.windowbuttonscount-right-2 .title {
    padding-right:2.5em !important;
}
body.javascript-on  div.windowbuttonscount-right-2 div.window-buttons-right {
    width:2em !important;
}
body.javascript-on div.windowbuttonscount-right-3 .title {
    padding-right:3.5em !important;
}
body.javascript-on  div.windowbuttonscount-right-3 div.window-buttons-right {
    width:3em !important;
}

body.javascript-on div.window-buttons .button, div.contextmenu-enhanced .button {
    font-size:1em;
    display:block;
    position:static;
    height:0.9em;
    width:0.9em;
    background-color:transparent;
    border:solid 1px transparent;
    padding:0;
    margin:0;
    cursor:pointer;
}

body.javascript-on div.window-buttons .button-contextmenu {
    background:url(../images/button-contextmenu.png) no-repeat center transparent;
}

body.javascript-on div.window-buttons .button-windowrestore {
    background:url(../images/button-windowrestore.png) no-repeat center transparent;
}

body.javascript-on div.window-buttons .button-windowminimize {
    background:url(../images/button-windowminimize.png) no-repeat center transparent;
}

body.javascript-on div.window-buttons .button-windowclose {
    background:url(../images/button-windowclose.png) no-repeat center transparent;
}

body.javascript-on div.window-buttons .button:hover, div.contextmenu-enhanced .button:hover {
    border-color:#fff;
}

/* -- 4.2. Context Enabled Elements ----------------------------------------- */

body.javascript-on .has-contextmenus-block a {
    display:block;
    position:relative;
    border:solid 1px transparent;
}

body.javascript-on .has-contextmenus-block a span.button
{
    display:block;
    position:absolute;
    right:5000em;
    top:0;
    height:100%;
    width:15px;
    background:url(./../images/button-drop-down.png) no-repeat center #999;
    margin:0;
    padding:0;
    border-style:none;
    border-left:solid 1px #999;
}

body.javascript-on .has-contextmenus-block a.Resource:hover,
body.javascript-on .has-contextmenus-block a.Resource:focus,
body.javascript-on .has-contextmenus-block a.has-contextmenu:hover,
body.javascript-on .has-contextmenus-block a.has-contextmenu:focus
{
    border-color:#999;
}

body.javascript-on .has-contextmenus-block a.Resource:hover span.button,
body.javascript-on .has-contextmenus-block a.Resource:focus span.button,
body.javascript-on .has-contextmenus-block a.Resource:active span.button,
body.javascript-on .has-contextmenus-block a.has-contextmenu:hover span.button,
body.javascript-on .has-contextmenus-block a.has-contextmenu:focus span.button,
body.javascript-on .has-contextmenus-block a.has-contextmenu:active span.button
{
    right:0;
}

/* -- 4.3. Drag and Drop ---------------------------------------------------- */

.dropactive {
    display:inline-block;
    padding:0.1em;
	background-color:#ffb;
	color:#333 !important;
}
.drophover {
    color:#fff !important;
    padding:0.25em 0.5em !important;
	background-color:#c00 !important;
	z-index:500;
    font-weight:bold;
}

/* -- 4.4. Resizer ---------------------------------------------------------- */

body.javascript-on .section-sidewindows span.sizer-horizontal {
    display:block;
    position:absolute;
    top:0;
    right:-0.25em;
    width:0.5em;
    height:100%;
    background:transparent;
    cursor:e-resize;
    background:transparent;
}

body.javascript-on .section-sidewindows span.sizer-horizontal:hover {
    background:url(./../images/button-sizer-horizontal.png) no-repeat center #dee8ee;
}

body.javascript-on div.has-sizer span.sizer-vertical {
    display:block;
    position:absolute;
    bottom:0;
    width:100%;
    height:0.25em;
    background-color:transparent;
    border-bottom:solid 1px #666;
}
body.javascript-on div.has-sizer span.sizer-vertical:hover {
    /*background-color:#dee8ee;*/
    cursor:s-resize;
}

/* -- 4.5. Processing ------------------------------------------------------- */

.is-processing * {
    visibility:hidden !important;
    cursor:wait !important; 
}

.is-processing > .title,
.is-processing > .tabs
{
    visibility:visible !important;
}

.is-processing {
    background-image:url(./../images/spinner.gif) !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    cursor:wait !important;
    min-height:100px;
}

input.is-processing {
    background-image:url(./../images/spinner.gif) !important;
    background-position:right !important;
    background-repeat:no-repeat !important;
    cursor:wait !important;
    min-height: 0;
}

/* 5. Etcetera -------------------------------------------------------------- */

.hide {display:none !important;}
.onlyAural {position:absolute !important; left:-5000em !important;}

.clearall {
    float:none;
    clear:both;
    border-style:none !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
    height:0.1%;
    line-height:0.1;
    overflow:inherit !important;
}

.clearfloat {
    float:none;
    clear:both;
}

/* -------------------- Hierarchy ------------------------------ */
a.tree-node-toggle
{
	float: left;
    background-repeat:no-repeat;
    background-position:center;
	width: 9px;
	height: 1.5em;
	margin-right:0.25em;
	clear:left;
}

a.tree-closed {
	
	background-image: url(./../images/tree_closed.png);
	/* must code out code writte by bloody beginners :)
	float: left;
	width: 9px;
	height: 9px;
	margin: .4em .3em 0 0;
	*/
}

a.tree-closed:hover {
	
	background-image: url(./../images/tree_closed_hover.png);
}

a.tree-open {
	
	background-image: url(./../images/tree_open.png);
}

a.tree-open:hover {
	
	background-image: url(./../images/tree_open_hover.png);
}

span.tree-none {
	
	float: left;
	width: 9px;
	height: 1.5em;
	margin-right: 0.25em;
	clear:left;
	background-image: url(./../images/tree_none.png);
    background-repeat:no-repeat;
    background-position:center;
    /*
	width: 9px;
	height: 9px;
	margin: .4em .3em 0 0;
	*/
}

.tree-is-processing {
    background-image:url(./../images/spinner.gif) !important;
    background-position: left center !important;
    background-repeat:no-repeat !important;
    cursor:wait !important;
	height: 25px;
	width: 100%;
}