/*=================================================================|
|  Document: http://www.elfshot.com screen stylesheet              |
|  Author:   Rowan Ferguson                                        |
|=================================================================*/

/*-----------------------------------------------------------------|
|  TYPE SELECTOR RULES                                             |
|-----------------------------------------------------------------*/

a, 
a:link,
a:active,
a:visited {
  background-color: inherit;
  color: #666;
  text-decoration: underline;
}
a:hover {
  background-color: #FFFFF7;
  color: black;
}
acronym {
  border-bottom: 0.1em dotted #DDD;
  cursor: help;
}
body {
  background: url(../img/rune_bg.gif) #EAEAEA repeat fixed;
  color: #666;
  font: 80%/1.6em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
dfn {
  border-bottom: 0.1em dotted #393;
  color: #393;
  cursor: help;
}
dl {
  margin: 0;
  padding: 0.5em 0 0 0;
}
dt {
  color: #393;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0.5em 0;
}
dd {
  margin: 0;
  padding: 0 0 1em 0;
}
form {
  margin: 1em 0 0 0;
  padding: 0;
} 
form p {
  font-size: 95%;
  margin: 0 0 1em 0;
  padding: 0;
}
input.field {
  font-size: 100%;
  padding: 0.3em;
} 
input.submit {
  background: transparent url(../img/bg-input-submit.gif) repeat-x 0 0;
  border-top: 1px solid #cdeeca; 
  border-right: 1px solid #c7c7c7;
  border-bottom: 1px solid #c7c7c7;
  border-left: 1px solid #cdeeca;
  font-size: 100%;
  padding: 0.5em 1em 0.75em 1em;
} 
h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}
h1 {
  border-bottom: 0.1em dotted #393;
  border-top: 0.1em dotted #393;
  clear: both;
  color: #393;
  font: bold 130%/1.4em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  margin: 1.5em 0 1.5em 0;
  padding: 0.25em 0 0.25em 0;
}
h1 a:link,
h1 a:active,
h1 a:visited {
  background: transparent url(../img/arrow-back.gif) no-repeat 0 0.7em;
  color: #393;
  padding: 0.25em 0 0.25em 25px;
  text-decoration: none;
}
h1 a:hover {
  background-color: #FFFFF7;
  color: black;
}
h2 {
  border-bottom: 1px solid #CCC;
  color: #333333;
  font: 120%/1.4em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  margin: 5px auto 5px auto;
  padding-bottom: 0.1em;
}
h3 {
  color: #666;
  font: 110%/1.6em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  font-weight: bold;
  padding-top: 2em;
}
h4 {
  color: #666;
  font: bold 100%/1.6em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  padding: 0;
}
html {
  scrollbar-face-color: #FFFFF7; 
  scrollbar-shadow-color: #000000; 
  scrollbar-highlight-color: #808080;
  scrollbar-3dlight-color: #F0FFF5; 
  scrollbar-darkshadow-color: #F0FFF5; 
  scrollbar-track-color: #F2F2EA; 
  scrollbar-arrow-color: #009900
}
img {
  border: none;
}
p {
  margin: 0;
  padding: 0.5em 0 1em 0;
}
span.external {
  background: url(../img/ico-external.gif) no-repeat 100% 50%;
  padding-right: 10px;
  font-size: 90%;
  text-decoration: none;
}
span.popup {
  background: url(../img/ico-popup.gif) no-repeat 100% 50%;
  padding-right: 10px;
  font-size: 90%;
  text-decoration: none;
}
span.zoom {
  background: url(../img/ico-zoom.gif) no-repeat 100% 50%;
  padding-right: 10px;
  font-size: 90%;
  text-decoration: none;
}

/*-----------------------------------------------------------------|
|  ID SELECTOR RULES - ordered by container heirachy               |
|-----------------------------------------------------------------*/

/* Edging on either side of everything
----------------------------------------------- */
#outer-border {
  background: url(../img/outerborder.gif) transparent repeat-y;
  margin: 0 auto;
  padding: 0;
  width: 800px;
}

/* Contains flash feature and nav
----------------------------------------------- */
#header {
  height: 210px;
  margin: 0 auto;
  padding: 10px 10px 0 10px;
  position: relative;
  width: 730px;
}
#header p {
  margin: 0 0 auto 0;
  padding: 0;
  width: 176px;
}
#header span {
  background: black url(../img/glade.gif) no-repeat;
  border: none;
  height: 136px;
  padding: 3px 0 0 5px;
  margin: 0;
  display: block;
}
#logo img {
  display: none;
}
#logo a {
  background: transparent url(../img/bg-logo.gif) no-repeat 0 0;
  display: block;
  height: 43px;
  margin-left: 10px;
  width: 167px;
}
#logo a:hover {
  background-position: 0 -54px;
  text-decoration: none;
}

/* Positions flash and no js/flash static image
----------------------------------------------- */
#feature {
  left: 21px;
  top: 59px;
  position: absolute;
}
#feature div {
  background-color: black; 
  height: 139px;
  width: 703px;
}


