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

body {
	background:white;
	text-align:left;
	margin:0px;
	padding:0;
	font-size:8pt;
	font-family:trebuchet, arial, sans serif;
	color: #666666;
	list-style:none
	}
img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}	
	
a:link { 
	text-decoration: none; 
	color:#52888F;
}
a:active { 
	text-decoration: none;
	color: #52888F;
}
a:visited { 
	text-decoration: none; 
	color: #52888F;
}
a:hover { 
	text-decoration: none;
	color:#83D1DA;
}

a img { border: 0px;}
	
#wrapper {

	position: relative;
	margin:30px auto;
	width:1000px;
	
	}
		
# header {
	width:1000px;

}

#header a img {
	color:none;
	border:none;
	z-index:-1
	}
	
#headerfloatleft{
	float:left;
	margin-top:0px;
	padding:0;
	border:0;
	position:relative;
	z-index:4
	}
#headerfloat{
	float:left;
	margin-left:-5px;
	margin-top:0px;
	padding:0;
	border:0;
	vertical-align:top;
}
#headerfloatright{
	float:right;
	margin-right:15px;
	margin-top:0px;
	padding:0;
	border:0;
	position:relative;
	z-index:5
}

#contentwrap {
	background:#83D1DA;
	width:985px;
	padding-top:15px;
	position:absolute;
	top:220px;
	left:0
}

#contentwrap23 {
	background:#83D1DA;
	width:985px;
	padding-top:5px;
	margin-top:-15px
}

#legs {
	float:left;
	margin-top:-45px;
	margin-left:7px;
	}

#contentwrap2 {
	background:#52888F;
	width:945px;
	margin-left:20px;
	margin-right:15px;
	padding-bottom:10px;
	padding-top:0px;
	position:relative;
	top:0px;

	
}


#contentwrap24 {
	background:#52888F;
	width:945px;
	margin-left:20px;
	margin-right:15px;
	padding-bottom:20px;
padding-top:0px;
	position:relative;
	top:0px;


	
}

#contentwrap3 {
	background:white;
	width:915px;
position:relative;
	top:-10px;
	padding-top:2px;
		padding-bottom:10px;


	
}

#content{
	background:white;
	width:920px;
	margin-left:11px;
	margin-right:20px;
	padding-bottom:0px;
	margin-bottom:-40px;
	padding-top:20px;
	position:relative;
	top:-30px;
}

#contenthome{
	background:white;
	width:920px;
	margin-left:11px;
	margin-right:20px;
	margin-bottom:65px;
padding-bottom:0px;
	padding-top:20px;
	position:relative;
	top:70px;
}

#contenthome3 {
	background:white;
	width:915px;
position:relative;
	top:-70px;
	padding-top:2px;
		margin-bottom:0px;
		height:250px


	
}

#joeylegs{
}
#mattlegs{
	float:right;margin-right:5px
}

#linkbox {
	width:220px;
	float:left;
	height:300px;
	padding:10px;
	margin-top:-20px
}

#video {
	top:-40px;
	left:20px;
	position:relative;
	height:340px;
	width:400px;
	float:left
}


#clear {
	clear:both}
	


#reviewbox {
	position:relative;
	z-index:42;
}

#review {
	width:190px;
	height:40px;
	margin-left:0px;
	margin-top:5px;
	line-height:6px;
	text-align:center;
	float:left
}

#review2 {
	width:190px;
	height:40px;
	margin-left:0px;
	margin-top:5px;
	line-height:6px;
	text-align:center;
	float:left
}

#review3 {
	width:190px;
	height:40px;
	margin-left:0px;
	margin-top:5px;
	line-height:6px;
	text-align:center;
	float:right
}
#review h1, #review2 h1, #review3 h1 {
	font-size:14px;
	font-weight:200;
	color:white;
}

#review p, #review2 p, #review3 p {font-size:8px;
color:#83D1DA
}


#footer {
width:925px;
height:40px;
	background:url(../images/footer.png) no-repeat 0 0 ;
	padding-top:30px;
	padding-left:60px;
	  display: block;

}

	
	
/*** Navigation Rollovers ****/
#line {
	  border-bottom: 1px solid #52888F;
float:left}
	
#merchandise
{
  margin: 5px 0 5px 0;
  display: block;
  width:220px;
  height: 45px;
  background: url("http://www.rannel.co.uk/images/merchandise.gif") no-repeat 0 0;
	float:left
}

#gallery
{
  margin: 5px 0 5px 0;
  display: block;
  width:220px;
  height: 45px;
  background: url("http://www.rannel.co.uk/images/gallery.gif") no-repeat 0 0;
	float:left
}

#booking
{
    margin: 5px 0 5px 0;
display: block;
  width:110px;
  height: 40px;
  background: url("http://www.rannel.co.uk/images/booking.gif") no-repeat 0 0;
  float:left;
  margin-top:2px

}

