/***************************************************
    MASTER CSS file for Bluesun Hotel Soline
    Author: WEB Marketing (www.wem.hr)
    Media: Screen
    
    STRUCTURE:
    01/ BASIC SETTINGS 
    02/ LAYOUT & GRID
    03/ NAVIGATION
    04/ CONTENT
    05/ MISC
	
***************************************************/

/*
01/ BASIC SETTINGS
==================================================*/
*    { margin: 0; padding: 0; list-style: none; outline: none; }
body { font: normal 12px/1em Arial, Helvetica, sans-serif; color: #01213b; background: #02121e; }

/**** RESET ***/
a img                                      { border: none; }
a,a img,a:link,a:visited, a:hover,a:active { outline: none; cursor: pointer; }
:focus { outline: none; }
fieldset { border: none; }
#printlogo { display: none; }
.clear { display: block; height: 1px; width: 100%; margin: 0; padding: 0; }
#printContacts { display: none; }
.hide { display: none; }

/*** headings ***/
h1, h2, h3, h4, h5, h6                     { clear: both; line-height: 1.5em; }

/*
02/ LAYOUT & GRID
==================================================*/
#wrapper { width: 960px; height: 100%; overflow: hidden; position: relative; background: transparent url(../images/layout/wrapper-bg.gif) repeat-y 0 0; }
#mainWrapper { width: 910px; height: 100%; overflow: hidden; padding-bottom: 30px; background: transparent url(../images/layout/wrapper-bottom-bg.gif) no-repeat left bottom; }

#mainNavCol { display: inline; float: left; width: 200px; height: 100%; overflow: hidden; margin: 0 20px 0 10px; padding: 25px 0 330px 0; }
#featuredCol { display: inline; float: left; width: 200px; height: 100%; overflow: hidden; margin: 0 20px 0 0; }
#mainContainerCol { display: inline; float: left; width: 680px; height: 100%; overflow: hidden; margin: 0 0 0 -10px; padding: 0 0 200px 0; }
#mainContainer { width: 660px; height: 100%; overflow: hidden; padding: 20px 0 0 20px; margin: 0 0 20px 0; border-top: 1px solid #eee; }
#mainContent { width: 648px; height: 100%; }

.home#wrapper { background: transparent url(../images/layout/wrapper-bg-home.gif) repeat-y 0 0; }
.home #mainWrapper { background: transparent url(../images/layout/wrapper-bottom-bg-home.gif) no-repeat left bottom; }
.home #mainContainerCol { width: 450px; margin: 0; padding: 0 0 165px 0; }
.home #mainContainer { margin: 0; padding: 20px 0 0 0; width: 450px; background: none; }
.home #mainContent { width: 448px; }

.static #mainContent { width: 430px; display: inline; float: left; }

#header { margin-bottom: 20px; }
#nav { height: 100%; overflow: hidden; margin: 0 0 15px 20px; }
.home #nav { margin-left: 0; }

#footer { width: 660px; position: absolute; left: 220px; padding: 35px 0 0 20px; bottom: 30px; background: transparent url(../images/layout/maincontainer-bottom-bg.gif) no-repeat -1px top; }
.home #footer { left: 450px; padding: 0; background: none;  }


/*
03/ NAVIGATION
==================================================*/

/*** LANGUAGE ***/
#languageHolder { position: absolute; top: 0; left: 910px; width: 50px; overflow: hidden; background: transparent url(../images/layout/language-bg.gif) repeat-y 0 0; }
#languageHolder ul { padding: 10px 0 15px 0; background: transparent url(../images/layout/language-bottom-bg.gif) no-repeat left bottom; font-size: 9px; }
#languageHolder a { display: block; line-height: 17px; color: #fff; text-decoration: none; padding-left: 6px; }
#languageHolder a:hover { color: #fff; text-decoration: underline; }
#languageHolder .on a,
#languageHolder .on a:hover { background: transparent url(../images/layout/language-active-bg.gif) no-repeat 0 0; color: #666; text-decoration: none; }

/*** MAIN MENU ***/
#mainMenu { font-size: 12px; }
#mainMenu li { height: 100%; overflow: hidden; }
#mainMenu a { display: block; float: left; color: #fff; width: 165px; text-decoration: none; line-height: 14px; padding: 5px 0 5px 35px; background: transparent url(../images/layout/mainmenu-arrow.gif) no-repeat 23px 9px; }
#mainMenu a:hover { color: #fff; text-decoration: underline; }

#mainMenu li.on { background: transparent url(../images/layout/active-top.gif) no-repeat 0 0; }
#mainMenu li.on a { background: transparent url(../images/layout/active-bottom.gif) no-repeat left bottom; }
#mainMenu li.on a, #mainMenu li.on a:hover { text-decoration: none; font-weight: bold; }

#mainMenu li#home.on { background: transparent url(../images/layout/home-active-top.gif) no-repeat 0 0; } 
#mainMenu li#home.on a { background: transparent url(../images/layout/active-bottom.gif) no-repeat left bottom; }


/*** MAIN MENU LEVELS ***/
#mainMenu ul { height: 100%; overflow: hidden; clear: both; padding: 0 0 10px 0; margin: 0; font-size: 12px; background: #10395a; }
#mainMenu ul ul { margin-bottom: 0; }
#mainMenu ul li { padding-left: 35px; margin: 2px 0 0 0; }
#mainMenu ul ul li { padding-left: 15px; }
#mainMenu ul a,
#mainMenu .on ul a { font-weight: normal; padding: 2px 0 0 15px; width: 140px; background: transparent url(../images/layout/mainmenu-sub-bullet.gif) no-repeat 0 7px; }
#mainMenu .on ul ul a { width: 125px; }

#mainMenu ul a:hover,
#mainMenu .on ul a:hover { font-weight: normal; text-decoration: underline; }

#mainMenu ul a.on,
#mainMenu ul a.on:hover,
#mainMenu .on ul a.on,
#mainMenu .on ul a.on:hover{ font-weight: normal; text-decoration: underline; }

/*
04/ CONTENT
==================================================*/

/*** LOGO ***/
#logo { display: block; width: 172px; height: 33px; overflow: hidden; background: transparent url(../images/layout/logo.gif) no-repeat 0 0; text-indent: -9999px; margin-bottom: 32px; }

/*** SEARCH FORM ***/
.searchFormHolder { width: 100%; height: 55px; }
.searchForm { float: right; margin: 13px 0 0 0; width: 225px; height: 30px; overflow: hidden; position: relative; background: transparent url(../images/layout/search-bg.gif) no-repeat 0 0; }
.searchFormInput { background: #fff; border: none; color: #666; font: normal 10px Arial, Helvetica, sans-serif; position: absolute; top: 9px; left: 15px; width: 176px; }
.searchFormSubmit { display: block; width: 25px; height: 17px; overflow: hidden; padding-left: 50px; position: absolute; background: transparent url(../images/layout/search-button.gif) no-repeat 0 0; border: none; top: 6px; left: 195px; }


/*** BOOKING ***/
.bookingForm { height: 100%; overflow: hidden; padding: 0 0 20px 0; margin: 0 0 23px 0; border-top: 1px solid #294c68; color: #02121e; background: #fff url(../images/layout/booking-bottom-bg.gif) no-repeat left bottom; position: relative;  }
.bookingForm h2 { margin: 0 -15px 15px -15px; padding: 20px 15px 0 15px; font-size: 18px; font-weight: normal; line-height: 1.1em; background: transparent url(../images/layout/booking-top-bg.gif) no-repeat 0 0; text-align: center; }

.bookingForm fieldset { padding: 0 15px; }
.bookingForm .date { width: 180px; height: 40px; overflow: hidden; margin-bottom: 10px; position: relative; }
.bookingForm .select label,
.bookingForm .input label { display: none; }

.bookingForm .date .errorMessage { font-size: 9px; position: absolute; right: 0; top: 2px; }
.bookingForm .date label { display: block; }

.bookingForm .select,
.bookingForm .input { background: transparent url(../images/layout/booking-select.gif) no-repeat 0 0; width: 170px; height: 20px; overflow: hidden; margin-bottom: 10px; }
.bookingForm select { background: #fff; border: none; font: normal 11px Arial, Helvetica, sans-serif; color: #666; line-height: 12px; margin: 2px 0 0 5px; width: 162px; }

.bookingForm .date img { vertical-align: middle; margin-top: 5px; }
.bookingForm .submit { padding-top: 5px; text-align: center; }
.bookingForm .submit input { width: 89px; height: 23px; background: transparent url(../images/layout/booking-submit.gif) no-repeat 0 0; border: none; font: bold 12px Arial, Helvetica, sans-serif; color: #fff;  }

/*** BOOKING - Telerik FIX ***/
.bookingForm table,
.bookingForm .rcTable { margin: 0; padding: 0; border: none; }
.bookingForm table th,
.bookingForm table td { background: none; padding: 0; border: none; }
.bookingForm .date .riTextBox { border: 1px solid #221e1e; background: #fff; margin: 5px 0 0 0; padding: 1px 0; font: normal 11px Arial, Helvetica, sans-serif; text-indent: 5px; width: 130px !important; }
.bookingForm label { color: #02121e; font-size: 11px; }
.loading { position: absolute; top: 10px; right: 10px; }


/*** PATH ***/
#path         { display: inline; float: left; width: 600px; font-size: 11px; }
.home #path   { width: 200px; }
#path li      { float: left; margin-right: 5px; padding-right: 10px; background: transparent url(../images/layout/path-arrow.gif) no-repeat right center; }
#path .on     { padding: 0; margin: 0; background: none; }
#path a       { color: #01213b; text-decoration: underline; cursor: pointer; }
#path .on a   { text-decoration: none; }

/*** OPTIONS ***/
#options     { display: inline; float: right; width: 60px; height: 100%; overflow: hidden; }
#printIcon   { display: inline; float: left; width: 11px; height: 10px; overflow: hidden; background: transparent url(../images/layout/print.gif) no-repeat 0 0; text-indent: -9999px; margin: 3px 15px 0 0; }
#fontSize    { display: inline; float: left; height: 100%; overflow: hidden; letter-spacing: 1px; padding-bottom: 2px; }
#fontSize a  { color: #01213b; text-decoration: none; }
#fontSize a:hover { color: #01213b; text-decoration: underline; }

#small  { font-size: 10px; }
#normal { font-size: 12px; }
#large  { font-size: 15px; }

/*** HOTELS LIST ***/
#hotelsList { position: absolute; bottom: 30px; left: 35px; font-size: 12px; line-height: 20px; }
#hotelsList li { margin-top: 8px; }
#hotelsList a { color: #fff; text-decoration: none; }
#hotelsList a:hover { color: #fff; text-decoration: underline; }


/*** FOOTER ***/
#basicContacts { display: inline; float: left; width: 170px; height: 100%; overflow: hidden; margin: 0 20px 0 0; line-height: 1.5em; font-size: 11px; }
.home #basicContacts { width: 200px; margin: 0 35px 0 0; }
#basicContacts h2, #basicContacts h3,
#basicContacts h4, #basicContacts h5,
#basicContacts h6 { font-size: 14px; font-weight: normal; margin: 0; }
#basicContacts a { color: #01213b; text-decoration: underline; }
#basicContacts a:hover { color: #01213b; text-decoration: none; }

#quotedTextHolder { display: inline; float: right; width: 240px; padding-top: 17px; background: transparent url(../images/layout/quot-top-bg.gif) no-repeat 0 0; }
#quotedText { height: 100%; overflow: hidden; padding: 0 20px 18px 20px; background: transparent url(../images/layout/quot-bg.gif) no-repeat left bottom; color: #02121e; font-size: 14px; line-height: 22px; font-style: italic; }

/*
05/ MISC
==================================================*/

/*** NEWSLETTER ***/
#newsletterHolder { display: inline; float: left; width: 215px; height: 122px; overflow: hidden; background: transparent url(../images/layout/newsletter-bg.gif) no-repeat 0 0; font-size: 11px; line-height: 14px; color: #fff; margin-top: 45px; }
.newsletterSubscribe { padding: 10px 15px; }
.newsletterSubscribe h3 { font-size: 16px; font-weight: bold; margin: 0 0 4px 0; line-height: 18px; }
#newsletterLink { margin-top: 4px; height: 21px; }
#newsletterLink a { display: block; float: left; width: 81px; height: 21px; line-height: 21px; background: transparent url(../images/layout/newsletter-submit.gif) no-repeat 0 0; color: #fff; text-decoration: none; text-align: center;  }

#topLink { position: absolute; bottom: 25px; left: 910px; width: 50px; }
#topLink a { display: block; width: 50px; height: 18px; overflow: hidden; line-height: 17px; font-size: 10px; color: #fff; text-decoration: none; background: transparent url(../images/layout/toplink.gif) no-repeat 0 0; padding: 0 0 0 8px; text-indent: -9999px; }
#topLink a:hover { color: #fff; text-decoration: underline; }

#copyright { margin: 10px 0 8px 20px; }
#copyright a     { color: #fff; text-decoration: none; }
#copyright a:hover{ color: #fff; text-decoration: underline; }

#development { margin: 0 0 0 20px; padding-bottom: 40px; }
#copyright, #development { font-size: 11px; color: #fff; }
#development a { color: #fff; text-decoration: underline; }
#development a:hover { color: #fff; text-decoration: none; }