/* 	project: hardce.com	author: Seven.H */

/* default styles   -------------- */

* { margin: 0; padding: 0; }

* body {
	font-size: small;
	background-color: #fff;
	color: #333333;
	line-height: 150%;
	font-family:arial,sans-serif,"ËÎÌå";
	background:url(images/header_bg.gif) repeat-x left top;
	text-align:center;
	
 }
 
a {	color: #FE3900;	text-decoration: none;}
a:hover {
	color: #666666;
	text-decoration: underline;
}

ul {	list-style-type: none;}

ul a {	display: block; }

h1 { font-size: 150%;}
h2 { font-size: 120%;}
h3 { font-size: 110%;}
h4 { font-size: 100%;}
h5 { font-size: 90%;}
h6 { font-size: 85%;}

a img { border:none;}

.red { color: #FE3900; }
.red_act {
	color: #FE3900;
	text-decoration: none;
}
.grey {
	color: #999999;
}

.image { border:1px solid #ccc; background-color:#fff;}

.title1 {
	text-align:left;
	margin:25px 0 5px 0;
	}
	
.title2 {
	text-align:left;
	margin:5px 0 ;
	}
	
.clear {clear:both;}

#wrapper {
	width:850px;
	margin:0 auto;
	text-align:left;
}

/* header-------------------- */

#mainNav {
	margin:25px 0 20px 0;
	height:35px;
	background:#FE3300 url(images/mainnav_bg.gif) repeat-x left top;
}

ul#mainNav a {
	display:block;
	width:120px;
	height:35px;
	line-height:35px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	float:left;
	text-align:center;
	
}

#mainNav .home a{margin-left:120px;}

#mainNav a:hover {
	background:#fff url(images/main_nav_act.gif) no-repeat left top;
	color:#666;
}

#mainNav li  { display:inline;padding: 35px 0 0 0;}



/* show active page-------------------*/

#home #mainNav .home a, #home_cn #mainNav .home a,
#product #mainNav .product a, #product_cn #mainNav .product a,
#sales #mainNav .sales a, #sales_cn #mainNav .sales a,
#contact #mainNav .contact a, #contact_cn #mainNav .contact a {
	background:#fff url(images/main_nav_act.gif) no-repeat left top;
	color:#fe3900;
	cursor:default;
}

/* layout-------------------- */

#content, #content_cn {
	margin: 0 auto;
	
	padding: 10px 0; 
	
}


/* sideContent-------------------*/

.sideContent {
	width:200px;
	float:left;
	text-align:center;

}
.sideContent #logo {
	text-align:center;
	height:150px;
	padding:30px 0 0 0;
	width:200px;
	
	}

.sideContent p {text-align:left;}

.sideContent img {margin:5px 0;}

#sideNav { 	
	float:left;
   }

#sideNav li { display:inline;}

#sideNav li.iphone_cn a, #sideNav li.iphone_en a {margin-top:30px;}

#sideNav a{
	display:block;
	width:200px;
	height:30px;
	line-height:30px;
	text-indent:-9999px;
	}

/* sideNav CN  */
#sideNav li.iphone_cn a {background:url(images/t2_cn_iphone.gif) no-repeat right bottom;}
#sideNav li.powercase_cn a {background:url(images/t2_cn_powercase.gif) no-repeat right bottom;}
#sideNav li.leathercase_cn a {background:url(images/t2_cn_leathercase.gif) no-repeat right bottom;}
#sideNav li.battery_cn a {background:url(images/t2_cn_battery.gif) no-repeat right bottom;}
#sideNav li.other_cn a {background:url(images/t2_cn_other.gif) no-repeat right bottom;}


/* sideNav EN  */
#sideNav li.iphone_en a {background:url(images/t2_en_iphone.gif) no-repeat right bottom;}
#sideNav li.powercase_en a {background:url(images/t2_en_powercase.gif) no-repeat right bottom;}
#sideNav li.leathercase_en a {background:url(images/t2_en_leathercase.gif) no-repeat right bottom;}
#sideNav li.battery_en a {background:url(images/t2_en_battery.gif) no-repeat right bottom;}
#sideNav li.other_en a {background:url(images/t2_en_other.gif) no-repeat right bottom;}


#sideNav li a:hover {
	background-position: right top;
}

#iphone_cn #sideNav li.iphone_cn a, #iphone #sideNav li.iphone_en a,
#powercase_cn #sideNav  li.powercase_cn a, #powercase #sideNav li.powercase_en a,
#leathercase_cn #sideNav  li.leathercase_cn a, #leathercase #sideNav li.leathercase_en a,
#battery_cn #sideNav  li.battery_cn a, #battery #sideNav  li.battery_en a,
#other_cn #sideNav  li.other_cn a, #other #sideNav  li.other_en a {
	background-position: right top;
	cursor:default;
}



