/*******************************************************************************/
/* recipe_page.css - complete responsive style for recipe pages on any display */
/*******************************************************************************/

html {
    -webkit-text-size-adjust: 100%; /* iPhone: Prevent font scaling in landscape while allowing user zoom */
}

body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 165%;
    margin: 0px;
}

a:link,
a:active,
a:visited { color: #cc0000; font-weight: bold; }
a:hover   { color: #ff0000; font-weight: bold; }

#container { max-width: 725px; margin-left: auto; margin-right: auto; padding: 24px 20px 20px 20px; }

img { max-width: 100%; border: none; height: auto; width: auto\9 /* IE8 */ }

div#banner img { width: 100%; max-width: 355px; }

form#cse-search-box { display: none; }

hr { display: none; }

div#compact_nav { margin: 10px 0px 12px 0px; }
span.arrow { padding: 0px 4px; } 

ul#primary_nav,
ul.secondary_nav,
ul.recipe_nav,
div#splashy_container,
div#print { display: none; }

h1#recipe_title { margin: 0px; padding: 3px 0px 0px 0px; font-size: 150%; line-height: 150% }
#author_info { margin: 0px; padding: 0px; font-size: 85%; font-height: 85% }
#blurb { display: block; padding-top: 7px; font-style: italic; font-size: 85%; font-height: 85%; color: #000000 }
#share { margin: 22px 0px 10px 0px; }

img#main_photo { padding-bottom: 10px; }

#bottom_ad { padding: 15px 0px 0px 0px }
#matched_content { padding: 10px 0px 10px 0px; }
#special_links { font-size: 80%; padding: 30px 0px 10px 0px; text-align: center }
#bottom_nav { padding: 5px 0px 0px 0px; text-align:center }
.divider { padding: 0px 7px; }

/* 3/30/15 - Tidies up table layout for older recipe pages that still use them */
table { border-spacing: 0px }

/* 6/21/2014 - Deprecated.  Use video_header and video_container.
   Remove this style from all the stylesheets when no longer used. */
.video { padding-bottom:20px }

.video_header { margin-bottom: 5px }

.video_container { 
    position: relative;
    padding-bottom: 56.25%;  /* Sets 16:9 aspect ratio to take up less vertical space */ 
    margin-bottom: 10px;     /* Some space below the video */
    overflow: hidden;
}
.video_container iframe,
.video_container object,
.video_container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.required_caption, .caption {
    margin: 0px;
    color: #555555;
    font-size: 85%;
    font-style: italic;
}

.important {
    color: red;
    font-weight: bold;
}

/* 4/22/10 - adding footnotes styles.  "footref" is this superscript link that takes 
   you down to the footnote section.  "footnote" is the style for the link inside the 
   footnote section that takes you back to the recipe content */
a.footref { font-size: 80%; line-height: 80%; text-decoration: none; vertical-align: super; }
ul.footnotes { list-style-type: none; margin: 0px; padding: 0px }

/* For list items that are direct children of the ordered list.  This creates space after
   each recipe step, but it does not affect the nested lists (i.e., ingredient lists) */
ol > li { padding-bottom: 5px }

/* 8/8/2013 - for listing ingredients; ul.ingr is DEPRECATED */
ul.ingredients { font-weight: bold }

/* 8/12/2013 - used when we have multiple lines of photos; use a div for each line of photos */

div.photos { padding-bottom: 5px }

/* 7/16/2013 - for recipe steps and for footnotes (DEPRECATED)
   This class name is confusing should be phased out. */
ul.steps {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

table.data { border-collapse: collapse; }
table.data th, table.data td { padding: 0px 7px; }
table.data, table.data th, table.data td { border: 1px solid black; }

.number1 { background-image:url(/images/1.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number2 { background-image:url(/images/2.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number3 { background-image:url(/images/3.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number4 { background-image:url(/images/4.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number5 { background-image:url(/images/5.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number6 { background-image:url(/images/6.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number7 { background-image:url(/images/7.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number8 { background-image:url(/images/8.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number9 { background-image:url(/images/9.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number10 { background-image:url(/images/10.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number11 { background-image:url(/images/11.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number12 { background-image:url(/images/12.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number13 { background-image:url(/images/13.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }
.number14 { background-image:url(/images/14.gif); background-repeat: no-repeat; padding-left: 40px; background-position: left; }

.disclosure { font-style: italic; }


@media screen and (min-width: 470px) {

    div#banner { padding-bottom: 5px; }

    hr {
        display: block;
        height: 1px;
        margin: 0px;
        border: none;
        color: #BBBBBB; /* old IE */
        background-color: #BBBBBB;
    }

}

@media screen and (min-width: 575px) {

    #container { padding: 30px }

    div#compact_nav { margin: 12px 0px 24px 0px; }

    img#main_photo { float: left; padding: 10px 0px 15px 0px; }

    #title_section { float: left; max-width: 65%; padding-right: 20px; }
    #author_info { padding-top: 7px; }

    #recipe_content_section { clear: left; }

}

@media screen and (min-width: 695px) {

    div#banner { display: inline-block; width: 55%; margin-left: 9px; }
    div#banner img { max-width: 450px; }

    form#cse-search-box {
        display: block;
        padding: 16px 0px 0px 0px;
        float: right;
    }

}

@media screen and (min-width: 1120px) {

    #container { min-width: 1045px; padding-top: 60px; }

    form#cse-search-box { padding-top: 40px; }

    div#banner { padding-bottom: 0px; }
    div#banner img { max-width: 575px; }    

    hr { display: none; }

    div#compact_nav { display: none; }

    ul#primary_nav {
        display: block;
        position: relative;    /* for dropdown */
        margin: 15px 0px 33px 0px;
        padding: 1px 0px 0px 0px;
        text-align: center;
        border: 1px solid #cccccc;
        box-shadow: 2px 2px 6px #cccccc;
    }
    ul#primary_nav li {
        margin: 0px;
        padding: 1px 13px;
        display: inline-block;    /* inline-block for dropdown */
    }
    ul#primary_nav a:link,
    ul#primary_nav a:active,
    ul#primary_nav a:visited { color: #000000; font-size: 80%; font-weight: normal; text-decoration: none; }
    ul#primary_nav a:hover   { color: #000000; font-size: 80%; font-weight: normal; text-decoration: underline; }

    /* 2/9/2017 - For hover dropdown navigation. */
    ul#primary_nav ul { 
        display: none;
        position: absolute;
        background-color: #ffffff;    /* makes it opaque */
        padding: 0px 0px 3px 0px;
        margin: 0px;
        text-align: left;
        border: 1px solid #dddddd;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 2;
    }
    ul#primary_nav ul.secondary_nav ul.recipe_nav {
        left: 100%;
        padding-top: 0px;
        margin-top: -28px;    /* li height + eyeballed offset */
        min-width: 165px;
    }
    ul#primary_nav li:hover > ul { display: block; }    /* show direct-child menu */
    ul#primary_nav ul li { display: block; }   /* display vertically */
    ul#primary_nav ul.secondary_nav > li { height: 26px; }
    ul#primary_nav ul li:hover { background-color: #eeeeee; }
    ul#primary_nav div.see_also { font-size: 85%; }

    ul#primary_nav ul a:link,
    ul#primary_nav ul a:active,
    ul#primary_nav ul a:visited,
    ul#primary_nav ul a:hover { font-size: 85%; }

    /* 2/9/2017 - Style for the sidebar navigation. */
    /* 5/29/2015 - secondary_nav is a list of subcategories within the primary_nav 
       recipe category (for Asian category, secondary_nav would be Japanese, Chinese, 
       etc.).  Some primary categories do not have subcategories (e.g., American, 
       salad) and only have recipe_nav under them.  recipe_nav is a list of recipes.  */
    div#container > ul.secondary_nav,
    div#container > ul.recipe_nav,
    div#container > ul.secondary_nav ul.recipe_nav {
        display: block;
        float: left;
        width: 220px;
        margin: 0px 50px 0px 0px; 
        padding: 12px 30px 20px 20px;
        list-style-type: none;
        border: 1px solid #cccccc;
        box-shadow: 1px 1px 6px #cccccc;
    }
    div#container > ul.secondary_nav a:link,
    div#container > ul.secondary_nav a:active,
    div#container > ul.secondary_nav a:visited { color: black; text-decoration: none; }
    div#container > ul.secondary_nav a:hover   { color: black; text-decoration: underline; }

    /* 5/29/2015 - style for nested recipe_nav, which overrides the general style for recipe_nav. */
    div#container > ul.secondary_nav li ul.recipe_nav {
        float: none;
        width: auto;
        margin: 0px;
        padding: 0px 0px 0px 22px;
        border: none;
        box-shadow: none;
    }

    div#container > ul.recipe_nav a:link,
    div#container > ul.recipe_nav a:active,
    div#container > ul.recipe_nav a:visited,
    div#container > ul.secondary_nav ul.recipe_nav a:link,
    div#container > ul.secondary_nav ul.recipe_nav a:active,
    div#container > ul.secondary_nav ul.recipe_nav a:visited { color: black; font-weight: normal; text-decoration: none; }
    div#container > ul.recipe_nav a:hover,
    div#container > ul.secondary_nav ul.recipe_nav a:hover   { color: black; font-weight: normal; text-decoration: underline; } 

    #recipe_index a:link,
    #recipe_index a:active,
    #recipe_index a:visited { color: black; text-decoration: none; }
    #recipe_index a:hover   { color: black; text-decoration: underline; }

    /* 7/14/10 - Making the See Also text on sidebar into a deep maroon */
    .see_also { color: #993300; }

    div#container > ul.recipe_nav li div.see_also { padding-top: 15px }
    div#container > ul.secondary_nav li ul.recipe_nav li div.see_also { padding-top: 0px }

    .new { padding: 0px 6px; background-color:#000066;color:#FFFFFF;font-size:80%;font-weight:bold; }

    div#recipe_container { float: left; width: 703px; vertical-align: top; padding: 5px 0px 35px 10px; }

    img#main_photo { float: right; max-width: 48%; padding-left: 4%; }

    #title_section { float: left; max-width: 48%; padding: 0px 0px 10px 0px; }

    div#print { display: block; padding-top: 10px; }
    div#print a:link,
    div#print a:active,
    div#print a:visited,
    div#print a:hover   { color: black; font-size: 85%; font-weight: normal; text-decoration: underline; }
    div#print img { padding-right: 12px; position: relative; top: 5px; }

    #recipe_content_section { padding-top: 10px; }

    #bottom_ad { padding: 20px 0px 0px 0px; }
    #matched_content { padding: 20px 0px 0px 0px; }
    #special_links { clear: both; }
    #desktop_link { display: none; }
    #bottom_nav { clear: both; }
    span#category_nav { display: none; }

}

@media screen and (min-width: 1366px) {

    #container { min-width: 1256px; }

    ul#primary_nav li { padding: 0px 17px; }
    ul#primary_nav a:link,
    ul#primary_nav a:active,
    ul#primary_nav a:visited,
    ul#primary_nav a:hover   { font-size: 90%; }

    ul#primary_nav ul li { padding: 1px 15px; }
    ul#primary_nav div.see_also { font-size: 90%; }

    ul#primary_nav ul a:link,
    ul#primary_nav ul a:active,
    ul#primary_nav ul a:visited,
    ul#primary_nav ul a:hover { font-size: 90%; }

    div#splashy_container { display: block; float: left; width: 160px; vertical-align: top; margin: 12px 0px 0px 60px; }
    #skyscraper_ad { margin-bottom: 50px; }
    #popular_recipes { border: 1px solid #B2B2B2; padding: 12px; }
    #popular_recipes h2 { font-weight: normal; margin: 0px 0px 10px 0px; }
    #popular_recipes ul { list-style-type: none; margin: 0px; padding: 0px; }
    #popular_recipes ul li { padding: 10px 0px 0px 0px; }
    #popular_recipes img { width: 136px; }
    #popular_recipes a:link,
    #popular_recipes a:active,
    #popular_recipes a:visited { color: black; font-weight: normal; text-decoration: none; }
    #popular_recipes a:hover   { color: black; font-weight: normal; text-decoration: underline; }

}

@media print {

    body { font-size: 10pt; }

    img { max-width: 200px; }

    #container { max-width: none; padding: 4%; }

    div#banner img { max-width: 355px; }

    hr {
        display: block;
        height: 1px;
        background: transparent;
        width: 100%;
        border: none;
        border-top: solid 1px #bbb;
        margin: 20px 0px;
    }

    #primary_nav, #compact_nav, .secondary_nav, .recipe_nav, #share, #splashy_container, #bottom_ad, #matched_content, #bottom_nav,
    #desktop_link, #print, #available_formats, .video, .video_header, .video_container, .disclosure, embed { display: none; }

    img#main_photo { float: right; max-width: 30%; padding: 12px 0px 15px 4%; }
    #title_section { float: left; max-width: 66%; padding: 0px; }

    #recipe_content_section { clear: left; padding-top: 15px; }

}