/* 
 * codedread 2008 stylesheet
 *
 * Copyright (c) 2009 and onwards, Jeff Schiller
 */

html { background-color: white; } /* should be same as fadeto colour for now */
body { 
  margin: 0; padding: 0; 
}
#page { 
  margin-top: 160px; 
  position: absolute; 
  z-index: 3; 
  width: 100%;
}
#header { position: absolute; top:0; left: 0; right: 0; height: 100px; }
#masthead { position:absolute; height: 100px; width: 100%; z-index: 1; }
/* adding height: 100% forces Opera 9.2 to render it correctly */
#leftedge { position: fixed; height: 100%; top: 0; bottom: 0; width: 100px; }
#rightedge { position: fixed; height: 100%; top: 0; bottom: 0; right: 0; width: 100px; }
#text-masthead { display:none; }
#decoration { z-index: 0; }
footer { display: block; color: #00a; height: 100px; bottom: 0; text-align: center; padding-top: 20px; clear: both;}
#badges { float: right; margin-right: 20px;}
#content {
  display: block;  
  margin-left: 150px; margin-right: 150px;
  color: #009; background-color: white;
  font-size: 16px; 
  font-family: Palatino,Georgia,'Times New Roman',serif;
  /*font-weight: 600;*/
  line-height: 1.5em;
}
#content a { color: #D40; }
object.menu {
  position: relative;
  width: 100%;
  left: 0px;
  /* This had to be slightly less than 100px so that we don't get horizontal scrollbars in Firefox and Safari */
  margin-left: 95px;
  height: 75px;
  margin: 0;
}
object.menu2 {
  position: relative;
  width: 100%;
  left: 0px;
  /* This had to be slightly less than 100px so that we don't get horizontal scrollbars in Firefox and Safari */
  margin-left: 95px;
  height: 300px;
  margin: 0;
}

div.menu * 
{ margin: 0 }

nav.menu {
  position: absolute;
  top: 70px; left: 50px; right: 50px; height: 75px;
  margin-left: 50px; margin-right: 50px;
  z-index: 2;
}
div.fallbackmenu {
  position: relative;
  top: -70px; /* not sure why there is a 25ish pixel gap between the object and the div boxes but there is on IE8, Fx3 and Opera 9 */
}
p.fallbacktitle {
  background-color: white;
  text-align: center;
  font-size: 15pt; font-weight: bold;
  color: #00a; background-color: #fff;
}
p.future {
  font-size: 12pt; font-weight: bold;
  color: #00a; background-color: #ffc;
  opacity: 0.4;
  border-style: solid; border-color: red; border-width: 3px;
  padding-left: 10px; padding-right: 10px;
  padding-top: 5px; padding-bottom: 5px;
}
table.menu {
  table-layout: fixed;
  border-style: outset;
}
table.menu td {
  border-style: inset;
  text-align: center;
  background-color: rgb(200,235,255);
}
table.submenu td {
  padding-right: 5px;
}
.articletable {
  border-style: outset;
  border-width: 3px;
  left: 0; right: 0;
}
.articletable th {
  font-weight: bold;
  background-color: #00b;
  color: #f0dc30;
  border-style: inset;
  border-width: 2px;
  text-align: center;
}
.articletable td {
  border-style: inset;
  border-width: 2px;
}

h1,h2,h3,h4,h5 {
	font-family: Verdana Bold, Tahoma, Century Gothic Bold, Arial Bold, Arial;
}

h2 { 
  font-size: 1.3em; 
}

.plain {
  background-color: #fff;
}
.highlight {
  background-color: #ffc;
}

.newslist li {
  margin-top: 4px;
  padding-top: 4px;
}

div.code {
  border-style: solid; border-color: red; border-width: 1px;
  /*background-color: #ffc;
  background: url(corner.svg);
  background-repeat: no-repeat;*/
  margin-left: 10px; margin-right: 10px;
  padding: 10px 15px 10px 15px;
  font-family: Courier;
  font-size: 12pt;
  white-space: pre;/* Unfortunately this causes a bug in Firefox 3 where the width is forced */
  overflow: auto;
  width: 90%;
}

abbr {
  border-bottom-style: dotted;
  border-bottom-color: #00a;
  border-bottom-width: 1px;  
}

.toclist {
    width: 400px;
    list-style-type: none;
    background-color: #ffc;
    border-style: ridge;
    border-color: #888;
    border-width: 5px;
    padding: 5px;
    margin: 5px;
}
.collapsablegrip {
	display:none;
}

/* this is an image that should take up the width of most of the page
img.page {
  width: 90%;
  text-align: center;
}*/

/* WordPress-specific stylings */

/* This is a candidate for rounded corners... */
.postmetadata {
  /*border-style: solid;
  border-width: 1px;
  border-color: #00a;*/
  margin-left: 150px; margin-right: 150px; 
  min-width: 300px;
  margin-bottom: 50px;
  font-size: 10pt; font-family: Century Gothic Bold, Arial Bold, Arial;
  color: #00a; 
}

