/**
 *  jalakai insites stylesheet
 *
 *  @author   Christopher Smith <chris@jalakai.co.uk>
 *  @date     2005-09-25
 */
 
/* normalise basic styles, to get all browsers similar */
html, body {height:100%; margin: 0; padding:0; background: #999;}
h1, h2, h3 {margin: 0.75em 0; padding: 0; letter-spacing: normal;}
h4, h5, h6, p {margin: 1em 0; padding: 0;}
form, dl, dt, dd {margin: 0; padding:0;}
ul, ol {margin-left: 0; padding-left: 1em;}
fieldset {border: none; margin: 1em 0; padding: 0;}
textarea {font-size: 1em;}    /* equalise font-size with <input elements> */
pre {
  font: 100% Monaco,'Courier New',courier, monospace;
}

a {white-space: nowrap; letter-spacing: 0.02em; text-decoration: underline;}
a:visited, a:link {color: #1418d2;}
a:hover {color: #66f;}

/* font details */
body {
    font: 76% Tahoma, Arial, Helvetica, sans-serif;
    color: #2c2c2c;
}

h1 {font-size: 160%; font-weight: bold;}
h2 {font-size: 140%; font-weight: bold;}
h3 {font-size: 120%; font-weight: bold;}
h4 {font-size: 110%; font-weight: bold;}
h5 {font-size: 100%; font-weight: bold;}
h6 {font-size: 100%; font-weight: normal; text-decoration: underline;}

/* standard classes */
.accesskey {text-decoration: underline;}
.explain {text-decoration: underline;}
.explain:hover {cursor: pointer; }
.form_field {clear: both; text-align: left; overflow: hidden; margin: 0.5em;}
.error {color: red !important;}
.nostyle {display: none;}     /* use to disable elements used to assist in rendering without styles */
.nonvisual {position: absolute; left: -1000px;}
.nonvisual, .nonvisual * {width: 0; height: 0; margin: 0; padding: 0; border: none;}
.clear {clear: both;}
.clearfix:after {content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
.screen {position: relative; overflow: hidden;}
.swap {position:absolute; width: 100%; height: 100%; top:0; left: 0;}
.nowrap {white-space: nowrap;}

/* name */
.jalakai .j {
  font-size: 150%; 
  font-weight: bold; 
  font-style: normal; 
  vertical-align: -0.3em; 
  letter-spacing: 0.05em;
}

/* major layout elements */

#page, #wrap {
    background-color: white;
}

#page {
  height: 100%;
  width: 60em;
  max-width: 100%;
  min-width: 45em;  
  margin: 0 auto;
}

#gallery #page {
  width: 780px;
}

#wrap {
  position: relative;
  min-height: 100%;
  margin-bottom: -3em;            /* equal to footer height */
}

#banner {
  position: relative;             /* allow absolutely positioned banner elements */
  min-height: 4em;
  padding-top: 1px;               /* prevent escaping margins */
  background-color: #ffb366;
}

#content {
  padding: 1px 0.5em 3em 0.5em;   /* top: prevent margins escaping, bottom: equal to footer height */
}

#footer {
  position: relative;             /* ensure rendered above #wrap */
  clear: both;
  height: 3em;
  background: #6da8c5;
  text-align:center;
}

/* columns, use class names, so specific pages can give them ids */
.main {
  float: right;
  width: 74%;
  padding-right: 1.6%;
}

.main h2, .main h3 {
  font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
}

.main h3 {
  border-bottom: 1px solid #6da8c5;
}

.left {
  float: left;
  clear: left;
  width: 20%;
  padding-right: 0.8%;
  font-size: 90%;
}

.top {
  padding-top: 0.2em;
}

.left h3, .left h4 {
  font-size: 120%;
  font-family: Arial, Helvetica, sans-serif;
}

.left p, .left h3, .left h4 {
  margin: 1em 10px;
  padding: 0;
  text-align: left;
}

.left>p:first-child {
  margin-top: 1.5em;
}

.left ul.menu, .left .menu ul {
  list-style: none;
  margin: 0 10px 0 0; 
  padding: 0; 
  border: 1px solid #ccc;
}

.left .menu li {
  margin: 0; 
  margin-bottom: -1px;
  padding: 0; 
  border-bottom: 1px solid #ccc; 
  border-left: 8px solid transparent; 
}

.left .menu li a, .menu li input {
  display: block; 
  padding: 3px 2px; 
  text-decoration: none; 
  border-left: 1px solid #ddd;
}

.left .menu li a, 
.left .menu li a:link, 
.left .menu li a:visited, 
.left .menu li input {
  color: #666;
}

.left .menu li:hover {
  border-left-color: #f93;
}

