@charset "utf-8";

/*topic*/
#topic .focus { margin:0 6px; padding:12px 24px; overflow:hidden;}
#topic .focus h3 { color:#123; font-size:18px; margin:20px 0 4px; border-bottom:1px solid #aeaeae;}
#topic .focus h3 a { float:right;}
#topic .focus ul { overflow:hidden; padding-top:12px;}
#topic .focus li { float:left; width:708px; padding:0 16px 18px 0;}
#topic .focus li img { float:left; padding:8px 12px 4px 0;}
#topic .focus li h5 a { color:#123; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
#topic .focus li p { margin:2px 0; line-height:1.6em; color:#666;}
#topic .focus .cols-3,#topic .focus .cols-4 { overflow:hidden; margin:16px 0;}
#topic .focus .cols-3 .item { float:left; width:182px; border:1px dotted #ccc; padding:18px; margin-right:18px; background:#fefefe;}
#topic .focus .cols-3 .item a { font-weight:bold;}
#topic .focus .cols-3 .item img { margin-top:8px;}
#topic .focus .cols-3 .last,#topic .focus .cols-4 .last { margin:0;}
#topic .focus .cols-4 .item { float:left; border:1px dotted #ccc; padding:12px; margin:0 12px 12px 0; background:#fefefe; text-align:center;}
#topic .focus ul.news li { width:99%; padding:0 16px 8px 22px; background:transparent url(../images/icon-color.png) no-repeat scroll 4px 3px;}
#topic .focus .pics { clear:both; overflow:hidden;}
#topic .focus .pics p { width:160px; padding:12px 4px 12px 10px; display:block; float:left;}


/*article*/
#article .focus {padding:0 28px 12px;}
#article .focus a { text-decoration:none; color:#08C;}
#article .focus a:hover{ text-decoration:underline;}
#article .focus p.tips a,#article .focus p.note a { color:#08c; border:none; font-size:11px;}
#article .focus strong { color:#555; font-size:11px;}
#article .focus h3 { background:transparent url(../images/style/h3-bg.gif) no-repeat scroll 0 0; font-weight:normal; font-size:17px; color:#000; width:760px; clear:both; margin-left:-28px; line-height:36px; padding-left:24px; margin-top:16px;}
*html #article .focus h3 {width:728px;}
#article .focus img{-moz-box-shadow:8px 12px 24px rgba(201, 201, 201, .8); -webkit-box-shadow:8px 12px 24px rgba(201, 201, 201, .8); box-shadow:8px 12px 24px rgba(201, 201, 201, .8);}
#article .focus .noshadow{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}


#article .focus h4 { clear:both; color:#000; font-size:13px; font-weight:bold; display:block; margin:20px 0 4px;}
#article .focus h5 { display:block; margin:10px 0;}
#article .focus p { line-height:1.8em; margin:10px 0;}
#article .focus p.tips,#article .focus p.note{ color:#666; background:none repeat scroll 0 0 #fefefe; border:1px solid #ddd; padding:8px 12px; -webkit-border-radius:4px; -moz-border-radius:4px;}
p.tips strong,p.note strong { font-size:11px;}
p.tips a,p.note a { font-size:11px;}
#article .focus p.tips { font-size:11px;}
#article .focus p.tips span { font-weight:bold; padding-right:4px;}
#article .focus p.note { font-size:12px;}
#article .focus .return a { font-size:10px; border:none;}
#article .focus .pdf { display:block; text-align:right; margin:0; margin-bottom:-4px;}
#article .focus .pdf a { border:none;}
#article .focus .like { overflow:hidden; padding:16px; border:none; background:#E8F0F9;}
#article .focus .like-a { float:left; width:380px;}
#article .focus .like-a h6 { font-weight:bold; font-size:14px; color:#3A5796;}
#article .focus .like-b { float:right; width:240px;}
#article .focus .like a { border:none;}
#article .focus ul { margin:6px 0;}
#article .focus ul li{line-height:1.8em; color:#666; background:transparent url(../images/list.gif) no-repeat scroll 2px 8px; padding:2px 0 2px 18px;}
#article .focus ul.menus { margin:12px 0; padding:12px 20px; -moz-box-shadow:0 2px 5px #ccc; -webkit-box-shadow:0 2px 5px #ccc; border:1px solid #ddd; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#fff;}
#article .focus ul.menus li span { font-weight:bold; padding-right:8px;}
#article .focus ul.free-download { overflow:hidden;}
#article .focus ul.free-download li { float:left; background:-webkit-gradient(linear,left top,left bottom,from(#09c),to(#06c));background:-moz-linear-gradient(top,#09c,#06c);background-color:#08c; border:1px solid #08c;  -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; padding:7px 16px; margin-right:32px;}
#article .focus ul.free-download li a { border:none; display:block; color:#fff; font-size:14px; text-shadow: 0 -1px 0 #000; font-weight:bold; font-family:Arial, Helvetica, sans-serif; background:url(../images/style/downloads.png) no-repeat scroll right 0 transparent; padding-right:23px;}
#article .focus ul.free-download li a:hover { color:#e6e6e6;}


