/******************************************/
/*       Style for mobile devices         */
/******************************************/

/*Detect iphone dimension*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

/******************************************/
/*              login.html                */
/******************************************/

    .loginImg {
        display: none;
    }

    .loginBox {
        width: 80%;
        position: relative;
    }

    #loginDiv {
        display: block;
        position: absolute;
        /*border: 1px solid black;*/
    }
/******************************************/
/*               user.html                */
/******************************************/

    #site-name {
        display: block;
    }

    #listTable, #connectTable, #ecTable, #deviceTable {
		font-size: 30px;
    }

    /* Force table to not be like tables anymore */
	#listTable thead, #listTable tbody, #listTable th, #listTable td, #listTable tr,
	#connectTable thead, #connectTable tbody, #connectTable th, #connectTable td, #connectTable tr,
	#ecTable thead, #ecTable tbody, #ecTable th, #ecTable td, #ecTable tr,
	#deviceTable thead, #deviceTable tbody, #deviceTable th, #deviceTable td, #deviceTable tr{
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#listTable thead,
	#connectTable thead,
	#ecTable thead,
	#deviceTable thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#listTable tr,
	#connectTable tr,
	#ecTable tr,
	#deviceTable tr {
	    border: 1px solid #ccc;
	    padding-bottom: 10%;
	}

	#listTable td,
	#connectTable td,
	#ecTable td,
	#deviceTable td{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	#listTable td:before,
	#connectTable td:before,
	#ecTable td:before,
	#deviceTable td:before{
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		white-space: nowrap;
		font-size: 15px;
		font-weight: bold;
	}

	/*Label the data*/
	#listTable td:nth-of-type(1):before { content: "Site name";}
	#listTable td:nth-of-type(2):before { content: "UPRN"; }
	#listTable td:nth-of-type(3):before { content: "Commission Date"; }
	#listTable td:nth-of-type(4):before { content: "Devices"; }
	#listTable td:nth-of-type(5):before { content: "Status"; }

    #connectTable td:nth-of-type(1):before { content: " "; }
    #connectTable td:nth-of-type(2):before { content: "Panel name";}
    #connectTable td:nth-of-type(3):before { content: "UPRN"; }
	#connectTable td:nth-of-type(4):before { content: "Devices"; }
	#connectTable td:nth-of-type(5):before { content: "Last Update"; }

    #ecTable td:nth-of-type(1):before { content: " "; }
    #ecTable td:nth-of-type(2):before { content: "Panel name";}
    #ecTable td:nth-of-type(3):before { content: "UPRN"; }
	#ecTable td:nth-of-type(4):before { content: "Devices"; }
	#ecTable td:nth-of-type(5):before { content: "Last Update"; }

	#deviceTable td:nth-of-type(1):before { content: " "; }
	#deviceTable td:nth-of-type(2):before { content: "Name"; }
    #deviceTable td:nth-of-type(3):before { content: "Last Function Test";}
    #deviceTable td:nth-of-type(4):before { content: "FT Result"; }
	#deviceTable td:nth-of-type(5):before { content: "Last Duration Test"; }
	#deviceTable td:nth-of-type(6):before { content: "DT Result"; }
    #deviceTable td:nth-of-type(7):before { content: "Status"; }

    /******************************************/
    /*               site.html                */
    /******************************************/

    #old-report-table {
        width: 100%;
    }

    /******************************************/
    /*             device.html                */
    /******************************************/

    #deviceMain {
        margin: 0 5px 0 5px;
    }

    #devicePageStatus {
    	width:100%;
    	position: relative;
    	clear:both;
    	margin-left: auto;
      	margin-right: auto;
    }
}