/**
  * default.css
  * Ontowiki main style sheet, advanced theme
  * @author: Michael Haschke
  * @version: $Id: default.css 4249 2009-10-06 12:47:39Z jonas.brekle@gmail.com $

    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.2.5. Versatile Windows and Popups
        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.2.1. Inline Context Menus
            4.2.2. Area Context Menus
        4.3. Drag and Drop
        4.4. Resizer
        4.5. Processing state
        4.6. Edit
        4.7. Tables
    5. Etcetera

  */
  
/* @import url('default.dev.css'); - included extra with debug modus */

/* 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;
    font-size:16px; /* same font-size for all browsers */
}

/* -- 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;
}

div.modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./../images/layout-background-black-20.png) fixed repeat transparent;
    z-index: 10000;
}

/* -- 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;*/ /* this is now set on the window content instead */
}

div.window .title {
    font-size: 1em;
    font-weight: 900;
    color: #fff;
    border-bottom: solid 1px #666;
    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: none;
}

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

/* ------ 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.25em 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 .slidehelper {
    overflow: hidden;
}

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 > .slidehelper > .content {
    border-top: solid 1px #666;
}

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

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

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

div.window div.has-innerwindows div.innercontent { /* content contains inner windows */
    width: 70%;
    padding-top: 1em;
    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;
}

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

/* -- 1.2.5. Versatile windows and popups ----------------------------------- */

/**
 * Versatile windows and popups
 *
 * @since 0.9.5
 *
 * @option .shadowed versatile window get a shadow in the back
 * @option .centered versatile window will be shown appr. centered
 *
 * <div class="overlay"></div> <!-- optional -->
 * <div class="versatile shadowed centered">
 *     ###CONTENT###
 * </div>
 *
 * use inline styles for height/width (and negative margins for centered option)
 * on the div.versatile
 *
 */
 
/* option- overlay background to prevent interaction with other elements from behind */

div.overlay
{
    position:absolute;
    z-index:999;
    height:100%; width:100%;
    top:0; left:0;
    background-color:#fff;
    opacity:0.5;
}

/* versatile window */

div.versatile
{
    position:absolute;
    width:20em;
    z-index:1000;
}

/* shadow option */

div.versatile.shadowed
{
    padding:10px;
    background:rgba(204, 204, 204, 0.5); /* #ccc */
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

div.versatile.shadowed > *
{
    margin:0 !important;
}

/* do not use .shadow element, I just let it here as workaround idea for the IE */
div.versatile.shadowed > .shadow
{
    display:block;
    position:absolute; top:0; left:0; 
    width:100%; height:100%;
    background-color:#ccc;
    opacity:0.5;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

/* center option */

div.versatile.centered
{
    top:25%;
    left:50%; margin-left:-10em;
}

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

.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; }

.width98 { width: 98% !important; }

.width99 { width: 99% !important; }

.width100 { width: 100% !important; }

.width-auto { width: auto !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; }

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

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

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

.marked, tr.list-selected td, .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;
}

.search {
    border-color: #eee;
    background-color: #f9f9f9;
    padding-left: 26px;
    background: url(./../images/icon-search.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 .statustool {
    float: left;
    margin-left: 2em;
}

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

.messagebox .statustool ul li {
    float: left;
}

.statusbar {
    margin-bottom: 0;
}

.toolbar {
    float: right;
    font-size: 0.9em;
}


/* 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 {
    list-style-position: outside;
    margin-left: 1em;
}

ul ol, ol ul, ul ul, ol ol {
    list-style-position: inside;
    /* margin-left: 1em !important; cannot see any sense for this anymore (mh) */
}

/* ---- 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. Horizontal/Inline lists -------------------------------------- */

/**
 * Inline lists (items aligned horizontally inline)
 * @deprecated 0.9.5
 *
 * - Usage: <ul class="inline">[...]</ul>
 */
ul.inline, ol.inline
{
    list-style:none;
    margin-left:0;
}

ul.inline li, ol.inline li
{
    display:inline-block;
    margin-right:1em;
}


/* ---- 2.2.3. Separations -------------------------------------------------- */

/**
 * Vertically separated lists -- old solution
 * @deprecated 0.9.5
 *
 * - please use just <ul class="separated">...</ul>
 */
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;
}
/* for nested lists we want a upper border */
ul.separated-vertical > li:first-child ol.separated-vertical > li:first-child, 
ol.separated-vertical > li:first-child ul.separated-vertical > li:first-child, 
ul.separated-vertical > li:first-child ul.separated-vertical > li:first-child, 
ol.separated-vertical > li:first-child ol.separated-vertical > li:first-child {
    border-top: dotted 1px #ccc;
}