#article .focus ol { color:#444; list-style-position:outside; list-style-type:decimal; padding:2px 0 8px 22px; margin:0;}
#article .focus ol li{ line-height:1.8em; color:#555;}
#article .focus dl{overflow:hidden;margin-bottom:18px;}
#article .focus dl dt{color:#555;font-size:18px;font-weight:bold;clear:both;overflow:hidden;}
#article .focus h4.az,#article .focus h4.az strong { overflow:hidden; font-size:14px; color:#555; font-family:Arial, Helvetica, sans-serif;}
#article .focus h4.az span { float:left; display:block; width:32px; height:26px; color:#fff; font-weight:bold; padding-left:8px; background:transparent url(../images/style/bg-step.gif) no-repeat scroll 0 0;}
#article .focus h4.az a { font-weight:bold; font-size:14px; color:#555; font-family:Arial, Helvetica, sans-serif;}

#article .focus .cts { padding:4px 0 20px 40px; position:relative;}
#article .focus .cts .number {
	background:url(../images/style/bg-step.gif) no-repeat scroll 3px 3px transparent;
	color:#fff;
	font-weight:bold;
	font-size:15px;
	height:38px;
	line-height:34px;
	left:3px;
	top:15px;
	padding:0;
	text-align:center;
	position:absolute;
	width:35px;
	visibility: visible;
}
#article .focus .last { border:none;}
#article .focus .cts img { max-width:660px;}

#article .focus dl p.date{color:#777;font-style:italic;text-align:left;margin:2px;}
#article .focus dl p.date a.from{color:#777;font-style:italic;text-decoration:none;}
#article .focus dl p.date a.soft{float:right;color:#f60;font-style:italic;}
#article .focus dl p.date span{color:#777;font-weight:bold;margin-right:6px;}
#article .focus dl dd { border-top:1px dotted #ddd ;padding-top:6px;}
#article #rf{clear:both;overflow:hidden;border:1px solid #dedede;background-color:#fafafa;height:1%;margin:10px 0;padding:12px;}
#article #rf h4{color:#333; font-size:14px;font-weight:bold; margin:2px 0 8px 0;}
#article .focus ul.dh{overflow:hidden;height:100%;}
#article .focus ul.dh li{line-height:20px;background:transparent url(../images/icon-arrow2.gif) no-repeat 0 4px;padding-left:10px;float:left;width:30%;}
#article .focus ul.dh li a { font-size:11px;}
#article #ra { background-color:#F9FEF8; border:1px dotted #9FE18E; clear:both; height:1%; margin:10px 0; overflow:hidden; padding:12px 16px;}
#article #ra h4{ color:#555; font-size:13px; font-weight:bold; margin:2px 0 10px 0;}
#article #ra p {background:transparent url(../images/icon-arrow2.gif) no-repeat scroll 0 0; line-height:24px; padding-left:10px;}
#article #ra p a {font-size:12px;}
#article #ra p a strong {font-size:12px;}

#article .focus blockquote { color:#999; background:none repeat scroll 0 0 #fefefe; border:1px solid #ddd; padding:8px 12px; -moz-border-radius:4px;  -webkit-border-radius:4px;}
#article .focus blockquote p { color:#888; font-size:11px; margin:0;}
#article .focus blockquote a { color:#888; font-size:11px;}
#article .focus .ftf{ display:block; text-align:center;}
#article .focus .ftf img{ vertical-align:middle; padding:0 8px; -moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:none;}



/*Tutorial*/
#tutorial .full-main { background:transparent url(../images/style/bg-e.png) repeat-y scroll -12px 0; overflow:hidden; padding:0px 6px;}


#tutorial .subject { background:transparent url(../images/style/bg.png) repeat-y; height:132px; font-size:16px; overflow:hidden; margin-bottom:25px; border-bottom:1px solid #c1c1c1;}

#tutorial .subject h2 { font-size:18px; font-weight:bold; color:#000; padding:5px 0 10px 18px;}
#tutorial .subject p { color:#777; font-size:11px; line-height:1.6em; padding:10px 0 10px 18px;}
#tutorial .subject img { float:right; margin:8px 15px 0 6px; padding-top:10px;}


