@charset "utf-8";

.frontBox {
 background: #fff;
 width: 500px;
 margin-left: auto; margin-right: auto;
 padding: 10px;
 border: 2px solid #222;
 border-radius: 15px;
 margin-top: 30px;
 color: #06C;
}

#cityButton {
 display: inline;
 width: 300px;	
 background: #093;
 color: #fff;
 text-align: center;
 cursor: pointer;
 padding: 10px;
 border: 1px solid #009;
 border-radius: 5px;
}

#cityButton:hover {
 background: #009;	
}

#imgemailadd
{
float:right;	
margin-top: 15px;
margin-right: 15px;
}

#frontLogo {
 width: auto;
 height: 100px;
 text-align: center;	
 background: rgba(255,255,255,0.6);
 border-bottom: 2px solid #222;
}

#background {
 background-image: url("/guestRoom.png");
 height: 100vh; 
 background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#findBar {
 width: 1000px;
 margin-left: auto;
 margin-right: auto;	
 padding-top: 5px;
 padding-bottom: 5px;
}

#headerBar {
background: #fff;
padding: 5px;
border-bottom: 1px solid #000;	
}

h1 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1.2em;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;	
	color: #666;
}

#headerLogo {
height: 50px;	
}

a.hotelNameLink:link { text-decoration: none; color: #06C;}
a.hotelNameLink:hover { text-decoration: none; color: #06C;}
a.hotelNameLink:active { text-decoration: none; color: #06C;}
a.hotelNameLink:visited { text-decoration: none; color: #06C;}


.hotelAddress {
 font-size: 0.8em;
 padding: 5px;
}

.hotelDescription {
 font-size: 1.1em;
 line-height: 1.4em;
 padding: 5px;	
}

.hotelImageListContainer {
 width: 250px;
 height: 200px;
 background-size: cover;
}

.hotelName {
 background: #CCF;
 padding: 5px;
 font-size: 1.5em; 
}

#listDropdown,#listDropdown2 {
background: #fff;
display: none;
position: absolute;
min-width: 300px;
border: 1px solid #000;
max-height: 500px;
overflow-y: scroll;
}

#breadcrumb {
padding-left: 20px;
line-height: 50px;	

}

.spacer {
display: none;	
}

.listItem {
 cursor: pointer;	
 padding: 5px;
 border-bottom: 1px solid #ccc;
}

.listItem:hover {
background-color: #9CC;
}


#logoHeader img {
height: 50px;	
padding: 5px;
}

#backHotelList {
max-width: 1000px;	
margin-left: auto; margin-right: auto;	
}

#tblHotelList {
width: 1000px;	
border-collapse: collapse;
margin-left: auto; margin-right: auto;
background: #fff;
}

#tblHotelList td {
 vertical-align: top;	
 border-bottom: 5px solid #69c;
}

#showMore {
width: 80%;
 background: #ccc;
 margin-left: auto;
 margin-right: auto;
 padding: 5px;	
 text-align: center;
 cursor: pointer;
 margin-bottom: 50px;
}
	
#txtFindHotel, #txtFilterStars, #txtStarCheckboxes {
 font-size: 1.2em;
 padding: 5px;
 color: #fff;	
 display: inline;
}

#findMoreHotels {
 font-size: 1.2em;
 padding: 5px;	
}



.hotelWrapper {
 display: grid;
 grid-template-columns: auto;	
	 background: #fff;
	 margin-bottom: 5px;	  
}

.hotelContainer {
	 display: grid;
     grid-template-columns: 250px auto;	 
}

.hotelContainerData {
    display: grid;
	grid-template-rows: auto auto auto;
}

.hotelDesc2 {
 display: none;	
}

#myHeader {
 background: #fff;
 border-bottom: 1px solid #000;	
}

#breadcrumb2 {
display: none;	
}

@media screen and (max-width: 450px) {
.frontBox {
 width: auto;	
}

#imgemailadd
{
 display: none;	
}

#cityButton {
 display: block;
 width: 200px;
 padding: 2px;
 margin-top: 3px;	
}
	
#frontLogo {
 width: auto;
 height: 30px;
 text-align: center;	
 background: rgba(255,255,255,0.6);
 border-bottom: 1px solid #222;
}	
	
#logoHeader {
border: 0px;
border-radius: 0px;
}
#logoHeader img {
height: 25px;	
}



.hotelImageListContainer {
width: 100px;
height: 80px;	
}

.hotelDesc {
display: none;	
}

.hotelDesc2 {
 display: grid;	
}

.hotelContainer {
grid-template-columns: 100px auto;	
}

.hotelDescription {
 font-size: 1em;
 line-height: 1.3em;
 padding: 5px;	
}

.hotelName {
 font-size: 1.3em; 
}
#findBar {
 width: 100%;	
}

#txtFindHotel {
display: none;	
}

#listDropdown,#listDropdown2 {
 max-width: 350px;
 max-height: 150px;
 border: 2px solid #000;
}

.spacer {
 display: block;	
}

#txtFilterStars, #txtStarCheckboxes {
 font-size: 1em;
}

#breadcrumb {
display: none;
}

#breadcrumb2 {
 display: inline-block;	
}
}