@charset "UTF-8";
 
/*
   @Package: Drogisterij.net
   @Subpackage: Topbar Styles
   @Version: 3.0.0
   @Date: 20140321
   @Author: Noon Design - www.noondesign.nl
  
*/
 
#wrapper {
    z-index: 999; /*Chrome Fix */
}
 
#wrapper #header-top {
    height: 31px !important;
    font-family: 'Open Sans', Verdana, sans-serif;
    z-index: 9999 !important;
    background-color: #d70174;
    
}
 
#wrapper #header-top.has-sticky-friend {
    background-color: #a6035d;
}
 
.has-sticky-friend .top-content {
    background: url(../../img/nd/drogisterij-scroll-logo.png) left center no-repeat;
}
 
#header-bottom #header-search {
    height: 81px;
}
 
#header-bottom {
    margin-top: 5px;
    z-index: 150;
    float: left;
    width: 100%;
    top: 26px;
    -webkit-transform-style: preseve3d;
}
 
.header-search-container .header-logo {
    position: static;
    /*padding: 25px 0 0 20px;org*/
    padding: 7px 27px 0 3px;
    float: left;
}
 
.search-box {
    width: 260px;
    height: 31px;
	float:right;
    display: block;
    background: #f4f2ff;
}
 
.dropdown-field {
    z-index: 150;
    border-top: 1px solid #EAEAEA;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    height: auto !important;
    position: relative;
}
 
.header-search-button {
    border-radius: 0px !important;
    -webkit-appearance: none !important;
	/*
    position: relative;
	margin-top:4px;
    display: block;
    height: 23px;
    width: 23px;
    border: none;
    background: url(../../img/nd/search-input.png);
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px;
	*/
}
 
.dropdown-main-categorieen ul li:first-of-type {
    background: none !important;
}
 
.dropdown-main-categorieen ul li a {
    display: block;
    width: 100%;
    /*height: 100%;*/
}
 
.dropdown-main-merken ul li:first-of-type {
    background: none !important;
}
 
.dropdown-main-merken ul li a {
    display: block;
    height: 100%;
    width: 100%;
}
 
.header-search-container	 {
    z-index: 1001;
}
 
.header-search-container input[type=text].zoek-input {
    width: 229px;
    padding: 0px;
    margin: 0px;
    float: left;
    height: 31px;
    line-height: 29px;
    text-indent: 10px;
}
 
.header-search-container input[type=submit] {
    float: right;
    display: block;
    height: 23px;
    width: 23px;
    margin: 4px 4px 0 0;
    padding: 0px;
    overflow: hidden;
    text-indent: -999px;
    border: none;
    background: url(../../img/nd/search-input.png);
}

.header-search-container input[type=button] {
    float: right;
    display: block;
    height: 23px;
    width: 23px;
    margin: 4px 4px 0 0;
    padding: 0px;
    overflow: hidden;
    text-indent: -999px;
    border: none;
    background: url(../../img/nd/search-input.png);
    cursor: pointer;
}
 
.header-search-container input[type=text].zoek-input:focus {
    background: #fff;
}
 
 
.header-search-bar  {
    float: right;
    margin: 25px 0 0 0;
}

/* MvV 2015-10-23
#search_suggest_list {
    width: 287px;
    position: absolute;
    top: 29px;
    left: -27px;
    background-color: #fff;
    z-index: 150;
    display: none;
    text-align: left;
    padding: 6px 0 6px 0 !important;
    border-radius: 0px 0px 4px 4px;
    text-transform: capitalize;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
}
#search_suggest_list a div {
    margin-left: 4px;
    margin-right: 10px;
    width: 35px;
    height: 35px;
    background: #fff;
}

*/
#search_suggest_list {
    width: 260px;
    position:absolute;
    top: 31px;
    left: 0px;
	background-color: #fff;
    z-index: 150;
    display: none;
    text-align: left;
    border-radius: 0px 0px 4px 4px;
    text-transform: capitalize;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
}
#search_suggest_list a div {
    padding: 10px;
	font-size: 14px;
	border-bottom: 1px solid  #efefef;
}
 
#search_suggest_list a:hover {
    background: #e7fcfe;
}

.search_suggest_list_hover {
    background: #e7fcfe;
}

.search_suggest_list_normal {
    background: #ffffff;
}

/* Navi */
 
.menu-ribbon {
    float: none !important;
    width: auto !important;
}
 
.home-button {
    overflow: hidden;
    text-indent: -999px;
    background: url(../../img/nd/navigation.png) 0px -88px !important;
}
 
.home-button:hover, .home-button.current-menu-item:hover {
    background-position: 0px -44px !important;
}
 
