/* Colors */

#sid-menu, #sid-logo {background-color: #dbdbdb;}
body {background-color: #756762;}

#sidebar a {color: #808080;}
.area a {color: #fff;}

.area p {color: #d3c3be;}
.img-area p {color: #ccc; }
.img-area div {background-color: #555;}
.img-area div p span {color: #999;}

/* Document */ 

body {
	height: 100%;
	/*font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif;*/
	font-family: Verdana, "Geneva CE", lucida, sans-serif;
	}

/* Standard classes */

p {font-size: 11px; line-height: 18px; margin-bottom: 9px;}

#content .area small {font-size: 9px; text-transform: uppercase; color: #51443f;}

sup {position: relative; top: -2px; font-size: 9px;}

a {text-decoration: none;}
.area a:hover span {background: url('../img/link.png') left bottom repeat-x; padding-bottom: 1px;}

h1 {font-size: 20px; line-height: 30px;}
h3 {color: #fff; font-size: 13px; font-weight: normal; line-height: 26px; text-transform: uppercase;}

hr {display: none;}

abbr { cursor: help;} 
abbr.uppercase {font-size: 9px; text-transform: uppercase; }

/* Various classes */

/* Sidebar */

#sidebar {
	background: url('../img/sidebar.png') top right no-repeat;
	width: 260px; /*260*/
	height: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 50;
/*visibility: hidden;*/
}
#sid {
	position: absolute;
	top: 60px;
	left: 20px;
	
}
#sid-logo {width: 200px; height: 160px;}
	#sid-logo h1 {font-weight: normal; text-align: center; padding-top: 80px;}
		#sid-logo h1 a {color: #808080;}
			#sid-logo h1 a small {font-size: 15px; text-transform: uppercase;}
			
			#sid-logo h1 a span {
				background: url('../img/sid-logo.gif') left top no-repeat;
				width: 200px;
				height: 160px;
				z-index: 10;
				position: absolute;
				left: 0;
				top: 0;
				cursor: pointer;
			}
			#sid-logo h1 a:hover span {
				background-position: -200px 0;
			}
ul#sid-menu {margin-top: 3px;}
	#sid-menu li {}
		#sid-menu li a {
		width: 200px; height: 26px; line-height: 26px;
		display: block; position: relative;
		text-align: center;
		}
			#sid-menu li a .en {color: #e33086;}
			#sid-menu li a .cs {color: #4c6aff;}
			#sid-menu li a:hover .en {color: #972059;}
			#sid-menu li a:hover .cs {color: #364ab3;}
			
			#sid-menu li a span.image {
				width: 200px; 
				height: 26px; 
				z-index: 10; 
				position: absolute; 
				top: 0; left: 0; 
				background: url('../img/sid-menu.gif');
				cursor: pointer;
			}
		
			#sid-menu li.services a span.image {background-position: 0 0px; }
			#sid-menu li.portfolio a span.image {background-position: 0 -26px; }
			#sid-menu li.about a span.image {background-position: 0 -52px; }
			#sid-menu li.notes a span.image {background-position: 0 -78px; }
			#sid-menu li.contact a span.image {background-position: 0 -104px; }
			
			#sid-menu li.services a:hover span.image {background-position: -200px 0px; }
			#sid-menu li.portfolio a:hover span.image {background-position: -200px -26px; }
			#sid-menu li.about a:hover span.image {background-position: -200px -52px; }
			#sid-menu li.notes a:hover span.image {background-position: -200px -78px; }
			#sid-menu li.contact a:hover span.image {background-position: -200px -104px; }

/* Content */
#content {
	padding: 0 10px 680px 280px; /*280*/
	min-width: 320px;
	position: relative;
}
/* Teaser */
#teaser {
	position: relative;
	margin: 0 80px 0 40px;
	padding: 0;
	width: 200px;
	height: 450px;
	float: left;
	
}
	#teaser h2 {
		font-size: 50px; 
		line-height: 78px;
		text-transform: uppercase;
		font-weight: normal;
		width: 200px;
		color: #fff;
		position: relative;
		top: -10px;
	}
		#teaser h2 .first {	color: #dd328b; }
		#teaser h2 .second { color: #bf3da3;	}
		#teaser h2 .third { color: #984dc2; }
		#teaser h2 .fourth { color: #705ce2; }
		#teaser h2 .fifth { color: #5268fa; }

	#teaser span.image {
		background: url('../img/teaser.png') left top no-repeat;
		width: 200px; height: 450px;
		position: absolute; top: 0; left: 0;
	}
