@font-face {
  font-family: 'allerregular';
  src: url('../css/aller_rg-webfont.woff2') format('woff2'),
       url('../css/aller_rg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url('../css/RRoboto-Medium-webfont.woff') format('woff'),
       url('../css/Roboto-Regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0px 0px 0px 0px;
  font-family: "roboto", "Sans Serif";
  font-size: 0.9em;
}

#background-01 {
  background-image: url('../images/wide-bg.png');
  background-size: 100% ;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  display: block;
  z-index: -200;
  position: absolute;
  top: 0px;
}

#background-02 {
  background-image: url('../images/small-square.png');
  background-color: #f2f2f2;
  background-repeat: repeat;
  width: 100%;
  height: 100vh;
  display: block;
  z-index: -300;
  position: fixed;
  top: 0px;
}

#Wrapper {
  width: 100%;
  height: 100%;
}

.text-dark-dark {
  color : #46464a;
}

#HeaderWrap {
  width: 100%;
  background-color: #24282e;
  position: relative;
  height: auto;
  height:145px;
  background-repeat: repeat-x;
}

#HeaderBanner {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  background-repeat: no-repeat;
}

#BodyWrap {
  width: 900px;
  margin-left: -450px;
  left: 50%;
  position:relative;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  border-right: solid 10px #fff;
  border-left: solid 10px #fff;
}
#TitleWrap {
  width: 900px;
  margin-left: -450px;
  left: 50%;
  position: relative;
  height: 100px;
  background-image: url("../images/title-header.png");
  background-repeat: no-repeat;
}
#TitleHeader {
  height: 100px;
  width: 900px;
  float: left;
  position: relative;
  background-repeat: no-repeat;
  text-align : center;
  font-weight: bold;
  color: #f2f2f2;
  font-size: 18px;
  line-height: inherit;
  vertical-align: middle;
  overflow: hidden;
}
#Logo {
  width: 110px;
  height: 100px;
  position: relative;
  display: block;
  background-image: url("../images/polri.png");
  background-repeat: no-repeat;
}

#NavSearchWrap {
  height: 40px;
  width: 900px;
  float: left;
  position: relative;
  margin-left: -450px;
  left: 50%;
}

#NavWrap {
  width: 900px;
  position: relative;
  height: 40px;
  margin-top: 0px;
  background-color: none;
  float: left;
}

#Search {
  width: 300px;
  height: 40px;
  float: right;
  position: relative;
}

#Footer {
  width: 100%;
  height: 150px;
  float: left;
  background-color: none;
  bottom: 0px;
  position: relative;
  display: block;
  background-color: #262626;
  color: #c4c2c2;
  padding-left: 0px;
}

#footerWrap {
  width: 900px;
  height: auto;
  float: left;
  position: relative;
  margin-left: -450px;
  left: 50%;
}

.leftFooter {
  width: 290px;
  float: left;
  height: auto;
  margin-right: 9px;
  position: relative;
  line-height: auto;
  border-right: dotted 1px #c4c2c2;
}

.centerFooter {
  width: 290px;
  float: left;
  height: auto;
  margin-right: 9px;
  position: relative;
  line-height: auto;
  border-right: dotted 1px #c4c2c2;
}

.rightFooter {
  width: 300px;
  float: left;
  height: auto;
  position: relative;
  line-height: auto;
}

#FlashNews {
  width: 1100px;
  height: 35px;
  margin-left: -550px;
  left: 50%;
  background-color: #ffd200;
  position: relative;
}

#TICKER a{
  text-decoration: none;
  color: #313131;
}

#TICKER a:hover {
  text-decoration: underline;
}

#TICKER{
  position: fixed;
  width: 990px;
  font-size: 0.9em;
  display: block;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  margin-left: 110px;
  text-transform: uppercase;
}

#FlashTitle {
  display: inline-block;
  width: 100px;
  padding-left: 5px;
  padding-right: 5px;
  height: 35px;
  float: left;
  background-color:  #313131;
  border-right: solid 2px #a77b01;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  color: #6d6d6d;
}

.TitleMod {
  text-transform: uppercase;
  width: 1000px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #313131;
  font-size: 1.5em;
  border-bottom: dotted 1px #e8ca3d;
}

.TitleMod span {
  width: 1080px;
  padding: 5px;
  margin-left: 5px;
  color:#e8ca3d;
  font-weight: normal;
}

