/**************************************************
 * Auther: JBT
 * Purpose: skin style customization
 **************************************************/

/* Website Width */
.container {
    width:100%;
    max-width: 1240px;
    padding-right: 12px;
    padding-left: 12px;
}

/**************************************************
 * FONT Settings
 **************************************************/
html, #Body, body, footer, p, div, .page-banner p, td, #content-areas ol, #content-areas ul, #content-areas li , a{
    font-size: 17px;
    letter-spacing: normal;
    font-family: Arial,Helvetica,sans-serif;
    font-weight:normal !important;
}
#Body, body, p, .page-banner p {
    line-height: 1.6em;
    color: #666;
    padding-bottom: 25px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h2f, .page-banner h2, .page-banner p {
    font-family: 'Arial Narrow',Arial,Helvetica,sans-serif !important;
}
h1, h2, h3, .h1, .h2, .h3, .h2f {
    line-height: 1.2em;
    margin-top:20px;
    margin-bottom:30px;
    /*color -- on Color section below*/
}
h4, h5, h6, .h4, .h5, .h6 {
    line-height: 1.2em;
    margin-top:10px;
    margin-bottom:20px;
    /*color -- on Color section below*/
}
h1,.h1 { font-size:44px;}
h2,.h2,.h2f { font-size:36px;}
h3,.h3 { font-size:30px;}
h4,.h4 { font-size:26px;}
h5,.h5 { font-size:22px;}
h6,.h6 { font-size:18px;}
@media (max-width: 767px){
    h1, .social-share{ text-align:center }
}
a, a:hover, a:visited{text-decoration:none !important;}

/**************************************************
 * Override default sizes
 **************************************************/
small, .small {
    font-size: 75%;
    /*color --> on colour section below*/
}
h1 small,h2 small,h3 small,h1 .small,h2 .small, h3 .small 
{
    font-size: 65%;
}
hr{
    margin-bottom:2rem;
    border-top: 1px solid rgba(188, 170, 164, 0.5);
}
#content-areas li {
    margin-bottom: 20px;
}
/* END FONT Settings */


/**************************************************
 * THEME Colours
 **************************************************/
