#slider 
{
width: 620px;
margin: auto;
position: relative;
float: left;
}

.scroll 
{
height: 300px;
width: 620px;
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
}

.scrollContainer div.panel 
{
padding: 20px;
height: 220px;
width: 580px;
}

.panel h2
{
font-family: georgia;
font-weight: normal;
font-size: 30px;
font-style: italic;
margin: 0px;
padding: 0px;
}

ul.navigation 
{
list-style: none;
margin: 0;
padding: 0;
padding-top: 30px;
padding-bottom: 30px;
width: 730px;
background: url('images/shadow.jpg') no-repeat center bottom;
float: left;
font-family: georgia;
font-size: 18px;
color: #222222;
text-align: center;
}

ul.navigation li 
{
display: inline;
}

.first
{
background: url('images/rogologo.jpg') no-repeat center left;
}

.location
{
background: url('images/locationlogo.jpg') no-repeat center left;
}

.contact
{
background: url('images/contactlogo.jpg') no-repeat center left;
}

.menu
{
background: url('images/menulogo.jpg') no-repeat center left;
}

.gallery
{
background: url('images/gallerylogo.jpg') no-repeat center left;
}

ul.navigation a 
{
padding: 10px;
padding-left: 40px;
color: #555555;
text-decoration: none;
}

ul.navigation a:hover 
{
color: #000000;
}

ul.navigation a.selected 
{
background-color: #ffffff;
}

ul.navigation a:focus 
{
outline: none;
}

.scrollButtons 
{
position: absolute;
top: 120px;
cursor: pointer;
}

.scrollButtons.left 
{
left: -20px;
}

.scrollButtons.right 
{
right: -20px;
}

.hide 
{
display: none;
}