@font-face
{
    font-family: times_roman;
    src: url('font/times_roman.ttf');
}
@font-face
{
    font-family: times_bold;
    src: url('font/Times_Bold.ttf');
}
@font-face
{
    font-family: times_bi;
    src: url('font/Times_Bold_Italic.ttf');
}
@font-face
{
    font-family: futura;
    src: url('font/FuturaStd.ttf');
}
.clear{
    clear: both;
}
.hide{
    display: none;
}
/* default */
body, h1, h2, h3, h4 { margin: 0; padding: 0; }
body, html{ height: 100%; margin: 0; padding: 0; font-family: 'times_roman'}

/* header sidebar left */
#leftWrapper{
    width: 26%;
    height: 100%;
    float: left;
    z-index:10;
    position: relative;
    background: #FFF;
    box-shadow: 0 0 8px #AAA ;
    -webkit-box-shadow: 0 0 8px #AAA ;
    -moz-box-shadow: 0 0 8px #AAA ;
}
#leftWrapper #logo {
    text-align: center;
    margin: 30px 0;
    position: relative;
}
#leftWrapper #logo > a{
    position: relative;
    z-index: 9;
}
#leftWrapper #menu{
    background: url('../images/shadow.png') repeat-x;
    padding: 0 17%;
    padding-top: 20px;
}
#leftWrapper #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#leftWrapper #menu > ul > li > a{
    transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
}
#leftWrapper #menu > ul > li {
    border-bottom: 1px solid #DDD;
}
#leftWrapper #menu > ul > li > a {
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: #808285;
    text-transform: uppercase;
    width: 100%;
    display: block;
    padding: 25px 0px;
    text-align: center;
}
#leftWrapper #menu ul li:last-child{
    border-bottom: none;
}
#leftWrapper #menu ul li a:hover , #leftWrapper #menu ul li a.choosen {
    color: #ccad84;
}
#leftWrapper #menu > ul > li ul li a {
    color: #808285;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 0;
    display: block;
}
#leftWrapper #menu > ul > li ul li a:hover, #leftWrapper #menu > ul > li ul li a.act {
    color : #7fb8d3;
    font-weight: bold;
    font-style: italic;
}
#leftWrapper #menu > ul > li ul {
    display: none;
    margin: 0px 13px 20px;
}
#leftWrapper #socmed {
    position: absolute;
    border-top: 1px solid #DDD;
    width: 70%;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px 0;
}
#leftWrapper #socmed ul {
    list-style: none outside none;
    margin: auto;
    padding: 0;
    width: 115px;
}
#leftWrapper #socmed ul li a {
    text-decoration: none;
    color: #808285;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 10px 0;
    display: block;
}
#leftWrapper #socmed ul li.agoda {
    padding: 0;
    width: 99px;
}
#leftWrapper #socmed ul li.agoda a {
    padding: 20px 0;
}
#leftWrapper #socmed ul li a:hover {
    color : #7fb8d3;
}
#leftWrapper #socmed ul li{
    padding-left: 39px;
    margin: 3px 0;
}
#leftWrapper #socmed ul li.fb{
    background:url('../images/fb.png') no-repeat left center;
}
#leftWrapper #socmed ul li.tw{
    background:url('../images/tw.png') no-repeat left center;
}
#leftWrapper #socmed ul li.agoda{
    margin-top: 10px;
    background:url('../images/agoda.png') no-repeat left center;
}

/* sidebar right */
#rightWrapper{
    width: 74%;
    height: 100%;
    float:left;
    position: relative;
}
#rightWrapper #content{
    position: absolute;
    font-size: 14px;
    z-index: 2;
    left: 0;
    right: 0;
    top:7%;
    bottom: 7%;
    margin: auto;
    width: 70%;
    background: rgba(255,255,255,0.9);
    padding: 7% 10%;
    padding-bottom: 0;
    overflow: auto;
}
#rightWrapper #contact-container{
    position: absolute;
    font-size: 14px;
    z-index: 2;
    left: 0;
    right: 0;
    top:7%;
    bottom: 7%;
    margin: auto;
    width: 90%;
    background: rgba(255,255,255,0.8);
}

#rightWrapper #contact-container #content {
    width: 40%;
    padding: 7% 10%;
    padding-bottom: 0;
    margin: 0;
    height: 86%;
    background: transparent;
    font-size: 14px;
    top: 0;
}
#content .head-content{
    color: #978975;
    font-family: "futura";
    font-weight:normal;
    text-transform: uppercase;
    line-height: 25px;
}
#rightWrapper #content p, #rightWrapper #content,#rightWrapper #content a{
    font-family: times_roman;
    line-height: 25px;
    color: #7e7e7e;
    text-decoration: none;
}
#rightWrapper  #content ul.news a{
    line-height: 20px;
}
#rightWrapper #content p strong{
    /*cursor: pointer;*/
}
#rightWrapper #content a{
    color: #7fb8d3;
}
/* project page */
.show{
    display: block;
}
#leftProject{
    opacity: 0;
    width: 37%;
    height: 100%;
    float:left;
    z-index: 9;
    position: relative;
    box-shadow: 0 0 8px #AAA ;
    -webkit-box-shadow: 0 0 8px #AAA ;
    -moz-box-shadow: 0 0 8px #AAA ;
}
#leftProject #content{
    padding: 0 8%;
    height: 100%;
}
#leftProject #content .contentHeader{
    padding-top: 100px;
    height: 11%;
}
#leftProject .category {
    position: relative;
    height: 50%;
    width: 100%;
    content: "";
    display: table;
    margin-top:10px;
}
#leftProject .category:before, #leftProject .category:after{
    clear: both;
}
#leftProject .category .categoryContent {
    display: none;
    height: 100%;
    overflow: auto;
    color: #7e7e7e;
    font-size: 14px;
    padding: 10px;
    line-height: 25px;
}
#leftProject .category .packageContent {
    display: none;
    width: 100%;
    height: 100%;
    color: #7e7e7e;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 30px;
    position: absolute;
}
#leftProject .category .packageInner {
    color: #7E7E7E;
    height: 100%;
    width: 80%;
    overflow: auto;
    padding: 0 10%;
    position: absolute;
    line-height: 25px;
}
#leftProject .category .navigator {
    bottom: -20px;
    left: 50%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}
