/***************************************************
    MASTER CSS file for Bluesun Hotel Kaj
    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 .75em/1em Arial, Helvetica, sans-serif; color: #000; background: #540624 url(../images/layout/body.gif) repeat-x 0 0; }

/**** 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: 100%; background: transparent url(../images/layout/logo-bg.gif) no-repeat center top; }
#wrapperInner { width: 960px; height: 100%; margin: 0 auto; overflow: hidden; }
#mainNavWrapper {  width: 960px; height: 85px; overflow: hidden; position: relative; }
	#mainNav { display: inline; float: right; height: 100%; margin-top: 17px; }

#header { width: 958px; height: 290px; position: relative; overflow: hidden; margin-bottom: 10px; border: 1px solid #b29162; background: transparent url(../images/layout/header.jpg) no-repeat 0 0; clear: both; }
#flash { width: 680px; height: 288px; position: absolute; top: 1px; right: 0; }

.home #header { height: 585px; overflow: hidden; border: none; width: 960px; }
#homeHeaderMask { width: 960px; height: 585px; background: transparent url(../images/layout/header-mask.png) no-repeat 0 0; }
.home #flash { width: 683px; height: 370px; position: absolute; top: 1px; right: 2px; }

#homeFeatured { width: 960px; height: 173px; overflow: hidden; position: relative; background: transparent url(../images/layout/featured-bg.gif) repeat-x 0 0; border: 1px solid #b4ccd9; margin-bottom: 10px; }

#container { width: 930px; height: 100%; overflow: hidden; background: #fff; border: 1px solid #ddd; padding: 20px 20px 30px 20px; margin-bottom: 10px; }
#containerInner { width: 920px; height: 100%; background: transparent url(../images/layout/container-border.gif) repeat-y 225px 0; }
	#nav { height: 100%; overflow: hidden; margin-bottom: 10px; width: 665px; } 
	#mainContainer { display: inline; float: right; width: 665px; overflow: hidden; }
	#mainContent { height: 100%; width: 664px; }
	#secContainer { display: inline; float: left; width: 208px; overflow: hidden; }

#footer { width: 960px; overflow: hidden; background: #3a0419; }

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

/*** LANGUAGE ***/
#language { color: #fff; position: absolute; top: 17px; right: -10px !important; right: -15px; line-height: 10px; font-size: 10px; }
#language li { float: left; padding-right: 5px; margin-right: 5px; border-right: 1px solid #fff; }
#language a { color: #fff; text-decoration: none; }
#language a:hover { color: #fff; text-decoration: underline; }
#language .on a,
#language .on a:hover { color: #fff; text-decoration: underline; }

#language #firstLangItem { border: none; }


/*** MAIN MENU ***/
#mainMenu { width: 945px; padding: 0 0 0 15px; height: 50px; background: #b8406f; margin-bottom: 10px; position: relative; z-index: 1000; font-size: 13px; line-height: 17px; clear: both; }
#mainMenu li { float: left; margin: 14px 0 0 0; position: relative; height: 20px; border-right: 1px solid #e880a8; }
#mainMenu #lastItem,
#mainMenu .lastItem { border: none; }

#mainMenu a { display: block; padding: 2px 5px; color: #fff; text-decoration: none; }
#mainMenu a:hover { background: #e880a8; }

#mainMenu li:hover a,
#mainMenu .on:hover a { background: #e880a8; }

#mainMenu .on a { background: #e880a8; }

/*** MAIN MENU LEVELS ***/
#mainMenu ul              { position: absolute; left: -1px; top: 20px; background: #e880a8; width: 170px; font-weight: normal; line-height: 16px; z-index: 2500; }
#mainMenu #firstItem ul { left: 0px; }
#mainMenu ul ul,
#mainMenu #firstItem ul ul { top: 0; left: 170px; z-index: 3000; padding-top: 0; }
#mainMenu ul li           { display: block; background: none; border: none; margin: 0; padding: 0; width: 170px; height: auto; z-index: 4000; cursor: pointer; word-wrap: break-word;
 }