/**
 * Vertically separated lists
 * @since 0.9.5
 *
 * - usage: <ul class="separated">...</ul>
 */
ul.separated > li,
ol.separated > li {
    padding: 0.1em 0;
    border-top: dotted 1px #ccc;
}
ul.separated > li:first-child,
ol.separated > li:first-child {
    border-top: none;
}
/* for nested lists we want a upper border */
ul.separated > li:first-child ol.separated > li:first-child, 
ol.separated > li:first-child ul.separated > li:first-child, 
ul.separated > li:first-child ul.separated > li:first-child, 
ol.separated > li:first-child ol.separated > li:first-child {
    border-top: dotted 1px #ccc;
}

/**
 * Horizontally separated lists -- old solution
 * @deprecated 0.9.5
 *
 * - please use just <ul class="inline separated">...</ul> or
 *   <ul class="inline">...</ul> for horizontal/inline lists without separation
 *   between items
 */
ul.separated-horizontal > li,
ol.separated-horizontal > li {
    display: inline-block;
    padding-right:0.5em;
    border-right: dotted 1px #ccc;
}

ul.separated-horizontal > li.last-child,
ol.separated-horizontal > li.last-child
{
	border-right: none;
}


/**
 * Horizontally separated lists
 * @since 0.9.5
 *
 * - Usage: <ul class="inline separated">...</ul>
 */
ul.inline.separated li, ol.inline.separated li
{
    display:inline-block;
    margin:0;
    padding:0;
    border-top:none !important;
}
ul.inline.separated li:after, ol.inline.separated li:after
{
    content:" • ";
    color:#ccc;
}
ul.inline.separated li:last-child:after, ol.inline.separated li:last-child:after,
ul.inline.separated li.last-child:after, ol.inline.separated li.last-child:after
{
    content:"" !important;
}

/**
 * Horizontally comma-separated lists
 * @since 0.9.5
 *
 * - Usage: <ul class="inline separated comma">...</ul>
 */
ul.inline.separated.comma li:after, ol.inline.separated.comma li:after
{
    content:", ";
    color:#333;
}

/* -- 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: middle;
}

img.object {
    max-width: 10em;
}

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;
}

/* -- 2.4.1. Icons ---------------------------------------------------------- */

/**
 * Icon
 * should be work with most inline and block elements
 *
 * @since 0.9.5
 *
 * <span class="icon icon-####"></span> Text
 * <a class="icon icon-####" title="Actionname"><span>Actionname</span></a>
 */

.icon
{
    display:inline-block;
    line-height:1;
    padding:0; margin:0;
    font-size:16px !important; /* as long we cannot use svg */
    height:1em;
    width:1em;
    vertical-align:text-bottom;
    background-color:transparent;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url(./../images/icons/icon-not-available.png);
}

.icon span
{
    position:absolute;
    left:-5000em;
}

.icon-cancel { background-image:url(./../images/icons/cancel.png); }
.icon-close  { background-image:url(./../images/icons/close.png); }
.icon-delete { background-image:url(./../images/icons/delete.png); }
.icon-edit   { background-image:url(./../images/icons/edit.png); }
.icon-list   { background-image:url(./../images/icons/list.png); }
.icon-save   { background-image:url(./../images/icons/save.png); }

