@charset "UTF-8";
/* CSS Document */


.sra {
	display: inline-block;
	margin: 0 0 20px 0;
	padding: 15px;
	background: white;
	box-sizing: border-box;
}
.sra img {
	display: block;
	margin: 0;
	padding: 0;
	width: 250px;
}
#main_container {
position:absolute;
top:50%;
left:50%;
margin-top:-195px;/* half elements height*/
margin-left:-500px;/* half elements width*/
width:1000px;
height:390px;
padding:0;
}

#main_image {
float:left;
width:390px;
height:390px;
margin-right:20px;
background-image:url(../images/royal_courts_of_justice.jpg);
}

#main_navigation {
float:left;
width:180px;
height:390px;
margin-right:20px;
}

#main_content {
float:left;
width:350px;
height:350px;
padding:20px;
background-image:url(../images/box_background.png);
}

#content {
float:left;
width:330px;
height:350px;
overflow: auto;
padding-right: 20px;
}

#logo {
clear:both;
width:180px;
height:75px;
margin-bottom:20px;
}

#navigation {
clear:both;
width:180px;
height:180px;
margin-bottom:10px;
}

#navigation ul {
margin:0;
padding:0;
list-style:none;
display:block;
height:20px;
clear:both;
}

#navigation li {
display:block;
height:20px;
margin:0 0 10px 0;
clear:both;
text-align:center;
line-height:20px;
font-weight:bold;
letter-spacing:2px;
}

#navigation span {
font-size:12px;
line-height:20px
}

#navigation_button {
width:180px;
background-image: url(../images/navigation_on.png);
height:20px;
display:block;
color:#96A6A5;
}

#navigation_button a{
width:180px;
background-image: url(../images/navigation.png);
height:20px;
display:block;
}

#navigation_button a:hover {
width:180px;
background-image: url(../images/navigation_on.png);
height:20px;
display:block;
}

#footer {
clear:both;
width:180px;
height:90px;
padding:15px 0 0 0;
text-align:center;
background-image:url(../images/footer_background.png);
}

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #FFF;
}
.jScrollPaneDrag {
	position: absolute;
	background: #96A6A5;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}


.orange-bar .jScrollPaneTrack {
	background: #f60;
}
.orange-bar .jScrollPaneDrag {
	background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;
}
.orange-bar .scroll-pane {
	background: #69f;
}
			
.holder {
	float: left;
	margin: 10px;
}

.scroll-pane {
	overflow: auto;
	float: left;
}

.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}

#pane1 {
}
#pane2 {
	height: 150px;
}
#pane3 {
	height: 190px;
}
#pane4 {
	height: 190px;
}