/* margin:10px 5px 15px 20px;
        top margin is 10px
        right margin is 5px
        bottom margin is 15px
        left margin is 20px

    margin:10px 5px 15px;
        top margin is 10px
        right and left margins are 5px
        bottom margin is 15px

    margin:10px 5px;
        top and bottom margins are 10px
        right and left margins are 5px

    margin:10px;
        all four margins are 10px
*/
body    {
        color: #000000;
        font-size: 10px;
        font-family: Verdana, Arial, sans-serif;
        line-height: 14px;
        background-color: #EEEEEE;
/*        background-color: #5a050c;  */
        background-image: url(images/bg_insta.jpg); 
/*        background-image: none; */
        background-repeat: repeat;
        text-align: center;
        margin: 0;
        padding: 0 }
.clear {
        clear:both;
        overflow:hidden;
        margin:0;
        padding:0;
        height:1px;}

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

#header {
        width: 898px;
        height: 227px;
        margin-bottom: 3px;
        padding: 0 }

/*******
#header {
        width: 898px;
        height: 325px;
        margin-bottom: 3px;
        padding: 0 }

 **********/

 blink {
    -webkit-animation: 2s linear infinite condemned_blink_effect; // for android
    animation: 1s linear infinite condemned_blink_effect;
}
@-webkit-keyframes condemned_blink_effect { // for android
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
@keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

/******* formasi logo **********/
#logospace {width: 898px; height: 78px}
.lefttext {margin: 0px 5px 5px 5px; }
.toplogo { width: 165px; height: 66px; margin: 1px 0px 0px 0px; float: left}
.toprightmenu { color: #aaa; font-size: 12px; width: 733px; height: 4px; margin: 50px 0px 3px 0px; text-align: right; float: left}
.toprightmenu a  { font-size: 9px; color: #aaa; font-weight: bold; text-decoration: none }
.toprightmenu a:hover { color: #fff }

/******* space tipis dibawah menu (pemanis web) **********/
#menuspace { height: 20px; width: 898px; margin-bottom: 3px}
.topmenu  { font-weight: normal; margin-right: 2px; width: 148px; height: 20px; float: left }
.topmenu  a   { color: #fff; font-size: 14px; font-weight: bold; line-height: 20px; text-decoration: none; background-color: #f93; background-image: url(images/topbtna.gif); background-repeat: no-repeat; text-align: center; display: block; width: 148px; height: 20px }
.topmenu  a:hover, .topmenu a.current  { color: #f93; background-image: url(images/topbtnahvr.gif); background-repeat: no-repeat }

.topmenu2  { font-weight: normal; margin-right: 2px; width: 178px; height: 20px; float: left }
.topmenu2  a   { color: #B22222; font-size: 12px; font-weight: bold; line-height: 20px; text-decoration: none; background-color: #f93; background-image: url(images/bgmenulink.gif); background-repeat: no-repeat; text-align: center; display: block; width: 178px; height: 20px }
.topmenu2  a:hover, .topmenu a.current  { color: #0000FF; background-image: url(images/bgmenulinkhover.gif); background-repeat: no-repeat; width: 178px; height: 20px }

/** #picturespace { width: 898px; height: 196px; } **/
#picturespace { width: 898px; height: 126px; }
.topleftcontent  { background-color: #D8EBFA; background-image: none; background-repeat: repeat; margin-right: 3px; width: 203px; height: 126px; float: left}
.topleftcontent .login { width: 203px; height: 126px; margin: 0px 0px 0px 0px; font-weight: bold; color: #000000; background-image: url(images/bglogin.gif); border-bottom: 0px #b51d01 dotted}
.topleftcontent .login form {margin: 0px 0px 0px 0px; padding: 0}
.topleftcontent .login input { color: #aaaaaa; width: 172px; margin-bottom: 6px; border: 1px #7f9db9 solid}
.topleftcontent .login .text {margin: 0px 0px 0px 15px; }
.topleftcontent .login a  { color: #6C0000; font-size: 11px; font-weight: bold; text-decoration: none; line-height: 20px; height: 30px}
.topleftcontent .login a:hover { color: #FFFFFF;}
.topleftcontent .cart { margin: 15px 0px 15px 15px; color: #fff}
.topleftcontent .cart .title { color: #c41902; font-weight: bold; font-size: 12px}
.topleftcontent .cart img {margin-right: 7px; margin-bottom: 5px}
.topleftcontent .cart a { color: #f93; font-size: 11px; font-weight: bold; text-decoration: none}
.topleftcontent .cart a:hover { color: #fff}
.toprightcontent  { background-color: #b00;  display: block; width: 692px; height: 126px; float: left }

/******* formasi main website #D8EBFA **********/
#main     { background-color: #C0C0C0;
        background-image: none;
        background-repeat: repeat;
        margin-bottom: 3px;
        width: 898px;
        float: left }

#leftspace   {  margin-right: 3px; margin-bottom: 10px; width: 203px; float: left; }
.leftmenu  { background-color: #C0C0C0; width: 203px;  float: left;}
.leftmenu .title   { font-size: 16px; font-weight: bold; line-height: 25px; height: 25px; margin-top: 20px; margin-bottom: 10px; }
.leftmenu .title img { margin-left: 25px; margin-right: 5px}
.leftmenu ul    { list-style: none; margin: 0; padding: 0}
.leftmenu li     {  width: 187px;  padding: 0; display: block; border-bottom: 1px dotted #711201}
.leftmenu li img { margin-left: 15px; margin-right: 5px }
.leftmenu li a    { height: 21px; color: #fff; font-size: 11px; font-weight: normal; line-height: 21px; text-decoration: none; margin: 0; padding: 0 }
.leftmenu li a:hover { color: #f93; text-decoration: none; margin: 0; padding: 0 }
.leftmenu li a.current { color: #f93; text-decoration: none; margin: 0; padding: 0 }
.leftadd { text-align: center; background-image: url(images/bgsamping.gif); background-repeat: repeat; width: 203px; margin-top: 2px; float: left;}
.leftadd .content {color: #f93; font-size: 10px; margin-left: 3px; margin-top: 5px; margin-bottom: 5px}
.leftadd .content img {margin-top: 0px; border: none; }


#centerspace   { background-color: #fff; margin-right: 3px; width: 510px; float: left }
#centerspace .add { margin-bottom: 3px; float: left}
#centerspace .add img { border: none}
#centerspace .title { color: #999; display: block; background-color: #f0f0f0; width: 510px; height: 38px; font-size: 18px; line-height: 38px; font-weight: bold; float: left; }
#centerspace .title img {margin-left: 25px; margin-right: 10px; margin-top: 9px; }
#centerspace .pageof {color: #999; display: block; background-color: #fff; width: 510px; height: 20px; float: left; border-bottom: 1px #bbb solid; border-top: 1px #bbb solid}
#centerspace .pageof .content { margin-left:57px; margin-right: 10px; text-align: left; font-size: 10px; line-height: 20px; font-weight: bold}
#centerspace .pageof .content a {color: #555; text-decoration: none; }
#centerspace .pageof .content a:hover {color: #999; text-decoration: underline; }
#centerspace .pageof .content a.current {color: #aaa; text-decoration: none; }
#centerspace .notes  { background-color: #C0C0C0; margin: 10px; border-top: 1px double #aaa; border-bottom: 1px double #aaa }
#centerspace .notes .content { font-size: 11px; color: #444; margin: 10px }
#centerspace .notes .content a { font-size: 13px; color: #0000FF; text-decoration: none;  text-align: right;}
#centerspace .notes .content a:hover { font-size: 13px; color: #FF0000; text-decoration: none; text-align: right;  }

#centerspace .notes .content img {border:none; margin-top: 10px; margin-bottom: 10px; margin-right: 10px}
#centerspace .notes li {margin-bottom: 7px}
#centerspace .notes table { margin-left: 5px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; border-collapse: collapse; border-spacing: 0px  }
#centerspace .notes .fastservice table { margin-left: 5px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; border-collapse: collapse; border-spacing: 0px  }
#centerspace .notes .fastservice .text { font-size: 15px; font-weight: bold; margin-top: 3px; margin-bottom: 3px; }
#centerspace .notes .fastservice .text a {  color: #FF0000; font-weight: bold; text-decoration: none; }
#centerspace .notes .fastservice .text a:hover { font-size: 25px; color: #0000FF; text-decoration: none;}
#centerspace .notes .fastservice .text2 { font-size: 12px; font-weight: bold; margin-top: 20px; margin-bottom: 0px; }
#centerspace .notes .fastservice .text3 { font-size: 12px; font-weight: bold; margin-top: 0px; margin-bottom: 20px; }
#centerspace .notes .fastservice .text4 { font-size: 10px; font-weight: normal; margin-top: 10px; margin-bottom: 0px; text-align: left; }
#centerspace .notes .buysell table { margin-left: 5px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; border-collapse: collapse; border-spacing: 0px  }
#centerspace .notes .buysell .data1 { font-size: 24px; font-weight: bold; margin-top: 3px; margin-bottom: 3px; }
#centerspace .notes .buysell .data1 a {  color: #FF0000; font-weight: bold; text-decoration: none; }
#centerspace .notes .buysell .data1 a:hover { font-size: 30px; color: #0000FF; text-decoration: none; }
#centerspace .notes .buysell .data2 { font-size: 15px; font-weight: bold; margin-top: 3px; margin-bottom: 3px; }


/*
#centerspace .kurshariini { background-color: #D8EBFA; border-top: 1px solid #ddd; border-left: 0px solid #ddd; border-right: 0px solid #ddd;  border-bottom: 1px solid #ddd; }
#centerspace .kurshariini .fastservice { width:771px; height:250px; background-color: #DBDBDB; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd;  border-bottom: 1px solid #ddd;  float:left; display:inline; overflow:hidden; }
#centerspace .kurshariini .fastservice table { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; border-collapse: collapse; border-spacing: 0px  }
#centerspace .kurshariini .fastservice .text { font-size: 26px; font-weight: bold; margin-top: 25px; margin-bottom: 25px; }
#centerspace .kurshariini .fastservice .text a {  color: #FF0000; font-weight: bold; text-decoration: none; }
#centerspace .kurshariini .fastservice .text a:hover { color: #0000FF; text-decoration: none;}
*/
#centerspace .notes2  { background-color: #f0f0f0; margin: 2px; border-top: 1px double #aaa; border-bottom: 1px double #aaa }
#centerspace .notes2 .content2  { font-size: 11px; color: #444; margin: 0px }

.cartbtn { float: left; text-align: center; display: block; text-decoration: none; margin-right: 2px;}
.cartbtn a {border: 1px solid #444; color: #444; font-weight: bold; text-decoration: none; background-color: #f0f0f0;  line-height: 20px; display: block; width: 150px; height: 20px; float: left }
.cartbtn a:hover { color: #f0f0f0; text-decoration: none; background-color: #444 }

#centerspace .productdetail { clear:both; color: #444; margin: 0px 10px; padding-bottom: 20px; border-bottom: 1px solid #ddd }
#centerspace .productdetail .content { line-height: 18px; margin: 10px; font-size: 12px; color: #444}
#centerspace .productdetail .content a { color: #555; font-weight: normal; text-decoration: underline}
#centerspace .productdetail .content img {margin-top: 5px; margin-right: 5px}
#centerspace .productdetail .content a img {border:1px #444 solid; margin-top: 5px; margin-right: 5px; background-color: #f0f0f0}
#centerspace .productdetail .content .bigpic { border: 2px #000 solid; border: none}

#centerspace .detail_product { background-color: #fff; margin: 10px; border-top: 1px double #aaa; border-bottom: 1px double #aaa; float: left}
#centerspace .detail_product .content { margin: 10px; color: #333;}
#centerspace .detail_product .leftimage {  margin-right: 10px; width: 130px; padding: 5px; border: 1px #ddd solid; float: left}
#centerspace .detail_product .leftimage img { width: 125px; border: none; }
#centerspace .detail_product .description { float: left}
#centerspace .detail_product .description h1  { margin: 0; padding: 0; color: #555; font-size: 18px; line-height: 24px; }
.listpanjang  { clear:both; color: #444; margin: 0px 10px; padding-bottom: 20px; border-bottom: 1px solid #ddd }
.listpanjang a {color: #888; text-decoration: none; font-weight: normal}
.listpanjang a:hover {color: #000; text-decoration: underline}
.listpanjang .leftimage { text-align: center; width: 100px; float: left; margin-right: 5px; margin-top: 20px }
.listpanjang .leftimage img { width: 90px; margin-top: 5px; margin-left: 5px; margin-right: 5px; border: none; float: left; }
.listpanjang .rightmenu { width: 60px; float: right; margin-left: 5px; margin-top: 20px}
.listpanjang .description  { width: 310px; float: left; margin-top: 20px; }
.listpanjang .description h1 { margin: 0; padding: 0}
.listpanjang .description h1 a  { color: #222; font-size: 14px; font-weight: bold; line-height: 18px; text-decoration: none; }
.listpanjang .description h1 a:hover { color: #000; text-decoration: underline}
.listpanjang .description .videoico a   { background-image: url(images/videoico.gif); display: block; margin: 10px 5px 5px 0; width: 26px; height: 26px; float: left }
.listpanjang .description .videoico a:hover   { background-image: url(images/videoicohvr.gif);  }
.listpanjang .description .price   { color: #fff; font-size: 14px; font-weight: bold; line-height: 26px; background-color: #bbb; text-align: center; display: block; margin: 10px 5px 5px 0; width: 160px; height: 26px; float: left }
.listpanjang .description .links  { margin: 10px 5px 5px 0; width: 120px; height: 26px; float: left }
.listpanjang .description .details {    margin-bottom: 1px }
.listpanjang .description .details a  { color: #fff; font-size: 10px; font-weight: bold; line-height: 12px; text-decoration: none; background-color: #410508; text-align: center; display: block; width: 60px; height: 12px }
.listpanjang .description .details a:hover   { background-color: #e00 }
.listpanjang .rightmenu img {margin-top: 5px; float:right; border: none; margin:none; align:none; background-color: #fff;}
.listpanjang .rightmenu a img {margin-top: 5px; float:right; border: 1px #bbb solid; margin:none; align:none; background-color: #f0f0f0;}
.listpanjang .rightmenu a:hover img {border: 1px #bbb solid; background-color: #ecf7ff}
.listpanjang .description img { text-align: center; margin-left: 25px; margin-top: 25px; padding: 10px; border: 1px #f0f0f0 solid }
.listpendekbaris  { color: #888; margin: 0px 10px;  }
.listpendekbaris .listpendek { width: 162px; border-right: 1px solid #ddd;  border-bottom: 1px solid #ddd; margin-bottom: 5px; margin-top: 5px; float: left }
.listpendekbaris .listpendek .image { width: 60px; margin-right: 10px; margin-top: 20px; height: 100px; float: left }
.listpendekbaris .listpendek img {  margin-left: 5px;  margin-bottom: 5px; border: none; width: 50px; float: left}
.listpendekbaris .listpendek .namabarang { margin-right: 5px; margin-top: 20px; margin-bottom: 10px; width: 85px;  float: left; }
.listpendekbaris .listpendek .namabarang a { color: #444; font-weight: bold; text-decoration: none}
.listpendekbaris .listpendek .namabarang a:hover { color: #444; font-weight: bold; text-decoration: underline}
.listpendekbaris .listpendek .price { color: #333; font-size: 9px; display: block; float: left; width: 90px; height: 10px; line-height: 10px; text-align: left}
.listpendekbaris .listpendek .details { margin-top: 8px; float: left}
.listpendekbaris .listpendek .details a  { margin-left: 6px; color: #fff; font-size: 10px; font-weight: bold; line-height: 12px; text-decoration: none; background-color: #410508; text-align: center; display: block; width: 60px; height: 12px }
.listpendekbaris .listpendek .details a:hover   { background-color: #e00 }
.listpendekbaris .listpendek .cart {  margin-top: 8px;  float: left}
.listpendekbaris .listpendek .cart a  { margin-bottom: 20px; margin-left: 5px; width: 82px; color: #fff; font-size: 10px; font-weight: bold; text-decoration: none; line-height: 12px; background-color: #be533c; text-align: center; display: block; height: 12px }
.listpendekbaris .listpendek .cart a:hover  { background-color: #f90 }
#centerspace hr.cbs-hr                     { border: 0px solid; padding: 0px; margin: 0px; border-top-width: 1px; height: 1px; }
#centerspace table.cbs-main                { width: 487px; margin: 10px; color: #444; font-size: 11px; border: solid 1px #f0f0f0; border-collapse: collapse; border-spacing: 0px  }
#centerspace table.cbs-navigation  { margin-left: 10px; font-size: 11px;  width: 487px; border-spacing: 0px }
#centerspace td.cbs-key-0, td.cbs-value-0, td.cbs-help-0, td.cbs-navigation-0, td.cbs-cell-0 { padding: 3px 5px; border-right: 1px solid #ddd }
#centerspace td.cbs-key-1, td.cbs-value-1, td.cbs-help-1, td.cbs-navigation-1, td.cbs-cell-1 { padding: 3px 5px; text-align: right; border-right: 1px solid #ddd }
#centerspace td.cbs-buttons { text-align: left;   }
#centerspace table.cbs-main tr  { border-bottom: 1px solid #ddd }
#centerspace td.cbs-value-0 { font-size: 9px}
#centerspace td.cbs-key-0 { font-size: 10px}

table.cart { width: 470px; margin: 10px; color: #444; font-size: 10px;  border-collapse: collapse; border-spacing: 0px  }
td.cart-0 { padding-top: 5px; padding-bottom: 5px; }
table.cart tr.cart_title  { text-align: center; height: 40px; font-weight: bold; border-bottom: 1px #000 solid }
table.cart tr.cart_footer  { border: none; text-align: right; }
table.cart input { margin-top: 5px; margin-bottom: 5px; width: 30px; color: #000; font-size: 10px; height: 16px}
table.cart a  { color: #500; font-size: 10px; font-weight: normal; text-decoration: underlined; }
table.cart a:hover { color: #000}
table.cart .cart_add { border: 1px solid #444; float: left; text-align: center; display: block; text-decoration: none; margin-right: 2px; }
table.cart .cart_add a  { color: #444; font-weight: bold; text-decoration: none; background-color: #f0f0f0;  display: block; width: 12px; height: 15px; float: left }
table.cart .cart_add a:hover  { color: #f0f0f0; text-decoration: none; background-color: #444 }

#rightspace  { width: 179px; float: left; }
.searchbox { width: 179px; background-color: white; color: #444; height: 135px; display: block; float: left; margin-bottom: 3px;}
.searchbox .title { margin-top: 15px; margin-left: 10px; margin-right: 10px;   color: #5a050c; font-size: 12px; font-weight: bold}
.searchbox input { margin-left: 10px; width: 125px; border: 1px #7f9db9 solid; color: #aaaaaa}
.searchbox img {margin-right: 10px; border: none}
.searchbox .content { margin: 10px; }
.searchbox .content a { color: #5a050c; font-weight: bold; text-decoration: none}
.searchbox .content a:hover { color: #444}

.infobox { width: 179px; background-image: url(images/rightinfopattern.gif); background-repeat: repeat}
.infobox .title { width: 179px;  height: 38px; color: #5a050c; background-color: #fff;  text-align: left; font-size: 14px; line-height: 38px; font-weight: bold;  }
.infobox .title img { margin-left: 10px; margin-right: 10px; margin-top: 10px}
.infobox .content { margin: 10px 10px 0px 10px; padding-bottom: 10px}
.infobox .content .imagelist { border: none; margin-right: 4px}
.infobox .content a {color: white; text-decoration: none; margin-bottom: 3px; display: block}
.infobox .content a:hover {color: #f96b02}

.support_ol { width: 203px; margin-left: 2px; background-image: url(images/bgsupport_ol.jpg); background-repeat: no-repeat; }
.support_ol .title { width: 203px;  height: 38px; color: #5a050c; background-color: #A9A9A9;  text-align: left; font-size: 14px; line-height: 38px; font-weight: bold;  }
.support_ol .title img { margin-left: 10px; margin-right: 10px; margin-top: 10px}
.support_ol .content { margin: 55px 12px 0px 0px; padding-bottom: 10px; text-align: right; } /*margin:top right left button*/
.support_ol .content .imagelist { border: none; margin-right: 4px}
.support_ol .content a {color: white; text-decoration: none; margin-bottom: 3px; display: block}
.support_ol .content a:hover {color: #f96b02}

.fxfactorybox { width: 179px; background-image: url(images/bgsamping.gif); background-repeat: repeat}
.fxfactorybox .title { width: 179px;  height: 38px; color: #5a050c; background-color: #A9A9A9;  text-align: left; font-size: 14px; line-height: 38px; font-weight: bold;  }
.fxfactorybox .title img { margin-left: 10px; margin-right: 10px; margin-top: 10px}
.fxfactorybox .content { margin: 10px 2px 0px 0px; padding-bottom: 10px}
.fxfactorybox .content .imagelist { border: none; margin-right: 4px}
.fxfactorybox .content a {color: white; text-decoration: none; margin-bottom: 3px; display: block}
.fxfactorybox .content a:hover {color: #f96b02}

/******* formasi footer website **********/
#footer {
        width: 898px;
        float: left;
        background-image: url(images/bgsamping.gif);
        background-repeat: repeat;}
#footer .content,
#footer .content .a {margin: 10px; text-align: center; color: #ddd} /* © Copyright 2007, Corbuzier Magic Shop. All Right Reserved. */
#footer .content a {text-decoration: none; color: black}             /* FAQ | Company Info | Shipping & Returns */
#footer .content a:hover {text-decoration: underline; color: #f93}  /* garis batas */

/******* kondisi jika a href ke valas changer **********/
#jb3      { font-weight: bold; background-color: #aaa; }
#jb3 a          { color: #400000; text-decoration:none; font: bold 16px/28px Arial, Helvetica, sans-serif; background-color: #699A9A; background-image: none; text-align: center; padding: 0; display: block;  vertical-align: middle }
#jb3 a:hover    { background-color: #F5FE89; background-image: none; text-decoration:none; background-position: 0 0; border-bottom: 2px solid #eee   }

#jb4      { font-weight: bold; background-color: #aaa; }
#jb4 a          { color: #0000FF; text-decoration:none; font: bold 16px/28px Arial, Helvetica, sans-serif; background-color: #4BB163; background-image: none; text-align: center; padding: 0; display: block;  vertical-align: middle }
#jb4 a:hover    { background-color: #FF33DB; background-image: none; text-decoration:none; background-position: 0 0; border-bottom: 2px solid #eee   }