body {
   color: #000;
   font-size: 10pt;
   font-family: Arial, Helvetica, sans-serif;
   background: #b5b5b5;
   margin: 0;
   text-align: center;
}


#content {
   width: 800px;
   height: 100%;
   padding: 0 0 0 0;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
}

#wrapper {
   background: url("img/bg.png") repeat-y 50% 0;
   float: left; /* this shrink-wrap's wrapper around the whole page content. */
}

#page {
/*   font-family: Arial, Helvetica, sans-serif; */
   padding: 0 0 0 0;
   float: left;
   text-align: left;
   background: transparent;
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   width: 600px;
}

#leftmargin {
   background: transparent;
   float: left;
   width: 100px;
   font-size: 9pt;
}

#rightmargin {
   background: transparent;
   float: left;
   width: 100px;
}

p, a {
   font-family: Arial, Helvetica, sans-serif;
}

tt {
   font-family: "Bitstream Vera Sans Mono", "Andale Mono", "Lucida Console", "Courier New", Courier, monospace;
}


/* -- PAGE TOP HEADING BAR -- */
#headbar {
   background: url(img/topbar.png) no-repeat;
   background-color: #000;	/* temporary to see how big to make it*/
   width: 100%;
   height: 128px;
/*   border-bottom: 1px solid #5A6A63; */
   margin-bottom: 0.5em;
}


a#logolink {
   display: block; float: left;
   width: 250px;
   height: 100%;
}

#randquote {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.7em;
   color: #999;
   margin: 0;
   margin-bottom: 0.5em;
}

#ierror {
   display: none;	/* to be styled correctly in future. */
}

/* --Some general page settings for common elements -- */
img {  border: 0;  }

img.bord {  border: 1px solid #000;  }

h1 {  margin-top: 0;  }

h1 {	/*was  #navbar h1, .article h1 */
   display: block;
   margin: 0;
   color: #933;
   font-size: 12pt;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   padding: 2px 0px 4px 0px; /* Top, right, bottom, left */
}

/* --MAIN AREAS OF CONTENT ALIGNMENT: Left, Right and Bottom (footer)-- */
#sidecol {
   font-size: 8pt;
   width: 140px;
   float: left;
}

#maincol {
   float: right;
   width: 450px;
   margin : 0;
   margin-bottom: 1.5em;
}

#maincol .article {
   background: #fff url("img/artright.png") top right repeat-y;
}

#footer {
   background: #fff;
   margin-top: 1.4em;
   border-top: 1px dotted #5A6A63;
   margin-bottom: 1em;
   padding-top: 0.6em;
   clear: both;
   width: 100%;
}

/* Red-colour change: 933 (dark) 633 (normal) replace link text and headings. */

/* -- Individual content boxes -- */

.article {
   font-family: Arial, Helvetica, sans-serif;
   vertical-align: top;
   border: 1px solid #5A6A63;
   padding: 0.2em 0.6em 0.2em 0.6em;
}

.article p {
   font-family: Arial, Helvetica, sans-serif;
}

.article ul {
  list-style: square outside url('img/bullet.png');
  padding: 0.4em;
  margin: 0.5em;
}

.article ul li {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

/*
 * Navigation Bar
 */
#navbar {
   margin: 0 0 2em 0;
   background: #fff; /* url(img/menubar.png); */
   font-family: Arial, Helvetica, sans-serif;
   font-size: 8pt;
   vertical-align: top;
   height: 21px;
   border: 0;
   border-bottom: 2px solid #5A6A63;
}


#navbar ul {
   list-style: none;
   text-align: center;
   padding: 0;
   margin: 0;
}


#navbar ul li {
   display: inline;
}


#navbar ul li a {
   padding-left: 0.5em;
   padding-right: 0.5em;
   padding-bottom: 0.7em;
   background-color: #fff;

   border: 2px solid #5A6A63;
   border-bottom: 0;
   font-size: 8pt;
   font-weight: bold;
   color: #633;
   font-family: Arial, Helvetica, sans-serif;
}


#navbar ul li a:hover {
   color: #fff;
   background-color: #5A6A63;
}


#navbar ul li a.selected {
   padding-bottom: 0.9em;
}

#navbar ul li a.selected:hover {
   color: #633;
   background-color: #fff;
}


/*
 * </Navigation Bar>
 */


hr {
   color: #666;
   background-color: #666;
   width: 90%;
   height: 1px;
}

.shriek {
   display: block;
   font-size: x-large;
   font-weight: bolder;
   text-align: center;
}

.shriek a {
   text-decoration: none;
   color: #633;
}