/* NAVIGATION STYLE */
.BtnDropDown, .BtnDropDown ul{
  border: none;
  float: left;
  display: table-cell;;
  cursor: pointer;
  line-height: 39px;
  vertical-align: middle;
  background-repeat: repeat-x;
  z-index: 2;
  list-style: none;
}

.BtnDropDown >ul > li {
  position: relative;
  list-style: none;
}

.BtnDropDown > li > ul {
  display: none;
  position: absolute;
  background-color:  #313131;
  width: 300px;
  padding-left: 0px;
  min-width: 150px;
}

.BtnDropDown >li:hover > ul {
  display: block;
}

.BtnDropDown >li >ul >li >ul {
  display: none;
  position: absolute;
  width: 250px;
  margin-left: 300px;
  margin-top: -40px;
  background-color:  #313131;
  padding-left: 0px;
}

.BtnDropDown >li >ul >li {
  border-bottom: dotted 1px #ffcc00;
}

.BtnDropDown >li >ul >li >ul >li >ul {
  display: none;
  position: absolute;
  left: 100%;
}

.BtnDropDown >li >ul >li >ul >li {
  border-bottom: dotted 1px #ffcc00;
}

.BtnDropDown >li >ul >li:hover >ul {
  display: block;
}

.BtnDropDown a{
  display: block;
  width: auto;
  padding-left: 10px;
  padding-right:10px;
  padding-bottom: 0px;
  height: 40px;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  font-weight: lighter;
  font-size: 1em;
  color: #ffcc00;
  z-index: 2;
}

.BtnDropDown a:hover{
  background-repeat: repeat-x;
  background-color: #ffcc00;
  color: #313131;
}

.HomeNav a{
  display: table-cell;
  width: 30px;
  padding-left: 10px;
  padding-right:10px;
  height: 42px;
  background-color: #ffcc00;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1em;
  color: #ffcc00;
  float: left;
  background-image: url("../images/home-icon.png");
  background-repeat: no-repeat;
  z-index: 200;
}

.FlattBtn a:link {
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

.FlattBtn a:hover {
  font-weight: bold;
  text-transform: uppercase;
}

.HomeNav a:hover {
  background-color: #636363;
  background-image: url("../images/home-white-icon.png");
  background-repeat: no-repeat;
}

.ItemNav {
  position: relative;
  display: inline-block;
  margin: 0px;
  float: left;
  z-index: 200;
  margin-top: -13px;
}


.ArrowSubNav {
  display: block;
  height: 0px;
  width: 200px;
  background-image: none;
  border: none;
}


#LandingWrap {
  width: 900px;
  min-height: 300px;
  background-color : none;
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  float: left;
}

.WrapContent {
  width: 900px;
  min-height: 450px;
}

/* CONTENT LAYOUT */
.ContentWrapper {
  width: 900px;
  position: relative;
  background-color: red;
}
.RightSide {
  width: 200px;
  position: relative;
  float: right;
  min-height: 200px;
}

.TitleModule {
  width: 900px;
  min-height: 50px;
  height: auto;
  background-color: none;
  color: #313131;
  text-transform: uppercase;
  font-size: 1.8em;
  padding: 5px 5px 5px 0px;
  margin-top: 0px;
  margin-left: 0px;
  float: left;
  font-weight: normal;
  border-bottom: solid 3px #e8ca3d;
}

.title-module {
  min-height: 50px;
  height: auto;
  background-color: none;
  color: #313131;
  text-transform: uppercase;
  font-size: 1.8em;
  font-weight: normal;
  border-bottom: solid 3px #e8ca3d;
}

.TitleDescription {
  text-transform: capitalize;
  font-size: 0.6em;
  margin-top: 3px;
  margin-bottom: 0px;
  float: left;
  font-weight: normal;
  color: #313131;
}
.MapDistrict {
  float: left;
  position: relative;
  width: 250px;
}

.ArrowModule {
  width: 20px;
  height: 50px;
  position: relative;
  float: left;
  background-image: url("../images/arrow-module.png");

}

.ContentModule {
  width: 900px;
  position: relative;
  float: left;
}
.ContentRow {
  position: relative;
  float: left;
  width: 910px;
}
.ContentBox {
  width: 445px;
  min-height: 100px;
  float: left;
  position: relative;
  margin-bottom: 5px;
  overflow: hidden;
  background-color: none;
  font-size: 1em;
  display: table;
  margin-right: 10px;
}

.HeaderContentBox {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2em;
  padding: 5px 5px 0px 5px;
  height: 45px;
  background-image: url("../images/header-content-box.png");
  color: #3b2314;
  background-repeat: no-repeat;

}

