/**
 * Style sheet for codingdomain.com
 *
 * You may adapt elements of this CSS in your own projects,
 * but the unique combination of images, colors, sizes,
 * typography, and positioning ("the design") is
 * copyright 2005-2009 Diederik van der Boor
 * and may not be reproduced.
 */


/* CSS selectors are sorted in order of appearance */


body
{
  /* font based on planetkde.org, because I find it very readable */
  font-family: "Bitstream Vera Sans", "Verdana", "Arial", sans-serif;
  color: #333;        /* subtitle, but more readable */
  font-size: 100%;

  /* Georgia, serif */
  /* font based on kdevelop.org forums, also very readable */
  /* font-family: "Lucida Sans Unicode", "Lucida Grande", "Arial"; */
}


/* ----- resets ----- */

a:active,
a:focus { outline: 0; } /* Firefox 3 */

a[name] { padding: 0; } /* Firefox 3, Safari 3 */

textarea { overflow: auto; }  /* MSIE */

.nocss { display: none; }

.jsEnabled .nojs { display: none; }

.clearfix:after
{
  content:      "."; 
  font-size:    0;
  line-height:  0;
  display:      block; 
  height:       0;
  clear:        both; 
  visibility:   hidden;
}

* html .clearfix { height:     1%; } /* 1% of nothing makes IE 6 do the right thing. */
*+html .clearfix { min-height: 0;  } /* and IE7 has new tricks to trigger hasLayout. */


/* ----- top icon ----- */

img.icon
{
  position: absolute;
  right: 10px;
  top: 10px;
}


/* menu bar */

#menu
{
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  z-index: 1;

  width: 9em;
  padding: 1em 0 0 1.5em;
  background-color: #3c78b4;
}

* html #menu
{
  /* IE6 fix, make the menu position bearable
     because position:fixed is not supported.  */
  position: absolute;
}

#menu .menutitle
{
  color: #000033;
}

#menu li ul
{
  /* menu subitems */
  padding: 0 0 0 1em;
  margin: 1em 0 1em 0;
}

#menu li
{
  list-style-type: none; /* display:block is not enough for IE */
}

#menu li a
{
  font-family: "Arial", sans-serif;
  text-decoration: none;
  color: #dddfe4;
}

#menu li.onpath a
{
  font-weight: bold;
  margin-left: 1px;
}

#menu li a
{
  color: #f9fbff;
}

#menu li a:hover
{
  color: #fff;
}


/* content */

#content
{
  margin-left: 13em;  /* lets avoud IE bugs with absolutes or floats. */
  font-size: 0.9em;   /* not 11pt or px, renders worse, makes the font fixed (especially in MSIE) */
}

.section
{
  /* margin is everything */
  margin-left: .35em;
}

.section p,
.tabular
{
  margin-left: .7em;
}

.section p,
.section li,
.tabular
{
  /* force a text width, so it's easier to read, think LaTeX */
  text-align: justify;
  width: 35em;
}

.section p,
.section li,
.section dd
{
  /* more spacing, easier to read */
  line-height: 1.4em;
}


.footnotes
{
  color: #999;
  margin: 2em 0 0 1em;
}

.footnotes h2
{
  font-size: 90%;
  margin: 0 0 .5em 0;
}

.footnotes p
{
  margin: 0 0 .5em 0;
  font-size: 75%;
}

