/**********************************************************************************
    File name:      Recipe.css
    Description:    Styles describing presentational overrides for recipe detail
                    view.    
**********************************************************************************/

/* all sizes */
@media screen {

    /* $recipe */
    .recipe a {color:#FF4800;}

    /**********************************************************************************/
    /* sub classes
    /**********************************************************************************/
    /* $section-lead */
    .section-lead {padding-top:0;}
    .section-lead h1 {color:#0099CC;}

    /* $recipe-toolkit */
    .recipe-toolkit {
        display:block;
        float: left;
        width: 48.5%; height:auto;
        padding:0 0 10px; margin-bottom: 20px;
        background-color:#FFF;
        border:1px solid #E2E2E2;
        font-family:Lato, sans-serif;
    }
    .recipe-toolkit figure {
        display:block;
        width:auto; height:auto;
        padding:4px; margin:0 0 10px 0;
        background:#FFF;
        -moz-box-shadow:    0px 3px 6px 0px rgba(051,051,051,0.3);
        -webkit-box-shadow: 0px 3px 6px 0px rgba(051,051,051,0.3);
        box-shadow:         0px 3px 6px 0px rgba(051,051,051,0.3);
    }
    .recipe-toolkit figure img {
        display:block;
        width:100%; max-width: 440px; height:auto;
        padding:0; margin: 0px auto;
    }
    .recipe-toolkit figure img.default-img {width:50%;}
    .recipe-toolkit h3 {
        margin:15px 0 10px 15px;
        color:#B0D000;
        font-weight:700; font-size:24px;
        font-family:Lato, sans-serif;
    }
    .recipe-toolkit ul {
        display:block; position:relative;
        width:auto; height:auto;
        padding:0; margin:0 0 0 30px;
    }
    .recipe-toolkit li {
        display:block;
        width:auto; height:auto;
        padding:5px 0 5px 30px; margin:0px 0px 5px; 
        background:left center no-repeat;
    }
    .recipe-toolkit li.icn-print {background-image: url("../../Images/print.png");}
    .recipe-toolkit li.icn-email {background-image: url("../../Images/email.png");}
    .recipe-toolkit li.icn-save  {background-image: url("../../Images/save.png");}
    .recipe-toolkit li.icn-share {background-image: url("../../Images/share.png");}

    /* $related-items */
    .related-items {
        display:block;
        position: relative; float: left;
        left: 0px;
        width: 48.5%; height:auto;
        padding:20px 0 0; margin-top: 20px;
        background-color:#FFF;
        border:1px solid #E2E2E2; border-top:none;
        font-family:Lato, sans-serif;
    } 
    .related-items h2 {
        padding:0 15px; margin:0 0 10px 0;
        color:#0099CC; font-family:Lato, sans-serif; font-weight:700; font-size:24px;
    }
    .related-items ul {margin:0 15px;}
    .related-items li {margin-bottom:20px;}
    .related-items article a {font-size:15px;}

    /*Rating plugin*/
    .rating {
        padding:5px 0;
    }
    .rating a {color:#FF4800;}
    .rating .rating-recipe-widget {
        display:inline-block; 
        width:auto; height:auto;
        padding:0 2px; margin:0 auto; 
        border:none; 
        text-align:center; vertical-align:middle; 
    }
    .rating .rating-recipe-widget img { 
        display:inline-block;
        padding:0; margin:0;
        border:0px none; 
        vertical-align:baseline; 
    }

    /* $recipe-features */
    .recipe-features {
        float: right;
        width: 48.5%;
        padding-top:10px;
        font-family: Lato, sans-serif;
    }
    .recipe-features article {
        position:relative;
        padding-left:63px; margin-bottom:20px;
    }
    .recipe-features article h3 {
        color:#B0D000; font-family:Lato, sans-serif; font-weight:bold; font-size:24px;
    }
    .recipe-features article .pictogram {
        position:absolute; left:0; top:0;
    }
    .recipe-features article ul {
        display:block;
        width:auto; height:auto;
        padding:0; margin:0;
        list-style-type:none;
    }
    .recipe-features article li {padding:5px 0;}
    .recipe-features article > div {
        display:block;
        width:auto; height:auto;
        padding:0; margin:0;
    }
    .recipe-features article > div p {text-align:justify;}

    /* $pictogram */
    .pictogram {
        display:block;
        width:63px; height:80px;
        padding:0; margin:0;
    }
    .pictogram.portions     {background: url("../../Images/features.png") left top no-repeat;}
    .pictogram.ingredients  {background: url("../../Images/ingredients.png") 7px top no-repeat;}
    .pictogram.instructions {background: url("../../images/instructions.png") left top no-repeat;}

    /* tabs-container */
    .recipe-features article.tabs-container { margin-left : 0px; }
    .tabs-container {margin-left:63px; margin-bottom:40px;}
    .tabs-container .nav-tabs li.active a {background:#CECECE;}
    .tabs-container .tab-content {
        min-height:120px;
        padding:15px 20px;
        border:1px solid #E2E2E2; border-top:none;
    }
}

@media screen and (min-width: 860px) and (max-width: 910px) {
    .related-items {
        /*margin-top: -135%;
        margin-left: -107.6%;*/
    }

}

@media screen and (min-width: 767px) and (max-width: 860px) {
    /*.recipe-toolkit {
        padding: 0 0 15%;
    }*/

    .related-items {
        /*margin-top: -140%;
        margin-left: -108.2%;*/
    }
}

/* x-small */
@media screen and (max-width: 767px) {

    /* $recipe */
    .recipe {padding:0 8.75%; margin:0;}
    .recipe > .row {padding:0; margin:0;}
    .recipe .row > div {padding:0; margin:0;}
        
    /**********************************************************************************/
    /* sub classes
    /**********************************************************************************/

    /* contents */
    .contents > .row {margin:0;}

    /* $rating */
    .rating {display:block; text-align:center;}
    .rating .rating-recipe-widget {display:block;}

    /* $description */
    .recipe .description p {text-align:center;}

    .recipe-toolkit { width: 100%; }    
    .recipe-features { width: 100%; }
    article.tabs-container { padding: 0px; margin-left:0;}
     .related-items { width: 100%; }
}

/* sm, md, lg */
@media (min-width: 768px) {

    /* $container */
    #breadcrumb + div {
        width:auto; max-width:960px;
        padding:0 15px; margin:0 auto;
    }
    .recipe.container {
        width:auto;
        padding:0; margin:0;
    }
    .container > .row {padding:0; margin-bottom:40px;}
    .container > .row > div:first-child {/*padding:0;*/}
    .container > .row > div:first-child + div {background-color:#FFF;}

}