/*
Theme Name: Front Desk Tip
Theme URI: http://www.phistream.com/
Author: PhiStream
Author URI: http://www.phistream.com/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frontdesktip
*/

#logo { display: inline-block; width: 70%; }
.header-search { display: inline-block; width: 29%; vertical-align: middle; }
.header-search input { vertical-align: middle; }
.header-search input#searchsubmit { background: none; background-color: #000; border: none; padding: 5px; }

a.search-title { color: blue; text-decoration: underline; }

div.wrap.fdt{max-width: 960px; width: 100%; margin: 0px auto;}

table.fdt_settings{width:95%;}
table.fdt_settings tr th{text-align: left;}
table.fdt_settings tr th, table.fdt_settings tr td{padding: 5px;}

h2.fdt {margin: 20px 0px; border-bottom: 2px solid}

.clear{clear:both;}

/************** comments **************/

label.mandatory::after{
	content: " *";
	color: #ff0000;
}


#addreview .form-group {width: 100%; margin: 10px;}
#addreview .form-group div.label, #addreview .form-group div.input {display: inline-block; vertical-align: middle;}
#addreview .form-group div.label {width: 40%;}
#addreview .form-group div.input {width: 30%; text-align: left;}
#addreview .form-group div.input label{padding: 5px;}
#addreview .form-group p.description {font-style: italic; font-size: smaller;}

#addreview .form-group input[type="text"],
#addreview .form-group input[type="email"],
#addreview .form-group input[type="file"],
#addreview .form-group textarea,
#addreview .form-group select
{width: 100%;}

#addreview .form-group input[type="file"] {border: none;}

#addreview .invalid{background-color: yellow;}


/************** rating **************/

article {
    padding-left: 50px; /* arbitrary, to expose the "zero stars" area half a star to the left of the first star.*/
}

.star-rating {
    margin: 0 auto;
    display:inline-block;
}
/* radio button stars */

/* you can easily stuff the generation of these repetitive chunks of CSS into a server-side language like ASP */
.rb0:checked ~ .rating,
label.rb0l:hover ~ .rating
{
    width: 0px; /* no stars */
} 

.rb1:checked ~ .rating,
label.rb1l:hover ~ .rating
{
    width: 16px; /* half a star */
} 

.rb2:checked ~ .rating,
label.rb2l:hover ~ .rating
{
    width: 32px; /* a star */
} 

.rb3:checked ~ .rating,
label.rb3l:hover ~ .rating
{
    width: 48px; /* 1.5 stars */
}

.rb4:checked ~ .rating,
label.rb4l:hover ~ .rating
{
    width: 64px; /* 2 stars */
}
.rb5:checked ~ .rating,
label.rb5l:hover ~ .rating
{
    width: 80px;
}
.rb6:checked ~ .rating,
label.rb6l:hover ~ .rating
{
    width: 96px;
}
.rb7:checked ~ .rating,
label.rb7l:hover ~ .rating
{
    width: 112px;
}
.rb8:checked ~ .rating,
label.rb8l:hover ~ .rating
{
    width: 128px;
}
.rb9:checked ~ .rating,
label.rb9l:hover ~ .rating
{
    width: 144px;
}
.rb10:checked ~ .rating,
label.rb10l:hover ~ .rating
{
    width: 160px; /* 5 stars */
}

.star-rating label.star {
    width: 16px; /* half star */
    left: -16px; /* half star */
    padding: 0;
    height: 40px; /* whole star + 2x padding (4px each for top and bottom) */ 
    position: relative;
    z-index: 3;
    float: left;
}

.star-rating label.star.last {
    width: 32px;
}

/* hide inputs (RBs and their labels) */
.star-rating input[type=radio],
.star-rating label.rb
{
    display: none;
}

/* using icons found at http://www.easyicon.cn/language.en/icondetail/523835/ */
.rating {
    background: url(../images/star-fill.png) repeat-x top left;
    position: relative;
    z-index: 2;
    top: 4px; /* 1x padding */
    height: 32px; /* whole star */
    width:0px;
}

.rating-bg {
    background: url(../images/star-empty.png) repeat-x top left;
    position: relative;
    z-index: 1;
    top: -28px; /* 1 whole star - 1x padding */
    height: 32px; /* whole star */
    width: 160px;
}

/* IE8 fallback to radio buttons */
.ie8 .star-rating input,
.ie8 .star-rating label.rb
 {
    display: inline-block;
}

.ie8 .rating,
.ie8 .rating-bg,
.ie8 .star-rating label.star {
    display: none;
}

/************** rating **************/
/************** comments **************/

/************** single **************/

