/************************************************************************************
smaller than 1280 / 1920
*************************************************************************************/
@media screen and (max-width: 1920px) {

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#LeaveRequest1 {
		width: 20%;
	}

	#LeaveRequest2 {
		width: 20%;
	}

	#LeaveRequest3 {
		width: 10%;
	}

	#LeaveRequest4 {
		width: 50%;
        padding-bottom:5px;
	}

    #divMain {
        float:left;
        padding:1px;
    }

    /*#HomePage1 {
        width: auto;
		float: left;
        margin: 0px;
        padding: 0px 5px 0px 0px;
    }*/

    #HomePage2 {
        width: 100%;
		float: none;
        margin: 0px;
        padding: 0px;
    }

    /*#HomePage3 {
        width: auto;
		float: left;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    #HomePage4 {
        width: 32%;
		float: left;
        margin: 0px;
        padding: 0px 2px 0px 0px;
    }*/

    #HomePage3 {
        width: 33%;
		float: left;
        margin: 0px;
        padding: 0px;
    }

    #HomePage4 {
        width: 33%;
		float: left;
        margin: 0px;
        padding: 0px;
    }

    #HomePage5 {
        width: 33%;
		float: left;
        margin: 0px;
        padding: 0px;
    }

}

/************************************************************************************
smaller than 980
*************************************************************************************/

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

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#LeaveRequest1 {
		width: 30%;
	}

	#LeaveRequest2 {
		width: 30%;
	}

	#LeaveRequest3 {
		width: 30%;
	}

	#LeaveRequest4 {
		width: 80%;
        padding-bottom:5px;
	}

	#TimeClock {
		width: 95%;
	}

	#TimeClockEmail {
		width: 95%;
	}

	#Login {
		width: 95%;
	}

	#LoginEmail {
		width: 95%;
	}

    #ChangePassword {
		width: 95%;
    }

    #divMainTimeClock {
	    width: 50%;
        height:30%;
    }

    #divMainLogin {
	    width: 50%;
        height:30%;
    }

    #divMain {
        float:left;
        padding:2px;
    }

    /*#HomePage1 {
        width: auto;
		float: left;
        margin: 0px;
        padding: 0px 3px 0px 0px;
    }*/

    #HomePage2 {
        width: 100%;
		float: none;
        margin: 0px;
        padding: 0px;
    }

    /*#HomePage3 {
        width: auto;
		float: left;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    #HomePage4 {
        width: 32%;
		float: left;
        margin: 0px;
        padding: 0px 2px 0px 0px;
    }*/

    #HomePage3 {
        width: 33%;
		float: left;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    #HomePage4 {
        width: 33%;
		float: left;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    #HomePage5 {
        width: 33%;
		float: left;
        margin: 0px;
        padding: 0px;
    }


}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#LeaveRequest1 {
		width: 30%;
	}

	#LeaveRequest2 {
		width: 30%;
	}

	#LeaveRequest3 {
		width: 30%;
	}

	#LeaveRequest4 {
		width: 80%;
        padding-bottom:5px;
	}

	#TimeClock {
		width: 95%;
	}

	#TimeClockEmail {
		width: 95%;
	}

	#Login {
		width: 95%;
	}

	#LoginEmail {
		width: 95%;
	}

    #ChangePassword {
		width: 95%;
    }

    #divMainTimeClock {
	    width: 50%;
        height:30%;
    }

    #divMainLogin {
	    width: 70%;
        height:30%;
    }

    #divMain {
        float:left;
        padding:2px;
    }

    /*#HomePage1 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px 0px 2px 0px;
    }*/

    #HomePage2 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px;
    }

    #HomePage3 {
        width:100%;
		float:none;
        margin: 0px;
        padding: 0px 0px 4px 0px;
    }

    #HomePage4 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px 0px 4px 0px;
    }

    #HomePage5 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px;
    }

}


/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/*html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}*/

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#LeaveRequest1 {
		width: 40%;
	}

	#LeaveRequest2 {
		width: 40%;
	}

	#LeaveRequest3 {
		width: 100%;
		margin:-30px 0px 0px 0px;
	}

	#LeaveRequest4 {
		width: 80%;
		margin: 0px;
        padding-bottom:5px;
		float: none;
	}

	#TimeClock {
		width: 95%;
	}

	#TimeClockEmail {
		width: 95%;
	}

	#Login {
		width: 95%;
	}

	#LoginEmail {
		width: 95%;
	}

    #ChangePassword {
		width: 95%;
    }

    #divMainTimeClock {
	    width: 100%;
        height:100%;
        position:relative;
        float:none;
    }

    #divMainLogin {
	    width: 100%;
        height:100%;
        position:relative;
        float:left;
    }

    /* vh : viewport height. This changes is for ClockIn/Out And Login Page. if included below code, then leaveRequest page button get disturbed. */
    /*.RoundPanel {
        height:72vh; 
        min-height:90%;
    }*/

    #divMain {
        width:100%;
        height:90%;
        position:relative;
        float:none;
    }

    /*#HomePage1 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px 0px 2px 0px;
    }*/

    #HomePage2 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    #HomePage3 {
        width:auto;
		float: none;
        margin: 0px;
        padding: 0px 0px 4px 0px;
    }

    #HomePage4 {
        width:auto;
		float: none;
        margin: 0px;
        padding: 0px 0px 4px 0px;
    }

    #HomePage5 {
        width:auto;
		float: none;
        margin: 0px;
        padding: 0px;
    }

    /*#TSDocumentListButton {
        width:70vw;
	    float: right;
	    margin: 0px 0px 0px;
    }*/
}


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

	/*html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}*/

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#LeaveRequest1 {
		width: 100%;
		margin: 0px;
		float: none;
	}

	#LeaveRequest2 {
		width: 100%;
		margin: 0px;
		float: none;
	}

	#LeaveRequest3 {
		width: 100%;
		margin: 0px;
		float: none;
	}

	#LeaveRequest4 {
		width: 100%;
		margin: 0px 0px 0px;
        padding-bottom:10px;
		float: none;
	}

	#TimeClock {
		width: 95%;
	}

	#TimeClockEmail {
		width: 95%;
	}

	#Login {
		width: 95%;
	}

	#LoginEmail {
		width: 95%;
	}

    #ChangePassword {
		width: 95%;
    }

    #divMainTimeClock {
	    width: 100%;
        height:100%;
        position:relative;
        float:left;
    }

    #divMainLogin {
	    width: 100%;
        height:100%;
        position:absolute;
        float:left;
        
    }

    /* vh : viewport height */
    .RoundPanel {
        height:72vh; 
        min-height:90%;
    }

    #divMain {
        width:100%;
        height:90%;
        position:relative;
        float:none;
    }

    /*#HomePage1 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px 0px 2px 0px;
    }*/

    #HomePage2 {
        width:100%;
		float: none;
        margin: 0px;
        padding: 0px;
    }

    #HomePage3 {
        width:auto;
		float: none;
        margin: 0px;
        padding: 0px 0px 5px 0px;
    }

    #HomePage4 {
        width:auto;
		float: none;
        margin: 0px;
        padding: 0px 0px 5px 0px;
    }

    #HomePage5 {
        width:auto;
		float: none;
        margin: 0px;
        padding: 0px;
    }

}

/* to use */
/*@media only screen and (min-device-width : 210px) and (max-device-width : 320px) {

 	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}

	#sidebar1 {
		width: 30%;
	}

	#sidebar2 {
		width: 30%;
	}

	#sidebar3 {
		width: 80%;
	}

	#sidebar4 {
		width: 30%;
	}

}*/

/* Smartphones (portrait and landscape) ----------- */
/* to use */
/*@media only screen and (min-device-width : 321px) and (max-device-width : 480px) {

 	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}

	#sidebar1 {
		width: 30%;
	}

	#sidebar2 {
		width: 30%;
	}

	#sidebar3 {
		width: 80%;
	}

	#sidebar4 {
		width: 30%;
	}

}*/

/* Smartphones (landscape) ----------- */
/* to use */
/*@media only screen and (min-device-width: 360px) and (max-device-height: 640px) {

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 50%;
		margin: 0;
		float: none;
	}

	#sidebar1 {
		width: 50%;
		margin: 0;
		float: none;
	}

	#sidebar2 {
		width: 50%;
		margin: 0;
		float: none;
	}

	#sidebar3 {
		width: 100%;
		margin: 0;
		float: none;
	}

	#sidebar4 {
		width: 100%;
		margin: 0;
		float: none;
	}

}*/



/*@media only screen and (min-width : 321px) {

}*/



/* Smartphones (portrait) ----------- */

/*@media only screen and (max-width : 320px) {

}*/

/* iPads (portrait and landscape) ----------- */
/* to use */
/*@media only screen and (min-device-width : 641px) and (max-device-width : 1024px) {
	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}

	#sidebar1 {
		width: 30%;
	}

	#sidebar2 {
		width: 30%;
	}

	#sidebar3 {
		width: 80%;
	}

	#sidebar4 {
		width: 30%;
	}

}*/

/* iPads (landscape) ----------- */

/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}*/

/* iPads (portrait) ----------- */

/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}*/

/**********
iPad 3
**********/

/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

}*/

/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {

}*/

/* Desktops and laptops ----------- */
/* to use   */
/*@media only screen  and (min-width : 1224px) {
	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}

	#sidebar1 {
		width: 30%;
	}

	#sidebar2 {
		width: 30%;
	}

	#sidebar3 {
		width: 80%;
	}

	#sidebar4 {
		width: 30%;
	}

}*/

/* Large screens ----------- */
/* to use */
/*@media only screen  and (min-width : 1824px) {

 	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}

	#sidebar1 {
		width: 30%;
	}

	#sidebar2 {
		width: 30%;
	}

	#sidebar3 {
		width: 80%;
	}

	#sidebar4 {
		width: 30%;
	}

}*/

/* iPhone 4 ----------- */

/*@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {

}*/

/* iPhone 5 ----------- */

/*@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}*/

/* iPhone 6 ----------- */

/*@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}*/

/*@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}*/

/* iPhone 6+ ----------- */

/*@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}*/

/*@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}*/

/* Samsung Galaxy S3 ----------- */

/*@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}*/

/*@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}*/

/* Samsung Galaxy S4 ----------- */
/*@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

}*/

/*@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){

}*/

/* Samsung Galaxy S5 ----------- */

/*@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

}*/

/*@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){

}*/