.icon-arrow-first    { background-image:url(./../images/icons/arrow-first.png); }
.icon-arrow-last     { background-image:url(./../images/icons/arrow-last.png); }
.icon-arrow-next     { background-image:url(./../images/icons/arrow-next.png); }
.icon-arrow-previous { background-image:url(./../images/icons/arrow-previous.png); }
.icon-arrow-top      { background-image:url(./../images/icons/arrow-top.png); }
.icon-arrow-up       { background-image:url(./../images/icons/arrow-up.png); }
.icon-arrow-down     { background-image:url(./../images/icons/arrow-down.png); }
.icon-arrow-bottom   { background-image:url(./../images/icons/arrow-bottom.png); }

/* -- 2.5. Links ------------------------------------------------------------ */

a {
    color: #07c;
    text-decoration: none;
    cursor: pointer;
}

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;
}

a.externalLink {
    background: url(./../images/icon-ext-link.png) no-repeat scroll right center transparent;
    padding: 10px 10px 0 0;
}

/* -- 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 0.6em;
    text-align: left;
    border-style: none;
    border-width: 0;
    vertical-align: top;
}

th.selector, td.selector {
	width: 1em;
	text-align: left;
	vertical-align: text-top;
	padding-right: 0.5em;
}

th.enumeration, td.enumeration {
	width: 2em;
	text-align: right;
	padding-right: 0.5em;
}

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 tbody {
    border-style:solid none;
    border-color:#aaa;
    border-width:1px;
}

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 th,
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-vertical tr.grouptitle th { border-bottom: none; }

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: 7px;
    margin-right: 0.5em;
}

.collapse {
    background-image: url(./../images/icon-toggle-minus.png);
    width: 7px;
    margin-right: 0.5em;
}

/* 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;*/
  display:inline-block;
  /*float: left;*/
  
  margin: 0 0.35em 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;
}

button,
input.formbutton,
input.button,
input.submit,
input.reset {

  padding: 0.3em 0.5em 0.3em 0.5em;   /* Firefox */
  /* line-height: 1.7; */          /* Safari */
}


/* Minibuttons */
ul.minibutton li a,
li.minibutton a,
a.minibutton {

    border-style: solid;
    border-width: 1px;
    margin: 0 0.15em;
    padding: 0.15em 0.5em;   /* Links */
    font-size: 0.85em;
}

/* 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:hover {

    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 mouse over */
a.formbutton:hover.selected, a.formbutton:focus.selected, button:hover.selected, input.formbutton:hover.selected,
div.window .content a.button:hover.selected, div.window .content a.button:focus.selected, /* !!DEPRECATED!! only for back compatibility in 0.8 */
input.button:hover.selected,
input.submit:hover.selected,
input.reset:hover.selected,
ul.minibutton li a:hover.selected,
li.minibutton a:hover.selected,
a.minibutton:hover.selected {

    border-right-color: #9aa6aa;
    border-bottom-color: #9aa6aa;
    border-left-color: #cdd7dd;
    border-top-color: #cdd7dd;
    color: #333;
    cursor: default;
    background: url(./../images/layout-button-menu-gradient.png) repeat-x top center #eee;
}

/* Button focused */
a.active, 
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-right-color: #cdd7dd !important;
    border-bottom-color: #cdd7dd !important;
    border-left-color: #9aa6aa !important;
    border-top-color: #9aa6aa !important;
    color: #333;
    background: url(./../images/layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}

/* Button disabled */
a.formbutton.disabled, button.disabled, input.formbutton.disabled,
input.button.disabled,
input.submit.disabled,
input.reset.disabled,
ul.minibutton li a.disabled,
li.minibutton a.disabled,
a.minibutton.disabled,
 
a.formbutton.disabled:active, button.disabled:focus, input.formbutton.disabled:focus,
input.button.disabled:hover,
input.submit.disabled:hover,
input.reset.disabled:hover,
ul.minibutton li a.disabled:hover,
li.minibutton a.disabled:hover,
a.minibutton.disabled:focus {

	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #ccc;
	border-top-color: #ccc;
	color: #333;
	opacity: 0.5;
	cursor: default;
/*  background: url(./../images/layout-button-menu-gradient.png) repeat-x top center #eee;*/
}

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;
}