.home-button.current-menu-item {
    background-position: 0px 0px !important;
}
 
.menu-items ul li {
    z-index: 150;
}
 
.topgroep {
    width: auto !important;
    padding: 0px 8px 0px 10px !important;
    background: url(../../img/nd/navigation.png) -50px -0px !important;
    text-align: center;
    font-family: 'Open Sans Condensed', 'Arial Narrow', 'Arial Condensed';
    color: #333;
    font-weight: 100;
    z-index: 999;
    position: relative;
}
 
.topgroep:hover, .topgroep.current-menu-item:hover {
    color: #fff;
    background-position: -50px -44px !important;
}
 
.topgroep.current-menu-item {
    background-position: -50px -88px !important;
    color: #fff;
}
 
.topgroep.yellow-tab {
    background-position: -50px -132px !important;
}
 
.topgroep.yellow-tab:hover {
    background-position: -50px -176px !important;
    color: #333 !important;
}
 
.topgroep.pink-tab {
    background-position: -43px -220px !important;
}
 
.topgroep.pink-tab:hover {
    background-position: -43px -264px !important;
    color: #333 !important;
    text-shadow: 0px 0px 20px #ffffff;
}
 
.topgroep.pink-tab.current-menu-item, .topgroep.yellow-tab.current-menu-item {
    background-position: -50px -88px !important;
}
 
.topgroep.pink-tab.current-menu-item:hover, .topgroep.yellow-tab.current-menu-item:hover {
    color: #fff !important;
    background-position: -50px -44px !important;
}
 
.last-tab {
    padding: 0px 17px 0px 17px !important;
}
 
/* New */
 
.top-content {
    height: 31px;
    width: 930px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -465px;
}
 
.shopping-basket {
    position: relative;
    height: 31px;
    width: auto;
    display: inline-block;
    padding: 0px 4px 0px 4px;
    background: #fbc943;
    float: right;
    cursor: pointer;
}
 
.shopping-basket-icon {
    float: left;
    background: url(../../img/nd/shoppingcart-icons.png);
    width: 42px;
    height: 36px;
    margin: 2px 10px 0px 0px;
    line-height: 36px;
    position: relative;
}
 
.shopping-basket-icon span {
    display: block;
    width: 25px;
    height: 36px;
    color: #fff;
    margin: 0px 0px 0px 6px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
}
 
.basket-price {
    float: left;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    line-height: 29px;
}
 
.cart-button {
    float: left;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 3px 24px 3px 10px;
    margin: 4px 0px 0px 10px;
    background: #fff url(../../img/nd/shoppingcart-arrow.png) right center no-repeat;
    font-size: 12px;
    color: #333;
    text-align: left;
}
 
.cart-button:hover {
    text-decoration: none;
    color: #ff0086;
}
 
.loyalty-points {
    position: relative;
    height: 31px;
    width: auto;
    display: inline-block;
    padding: 0px 4px 0px 14px;
    background: #fbc943;
    float: right;
    margin: 0px 1px 0px 0px;
}
 
.loyalty-points-icon {
    float: left;
    background: url(../../img/nd/shoppingcart-icons.png) 0px -36px;
    width: 42px;
    height: 36px;
    margin: 2px 10px 0px 0px;
    line-height: 36px;
}
 
.loyalty-button {
    display: block;
    height: 31px;
    padding: 0px 24px 0px 0px;
    line-height: 29px;
    font-size: 12px;
    color: #333;
    text-transform: uppercase;
    float: left;
    background: url(../../img/nd/shoppingcart-arrow.png) center right no-repeat;
}
 
.loyalty-button span {
    font-weight: bold;
    font-size: 14px;
}
 
.loyalty-button:hover {
    color: #000;
}
 
.top-links {
    float: right;
    line-height: 29px;
    margin: 0px 10px 0px 0px;
}
 
.top-links a {
    font-size: 12px;
    color: #f4f2ff;
    text-decoration: none;
    float: right;
    margin: 0px 10px 0px 10px;
}
 
.top-links small {
    font-size: 11px;
    color: #F0B9D7;
    float: right;
    padding-left: 10px;
}
 
.phone-number {
    padding-left: 25px;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    background: url(../../img/nd/phone-icon.png) 5px center no-repeat;
    float: right;
}
 
.top-links .bullet {
    float: right;
    color: #fbc943;
}
 
.top-links a:hover {
    text-decoration: underline;
}
 
.personal-menu {
    text-transform: none !important;
    display: inline-block;
    height: 31px;
    line-height: 29px;
    padding: 0px 25px 0px 0px;
    margin: 0px !important;
    float: left;
    max-width: 330px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 128px;
    position: relative;
	cursor: pointer;
}
 
