#slider {
    position: relative;
	width: 940px;
	padding: 0px 10px 0 20px;
}

#bf_sidebar {
	/*border-radius:6px;
	border-style:solid;
	border-width:1px;
	border-color:#444444;*/
	float: left;
	width: 200px;
	margin-top:0px;
}
/* MAIN CONTAINER float right to make main view port tuck against menu! */
#bf_main {
	float: left;
	padding-top: 10px 0 0 0;
	margin-left:30px;
	width: 700px;
	height:750px;	/* ALtering this will bring footer upwards ie main visible screen height*/
}

#bf_header {
	margin-left: 10px;
	width: 230px;
	height: 114px;
	text-align: center;
	padding: 80px 0 0 0;
	/*background: url(../images/bf_header.jpg) no-repeat top left;*/
}

#content {
	padding-top:5px;  /* so that the top border appears! */ 
	height: 750px;
	width: 700px;
	/*background: url(../images/bf_content.jpg) no-repeat;*/
}

.scroll {
	/*optional border! border-radius:6px;
	border-style:solid;
	border-width:1px;
	border-color:#666666;*/
    height: 750px;/* must be set to th the lowest page height in group- however can be correct slack on page height by changing last page height ie p11 */
    width: 700px;
    overflow: auto;
	overflow-x: hidden;
    position: relative;
    clear: left;
}
/* must be a little less width to allow for boarder around content (text) ie inside "scroll" */
.scrollContainer div.panel {
    padding: 20px;/* was 30px */
	height:1600px;/* each page has 1000 px important for scrolling! */
    /* not really requireed as alreadyin a container so padding only nb originally: height: 395px;
    width: 650px;*/
}

ul.navigation {
	width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
	text-align: left;
}

ul.navigation li {
    display: inline-block;
    margin: 0px;
	padding: 0;
}

ul.navigation a {
	display: block;
	width: 200px;
	height: 22px;
	padding: 3px 0 0 20px;
	margin-bottom: 5px;
	color: #8a8980;
	font-size: 16px;
	font-weight: normal;
    text-decoration: none;
	position: relative;
}

ul.navigation a .ui_icon { position: absolute; top: 0; left: 15px; width: 40px; height: 40px; }


ul.navigation a:hover, ul.navigation a.selected {
	color: #201f1b;
	background: url(../img/menu_hover2.png) no-repeat left;
}

ul.navigation a:focus {
    outline: none;
}

.hide {
    display: none;
}
.scrollContainer div.page1 {
	height:395px;
	
	
	}

.scrollContainer div.page2 {
	height:450px;
	
	
	}
.scrollContainer div.page3 {
	height:350px;
	
	
	}	

	
.scrollContainer div.page4 {
	height:350px;
	
	
	}
.scrollContainer div.page5 {
	height:330px;
	
	
	}
	
.scrollContainer div.page6 {
	height:365px;
	
	
	}
	
.scrollContainer div.page7 {
	height:365px;
	
	
	}
	
.scrollContainer div.page8 {
	height:340px;
	
	
	}
.scrollContainer div.page9 {
	height:370px;
	
	
	}
.scrollContainer div.page10 {
	height:390px;
	
	
	}
.scrollContainer div.page11 {
	height:305px;
	
	
	}
	
.scrollContainer div.page12 {
	height:330px;
	
	
	}	
	
.scrollContainer div.page13 {
	height:750px;/* increase  to pickup any slack if not quite reaching top of panel when scrolling */
	
	
	}