/* 

	Theme Name: blue simple
	Theme URI: http://www.adriatic.hr/themes/blue_simple/
	Description: This is blue, 980px wide simple theme which is using gif or png sprite for icons.
	Version: v1.10
	Author: Luka Vidos
	Author URI: http://www.adriatic.hr/
	
*/

/*

	FIRST PART :: LAYOUT
	====================
	
	This is the first part of the CSS document which contains grid data & block elements
	(displays, widths, heights, margins, paddings, clears), font elements (sizes, weights,
	leadings, indents).	
	
	This theme is not for users that are fairly new to CSS, there are few things you should
	know before you start to work on this theme. CSS allows many possibilites, and it is
	easy to learn, but you need to know what to do with it.
	
	If you just want to change colors, backgrounds, or few simple things - just head 
	to the SECOND, THIRD or FOUR part.
	
	To change full layout, you can also use relative and absolute elements if having any
	problems.

*/

/*

	BROWSER RESET
	-------------
	
	This part of CSS is here because every browser has specific widths, margins, and paddings
	which give problems with many of designs. This here is probably biggest reset of them all,
	trying to cover all tags. This allows us to give proper margins to our elements.
	
	Since not all browsers (particulary - IE6) support the asterisk element, we have added this,
	and few other fixes - for all elements on the website by hand.
	
*/

html body #serviceWrapper,
html body #serviceWrapper div,
html body #serviceWrapper span,
html body #serviceWrapper applet,
html body #serviceWrapper object,
html body #serviceWrapper iframe,
html body #serviceWrapper img,
html body #serviceWrapper h1,
html body #serviceWrapper h2,
html body #serviceWrapper h3,
html body #serviceWrapper h4,
html body #serviceWrapper h5,
html body #serviceWrapper h6,
html body #serviceWrapper p,
html body #serviceWrapper blockquote,
html body #serviceWrapper pre,
html body #serviceWrapper a,
html body #serviceWrapper strong,
html body #serviceWrapper em,
html body #serviceWrapper abbr,
html body #serviceWrapper acronym,
html body #serviceWrapper address,
html body #serviceWrapper big,
html body #serviceWrapper cite,
html body #serviceWrapper code,
html body #serviceWrapper del,
html body #serviceWrapper dfn,
html body #serviceWrapper font,
html body #serviceWrapper ins,
html body #serviceWrapper kbd,
html body #serviceWrapper q,
html body #serviceWrapper s,
html body #serviceWrapper samp,
html body #serviceWrapper small,
html body #serviceWrapper strike,
html body #serviceWrapper tt,
html body #serviceWrapper var,
html body #serviceWrapper b,
html body #serviceWrapper i,
html body #serviceWrapper u,
html body #serviceWrapper center,
html body #serviceWrapper dl,
html body #serviceWrapper dt,
html body #serviceWrapper dd,
html body #serviceWrapper ol,
html body #serviceWrapper ul,
html body #serviceWrapper li,
html body #serviceWrapper fieldset,
html body #serviceWrapper form,
html body #serviceWrapper label,
html body #serviceWrapper legend,
html body #serviceWrapper textarea,
html body #serviceWrapper input,
html body #serviceWrapper select,
html body #serviceWrapper table,
html body #serviceWrapper caption,
html body #serviceWrapper tbody,
html body #serviceWrapper tfoot,
html body #serviceWrapper thead,
html body #serviceWrapper tr,
html body #serviceWrapper th,
html body #serviceWrapper td { background: none; margin: 0; padding: 0; border: none; list-style: none; list-style-type: none; vertical-align: baseline; font-family: Arial, Tahoma, Helvetica, sans-serif; }

html body #serviceWrapper a:link,
html body #serviceWrapper a:visited,
html body #serviceWrapper a:hover,
html body #serviceWrapper a:active { background: none; border: none; }

html body #serviceWrapper h1,
html body #serviceWrapper h2,
html body #serviceWrapper h3,
html body #serviceWrapper h4,
html body #serviceWrapper h5,
html body #serviceWrapper h6 { font-weight: normal; }

html body #serviceWrapper table { border-collapse: collapse; border-spacing: 0; }
html body #serviceWrapper ol,
html body #serviceWrapper ul,
html body #serviceWrapper li { list-style: none; list-style-type: none; background: none; content: none !important; }
html body #serviceWrapper blockquote,
html body #serviceWrapper q { quotes: none; }
html body #serviceWrapper blockquote:before,
html body #serviceWrapper blockquote:after,
html body #serviceWrapper q:before,
html body #serviceWrapper q:after { content: ''; content: none; }
html body #serviceWrapper :focus { outline: 0; }
html body #serviceWrapper a,
html body #serviceWrapper a:link,
html body #serviceWrapper a:visited,
html body #serviceWrapper a:hover,
html body #serviceWrapper a:active { text-decoration: none; }

html body #serviceWrapper pre { font-size: 12px; }

/* 

	In the RESET segment of the website we have applied reset for links - there will be no
	underlining links if we don't want them (and in our example - there are many links of that
	kind).

	
	DEFAULT
	-------
	
	As you can see, this first part covers basics, like default font size for whole website.
	For you who maybe are confused why font size is 62.5% - it is because default font size
	defined in "em" is 16px. So 1em would equal 16px. And 62.5% of 16px is 10px. And now we
	can use 1.1em for 11px font size, 1.4em for 14px font size - and so on.

*/

html body #serviceWrapper { position: relative; font: 10px/1.5 Arial, Tahoma, Helvetica, sans-serif; }

/*

	.clear {} and this series is being used for clearing float remains. By default, HTML was
	displaying content from top to bottom. Today, we use containters that are aligned to the
	left and to the right side. That allows us to override IE6 quirks and to stop it from
	floating or nesting other elements.
	
	Main usage is putting blank <div class="clear"></div> after the elements that need to be
	cleared. You can use <br class="clear" /> when you are inside elements which don't allow
	<div> inside (<ul>). When you need to hide elements, you can use none, hide or hidden.

*/

html body #serviceWrapper .clear { clear: both; }
html body #serviceWrapper br.clear { clear: both; display: block; height: 0; }
html body #serviceWrapper .none,
html body #serviceWrapper .hide,
html body #serviceWrapper .hidden { display: none; }

/*

	ICONS
	-----
	
	Basic icons that we use for every type of our offer - which display availability of our
	services. Basically, have them for: yes, no, not available, indent (arrow for indentation),
	star (for service type) and for the annotation of warning messages or something like that.
	
	As you can see, for those icons that are used to replace text visually, there is text-indent
	of -999em; which takes text off the screen, and puts instead of it our icons.
	
	If you want to change the icons, this is the part where you change dimensions and positioning.
	
	You can replace pictures in bottom part of CSS where all the backgrounds are.
	
*/

html body #serviceWrapper .check-no,
html body #serviceWrapper .check-yes,
html body #serviceWrapper .check-not-a,
html body #serviceWrapper .check-indent { display: block; float: left; width: 16px; height: 13px; text-indent: -999em; }
html body #serviceWrapper .check-no,
html body #serviceWrapper .check-yes { margin-top: 2px; }
html body #serviceWrapper .check-indent { font-size: 14px; }
html body #serviceWrapper .check-price { display: inline; padding: 1px 0 0 10px; }
html body #serviceWrapper .star { display: block; float: left; margin-right: 5px; width: 16px; height: 16px; text-indent: -999em; }
html body #serviceWrapper .annotationImportant { margin: 0 5px 0 240px; padding: 12px 15px 3px 15px; font-weight: bold; }
html body #serviceWrapper .annotationImportant p { padding: 2px 0 0 5px; }
html body #serviceWrapper .errorIcon { display: inline-block; width: 16px; height: 16px; margin-right: 10px; }

/*

	WRAPPER
	-------
	
	Main content manager for whole service. First reason for having this wrapper is to hold out
	whole content. Other is to center it inside it's container. And the main reason is because you
	can use html body #serviceWrapper as a key reference for any single class or id defined in this CSS.
	
	We also use :after to clear whatever comes after serviceWrapper.
	
*/

html body #serviceWrapper { margin: 0 auto; padding: 0; width: 100%; }
html body #serviceWrapper:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: .1em; }

html body #serviceWrapper #serviceInner { width: 980px; margin: 0 auto; padding: 0; } 

/*

	USER PANEL
	----------
	
	User panel is main holder element for language bar. It can be styled how you like. It serves
	also as a holder for elements and upgrades from our side.

*/

html body #serviceWrapper #userPanel { float: right; margin: 0 0 10px 0; width: 600px; }
html body #serviceWrapper #userPanelTop { float: right; padding: 0 0 5px 0; }

/*

	User Language
	-------------
	
	This is language select box holder. It contains selectbox and flag position. You can switch the
	flag icons below in backgrounds section. This section also hides the text which is descriptional
	for the flags (for design without images).

*/

html body #serviceWrapper #userLanguage { float: left; margin: 0; padding: 0 0 0 5px; }
html body #serviceWrapper #countryFlag { float: left; display: block; margin: 3px 0 0 0; width: 22px; height: 16px; text-indent: -999em; }
html body #serviceWrapper #userLanguageSelectHolder { float: left; }
html body #serviceWrapper #userLanguageSelect { padding: 1px 1px 2px 2px; width: 122px; font-size: 11px; }

/*

	SEARCH
	------
	
	Biggest and most important part of this service. It serves as a container for all elements of
	search. All of the elements have classes, and they are created for easiest use.
	
	This theme contains several <ul> which have content divided in columns. You can easily create
	theme that has all these elements that are aligned vertically, on the right side, and so on.
	
	The main searchForm content div is relative element to it's child elements. Therefore we can use
	it to change layout of it completely.

*/

html body #serviceWrapper #searchForm { float: left; display: block; position: relative; margin: 0; padding-bottom: 18px; width: 980px; }
html body #serviceWrapper #searchForm h3 { padding: 12px 18px 9px 18px; font-size: 2.2em; }

/*

	Advanced Options
	----------------
	
	As you can see in our template, there is more to this search than shown here. And those options
	are available by using one of the links in this box. This box is positioned absolute inside its
	parent searchForm div.

*/

html body #serviceWrapper .searchAdvanced { position: absolute; right: 15px; top: 15px; font-size: 1.1em; text-align: right; width: 210px; }
html body #serviceWrapper .searchAdvanced li a { padding-right: 10px; }

/* 

	Search Box
	----------
	
	Search Box contains input elements, labels and search button. Column1 contains date and time,
	Column2 contains number of persons and place of arrival, Column3 contains checkboxes and
	Column4 is actually a searchButton.

	min-height: 18px; height: auto !important; height: 18px; 
	
*/

html body #serviceWrapper .searchBox { display: block; clear: both; margin-left: 18px; font-size: 1.1em; height: auto !important; height: 100px; }
html body #serviceWrapper .searchBox label { padding-left: 3px; }
html body #serviceWrapper .searchColumn1 { float: left; margin: 0 0 9px 0; padding: 9px 19px 14px 14px; width: 130px; min-height: 85px; height: auto !important; height: 85px; }
html body #serviceWrapper .searchColumn2 { float: left; margin: 0 0 9px 0; padding: 9px 19px 14px 0; width: 150px; min-height: 85px; height: auto !important; height: 85px; }
html body #serviceWrapper .searchColumn1 label,
html body #serviceWrapper .searchColumn2 label { display: block; }
html body #serviceWrapper .searchColumn1 input,
html body #serviceWrapper .searchColumn2 input { margin: 0 0 3px 0; padding: 3px 8px 3px 26px; width: 98px; height: 14px; font-size: 1.0em; line-height: 1.0em; }
html body #serviceWrapper .searchColumn3 { float: left; display: block; margin: 0 18px 9px 0; padding: 25px 0 10px 0; width: 449px; line-height: 19px; min-height: 73px; height: auto !important; height: 73px; }
html body #serviceWrapper .searchColumn3 li { display: block; float: left; padding: 0 10px 3px 0; }
html body #serviceWrapper .searchColumn3 input { margin-right: 3px; }
html body #serviceWrapper .searchColumn3 label { white-space: nowrap; }
html body #serviceWrapper .searchColumn4 { float: left; margin-top: 48px; width: 146px; height: 52px; overflow: hidden; }
html body #serviceWrapper a.searchButton { display: block; width: 130px; height: 47px; margin-top: 5px; padding: 0; font-size: 1.9em; font-weight: bold; text-align: center; }
html body #serviceWrapper a.searchButton span { display: block; width: 130px; height: 39px; padding: 8px 0 0 0; cursor: pointer; }