.footnotes a { color: #666; }
.footnotes a:visited { color: #999; }
.footnotes a:hover   { color: #0165ad; }


/* headers */

h1, h2, h3, h4
{
  font-family: "Lucida Sans Unicode", "Arial", sans-serif;
}

h1,
.hide
{
  /* site title */
  text-indent: -999em;
  padding: 0;
  margin: 0;
  height: 0;
  line-height: 0;
}

h2
{
  /* page title */
  font-size: 2em;
  margin: 0.6em 0 0 0;
}

h3
{
  /* section title */
  font-size: 1.5em;
  margin: 2em 0 1.1em 0;
  width: 12em;
  text-indent: 0.3em;

  white-space: nowrap;
  border-bottom: 2px ridge #ccc;
}

h4
{
  /* paragraph title */
  font-size: 1.2em;
  margin: 30px 0 20px 0;
  text-indent: 5px;
}


/* breadcrumb (location bar) */

#breadcrumb
{
  color: #999;
  font-size: 0.9em;
}

#breadcrumb ul,
#breadcrumb li
{
  display:          inline;
  list-style-type:  none;
  font-weight:      bold;
  margin:           0; /* standarize margin */
  padding-left:     2px;
}

#breadcrumb a
{
  color:            #999;
  font-weight:      normal;
  text-decoration:  none;
}

#breadcrumb a:hover
{
  color:            #888;
  text-decoration:  underline;
}


/* hyperlinks */

/* IE note: FIRST :visited, THEN :hover, or it won't work */
a:link      { color: #0144ad; }
a:visited   { color: #224b74; }
a:active    { color: #224b74; }
a:hover     { color: #0165ad; }


/* --------- toc list --------- */

dl.toc
{
  width: 40em;
  margin-left: 0.7em;
}

dl.toc img.toc_icon
{
  float:         left;
  display:       inline;   /* for MSIE */
  margin-right:  15px;
  margin-bottom: 5px;
}

* html dl.toc img.toc_icon
{
  position:      relative; /* for MSIE or it will hide the float */
}

dl.toc dt
{
  clear: left;
  margin: 0 10px 0 0;
  padding: 0;
}

dl.toc dd
{
  margin: 0 0 7px 0;
  padding: 0;
}

dl.toc dd.with_icon
{
  margin-left: 65px;
}

dl.toc span.toc_title
{
  padding-top: 8px;
  display:     block;
  height:      1.5em;
  font-size:   15px;
}

dl.toc:after
{
  content: "."; 
  display: block; 
  height: 0;
  clear: both; 
  visibility: hidden;
}

* html dl.toc { height: 1px; }
*+html dl.toc { min-height: 0; }


/* block elements */ 

dl.shell,
dl.config,
dl.important,
dl.note,
div.shell
{
  margin: 15px;
  width: 39em;
}

dl.toc dl.important dd
{
  /* this qualifies as a hack,
     not sure how to fix this yet. */
  width:   39em;  
}

dl.shell     dt,
dl.config    dt,
dl.important dt,
dl.note      dt 
{
  color:       #fff;
  font-family: "Lucida Sans Unicode", "Arial", sans-serif;
  font-size:   0.9em;
  font-weight: bold;
  border:      1px solid gray;
  padding:     2px;
}

dl.shell     dt { background-color: #507090; }
dl.config    dt { background-color: #6b91b8; }
dl.important dt { background-color: #6e93cd; }
dl.note      dt { background-color: #6e93cd; }

dl.shell     dd,
dl.config    dd,
dl.important dd,
dl.note      dd
{
  margin:           0;
  background-color: #f0f0f0;

  border-left:      1px dashed gray;
  border-right:     1px dashed gray;
  border-bottom:    1px dashed gray;
}

div.shell
{
  background-color: #f0f0f0;
  border: 1px dashed gray;
}

dl.important dd td /* explicitly address the <td>, or the entire table messes up */
{
  font-family:      "Arial", sans-serif;
  font-size:        1.1em;
}

dl.note dd
{
  text-align: center;
}

.shell  pre,
dl.config pre
{
  color:        #0185e3;
  font-size:    0.9em;
  font-family:  "Bitstream Vera Sans Mono", monospace, fixed;
  padding:      10px;
  margin:       0;
}

dl.sidenote
{
  float: right;
  display: inline;
  margin: 0 1em 1em 1em;
  padding: .5em;
  width: 17em;

  border: 1px solid #cfe;
  font-size: 90%;
  text-align: left;
}

.sidenote dt
{
  font-weight: bold;
  padding: 0;
  margin: 0 0 .5em 0;
}

.sidenote dd
{
  margin: 0;
  padding: 0;
}

.sidenote p
{
  width: auto;
  padding: 0;
  margin: .5em 0;
  text-align: left;
}


/* tabbar */

.tabbar {
  margin: 0 0 1em 1em;
}

.tabbar h4 {
  margin: 10px 0 10px 0;
}

.tabtitles { display: none; }
.jsEnabled .tabtitles { display: block; }

.jsEnabled .tabbar {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  width: 35em;
  padding: 5px;
}

.tabtitle img { border: 0; }

.tabtitle a {
  border: 1px solid #f0f0f0;
}

.tabtitle a:hover,
.tabtitle a.tabtitle-active {
  background-color: #d9d9d9;
  border: 1px solid #dfdfdf;
}

.jsEnabled .tabbar .tabtitle {
  float: left;
  display: inline;
  margin-right: .5em;
}

.jsEnabled .tabbar .tabpanels {
  clear: both;
  overflow: hidden;
}

.jsEnabled .tabpanel {
  display: none;
  margin: .5em 0 0 0;
}

.jsEnabled .tabpanels .tabpanel-active {
  display: block;
}


/* forms */

form
{
  margin-left: 20px;
}

form label
{
  display:  block;
  width:    100px;
  float:    left;
}

form label.check_label
{
  display:  inline;
  width:    auto;
  float:    none;
  cursor:   default;
}

form div.field
{
  clear:         left;
  margin-bottom: 5px;
}

div.edit input,
div.note textarea
{
  border:      1px solid #B9D0EC;
  width:       400px;
  font-family: "Bitstream Vera Sans", "Verdana", "Arial", sans-serif;
}

form div.footer
{
  margin-left:      100px;
  padding:          5px;
  width:            390px;
  border:           1px solid #B9D0EC;
  background-color: #f8fafd;
}

form input.button
{
  width:            80px;
  background-color: #bbcdd8;
  margin-right: 8px;
}


/* images */

a img
{
  /* place a very subtile border arround it.
     Also fixes the ugly blue default border in MSIE */
  border: 1px solid #F8FAFD;
}

a img.zoomicon
{
  border: 0;
}

span.image_box
{
  /* text-align: center; */
  margin:           2px;
  border:           2px solid #DDE5F0;
  background-color: #F8FAFD;
  padding:          4px;
  display:          table-cell;
}

span.image_box_left
{
  float:         left;
  clear:         right;
  margin-top:    0;
  margin-left:   0;
  margin-right:  20px;
  margin-bottom: 20px;
}

span.image_box_right
{
  float:         right;
  clear:         left;
  margin-top:    0;
  margin-left:   20px;
  margin-right:  0;
  margin-bottom: 20px;
}

* html span.image_box_left,
* html span.image_box_right
{
  position:      relative; /* for MSIE or it will hide the float */
  display:       inline;   /* for MSIE or it triggers the double-float-margin bug */
}

span.image_main
{
  /* wrap the caption below the image */
  display:    table-cell;
  text-align: center;
}

span.image_caption
{
  font-size: 0.9em;

  /* wrap the caption, and stop properties from cascading */
  display:      table-caption;
  caption-side: bottom;
  margin:  0;
  padding: 0;
}

span.image_caption a.zoomlink
{
  margin: 10px;
}


/* Alternative image layout for MSIE
   MSIE does not support display: table-cell for non-block elements.
   These hacks are an attempt to make images
   look reasonably normal until I've got a better workarround */

* html span.image_box
{
  /* hide the box effect again, it looks weird in msie */
  background-color: transparent;
  border:           none;
}

* html span.image_box,
* html span.image_main,
* html span.image_caption
{
  /* give msie a display property it supports */
  display:    block;
}

* html span.image_main
{
  /* reset the text-align since the div becomes 100% wide */
  text-align: left;
}



/* lists */

ul.no_bullets
{
  list-style-type: none;
}

ol.steps dt
{
  font-style: italic;
}

ol.steps dl
{
  margin-left: 0; /* standarize margins */
}

ol.steps dd
{
  margin-top:    10px;
  margin-bottom: 10px;
  margin-left:   10px;
  margin-right:  10px;
}

.section li
{
  margin-bottom: 2px;
}


/* standard table (generated by xslt) */

table.tabular th
{
  text-align:  left;
  font-weight: bold;
  white-space: nowrap;
}

table.tabular tr
{
  vertical-align: top;
}


/* special fonts */

b, i
{
  color: #006699;
}

abbr, acronym
{
  cursor:        help;
  font-style:    normal;
  border-bottom: 1px dotted;
}

.hint
{
  color:          #999999;
  font-size:      10px;
  padding-left:   20px;
  padding-bottom: 10px;
  padding-top:    10px;
}

code,
var,
tt
{
  font-size: 0.95em;
  font-family: "Andale Mono", monospace, fixed;
}

tt.command    { color: #0185E3; }
code.code     { color: #0185E3; }
var.argument  { color: #3DB73D; }
var.variable  { color: #3DB73D; font-style: italic; }
code.comment  { color: #43A000; }

code.file,
code.code
{
  font-size:    0.9em;
  font-family:  monospace, fixed;
  /* font-style: italic; */
}

span.message
{
  color:     #E18503;
  font-size: 0.9em;
}

blockquote
{
  margin-left: 20px;
}

blockquote.quote
{
  font-weight: bold;
  color: #0185E3;
}