.sb  { font-family: Arial, Verdana; color: #282828; font-size: 9pt}

pre { font-family: "Courier New", Courier, monospace; }

dt { font-weight: bold; padding: 7px; }

div.draglist_workarea { padding:10px; /*float:left */}

/* this is a sort of joke, pay no attention :) */
.redacted {
    color: gray;
    background: gray;
}

ul.draglist { 
    position: relative;
    width: 80%px; 
   /* height:240px;*/
    background: #F8F8F8;
    border: 1px solid gray;
    list-style: none;
    margin:0;
    padding:0;
}

ul.draglist li {
    margin: 1px;
    cursor: move;
    zoom: 1;
}

ul.draglist_alt { 
    position: relative;
    width: 80%; 
    list-style: none;
    margin:0;
    padding:0;
    /*
       The bottom padding provides the cushion that makes the empty 
       list targetable.  Alternatively, we could leave the padding 
       off by default, adding it when we detect that the list is empty.
    */
    padding-bottom:20px;
}

ul.draglist_alt li {
    margin: 1px;
    cursor: move; 
}


li.draglist {
    background-color: #E8E8E8;
    border:1px solid gray;
}

input:hover { background: #E8E8E8; }
input:focus { background: silver; }
input:focus:hover { background: #404040; color: #FFFFFF; }

input[type=file], input[type=button], input[type=submit], input[type=reset] { 

/*    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 4px;
    margin-right: 4px;*/
    
    border-width: 1px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

hr {
  border: 0;
  width: 78%;
  height: 1px;
  color: #C0C0C0; 
  background-color: #C0C0C0;
}

#treeDiv1 {
   /* width: auto;*/
    padding-left: 5px;
}

#menu_content {
    border-top: thin dotted;
    padding-right: 1em;
    float: left;
    width: 20%;
    margin: 0px;
    background-color: #F8F8F8;
}

ul.nav, p.nav  {
    margin-left: 0px;
    padding-left: 0px;
    cursor: default;
    width: auto;
    list-style-type: none;
    background-color: #E8E8E8;
}

p.nav {
    border-bottom: thin solid;
    font-weight: bold;
}

li.nav {
    margin-bottom: 3px;
    margin-left: 7px;
    width: auto;
     border: thin solid #E8E8E8;
}

a.nav:before {
   content: "➜ ";    
}
a.nav {
border: thin solid #E8E8E8;
    display:block;    
    color: #282828; 
    text-decoration:none; 
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
a.nav:link {}
a.nav:visited {}	
a.nav:active {}
a.nav:hover { width:109%;border: thin solid silver; background-color: #F8F8F8; }

#main_content {
    margin: 10px;
    margin-left: 22%;
    width: auto;
    font-family: Arial, Verdana; color: #282828; font-size: 9pt
}

#clear {
    clear: both;
    margin: 0px;
    overflow: hidden;   
}

#header {  
    font-size: 18pt;
    padding: 7px;
    background-color: #E8E8E8;
    color: #282828;
}

#breadcrumb {
    margin: 15px;
    font-size: 10pt;
    border-bottom: #282828 dotted 1px;
}

#footer {
    text-align: center;
    font-size: 10pt;
    background-color: #E8E8E8;
    color: #282828;
}

.reqsb { color: red }

a.sb:link { color: blue; text-decoration:none }

