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

#main{
	width:1024px;
	margin:0 auto;
}

#main section{
	width:970px;
	margin:0 0 0 37px;
	padding:150px 0 0 0;
	color:#666;
}

#main section h1{
	font-family: 'Oswald', sans-serif;
	font-size:2.8em;
	padding:0 0 20px 0;
}



/*  ------------------------------------------------------------
		#main-header
	------------------------------------------------------------  */
#main-header{
	width:970px;
	padding:0 0 60px 0;
}

#main-header .imgArea{
	width:587px;
	float:left;
}

#main-header .imgArea .img{
	margin:0 0 2px 0;
}

#main-header .imgArea .img ul{
	width:587px;
	height:330px;
	position:relative;
	overflow:hidden;
}

#main-header .imgArea .img li{
	width:587px;
	height:330px;
	position:absolute;
	left:0;
	top:0;
	background:#000 url(../img/img_loader.gif) no-repeat 50% 50%;
}

#main-header .imgArea .img li.sub{
	display:none;
}

#main-header .imgArea .nav{
	width:587px;
	height:48px;
}

#main-header .imgArea .nav ul{
	float:left;
}

#main-header .imgArea .nav li{
	width:48px;
	height:48px;
	margin:0 2px 0 0;
	float:left;
	cursor:pointer;
}

#main-header .imgArea .nav li.prev{
	background:#fff url(../img/prev.png) no-repeat 17px 12px;
}

#main-header .imgArea .nav li.next{
	background:#fff url(../img/next.png) no-repeat 18px 12px;
}

#main-header .imgArea .nav li:hover{
	background-color:#e6e6e6;
}

#main-header .imgArea .nav p{
	font-family: 'Oswald', sans-serif;
	font-size:1.6em;
	color:#666;
	width:487px;
	height:48px;
	line-height:48px;
	background:#fff;
	float:right;
	position:relative;
}

#main-header .imgArea .nav p span{
	position:absolute;
	right:17px;
}

#main-header .txtArea{
	width:344px;
	height:380px;
	float:left;
	margin:0 0 0 17px;
}

#main-header .txtArea p{
	width:310px;
	font-size:1.3em;
	padding:0 0 13px 0;
}

#main-header .txtArea h2{
	width:310px;
	font-size:2em;
	line-height:1.6em;
	padding:0 0 5px 0;
	font-weight:bold;
}

#main-header .txtArea h3{
	width:310px;
	font-family: 'Oswald', sans-serif;
	font-size:1.3em;
	padding:0 0 3px 0;
}

#main-header .txtArea a{
	color:#0099cc;
}

#main-header .txtArea a:hover{
	text-decoration:underline;
}


/*  ------------------------------------------------------------
		#sort-btn
	------------------------------------------------------------  */
#sort-btn{
	padding:0 0 40px 0;
}

#sort-btn li{
	font-family: 'Oswald', sans-serif;
	font-size:1.8em;
	margin:0 25px 0 0;
	float:left;
}



/*  ------------------------------------------------------------
		#main-list
	------------------------------------------------------------  */

#main-list ul{
	width:970px;
	position:relative;
}

#main-list ul li{
	width:225px;
	height:200px;
	background:#fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	position:absolute;
	left:0;
	top:0;
	cursor:pointer;
	padding:8px 0 0 0;
}

#main-list ul li table{
	margin:0 0 0 8px;
	width:209px;
	height:118px;
	overflow:hidden;
	text-align:center;
	background-color:#eee;
}

#main-list ul li.on table{
	-ms-filter: "alpha( opacity=60 )";
	filter: alpha( opacity=60 );
	opacity: 0.6;
}

#main-list ul li table tr td{
	width:209px;
	height:118px;
	vertical-align:middle;
}

#main-list ul li table img{
	position:relative;
}


#main-list ul li p{
	width:205px;
	font-size:1.3em;
	margin:0 0 0 10px;
	padding:10px 0 0 0;
}



/*  ------------------------------------------------------------
		CSS3 transform 3d
	------------------------------------------------------------  */
/*.csstransforms3d #main section{
	-webkit-transform-style: preserve-3d;
    -webkit-perspective: 1200;
	-webkit-perspective-origin: 50% 20%;
    -moz-transform-style: preserve-3d;
    -moz-perspective: 1200;
	transform-style: preserve-3d;
    perspective: 1200;
}*/	

.csstransforms3d #main{
	-webkit-transform-style: preserve-3d;
    -webkit-perspective: 1200;
	-webkit-perspective-origin: 50% 200px;
    -moz-transform-style: preserve-3d;
    -moz-perspective: 1200px;
	-moz-perspective-origin: 50% 200px;
	transform-style: preserve-3d;
    perspective: 1200;
	perspective-origin: 50% 200px;
}


.csstransforms3d #main .main-inner{
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translateZ(-800px);
    -moz-transform-style: preserve-3d;
	-moz-transform : translateZ(-800px);
	transform-style: preserve-3d;
	transform : translateZ(-800px);
}

.csstransforms3d #main .main-inner section{
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translateZ(800px);
    -moz-transform-style: preserve-3d;
	-moz-transform : translateZ(800px);
	transform-style: preserve-3d;
	transform : translateZ(800px);
}

.csstransforms3d #main section #main-header{
	-webkit-transform-style: preserve-3d;
    -webkit-perspective: 1200;
	-webkit-perspective-origin: 50% 330px;
    -moz-transform-style: preserve-3d;
    -moz-perspective: 1200px;
	-moz-perspective-origin: 50% 330px;
	transform-style: preserve-3d;
    perspective: 1200;
	perspective-origin: 50% 330px;
}

.csstransforms3d #main section #main-header .outer{
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translateZ(-800px);
    -moz-transform-style: preserve-3d;
	-moz-transform : translateZ(-800px);
	transform-style: preserve-3d;
	transform : translateZ(-800px);
}

.csstransforms3d #main section #main-header .inner{
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translateZ(800px);
    -moz-transform-style: preserve-3d;
	-moz-transform : translateZ(800px);
	transform-style: preserve-3d;
	transform : translateZ(800px);
}



.csstransforms3d #main-list{
	-webkit-transform-style: preserve-3d;
    -webkit-perspective: 1200;
	-webkit-perspective-origin:50% -150px;
    -moz-transform-style: preserve-3d;
    -moz-perspective: 1200px;
	-moz-perspective-origin:50% -150px;
	transform-style: preserve-3d;
    perspective: 1200;
	perspective-origin:50% -150px;
}

.csstransforms3d #main-list .outer{
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translateZ(-800px);
    -moz-transform-style: preserve-3d;
	-moz-transform : translateZ(-800px);
	transform-style: preserve-3d;
	transform : translateZ(-800px);
}

.csstransforms3d #main-list .inner{
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translateZ(800px);
    -moz-transform-style: preserve-3d;
	-moz-transform : translateZ(800px);
	transform-style: preserve-3d;
	transform : translateZ(800px);
}
/*
.csstransforms3d #main-list ul li{
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	display:none;
}
*/



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