@import url('/skin/default/_component.css');


#content
{
    width: 960px;
    height: 580px;
    padding: 0px;
    clear: both;
    position:relative;
     overflow:hidden;
     height:auto;
}



#TemplateName
{
    float: left;
    font-size: 16px;
    color: #000000;
    font-weight: bold;
}
#TemplateName h4
{
    padding-left: 50px;
}
#GoBack
{
    float: right;
}

#TemplateDiv
{
    position: relative;
    z-index: 10;
    cursor: crosshair;
    width: 400px;
    height: 400px;overflow:hidden;
}
.TemplateDiv
{
    position: relative;
    z-index: 10;
    cursor: crosshair;
    width: 400px;
    height: 400px;
}


.MainImageLayer
{
    position: relative;
    overflow: hidden;
    
}
.PicmaskLayer
{
    position: absolute;
    z-index: 100;
    cursor: crosshair;
    width: 400px;
    height: 400px;
}
#PicmaskLayer
{
    position: absolute;
    z-index: 100;
    cursor: crosshair;
    width: 400px;
    height: 400px;
}
.TemplatePic
{
    position: absolute;
    z-index: 10;
    cursor: crosshair;
    width: 400px;
    height: 400px;
    margin-top: -400px;
}

#ProductView
{
    width: 400px;
    height: 120px;
    margin-top: 5px;
    overflow: visible;
    position: relative;
}
.DiyLoop
{
    width: 70px;
    height: 90px;
    float: left;
    margin-right: 2px;
    position: relative;
    cursor: pointer;
}
.TemplateViewText
{
    width: 60px;
    float: left;
    text-align: center;
    z-index: 10000;
}
.positionOk
{
    background: url(/skin/default/images/diy/joDiyTool.png) no-repeat;
    position: absolute;
    right: 2px;
    bottom: 48px;
    _bottom: 18px;
    width: 17px;
    height: 15px;
    background-position: -80px -60px;
    text-indent: -10000px;
    display: none;
}


.width76
{
    width: 76px;
}
.margin_right
{
    margin-right: 5px;
}
.width320
{
    width: 320px;
}
#DiyType
{
    padding: 5px;
}

#ColorDiv
{
    display: none;
    background: #fff7d7;
    left: 35px;
    position: absolute;
    top: 50px;
    width: 253px;
    height: 180px;
    padding-left: 1px;
    padding-top: 1px;
    text-align: center;
    filter: Alpha(Opacity=0);
    overflow: hidden;
    z-index: 50000;
}
.dd
{
    background: #FFFFFF;
}
.selectpic
{
    background: url(/skin/default/images/diy/joDiyTool.png) no-repeat;
    background-position: 1px -60px;
    color: #880;
}
.nopic
{
    width: 60px;
    height: 70px;
    padding: 10px 4px 0;
}


#C_Page
{
    text-align: right;
}




#MainDesign
{
    position: relative;
    width: 405px;
    float: left;
}

  

#Mask
{
    position: absolute;
    width: 100%;
    height: 120%;
    background-color: #FFFFFF;
    display: none;
    z-index: 5000;
    left: 0px;
    top: 0px;
    opacity: 0.35;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=30,finishOpacity=35);
}
#loginorreg
{
    position: absolute;
    left: 50%;
    top: 60%;
    margin-left: -190px;
    margin-top: -180px;
    z-index: 2000;
    display: none;
    width: 380px;
    height: 320px;
    background: #FFFFFF;
    border: #eeeeee solid 1px;
}
#loginorreg .logintop
{
    width: 100%;
    height: 20px;
    background: #eeeeee;
}
#loginorreg .logincontent
{
    width: 300px;
    margin: 10px auto;
}
#loginorreg #memInfo
{
    color: Red;
    display: none;
}

#register
{
    display: none;
}
#FC_addImg
{
    z-index: 10;
}
#swfupload
{
    position: absolute;
    left: 50%;
    top: 60%;
    margin-left: -280px;
    margin-top: -180px;
    z-index: 33000;
    display: none;
    width: 560px;
    height: 420px;
    background: #FFFFFF;
    border: #eeeeee solid 1px;
}


