* { margin: 0; } #content{ width:100%; } #content2{ width:100%; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #unicef{ margin-right:4%; } html, body { height: auto; font-family: "Roboto",sans-serif; background-color: /* #B4E0B4 */ #fff; margin: 0 auto; } .highlight{ background:red; } .wrapper { min-height: auto; height: auto; margin: 0 auto; overflow: hidden; } #page-container { width: 100%; margin: 0 auto; /* overflow: hidden; */ } /* .trBandTop{ background: rgb(0,117,61); Old browsers IE9 SVG, needs conditional override of 'filter' to 'none' background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNzUzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzAwOGY0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNmIzNzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(0,117,61,1) 0%, rgba(0,143,74,1) 49%, rgba(54,179,119,1) 100%); FF3.6+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,117,61,1)), color-stop(49%,rgba(0,143,74,1)), color-stop(100%,rgba(54,179,119,1))); Chrome,Safari4+ background: -webkit-linear-gradient(left, rgba(0,117,61,1) 0%,rgba(0,143,74,1) 49%,rgba(54,179,119,1) 100%); Chrome10+,Safari5.1+ background: -o-linear-gradient(left, rgba(0,117,61,1) 0%,rgba(0,143,74,1) 49%,rgba(54,179,119,1) 100%); Opera 11.10+ background: -ms-linear-gradient(left, rgba(0,117,61,1) 0%,rgba(0,143,74,1) 49%,rgba(54,179,119,1) 100%); IE10+ background: linear-gradient(to right, rgba(0,117,61,1) 0%,rgba(0,143,74,1) 49%,rgba(54,179,119,1) 100%); W3C filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00753d', endColorstr='#36b377',GradientType=1 ); IE6-8 } */ /**** Home Page ****/ #img_banner{ margin:0 auto; width:100%; height:480px; max-height:480px; /* border:1px red solid; */ } #img_banner img{ max-height:480px !important; } #text_banner{ padding:10px 20px; /* background-color:#79BD8F; */ text-align:center; width:100%; position:fixed; z-index:15; margin-top:-1.5%; /* border:5px solid black; */ } .highlight{ background:green; } .nav li a:hover{ background:#79BD8F !important; } #text_banner2{ padding:8px 5px; background-color:#79BD8F; text-align:center; z-index:15; width:100%; /* margin-top:-1%; */ /* border:5px solid black; */ } .banner_caption{ font-size:14px; } .banner_caption2{ font-size:12px; margin-left:25%; text-decoration: underline; } #opener{ color:#FFFF9D; } #contentHome{ background-color:#BEEB9F; } /* #colLtHome, */ #colMdHome, #colRtHome /* #colRtHomeLSG */{ /* width: 19%; min-width: 256px; */ height: 403px; display: inline-block; margin: 0.5%; vertical-align: top; /* border: 1px solid #36B377; */ width:20%; } #colRtHomeLSG{ height: 406px; display: inline-block; margin: 0.5%; vertical-align: top; /* border: 1px solid #36B377; */ width:21%; } #colLtHome{ /* margin-left:1.5%; */ background-color:#ffffff; height:403px; margin: 0.5%; vertical-align: top; border: 1px solid #36B377; margin-left: 1.5%; width:18%; } #colMdHome{ background-color:#ffffff; /* height:300px; */ } #colRtHome { /* width: 37.5%; */ width: 20%; background-color:#fff; height:430px; } #colRtHomeLSG{ margin-right:1%; width:27%; } #div_title{ text-align:center; } #div_title div{ background:#79bd8f; border-bottom: 1px solid #36B377; } #div_map{ width: 256px; height: 340px; } #div_note{ border: 1px #36B377 solid; background:#fff; font-size: 12px; /* margin-top:-7%; */ } #div_note table{ width: 100%; border-collapse: collapse; } #div_note table td{ width: 50%; } .chart_title{ font-size:10px; text-align:center; } .chart_title div span{ padding: 0px 15px; margin-right:5px; background-color:#75b746; } #divLeftHome, #divMiddleHome { /* width: 38%; min-width: 256px; */ min-height: 400px; display: inline-block; /* margin: 0.5%; */ vertical-align: top; /* border: 1px solid #36B377; */ /* margin-left: 4%; width: 28%; */ } #divRightHome{ display: inline-block; /* margin: 0.5%; */ vertical-align: top; height:400px; } #divLeftHome{ margin-left: 1%; } /* #divLeftHome, */ #divMiddleHome{ border: 1px solid #36B377; } #divMiddleHome{ width: 19%; } #divLeftTop{ height: 148px; border: 1px solid #36B377; vertical-align: middle; } #div_bar_popu_effected{ max-height: 50px; /* border: 1px #36B377 solid; */ } #div_bar_popu_survey, #div_bar_popu_survey_lsg{ min-height:375px; } #div_img_slider{ height: 100%; margin-top: 10px; border: 1px #36B377 solid; } #divText p:nth-child(2){ display: inline; } #ex_text{ display: inline; } #divRightTop, #divRightBottom{ height: 250px; display: block; border: 1px solid #36B377; /* border: 1px black solid; */ } #divRightTop{ border: none; } #divLeftBottom{ margin-top: 10px; min-height: 340px; border: 1px solid #36B377; } #divInnerLeft, #divInnerRight{ display: block; width: 49%; min-height: 235px; margin: 0% 0.5% 0.5% 0%; float: left; background: #fff; border: 1px solid #36B377; } #divInnerRight{ float: right; } #divInnerLeft p{ padding: 1%; font-size: 14px; } #divInnerLeft ul li{ font-size: 12px; } #divText{ padding: 5px; min-height: 255px; height: 49%; margin: 0px 0px 10px 0px; display: block; vertical-align: top; border: 1px #36B377 solid; color: #333333; } #divText p{ font-size: 14px; margin-bottom: 10px; text-align: justify; } .ex_text{ display: inline; } #divLogin{ min-height: 260px; height: 49%; margin: 0px; display: block; vertical-align: bottom; border: 1px #36B377 solid; } /**** Home Page ****/ #img-content{ position:relative; margin: 0 auto; } input[type="button"], input[type="submit"], input[type="reset"], .button { display: inline-block; cursor: pointer; border: 0; border-radius: 5px; background: #008f4a; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOGY0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzAwNzUzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDU4MmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #008f4a 0%, #00753d 47%, #00582e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008f4a), color-stop(47%,#00753d), color-stop(100%,#00582e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #008f4a 0%,#00753d 47%,#00582e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #008f4a 0%,#00753d 47%,#00582e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #008f4a 0%,#00753d 47%,#00582e 100%); /* IE10+ */ background: linear-gradient(to bottom, #008f4a 0%,#00753d 47%,#00582e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008f4a', endColorstr='#00582e',GradientType=0 ); /* IE6-8 */ color: #ffffff; font-weight: 700; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover { background: #008F4A; color: #ffffff; } input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, .button:active { background: #008F4A; color: #ffffff; } input[type="button"].alt, input[type="submit"].alt, input[type="reset"].alt, .button.alt { background: #008F4A; color: #ffffff; } input[type="button"].alt:hover, input[type="submit"].alt:hover, input[type="reset"].alt:hover, .button.alt:hover { background: #008F4A; color: #ffffff; } input[type="button"].alt:active, input[type="submit"].alt:active, input[type="reset"].alt:active, .button.alt:active { background: #008F4A; color: #ffffff; } input[type="text"], input[type="password"], textarea { border:1px solid #666666; background-color: #fff; border-radius:3px; padding: 3px; } input:focus { outline:none; border-color:#007795; box-shadow:0 0 2px #007795; } select { border:none; /* border-radius:3px; */ padding: 7px; font-size: 9pt; min-width: 100px; } select:focus { outline:none; border-color:#007795; box-shadow:0 0 2px #007795; } .mnthYr{ width: 100px; }/*month-year picker textbox width*/ /****Footer****/ .footer { width: 100%; margin: 0 auto; background:#79BD8F; position:fixed; height:50px; bottom: 0px; z-index:1; /* height: 30px; */ /*border-left: 1px #404040 solid; border-right: 1px #404040 solid;*/ } /* .footer-bar { height:2px; IE9 SVG, needs conditional override of 'filter' to 'none' background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDIiLz4KICAgIDxzdG9wIG9mZnNldD0iNDglIiBzdG9wLWNvbG9yPSIjMzZiMzc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 1%, rgba(54,179,119,1) 48%, rgba(255,255,255,0) 100%); FF3.6+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.02)), color-stop(48%,rgba(54,179,119,1)), color-stop(100%,rgba(255,255,255,0))); Chrome,Safari4+ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.02) 1%,rgba(54,179,119,1) 48%,rgba(255,255,255,0) 100%); Chrome10+,Safari5.1+ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.02) 1%,rgba(54,179,119,1) 48%,rgba(255,255,255,0) 100%); Opera 11.10+ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.02) 1%,rgba(54,179,119,1) 48%,rgba(255,255,255,0) 100%); IE10+ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.02) 1%,rgba(54,179,119,1) 48%,rgba(255,255,255,0) 100%); W3C filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); IE6-8 } */ /* #footer-info{ width: 100%; height: auto; background-color: #3a63a6; background-image: url(../images/footer1.jpg); background-repeat: repeat-x; } */ .trBand{ width: 100%; /* min-height: 50px; */ background: #ffffff; /*#008f4a; Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOGY0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzAwNzUzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDU4MmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #008f4a 0%, #00753d 47%, #00582e 100%); FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008f4a), color-stop(47%,#00753d), color-stop(100%,#00582e)); Chrome,Safari4+ background: -webkit-linear-gradient(top, #008f4a 0%,#00753d 47%,#00582e 100%); Chrome10+,Safari5.1+ background: -o-linear-gradient(top, #008f4a 0%,#00753d 47%,#00582e 100%); Opera 11.10+ background: -ms-linear-gradient(top, #008f4a 0%,#00753d 47%,#00582e 100%); IE10+ background: linear-gradient(to bottom, #008f4a 0%,#00753d 47%,#00582e 100%); W3C filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008f4a', endColorstr='#00582e',GradientType=0 ); IE6-8 */ } #footerLt, #footerRt{ width:48%; margin:1.5%; display:inline-block; font-size:12px; } #footerRt{ width:46%; text-align:right; margin-right:1%; } /****Blinking image****/ #dob{ width: 110px; } #dob[disabled="disabled"]{ color: black; } .ui-datepicker { font-size:9pt !important} /**** ============================================= Modification done for responsive design ============================================= ****/ /**** Header ======================================****/ .header { width: 100%; background:/* #FF6138 */ #f4441f; position:fixed; z-index:1; /* background: rgb(255,0,0); Old browsers IE9 SVG, needs conditional override of 'filter' to 'none' background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwY2E3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iIzAwYzI2NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzAwOGY0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 34%, rgba(255,21,21,1) 76%); FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(34%,rgba(255,0,0,1)), color-stop(76%,rgba(255,21,21,1))); Chrome,Safari4+ background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 34%,rgba(255,21,21,1) 76%); Chrome10+,Safari5.1+ background: -o-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 34%,rgba(255,21,21,1) 76%); Opera 11.10+ background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 34%,rgba(255,21,21,1) 76%); IE10+ background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 34%,rgba(255,21,21,1) 76%); W3C filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20ca78', endColorstr='#008f4a',GradientType=0 ); IE6-8 */ } #bg{background-image: url("../images/header.png"); background-repeat: repeat-x;} #col_left{width: 20%; display: inline-block; text-align: left; padding-left: 5px;} #col_left > img{ width:130px; display:inline-block; position: relative; top: 2px; left: 2px; } #col_left img:nth-child(2){ width:120px; position:relative; top:-1px; } /* .jatak_logo{ position: relative; top: 10px; right: 2px; display: inline; } */ #col_middle{width:67% /* 67% */; display: inline-block; vertical-align: top; text-align: center;} #title{font-size: 21px; color: #fff; display: inline; position: relative; top: 4px; } #subTitle{font-size: 18px; display: block; color: #FFF; position: relative; top: 12px;} #col_right{width:12% /* 20% */; display: inline-block; text-align: right; position: relative;} #col_right > img{ /* width:130px; */ display:inline-block; position: relative; top: 2px /* -5px */; } .navbar-inverse{ background: #EFE4B0 !important; border-color:#f9f4f400 !important; } .navbar-inverse .navbar-nav > li > a { color: black !important; } /* .sticky + #content { padding-top: 100px; } */ /**** Header ======================================****/ /**** Row below header ======================================****/ /**** Content ======================================****/ /** image slider **/ /* .jssorb01 {position: absolute;} .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av { position: absolute; size of bullet elment width: 12px; height: 12px; filter: alpha(opacity=70); opacity: .7; overflow: hidden; cursor: pointer; border: #000 1px solid; } .jssorb01 div {background-color: gray;} .jssorb01 div:hover, .jssorb01 .av:hover {background-color: #d3d3d3;} .jssorb01 .av {background-color: #fff;} .jssorb01 .dn, .jssorb01 .dn:hover {background-color: #555555;} .jssora05l, .jssora05r {display: block; position: absolute; width: 40px; height: 40px; cursor: pointer; background: url(../img/a17.png) no-repeat; overflow: hidden;} .jssora05l { background-position: -10px -40px; } .jssora05r { background-position: -70px -40px; } .jssora05l:hover { background-position: -130px -40px; } .jssora05r:hover { background-position: -190px -40px; } .jssora05l.jssora05ldn { background-position: -250px -40px; } .jssora05r.jssora05rdn { background-position: -310px -40px; } */ /*jssor slider loading skin spin css*/ /* .jssorl-009-spin img { animation-name: jssorl-009-spin; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes jssorl-009-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } */ /*jssor slider bullet skin 051 css*/ /* .jssorb051 .i {position:absolute;cursor:pointer;} .jssorb051 .i .b {fill:#fff;fill-opacity:0.5;} .jssorb051 .i:hover .b {fill-opacity:.7;} .jssorb051 .iav .b {fill-opacity: 1;} .jssorb051 .i.idn {opacity:.3;} */ /*jssor slider arrow skin 051 css*/ /* .jssora051 {display:block;position:absolute;cursor:pointer;} .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;} .jssora051:hover {opacity:.8;} .jssora051.jssora051dn {opacity:.5;} .jssora051.jssora051ds {opacity:.3;pointer-events:none;} */ /* #slider_container{ top: -3px; left: 0; position: relative; width: 425px; height: 480px; max-width:100%; height:auto; } .slide{ cursor: move; position: absolute; left: 0px; top: 0px; width: 1600px; height: 480px; width:100%; height:auto; overflow: hidden; } #contain_slider{ vertical-align: top; float: left; width:1600px; height: 480px; width:100%; max-width:100%; padding: 10px 0; position: relative; top: 0px; } */ /** image slider **/ #login{/* width: 300px; height:250px; border: 2px #36B377 solid;*/ background-color: transparent; text-align: left; font-size: 9pt;} #login #contain_input{width:250px; vertical-align: top; margin:20px auto;} #label1{font-size: 16px; padding-left: 5px; display: block; margin: 0;} .label2{font-size: 12px; font-weight: bold; display: block; margin:10px 0px 10px 5px;} #block_name{position: relative; color: #000000; width: 220px; height: 30px; border: 1px #666666 solid; margin: 0 0 0 5px;} #submit_button{width: auto; display: block; text-align: center;} #submit_button input[type="button"], #submit_button input[type="submit"]{min-width: 120px; height:30px; font-size: 14px;} #write_up{float: left; font-size: 9pt; border: 2px solid #36B377; padding:10px 10px; height: 230px; margin-bottom: 10px; text-align: justify;} /* #content{width: 100%; padding:0 5px; height: auto; min-height: 555px; overflow: hidden; background-image: url("../images/bg.png"); background-repeat: repeat;} */ #content{ background-color:#BEEB9F; positin:fixed; margin-top:11%; float:left;} #content2{ background-color:#BEEB9F; margin-top:11%; positin:fixed; z-index:1; float:left; } .sticky { position: fixed; top: 0; width: 100%; z-index:1; } /* #selCriteria{margin:0 auto; background-color:#4EA06A; border: 1px solid #36B377; padding: 3px 0px; font-size: 12px; text-align: left; position: relative; top: 5px; left: 10px;} */ /* new selcriteria */ /* #selCriteria{ width: 100%; height: auto; background-color: #4EA06A; border: 1px solid #36B377; padding: 20px 0px 20px 0px; font-size: 12px; } */ #selCriteria { width: 100%; height: auto; background-color: #4EA06A; border: 1px solid #36B377; padding: 20px 0px 20px 0px; font-size: 12px; } #selCriteria .container{ max-width:100%; /* margin: 0px 40px; */ padding:0; } #div_btn { float: right; /* padding: 18px 145px; */ margin-top: 2%; } @media(max-width: 920px){ #div_rept_dist { float: left; width: 70%; } #div_rept_type { float: left; width: 70%; } #div_grp { float: left; width: 70%; } #div_btn { width: 76%; float: right; } } /* #div_rept_dist{ width: 20%; float: left; padding: 0; max-width: 100%; } #div_rept_dist label{ width: 40%; margin: 7px 0px; float: left; padding: 0; } #sel_dist{ width: 60%; float: left; } #div_rept_type{ max-width: 100%; float: left; padding: 0; } #div_rept_type label{ width: 50%; margin: 7px 0px; float: left; } #sel_rept_type{ width: 60%; width: 50%; margin: 0px; float: left; } #selCriteria .container{ padding:0; } */ #divLevel, #divDt, #divBk, #divGp, #divUlb, #divGrp{ width: 19%; margin: 0 0 0 1%; display: inline-block; text-align:center; } #divGrp{ width:37%; } #divLevel label, #divDt label, #divBk label, #divGp label, #divUlb label, #divGrp label{ display:block; font-size: 14px; } #divGrp div{display: inline;} /* #divAwc{width: 32%; margin: 0 1%; display: inline-block;} #divCat{width: 30%; margin: 0 1%; display: inline-block;} #divCat div{display: inline-block;} #div_entry{display: inline-block; margin: 0 1%;} #div_entry div{display: inline-block;} #divCat{width: 31%; margin: 0 1% 0 0; display: inline-block;} */ #dispArea{width: 99%; text-align: center; margin:0 auto; margin-top:2px;} /** nutrition status **/ #divLeft{width: 32.9%; display: inline-block; text-align: left; margin: 0; vertical-align: top;} #divMiddle{width: 33.05%; display: inline-block; text-align: left; margin: 0; vertical-align: top;} #divRight{width: 33.03%; height:467px; display: inline-block; text-align: left; margin: 0; overflow:hidden; border: 1px solid black;} #tdLeft{width: 100%; vertical-align: top; height: 467px; border: 1px solid black; background-color: transparent;} #nutri{width: 100%; height: 390px; overflow: hidden;} #tdInfo{width: 50%; border: 1px solid black; height: 285px; vertical-align: top; background-color: #ffffff;} #tr_btn{position: relative; top:15px;} #info{width: 100%; height: 265px; vertical-align: top;} #tblChart{width: 100%; height: 473px; background-color: white; border-bottom: 1px solid black; } #tblChart2{width: 100%; height: 473px; background-color: white;} #tblChart3{width: 100%; height: 473px; background-color: white; } #ch1, #ch2, #ch3{ float:left; width:100%} #arow_right { position:relative; bottom: 80px; width: 80px; left:86%; opacity:0.6; display:none; } #arow_right img{ width: 40px; cursor: pointer; } #arow_left_3{ position:relative; bottom: 80px; width: 80px; opacity:0.6; cursor: pointer; } #arow_left_3 img{ width: 40px; } #arow_right_2 { position:relative; bottom: 80px; width: 80px; left:86%; opacity:0.6; cursor: pointer; } #arow_right_2 img{ width: 40px; } #arow_left_2 { position:relative; bottom: 160px; width: 80px; opacity:0.6; cursor: pointer; } #arow_left_2 img{ width: 40px; } /** nutrition status **/ /** comm. growth chart **/ .divChart{width: auto; display: inline-block; margin: 0 5px;} #chartBoy{border: 7px solid blue;} #chartGirl{border: 7px solid pink;} .chart_div{width: 479px; height: 304px; background-color: transparent;} /** comm. growth chart **/ /** convergence dashboard **/ #divTable{width: 100%; margin: 0 auto;} .table_outer_border{width: 98%; border: 1px solid grey; border-collapse: collapse; font-size: 9.5pt; margin: 1%;} #divLabel{display: block; margin: 10px 0px;} .label3{font-size: 12px;margin-left: 15px; text-decoration: underline;} .divIndiChart{width: 22%; margin: 1%; display: inline-block;} /** convergence dashboard **/ /** picture gallery **/ #nutri_ageGroup{width: 96%; margin: 2%; overflow: auto; border: 1px #36B377 solid;} /** picture gallery **/ /**** Content ======================================****/ /**** Menu ======================================****/ .slicknav_menu {display:none;} /**** Menu ======================================****/ /**** Footer =======================================****/ #footer_left{width: 33%; margin: 0 0 0 1%; display: inline-block; text-align: left;} #footer_middle{width: 33%; margin: 0 0 0 1%; display: inline-block; text-align: center;} #footer_right{width: 33%; margin: 0 1% 0 0; display: inline-block; text-align: right;} #footer_left label,#footer_middle label, #footer_right label{font-size: 11px; color: #fff; position: relative; top: -3px;} /**** Footer =======================================****/ /**** data management =======================================****/ #table_area{width: 90%; margin: 10px auto; text-align: center;} #img_clild{height: 240px; border: 1px solid black;} #voic_child{margin-top:10px; height: 100px; border: 1px solid black;} #save_right{width:auto; border: 1px solid black; height:130px; margin-top:80px; padding:60px 10px 0; text-align: center;} /* Pop */ /* button hover effect */ @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .hvr-pop { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /**** data management =======================================****/ .google-visualization-table{ width:100%; } .frgt_pass{ color: green; } #tble_header_div{width: 100%; vertical-align:top; height:auto; background-color: #fff; display:none;} .left_header_div{float:left; width:64%; border-bottom: 1px solid #808080; border-right: 1px solid #808080; font-size: 9pt; text-align:center; background-color: #fff;} .right_header_div{float:left; width:35.5%; border-bottom: 1px solid #808080; font-size: 9pt; text-align:center; background-color: #fff;} .access_img{ position: relative; top: 3px; } /**** Exception Report ======================================****/ #outer_div{ font-size:14px; margin:40px auto; border:2px solid #36B377; width:50%; min-height:320px; } #select_re{ width:80%; padding:10px; border:1px solid #000; margin:20px auto; } .select_re_table{ width: 60%; margin:0 auto; } #speci_month{ width:80%; padding:10px; border:1px solid #000; margin:0 auto; } #conse_month{ width:80%; padding:10px; border:1px solid #000; margin:0 auto; display:none; margin-bottom: 20px; } /**** Exception Report ======================================****/ .mob_login{ display: none; } #choose_month { width: 80%; padding: 10px; border: 1px solid #000; margin: 60px auto; } .remarks_disease{ height:125px; width:200px; border:#999 1px solid; overflow:auto; font-size:10px; padding:2px; } .remark_lbl{ width:auto; background-color:#00aa59; font-size:12px; color:white; padding:2px 5px; } .remarks_disease section{ border-bottom:1px dashed green; padding:5px; } .check_section{ text-align:left; padding-left:45px !important; } /* .remarks_disease input, .remarks_disease select{ pointer-events: none; } */ .input_cap{ color:#5d5d5d; font-size:10px; font-weight: bold; } /* For Data Management Module */ .exst_upload_file, .new_upload_file{ width: 40%; border: 1px solid #008F4A; padding: 0px 20px; margin: 0 auto; } #exst_upload_tbl, #new_upload_tbl{ margin: 0 auto; margin-top: 20px; } #exst_upload_tbl p, #new_upload_tbl p{ text-align: center; margin-bottom: 20px; } #exst_file_submit, #new_file_submit{ padding: 8px 10px; } /* .exst_fieldset, .new_fieldset{ width:500px; margin: 0 auto; margin-top: 150px; } #exst_upload_tbl td, #new_upload_tbl td{ padding: 8px; } #exst_file_submit, #new_file_submit{ padding: 8px 10px; position: relative; left:120px; }*/ #breadcrumb{ font-size: 14px; padding: 10px 10px 30px 10px; color: #FF2323; font-style: oblique; } /* For Data Management Module */ /* for chart legend */ .WFA_div, .WFL_div, .HFA_div{ position: absolute; top: 360px; left:1268px; font-size: 10px; } .tblDialog{ font-size: 12px; border-collapse: collapse; } .tblDialog thead th{ font-size: 12px; text-align: center; background-color: cornsilk; } .tblDialog tbody tr:nth-child(even){ background-color: aliceblue; } .tblDialog tbody td{ min-width: 40px; height: 30px; padding: 5px; } /******Dashboard****/ .rightBarChart{ /* display:block; width:98%; overflow-x:auto; */ margin:5px auto; /* border:1px blue solid; */ } /* .rightBarChart{ width:49%; margin:0 0.5% 0 0; border: 1px solid #36B377; display:inline-block; } */ * {box-sizing: border-box} /* .mySlides {display: none} */ /* Slideshow container */ /* .slideshow-container { max-width: 100%; position: relative; margin: 0 auto; border:1px green solid; } */ /* Next & previous buttons */ /* .prev, .next { cursor: pointer; position: absolute; top: 65%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; background-color: rgba(0,0,0,0.8); } .prev{ position:absolute; left:0px; } */ /* Position the "next button" to the right */ /* .next { right: 0; border-radius: 3px 0 0 3px; } */ /* On hover, add a black background color with a little bit see-through */ /* .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } */ /* Caption text */ /* .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } */ /* Number text (1/3 etc) */ /* .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } */ /* The dots/bullets/indicators */ /* .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } */ /* Fading animation */ /* .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } */ /******Dashboard****/ /******Report****/ /* #div_rept_type, #div_grp, #div_btn{ width:30%; margin:1%; display:inline-block; } */ /* #div_btn{ float: right; text-align: right; position: relative; margin-right: 100px; padding: 0; max-width: 100%; } */ /* #div_grp{ float: left; max-width: 100%; padding: 0; } #div_grp label{ width: 30%; width: 30%; margin: 7px 0px; float: left; } #sel_grp{ width: 70%; margin: 0px; float: left; } */ /* #div_btn{ float: left; width: 20%; padding: 7px; } */ #btn_export{ padding: 8px 8px; } /* #div_rept_type label, #div_grp label{ margin-right:10px; } */ #mainTbl{ margin:0 auto; /* border:1px black solid; */ } #report_table{ overflow-x:auto; overflow-y:hidden; height:348px; } @-moz-document url-prefix() { #report_table{ height:345px; } } #report_table table{ width: 100%; /* border-collapse:collapse; border:1px black solid; */ } #report_table table thead tr:first-child th:first-child{ background:#FFFBDF; border:1px black solid; padding: 5px; font-size:14px; } #report_table table thead tr:first-child th:nth-child(2){ background:#E5E2C9; border:1px black solid; font-size:14px; } #report_table table thead tr:nth-child(2) th{ background:#DBCFC6; border:1px black solid; padding: 5px; font-size:13px; } #report_table table tbody{ font-size:13px; } #report_table table tbody tr:nth-child(odd){ background:#fff; } #report_table table tbody tr:nth-child(even){ background:#F0F1D5; border:1px black solid; } #report_table table tbody tr td{ border:1px black solid; padding:5px; } /*fix header table*/ /* table#reportTbl { width: 100%; Optional border-collapse: collapse; border-spacing: 0; border: 2px solid black; } */ /* table#reportTbl tbody, table#reportTbl thead { display: block; } */ /* thead tr th { height: 30px; line-height: 30px; text-align: left; } */ /* table#reportTbl tbody { height: 255px; overflow-y: auto; overflow-x: hidden; } */ /* tbody { border-top: 2px solid black; }*/ /* table#reportTbl tbody td, table#reportTbl thead th { width: 5%; Optional border-right: 1px solid black; } */ /*tbody td:last-child, thead th:last-child { border-right: none; } */ /****** Change Password *******/ #chngePwdDiv{ width:55%; margin:0 auto; margin-top: 40px; border:2px #36B377 solid; } #chngePwdDiv table{ width:100%; text-align:left; } #chngePwdDiv table tr td:first-child{ width:25%; padding-left:7px; } .label2{ font-size: 14px; margin-bottom: 5px; /* display: inline-block; */ } #change_pwd{ min-height: 460px; margin: 10px 0px; background-color: #fff; padding: 20px 20px; } #img_update{ color: #D9AB91; font-size: 12px; } #change_pwd p{ margin-bottom: 10px; } #change_pwd input[type="checkbox"]{ vertical-align: middle; margin-right: 5px; } #change_pwd input[type="text"], #change_pwd input[type="email"], #change_pwd input[type="password"]{ width: 260px; height: 35px; background-color: #fffff; border: none; margin-bottom: 10px; padding-left: 5px; } .input_disabled{ background-color: #D9D9D9 !important; } #submit_button{ width: auto; /* display: block; margin-top: 20px; */ float:left; position: relative; left: 10px; } #submit_button input[type="reset"], #submit_button input[type="button"]{ min-width: 140px; height:40px; font-size: 12px; border-radius: 5px; display:inline-block; /* border: 1px #0EC0FB solid; background: #069; */ color: #fff; font-weight: bold; } #submit_button input[type="reset"]{ background: #A6A6A6; /* border: 1px #595959 solid; */ } /**** Progress ****/ .divHalf{ width:48%; margin:0 0.5% 0 0; height:250px; overflow:hidden; /* border:1px black solid; */ display:inline-block; vertical-align: top; } .divHalf:nth-child(odd){ margin-left:1.5%; } .divFull{ width:98%; margin:0 0.5% 0 1.5%; /* height:250px; */ height:410px; overflow:hidden; /* border:1px black solid; */ display:block; vertical-align: top; } .divHalf table, .divFull table{ width:100%; font-size:13px; /* border-collapse:collapse; */ } .divHalf table th, .divHalf table td, .divFull table th, .divFull table td{ padding: 5px; /* width: 10%; */ } .divHalf table tbody tr:nth-child(odd), .divFull table tbody tr:nth-child(odd){ background:#ffffff; } .divHalf table tbody tr:nth-child(even), .divFull table tbody tr:nth-child(even){ background:#F0F1D5; } .tbl1 tr:nth-child(2) td:first-child, .tbl1 tr:nth-child(4) td:nth-child(2), .tbl1 tr:nth-child(4) td:nth-child(3), .tbl1 tr:nth-child(4) td:nth-child(4), .tbl1 tr:nth-child(4) td:nth-child(5), .tbl1 tr:nth-child(4) td:nth-child(6), .tbl1 tr:nth-child(4) td:nth-child(7), .tbl1 tr:nth-child(4) td:nth-child(8){ width: 11%; } .tbl2 tr:nth-child(2) td:first-child, .tbl2 tr:nth-child(3) td:nth-child(2), .tbl2 tr:nth-child(3) td:nth-child(3), .tbl2 tr:nth-child(3) td:nth-child(4){ width:22%; } .label { z-index: 1!important; } .highcharts-tooltip span { background-color:white; /* border:1px solid black; */ opacity:1; z-index:9999!important; } .tooltip { padding:10px; } /**** Progress ****/ /**** Custom Dashboard ****/ #selCriteria ul{ list-style-type:none; margin:0; padding:0; } #selCriteria ul li{ display:inline; } #selCriteria ul li a{ display:inline-block; text-decoration:none; color:#fff; /*#fff911; #FFFDA1; */ font-size:13px; padding:10px 28px; } #selCriteria ul li a:hover{ background: linear-gradient(to bottom, #008f4a 0%,#00753d 47%,#00582e 100%)#4EA06A; color: #000; /* padding:25px 28px; */ } #selCriteria ul li.menu_high{ background: linear-gradient(to bottom, #008f4a 0%,#00753d 47%,#00582e 100%)/*#5d5d5d #4EA06A */; margin: 0px; /* cursor: default; */ } #selCriteria ul li.menu_high a{ background: linear-gradient(to bottom, #008f4a 0%,#00753d 47%,#00582e 100%)/*#5d5d5d #4EA06A */; margin: 0px; /* cursor: default; */ } #innerDivLeft, #innerDivRight, #innerDivRightIndi{ background:#eeeeee; width:20%; height: 360px; /* height:auto; */ margin-right:0.24em; padding:10px; display:inline-block; vertical-align: top; } #innerDivLeft{ padding:10px 3px; } #innerDivRight{ width:79%; margin-right:0; background:#fefefe; padding:0; } #innerDivRightIndi{ width:83%; margin-right:0; background:#fefefe; padding:0; position: absolute; } .divLabel{ color:#4EA06A; display:block; font-size:14px; margin:5px 0px 10px 0px; } /* #divFilter{ height:335px; } */ #filters{ height:auto; overflow: auto; margin-bottom:3px; /* border:1px white solid; */ overflow-x: hidden; } #btn{ margin:0 auto; vertical-align:bottom; text-align:center; margin-top: 25%; } #btnFilter{ padding:10px 15px; border-radius:0; } #divAreaChart{ height:340px; /* overflow:auto; */ /* padding:10px;*/ /* border:1px red solid; */ } .jqueryslidemenu ul li ul li a{ height:50px !important; } #divAreaChartIndi{ height:438px; overflow:auto; /* padding:10px;*/ /* border:1px red solid; */ } #divQstn{ height:358px; overflow:auto; } #divQstn ul{ margin:0; padding:0; list-style-type:none; font-size: 14px; } #divQstn ul li{ background:#e0e0e0; border-bottom: 1px solid #a4a4a4; padding:25px 15px; } #divQstn ul li.current{ background:#75B746; } #divQstn ul li a{ text-decoration:none; color:#000; } .rightBarChartIndi { border: 2px solid #4EA06A; margin-bottom: 3px; }