/*
From: http://dnncontra.com/Getting-Started/Contra-Color-Palette
#efebe9 brown lighten-5
#d7ccc8 brown lighten-4
#bcaaa4 brown lighten-3
#a1887f brown lighten-2
#8d6e63 brown lighten-1
#795548 brown
#6d4c41 brown darken-1
#5d4037 brown darken-2
#4e342e brown darken-3
#3e2723 brown darken-4
*/
/* Href Colors */
#content-areas a,#content-areas a:active,#content-areas a:link,#content-areas a:visited, a:focus{color:#bf360c;} /* #666 #bf360c deep-orange darken-4*/
.special-list a,  .special-list a:active, .special-list a:link .special-list a:visited {color:#666 !important;}
#content-areas a:hover, .special-list a:hover {color:#ff6d00 !important;} /* #ff6d00 orange accent-4 */
.btn-secondary {
    color: #4e342e !important; /*#4e342e brown darken-3*/ 
} 
.top-bar a {
    color: #fff;
}

/* DARK color of elements */
.top-bar {
    background-color: #4e342e; /*#4e342e brown darken-3*/
    border-bottom: 1px solid #f2f2f2;
}

h1, h2, h3, .h1, .h2, .h3{
    color: #4e342e; /*#4e342e brown darken-3*/
}
h4, h5, h6, .h4, .h5, .h6{
    color: #5d4037; /*#5d4037 brown darken-2*/
}
.social-share .btn-round{
    color: #fff;
    background-color: #5d4037; /* #5d4037 brown darken-2 */ 
}
#right_pane .list-group-item.active,
.card-sir .card-heading, .card-img, .special-list a:hover,
.scr-page-navigation-panel /* Coments module */
{
    background-color: #5d4037 !important; /*#5d4037 brown darken-2*/
}
#right_pane .list-group-item, /*.right-ads,*/ /* Right Panel*/
.card-sir, .card-sir .card-heading, .card-img,
.form-control, .btn-secondary /*All input controls*/
{
    border-color: #5d4037 !important; /*#5d4037 brown darken-2*/
}

/* LIGHT Color for elements */
.img-thumbnail, .contraC td img, .recipe-table td img, .recipe-table .see-more a /* thumbnails */
{
    border-color: #8d6e63 !important; /*#8d6e63 brown lighten-1*/
}
.card-sir .card-footer
{
    background-color: #a1887f;  /*#a1887f brown lighten-2*/
}

/* LIGHTER color of elements */
#main-menu > li ul, .sm-contra ul a.disabled, /* Menu */
.img-thumbnail, .contraC td img, .recipe-table td img, .recipe-table .see-more a, /* Thumbnails */
.btn-secondary /* Search buttons*/
{
    background-color: #bcaaa4; /*#bcaaa4 brown lighten-3*/
}
#right_pane .list-group-item, /* .right-ads,*/ /*Right Panels*/
.scr-c-h, /* Coments module */
#cookie-law /* Cookie Consent Banner*/
{
    background-color: #d7ccc8; /*#d7ccc8 brown lighten-4*/
}
footer .copyright-section, footer .footer-main-section {
    border-top-color: #d7ccc8; /*#d7ccc8 brown lighten-4; */
}
.special-list a, /*Special Features List*/
.popular-collection, /*Popular Collection List*/
#bottom-nav /* Bottom Content Pane */
{
    background-color: #d7ccc8 !important; /*#d7ccc8 brown lighten-4; */
}

/*Grey*/
small, .small
 {
    color: #757575; /* #757575 grey darken-1 */
}

/* Orange*/
.social-share a:focus, .social-share a:hover{
    background-color: #ff5722; /*#ff5722 deep-orange*/
}
.special-list > a:hover, 
.btn-secondary:hover /*Form button hover*/
{
    color: #ff5722 !important; /*#ff5722 deep-orange*/
}
.form-control:focus, .btn-secondary:hover, /*All input controls selection*/
.scr-button-broad:hover, .scr-primary-action:hover /* Comments button*/
{
    border-color: #ff5722; /*#ff5722 deep-orange*/
} 
/* END THEME Colours */

/***********************************************
 * START: Border Radious
 ***********************************************/
/*.right-ads,*/ /* Ads in right panel*/
.contraC td img, .recipe-table td img, .recipe-table .see-more a, /* Recipe and thumbnail tables*/
.scr-c-h, .scr-c-b, .scr-page-navigation-panel, /* Comments Module */
.popular-collection .item, .popular-collection .item img,/* Popular Collection List*/
.main-menu-str, /*Menu*/
#bottom-nav /* Bottom content pane */
{
    border:1px solid;
    border-radius: 0.25rem;
    -webkit-transition: all .2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/* END: Border Radious */

/***********************************************
 * START: Shaddow Effect
 ***********************************************/
.card-img:focus, .card-img:hover, .card-sir:focus, .card-sir:hover,
.img-thumbnail:hover, .contraC td img:hover, .recipe-table td img:hover, .recipe-table .see-more a:hover 
{
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.50), 0 4px 15px 0 rgba(0, 0, 0, 0.40);
}

/* Header & Footer*/
.sir-hidden-header{
    height:124px;
}
header .site-name {
    line-height:0.8em;
    margin:0;
    padding-top:3px;
}
footer {
    background-color: #ffffff;
    border-top: none;
    color: inherit;
}
footer .copyright-section, footer .footer-main-section {
    border-top-width:2px;
    border-top-style:solid;
    /*border-top-color --> on colour section above*/
}


/* TOP BAR */
.top-bar .general-functions li .social-icon-holder a {
    display: block;
    position: relative;
    height: 43px;
    width: 43px;
    font-size: inherit;
    text-align: center;
    border-left: 1px solid #f2f2f2;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.top-bar .general-functions li .social-icon-holder a.search {
    border-right: 1px solid #f2f2f2;
}


/***********************************************
 * START: Navigation Bar 
 ***********************************************/
.nav-search, .main-menu-str /* Added search icon in mobile navigation bar */ { 
    float: right;
    margin-top: 27.5px;
    position: relative;
    display: inline-block;
    height: 29px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.nav-search{
    width: 29px;
}
.main-menu-str{
    width: 38px;
    padding:0 3px;
    font-size:12px;
    font-weight:bold;
}
@media (max-width:968px) and (min-width:768px) {
    .nav-brand {
        display:none;
    }
}
@media (max-width: 640px){ /* Reduce the height of navigation bar in mobile */
    .nav-search, .main-menu-str{
        margin-top: 17.5px;
    }
    .main-menu-btn{
        margin-top: 14.5px;
    }
    .nav-brand {
        height: 58px;
    }
    .nav-brand a {
        line-height: 58px;
    }
    .nav-brand img {
        max-height: 54px;
    }
    .sir-hidden-header{
    height:103px;
    }
}

/* Menu */
#main-menu a, .sm-contra a, .sm-contra a:hover, .sm-contra a:focus, .sm-contra a:active, .sm-contra a.highlighted {
    /*padding: 0 10px;*/
    font-size: 12px;
}
#main-menu > li > a{
    text-transform: uppercase;
}
.sm-contra li li a, .sm-contra li li a:hover, .sm-contra li li a:focus, .sm-contra li li a:active, .sm-contra li li a.highlighted {
    line-height: 13px;
}
.sm a.disabled {
    cursor: default;
}
@media (min-width: 768px) {
    .sm-contra ul a.disabled:hover{ background-color: #f2f2f2;}
}
/* #main-menu > li ul --> background-color --> on colour section above*/


/***********************************************
 * START: Social Share Icons 
 ***********************************************/
.social-share{
    margin-left:0px;
    margin-top:-1.5rem;
}
.social-share, .social-share .list-inline-item{
    margin-bottom:0px;
}
/*/portals/0/sirimages/Yummly-37x37-Grey.pngYummly-MdIcon.png*/
@media(max-width: 440px) { .social-share .list-inline-item, .social-share .list-inline-item a { margin-left: 0px; margin-right: 2px;} }
/*.social-share .btn-round --> background-color --> on color section above*/
/*.social-share a:focus, .social-share a:hover --> background-color --> on color section above */
#social-share-bot{margin-top:40px;}
/*END: Social Share Icons */


/*************************************
 * START:Right Panel
 *************************************/
#right_pane{
        max-width:400px;
        margin:0 auto;
        overflow-x:hidden;
    }
