body {
  padding-top: 150px;
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  background-color: #333;
  color:#F0F0F0;
}

.container { 
	padding:0;
}

.row { margin:0}

.red {color: #F20006}

.red-bg {background-color: #A02D30; color:#f0f0f0;}

.col-xs-0 { display:none;}

.page-header {border-bottom: 1px solid #BDBDBD;}


.table>thead>tr>td.danger, 
.table>tbody>tr>td.danger, 
.table>tfoot>tr>td.danger, 
.table>thead>tr>th.danger, 
.table>tbody>tr>th.danger, 
.table>tfoot>tr>th.danger, 
.table>thead>tr.danger>td, 
.table>tbody>tr.danger>td, 
.table>tfoot>tr.danger>td, 
.table>thead>tr.danger>th, 
.table>tbody>tr.danger>th, 
.table>tfoot>tr.danger>th { color:#333; }

.list-group-item { background-color: #5f5f5f; border:1px solid #444; padding: 15px 15px;}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { border-top: 1px solid #5E5E5E; }


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

.navbar { border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;  }

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

.topbar { background:#000 url(/assets_01/images/topbar.gif) no-repeat top center; height: 50px; padding-top:1px;}
.topbar .container {padding:0;}
.topbar .time h2 { margin-top:0; font-size:16px;}
.topbar .time small.date, .topbar .time h2.hour { text-align:right}
.topbar .navbar-brand { color: #777; background: rgba(0, 0, 0, 0) url(/assets_01/images/logo.png) no-repeat 0 0; width: 160px;}
.topbar .navbar-brand span {margin-left:-9999px}

.navbar-wrapper .container .topbar .container {
	padding-right: 0px;
	padding-left:  0px;
}

.navbar.navbar-red { background-color: #F20006; border:none}
.navbar-red .navbar-nav>li>a {color:#FFF0F0}
.navbar-red .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color:#FFF0F0; background-color:#BB0106}
.navbar-red .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color:#FFF0F0; background-color:#BB0106;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { color:#FFF0F0; background-color:#BB0106 }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color:#BB0106 }
.navbar-nav .open .dropdown-menu { background-color:#f0f0f0; }
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus { background-color:#BB0106; color:#f0f0f0}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus { background-color:#BD8E8F; color:#f0f0f0}
/*.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse { float:left!important; }

.navbar-toggle { float:left!important; margin-left:10px;}
*/

.navbar .navbar-right .dropdown { background-color: #800;}

.navbar-wrapper .container {
	padding-right: 15px;
	padding-left:  15px;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #f0f0f0;
}

.navbar-home {
	margin-left: 15px;
	margin-top:8px;
	padding: 9px 20px;
	background-color: transparent;
	background-image: none;
	color: #FFF0F0;
	border: none;
}

.navbar-home:hover, .navbar-home:focus, .navbar-home.active { color: #FFF0F0; background-color: #BB0106; }

.date-long {display:none;}

.date-short {display:block;}

.btn-danger { color: #FFF; background-color: #BB0106; border-color: #600;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {background-color: #F20006; border-color: #600;}


.form-control:focus {
border-color: #C40000;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(233, 102, 102, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(233, 102, 102, 0.6);
}

.navbar-nav .open .dropdown-menu>li>a {
	line-height: 24px;
}

/* CCTV
-------------------------------------------------- */

/* cctv base class */
.cctv {
  background-color: #333; 
}

.cctv .container { 
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;}

.video { height: auto;background:url(../images/bg_dark_sm.png) top left; /*background-color:rgba(0,0,0,.7);*/ padding:0 }

.video-js {margin: 6px auto 0px;background-color: transparent; border: 2px solid #6F6F6F; }

.video-js .vjs-tech  {padding:0px;}

.vjs-no-js {background-color: transparent}

.vjs-loading-spinner {display:none !important;}

.caption-box {
	text-align:center;
	padding:0;
}

.caption { background:url(../images/bg_dark_sm.png) top right;/*background-color:rgba(0,0,0,.7);*/ height: auto; padding-top:7px; color: white;}

.caption h2 { font-size:18px; margin-top:0; }

.caption .btn-lg {padding: 5px 14px; width:100%}

.caption .btn { 
	background-color:#F20006; border-color: #600; 
	-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  	-moz-box-shadow:    1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  	box-shadow:         1px 1px 3px 0px rgba(50, 50, 50, 0.75);
	
}

.vid-nav {width:320px; margin:0 auto; }

.caption-title { border-bottom:1px solid #888; margin-bottom: 10px;}

.thumbnail {margin-bottom:0px;}

.nearest_thumb {margin-bottom:10px;}


/* CONTENT
-------------------------------------------------- */

.content { background-color:#444 }

.currency-box {padding:10px 40px;}
.currency-box h1 span { font-size:14px; display:block;}
.currency-box .row { border-bottom: 1px solid #5e5e5e;}
.currency-box .row:hover { background: rgba(255,255,255,.1)}
.currency-box .row div { padding:14px;}
.currency-box small {margin-top:20px; display:block;}

.praytime-box {padding:10px 40px;}
.praytime-box h1 span { font-size:14px; display:block;}
.praytime-box .row { border-bottom: 1px solid #5e5e5e;}
.praytime-box .row:hover { background: rgba(255,255,255,.1)}
.praytime-box .row div { padding:14px;}
.praytime-box small {margin-top:20px; display:block;}

.weather-box {padding:10px 40px;}
.weather-box .heading {
	padding: 94px 10px;
	background: #5f5f5f;
	border-radius: 7px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
	margin-top: 20px;
}
.weather-box .header { font-size:60px;}
.weather-box h3 { margin:0;}
.weather-box .row { border-bottom: 1px solid #f0f0f0;}
.weather-box div {}
.weather-box small {margin-top:20px; display:block;}


/* Banner
-------------------------------------------------- */

/* banner base class */
.banner {
  clear:both;
  display:block;
  background-color:#555;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.75);
}

.banner .client img { width:100%;}

.banner .client { padding-left:0px; padding-right:0px;}

.banner .client img#big_bn {display:none;}
.banner .client img#sml_bn {display:block;}

.banner .client p {
		position: absolute;
		left: 0px;
		background: #BB0106;
		padding: 0px 20px 3px 7px;
		-webkit-border-bottom-right-radius: 20px;
		-moz-border-radius-bottomright: 20px;
		border-bottom-right-radius: 20px;
		font-size:11px;
		color:#FFC2C2; }

/* Overview
-------------------------------------------------- */

/* overview base class */
.overview {

  color: #f0f0f0;
  padding: 20px 15px 40px;
  font-size:14px;
}

.overview h2 { margin-bottom: 20px;  font-size:36px; font-weight:200;}

/* Featurettes
------------------------- */
.featurette { 
	padding: 20px 15px; 
	background-color:#f0f0f0; 
	color:#5a5a5a;
    -webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.75);
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.featurette .btn { 
	margin-top:10px; background-color:#F20006; border-color: #600; 
	-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  	-moz-box-shadow:    1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  	box-shadow:         1px 1px 3px 0px rgba(50, 50, 50, 0.75); 
}


/* marketing 
-------------------------------------------------- */

.marketing {
  /*padding: 42px 0 0 0;
  background-color:#303030;
  -webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.75);*/
  
}

.marketing .col-lg-10 {
  margin-bottom: 10px;
}
.marketing p {
  font-size:11px;
  margin-top:14px;
}
.marketing .col-xs-4 p {
  margin-right: 10px;
  margin-left: 10px;
}

.marketing img { width:30px;}

.marketing h3 { font-size:16px; font-weight:bold; text-transform:uppercase; text-align:center; margin-bottom:20px;}

.socmed { float:none; margin:0 auto;}

/* FOOTER CONTENT
-------------------------------------------------- */

footer .container { 
	background-color: #e1e1e1; color:#444; padding: 40px;
	-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  	-moz-box-shadow:    1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  	box-shadow:         1px 1px 3px 0px rgba(50, 50, 50, 0.75); 
	
}


/* FORM CONTENT
-------------------------------------------------- */
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto 40px;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.map { float:none;}

.pager li>a, .pager li>span { color:#F20006; border-radius:7px;}

.pager li>a:hover, .pager li>a:focus {
	background-color: #F20006;
	color:#FFF;
}


/* RESPONSIVE CSS
-------------------------------------------------- */


@media (min-width: 480px) { 

	.topbar .navbar-brand { width:330px;} 
	
	.caption h2 { font-size:20px; }
	
	
	
}


@media (min-width: 768px) {
	
	.col-xs-0 { display:block;}
	
	.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-left: -15px;
	}
	
	.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse { float:left!important; }
	
	.navbar-nav.navbar-right:last-child { margin-right: 0;}
	
	.topbar { height:100px; padding-top: 30px}
	
	.topbar .time h2 { font-size:34px;}
	
	.video { height: 320px; }
	
	.video-js {margin: 30px auto 0px; }
	
	.video-js .vjs-tech  {padding:0;}
	
	.vjs-no-js {background-color: transparent}
	
	.caption { height: 320px; padding-top:40px;}
	
	/*.video,.caption { height: auto;background:url(../images/bg_dark.png) top left;}*/
		
	
	.caption .btn-lg {padding: 7px 20px; }
	
	.caption .btn { 
		margin: 0 0 20px; width:100%; background-color:#F20006; border-color: #600; 
		-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    1px 1px 3px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         1px 1px 3px 0px rgba(50, 50, 50, 0.75);
		
	}
	
	
  .marketing {
    /*padding-right: 0;
    padding-left: 0;*/
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    /*margin-top: 20px;*/
  }
  .navbar-wrapper .container {
    padding-right: 0px;
    padding-left:  0px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left:  0;
  }


  .navbar-red .time { padding-right: 0;}


  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 36px;
  }
  
  .marketing h3 { text-align:center;}
  
  .date-long {display:block;}
  .date-short {display:none;}
  
  .banner .client img#big_bn {display:block;}
	.banner .client img#sml_bn {display:none;}

}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 70px;
  }
  .caption { height:390px; }
  
  .video { height:390px; }
  
  .video-js { width:400px !important; height:300px !important;}
  
  .marketing h3 { font-size:16px; font-weight:bold; text-align:center;}
  
  .map {float:left;}
  
  .vid-nav {width:400px; margin:0 auto;}
  
  .navbar-home {
	margin-left: 15px;
	padding: 15px 15px;
	margin-top: 0px;
  }
  
  .caption h2 { font-size:28px; }
  
}