#blog
{
  margin: 5px 0 5px 0;
  display: block;
  width:220px;
  height: 45px;
  background: url("http://www.rannel.co.uk/images/blog.gif") no-repeat 0 0;
	float:left
}
#news
{
    margin: 5px 0 5px 0;
display: block;
  width:110px;
  height: 40px;
  background: url("http://www.rannel.co.uk/images/news.gif") no-repeat 0 0;
  float:right;
    margin-top:2px


}

#video2
{
    margin: 5px 0 5px 0;
display: block;
  width:110px;
  height: 40px;
  background: url("http://www.rannel.co.uk/images/video.gif") no-repeat 0 0;
  float:left;
    margin-top:2px


}

#links
{
    margin: 5px 0 5px 0;
display: block;
  width:110px;
  height: 40px;
  background: url("http://www.rannel.co.uk/images/links.gif") no-repeat 0 0;
  float:right;
  margin-top:2px


}

#contact
{
    margin: 5px 0 5px 0;
display: block;
  width:110px;
  height: 40px;
  background: url("http://www.rannel.co.uk/images/contact.gif") no-repeat 0 0;
  float:left;
    margin-top:2px


}

#about
{
    margin: 5px 0 5px 0;
display: block;
  width:110px;
  height: 40px;
  background: url("http://www.rannel.co.uk/images/about.gif") no-repeat 0 0;
  float:right;
    margin-top:2px


}

#sweden
{
    margin:0;
display: block;
  width:280px;
  height: 30px;
  background: url("http://www.rannel.co.uk/images/sweden.png") no-repeat 0 0;


}

#booking:hover, #news:hover, #video2:hover, #links:hover, #contact:hover, #about:hover { background-position: 0 -40px; }
#merchandise:hover, #blog:hover, #gallery:hover{ background-position: 0 -45px; }
#sweden:hover{ background-position: 0 -30px; }


/**** NAVIGATION TOP BAR ****/

#topnav {
	margin-left:130px;
	width:700px;
	height:55px;
	z-index:300;
	margin-top:-60px;
	vertical-align:top
}
	
#hometop
{
	display: block;
  	width:85px;
  	height: 55px;
  	background: url("http://www.rannel.co.uk/images/hometop.gif") no-repeat 0 0;
  	float:left;
    margin-top:10px;
	padding-right:10px;
		margin-right:20px;
		
	margin-left:30px;
	}
#abouttop
{
	display: block;
  	width:85px;
  	height: 70px;
  	background: url("http://www.rannel.co.uk/images/aboutop.gif") no-repeat 0 0;
  	float:left;
    margin-top:10px;
		margin-right:0px;

	}
	
#videotop
{
	display: block;
  	width:85px;
  	height: 85px;
  	background: url("http://www.rannel.co.uk/images/videotop.gif") no-repeat 0 0;
  	float:left;
    margin-top:2px;
		margin-right:0px;

	}
	
#gallerytop
{
	display: block;
  	width:95px;
  	height: 55px;
  	background: url("http://www.rannel.co.uk/images/gallerytop.gif") no-repeat 0 0;
  	float:left;
    margin-top:2px;
		padding-right:10px;
		margin-right:10px;
		border-right: 2px solid #52888F;

	}
	
#newstop
{
	display: block;
  	width:120px;
  	height: 65px;
  	background: url("http://www.rannel.co.uk/images/newstop.gif") no-repeat 0 0;
  	float:left;
    margin-top:10px;
		padding-right:10px;
		margin-right:20px;

	}
	
	
#bookingtop
{
	display: block;
  	width:120px;
  	height:65px;
  	background: url("http://www.rannel.co.uk/images/bookingtop.gif") no-repeat 0 0;
  	float:left;
    margin-top:10px;
		margin-right:20px;

	}
#contacttop
{
	display: block;
  	width:120px;
  	height: 55px;
  	background: url("http://www.rannel.co.uk/images/contacttop.gif") no-repeat 0 0;
  	float:left;
    margin-top:2px;
		padding-right:10px;
		margin-right:10px;
		border-right: 2px solid #52888F;
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)

	}
	
#merchandisetop
{
	display: block;
  	width:160px;
  	height: 55px;
  	background: url("http://www.rannel.co.uk/images/merchandisetop.gif") no-repeat 0 0;
  	float:left;
    margin-top:2px;
		padding-right:10px;
		margin-right:10px;
		border-right: 2px solid #52888F;

	}

#hometop:hover, #newstop:hover, #bookingtop:hover, #abouttop:hover, #videotop:hover, #contacttop:hover, #merchandisetop:hover, #gallerytop:hover { background-position: 0 -85px; }

/*** Tour Dates ***/

#tourdatewrap {
	float:right;
	width:200px;
		margin-right:20px;

}

#tourdates {
	height:240px;
	width:200px;
	overflow:auto;
	border:1px solid #DDD;
	
}