.personal-menu span {
    display: block;
    height: 31px;
    width: 25px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../../img/nd/top-personal-dropdown.png) right -1px no-repeat;
}
 
.personal-menu.fadeout span {
    width: 42px;
}
 
a.personal-menu:hover {
    text-decoration: none;
    color: #fff;
}
 
.personal-menu:hover span {
    background-position: right -33px;
}
 
.has-sticky-friend a.personal-menu span {
    background-position: right -65px !important;
}
 
.has-sticky-friend a.personal-menu:hover span {
    background-position: right -97px !important;
}
 
.has-sticky-friend .hide-on-stick {
    display: none;
}
 
 
 
.personal-flyout {
    position: fixed;
    z-index: 9999;
    display: none;
    margin: 30px 0px 0px -10px;
}
 
.flyout-top {
    width: 175px;
    height: 14px;
    background: url(../../img/nd/personal-flyout.png);
}
 
.flyout-body {
    width: 175px;
    height: auto;
    padding-bottom: 40px;
    background: url(../../img/nd/personal-flyout.png) right bottom no-repeat;
}
 
.flyout-body ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
}
 
.flyout-body ul li {
    height: 28px;
    width: 155px;
    margin: 0px 0px 0px 10px;
    border-bottom: 1px solid #e1e1e1;
    text-indent: 10px;
    line-height: 26px;
}
 
.flyout-body ul li:last-child {
    border-bottom: none;
}
 
.flyout-body ul li a {
    display: block;
    height: 28px;
    width: 155px;
    text-transform: uppercase;
    font-size: 11px;
    color: #333;
    background: url(../../img/nd/flyout-arrows.png) top right no-repeat;
}
 
.flyout-body ul li a.arrowless-option {
    background: none !important;   
}
 
.flyout-body ul li a:hover {
    background-color: #fdf7e4 !important;
    background-position: 135px -27px;
    text-decoration: none;
}
 
/* Varianten */
 
.no-points {
    background: none !important;
}
 
.no-points .loyalty-button {
    color: #fff !important;
}
 
.no-items .basket-price {
    font-weight: normal !important;
    margin-right: 5px;
    color: #666;
}
 
.no-items .shopping-basket-icon {
    background-position: 0px -72px;
}
 
/* USP */
 
.header-usps {
    float: left;
    padding: 0;
    height: 44px;
    margin: 18px 0 0 20px;
    border-radius: 22px;
    width: 440px;
    cursor: pointer;
}
 
.header-usps:hover {
    background: rgba(215, 1, 116, 0.5);
}
 
.header-usps li {
    float: left;
    height: 40px;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    background: url(../../img/nd/header-usps.png) no-repeat;
    text-align: left;
    margin: 0 10px 0 0;
    padding: 4px 0 0 50px;
}

.header-usps-21 {
    float: left;
    padding: 0;
    height: 44px;
    margin: 18px 0 0 20px;
    border-radius: 22px;
    width: 440px;
    cursor: pointer;
}
 
.header-usps-21:hover {
    background: rgba(215, 1, 116, 0.5);
}
 
.header-usps-21 li {
    float: left;
    height: 40px;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    background: url(../../img/nd/header-usps_21.png) no-repeat;
    text-align: left;
    margin: 0 10px 0 0;
    padding: 4px 0 0 50px;
}

.header-usps-22 {
    float: left;
    padding: 0;
    height: 44px;
    margin: 18px 0 0 20px;
    border-radius: 22px;
    width: 440px;
    cursor: pointer;
}
 
.header-usps-22:hover {
    background: rgba(215, 1, 116, 0.5);
}
 
.header-usps-22 li {
    float: left;
    height: 40px;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    background: url(../../img/nd/header-usps_22.png) no-repeat;
    text-align: left;
    margin: 0 10px 0 0;
    padding: 4px 0 0 50px;
}

.header-usps-15 {
    float: left;
    padding: 0;
    height: 44px;
    margin: 18px 0 0 20px;
    border-radius: 22px;
    width: 440px;
    cursor: pointer;
}
 
.header-usps-15:hover {
    background: rgba(215, 1, 116, 0.5);
}
 
.header-usps-15 li {
    float: left;
    height: 40px;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    background: url(../../img/nd/header-usps_15.png) no-repeat;
    text-align: left;
    margin: 0 10px 0 0;
    padding: 4px 0 0 50px;
}
 
li.header-usp-time {
    width: 110px;
    background-position: 0 -43px;
}
 
li.header-usp-delivery {
    background-position: 0 -86px;
    width: 85px;
}
 
li.header-usp-tryout {
    width: 60px;
    margin: 0;
}

li.header-usp-korting {
    width: 65px;
    background-position: 0 -129px;
}