#rightProject {
    float: left;
    height: 100%;
    position: relative;
    width: 37%;
    background: #F7F7F7;
}
#leftProject #content .inner-package{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#leftProject #content > ul, #leftProject .category > ul{
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    content: "";
    display: table;
    list-style: none outside none;
    margin: 30px 0 0;
    padding: 8px 0;
    width: 100%;
}
#leftProject #content > ul li ,#leftProject .category > ul li { 
    display: inline; 
    border-left: 1px solid #CCC; 
    padding-left: 0.4em;
    padding-right: 0.4em;
}
#leftProject #content > ul li:first-child, #leftProject .category > ul li:first-child {
    border-left: none; 
}
#leftProject #content > ul li a,#leftProject .category > ul li a {
    font-size: 12px;
    text-decoration: none;
    color: #7e7e7e;
    text-transform:uppercase;
}
#leftProject #content > ul li a:hover , #leftProject #content > ul li a.showed,
#leftProject .category > ul li a:hover , #leftProject .category > ul li a.showed {
    color: #7fb8d3;
}
#leftProject .package{
    height: 38px;
}
.fullProject{
    width: 74% !important;
}
.separator{
    border-top: 1px solid #DDD;
}
.block{
    display: block !important;
}

#rightWrapper #content ul.news {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    margin-top: 20px;
    display:table;
    content: "";
    width:100%;
    height: 82%;
}
#rightWrapper #content .news-padding{
    margin: auto;
    position: relative;
    width: 85%;
    height: 100%;
}
.news-padding img {
    margin-right: 10px;
    margin-top: 20px;
}
#rightWrapper #content ul.news:before,#rightWrapper #content ul.news:after {
    clear: both;
}
#rightWrapper #content ul.news h4{
    text-transform: uppercase;
}
#rightWrapper #content ul.news li {
    float: left;
    margin-bottom: 20px;
    margin-right: 5%;
    width: 30%;
}
#rightWrapper #content ul.news li img {
    max-width: 100%;
}
#rightWrapper #content ul.news li:nth-child(3), #rightWrapper #content ul li:nth-child(6) {
    margin-right: 0;
}
#rightWrapper #content ul.news li a {
    text-decoration: none;
    color: #7e7e7e;
    font-weight: normal;
    font-size: 14px;
}
#rightWrapper #content ul.news li a:hover {
    color: #ccad84;
}
#rightWrapper #content .pagination{
    border-top: 1px solid #CCCCCC;
    bottom: 0;
    position: absolute;
    right: 0;
    width: 100%;
}
#rightWrapper #content .pagination ul {
    float: right;
    list-style: none;
    margin: 10px 0;
    padding: 0;
    padding-bottom: 20px;
}
#rightWrapper #content .pagination ul li {
    float: left;
    margin-left: 20px;
}
#rightWrapper #content .pagination ul li a {
    color: #7e7e7e;
    text-decoration: none;
}
#rightWrapper #content .pagination ul li a:hover,#rightWrapper #content .pagination ul li a.onpage,
#rightWrapper #content .pagination ul li.selected a {
    color: #7FB8D3;
}

/* Contact Page */
#map-container{
    float: right;
    height: 96%;
    padding: 1%;
    width: 38%;
    text-align: right;
}
#map-container img{
    max-width: 100%;
    max-height: 100%;
    display: none;
    cursor: pointer;
}
#map-container img.show{
    display: block;
}
/* Maps google */
#map-background{
    height: 100%;
    width: 100%;
    background: #EEE;
    position:absolute;
    top: 0;
    left: 0;
    z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
    background: url('../images/contact.jpg');
    background-size: cover;
}
#map-canvas{
    height: 100%;
    width: 100%;
}


/* Content */
table tr td, table tr th {
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCC;
    line-height: 15px;
}
table#no-border tr td, table#no-border tr th {
    border: none;
}
table tr td:last-child {
    border-right: none;
}
table tr:last-child td,table tr:last-child th {
    border-bottom: none;
}

.album .album-list{
    cursor: pointer;
    float: left !important;
    margin-right: 2%;
    width: 30%;
}
.album .album-list img{
    max-width: 100%;
}
/* responsive */
[id*="responsive-"]{
    display: none;
}