/****************************************************************
NB.  This may be how it looks but ain't necessarily how it now works!

	Page layout is as follows...
	 __________________________________________________
	|//////////| #HeadBox (headings)
	|/+------+/|
	|-|#Joyce|-------------------------------------
	| | Pic  |   #NavBar (navigation bar)
	|-|      |-----------------------------------
	|/+------+/|
	|///////////------------------------------------
	|////////////#Title/////////////////////////////
	|///////////------------------------------------
	|//////////|
	|//////////| #Content
	|//// ^ 
	      |___ pale blue colour bands
	
****************************************************************/

body {
	position: relative;
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS", Verdana, Arial, helvetica, sans-serif;
	color: navy;
	font-size: 10pt;
}

table {
	font-family: "Trebuchet MS", Verdana, Arial, helvetica, sans-serif;
	color: navy;
	font-size: 10pt;
}

tr {
	vertical-align: top;
}

#container {
	float: left;
	width: 100%;
	background-image: url(images/bg.gif);
	background-repeat: repeat-y;
}
	
/******************************************/
/*  Joyce's Picture overlaid on the page  */
/******************************************/
#joycepic {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 700;
/*
	background-image: url(images/joyce3b.gif);
	background-repeat: no-repeat;
	*/
/*src="../images/joyce3b.gif" width="145" height="158"	*/
}

/*************************************/
/*  The headings appear in a box...  */
/*************************************/
#HeadBox {
	position: relative;
	padding-left: 185px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: black;
	white-space: nowrap;
}

#HeadBox h1, #HeadBox h2, #HeadBox h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 5px 0px;
	font-weight: bold;
}

#HeadBox h1 {
	font-size: 1.25em;
}
#HeadBox h2 {
	font-size: 1.15em;
}
#HeadBox h3 {
	font-size: 1.05em;
}


/*******************************************************************************/
/*  The navigation bar goes across the page.  This comprises a darker spacer,  */
/*  a light spacer and a combination of buttons and spacers.                   */
/*******************************************************************************/
#NavBar {
	position: relative;
	top: 0px;
	left: 0px;
	height: 27px;
	width: 100%;
	background-image:   url(images/mainbar_bg.gif);
	background-repeat: repeat-x;
}
#NavBar2 {
	float: left;
	width: 100%;
	left: 0px;
	height: 27px;
	background-image:   url(images/mainbar_bg.gif);
	background-repeat: repeat-x;
}

#NavBar #SpacerL1, #NavBar2 #SpacerL1 {
	width: 165px;

	height: 27px;
	top: 0px;
	padding: 0px;
	line-height: 27px;	
	float: left;
	background-image: url(images/mainbar_bg_dark.gif);
	background-repeat: repeat-x;
	z-index: 7;
}
#NavBar #SpacerL2, #NavBar2 #SpacerL2 {
	position: relative;
	width: 20px;

	height: 27px;
	top: 0px;
	padding: 0px;
	line-height: 27px;	
	float: left;
	background-image: url(images/mainbar_bg.gif);
	background-repeat: repeat-x;
}
#NavBar .Spacer, #NavBar2 .Spacer {
	position: relative;
	width: 4px;

	height: 28px;
	top: 0px;
	padding: 0px;
	line-height: 27px;	
	float: left;
	background-image: url(images/spacer.gif);
	background-repeat: repeat-x;
}

#NavBar2 .message {
	position: relative;
	top: 4px;
	color: red;
	font-weight: bold;
	padding-left: 20px;
}

.NavBtn, #NavBar2 .NavBtn {
	position: relative;
	height: 27px;
	top: 0px;
	padding-left: 7px;	
	padding-right: 7px;	
	background-image:   url(images/mainbar_bg.gif);
	background-repeat: repeat-x;
	float: left;
	border-left: 1px solid navy;
	border-right: 1px solid navy;
	font-size: 0.9em;
	z-index: 8;	/* if the buttons wrap they will overlay "JoycePic" */
}

a.NavBtn, #NavBar2 a.NavBtn {
	text-decoration: none;
	color: navy;
	font-weight: bold;
	line-height: 27px;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
/*	font-size: .8em;	*/
}
a:hover.NavBtn, #NavBar2 a:hover.NavBtn {
	color: blue;
	background-image: url(images/mainbar_bg_hover.gif);
	background-repeat: repeat-x;
}
/*
.NavSpc {
	position: relative;
	height: 34px;
	width: 2px;
	top: 0px;
	padding-left: 0px;	
}
*/

/*********************************************************************************/
/*  A line of pale blue goes across the page and a block is down the left side   */
/*********************************************************************************/
#Decoration_h {
	position: relative;
	margin-top: 10px;
	height: auto;
	width: 100%;
	background-color: #DDFFFF;
	z-index: 1;
}

/***************************************************************************/
/*  The page title superimposes on the horizontal blue line of decoration  */
/***************************************************************************/
#title {
	float: left;
	/*
	top: 120px;
	height: 24px;
	vertical-align: middle;
	top: 10px;
	line-height: 24px;
	*/
	padding-left: 175px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #DDFFFF;
	width: 100%;	
	font-weight: bold;
	color: black;
	white-space: nowrap;
}

/**********************************************************************************/
/*  The main content appears below and to the right of the blue decoration lines  */
/*	This is placed within 'bottombit' to allow positioning of the bottom navbar.  */
/**********************************************************************************/
#bottombit {
	position: absolute;
	width: 100%;
	top: 130px;
	left: 0px;
}

#Content {
	float: left;
	padding-top: 10px;
	padding-left: 175px;
	padding-right: 15px;	
	width: 580px;
}

#AdminContent {
	float: left;
	width: 90%;
	margin: 10px;

	padding: 20px;

	background-color: #FFFFEE;
	border: 2px solid gray;
	border-top-color: #EEE;
	border-left-color: #EEE;
}

#Content a {
	font-size: 0.8em;
	color: blue;
	text-decoration: none;
	font-weight: bold;
}

#Content a:focus {
	text-decoration: underline;
	color: red;
}
#Content a:hover {
	text-decoration: underline;
	color: red;
}


.imagebox {
	float: left; 
	padding-right: 10px;
	padding-bottom: 10px;
}
.clearall {
	clear: both;
}

p.audio {
	clear: both;
	width: 100%;
	height: 70px;
}
p.audio .col1 {
	float: left;
	width: 60px;
	height: 70px;
}
p.audio .col2 {
	float: left;
	width: 100px;
	height: 70px;
}
p.audio .col3 {
	float: left;
	width: 40px;
	height: 70px;
}
p.audio .col4 {
}

p.links {
	clear: both;
	width: 100%;
}
p.links .col1 {
	float: left;
	width: 80px;
	height: 50px;
	padding-right: 10px;
}
p.links .col2 {
}

p.edit {
	clear: both;
	width: 100%;
}
p.edit .col1 {
	text-align: right;
	float: left;
	width: 75px;
	padding-right: 10px;
}
p.edit .col2 {
}