/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width: 1100px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column                      { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 240px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 840px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }

    #wrapper { margin: 0; padding: 0; width: 100%; min-height: 100%; position: relative; }

    #header { width: 100%; margin: 10px 0; float: left; }

    #maincontent, #sidebar  { position: relative; }

    .boxlogo { width: 235px; float: left; }
    .logo { margin-top: 10px; }
    .desc-logo { font-size: 11px; color: #f26b24; display: block; width: 100%; text-align: center; margin: 5px 0 20px 0; }

    .nav { margin: 0; padding: 0; width: 840px; float: left; position: relative; }
    .nav li { margin: 0 10px 0 0; padding: 0; float: left; width: 200px; }
    .nav li:last-child { margin: 0; }
    .nav li a { display: block; width: 100%; }
    .nav li a div { display: block; width: 200px; height: 100px; }
    .nav li a:hover div.bread, .nav li a.active div.bread { background: url(../images/nav/bread-hover.png) no-repeat; }
    .nav li a:hover div.cake, .nav li a.active div.cake { background: url(../images/nav/cake-hover.png) no-repeat; }
    .nav li a:hover div.cookies, .nav li a.active div.cookies { background: url(../images/nav/cookies-hover.png) no-repeat; }
    .nav li a:hover div.gift, .nav li a.active div.gift { background: url(../images/nav/gift-hover.png) no-repeat; }

    .boxarea { width: 220px; float: left; padding: 10px; margin-bottom: 10px; border: 1px solid #969696; text-align: center; }

    .segoe { font-family: Segoe; color: #f26b24; }

    .title { font-size: 18px;}

    .smallfont { font-size: 10px;}

    .min { font-size: 11px; }

    .content { width: 100%; float: left; margin: 0; }

    .list-product { margin: 0 10px 0 0; float: left; width: 200px; }
    .list-product li { width: 100%; height: 100px; float: left; margin: 0 0 10px 0; }
    .list-product li div.boximg { border: 1px solid #969696; float: left; width: 70px; height: 70px; }
    .list-product li div.boximg:hover { border: 1px solid #eee;}
    .list-product li div.boximg a { display: block; }
    .list-product li div.boximg a img { width: 70px; }
    .list-product li div.text { float: left; width: 123px; padding: 0 0 0 5px; }
    .list-product li div.text p.name a { color: #f26b24; text-decoration: none; font-size: 13px; } 
    .list-product li div.text p.name a:hover { color: #42423d; }
    .list-product li div.text div.price { width: 100%; float: left; font-size: 11px; }
    .list-product li div.text div.price p { float: left; width: 85px; margin-right: 5px; margin-bottom: 0; }
    .list-product li div.text div.price p img { margin: 0 5px 0 0; }
    .list-product li div.text div.price input[type="text"] { 
        float: left; width: 8px; height: 8px; 
        padding: 3px; margin: 0;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        -o-border-radius: 0;
        box-shadow: inset 0px 0px 2px #ccc;
        -moz-box-shadow: inset 0px 0px 2px #ccc;
        -webkit-box-shadow: inset 0px 0px 2px #ccc;
        -o-box-shadow: inset 0px 0px 2px #ccc;
        font-size: 11px;
        color: #f26b24;
    }
    .list-product li div.text div.addinfo { width: 100%; float: left; font-size: 10px;border-left:#fdd250 7px solid;padding-left:3px; }
    .list-product li div.text div.addinfo p { float: left; width: 85px; margin-right: 5px; margin-bottom: 0;color:#70706B; }

    .fullsize-product { width: 100%; }
    .fullsize-product li { width: 200px; min-height: 72px; margin: 0 10px 10px 0; }

    .cake li { height: 90px; }

    .more { width: 100%; margin: 0; text-align: center; }
    .more a { color: #f26b24; }

    .note { width: 153px; float: left; margin: 0 0 10px 0; }
    .note table { border: 1px solid #969696; border-bottom: 0; margin: 0; padding: 10px 0 0 0; width: 151px; float: left; display: block; }
    .note table tr td { padding: 0 5px; text-align: right; font-size: 11px; line-height: 16px; width: 55px; }
    .note table tr td.orange { text-align: left; color: #f26b24; }
    .foot-note { width: 153px; height: 22px; background: url(../images/back-note.png) bottom no-repeat; float: left; }

    .boxdaftar { margin: 0 0 0 80px; }
    .loginbox { padding: 10px 0; border-bottom: 1px solid #e8ddd0; width: 80%; }
    .loginbox p.title { margin: 0 0 30px 0; }
    .loginbox table { margin: 20px 0 0 0; width: 100%; }
    .loginbox table tr td.label { width: 180px; }
    .loginbox table tr td input[type="text"], 
    .loginbox table tr td input[type="password"], 
    .loginbox table tr td textarea { border: 1px solid #f27330; margin: 0 0 5px 0; }

    .loginbox table tr td textarea { resize: none; }

    .boxlistorder { margin: 10px 0; text-align: left; }
    .boxlistorder table.boxone { margin: 0; }
    .boxlistorder table.boxone tr td { width: 100px; padding: 2px; }
    .boxlistorder table.right, .boxlistorder table.boxone tr td.right { text-align: right; }
    .boxlistorder table.bordertop { border-top: 1px solid #969696; margin-top: 5px; }

    #myscroll {
        width: 220px; height: 122px;
        overflow: auto;
        position: relative; margin: 0; padding:0 0 10px 0;
    }
    .scrollgeneric {
        line-height: 1px; font-size: 1px;
        position: absolute; top: 0; left: 0;
    }
    .vscrollerbase { width: 11px; border: 1px solid #b4b4b4; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
    .vscrollerbar  { width: 11px; height: 11px !important; background: url(../images/bullet.png) no-repeat; cursor: pointer; position: absolute;  }
    .vscrollerbar, .hscrollerbar { padding: 0px; z-index: 2; }

    .konfirmasi { border: 0; width: 83%; }
    .konfirmasi p.title { margin: 0 0 10px 0; }
    .konfirmasi form table { border-top: 1px solid #e8ddd0; padding: 20px 0; margin: 0; width: 100%; }
    .konfirmasi form table.borderbottom { border-bottom: 1px solid #e8ddd0; }
    .konfirmasi form div.datapesanan table { border: 0; }
    .konfirmasi form div.datapesanan table thead, .success div.box div.datapesanan table thead { border-top: 1px solid #e8ddd0; border-bottom: 1px solid #e8ddd0;  }
    .konfirmasi form div.datapesanan table tbody, .success div.box div.datapesanan table tbody { border-bottom: 1px solid #e8ddd0; }
    .konfirmasi form div.datapesanan table tfoot, .success div.box div.datapesanan table tfoot { color: #f27330;  }
    .konfirmasi form div.datapesanan table tfoot i, .success div.box div.datapesanan table tfoot i { font-size: 10px; color: #4b4b4b; }
    .konfirmasi form div.datapesanan table tr td.jumlah { width: 200px; }
    .konfirmasi form div.datapesanan table tr td.harga { width: 100px; }
    .konfirmasi form div.datapesanan table tr td.right, .success div.box div.datapesanan table tr td.right { text-align: right;}
    .konfirmasi form div.datapesanan input[type='submit'] { float: right; }

    .konfirmasi form table tr td input[type="text"].jam, 
    .konfirmasi form table tr td input[type="text"].kota { width: 100px; float: left; margin-right: 10px; } 
    .konfirmasi form table tr td input[type="text"].kota { width: 150px; }
    .konfirmasi form table tr td span { font-size: 11px; font-style: italic; }

    .success p.noorder { font-size: 22px; }
    .success div.box { border-top: 1px solid #e8ddd0; padding: 10px 0; width: 100%; }
    .success div.box table { margin: 10px 0 0 0; }
    .success div.box table.orderid { margin: 0; }
    .success div.box div.datapesanan { margin: 20px 0 0 0; }

    .terms { width: 600px; }
    .terms p { margin: 0 0 20px 0; }
    .terms p.judul { margin: 0 0 10px 0; }
    .terms p.title { border-bottom: 1px solid #e8ddd0; padding: 0 0 10px 0; margin: 0 0 15px 0; }

    .decimal { list-style-type: decimal; margin: 0 0 0 20px; }
    .decimal li p.judul { margin: 0 0 5px 0; }
    .decimal li p.black, .decimal li ul.black { color: #4b4b4b; }
    .decimal li ul.black li { font-size: 12px; }
    .decimal li p a { text-decoration: underline; }

    .poin { margin-left: 35px; }

    .noborder { border: 0; }
    .orange { color: #f26b24; }

    .footer { width: 100%; margin: 10px 0; text-align: center; font-size: 11px; }
    .footer p { width: 100%; float: left; margin: 0; }
    .footer ul.privacy { width: 100%; margin: 0 auto; }
    .footer ul.privacy li { border-right: 1px solid #444; margin: 0; padding: 0 5px; text-align: center; width: 100%; }
    .footer ul.privacy li:last-child { border-right: 0; } 
    .footer ul.privacy li a:hover { color: #f26b24; text-decoration: none; }



    @media only screen and (min-width: 960px) and (max-width: 1099px) {
        .container                                  { width: 960px; }

        .container .four.columns                    { width: 220px; }
        .container .fourteen.columns                { width: 730px; }

        .nav { width: 723px; }
        .nav li { width: 170px; }
        .nav li a div { width: 170px; }

        .list-product { width: 170px; }
        .list-product li div.boximg { width: 40px; height: 40px; }
        .list-product li div.boximg a img { width: 40px; }

        .fullsize-product { width: 100%; }
        .fullsize-product li { width: 170px; min-height: 72px; margin: 0 10px 10px 0; }

        .cake li { height: 122px; }

        .boxarea { width: 200px; padding: 5px; }

        #myscroll { width: 200px; }

    }




/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }

        .container .four.columns                    { width: 100%; }
        .container .fourteen.columns                { width: 100%; }

        .nav { width: 100%; }
        .nav li { width: 183px; }
        .nav li a div { width: 183px; }

        .list-product { width: 190px; }
        .list-product li div.boximg { width: 70px; height: 70px; }
        .list-product li div.boximg a img { width: 70px; }

        .boxarea { width: 300px; }

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }