/* 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;
}