/* NOTES FOR NEW STYLES
This template forms the base of the CSS layouts 
to position the main content first, then 
prioritise the rest of the content in the 
correct positions on the page for SEO.
*/



* {margin:0;padding:0}
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
body {
	color: #000;
	position:relative;/* for ie7*/
	font-family: Arial, Helvetica, Tahoma, Arial, sans-serif;
	font-size: 1em;
	text-align:left;
	background: #fff url(/SS/tutorial/img/bodybg.jpg) top left repeat-x;
}
#wrapper {width:798px;margin:0 auto;background: transparent url(/SS/tutorial/img/mainbg.jpg) top left no-repeat;}
#outer{
	min-height:100%;
	margin:0 40px;
	color: #000;
}
.outerwrap {
	float: left;	
	width: 100%;
	padding-top:116px;/* to clear header*/
	margin-right:-3px;/* to stop columns dropping*/
}
a img {border:none;}
a {text-decoration:none;color:#000;}
a:hover {text-decoration:underline;}
form {padding:0;margin:0;}
p {color:#5a5a5a;font-size:0.75em;margin-bottom:10px;}
p2 {color:#5a5a5a;font-size:0.50em;margin-bottom:10px;}

* html #outer{height:100%;} /*IE treats height as min-height anyway*/
#full 
{
    padding-top:205px;
    width:100%;
}
#headline 
{
    position:absolute;
    z-index:999;
	background: transparent url(/SS/tutorial/img/heading.gif) top right no-repeat;
	width:714px;
	height:27px;
	display:block;
	margin:0;padding:0;
	top:80px;
}
#headlineinside 
{
    position:absolute;
    z-index:999;
	background: transparent url(/SS/tutorial/img/heading.gif) top right no-repeat;
	width:714px;
	height:27px;
	display:block;
	margin:0;padding:0;
	top:80px;
}
#headline h1 
{
    display:none;
}
h1 {
    display:block;
    width:692px;
    height:61px;
    background: transparent url(/SS/tutorial/img/h1bg.jpg) top left no-repeat;
    z-index:999;
    color:#4a4a4a;
    margin-bottom:10px;
    padding:72px 0 0 30px;
    font-size:1.3em;
}
h2 
{
    color:#008641;
    padding:0 0 0 0;
    font-size:1.1em;
    margin-bottom:10px;
}

h3 
{
    color:#008641;
    padding:0 0 0 0;
    font-size:2.1em;
    margin-bottom:10px;
}

#footer .developer a {float:right;font-size:0.8em;color:#cecece;}
#titleimage1 
{   
    display:block;
    width:720px;
    height:131px;
    background: transparent url(/SS/tutorial/img/h1image1.png) bottom right no-repeat;
    position:absolute;
    z-index:2000;
    
    }
.welcome {background-color:#efefef;display:block;height:65px;padding:10px 10px 0 10px;}
.homecta {float:right; padding:10px 10px 0 10px;}
.homecta img {margin-left:15px;}
.homehead {margin-top:15px;float:left;}
.whiteline {height:1px;width:100%;display:block;background-color:#fff;clear:both;}
.greyline {height:6px;width:100%;display:block;background-color:#cbcbcb;clear:both;}
.greylinethin {height:4px;width:100%;display:block;background-color:#e5e5e5;clear:both;}
.clearit {height:8px;width:100%;display:block;background-color:#fff;clear:both;}

.boxes {}
.abox, .abox.last {width:175px;float:left;margin-right:6px;font-size:0.8em;line-height:1.2em;background: transparent url(/SS/tutorial/img/bx-bg.jpg) top left repeat-x;}
.abox p, .abox.last p {padding:6px;color:#535353;height:120px;}
.abox.last {margin-right:0;}
.more a {display:block;width:100%;height:30px;}
.more i {display:none;}
.more.green {display:block;width:150px;height:20px;background: transparent url(/SS/tutorial/img/moreinfo-green.gif) top left no-repeat;margin-left:10px;}
.more.blue {display:block;width:150px;height:20px;background: transparent url(/SS/tutorial/img/moreinfo-blue.gif) top left no-repeat;margin-left:10px;}
.more.orange {display:block;width:150px;height:20px;background: transparent url(/SS/tutorial/img/moreinfo-orange.gif) top left no-repeat;margin-left:10px;}
.more.red {display:block;width:150px;height:20px;background: transparent url(/SS/tutorial/img/moreinfo-red.gif) top left no-repeat;margin-left:10px;}

#categories {width:174px;font-size:0.7em;line-height:1.4em;float:left;}
#categories ul {list-style:none;margin:0;padding:0 0 0 10px;background: transparent url(/SS/tutorial/img/cat-bg.gif) top left repeat-y;}
#categories .top {display:block;width:174px;height:12px;background: transparent url(/SS/tutorial/img/cat-top.gif) top left no-repeat;}
#categories .bottom {display:block;width:174px;height:12px;background: transparent url(/SS/tutorial/img/cat-bottom.gif) top left no-repeat;margin-bottom:20px;}


#programmes {margin-left:180px;width:174px;font-size:0.7em;line-height:1.4em;}
#programmes .top {display:block;width:537px;height:42px;background: transparent url(/SS/tutorial/img/carousel/prog-top.gif) top left no-repeat;}
#programmes .bottom {display:block;width:537px;height:8px;background: transparent url(/SS/tutorial/img/carousel/prog-bot.gif) top left no-repeat;margin-bottom:20px;}


#header{
	position:absolute;
	top:0;
	width:778px;
	margin:0 auto;
	height:100px;
	padding:10px;
	z-index:1;
	background: transparent url(/SS/tutorial/img/headerbg.jpg) top left no-repeat;
	 
}
#header #logo {position:absolute;display:block;width:215px;height:123px;cursor:pointer;background: transparent url(/SS/tutorial/img/logo.jpg) top left no-repeat;top:1px;margin-left:-11px;}
#header #logo span {display:none;}

#topmenu 
{
    font-family:Verdana, Tahoma, Arial;
    font-size:0.7em;
    font-weight:bold;
    text-align:center;
	height:32px;
	margin:0 20px 0 0;
	float:right;
    }
ul li {list-style-type:none;}
#topmenu ul li a {
	display: inline-block;
    color:#000;
    height:21px;
	width:111px;
	margin:0;padding:0;
	padding-top:11px;
	text-transform:capitalize;
	font-size:0.8em;
	color:#878787;
    }
#topmenu ul li a:first-letter {
	font-size:1.4em;
    }    
    
#topmenu ul li {
	display: inline-block;
	list-style:none;
	height:32px;
	width:111px;
	background: transparent url(/SS/tutorial/img/tabof.jpg) top left no-repeat;
	margin:0;padding:0;
	float:left;
} 
#topmenu ul li.current {
	display: inline-block;
	list-style:none;
	height:32px;
	width:111px;
	background: transparent url(/SS/tutorial/img/tabon.jpg) top left no-repeat;
	margin:0;padding:0;
	color:#02853f;
}
#topmenu ul li.current a {
	color:#02853f;
} 
#topmenu ul li.start {
	display: inline-block;
	list-style:none;
	height:32px;
	width:119px;
	background: transparent url(/SS/tutorial/img/taboffirst.jpg) top left no-repeat;
	margin:0;padding:0;
}
#topmenu ul li.start.current {
	display: inline-block;
	list-style:none;
	height:32px;
	width:119px;
	background: transparent url(/SS/tutorial/img/tabonfirst.jpg) top left no-repeat;
	margin:0;padding:0;
} 
#topmenu ul li.start a {
	padding-left:7px;
} 
#topmenu ul li.end {
	display: inline-block;
	list-style:none;
	height:32px;
	width:119px;
	background: transparent url(/SS/tutorial/img/taboflast.jpg) top left no-repeat;
	margin:0;padding:0;
} 
#topmenu ul li.end.current {
	display: inline-block;
	list-style:none;
	height:32px;
	width:119px;
	background: transparent url(/SS/tutorial/img/tabonlast.jpg) top left no-repeat;
	margin:0;padding:0;
} 
#topmenu ul li.end a {
	padding-right:10px;
} 
   
