/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
    +content
        +content-main
            +member
                =step
                =clause
                =method
                =btn
-----------------------------------------------------------------------------*/

/* +content
*----------------------------------------------------------------------------*/
/* +content-main
*----------------------------------------------------------------------------*/

/**
 *
 * +member
 *
 **/

#content-main .member {
    margin: 0 0 5px 5px;
}

#content-main .member h1 {
    height: 38px;
    background: url(../../i/bg-member-h1.gif) no-repeat;
    text-indent: -100000px;
}

/**
 *
 * =step
 *
 **/

#content-main .member .step {
    margin: 10px auto 0 auto;
}


/**
 *
 * =clause
 *
 **/

#content-main .member .clause {
    width: 690px;
    margin: 0 auto;
}

#content-main .member .clause h2 {
    height: 36px;
    background: url(../../i/bg-member-h2-clause.gif) no-repeat;
    text-indent: -100000px;
}

#content-main .member .clause .box {
    float: left;
    width: 686px;
    margin: 10px 2px;
    background: url(../../i/bg-member-clause.gif) no-repeat top left;
}

#content-main .member .clause .box2 {
    float: left;
    width: 686px;
    height: 334px;
    background: url(../../i/bg-member-clause-bottom.gif) no-repeat bottom left;
}

#content-main .member .clause .box .box-con {
    width: 590px;
    height: 226px;
    margin: 16px 28px 10px 28px;
    overflow: auto;
    border: 1px solid #a7abae;    
    padding: 20px;
    color: #444444;
    background: #fff;
    
    scrollbar-arrow-color: #00BFCC;         /*捲軸箭頭*/
    scrollbar-face-color: #b6eef2;          /*捲軸顏色*/
    scrollbar-track-color: #fff;            /*捲軸底色*/
    scrollbar-3dlight-color: #fff;          /*捲軸左與上外邊框*/
    scrollbar-darkshadow-Color: #fff;       /*捲軸右與下外邊框*/
    scrollbar-highlight-color: #00BFCC;     /*捲軸左與上內邊框*/
    scrollbar-shadow-color: #00BFCC;        /*捲軸右與下內邊框*/
}

#content-main .member .clause .box .box-con h4 {
    margin: 0 0 5px 0;
}

#content-main .member .clause .box p {
    text-align: center;
    font: bold 12px/18px Arial, sans-serif, "新細明體";
	color: #035c85;
}

/**
 *
 * =method
 *
 **/

#content-main .member .method {
    width: 690px;
    margin: 0 auto;
}

#content-main .member .method h2 {
    height: 36px;
    background: url(../../i/bg-member-h2-method.gif) no-repeat;
    text-indent: -100000px;
}

#content-main .member .method p.txt {
    margin: 10px 16px 0 16px;
    font: 13px/18px Arial, sans-serif, "新細明體";
    color: #444444;
}

#content-main .member .method .box {
    float: left;
    width: 686px;
    margin: 10px 2px;
    background: url(../../i/bg-member-clause.gif) no-repeat top left;
}

#content-main .member .method .box2 {
    float: left;
    width: 486px;
    padding: 13px 120px;
    background: url(../../i/bg-member-clause-bottom.gif) no-repeat bottom left;
}

#content-main .member .method .box2 img {
    padding: 0 5px;
    vertical-align: middle;    
}

#content-main .member .method .box2 p {
    font: bold 15px/18px Arial, sans-serif, "新細明體";
    color: #6e6e6e;
}

#content-main .member .method .box2 input {
    vertical-align: middle;
}

#content-main .member .method .box2 .add-b {
    float: left;
    width: 180px;
    height: 32px;
    padding: 9px 0 0 0;
    text-align: center;
    background: url(../../i/bg-member-method-b.gif) no-repeat bottom left;
}

#content-main .member .method .box2 .or {
    float: left;
    width: 40px;
    height: 32px;
    padding: 9px 0 0 0;
    font: bold 15px/18px Arial, sans-serif, "新細明體";
    color: #6e6e6e;
    text-align: center;
}

#content-main .member .method .box2 .add-p {
    float: left;
    width: 180px;
    height: 32px;
    padding: 9px 0 0 0;
    text-align: center;
    background: url(../../i/bg-member-method-p.gif) no-repeat bottom left;
}

/**
 *
 * =btn
 *
 **/

#content-main .member .btn {
    position: relative;
    width: 690px;
    height: 20px;
    margin: 10px 0 0 0;
    *margin: 0;
    _margin: 0;
}

#content-main .member .btn ul { 
    position: absolute;
    right: 256px;
    *right: 256px;
    _right: 250px;
}

#content-main .member .btn ul li { 
    float: left;
    margin: 0 10px 0 0;
}

/* cancel */
#content-main .member .btn ul li.cancel a {
    display: block;
    width: 81px;
    height: 20px;
    background: url(../../i/btn-member-cancel.gif) no-repeat 0 0;
    text-indent: -100000px;
}

#content-main .member .btn ul li.cancel a.r {
    display: block;
    width: 81px;
    height: 20px;
    background: url(../../i/btn-member-cancel.gif) no-repeat 0 -20px;
    text-indent: -100000px;
}

/* next */
#content-main .member .btn ul li.next a {
    display: block;
    width: 91px;
    height: 20px;
    background: url(../../i/btn-member-next.gif) no-repeat 0 0;
    text-indent: -100000px;
}

#content-main .member .btn ul li.next a.r {
    display: block;
    width: 91px;
    height: 20px;
    background: url(../../i/btn-member-next.gif) no-repeat 0 -20px;
    text-indent: -100000px;
}

#content-main .member .btn button.next-r {
	float: left;
    display: block;
    width: 91px;
    height: 20px;
    background: url(../../i/btn-member-next-r.gif) no-repeat;
    text-indent: -100000px;
}
#content-main .member .btn button.cancel {
	float: left;
    display: block;
    width: 81px;
    height: 20px;
    background: url(../../i/btn-member-cancel.gif) no-repeat;
    text-indent: -100000px;
}