/* mainContent--------------------------------*/

#mainContent {
	width:602px;
	float:right;
}

.ad {
	width:602px;
	height:182px;
	
}

#mainContent .title1 { 
	clear:right;
	width:600px;
	display:inline;
	float:left;}

.title1 h1, .title1 a h1 {
	line-height:20px;
	height:20px;
	float:left;
	padding:5px 0;
	display: inline;
	
}


.imgIntro {
	width:170px;
	float:left;
	margin:0px 20px 10px 0;
	text-align:left;
	
}

.imgIntro h4 {
	line-height:30px;
	height:30px;
	overflow:hidden;
	font-size:90%;
}

.item, .item_noborder {
	float:right;
	text-align:left;
	margin-bottom: 15px;

}
.item {
	border-left:4px solid #FE3900;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	width:575px;
	padding: 10px;
	}
.item_noborder {
	width:590px;
	padding: 10px 10px 10px 0;
	}	

.item img, .item_noborder img { float:left;}

.item .title2 {
	float:right;
	width:400px;
	height:30px;
	overflow:hidden;
	
}

.item ul, .item_noborder ul {
	float:right;
	text-align:left;
	width:400px;
}

.item ul li, .item_noborder ul li {
	background: url(images/circle.gif) no-repeat 0 5px ;  
	text-indent:16px;
}



/* Image demo
----------------------------------------------*/

.ImgDemo {
	width:600px;
	height:107px;
	float:right;
	margin:5px 0px;
	overflow:auto;	
	
}

.ImgDemo img {
	float:left;
	border:1px solid #ccc;
	margin:0 10px 5px 0;
}

/* LABEL
----------------------------------------------*/
.label {
	width: 598px;
	float:right;
	margin: 5px 0px;
	font-size:90%;
}

#Label
	{
		margin: 0px;
		padding: 0px;
        width: 100%;
	}
	
	#Label li, #Lagel li.first {
		display:block;
		margin-right:2px;
		text-align: center;
		width: 15%;
		line-height: 18px;
		float:left;
		list-style:none;
		cursor:pointer;
	}

	#Label li {
		border-left:1px solid #CCC;
		border-right:1px solid #CCC;
		border-top: 2px solid #CCC;
		background:#ccc;
	}
	
	#Label li.first {
		border-left:1px solid #CCC;
		border-right:1px solid #CCC;
		border-top: 2px solid #fe3900;
		background:#fff;
		color: #fe3900;
	}
		
#Container
	{
		clear: left;
		width: 100%;
		border-top: 3px solid #FE3900;
		border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}
	
	
	
	.LabelContent	{
		background-color: #FFF;
		padding: 5px 10px;
		float:left;
		}
		
	.LabelContent ul p	{ color:#333;	}
	
	.LabelContent ul li {
		background: url(images/circle.gif) no-repeat 0 5px ;  
		text-indent:16px;
	}

#hp_test {
	width:120px;
	right:10px;
	top:10px;
	float:right;
	text-align: center;
}

#hp_test img {
	margin: 5px auto;
	
}	


.center {
	clear:left;
	margin:0;
	width:400px;
	padding:20px;
	text-align:center;
}

/* Contact
----------------------------------------*/

#mainContent label {
	display:block;
	margin: 5px 0 0 0;
	clear:right;
	
}

#mainContente p{ margin: 5px 10px 10px 10px; }

#mainContent fieldset {
	width:320px;
	float:right;
	padding: 10px;
	background-color:#FFE0C1;
	
}

.address {
	float:left;
	width:230px;
	text-align:left;
	clear:left;
}

.address h3 {
	display:block;
	width:230px;
	color:#fe3900;
	background-color:#e3e3e3 ;
	line-height:24px;
		
}

#email, #name { width:250px;clear:right;}

#mainContent form {
	border-color: #FE3900; 
	font-weight:bold;
	
	}

fieldset { border:0;}

#message {
	width:315px;
	height:115px;
}

input { margin-top:5px;}

/* sales-----------------------------------------------*/

.salesbox {
	width: 260px;
	float: left;
	margin-right:35px;
	border:1px solid #ccc;

}

.salesbox p {	padding:0 10px;}

.salesbox h3 {
	display:block;
	width:260px;
	color:#fe3900;
	background-color:#e3e3e3 ;
	line-height:24px;
		
}


/* footer---------------------------------------------*/

#footer {
 	clear: both;
    text-align: center;
	padding: 10px 0;
	border-top: 1px solid #A12300;
	line-height: 2em;
	margin: 10px auto;
	width:850px;
}

#footer_cn {
    clear: both; 
    text-align: center;
	padding: 10px 0;
	border-top: 1px solid #ccc;
	line-height: 2em;
	font-size: 90%;
	margin: 20px auto;
	width:850px;
}