.separator {
	width: 0.4em;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* 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 select {
    min-width: inherit;
}

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

input.text, input.password {

    min-width: 10em;
}

input.checkbox, input.radio {

    width: 0.9em !important;
    height: 0.9em !important;
    min-width: auto;
    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;
}

textarea.code-input {
	font-family: monospace;
	background: none;
	min-height: 15em;
	font-size: 1.1em;
}

/* -- 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: 0.5em;
    margin-bottom: 1em;
    padding-top: 0.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.simple-input, form.simple-input div {
    padding: 0.25em 0;
    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 {
    margin-left: 27%;
    width: 75%;
    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.2em;
    margin-right: 0.5em;
}

.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: 60%;
}

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;
}

/*.toolbar .button {
    text-align: center;
    border-width: 1px !important;
}

.toolbar .button img {
    display: block;
    margin: 0 auto !important;
}

.toolbar .button span {
    font-size: 0.9em !important;
}*/


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

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

body.javascript-on div.is-minimized .title {
    display: block;
    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.resizer-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 > div.cmDiv {
    position: absolute;
    width: 100%;
    top: 1.54em; /* 1.5em */
}

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

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

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

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

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

body.javascript-on div.window .active-tab-content {
    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 ----------------------------------------- */

.has-contextmenus-block a {
    display: block;
    position: relative;
    /*border: solid 1px transparent;*/
}

.has-contextmenus-block a span.button {

    line-height:1;
    display: block;
    position: absolute;
    right: 5000em;
    top: 0;
    height: 100%;
    width: 1.5em;
    background: url(./../images/icons/context.png) no-repeat center #666;
    margin: 0;
    padding: 0;
    border-style: none;
    /*border-left: solid 1px #999;*/
    border-radius:0.25em;
    -moz-border-radius:0.25em;
    -webkit-border-radius:0.25em;
    opacity:0.5;
}

.has-contextmenus-block a.Resource:hover,
.has-contextmenus-block a.Resource:focus {
    /*border-color: #999;*/
    background-color:#EFF9FF;
}

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

.has-contextmenus-block span.button:hover
{
    opacity:1;
}

/* -- 4.2.1 Inline Context Menus ---------------------------------------------- */

a.hasMenu {
    position: relative;
    /*white-space:nowrap;*/
}

a.hasMenu span.toggle {
    line-height:1;
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    /* border: solid 1px #999; */
    right: -0.625em;
    top: 0;
    /*background: url(./../images/icons/context.png) no-repeat center rgba(85, 85, 85, 0.5);*/
    background: url(./../images/icons/context.png) no-repeat center #999;
    background-color:rgba(85, 85, 85, 0.5);
    opacity:0.75;
    border-radius:0.2em;
    -moz-border-radius:0.2em;
    -webkit-border-radius:0.2em;
}

a.hasMenu span.toggle:hover {
    opacity:1;
    background-color:#555;
}

a.hasMenu:hover span.toggle {
    display: block;
    height: 100%;
    width: 1.25em;
    min-height:16px; min-width:16px; /* as long as we cannot use svg */
}

/* -- 4.2.2 Area Context Menus ---------------------------------------------- */

/**
 * @since 0.9.5
 *
 * <BLOCKELEMENT class="has-contextmenu-area>
 *     <ELEMENT class="contextmenu">
 *         <ELEMENT class="item"><ELEMENT class="icon icon-####" title="Text"><span>Text</span></ELEMENT></ELEMENT>
 *     </ELEMENT>
 * </BLOCKELEMENT>
 *
 */

.has-contextmenu-area
{
    position:relative;
}

.has-contextmenu-area > .contextmenu
{
    display:block;
    position:absolute;
    left:-5000em; top:-5000em;
    /* wegen .window .contextmenu */
    border:none !important;
    font-size: 16px !important;
    min-width: auto !important;
}

.has-contextmenu-area > .contextmenu .item .icon
{
    vertical-align:middle;
}

.has-contextmenu-area:hover > .contextmenu
{
    display:block;
    /* wegen .window .contextmenu */
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:auto !important;
}

.has-contextmenu-area > .contextmenu > .item,
.has-contextmenu-area > .contextmenu > .area .item
{
    font-size:16px; /* as long as we cannot use svg */
    line-height:1;
    display:inline-block; height:1em;
    padding:0.25em;
    background-color:#999;
    background-color:rgba(85, 85, 85, 0.5); /* #555 */
    opacity:0.75;
    border-radius:0.25em;
    -moz-border-radius:0.25em;
    -webkit-border-radius:0.25em;
    margin-left:0.25em;
    cursor:pointer;
}

.has-contextmenu-area > .contextmenu > .item:hover,
.has-contextmenu-area > .contextmenu > .area .item:hover
{
    background-color:#555;
    opacity:1;
}

/* -- 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.resizer-horizontal {
    display: block;
    position: absolute;
    top: 0;
    right: -0.25em;
    width: 0.5em;
    height: 100%;
    background: transparent;
    cursor: e-resize;
}

body.javascript-on .section-sidewindows span.resizer-horizontal.dragging, 
body.javascript-on .section-sidewindows span.resizer-horizontal:hover {
    background: url(./../images/button-resizer-horizontal.png) no-repeat center #bbb;
/*    background-color: #bbb;*/
    opacity: 0.5;
}

body.javascript-on div.has-resizer span.resizer-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-resizer span.resizer-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: 50px;
}

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;
}