#topcontent{
	position:absolute;
	top:132px;
	margin:0 0 0 39px;
	padding:0;
	z-index:999;
}

#menu {
    list-style:none;
    padding:0;
    margin:0;
    color:#000;
    font-size:0.70em;
    font-weight:bold;
    width:140px;
    letter-spacing:-0.01em;
}
#menu li {
    list-style:none;
}
#menu li a {
    color:#000;    
    padding:0;
    margin:0 0 2px 0;
    background: transparent url(/SS/tutorial/img/menubg.jpg) top left no-repeat;
	display: block;
	width:154px;
	border:solid 1px #c7c7c7;
	padding:6px 4px 5px 20px;
}


#left {
	position:relative;/*ie needs this to show float */
	width:180px;
	float:left;
	padding-top:0;
	padding-bottom:20px;/* clear footer*/

}
#left .advertising {
    background: transparent url(/SS/tutorial/img/advertisingbg.jpg) top left no-repeat;
	display: block;
	margin-top:8px;
	text-align:center;
	padding:30px 0 0 0;
    
    }
#left .advertising img {margin:0 0 10px;padding:0;border:solid 1px green;width:118px;height:88px;}
#left .advertising img.red {border:solid 1px red;}
#left .advertising img.blue {border:solid 1px blue;}
#left .advertising img.green {border:solid 1px green;}
#right {
	position:relative;/*ie needs this to show float */
	width:518px;
	float:left;
	padding:0 0 22px 20px;
}


