@import url(reset.css);
@import url(bootstrap.css);
@import url(bootstrap-responsive.css);
/*@import url(../../../media/system/css/system.css);
@import url(../../system/css/system.css);
@import url(../../system/css/general.css);
*//* TEMPLATE CSS
*********************************************/
/*html,body {
  filter: url(../files/filters.svg#grayscale); 
  filter: gray;
  -webkit-filter: grayscale(1); 
}*/
html {overflow-y:scroll;}
/* LAYOUT
*********************************************/
/* BOOTSTRAP OVERRIDES*/
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color:#FDFCB0;
border-top-color:#FDFCB0;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color:#FDFCB0;
border-top-color:#FDFCB0;
}
.carousel-caption h4, .carousel-caption p {
color:#0044CC;
text-shadow:#ccc 1px 1px 1px;
}
.page-header {
border-color:#0044CC;
}
.well {
background: #fdfcb0; /* Old browsers */
background: -moz-linear-gradient(top,  #fdfcb0 0%, #f7f57e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfcb0), color-stop(100%,#f7f57e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fdfcb0 0%,#f7f57e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fdfcb0 0%,#f7f57e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fdfcb0 0%,#f7f57e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fdfcb0 0%,#f7f57e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfcb0', endColorstr='#f7f57e',GradientType=0 ); /* IE6-9 */
border:2px solid #0044CC;
}

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie7 .group {zoom:1;}

body.mceContentBody {background-color: #f7f57e; background-image: none;} 
p {
	text-shadow:1px 1px 1px #ccc;
}
.inner {padding:5px;}
object {max-width:100%;}
a,a:hover {color:#0044CC;}
body {
background: #0260da; /* Old browsers */
background: -moz-linear-gradient(top,  #0260da 0%, #022ada 40%, #0044CC 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0260da), color-stop(40%,#022ada), color-stop(100%,#0044CC)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0260da 0%,#022ada 40%,#0044CC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0260da 0%,#022ada 40%,#0044CC 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0260da 0%,#022ada 40%,#0044CC 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0260da 0%,#022ada 40%,#0044CC 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0260da', endColorstr='#0044CC',GradientType=0 ); /* IE6-9 */
padding:10px 0; 
}
#headermodule.well {
padding-left:0;
}
.headimg {
padding: 20px;
text-align: right;
}
#ponlogo {
width: 90%;
}
.logotext h1 {font-size: 1.5em; text-align: right;}
/*ANIMATION
@-moz-keyframes rotate-ponlogo {
    0% {
      -moz-transform: translateX(0%);
    }
    100% {
      -moz-transform: translateX(60%);
   }
}
#ponlogo 
{
    -moz-animation-name: rotate-ponlogo;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;      
}*/
.moduletable.well {
padding:0;
/*-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
-moz-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
position: relative;
z-index: 1;*/
}
.moduletable.well:hover {
/*-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
position: relative;
z-index: 1;*/
}
#content .well {
padding:5px;
}
.item-page img,.blog img {
margin: 0 10px 10px 0;
background: #0044CC;
padding:5px;
-moz-border-radius: 4px;
border-radius: 4px;
position: relative;
z-index: 1;
/*-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
-moz-transition-duration: 0.2s; 
-webkit-transition-duration: 0.2s; 
-o-transition-duration: 0.2s;
*/}
#main {
background:#FBF94D;
box-shadow:0px 0px 10px 1px #fff;
padding:10px;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Open Sans", sans-serif;
font-weight:800;
color:#0044CC;
margin:0 0 0.25em 0;
text-shadow:#ccc 1px 1px 1px;
}


