/**
  COLORS:
	GREY    background-color: rgba(97, 97, 97, 0.06);
	GREY    #E0E0E0
	WHITE   #FFFFFF
	BLACK   #000000
	BLUE    #28627B

*/

/* ------------------------------- F O N T S ----------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://www.discount-hotel-selection.com/fonts/open-sans-300.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://www.discount-hotel-selection.com/fonts/open-sans-400.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://www.discount-hotel-selection.com/fonts/open-sans-600.ttf) format('truetype');
}

/* --------------------------------------------------------------------------------------------- */


html,
body
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: "Open Sans", sans-serif, Arial;
        font-weight: 300;
}

div#preloadedimages
{
	display: none;
}

p.error
{
	color: red;
	font-weight: 600;
}

hr
{
	width: 100%;
	border: 0px;
	border-top: 1px solid #c0c0c0;
	margin: 15px 0px 10px 0px;
}

.align-right
{
	text-align: right;
}

img.align-left
{
	float: left;
	margin: 0px 20px 0px 0px;
}
img.align-right
{
	float: right;
	margin: 0px 0px 0px 20px;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0px 0px 0px 0px;
	font-family: "Open Sans", sans-serif, Arial;
        font-weight: 300;
	padding: 0px 0px 0px 0px;
	letter-spacing: -0.04em;
}

p
{
	margin: 0px 0px 08px 0px;
	padding: 0px 0px 0px 0px;
}

div.spinner
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	width: 24px;
	height: 24px;
	border: 0;
}
img.spinner
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 0;
}

div.container
{
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	clear: both;
	overflow: hidden;
}

div.container > div.inside
{
	width: 100%;
	max-width: 970px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}

div.left
{
	display: block;
	float: left;
	width: auto;
}

div.right
{
	display: block;
	float: right;
	width: auto;
}

