#topnavpanel {
height:250px;
width:1065px;
}

#topnavpanel ul {
float:right;
}

#topnavpanel ul li a {
background-image:url(http://www.dgl-ilkley.co.uk/images/topnav_but.png);
background-repeat:no-repeat;
width:161px;
height:41px;
display:block;
position:relative;
text-align:center;
padding-top:15px;
float:left;
}

#topnavpanel ul li a:visited {
background-image:url(http://www.dgl-ilkley.co.uk/images/topnav_but.png);
background-repeat:no-repeat;
width:161px;
height:41px;
display:block;
position:relative;
text-align:center;
padding-top:15px;
float:left;
}


#topnavpanel ul li a:hover {
background-image:url(http://www.dgl-ilkley.co.uk/images/topnav_buthover.png);
background-repeat:no-repeat;
width:161px;
height:41px;
display:block;
float:left;
position:relative;
text-align:center;
padding-top:15px;
}

div#headline {
background-image: url(http://www.dgl-ilkley.co.uk/images/headline.jpg);
background-position: bottom left;
background-repeat:repeat-x;
padding-bottom:10px;
}

div.quality {
    font-size: 1.25em;
    border: 1px #ba464a solid;
    padding: 15px;
    line-height: 125%;
    margin: 20px;
}

td.maincontent {
padding:10px 110px 20px 25px;
}

td.maincontent p, td.maincontent li{
   line-height: 150%;
}

#projecttable {
   border:0;
   border-collapse: collapse;
}

#projecttable td {
   background: #efefef;
   padding:2px;
   border: 0;
   text-align:center;
   vertical-align:middle;
}


#centortable td.centortext {
  font-size:9px;
  padding-bottom: 5px;
  line-height:140%;
}



div.cssgallerytable {
       	background: transparent;
	width:352px;
        padding: 5px 5px 10px 5px;
}

div.cssgallerytable p {
       	font: 10px bold;
}

      
	/* cssgallery specific.
	   This version adapted to have a background image to start off  */	
	
	ul#cssgallery, ul#cssgallery li{
			margin:0;
			padding:0;
			list-style:none;
			}
			
	/* set height and width of main and tn images in ul  */				
		ul#cssgallery{
			width:350px;
			height:330px;
			position:relative;
			}	
	/* set top margin of li, this is where main image goes
	   It is normally difference between tn height and total height */							

						
		ul#cssgallery li{
			float:left;
			display:inline;
			margin-top:265px;
			padding-right: 1px;
			}	
	/* set all images for no border */		
		ul#cssgallery a img {
			border: none;
			}
	/* set height of tn images in ul, the browser will resize down to this in proportion  */		
		ul#cssgallery a img.tn{
//			height:50px;
			}
	/* all spans in teh gallery are not displayed initially
	   this is also a fix for IE6, as cant specify img in span on hover  */					
		ul#cssgallery a span{
			display:none;
			}

	/* the background span, this set behind other elements and set to display.
	   in the html, the same image reference needs only to be in 
	   the first li in the ul.  On hover, this image is overlayed by the main span */				

		ul#cssgallery a span.bg {
			position:absolute;
			width:inherit;
			float:left;
			top:0;
			left:0;

			display:block;
			}			

	/* this is the main hover, setting the contents to the front, and no background.
	   The order of these 2 statements is crucial for IE6  */	
		ul#cssgallery a:hover {
			z-index:100;
			background:none;
		}					
							
	/* the main span, this overlays the existing diaplayed image on hover
	   the white background is needed where an image is smaller than the first image  */	
		ul#cssgallery a:hover span {
			position:absolute;
			height:265px;
			float:left;
			top:0;
			left:0;
			display:block;
			background:#ffffff;
		}



/* Easy Slider */
#sliderwrapper {
        position:relative;
	PADDING: 0px;
	WIDTH: 350px;
	BACKGROUND: #eeeeee;
	HEIGHT: 350px;
	MARGIN-LEFT:0px;
        float:right;
}

	#slider LI IMG {
		border:none;
	}

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:350px;
		height:350px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
                position:absolute;
		left:-0px;
		top:121px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:430px;
                top: 121px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
                position:relative;
		width:30px;
		height:77px;
		background:url(http://www.prospatek.co.uk/images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(http://www.prospatek.co.uk/images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */