body, html {
    width: 90%;
    height: 90%;
    background: #FFFFFF;
    font-family: "Arial";
    font-size: 12px;
    padding: 10px;
    margin: 0 auto;
}
main {
	width: 100%;
	height: 100%;
	margin: 0px auto;
	background: #FFFFFF;
	padding: 0px;
	margin-left :0px;
	margin-right :0px;
	position: center;
}
input[name=css-tabs] {
	display: none;
}
a {
	color: #F29A77;
}
#tabs {
	margin-left: 0px;
	background: #5C5C5C;
	height: 110px;
	border-bottom: 5px solid #6c87d4;
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
#tabs::before {

}

#tabs::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	height: 110px;
	width: 102px;
	/*background: #6c87d4;*/
	-webkit-transition: -webkit-transform 400ms;
	transition: -webkit-transform 400ms;
	transition: transform 400ms;
	transition: transform 400ms, -webkit-transform 400ms;
}
#tabs label {
    position: relative;
    font-family: "Arial";
    z-index: 100;
    display: block;
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    width: 100px;
    height: 100%;
    border-right: 1px dotted #575654;
    cursor: pointer;
    color: #FFFFFF;
}
#tabs label:first-child {
	border-left: 1px dotted #575654;
}
#tabs label::before {
	content: "";
	display: block;
	height: 60px;
	width: 60px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-filter: invert(0);
			filter: invert(0);
	margin: 10px auto;
}

/*
#TAB_LPR_MAPPING::before {
	background-image: url('../images/icon_lpr_mapping.png');
}
#TAB_LPR_LIST_UPLOAD::before {
	background-image: url('../images/icon_lpr_list_upload.png');
}
*/
#TAB_ANPR::before {
    background-image: url('../images/icon_anpr.png');
}
#TAB_LPR_LIST::before {
	background-image: url('../images/icon_lpr_list.png');
}
#TAB_ALARM::before {
	background-image: url('../images/icon_alarm.png');
}
#TAB_LICENSE::before {
	background-image: url('../images/icon_license.png');
}
#TAB_PTZ::before {
    background-image: url('../images/icon_ptz.png');
}
#TAB_SETTING::before {
	background-image: url('../images/icon_setting.png');
}
#TAB_OUTPUT::before {
    background-image: url('../images/icon_output.png');
}
#TAB_SPEED::before {
    background-image: url('../images/icon_stopwatch.png');
}
#TAB_RADAR::before {
    background-image: url('../images/icon_radar.png');
}
#TAB_TOF::before {
    background-image: url('../images/icon_tof.png');
}
#TAB_FACE::before {
    background-image: url('../images/icon_face.png');
}
#TAB_FACE_LIST::before {
    background-image: url('../images/icon_lpr_list.png');
}
/*
#RADIO_LPR_MAPPING:checked ~ #tabs #TAB_LPR_MAPPING::before,
#RADIO_LPR_LIST_UPLOAD:checked ~ #tabs #TAB_LPR_LIST_UPLOAD::before,
    */
/*
#RADIO_LPR_MAPPING:checked ~ #tabs::after {
	-webkit-transform: translateX(202px);
			transform: translateX(202px);
}
#RADIO_LPR_LIST_UPLOAD:checked ~ #tabs::after {
	-webkit-transform: translateX(303px);
			transform: translateX(303px);
}
    */