/*

	No Results
	----------
	
	If you want to have a different style for message that is shown when no results are found -
	you can change that here.

*/

html body #serviceWrapper .searchNoResults { width: 910px; }
html body #serviceWrapper .searchNoResults { margin: 0 5px 0 0; padding: 12px 15px 3px 15px; font-weight: bold; } 
html body #serviceWrapper .searchNoResults p { padding: 2px 0 15px 0px; font-size: 1.6em; text-align: center; font-weight: normal; }

/*

	CONTENT
	-------
	
	Content holds all other central elements of the service. It also defines the shape of
	all elements.

*/

html body #serviceWrapper #serviceContent { float: left; width: 980px; margin: 13px 0 0 0; padding-bottom: 20px; }
html body #serviceWrapper #serviceContent a { text-decoration: none; }

/*

	Default list styles for central list items.

*/

html body #serviceWrapper .list ul { margin: 0 0 12px 15px; }
html body #serviceWrapper .list ul li { padding: 0 15px 1px 15px; }

/*

	Main Title
	----------
	
	Title bar contains serveral parts. First of all there is main title h2, which defines
	which page you are on, which object, and such.
	
	Then, you have breadcrumbs - which are shown on object details and unit details.
	
	On results page you have, in the title bar, sort options.

*/

html body #serviceWrapper #contentTitleBar { display: block; position: relative; padding: 16px 18px 15px 18px; }
html body #serviceWrapper #contentTitleBar h2 { font-size: 2.4em; }
html body #serviceWrapper .contentBreadcrumbs { font-size: 1.2em; }
html body #serviceWrapper .contentBreadcrumbs a { font-weight: bold; }
html body #serviceWrapper .searchTitleSort { padding: 0 0 8px 0; font-weight: bold; font-size: 1.2em; }
html body #serviceWrapper .searchTitleSort a { margin: 0 10px 0 10px; font-weight: normal; }

/*

	Titlebar Icons
	--------------
	
	One of the options of this service, which are currently in the progress of making are
	icons for various uses (Print, Send to Friend, View Comments, and such).

*/

html body #serviceWrapper .contentIcons { padding: 29px 18px 0 18px; font-size: 1.1em; }
html body #serviceWrapper .contentIcons { position: absolute; top: 0; right: 0; }
html body #serviceWrapper .contentIcons li { float: left; display: block; margin-left: 10px; width: 20px; height: 20px; text-align: left; text-indent: -999em; }
html body #serviceWrapper .contentIcons li a { display: block; width: 20px; height: 20px; text-align: left; text-indent: -999em; }

html body #serviceWrapper .objectChanged { position: absolute; top: 51px; right: 0; }
html body #serviceWrapper .objectChanged li { display: block; float: right; padding: 3px 18px; margin-right: 18px; }
html body #serviceWrapper .objectChanged li span { padding: 3px 0 3px 18px; }
html body #serviceWrapper .objectChanged .dataDetails { font-weight: bold; font-size: 1.0em; }
html body #serviceWrapper .objectChanged .dataChanged { padding-right: 0px !important; }

/*

	PAGINATION
	----------
	
	Pagination is shown on search results page, and contains of two elements. First is <ul>
	with page numbers and second one is items per page select box.

*/

html body #serviceWrapper .searchPagination { position: relative; margin: 5px 0 11px 18px; padding: 11px 7px 3px 7px; width: 928px; height: 21px; font-size: 1.1em; line-height: 1.2em; overflow: hidden; }
html body #serviceWrapper .searchPaginationList li { float: left; padding: 0 9px; margin-right: -3px; }
html body #serviceWrapper .searchPaginationItems { position: absolute; top: 8px; right: 7px; }
html body #serviceWrapper .searchPaginationItems select { padding: 1px 1px 2px 2px; width: 45px; font-size: 11px; text-align: left; }

/*

	GALLERY
	-------
	
	Gallery is one of the most important parts of this CSS. You need to be very careful when
	working with it. One of the tricky parts is the slider button, and jQuery CSS behind it.
	You should expect the unexpected when working with this section.
	
	Aside from that, it is fairly simple to understand the CSS behind the Gallery. You have
	two main boxes which contain galleryMenu and galleryRight (images and thumbs).

*/

html body #serviceWrapper #contentGallery { clear: both; margin: 0 18px 20px 18px; }

/*

	Gallery Menu
	------------
	
	Gallery menu consists of MenuTitle (it is main object link & name), then it has holder div
	(which holds content for jQuery slider), and list of appartments.
	
	galleryMenuSlider contains jQuery slider, and if you have no need of it, you can disable it
	trough CSS. If you want to change the style of the slider, scroll down to the jQuery section
	of this CSS.

*/

html body #serviceWrapper #galleryMenu { float: left; margin-top: 10px; padding: 11px 10px 11px 15px; width: 260px; height: 398px; overflow: hidden; }
html body #serviceWrapper #galleryMenuHolder { float: left; height: 370px; overflow: hidden; }
html body #serviceWrapper #galleryMenuList { margin-right: 0; font-size: 1.2em; }
html body #serviceWrapper #galleryMenuList li { margin: 0 auto; padding: 0 10px 0 17px; width: 213px; }
html body #serviceWrapper #galleryMenuList li a { display: block; margin: 0 auto; padding: 3px 7px 3px 7px; min-height: 18px; height: auto !important; height: 18px; }
html body #serviceWrapper .galleryTitle { font-size: 1.4em; font-weight: bold; text-transform: uppercase; }
html body #serviceWrapper .galleryMenuTitle { font-weight: bold; }
html body #serviceWrapper #galleryMenuSlider { position: relative; float: right; width: 10px; }
html body #serviceWrapper #galleryMenuSlider .ui-slider-vertical { margin-top: 6px; height: 352px; }
html body #serviceWrapper #slider-vertical { top: 0; left: 0; position: absolute; }

/*

	Gallery Images
	--------------
	
	galleryRight consists of images, large image gallery, and thumbnails. galleryImage contains
	three main parts - galleryImageLarge for large pictures, gallerImageInfo for additional room
	information (on shown on unit details), and imageSlider for listing trough the gallery of the
	room/section.
	
	Pictures, for easier use of jQuery, are in main div container which contains <ul> with pictures
	as list items. That is also used to protect from image preview being broken when vertical picture
	comes right after horizontal one.
	
	Image description is shown over the gallery, and can be disabled completely trough the CSS.
	
	Image sliding is necessary to browse trough the gallery, and thus could not be disabled.

*/

html body #serviceWrapper #galleryRight { float: left; padding: 16px 0 14px 19px; height: 410px; width: 640px; overflow: hidden; }
html body #serviceWrapper #galleryImage { position: relative; float: left; margin-right: 20px; }
html body #serviceWrapper #galleryImage strong { font-weight: bold; }
html body #serviceWrapper #galleryImageLarge { width: 365px; height: 365px; overflow: hidden; }
html body #serviceWrapper #galleryImageLarge li { width: 365px; height: 365px; text-align: center; }
html body #serviceWrapper .galleryImageInfo { bottom: 0; }
html body #serviceWrapper .galleryImageIcons { position: absolute; z-index: 100; bottom: 34px; right: 0; float: right; margin: 0 3px 0 0; padding: 5px; width: 16px; height: 16px; font-size: 1.2em; overflow: hidden; }
html body #serviceWrapper a.galInfo { float: right; display: block; text-align: left; text-indent: -999em; width: 16px; height: 16px; }
html body #serviceWrapper a.galInfoOff { float: right; display: block; text-align: left; text-indent: -999em; width: 16px; height: 16px; }
html body #serviceWrapper .galleryImageDescription { position: absolute; bottom: 33px; padding: 10px; width: 345px; font-size: 1.2em; overflow: hidden; z-index: 5; }
html body #serviceWrapper .galleryImageSlider { display: block; position: relative; width: 365px; height: 34px; font-size: 1.2em; }
html body #serviceWrapper .galleryImageSliderPrevious a { position: absolute; top: 5px; left: 5px; padding: 5px 8px; font-weight: bold; }
html body #serviceWrapper .galleryImageSliderNumber { display: block; padding-top: 10px; text-align: center; }
html body #serviceWrapper .galleryImageSliderNext a { position: absolute; top: 5px; right: 5px; padding: 5px 8px; font-weight: bold; }

/*

	Gallery Thumbnails
	------------------
	
	Thumbnails are one of the tricky parts. Different languages produce different lengths of
	text that describes images. Because of that, these sizes (for this type of design) are necessary,
	and you can see the example of height: auto !important; hack in action. IE6 does not work with
	min-height attribute, so we have to make it important for all browsers, and fixed for all other.
	
	Since unit details need scroll, jQuery vertical slider is also here. If your redesign needs,
	you can design it differently from the menu scroll by using this holder.

*/

html body #serviceWrapper #galleryThumbs { position: relative; float: left; width: 240px; height: 409px; }
html body #serviceWrapper .galleryThumbsList { float: left; height: 409px; overflow: hidden; }
html body #serviceWrapper .galleryThumb { float: left; min-height: 117px; height: auto !important; height: 117px; }
html body #serviceWrapper .galleryThumbContainer { margin: 0 8px 8px 0; padding: 5px 5px 2px 5px; width: 92px; min-height: 86px; height: auto !important; height: 86px; font-size: 1.1em; text-align: center; }
html body #serviceWrapper .galleryThumb img { width: 92px; height: 65px; }
html body #serviceWrapper .galleryThumb p { padding: 2px 0 0 0; }
html body #serviceWrapper #galleryThumbsSlider { position: absolute; top: 0; right: 3px; width: 10px; }
html body #serviceWrapper #galleryThumbsSlider .ui-slider-vertical { margin-top: 3px; height: 400px; }
html body #serviceWrapper #slider-vertical-thumbs { float: left; }

/*

	UNIT DATA
	---------
	
	unitData section contains design for detail pages. It can be used to target any tag that is inside
	it. It also divides content from sidebar.

*/

html body #serviceWrapper #contentUnitData { float: left; padding: 0 20px 0 18px; width: 679px; }

/*

	Unit Title
	----------
	
	Titles in the content page, if given this class, can be styled as different. These unitDataInfoTitles
	are combined with jQuery, where they have accordion effect on content below them.
	
	If needed, there are classes for open and closed, but they are, at least for now, redundant.
	
	Accordion is positioned absolutely inside this main title container.

*/

html body #serviceWrapper .unitDataInfoTitle { display: block; position: relative; margin-bottom: 10px; padding: 2px 10px; width: 659px; height: 29px; }
html body #serviceWrapper .unitDataInfoTitle h3 { font-size: 1.8em; }
html body #serviceWrapper .unitDataInfoTitle h3.open { padding-left: 15px; }
html body #serviceWrapper .unitDataInfoTitle h3.closed { padding-left: 15px; }
html body #serviceWrapper a.unitDataAccordion { position: absolute; width: 160px; top: 8px; right: 10px; padding-right: 15px; font-size: 1.1em; text-align: right; }

/*

	Unit information
	----------------
	
	unitDataInfo is main container for detail information. It is used to divide title from its content
	and is used for jQuery accordion.

*/

html body #serviceWrapper .unitDataInfo { clear: both; padding: 0 26px 30px 27px; width: 626px; }
html body #serviceWrapper .unitDataInfo h4 { clear: both; padding: 16px 0 5px 0; font-size: 1.8em; }

