/* Table of Contents
==================================================
    #Base Grid - 12 column (Default / for Grid 1200px )
    #Tablet (for Grid 769px - 960px)
    #Tablet (for Grid 481px - 768px)
    #Mobile (for Grid 320px - 480px)



/********************************************************************************************* 

1.  Grid 960px

*********************************************************************************************/

.container {
    margin:0 auto;
    width: 960px;
    position: relative;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
    display:inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
.alpha {
    margin-left: 0;
}
.omega {
    margin-right: 0;
}
.beta {
    margin-left: 0;
    margin-right: 0;
}


.container .grid-1 {
    width:60px;
}
.container .grid-2 {
    width:140px;
}
.container .grid-3 {
    width:220px;
}
.container .grid-4 {
    width:300px;
}
.container .grid-5 {
    width:380px;
}
.container .grid-6 {
    width:460px;
}
.container .grid-7 {
    width:540px;
}
.container .grid-8 {
    width:620px;
}
.container .grid-9 {
    width:700px;
}
.container .grid-10 {
    width:780px;
}
.container .grid-11 {
    width:860px;
}
.container .grid-12 {
    width:940px;
}

    
/********************************************************************************************* 

2.  Grid 720px (mediaqueries)

*********************************************************************************************/

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

    .container .grid-1 {
        width:40px;
    }
    .container .grid-2 {
        width:100px;
    }
    .container .grid-3 {
        width:320px;
    }
    .container .grid-4 {
        width:220px;
    }
    .container .grid-5 {
        width:280px;
    }
    .container .grid-6 {
        width:340px;
    }
    .container .grid-7 {
        width:400px;
    }
    .container .grid-8 {
        width:460px;
    }
    .container .grid-9 {
        width:520px;
    }
    .container .grid-10 {
        width:580px;
    }
    .container .grid-11 {
        width:640px;
    }
    .container .grid-12 {
        width:700px;
    }

    /* header & main menu */
    #header {
        height: 80px !important;
    }

    #header #logo {
        width: 70px;
        height: 60px;
    }

    #header #main_menu {
        width: 200px;
    }
        #header #main_menu .main_tit {
            margin-top: 10px;
        }

        #header #main_menu .menu {
            position: absolute;
            display: none;
            top: 80px;
            right: 12px;
            width: 120px;
            background: #fff;
            border: 1px solid #ccc;           
            z-index: 999;
        }

        #header #main_menu .menu li {
            width: 100%;
            text-align: center;
        }



        #header #main_menu .user_container {
            width: 200px;
            top: 54px;
            right: 90px;
        }


       #main_menu #mob_menu {
            display: block;
        }

    /* ////////////////////////// */  

    /* dot_list ////////// */
    .container .dot_list li.first span {
        font-size: 14px !important;
    }  

    /* History */
    .container .history_details li .hd_date,
    .container .history_details li .hd_desc, 
    .container .history_details li .hd_ap, 
    .container .history_details li .hd_lp {        
        margin-right: 5px;
    }

    .container .history_details li .hd_desc {
        width: 191px;
    }

    .container .history_details li .hd_ap, 
    .container .history_details li .hd_lp {
        width: 80px;
        text-align: right;
    }

    .container .history_details li .hd_amount {
        width: 94px;
        text-align: right;
    }

    /* Redeem */

    .container .redeem_details li .rd_desc {
        width: 130px;
        margin-right: 5px;
        margin-left: 24px;
    }

    .container .redeem_details li .rd_price,
    .container .redeem_details li .rd_point,
    .container .redeem_details li .rd_amount {
        width: 94px;
        margin-right: 5px;
        text-align: right;
    }

    .container .redeem_details li .rd_qty {
        width: 60px;
    }

    .container .redeem_details li .rd_button {
        width: 60px;
    }


    /* ////////////////////////// */  

    /* PROFILE */
    .container .profile_list li.grid-5 {
        width: 100%;
    }

    .container .profile_list li.grid-10 {
        width: 100%;
    }

    .container .edit_box .grid-5 input[type=text]{
        width: 280px;
    }

    .container .edit_box .grid-10 input[type=text] {
        width: 280px;
    }

    .container .edit_box input[type=password] {
        width: 280px;
    }

    /* ////////////////////////// */  

    /* others */
    .general_block.container p {
        padding: 0 0px;
    }
}
    

/********************************************************************************************* 

3.  Grid lt 720px / Mobile (mediaqueries)

*********************************************************************************************/
    
@media only screen and (max-width: 719px) {
    .container {
        width: 94%;
    }
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
        width:100%;
        margin-left: 0px;
        margin-right: 0px;
    }
    .alpha {
        margin-left: 0;
    }
    .omega {
        margin-right: 0;
    }
    .beta {
        margin-left: 0;
        margin-right: 0;
    }
    .container .grid-1, .container .grid-2, .container .grid-3, .container .grid-4, .container .grid-5, .container .grid-6, .container .grid-7, .container .grid-8, .container .grid-9, .container .grid-10, .container .grid-11, .container .grid-12 {
        width:100%;
    }


    /* header & main menu */
    #header {
        height: 80px !important;
    }

    #header #logo {
        width: 58px;
        height: 50px;
        margin: 14px 5px 14px 0;
    }

    #header #main_menu {
        width: 150px;
    }
        #header #main_menu .main_tit {
            width: 100px;
            height: 20px;
            margin: 10px 5px 10px 0;
        }



        #header #main_menu .menu {
            position: absolute;
            display: none;
            top: 80px;
            right: 12px;
            width: 120px;
            background: #fff;
            border: 1px solid #ccc;            
            z-index: 999;
        }

        #header #main_menu .menu li {
            width: 100%;
            text-align: center;
        }



        #header #main_menu .user_container {
            display: none;
            width: 140px;
            height: 26px;
            top: 48px;
            right: 95px;
            text-align: right;
            font-size: 12px;
            z-index: 994;
            background: #ffdddd;
        }

            #header #main_menu .user_container a {
                margin-right: 5px;
            }

            #header #main_menu .user_container .logout {
                position: absolute;
                top: -34px;
                right: 10px;
            }

        #main_menu #mob_menu {
            display: block;
            font-size: 12px;
            top: 40px;
            right: 5px;
            padding: 7px 28px 5px 10px;
        }

    /* ////////////////////////// */  
    
    /* PROFILE */
    .container .profile_list li.grid-5 {
        width: 100%;
    }

    .container .profile_list li.grid-10 {
        width: 100%;
    }

    .container .edit_box .grid-5 input[type=text]{
        width: 200px;
    }

    .container .edit_box .grid-10 input[type=text] {
        width: 200px;
    }

    .container .edit_box input[type=password] {
        width: 200px;
    }

    .profile_list .display_label,
    .profile_list .display_value {
        font-size: 14px;
    }

    /* ////////////////////////// */  

    /* others */
    .general_block.container p {
        padding: 0 0px;
    }

}





/********************************************************************************************* 

4.  Responsive Image

*********************************************************************************************/


img.scale, img.responsive {
    max-width: 100%;
    height: auto;
}

img.original {    
    display: block;
    width: 100%;
    height: auto;
}