#RADIO_ANPR:checked ~ #tabs #TAB_ANPR::before,
#RADIO_LPR_LIST:checked ~ #tabs #TAB_LPR_LIST::before,
#RADIO_ALARM:checked ~ #tabs #TAB_ALARM::before,
#RADIO_LICENSE:checked ~ #tabs #TAB_LICENSE::before,
#RADIO_OUTPUT:checked ~ #tabs #TAB_OUTPUT::before,
#RADIO_RADAR:checked ~ #tabs #TAB_RADAR::before,
#RADIO_SPEED:checked ~ #tabs #TAB_SPEED::before,
#RADIO_PTZ:checked ~ #tabs #TAB_PTZ::before,
#RADIO_TOF:checked ~ #tabs #TAB_TOF::before,
#RADIO_FACE:checked ~ #tabs #TAB_FACE::before,
#RADIO_FACE_LIST:checked ~ #tabs #TAB_FACE_LIST::before,
#RADIO_SETTING:checked ~ #tabs #TAB_SETTING::before {
}
#RADIO_ANPR:checked ~ #tabs::after {
	-webkit-transform: translateX(0);
			transform: translateX(0);
}
#RADIO_LPR_LIST:checked ~ #tabs::after {
	-webkit-transform: translateX(101px);
			transform: translateX(101px);
}
#RADIO_ALARM:checked ~ #tabs::after {
	-webkit-transform: translateX(202px);
			transform: translateX(202px);
}
#RADIO_OUTPUT:checked ~ #tabs::after {
    -webkit-transform: translateX(303px);
            transform: translateX(303px);
}
#RADIO_SPEED:checked ~ #tabs::after {
    -webkit-transform: translateX(404px);
    		transform: translateX(404px);
}
#RADIO_RADAR:checked ~ #tabs::after {
    -webkit-transform: translateX(505px);
    		transform: translateX(505px);
}
#RADIO_TOF:checked ~ #tabs::after {
    -webkit-transform: translateX(606px);
    		transform: translateX(606px);
}
#RADIO_PTZ:checked ~ #tabs::after {
    -webkit-transform: translateX(707px);
            transform: translateX(707px);
}
#RADIO_SETTING:checked ~ #tabs::after {
    -webkit-transform: translateX(808px);
            transform: translateX(808px);
}
#RADIO_LICENSE:checked ~ #tabs::after {
	-webkit-transform: translateX(909px);
			transform: translateX(909px);
}
#RADIO_FACE:checked ~ #tabs::after {
	-webkit-transform: translateX(1010px);
			transform: translateX(1010px);
}
#RADIO_FACE_LIST:checked ~ #tabs::after {
	-webkit-transform: translateX(1111px);
			transform: translateX(1111px);
}
#content {
	position: center;
	width: 100%;
	height: 100%;
}
#content section {	
	position: center;
	width: 100%;
	height: 100%;	
	display:none;	
}

/*#RADIO_LPR_MAPPING:checked ~ #content #CONTENT_LPR_MAPPING,
#RADIO_LPR_LIST_UPLOAD:checked ~ #content #CONTENT_LPR_LIST_UPLOAD,
*/
#RADIO_ANPR:checked ~ #content #CONTENT_ANPR,
#RADIO_LPR_LIST:checked ~ #content #CONTENT_LPR_LIST,
#RADIO_ALARM:checked ~ #content #CONTENT_ALARM,
#RADIO_LICENSE:checked ~ #content #CONTENT_LICENSE,
#RADIO_TOF:checked ~ #content #CONTENT_TOF,
#RADIO_OUTPUT:checked ~ #content #CONTENT_OUTPUT,
#RADIO_RADAR:checked ~ #content #CONTENT_RADAR,
#RADIO_SPEED:checked ~ #content #CONTENT_SPEED,
#RADIO_PTZ:checked ~ #content #CONTENT_PTZ,
#RADIO_FACE:checked ~ #content #CONTENT_FACE,
#RADIO_FACE_LIST:checked ~ #content #CONTENT_FACE_LIST,
#RADIO_SETTING:checked ~ #content #CONTENT_SETTING {
    display: block;
}

#content #CONTENT_ANPR iframe {
	width: 100%;
	height: 100%;
}
#content #CONTENT_LPR_LIST iframe {
	width: 100%;
	height: 100%;
}
/*
#content #CONTENT_LPR_MAPPING iframe {
	width: 100%;
	height: 100%;
}
#content #CONTENT_LPR_LIST_UPLOAD iframe {
	width: 100%;
	height: 100%;
}*/
#content #CONTENT_ALARM iframe {
	width: 100%;
	height: 100%;
}

#content #CONTENT_LICENSE iframe {
	width: 100%;
	height: 100%;
}

#content #CONTENT_OUTPUT iframe {
    width: 100%;
    height: 100%;
}

#content #CONTENT_RADAR iframe {
    width: 100%;
    height: 100%;
}

#content #CONTENT_SPEED iframe {
    width: 100%;
    height: 100%;
}

#content #CONTENT_SETTING iframe {
	width: 100%;
	height: 100%;
}

#content #CONTENT_PTZ iframe {
    width: 100%;
    height: 100%;
}

#content #CONTENT_TOF iframe {
    width: 100%;
    height: 100%;
}

#content #CONTENT_FACE iframe {
    width: 100%;
    height: 100%;
}

#content #CONTENT_FACE_LIST iframe {
    width: 100%;
    height: 100%;
}