@charset "utf-8";
/* CSS Document */
/* DEPRECATED FILE */
/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../img/scrollable/arrow/left.png) no-repeat;
	float:left;
	margin:43px 10px;
	/*cursor:pointer;*/
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/scrollable/arrow/right.png);
	clear:right;	
}



/*********** navigator ***********/
/*** these are the arrows / circles for moving back and forth ***/

/* position and dimensions of the navigator */
div.navi {
	margin-left:328px;
	width:200px;
	height:1px/*20px*/;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	


/****** MAIN AREA ********/
#homeFeaturesContainer {
	width:650px;
	height:450px;
	margin:10px;
	font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;

	}
	
/* main vertical scroll */
#main {
	position:relative;
	overflow:hidden;
	height: 450px;
}

/* root element for pages */
#pages {
	position:absolute;
	height:450px/*0000em*/;
	width:430px; /*added*/
}

/* single page */
.page {
	padding:10px;
	height: 450px;
	background:#222 url(http://static.flowplayer.org/img/global/gradient/h600.png) 0 0 repeat-x;
	width:/*520px*/450px;
}

/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 450px /*510px*/;
	height: 450px;
}

/* root element for scrollable items */
.scrollable .items {
	/*width:20000em;*/
	position:absolute;
	clear:both;
	top:0;
}

/* single scrollable item */
.item {
	float:left;
	/*cursor:pointer;*/
	width:450px /*500px*/;
	height:450px;
	
}
.itemContents {
	background:#FFF;
	border:3px solid #ccc;
	padding:10px;
	width:420px;
	height:390px;
	}

.itemContents h2 {margin:10px; font-size:18px; font-weight:bold; color:#5781ff; text-align:center}
.itemContents p {font-size:13px; }

.itemContents .cta {clear:both; text-align:center; border:2px solid #EA751A; width:300px; background:#f9b581; margin:10px auto;}
.itemContents .cta a {text-decoration: none; color:#000; display:block; padding:5px}
.itemContents .cta a:hover {background:#EA751A; color:#ffffff}

.itemContents .cta2 {clear:both; text-align:center; border:2px solid #5781ff; width:300px; background:#95aefd; margin:10px auto;}
.itemContents .cta2 a {text-decoration: none; color:#000; display:block; padding:5px}
.itemContents .cta2 a:hover {background:#5781ff; color:#ffffff}

.itemContents .cta3 {clear:both; text-align:center; border:2px solid #c01262; width:300px; background:#f2549c; margin:10px auto;}
.itemContents .cta3 a {text-decoration: none; color:#000; display:block; padding:5px}
.itemContents .cta3 a:hover {background:#c01262; color:#ffffff}

.itemContents .link1 {}
.itemContents .link1 a {text-decoration: underline; color:#333333;}
.itemContents .link1 a:hover {color:#cccccc}

.itemContents .link2 {}
.itemContents .link2 a {text-decoration: underline; color:#333333}
.itemContents .link2 a:hover {color:#cccccc}

.itemContents .link3 {}
.itemContents .link3 a {text-decoration: underline; color:#ffffff}
.itemContents .link3 a:hover {color:#bfe9f7}

.itemContents .ctapink {clear:both; text-align:center; border:2px solid #890342; width:300px; background:#de3e7e; margin:10px auto;}
.itemContents .ctapink a {text-decoration: none; color:#fff; display:block; padding:5px}
.itemContents .ctapink a:hover {background:#ED92B6; color:#333333}

.itemContents .cta-aquagreen {clear:both; text-align:center; border:2px solid #1DB478; width:300px; background:#21CA86; margin:10px auto;}
.itemContents .cta-aquagreen a {text-decoration: none; color:#fff; display:block; padding:5px}
.itemContents .cta-aquagreen a:hover {background:#1A9E69; color:#ffffff}

.itemContents .cta-brick {clear:both; text-align:center; border:2px solid #E56A5D; width:300px; background:#D33422; margin:10px auto;}
.itemContents .cta-brick a {text-decoration: none; color:#fff; display:block; padding:5px}
.itemContents .cta-brick a:hover {background:#E15647; color:#ffffff}


	
/* main navigator */
#main_navi {
	float:left;
	padding:0px !important;
	margin:0px !important;
}

#main_navi li {
	background-color:#333;
	border-top:1px solid #666;
	clear:both;
	color:#FFFFFF;
	font-size:12px;
	height:/*75px*/50px;
	width:160px;
	padding:10px;
	list-style-type:none;
	cursor:pointer;
}

#main_navi li:hover {
	background-color:#444;
}

#main_navi li.active {
	background-color:#555;
}

#main_navi img {
	float:left;
	margin-right:10px;
}

#main_navi strong {
	display:block;
}

#main div.navi {
	margin-left:250px;
	cursor:pointer;
}