body {
	/*these are the details for the background and the also all settings unspecified elsewhere*/
	background-image: url(images/background.jpg);
	/*the above is the background picture. to change, put the proposed picture in the 'images'
	  folder and either rename it or change the text above. experiment!*/
	background-attachment: fixed;
	line-height:1.2em;
}

.page {
	/*this is the box that contains everything*/
	background-color:#FFFFFF;
	position:absolute;	
	margin-top:15px;
	left:50%;
	margin-left:-380px;
	/*the preceding two lines centre the main box on the page*/
	border-color:#000066;
	border-width: 1px;
	border-style: solid;
	visibility:visible;
	display:block;
	width:760px; 
	voice-family: "\"}\"";  
	voice-family:inherit;   
	width:758px;
	/*last three lines are a trick. ie5 only sees up to the 'voice-family' malarky
	  and gets stuck, thus concluding that the border inclusive width is 760. Mozilla 
	  exclusive width is 758: (760 - 2 x 1px border). this trick is repeated throughout
	  to ensure multi-browser compatibility. it is necessary because IE 5 thinks that 
	  any defined border is part of the specified width whereas Firefox knows that it 
	  should be exclusive. credit to Tantek Çelik - http://www.tantek.com*/
}							

/*-----------------------------------------------------------THE TOP BANNER---------------------------------------------------------*/

.banner {
	/*this is simply the dark blue box*/
	background-color:#000066;
	display:block;
	visibility:visible;
	border-top-style:none;
	border-left-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-bottom-color:#ffffff;
	border-bottom-width:2px;
	/*the copious border definitions above create the white line between
	  this object and the triangle*/
	width:758px;
	height:90px;
}

.logoslot {
	/*the slot for the logo*/
	position:absolute;
	top:5px;
	left:5px;
	width:150px;
	height:82px;
	background-color:none;
}

.logoslot a img {
	color:none;
	border-style:none;
}

#strapline {
	/*for the company slogan*/
	position:absolute;
	color:white;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:larger;
	right:4px;
	bottom:10px;
	float:none;
}

.navbar{
	/*this is the navigation bar holder*/
	position:absolute;
	color:white;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	width:600px;
	right:4px;
	top:2px;
	height:96px;
	text-align:right;
}

.navbar a {
	/*this determines what the links within the bar look when left alone*/
	color:white;
	text-decoration:none
}

.navbar a:visited {
	color:white;
		/*this ensures that, once visited and left, the links remain the same style*/
	text-decoration:none
}

.navbar a.contact:hover {
	/*this is the colour of the links when the mouse hovers over them*/
	.strapline visibility:hidden;
}

.navbar a:hover {
	/*this is the colour of the links when the mouse hovers over them*/
	color:#0099FF;
}

/*----------------------------------------------------------THE PRETTY COLOUR CHANGING HEADER--------------------------------*/

.pagetitle {
	position:absolute;	
	color:#ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:x-large;
	height:30px;
	top:132px;
	/*the font-size and the top values have correspondence. The smaller the font, the larger
	  the top value to keep visual consistency. I don't have a mathematical rule, unfortunately,
	  but play around*/
	right:453px;
	/*this is pixel-perfect to align with the border of the picture*/	
}

.triangleborderdraw { 
	/*this simply establishes the triangle*/
	border-style: solid; 
	width: 0px; 
	height: 0px; 
	line-height: 0px; 
}

.trianglecolourandshape { 
	/*this defines the exact proportions and default color of the triangle*/
	border-width: 67.5px 369px 67.5px 369px;
	/*border-left-color:#7895c6;
	border-top-color:#7895c6;
	/*the two colours above define the colour of the triangle. change them BOTH and 
	  the colour of the box below (called ".pictureborder"). The is 'commented' in its
	  entirety because this style is now define within the HTML*/
	border-bottom-color:#ffffff;
	border-right-color:#ffffff;
}


/*-----------------------------------------------------------THE LEFT COLUMN---------------------------------------------------*/

.leftcolumn {
	/*this contains all left hand column contents*/
	position:absolute;
	margin-left:29px;
	margin-top:-61px;
	/*the above looks odd but it is what makes the box 'hover' over the triangle
	 - when it is placed, it sits directly under '.triangleborderdraw', so I have
	 to counteract that.*/
	width:276px;
}

#pictureborder {
	/*to create a border that works in IE and firefox*/
	height:212px;
}

#pictureframe {
	/*this contains the picture - that's all*/
	position:relative;
	top: 10px;
	left: 10px;
}

#contentholder {
	/*for quotes and suchlike, default font and style is for actual quote.
	  other styles (such as h1) can be added for other bits */
	background-color:#ffffff;
	height:202px;
	margin-top:20px;
	margin-bottom:20px;
	text-align:left;
	font-size:large;
	line-height:1.1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	padding-right:10px;
}

#contentholder h1 {
	/*for the origin of quotes*/
	font-size:small;
	color:#000000;
	text-align:left;
}

#contentholder a img {
	/*any links that are pictures - to get rid of an irritating border!*/
	color:none;
	border-width:0px;
}

/*----------------------------------------------------------------THE MAIN PAGE BODY---------------------------------------------*/

.textholder {
	/*the big box for main body content*/
	position:relative;
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#ffffff;
	width:440px;
	right:5px;
	margin-top:-54px;
	float: right;
	/*remove the line below at the end*/
	/*height:2500px;*/
}

.textholder h1 {
	/*the header definitions for the above*/
	font-size:small;
	color:#000066;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

.textholder h2 {
	/*the header definitions for the above*/
	font-size:small;
	color:#000066;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

.textholder a {
	/*the format for all links within the textholder*/
	color:#666666;
	text-decoration:none;
}

.textholder a:hover {
	/*obviously the hover settings*/
	text-decoration:underline;
}

.textholder ul {
	/*this is the formatting for any unordered lists within the textbox*/
	/*margin:0 0 5px 0;*/
	list-style:dot;
}

.bottombanner {
	/*the minature navbar*/
	position:absolute;
	float:none;
	width:auto;
	height:auto;
	background-color:#ffffff;
	color:#000066;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	margin:20px 0px 10px 0px;
	bottom:0px;
}

.bottombanner a {
	/*this determines what the links within the bar look when left alone*/
	color:#000066;
	text-decoration:none
}

.bottombanner a:visited {
	/*this ensures that, once visited and left, the links remain the same style*/
	color:#000066;
	text-decoration:none
}

.bottombanner a:hover {
	/*this is the colour of the links when the mouse hovers over them*/
	text-decoration:underline;
}