@charset "UTF-8";
/* CSS Document */

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 

#highlight {
	height: 375px;
	width: 665px;
	display: block;
	background-color: #f1f1f1;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* main vertical scroll */ 
#main {
	position:relative;
	overflow:hidden;
	height: 224px;
	width: 645px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
} 
 
/* root element for pages */ 
#pages { 
    position:absolute; 
    height:20000em; 
	clear:both; 
} 
/* root element for horizontal scrollables */ 
.scrollable {
	position:relative;
	overflow:hidden;
	width: 645px;
	height: 224px;
} 
 
/* root element for scrollable items */ 
.scrollable .items { 
    width:20000em; 
    position:absolute; 
    clear:both; 
}
#highlight #main_navi {
	list-style-type: none;
	height: 141px;
	display: block;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
}
#highlight #main_navi li {
	float: left;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 5px;
}

#highlight #main_navi li.active {
border-bottom: solid 8px #5a2249;
border-top: solid 8px #5a2249;
}

#highlight #main_navi li:hover {
border-bottom: solid 8px #000000;
border-top: solid 8px #000000;

}


.purple1 {
	background-image: url(../images/purple-highlight/item1.jpg);
}

.purple2 {
	background-image: url(../images/purple-highlight/item2.jpg);
}

.purple3 {
	background-image: url(../images/purple-highlight/item3.jpg);
}

.purple4 {
	background-image: url(../images/purple-highlight/item4.jpg);
}

.purple5 {
	background-image: url(../images/purple-highlight/item5.jpg);
}