/* -- 4.6 Editing ----------------------------------------------------------- */
.edit {
    display: none;
}

/* -- 4.7 Tables ------------------------------------------------------------ */

body.javascript-on tbody.closed tr { display: none; }
body.javascript-on tbody.closed tr.grouptitle { display: table-row; }

body.javascript-on tr.grouptitle th a.toggle {
    display: block;
    float: left;
    width: 10px; 
    height: 1.5em;
    margin-right: 0.5em;
    background-image: url(./../images/tree-toggle.png);
    background-repeat: no-repeat;
    background-position: -20px center;
    background-color: transparent;
}

body.javascript-on tr.grouptitle th a.toggle:hover,
body.javascript-on tr.grouptitle th a.toggle:focus,
body.javascript-on tr.grouptitle th a.toggle:active {
    background-position: -30px center;
}

body.javascript-on tbody.closed tr.grouptitle th a.toggle {
    background-position: -0px center;
}

body.javascript-on tbody.closed tr.grouptitle th a.toggle:hover,
body.javascript-on tbody.closed tr.grouptitle th a.toggle:focus,
body.javascript-on tbody.closed tr.grouptitle th a.toggle:active {
    background-position: -10px center;
}

/* 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;
}

.ui-draggable { position:relative; z-index:998; }

/* 6. Specials -------------------------------------------------------------- */

ul.hierarchy li > a, 
ol.hierarchy li > a {
    margin-left: 12px;
}

a.hierarchy-toggle {
    float: left;
    width: 8px;
    height: 1.5em;
    background-image: url(./../images/tree-toggle.png);
    background-position: 0px 50%;
    background-repeat: no-repeat;
    margin-left: 0 !important;
}

a.hierarchy-toggle:hover {
    background-position: -10px 50%;
}

a.open {
    float: left;
    width: 8px;
    height: 1.5em;
    background-image: url(./../images/tree-toggle.png);
    background-position: -20px 50%;
    background-repeat: no-repeat;
    margin-left: 0 !important;
}

a.open:hover {
    background-position: -30px 50%;
}

.comment > *:first-child {
    padding-left: 20px;
    background-image: url(./../images/icon-comment.png);
    background-repeat: no-repeat;
    background-position: 0 0.4em;
}

.hidden {
    display: none;
}