@media (min-width: 768px){
    #right_pane{
        padding-left:35px;
    }
}
#right_pane .list-group-item {
    /* border-color ==> on colour section above */
     padding: 7px 10px;
     margin:0;
     
}
#right_pane .list-group-item.active {
    /* background-color ==> on colour section above */
    color:#ffffff !important;
    padding: 15px 10px;
}

/* Popular Features List*/
/*.popular-collection --> Color on color section */
.popular-collection{
    padding:10px;
}
.popular-collection .item{
    background-color:#fff;
    padding:10px;
    margin-top:10px;
    border:none;
}
.popular-collection .item a{
    color:#666 !important;
}
.popular-collection .item img{
    border:none;
}
.popular-collection .item .summary{
    text-align:center
}
@media (min-width:768px) and (max-width:968px) {
    .popular-collection .item .summary{
        font-size:12px;
        line-height:1.2em;
    }
}

/* Special Features List*/
.special-list{
    max-width:400px;
    margin:0 auto;
}
.special-list .list-group-item{
    border:0;
    border-radius:0;
    margin-bottom: 3px !important;
    padding:15px !important;
}
.special-list a:before{
    content: "\f105";
    font-family: FontAwesome;
    font-size:30px;
    left:10px;
    padding-right:10px;
   /*position:absolute;
    top:0;*/
}
.stick /* Special Features List in sticky mode*/
{
	position:fixed;
	top:20px;
    max-width: 350px;
    width:100%;
}
@media (min-width:768px) and (max-width:1009px) {
    .special-list .list-group-item{padding:15px 5px !important;}
    .special-list a{font-size:14px;}
    .special-list a:before{padding-right:2px;}
    
}
/* END: Right Panel*/

