/*
Site Colour Scheme (taken off letter designs)

Rings in background:

(outermost) dark: f3f3e6
(next in)  light: f7f8e8

"LandLab" + <hr /> + footer-bg colour: 8b8...

actual, proper, photo-sourced green: 919733

Darker green for address text (and possibly some body text?): 334620

font-face: DejaVuSans

*/

body {
   color: #fff;
   font-size: 10pt; /*76%; /* 10pt; */
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   margin: 0;
   text-align: center;
   background: #808080 url("img/bg_rings.png") fixed no-repeat 60px 35px;
   z-index: -10;
}

/* Non-floated, centre container that gives the page's elasticity on both sides. */
#content {
   width: 800px; /* 15px wide vertical scrollbar. :S*/
   /* height: 100%; */
   padding: 0 0 1.5em 0;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
   clear: both;
   background: transparent;
}


#page {
/*   font-family: Arial, Helvetica, sans-serif; */
   padding: 0 0 0 0;
   float: left;
   text-align: left;

/*   background: transparent;
   background: #000 url('img/bg_rings_black.png') fixed no-repeat 60px 35px; */
   background: #888888 url('img/bg_rings_slight.png') fixed no-repeat 60px 35px;
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 15px;
   /* border: 1px solid #080; */
   width: 800px;
}

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

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


/* -- PAGE TOP HEADING BAR -- */

#headercentre {
   width: 800px; /* 600px; */
   padding: 0 0 0 0;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

#headbar {
/*   background: url('img/topbar_logo.png') no-repeat 0px 0px; */
   width: 800px;
/*   height: 78px; */
   height: 25px;
/*   border: 0;
   margin: 0;
   margin-bottom: 0.5em; */
   /* border: 1px solid #00f;*/
   position: relative;
}


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

a#headbarcont {
   display: block;
   float: left;
   width: 120px;
   height: 18px;
/*   top: 57px; */
	top: 2px;
   left: 630px;
   border: 0; /* 1px solid #f00; */
   position: absolute;
   background: url(img/topbar_email.png) no-repeat center center;
}

#randquote {
   display: none;
   /*
   font-family: DejaVuSans, Verdana, Arial, Helvetica, sans-serif;
   font-size: 1.0em;
   color: #999;
   margin: 0;
   text-align: left;

   position: absolute;
   z-index: 2;
   top: 4px;
   left: 225px;
   width: 575px;
   height: 50px; */
}

.llfan {
   font-style: oblique;
   font-weight: bold;
   font-size: 0.9em;
}

/* --Some general page settings for common elements -- */
img {  border: 0; margin: 0; margin-right: 0.3em; }/*.4em; }*/

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

img.vport {
   float: left;
   clear: left;
   margin-bottom: 1.2em;
   margin-right: 1.2em;
}

a.vporta {
   text-decoration: none;	/* for IE. :( */
}

/* --MAIN AREAS OF CONTENT ALIGNMENT: Left, Right and Bottom (footer)-- */
#sidecol {
   /* background: url(img/grey_bg.png) repeat-y; */
  /* font-size: 8pt; */
   width: 120px;
   float: left;
   padding: 0;
   margin: 0;
   background: transparent;
}

#sidecol p, #sidecol ul {
   font-size: 0.8em;
}

#maincol {
   float: left; /* right */
   width: 459px; /* 734px; */
   margin : 0;
   /* margin-bottom: 1.5em; */
   border-left: 1px solid #fff; /*54655e; /* #919733; */
   padding: 0;
   padding-left: 15px;
   margin-bottom: 1em;
}

#footer2 {
   font-size: 0.8em;
   float: left;
   color: #fff;
   text-align: right;
   width: 100%;
   height: 25px;
   margin: 0;
   padding: 0;
   padding-top: 0.4em;
/*   border-top: 1px solid #616703; */
/*   background-color: #919733; */
   background: #808080 url("img/bg_rings.png") fixed no-repeat 60px 35px;
   /*background: #919733 url('img/footerbar.png') no-repeat top right;  FOOTERBAR */
}

#footer2 #inner {
   width: 100%;
}

#footer2 a {
   font-size: 0.8em;
   color: #fff;
}


/* -- Individual content boxes -- */
.article {
   text-align: center;
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   vertical-align: top;
   border: 0; /* solid #919733; */
   padding: 0.2em;
   padding-top: 0;
   margin: 0;
   margin-top: 1em;
   margin-bottom: 1em;
}

.biblio {
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   vertical-align: top;
   text-align: left;
   padding: 0.2em 0.6em 0.2em 0;
   font-size: small;
   margin-bottom: 1em;
   padding: 1em;
   padding-top: 0;
}

.callout {
   font-size: larger;
   text-align: justify;
   /* font-variant: small-caps; */
   padding-left: 2em;
   padding-right: 2em;
   margin-top: 1.2em;
}

.numberfield {
   font-family: monospace;
   color: #333;
}

/*
.auth
.bibdate
.
*/

.article p {
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
}