#tutorial .leftside{ float:left; margin-left:12px; width:219px; border:1px solid #c1c1c1; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
#tutorial .leftside ul { padding:2px 0  2px 0;}
#tutorial .leftside ul li{ line-height:44px; font-size:15px; display:block; cursor:pointer; height:44px; padding:4px 0 0 10px; color:#777;}
#tutorial .leftside ul li img { vertical-align:middle; padding-right:10px;}
#tutorial .leftside ul li:hover{ color:#000; background:transparent url(../images/tutorial/lefthover.png) -1px 0 no-repeat;}
#tutorial .leftside ul li.itis { background:transparent url(../images/tutorial/lefthover.png) -1px 0 no-repeat; width:226px;}


#contents {width:740px; position:relative;margin-right:8px;overflow:hidden; margin-left:30px; padding-left:20px;}
#tutorial #contents .focus{ margin:0 6px; padding:0 24px; border:1px solid #c1c1c1; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
#tutorial #contents .focus p{ margin-bottom:6px;}
#tutorial #contents .focus a{ color:#58c;}
#tutorial #contents .focus .tab_list{ border-bottom:solid 1px #ccc; overflow:hidden; padding:24px 2px;}
#tutorial #contents .focus .tab_list .column { height:30px; line-height:30px; font-size:18px; color:#318905;}
#tutorial #contents .focus .tab_list .column a{ line-height:30px; font-size:18px; color:#318905;}
#tutorial #contents .focus .tab_list img { float:right; padding:4px;}
#tutorial #contents .focus .tab_list p{ font-size:12px;  color:#666;}
#tutorial #contents .focus .tab_list ul { overflow:hidden; clear:both;}
#tutorial #contents .focus .tab_list ul li{ background:url(../images/icon-arrow.gif) no-repeat 4px 6px; padding-left:15px; float:left; width:47%;}
#tutorial #contents .focus .tab_list p.evenmore { display:block; padding-top:20px; }
#tutorial #contents .focus .tab_list p.evenmore a { font-size:13px; color:#f60;}

#article table th{ border:1px solid #cecece; padding:8px 12px; font-size:13px; text-align:center; color:#333; background-color:#f9f9f9;}
#article table td{ border:1px solid #cecece; padding:8px 12px; text-align:left; line-height:2em; font-size:11px; color:#666;}