#MainDesign #GoToPreView a, #DiyOutter #Buy p, #DiyOutter #Buy #purchaseButton
{
    background: url(/skin/default/images/diy/joDiyTool.png) no-repeat;
}
#DiyOutter
{
    float: right;
    clear: right;
    width: 330px;
}
#DiyOutter #Buy
{
    padding: 5px 11px 11px;
    margin-bottom: 4px;
    border: 1px solid #ddd;
}
#DiyOutter #Buy h4
{
    display: none;
}
#DiyOutter #Buy p
{
    position: relative;
    margin-left: -12px;
    display: block;
    margin-right: -12px;
    bottom: -12px;
    width: 330px;
    height: 36px;
    background-position: 0 -160px;
}
#DiyOutter #Buy p label
{
    padding-left: 12px;
}
#DiyOutter #Buy p #Buy_totalPrice
{
    padding-left: 4px;
    color: #00003d;
    font-size: 14px;
    font-weight: bold;
}
#DiyOutter #Buy #purchaseButton
{
    position: relative;
    float: right;
    width: 88px;
    height: 22px;
    margin-top: -22px;
    border: none;
    background-position: -200px -60px;
    color: #00003d;
    font-size: 14px;
    text-align: left;
    text-indent: 15px;
    cursor: pointer;
}
#DiyOutter p .save
{
    margin-left: 15px;
}
#DiyOutter p .publish
{ *padding-left:3px;
}
#MainDesign #GoToPreView
{
    position: absolute;
    top: 370px;
    right: 15px;
    z-index: 10000;
}
#MainDesign #GoToPreView
{
    position: absolute;
    top: 380px;
    right: 5px;
    z-index: 500;
}
#MainDesign #GoToPreView a
{
    display: block;
    width: 35px;
    height: 18px;
    padding-left: 23px; *padding-top:1px;background-position:-100px -60px;color:#00003d;line-height:18px;}


#MainDesign #GoToPreView a:hover
{
    text-decoration: none;
}

#FC_addImg #FC_upload
{
    padding-bottom: 5px;
}

#FC_addImg #FC_upload input
{
    display: block;
    margin: 1em auto;
    border: none;
    color: #00003d;
    text-align: center;
    cursor: pointer;
  
}

#FC_addImg #FC_upload_chooseFile
{
    width: 152px;
    height: 40px;
    background-position: -240px 0;
    font-size: 14px;
    line-height: 40px;
}




.joMask
{
    position: absolute;
    left: 0;
    top: 5px;
    width: 960px;
    height: 560px;
    padding-top: 100px;
    color: #880;
    font: normal 18px/600% simhei,simsun;
    text-align: center;
    z-index: 9999999;
    background:#FFFFFF;
}
#ProductPreviewDiv
{
    width: 500px;
    height: 530px;
}
#diy_control_templateDetail
{
    height: 480px;
    overflow: hidden;
}
#ProductSaveDiv
{
    width: 480px;
    height: 280px;
    z-index: 9999;
}
#diy_common_imgSmallTip
{
    width: 650px;
}
#LoginDiv
{
    width: 480px;
    height: 300px;
    z-index: 9999;
}
#tsList, #tfList
{
    width: 400px;
    height: 360px;
}
#diy_design_keywordtip{ width:530px}
#diy_design_keywordtip_bar{ text-align:center}
#ProductPreviewDiv .tips, #ProductSaveDiv .tips, #LoginDiv .tips
{
    margin: 0 auto 5px;
    display: block;
    padding: 0;
    color: red;
    line-height: 1.6em;
    text-align: center;
}
#diy_control_productPreview_bar
{
    text-align: center;
}
 
.Ef
{
    position: absolute;
    left: 300px;
    top: 100px;
    border: 1px solid #67678b;
    background: #eee url(/skin/default/images/diy/diytools/joDiyTool_joDialog.gif) repeat-x;
    z-index: 10000;
    text-align: center;
}
.Ef .title
{
    height: 30px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 30px;
    text-indent: 10px;
    cursor: move;
}
#EffectMainMenu
{
    margin: 10px;
}

#tfList .content .list
{
    position: relative;
    height: 280px;
    overflow: auto;
}
#tfList .content .list a
{
    display: block;
    position: relative;
    width: 300px;
    height: 60px;
    margin: 5px auto;
    padding: 5px;
    border: 1px solid #ddd;
    background: url(/skin/images/diy/joDiyTool_Fonts.png) no-repeat center top;
    font-size: 0; *text-indent:-10000px;}

#tfList .content .list a:hover
{
    border-color: #880;
}
#tfList .content .list a.focus
{
    border: 2px solid #880;
}
#tfList .content .list a i
{
    display: none;
}
#tfList .content .list a.focus i
{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    background: url(/skin/default/images/diy/joDiyTool.png) no-repeat right bottom;
}
#tfList .content .list a.tf_1
{
    background-position: center 14px;
}
#tfList .content .list a.tf_0
{
    background-position: center 16px;
}
#tfList .content .list a.tf_1
{
    background-position: center -46px;
}
#tfList .content .list a.tf_2
{
    background-position: center -106px;
}
#tfList .content .list a.tf_3
{
    background-position: center -166px;
}
#tfList .content .list a.tf_4
{
    background-position: center -226px;
}
#tfList .content .list a.tf_5
{
    background-position: center -286px;
}
#tfList .content .list a.tf_6
{
    background-position: center -346px;
}
#tfList .content .list a.tf_7
{
    background-position: center -406px;
}
#tfList .content .list a.tf_8
{
    background-position: center -466px;
}
#tfList .content .list a.tf_9
{
    background-position: center -526px;
}
#tfList .content .list a.tf_10
{
    background-position: center -586px;
}
#tfList .content .list a.tf_11
{
    background-position: center -646px;
}
#tfList .content .list a.tf_12
{
    background-position: center -706px;
}
#tfList .content .list a.tf_13
{
    background-position: center -766px;
}
#tfList .content .list a.tf_14
{
    background-position: center -826px;
}
#tfList .content .list a.tf_15
{
    background-position: center -886px;
}
#tfList .content .list a.tf_16
{
    background-position: center -1046px;
}
#tfList .controlBar
{
    display: none;
}

#tsList .content .list
{
    height: 280px;
    overflow: auto;
}
#tsList .content .list a
{
    display: block;
    width: 300px;
    height: auto;
    margin: 5px auto;
    padding: 5px;
    border: 1px solid #ddd;
    text-align: center;
    text-decoration: none;
    color: Blue;
}

#tsList .content .list a:hover
{
    border-color: #880;
    text-decoration: none;
    color: Orange;
}
#tsList .content .list a.focus
{
    border: 2px solid #880;
    background: url(/skin/default/images/diy/joDiyTool_focus.png) no-repeat right bottom;
    color: #880;
}
#tsList .content .list a.ts_10
{
    font-size: 10px;
}
#tsList .content .list a.ts_12
{
    font-size: 12px;
}
#tsList .content .list a.ts_14
{
    font-size: 14px;
}
#tsList .content .list a.ts_16
{
    font-size: 16px;
}
#tsList .content .list a.ts_18
{
    font-size: 18px;
}
#tsList .content .list a.ts_20
{
    font-size: 20px;
}
#tsList .content .list a.ts_30
{
    font-size: 30px;
}
#tsList .content .list a.ts_50
{
    font-size: 50px;
}
#tsList .content .list a.ts_80
{
    font-size: 80px;
}
#tsList .content .list a.ts_120
{
    font-size: 120px;
}
#tsList .content .list a.ts_150
{
    font-size: 150px;
}
#tsList .content .list a.ts_180
{
    font-size: 180px;
}
#tsList .controlBar
{
    display: none;
}

.rollBox
{
    width: 100%;
    overflow: hidden;
    padding: 6px 0 0 0;
}
.rollBox .LeftBotton
{
    height: 52px;
    width: 34px;
    background: url(/skin/default/images/diy/diyViewPre.gif) no-repeat;
    overflow: hidden;
    float: left;
    display: inline;
    margin: 25px 0 0 0;
    cursor: pointer;
}
.rollBox .RightBotton
{
    height: 52px;
    width: 34px;
    background: url(/skin/default/images/diy/diyViewNext.gif) no-repeat 3px 0;
    overflow: hidden;
    float: left;
    display: inline;
    margin: 25px 0 0 0;
    cursor: pointer;
}
.rollBox .Cont
{
    width: 328px;
    overflow: hidden;
    float: left;
    position: relative;
}


.rollBox .ScrCont
{
    width: 10000000px;
}
.rollBox .Cont .pic
{
    width: 63px;
    float: left;
    text-align: center;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
}
.rollBox .Cont .pic img
{
    background: #fff;
    display: block;
    margin: 12px auto 0;
}
.rollBox .Cont .pic p
{
    line-height: 23px;
    color: #505050;
}
.rollBox .Cont a:link, .rollBox .Cont a:visited
{
    color: #626466;
    text-decoration: none;
}
.rollBox .Cont a:hover
{
    color: #f00;
    text-decoration: underline;
}
.rollBox #List1
{
}

a.imagepage
{
    border: 1px solid #DDD;
    background: #F2F2F2;
    display: inline-block;
    margin: 1px;
    text-decoration: none;
    font-size: 12px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    color: #AAA;
    padding: 1px 2px;
}
a.imagepage:hover
{
    border: 1px solid #E5E5E5;
    background: #F9F9F9;
    display: inline-block;
    margin: 1px;
    text-decoration: none;
    font-size: 12px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    color: #AAA;
    padding: 1px 2px;
}
#setpage span.current
{
    border: 1px solid #83E7E4;
    background: #DFF9F8;
    display: inline-block;
    margin: 1px;
    text-decoration: none;
    font-size: 12px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    color: #27CBC7;
    padding: 1px 2px;
}
#info
{
    display: inline-block;
    font-size: 9pt;
    border: 1px solid #DDD;
    background: #F2F2F2;
    margin: 1px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    color: #AAA;
    padding: 1px 2px;
}
/*商品多属性样式*/
#DiyOutter p .save
{
    margin-left: 15px;
    color: Blue;
}
#DiyOutter p .publish
{ *padding-left:3px;color:Blue
}


.drsElement
{
    position: absolute;
    border: 1px dashed #333;
    z-index: 50000;
}

/*
 The main mouse handle that moves the whole element.
 You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle
{
    height: 20px;
    border-bottom: 1px solid #666;
    cursor: move;
}

/*
 The DragResize object name is automatically applied to all generated
 corner resize handles, as well as one of the individual classes below.
*/
.dragresize
{
    position: absolute;
    width: 5px;
    height: 5px;
    font-size: 1px;
    background: #EEE;
    border: 1px solid #333;
    z-index: 10000;
}
.EffectControl
{
    width: 100%;
    height: 100%;
    background: #fff;
    filter: alpha(opacity:0);
    opacity: 0;
}
/*
 Individual corner classes - required for resize support.
 These are based on the object name plus the handle ID.
*/
.dragresize-tl
{
    top: -8px;
    left: -8px;
    cursor: nw-resize;
}
.dragresize-tm
{
    top: -8px;
    left: 50%;
    margin-left: -4px;
    cursor: n-resize;
}
.dragresize-tr
{
    top: -8px;
    right: -8px;
    cursor: ne-resize;
}

.dragresize-ml
{
    top: 50%;
    margin-top: -4px;
    left: -8px;
    cursor: w-resize;
}
.dragresize-mr
{
    top: 50%;
    margin-top: -4px;
    right: -8px;
    cursor: e-resize;
}

.dragresize-bl
{
    bottom: -8px;
    left: -8px;
    cursor: sw-resize;
}
.dragresize-bm
{
    bottom: -8px;
    left: 50%;
    margin-left: -4px;
    cursor: s-resize;
}
.dragresize-br
{
    bottom: -8px;
    right: -8px;
    cursor: se-resize;
}

#PhotoFrameLayer
{
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
}




#quickregdiv
{
    display: none;
}
#loginmask
{
    padding-top: 50px;
    display: none;
}
#loginmask #logintips
{
    padding-top: 30px;
}



.progressContainer
{
    width: 310px;
    overflow: hidden;
}

#loginbutton, #gotoreg, #regbutton, #regbutton
{
    background-color: transparent;
    background-image: url(/skin/default/images/diy/joDiyTool.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
}
#loginbutton
{
    width: 105px;
    height: 22px;
    margin-top: 5px;
    border-width: 0;
    background-position: -160px -100px;
    line-height: 22px;
    color: #00003d;
    text-align: center;
    cursor: pointer;
}
#gotoreg
{
    display: block;
    border-width: 0;
    width: 152px;
    height: 40px;
    margin-top: 5px;
    background-position: -240px 0pt;
    font-size: 14px;
    line-height: 40px;
    color: #00003d;
    text-align: center;
    cursor: pointer;
}

#regbutton
{
    width: 105px;
    border-width: 0;
    height: 22px;
    margin-top: 5px;
    background-position: -160px -100px;
    line-height: 22px;
    color: #00003d;
    text-align: center;
    cursor: pointer;
}
#quicklogindiv, #quickregdiv, #loginmask
{
    text-align: center;
}
#logintips
{
    text-align: center;
}


ol, ul
{
    list-style: none;
}

input, select, textarea
{
    color: #666;
    font-size: 12px;
}

 
.C_ListInline
{
    height: 100%;
    line-height: 150%;
}
.C_ListInline div
{
    height: 100%;
    padding: 5px 0;
}
.C_ListInline div.end
{
    border: none;
    padding-bottom: 0;
}
.C_ListInline div ul
{
    overflow: auto;
}
.C_ListInline h3
{
    clear: both;
    height: 21px;
    padding: 3px 0 0;
    background: url(/kadang/themes/v3.0/global/images/icon_category.png) no-repeat;
    text-indent: 2em;
    font-weight: 700;
}
.C_ListInline .CL_1 h3
{
    background-position: -65px -625px;
}
.C_ListInline .CL_2 h3
{
    background-position: -65px -650px;
}
.C_ListInline .CL_3 h3
{
    background-position: -65px -700px;
}
.C_ListInline .CL_71 h3
{
    background-position: -65px -675px;
}
.C_ListInline .CL_81 h3
{
    background-position: -65px -600px;
}
.C_ListInline .CL_171 h3
{
    background-position: -65px -575px;
}
.C_ListInline .CL_630 h3
{
    background-position: -65px -725px;
}
.C_ListInline li
{
    float: left;
}
.C_ListInline li a
{
    float: left;
    margin-right: 8px;
    word-break: keep-all;
    white-space: nowrap;
}
.C_ListInline li.focus a
{
    color: #C33;
    font-weight: 700;
}
.C_list li
{
    padding: 0 0 0 10px;
    background: url(/kadang/themes/v3.0/global/images/icon.png) no-repeat -10px -82px;
    line-height: 150%;
}
.C_templateViewHistory
{
    height: 100%;
    overflow: auto;
}
.C_templateViewHistory li
{
    float: left;
    width: 50%;
    text-align: center;
}
.C_templateViewHistory img
{
    display: block;
    width: 50px;
    height: 50px;
    margin: 10px auto;
    padding: 1px;
    border: 1px solid #eee;
}
.C_templateViewHistory a:hover img
{
    border: 1px solid #eee;
}
.C_tabBar01
{
    height: 30px;
    border-bottom: 1px solid #c0c994;
}

.C_tabBar01 li a
{
    display: block;
    float: left;
    height: 20px;
    padding: 10px 10px 0 20px;
    background-position: 0 -40px;
    color: #000;
    font-weight: 700;
    text-align: center;
}
.C_tabBar01 li.focus
{
    background-position: 100% 0;
}
.C_tabBar01 li.focus a
{
    color: #C33;
    background-position: 0 0;
}
.C_tagBar01
{
    height: 100%;
    overflow: auto;
    padding: 10px;
}
.C_tagBar01 li
{
    display: inline;
    float: left;
    height: 24px;
    margin-left: 15px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.C_TempList .C_TempPiece sub
{
    font-size: 9px; *font-size:11px;font-family:Tahoma;}

.C_dropDown
{
    position: relative;
}
.C_dropIcon
{
    cursor: pointer;
}
.C_dropWindow
{
    filter: Alpha(opacity=90);
    -moz-opacity: .9;
    opacity: .9;
    display: none;
    position: absolute;
    background: #fff;
}
.C_dropDownOpen .C_dropWindow
{
    display: block;
}
.C_richText
{
    height: 380px;
    overflow: auto;
    line-height: 150%;
    text-align: left;
}
.C_richText p
{
    margin: 1.2em 0;
    text-indent: 2em;
}
.C_richText p.img
{
    text-align: center;
    text-indent: 0;
    text-align: center;
}
.C_richText p.img img
{
    display: block;
    margin: 1.2em auto;
}
.C_richText em strong, .C_richText em
{
    color: red;
}
.C_richText strong em, .C_richText strong
{
    font-weight: 700;
}

#K_DiyTool, #K_DiyTool p, #K_DiyTool input, #K_DiyTool textarea, #K_DiyTool button
{
    font: normal normal 12px arial,simsun,sans-serif;
    color: #666;
}
#K_DiyTool p, #K_DiyTool ol, #K_DiyTool ul, #K_DiyTool h1, #K_DiyTool h2, #K_DiyTool h3, #K_DiyTool h4, #K_DiyTool h5, #K_DiyTool h6, #K_DiyTool fieldset
{
    margin: 0;
    padding: 0;
}
#K_DiyTool
{
    background-color: #fff;
}
#K_DiyTool h1, #K_DiyTool h2, #K_DiyTool h3, #K_DiyTool h4
{
    font-size: 14px;
}
#K_DiyTool ul, #K_DiyTool ol
{
    list-style: none;
}
#K_DiyTool p
{
    line-height: 18px;
}
#K_DiyTool img, #K_DiyTool fieldset
{
    border: 0;
}
#K_DiyTool em
{
    font-style: normal;
}
#K_DiyTool a:link, #K_DiyTool a:visited
{
    color: #36c;
    text-decoration: none;
}
#K_DiyTool a:hover, #K_DiyTool a:active
{
    color: #36c;
    text-decoration: underline;
}
#DesignArea #Position .scrollLeft a, #DesignArea #Position .scrollRight a, #DesignArea #Position .scrollContent a.focus, #DesignArea #Position .scrollContent .positionOk, #FunctionArea #FC_nav li a, .C_UserImageUpload input, #FunctionArea .menu .normal a, #FunctionArea .menu .ext .showExt, #FunctionArea .menu .ext .hideExt, .tools .move, .tools a, #FC_addTxt #FC_addTxt_content #FC_addTxt_submit, #FC_modTxt #FC_modTxt_content #FC_modTxt_font_submit, #FC_modTxt .textTool a, #FC_modTxt .textTool .tf i, #loginPanel .close, #loginPanel .newUser .quickReg, #loginPanel .oldUser p.btnarea input, #loginPanel .register .btnarea input, #DiyOutter #Buy p,#FunctionArea .viewWapper .addImg input, #DiyOutter #Buy #purchaseButton
{
    background: url(/skin/default/images/diy/joDiyTool.png) no-repeat;
}
#K_DiyTool .tips, #diy_common_imgSmallTip .tips
{
    margin-top: 0;
    color: #999;
}
#K_DiyTool .error
{
    color: #f00;
}
#K_DiyTool
{
    position: relative;
    width: 760px;
    margin: 0 auto;
    overflow: hidden;
}
#K_DiyTool h3
{
    display: none;
}
#K_DiyTool #ProductName
{
    display: inline;
    margin-right: .5em;
    font: normal 18px/150% simhei;
}
#SelectProduct
{
    display: inline;
}
#SelectProduct a
{
    margin-left: .2em;
}
#SelectProduct #kdProductDetail
{
    padding-right: 8px;
    margin-right: 10px;
    background: url(/skin/default/images/diy/joDiyToolArrow.gif) no-repeat right;
}
#diy_control_productPreview .tips
{
    margin: .5em;
    padding: 0;
    color: #999;
    line-height: 1.6em;
    text-align: center;
}
#FunctionArea .menu
{
    float: left;
    clear: left;
    width: 100px;
    margin-top: 8px;
}
#FunctionArea .menu a
{
    display: block;
    line-height: 18px;
}
#FunctionArea .menu .normal
{
    border-bottom: 1px solid #e4e4be;
}
#FunctionArea .menu .normal a
{
    padding-left: 15px;
}
#FunctionArea .menu .normal .TFreplace
{
    background-position: -480px 3px;
    font-size: 14px;
    line-height: 20px;
}
#FunctionArea .menu .normal .TFdelete
{
    background-position: -480px -37px;
    font-size: 14px;
    line-height: 20px;
}
#FunctionArea .menu .ext
{
    padding-left: 15px;
    padding-top: 3px;
}
#FunctionArea .menu .ext .showExt
{
    background-position: -68px 5px;
    color: #880;
}
#FunctionArea .menu .ext .hideExt
{
    background-position: -150px 5px;
    color: #880;
}
#FunctionArea .menu .ext .disable
{
    color: #ccc;
    cursor: no-drop;
    text-decoration: none;
}
.tools
{
    position: absolute;
    width: 74px;
    right: 30px;
    top: 42px;
}
.tools a
{
    display: block;
    position: absolute;
    width: 37px;
    height: 30px;
    overflow: hidden;
    font-size: 0; *text-indent:-10000px;}
#FC_modImg .tools
{
    right: 50px;
    top: 43px;
}
#FC_modImg .tools .TFcenter
{
    display: none;
}
#FC_modTxt .tools
{
    right: 50px;
    top: 43px;
}
.tools h5
{
    display: none;
}
.tools h6
{
    position: absolute;
    width: 100%;
    top: 34px;
    color: #999;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
}
.tools div
{
    position: relative;
    width: 74px;
    height: 54px;
}
.tools .move
{
    height: 98px;
    background-position: 0 -200px;
}
.tools .move h6
{
    top: 78px;
}
.tools .move a
{
    width: 24px;
    height: 24px;
}
.tools .moveUp
{
    left: 24px;
    top: 0;
    background-position: -24px -200px;
}
.tools .moveUp:hover
{
    background-position: -104px -200px;
}
.tools .moveRight
{
    left: 48px;
    top: 24px;
    background-position: -48px -224px;
}
.tools .moveRight:hover
{
    background-position: -128px -224px;
}
.tools .moveBottom
{
    left: 24px;
    top: 48px;
    background-position: -24px -248px;
}
.tools .moveBottom:hover
{
    background-position: -104px -248px;
}
.tools .moveLeft
{
    left: 0;
    top: 24px;
    background-position: 0 -224px;
}
.tools .moveLeft:hover
{
    background-position: -80px -224px;
}
.tools .moveMiddle
{
    left: 24px;
    top: 24px;
    background-position: -24px -224px;
}
.tools .moveMiddle:hover
{
    background-position: -104px -224px;
}
.tools .TFzoomIn
{
    left: 0;
    top: 0;
    background-position: -160px -200px;
}
.tools .TFzoomIn:hover
{
    background-position: -160px -240px;
}
.tools .TFzoomOut
{
    left: 37px;
    top: 0;
    background-position: -197px -200px;
}
.tools .TFzoomOut:hover
{
    background-position: -197px -240px;
}
.tools .TFrotate
{
    left: 37px;
    top: 0;
    background-position: -277px -200px;
}
.tools .TFrotate:hover
{
    background-position: -277px -240px;
}
.tools .TFrotateC
{
    left: 0;
    top: 0;
    background-position: -240px -200px;
}
.tools .TFrotateC:hover
{
    background-position: -240px -240px;
}
.tools .TFvCenter
{
    left: 0;
    top: 0;
    background-position: -320px -200px;
}
.tools .TFvCenter:hover
{
    background-position: -320px -240px;
}
.tools .TFhCenter
{
    left: 37px;
    top: 0;
    background-position: -357px -200px;
}
.tools .TFhCenter:hover
{
    background-position: -357px -240px;
}
.tools .TFdefault
{
    height: 30px;
}
.tools .TFdefault h6
{
    display: none;
}
.tools .TFreset
{
    left: 0;
    top: 0;
    width: 74px;
    background-position: -400px -200px;
}
.tools .TFreset:hover
{
    background-position: -400px -240px;
}
.diyStart
{
    position: absolute;
    left: 155px;
    top: 90px;
    z-index: 8000;
    width: 311px;
    height: 154px;
    background: url(/skin/default/images/diy/joDiyTool_Start.png) no-repeat;
    _background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/skin/default/images/diy/joDiyTool_Start.png");
}
.imgTooSmall
{
    position: absolute;
    left: 30px;
    top: 90px;
    z-index: 8000;
    padding: 2em 2em 2em 4em;
    border: 1px solid #880;
    background: #fcfaeb url(/skin/default/images/icon_alert1_big.gif) no-repeat 10px;
    color: #880;
    font-size: 14px;
    text-align: center;
    filter: alpha(opacity:85);
    opacity: .85;
}
.C_Property
{
    padding: 8px 9px;
    margin: 1px auto;
    line-height: 1.8em;
    background: #fcfaeb;
}
.C_Property li
{
    border-bottom: 1px dotted #ddd;
    list-style: none;
}
.C_Property li span
{
    float: left;
    font-weight: 700;
    line-height: 1.8em;
}
.C_RichText
{
    padding: 10px;
    line-height: 1.5em;
}
#K_DesignDiyTool .tips{color:#999;}
	#K_DesignDiyTool .error{color:#f00;}
	
/* DiyTool */
	#K_DesignDiyTool{position:relative;width:760px;margin:0 auto;overflow:hidden;}
	#K_DesignDiyTool h3{display:none;}
	#K_DesignDiyTool #ProductName{display:inline;margin-right:.5em;font:normal 18px/150% simhei;}
	#SelectProduct{display:inline;}
	#SelectProduct a{margin-left:.2em; }
	#SelectProduct #kdProductDetail{padding-right:8px;margin-right:10px;background:url(/kadang/themes/v3.0/module/diyTool/images/joDiyToolArrow.gif) no-repeat right;}

#DesignArea
{
    position: relative;
    float: left;
    width: 400px;
  
}
#DesignArea #Color h4
{
    display: none;
    margin-right: .2em;
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
}
#DesignArea #Color span.scrollContent a
{
    line-height: 12px;
}
#DesignArea #Color span.scrollContent a img
{
    position: relative;
    width: 20px;
    height: 12px;
    border: 1px solid #fff;
}
#DesignArea #Color span.scrollContent a.focus img
{
    border: 1px dotted #c9c9a7;
}
#DesignArea #ProductView
{
    position: relative;
    width: 400px;
    height: 400px;
    cursor: crosshair;
    overflow: visible;
}
#DesignArea #Position
{
    padding-top: 5px;
}
#DesignArea #Position h4
{
    display: none;
}
#DesignArea #Position .scrollLeft, #DesignArea #Position .scrollContent, #DesignArea #Position .scrollRight
{
    float: left;
}
#DesignArea #Position .scrollLeft a, #DesignArea #Position .scrollRight a
{
    display: block;
    width: 10px;
    height: 73px;
    margin-top: 6px;
    background-position: 2px 30px;
    background-color: #f0efd6;
    font-size: 0; *text-indent:-10000px;}
#DesignArea #Position .scrollRight a
{
    background-position: -57px 30px;
}
#DesignArea #Position .scrollContent
{
    position: relative;
    width: 380px;
    _width: 377px;
    height: 79px;
    overflow: hidden;
}
#DesignArea #Position .scrollContent a
{
    display: block;
    position: absolute;
    width: 60px;
    height: 79px;
    padding-top: 10px;
    color: #36c;
    text-align: center;
    cursor: pointer;
}
#DesignArea #Position .scrollContent a.focus
{
    background-position: 0 -60px;
    color: #880;
}
#DesignArea #Position .scrollContent .positionName
{
    display: block;
    line-height: 18px;
    text-align: center;
}
#DesignArea #Position .scrollContent .positionOk
{
    position: absolute;
    right: 2px;
    bottom: 28px;
    _bottom: 18px;
    width: 17px;
    height: 15px;
    background-position: -80px -60px;
    text-indent: -10000px;
}
#FunctionArea
{
    position: relative;
    float: right;
    width: 330px;
}

#FunctionArea h3,
	#FunctionArea .viewWapper .submitInfo a{background:url(/skin/default/images/designDIYtool.png) no-repeat;}
	#K_DesignDiyTool .tips{color:#999;}
	#K_DesignDiyTool .error{color:#f00;}
#FunctionArea{position:relative;float:right;width:306px;padding:11px; margin-bottom:4px;border:1px solid #ddd;}
		#FunctionArea h3{display:block;position:relative;left:-12px;top:-12px;width:280px;height:21px;margin:0;margin-right:-24px; padding:6px 0 0 50px;background-position:0 -50px; font-weight:700; }
		#FunctionArea .viewWapper .tips{margin-bottom:.5em;}
		#FunctionArea .viewWapper .tips .keyCtrl{color:#f90;}
		#FunctionArea .viewWapper .submitInfo{padding:1em;text-align:center; }
		#FunctionArea .viewWapper .submitInfo a{display:block;width:250px;height:40px;margin:0 auto;color:#00003d;font-size:14px;line-height:40px;text-align:center;text-decoration:none;}
		#FunctionArea .viewWapper .addTxt input{width:24em;border:1px solid #ccc;border-right-color:#ddd;border-bottom-color:#ddd;background:#fff;color:#666;line-height:1em; }
		#FunctionArea .viewWapper .addTxt textarea{width:24.4em;*width:24em;border:1px solid #ccc;border-right-color:#ddd;border-bottom-color:#ddd;background:#fff;color:#666;}
		#FunctionArea .viewWapper label{display:block;float:left;height:20px;width:8em;overflow:hidden;margin-right:5px;color:#666;text-align:center;background:#f2f2f2;line-height:20px;}
		#FunctionArea .viewWapper p.addTxt{height:100%;margin-top:3px; overflow:auto;}
		#FunctionArea .viewWapper p.addImg{height:52px;margin-top:3px;overflow:hidden; }
		#FunctionArea .viewWapper .addImg .adImg_img{display: table-cell;*display: block;float:left;width:50px;height:50px;overflow:hidden;margin-right:5px;text-align:center;border: 1px solid #ddd;*font-size: 43.65px;*font-family:Arial;vertical-align:middle;}
		#FunctionArea .viewWapper .addImg .adImg_img img{vertical-align:center;}
		#FunctionArea .viewWapper .addImg label{padding-top:30px; }
		#FunctionArea .viewWapper .addImg input{float:left;width:71px;height:22px;margin:0;padding:0;margin-top:28px;border:none;background-position:-80px -100px;color:#00003d;line-height:22px;}

#DiyOutter
{
    float: right;
    clear: right;
    width: 330px;
}
#Buy_attr
{
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}
#Buy_attr.focus
{
    padding: 5px;
    border: 2px dotted #f30;
}
#Buy_attr .attr
{
    clear: both;
    height: 100%;
    overflow: auto;
}
#Buy_attr span
{
    float: left;
    margin-top: 3px;
    padding: 3px 6px;
    border: 1px solid #fff;
}
#Buy_attr a
{
    float: left;
    margin-top: 3px;
    margin-left: 5px;
    padding: 3px 6px;
    border: 1px solid #ddd;
}
#Buy_attr a.focus:link, #Buy_attr a.focus:visited, #Buy_attr a.focus:hover, #Buy_attr a.focus:active
{
    padding: 2px 5px;
    border: 2px solid #880;
    background: url(/skin/default/images/diy/joDiyTool.png) no-repeat right -430px;
    color: #880;
}
#Buy_attr a:hover
{
    padding: 3px 6px;
    border: 1px solid #880;
    color: #880;
    text-decoration: none;
}
#DiyOutter #Buy
{
    padding: 5px 11px 11px;
    margin-bottom: 4px;
    border: 1px solid #ddd;
}
#DiyOutter #Buy h4
{
    display: none;
}
#DiyOutter #Buy p
{
    position: relative;
    margin-left: -12px;
    margin-right: -12px;
    bottom: -12px;
    width: 330px;
    height: 36px;
    background-position: 0 -160px;
}
#DiyOutter #Buy p label
{
    padding-left: 12px;
}
#DiyOutter #Buy p #Buy_totalPrice
{
    padding-left: 4px;
    color: #00003d;
    font-size: 14px;
    font-weight: bold;
}
#DiyOutter #Buy #purchaseButton
{
    position: relative;
    float: right;
    width: 88px;
    height: 22px;
    margin-top: -22px;
    border: none;
    background-position: -200px -60px;
    color: #00003d;
    font-size: 14px;
    text-align: left;
    text-indent: 15px;
    cursor: pointer;
}
#DiyOutter p .save
{
    margin-left: 15px;
}
#DiyOutter p .publish
{ *padding-left:3px;}
#Save
{
    width: 380px;
}
#Save label
{
    line-height: 1.8em;
}
#Save label input
{
    display: block;
    width: 300px;
}
#loginPanel
{
    position: absolute;
    left: 300px;
    top: 100px;
    z-index: 7000;
    width: 420px;
    border: 1px solid #67678b;
    background: #eee url(joDiyTool_joDialog.gif) repeat-x;
}
#loginPanel h2
{
    height: 30px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-indent: 10px;
    cursor: move;
}
#loginPanel .close
{
    position: absolute;
    top: 7px;
    right: 10px;
    display: block;
    width: 17px;
    height: 16px;
    background-position: -400px 0;
    font-size: 0; *text-indent:-1000px;}
#loginPanel .close:hover
{
    background-position: -400px -20px;
}
#loginPanel #loginPanel_content
{
    margin: 0 10px 10px;
    padding: 15px;
    border: 1px solid #67678b;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
    background: #fff;
}
#loginPanel p
{
    clear: both;
}
#loginPanel h4
{
    position: relative;
    margin: 0;
    padding: 0;
    text-align: left;
    font-weight: 700;
}
#loginPanel .oldUser
{
    height: 100%;
    margin: 5px auto 0;
    padding: 10px;
    background: #fcfaeb;
    border: 1px solid #f0efd6;
}
#loginPanel .oldUser div
{
    clear: both;
    height: auto;
    margin: 0;
    padding: 5px 0;
}
#loginPanel .oldUser div label
{
    float: left;
    width: 80px;
    padding-top: 3px;
    padding-right: 10px;
    text-align: right;
}
#loginPanel .oldUser div input
{
    float: left;
    width: 100px;
    height: 16px;
    line-height: 16px;
}
#loginPanel .oldUser p a
{
    text-decoration: underline;
}
#loginPanel .oldUser p.btnarea
{
    padding-left: 90px;
}
#loginPanel .register .btnarea input, #loginPanel .oldUser p.btnarea input
{
    width: 105px;
    height: 22px;
    margin-top: 5px;
    border: none;
    background-position: -160px -100px;
    line-height: 22px;
    color: #00003d;
    text-align: center;
    cursor: pointer;
}
#loginPanel .newUser
{
    height: 100%;
    margin: 10px auto 0;
    padding: 10px;
    text-align: left;
    border: 1px solid #f0efd6;
}
#loginPanel .newUser ol
{
    list-style: none;
}
#loginPanel .newUser ol li
{
    margin: 15px 0;
    text-align: left;
}
#loginPanel .newUser .quickReg
{
    display: block;
    width: 152px;
    height: 40px;
    margin-top: 5px;
    background-position: -240px 0;
    font-size: 14px;
    line-height: 40px;
    color: #00003d;
    text-align: center;
}
#loginPanel .register
{
    height: 100%;
    margin: 5px auto 0;
    padding: 10px 5px;
    background: #fcfaeb;
    border: 1px solid #f0efd6;
}
#loginPanel #loginPanelContent_reg h4
{
    display: none;
}
#loginPanel .register div
{
    clear: both;
    height: 30px;
    margin: 0;
    padding: 0;
}
#loginPanel .register div label
{
    float: left;
    width: 50px;
    padding-top: 3px;
    padding-right: 10px;
    text-align: right;
}
#loginPanel .register div input
{
    float: left;
    width: 100px;
    height: 16px;
    line-height: 16px;
}
#loginPanel .register div em
{
    position: relative;
    float: left;
    width: 180px;
    margin: 0;
    padding-left: 10px;
    text-align: left;
}
#loginPanel .register p
{
    clear: both;
}
#loginPanel .register div input.input_null
{
    width: 20px;
    margin-left: 18px;
}
#loginPanel .register div .checkUseName
{
    height: 18px;
    margin-left: 10px;
    line-height: 16px;
}
#loginPanel .register .btnarea, #loginPanel .register .regNotes
{
    padding-left: 60px;
}
#loginPanel .register .regNotes input, #loginPanel .register .regNotes label
{
    width: auto;
}
div.K_Col_21 #K_Col1
{
    width: 780px;
    margin: 0 0 0 20px;
}
.loading
{
    background: url(/kadang/themes/v3.0/extend/kadang.com/images/loading.gif) no-repeat 50% 50%;
}
.grayLink a:link, .grayLink a:active, .grayLink a:visited
{
    color: #999;
    text-decoration: underline;
}
.grayLink a:hover
{
    color: #C33;
}
.b
{
    font-weight: 700;
}
.red
{
    color: #F00;
}
.end
{
    border: none !important;
    background: none !important;
}
.hidden
{
    height: 0;
    margin-left: -9999px;
    line-height: 0;
}
#diy_simple_userimgpanel.visible{width:380px; height:300px; height:auto}
#diy_simple_userimgpanel.hidden{width:0; height:0; overflow:hidden}
#FC_imgLib
{
    position: relative;
}
#FC_imgLib h5
{
    padding: 3px;
    margin-bottom: 4px;
    background: #f2f2f2;
    font-size: 12px;
    font-weight: 700;
}
#FC_imgLib #ImageList
{
    height: 100%;
    margin: 4px 0;
    overflow: hidden;
}
#FC_imgLib #ImageList div
{
    float: left;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
}
#FC_imgLib #ImageList div img
{
    vertical-align: middle;
}
#FC_imgLib .C_Page
{
    padding: 5px;
    clear: both;
    text-align: center;
}
#FC_imgLib .C_Page strong
{
    padding: 2px 4px;
    margin: 0 2px;
    border: 1px solid #880;
    color: #880;
}
#FC_imgLib .C_Page .pages a
{
    padding: 2px 4px;
    margin: 0 2px;
    border: 1px solid #ddd;
}
#FC_imgLib .C_Page .pages a.next, #FC_imgLib .C_Page .pages a.prev
{
    display: none;
}
#FC_modImg
{
    height: 260px;
    padding: 15px 25px;
}
#FC_imgLib .coopImgLibButton
{
    position: absolute;
    top: 3px;
    right: 5px;
    padding-right: 8px;
    margin-right: 10px;
    background: url(joDiyToolArrow.gif) no-repeat right;
}
#ImageList div a
{
    cursor: pointer;
}
#DesignArea #ProductView  div.borderred{ border:1px solid #FBBD5D}
#upload_error_msg{ color:Red}