ul {
  text-align: left;
  list-style: square outside url('img/bullet.png');
  padding-left: 0.9em;
  margin-left: 0.2em;
}

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

/*
 * Navigation Bar
 * <doNotMessWithThis>
 */
#navstrip {
   background: transparent;	/* #919733; */
   color: #fff;
   float: left;
   width: 100%;
   text-align: left;
   margin-bottom: 1em;
}

#navleft {
/*   background: #800; */
   display: inline;
   float: left;
   width: 16em;
   margin: 0;
   padding: 0;
	position: relative;
	top: 0;
	left: 0;
}

#navmiddle {
   width: 34em;
   margin-left: auto;
   margin-right: auto;

/*	margin-left: 6em; */
}

#navwrapper {
   float: left;
   background: #808080;
   border: 1px dashed #090;
}

#navbar {
   float: left;
   text-align: left; /* if desired */
   margin: 0.2em;
   padding-left: 0.1em;
   padding-right: 0.1em;
   background: transparent;
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   font-size: 8pt;
}

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


#navbar ul li {
   display: inline;
   margin: 0;
}


#navbar ul li a {
   padding: 0.2em;
   padding-left: 0.4em;
   padding-right: 0.4em;
   /* background-color: #fff; #919733; */
   background: transparent;
   font-size: 8pt;
   font-weight: bold;
   color: #fff; /* #000;*/
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
   border: 1px solid #fff;
   border-top: 0;
}

/* </doNotF*ckWithThis> */


#navbar ul li a:hover {
   color: #ccc; /* #000; */
   background-color: #808080; /* #818723; */
   padding-bottom: 0.3em;
}


#navbar ul li a.selected {
   background-color: #808080;
   border-color: #ccc;
   color: #fff;
}

#navbar ul li a.selected:hover {
   color: #999;
   cursor: default;
}

/* Heading sizes and paragraph levels */

h1 {
   display: block;
   font-weight: normal;
   text-align: left;
   margin: 0;
   color: #fff;
   font-size: 1.4em;
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
/*   font-family: "DejaVu Serif", "Times New Roman", Times, serif; */

   padding: 2px 0px 2px 0px; /* Top, right, bottom, left */
}

h2 {
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   font-size: 1.2em;
   text-align: left;
   font-weight: normal;
   color: #fff;
   margin-top: 0;
   padding: 2px 0px 2px 0px;
}

h3 {
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   font-size: 1.1em;
   font-weight: normal;
   text-align: left;
   padding: 2px 0px 2px 0px;
   color: #fff;
}

h4 {
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
}

a {
   color: #fff; /* #919733; */
}

a:hover {
   color: #343;
}

a:visited { color: #333; }

a:active { color: #363; }

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

/* Paragraph sizes */

.p1 {
   font-size: 1.1em;
}

.p2 {
   font-size: 0.9em;
}

.p3 {
   font-size: 0.8em;
}

hr {
   border: 0;
   color: #fff; /* #334620; */
   background-color: #fff; /* #334620; */
   width: 80%;
   height: 1px;
}


/* BAD! */
.centretext {
   text-align: center;
}

.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: #ccc;
}

.greyout { color: #ccc; }

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

table#awards {
   text-align: left;
}

table#awards tbody tr td {
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 0.4em;
   padding-bottom: 0.4em;
   vertical-align: top;
}

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 {

}


/*
 * PROJECT TABLE
 */
/* A div containing a single project 'thumbnail' description*/
.project {
/*   display: block; */
   float: left;
   margin: 0;
   margin-left: 1em;
   margin-right: 1em;
   padding: 0.2em;
   /* width: 90%; */
}

.projlist {
   float: left;
   margin-top: 1em;
   margin-bottom: 4.2em;
   list-style: none;
}

.projlist li {
   font-family: DejaVuSans, Arial, Helvetica, sans-serif;
   text-align: left;
   display: block;
   padding: 0;
   float: left;
   margin: 0.3em;
   background-color: #888;
   width: 116px;
   height: 116px;
}

.projlist li a {
   display: block;
   width: 116px;
   height: 116px;
}

.projlist li img {
   border: 0;
   margin: 0;
   padding: 0;
}

/* Rollover image classes for each project */
#dkskies {			 background-image: url("gallery/116darkskies.jpg");   }
#dkskies:hover {   background-image: url("gallery/116darkskieso.jpg");   }
#cloff {			 background-image: url("gallery/116cloff.png");   }
#cloff:hover {   background-image: url("gallery/116cloffo.png");   }
#felix {			 background-image: url("gallery/116helix.jpg");   }
#felix:hover {   background-image: url("gallery/116helixo.jpg");   }
#vfroad {			 background-image: url("gallery/116vroad.jpg");   }
#vfroad:hover {   background-image: url("gallery/116vroado.jpg");   }
#borea {			 background-image: url("gallery/116detail.jpg");   }
#borea:hover {   background-image: url("gallery/116detailo.jpg");   }
#halo {			 background-image: url("gallery/116halo.jpg");   }
#halo:hover {   background-image: url("gallery/116haloo.jpg");   }
#bdress {			 background-image: url("gallery/116dress_f0332.jpg");   }
#bdress:hover {   background-image: url("gallery/116dress_f0332o.jpg");   }
#dozer {			 background-image: url("gallery/116dozer.jpg");   }
#dozer:hover {   background-image: url("gallery/116dozero.jpg");   }
#pega {			 background-image: url("gallery/116pegtail.png");   }
#pega:hover {   background-image: url("gallery/116pegtailo.png");   }