.star-ratings-css {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 25px;
  position: relative;
  padding: 0;
  text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css .star-ratings-css-top {
  color: #e7711b;
  padding: 0;
  text-shadow: 0px 1px 0 #ab5414;
  position: absolute;
  z-index: 1;
  display: block;
  left: 0px;
  overflow: hidden;
}
.star-ratings-css .star-ratings-css-bottom {
  z-index: 0;
}

#hotel .details h2.fdt{margin: 0px; border: none; border-bottom: none;}

#hotel .details .stats {width: 95%; margin: 0px;}
#hotel .details .stats .stats1 {float: left; width: 64%;}
#hotel .details .stats .stats1 table tr td {margin: 0px 5px;}
#hotel .details .stats .stats2 {float: right; width: 35%}
#hotel .details .stats .stats2 .percent{font-size: 60px; font-weight: bold;}

#hotel .details table, #hotel .details table tr, #hotel .details table, #hotel .details table tr td {border: none; padding: 0px; margin: 0px;}
#hotel .details table tr td.stars {width: 130px}
#hotel .details td.separator::before {content: "| "; color: gray;}
td.separator::after {content: " |"; color: gray;}

#hotel .minidetails {margin: 0px auto; }
#hotel .minidetails .left {float: left; width: 60%; padding-top: 20px;}
#hotel .minidetails .right {float: right;}
#hotel .actions .sorting {float: left; width: 40%;}
#hotel .actions .paging {float: right; width: 55%;}

#hotel .comment:nth-child(odd) {background-color: #ffffff;}
#hotel .comment:nth-child(even) {background-color: #ECECEC; border: 1px solid #D5D4D4;}
#hotel .comment {margin: 20px 0px;}
#hotel .comment .upgrade{float: left; width: 20%; }
#hotel .comment .story {overflow: auto;}
#hotel .comment .story .heading {margin-bottom: 10px;}
#hotel .comment .story .heading span{margin-right: 30px;}
#hotel .comment .story .epic {margin: 10px 0px;}
#hotel .comment .story .images img{width: 200px;}

#hotel ul.page-numbers {margin: 0px; display: inline;}
#hotel ul.page-numbers li {border: 1px solid #cccccc; list-style: none; display: inline; padding: 5px;}
#hotel span.page-numbers.current {font-weight: bold;}

#hotel .addreview{background: #67ab50; border: #67ab50;}
#hotel .upgrade {text-align: center;}
#hotel .upgrade .left {margin: 10% 0px;}
#hotel .upgrade .left img.yes, #hotel .upgrade .left img.no {width: 50%;}
#hotel .upgrade .left .name {font-weight: bold;}

#hotel .image{position: relative; width: 100%; height: 400px;}
#hotel .image .inner-image{position: absolute; left: 0px; height: 400px; width: 100%; overflow:hidden;}
#hotel .image img{width: 100%; position: absolute; bottom: -50%;}

.links {border-bottom: 5px solid #000000; }
.links ul {list-style: none; text-align: right; margin-bottom: 0px}
.links ul li {display: inline; background-color: black; padding: 5px; border-radius: 5px 5px 0px 0px}
.links ul li a {color: #ffffff;}

/************** single **************/

.headerimage div {width: 50%; color: #A9D1D4; font-size: 20px; margin-left: 10px;}
.headerimage div h1 {color: #ffffff; font-size: 30px; margin: 0px}
.headerimage div ul {list-style: url("../images/diamond.png")}

/************** top hotels **************/
#tophotels .hotels .hotel:nth-child(odd) {background-color: #ffffff;}
#tophotels .hotels .hotel:nth-child(even) {background-color: #ECECEC; border: 1px solid #D5D4D4;}
#tophotels .hotels .hotel {margin: 5px; color: #3D6C72;}
#tophotels .hotels .hotel a {color: #3D6C72;}
#tophotels .hotels .hotel .logo, #tophotels .hotels .hotel .details, #tophotels .hotels .hotel .conversion {float: left;}
#tophotels .hotels .hotel .logo, #tophotels .hotels .hotel .conversion {width: 25%; text-align: center}
#tophotels .hotels .hotel .details {width: 50%;}
#tophotels .hotels .hotel .details .heading .name {text-decoration: underline; font-size: 30px; margin-right: 40px; }
#tophotels .hotels .hotel .details .heading .reviews {font-size: 30px;}
#tophotels .hotels .hotel .logo {margin: 25px 0px;}
#tophotels .hotels .hotel .logo img {width: 70%; margin: 30px 0px;}
#tophotels .hotels .hotel .conversion {text-align: center}
#tophotels .hotels .hotel .conversion .percent {font-size: 60px; color: #000000}
#tophotels .hotels .hotel .conversion label {font-size: 30px; color: #35656C}
#tophotels .hotels .hotel .booking .label {color: #D5D4D4}
#tophotels .hotels .hotel .booking .label a {font-weight: bold;}
#tophotels .hotels .hotel .booking a, #tophotels .hotels .hotel .hotelpage a {text-decoration: underline;}
#tophotels .hotels .hotel .blurb {margin-top: 10px; }
#tophotels .hotels .hotel .hotelpage {margin-top: 10px; font-weight: bold;}
#tophotels .hotels.half {float: left; width: 60%;}
#tophotels .newcomments {float: right; width: 36%; background: #ECECEC; border-radius: 15px; padding: 10px;}
#tophotels .newcomments h2 {font-size: 25px; text-align: center;}
#tophotels .newcomments .heading {font-weight: bold;}
#tophotels .newcomments .comments {margin-top: 10px}
#tophotels .newcomments .comments .comment {margin-top: 10px}
#tophotels .newcomments .comments .comment .commenter {font-weight: bold;}
#tophotels .newcomments .comments .comment .blurb {}
#tophotels .website_tips {background: #ECECEC; border-radius: 15px; padding: 10px; width: 100%}
/************** top hotels **************/

/************** top comments **************/
#topcomments .comments .comment:nth-child(odd) {background-color: #ffffff;}
#topcomments .comments .comment:nth-child(even) {background-color: #ECECEC; border: 1px solid #D5D4D4;}
#topcomments .comments .comment .logo {float: left; width: 25%}
#topcomments .comments .comment .logo img {width: 50%}
#topcomments .comments .comment .story .readmore {margin-top: 20px}
#topcomments .comments .comment .story .readmore, #topcomments .comments .comment .story .readmore a {color: #383838;}
#topcomments .comments .comment .story .readmore a {text-decoration: underline}
#topcomments .comments .comment {margin: 20px 0px;}
#topcomments .comments .comment .story {overflow: auto;}

/************** top comments **************/

#footer {text-align: center; width: 100%}
#footer img {vertical-align: bottom; max-width: 100%;}
#footer .links {width: 100%; background-color: #000000; color: #4A7998;}
#footer .links .link a{color: #4A7998; text-decoration: underline}
#footer .links .link {float: left; width: 24%;  padding: 2px}
#footer .disclaimer {margin: 20px auto; color:#383838; text-align: center; font-size: 12px;}

/************** extra **************/
.hotel-img-box {background-color: #fff; z-index: 2; left: 30px; top: 30px; width: 340px; height: 390px; min-height: 300px; max-height: 390px; padding: 10px; position: absolute; overflow: visible; box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.4); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.byline { margin-left: 5px; }

.gstl_50 { line-height: 1; border: none !important; }
.gsib_a, .gsib_b, .gsc-input { padding: 0px !important; border: none !important; }
.gsc-input-box-focus { box-shadow: none !important; }
.gsc-search-button { border: none !important; }
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { background: none !important; background-color: #000 !important; border: none !important; height: 25px !important; width: 25px !important; margin-top: 0px !important; margin-bottom: 2px; min-width: 25px !important; padding: 5px !important; }
.widget-area { margin-top: 10px; }
.headerimage { background-size: contain; }
.comment .story .images img { max-width: 100%; max-height: 350px; }

.hotel-topstats > div { display: inline-block; }
.hotel-bottomstats > div { display: inline-block; }
.hotel-topstats .separator::before, .hotel-bottomstats .separator::before {content: "| "; color: gray;}
.hotel-topstats .hotel-approved { padding: 0px 10px; }
.hotel-bottomstats .phone { padding: 0px 10px; }

/************** media queries **************/
@media (max-width: 845px) {
    #hotel .minidetails .left, #hotel .minidetails .right { float: none; width: 100%; text-align: center; }
}

@media (max-width: 830px) {
    #tophotels .hotels.half { width: 100%; float: none; }
    #tophotels .newcomments { width: 50%; float: none; margin: 0px auto; }
}

@media (max-width: 800px) {
    #hotel .details .stats { width: 100%; }
    #hotel .details .stats .stats1, #hotel .details .stats .stats2 { float: none; width: 100%; }
    #hotel .details { text-align: center; }
    .headerimage { height: auto !important; }
}

@media (max-width: 730px) {
    .adsbygoogle { display: none !important; }
    .hotel-img-box { position: static; margin: 0px auto; }
}

@media (max-width: 700px) {
    .headerimage div { width: 100%; margin: 0px; padding: 10px; }
    .headerimage div h1 { padding: 0px 10px; }
    #hotel .image img { display: none; }
    .story .body p { text-align: left; }
}

@media (max-width: 625px) {
    #hotel .actions .paging { float: none; width: 100%; text-align: center; }
    #hotel .actions .sorting { float: none; width: 100%; text-align: center; }
    .addreview { display: block; margin: 10px auto; }
    #hotel ul.page-numbers { display: block; text-align: center; padding: 0px !important; }
    .fdt { text-align: center; }
}

@media (max-width: 620px) {
    #addreview .form-group div.label, #addreview .form-group div.input { width: 95%; display: block; }
}

@media (max-width: 590px) {
    #hotel .comment .upgrade { float: none; width: 100%; text-align: center; }
    #hotel .upgrade .left { margin: 10px 0px; }
    #hotel .comment .upgrade .left img { max-width: 100px; }
}

@media (max-width: 500px) {
    .header-search { display: none; }
}

@media (max-width: 475px) {
    #tophotels .newcomments { width: 100%; }
    #tophotels .hotels .hotel .logo, #tophotels .hotels .hotel .details, #tophotels .hotels .hotel .conversion { margin: 0px; width: 100%; text-align: center; float: none; padding: 5px; }
    #tophotels .hotels .hotel .logo img { max-width: 100px; }
    #footer .links .link { width: 49%; }
}

@media (max-width: 390px) {
    #addreview .form-group div.label, #addreview .form-group div.input { width: 90%; display: }
}

@media (max-width: 320px) {
   #logo img { max-width: 100%; }
}