#wrapper {

}
/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {

    /* required settings */
    position:relative;
    width: 960px;
    height:330px;
	/* ALEX 22/06/2012: if you don't want to show anything around the slider (i.e. non-bbc style) then use overflow: hidden here */
	overflow: hidden;
    /* custom decorations */
   
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
	/* DANIEL 07/12/12: 
		The above comment is generated from the http://jquerytools.org/ download facility. For some reason it doesn't want the width to be too large but this can cause problems if there are too many Large (full width) slides */
    width:/*500*/ 50000em;
    position:absolute;
    clear:both;
}

.items div.slide {
    float:left;
    width:960px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:red;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
	position: absolute;
	z-index:100;
	top:5px;
}
/* ALEX22/06/2012: if going for BBC-style slider make sure your arrows cover the full height of the slider!! 
/* right 
a.right {
    background: url("/img/_bg/arrow-right.png") no-repeat scroll left top transparent;
    clear: right;
    height: 290px;
    margin: 0;
    padding: 0;
    right: -950px;
    width: 100%;
}a.right:hover {  }
a.right:active {  }

/* left 
a.left {
    background: url("/img/_bg/arrow-left.png") no-repeat scroll right top transparent;
    clear: right;
    height: 290px;
    left: -950px;
    margin: 0;
    padding: 0;
    width: 100%;
}
/*a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
*/

/* ALEX20/06/2012 small arrows */
a.right {
    background: url("/img/_bg/arrow-right-small.png") no-repeat scroll left top transparent;
    clear: right;
    height: 50px;
    margin: 0;
    padding: 0;
    right:-16px;
    width: 50px;
	top:140px;
}a.right:hover {  }
a.right:active {  }

/* left */
a.left {
    background: url("/img/_bg/arrow-left-small.png") no-repeat scroll right top transparent;
    clear: right;
    height: 50px;
    left: -16px;
    margin: 0;
    padding: 0;
    width: 50px;
	top:140px;
}
/*a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }*/
/* up and down */
a.up, a.down  {
    background:url(/media/img/scrollable/arrow/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

.navi {
	position:absolute;
    margin-left:-150px;
	left:50%;
	margin-top: 5px;
    width:300px;
    height:15px;
	text-align:center;
}
 

/* items inside navigator */
.navi a {
    width:8px;
    height:8px;
    margin:3px;
    background:url(/img/_bg/navigator.png) 0 0 no-repeat;
    display:inline-block;
    font-size:1px;
	cursor: pointer;
}
 
/* mouseover state */
.navi a:hover {
    background-position:0 -8px;
}
 
/* active state (current page state) */
.navi a.active {
    background-position:0 -16px;
}
#superslider-container {margin: 0px 0 0px; width: 100%; margin-bottom:10px}
#superslider {margin:0 auto; width: 960px; height:330px; position: relative;}
#superslider.wide {margin:0 auto; width: 960px; height:330px; position: relative;}

/* ALEX: these styles were needed for the lines between the items as IE was being a pain about borders, margins and padding */
.layout1, .layout2, .layout3, .layout4, .layout5 {padding: 0px; position: relative;height: 330px; width: 960px;}
#superslider img {margin:0; border:none;width: auto; height: auto; padding: 0; float: none;}
.layout1 .image1{ float:left;  height:330px;  margin-right:0px;  width:960px; position:relative}

.layout2 .image1{ float:left;  height:330px;  width:600px; position:relative}
.layout2 .image2{ float:left;  height:150x;  width:360px; position:relative}
.layout2 .image3{ float:left;  height:180px;  width:360px; position:relative}

.layout3 .image1{ float:left;  height:330px; width:390px; position:relative}
.layout3 .image2{ float:left;  height:150px; width:360px; position:relative}
.layout3 .image3{ float:left;  height:180px; width:360px; position:relative}
.layout3 .image4{ float:left;  height:330px; width:210px; position:relative; margin: -150px 0 0 0}



#superslider span.title {position: absolute; bottom:0; right: 0px; padding: 10px; background: #820D28; color:#fff; opacity: 0.8; font-size: 100%; line-height: 140%}
.layout1 .image2 span.title,.layout3 .image2 span.title {bottom: 5px}
#superslider  span.heading{font-weight: bold; font-size: 110%; color: #372E66; margin: 10px 5px; display:block; text-align: left;}
#superslider a:hover {opacity: 0.8}
.layout2 .image3 span.heading, .layout3 .image3 span.heading{font-weight: bold; font-size: 110%; color: #372E66; margin: 10px 5px; display:block;}
#superslider p {display: block; text-align: left;margin: 5px 5px;}
.layout1 .image5 {}