#viewport {
	position:relative;	 	
	width: 700px;
	height: 630px;	
	padding: 0;
	margin: 0;	
	
}


div.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 700px;
	height: 610px;	
	padding: 0;
	margin: 0;	
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
#main div.scrollable ul.items {	
	display: block;
	/* this cannot be too large */
	width:20000em;	
	height: 600px;
	position: absolute;
	top: 0;
	left: 0;
	clear:both;		
	padding: 0;
	margin: 0;
}

/* single scrollable item */
div.scrollable ul.items li {
	display: block;
	list-style-type: none;
	float:left;
	width: 700px;
    height: 600px;
	padding: 0;
	margin: 0;
}

/* active item */
div.scrollable ul.items li.active {
	padding: 0;
	margin: 0;
}

div.scrollable ul.items li img {
	width: 698px;
	height: 598px;
}


#prev {
	position: absolute;
	top: 1px;
	left: 1px;
	background:url(../images/bg/prev.png) no-repeat 0 0;
	height: 28px;
	width: 28px;
	z-index: 100;
	text-indent: -999px;
	overflow: hidden;
	cursor: pointer;
}

#prev:hover, #prev:focus {background:url(../images/bg/prev.png) no-repeat 0 -28px;}
#prev:active {background:url(../images/bg/prev.png) no-repeat 0 -56px;}

#next {
	position: absolute;
	top: 1px;
	right: 1px;
	background:url(../images/bg/next.png) no-repeat 0 0;
	height: 28px;
	width: 28px;
	z-index: 100;
	text-indent: -999px;
	overflow: hidden;
	cursor: pointer;
}

#next:hover, #next:focus {background:url(../images/bg/next.png) no-repeat 0 -28px;}
#next:active {background:url(../images/bg/next.png) no-repeat 0 -56px;}

#viewport .navi {
	position: absolute;
	top: 605px;
	right: 1px;
	display: block;
}

#viewport .navi a, #viewport .navi a:visited {
	display: block;
	background: url(../images/bg/dots.gif) no-repeat 0 0;
	height: 14px;
	width: 14px;
	text-indent: -999px;
	overflow: hidden;
	float: left;
}

#viewport .navi a:hover, #viewport .navi a:focus {background: url(../images/bg/dots.gif) no-repeat 0 -28px;}
#viewport .navi a.active, #viewport .navi a:visited.active {background: url(../images/bg/dots.gif) no-repeat 0 -14px;}


span#natrep {display: none;}

#descr {
	width: 470px;
	line-height: 1.4;
}

#main ul.portfoliolist {
	padding: 0;
	margin: 10px 0 0 0;
}

ul.portfoliolist li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: block;
	width: 170px;
	height: 155px;
	float: left;
	padding: 0 5px 0 0;
	margin-bottom: 10px;
	position: relative;
}

ul.portfoliolist li a {
	display: block;
	width: 170px;
	height: 125px;
	cursor: pointer;
}

ul.portfoliolist li img {
	width: 170px;
	height: 125px;
	position: absolute;
	top: 10px;
	left: 0;
}

ul.portfoliolist li span {
	display: block;
	width: 170px;
	position: absolute;
	bottom: 0;
}

#related-projects ul.portfoliolist li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: block;
	width: 97px;
	height: 72px;
	float: left;
	padding: 0 10px 0 0;
	margin-bottom: 10px;
	position: relative;
}

#related-projects ul.portfoliolist li a {
	display: block;
	width: 97px;
	height: 72px;
	cursor: pointer;
}

#related-projects ul.portfoliolist li img {
	width: 97px;
	height: 72px;
	position: absolute;
	top: 10px;
	left: 0;
}


#related-projects h2 {
	display: block;
	background: url(../images/related-projects.gif) no-repeat 0 0;
	width: 699px;
	height: 68px;
	margin-bottom: 5px;
	text-indent: -999px;
	overflow: hidden;
	clear: both;
}

ul#related.portfoliolist {
	display: block;
	width: 680px;
	height: 75px;
	margin-right: 32px;
}


.holder {
	width: 350px;
	height: 300px;
	float: left;
	margin-bottom: 20px;
	position: relative;
}


.holder h2 {
	background: url(../images/bg/bg-sectitle.gif) no-repeat 0 14px;
	padding-bottom: 8px;
	margin-bottom: 10px;
}

.holder img {
	width: 345px;
	height: 255px;
	position: absolute;
	top: 30px;
}