/*
 * layout
 */
body {background:#16212c;color:#f0f0f0}

#wrapper {background:#234 url('../img/sprite.png') repeat-x 0 -300px;text-align:center}

header, nav, section {position:relative;margin:0 100px;min-width:600px;width:auto !important;width:600px;color:#16212b;text-align:left}
             section {min-width:560px;width:auto !important;width:560px} /* 600 - padding */

nav { height:35px; margin-bottom:15px; background:url('../img/sprite.png') repeat-x 0 -50px; -moz-border-radius:8px/8px; border-radius:8px/8px; -moz-box-shadow:0px 8px 10px #16212c; -webkit-box-shadow:0px 8px 10px #16212c; box-shadow:0px 8px 10px #16212c; }

nav ul                                  {position:absolute;top:0;left:20px;margin:0px;padding:0;height:35px;list-style:none;background:#123}
nav li, nav a, nav span                 {display:block}
nav li                                  {float:left}
nav a, nav span                         {height:35px;padding:0 20px;font-size:1.35em;font-weight:bold;line-height:33px;font-size:1.35em;text-decoration:none;color:#123;background:url('../img/sprite.png') repeat-x 0 -50px;text-shadow:#666 1px 1px 4px}
nav a:hover                             {text-decoration:underline}
nav span                                {margin-left:1px;margin-right:1px;background-position:0px -120px;color:#eee}

nav .right                              {left:auto;right:20px}

section { margin-bottom:20px; padding:20px 20px 35px 20px; background:#fff; -moz-border-radius:8px/8px; border-radius:8px/8px; -moz-box-shadow:0px 8px 10px #16212c; -webkit-box-shadow:0px 8px 10px #16212c; box-shadow:0px 8px 10px #16212c; }

/* forms */
form                    {display:block;margin:0 auto}

form#contact            {max-width:500px}

form .fe                {margin:0;padding:10px 0;background:#fff;border-bottom:1px solid #d0d8d9}
form .fe-first          {padding-top:0}
form .fe-last           {border:0}

label, input,       textarea       {display:block;width:99%;margin:0;padding:0;font-size:1.1em;color:#123}
label                              {padding-bottom:0.35em}
       input,       textarea       {padding:0.25em 0.5%;line-height:1.2em;border:1px solid #aaa}
       input:hover, textarea:hover,
       input:focus, textarea:focus {border-color:#666}
                    textarea       {height:300px}
textarea#query       {height:200px}
textarea#comments    {height:100px}

.fe_is_public       {position:relative}
.fe_is_public input {position:absolute;top:12px;left:5px;width:auto}
.fe_is_public label {width:auto;margin-left:30px;padding-bottom:0}

* html             .fe_is_public input {top:10px;border:0}
*:first-child+html .fe_is_public input {top:10px;border:0}

.fe_is_anon       {position:relative}
.fe_is_anon input {position:absolute;top:12px;left:5px;width:auto}
.fe_is_anon label {width:auto;margin-left:30px;padding-bottom:0}

* html             .fe_is_anon input {top:10px;border:0}
*:first-child+html .fe_is_anon input {top:10px;border:0}

form label a {color:#222}

form .fe-buttons                    {padding:5px 0 0 0}
form .fe-buttons button             {display:block;float:right;margin-left:5px;border:1px solid #d0d8d8;background:#e5ecf9}
form .fe-buttons button span        {display:block;padding:5px 25px;color:#123}
form .fe-buttons button:hover       {background:#234;border-color:123}
form .fe-buttons button:hover span  {color:#fff;cursor:pointer}

form .fe-buttons-single                    {padding:5px 0 0 0}
form .fe-buttons-single button             {display:block;float:left;margin-right:5px;border:1px solid #d0d8d8;background:#e5ecf9}
form .fe-buttons-single button span        {display:block;padding:5px 25px;color:#123}
form .fe-buttons-single button:hover       {background:#234;border-color:123}
form .fe-buttons-single button:hover span  {color:#fff;cursor:pointer}
form p.nfo-required {font-size:0.8em;color:#888}

form sup.fe-required {font-size:1.2em;color:#800}

.password2 {display:none;}

div.explain-form            {margin-bottom:5px;text-align:center}
div.explain-form a          {padding:0 1em 0.5em 1em;border:1px solid #ccc;background:#f8f8f8;color:#666;text-decoration:none;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}
div.explain-form a span     {font-size:0.9em;position:relative;top:0.2em}
div.explain-form a:hover    {background:#e5ecf9}

#explain-form               {margin:0;padding:10px;background:#e5ecf9;border:1px solid #ccc;border-top:0;text-align:left}
#explain-form h3            {font-size:1em;margin-bottom:0.35em;color:#234}
#explain-form ul            {list-style:none;margin:0 0 15px 10px}
#explain-form li,
#explain-form input,
#explain-form label         {display:inline;width:auto;font-size:0.95em}
#explain-form li            {margin:0 15px 0 0}
#explain-form input         {position:relative;top:2px}
#explain-form .fe-buttons   {padding:0;background:none;border:none}
#explain-form button        {float:none;margin:0}

* html             #explain-form input {border:0}
*:first-child+html #explain-form input {border:0}

 .result-text, .result-source, .result-html, .result-stats, .result-hints     {margin:0;padding:0;border:1px solid #ccc;overflow:auto}
 .res-tab>pre>code {
    width: calc(100% - 15px);
    top: 0; left: 0;
 }
/* all ico(ns) */
.result-html table#explain td.n div.ico {position:absolute;top:-4px;left:-22px;width:22px;height:22px;background:url('../img/sprite.png') no-repeat 0px -180px;text-indent:-1000px;overflow:hidden}

/* for "help" */
.help img { margin-left: 32px; margin-bottom: 21px; border: 1px solid black; padding: 2px;}
.help p img { margin: 0; padding: 0; }
.help pre { margin-left: 32px; border: 1px solid black; padding: 2px; }
.help iframe { margin-left: 32px; border: 1px solid black; padding: 2px; margin-bottom: 21px; }
.help section h2 { border: 2px solid #ccc; background: #eee; padding: 5px 32px; }
.help section h3 { font-size: 115%; font-weight: bold; padding: 5px 32px; border-bottom: 1px solid #ccc; }
.help section h4 { font-weight: bold; padding: 5px 32px; }
p.slogan         {font-style:italic}
p strong         {color:#234}

ul.colors        {list-style:none;width:60%}
ul.colors li     {padding:4px 6px;border-bottom:1px solid #fff}
ul.colors li.c-1 {background:#fff}
ul.colors li.c-2 {background:#fe8}
ul.colors li.c-3 {background:#e80;color:#fff}
ul.colors li.c-4 {background:#800;color:#fff}

/* history */
p.msg                   {padding:1em;border:1px dotted #e0e0e0}
p.msg-error             {color:#800}

div.history             {margin-bottom:20px}
div.history ul          {margin:0;padding:0;list-style:none}
div.history li          {display:block;float:left;margin:0 10px 10px 0}
div.history li a        {display:block;width:140px;height:20px;line-height:20px;border:1px dotted #ccc;text-align:center;overflow:hidden;text-decoration:none;font-size:0.9em;font-weight:bold;color:#234}
div.history li a:hover  {border:1px solid #a60;background:#e80;color:#fff}

div.paginator           {position:relative;height:3em}
div.paginator a         {position:absolute;top:0;font-size:1.1em;color:#234}
div.paginator a.older   {right:0}
div.paginator a.newer   {left:0}

footer                  {padding-top:15px;background:url('../img/sprite.png') repeat-x 0 -155px}
footer div              {padding-top:10px;background:#16212c}
footer p                {text-shadow:#101921 0px 2px 6px}
footer p,
footer a                {color:#2c4054}
footer a:hover          {color:#e80}

.auto-hint { color: #aaaaaa }

div.message { border: 2px solid #f00; padding: 0.5em; text-align: center; background: #600; }
div.message p.message { font-weight: bold; font-size: 2em; color: #ff0; padding: 0; margin: 0; margin-bottom: 1em; }
div.message p.details { background: #300; font-weight: normal; font-size: 1.5em; color: #cc0; padding: 10px; margin-left: 32px; margin-right: 32px; margin-bottom: 1em; text-align: left; border: 1px solid #ff0; }
div.message p.messageSimple { margin-bottom: 0.5em; margin-top: 0.5em; }
div.message p.hint { color: #ff0; padding: 0; margin: 0; }
div.message p.hint a { color: #ff0; }
div.message p.hint a:hover { color: #ff0; }
div.message p.message a,
div.message p.message a:visited {color:#ff0;border: none;}
div.messageNice { border: 2px solid #0f0; background: #060; }

div.plea { float: right; color: #666; }

/**
 * new
 */
.user-history .row                  {display:block;padding:.2em 0;width:100%;background:#f0f0f0}
.user-history .row .column          {float:left;margin-right:1%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-history div.row               {padding:.4em 0;background-color:rgb(34, 51, 68);color:#f0f0f0}
.user-history div.row .column       {text-align:center;font-size:1.1em}
.user-history .row .id              {width:5%;margin-left:1%}
.user-history .row .id a            {color:#333;text-decoration:none}
.user-history .row .id a:hover           {text-decoration:underline}
.user-history .row .title           {width:62%}
.user-history .row .is-public       {width:4%}
.user-history .row .is-anonymized   {width:4%}
.user-history .row .delete          {width:9%}
.user-history .row .action          {width:9%}

.user-history form.row .id,
.user-history form.row .is-public,
.user-history form.row .is-anonymized {padding-top:.4em}

.user-history .row input {width:96%}

.user-history .first-row {padding-top:.5em}
.user-history .last-row  {padding-bottom:.5em}

.user-history .row .action button             {display:block;margin:0 auto;border:1px solid #d0d8d8;background:#e5ecf9}
.user-history .row .action button span        {display:block;padding:.4em .4em;color:#123}
.user-history .row .action button:hover       {background:#234;border-color:123}
.user-history .row .action button:hover span  {color:#fff;cursor:pointer}

.user-history div.date              {background:#ddd;text-align:center;font-style:italic;color:#333;}

#contactForm { display: none; }
#contactWait { border: 2px solid #00f; padding: 0.5em; text-align: center; background: #006; margin: 1em; padding: 1em;}
#contactWait p { font-weight: bold; font-size: 2em; color: #ccc; padding: 0; margin: 0; margin-bottom: 1em; }
#contactWait p.hint { font-weight: normal; font-size: 1.5em; margin-bottom: 0em; }

label > code {
    margin: 5px;
    margin-bottom: 0px;
    padding: 3px 10px;
    border: 1px solid #888;
    background: #ddd;
    display: inline-block;
}

button.copy {
    width: auto;
    height: auto;
    margin: 0 2em 1em 2em;
    padding: 0.1em 0.5em;
    border: 1px solid #d0d8d8;
    background: #e5ecf9;
    color: #444;
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 1em;
}

button.copy:hover, button.copy:focus {
    background: #fff;
    color: #000;
}


#explain>thead>tr {
    max-height: 100px;
    position: sticky;
    border: 0px;
    margin: 0px;
    top: 0;
    z-index: 1;
}