/* Controls layout of navigation
----------------------------------------------- */
#navigation {
  background-color: black;
  border-bottom: 1px solid #FFFFF7;
  height: 21px;
  margin: 0 11px 0 11px;
  position: absolute;
  top: 198px;
  width: 520px;
}
#navigation ul {
  margin: 0 0 0 10px;
  padding: 0;
}
#navigation ul li {
  display: block;
  float: left;
  height: 21px;
  list-style-type: none;
  text-align: center;
  width: 110px;
}
#navigation ul li.active {
  background-color: white;
  color: black;
}
#navigation ul li a:link,
#navigation ul li a:active,
#navigation ul li a:visited {
  background-color: inherit;
  background-color: black;
  color: #cbcbcb;
  display: block;
  text-decoration: none;
  width: 100%;
}
#navigation ul li a:hover {
  background: url(../img/bg-navlinks.gif) transparent no-repeat center top;
  color: #9F6;
  text-decoration: underline;
}

/* Surrounds main and side columns
----------------------------------------------- */
#both-column-container {
  background: url(../img/main_bg.gif) #FFFFF7 repeat-y top;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 750px;
}

/* Controls side column including side boxes
----------------------------------------------- */
#sidebar-container {
  float: right;
  font: 85%/1.5em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  width: 180px;
}
#sidebar-container h3 {
  font-size: 120%;
  padding-bottom: 0.5em;
}
#sidebar-container h3.first-side-h3 {
  margin-top: -3em;
}
#sidebar-container .icon {
  padding-top: 9px;
}
#main-content #sidebar-container ul {
  margin: 0 0 1em 4px;
  padding: 0;
}
#main-content #sidebar-container ul li {
  background: transparent url(../img/arrow-head.gif) no-repeat 0 7px;
  border: 0;
  padding: 0.1em 0 0.1em 13px;
}
#main-content #sidebar-container ul li.current {
  background: transparent url(../img/arrow-head2.gif) no-repeat 0 7px;
  font-weight: bold;
}
#main-content #sidebar-container ul li.current a {
  text-decoration: none;
}
.sidebox-container {
  background: transparent url(../img/bg-sidecontent.gif) no-repeat left bottom;
  padding-bottom: 35px;
}
.sidebox-content {
  padding-left: 5px;
  padding-right: 5px;
}


/* Contains main column container and content
----------------------------------------------- */
#main-content-container {
  background: url(../img/tree.gif) no-repeat 90% 100%;
  margin: 0;
  overflow-x: hidden;
  padding-bottom: 30px;
  padding-top: 10px;
  top: 0;
  width: 541px;
}
#main-content {
  padding: 0 30px 0 20px;
}
#main-content ul {
  list-style-type: none;
  clear: both;
  padding: 0;
  margin: -0.5em 0 0 0;
}
#main-content li {
  background: transparent url(../img/arrow.gif) no-repeat 0 10px;
  padding: 0.3em 1.5em 0.3em 2em;
}
#main-content p.top {
  background: transparent url(../img/arrow-top.gif) no-repeat 0 6px;
  clear: both;
  line-height: 25px;
  padding: 0 0 0 1.25em;
}
#main-content p.overview {
  padding-top: 0.5em;
  margin-bottom: -1.5em;
}

/* Controls story containers and content
----------------------------------------------- */
.story-container {
  background: url(../img/blog_bg_glade.jpg) transparent no-repeat left top;
  margin-bottom: 2em;
  border-top: 1px solid white;
}
.story-content {
  margin: 0 1em 1em 1em;
}
.story-content h3 {
  color: #393;
  font: 85%/1.4em Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
  padding: 0 0 0.25em 0;
  margin: 0;
}
.story-container h2 {
  background: url(../img/blog_pers_glade.gif) transparent no-repeat 0 2px;
  padding-left: 25px;
} 

.aster {
  color: #ff7200;
  font-weight: bold;
}
.back {
  background: url(../img/arrow-back.gif) no-repeat 4px 5px;
  padding: 0 0 0 17px;
  text-decoration: none;
}
.definition a:link,
.definition a:active,
.definition a:visited {
  border-bottom: 0.1em dotted #393;
  color: #393;
  cursor: help;
  text-decoration: none;
  font-style: italic;
}  
.definition a:hover {
  border-bottom: 0.1em solid #393;
}
.clear {
  clear: both;
}
.floatleft {
  float: left;
}
.floatmiddle {
  float: left;
  margin-left: 20px;
}
.floatright {
  float: right;
}
.folio img {
  margin: 0;
  padding: 0;
}
.folio div {
  margin-bottom: 10px;
  margin-top: 10px;
}
.icon {
  float: left;
  padding-top: 11px;
  padding-right: 6px;
  margin: 0;
}
.tiny {
  font-size: 80%;
}

/* footer contains tree background image
----------------------------------------------- */
#footer {
  border-top: 1px solid #CCC;
  color: #808080;
  font-size: 85%;
  margin: 0 1em 0 1em;
  padding-top: 2em;
  width: 275px;
}
#footer a {
  color: #808080;
}
#footer h3 {
  color: #808080;
}