/*desktop resolution at 1024x768*/
@media only screen and (max-width: 1024px){
	body{
		min-width: 1000px;
		max-width: 1024px;
	}

	/*container section*/
	#container{
		width: 90%;
		max-width: 1024px;
		min-width: 800px;
	}

	/*navigation*/
	#nav li {
		width: 140px;
		height: 100%;
		margin: 0;
		padding: 0 10px;
	}

	#nav li a span{
		font-size: 20px;
	}

	span.sb-icon{
		position: absolute;
		left: 20px;
		top:4px;
	}
	
	span.sb-icon:before {
	    line-height: 23px;
	    font-size: 23px;
	}

	#nav span.icon-home{
		margin-left: 10px;
	}

	#nav span.icon-basket{
		margin-left: -8px;
	}

	div#social-icon{
		width: 150px;
		top: 10px;
		right: 0px;
	}
	div#social-icon a{
		width: 40px;
		margin-right: 10px;
	}
	li#message{
		display: none;
	}

	/*footer*/
	footer{
		height: 155px;
	}
	div#footer-content section p{
		font-size: 15px;
	}
	div#footer-content{
		font-size: 13px;
	}
	div#disclaimer p{
		font-size: 9px;
	}
	div#footer-content section ul li{
		text-indent: -35%;
	}

	/*the page title*/
	a#main-title{
		width: 100%;
		height: 165px;
		font-size: 4em;
		top: 40px;
		left: 5px;
		background: url(../images/title-left-1.png) no-repeat top left, url(../images/title-left-2.png) no-repeat 480px 0px;
	}

	a#main-title span:nth-child(1){
		top: 40px;
		left: 180px;
	}

	a#main-title span:nth-child(2){
		right: 100px;
	}

	/*thunbnails general*/

	a.title ~ ul li{
		width: 175px;
		height: 175px;
	}

	a.title ~ ul li a{
		width: 175px;
		height: 175px;
		background-size: 100%;
	}

	a.title ~ ul li:nth-child(1){
		left: 0;
		top: 0;
	}

	a.title ~ ul li:nth-child(2){
		left: 25%;
		top: 0;
	}

	a.title ~ ul li:nth-child(3){
		left: 50%;
		top: 0;
	}

	a.title ~ ul li:nth-child(4){
		left: 75%;
		top: 0;
	}

	a.title ~ ul li:nth-child(5){
		left: 0;
		top: 175px;
	}

	a.title ~ ul li:nth-child(6){
		right: 0;
		top: 175px;
	}

	a.title ~ ul li:nth-child(7){
		left: 0;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(8){
		left: 25%;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(9){
		left: 50%;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(10){
		left: 75%;
		bottom: 0;
	}

	h1{
		font-size: 3.5em;
		top: -40px;
		right: 130px;
	}

	a.content{
		font-size: .9em;
		line-height: 1.3;
		width: 458px;
		height: 263px;
		left: 111px;
		top: 121px;
		padding: 10px;
	}

	#calander a.content p:nth-child(2){
		margin-top: 7px;
	}

	a.overlay{
		width: 700px;
		height: 525px;
		background-size: 100%;
	}

	a.overlay span{
		font-size: 3.1em;
	}

	.hover-text{
		font-size: 1.3em;
		line-height: 1.6;
	}

	/*menu section*/
	#menu{
		width: 700px;
		height: 525px;
		margin: 250px auto;
		margin-bottom: 120px;
	}

	#menu a.title{
		right: -70px;
		top: -80px;
		background: url(../images/services-thumbnails/title-pattern-right.png) no-repeat;
		background-size: 100%;
		width: 370.5px;
		height: 92.25px;
	}

	body.chnVersion #menu a.title{
		right: -70px;
		top: -80px;
		background: url(../images/services-thumbnails/title-menu-chn.png) no-repeat;
		background-size: 100%;
		width: 370.5px;
		height: 92.25px;
	}

	/*calander section*/
	#calander{
		width: 700px;
		height: 525px;
		margin: 120px auto;
	}

	#calander a.title{
		left: -70px;
		top: -80px;
		background-size: 100%;
		width: 370.5px;
		height: 92.25px;
	}

	body.chnVersion #calander a.title{
		left: -70px;
		top: -80px;
		background-size: 100%;
		width: 370.5px;
		height: 92.25px;
	}

	#web{
		width: 700px;
		height: 525px;
		margin: 120px auto;
	}

	#web a.title{
		right: -70px;
		top: -80px;
		background-size: 100%;
		width: 400.5px;
		height: 92.25px;
	}

	body.chnVersion #web a.title{
		right: -70px;
		top: -80px;
		background-size: 100%;
		width: 400.5px;
		height: 92.25px;
	}

	/*gift section*/
	#gift{
		width: 700px;
		height: 525px;
		margin: 120px auto;
	}

	#gift a.title{
		left: -70px;
		top: -80px;
		background-size: 100%;
		width: 370.5px;
		height: 92.25px;
	}

	body.chnVersion #gift a.title{
		left: -70px;
		top: -80px;
		background-size: 100%;
		width: 370.5px;
		height: 92.25px;
	}
}