a.sb:visited { color: #EOEOEO; text-decoration:none }	

a.sb:active { color: purple; text-decoration:none }

a.sb:hover { color: red; text-decoration:underline }

.rating, .rating-input {
    color: orange;
    font-size: 18px;
    text-shadow: silver 2px 2px 2px;
    list-style-type: none;
    text-decoration: none;
    /* display: inline; */
    padding-left: 2px;
    font-family: "Hiragino Kaku Gothic Pro", "Osaka", "Zapf Dingbats";  /* more consistent star glyph attempt at sanity */
    /* padding-right: 0px;margin-right: 2px;margin-left: 0px;*/
    /*border: 1px solid black;*/
}

ul.rating, li.rating, ul.rating-input, li.rating-input {
    display: inline;
}

.rating-input-choice {
    color: green;
}

.rating-input:hover {
    color: red;
}

table.sb {  border-style: solid; border-color: #282828; border-width: 1px;padding: 5px; width: 90%; }
table.sb_small { width: 49%; }
table.data_table {  table-layout: fixed; width: 90%; border-style: solid; border-color: #282828; border-width: 1px;padding: 5px; }
td.data_col { vertical-align: top; }
tr.data_light { background-color: #E8E8E8; }
tr.data_medium { background-color: #F8F8F8; }
tr.data_dark { background-color: #FFFFFF; }

tr.sb , td.sb { vertical-align: top }

td.twosb { background-color: #FFFFFF; padding-bottom: 5px }

td.asb { background-color: #E8E8E8; padding-bottom: 5px }

td.bsb { background-color: #F8F8F8; padding-bottom: 5px }

.small, .smallsb { font-size: 7pt }

/*.oksb { font-weight: bold; color:green }
.errsb { font-weight: bold; color:red }*/

/* TODO 
 li.div { list-style-image: url(/img/div.png); }
 li.page { list-style-image: url(/img/page.png); }
 li.gallery { list-style-image: url(/img/gallery.png); }
 li.plugin { list-style-image: url(/img/plugin.png); }
 li.matrix { list-style-image: url(/img/matrix.png); }
*/

option.sb { 
	border-style:  dotted;
	border-width: 1px;
	border-color: #282828;
	border-top-width: 0px;
	font-family: "Courier New", Arial, Verdana; color: #383838; font-size: 9pt   
}

input.sb { 
	color:#282828; text-decoration: none; background: #FFFFFF; 
	font-family: "Courier New", Arial, Verdana; color: #383838; font-size: 9pt  
}

input:hover { background: #E8E8E8; }
input:focus { background: silver; }
input:focus:hover { background: #404040; color: #FFFFFF; }

input.fit {
    width: 90%;
}

select.sb { font-family: "Courier New", Arial, Verdana; color: #383838; font-size: 9pt }

textarea.sb {
	font-family: "Courier New", Arial, Verdana; color: #383838; font-size: small   
}

h3.sb { text-align: center;font-size: 11pt;padding: 0 }

ins {border-bottom:1px solid green; text-decoration: none; color:green}

del {color:red; text-decoration:line-through}

cite {border-bottom:1px dashed blue}

acronym {border-bottom:1px dotted #CCC; cursor:help}

abbr, html\:abbr {border-bottom:1px dashed #CCC; cursor:help}

blockquote {
  border-left: 1px solid silver; 
  border-top: 1px solid silver;
  border-right: 1px solid silver; 
  border-bottom: 1px solid silver;
  padding: 0 0.5em; 
  margin: 0.5em 1.5em 0.5em 2.5em; 
  -moz-border-radius: 0.78em 0 0.78em 0.42em;
  -webkit-border-radius: 0.78em 0 0.78em 0.42em;
  border-radius: 0.78em 0 0.78em 0.42em;
}

blockquote cite:before {
    content: "\2014\0020";    
   
}

blockquote:before { 
    content: "\201C"; /* open-quote; doesn't work consistently */
    display:block;
    font-size: 42px;
    height: 30px;
}

blockquote blockquote {
    border-color: silver;
    background-color: #F8F8F8;
}

blockquote blockquote blockquote {
    border-color: gray; /* #F8F8F8; */
    background-color: #E8E8E8;
}


blockquote blockquote blockquote blockquote {
    border-color: #282828; 
    background-color: #F8F8F8;
}

.blockquotecite {
    border-top-color: silver;
    border-top-style: dashed;
    border-top-width: 1px;
    text-align: right;
}

a.blockquotecite, cite.blockquotecite {
    border-style: none; /*undo the <cite> CSS*/
}

blockquote blockquote .blockquotecite {
    border-color: silver;
}

blockquote blockquote blockquote  .blockquotecite {
    border-color: gray; /*#F8F8F8; */
}

blockquote blockquote blockquote blockquote .blockquotecite {
    border-color: #282828; 
}

a.offsite:after {
    content: " \279A";
}

a.back:before {
    content: "\2190  ";
}

a.next:after {
    content: "  \2192";
}

/* set common CSS for "msg type" classes ... */
.oksb, .errsb, .note, .box, .ok, .debug, .info, .notice, .warning, .warn, .error, .err, .critical, .crit, .alert, .emergency, .emerg {
    font-family: Monaco,
                 "Bitstream Vera Sans Mono",
                 "Lucida Console",
                 Terminal,
                 monospace;
    font-size: 12px;
    width: 90%;
    border-style: solid;
    border-width: thin;
    
    padding: 5px;
 
    -moz-border-radius: 0.42em;
    -webkit-border-radius: 0.42em;
    border-radius: 0.42em;
}

.hl_anchor { margin: 6px;}
.hl_anchor:before {
    content: "\2693";
    font-size: large;
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 3px;
    margin-top: 3px;
    background-color: orange;
    border-style: solid;
    border-width: thin;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position:relative;
    top: -6px;
    left: -6px;
}

.shadow {
    text-shadow: 2px 2px 2px #282828; 
}

.engrave {
    color: #282828;
    background: gray; /* #E8E8E8; */
    text-shadow: 0px 1px 1px #fff;
}

.emboss {
    color: #E8E8E8;
    text-shadow: 0px 1px 1px #282828;   
}

.irony:before, .sarcasm:before {
    content: "\2E2E";
}

.rhetorical.before, .disbelief.before, .excitement:before {
    content: "\203D";
}


.note:before, .oksb:before, .ok:before, .debug:before, .info:before, .notice:before, .warning:before, .warn:before, .errsb:before, .error:before, .err:before, .critical:before, .crit:before, .alert:before, .emergency:before, .emerg:before, .irony:before, .sarcasm:before, .rhetorical.before, .disbelief.before, .excitement:before {
    font-size: 30px;
    height: 30px;
    padding: 7px;
}
.correct {
    color: green;
    background: #EFFBEF; /*#A9F5D0;*/

}

.semi-correct {
    color: #DF7401;
    background: #F8ECE0;
}

.not-correct {
    color: red;
    background: #F8E0E0;
}

/* ... then style color/img elements that differentiate them */
.note:before {
    content: "\270E ";
}
.note {
    
    border-color: #E8E8E8;
    background: #F8F8F8; /*#A9F5D0;*/
}

.box {
    border-color: #E8E8E8;
    background: #F8F8F8; /*#A9F5D0;*/
}

.oksb:before, .ok:before {
    content: "\2713 ";
}
.oksb, .ok {
    color: green;
    border-color: green;
    background: #EFFBEF; /*#A9F5D0;*/
}

.debug:before, .info:before, .notice:before {
    content: "\2139 ";
}
.debug {
    color: #424242;
    border-color: #424242;
    background: #E6E6E6;
}

.info {
    color: blue;
    border-color: blue;
    background: #CEE3F6; /*#A9D0F5;*/
}

.notice {
    color: #AEB404; /*#D7DF01;*/
    border-color: #AEB404; /*#D7DF01;*/
    background: #F7F8E0;
}

.warning:before, .warn:before, .errsb:before, .error:before, .err:before {
    content: "\26A0 ";
}

.warning, .warn {
    color: #DF7401;
    border-color: #DF7401;
    background: #F8ECE0;
}

.errsb, .error, .err {
    color: red;
    border-color: red;
    background: #F8E0E0;
}
 
.critical:before, .crit:before, .alert:before, .emergency:before, .emerg:before {
    content: "\2620 "; /*"\27C1 ";*/
}

.critical, .crit {
    color: #AEB404; /*#D7DF01;*/
    border-color: #AEB404; /*#D7DF01;*/
    background: #F7F8E0;
} 

.alert {
    color: #DF7401;
    border-color: #DF7401;
    background: #F8ECE0;
}

.emergency, .emerg {
    color: red;
    border-color: red;
    background: #F8E0E0;
}

.highlight, .hl {
    color: blue;
    background: #CEE3F6; /*#A9D0F5;*/
}
sup.footnote:before {
    content: "[";
}
sup.footnote:after {
    content: "]";
}

.quarter-width {
    width: 22%; 
    display: inline-block;   
}

.third-width {
    width: 30%; 
    display: inline-block;    
}

.half-width {
    width: 46%; 
    display: inline-block;
}

.tree_short {
   font-weight: bold;
   border-bottom: 1px solid #C0C0C0;
   width: 78%;
}

/* show/hide dl */

    dl.collapsible {}
    
    dt.collapsible, dt.collapsible-show, dt.collapsible-hide, dt.collapsible-keep-show {
        margin: 4px;
        padding-left 7px;
        border: 1px solid black;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;   
    }
    
    dd.collapsible, dd.collapsible-show, dd.collapsible-hide, dd.collapsible-keep-show {}

    /*dd.collapsible-hide:before, dd.collapsible-show:before {
        content: "↑ ";
        font-size: small;
        vertical-align: top;
    }*/
        
    dt.collapsible-hide:before {
        content: '[+]';
        color: gray;
        padding-right: 7px;
        padding-left -7px;
        font-size: small;
        font-weight: bold;
        font-family: "Courier New", monospace;.
    }
    dt.collapsible-show:before {
        content: '[-]';
        color: gray;
        padding-right: 7px;
        padding-left -7px;
        font-size: small;
        font-weight: bold;
        font-family: "Courier New",monospace;.        
    }
    dd.collapsible-hide {
        display:none;
    }
    dd.collapsible-show, dd.collapsible-keep-show {
        display:block;
    }
    
    .show {
       display:block;
    }
    .hide {
       display:none;
    }
    

    a.feed-all {}
    img.feed-img {float: left; padding: 2px;padding-right: 5px}
    a.feed-more {
        float: right;
        display:block;
    }
    dl.feed {}
    dt.feed {font-weight: bold;clear: all}
    dd.feed {  }

    form.changed {border:1px dotted red;}