/* 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 1024px (mediaqueries)
*********************************************************************************************/
@media only screen and (min-width: 960px) and (max-width: 1279px) {
.org_ass img {
position: relative;
top: -2px;
}
}
/*********************************************************************************************
3. 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;
height: 80px;
}
#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 {
width: 70px;
}
.container .history_details li .hd_desc {
width: 80px;
}
.container .history_details li .hd_refno {
width: 80px;
}
.container .history_details li .hd_remark {
width: 80px;
}
.container .history_details li .hd_ap,
.container .history_details li .hd_lp {
width: 60px;
text-align: right;
}
.container .history_details li .hd_amount {
width: 80px;
text-align: right;
}
.container .history_details li .hd_date,
.container .history_details li .hd_desc,
.container .history_details li .hd_ap,
.container .history_details li .hd_lp,
.container .history_details li .hd_amount {
margin-right: 8px;
}
/* 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;
}
.org_ass img {
position: relative;
top: -2px;
}
}
/*********************************************************************************************
4. 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;
height: 80px;
}
#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 {
width: 130px;
height: 26px;
top: 48px;
right: 105px;
text-align: right;
font-size: 12px;
z-index: 994;
}
#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]{
font-size: 14px;
width: 230px;
}
.container .edit_box .grid-10 input[type=text] {
font-size: 14px;
width: 230px;
}
.container .edit_box input[type=password] {
font-size: 14px;
width: 230px;
}
.container .profile_list .display_label,
.container .profile_list .display_value {
font-size: 14px;
min-width: 90px;
padding: 0 5px 0 0;
}
/* ////////////////////////// */
/* others */
.anno_block.container .ass_sayhi {
width: 260px;
margin: 15px auto -30px auto;
}
.org_ass img {
position: relative;
top: -4px;
}
/* login */
.login_block.container .ass_sayhi {
width: 260px;
margin: 15px auto -26px auto;
}
.container .login_box {
width: 260px;
padding: 20px 10px;
}
.container .login_box input[type=text],
.container .login_box input[type=password] {
width: 190px;
padding: 10px 5px 10px 65px;
}
.container .login_box input[type=submit] {
width: 100%;
}
.container .login_box fieldset {
width: 100%;
}
.login_block.container .shadow {
width: 100%;
margin: 30px auto;
}
/* basic */
.general_block.container {
padding: 30px 0;
}
.general_block.container p {
font-size: 14px;
line-height: 28px !important;
padding: 0 0px;
}
.container h2 {
font-size: 32px;
line-height: 40px;
margin-bottom: 10px;
}
.container h3 {
font-size: 18px;
line-height: 28px;
padding-bottom: 5px;
}
.container .basic_box {
padding: 20px;
}
#footer p.container {
font-size: 12px;
}
#back-to-top, .touch-device #back-to-top:hover {
right: 10px !important;
}
/* dot_list ////////// */
.container .dot_list li {
font-size: 12px;
}
.container .dot_list li.first span {
font-size: 14px !important;
}
/* point details */
.container .point_details li .date {
width: 70px;
padding: 0 5px;
}
/* history */
.container .history_details li.first {
height: 1px;
padding: 0;
}
.container .history_details li.first span {
display: none;
}
.container .history_details li {
height: auto;
margin: 10px 0 10px 15px;
padding: 5px 10px;
background-image: none !important;
}
.container .history_details li:before {
left:-25px;
}
.container .history_details img.clip {
left:-14px;
}
.container .history_details li span {
display: block;
width: 100% !important;
margin: 0 !important;
text-align: left !important;
line-height: 18px;
padding: 3px 0!important;
top: 0!important;
}
.container .history_details li span b {
font-weight: bold;
}
.container .history_details li.viewmore:before {
top: 16px;
left: -24px;
}
.container .history_details .more {
left: -25px;
}
.container .history_details li:hover {
background: #F0F0F0;
}
/* Redeem */
.container .redeem_details li.first {
height: 1px;
padding: 0;
}
.container .redeem_details li.first span {
display: none;
}
.container .redeem_details li {
height: auto;
margin: 10px 0 10px 15px;
padding: 5px 10px;
}
.container .redeem_details li:before {
left:-25px;
}
.container .redeem_details img.clip {
left:-14px;
}
.container .redeem_details li span {
display: block;
width: 100% !important;
margin: 0 !important;
text-align: left !important;
line-height: 18px;
padding: 3px 0!important;
top: 0!important;
}
.container .redeem_details li span b {
font-weight: bold;
}
.container .redeem_details li.viewmore:before {
top: 16px;
left: -24px;
}
.container .redeem_details .more {
left: -25px;
}
.container .redeem_details input.qty {
height: 18px;
}
.container .redeem_details li:hover {
background: #F0F0F0;
}
/* ////////////////////////// */
}
/*********************************************************************************************
5. Responsive Image
*********************************************************************************************/
img.scale, img.responsive {
max-width: 100%;
height: auto;
}
img.original {
display: block;
width: 100%;
height: auto;
}