.DetailContentBox {
  width: 398px;
  padding: 0px 5px 5px 5px;
  font-size: 0.9em;
}

.MapPicture {
  padding: 5px;
}

.MapPicture img {
  width: 245px;
}

.GoogleMapButton a{
  float: left;
  height: 45px;
  width: 250px;
  margin-left: 5px;
  margin-top: 0px;
  display: block;
  background-image: url("../images/google-map-btn.png");
  background-repeat: no-repeat;
}

.SubLeftSide {
  width: 250px;
  float: left;
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

.TitleSubLeftSide {
  width: 240px;
  margin-left: 5px;
  float: left;
  height: 35px;
  display: block;
  line-height: 35px;
  background-color:#313131;
  padding-left: 5px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  color: #fff;
}

.ContentSubLeftSide {
  width: 233px;
  margin-left: 5px;
  float: left;
  min-height: 20px;
  display: block;
  padding: 5px;
  border: dotted 1px #313131;
}

/* SEARCH ENGINE */
.SearchWrap {
  position: relative;
}

.BtnSearch{
  width: 50px;
  height: 40px;
  float: left;
  background-image: url("../images/search-btn.png");
  background-repeat: no-repeat;
  cursor: pointer;
}

.SearchInput  {
  width: 240px;
  height: 30px;
  font-size: 0.8em;
  float: left;
  position: relative;
  padding: 5px;
  background-image: url("../images/search-box.png");
  background-repeat: no-repeat;
}

.SearchInput input {
  border: 0px;
  width: 240px;
  background-color: transparent;
  margin-top: 5px;
  color: #ffffff;
  font-size: 1em;
}

/* TABLE MODULE */
.TblModule {
  float: left;
  position: relative;
  padding-top: 0px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  width: 820px;
  margin-left: 5px;
}

.RowModule {
  width: 815px;
  position: relative;
  float: left;
  border-bottom: dotted 1px #000;
  background-color: #e1f5fe;
}

.ObjectPDF {
  width: 815px;
  height: 800px;
}

.RowModule a:hover {
  text-decoration: underline;
}

.ColNo {
  float: left;
  position: relative;
  width: 30px;
  height: 40px;
  padding: 5px;
  display: block;
  background-image: url("../images/number-box.png");
  background-repeat: no-repeat;
  font-weight: bold;
  font-size: 1.2em;
  color: #ffffff;
}

/* NEWS */
.HeaderContentNews {
  text-transform: capitalize;
  font-weight: bold;
  font-size: 1.3em;
  padding: 5px 5px 0px 0px;
  min-height: 45px;
  color: #303030;
  background-color: none;
}

.HeaderContentNewsDetail {
  text-transform: capitalize;
  font-weight: bold;
  font-size: 1.5em;
  padding: 5px 5px 0px 0px;
  min-height: 45px;
  color: #303030;
  background-color: none;
}

.ShortContentNews{
  width: 350px;
  height: 120px;
  padding: 5px 5px 5px 0px;
  font-size: 0.9em;
  overflow: hidden;
  padding-left: 0px;
  border-bottom: solid 1px #0066ff;
}

.NewsDetail{
  width: 650px;
  margin-top: 10px;
  padding: 0px 0px 0px 0px;
  font-size: 0.9em;
  overflow-x: hidden;
}

.NewsDetail img {
  width: 650px;
}

.ImgNews {
  width: 398px;
  height: 150px;
  padding: 5px 0px 5px 0px;
  font-size: 0.9em;
}


.ImgNews img {
  height: 150px;
}

.DetailImgNews {
  width: 650px;
  height: auto;
  padding: 0px 0px 5px 0px;
  font-size: 0.9em;
  overflow: hidden;
}

.DetailImgNews img {
  width: 650px;
}

.DetailImgNews p {
  line-height: 1.5;
}

.ReadMore a{
  font-weight: bold;
  text-decoration: none;
  color: #3b2314;
}

.ContentBoxNewsDetail {
  width: 650px;
  min-height: 100px;
  float: left;
  position: relative;
  border: none;
  margin-bottom: 5px;
  margin-left: 0px;
  overflow: hidden;
  background-color: #none;
  font-size: 1em;

}

/* GALLERY */
.DescGalBox {
  text-transform: capitalize;
  font-weight: normal;
  font-size: 0.9em;
  padding: 5px 5px 0px 5px;
  min-height: 45px;
  color: #cbc6bf;
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
}

.ImgGal {
  width: 398px;
  height: 184px;
  padding: 5px 5px 5px 5px;
  font-size: 0.9em;
  overflow: hidden;
}

.ImgGal img{
  width: 398px;
  height: 184px;
}

/* TPS */
.BoxNoTps a {
  display: block;
  cursor: pointer;
  min-height: 40px;
  width: 193px;
  background-color: green;
  line-height: 40px;
  text-decoration: none;
  text-align: center;
  margin: 3px;
  position: relative;
  float: left;
  background-color: #ca4226;
  font-weight: bold;
  text-transform: uppercase;
  color: #dbd7d3;
  border-bottom: solid 2px #93382a;
  border-right: solid 2px #93382a;
  border-top: solid 2px #fc9b8b;
  border-left: solid 2px #fc9b8b;
}

.BoxNoTps a:hover {
  background-color: #f7931d;
  color: #303030;
}

.TpsDetail {
  display: none;
  width: 398px;
  float: left;
  background-color: green;
}

.KelBox {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  padding: 5px 5px 0px 5px;
  min-height: 35px;
  color: #303030;
  margin-top: 5px;
  position: relative;
  float: left;
  width: 398px;
  background-image: url("../images/header-tps-kelurahan.png");
  background-repeat: no-repeat;

}

/* INFO */
.info {
  width: 820px;
  min-height: 75px;
  background-color: #ed2d65;
  float: left;
  position: relative;
  padding: 5px;
  display: block;
  line-height: 75px;
  font-size: 1em;
  font-weight: bold;
  color: #303030;
  text-transform: uppercase;
  text-align: center;
}

.info a{
  width: 90px;
  min-height: 25px;
  background-color: #54ba69;
  float: left;
  position: relative;
  padding: 5px;
  display: block;
  line-height: 25px;
  font-size: 1em;
  font-weight: bold;
  color: #dbd7d3;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  margin-left: 380px;
}

.info a:hover {
  background-color: #f7931d;
}

/* CONTENT FOR SOP */
.SOP {
  width: 900px;
  position: relative;
  float: left;
}

.LeftSide {
  Width: 680px;
  position: relative;
  float: left;
}

.JudulSOP {
  font-size: 2.6em;
  color: #24282e;
}

.RingkasanSOP {
  font-weight: 0.9em;
  color: #706d6d;
}

.IsiSOP {
  color: #24282e;
  margin-top: 10px;
}

.BtnRespon {
  background-image: url("../images/btn-respon.png");
  background-repeat: no-repeat;
  width: 400px;
  float: left;
  height: 60px;
  position: relative;
  margin-top: 3px;
  line-height: 60px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.3em;
  color: #1e1e1e;
}
.BtnRespon a {
  color: #1e1e1e;
  display: block;
  text-decoration: none;
}
.BtnRespon a:hover {
  background-image: url("../images/btn-respon-hover.png");
  background-repeat: no-repeat;
  color: #fff;
}

/* PROFIL BHABIN */
.tableBhabin {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 900px;
}

.fotoBhabin {
  width: 155px;
  float: left;
  height: auto;
  background-color:  none;
  padding-right: 5px;
  display: block;
  position: relative;
}

.fotoBhabin img {
  width: 150px;
  height: auto;
}

.rowBhabin {
  width: 900px;
  margin-bottom: 5px;
  border-bottom: dotted 1px #24282e;
  display: block;
  position: relative;
  float: left;
  color : #24282e;
}

/* MODAL */
.modal {
   display: none; /* Hidden by default */
   position: relative; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


#modalDialog{
  display: none;
  position: fixed;
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  background-color: rgba(0,0,0,0.4);
  z-index: 1;
}

.ContentRow input, .ContentRow textarea {
  border: solid 1px gray;
  border-radius: 5px;
  padding: 5px;
  font-family: "allerregular", "Sans Serif";
}

.content-link-list {
  text-transform: none;
  text-decoration: none;
  color: #0073e6;
}


.PollResult {
  position: relative;
  float: left; 
  top: 10px;
  border: solid 1px#004d99;
  border-radius: 0.2em;
  margin-left: 0px;
  width: 785px; 
  padding: 5px;
  min-height: 100px; 
  background: rgba(153, 204, 255,.5);
  display: block;
  margin-bottom: 5px;
}

.StandardBtn {
  background-color: transparent;
  border: none;
  width: 70px;
  height: 40px;
  cursor: pointer;
  background-image: url("../images/btn-70x40.png");
  margin-top: 5px;
  margin-bottom: 5px;
  text-transform: uppercase;
  background-repeat: no-repeat;
}