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

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

/* required settings */
.scrollableportfolio {
	position:relative; 
	overflow:hidden; 
	width:675px; 
	height:335px; 
}

/*
	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.
*/

/* this cannot be too large */
.scrollableportfolio .items {width:20000em; position:absolute; clear:both;}
.scrollableportfolio .items div{float:left; width:675px; border:none;}


/* single scrollable item */
.scrollableportfolio img {float:left; width:675px; height:300px; border:none; box-sizing:border-box; -moz-box-sizing:border-box; outline:solid 1px #ccc; outline-offset:-1px;}


/* active item */
.scrollableportfolio .active {}


/* position and dimensions of the navigator */
.navi {position:absolute; top:310px; left:0; display:block; height:100px; width:200px; z-index:10000;}


/* items inside navigator */
.navi a {width:10px; height:10px; float:left; margin:0 4px 0 0; background:#FFF; display:block; font-size:1px; border:#CCCCCC solid 2px;}

/* mouseover state */
.navi a:hover {background-color:#666; border:#666 solid 2px;}

/* active state (current page state) */
.navi a.active {background-color:#666; border:#666 solid 2px;}