/*

	Unit calendar
	-------------
	
	jQuery calendar has its own CSS on the bottom, but the main container elements - are here, basically
	this is the calendar which is on the unit details page, where are the descriptions under the calendar
	(last changed, confirmed and unconfirmed. Full calendar is on the bottom of the CSS where all jQuery
	styles are.

*/

#ui-datepicker-div { display:none;}
html body #serviceWrapper #contentUnitData #ui-datepicker-div { width: 100%; margin-bottom: 10px; }
html body #serviceWrapper #contentUnitData .ui-datepicker-row-break { height: 1px !important; clear: both; }
html body #serviceWrapper #contentUnitData .calendarDetails { clear: both; padding: 10px 10px 0 10px; }
html body #serviceWrapper #contentUnitData .calendarLastChanged { padding: 3px 0 3px 21px; font-size: 1.1em; }
html body #serviceWrapper #contentUnitData .calendarNotConfirmed { margin-left: 15px; padding: 3px 0 3px 28px; font-size: 1.1em; }
html body #serviceWrapper #contentUnitData .calendarConfirmed { margin-left: 15px; padding: 3px 0 3px 28px; font-size: 1.1em; }

/*

	Unit table
	----------
	
	unitDataTable is main container for all tables on details pages. The main difference between
	several tables is first column which defines width of the description. All other columns are
	automatically changed upon that. Also, you have two additional classes
	
	- fourColumns for tables that contain lenghts, or need two large and two smaller columns
	- fourColumns2 for tables that contain 4 columns of different sizes (prices and offers)
	
	textLeft/Right align the text according to the wanted position, and also changing paddings
	as needed.

*/

html body #serviceWrapper .unitDataTable { table-layout: fixed; width: 100%; font-size: 1.2em; }
html body #serviceWrapper .unitDataTable td { padding: 3px 2px 3px 2px; }
html body #serviceWrapper .unitDataTable strong { font-weight: bold; }
html body #serviceWrapper .unitDataTable .tableFirst { width: 310px; font-weight: bold; }
html body #serviceWrapper .unitDataTable .tableSmallPrint { font-size: 0.9em; font-style: italic; }
html body #serviceWrapper .unitDataTable.tableFourColumns .tableFirst { width: 220px; }
html body #serviceWrapper .unitDataTable.tableFourColumns2 .tableFirst { width: 310px; }
html body #serviceWrapper .unitDataTable.tableFourColumns .textRight { padding-right: 15px; }
html body #serviceWrapper .unitDataTable .langText { text-transform: capitalize; }
html body #serviceWrapper .unitDataTable .textLeft { text-align: left !important; }
html body #serviceWrapper .unitDataTable .textRight { text-align: right !important; }

/*

	Google maps
	-----------

*/

#geoSearch { position: relative; clear: both; margin: 0; width: 950px; height: 500px; font-family: Arial, Helvetica, sans-serif; }
#geoSearch #mapCanvas { margin: 0; padding: 0; width: 630px; height: 500px; }
#geoSearch #rightCol { position: absolute; top: 0; right: 24px; width: 275px; }
#geoSearch #locationFrom { position: relative; width: 273px; height: 42px; margin: 0; padding: 0; border-collapse: collapse; }
#geoSearch #locationFrom input { font-family: Arial, Helvetica, sans-serif; font-size: 12px !important;  }
#geoSearch #locationFrom .inputLocation { position: absolute; top: 10px; left: 10px; height: 18px; width: 195px; margin: 0; padding: 0; }
#geoSearch #locationFrom a.inputButton { position: absolute; top: 10px; right: 10px; height: 14px; padding: 4px 10px; margin: 0; font-weight: bold; text-decoration: none; font-size: 12px; }
#geoSearch #locationFrom a.inputButton:hover { background-color: #00517a }
#geoSearch #googleDirections { font-family: Arial, Helvetica, sans-serif; font-size: 8pt !important; padding: 0; margin: 0 0 0 -5px; width: 292px; height: 446px; overflow: auto; }
#geoSearch .gmapsError { padding:10px; }