#tourdates h1 {
	margin-left:10px;
	color:#83D1DA;
	font-size:12px;
	font-weight:200;
	text-transform:uppercase;
	width:155px;
	border-top:2px solid #83D1DA;
	margin-top:5px;
	padding-top:5px;
	}

#tourdates h2 {
	margin-top:-10px;
	margin-left:5px;
	padding:5px;
	color:#52888F;
	font-size:12px;
	font-weight:200;
	width:155px
	}

#tourdates p {
	margin-top:-10px;
	margin-left:10px;
}

#tourdatesbig h1 {
	margin-left:0px;
	color:#83D1DA;
	font-size:12px;
	font-weight:200;
	text-transform:uppercase;
	width:540px;
	border-top:2px solid #83D1DA;
	margin-top:5px;
	padding-top:5px;
	}

#tourdatesbig h2 {
	margin-top:-10px;
	margin-left:-5px;
	padding:5px;
	color:#52888F;
	font-size:12px;
	font-weight:200;
	width:540px
	}

#tourdatesbig p {
	margin-top:-10px;
	margin-left:--0px;
}



.vscrollerbase {
width: 18px;
background: #EEE none;
}

.vscrollerbar {
background-color: #8F9793;
padding: 0px;
}

.vscrollerbasebeg, .vscrollerbaseend {
background-image: none;
}

.scrollgeneric
{
line-height: 1px;
font-size: 1px;
position: absolute;
}

.vscrollerbase, .vscrollerbar {
width: 18px;
top: 0px;
}

.vscrollerbar {
left: 0px;
}


.vscrollerbar, .hscrollerbar {
/*padding information of these elements are only used for
padding of the scroll-bar with respect to the scroll base,
the padding will automatically be turned off by the script*/
padding: 5px;
/* z-index for scrollbars no longer has to be given as of version
1.7.5 for correct operation, but it is still recommended, as this
decides the z-index for content.*/
z-index: 2;
}



.vscrollerbarbeg {
background:#83D1DA 0px -9px;
width: 18px;
height:9px;
}

.vscrollerbarend {
background:#83D1DA;
width: 18px;
height: 9px;
}

/*** FOOTER ***/

#bottomlinks {
	position:relative;
	margin-top:5px;
	padding-top:25px;
	padding-left:10px;
	color:white;
	font-size:9px;
	z-index:200;
	height:10px;
}

#bottomlinkshome {
	position:relative;
	padding-top:25px;
	padding-left:10px;
	color:white;
	font-size:9px;
	z-index:300;
	height:10px;
}

#bottomlinks a {
	color:#83D1DA;
}

#bottomlinkshome a:hover {
	color:white;
}

#bottomlinkshome a {
	color:#83D1DA;
}

#bottomlinks a:hover {
	color:white;
}

/*** MAIN CONTENT ***/

#topline {
	width:850px;
				height:80px;
				position:relative;
	top:-10px;
	left:180px;
	z-index:601;
	height:100px


}

#topline2 {
	width:880px;
				border-bottom:2px solid #52888F;
				position:relative;
top:-35px;
	left:20px;
	z-index:502;
			


}

#pageicon {
	width:180px;
	float:left;
}
#middle {
	width:480px;
	float:left;
	padding-left:10px;
}


/*CONTACT FORM */
	
#contact-area {
	width: 480px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 380px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #ccc;
}

#contact-area textarea {
	height: 80px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid #008790;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 70px;
	padding-top: 5px;
}

#mailing {width:220px;margin:-26px 0 0 210px; text-align:left;}
#checkbox {width:10px;margin-left:20px;text-align:left}

#successMsg {margin-left:75px; color: #850F4E}


/*** GALLERY ***/

	/** GALLERY **/
.galleria{list-style:none;width:200px}
.galleria li{display:block;width:40px;height:40px;overflow:hidden;float:left;margin:0 0px 0px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:0px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
.galleria_main div{display:none;}
.galleria_main div.active{display:block;}
* html .galleria li div span{width:400px} /* MSIE bug */

/* BEGIN DEMO2 STYLE */
	.demolink{margin-bottom:2em;}
	.demo2{position:relative;left:-40px;clear:both;margin:0;height:634px;width:480px;padding:0}
	.gallery_demo2{width:100%;}
	.gallery_demo2 li{width:59px;height:59px;border:1px solid #f1efe2;margin: 7px 7px 0 0;overflow:hidden;background:#f1efe2 ;}
	.gallery_demo2 li.active{border-color:#623;}
	.gallery_demo2 li div{top:145px;left:40px;border:2px solid #83D1DA;background:#83D1DA;}
	.gallery_demo2 li img.thumb{opacity:.3}
	.gallery_demo2 li.active img.thumb,.gallery_demo2 li:hover img.thumb{opacity:.99}
	.gallery_demo2 li div .caption{padding-left:5px;font:normal 0.7em/1.4 sans-serif;color:white;}