/* 
 * Based on the SMACSS development pattern, all module-rules 
 * are defined here. This covers the all interaction elements
 * and structured content-containers. Modules are defined as
 * basically as possible in order to reuse them in different
 * layout contexts. Modules should provide a consistent naming
 * convention in order to identify them easily. Context - or 
 * page-specific styles (look & feel) belong to the theme.css
 * 
 * @see http://smacss.com/book/type-module
 * 
 * Table of content:
 * - header
 * - navigation-toggle
 * - navigation
 * - media-text
 * - hero-teaser
 * - media-list
 * - inline-list
 * - rich-text
 * - tabs
 * - carousel
 * - video
 * 
 * @project Avinash 2.0
 * @date 2012-06-15
 * @author Niklas Zillinger, Sapient GmbH
 * @licensor Unilever
 * @site miscellaneous
*/

/* 
 * styles for media-text module
 * find subsection-id in related 
 * css-files for further styles
 * @subsection   =media-text 
*/
.mediatxt > .content-container.text-container { margin:0 auto; width: 100%; }
.mediatxt > .content-container,.mediatxt.mediatxt-vertical > .content-container {	width: 100%;	margin-bottom: 10px;}
.mediatxt.mediatxt-horizontal > .content-container,.mediatxt.mediatxt-horizontal-vertical > .content-container {	margin: 0 12px 0 0; min-height: 80px; width: 80px; }
.mediatxt.mediatxt-horizontal > .text-container,.mediatxt.mediatxt-horizontal-vertical > .text-container {	padding: 0 35px 0 0;  width: 48%;}
.mediatxt.mediatxt-horizontal > .text-container.ym-gl > .ym-gbox,.mediatxt.mediatxt-horizontal-vertical > .text-container.ym-gl > .ym-gbox {	padding:0;}
.mediatxt.mediatxt-horizontal > .text-container.ym-gr > .ym-gbox,.mediatxt.mediatxt-horizontal-vertical > .text-container.ym-gr > .ym-gbox {	padding-left: 1em;}

  @media screen and ( min-width: 40.625em )  {
    .mediatxt .content-container { width: 50%; }
    .mediatxt > .content-container.text-container { width: 50%; }
    .mediatxt > .text-container.ym-gl > .ym-gbox { padding-right: 1em; }
    .mediatxt > .text-container.ym-gr > .ym-gbox { padding-left: 1em; }
    .mediatxt .text-container .rich-text{ -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
    .mediatxt.mediatxt-horizontal-vertical > .content-container,.mediatxt.mediatxt-horizontal-vertical > .text-container { width: 100%; margin-bottom: 1em; }
    .mediatxt.mediatxt-horizontal-vertical > .text-container.ym-gl > .ym-gbox,.mediatxt.mediatxt-horizontal-vertical > .text-container.ym-gr > .ym-gbox {
      padding-right: 0; padding-left: 0; }
  }
  @media screen and ( min-width: 64em )  {
    .mediatxt .content-container { width: 33%; }
    .mediatxt .text-container { width: 67%; }
  }

  /* Hero Teaser */
  .hero-teaser { position: relative; }
  .hero-teaser-background { position: relative; width: 100%; z-index:1; }
  .hero-teaser-background img { width: 100%; }
  .hero-teaser-foreground { position: absolute; bottom:5%; left:0; z-index:2; }
  .hero-teaser-title { font-size: 14px; font-weight: bold; padding: 5px;}
  .hero-teaser-title, .hero-teaser-text { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);}

  /* 
   * styles for media-list module
   * find subsection-id in related 
   * css-files for further styles
   * @subsection   =media-list
  */
  .media-list-item { width: 100%;	margin: 0; }
  .media-list-item > a { display: block;	padding: 8px; min-height: 66px; -webkit-tap-highlight-color:rgba(153, 153, 153,0.5); }
  .media-list-item > a:hover {	background: #ccc;}
  @media screen and ( min-width: 40.625em )  {
    .media-list-item {		width: 50%;	}
  }
  @media screen and ( min-width: 64em )  {
    .media-list-item { 	width: 32.733%	}
  }

  /* Rich-Text Modules */
  .rich-text {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap:1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
  }
  @media screen and ( min-width: 40.625em )  {
    .rich-text {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
  }
  @media screen and ( min-width: 64em )  {
    .rich-text {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
  }

  /* TABS */
  .tabs-navigation {	width: 100%;}
  .tabs-navigation .navigation-item {	padding-bottom: 0.875em; } /* due to the ym-equalize behaviour we set the bottom padding on the parent */
  .tabs-navigation .navigation-item > a {	border-width: 0 1px;	line-height: 1.25em;	padding-top: 0.875em;	text-align: center;}
  .tabs-content-item {	width: 100%;	padding-top: 1em;}
  .tabs-navigation .selected a {  background: #1D5291;  color: #eee;}
  .tabs-content {  border-top: 2px solid #EEE;}
  @media screen and ( min-width: 40.625em )  {
    .tabs-navigation { width: 75%; }
  }
  @media screen and ( min-width: 64em )  {
    .tabs-navigation { width: 50%; }
  }

  /* CAROUSEL */
  .carousel { background: #eee; overflow: hidden; position: relative;	width: 100%; }
  .carousel-list {	position: relative;	width: 99999px;}
  .carousel-item {	position: relative;	margin: 0; visibility: hidden; }
  .carousel-item.first-carousel-item { visibility: visible; }
  .carousel-item-container { padding: 0 28px 8px; }
  .carousel-item-container .text-container { width: 100%; }
  .carousel-item-container .text-container .rich-text { margin: 0 auto; width: 100%; }
  .carousel-item-container .media-container img { margin: 0 auto; width: 85%; }
  .carousel-item-container .text-container p, .carousel-item-container .text-container h2 { font-size: 12px; line-height: 16px; padding-bottom: 5px;}
  .carousel-item-container .text-container h2 { font-size: 14px; }
  .call-to-action-link { color:#fff; padding: 5px 18px; background:#1e1e1e; border-radius: 5px; font-size: 18px; }
  .call-to-action-link:link, .call-to-action-link:active, .call-to-action-link:visited {color: #fff;}
  
  @media screen and ( min-width: 40.625em )  {
    .call-to-action-link { display: inline-block; }
  }
  
  /* CAROUSEL NAVIGATION ITEMS */
  .no-js .carousel-control {	display: none;}
  .carousel-control {  background: transparent url('../images/carousel-arrows.png') no-repeat 0 0;	height: 2em;	width: 18px;	text-indent: -9999px;	display:block;	position: absolute;	z-index: 100;	top: 30%; -webkit-tap-highlight-color:rgba(153, 153, 153,0.5);}
  .ctrl-previous-item {	left: 10px;}
  .ctrl-next-item { background-position: -23px 0;	right: 10px;}
  .item-nav{ text-align:center; }
  .item-nav li{ display:none; background:url("../images/dot-nav.png") no-repeat right scroll; width:9px; height:11px; cursor: pointer; margin-left: 10px;}
  .item-nav li.active, .item-nav li:hover{ background-position:left; }
  
  /* PAGE CONTAINER */
  #page-container, #main_Content { background: #eee; padding: 68px 16px 24px; }
  
  /* PAGE CONATINER OVERRIDES */
  #homepage #page-container { padding: 60px 0 0 0; }
  #homepage .back-button { background: #eee; }
  #product-page #page-container, #recipe-search #page-container, #recipe-search-results #page-container { padding: 68px 8px 8px; }
  
  /* HEADER */
  header { background: #fff; border: 1px solid #fff; height: 42px; padding: 8px 0; position: fixed; top: 0; z-index: 99999; width:100%; }
  header .header-content { padding: 0 28px; }
  header .header-container {width: 50%;}
  header .logo { height: 26px; width: 138px; }
    
  /* BACK-BUTTON */
  .back-button{ clear: both;font-size: 12px;padding: 0 28px 8px;}

  /* NAVIGATION TOGGLE MENU */
  .main-navigation-toggle {background: #191919; border-radius: 5px; color:#fff; display: block; float: right; font-size: 14px; font-weight: bold; line-height: 2em; margin: 7px 0 0; padding: 0; text-align: center; width: 75px; }
  a.main-navigation-toggle:link, a.main-navigation-toggle:visited { color:#fff; }

  @media screen and ( max-width: 40.563em ) {
    .main-navigation-toggle {
      display: inline-block;
    }
  }
  .no-js .main-navigation-toggle {
    display: none;
  }
  
  /* ACCORDION MENUS */
  .accordionPanel { margin: 10px 0 0; }
  .accordionPanel h4 { background: #666 url("../images/advanced-search-arrow.png") no-repeat scroll 96% -10px; color:#fff; border-radius: 5px; border: none;
  font-size: 12px; padding: 4px 12px; }
  .accordionPanel h4.collapse { background-position: 96% 10px; }
  .accordion_content { display: none;padding: 10px 10px 0; }
  .accordion_content { font-size: 0.8em; }

  /*LANGUAGE TOGGLE*/
  .accordionPanel.languageToggle { width: 100%; margin: 10px 0 20px; }
  .accordionPanel.languageToggle select { width: 100px; }

  /* PAGINATION */
  .paginationPanel { padding: 0 16px; overflow: hidden; }
  .paginationPanel span { display: block; padding: 5px; text-align: center; border: 1px solid #ccc; cursor: pointer; font-size: 12px; font-weight: bold; }
  .paginationPanel span.more { background: #fff url(../images/pagination_more.png) no-repeat 98% 50%; }
  .paginationPanel span.few { background: #fff url(../images/pagination_less.png) no-repeat 2% 50%; }

  /* PREVIOUS NEXT CONTROLS */
  .prev-next-controls { padding: 8px; overflow: hidden;}
  .prev-next-controls a { font-size: 12px; }
  
  /* FOOTER NAVIGATION */
  #meta-navigation { background: #ccc; }
  #meta-navigation ul > li:last-child{ border-bottom: 1px solid #fff; }
  #meta-navigation ul > li:last-child a { border-bottom: 1px solid #666;}
  .navigation-item { background: #ccc; width: 100%; border-top: 1px solid #666; }
  .navigation-item > a { border-top: 1px solid #fff; color: #fff; display: block; font-size: 18px; font-weight: normal; line-height: 2.2em; padding: 0 28px; text-align: left; text-transform: uppercase; -webkit-tap-highlight-color:rgba(153, 153, 153,0.5);}
  .navigation-item a:hover {	background: #ccc;}
  .navigation-item a img { float: left; width: 30px; margin: 7px 10px 0 0; }
  .navigation-item.active { background-color: #999; }
  .navigation-item.active a { color: #000;}
  .navigation-item.active a:hover { background:none;}
  .site-footer-info { padding: 16px 16px 20px;  }
  .footer-links { padding: 15px 0 0; }
  .footer-links a { background: transparent url('../images/footer-links.png') no-repeat 0 2px; font-size: 12px; font-weight: bold; padding: 0 0 0 10px; }
  .footer-links .ym-gr a { background-position: right -10px; padding: 0 10px 0 0; }
  .disclaimer-content img {display: inline-block;}
  .disclaimer-content p, .site-footer div { font-size: 12px; line-height: 16px; padding: 0 0 8px; }
  .disclaimer-content p.copyright { font-size: 10.5px; line-height: 14px; padding: 0; }
  .copyright strong { display: block; padding: 0 0 3px; }
  .site-footer div, .disclaimer-content div { padding:0; font-size: 11px; } 
  
  @media screen and ( min-width: 40.625em ) {
    #meta-navigation { padding: 0; }
    .navigation-item { border-right: 1px solid #fff;  width: 20%; }
    .navigation-item > a { text-align: center; }
  }
  
  /* TEASER ITEMS LISTS */
  .list-grid { padding: 0; }
  .list-grid ul > li:last-child { margin-bottom: 0; }
  .list-grid img { width: 80px; }
  .list-grid .media-list-item { min-height: 66px; position: relative; margin-bottom: 8px;}
  .list-grid .media-list-item > a { background: #fff url('../images/arrow.png') no-repeat 96% center; }
  .list-grid .itemTitle { color: #666; font-size: 18px; line-height: 20px; padding: 10px 0;}
  
  @media screen and ( min-width: 40.625em ) {
    .list-grid .media-list-item { margin-right: 8px;}
  }
  
  /* YOU-MAY-ALSO-LIKE RECIPE SECTION */
  .you-may-like .list-grid { padding: 0; }
  .you-may-like{padding:0 12px;}
  .you-may-like .media-list-item > a { background-color:#fff; }
  .you-may-like h3{ padding-bottom:8px }
  
  /* RECIPE */
  .searchForm { overflow: hidden; }
  .searchForm label {font-size: 12px; line-height: 25px;}
  .searchForm input{float:left; padding: 2px;}
  #recipe-search .pageheader { padding: 0; }
  #recipe .accordion_content table { width: 100%; }
  .recipe-info { padding: 0 12px; }
  .recipe-search { padding: 0 12px; overflow: hidden; margin: 10px 0 0; }
  .recipe-search h3  { padding: 0 0 5px; }
  .recipe-times{ margin:0.9em 0 0.5em;}
  .recipe-times p { padding:0;font-size: 0.8em;  overflow: hidden;}
  .recipe-ingredients-list li { margin:0; font-size: 0.8em; }
  .recipe-footnotes { padding: 10px 0; font-size: 12px; }
  .recipe-footnotes li { margin:0; }
  .information table { width: 100%; }
  .recipe-ingredients-list{margin-bottom:10px}
  
  /* RECIPE FILTERS */
  #recipeFilters { padding: 0; }
  #recipeFilters label { display: none; }
  #recipeFilters input, #recipeFilters select { width: 70%;}
  #recipe-search-results .pageheader, #recipe-search-results .list-grid { padding:0 0 20px;}
  #recipe-search-results .pageheader p{padding:0px}
  
  /* PAGE NOT FOUND */
  .page-not-found { padding: 20px; }
  .page-not-found ul  li { margin:5px 0; }
  .page-not-found li a { text-decoration: underline; }

  /* SIGNUP */
  #sign-up-confirm #col2_content { padding:16px; }
  #col2 { overflow: hidden;  padding: 0 12px; }
  #sign-up .page-container { padding: 0 28px; }
  #sign-up .page-container .l-rich-content { padding: 1em 0; }
  #sign-up footer .l-rich-content { padding: 16px 16px 0; }
  #signup-form, .signup-form { padding: 5px 0 0; }
  #signup-form button { width: 126px; }
  .signUpHeader { font-size: 28px; line-height: 28px; }
  .signUpCopy  { font-size: 1em; line-height: 16px; padding: 5px 0 0;  }
  .DOB #dob { visibility: hidden; }

  /* FORM ELEMENTS */
  .yform{ padding:0.5em 0; }
  .yform label { font-size: 12px; display: block; display:block; margin:5px 0 0; }
  .yform input { padding: 3px; }
  .yform .customCheckbox { clear: both; }
  .yform .type-check label { font-size: 12px; padding-bottom: 3px; }
  .yform .type-check input { float: left; margin: 0 10px 0 0; }
  .yform .privacyMessage { clear: both; padding: 20px 0; font-size: 12px; }
  .yform .type-button { padding: 30px 0 0; }
  .yform .type-text { margin-bottom: 8px; } 
  .yform .type-text input{width:264px}
  .yform .DOB { clear: both; padding: 10px 0; }
  .yform .select-control-wrapper { float: left; margin-right: 10px; width: 78px; }
  .requiredMessage { font-size: 11px; } 
  span.error, div.error, label.error,.error-message-maine,.error-message-state,.error-message-required,.error-message { font-size: 11px; line-height: 16px; color: #f00; display: none; padding: 5px 0 0; } 
  span.required{ font-size: 11px; color: #f00; } 
  select#month, select#year, select#day { width: 80px; min-width:0 }
  #birthdate label, #birthday label { display: none; }
  button { background-color: #000; border: medium none; border-radius: 5px; color: #fff; font-size: 12px; font-weight: bold;text-transform: uppercase; cursor: pointer; padding: 5px 12px; }
  /* Support Sampling Form Controls */
  #birthday .c25l, #birthday .c15l { float: left; margin-right: 10px; width: 78px;}
  #birthday select { width: 82px; float: left; margin-right: 5px; }  
  
  /*Brand CheckBoxes*/
  .yform .customCheckbox { clear: both; padding: 10px 0 0; margin: 0; }
  .yform .customCheckbox input { float: left; margin: 0 5px 0 0;  width: auto; }
  .yform .customCheckbox label { display: inline-block; line-height: 15px; margin: 0; width: 90%; }
  
  /* SOCIAL MEDIA BAR */
  #shareThis { background: none repeat scroll 0 0 #CCCCCC; clear: both; margin: 0 auto; padding: 5px 0; text-align: center; width: 100%; clear: both; }
  .socialMediaElement{display:inline-block}
  .socialText { display: none; font-size: 12px; vertical-align: text-bottom; }
        /*Detail Pages Social Media Widget*/
        .socialMediaBar { padding: 10px 0; }
        .fbLike-wrapper{padding:12px 0 0 0}
        .fbLike-wrapper div{text-align:right}
        .fbLike-wrapper img{display:inline}
        .at16nc.at16t_email{display:inline-block !important}
        
  @media screen and ( min-width: 30em ) {
      .socialText { display: inline-block; }
  }

  /*PRODUCT & RECIPE DETAIL PAGES*/
  .pageheader h1, .pageheader h2 { font-size: 28px; padding: 0 0 5px; line-height: 30px; }
  .pageheader p { padding:0 0 5px; }
  
  /* ADVANCED RECIPE SEARCH */
  .advanced-recipe-search { padding: 16px 12px 0; }
  .advanced-recipe-search .accordionPanel { margin: 0; }
  .advanced-recipe-search select{ margin: 0 0 5px; }
  .advance-search-toggle { display:block; padding:0.3em; border:1px solid #ccc; margin: 10px 0 0; }
  .recipe-search button{background:url("../images/submit-btn.png") no-repeat 0 0 scroll; width:24px; height:24px; border:0px; float:left; margin-left:5px; border-radius:0; -webkit-border-radius: 0; -moz-border-radius: 0; }
  
  /* VIDEO LIST */
  .playerWrapper { position: absolute; top: 0; left:0; z-index: -99; }
  .video-list{font-size:12px;}
  .video-list .ym-gbox{color:#666666}
  .video-info{color:#8D8D8D}
  .video-list .mediatxt.mediatxt-horizontal > .content-container, .video-list.mediatxt.mediatxt-horizontal-vertical > .content-container{width:55%}
  .video-list .mediatxt.mediatxt-horizontal > .text-container, .video-list .mediatxt.mediatxt-horizontal-vertical > .text-container{width:45%}
  .videoTeaser > a { background: none; background-color: #fff; }
  .closeBtn { display: none; }
  .videoTeaser .closeBtn { background:#000; position: absolute; width: auto; color: #fff; z-index: 999; padding: 5px; right: 0; top: 0; cursor: pointer; }
  
  /* PRODUCTS */
  #product-page.product-detail-large .prev-next-controls { padding: 0 20px; }
  #product-page form { clear: both; overflow: hidden; }
  .product-detail-info { padding: 0; }
  .product-detail, .product-long-description { padding:12px 20px 24px;}
  .product-detail .thumbnail-Image  { width: 100px; }
    
  /* ARTICLE */
  #article_dtl { font-size: 12px; line-height: 18px; }
  #article-page .paginationPanel {padding: 8px 0 0; }
  #article-page .pinterest-wrapper,#article-page .fbLike-wrapper, #article-page .shareThis-wrapper { margin-left: 6px; float: left; padding:0; clear: none; }
  .article-body { padding: 0 12px; }
  /* Article Detail : Content Iframe */
  .iframe-article-content { width: 100%; height: 360px; }
  
  /* FAQ */
  #faq-page .pageheader { padding: 0 12px; }
  #faq-page .pageheader h2, #faq-page .pageheader p  { padding:0; }
  #faq-page .accordionPanel h4 { border: 1px solid #666; background: transparent url("../images/accordion_arrow.png") no-repeat 96% -10px; padding: 5px 30px 5px 12px; font-size: 12px; display: block; cursor: pointer; color: #000; line-height: 16px; border-radius:0; }
  #faq-page .accordionPanel h4.collapse { background-position: 96% 10px; }
  .faqQuestions { padding: 0 12px 14px; }
  .faqQuestions h3 { padding: 0 12px 5px; }
  .faqQuestions .accordionPanel { margin: 0 0 8px; }

  /*Store Locator Landing*/
  .store-types { padding: 0; }
  .store-types .itemTitle { font-weight: bold; padding: 30px 0 0; }

  /* Store Locator */
  #storeSearchResults { padding: 20px 0 5px; }
  #storeSearchResults p,
  #storeSearchResults h3 { font-size: 0.7em; }
  #map-model .prev-next-controls { padding: 0 12px; }
  .store-detail { padding: 0 12px 5px; }
  .store-address { padding: 0 100px 0 0; }
  .store-link {text-align: left; width: 18%;}
  .store-locator { overflow: hidden; padding: 0 12px; }
  .shop-list .media-list-item > a{background:#FFF; font-size:12px; text-decoration:underline}
  .shop-list .media-list-item p{text-decoration:underline}
  .shop-list .media-list-item p:hover{text-decoration:none}
  .shop-list .text-container > .ym-gbox { padding-top: 3.5em; }
  .location-zip-container, select#productSize, .select-product-container, .product-size-container { display: none; }
  .store-map {width: 264px; height: 264px; margin: 8px auto 12px;}
  .store-search-results-info { clear: both; padding:5px 0 0;}
  .store-search .product-info{ padding: 0 12px; }
  .store-search .store-locator { padding:0 12px; }
  .store-search .thumbnail-Image, .store-locator-form .thumbnail-Image { width: 80px; }
  .store-locator-form p { padding: 0 0 12px 0; }
  .store-locator-form .form-container{width:66%}
  .store-locator-form .form-container label{margin-bottom:3px}
  .store-locator-form .form-container label.error { display:block; margin:0; }
  .store-locator-form .form-container select, .store-locator-form .form-container input{width:172px; }
  .store-locator-form .form-container select{margin-bottom:12px}
  .store-locator-form .form-container button{margin:5px 0 0 0;}
  .thumbnail-Image { margin-right: 12px; }
  .description-block p { width: 90%; }
  .description-block h2, .description-block p{padding-bottom: 0}
  
/*Buy Online*/
.online-store-name {
    background: url("../images/buyarrow.png") no-repeat scroll 72px 6px #333;
    border-radius: 3px;
    color: #fff;
    padding: 5px 10px;
}
        
/*Online Stores Listing*/
.store-list a{text-align:center; font-size:12px; font-weight:bold; color:#666666}
.store-list a:hover{text-decoration:none}
.buy-products-links { padding: 8px 0 0; }

@media screen and ( min-width: 64em )  {
    .store-address, .description-block {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
  
/*FB Flyout Hide*/
.fb_iframe_widget { height: 21px; }

/* Ajax Loader */ 
#loadingDiv{display:none;}
  
/* LIST STYLE  */
.inline-list { margin: 0 0 1em 0.5em; }
.inline-list li { margin-bottom: 0.5em; }
  
 /* AdChoice */
.adchoiceDefaultLink{display:inline-table;}
.adchoiceDefaultImage{border: 0; display: inline; vertical-align: middle;padding-right: 5px;}
.adchoiceDefaultText{vertical-align: middle}
 
 /* Splash Screen */
 .splash-screen .logo { width: 100%; text-align: center; }
 .splash-screen .logo img { margin: 0 auto; }
 .language-selector-list ul.ym-grid { width: 100%;padding: 5px;margin: 10px 0 0 0; }
 .language-selector-list ul.ym-grid li { width: 48%; margin: 0 2px 15px; text-align: center; }
 .language-selector-list ul.ym-grid li a { background: url("../images/buyarrow.png") no-repeat scroll 72px 6px #333; border-radius: 3px; color: #fff; padding: 5px 10px; text-align:center; text-decoration: none; display: block; }
 
/* Campaign Styles*/
#bws-header header, #bws-header #header { position: fixed;}

/* Fix for Captcha Distortion due to base.css font rule */
#captcha-challenge { font-size: 9px; line-height: 1.5em;}
@media only screen and (max-device-width: 480px) {
  #captcha-challenge { zoom: 0.89; margin: 0 0 0 -10px; }
}

/* CSS END*/