#viewer { width:520px; margin:auto; height: 400px;}
#nav { width:150px; float:left; margin:0; padding:0; list-style-type:none; background-color:#000; }
#nav li { width:150px; height:100px; padding:0; }
#nav li a { display:block; width:100%; height:100%; overflow:hidden;  no-repeat 0 0; }
#nav li p {position:relative; display:block; width:100%; height:100%; text-indent:10px; top: 75px; overflow:hidden; background:url(images/black70-01.png) repeat; font-size:12px; padding-top: 4px; color:#4ea4d5;}	
#nav li a:hover > p{color:#fff;}	
	
#nav li.thumb1 a {background-image:url(images/web-design/courses-courses-150x100a.jpg); background-repeat:no-repeat;}
#nav li.thumb1 a:hover, #nav li.thumb1 a.on {background-image:url(images/web-design/courses-courses-150x100MOa.jpg); background-repeat:no-repeat;}

#nav li.thumb2 a {background-image:url(images/graphic-design/raster/stripey-150x100a.jpg); background-repeat:no-repeat;}
#nav li.thumb2 a:hover, #nav li.thumb2 a.on {background-image:url(images/graphic-design/raster/stripey-150x100MOa.jpg); background-repeat:no-repeat; }

#nav li.thumb3 a {background-image: url(images/graphic-design/vector/digital_art-150x100a.png); background-repeat:no-repeat;}
#nav li.thumb3 a:hover, #nav li.thumb3 a.on {background-image: url(images/graphic-design/vector/digital_art-150x100MOa.png); background-repeat:no-repeat;}

#nav li.thumb4 a {background-image:url(images/graphic-design/logo&print/nessusPoster150x100a.png); background-repeat:no-repeat;}
#nav li.thumb4 a:hover, #nav li.thumb4 a.on {background-image:url(images/graphic-design/logo&print/nessusPoster150x100MOa.png); background-repeat:no-repeat;}



#panels { width:370px; height:400px; overflow:hidden; position:relative; float:left; }
#slider { width:1480px; height:400px; }
#slider div { float:left; position:relative; }
#slider p { position:absolute; bottom:0; left:0; color:#fff; font:16px "Trebuchet MS"; margin:0; width:95%;  padding:5px 5% 10px; background-image:url(images/black70-01.png); background-repeat: repeat; }