/* styling for WordPress comment form */
#author-label { font-weight: 800; }
#email-label { font-weight: 800; }
#url-label { font-weight: 800; }
#craptcha-label { font-weight: 800; }
input#author { padding: 0.5em; }
input#email { padding: 0.5em; }
input#url { padding: 0.5em; }
input#CRAPTCHA_Code { padding: 0.5em; }
textarea#comment {
  width: 90%;
  padding: 1em;
}

.datestamp {
  font-size: small;
  padding: 0;
  margin: 0;
}

div.commentator {
  position:absolute; 
  left:0px; 
  width:19em; 
  height:12.5em; 
}

a.commentator {
  text-decoration: underline;
  fill:orange;
}

text.commentator {
  fill:orange;
  font-size: 18px;
  font-weight:bold; 
  text-anchor:end;
}

div.commentator-comment {
  margin-left:7em;
}

.commentlist {
  list-style-type: none;
}

.commentlist > li {
  padding-bottom: 2px;
  margin-bottom: 2px;
}

#respond {
  margin-top:60px;
}

/* every other comment - NOT CURRENTLY USED */
li.alt {
  background-color: #ffd;
}
/* my comments are special! */
li.author div.commentator-comment {
  border-style: solid; border-width: 0.5px; border-color: black;
  background-color: #ffd;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 2px;
  padding-left: 5px; padding-right: 5px;
}

.commentmetadata {
  font-size: small;
  text-align: right;
}

 /* Without this height, the navigation div has no height as it only contains floats */
nav {
  height: 1.5em;
  display: block;
  text-align: center;
}
.alignleft {
  overflow: hidden;
  float: left;
  height: 1.5em;
  text-align: left;
}
.alignright {
  overflow: hidden;
  float: right;
  height: 1.5em;
  text-align: right;
}

.clip {
  float: right; 
  margin-left: 20px;
  width: 6em;
  clear: both;
}

.cheeky {
  font-size: smaller;
  text-decoration: none;
  font-style: italic;
  color: #00a;
}

.optionslist {
 display: block;
}

.optionslist dt {
 clear:   left;
 display:  block;
 font-weight: bold;
 float:   left;
 width:   16em;
}

.optionslist dd {
 clear:   right;
 display:  block;
 white-space: nowrap;
}

/* Begin Sidebar - NOT CURRENTLY USED */
#sidebar {
  position: absolute;
  top: 140px;
  right: 100px;
  width: 170px;
}

#sidebar form {
    margin: 0;
    }

#sidebar ul li {
  list-style-type: none;
  list-style-image: none;
  margin-bottom: 15px;
}

#sidebar #searchform #s {
  width: 115px;
  padding: 2px;
}
#sidebar {
  font-size: 10pt;
}
/* End Sidebar */

/* SVG-related styles */
 
/* Menu icon colors */
.menuIconText { fill: #00a; }
.homeDoorBegin { stop-color: #6a8fc6; }
.homeDoorEnd { stop-color: #97b9ec; }
.homeFrameBegin { stop-color: #c9c9c9; }
.homeFrameEnd { stop-color: #fff; }
.blogCoverMid { stop-color: #a9e6ff; }
.blogCoverEnd { stop-color: #034cfe; }
.blogCoverEdge1 { stop-color: #4c62ab; }
.blogCoverEdge2 { stop-color: #b8bbda; }  
.blogCoverBottom1 { stop-color: #dee1ff; }
.blogCoverBottom2 { stop-color: #2b72c2; }
.blogCoverBottom3 { stop-color: #2353a4; }
.codeFill1 { stop-color: #fff; }
.codeFill2 { stop-color: #3293ff; }
.codeFill3 { stop-color: #0356ff; }
.codeStroke1 { stop-color: #0356fe; }
.codeStroke2 { stop-color: #032442; }
.gamesButton1 { stop-color: #ffc500; }
.gamesButton2 { stop-color: #ff6200; }
.projectsBackFill1 { stop-color: #fff; }
.projectsBackFill2 { stop-color: #87bbff; }
.projectsBackFill3 { stop-color: #1e65ff; }
.projectsBackBorder1 { stop-color: #001ea4; }
.projectsBackBorder2 { stop-color: #398bff; }
.projectsFrontFill1 { stop-color: #cdf8ff; }
.projectsFrontFill2 { stop-color: #0c64ff; }
.projectsFrontFill3 { stop-color: #0026ff; }
.projectsFrontShade1 { stop-color: #6ac5ff; }
.projectsFrontShade2 { stop-color: #4886e0; }
.projectsFrontShade3 { stop-color: #00009f; }

.aboutButton1 { stop-color: #0df; }
.aboutButton2 { stop-color: #006eff; }
.aboutButtonStroke { fill: #004da8; }
stop.fadeDeeper { stop-color: rgb(45,113,153); }
stop.fadeFrom { stop-color: rgb(100,165,210); }
stop.fadeTo { stop-color: white; }
stop.fadeFinal { stop-color: white; stop-opacity: 1; }
#title_grad_stop1 { stop-color: #00c; }
#title_grad_stop2 { stop-color: #26f; }
#title_grad_stop3 { stop-color: #009; }
#reflect_grad_stop1 { stop-color: #26f; stop-opacity: 0.2; }
#reflect_grad_stop2 { stop-color: #00c; stop-opacity: 0.05; }
#reflect_grad_stop3 { stop-color: #009; stop-opacity: 0.0; }