* { font-family: Tahoma,Times,Times New Roman,serif; } 
html, body { margin: 0; padding: 0; width:100%; height: 100% }
body { background-color: #000; }
img { border:0 }
/* Container */
div#container { position:relative; width: 100% }
	/* Common */
	div#menu, div#contentContainer, div#logoI2M { width:1130px; }
	/* Menu */
	div#menu { position: relative; margin: 0 auto; top: 10px; }
	div#menu ul { position:absolute; right: 20px; list-style:none; margin:0; padding:0 }
	div#menu ul li { display:inline; margin:0; padding:0; margin-left: 20px; font-size:0.8em; font-weight: 100; font-family: Tahoma,Times,Times New Roman,serif; color: #FFF }
	div#menu a { color:#FFF; text-decoration:none; }
	div#menu a:hover { color:#FFF; text-decoration:underline; }
	/* Content */
	div#content { position:relative; top: 40px; height: 690px; width:100%; background-color: #e5e2d9;  background: url(../imgs/bg.jpg) no-repeat center #e5e2d9 }
	div#contentContainer { position:relative; margin: 0 auto; height: 100%; }
		/* Top Main Border */
		div#topMainBorder { position:absolute; top: 0; left:0; z-index:1; background:url(../imgs/topMainBorder.png) repeat-x; height: 8px; width: 100% }
		/* Logo Dotz */
		div#logoDotz { position:absolute; width:208px; height:68px; left: 20px; top: 40px; background:url(../imgs/logoDotz.png) no-repeat }
		/* Quotes */
		div.quotes { position: absolute; width: 25%; min-width: 370px; left: 20px; top: 135px }
		div.quotes h2 { font-size:24px	}			
		div.quotes h2.author { font-size:12px; font-weight: 100; color: #333 }
		div.quotes h2, div.quotes h2.author {
			font-weight:100;		
			line-height:1.2em;
			margin:12px 0
		}
		div.quotes span { font-family: Georgia,Tahoma,Times,Times New Roman,serif; padding:3px 12px 6px; background-color:#333; color:#FFF }
		div.quotes strong { font-family: Georgia,Tahoma,Times,Times New Roman,serif; color: #86c03f; font-weight:100 }
		/* Main Works */
		div#mainWorks { position:absolute; z-index: 5; top: 130px; right:20px; }
		/* Circle TXT */
		div#circleTXT { position:absolute; bottom: 0; left: -60px; width:374px; height:300px; background:url(../imgs/circleTXT.png) no-repeat }
		div#circleTXT div { position:relative; top: 120px; left: 77px; width: 230px }
		div#circleTXT div h1 { margin: 5px 0 0 0; padding: 0; font-family: Tahoma,Times,Times New Roman,serif; font-size: 12px; font-weight:100; line-height:1.6em }
		div#circleTXT div a { color:#333; text-decoration:underline; }
		div#circleTXT div a:hover { color:#86c03f; }
		/* Bottom Main Border */
		div#bottomMainBorder { position:absolute; bottom: 0; left:0; z-index:1; background:url(../imgs/bottomMainBorder.png) repeat-x bottom; height: 8px; width: 100% }
	/* Logo I2M */
	div#logoI2M { position:relative; margin: 0 auto; top:55px; }
	div#logoI2M img { float: right; margin-right: 20px; }

/* Portfolio Scroll */
/* root element for the whole scrollable setup */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 646px;	 
	height:300px;	
}	
/*  root element for scrollable items. It is absolutely positioned with large width. */
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}	
/* custom positioning for navigational links */
a.prev, a.next { margin-top:118px; }	
/* single item */
#thumbs div {
	float:left;
	width:214px;
	height:300px;
	background:#333 url(../imgs/flowplayer/h150.png) repeat-x 0 146px;
	color:#fff;
	border-right:1px solid #333;
	cursor:pointer;
}	
/* style when mouse is over the item */
#thumbs div.hover { background-color: #000;	}	
/* style when element is active (clicked) */
#thumbs div.active { background-color: #000; cursor:default; }	
#thumbs h3, #thumbs p, #thumbs span {
	margin: 0 13px;		
	font-family: Tahoma,Times,Times New Roman,serif;
	font-size:13px;
	color:#fff;	
}	
#thumbs p, #thumbs span { margin-top: 25px; }
#thumbs h3 em {	font-style:normal; color:#86C03F; }