@charset "utf-8";
html,body,* {
	margin:  0px;
    padding: 0px; 
    background: transparent;
	font: 100% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	}
body {
	margin-top:30px;
	margin-bottom:30px;
	text-align: center; 
	color: #000000;
}

p {line-height:1.6em;}

#wrapper {
    width: 1020px;
    margin: 0 auto;
	text-align:left;
}

#intro {
    padding-bottom: 10px;
}

h1.titlespace {padding-left:0.5em;}

h2 {
    margin: 0;
    margin-bottom: 14px;
    padding: 0;
}

#slider {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

.scroll {
    height: 380px;
    width: 960px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: #FFFFFF repeat-x scroll left bottom;
}

.scrollContainer div.panel {
    padding: 0px;
    height: 380px;
    width: 960px;
}

#shade {
    background: #EDEDEC url(http://www.dhctheater.com/ebooks/images/shade.jpg) no-repeat 0 0;
    height: 50px;
	position:relative;
	top:-40px;
}

ul.navigation {
    list-style: none;
	text-align:center;
    margin: 0;
    padding: 0;
	padding-top:20px;
	overflow:hidden;
	position:relative;
	top:-39px;
}

ul.navigation li {
    display: inline;
	text-align:center;
    margin-right: 1px;
	margin-left: 1px;
}

ul.navigation a {
    padding: 5px 11px 20px 10px;
    color: #FFF;
	font-size:12px;
    text-decoration: none;
	background-color:#F00;
	box-shadow: 2px -2px 5px #000; /*CSS3*/
	-moz-box-shadow: 2px -2px 5px #000; /* Firefox�p*/
	-webkit-box-shadow: 2px -2px 5px #000; /* Google Chrome, Safari�p*/

}

ul.navigation a:hover {
	color:#000;
    background-color: #f6f6f6;
}

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

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


ul.bottomnavigation {
    list-style: none;
	text-align:center;
    margin: 0;
    padding: 0;
	overflow:hidden;
}

ul.bottomnavigation li {
	display: inline;
	font-size:10px;
	text-align:center;
	margin:0px;
    margin-right: 5px;
	margin-left: 5px;
}


ul.bottomnavigation a {
    padding: 0px;
    color: #000;
    text-decoration: none;
	text-align:center;
}


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

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

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

.hide {
    display: none;
}

p.textcenter {font-size:10px;text-align:center;}

.topbanner {margin:20px 2px 20px 0px;}

.bookimgmargin {float:left;margin:0 80px 0px 70px;}


<!-- virtical menu  -->
/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 660px;
  height:90px;
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
}
<!-- virtical menu  -->