/* START : Common Element Sizes and Padding */
.no-pad-visible{ overflow: visible; padding: 0;}
.no-pad-hidden{ overflow: hidden; padding: 0;}
.ln-ht-1em{line-height: 1em;}
.ln-ht-2em{line-height: 2em;}
.margin-top-60 {margin-top:60px}
.margin-bot-60 {margin-bottom:60px}
.margin-top-40 {margin-top:40px}
.margin-bot-40 {margin-bottom:40px}
.margin-top-20 {margin-top:20px}
.margin-bot-20 {margin-bottom:20px}
.margin-no{margin:0;}
.pad-5 {padding:5px}
.no-pad {padding:0px}

/*************************************
 * START: Thumbnail and immage banner formatting and collapse for Small Screen
 *************************************/
.img-thumbnail, .contraC td img, .recipe-table td img, .recipe-table .see-more a{
    border-width:1px;
    border-style:solid;
    /*border-color --> on color section above*/ 
    /*background-color --> on color section above*/ 
}
/*.contraC td img, .recipe-table td img, .recipe-table .see-more a --> Border radious in radious section above*/
.contraC td img, .recipe-table td img {  
	display: block;
	max-height:98px;
	max-width: 128px;
	width:100%;
	padding: 4px;
    margin-left:auto; 
    margin-right:auto;
    margin-bottom:7px;
    height: auto;
}
table.center, .recipe-table {
    margin-left:auto; 
    margin-right:auto;
}
.contraC table, .recipe-table {
    min-width:300px !important;
    max-width: 770px; /*630px;*/
    width: 100% !important; 
    margin-bottom: 20px;
}

.contraC td, .recipe-table td { 
	width: 25%;
	padding: 30px 2px 10px 2px;
    text-align: center; 
    vertical-align: top;
}

.recipe-table .see-more { 
	width: 100%;
	padding: 1px 1px 1px 1px;
    text-align: right;
    vertical-align: top;
    font-size: 22px;
}
.recipe-table .see-more a{
    width: 6em;  
    padding: 0.6em;
    line-height: 1.2;
    text-align: center;
    font-weight: bold !important; 
}

@media handheld, only screen and (max-width: 767px) {
    /* Retain thumbnail image size -- JBT*/
	.contraC td img, .recipe-table td img {  
		width:100%;
	}
}
@media handheld, only screen and (max-width: 530px) {
    /* Max width before this PARTICULAR table gets nasty
   This query will take effect for any screen smaller than 760px
   and also iPads specifically.*/
    
    /* Force table to not be like tables anymore */
    .contraC table, .contraC thead, .contraC tbody, .contraC th, .contraC td, .contraC tr,
    .recipe-table table, .recipe-table thead, .recipe-table tbody, .recipe-table th, .recipe-table td, .recipe-table tr {
        display: inline-block;
    }

    .contraC table tr, .recipe-table tr, .contraC td img, .recipe-table td img {
        width: 100%;
    }

    .contraC td, .recipe-table td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        width: 48%;
    }

    .contraC td:before,
    .recipe-table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 48%;
        /*padding-right: 10px;*/
        white-space: nowrap;
    }
}
/* END: SIR: thumbnail and immage anner formatting and collapse for Small Screen*/

/*************************************
 * Normal Table
 *************************************/
 .normalTable td{
    width: inherit;
    padding: 10px;
    text-align: left;
}
.normalTable > thead > tr{
    border-color: #5d4037;background-color: #5d4037;
    color: #ffffff;
}

