/*
General styles for Talespinner site
October 2005
© Mark Iliff, Talespinner - www.talespinner.co.uk
*/


/* Global ************************************/

	body {
		font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
		font-size: 100%;
		background: #ffffff;
		margin: 0;
		padding: 0;
	}

	p {margin-left: 0.3em;}

	a {color: #120eae;}

	a:hover {color: #ff7f15;}
	
	img {border: 0}


/* Layout ************************************/

	#topBar {
		/* Next line fixes IE Win jitter bug... but not without a cost!
			width: expression(this.parentNode.offsetWidth * 0.98 + 'px');*/
		width: 100%;
		margin: 0; 
		background-color: #eeeeff;
		background-image: url("../images/gradFillTop.gif");
		background-repeat: repeat-x;
		background-position: center;
		vertical-align: middle;
		height: 165px;
		/* Next line stops FF inserting a gap above */
			border-top: 1px solid #eef;
	}

	#available {
		width: 185px; 
		float: right; 
		margin-top: 5px; 
		margin-right: 5px;
	}

	#available table {
		 font-size: 0.8em; 
		 vertical-align: middle; 
		 background-color: white;
	}

	#available caption {
		text-align: center; 
		background-color: #eeeeff; 
		border: 2px solid white; 
		font-weight: bold;
	}

	#contentArea {
/*
		margin-left: 205px; 
*/
		margin-left: 10px; 
		margin-right: 10px;
	}

	td.spaceTop {
		width: 50%;
		text-align: right;
		padding-top: 10px;
		padding-bottom: 20px;
	}

	td.spaceTop img {
		border: 0;
	}

	td.spaceBottom {
		width: 50%;
		padding-bottom: 20px;
	}

	/* For compliant browsers */
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		margin-top: 180px;
		float: left;
		height: 100%;
		width: 200px;
	}

	/* For IE Win - under development
	* html{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	* html body{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	*/

	* html body .fixed {
		position: absolute;
		top: 0;
		left: 0;
		float: left;
		height: 100%;
		width: 200px;
		margin-top: 200px;
	}
	
	#floatBoxR {
		width: 40%;
		padding: 1em;
		float: right;
		margin-left: 5px;
		margin-bottom: 5px;
	}

	td.listCell20,
	td.listCell30,
	td.listCell50,
	td.listCell {
		vertical-align: middle;
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 3px solid #eeeeff;
	}

	td.listCell20 {
		width: 20%;
	}
	
	td.listCell30 {
		width: 30%;
	}

	td.listCell50 {
		width: 50%;
	}

	td.listCell30 h2 {
		margin-top: 0;
		margin-bottom: 0;
	}

	td.cell80 {
		width: 80%;
	}

	div.offsetR {
		margin-left: 20%; 
		margin-right: 20px;
	}

	p.clear,
	p.clearDivide {
		clear: both;
	}
	
	p.clearDivide {
		border-top: 2px solid #eeeeff;
	}


	
/* Colour scheme******************/ 

	h1,
	#floatBoxR,
	tr.shadeMid td,
	td.shadeMid {
		background: #eeeeff;
	}

	h1,
	h3 {
		border-bottom: 1px solid #120eae;
	}

	h1,
	h2,
	h3,
	.accent {
		color: #120eae; 
	}

	#sideBar p {
		color: #ff7f15;
	}
	
	#floatBoxR {
		border: 1px solid #120eae;
	}

/* Text*********************** */

	h1 {
		margin-top: 20px;
		margin-bottom: 10px;
		margin-left: 0.2em;
		font-size: 1.5em;
		font-weight: normal;
		padding-left: 0.3em;
	}

	h2 {
		margin-top: 0;
		margin-bottom: 30px;
		margin-left: 0.5em;
		font-size: 1.1em;
		font-weight: normal;
		font-style: italic;
	}

	#floatBoxR {
		font-size: 0.9em;
	}

	#popContent h1 {
		margin-bottom: 30px;
	}
	
	#popContent h2 {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0.5em;
		font-size: 1.1em;
		font-weight: normal;
		font-style: italic;
	}

	#popContent p {
		margin-left: 0.5em;
		margin-top: 0;
	}	

	#sideBar p {
		margin: 10px;
		text-align: center;
		font-size: 0.8em;
		font-style: italic;
	}
	
	.goRight {
		text-align: right;
	}
	
/*
	h3 {
		font: 100% "Trebuchet MS", Verdana, Arial, sans-serif;
		font-weight: normal;
		margin: 0.1em;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	td.spaceTop {
		padding-top: 10px;
		padding-bottom: 20px;
	}
	td.spaceBottom {
		padding-bottom: 20px;
	}
*/