#mainMenu ul a            { margin: 0; padding: 5px 17px 5px 9px; background: none; border: none; color: #fff; }

#mainMenu .on:hover ul a { background: #e880a8; margin: 0; }

#mainMenu li ul a:hover,
#mainMenu li.on ul a:hover,
#mainMenu li ul a.on,
#mainMenu li.on ul a.on { background: #c55982; }

#mainMenu li ul .sub a,
#mainMenu li.on ul .sub a { background: #e880a8 url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 10px; }
#mainMenu li ul .sub a:hover,
#mainMenu li.on ul .sub a:hover { background: #c55982 url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 10px; }
#mainMenu li ul .sub ul .sub a,
#mainMenu li.on ul .sub ul .sub a { background: #e880a8 url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 10px; }
#mainMenu li ul .sub ul .sub a:hover,
#mainMenu li.on ul .sub ul .sub a:hover { background: #c55982 url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 10px; }

#mainMenu ul li.sub a.on,
#mainMenu ul li.sub a.on:hover { background: #c55982 url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 10px; }

#mainMenu ul li.sub:hover a { background: #c55982 url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 10px; }
#mainMenu ul li.sub:hover ul a { background: #e880a8; background-image: none; }

#mainMenu ul li.sub ul li a.on,
#mainMenu ul li.sub ul li a.on:hover { background: #c55982; background-image: none; }

#mainMenu li ul .sub ul a,
#mainMenu li.on ul .sub ul a { background: #e880a8; background-image: none; }
#mainMenu li ul .sub ul a:hover,
#mainMenu li.on ul .sub ul a:hover { background: #c55982; background-image: none; }

#mainMenu ul                                       { visibility: hidden; }
#mainMenu li:hover ul                              { visibility: visible; }
#mainMenu li:hover ul li ul                        { visibility: hidden; }
#mainMenu li:hover ul li:hover ul                  { visibility: visible; }
#mainMenu li:hover ul li:hover ul li ul            { visibility: hidden; }
#mainMenu li:hover ul li:hover ul li:hover ul      { visibility: visible; }


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

/*** LOGO ***/
#logo { display: inline; float: left; width: 238px; height: 33px; margin-top: 40px; }
#logo a { display: block; width: 238px; height: 33px; text-indent: -9999px; }

