/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 12, 2016, 5:13:31 PM
    Author     : Ping
*/

@media (max-width:1199px){
    .gridL0 { display: none; }
    .gridL1 { width: 8.333333%; }
    .gridL2 { width: 16.666666%; }
    .gridL3 { width: 25% }
    .gridL4 { width: 33.333333%; }
    .gridL5 { width: 41.666666%; }
    .gridL6 { width: 50% }
    .gridL7 { width: 58.333333%; }
    .gridL8 { width: 66.666666%; }
    .gridL9 { width: 75% }
    .gridL10 { width: 83.333333%; }
    .gridL11 { width: 91.666666%; }
    .gridL12 { width: 100% }

    .removeL { display: none; }

    .pullleft .page { margin-left: -270px; }

    .pullleft .header {
        left: -270px;
        right: 270px;
    }

    .header {
        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    }

    .header .logo {
		float: none;
		margin: 0;
		padding: 4px 15px; }

    .header .underline { display: none; }

    .header .fa-bars { display: none; }

    .header .menu {
        position: fixed;
        left: 0;
		right: 0;
        bottom: 30px;
        width: 100%;
        border-left: none;
        background: #f1f1f1;
        z-index: 1;
        float: none;
		border-top: 1px #ccc solid;
		text-align: center; 
    }

    .pullleft .menu { right: 0; }

    .menu > li {
        height: 68px;
		width: 20%;
		overflow: hidden; }

    .fixed .menu > li > a, .menu > li > a { line-height: 1; height: 80px; padding: 0; font-size: 12px; }

    .menu > li+li > a { border-top: none; }

    .menu > li.narrow > a { padding: 0; }

    .menu > li > a img { display: none; }

    .menu > li > a span { padding: 6px 0 3px; line-height: 30px; display: block; font-size: 24px; }

    .menu > li > a span i {
        width: 30px;
        color: #cd2027;
    }

    .menu > li > div {
        position: static;
        display: none;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

    .menu > li.hover > div { display: block; }

    .menu > li > div span {
        top: 43px;
        right: 50%;
    }

    .menu > li > div ul li {
        width: 100%;
        float: none;
    }

    .menu > li > div ul li a {
        padding: 0 30px;
        line-height: 50px;
        text-align: left;
    }

    .reserved-area { height: 55px; }

    .social-links a { margin-top: 0; }
	
	.footer {
		position: fixed;
		padding: 0; }

    .copyright {
        float: none;
        text-align: center;
		padding: 6px 0;
    }
}

@media (max-width:767px){
    .gridM0 { display: none; }
    .gridM1 { width: 8.333333%; }
    .gridM2 { width: 16.666666%; }
    .gridM3 { width: 25% }
    .gridM4 { width: 33.333333%; }
    .gridM5 { width: 41.666666%; }
    .gridM6 { width: 50% }
    .gridM7 { width: 58.333333%; }
    .gridM8 { width: 66.666666%; }
    .gridM9 { width: 75% }
    .gridM10 { width: 83.333333%; }
    .gridM11 { width: 91.666666%; }
    .gridM12 { width: 100% }

    .removeM { display: none; }

    .social-links { float: left; }

    .social-links a { margin-top: 31px; }

    .how-it-works { margin: 35px 0 -30px; }

    .how-it-works .space { display: none; }
	
	.dataTables_wrapper { margin: 0 -15px; }
	.dataTable thead { display: none; }
	.dataTable tbody tr {
		position: relative;
		display: block;
		border-top: 1px #ccc solid;
		margin-bottom: 15px;
		padding-bottom: 45px;
		background: #fff;
	}
	.dataTable tbody tr.odd td { background: #fff !important; }
	.dataTable tbody tr.even td { background: #fff !important; }
	.dataTable tbody tr td {
		display: block;
		text-align: right;
		overflow: hidden;
		padding: 0 15px !important;
		line-height: 21px;
	}
	.dataTable tbody tr .col-date, .dataTable tbody tr .col-date2 {
		line-height: 30px;
		text-align: left;
		color: #999;
		font-size: 12px;
	}
	.dataTable tbody tr .col-date { padding-bottom: 15px !important; }
	.dataTable tbody tr .col-action {
		position: absolute;
		top: -1px;
		right: 0;
		padding: 0 0 0 6px !important;
	}
	.dataTable tbody tr td:before {
		font-style: italic;
		color: #666;
		font-size: 12px;
		display: block;
		float: left;
		text-align: left;
	}
	.dataTable tbody tr .col-snapscan:before { content: '#SnapScan'; }
	.dataTable tbody tr .col-charge:before { content: 'Charges :'; }
	.dataTable tbody tr .col-start:before { content: 'Collection Date (after 12PM)'; }
	.dataTable tbody tr .col-expiry:before { content: 'Collection Expiry Date'; }
	.dataTable tbody tr .col-note:before { content: 'Note'; }
	.dataTable tbody tr .col-box-no:before { content: 'Box #'; }
	.dataTable tbody tr .col-box-pin:before { content: 'PIN #'; }
	.dataTable tbody tr .col-box-expiry:before { content: 'Box Expiry Date'; }
	.dataTable tbody tr .col-attachment {
		position: absolute;
		bottom: 0;
		left: 9px;
		right: 9px;
		padding: 0 !important; }
	.dataTable tbody tr .col-attachment ul {
		display: flex;
		list-style: none;
		padding: 0 !important;
		margin: 0 3px;
	}
	.dataTable tbody tr .col-attachment ul li { flex: 1; }
	.dataTable tbody tr .col-attachment ul li a {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 1px;
		padding-left: 30px;
		line-height: 24px;
		border: 1px #fff;
		background: #f1f1f1;
		font-size: 12px;
		text-align: left;
		border: 1px #ccc solid;
		text-decoration: none;
		position: relative;
	}
	.dataTable tbody tr .col-attachment ul li a:before {
		content: '\f0c6';
		font-family: fontAwesome;
		position: absolute;
		background: #ccc;
		top: 0;
		left: 0;
		line-height: 26px;
		width: 24px;
		text-align: center;
	}
	.dataTable tbody tr .col-description {
		padding-bottom: 15px !important;
		text-align: left;
	}
	.dataTable tbody tr .col-debit:before { content: 'CHARGES (debit)'; }
	.dataTable tbody tr .col-credit:before { content: 'PAID (credit)'; }
	.dataTable tbody tr .col-no:before { content: 'No'; }
	.dataTable tbody tr .col-start2:before { content: 'Start Date'; }
	.dataTable tbody tr .col-expiry2:before { content: 'Expiry Date'; }
	.dataTable tbody tr .col-amount:before { content: 'Amount'; }
	.dataTable tbody tr .col-status:before { content: 'Status'; }
}

@media (max-width:567px){
    .gridS0 { display: none; }
    .gridS1 { width: 8.333333%; }
    .gridS2 { width: 16.666666%; }
    .gridS3 { width: 25% }
    .gridS4 { width: 33.333333%; }
    .gridS5 { width: 41.666666%; }
    .gridS6 { width: 50% }
    .gridS7 { width: 58.333333%; }
    .gridS8 { width: 66.666666%; }
    .gridS9 { width: 75% }
    .gridS10 { width: 83.333333%; }
    .gridS11 { width: 91.666666%; }
    .gridS12 { width: 100% }

    .removeS { display: none; }

    .copyright span { display: none; }
    .copyright a { display: inline-block; }

    .app-links {
        text-align: center;
        float: none;
        margin: 0;
    }
    .app-links a {
        float: none;
        display: inline-block;
        margin: 25px 0;
    }

    .social-links {
        float: none;
        margin: 0;
        text-align: center;
    }

    .social-links a {
        float: none;
        display: inline-block;
        margin: 0 0 31px;
    }

    .how-it-works.active .pointleft {
        transform: scale(1) rotate(0deg);
        -moz-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
    }

    .how-it-works.active .pointright {
        transform: scale(1) rotate(0deg);
        -moz-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
    }

    .signup-link a {
        float: none;
        text-align: center;
    }

    .signup-link img {
        float: none;
        margin: 0 auto;
    }
}

@media (max-width:480px) {
	.fixed .menu > li > a, .menu > li > a { font-size: 9px; }
}