div.twocolumns
{
	width: 100%;
	display:block;
	clear:both;
	overflow: inherit;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
div.twocolumns > div.left
{
	width: 50%;
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 300px;
}
div.twocolumns > div.right
{
	width: 50%;
	display:block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	min-height: 300px;
}
div.twocolumns > div.left > div.inside
{
	padding: 20px 20px 20px 0px;
}
div.twocolumns > div.right > div.inside
{
	padding: 20px 0px 20px 20px;
}

div.twocolumns img
{
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px;
}

div.noscroll 
{
	overflow: hidden;
}
div.clear
{
	clear: both;
	width: 100%;
	height: 16px;
	display: block;
}

div.spacer33
{
	width: 100%;
	display: block;
	height: 33px;
	clear: both;
}
div.margin-left-33
{
	margin-left: 33px;
}


/* --- buttons -------------------------------------------------- */
.button,
.resbutton
{
	display: inline-block;
	width: auto;
	border: 0px;
	background-color: #888888;
	color: #000000;
	text-decoration: none;
	margin: 0px 0px 0px 0px;
	padding: 5px 12px 5px 12px;
}

.button:hover,
.resbutton:hover
{
	background-color: #aaaaaa;
}

.button.white
{
	background-color: #ffffff;
	color: #444444;
}



/* --- HEADER --------------------------------------------------- */
div#header1 
{
	background-color: #000000;
	color: white;
	display: block;
	clear: both;
	height: 55px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow: crop;
}
div#header1 > div.inside
{
	padding: 0px 0px 0px 0px;
	margin: 4px auto 10px auto;
	height: auto;
	display: block;
	overflow: crop;
}
div#header1 div.left
{
}


div#header1 b.discount
{
	font-size: 2em;
	font-weight: 300;
}
div#header1 b.discount a
{
	text-decoration: none;
	color: #ffffff;
}

div#header1 b.headername
{
	font-size: 2em;
	font-weight: 600;
}


div#header1 a.button
{
	margin-top: 7px;
}

div.searchbar
{
	vertical-align: top;
	display: block;
	width: auto;
	height: auto;
	margin-top: 8px;
	overflow: hidden;
	}
div.searchbar form
{
	white-space: no-wrap;
}
div.searchbar > form > input
{
	vertical-align: top;
	disply: inline;
	width: 0px;
	height: 32px;
	font-size: 1.5em;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px;
}
div.searchbar > form > img
{
	cursor: pointer;
	display: inline;
	width: 32px;
	height: 32px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


/* --- HEADER-2 --------------------------------------------------- */
div#header2
{
	display: block;
	overflow: hidden;
	height: 55px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
	background-color: #e0e0e0;
	color: black;
}
div#header2 ul.menu
{
	list-style-type: none;
	display: block;
	width: 100%;
	clear: both;
	margin: 15px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}

div#header2 ul.menu li
{
	display: inline;
	margin-left: 50px;
	font-size: 1.25em;
}
div#header2 ul.menu li a
{
	text-decoration: none;
	color: #404040;
}

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

div#main
{
	height: auto;
	min-height: 800px;
}

.bggray,
.bggrey
{
	background-color: rgba(97, 97, 97, 0.06);
}

.bgwhite
{
	background-color: #ffffff;
}

.bgblack
{
	background-color: #000000;
	color: #ffffff;
}

/* --- "checkavailability" ------------------------------------------ */
div.checkavailability
{
}

div.checkavailability div.row
{
	display: block;
	width: 100%;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
}
div.checkavailability div.row  label
{
	width: auto;
	min-width: 90px;	
	display: inline-block;
}

/* --- SEARCH - REGIONS ------------------------------------------- */
div.regionlist
{
}
div.regionlist > div.row
{
	width: 100%;
	display: block;
	clear: both;
}
div.regionlist > div.row > div.region
{
	width: 200px;
	display: block;
	float: left;
}
div.regionlist > div.row > div.counter
{
	width: auto;
	float: left;
	font-size: 0.8em;
}
div.regionlist > div.row > hr
{
	width: 100%;
	max-width: 400px;
	border: 0px;
	border-top: 1px solid black;
	float: left;
	margin: 15px 0px 10px 0px;
}


/* --- SEARCH - CHAINS ------------------------------------------- */
div.chainlist
{
}
div.chainlist > div.row
{
	width: 100%;
	display: block;
	clear: both;
}
div.chainlist > div.row > div.chain
{
	width: 200px;
	display: block;
	float: left;
}
div.chainlist > div.row > div.counter
{
	width: auto;
	float: left;
	font-size: 0.8em;
}
div.chainlist > div.row > hr
{
	width: 100%;
	max-width: 400px;
	border: 0px;
	border-top: 1px solid black;
	float: left;
	margin: 15px 0px 10px 0px;
}

/* --- SEARCH - COUNTRIES ------------------------------------------- */
div.countrylist
{
}
div.countrylist > div.row
{
	width: 100%;
	display: block;
	clear: both;
}
div.countrylist > div.row > div.country
{
	width: 240px;
	display: block;
	float: left;
}
div.countrylist > div.row > div.counter
{
	width: auto;
	float: left;
	font-size: 0.8em;
}
div.countrylist > div.row > hr
{
	width: 100%;
	max-width: 400px;
	border: 0px;
	border-top: 1px solid black;
	float: left;
	margin: 15px 0px 10px 0px;
}


/* --- SEARCH - CITIES ------------------------------------------- */
div.citylist
{
}
div.citylist > div.row
{
	width: 100%;
	display: block;
	clear: both;
}
div.citylist > div.row > div.city
{
	width: 200px;
	display: block;
	float: left;
}
div.citylist > div.row > div.counter
{
	width: auto;
	float: left;
	font-size: 0.8em;
}
div.citylist > div.row > hr
{
	width: 100%;
	max-width: 400px;
	border: 0px;
	border-top: 1px solid black;
	float: left;
	margin: 15px 0px 10px 0px;
}


/* --- SEARCH - HOTELS ------------------------------------------- */
div.hotellist
{
}
div.hotellist > div.row
{
	width: 100%;
	display: block;
	clear: both;
	margin-bottom: 15px;
	margin-top: 15px;
	overflow: auto;
}

div.hotellist > div.row > div.imageandstars 
{
	width: 300px;
	display: block;
	float: left;
}
div.hotellist > div.row > div.imageandstars > div.image
{
	width: 300px;
	max-height: 300px;
	display: block;
	overflow: hidden;
}
div.hotellist > div.row > div.imageandstars > div.image > img
{
	width: 300px;
	height: auto;
	display: block;
}

div.hotellist > div.row > div.description
{
	width: 100%;
	max-width: 650px;
	float: left;
	display: block;
	margin-left: 20px;
}

div.sortoptions
{	
	float: right;
	display: block;
	width: auto;
	font-size: 0.8em;
}
div.sortoptions div.inside
{
}

div.blocklist
{
	width: 100%;
	display: block;
	overflow: auto;
	margin: 10px 0px 10px 0px;
	font-weight: 400;
}
div.blocklist > div.row
{
	padding: 2px 0px 2px 0px;
	clear: both;
}
div.blocklist > div.row > div.name
{
	width: auto;
	float: left;
}
div.blocklist > div.row > div.price
{
	width: auto;
	float: right;
}




/* --- HOTEL -------------------------------------------------------- */
div.bighotelimages
{
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
	display: block;
	overflow: hidden;
	white-space: no-wrap;
	height: 350px;
	text-align: center;
	vertical-align: top;
}
div#bighotelimagespager
{
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
	display: block;
	overflow: crop;
	white-space: no-wrap;
	height: auto;
	text-align: center;
	position: absolute;
	margin-top: -30px;
}
div#bighotelimagespager > img
{
	margin: 0px 5px 0px 5px;
	padding: 0px 0px 0px 0px;
	width: 12px;
	height: 12px;
	border: 0px;
	cursor: pointer;
}
div#bighotelimagesarrowleft
{
	position: absolute;
	left: 0px;
	margin-top: -210px;
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
	z-index: 100;
}
div#bighotelimagesarrowleft > img
{
	cursor: pointer;
}
div#bighotelimagesarrowright
{
	position: absolute;
	right: 0px;
	margin-top: -210px;
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
	z-index: 100;
}
div#bighotelimagesarrowright > img
{
	cursor: pointer;
}

div.bighotelimages > div.bighotelimagesinner
{
	width: 2500px;
	text-align: left;
	display: inline-block;
}	

div.bighotelimages > div.bighotelimagesinner > div.bighotelimage
{
	width: auto;
	height: 350px;
	max-height: 350px;
	overflow: hidden;
	display: inline-block;
}
div.bighotelimages > div.bighotelimagesinner > div.bighotelimage > img
{
	vertical-align: top;
	border: 0;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 350px;
}

div.hotelnamecontainer
{
	width: 100%;
	position: absolute;
	opacity: 0.8;
	filter: alpha(opacity=80); /* For IE8 and earlier */
	overflow: crop	;
	height: auto;
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

div.hotelnamecontainer div.hotelname
{
	width: auto;
	height: auto;
	background-color: #f0f0f0;
	font-size: 3em;
	display:inline-block;
	padding: 10px 30px 10px 30px;
	margin: 0px 0px 0px 0px;
}

div.acceptedcreditcards
{
	display: block;
	overflow: auto;
	width: 100%;
	text-align: center;
}

div.acceptedcreditcards img
{
	margin-right: 10px;
	display: inline;
}
div.hotelfacilities
{
	width: 49%;
	float: left;
}
div.hotelfacilities h3 
{
	font-weight: 400;
}
div.hotelfacilities ul
{
	margin-left: 20px;
}
div.hoteldescriptionlanguages
{
	font-size: 0.7em;
	display: block;
	width: 100%;
	margin: 0px 0px 8px 0px;
	padding: 0px 0px 0px 0px ;
	text-align:center;
}
div.hoteldescriptionlanguages A
{
	font-size: inherit;
}

/* --- Rooms ------------------------------------------------------*/
div.roomimageswithpager
{
	display: block;	
	width: 100%;
	height: auto;
	clear: both;
	overflow: crop;
}
div.roomimageswithpager > div.roomimages
{
	display: block;	
	width: 100%;
	height: auto;
	clear: both;
	overflow: hidden;
}

div.roomimageswithpager > div.roomimages > div.inside
{
	width: 10px; /* Will be dynamically */
	overflow: crop;
	white-space: no-wrap;
	height: 150px;
}
div.roomimageswithpager > div.pager
{
	width: 100%;
	text-align: center;
	height: auto;
}
div.roomimageswithpager > div.pager > img
{
	margin: 0px 4px 0px 4px;
	padding: 0px 0px 0px 0px;
	width: 10px;
	height: 10px;
	border: 0px;
	cursor: pointer;
}
div.roomimageswithpager > div.roomimages > div.inside > img.roomphoto
{
	height: 150px;
}

/* --- SPECIAL ------------------------------------------------------ */
div.special
{
}
div.special p
{
	margin-bottom: 17px;
}
div.special img
{
	box-shadow: 0px 2px 2px #808080;
}

/* --- CONTACT ------------------------------------------------------ */
form#contactform
{
	margin: 33px 0px 33px 0px;
}
form#contactform > label
{
	width: 100%;
	display: block;
	overflow: auto;
	clear: both;
}
form#contactform > input[type=text]
{
	font-size: 1.25em;
	width: 500px;
	max-width: 90%;
}
form#contactform > textarea
{
	font-size: 1.25em;
	width: 500px;
	max-width: 90%;
	height: 230px;
}




/* --- FOOTER-1 ----------------------------------------------------- */
div#footer1
{
	background-color: #000000;
	color: #ffffff;
}
div#footer1 > div.inside
{
	margin-top: 30px;
	margin-bottom: 30px;

}
div#footer1 div.footercolumn
{
	width: 50%;
	display: block;
	float: left;
}
div#footer1 div.footercolumn h1
{
	font-size: 1.25em;
}
div#footer1 div.footercolumn li
{
	font-size: 0.75em;
}
div#footer1 div.footercolumn li a
{
	color: #ffffff;
	font-weight: 400;
}

/* --- FOOTER-2 ----------------------------------------------------- */
div#footer2
{
	background-color: #e0e0e0;
	color: #808080;
}
div#footer2 > div.inside
{
	margin-top: 30px;
	margin-bottom: 30px;
}
div#footer2 p
{
	text-align: center;
}

.nomobile
{
}

/* --- Date Picker -------------------------------------------------------*/
.DatePicker *,
.DatePicker *:after,
.DatePicker *:before  { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important }

.DatePicker           { position: absolute; background: #666; border: 3px solid #666; z-index: 100; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; top: 0 }

.DatePicker *         { margin: 0; padding: 0; color: #000; background: transparent; border: none }

/* = GLOBALS
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker table                      { border-collapse: collapse; border-spacing: 0; width: auto; table-layout: auto; }

.DatePicker td,
.DatePicker th                         { text-align: center; padding: 5px 0 }

.DatePicker td                         { cursor: pointer }

.DatePicker .dp_daypicker,
.DatePicker .dp_monthpicker,
.DatePicker .dp_yearpicker             { margin-top: 3px }

.DatePicker .dp_daypicker td,
.DatePicker .dp_daypicker th,
.DatePicker .dp_monthpicker td,
.DatePicker .dp_yearpicker td         { background: #E8E8E8; width: 30px; border: 1px solid #7BACD2 }

.DatePicker,
.DatePicker .dp_header .dp_hover,
.DatePicker .dp_footer .dp_hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px }

/* = VISIBLE/HIDDEN STATES (USE TRANSITIONS FOR EFFECTS)
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker.dp_visible               { visibility: visible; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; transition: opacity 0.2s ease-in-out }
.DatePicker.dp_hidden                { visibility: hidden; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0 }

/* = HEADER
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_header td             { color: #FFF }

.DatePicker .dp_header .dp_previous,
.DatePicker .dp_header .dp_next       { width: 30px }

.DatePicker .dp_header .dp_caption    { font-weight: bold }
.DatePicker .dp_header .dp_hover      { background: #222; color: #FFF }

/* = DATEPICKER
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_daypicker th              { background: #28627B; color: white;}
.DatePicker td.dp_not_in_month            { background: #F3F3F3; color: #CDCDCD; cursor: default }
.DatePicker td.dp_not_in_month_selectable { background: #F3F3F3; color: #CDCDCD; cursor: pointer }
.DatePicker td.dp_weekend                 { background: #D8D8D8 }
.DatePicker td.dp_weekend_disabled        { color: #CCC; cursor: default }
.DatePicker td.dp_selected                { background: #5A4B4B; color: #FFF !important }
.DatePicker td.dp_week_number             { background: #28627B; color: #555; cursor: text; font-style: italic }

/* = MONTHPICKER
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_monthpicker td    { width: 33% }

/* = YEARPICKER
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_yearpicker td     { width: 33% }

/* = FOOTER
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_footer            { margin-top: 3px }
.DatePicker .dp_footer .dp_hover  { background: #222; color: #FFF }

/* = SELECT CURRENT DAY
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_today { color: #FFF; padding: 3px }

/* = CLEAR DATE
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker .dp_clear { color: #FFF; padding: 3px }

/* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PREVIOUS PROPERTIES)
----------------------------------------------------------------------------------------------------------------------*/
.DatePicker td.dp_current             { color: #C40000 }
.DatePicker td.dp_disabled_current    { color: #E38585 }
.DatePicker td.dp_disabled            { background: #F3F3F3; color: #CDCDCD; cursor: default }
.DatePicker td.dp_hover               { background: #482424; color: #FFF }

/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
button.DatePicker_Icon                { display: block; position: absolute; width: 18px; height: 18px; background: url('http://www.discount-hotel-selection.com/img/icons/calendar/18x18-blue.png') no-repeat left top; text-indent: -9000px; border: none; cursor: pointer; padding: 0; line-height: 0; vertical-align: top }
button.DatePicker_Icon_Disabled       { background-image: url('http://www.discount-hotel-selection.com/img/icons/calendar/18x18-grey.png') }

/* don't set vertical margins! */
button.DatePicker_Icon                { margin: 0 0 0 3px }
button.DatePicker_Icon_Inside         { margin: 0 3px 0 0 }




/* ------------------------------------------------- MOBILE ----------------------------------------------- */
@media only screen and (max-width: 640px), (max-device-width: 640px) 
{
	div.container
	{
		width: 100%;
	}
	div.container > div.inside
	{
		width: auto;
		margin: 0px 0px 0px 0px;
		padding: 0px 5px 0px 5px;
	}
	div.left,
	div.right
	{	
		display: block;
		clear: both;
		width: 100%;
	}

	div.twocolumns
	{
		width: 100%;
		height: auto;
		min-height: 100px;
	}
	div.twocolumns > div.left
	{
		width: 100%;
		min-height: 100px;
	}
	div.twocolumns > div.right
	{
		width: 100%;
		min-height: 100px;
	}

	div.twocolumns > div.left > div.inside
	{
		padding: 20px 10px 20px 10px;
	}
	div.twocolumns > div.right > div.inside
	{
		padding: 20px 10px 20px 10px;
	}

	img.googlemap
	{
		width: 100%;
	}

	div#header2 
	{
		height: auto;
	}

	div#header2 ul.menu
	{
		margin: 5px 0px 5px 0px;
		text-align: center;
	}
	div#header2 ul.menu li
	{
		display: inline-block;
		margin-left: 10px;
		font-size: 1em;
	}

	div#main
	{
		min-height: 640px;
	}

	div.hotellist > div.row > div.imageandstars
	{
		width: 100%;
		height: auto;
		max-height: auto;
		overflow: auto;
	}
	div.hotellist > div.row > div.imageandstars > div.image
	{
		width: 100%;
		height: auto;
		max-height: 800px;
	}
	div.hotellist > div.row > div.imageandstars > div.image > img
	{
		width: 100%;
	}
	div.hotellist > div.row > div.description
	{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 100%;
	}


	div.sortoptions
	{	
		float: nofloat;
		display: block;
		width: 100%;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	.nomobile
	{
		display: none;
	}

	div#footer1 div.footercolumn
	{
		width: 100%;
	}

}