/* Features */		
#features {
	position: relative;
	margin: 0 0 0 40px;
	width: 280px;
	height: 450px;
	float: left;
}
	#features h3 { margin: 0 0 26px 0px; position: relative;	top: -5px; }
	#features h3 span { display: block;	text-align: right; }
	
	/* #features h3.first { left: 24px; }	#features h3.second {	left: 18px; }	#features h3.third { left: 12px; } #features h3.fourth { left: 6px; }	#features h3.fifth { left: 0; }	*/
	
	#features span.image {
		background: url('../img/features.gif') left top no-repeat;
		width: 280px; height: 450px;
		position: absolute; top: 0; left: 0;
	}	

/* Section */
.section { margin-top: 450px; clear: both; overflow: auto;}
.top-section {padding-top: 230px; position: relative; overflow: auto;}
	.section h2 {
		width: 200px;	
		height: 220px;
		margin-left: 40px;
		font-size: 30px; 
		line-height: 220px;
		color: #fff;
		position: relative;
	}
		.section h2 span {
			width: 200px;
			height: 220px;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
		.section#services h2 span { background: url('../img/head-services.png') no-repeat; }
		.section#portfolio h2 span { background: url('../img/head-portfolio.png') no-repeat; }
		.section#about h2 span { background: url('../img/head-about.png') no-repeat; }
		.section#notes h2 span { background: url('../img/head-notes.png') no-repeat; }
		.section#contact h2 span { background: url('../img/head-contact.png') no-repeat; }
		
/* Areas */
.area {
	margin-top: 10px;
	width: 320px;
	height: 500px; /*450*/
	
	float: left;
	position: relative;
}

#services .area p { margin-left: 40px; position: relative; }
#services .area p strong { font-weight: normal; }
#services .area { height: 240px; } /*220*/ /* <<< */

	.area h3 {
		position: relative;
		height: 50px;
		margin-bottom: 20px;
		padding-left: 40px;
		vertical-align: top;
	}
		.area h3 span.top {position:relative; top: -5px;}
		
		.area h3 span.ax {
		height: 60px;
		display: block;
		width: 100%;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		background: url('../img/text-areas.gif');
		}

		.area h3#a1 span.ax { background-position: -20px 0; }
		.area h3#a2 span.ax { background-position: -20px -60px; }
		.area h3#a3 span.ax { background-position: -20px -120px; }
		.area h3#a4 span.ax { background-position: -20px -180px; }
		.area h3#a5 span.ax { background-position: -20px -240px; }
		.area h3#a6 span.ax { background-position: -20px -300px; }
		.area h3#a7 span.ax { background-position: -20px -360px; }
		.area h3#a8 span.ax { background-position: -20px -420px; }
		.area h3#a9 span.ax { background-position: -20px -480px; }
		.area h3#a10 span.ax { background-position: -20px -540px; }
		.area h3#a11 span.ax { background-position: -20px -600px; }
		.area h3#a12 span.ax { background-position: -20px -660px; }
		.area h3#a13 span.ax { background-position: -20px -720px; }
		.area h3#a14 span.ax { background-position: -20px -780px; }
		.area h3#a15 span.ax { background-position: -20px -840px; }
		.area h3#a16 span.ax { background-position: -20px -900px; }
		.area h3#a17 span.ax { background-position: -20px -960px; }
		.area h3#a18 span.ax { background-position: -20px -1020px; }
		.area h3#a19 span.ax { background-position: -20px -1080px; }
		.area h3#a20 span.ax { background-position: -20px -1140px; }
		
		
	
	.area p {margin-left: 140px;	}
		.area p .left {	position: absolute;	left: 40px;	width: 100px;	}
		.area p .bottom {	position: absolute;	left: 0px; top: 18px;	}
		.area.experiences img {	display: inline; position: relative; top: 2px; }
	
		.area .icons { margin-top: 18px; }
		.area .icons p { line-height: 27px; margin-bottom: 0;}
			.area .icons p img { position: relative; top: 3px; margin-right: 3px; }
	/*.area .icons { margin-top: 26px; }
		.area .icons p { line-height: 22px; margin-bottom: 0px; }
			.area .icons p img { position: relative; top: 3px; margin-right: 3px; }*/
			
/* Image Areas */
.img-area {
	margin: 10px 0px 20px 40px;
	height: 220px;
	float: left;
	position: relative;
	width: 280px;
}
	.img-area a.pict { display: block; width: 280px; height: 220px;	}
	
	.img-area a span.pict-hover {
		display:block;
		position:absolute;
		top:0;
		left:0;
		height: 220px;
		width: 280px;
		z-index: 10;
	}
		.img-area a.pict img { display: none; }
		
	.img-area div {
		padding: 7px 10px 0px 10px;
		width: 260px;
		z-index: 50;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}
	
	.img-area p { font-size: 10px; line-height: 14px; margin-bottom: 7px;}
		.img-area div p span {/*text-transform: uppercase;*/}

	.img-area .edge {
		background: url('../img/edge.png') top left no-repeat;
		position:absolute;
		top: 190px; left: 0; width: 280px; height: 30px; z-index: 10;
	}

	
	.img-area#p1 a.pict { background: url('../pict/p1a.png'); }
	.img-area#p1 a span.pict-hover {	background: url('../pict/p1b.png'); }
	.img-area#p2 a.pict { background: url('../pict/p2a.png');	}
	.img-area#p2 a span.pict-hover {	background: url('../pict/p2b.png'); }	
	.img-area#p3 a.pict { background: url('../pict/p3a.png'); }
	.img-area#p3 a span.pict-hover {	background: url('../pict/p3b.png'); }	
	.img-area#p4 a.pict { background: url('../pict/p4a.png'); }
	.img-area#p4 a span.pict-hover {	background: url('../pict/p4b.png'); }	
	.img-area#p5 a.pict { background: url('../pict/p5a.png'); }
	.img-area#p5 a span.pict-hover {	background: url('../pict/p5b.png'); }	
	.img-area#p6 a.pict { background: url('../pict/p6a.png'); }
	.img-area#p6 a span.pict-hover {	background: url('../pict/p6b.png'); }
	.img-area#p7 a.pict { background: url('../pict/p7a.png'); }
	.img-area#p7 a span.pict-hover {	background: url('../pict/p7b.png'); }
	.img-area#p8 a.pict { background: url('../pict/p8a.png'); }
	.img-area#p8 a span.pict-hover {	background: url('../pict/p8b.png'); }
	.img-area#p9 a.pict { background: url('../pict/p9a.png'); }
	.img-area#p9 a span.pict-hover {	background: url('../pict/p9b.png'); }
	.img-area#p10 a.pict { background: url('../pict/p10a.png'); }
	.img-area#p10 a span.pict-hover {	background: url('../pict/p10b.png'); }
	.img-area#p11 a.pict { background: url('../pict/p11a.png'); }
	.img-area#p11 a span.pict-hover {	background: url('../pict/p11b.png'); }
	.img-area#p12 a.pict { background: url('../pict/p12a.png'); }
	.img-area#p12 a span.pict-hover {	background: url('../pict/p12b.png'); }
	.img-area#p13 a.pict { background: url('../pict/p13a.png'); }
	.img-area#p13 a span.pict-hover {	background: url('../pict/p13b.png'); }
	.img-area#p14 a.pict { background: url('../pict/p14a.png'); }
	.img-area#p14 a span.pict-hover {	background: url('../pict/p14b.png'); }
	.img-area#p15 a.pict { background: url('../pict/p15a.png'); }
	.img-area#p15 a span.pict-hover {	background: url('../pict/p15b.png'); }
	.img-area#p16 a.pict { background: url('../pict/p16a.png'); }
	.img-area#p16 a span.pict-hover {	background: url('../pict/p16b.png'); }
	.img-area#p17 a.pict { background: url('../pict/p17a.png'); }
	.img-area#p17 a span.pict-hover {	background: url('../pict/p17b.png'); }
	.img-area#p18 a.pict { background: url('../pict/p18a.png'); }
	.img-area#p18 a span.pict-hover {	background: url('../pict/p18b.png'); }
	.img-area#p19 a.pict { background: url('../pict/p19a.png'); }
	.img-area#p19 a span.pict-hover {	background: url('../pict/p19b.png'); }



/*.section h2 span, #teaser span.image, #features span.image, .area h3 span.ax { z-index: -10; }*/