/*** SEARCH FORM ***/
.searchForm { position: absolute; top: 45px; right: 0; width: 210px; height: 19px; overflow: hidden; border: 1px solid #100107; }
.searchFormInput { display: inline; float: left; width: 177px; padding: 3px; font: normal 10px Arial, Helvetica, sans-serif; color: #000; border: none; background: #fff; }
.searchFormSubmit { display: inline; float: right; width: 26px; height: 19px; padding-top: 1px; text-indent: -9999px; border: none; background: transparent url(../images/layout/search-button.gif) repeat-y 0 0; }

/*** BOOKING ***/
.bookingForm { width: 210px; height: auto; padding: 10px 0 20px 0; overflow: hidden; background: transparent url(../images/layout/booking.png); position: absolute; top: 25px; left: 25px; }
.home .bookingForm { left: 65px; top: 65px; }
.bookingForm fieldset { width: 150px; margin: 0 auto; }
.bookingForm h2 { font-size: 24px; font-weight: normal; color: #111; text-align: center; }
.loading { position: absolute; top: 23px; right: 15px; }

.bookingForm .select, 
.bookingForm .date { height: 45px; overflow: hidden; }

.bookingForm .select select { background: #fff; border: 1px solid #333; font-size: 11px; color: #000; width: 180px; line-height: 11px; padding: 1px; }
.bookingForm .select select option { padding: 0 5px; margin-bottom: 1px; display: block; }

.bookingForm .date label { font-size: 11px; color: #2a3f57; }
.bookingForm .date input,
.bookingForm .date .riTextBox,
.bookingForm .date .riEnabled     { padding: 2px 0; text-indent: 2px; margin: 4px 0 0 0; background: #fff; border: 1px solid #2a3f57; color: #5a666e; font: normal 11px Arial, Helvetica, sans-serif; width: 128px !important;  }

.bookingForm .date table,
.bookingForm .date th,
.bookingForm .date td { background: none; border: none; padding: 0; margin: 0; }

.bookingForm .submit { text-align: center; }
.bookingForm .submit input { width: 108px; background: #111; color: #fff; border: 1px solid #1c445e; font-size: 15px; text-transform: uppercase; }

/*** PATH ***/
#path         { display: inline; float: left; width: 665px; font-size: 10px; overflow: hidden; height: 15px; position: absolute; }
#path li      { float: left; margin-right: 4px; padding-right: 9px; background: transparent url(../images/layout/path-arrow.gif) no-repeat right center; }
#path .on     { padding: 0; margin: 0; background: none; }
#path a       { color: #540624; text-decoration: underline; cursor: pointer; }
#path .on a   { text-decoration: none; }

/*** OPTIONS ***/
#options     { display: inline; float: right; width: 70px; height: 100%; overflow: hidden; background: #fff; position: relative; padding-left: 10px; }
#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 0 0 0; }
#fontSize    { display: inline; float: right; height: 100%; overflow: hidden; padding-bottom: 2px; }
#fontSize a  { color: #540624; text-decoration: none; }
#fontSize a:hover { color: #540624; text-decoration: underline; }

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


/*** FOOTER ***/
#footerBoxHolder { width: 1000px; height: 100%; overflow: hidden; padding: 0 0 0 28px; margin: 17px 0; background: transparent url(../images/layout/footer-bg.gif) repeat-y 0 0; }
.footerBox { display: inline; float: left; width: 175px; padding-right: 20px; height: 100%; overflow: hidden; margin-right: 40px; color: #fff; line-height: 1.6em; }
.footerBox#contactBox a { text-decoration: underline; }
.footerBox#contactBox a:hover  { text-decoration: none; }

.footerBox#wideBox { width: 410px; padding-left: 20px; padding-right: 0; }

.footerBox h3 { font-size: 14px; font-weight: normal; line-height: 1.05em; color: #fff; margin: 0 0 10px 0; }

#wideBox ul { height: 100%; overflow: hidden;  }
#wideBox ul li { float: left; width: 190px; margin-right: 10px; }
.footerBox a { color: #fff; text-decoration: none; }
.footerBox a:hover { color: #fff; text-decoration: underline; }

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

/*** SOCIAL ***/
#fbBox { width: 210px; height: 180px; overflow: hidden; position: relative; margin: 10px auto 0 auto; }
#fbBox .inner { position: absolute; top: -1px; left: -1px; }

#social { width: 210px; height: 35px; overflow: hidden; position: relative; margin: 20px 0 0 10px; }
#addThis { position: absolute; top: 0; left: 0; width: 90px; }
#fbButton { position: absolute; top: 0; left: 100px; width: 100px; }

/*** NEWSLETTER ***/
#newsletterHolder { width: 185px; height: 100%; overflow: hidden; margin: 30px 0 0 10px; background: #781b3f; overflow: hidden; color: #fff; font-size: 10px; line-height: normal; }
#newsletterContent { padding: 10px 7px; }
#newsletterHolder h2 { font-size: 14px; font-weight: bold; }
#newsletterLink { height: 100%; overflow: hidden; margin-top: 5px; }
#newsletterLink a { color: #fff; text-decoration: none; background: #1f020d; display: block; float: left; padding: 2px 5px; }

#topLink { text-align: right; padding: 10px 0 5px 0; clear: both; }
#topLink a { color: #3e2e4b; text-decoration: underline; }
#topLink a:hover { color: #3e2e4b; text-decoration: none; }

#copyright { margin: 10px 0; padding-top: 10px; text-align: center; font-size: .9em; color: #c54d7c; }
#copyright a     { color: #c54d7c; text-decoration: none; }
#copyright a:hover{ color: #c54d7c; text-decoration: underline; }

#development { text-align: center; color: #c54d7c; font-size: .9em; margin-bottom: 40px; }
#development a { color: #c54d7c; text-decoration: underline; }
#development a:hover { color: #c54d7c; text-decoration: none; }