/*desktop resolution at 1280x800 and 1280x1024*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-height: 1024px){
	body{
		min-width: 1200px;
		max-width: 1280px;
	}

	/*container section*/
	#container{
		width: 80%;
		max-width: 1024px;
		min-width: 960px;
	}

	/*footer section*/
	footer{
		height: 155px;
	}
	div#footer-content section p{
		font-size: 16px;
	}
	div#footer-content{
		font-size: 14px;
	}
	div#disclaimer p{
		font-size: 10px;
	}
	div#footer-content section ul li{
		text-indent: -25%;
	}

	/*navigation bar section*/
	#nav a {
		line-height: 45px;
	}

	li#message{
		font-size: 2em;
		left: auto;
		right: -20px;
	}

	body.chnVersion li#message{
		margin-top: -24px;
		left: 40px;
	}

	div#social-icon{
		width: 230px;
		top: 10px;
		right: 0px;
	}
	div#social-icon a{
		margin-right: 10px;
	}

	/*the page title*/
	a#main-title{
		width: 100%;
		height: 165px;
		font-size: 4.5em;
		top: 40px;
		left: 5px;
		background: url(../images/title-left-1.png) no-repeat top left, url(../images/title-left-2.png) no-repeat 590px 0px;
	}

	a#main-title span:nth-child(1){
		top: 40px;
		left: 180px;
	}

	a#main-title span:nth-child(2){
		right: 100px;
	}

	/*thunbnails general*/

	a.title ~ ul li{
		width: 225px;
		height: 225px;
	}

	a.title ~ ul li a{
		width: 225px;
		height: 225px;
		background-size: 100%;
	}

	a.title ~ ul li:nth-child(1){
		left: 0;
		top: 0;
	}

	a.title ~ ul li:nth-child(2){
		left: 25%;
		top: 0;
	}

	a.title ~ ul li:nth-child(3){
		left: 50%;
		top: 0;
	}

	a.title ~ ul li:nth-child(4){
		left: 75%;
		top: 0;
	}

	a.title ~ ul li:nth-child(5){
		left: 0;
		top: 225px;
	}

	a.title ~ ul li:nth-child(6){
		right: 0;
		top: 225px;
	}

	a.title ~ ul li:nth-child(7){
		left: 0;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(8){
		left: 25%;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(9){
		left: 50%;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(10){
		left: 75%;
		bottom: 0;
	}

	h1{
		font-size: 3.6em;
		top: -40px;
		right: 130px;
	}

	a.content{
		font-size: 1.1em;
		line-height: 1.5;
		width: 560px;
		height: 369px;
		left: 140px;
		top: 118px;
		padding: 30px;
		padding-top: 20px;
	}

	a.overlay{
		width: 900px;
		height: 675px;
		background-size: 100%;
	}

	a.overlay span{
		font-size: 3.3em;
	}

	.hover-text{
		font-size: 1.3em;
		line-height: 1.6;
	}

	/*menu section*/
	#menu{
		width: 900px;
		height: 675px;
		margin: 280px auto;
		margin-bottom: 120px;
	}

	#menu a.title{
		right: -70px;
		top: -100px;
		background: url(../images/services-thumbnails/title-pattern-right.png) no-repeat;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #menu a.title{
		right: -70px;
		top: -100px;
		background: url(../images/services-thumbnails/title-menu-chn.png) no-repeat;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	/*calander section*/
	#calander{
		width: 900px;
		height: 675px;
		margin: 150px auto;
	}

	#calander a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #calander a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	#web{
		width: 900px;
		height: 675px;
		margin: 150px auto;
	}

	#web a.title{
		right: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #web a.title{
		right: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	/*gift section*/
	#gift{
		width: 900px;
		height: 675px;
		margin: 150px auto;
		margin-bottom: 120px;
	}

	#gift a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #gift a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}
}