.video { padding:18px 0;}
.sharesns{padding:10px 0 0 28px;}
.r_side_banner {text-align:center; padding:0 0 10px 0;}
.box_tags {padding:10px 15px;}
.box_tags a{line-height:22px;padding:0 5px;color:#3e4e57;}
.box_tags a:hover{color:#3388CC; text-decoration:underline;}
.box_tags a.one{font-size:16px;font-weight:bold;}
.box_tags a.two{font-size:14px;font-weight:bold;}
.box_tags a.three{font-weight:bold;}

.box_tags .twitter{border-top:1px solid #CCC; padding-top:5px; width:196px; margin:7px 0 0 7px;}

/*resource list*/
.r_top_column {background:url(images/bottom_bg.png) repeat-x left bottom; padding:20px 40px 50px 40px;}
.r_top_column .img {float:left;}
#main #article .content-main .r_top_column h2{padding:10px 0 10px 250px; font-size:30px; background:none; border:none;}
.r_top_column .info {padding:0 20px 0 250px;}
.r_content {padding:20px 0 30px 30px; float:left; width:700px;}
#feature_box {background:url(images/feature_bg.jpg) no-repeat; height:185px; padding-bottom:20px;}
#feature_box .title{ font-size:18px; padding:10px 20px 0 20px; font-weight:normal;}
#f_pro_box {position:relative;width:700px;height:150px;overflow:hidden;}
.arrow_left,.arrow_right {display:block;position:absolute;left:10px;top:60px;width:16px;height:21px;background:url(images/f_arrow.png) no-repeat left;z-index:10; cursor:pointer;}
.arrow_right {background-position:top right;left:auto;right:10px;}
#feature_box .item {width:620px; height:130px; padding:10px 40px;}
#feature_box .item img{ float:left;padding: 5px; border: 1px solid #E1E1E1; background:#FFF;}
#feature_box .item .title{padding:0 0 0 180px; font-size:12px;}
#feature_box .item .title a{font-size:12px; font-weight:bold;}
#feature_box .item .time {font-size:10; color:#aaa; padding:0 0 5px 180px;}
#feature_box .item .info {padding:5px 0 0 180px;}
#main #article .content-main .r_column {height:30px;padding:13px 10px 0 0; font-weight:normal; display:block; border-bottom:dashed 1px #dcdcdc; margin:0; background:none; line-height:20px;}
.r_column strong {float:left; font-size:22px;font-weight:normal; color:#006600;}
.r_column span { float:right; font-size:12px; color:#666; padding:5px 0 0 0;font-weight:normal;}
.tag_list {padding:0;}
.tag_list dl {padding:15px 0; display:block; border-bottom:dashed 1px #dcdcdc;}
.tag_list dl dt {display:block;}
.tag_list dl dt span {display:block; font-size:11px; color:#999;}
.tag_list a {font-size:14px; color:#3388CC;}
.tag_list_page {text-align:center; padding-top:20px;}
.tag_list_page a {color:#2e4b87; font-size:14px; width:15px; text-align:center; display:inline-block; text-decoration:underline;}
.tag_list_page a:hover {text-decoration:none;}
.tag_list_page strong {font-size:16px; width:15px; text-align:center; display:inline-block;}
.tag_list_page .prev {background:url(images/page_jt.png) no-repeat left 4px; padding:0 15px; width:30px; text-decoration:none;}
.tag_list_page .next {background:url(images/page_jt.png) no-repeat right -35px; padding:0 15px; width:30px; text-decoration:none;}
.av_bottom_title {color:#318905; font-size:18px; padding:10px 24px; margin-top:20px; border-top:solid 1px #ccc;}
ul.av_bottom_list{ padding:0 24px;}
.av_bottom_list li {padding:2px 10px; background:url(images/dot2.png) no-repeat left 9px;}
.av_bottom_list li a { background:transparent url(../images/icon-arrow.gif) no-repeat scroll 100% 72%; padding-right:9px; color:#08c;}
.av_bottom_list li a:hover {color:#08c; text-decoration:underline;}

.r_bottom .tit_left{background:url(images/sideCol_left.gif) no-repeat;width:8px;height:42px;}
.r_bottom .tit_mid{background:url(images/sideCol_mid.gif) repeat-x;width:405px;height:42px;}
.r_bottom .col_tit{color:#231815;font-size:14px;line-height:42px;padding:0 0 0 10px;}
.r_bottom .tit_rg{background:url(images/sideCol_rg.gif) repeat-x;width:7px;height:42px;}
.r_bottom .r_cont{border-left:1px solid #eaebeb;border-right:1px solid #eaebeb;}
.r_bottom .r_bottom{background:url(images/product_bottom.gif) no-repeat left top;height:7px;padding:0 0 10px 0; font-size:0;}

/*free-resources.html*/
#resource { overflow:hidden;}
#article .focus #resource dl dt { border-bottom:1px solid #eee; font-size:18px; width:660px; margin-top:24px; margin-bottom:10px;padding-bottom:2px; clear:both;}
#article .focus #resource dl dd { height:64px; padding:10px 16px 8px 14px; margin-bottom:10px; border:1px dotted #bbc; overflow:hidden; float:left; width:300px; margin-right:20px;}
#article .focus #resource dl dd:hover { border:1px solid #aeaeae;}
#article .focus #resource dl dd img { float:left;margin-right:20px;}
#article .focus #resource dl dd a:link{ font-size:13px; color:#666;}

/*article/free-online-iphone-games.html*/
#article #iphone {overflow:hidden;}
#article #iphone ul li {width:166px;float:left;border:1px dashed #ccc;text-align:center;margin:8px 8px 0 0;background:none;padding-left:0;height:150px;}
#article #iphone ul li a:link {color:#CC6600;font-size:11px;}
#article #iphone ul li a:visited {color:#CC6600;font-size:11px;}
#article #iphone ul li a:hover {color:#f00;font-size:11px;}
#article #iphone ul li img {display:block;padding:8px 0 5px 58px;}

/*article/free-online-iphone-games.html*/
ul.macsoft{ overflow:hidden; height:100%;}
ul.macsoft li{list-style-type:none; float:left; width:226px; padding:4px; margin-bottom:8px; border-bottom:1px solid #aeaeae;}

/*article/free-ringtone-download-websites.html*/
#ringtone dl{height:100%;overflow:hidden;padding-bottom:8px;border-bottom:1px dashed #ccc;}
#ringtone dl img{float:left;display:block;margin:8px 10px 8px 0;}
#ringtone dl dt{font-weight:bold;font-size:14px;clear:both;margin-top:16px;color:#060;}
#ringtone dl dd{width:230px;float:left;}
#ringtone dl dd a:link{color:#666;}
#ringtone dl dd a:visited{color:#666;}
#ringtone dl dd a:hover{color:#060;}