/*
Title:      	The Keys stylesheet for screen media
Author:     	Karl Ridley, falling@happyleaves.com
Updated:    	08 September, 2008
*/


/* WRAPPERS */

body {
	font-family: Arial, Helvetica, "Lucida Grande", "Verdana", sans-serif;
	font-size: small;
	text-align: left;
	color: #17519f;
	margin: 0;
	background: #092f62 url(../jpg/index/bg-tile.jpg) repeat top left;
	}

#html body {
	font-size: x-small; /* IE5/Win */
	font-size: small; /* for other IE versions */
	}
	
h1 {
	font-size: 140%;
	color: #ffffff;
	line-height: 1.3em;
	}
	
h2 {
	font-size: 110%;
	color: #ffffff;
	}
	
h3 {
	font-size: 105%;
	color: #ffffff;
	}
	
.clear {clear:both;line-height:-1px;height:-1px;}
	
.diagonal-divline {
	height: 5px;
	width: 100%;
	margin: 10px 0 10px 0;
	background: url(../gif/diagonal-divline.gif) repeat-x top left;
	}
	




/* INDEX COMPONENTS */	

#indexwrapper {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	}
	
#optionsholder {
	width: 520px;
	padding: 100px 0 0 0;
	margin: 0 auto;
	background: url(../jpg/index/top.jpg) top left no-repeat;
	}	
	
#keysyarm {
	width: 260px;
	height: 350px;
	padding: 0;
	margin: 0;
	float: left;
	}	
	
.enteryarm {
	margin: 0;
	padding: 350px 0 0 0;
	list-style: none;
	display: inline;
	overflow: hidden;
	text-align: left;
	}

.enteryarm li {
	margin: 0; 
	padding: 0;
    list-style: none;
	display: inline;
	}

.enteryarm a {
	float: left;
	padding: 350px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:350px; /* for IE5/Win only */
	}
	
.enteryarm a:hover {
	background-position: 0 -350px;
	}

.enteryarm a:active, .enteryarm a.selected {
	background-position: 0 -350px;
	}
	
.enteryarmimg a {
	width: 260px;
	background: url(../jpg/index/entrance-yarm.jpg) top left no-repeat;
	}		
	
#keysmiddlesbrough{
	width: 260px;
	height: 350px;
	padding: 0;
	margin: 0;
	float: right;
	}
	
.entermiddlesbrough {
	margin: 0;
	padding: 350px 0 0 0;
	list-style: none;
	display: inline;
	overflow: hidden;
	text-align: left;
	}

.entermiddlesbrough li {
	margin: 0; 
	padding: 0;
    list-style: none;
	display: inline;
	}

.entermiddlesbrough a {
	float: left;
	padding: 350px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:350px; /* for IE5/Win only */
	}
	
.entermiddlesbrough a:hover {
	background-position: 0 -350px;
	}

.entermiddlesbrough a:active, .entermiddlesbrough a.selected {
	background-position: 0 -350px;
	}
	
.entermiddlesbroughimg a {
	width: 260px;
	background: url(../jpg/index/entrance-boro.jpg) top left no-repeat;
	}				

#footerindex {
	width: 520px;
	margin: 0 auto;
	padding: 0 0 10px 0;	
	}
	
.footertxtindex {
	padding: 0;
	color: #37619d;
	font-size: 85%;
	line-height: 1.6em;	
	text-align: center;
	}	

.footertxtindex a:link, .footertxtindex a:visited {
	color: #37619d;
	text-decoration:none;
	}

.footertxtindex a:active, .footertxtindex a:hover {
	color: #5f88c4;
	text-decoration:none;
	}	
	
#happylinkholder {
	width: 145px;
	margin: 0 auto;
	padding: 0;
	}	
	
.happylink {
	margin: 0;
	padding: 15px 0 0 0;
	list-style: none;
	display: inline;
	overflow: hidden;
	text-align: left;
	}

.happylink li {
	margin: 0; 
	padding: 0;
    list-style: none;
	display: inline;
	}

.happylink a {
	float: left;
	padding: 15px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/: 15px; /* for IE5/Win only */
	}
	
.happylink a:hover {
	background-position: 0 -15px;
	}

.happylink a:active, .happylink a.selected {
	background-position: 0 -15px;
	}
	
.happylinkimg a {
	width: 145px;
	background: url(../gif/happyleaf-new.gif) top left no-repeat;
	}