/* Navigation */
.navbar-inner {
background: #f7f57e; /* Old browsers */
border:2px solid #0044CC;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfcb0', endColorstr='#f7f57e',GradientType=0 ); /* IE6-9 */
}
.level-1 {
font-family:"Open Sans", sans-serif;
font-weight:800;
font-size:150%;
margin:5px 10px;
text-align:center;
z-index:10;
}
.level-2 {
text-align:left;
}
.nav-pills > li > a {
position: relative;
border-top:1px solid #0E00DD;
background: #0260da; /* Old browsers */
background: -moz-linear-gradient(top, #0260da 0%, #022ada 40%, #0044CC 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0260da), color-stop(40%,#022ada), color-stop(100%,#0044CC)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0260da 0%,#022ada 40%,#0044CC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0260da 0%,#022ada 40%,#0044CC 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0260da 0%,#022ada 40%,#0044CC 100%); /* IE10+ */
background: linear-gradient(to bottom, #0260da 0%,#022ada 40%,#0044CC 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0260da', endColorstr='#0044CC',GradientType=0 ); /* IE6-9 */
}
.nav-pills > li > a.new:after {
  content: "NEW";
  width: auto;
  height: auto;
  background: red;
  color: white;
  position: absolute;
  border-radius: 5px;
  top: -20px;
  right: -20px;
  z-index: 100;
  font-size: 0.8em;
  padding: 6px;
  transform: rotate(14deg) ;
  -webkit-transform: rotate(14deg) ;
  -moz-transform: rotate(14deg) ;
  -o-transform: rotate(14deg) ;
  -ms-transform: rotate(14deg) ;
}
.navbar .nav > .active > a,
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
background:#0044CC !important;
color:#FBF94D !important;
text-shadow:#333 1px 1px 1px !important;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
-moz-transition-duration: 0.2s; 
-webkit-transition-duration: 0.2s; 
-o-transition-duration: 0.2s; 
transition-duration: 0.2s;
}
.dropdown-menu .active > a, 
.dropdown-menu .active > a:hover,
.dropdown-menu li > a:hover, 
.dropdown-menu li > a:focus, 
.dropdown-submenu:hover > a {
background:#FBF94D;
color:#0044CC;
}
.navbar .nav > li > a,.dropdown-menu a {
background:#0044CC;
text-shadow:#333 1px 1px 1px;
color:#FDFCB0;
}
.dropdown-menu a {
line-height: 190%;
}
.dropdown-menu {
background:#0044CC; /* Old browsers */
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom:6px solid #0044CC; /* Old browsers */
}
.footer .nav > li > a {
text-shadow:#333 1px 1px 1px;
color:#999;
text-shadow:none;background:transparent;border-top:0;font-size:100%;font-weight:bold;padding:10px;
}
.language {
text-align:right;
}
.language img {
width:30px;
}

.itp-socialbuttons-mod {width:160px !important;}
.itp-sb-right a {float:left;}

.moduletable {
margin-bottom:30px;
}
.moduletable h3 {
border-bottom:2px solid #0044CC;
}
#sidebar-right .moduletable h3 {
text-align:left;
}
.footer p {margin-top: 10px;}
.moduletable.poncarousel,.moduletable.poncarousel .carousel {
margin-bottom:0;
}

#gbrContactForm {
display:none;
}
.contact-position {
font-family: 'Open Sans', sans-serif;
font-weight: 800;
font-size: 150%;
color: #333;
}
.contact-address {
margin-bottom: 30px;
}
.contact-address{
font-size: 125%;
}
.contact-contactinfo{
font-size: 125%;
font-weight: bold;
}

video {
  width: 100%    !important;
  height: auto   !important;
}

/* CAROUSEL */
.carousel-inner {
  max-height: 300px !important;
}
.carousel-inner > .item {
  max-height: 300px !important;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
  width: 100%;
}
/*CONTACT MAP*/
#map {height:300px;}
#map img {max-width:none;}

.blog .item {margin-top: 2em;}

/*body,#main,.well,.nav-pills > li > a,.navbar-inner {
behavior: url(http://ponplace-ranong.com/j/templates/pon/js/PIE.php);
}*/

/* Media Queries
*********************************************/

/* Landscape phones and down */
@media (max-width:480px) { 
.dropdown-menu {
position:relative;
}
.level-1 {
margin:1px 0px;
width:97%;
}
/*Fix for scroll on mobile*/
.modal {
height: 500px; /* Set a default max height of the modal (adjusted later)*/
position: fixed; /* Display modal in the centre of your screen */
overflow-y: scroll; /*  Ensure that the modal is scroll-able */
-webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
}
.modal-body{
/* Increase the max height of the modal body to try & avoid both it,
 * and the modal container having scroll bars which results in odd behavior */ 
max-height: 2400px; 
overflow-x:hidden;
}   
.dropdown-menu {
max-width:100%; /* Old browsers */
}
.dropdown-menu li a{
white-space:normal; /* Old browsers */
}

}
 
/* Landscape phone to portrait tablet */
@media (max-width:767px) { 
.dropdown-menu {
position:relative;
}
.moduletable h3 {
font-size:150%;
border-bottom:3px solid #FF021B;
}
.logo,.headimg {text-align:center;}
/*Fix for scroll on mobile*/
.modal {
height: 300px; /* Set a default max height of the modal (adjusted later)*/
position: fixed; /* Display modal in the centre of your screen */
overflow-y: scroll; /*  Ensure that the modal is scroll-able */
-webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
}
.modal-body{
/* Increase the max height of the modal body to try & avoid both it,
 * and the modal container having scroll bars which results in odd behavior */ 
max-height: 2400px; 
overflow-x:hidden;
}   
.dropdown-menu {
max-width:100%; /* Old browsers */
}
.dropdown-menu li a{
max-width:250px; /* Old browsers */
white-space:normal; /* Old browsers */
}
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) { 
.moduletable h3 {
font-size:110%;
border-bottom:3px solid #FF021B;
}

}
 
/* Large desktop */
@media (min-width:1200px) { 

}