.googledir table { font-size: 11px; line-height: 16px; width: 275px !important; }
.googledir table a { display: inline; text-decoration: none; font-weight: bold; padding: 3px 6px; text-align: right; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.googledir div { font-size: 10px; text-align: left !important;}

/*

	Agency Comments
	---------------
	
	Agency comments have it's own style for list items, you can use bullets or spacing between.

*/

html body #serviceWrapper .unitDataAgencyComment { display: block; margin-top: 20px; padding: 10px 0; font-size: 1.2em; line-height: 1.8em; }
html body #serviceWrapper .unitDataAgencyComment ul li { padding-left: 15px; }

/*

	Results discounts
	-----------------
	
	Discount icons which are the same for search results and unit details - are defined here, they have
	to be absolutely positioned inside their containers, and they work well with both pages.

*/

html body #serviceWrapper .lp,
html body #serviceWrapper .d5,
html body #serviceWrapper .d10,
html body #serviceWrapper .d15,
html body #serviceWrapper .d20,
html body #serviceWrapper .d25,
html body #serviceWrapper .d30,
html body #serviceWrapper .d35,
html body #serviceWrapper .d40,
html body #serviceWrapper .d45,
html body #serviceWrapper .d50, 
html body #serviceWrapper .fm5,
html body #serviceWrapper .fm10,
html body #serviceWrapper .fm15,
html body #serviceWrapper .fm20,
html body #serviceWrapper .fm25,
html body #serviceWrapper .fm30,
html body #serviceWrapper .fm35,
html body #serviceWrapper .fm40,
html body #serviceWrapper .fm45,
html body #serviceWrapper .fm50 { position: absolute; clear: both; display: block; width: 100px; height: 100px; text-indent: -999em; }

html body #serviceWrapper .ed72,
html body #serviceWrapper .ed71,
html body #serviceWrapper .ed141,
html body #serviceWrapper .ed212 { position: absolute; top: 0px; right: 0px; clear: both; display: block; width: 100px; height: 100px; text-indent: -999em; }

html body #serviceWrapper .searchDataImageLink { position: relative; }

html body #serviceWrapper .searchDataImageLink .ed72,
html body #serviceWrapper .searchDataImageLink .ed71,
html body #serviceWrapper .searchDataImageLink .ed141,
html body #serviceWrapper .searchDataImageLink .ed212 { position: absolute; top: 0; left: 119px; clear: both; display: block; width: 100px; height: 100px; text-indent: -999em; }

/*

	RESULTS
	-------
	
	Page with results is one of the main container pages, and has a bit different design than other pages.
	On results, you have full width of the page used for results. Results are organized in rows with four
	columns. Each box with results is protected against height changes (caused by different languages),
	but that can also be a problem for some designs. If you need to change this, be very careful.
	
	contentSearchData is the main container, which defines width of whole content.
	
	searchDataBox is the main container for each search result.
	
	Other information is quite clear, since it follows the main structure of the result.

*/

html body #serviceWrapper #contentSearchData { clear: both; margin: 0 0 18px 18px; width: 950px; }
html body #serviceWrapper #contentSearchData h4 { font-size: 1.2em; }
html body #serviceWrapper .searchDataBox { position: relative; float: left; margin: 0 6px 6px 0; padding: 6px 6px 9px 6px; width: 219px; min-height: 406px; height: auto !important; height: 406px; }
html body #serviceWrapper .searchDataHead { float: left; padding: 5px 7px 5px 7px; width: 205px; }
html body #serviceWrapper .searchDataCode { float: left; display: block; padding: 0 0 0 0; width: 85px; font-weight: bold; text-align: left; }
html body #serviceWrapper .searchDataLocation { float: right; display: block; padding: 2px 0 3px 0; width: 85px; text-align: right; font-size: 1.1em; line-height: 1.4em; }
html body #serviceWrapper .searchDataLocation .locationCity { font-weight: bold; }
html body #serviceWrapper .searchDataInfo { float: left; display: block; width: 120px; text-align: left; }
html body #serviceWrapper .searchDataFavorites { float: right; font-size: 1.0em; }
html body #serviceWrapper .searchDataFavorites a { padding-left: 14px; }
html body #serviceWrapper .searchDataImageLink { float: left; }
html body #serviceWrapper .searchDataImage { clear: both; width: 219px; height: 164px; }
html body #serviceWrapper .searchDataList { clear: both; padding: 7px; font-size: 1.2em; min-height: 135px; height: auto !important; height: 130px; }
html body #serviceWrapper .searchDataAppartment { font-weight: bold; }
html body #serviceWrapper .searchDataList li { margin: 0; padding: 0 0 6px 0; }
html body #serviceWrapper .searchDataCapacity { font-weight: normal; }
html body #serviceWrapper .searchDataPriceHolder { margin-left: 10px; text-transform: lowercase; font-size: 1.0em; }
html body #serviceWrapper .searchDataPrice { font-weight: bold; }
html body #serviceWrapper .searchDataFree { display: block; font-size: 0.9em; line-height: 20px; }
html body #serviceWrapper .searchDataMore { position: absolute; bottom: 0; margin: 0; padding: 5px 0 5px 0; width: 219px; font-size: 1.1em; }
html body #serviceWrapper .searchDataChanged { display: block; padding: 1px 10px 0 0; }
html body #serviceWrapper .searchDataChanged span { display: block; padding: 1px 10px 0 30px; }
html body #serviceWrapper .searchDataChanged a { padding-left: 20px; }
html body #serviceWrapper .searchDataDetails { font-weight: bold; display: block; margin-bottom: 5px; padding: 1px 10px 0 30px; }

/*

	ADVANCED SEARCH
	---------------
	
	Advanced search follows the design and layout created for the reservation list items and styles which
	are explained later on. Also, if you need anything to change specifically on advanced search, you
	can use main container for this page.

*/

html body #serviceWrapper #contentAdvancedSearch { float: left; padding: 0 20px 0 18px; width: 679px; }
html body #serviceWrapper #contentAdvancedSearch h2 { font-size: 2.4em; }
html body #serviceWrapper .formContainer { margin-bottom: 20px; width: 679px; font-size: 1.2em; }

/*

	RESERVATION
	-----------
	
	The last, but not the least important part of this main layout segment is the reservation
	content. First element here is the reservation progress bar which has backlinks to the
	steps.

*/

html body #serviceWrapper .reservationProgress { width: 685px; }
html body #serviceWrapper .reservationProgress li { display: block; float: left; margin: 0 auto; padding: 0; height: 50px; width: 170px; font-size: 1.0em; font-weight: bold; }
html body #serviceWrapper .rSOne a,
html body #serviceWrapper .rSTwo a,
html body #serviceWrapper .rSThree a,
html body #serviceWrapper .rSFour a { text-decoration: none; }

/*

	Reservation steps
	-----------------
	
	Reservation steps are main containers for each step. We are making the difference between steps
	for end users to change anything on any of the specific steps.

*/

html body #serviceWrapper #reservationStepOne { margin-top: 10px; }
html body #serviceWrapper #reservationStepTwo { margin-top: 20px; }
html body #serviceWrapper #reservationStepThree { margin-top: 10px; }
html body #serviceWrapper #reservationStepFour { margin-top: 20px; }

/*

	Reservation box
	---------------
	
	Reservation box is style that contains dynamic form lists. Best example is when we take
	object with 20 units. We need to list them all and then we use this box model. It has one
	main <div> container (reservationBox) which contains it all. Then it is divided on two
	segments: rListDesc (right box model with description of the list) and rAppList (left part
	- the <ul> list itself).
	
	We also use rAppName, rAppDesc, rSel, rInp to define widths and positions of form elements
	inside the list.

*/

html body #serviceWrapper .reservationBox { width: 674px; }
html body #serviceWrapper .reservationBox .spacer { clear: both; }
html body #serviceWrapper .reservationBox li { padding: 5px 0 5px 0; }

html body #serviceWrapper .rListDesc { float: left; padding-top: 10px; width: 235px; }
html body #serviceWrapper .rAppList { float: left; width: 439px; }
html body #serviceWrapper .rAppList li { display: block; padding-left: 0px; }
html body #serviceWrapper .rAppList .rAppName { display: block; margin-bottom: 4px; }
html body #serviceWrapper .rAppList .rAppName label { font-weight: normal; }
html body #serviceWrapper .rAppList .rAppDesc { display: block; font-size: 0.9em; }

/*

	Reservation holder
	------------------
	
	This is second type of form item holder. This one uses <ul> and <li> items with <span> elements
	to create table look. It is also used for non dynamic form elements.
	
	Using these two holder types, we managed to create table look, with tableless flexibility. Also,
	you have the option to size it the way you want, or position it wherever you want.
	
	The alternative would be by using tables, which in XHTML standards, should be avoided if it can,
	since it is not actual table data.

*/

html body #serviceWrapper .reservationHolder { width: 674px; }
html body #serviceWrapper .reservationHolder li { display: block; padding: 5px 0 0 0; height: 30px; }
html body #serviceWrapper .reservationHolder .rTextDesc { float: left; display: block; width: 225px; padding: 3px 10px 0 0; font-weight: bold; }
html body #serviceWrapper .reservationHolder .rInputContent { float: left; display: block; }
html body #serviceWrapper .reservationHolder .rInputContent span { display: block; padding-top: 3px; }
html body #serviceWrapper .reservationHolder .rInputContent span { display: block; padding-top: 3px; }

html body #serviceWrapper .reservationBox input,
html body #serviceWrapper .reservationHolder input { margin: 2px 0 3px 0; padding: 2px 0px 2px 3px; font-size: 0.9em; line-height: 1.1em; height: 16px; }
html body #serviceWrapper .reservationBox textarea,
html body #serviceWrapper .reservationHolder textarea { margin: 2px 0 3px 0; padding: 3px 14px 3px 3px; font-size: 0.9em; line-height: 1.1em; }
html body #serviceWrapper .reservationBox select,
html body #serviceWrapper .reservationHolder select { padding: 2px 1px; font-size: 0.9em; }
html body #serviceWrapper .reservationBox input.rChk,
html body #serviceWrapper .reservationHolder input.rChk { height: 14px ; margin: 0; padding: 0 !important; }

/*

	Reservation content
	-------------------
	
	Content reservation is holding the main forms and content and divides it from sidebar notes.
	Main input fields are defined here.

*/

html body #serviceWrapper #contentReservation { float: left; padding: 0 18px 18px 18px; width: 679px; font-size: 1.2em; }
html body #serviceWrapper #contentReservation h3 { margin: 10px 0 10px 0; font-size: 1.5em !important; }
html body #serviceWrapper #contentReservation p { padding-bottom: 10px; }
html body #serviceWrapper .searchInputFrom,
html body #serviceWrapper .searchInputTo,
html body #serviceWrapper .searchInputPersons ,
html body #serviceWrapper .searchInputPlace,
html body #serviceWrapper .searchInputType,
html body #serviceWrapper .searchInputCategory,
html body #serviceWrapper .searchInputPosition,
html body #serviceWrapper .searchInputPrice,
html body #serviceWrapper .searchInputSituation,
html body #serviceWrapper .searchInputDaysFrom ,
html body #serviceWrapper .searchInputDaysTo,
html body #serviceWrapper .searchInputCode { padding-left: 24px !important; }

html body #serviceWrapper .rInp { width: 177px; }
html body #serviceWrapper .rSel { width: 203px; }
html body #serviceWrapper .rTex { width: 276px; }
html body #serviceWrapper .rChk { width: 20px; }
html body #serviceWrapper .rSelSmall { width: 70px; }
html body #serviceWrapper .personAge { width: 40px !important; text-align: left; }

/*

	We also use reservationBox for additional options in our reservation steps. Here you can
	change the addition options for recommended or used services.

*/

html body #serviceWrapper .reservationBox .reservationOptions { padding: 10px 0 8px 0; }
html body #serviceWrapper .reservationBox .reservationOptions .rTextDesc { display: block; float: left; width: 140px; padding: 0 30px 8px 0; }
html body #serviceWrapper .reservationBox .reservationOptions.services .rTextDesc { display: block; float: left; width: 140px; padding: 0 30px 8px 0; }
html body #serviceWrapper .reservationBox .reservationOptions.services .rInputContent { display: block; float: left; width: 360px; padding: 0 0 8px 0; }
html body #serviceWrapper .reservationBox .reservationOptions.recomm .rTextDesc { display: block; float: left; width: 350px; padding: 0 30px 8px 0; }
html body #serviceWrapper .reservationBox .reservationOptions.recomm .rInputContent { display: block; float: left; width: 280px; padding: 0 0 8px 0; }


/*

	User data list
	--------------
	
	On fourth step you have user data written above the table. You can use this for styling
	that part of the process.

*/

html body #serviceWrapper .reservationUserDataList { padding-bottom: 15px; }
html body #serviceWrapper .reservationUserDataList li { padding-bottom: 5px; }
html body #serviceWrapper .reservationUserDataList .rTextDesc { width: 235px; font-weight: bold; }
html body #serviceWrapper .reservationUserDataList .rInputContent { padding-left: 1px; }

/*

	Reservation notes
	-----------------
	
	Reservation notes are used for displaying notes on subagent pages. This is only shown
	if you have newsletter option on your website.

*/

html body #serviceWrapper .reservationNote { display: block; clear: both; margin-top: 10px; padding: 10px 20px 0 20px; font-size: 11px; line-height: 120%; }

/*

	Reservation buttons
	-------------------
	
	Reservation buttons are called using largeButtons class. Buttons need to be in its own
	div, to position them properly on the website. Also, there are two types of buttons,
	orange (for active ones), and gray (for disabled ones).
	
	There is one more button - for user changing data.
	
	returnLinks are links on the bottom, for going back to steps.
	
*/

html body #serviceWrapper .returnLinks { float: left; margin: 20px 0 20px 0; text-align: left; width: 260px; }

html body #serviceWrapper .rInputContent .userChangeData { float: left; display: block; padding: 0 0 0 8px; height: 19px; line-height: 9px; font-size: 0.9em; font-weight: bold; text-decoration: none; }
html body #serviceWrapper .rInputContent .userChangeData span { display: block; padding: 4px 8px 6px 0; }

html body #serviceWrapper .largeButtons { float: right; margin: 20px 0 20px 0; text-align: center; width: 410px; }

html body #serviceWrapper .largeButtons a.orange { float: right; display: block; margin-left: 10px; padding: 0 0 0 15px; font-size: 1.4em; font-weight: bold; text-align: center; }
html body #serviceWrapper .largeButtons a.orange span { display: block; padding: 8px 15px 7px 0; cursor: pointer; }
html body #serviceWrapper .largeButtons a.orange:hover { text-decoration: underline; }

html body #serviceWrapper .largeButtons a.gray { float: right; display: block; margin-left: 10px; padding: 0 0 0 15px; font-size: 1.4em; font-weight: bold; text-align: center; }
html body #serviceWrapper .largeButtons a.gray span { display: block; padding: 8px 15px 7px 0; cursor: pointer; }
html body #serviceWrapper .largeButtons a.gray:hover { text-decoration: underline; }

/*

	Reservation table
	-----------------
	
	Calculations are inside contentReservation table, and styled appropriately. You have the first
	column, price column, measure, range and sum column. You also have the spacer row - which is used
	to divide segments of the table.
	
	topTr and last, define first and last row of the table.

*/

html body #serviceWrapper #contentReservation table { margin: 0 0 15px 0; }
html body #serviceWrapper #contentReservation td { padding: 10px 0 10px 0; font-size: 0.9em; }
html body #serviceWrapper #contentReservation .topTr td { font-weight: bold; text-align: center !important; }

html body #serviceWrapper #contentReservation .rCalculationFirst { padding: 6px 10px; width: 230px; font-weight: bold; text-align: left; }
html body #serviceWrapper #contentReservation .rCalculationFirst span { white-space: nowrap; }
html body #serviceWrapper #contentReservation .rCalculationPrice { padding: 6px 10px; width: 100px; font-weight: bold; text-align: right; }
html body #serviceWrapper #contentReservation .rCalculationMeasure { padding: 6px 10px; width: 80px; text-align: center; }
html body #serviceWrapper #contentReservation .rCalculationRange { padding: 6px 10px; text-align: center; width: 80px; }
html body #serviceWrapper #contentReservation .rCalculationSum { padding: 6px 10px; width: 90px; font-weight: bold; text-align: right; }
html body #serviceWrapper #contentReservation .rCalculationSpacer { margin: 0; padding: 6px 10px; font-size: 0.1em; line-height: 0.1em; height: 15px; }

html body #serviceWrapper #contentReservation .last td { padding: 6px 10px; font-weight: bold; text-align: right; font-size: 1.1em; }
html body #serviceWrapper #contentReservation .last td.rCalculationSum { padding: 8px 10px; font-size: 1.2em; }

/*

	Aligning the text inside table cells is done by using these classes. So, if you don't
	need them left, just change this.

*/

html body #serviceWrapper #contentReservation .textLeft { text-align: left !important; padding-left: 15px; }
html body #serviceWrapper #contentReservation .tTextLeft { text-align: left !important; }
html body #serviceWrapper #contentReservation .tTextLeft span { display: block; padding: 0 10px 0 10px; }

/*

	Reservation list
	----------------
	
	On the final step you may or may not see list of useful links. If it exists, then you need
	to style this piece of code.

*/

html body #serviceWrapper #contentReservation .lista { font-size: 1.1em; margin: 0 0 12px 15px; }
html body #serviceWrapper #contentReservation .lista li { padding: 0 15px 1px 15px; }

/*

	SIDEBAR
	-------
	
	Final part of this layout CSS is our sidebar. Sidebar contains boxes with additional info,
	or widgets.
	
	Some of the widgets need to be changed if you want them to be different (reservation,
	google maps or weather)

*/
html body #serviceWrapper #contentSidebar { margin-left: 10px; float: left; width: 235px; }
html body #serviceWrapper #contentSidebar h3 { padding: 12px 15px 6px 15px; font-size: 1.3em; font-weight: bold; }
html body #serviceWrapper #contentSidebar p { padding: 0 15px 8px 15px; font-size: 1.1em; }

html body #serviceWrapper #contentSidebar .sidebarBox { margin-bottom: 10px; padding-bottom: 10px; }
html body #serviceWrapper #contentSidebar .sidebarBox img,
#contentSidebar .sidebarBox iframe { padding: 0 10px; }
html body #serviceWrapper #contentSidebar .sidebarInput { margin: 10px 5px 5px 15px; padding: 3px 8px 3px 8px; height: 13px; font-size: 1.1em; line-height: 1.1em; width: 154px; }
html body #serviceWrapper #contentSidebar .sidebarInput.inactive { font-style: italic; }
html body #serviceWrapper #contentSidebar .sidebarButton { font-size: 1.1em; padding: 2px 5px 3px 5px; font-weight: bold; }
html body #serviceWrapper #contentSidebar ul { font-size: 1.1em; margin: 0 0 0 15px; }
html body #serviceWrapper #contentSidebar ul li { padding: 0 15px 1px 15px; }

/*

	Widget reservation
	------------------
	
	Widget reservation contains small info text and a large reservation button.

*/

html body #serviceWrapper #sidebarReservation .sidebarReservationButton { display: block; margin: 10px 25px 5px 25px; padding: 0 0 0 15px; font-size: 1.9em; font-weight: bold; text-align: center; }
html body #serviceWrapper #sidebarReservation .sidebarReservationButton span { display: block; padding: 8px 15px 8px 0; height: 31px; cursor: pointer; }
html body #serviceWrapper #sidebarReservation .sidebarReservationButton:hover { text-decoration: none; }


/*


	SECOND PART :: COLORS
	=====================
	
	This is the second part of the CSS document which contains color data for all of
	the elements that were mentioned before.
	
	If you figured all of the sections and elements explained above, then you will not
	have any problems figuring next few parts where you just need to change simple elements.
	
	Colors in CSS can be written in several ways. In this one, they were written in hex
	codes (#RRGGBB). Today, you can use many programs or even browser applications to get
	correct	colors.
	
	You can use attribute ' !important ' if some other color is trying to override your
	CSS style.
	
	Have fun :)

	
*/

/*

	DEFAULT
	-------

*/

html body #serviceWrapper { color: #333333; }
html body #serviceWrapper a { color: #9c1308; }
html body #serviceWrapper a:hover { color: #000; }
html body #serviceWrapper .orangeText { color: #999; }
html body #serviceWrapper .blueText { color: #00517a; }

/*

	ICONS
	-----

*/

html body #serviceWrapper .annotationImportant { color: #333 !important; }

/*

	SEARCH
	------

*/

html body #serviceWrapper #searchForm h3 { color: #9c1308; }
html body #serviceWrapper .searchBox,
html body #serviceWrapper .searchColumn1 input,
html body #serviceWrapper .searchColumn2 input { color: #000000; }
html body #serviceWrapper .searchButton,
html body #serviceWrapper .searchButton:hover { color: #ffffff; }
html body #serviceWrapper .searchNoResults { color: #333 !important; }

/*

	CONTENT
	-------

*/

html body #serviceWrapper #serviceContent a { color: #9c1308; }
html body #serviceWrapper #serviceContent a:hover { color: #000; }
html body #serviceWrapper #serviceContent h2,
html body #serviceWrapper #serviceContent h3 { color: #9c1308; }
html body #serviceWrapper #serviceContent h4 { color: #333333; }

/*
	GALLERY
	-------

	Gallery menu
	------------

*/

html body #serviceWrapper .galleryTitle,
html body #serviceWrapper #galleryMenuList li a:link,
html body #serviceWrapper #galleryMenuList li a:visited,
html body #serviceWrapper #galleryMenuList li a:hover,
html body #serviceWrapper #galleryMenuList li a.active,
html body #serviceWrapper #galleryMenuList li a:active { color: #666; }

/*

	Gallery images
	--------------

*/

html body #serviceWrapper .showDescription,
html body #serviceWrapper .showDescription a,
html body #serviceWrapper .showDescription a:link,
html body #serviceWrapper .showDescription a:visited,
html body #serviceWrapper .showDescription a:hover,
html body #serviceWrapper .showDescription a:active,
html body #serviceWrapper #galleryImage .galleryImageSlider a:link,
html body #serviceWrapper #galleryImage .galleryImageSlider a:visited,
html body #serviceWrapper #galleryImage .galleryImageSlider a:hover,
html body #serviceWrapper #galleryImage .galleryImageSlider a:active { color: #ffffff; }

html body #serviceWrapper .galleryImageDescription { color: #00517a; }

/*

	UNIT DATA
	---------
	
	Agency comments
	---------------

*/

html body #serviceWrapper .unitDataAgencyComment { color: #333333; }
html body #serviceWrapper .unitDataAgencyCommentFrom .commentDate { color: #999999; }

/*

	Unit Title
	----------

*/

html body #serviceWrapper a.unitDataAccordion { color: #ffffff; }

/*

	Google maps
	-----------

*/

#geoSearch #locationFrom { color: #000000; }
#geoSearch #locationFrom a.inputButton { color: #ffffff; }
.googledir table a { color: #ffffff; }

/*

	RESULTS
	-------

*/

html body #serviceWrapper #contentSearchData h4 { color: #333333; }

/*
	
	Results box
	-----------
	
*/

html body #serviceWrapper .searchDataCode,
html body #serviceWrapper .searchDataLocation { color: #333333; }
html body #serviceWrapper .searchDataInfo { color: #7a7a7a; }
html body #serviceWrapper .searchDataFavorites a :link ,
html body #serviceWrapper .searchDataFavorites a :visited { color: #ff970f; }
html body #serviceWrapper .searchDataFavorites a :hover ,
html body #serviceWrapper .searchDataFavorites a :active { color: #000000; }

/*

	RESERVATION
	-----------
	
*/

html body #serviceWrapper #contentReservation h3 { color: #333333; }

/*

	Reservation steps
	-----------------

*/

html body #serviceWrapper .rSOne,
html body #serviceWrapper .rSTwo,
html body #serviceWrapper .rSThree,
html body #serviceWrapper .rSFour { color: #9c1308; }
html body #serviceWrapper .rSOne.inactive,
html body #serviceWrapper .rSTwo.inactive,
html body #serviceWrapper .rSThree.inactive,
html body #serviceWrapper .rSFour.inactive,
html body #serviceWrapper .rSOne.passed,
html body #serviceWrapper .rSTwo.passed,
html body #serviceWrapper .rSThree.passed,
html body #serviceWrapper .rSFour.passed,
html body #serviceWrapper .rSOne a,
html body #serviceWrapper .rSTwo a,
html body #serviceWrapper .rSThree a,
html body #serviceWrapper .rSFour a { color: #dfdfdf; }

/*

	Reservation buttons
	-------------------

*/

html body #serviceWrapper .rInputContent .userChangeData,
html body #serviceWrapper .largeButtons a.orange,
html body #serviceWrapper .largeButtons a.orange:hover,
html body #serviceWrapper .largeButtons a.gray,
html body #serviceWrapper .largeButtons a.gray:hover,
html body #serviceWrapper .smallButtons a.orange,
html body #serviceWrapper .smallButtons a.orange:hover,
html body #serviceWrapper .smallButtons a.gray,
html body #serviceWrapper .smallButtons a.gray:hover { color: #ffffff !important; }

/*

	Reservation table
	-----------------

*/

html body #serviceWrapper #contentReservation .last td,
html body #serviceWrapper #contentReservation .last td.rCalculationSum { color: #ffffff; }

/*

	SIDEBAR
	-------

*/

html body #serviceWrapper .sidebarInput { color: #000000; }
html body #serviceWrapper .sidebarInput.inactive { color: #999999; }
html body #serviceWrapper #contentSidebar .sidebarButton { color: #ffffff; }

/*

	Widget reservation
	------------------

*/

html body #serviceWrapper .sidebarReservationButton,
html body #serviceWrapper .sidebarReservationButton:hover { color: #ffffff !important; }

/*


	THIRD PART :: BORDERS
	=====================
	
	This is the third part of the CSS document which contains borders data and colors for
	all of the elements that were mentioned in the first part.
	
	If you figured color section and basic layout elements explained above, then you will not
	have any problems figuring next few parts where you just need to change border attributes.
	
	You can use attribute ' !important ' if some other color/style is trying to override your
	CSS style.

	
*/

/*

	ICONS
	-----

*/

html body #serviceWrapper .annotationImportant { border: 1px solid #ff960f; }

/*

	SEARCH
	------

*/

html body #serviceWrapper .searchColumn1 input,
html body #serviceWrapper .searchColumn2 input { border: none; }
html body #serviceWrapper .searchNoResults { border: 1px solid #ff960f; }

/*

	CONTENT
	-------

*/

html body #serviceWrapper #serviceContent a:hover { border-bottom-color: #000; }

/*

	Main title
	----------

*/

html body #serviceWrapper .contentBreadcrumbs a,
html body #serviceWrapper .searchTitleWhere a,
html body #serviceWrapper .searchTitleSort a { border-bottom: 1px dotted #999999; }

/*

	GALLERY
	-------

	Gallery images
	--------------

*/

html body #serviceWrapper #galleryImage { border: #fff 5px solid; }
html body #serviceWrapper #galleryImageLarge { border-color: #ffffff; }

/*

	UNIT DATA
	---------
	
	Unit title
	----------

*/
html body #serviceWrapper .unitDataTable { border-top: 1px dashed #e6eaec; }
html body #serviceWrapper .unitDataTable td { border-bottom: 1px dashed #e6eaec; }

/*

	Google maps
	-----------

*/

#geoSearch #locationFrom { border: 1px solid #7f9db9; }


/*

	RESERVATION
	-----------
	
*/

html body #serviceWrapper #contentReservation a { border-bottom: 1px dotted #999999; }
html body #serviceWrapper .reservationBox input,
html body #serviceWrapper .reservationBox select,
html body #serviceWrapper .reservationBox textarea,
html body #serviceWrapper .reservationHolder input,
html body #serviceWrapper .reservationHolder select,
html body #serviceWrapper .reservationHolder textarea { border: 1px solid #cccccc; }
html body #serviceWrapper .reservationBox input.rChk,
html body #serviceWrapper .reservationHolder input.rChk { border: none !important; }

/*

	Reservation content
	-------------------

*/

html body #serviceWrapper .reservationBox { border-bottom: 1px dashed #cccccc; }
html body #serviceWrapper .reservationBox.last { border-bottom: none !important; }
html body #serviceWrapper .reservationBox .rAppList li { border-bottom: 1px dashed #cccccc; }
html body #serviceWrapper .reservationBox .rAppList li.last { border-bottom: none !important; }
html body #serviceWrapper .rAppList li.last { border-bottom: none !important; }
html body #serviceWrapper .rAppList input,
html body #serviceWrapper .rAppList textarea,
html body #serviceWrapper .rAppList select { border: 1px solid #ccc; }
html body #serviceWrapper .reservationHolder { border-bottom: 1px dashed #cccccc; }
html body #serviceWrapper .reservationHolder li { border-bottom: 1px dashed #cccccc; }
html body #serviceWrapper .reservationHolder li.last { border-bottom: none !important; }

/*

	Reservation table
	-----------------

*/

html body #serviceWrapper #contentReservation td { border: 1px solid #999; }
html body #serviceWrapper #contentReservation .topTr td { border-left: 1px solid #6e91b8; }
html body #serviceWrapper #contentReservation .noBorder { border: none !important; }
html body #serviceWrapper #contentReservation .last td { border-left: 1px solid #6e91b8; }
html body #serviceWrapper #contentReservation .last td.rCalculationSum { border-left: 1px solid #4a76a6; }
html body #serviceWrapper #contentReservation .rPaying td { border: 1px solid #6e91b8; }
html body #serviceWrapper #contentReservation .rPaying .topTr td { border-left: 1px solid #6e91b8; }

/*

	Reservation buttons
	-------------------

*/

html body #serviceWrapper .rInputContent .userChangeData { border: 0px none #a5a5a5; }

html body #serviceWrapper #serviceContent .largeButtons a { border-bottom: none !important; }

/*

	SIDEBAR
	-------

*/

html body #serviceWrapper .sidebarInput { border: none; }

/*


	FOURTH PART :: BACKGROUNDS
	==========================
	
	This is the fourth part of the CSS document which contains background images and colors for
	all of the elements that were mentioned in the first part.
	
	This is definately the hardest part of the CSS when it comes to designing. That's why you have
	really lot of tags you can use. This is our example of how to use images for rounded corners,
	icons and such.
	
	You can always leave it as it is, you can use CSS3.0 tags, or hacks for new browsers. Please
	be aware that we use all of these normal tags because of support for IE6 and other older browsers.
	
	But if your website statistics differ, you can try with transparent PNGs or such.
	
	You can use attribute ' !important ' if some other color/style is trying to override your
	CSS style.

	
*/

/*

	DEFAULT
	-------

*/

html body #serviceWrapper { background-color: #ccc; }	

html body #serviceWrapper .annotationImportant { background-color: #faebd7; }

/*

	ICON SPRITES
	------------
	
	For sprites, we use serviceIcon class, to reduce the number of callings
	from CSS document to sprite image file.

*/

html body #serviceWrapper .serviceIcon,
html .serviceIcon { background-repeat: no-repeat; background-image: url('i/sprites_8bit.gif') !important; }

/*

	Then we just use background positioning to make them work.

*/

html body #serviceWrapper .check-no { background-position: -1008px -1080px; }
html body #serviceWrapper .check-yes { background-position: -1008px -1128px; }
html body #serviceWrapper .check-not-a { background-position: -1008px -1032px; }
html body #serviceWrapper .check-indent { background-position: -1008px -1221px; }
html body #serviceWrapper .star { background-position: -1008px -360px; }
html body #serviceWrapper .iconAgencyComments { background-position: -1008px -934px; }
html body #serviceWrapper .iconPrint { background-position: -1008px -888px; }
html body #serviceWrapper .objectChanged .dataChanged span { background-position: -1008px -790px; }

html body #serviceWrapper .flag-bg { background-position: -864px -168px; }
html body #serviceWrapper .flag-cs { background-position: -864px -216px; }
html body #serviceWrapper .flag-da { background-position: -864px -264px; }
html body #serviceWrapper .flag-de { background-position: -864px -312px; }
html body #serviceWrapper .flag-en { background-position: -864px -360px; }
html body #serviceWrapper .flag-es { background-position: -864px -408px; }
html body #serviceWrapper .flag-fr { background-position: -864px -456px; }
html body #serviceWrapper .flag-hr { background-position: -864px -504px; }
html body #serviceWrapper .flag-hu { background-position: -864px -552px; }
html body #serviceWrapper .flag-it { background-position: -864px -600px; }
html body #serviceWrapper .flag-lt { background-position: -864px -648px; }
html body #serviceWrapper .flag-mk { background-position: -864px -696px; }
html body #serviceWrapper .flag-nl { background-position: -864px -744px; }
html body #serviceWrapper .flag-pl { background-position: -864px -792px; }
html body #serviceWrapper .flag-ro { background-position: -864px -840px; }
html body #serviceWrapper .flag-ru { background-position: -864px -888px; }
html body #serviceWrapper .flag-sk { background-position: -864px -936px; }
html body #serviceWrapper .flag-sl { background-position: -864px -984px; }
html body #serviceWrapper .flag-sr { background-position: -864px -1032px; }
html body #serviceWrapper .flag-sv { background-position: -864px -1080px; }
html body #serviceWrapper .flag-uk { background-position: -864px -1128px; }

html body #serviceWrapper .searchInputFrom { background-position: -1003px -166px; }
html body #serviceWrapper .searchInputTo { background-position: -1003px -214px; }
html body #serviceWrapper .searchInputPersons { background-position: -1003px -262px; }
html body #serviceWrapper .searchInputPlace { background-position: -1003px -310px; }
html body #serviceWrapper .searchInputType { background-position: -1003px -406px; }
html body #serviceWrapper .searchInputCategory { background-position: -1003px -358px; }
html body #serviceWrapper .searchInputPosition { background-position: -1003px -452px; }
html body #serviceWrapper .searchInputPrice { background-position: -1003px -503px; }
html body #serviceWrapper .searchInputSituation { background-position: -1003px -693px; }
html body #serviceWrapper .searchInputDaysFrom { background-position: -1003px -696px; }
html body #serviceWrapper .searchInputDaysTo { background-position: -1003px -696px; }
html body #serviceWrapper .searchInputCode { background-position: -1003px -549px; }

html body #serviceWrapper .searchInputPlace { background-position: -1003px -310px; }
html body #serviceWrapper .errorIcon { background-position: -1010px -1178px; }
html body #serviceWrapper .searchAdvanced li { background-position: -803px -115px; }

html body #serviceWrapper #serviceContent .list ul li { background-position: -1004px -113px; }

html body #serviceWrapper #galleryMenuList li { background-position: -1004px -1462px; }
html body #serviceWrapper #galleryMenuList li.last { background-position: -1004px -1510px; }

html body #serviceWrapper .unitDataInfoTitle a.unitDataAccordion { background-position: -843px -1363px; }
html body #serviceWrapper .unitDataInfoTitle a.unitDataAccordion.closed { background-position: -843px -1315px; }
html body #serviceWrapper .unitDataAgencyComment ul li { background-position: -1004px -1649px; }

html body #serviceWrapper #contentUnitData .calendarLastChanged { background-position: -1008px -790px; }
html body #serviceWrapper #contentUnitData .calendarConfirmed { background-position: -864px -0px; }
html body #serviceWrapper #contentUnitData .calendarNotConfirmed { background-position: -864px -48px; }

html body #serviceWrapper .lp { background-position: -0px -0px; }

html body #serviceWrapper .d5 { background-position: -0px -168px; }
html body #serviceWrapper .d10 { background-position: -0px -312px; }
html body #serviceWrapper .d15 { background-position: -0px -456px; }
html body #serviceWrapper .d20 { background-position: -0px -600px; }
html body #serviceWrapper .d25 { background-position: -0px -744px; }
html body #serviceWrapper .d30 { background-position: -0px -888px; }
html body #serviceWrapper .d35 { background-position: -0px -1032px; }
html body #serviceWrapper .d40 { background-position: -0px -1176px; }
html body #serviceWrapper .d45 { background-position: -0px -1320px; }
html body #serviceWrapper .d50 { background-position: -0px -1464px; }

html body #serviceWrapper .fm5 { background-position: -144px -168px; }
html body #serviceWrapper .fm10 { background-position: -144px -312px; }
html body #serviceWrapper .fm15 { background-position: -144px -456px; }
html body #serviceWrapper .fm20 { background-position: -144px -600px; }
html body #serviceWrapper .fm25 { background-position: -144px -744px; }
html body #serviceWrapper .fm30 { background-position: -144px -888px; }
html body #serviceWrapper .fm35 { background-position: -144px -1032px; }
html body #serviceWrapper .fm40 { background-position: -144px -1176px; }
html body #serviceWrapper .fm45 { background-position: -144px -1320px; }
html body #serviceWrapper .fm50 { background-position: -144px -1464px; }

html body #serviceWrapper .ed72 { background-position: -251px -1032px; }
html body #serviceWrapper .ed71 { background-position: -251px -1176px; }
html body #serviceWrapper .ed141 { background-position: -251px -1320px; }
html body #serviceWrapper .ed212 { background-position: -251px -1464px; }

html body #serviceWrapper #contentSearchData .searchDataChanged span { background-position: -998px -791px; }

html body #serviceWrapper #contentReservation .lista li { background-position: -1004px -1652px; }
html body #serviceWrapper #contentSidebar ul li { background-position: -1004px -1652px; }
.suggestionList li.serviceIcon { background-position: -1002px -1410px; }

/*
	jQuery backgrounds
	==================
	
*/

html body #serviceWrapper #galleryRight .galleryImageDescription { background: url('i/bg/bg-img-white.png') no-repeat bottom right; }
html body #serviceWrapper a.galInfo,
html body #serviceWrapper a.galInfoOff { background-image: url('i/ui/ui-icons_00517a_256x240.png') !important; } 
html body #serviceWrapper a.galInfo { background-position: 0px -192px !important; }
html body #serviceWrapper a.galInfoOff { background-position: -16px -192px !important; }

/*

	Reservation steps
	-----------------

*/

html body #serviceWrapper .rSOne,
html body #serviceWrapper .rSOne.passed { background: transparent url('i/bg/bg-bar-1.gif') no-repeat bottom left; }
html body #serviceWrapper .rSOne.inactive { background: transparent url('i/bg/bg-bar-1.gif') no-repeat bottom right; }
html body #serviceWrapper .rSTwo,
html body #serviceWrapper .rSTwo.passed { background: transparent url('i/bg/bg-bar-2.gif') no-repeat bottom left; }
html body #serviceWrapper .rSTwo.inactive { background: transparent url('i/bg/bg-bar-2.gif') no-repeat bottom right; }
html body #serviceWrapper .rSThree,
html body #serviceWrapper .rSThree.passed { background: transparent url('i/bg/bg-bar-2.gif') no-repeat bottom left; }
html body #serviceWrapper .rSThree.inactive { background: transparent url('i/bg/bg-bar-2.gif') no-repeat bottom right; }
html body #serviceWrapper .rSFour,
html body #serviceWrapper .rSFour.passed { background: transparent url('i/bg/bg-bar-3.gif') no-repeat bottom left; }
html body #serviceWrapper .rSFour.inactive { background: transparent url('i/bg/bg-bar-3.gif') no-repeat bottom right; }


/*

	USER PANEL
	----------

	User language
	-------------

*/

html body #serviceWrapper #userLanguage,
html body #serviceWrapper #userLanguageSelect { background-color: #ffffff; }

/*

	SEARCH
	------

*/

html body #serviceWrapper #searchForm,
html body #serviceWrapper .searchBox { background-color: #ffffff; }
html body #serviceWrapper .searchColumn1,
html body #serviceWrapper .searchColumn2,
html body #serviceWrapper .searchColumn3 { background-color: #ccc; }
html body #serviceWrapper .searchBox input { background-color: #ffffff; }
html body #serviceWrapper .searchColumn3 input { background-color: transparent !important; border: none; }
html body #serviceWrapper .searchButton,
html body #serviceWrapper .searchButton span { background-color: #9c1308; }
html body #serviceWrapper a.searchButton:hover,
html body #serviceWrapper a.searchButton:hover span { background-color: #999; }
html body #serviceWrapper .searchNoResults { background-color: #faebd7; }


/*

	CONTENT
	-------

*/

html body #serviceWrapper #serviceContent { background-color: #ffffff }

/*

	Main title
	----------

*/

html body #serviceWrapper #contentTitleBar { background-color: #ffffff; }
html body #serviceWrapper .dataDetails { background-color: #f2bc8b; }

/*

	Pagination
	----------

*/

html body #serviceWrapper .searchPagination,
html body #serviceWrapper .searchPaginationBottom { background-color: #ececec; }
html body #serviceWrapper .searchPagination select,
html body #serviceWrapper .searchPaginationBottom select { background-color: #ffffff; }

/*

	GALLERY
	-------

	Gallery menu
	------------

*/

html body #serviceWrapper #galleryMenu { background-color: #e9e9e9; }
html body #serviceWrapper #galleryMenuList li a:hover { background-color: #c2c2c2; }
html body #serviceWrapper #galleryMenuList li a.active,
html body #serviceWrapper #galleryMenuList li a:active { background-color: #f2bc8b; }

/*

	Gallery images
	--------------

*/

html body #serviceWrapper #galleryRight { background-color: #999; }
html body #serviceWrapper #galleryImage,
html body #serviceWrapper #galleryImage .galleryImageSlider { background-color: #ffffff; }
html body #serviceWrapper #galleryImage .galleryImageSlider a { background-color: #9c1308; }
html body #serviceWrapper #galleryImage .galleryImageSlider a:hover { background-color: #999; }
html body #serviceWrapper #galleryImageLarge .showDescription { background-color: transparent; }

/*

	Gallery thumbs
	--------------

*/

html body #serviceWrapper .galleryThumbContainer { background-color: #ffffff; }

/*

	UNIT DATA
	---------

	Unit title
	----------

*/

html body #serviceWrapper .unitDataInfoTitle { background-color: #ccc; }

/*

	Google maps
	-----------

*/

#geoSearch #locationFrom { background-color: #e7f3fe; }
#geoSearch #locationFrom a.inputButton { background-color: orange; }
#geoSearch #locationFrom a.inputButton:hover { background-color: #00517a }
.googledir table a { background-color: #ff970f; }
.googledir table a:hover { background-color: #00517a; }

/*

	Results box
	-----------

*/

html body #serviceWrapper #contentSearchData .searchDataBox { background-color: #dfdfdf; }
html body #serviceWrapper #contentSearchData .searchDataHead,
html body #serviceWrapper #contentSearchData .searchDataChanged { background-color: #ffffff; }
html body #serviceWrapper #contentSearchData .searchDataDetails { background-color: #9c1308; color:#fff;}

/*

	RESERVATION
	-----------

*/

html body #serviceWrapper #contentReservation input,
html body #serviceWrapper #contentReservation select { background-color: #ffffff; }

/*

	Reservation content
	-------------------

*/

html body #serviceWrapper .reservationNote { background-color: #eeeeee; }

/*

	Reservation buttons
	-------------------

*/

html body #serviceWrapper .userChangeData,
html body #serviceWrapper .userChangeData span,
html body #serviceWrapper .largeButtons a.gray,
html body #serviceWrapper .largeButtons a.gray span,
html body #serviceWrapper .smallButtons a.gray,
html body #serviceWrapper .smallButtons a.gray span { background-color: #aaaaaa; }

html body #serviceWrapper .largeButtons a.gray:hover,
html body #serviceWrapper .largeButtons a.gray:hover span,
html body #serviceWrapper .smallButtons a.gray:hover,
html body #serviceWrapper .smallButtons a.gray:hover span { background-color: #333333; }


html body #serviceWrapper .largeButtons a.orange,
html body #serviceWrapper .largeButtons a.orange span,
html body #serviceWrapper .smallButtons a.orange,
html body #serviceWrapper .smallButtons a.orange span { background-color: #9c1308; }

html body #serviceWrapper .largeButtons a.orange:hover,
html body #serviceWrapper .largeButtons a.orange:hover span,
html body #serviceWrapper .smallButtons a.orange:hover,
html body #serviceWrapper .smallButtons a.orange:hover span { background-color: #999; }

/*

	Reservation table
	-----------------
	
*/

html body #serviceWrapper #contentReservation td,
html body #serviceWrapper #contentReservation .rCalculationSpacer,
html body #serviceWrapper #contentReservation .rPaying td,
html body #serviceWrapper #contentReservation .rPaying .rCalculationSpacer { background-color: #ffffff; }
html body #serviceWrapper #contentReservation .topTr td,
html body #serviceWrapper #contentReservation .rPaying .topTr td { background-color: #ccc; }
html body #serviceWrapper #contentReservation .last td,
html body #serviceWrapper #contentReservation .last td.rCalculationSum { background-color: #666; }
html body #serviceWrapper #contentReservation .rCalculationSum,
html body #serviceWrapper #contentReservation .rPaying .rCalculationSum { background-color: #ececec; }

/*

	SIDEBAR
	-------
	
*/

html body #serviceWrapper #contentSidebar .sidebarBox,
html body #serviceWrapper #contentSidebar .sidebarBox h3 { background-color: #ececec; }
html body #serviceWrapper #contentSidebar .sidebarInput,
html body #serviceWrapper #contentSidebar .sidebarInputInactive { background-color: #ffffff; }
html body #serviceWrapper #contentSidebar .sidebarButton { background-color: #ff970f; }
html body #serviceWrapper #contentSidebar .sidebarButton:hover { background-color: #00517a; }

/*

	Widget reservation
	------------------

*/

html body #serviceWrapper #sidebarReservation .sidebarReservationButton,
html body #serviceWrapper #sidebarReservation .sidebarReservationButton span { background-color: #9c1308; }
html body #serviceWrapper #sidebarReservation .sidebarReservationButton:hover,
html body #serviceWrapper #sidebarReservation .sidebarReservationButton:hover span { background-color: #999; }


/*


	FIFTH PART :: jQuery
	====================
	
	This is the fifth part of the CSS document which contains jQuery styles. This is not full jQuery
	CSS but optimized for our services and options. Also, you will not find them all on theme creators.
	
	If you want to try to use theme creator for jQuery, then you can start by visiting this link:
	
	http://jqueryui.com/themeroller/
	
	Which will give you more or less everything you need to start off with this.
	
	If you think you won't quite manage inside this CSS, then leave it as it is and just change colors.
	
	
*/

/* Layout helpers */

.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction cues */

.ui-state-disabled { cursor: default !important; }

/* Icons states and images */

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

/* Overlays */

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Component containers */

.ui-widget { font-family: Arial,Tahoma,Verdana,sans-serif; font-size: 12px; }
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family: Arial,Tahoma,Verdana,sans-serif; font-size: 12px; }
.ui-widget-content { float: left; border: 1px solid #bcd3fa; background-color: #ffffff; color: #00517a; }
.ui-widget-content a { color: #00517a; }
.ui-widget-header { background-color: #3787ee; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states */

.ui-state-default,
.ui-widget-content .ui-state-default { border: 1px solid #bcd3fa !important; background-color: #e5eefd !important; font-weight: normal; color: #00517a; outline: none; }
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited { color: #00517a; text-decoration: none; outline: none; }
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus { border: 1px solid #fa902e !important; background-color: #fbec88 !important; font-weight: normal; color: #00517a; outline: none; }
.ui-state-hover a,
.ui-state-hover a:hover { color: #00517a; text-decoration: none; outline: none; }
.ui-state-active,
.ui-widget-content .ui-state-active { border: 1px solid #1d63ec !important; background-color: #bcd3fa !important; font-weight: normal; color: #00517a; outline: none; }
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited { color: #00517a; outline: none; text-decoration: none; }
.ui-datepicker-header a:hover { border: 1px solid #1d63ec; background-color: #ffffff; font-weight: normal; color: #00517a; outline: none; }

/* Interaction cues */

.ui-state-highlight,
.ui-widget-content .ui-state-highlight { border: 1px solid #fa902e !important; background-color: #fbc688 !important; color: #00517a; }
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a { color: #00517a; }
.ui-state-error,
.ui-widget-content .ui-state-error {border: 1px solid #fa902e; background-color: #fbec88; color: #00517a; }
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error-text { color: #00517a; }
.ui-state-disabled,
.ui-widget-content .ui-state-disabled { background-image: none; }
.ui-priority-primary,
.ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

/* Icons, states and images */

.ui-widget-header .ui-icon {background-image: url('i/ui/ui-icons_ffffff_256x240.png'); }
.ui-icon,
.ui-state-hover .ui-icon { width: 16px; height: 16px; background-image: url('i/ui/ui-icons_00517a_256x240.png'); }

/* Positioning */

.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }


/* Overlays */

.ui-widget-overlay { background-color: #aaaaaa; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background-color: #aaaaaa; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }

/* Accordion */

.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 10px; padding: 5px 5px 5px 22px; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: 5px; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 10px 22px; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }

/* Datepicker */

.ui-datepicker { padding: 3px; width: 180px;}
.ui-datepicker .ui-datepicker-header { position:relative; padding: 2px 0; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 18px; height: 18px; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-datepicker .ui-datepicker-title { margin: 0 23px; line-height: 18px; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:10px; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: 10px !important; border-collapse: collapse; margin:0 0 4px; }
.ui-datepicker th { padding: 4px 3px; text-align: center; font-weight: bold; border: 0; }
.ui-datepicker td { border: 0; padding: 1px; width: 25px; }
.ui-datepicker td span,
.ui-datepicker td a { display: block; padding: 1px; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 7px 0 0 0; padding:0 2px; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 5px 2px 4px; cursor: pointer; padding: 2px 6px 3px 6px; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* IE6 IFRAME FIX */
.ui-datepicker-cover {
 display: none; /*sorry for IE5*/
 display/**/: block; /*sorry for IE5*/
 position: absolute; /*must have*/
 z-index: -1; /*must have*/
 filter: mask(); /*must have*/
 top: -4px; /*must have*/
 left: -4px; /*must have*/
 width: 200px; /*must have*/
 height: 200px; /*must have*/
}

/* Autocomplete */

.autocompleter_holder { z-index: 3000; position: absolute; display: none; margin: 0px 0px 0px 0px; padding: 0; width: 180px; color: #000000; max-height: 400px; overflow: auto; }
.autocompleter_holder .suggestionList { margin: 0px; padding: 0px; z-index: 1000; background-color: #ffffff; border: 1px solid #ececec; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.autocompleter_holder .suggestionList li { font-size: 11px; margin: 0; padding: 2px 1px 1px 18px; cursor: pointer; border-bottom: none; }
.autocompleter_holder .suggestionList li:hover { background-color: #e6f3fe; }

.autocompleter_holder .suggestionList li.autoRegion { color: #0ea025; font-weight: bold; background-image: none; padding: 2px 1px 1px 6px; cursor: default !important; }
.autocompleter_holder .suggestionList li.autoRiviera { color: #0081c2; font-weight: bold; background-image: none; padding: 2px 1px 1px 6px; cursor: default !important; }
.autocompleter_holder .suggestionList li.autoPlace { color: #333333; font-weight: bold; background-image: none; padding: 2px 1px 1px 6px; cursor: default !important; }
.autocompleter_holder .suggestionList li.more { color: #333333; font-weight: bold; background-image: none; padding: 2px 1px 1px 6px; cursor: default !important; }

.autocompleter_holder .suggestionList li.autoRegion:hover { background-color: transparent; }
.autocompleter_holder .suggestionList li.autoRiviera:hover { background-color: transparent; }
.autocompleter_holder .suggestionList li.autoPlace:hover { background-color: transparent; }
.autocompleter_holder .suggestionList li.more:hover { background-color: transparent; }

.autocompleter_holder .suggestionList .ajaxLoader { background: #ffffff url('i/ui/ajax-loader-bar.gif') no-repeat center 2px !important; }

/* Tooltip */

.toolTip { font-family: Arial, Helvetica, sans-serif; font-size: 11px; border: 1px solid #e1e1e1; background: #f5f5f5; padding: 5px 5px; margin: 0 0 0 -20px; }

/*

	jQuery prettyPhoto
	------------------
	
*/

div.light_square .pp_left ,
div.light_square .pp_middle,
div.light_square .pp_right,
div.light_square .pp_content { background: #fff; }
div.light_square .pp_content .ppt { color: #000; }
div.light_square #pp_full_res .pp_inline { color: #000; } 

div.pp_pic_holder a:focus { outline:none; }
div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; }
div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; }
		
.pp_content { padding: 0; width: 100%; }
.pp_content .ppt { left: auto; position: relative; top: auto; }
.pp_fade { display: none; }
.pp_content_container { position: relative; text-align: left; padding: 10px; height: 530px; width: 950px; background-color: white; overflow: hidden;}

.pp_content_container .pp_details { margin: 0; }
.pp_description { display: none !important; margin: 0; font-size: 11px; }
.pp_nav { clear: left; float: left; margin: 3px 0 0 0; }
.pp_nav p { float: left; margin: 2px 4px; }
.pp_nav a.pp_arrow_previous, .pp_nav a.pp_arrow_next { display: block; float: left; height: 16px; width: 16px; margin-top: 3px; overflow: hidden; text-indent: -10000px; }

.pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; }

a.pp_next { display: none !important; float: right; height: 100%; text-indent: -10000px; width: 49%; }
a.pp_previous { display: none !important; float: left; height: 100%; text-indent: -10000px; width: 49%; }
a.pp_expand, a.pp_contract { display: none !important; }

a.pp_print { float: left; display: block; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #ffffff; background-color: #00517a; margin-top: 10px; padding: 3px 9px; font-size: 12px; }
a.pp_print:hover { background-color: #fa902e; }
a.pp_close { float: right; display: block; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #ffffff; background-color: #00517a; margin-top: 10px; padding: 3px 9px; font-size: 12px; }
a.pp_close:hover { background-color: #fa902e; }
.pp_loaderIcon { display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; }
div.ppt { display:none !important; background-color: #fff; padding: 5px 18px 7px 18px; color: #000; display: none; left: 0; position: absolute; top: 0; z-index: 9999; font-size: 12px; font-weight: bold; line-height: 18px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; border-radius: 5px; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/*


	SIXTH PART :: THE UNFORTUNATE PART
	==================================
	
	Because of some resetting issues and how jQuery works, this has to be here, again,
	and on the bottom.
	

*/

/* Layout helpers */

html body #serviceWrapper .ui-helper-hidden { display: none; }
html body #serviceWrapper .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
html body #serviceWrapper .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; list-style: none; }
html body #serviceWrapper .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html body #serviceWrapper .ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
html body #serviceWrapper .ui-helper-clearfix { height:1%; }
html body #serviceWrapper .ui-helper-clearfix { display:block; }
/* end clearfix */
html body #serviceWrapper .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction cues */

html body #serviceWrapper .ui-state-disabled { cursor: default !important; }

/* Icons states and images */

html body #serviceWrapper .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

/* Overlays */

html body #serviceWrapper .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Component containers */

html body #serviceWrapper .ui-widget { font-family: Arial,Tahoma,Verdana,sans-serif; font-size: 12px; }
html body #serviceWrapper .ui-widget input,
html body #serviceWrapper .ui-widget select,
html body #serviceWrapper .ui-widget textarea,
html body #serviceWrapper .ui-widget button { font-family: Arial,Tahoma,Verdana,sans-serif; font-size: 12px; }
html body #serviceWrapper .ui-widget-content { float: left; border: 1px solid #bcd3fa; background-color: #ffffff; color: #00517a; }
html body #serviceWrapper .ui-widget-content a { color: #00517a; }
html body #serviceWrapper .ui-widget-header { background-color: #999; color: #ffffff; font-weight: bold; }
html body #serviceWrapper .ui-widget-header a { color: #ffffff; }

/* Interaction states */

html body #serviceWrapper .ui-state-default,
html body #serviceWrapper .ui-widget-content .ui-state-default { border: 1px solid #BCD3FA  !important; background-color: #E5EEFD; font-weight: normal; color: #9c1308; outline: none; }
html body #serviceWrapper .ui-state-default a,
html body #serviceWrapper .ui-state-default a:link,
html body #serviceWrapper .ui-state-default a:visited { color: #00517a; text-decoration: none; outline: none; }
html body #serviceWrapper .ui-state-hover,
html body #serviceWrapper .ui-widget-content .ui-state-hover,
html body #serviceWrapper .ui-state-focus,
html body #serviceWrapper .ui-widget-content .ui-state-focus { border: 1px solid #fa902e !important; background-color: #fbec88 !important; font-weight: normal; color: #00517a; outline: none; }
html body #serviceWrapper .ui-state-hover a,
html body #serviceWrapper .ui-state-hover a:hover { color: #00517a; text-decoration: none; outline: none; }
html body #serviceWrapper .ui-state-active,
html body #serviceWrapper .ui-widget-content .ui-state-active { border: 1px solid #1d63ec !important; background-color: #bcd3fa !important; font-weight: normal; color: #00517a; outline: none; }
html body #serviceWrapper .ui-state-active a,
html body #serviceWrapper .ui-state-active a:link,
html body #serviceWrapper .ui-state-active a:visited { color: #00517a; outline: none; text-decoration: none; }
html body #serviceWrapper .ui-datepicker-header a:hover { border: 1px solid #1d63ec; background-color: #ffffff; font-weight: normal; color: #00517a; outline: none; }

/* Interaction cues */

html body #serviceWrapper .ui-state-highlight,
html body #serviceWrapper .ui-widget-content .ui-state-highlight { border: 1px solid #fa902e !important; background-color: #fbc688 !important; color: #00517a; }
html body #serviceWrapper .ui-state-highlight a,
html body #serviceWrapper .ui-widget-content .ui-state-highlight a { color: #00517a; }
html body #serviceWrapper .ui-state-error,
html body #serviceWrapper .ui-widget-content .ui-state-error {border: 1px solid #fa902e; background-color: #fbec88; color: #00517a; }
html body #serviceWrapper .ui-state-error a,
html body #serviceWrapper .ui-widget-content .ui-state-error a,
html body #serviceWrapper .ui-state-error-text,
html body #serviceWrapper .ui-widget-content .ui-state-error-text { color: #00517a; }
html body #serviceWrapper .ui-state-disabled,
html body #serviceWrapper .ui-widget-content .ui-state-disabled { background-image: none; }
html body #serviceWrapper .ui-priority-primary,
html body #serviceWrapper .ui-widget-content .ui-priority-primary { font-weight: bold; }
html body #serviceWrapper .ui-priority-secondary,
html body #serviceWrapper .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

/* Icons, states and images */

html body #serviceWrapper .ui-widget-header .ui-icon {background-image: url('i/ui/ui-icons_ffffff_256x240.png'); }
html body #serviceWrapper .ui-icon,
html body #serviceWrapper .ui-state-hover .ui-icon { width: 16px; height: 16px; background-image: url('i/ui/ui-icons_00517a_256x240.png'); }

/* Positioning */

html body #serviceWrapper .ui-icon-calendar { background-position: -32px -112px; }
html body #serviceWrapper .ui-icon-circle-close { background-position: -32px -192px; }
html body #serviceWrapper .ui-icon-circle-triangle-e { background-position: -48px -192px; }
html body #serviceWrapper .ui-icon-circle-triangle-s { background-position: -64px -192px; }
html body #serviceWrapper .ui-icon-circle-triangle-w { background-position: -80px -192px; }
html body #serviceWrapper .ui-icon-circle-triangle-n { background-position: -96px -192px; }
html body #serviceWrapper .ui-icon-circle-arrow-e { background-position: -112px -192px; }
html body #serviceWrapper .ui-icon-circle-arrow-s { background-position: -128px -192px; }
html body #serviceWrapper .ui-icon-circle-arrow-w { background-position: -144px -192px; }
html body #serviceWrapper .ui-icon-circle-arrow-n { background-position: -160px -192px; }


/* Overlays */

html body #serviceWrapper .ui-widget-overlay { background-color: #aaaaaa; opacity: .30;filter:Alpha(Opacity=30); }
html body #serviceWrapper .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background-color: #aaaaaa; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }

/* Datepicker */
/* with multiple calendars */

html body #serviceWrapper .ui-datepicker { padding: 3px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-header { position:relative; padding: 2px 0; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-prev,
html body #serviceWrapper .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 18px; height: 18px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-prev-hover,
html body #serviceWrapper .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-prev { left:2px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-next { right:2px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-prev-hover { left:1px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-next-hover { right:1px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-prev span,
html body #serviceWrapper .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-title { margin: 0 23px; line-height: 18px; text-align: center; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-title select { float:left; font-size:10px; margin:1px 0; }
html body #serviceWrapper .ui-datepicker select.ui-datepicker-month-year {width: 100%;}
html body #serviceWrapper .ui-datepicker select.ui-datepicker-month, 
html body #serviceWrapper .ui-datepicker select.ui-datepicker-year { width: 49%;}
html body #serviceWrapper .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
html body #serviceWrapper .ui-datepicker table {width: 100%; font-size: 9px; border-collapse: collapse; margin:0 0 4px; }
html body #serviceWrapper .ui-datepicker th { padding: 4px 3px; text-align: center; font-weight: bold; border: 0; }
html body #serviceWrapper .ui-datepicker td { border: 0; padding: 1px; width: 25px; }
html body #serviceWrapper .ui-datepicker td span,
html body #serviceWrapper .ui-datepicker td a { display: block; padding: 1px; text-align: right; text-decoration: none; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 7px 0 0 0; padding:0 2px; border-left: 0; border-right: 0; border-bottom: 0; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 5px 2px 4px; cursor: pointer; padding: 2px 6px 3px 6px; width:auto; overflow:visible; }
html body #serviceWrapper .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }


html body #serviceWrapper .ui-datepicker.ui-datepicker-multi { width:620px; }
html body #serviceWrapper .ui-datepicker-multi .ui-datepicker-group { float:left; }
html body #serviceWrapper .ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto 4px; }
html body #serviceWrapper .ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
html body #serviceWrapper .ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
html body #serviceWrapper .ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
html body #serviceWrapper .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
html body #serviceWrapper .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
html body #serviceWrapper .ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
html body #serviceWrapper .ui-datepicker-row-break { clear:both; }

/*

	Calendar reservation states
	---------------------------
	
*/

html body #serviceWrapper .unavail span { background-color: #fbc688 !important; border-color: #fa902e; }
html body #serviceWrapper .unavail_start span { background-color: transparent !important; border-right-color: #fa902e; border-bottom-color: #fa902e; border-left-color: #bbd8f9; border-top-color: #bbd8f9; }
html body #serviceWrapper .unavail_end span { background-color: transparent !important; border-left-color: #fa902e; border-top-color: #fa902e; border-right-color: #bbd8f9; border-bottom-color: #bbd8f9; }
html body #serviceWrapper .unavail_temp span { background-color: #f6fb88 !important; background-image: none; border-color: #fad52e; }
html body #serviceWrapper .unavail_temp_start span { background-color: transparent !important; border-right-color: #fad52e; border-bottom-color: #fad52e; border-left-color: #bbd8f9; border-top-color: #bbd8f9; }
html body #serviceWrapper .unavail_temp_end span { background-color: transparent !important; border-left-color: #fad52e; border-top-color: #fad52e; border-right-color: #bbd8f9; border-bottom-color: #bbd8f9; }
html body #serviceWrapper .unavail_cross_temp span { background-color: transparent !important; border-right-color: #fad52e; border-bottom-color: #fad52e; border-left-color: #fa902e; border-top-color: #fa902e; }
html body #serviceWrapper .temp_cross_unavail span { background-color: transparent !important; border-left-color: #fad52e; border-top-color: #fad52e; border-right-color: #fa902e; border-bottom-color: #fa902e; }
html body #serviceWrapper .ui-datepicker.ui-datepicker-multi .ui-datepicker-other-month { text-align: right; text-decoration: none; padding-right: 3px; }

html body #serviceWrapper .unavail_start span,
html body #serviceWrapper .unavail_end span,
html body #serviceWrapper .unavail_temp_start span,
html body #serviceWrapper .unavail_temp_end span,
html body #serviceWrapper .unavail_cross_temp span,
html body #serviceWrapper .temp_cross_unavail span { background-repeat: no-repeat; background-image: url('i/sprites_8bit.gif') !important; }

html body #serviceWrapper .unavail_start span  { background-position: -652px -54px !important; }
html body #serviceWrapper .unavail_end span { background-position: -652px 0px !important; }
html body #serviceWrapper .unavail_temp_start span { background-position: -794px -54px !important; }
html body #serviceWrapper .unavail_temp_end span { background-position: -794px -0px !important; }
html body #serviceWrapper .unavail_cross_temp span { background-position: -728px 0px !important; }
html body #serviceWrapper .temp_cross_unavail span { background-position: -720px -54px !important; }

/* IE6 IFRAME FIX */
html body #serviceWrapper .ui-datepicker-cover {
 display: none; /*sorry for IE5*/
 display/**/: block; /*sorry for IE5*/
 position: absolute; /*must have*/
 z-index: -1; /*must have*/
 filter: mask(); /*must have*/
 top: -4px; /*must have*/
 left: -4px; /*must have*/
 width: 200px; /*must have*/
 height: 200px; /*must have*/
}

/* Slider */

html body #serviceWrapper .ui-slider { float: left; position: relative; text-align: left; }
html body #serviceWrapper .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 13px; height: 5px; margin-bottom: -12px; padding-top: 15px; cursor: pointer; }
html body #serviceWrapper .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 7px; display: block; border: 0; }
html body #serviceWrapper .ui-slider-horizontal { height: 8px; }
html body #serviceWrapper .ui-slider-horizontal .ui-slider-handle { top: -3px; margin-left: -8px; }
html body #serviceWrapper .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
html body #serviceWrapper .ui-slider-horizontal .ui-slider-range-min { left: 0; }
html body #serviceWrapper .ui-slider-horizontal .ui-slider-range-max { right: 0; }
html body #serviceWrapper .ui-slider-vertical { width: 8px; }
html body #serviceWrapper .ui-slider-vertical .ui-slider-handle { left: -3px; }
html body #serviceWrapper .ui-slider-vertical .ui-slider-range { left: 0; height: auto; width: 100%; }
html body #serviceWrapper .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
html body #serviceWrapper .ui-slider-vertical .ui-slider-range-max { top: 0; }