body { color: black; background: #eee; }
h1 { font-size: 175%; }
h1,h2,h3,h4,small { font-family: sans-serif;}
h1,h2,h3,h4 { color: #303030; text-shadow: rgba(0,0,0,0.25) 3px 3px 5px; }

h1:first-child, h2:first-child { margin-top: 0; margin-bottom: 1ex; }
h1 img { float: right; border: 0; max-width: 50%; }
h1 img.nofloat { float: none; }

#editor {
    /* This allows the div to grow wider than the window if necessary to
       accommodate the contents. Otherwise, wide things inside can poke
       through the border. */
    display: table;
    width: 100%;
}

div.home, div.grammar { border: 1px solid black; background: #9df; }
div.home { padding: 5px; }
div.files { margin: 0 8px 8px 8px; position: relative; }
td.public_grammars { padding-left: 2em; }
.no_publish .publish { display: none; }

div#file, table.extension td, table.extension th { border: 2px solid #009; }
div#file { border-top-width: 0; }
pre.plain { border: 2px solid #009; }
div#file, pre.plain, table.matrixview td { background: white; padding: 0.6ex; }

table.extension { border-collapse: collapse; background: white; }
table.extension td, table.extension th { padding: 1ex; }
table.extension th { border-right-width: 0; color: #009; }
table.extension td { border-left-width: 0; min-width: 30em; }

.slideshow .hidden { display: none; }

img.cloud, img.right, div.right, div.modtime { float: right; }

.modtime { color: #999; white-space: nowrap; }

table.grammar_list { border-collapse: collapse; margin-left: 1.0em; }
table.grammar_list td { padding: 0.4ex 0.25em; }

div.namebar { background: #9df; }
div.namebar table { width: 100%; }
.namebar h3, .sheet h3 { margin: 0; color: #009; }
.home h3 { margin-top: 0; color: #009; }

div.comment:before { content: "-- "; }
div.comment { color: #009; margin-left: 1em; }

td.right { text-align: right; }
td.center { text-align: center; }

.kw { font-weight: bold; font-family: sans-serif; color: #009; }
.sep { font-weight: bold; color: #009; }

div.indent { padding-left: 1em; min-width: 1em; min-height: 1em; }

div.fun:hover, div.param:hover, div.lincat:hover, div.oper:hover, div.lin:hover,
div.template:hover
{ background: #def;}

.exb_linbuttons input[type=button] { float: right; clear: right; margin: 0; }
.exb_output { background: #dfd; float: right; margin: 0 10px; }

.more, .delete { font-weight: bold; font-family: sans-serif; }
.more, .delete, .edit, *[onclick], .onclick { cursor: pointer; }
.onclick:hover, .ident[onclick]:hover { text-decoration: underline; }

.hover .more, .hover .delete, .hover .edit { visibility: hidden }

.hover .hidden, .nohover .ifhover { display: none; }

.editable:hover, .deletable:hover { background: #ff9; }

.extensible:hover .more,.editable:hover > .edit ,.deletable:hover > .delete,
 tr.deletable:hover .delete 
  { visibility: visible; }

.editable { white-space: pre; }
div.lin span.editable { display: inline-block; vertical-align: top; }

.more { color: green; }
.edit { color: orange; }
.delete { color: red; }
.error_message,.inError { color: red; }
.template, .template .sep, .unimportant { color: #999; }
form { display: inline-block; }

table.tabs {
    width: 100%;
    border-width: 0; border-spacing: 0; empty-cells: show;
}

table.tabs td { text-align: center; border: 2px solid #009; padding: 2px; white-space: nowrap; }
table.tabs td.active { background: white; border-bottom-width: 0; }
table.tabs td.inactive {
    background: #cef;
    border-top-color: #66c; border-left-color: #66c; border-right-color: #66c;
}

table.matrixview th { background: #cef; color: #009; }

 table.tabs td.gap
{ border-top-width: 0; border-left-width: 0; border-right-width: 0; }

table.tabs input[type=button], table.matrixview th input[type=button] {
    border: 0;
    background: inherit;
    color: #009;
    font-size: inherit;
    font-weight: bold;
    /*text-decoration: underline;*/
}

.string_edit { font-family: inherit; font-size: inherit; }
textarea.string_edit { vertical-align: top; }

ul.languages { -moz-column-width: 20em; }

li { margin-top: 0.5ex; margin-bottom: 0.5ex; }

#sharing h1, #sharing .footer { display: none; }

div.compiler_output .back_to_editor { display: none; }

textarea.text_mode {
    /*font-family: inherit; font-size: inherit;*/
    width: 99%;
}

div#minibar, div#syntax_editor {
    border: 1px solid black;
    padding: 5px;
    background: #ccc url("../minibar/brushed-metal.png");
}

table.page_overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}
table.page_overlay>tr>td { text-align: center; vertical-align: middle; }

div.grammar_extension {
    display: inline-block;
    border: 1px solid black;
    background: #9df;
    padding: 2ex;
    margin: 2ex;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}

div.sheet {
    position: relative;
    background: white;
    padding: 1ex;
    margin: 2ex;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}