/**********************************************
 * card Custom for SIR  New card colours http://www.w3schools.com/html/html_colors.asp 
 **********************************************/
/* Generic Card for SIR */
.card-sir {margin:10px}
/*.card-sir, .card-sir .card-heading --> border-color --> on color section above}*/
.card-sir .card-heading {
    /*background-color --> on colour section above*/ 
    padding:5px 0; 
} 
.card-sir .card-heading h4 {color: #fff; margin:0px;}
.card-sir .card-body{padding: 15px; line-height: 1.4em; }
.card-sir .card-footer {color:#fff; /*background-color --> on colour section above*/ text-align:left;}
/*.card-sir a:hover --> color on colour section above*/
@media(min-width: 768px) {.card-sir .card-body {min-height:110px;}}

/* Card For Big Image Thumbnail*/
.card-img{
    text-align:center;
    padding:5px;
    max-width:250px;
    margin:15px auto;
}
.card-img .card-img-top{
    margin-bottom:5px;
}
.card-img .card-block {
    padding:5px;
    font-size:26px;
    color:#fff;
}

/*************************************
 * START: Comments Module
 *************************************/
/*.scr-c-h, .scr-page-navigation-panel --> background-color --> On color section above*/
.scr-c-h, .scr-c-b, .scr-page-navigation-panel {
    padding: 12px;
    border:0;
    overflow:hidden;
    /*border-radius: --> Border radious in radious section above*/
}
.scr-h.h2f{
    margin-bottom:0;
}
.scr-c-c-c0 {
    margin-top:30px;
}
.scr-button-page-no{
    color:#fff !important;
}

/*************************************
 * START: Bottom Nav Pane
 *************************************/
#bottom-nav{
    padding:20px;
    border:0;
}
#bottom-nav a{
    font-size:20px;
}
#bottom-nav .links{
    padding-top:15px;
}
#sirSearchBot{
    margin:0 auto;
    max-width:400px;
}

/*************************************
 * Cookie Consent Banner
 *************************************/
 #cookie-law { 
    max-width:940px;
    margin:5px auto 0; 
}

/*************************************
 *   START: Ad Style 
 *************************************/
/* Ad Size Settings */
.ad-ht-all, .ad-ht-250, .ad-ht-280, .ad-ht-600{ overflow: hidden; padding: 6px 0 0 0; text-align:center;}
.ad-ht-250{min-height:255px;}
.ad-ht-280{min-height:285px;}
.ad-ht-600{min-height:605px;}
#top-banner-ads{
    max-height:250px;
    padding:0;
    margin:10px 0 20px 0;
    background-color: #d7ccc8;
}

.sir-responsive-leaderboard, .sir-responsive-content01, .sir-responsive-bottom-center, .sir-responsive-right-top { display:inline-block; width: 300px; height: 250px; }
/*#ad-rt-top-wrap,*/ .sir-responsive-right, #ad-rt-bot-wrap { display: none;}
@media(min-width: 360px) { .sir-responsive-content01, .sir-responsive-bottom-center, .sir-responsive-right-top { width: 336px; height: 280px; }}
@media(min-width: 468px) { .sir-responsive-leaderboard { width: 468px; height: 60px; } }
@media(min-width: 728px) { .sir-responsive-leaderboard { width: 728px; height: 90px; } }
@media(min-width: 768px) { 
    .sir-responsive-content01, .sir-responsive-leaderboard, #top-banner-ads { display: none !important; }
    /*#ad-rt-top-wrap,*/ #ad-rt-bot-wrap { display:block; }
	.sir-responsive-right-top, .sir-responsive-right { display:inline-block; width: 160px; height: 600px; } }
@media(min-width: 1060px) { 
    .sir-responsive-right-top { width: 300px; height: 250px; }
    .sir-responsive-right { width: 300px; height: 600px; }
}
@media(min-width:1166px) { .sir-responsive-right-top { width: 336px; height: 280px; }}
/*@media(min-width:1240px) { }*/
/* END: Ad Style */