
/************************************************************************************
 768 x 1024 (iPad - Portrait)
*************************************************************************************/

@media screen and (max-width: 960px) {

#wrapper{width:741px;}

/* > CONTENT < */	
.content{width:735px;}
.header{width:735px;}
.center{width:328px;}
.sub-menu-nav ul li a {padding: 0 3px 0 3px;}
.sub-menu-nav ul li:last-child{border-right:none;}
.right{width:210px;}
.tab-nav li a {padding:2px 4px 2px 4px!important;}
/* sales-tab */
.sales-tab{width:152px;}
.sales-choose input[type="text"]{width:128px;}
.sales-choose select {width:155px;}
.ui-datepicker {width: 15.3em;} /* Date picker width */
/* report-tab */
.report-tab{width:725px;}
.report-cell-02 input[type="text"] {width:140px;}
.report-cell-02 input[type="button"] {width:86px;}
.report-cell-02 select{width:140px;}
.report-cell-03 input[type="text"] {width:185px;}
.report-cell-03 input[type="button"] {width:105px;}
.report-cell-03 select{width:190px;}
.report-display-01{width:64px;}
.report-display-02{width:64px;}
.report-display-03{width:64px;}
.report-display-04{width:64px;}
.report-display-05{width:64px;}
/* item list */
.popupbox {width:715px;}
.cart-coloum-01{width:30px!important;}
.cart-coloum-02{width:35px!important;}
/* employee */
.employee-col-02{width:682px; overflow-x:scroll;}
/* Application employee */
#form-content{width:735px!important;}
#form-wrapper{width:735px!important;}
.step{width:735px!important;}
#steps form p{width:525px!important;}
.form-display-01{width:525px!important;}
#steps form legend{width:735px!important;}
#steps{width:600px;}

#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    width: 260px!important;
}
#navigation ul li a{padding: 0px 26px!important;}


/* > FOOTER < */
.footer{ width:735px;}
#chart1{ font-size:12px; color:#FFFFFF; width:300px}

/* > LOGIN < */
#login-wrapper{
	width:395px; 
	height:auto; 
	margin:0 auto;
}
.dashboard-cell {
	margin:12px 30px;
}

}

/************************************************************************************
smaller than 524 x 758  (2)
*************************************************************************************/

@media screen and (max-width: 758px) {

#wrapper{width:580px;}
.header{width:580px;}

/* > CONTENT < */
.content{width:580px;}
.center{width:328px; float:right;}
.right{width:210px; float:left; margin-top:10px;}
.left{width:210px; float:left;}
/* > report-tab < */
.report-tab{width:570px;}
.report-cell-02 input[type="text"] {width:110px;}
.report-cell-02 input[type="button"] {width:56px;}
.report-cell-02 select{width:100px;}
.report-cell-03 input[type="text"] {width:138px;}
.report-cell-03 input[type="button"] {width:83px;}
.report-cell-03 select{width:150px;}
.report-display-01{width:50px;}
.report-display-02{width:50px;}
.report-display-03{width:50px;}
.report-display-04{width:50px;}
.report-display-05{width:50px;}
/* item list */
.popupbox {width:550px;}
/* employee */
.employee-col-02{width:528px; overflow-x:scroll;}
/* Application employee */
#form-content{width:580px!important;}
#form-wrapper{width:580px!important;}
.step{width:580px!important;}
#steps form p{width:405px!important; margin-left:72px!important;}
.form-display-01{width:405px!important; margin-left:72px!important;}
#steps form legend{width:580px!important;}

#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    width: 200px!important;
}
#navigation ul li a{padding: 0px 8px!important;}


/* > FOOTER < */
.footer{ width:580px;}

/* > Dashboard < */
.dashboard-cell {
	margin:7px 7px;
}


}

/************************************************************************************
smaller than 292 > 524  (3)
*************************************************************************************/

@media screen and (max-width: 524px) {

#wrapper{width:292px;}

}

/************************************************************************************
smaller than 210 > 292  (4)
*************************************************************************************/

@media screen and (max-width: 292px) {

#wrapper{width:210px;}

}