/*
	Created by: Duncan
	Last revised: 18.01.28

	Format - Tabs: 4sp
	Format - Tags:
		Seclector Name{
			Unusual					- So I will notice I used one!

			Box						- All the properties that define a Box in logical order (to ME)
			Syling					- All presentation styling

			Position				- All element position related properties
		}

	Format - Geometric:
		Height, Width
		Margin, Border, Padding
		(T,L), (B,R)
*/

*{
	margin: 0;						/* a common way to start cross-compatibility, most other non-text defaults are acceptable */
	border: 0;
	padding: 0;
}

a{
	background: White;
	color: #00008B;
	font-weight: bold;				/* as much aid to the color-blind as I can give */
	text-decoration: none;			/* I find a page a lot less cluttered without underlines */
}

a:visited{
	background: White;
	color: #A0522D;
}

a:hover{
	text-decoration: underline;		/* I like links that activate on mouse-over and this doesn't require JS */
}

body{
	background: White;
	color: Black;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;				/* center all block elements */
}

/* div{border:1px solid Black;} */	/* just here so I can check my layouts */

div#container{
	width: 740px;
	margin: 0 auto;

	position: relative;
}

div#errheader{
	height: 69px;
	text-align: left;
}

div#errheader hr{
	height: 4px;

	position: relative;
}

div#errlpane{
	width: 360px;					/* a perfect circle - see below ^^;; */

	position: absolute;
	top: 76px;						/* just because I was born then ^^;; */
	left: 0;
}

div#errrpane{
	width: 380px;
	font-size: 16px;
	text-align: left;

	position: absolute;
	top: 69px;						/* to push the text=top above the image, it is positioned 7px higher */
	left: 360px;
}

div#lpane{
	display: table;

	height: 540px;
	width: 340px;

	position: absolute;
	top: 0;
	left: 0;
}

div#lpane p{
	display: table-cell;

	vertical-align: middle;
}

div#rpane{
	width: 400px;
	text-align: justify;

	position: absolute;
	top: 0;
	left: 340px;
}

div#stdheader{
	height: 69px;
	text-align: right;				/* more IE hacks... some things I can stand, but others >.< */
}

div#stdheader h1{
	width: 360px;
	margin-left: auto;
	margin-right: 0;

	text-align: center;				/* restoring after last IE hack */
	
	position: relative;
	top: 10px;
}

div#stdlpane{
	width: 380px;
	font-size: 14px;

	position: absolute;
	top: 69px;
	left: 0px;
}

div#stdlpane p{
	margin-left: auto;
	margin-right: 0;
	text-align: left;
}

div#stdrpane{
	width: 360px;					/* a perfect circle - see above ^^;; */

	position: absolute;
	top: 73px;						/* when the image is on the right, it looks better if it is even with the text and not below it */
									/* ps - it's a cyclic prime too ^^;; */
	left: 380px;
}


h1{
	font-size: 29px;				/* couldn't decide on size so picked the age I am now ^^;; */
	font-weight: bold;
}

h1#errcode{
	width: 360px;
	background-color: White;
	color: Red;
	text-align: center;

	position: absolute;
	top: 0;
	left: 0;
}

h1#errdesc{
	width: 380px;

	position: relative;
	top:  0;
	left: 360px;
}

hr{
	height: 2px;
	margin: 1.4em 0;
	background: Black;				/* some browsers use this value */
	color: Black;					/* IE uses this value */
}

p{
	margin: 1em 0;
}

.classic{
	font-family: Georgia, serif;
	font-size: 13px;
}

.lrule{
	margin-left: 0;
	margin-right: auto;
}

.navtext{
	font-size: 13px;
}

.subtext{
	font-size: 10px;
}

.title{
	font-size: 16px;
}

.w76p{
	width: 76%;						/* year of the dragon and the year I was born ^^;; */
}

.w88p{
	width: 88%;						/* also a year of the dragon ^^;; */
}

.w94p{
	width: 94%;						/* the year I graduated from high school ^^;; */
}