.jb_contentglider_wrapper {
	position: relative;
	float: left;
	padding: 13px;
	padding-left: 40px; /****increase left pos of content area/make room for nav image*****/
	/***** padding-top changes the height of the INDIVIDUAL divs within THIS wrapper - not the glidecontentwrapper below****/
}

/*jb - this is box containing all child divs - dimensions irrespective of navigation div*/
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 600px; /****will overlap wrapper but go under nav image if width too big*****/
height: 500px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
float: left;
}
/*
	Total wrapper width: 350px+5px+5px=360px
	Or width of wrapper div itself plus any left and right CSS border and padding
	Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
font-family: Helvetica, Arial, sans-serif; font-size: 75%; line-height:140%; color: #000000;
background: white;
padding: 0px;
visibility: hidden;
width: 700px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
	Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
}
/*
 Total contenttoggler width: 350px+5px+5px=360px
	Or total width of wrapper div (counting wrapper border/padding)
*/

.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
border: 1px solid black;
color: #2e6ab1;
padding: 1px 3px;
margin-right: 3px;
font-weight: bold;
text-decoration: none;
}

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #E4EFFA;
color: black;
}

.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
background: #1A48A4;
color: white;
}
























.cssbuttonstoggler{ /*style for DIV used to contain toggler links. */
width: 700px; /****this adjusts position of right nav box relative to left*****/
margin-top: 6px;
/*margin-left: 50px;*/
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */

padding-top: 200px;
position: absolute;
left: 0px; /****adjusts position of BOTH nav links*****/
top: 0px;
z-index: 100;

padding-left: 0px;
}
/*
 Total contenttoggler width: 350px+5px+5px=360px
	Or total width of wrapper div (counting wrapper border/padding)
*/

.cssbuttonstoggler a{ /*style for every navigational link within toggler */
background-image: url(frontpage/images/arrow_right.png);
color: #494949;
display: block;
float:right;
margin-right: 6px;
font: normal 13px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
text-decoration: none;
border: 0;
width: 15px; /**** these values change height of buttons*/
height: 46px;
}

.cssbuttonstoggler a span{
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

.cssbuttonstoggler a.selected, .cssbuttonstoggler a:hover{ /*style for selected and hover page's toggler link. ".selected" class auto generated! */
background-position: bottom left;
}

.cssbuttonstoggler a.selected span, .cssbuttonstoggler a:hover span{ /*style for selected and hover page's toggler link. ".selected" class auto generated! */
}

.cssbuttonstoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.cssbuttonstoggler a.prev, .glidecontenttoggler-2 a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.cssbuttonstoggler a.prev:hover, .glidecontenttoggler-2 a.next:hover{
}



.cssbuttonstoggler a.prev {
	background-image: url(frontpage/images/arrow_left.png);
	float:left;
}















/*customisations for this page*/
/*To change height of content areas, increase height of all gcw_ and gc_ elements by the same amount. To make them nearer or further from the top, change margin-top of glidecontentwrapper*/
		/*NB - abpw width is exactly the same width as the 'box' img*/
	/*NB - jbgcw height is (    'box' image height    -    jbgcw padding-top    -    13px    )*/
	/*NB - gcw width is (    'box' image width    -    jbgcw padding (r and l)    )*/
	/*NB - gc width is the same! */
	/*NB - gcw height is (    'box' image height    -    jbgcw padding-top     -     gcw margin-top     -     8px    )*/
	/*NB - gc height is not set (setting it doesn't seem to make a difference) - just don't write content that's too high!*/
	/*NB - cbt width is (    'box' image width    -    8px      )*/
	/*NB - cbt padding-top positions arrows vertically - just experiment*/
.adjacentboxes_protection_wrapper {float: left; margin-left: 9px} /*this div is necessary because the title images aren't floated but the jb_wrapper divs are, so there's confusion and gaps when boxes adjacent*/
	.LEFTMOST {margin-left: 0px}
img.glidertitle {margin-left:2px; margin-top: 5px}
.jb_contentglider_wrapper {padding-left: 21px; padding-top:0px; padding-right: 23px;}
.glidecontentwrapper {margin-top: 10px; border: hidden 1px orange;} /*if you change the margin-top, the shade images will be out*/
.glidecontent {background-position: top;   background-repeat: repeat-x;  padding: 10px;}
.cssbuttonstoggler {left:6px}

#glidecontentwrapper_newsandreviews {z-index: 300;} /*see next line*/
#glidernav_newsandreviews {z-index: 299} /* for some reason the buttonstoggler goes over the top of the content (until first scrolling has occured), but only on THIS div - maybe because it is first glider thingy on the page??? Doing this with z-index corrects the problem.*/

/*Specific box dimensions/images now follow*/

/*in system, width of content bit has been increased by 25px in either direction (it's not actually gliding anyway)*/
.jbgcw_systems {background-image:url(frontpage/images/systems_box.jpg); height: 311px; padding-left: 15px; padding-right: 17px}
.gcw_systems {width:932px; height: 306px}
.gc_systems {width: 920px; background-image:url(frontpage/images/shade_systems.jpg);}
.cbt_systems {width:956px; padding-top: 123px}
			.systemdiv {float: left; width: 230px; text-align: center}
			.systemdiv .textsection {text-align: left; width: 160px; height: 95px; margin: 0 auto}
			.systemdiv .textsection h5 {margin-bottom: 4px;}
			.systemdiv .textsection p {margin-top: 0px;}
			.systemdiv img {position: relative; border: 0}

	.abpw_small {width:238px}
.jbgcw_small {background-image:url(frontpage/images/small_box.jpg); height: 219px}
.gcw_small {width:194px; height: 214px}
.gc_small {width: 194px; background-image:url(frontpage/images/shade_smallmed.jpg);}
.cbt_small {width:230px; padding-top: 77px}

	.abpw_med {width:354px}
.jbgcw_med {background-image:url(frontpage/images/med_box.jpg); height: 219px}
.gcw_med {width:310px; height: 214px;}
.gc_med {width: 310px; background-image:url(frontpage/images/shade_smallmed.jpg);}
.cbt_med {width:346px; padding-top: 77px}

	.abpw_large {width:717px}
.jbgcw_large {background-image:url(frontpage/images/large_box.jpg); height: 481px}
.gcw_large {width:673px; height: 476px}
.gc_large {width: 673px; background-image:url(frontpage/images/shade_large.jpg);}
.cbt_large {width:709px; padding-top: 214px}