#right .contentbox 
{
    background: transparent url(/SS/tutorial/img/itembg.jpg) top left repeat-x;
	display: block;
	margin-top:8px;
	clear:left;
	font-size:0.75em;
    }

#right .contentbox img.left {float:left;border:solid 1px #7fa994;margin:10px 10px 0 10px;}
#right .contentbox img.right {float:left;margin:1px 0 0 0;}
#right .contentbox .text {display:block;width:365px;margin-top:10px;color:#000;float:left;}
#right .contentbox .desc {display:block;margin-top:10px;color:#000;}
#right .contentbox .title {margin-bottom:0;}
#right .contentbox .title a {font-weight:bold;color:#575757;}
#right .clearer {clear:both;}

 
#footer {
	width:715px;
	clear:both;
	height:60px;
	text-align:center;
	position:relative;
	padding:8px 0 0 0;
    font-family:Arial, Verdana, Tahoma, Arial;
    font-size:0.75em;
    color:#5d5c5c;
    margin:0 auto;
}
#footer a {
    font-weight:bold;
    color:#5d5c5c;
    margin:0 10px;
    }
#footer p {
    font-size:0.9em;
    margin:0;
    font-weight:bold;
    clear:left;
    text-align:left;
    color:#5d5c5c;
    }


/* Page Printing */
#printLogo {
	display:none;
}

#printWebSite {
	display:none;	
}
#icons {
    position:absolute;
	top:205px;
	width:200px;
	margin:0 0 0 640px;
	height:108px;
	font-family:Tahoma, Verdana, Arial;
	font-size:10px;
	height:20px;
	float:right;
	z-index:900;
	}

/* End Page Printing */




/* Carousel */
.carousel-component { 
    padding:8px 16px 4px 16px;
    margin:0px;
}

.carousel-component .carousel-list li { 
    margin:5px;
    width:145px;
    height:142px; 
    border:0;
    /*    margin-left: auto;*/ /* for testing IE auto issue */
}

.carousel-component .carousel-list li a { 
    display:block;
    outline:none;
}

.carousel-component .carousel-list li a:hover { 
}

.carousel-component .carousel-list li img { 
    display:block; 
    margin-bottom:10px;
}
                                
.carousel-component .carousel-prev { 
    position:absolute;
    top:0px;
    z-index:3;
    cursor:pointer; 
    left:0; 
}

.carousel-component .carousel-next { 
    position:absolute;
    top:0px;
    z-index:3;
    cursor:pointer; 
    right:0; 
}
/* End Carousel 
fieldset input {
color:red;
}
.field {
  background-color:#efefef;
}
.text {
color:red;
}

.email {
color:red;

}
*/
fieldset label { width:220px;display:block;float:left; }