.left .menu li input {
  cursor:pointer; 
  background: white; 
  width:100%; 
  border: none;
}

#banner h1 {
  margin: 0.4em 0 0 24%;
  height: 1.2em;
  line-height: 1.2;
  width: 75%;
  font: 2.0em "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
  white-space: nowrap;
  overflow: hidden;    
  border: 0 none;
}

#footer p {
  font-size: 95%;
  margin: 0;
  padding-top: 0.7em;
}

#footer p#exectime {
  float: right;
  font-size: 90%;
  color: #696969;
}

/* form elements */
.form_field label, .checkbox_group h3 {
  float: left; 
  width: 5em;
  font-weight: normal;
  font-size: 1em;
}

.form_field input, .form_field textarea {
  background: #ffddbb; 
  border:1px solid #ffc981; 
  width: 80%; 
  margin:0;
  padding:0;
  font-family: Courier New, Courier, monospace;
}

.form_field input:focus, .form_field textarea:focus {
  background: #ffd08a;
}

.checkbox_group {
  margin: 0.5em;
}

form .checkbox_group h3 {
  margin-right: 0;
  border-bottom: none;
}

.checkbox_group div {
  width: 80%;
  border: 1px solid #ffd08a;
  margin-left: 5em;
  font-size: 95%;
}

.checkbox_group .checkbox {
  float: left;
  margin: 0 1.1em;
  width: 24%;
  min-width: 8em;
  border: 0;
}

.checkbox_group .checkbox:hover {
  background: #ffd08a;
}

.checkbox_group *:hover {
  cursor: pointer;
}

.checkbox_group label {
  float: left;
  padding-top: 2px;
}

.checkbox label.focus {
  background: #ffd08a;
}

.checkbox_group input {
  float: right;
  padding-left: 0.5em;
}

/* page specific styles */
/* regular expression assistant 
#preg #banner h1:before {
    display: block;
    content: url(/images/preg.png);
}
*/
#preg h2 {
    margin: 1em 0;
    font-size: 1.1em;
    font-weight: normal;
}

.main h3, .main p, .main dl {
    margin-right: 3em;
}

.main .button {
    text-align: center;
}

.main .button input, .main .button button {
    background: white;
    border: 1px solid #ffd08a;
    padding: 0 4px;
    width: 5em;
    cursor: pointer;
    margin-right: 0.5em;
    margin-bottom: 4px;
}

.main .button input[disabled], .main .button button[disabled] {
    border-color: #ccc;
    background: #e0e0e0 !important;
    color: #999;
}

.main .button input:hover, .main .button input:focus,
.main .button button:hover, .main .button button:focus {
    background: #ffd08a;
}

#results {
}

#results h2 {
    font-size: 1.4em;
    line-height: 1.2;
    padding-bottom: 2px;
    border-bottom: 1px solid #ffd08a;
    overflow: hidden;
}

#results h2 span {
    font-size: 0.8em;
    font-weight: normal;
    float: left;
    width: 6em;
}

#results dl {
    margin-bottom: 1em;
    margin-right: 0;
    clear: left;
    overflow: hidden;
    border: 1px dashed #ffddb4;
}

#results dd dl dd {
    margin-bottom: 0;
}

#results dl dl {
    margin-left: -7em;
    border: none;
}

#results dt {
    float:left;
    clear:left;
    padding-right: 0.5em;
    width: 7.5em;
}

#results dt:after {
    content:' :';
}

#results dd {
    margin: 1em 0 0 8em;
}

#results dt {
    margin-top: 1em;
}

#results dd dt, #results dd dd {
    margin-top: 0;
}

.nowrap dd {
    white-space: nowrap;
}

/* gallery */

#gallery #thumbnails { height: 392px; overflow: auto; float: left; }
#gallery #thumbnails { list-style-position: inside; }
#gallery #thumbnails li { border-left-width: 0; padding: 8px;}
#gallery #thumbnails li.selected { background-color: #ffb366;}
#gallery #pictures dt, #gallery #pictures dd { display: none; }
#gallery #pictures dt#title_1, #gallery #pictures dd#pic_1 { display: block; }

#gallery #pictures {
  width: 550px;
  height: 550px;
}

#gallery #pictures dt.swap {
  height: 10%;
}

#gallery #pictures dd.swap {
  height: 90%;
  top: 10%;
}

#gallery .swap img {
  margin: 0 auto;
  display: block;
}

/* dokuwiki downloads */

#dokuwiki_downloads dl {
  padding-top: 1px;
}
#dokuwiki_downloads dd+dt {
  margin-top: 2.4em;
}
#dokuwiki_downloads dt+dd {
  margin-top: 2.4em;
}

#dokuwiki_downloads dt:first-child+dd {
  margin-top: 1em;
}