/*
* City & Guilds CSS
* Support: www.topkee.com.hk
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, ol, ul, li,dl,dt,dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;	padding: 0;}
body {color: #333; font: 12px/1.5 Arial; background: url(../images/bodyBG.png) repeat-x;}
li {list-style: none;}
table {border-collapse: separate;	border-spacing: 0;}
img{border:0;}
em {font-style: italic;}
strong {font-weight: bold;}
a {text-decoration: none; color:#000;}
a:hover {color:#666;}
h3 {color: black;}
h5 { font-size: 14px;}
/*css tool*/
.hide {display: none;}
.fr {float: right;}
.fl {float: left;}
.mt10 { margin-top: 10px;}
.mb10 { margin-bottom: 10px;}
.mb5 { margin-bottom: 5px;}
.ptb10{ padding:10px 0;}
.red {color: #cc0000;}
.clearfix:after {visibility: hidden; display: block;font-size: 0; content: '.'; clear: both; height: 0; }
* html .clearfix {zoom: 1;}
*:first-child+html .clearfix {zoom: 1;}
.index2em { text-indent: 2em;}

/*Start web Style*/
#doc { background: url(../images/docBG.png) no-repeat center 72px;_background-image:url(../images/docBGG.png);}
.hd,.bd,.ft {width: 920px; margin:0 auto;}

/*header*/
.hd { height: 240px; position: relative;}
#logo { padding:5px 0 0 20px; background: url(../images/Copytxt.gif) no-repeat right 58px;}
.navWrap { position: absolute; left:0; top:90px; width:920px;border:1px solid #D9D9D9;background: url(../images/lineX.gif) repeat-x;}
.nav { overflow: hidden; float: left;}
.nav li {float: left; margin-left:-1px;}
.nav li a{ float: left; height: 32px; line-height: 32px; font-size: 14px; padding:0 20px; color:#495961; font-weight: bold; background: url(../images/line.png) no-repeat left center;}
.nav li a:hover,.nav li a.current { color:#222;}
.login { float: right; padding:6px 8px 0 0;}
.login a {color: #336699;}
.login a:hover { color:#222; text-decoration: underline;}
.login span { padding:0 5px 0 3px; color:#ccc;}

/*搜索框*/
.searchBox { position: absolute; left:210px; top: 150px;}
.sKeyBg { background: url(../images/sInput.png) no-repeat; height: 43px; width: 360px;  float: left; margin-right: 10px;}
.sKey { margin:5px 0 0 20px; height: 30px; line-height: 30px; background:none; border: 0; color:#666; width: 320px;}
.sBtn { cursor: pointer;}
.newCaseWrap { width: 900px; margin:0 auto; height: 120px; background:url(../images/adTxt.png) no-repeat; padding-left: 16px;}
.lRecommend { float: left; width: 588px;}
.rRecommend { float: right; position: relative; width: 286px; }
.rRecommend .newTip { position: absolute; background: url(../images/new.png) no-repeat; width:65px; height:68px; top: -50px; left: -20px;_background-image:url(../images/new8.png)}
.newCase,.reCase { overflow: hidden; zoom:1;}
.reCase { height: 110px;}
.newCase li,.reCase li {background:url(../images/newCase.png) no-repeat;padding:5px; height: 100px; width: 276px;}
.reCase li { float: left; margin-left: 8px; display:inline}
.newCase li .iThumb,.reCase li .iThumb { float: left; height: 94px; overflow: hidden;}
.newCase li .iDesc,.reCase li .iDesc{ overflow: hidden; padding-left: 5px; height: 95px;}
.newCase li h3 a,.reCase li h3 a{ font-size: 14px; color:#ff6000; padding-bottom: 5px;}

/*小導航*/
.tkPos {}
.tkPos a,.positionNav a,.tkPos i {color: #4183C4;}
.tkPos a:hover,.positionNav a:hover { text-decoration: underline;}
.showRs { float: left;}
.positionNav { margin-bottom: 10px;}

/*body*/
.bd {}
.mainBody,.sideBar {float: left;}
.mainBody {width: 680px;overflow: hidden;}
.sideBar {width: 230px; padding-left: 10px;}

/*首頁分類*/
.itemBox {width: 440px; margin-bottom: 20px;border:1px solid #fff; padding:5px 5px 10px; margin-left: 8px;}
.itemShow { border-color:#ddd;background-color:#f9f9f9;}
.itemBox h3 { font-size: 14px;  margin-bottom: 5px; padding-bottom: 3px; border-bottom:1px dashed #ddd; }
.itemBox h3 a { color:#336699;}
.itemBox h3 a:hover { color:#000;}
.itemBox h3 img { padding-right: 5px;}
.itemBox h3 cite { font-size: 14px; color:#666; font-style: normal;}
.itemBox  ul {overflow: hidden;}
.itemBox li { float: left; padding:0 5px; word-break: keep-all;	word-wrap: break-word;white-space: nowrap; margin-bottom: 5px;}
.itemBox li a { color:#666;}
.itemBox li a:hover { color:#000; text-decoration: underline;}

.mianTitle {border:1px solid #D9D9D9; margin-bottom: 8px; background: url(../images/lineX.gif) repeat-x; height: 32px; line-height: 32px; font-size: 14px; padding-left: 10px; color:#495961;}
.conWrap {height:auto!important; height: 500px; min-height:500px;}
.classlist {border:1px solid #ddd; overflow: hidden; zoom:1; background: url(../images/classbg.jpg) repeat-x left -150px; padding: 10px; margin-bottom: 10px;}
.classlist li { float: left; padding:5px 0;}
.classlist li a{ float: left; padding:0 10px 0 15px; white-space: nowrap; background: url(../images/tip.gif) no-repeat left center;}
.showDesc { padding-bottom: 20px; position: relative; z-index:1;}
.tabBtn { clear:both;overflow: hidden; zoom:1; }
.tabBtn h3{ float: left; background-color: #f9f9f9; margin-right: 10px; padding: 5px 10px 2px; font-size: 20px; color:#333; position: relative; cursor: pointer;}
.tabBtn h3.current { border:1px solid #ddd; border-bottom: none; color:#777;}
.tabBtn #result { float: left; padding: 5px 10px 2px; background-color:#f9f9f9;}
.tabBtn #result em { padding-right: 5px;}
.tabBtn #result strong{ padding:0 3px;} 
.caselist li { overflow: hidden; zoom:1; background-color:#f9f9f9; padding:5px; margin-bottom: 5px;}
.caselist li.show { background-color: #FFFDBE;}
.caselist li .thumb { float: left; padding-right: 10px; width: 90px; overflow: hidden;}
.caselist li .thumb img { width:100%;}
.caselist li .desc { overflow: hidden; float: right; width: 810px;}
.caselist li .desc strong { padding-left:5px;}
.caselist li h5 { padding-bottom: 5px;}
.caselist li h5 a { color:#3664A5; font-weight: normal; text-decoration: underline;}
.caselist li h5 a:hover { color:#333; text-decoration: none;}
.caselist li .description{ background: url(../images/quote.png) no-repeat left top; padding-left: 15px; font-size: 12px; margin-bottom: 5px;}
.caselist li .tag a { padding:0 3px; color:#666; text-decoration: underline;}
.caselist li .tag a:hover { text-decoration: none; color:#222;}

/*分頁*/
#pageShow { margin-top: 10px; overflow:hidden;zoom:1;}
#pageShow ul li { float: left;}
#pageShow ul li a { float: left;  color:#666; background: url(../images/page.gif) repeat-x; border:1px solid #eee; padding: 3px 10px; margin-right: 5px; color:#336699;}
#pageShow ul li a:hover,#pageShow ul li a.current { color:#222; background:#fff none; border-color: #495961;}

/*沒有相關記錄*/
.noRs { background: url(../images/noRs.gif) no-repeat 10px center; height: 120px;}
.noRs h5{ font-weight: normal;  padding: 90px 0 0 82px;}

/*案例詳情*/
.thumbView,.baseInfo{ float: left; padding-right: 10px; }
.baseInfo { width: 760px;}
.thumbView { width: 140px;}
.tabDesc { overflow: hidden; zoom:1;}
.userLayout .thumbView { width:162px; height: 190px; _overflow: hidden;}
.userLayout .baseInfo { width: 738px; height:auto !important; height: 210px; min-height:210px;}
.baseInfo li { overflow: hidden; zoom:1;}
.baseInfo li.tag a { text-decoration: underline; padding-right: 10px;}
.baseInfo li.tag a:hover { text-decoration: none;}
.baseInfo .index2em { padding: 10px; background-color:#F9F9F9; margin:5px 0;}
.baseInfo h3 {color:#3664A5; text-decoration: underline; font-size: 18px;}
.baseInfo .item { padding-right: 30px; float: left;}
.baseInfo  a { color:#3664a5; padding-right: 2px;}
.baseInfo  a:hover { color:#000; text-decoration: underline;}
.baseInfo  em { font-style: normal;font-weight: bold;}
.infoDESC { background-color:#F9F9F9; padding: 10px;border:1px solid #ddd; margin-top:-1px;}
.imgLoading { background: url(../images/loader.gif) no-repeat center; height: 80px;}

/*註冊頁面*/
.loading {background: url(../images/loader.gif) no-repeat left center; height: 24px; line-height:24px; padding-left: 32px; float: left; margin-left: 100px; color:red;_margin-left:50px;}
.MsgShow {background: url(../images/loader.gif) no-repeat left center;  padding-left: 32px; float: left; margin-left: 2em; color:red; border-bottom:1px solid #ddd;  width: 100%;}
.caseloading {background: url(../images/loader.gif) no-repeat left center;  padding-left: 32px; float: left; margin-left: 2em;  width: 100%; height: 80px; line-height: 80px; color:blue}
.MsgShow strong { color:#666; font-size: 14px; padding-right: 10px;}
.okBG { background-image: url(../images/ok.gif);}
.errBG { background-image: url(../images/err.gif);}
.regTitle { background-color: #fff; padding:0 10px; color:blue; font-size: 16px;}
.reglist li { margin-bottom: 5px; overflow: hidden; zoom:1;}
.reglist li.s input{ width:auto}
.reglist li select { width: 150px;}
.reglist li i { font-style: normal; border:1px dashed red; padding:0 2px; color:#777;}
.reglist em { float: left; font-style: normal; font-size: 14px; width: 120px; text-align: right; padding-right: 3px;}
.loading a,.MsgShow a{ color:#336699; text-decoration: underline;}
.loading a:hover,.MsgShow a:hover { text-decoration: none;}
.loading span { color: #39F;}
.reglist input {width: 160px;}
.reglist input.w296 {width: 296px;}
.reglist span { color: red;}
.notice { padding-left: 120px; line-height: 1.6; overflow: hidden;}
.notice input { float: left;}
.rcode { border:1px solid #eee; padding: 20px 0; text-align: center;}
.notice  a,.reglist a,.rcode a { text-decoration: underline; color:#336699; padding:0 2px;}
.notice  a:hover,.reglist a:hover,.rcode a:hover { text-decoration: none;}
.btn { padding:10px 0 50px 120px;}
.btn input { cursor: pointer; padding:3px 5px; margin-right: 5px;}

/*用户中心*/
.sBar,.rBody { float: left;}
.rBody {width: 670px; padding-left: 10px; overflow: hidden;}
.sBar {width: 230px;border:1px solid #ddd; height:auto !important; height: 500px; min-height:500px;}
#welcome { border-bottom: 1px solid #ddd; margin-bottom: 10px; background: url(../images/User.png) no-repeat left center; padding-left: 35px; height: 32px; line-height: 32px; color:#666}
#toollist { margin: 10px  35px;}
#toollist li { border-bottom:1px dashed #ddd; padding: 3px;}
#toollist li a {color:#336699;}
#toollist li a:hover {color:#000;}
.rh3Title { border-bottom:1px solid #ddd; line-height: 32px; color:#666; padding-left: 3px;}
.toolDesc { margin:10px;}
.toolDesc li { margin-bottom: 20px;}
.toolDesc li h4 { margin-bottom: 5px;}
.mt20 { margin-top: 20px;}
.rh3Title a { color:#369;}
.reglist li cite { color:red; font-weight: bold; font-style: normal;}
.baselist { overflow: hidden; zoom:1;}
.baselist li { float: left; width:310px; margin-bottom:10px;}
.baselist li em { float: left; font-style: normal; width: 70px; text-align: right; padding:3px 3px 0 0;}
.baselist li.tebie { width: 100%;}
.tBtn { padding-top: 20px;}
.tBtn input{ padding: 3px 5px; cursor: pointer;}
.msglist { margin-top: 20px;}
.msglist li { overflow: hidden; zoom: 1; border-bottom:1px solid #ddd; margin-bottom: 5px; padding-bottom: 3px;}
.msglist li.th { border-bottom-color: #666;}
.msglist li .td { width: 120px; float: left; text-align: center;}
.msglist li .sp { width: 150px;}
.showMsgCon { width: 100%; padding:5px; background-color: #FFC; border:1px dashed #eee; margin:5px;}

/*留言板*/
.msgBox { width: 80%; margin-left: 50px; height: 80px; overflow: hidden; margin-left: 123px;}

/*sitediy*/
#StepList { overflow: hidden; zoom:1; border-bottom:1px solid #ddd; margin-bottom: 20px;}
#StepList li { float: left; border-left:1px solid #ddd;border-top:1px solid #ddd;  padding:10px 50px;}
#StepList li.step-4 { border-right:1px solid #ddd;}
#StepList li a { font-size: 14px; color:#666;}
#StepList li.selected { background:#f0f0f0 url(../images/step.png) no-repeat right center;}
#StepList li.selected a { color:#39F; font-weight: bold;} 
.diyArea,.successDiy h3,.successDiy h4{ border-bottom:1px solid #6CF; border-left:5px solid #6CF; padding-left: 5px; font-size: 18px;}
.Templatelist { margin:20px 10px; overflow: hidden; zoom:1;}
.Templatelist li { float:left; width: 217px;border:1px solid #fff;}
.Templatelist li.hover {background-color: #FFFFC1; border-color:#6CF;}
.Templatelist li div { text-align: center; padding-top:10px;}
.Templatelist li a{color: #369;}
.Templatelist li span {padding:5px;}
.Templatelist li p{padding:10px 0 20px;}
.configWrap { float: left; width: 700px;}
.configWrap fieldset { padding: 10px;}
.configWrap h4 { color:#369; font-size: 16px; font-weight: normal;}
.DIYthumbView{float: left; margin-left: 30px; display: inline; text-align: center;}
.DIYthumbView img {background-color: #FFFFC1; padding:3px;  text-align: center; border:1px solid #6CF; }
.DIYthumbView p { padding:5px 0;}
#modelConfig li{ float: left; width: 100px;}
#modelConfig ul { overflow: hidden; zoom:1; padding:10px 0;}
.configWrap label { cursor: pointer;}
#addPageList p { border-bottom:1px solid #ddd; margin: 10px 0; padding:5px 0;}
#addPageList p a{ display: inline-block; zoom:1; padding-left: 10px; color:#369;}
.stepUpDown { margin-top: 30px;}
.webConfig {   clear: both; overflow: hidden;}
.webConfig li { border-bottom:1px solid #ddd; margin: 10px 0; padding:5px 0;}
.webConfig li input { width: 300px;}
.webConfig li .complete { padding:3px 5px; width: 80px; cursor: pointer;}
.successDiy { margin:0 10px;}
.successDiy h3 { font-size: 16px; margin-bottom: 15px; font-weight: normal;}
.successDiy h3 span { color: #06F;}
.successDiy h4 { font-size: 14px; border-color: #B7E4FB; font-weight: normal;}
.successDiy em { font-style: normal; color:#000;}
.successDiy h3 cite { font-size: 14px; font-style: normal; color:#666;}
.successDiy ul,.successDiy dl{ margin:10px 0 10px 2em;}
.successDiy dl { border:1px solid #ddd; width: 300px; padding: 10px; background-color: #f0f0f0;}
.successDiy dl dt { border-bottom:1px solid #ddd; margin-bottom: 5px; font-size: 14px;}
.successDiy ul li { margin:5px 0;}
.successDiy ul li a { color: #369;}
.successDiy ul li p { margin:10px 0;}
#diyPrice,#diyUseData,#diyToData { color: red; padding:0 5px;}
/*footer*/
.ft {padding:20px 0 50px; overflow: hidden;}
.ft  a{ padding:0 5px; color:#369;}
.ftWrap { border-top: 1px solid #ddd; padding:5px 20px 0 10px;}