.arealink {
   color: #fff;
   text-decoration: none;
   display: block;
   overflow: hidden;
   position: relative;
	height: 8.5em;
	width: 98%;
}

/*.arealink[id] {
	display: table;
	position: static;
}*/

/*#alinkm[id] {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	position: static;
}*/

.arealink:hover, .arealink:visited, .arealink:active {
   color: #fff;
   font-weight: bold;
   text-decoration: none;
}

.navlist {
   font-size: 8pt;
   float: right;
   list-style: none;
   display: block;
   margin: 0;
   margin-right: 8px;
   padding: 0;
/*    width: 200px; */
}

.navlisttitle {
   text-align: center;
   margin-bottom: 1.2em;
   font-size: large;
}

.navlist li {
   margin: 0;
   text-align: right;
   display: block;
   /* margin-right: 1em; */
}

.navlist li:hover {

}

.navlist li a {
   display: inline;
   font-weight: bold;
/*   padding-top: 0.5em;
   padding-bottom: 0.5em; */
}

.navlist li a:hover {
/*   background-color: #919733; */
   color: #343;
/*   text-decoration: none; */
}

.navlist li a:visited {
   color: #ccc;
}

#projects {
   border: 1px solid #000;
   text-align: left;
   border-collapse: separate; /* collapse; */
   width: 100%;
   background-color: #fcfffc;


}

.practicedropdown {
   display: none;
   
}


#projects th {
   background: #696; /* url('img/pt_th.png') repeat-x; */
   color: #fff;
   border-top: 2px solid #ccc;
   border-left: 2px solid #ccc;
   border-right: 2px solid #999;
   border-bottom: 2px solid #999;
   height: 40px;
   padding: 3px;
}

#projects 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 td a {
   display: block;
   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; */
}


.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;
/* absolutely no resizing, padding, or margin*/
}

.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;
}


/* Zebra tables: */




/* Lightbox CSS */

#lightbox{
   background-color:#eee;
   padding: 10px;
   border-bottom: 2px solid #666;
   border-right: 2px solid #666;
}

#lightboxDetails{
   font-size: 0.8em;
   padding-top: 0.4em;
}

#lightboxCaption{
   float: left;
}

#keyboardMsg{
   float: right;
}

#closeButton{
   top: 5px;
   right: 5px;
}

#lightbox img{
   border: none;
   clear: both;
}

#overlay img {
   border: none;
}

#overlay {
   background-image: url(overlay.png);
}

* html #overlay{
   background-color: #333;
   back\ground-color: transparent;
   background-image: url(blank.gif);
   /* filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png",
   sizingMethod="scale"); */
}

.collapser {
  size: -1pt;
}

#bigim {
	float: left;
	width: 800px;
	height: 600px;
/*	background: #803380 url('gallery/blank.jpg') no-repeat 0 0;*/
	padding: 0;
	margin: 0;
/*  background: #808080 url('gallery/800boreal1.jpg') no-repeat fixed 32px 32px; */
}

#backpane {
	float: left;
	width: 800px;
	height: 600px;
	padding: 0;
	margin: 0;
	z-index: -10;
}

#movieanchor {
   position: relative;
   background-color: #f00;
   top: 0;
   left: 0; /* width and height 0.. */
   height: 0;
   width: 0;
}

#movieroot {
   position: absolute;
}

#movieslide {
	/* float: left;*/
   position: relative; /* clashes with Pos: relative in viewpane. Think of a fix! Look up shotokan! */
   /* float: through? */
   z-index: 0;

   
   left: 240px;
   top: 180px;
}


/*NB: the bg image 'underlay' is mid (808080) grey at 85% alpha. */
#viewpane {
   position: relative;
   top: 24px;
   left: 24px;
   float: left;
   width: 700px;
   margin: 0em;
   padding: 0em;
   size: 10pt;
   color: #fff;
   background: url('underlay.png') repeat 0 0;
   z-index: 10;
}

#rem {
   margin: 0;

}

#logotoggler {
   cursor: pointer;
   float: left;
   padding: 0;
   border: 1px solid #fff;
}

#inoutmsg {
   font-size: 8pt;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   margin-top: 0;
   margin-bottom: 0; 
}

#mw {
/*   font-size: 6pt; */
/*   color: #fff; */
}

#mw a, #mw a:visited, #mw a:hover {
   color: #fff;
   text-decoration: none;
   /* cursor: default; */
}