/*  ------------------------------------------------------------
		html, body
	------------------------------------------------------------  */
html, body{
	width:100%;
	height:100%;
	min-height:768px;
}

/*  ------------------------------------------------------------
		main
	------------------------------------------------------------  */
#main-container{
	width:100%;
	overflow:hidden;
}


/*  ------------------------------------------------------------
		cube
	------------------------------------------------------------  */
#cube-container{
	position:relative;
	width:1024px;
	height:768px;
	margin:0 auto;
}

#cube{
	width:747px;
	height:421px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-230px 0 0 -373px;
	z-index:500;
	overflow:hidden;
}

#cube li{
	position:absolute;
	left:0;
	top:0;
	cursor:pointer;
	display:none;
}

#cube li.plane-front{
	display:block;
}

#cube li .bg{
	position:relative;
	width:747px;
	height:421px;
}

#cube li .title{
	position:absolute;
	bottom:0;
	width:747px;
	height:27px;
	color:#eee;
	text-indent:62px;
	line-height:27px;
	background-color: rgb(5,37,50);
	background-color: rgba(5,37,50,0.4);
	background-image:url(../img/works_title.png);
	background-repeat:no-repeat;
	background-position:9px 6px;
	overflow:hidden;
}

#shadow{
	width:747px;
	height:116px;
	position:absolute;
	left:50%;
	bottom:73px;
	margin:0 0 0 -373px;
	background:url(../img/shadow.png) no-repeat;
	z-index:0;
}


/*  ------------------------------------------------------------
		arrows
	------------------------------------------------------------  */
#arrows{
	position:absolute;
	left:50%;
	top:50%;
	z-index:2000;
	margin:-69px 0 0 -25px;
}

#arrows .top{
	width:98px;
	height:50px;
	position:absolute;
	top:-270px;
	cursor:pointer;
	display:none;
}

#arrows .left{
	width:50px;
	height:98px;
	position:absolute;
	left:-460px;
	cursor:pointer;
	display:none;
}

#arrows .right{
	width:50px;
	height:98px;
	position:absolute;
	left:460px;
	cursor:pointer;
	display:none;
}

#arrows .bottom{
	width:98px;
	height:50px;
	position:absolute;
	top:305px;
	cursor:pointer;
	display:none;
}




/*  ------------------------------------------------------------
		Modern Browser
		
		in case of class=".not-anrdoid",
		the browser is not IE and Android.
	------------------------------------------------------------  */
	
.csstransforms3d .not-android #main-container{
	-webkit-transform-style: preserve-3d;
    -webkit-perspective: 1200;
    -moz-transform-style: preserve-3d;
    -moz-perspective: 1200px;
	transform-style: preserve-3d;
    perspective: 1200px;
}

.csstransforms3d .not-android #cube-container{
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(-374px);
    -moz-transform-style: preserve-3d;
	-moz-transform: translateZ(-374px);
	transform-style: preserve-3d;
	transform: translateZ(-374px);
}

.csstransforms3d .not-android #cube{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	overflow:visible;
}

.csstransforms3d .not-android #cube li{
	display:block;
}

.csstransforms3d .not-android #cube [class|=plane] {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.csstransforms3d .not-android #cube .plane-top .bg{
	height:747px;
	background:#d20000;
}

.csstransforms3d .not-android #cube .plane-bottom .bg{
	height:747px;
	background:#0066cc;
}

.csstransforms3d .not-android #cube .plane-front { -webkit-transform: translateZ(374px); -moz-transform: translateZ(374px); transform: translateZ(374px);}
.csstransforms3d .not-android #cube .plane-left { -webkit-transform: rotateY(-90deg) translateZ(374px); -moz-transform: rotateY(-90deg) translateZ(374px); transform: rotateY(-90deg) translateZ(374px);}
.csstransforms3d .not-android #cube .plane-right { -webkit-transform: rotateY(90deg) translateZ(374px); -moz-transform: rotateY(90deg) translateZ(374px); transform: rotateY(90deg) translateZ(374px);}
.csstransforms3d .not-android #cube .plane-back { -webkit-transform: rotateY(180deg) translateZ(374px); -moz-transform: rotateY(180deg) translateZ(374px); transform: rotateY(180deg) translateZ(374px);}
.csstransforms3d .not-android #cube .plane-top { -webkit-transform: translateY(-163px) rotateX(90deg) translateZ(210px); -moz-transform: translateY(-163px) rotateX(90deg) translateZ(210px); transform: translateY(-163px) rotateX(90deg) translateZ(210px);}
.csstransforms3d .not-android #cube .plane-bottom { -webkit-transform: translateY(-163px) rotateX(-90deg) translateZ(210px); -moz-transform: translateY(-163px) rotateX(-90deg) translateZ(210px); transform: translateY(-163px) rotateX(-90deg) translateZ(210px);}
.csstransforms3d .not-android #cube .plane-sub{ display:none }


.csstransforms3d .not-android #cube a.touchArea{
	display:block;
	width:245px;
	height:120px;
	position:absolute;
	background:#f2f2f2;
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	z-index:100;
}
.csstransforms3d .not-android #cube a.leftTouchArea{
	left:126px;
	top:105px;
}

.csstransforms3d .not-android #cube a.rightTouchArea{
	right:116px;
	top:105px;
}

.csstransforms3d .not-android #cube a.touchArea:hover{
	-ms-filter: "alpha( opacity=60 )";
	filter: alpha( opacity=60 );
	opacity: 0.6;
}



.csstransforms3d .not-android #arrows{
	-webkit-transform: translateZ(374px);
	-moz-transform: translateZ(374px);
	transform: translateZ(374px);
}


.csstransforms3d .not-android #shadow{
	-webkit-transform: translateZ(374px);
	-moz-transform: translateZ(374px);
	transform: translateZ(374px);
}




/*  ------------------------------------------------------------
		touch device
	------------------------------------------------------------  */
#touch{
	width:747px;
	height:421px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-210px 0 0 -373px;
	z-index:5000;
	-webkit-transform: translateZ(374px);
	-moz-transform: translateZ(374px);
	transform: translateZ(374px);
}



/*  ------------------------------------------------------------
		footer
	------------------------------------------------------------  */
#footer-container{
	position:absolute;
	bottom:0;
	display:none;
}


/*  ------------------------------------------------------------
		footer #news
	------------------------------------------------------------  */
#news{
	width:950px;
	height:85px;
	margin:0 auto;
}

#news .imgArea{
	float:left;
}

#news .imgArea img{
	width:81px;
	height:auto;
}

#news .txtArea{
	width:340px;
	color:#666;
	float:left;
	margin:0 0 0 20px;
}

#news .txtArea p{
	max-height:55px;
	font-size:1.1em;
	padding:0 0 6px 0;
	overflow:hidden;
}

#news .txtArea ul li{
	font-size:1.2em;
	letter-spacing:0em;
	float:left;
}

#news .txtArea ul li.cat{
	text-indent:23px;
	margin:0 8px 0 0;
	background-repeat:no-repeat;
	background-position:0px 3px;
}

#news .txtArea ul li.date{
	text-indent:13px;
	background:url(../img/news_slash.png) no-repeat 0px 6px;
}


/*  ------------------------------------------------------------
		loader
	------------------------------------------------------------  */
#main-container, #cube-container{
	display : none;
}