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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 712px;
	height:100%;
	float:left;

	/* custom decorations */
	background:none;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	background:none;
	height:98%;
}

.items .pages {
	float:left;
	width:712px;
	height:100%;
}

*/

/*.items ul li{
	list-style: none;
	list-style-image:none;
	list-style-type:none;
	display:inline;
	margin:0px;
	padding:0px;
}

.items li {
	padding-right: 4px;
}*/


/* single scrollable item */
/*.scrollable img {
	float:left;
	margin:0px 0px 0px 0px;
	padding:0px;
	border:none;
	width:75px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}*/

/* active item */
.scrollable .active {
	position:relative;
	cursor:default;
}


/* ACCORDION STYLES */

/* ==== First Instance ==== */

#hc1 {
	width: 99%;
	height:200px;
	float:left;
	margin:0 5px;

}

#hc1 li{
margin:0 1px 0 0; /*Spacing between each LI container*/
}

#hc1 .hpanel {
	width:385px;
	text-align:left;
}

#hc1 li .hpanel{
padding: 2px; /*Padding inside each content*/
background: none;
}

#hc1 .hpanel img {
  border: none;
  padding: 0px;
  float:left;
}

#hc1 .hpanel span {
  	width: 285px;
  	height: 190px;
  	padding: 5px;
	font-size: 11px;
	font-weight:normal;
	float:left;
	margin: 0px 0px 0px 0px;}
	
/* ==== Second Instance ==== */

#hc2 {
	width: 99%;
	height:200px;
	float:left;
	margin:0 5px;

}

#hc2 li{
margin:0 1px 0 0; /*Spacing between each LI container*/
}

#hc2 .hpanel {
	width:385px;
	text-align:left;

}

#hc2 li .hpanel{
padding: 2px; /*Padding inside each content*/
background: none;
}

#hc2 .hpanel img {
  border: none;
  padding: 0px;
  float:left;
}

#hc2 .hpanel span {
  	width: 285px;
  	height: 190px;
  	padding: 5px;
	font-size: 11px;
	font-weight:normal;
	float:left;
	margin: 0px 0px 0px 0px;}
	

	
/* LINK STYLES */

.hpanel a {
  	font-weight: bold;
  	text-decoration: none;
  	color: black;
 }

.hpanel a:link {
  	text-decoration: none;
  	color: black;
 }
 
.hpanel a:visited {
  	text-decoration: none;
  	color: black;
 }

.hpanel a:hover {
  	text-decoration: underline;
  	
 }

/* === Global === */

.haccordion{
padding: 0;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 190px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}

.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 190px;  /*For users with JS disabled: Height of each content*/
}