.shriek a:hover {
   color: #f00;
}

.centretext {
   text-align: center;
}

h2 {
	color:#666;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 14pt;
	font-weight: normal;
	letter-spacing: -0.05em;
	line-height: 1.2;
	margin-top: 0.5em
}

a { color: #633; font-weight: bold;}

a:visited { color: #933; }

a:active { color: #633; }

a.nocolour, a.nocolour:visited {
   color: #CCC;
   text-decoration: none; /* visited: no colour too?*/
}

.minititle {
   font-weight: bold;
   text-decoration: underline;
}

.blanklink {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12pt;
   font-weight: bold;
   color: #696;
   margin: 0px; /* ?? */
}


.minilink {
   font-size: 9px;
}

.struckoff {
   text-decoration: line-through;
   color: #666;
}

.greyout { color: #CCC; }

.blackborder { border: 1px solid #000; }

table#fav {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10pt;
   border: 1px solid #696;
   padding: 0.2em;
   margin: 0.2em;
   margin-bottom: 0.6em;
}

table#fav tr td {
   background: #ddd;
}

table#fav th {
   font-weight: bold;
   background: #999;
   border-right: 1px solid #000;
   text-align: right;
   padding-right: 0.3em;
}

table#fav td {

}

.naruto {
   font-weight: 600;
   font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
   color: #f00;
}

/*
 * PROJECT TABLE
 */

#projects {
   border: 1px solid #000;
   border-collapse: collapse;
   width: 100%;
   background-color: #fcfffc;
   font-size: 9px;
}

#projects th {
   background: url(img/pt_th.png) repeat-x;
   height: 40px;
   padding: 3px;
   font-size: 12px;
}

#projects tr td {
   border: 0;
   border-top: 1px solid #999;
   padding: 0;
   padding-left: 1em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   padding-right: 1em;
/*   font-size: 9px; */
}

#projects td img {
   border: 0;
   padding: 0;
}

#projects tr td a {
   display: block;
/*   font-size: 12px; */
}

/* Higher-priority project rows (top 3-4 sizes exaggerated) */
.t1 {
   height: 58px;
}

.t1 td a {
   font-size: 14pt;
/*   font-size: 120%;*/
}

.t2 {
   height: 48px;
}

.t2 td a {
   font-size: 13pt;
}

.t3 {
   height: 38px;
}

.t3 td a {
   font-size: 12pt;
}


.tx td a {
   font-size: 12px;
}


/*
 * Twilight Princess header-bar release-date countdown timer
 */

#ztimer {
   position: relative;
   left: 330px;
   top: 54px;
   width: 100px;
   /* float: right; /* this maybe a mistake. */

   color: #fff;
   /* background-color: #000; */
   font-size: 8pt;
   font-family: Arial, Verdana, Helvetica, sans-serif;
}

#ztimer .d {
   font-family: Verdana, sans-serif;
   font-size: 8pt;
   font-weight: bold;
   color: #fff; /* #666; */
}

#ztimer .h {
   /* fonteffect: small capitals*/
   font-family: Verdana, sans-serif;
   font-size: 8pt;
   font-weight: bold;
   color: #fff; /* #00f; */
}

#ztimer .m {
   font-family: Verdana, sans-serif;
   font-size: 8pt;
   font-weight: bold;
   color: #fff; /* #0f0; */
}

#ztimer .s {
   font-family: Verdana, sans-serif;
   font-size: 8pt;
   font-weight: bold;
   color: #fff; /* #f00; */
}

/*
 * Progress bar (CSS integer progress meter)
 */
 
.pbar, .pbar50 {
   display: block;
   float: left;
   margin: 0 0 0 0;
   padding: 0;
   border: 1px solid #333;
   height: 6px;
   width: 100px;
   background: url("img/pbarbg.png") repeat-x;
/* absolutely no resizing, padding, or margin*/
}

.pbar50 {
   display: block;
   float: left;
   margin: 0 0 0 0;
   padding: 0;
   border: 1px solid #333;
   height: 6px;
   width: 50px;
   background: url("img/pbarbg.png") repeat-x;
}
.pfillgreen, .pfillyellow, .pfillred, .pfillorange {
/*   display: block; */
   float: left;
   margin: 0 0 0 0;
   padding: 0;
   height: 6px;
   /* width: 3px;  minimum */
   background: url("img/pbarg.png") repeat-x;
   border: 0;
}

.pfillyellow {
   background: url("img/pbary.png") repeat-x;
}

.pfillred {
   background: url("img/pbarr.png") repeat-x;
}

.pfillorange {
   background: url("img/pbaro.png") repeat-x;
}