/*desktop resolution at 1366x768*/
@media only screen and (min-width: 1281px) and (max-width: 1366px) and (max-height: 768px){
	body{
		min-width: 1281px;
		max-width: 1366px;
	}

	/*container section*/
	#container{
		width: 80%;
		max-width: 1093px;
		min-width: 1024px;
	}

	/*footer section*/
	footer{
		height: 155px;
	}
	div#footer-content section p{
		font-size: 16px;
	}
	div#footer-content{
		font-size: 14px;
	}
	div#disclaimer p{
		font-size: 10px;
	}
	div#footer-content section ul li{
		text-indent: -25%;
	}

	/*navigation bar section*/
	#nav a {
		line-height: 45px;
	}

	li#message{
		font-size: 2em;
		left: auto;
		right: -100px;
	}

	body.chnVersion li#message{
		margin-top: -27px;
		left: 120px;
	}

	div#social-icon{
		width: 240px;
		top: 10px;
		right: 0px;
	}
	div#social-icon a{
		margin-right: 10px;
	}

	/*the page title*/
	a#main-title{
		width: 100%;
		height: 165px;
		font-size: 4.5em;
		top: 40px;
		left: 5px;
		background: url(../images/title-left-1.png) no-repeat top left, url(../images/title-left-2.png) no-repeat 590px 0px;
	}

	a#main-title span:nth-child(1){
		top: 40px;
		left: 180px;
	}

	a#main-title span:nth-child(2){
		right: 100px;
	}

	/*thunbnails general*/

	a.title ~ ul li{
		width: 225px;
		height: 225px;
	}

	a.title ~ ul li a{
		width: 225px;
		height: 225px;
		background-size: 100%;
	}

	a.title ~ ul li:nth-child(1){
		left: 0;
		top: 0;
	}

	a.title ~ ul li:nth-child(2){
		left: 25%;
		top: 0;
	}

	a.title ~ ul li:nth-child(3){
		left: 50%;
		top: 0;
	}

	a.title ~ ul li:nth-child(4){
		left: 75%;
		top: 0;
	}

	a.title ~ ul li:nth-child(5){
		left: 0;
		top: 225px;
	}

	a.title ~ ul li:nth-child(6){
		right: 0;
		top: 225px;
	}

	a.title ~ ul li:nth-child(7){
		left: 0;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(8){
		left: 25%;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(9){
		left: 50%;
		bottom: 0;
	}

	a.title ~ ul li:nth-child(10){
		left: 75%;
		bottom: 0;
	}

	h1{
		font-size: 3.6em;
		top: -40px;
		right: 130px;
	}

	a.content{
		font-size: 1.1em;
		line-height: 1.5;
		width: 560px;
		height: 369px;
		left: 140px;
		top: 118px;
		padding: 30px;
		padding-top: 20px;
	}

	a.overlay{
		width: 900px;
		height: 675px;
		background-size: 100%;
	}

	a.overlay span{
		font-size: 3.3em;
	}

	.hover-text{
		font-size: 1.3em;
		line-height: 1.6;
	}

	/*menu section*/
	#menu{
		width: 900px;
		height: 675px;
		margin: 280px auto;
		margin-bottom: 120px;
	}

	#menu a.title{
		right: -70px;
		top: -100px;
		background: url(../images/services-thumbnails/title-pattern-right.png) no-repeat;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #menu a.title{
		right: -70px;
		top: -100px;
		background: url(../images/services-thumbnails/title-menu-chn.png) no-repeat;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	/*calander section*/
	#calander{
		width: 900px;
		height: 675px;
		margin: 150px auto;
	}

	#calander a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #calander a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	#web{
		width: 900px;
		height: 675px;
		margin: 150px auto;
	}

	#web a.title{
		right: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #web a.title{
		right: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	/*gift section*/
	#gift{
		width: 900px;
		height: 675px;
		margin: 150px auto;
		margin-bottom: 120px;
	}

	#gift a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

	body.chnVersion #gift a.title{
		left: -70px;
		top: -100px;
		background-size: 100%;
		width: 450px;
		height: 120px;
	}

}

/*desktop resolution at 1440x900*/
@media only screen and (min-width: 1367px) and (max-width: 1440px) and (max-height: 900px){
	body{
		min-width: 1367px;
		max-width: 1440px;
	}

	/*container section*/
	#container{
		width: 80%;
		max-width: 1152px;
		min-width: 1093px;
	}

	/*footer section*/
	footer{
		height: 165px;
	}

	li#message{
		font-size: 2.1em;
		left: auto;
		right: -110px;
	}

	body.chnVersion li#message{
		left: 90px;
	}

	div#social-icon{
		width: 160px;
		top: 10px;
		right: 0px;
	}
	div#social-icon a{
		margin-right: 10px;
	}
}