/* CSS Document */

body {	text-align:center; width:100%;
		margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; }

.siteC {margin-left:auto; margin-right:auto}


#container {	width:100%; margin-top:0px; background:#fff;}

#header {width:808px; height:234px; margin-top:20px; margin-left:auto; margin-right:auto; margin-bottom:0px;  background:url(http://www.satorimedia.co.uk/satgifs/whitebanner.jpg) no-repeat; }

.text {	font-family: Arial, Verdana, Georgia, serif;	font-size:80%;	color:#000;	margin-top:0px; margin-bottom:10px; margin-left:25px; margin-right:25px; text-align:left;	}
.textCentre {	font-family: Arial, Verdana, Georgia, serif;	font-size:80%;	color:#000;	margin-top:0px; margin-bottom:10px; margin-left:25px; margin-right:25px; text-align:center;	}
.textY {	font-family: Arial, Verdana, Georgia, serif;	font-size:80%;	color:#36f;	margin-top:0px; margin-bottom:10px; margin-left:25px; margin-right:25px; text-align:left;	}
#whiteHeading {	font-family: Courier, Georgia, serif;	text-align:left; font-size:100%;	color:#666;margin-bottom:0px; 	margin-top:5px; margin-left:15px; padding-top:20px;}


#whiteText { font-family: Arial, Verdana, Georgia, serif;  margin-left:40px; margin-right:0px;	text-align:left; font-size:90%;	color:#000;	margin-top:0px;}
#whiteText a { font-family: Arial, Verdana, Georgia, serif; 		color:#f60;	}
#whiteText a:visited { font-family: Arial, Verdana, Georgia, serif; 		color:#f60;	}
#whiteText a:hover { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}


#navtext2 { font-family: Arial, Verdana, Georgia, serif;  margin-right:0px;	text-align:right; font-size:90%;	color:#f60;	margin-top:0px;}
#navtext2 a { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}
#navtext2 a:visited { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}
#navtext2 a:hover { font-family: Arial, Verdana, Georgia, serif; 		color:#f60;	}

#navtextPort { font-family: Arial, Verdana, Georgia, serif;  margin-right:0px;	text-align:right; font-size:70%;	color:#f60;	margin-top:0px;}
#navtextPort a { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}
#navtextPort a:visited { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}
#navtextPort a:hover { font-family: Arial, Verdana, Georgia, serif; 		color:#f60;	}
#navtextPort2 { font-family: Arial, Verdana, Georgia, serif;  margin-right:0px;	text-align:right; font-size:70%;	color:#f60;	margin-top:0px;}
#navtextPort2 a { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}
#navtextPort2 a:visited { font-family: Arial, Verdana, Georgia, serif; 		color:#000;	}
#navtextPort2 a:hover { font-family: Arial, Verdana, Georgia, serif; 		color:#f60;	}

.copyright {font-family: Arial, Verdana, Georgia, serif;  margin-left:0px;	text-align:left; font-size:80%;	color:#000;	margin-top:0px;}
#table {margin-left:auto; margin-right:auto; margin-top:0px; width:790px;}
#tableBot {margin-left:auto; margin-right:auto; margin-top:0px; width:790px;}


.tableleft {width:612px; margin-left:0px;}


.BodyTop {width:600px; height:59px; margin-top:20px; background:url(http://www.satorimedia.co.uk/gifs/BodyTop.jpg) no-repeat; float: left;}
.BodyMid {width:600px; background:url(http://www.satorimedia.co.uk/gifs/BodyMid.jpg);float: left; }
.BodyBot {width:600px; height:86px; background:url(http://www.satorimedia.co.uk/gifs/BodyBot.jpg) no-repeat; margin-bottom:20px;float: left;}

.white1Top {width:608px; height:62px; margin-top:20px; background:url(http://www.satorimedia.co.uk/satgifs/whitepage1top.gif) no-repeat; float: left;}
.white1Mid {width:608px; background:url(http://www.satorimedia.co.uk/satgifs/whitepage1mid.gif);float: left; }
.white1Bot {width:608px; height:67px; background:url(http://www.satorimedia.co.uk/satgifs/whitepage1bot.gif) no-repeat; margin-bottom:20px;float: left;}
.white2Bot {width:608px; height:67px; background:url(http://www.satorimedia.co.uk/satgifs/whitepage1bot.gif) no-repeat; margin-bottom:500px;float: left;}

.bottom {width:608px; float: left;}


.box2{ position: relative; float: right; width: 140px; background-color: none; margin-top:20px; margin-left: 20px; margin-right:10px; margin-bottom:0px; padding:2px; text-align:right;}

h1 {	font-family: Courier, Georgia, serif; text-align:left;	font-size:100%;	color:#999;	margin-left:35px; margin-top:15px;margin-bottom:0px; padding-top:20px;	}
h2 {	font-family: Courier, Georgia, serif;	text-align:left; font-size:100%;	color:#999;margin-bottom:0px; 	margin-top:15px; margin-left:35px; padding-top:20px;}
h3 {	font-family: Courier, Georgia, serif;	font-size:90%;	color:#ff6;	margin-top:5px; margin-left:0px; padding-top:20px;	}







.nav {	width:125px; height:100%; text-align:left;	background:url(http://www.satorimedia.co.uk/gifs/navBGlong.gif) repeat-y; }
.navbox {	height:100%; margin-top:125px;	}
		
.header {	height:120px; text-align:left; background:#000; }		
.footer {	height:100%; text-align:left; background:#000; }
#pagevids { width:700px; background:url(http://www.satorimedia.co.uk/gifs/pageBG2b.jpg); text-align:justify; padding:20px;}		
.space {height:300px;}


#player2 {text-align:centre; margin-bottom:50px; margin-left:50px;}
.center {text-align:center; }
.logotext {	font-family: Courier, Georgia, serif;	text-align:right; vertical-align:middle; margin-right:50px;	}		
.footertext {	font-family: Courier, Georgia, serif;	text-align:right; vertical-align:middle; margin-right:50px; margin-bottom:10px;	}		
		
#satori {	font-size:140%;	color:#fff;	}
#tagline {	font-size:100%;	color:#999;	}	
#bottext2 { font-size:95%;	color:#f60;	}
#bottext2 a { font-family: Courier, Georgia, serif; 		color:#fff;	}
#bottext2 a:visited { font-family: Courier, Georgia, serif; 		color:#fff;	}
#bottext2 a:hover { font-family: Courier, Georgia, serif; 		color:#f60;	}
#linktext { font-size:95%;	color:#000;	}
#linktext a { color:#f60;	}
#linktext a:visited { color:#f60;	}
#linktext a:hover { color:#000;	}
a img {border: none; } 

.textC {	font-family: Arial, Verdana, Georgia, serif;text-align:center; margin-bottom:15px;	font-size:90%;	color:#fff;	margin-left:0px;	}
.textC2 {	font-family: Arial, Verdana, Georgia, serif;text-align:left; margin-bottom:15px;	font-size:90%;	color:#fff;	margin-left:50px; margin-right:150px;	}



.textvid {	font-family: Courier, Arial, Verdana, Georgia, serif; text-align:left;	font-size:90%;	color:#f60;	margin-left:20px;	}

a:link  {	font-family: Arial, Verdana, Georgia, serif;		color:#f60;	text-decoration:none; border:0px;}
a:visited  {	font-family: Arial, Verdana, Georgia, serif;		color:#f60;	text-decoration:none; border:0px;}
a:hover  {	font-family: Arial, Verdana, Georgia, serif;		color:#000;	text-decoration:none; border:0px;}

.picbuffR {	text-align:center;	float:right; width:50%; border:0px;	}
.pic { border:0px; }
.pic a { border:0px; color:black; }
.pic a:visited { border:0px; color:black; }
.pic a:hover { border:0px; color:black; }
.hr { width:95%; color:white; }
.picbuffLI {	margin-left:0px;	margin-right:10px;	margin-top:0px;	float:left;	}
.picbuffRI {	margin-right:0px;	margin-left:10px;	margin-top:0px;	float:right;	}

li {color:white; font-size:90%; font-family: Arial, Verdana, Georgia, serif;  }
li a {color:#f60; font-size:90%; font-family: Arial, Verdana, Georgia, serif;  }
li a:visited {color:#f60; font-size:90%; font-family: Arial, Verdana, Georgia, serif;  }
li a:hover {color:ff6; font-size:90%; font-family: Arial, Verdana, Georgia, serif;  }




.box1{ position: relative; float: right; width: 150px; background-color: none; margin-top:20px; padding:2px;}

/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/

.virtualpage, .virtualpage2, .virtualpage3{
/*hide the broken up pieces of contents until script is called. Remove if desired*/
display: none;
}


.virtualpage5 {margin-bottom:10px;}


.paginationstyle{ /*Style for demo pagination divs*/
width: 150px;
text-align: center;
padding: 0px 0;
margin-bottom: 10px;
text
}

.paginationstyle select{ /*Style for demo pagination divs' select menu*/
border: 1px solid navy;
margin: 0 15px;
}

.paginationstyle a{ /*Pagination links style*/
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}

.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}

.paginationstyle a.imglinks{ /*Pagination Image links style (class="imglinks") */
border: 0;
padding: 0;
}

.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}

.paginationstyle a.imglinks a:hover{
background: none;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/
color: #000;
background-color: #000;
}




















/* MULTIPLE SCROLL PLAYLIST CSS*/


div.player {margin-left:auto; margin-right:auto}


/* player and playlist go side by side */
#player, div.playlist {
	float:left;		
	margin-right:10px; 
	margin-left:10px;
	margin-top:20px;
	display: inline;
}

div.playlist {
	width:156px;
margin: 20px 0 0;	
}


div.items div { /* this I assume is being made by jQuery it's actually _scrollable but not called directly in the css. So as long as there is only 1 div inside .items it should work. */
top: 0;
left: 0;
}


/* player dimensions */
#player, #player img {
	display:block;				
	width:384px;
	height:240px;
	border:0px;	
	margin-left:10px;	
}

/* play button on top of splash image */
div.play {
	background:url(../img/play.png) no-repeat;
	width:50px;
	height:50px;
	position:relative;
	top:-140px;
	left:175px;	
	opacity:0.9;
	margin-bottom:-70px;
}

div.play:hover {
	opacity:1.0;		
}



/* single playlist item */
div.items a {
	background:url(../img/block.jpg) no-repeat;
	width:156px;
	height:96px;
	display:block;
	text-decoration:none;
	color:#444;		
	float:left;
	
}

div.items p {
	font-size:11px;
	width:140px;
	padding:8px 0 0 8px;
	margin:0px;		
}

div.items p.time {
	padding-top:0px;
	color:#777;
	margin-top:5px;
} 

/* item stages: normal, hover, playing, paused */
div.items a:hover {
	background-position:0 -96px;	
}

div.items a.playing, div.items a.paused {
	color:#000;	
}

div.items a.playing {
	background-position:0 -192px;		
}

div.items a.paused {
	background-position:0 -96px;	
}


/* small navigational dots */
div.navi {
	width:60px;	
	float:left;
	margin:10px 0 0 50px;
	height:11px;
	overflow:hidden;
}

div.navi span {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/dots.png) 0px 0px no-repeat;		
	cursor:pointer;
}

div.navi span:hover {
	background-position:0 -8px;		
}

div.navi span.active {
	background-position:0 -16px;
	cursor:default;
}