﻿

/* Header Widget Layout */

#divHeaderContent {position:relative; margin:0 auto; padding:15px 0;}

/* Mobile Icons */
#divHeaderContent a.mobileIcon {position:absolute; display:none;}

/* Mobile Menu */
#divHeaderContent.YourStay #divMobileMenu {display:none;}

/* Main Logo */
#divHeaderContent a.mainLogo {position:relative; padding:0; text-indent:-10000px; display:inline-block;}

/* Header Number and Menu Div */
#divHeaderContent #divSubContent{position:relative;float:right;}

/* Help Number */
#divHeaderContent p {position:relative; float:left;}
#divHeaderContent p span {float:none; margin-left:5px;}

/* Navigation Bar */
#divHeaderContent ul {position:relative; float:right; clear:left; padding-top:10px;max-width:428px;}
#divHeaderContent ul li {position:relative; display:inline;}
#divHeaderContent li+li:before{content: " | "; padding-right:10px}
#divHeaderContent ul a {margin-left:-11px;}

/* ITAA Logo */
#divHeaderContent a.ITAA {position:relative; float:right; margin-left:15px; text-indent:-10000px;}


/* Yourstay */

#divHeaderContent.YourStay {padding:0;}
#divHeaderContent.YourStay select{background:url('/themes/yourstay/images/sprite.png') no-repeat -528px -122px;}
#divHeaderContent.YourStay #divCurrencySelect{width:69px;display:inline-block;float:right;overflow:hidden;background:none;}


/* Main Logo */
#divHeaderContent.YourStay div:first-child{position:relative;float:left;}
#divHeaderContent.YourStay a.mainLogo {margin:0 50px 0 40px;z-index:1;position:relative;top:5px;}

/* Navigation Bar */
#divHeaderContent.YourStay ul {float:right;clear:none;padding:0;margin:25px 0px;}
#divHeaderContent.YourStay ul li a{padding:0px 10px}
#divHeaderContent.YourStay span {float:right;clear:none;margin:27px 30px 0px 0px;}
#divHeaderContent.YourStay span:before {content:" | ";padding-right:10px}
#divHeaderContent.YourStay select {clear:none;margin:15px 0px 0px;-moz-appearance:none;font-weight:700;width:89px;text-indent:-4px;padding-right:4px;margin:15px 0 0;}
/*#divHeaderContent.YourStay select {float:right;clear:none;margin:15px 0px 0px;-moz-appearance:none;font-weight:700;width:66px;padding:10px 10px 10px 5px;}*/

#divHeaderContent.YourStay select::-ms-expand {display:none;}
#divHeaderContent.YourStay label {margin:27px 0 0;height:auto;float:right;}


/* Media queries */

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 976px) 
{
    #divHeaderContent a.ITAA {margin-left:5px;}
    #divHeaderContent ul {float:right;}
    
    #divHeaderContent.YourStay #divMobileMenu {display:none;}
    
    /* YourStay */
    #divHeaderContent.YourStay a.mainLogo {margin: 0 25px 0 20px;}
    #divHeaderContent.YourStay select {margin:12px 10px 5px 0px; height:36px;}
    #divHeaderContent.YourStay ul {margin-top: 20px;margin-bottom:17px;}
    #divHeaderContent.YourStay span {margin-top:22px;}
    #divHeaderContent.YourStay label {margin-top:22px;}
}

/* Mobile */
@media only screen and (max-width: 767px) 
{
    
    #divHeaderContent {text-align:center;}
    #divHeaderContent a.mainLogo {float:none; margin:0 auto;}
    
    /* Mobile Icons */
    #divHeaderContent a.mobileIcon {display:inline;}
    #divHeaderContent #menuIcon {width:39px; height:34px; text-indent:-10000px;}
    #divHeaderContent #phoneIcon {width:40px; height:33px; text-indent:-10000px;}
    #divHeaderContent #menuIcon {left:10px;}
    #divHeaderContent #phoneIcon {right:12px;}
    
    /* Mobile Menu */
    #divHeaderContent #divMobileMenu p,
    #divHeaderContent p {display:none;}
    #divHeaderContent #divMobileMenu,
    #divHeaderContent #divMobileMenu select,
    #divHeaderContent #divMobileMenu ul,
    #divHeaderContent #divMobileMenu ul li,
    #divHeaderContent #divMobileMenu span{display:block;padding:10px;}
        
    #divHeaderContent #divMobileMenu {position:relative;width:100%;margin:0;float:left;padding:10px 0 5px;}
    
    #divHeaderContent #divMobileMenu ul {margin:0;float:left;width:100%;padding:0;max-width:none;}
    #divHeaderContent #divMobileMenu ul li {padding:0;text-align:center;width:100%;margin:10px 0;}
    #divHeaderContent #divMobileMenu ul li + li:before {width:96%;content:"";display:block;margin:0 auto 10px;border:1px solid #cacaca;}
    #divHeaderContent #divMobileMenu ul li a {display:block;width:95%;padding:10px 0;margin:0 auto;}
    
    #divHeaderContent #divMobileMenu select {float:none;margin:0;width:18%;}
    
    /* Mobile Phone Number */
    #divMobilePhoneNumber {display:block;padding:3% 3% 0;}
    
    
    /* YourStay */
    
    #divHeaderContent.YourStay a.mainLogo {margin:0 50px 0 5px;}
    #divHeaderContent.YourStay select,
    #divHeaderContent.YourStay ul,
    #divHeaderContent.YourStay label,
    #divHeaderContent.YourStay span {display:none;}
    
    #divHeaderContent.YourStay #divCurrency {width:40%;margin:0 auto;float:none;display:block;}
    
    #divHeaderContent.YourStay #divMobileMenu select {width:auto;float:left;}
    
    /* YourStay Mobile Menu */
    #divHeaderContent.YourStay #divMobileMenu #divCurrency {float:left;width:100%;background:transparent;}
    #divHeaderContent.YourStay #divMobileMenu #divCurrency label {width:50%;text-align:right;}
    #divHeaderContent.YourStay #divMobileMenu select{background-position:-528px -122px;text-indent:0px;padding-right:20px;}
    #divHeaderContent.YourStay #divMobileMenu {text-align:center;}
    #divHeaderContent.YourStay #divMobileMenu ul {width:100%;padding:0%;float:none;margin:0 auto;}
    
    #divHeaderContent.YourStay #divMobileMenu ul li {display:inline;width:100%;float:left;margin:0;}
    
    #divHeaderContent.YourStay #divMobileMenu ul li + li:before,
    #divHeaderContent.YourStay #divMobileMenu label:before {content:none;}
    
    #divHeaderContent.YourStay #divMobileMenu label {display:inline;margin:0px 0px 0px 10px;padding:10px 0;width:auto;float:left;}
    
    /* YourStay Mobile Phone Number */
    #divHeaderContent.YourStay #divMobilePhoneNumber {float:none;margin:0 auto;clear:both;}
    #divHeaderContent.YourStay #divMobilePhoneNumber:before {content:none;}
    
    
}