body {
    max-width:1600px;
}

/* ---- HEADER ---- */
header {
    width:100%;
    height:20%;
    display:inline-block;
    text-align:center;
}

#headerDiv {
    position: relative;
    overflow: hidden;
}

#headerDiv > h1 {
    position: relative;
    z-index: 2;
    font-family: 'garamond';
    font-weight:900;
    font-size:60pt;
    color:#00360c;
    -webkit-text-stroke: 1px black;
    text-shadow: -1px 1px 2px black,
                              1px 1px 2px black,
                              1px -1px 0 black,
                              -1px -1px 0 black;
}

#headerDiv > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.6;
}

/* ---- CONTENT AREA ---- */
#mainDiv {
    background-image:url('/Recipes/images/herbs_and_spices.jpg');
    position: relative;
    overflow: hidden;
    min-height: 2000px;
    
}

#contentDiv {
    display:none;
    font-family: 'garamond';
    margin-top:30px;
    padding-top:5px;
    padding-bottom:5px;
    width:100%;
}

#aBrowseRecsLink::before, #aSearchAllRecsLink::before {
    content:"";
    height:10px;
}

#aBrowseRecsLink, #aSearchAllRecsLink {
    text-decoration: none;
    margin:10px;
    font-family: 'garamond';
    font-weight: bold;
    color:black;
    font-size:20pt;
    margin-right:20px;
    margin-top:10px;
    padding:10px;
    background-color:whitesmoke;
    opacity:0.8;
    position:relative;
    top:20px;
    border-radius: 15px;
}

/* ---- SEARCH FORM ---- */
#searchForm {
    font-family: 'garamond';
    font-size: 16pt;
    position: relative;
    z-index: 2;
    margin:10px;
    border-radius: 15px;
    background-color:whitesmoke;
    opacity:0.8;
    padding:5px;
}

.iptGrp select option, .iptGrp select {
    font-family: 'garamond';
}

#searchForm label, #searchForm button, #searchForm input, #searchForm select {
    font-size:16pt;
    margin:5px;
}

.iptGrp {
    width:100%;
}

.iptGrp input, .iptGrp select {
    width:75%;
}

#btnClearForm {
    border: 2px solid black;
    width:15%;
    padding-left:2%;
    padding-right:2%;
}

/* ---- RECIPE LIST ---- */
#recipeList {
    font-family: 'garamond';
    margin:10px;
    border-radius: 15px;
    background-color:whitesmoke;
    opacity:0.8;
    padding: 5px;
}

#recipeList tr td a, .bRecImage a {
    text-decoration: none;
    font-size:16pt;
}

/* ---- RECIPE VIEW ---- */
#recView h1 {
    margin-top:0px;
}

#recViewBtnBlock {
    margin:5px;
    font-size:16pt;
}

#recView div {
    float:left;
    max-width: 50%;
}

#recImgDiv {
    position:relative;
    overflow:hidden;
    /*max-width:45%;
    float:left;*/
}

#recImg {   
    position: relative;
    z-index: 2;
    margin-top:10px;
    border-radius: 15px;
    border:5px solid rgba(245,245,245,0.9);
    /*width:40%;
    height:40%;*/
}


#recViewDiv {
    margin:10px;
    border-radius: 15px;
    background-color:whitesmoke;
    opacity:0.8;
    padding:5px;
    font-family: 'garamond';
    float:left;
    z-index:1;
    max-width:55%;
}

#recViewDiv table tr td {
    margin:5px;
}

#btnClearRec, #btnPrintRec {
    float:left;
    margin:5px;
    border: 2px solid black;
}

.listTD {
    display:list-item;
    list-style:disc inside;
    padding:0 0 0 14px;
    margin:0;
}

/* ---- BROWSE RECIPES ---- */

#browseRecs {
    display:none;
    width:100%;
    margin-top:35px;
}

.bRecCategory {
    font-family: 'garamond';
    max-width: 95%;
    height: 100%;
    min-height: 100%;
    position: relative;
    display:inline-block;
    z-index: 1;
    margin:10px;
    padding:5px;
}

.bRecCategory::before{
    background-color:whitesmoke; 
    content: "";
    border-radius: 15px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.8;
}

.bRecImage {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width:290px;
    padding:5px;
    float:left;
    height:100%;
}

.bRecImage img {
    width:280px;
   /* height:280px;*/
    max-width: 100%;
    height: auto;
    display: block;
}

.bRecImage label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
    min-height: 40px;
    max-height: 40px;
    max-width: 280px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.divActive {
    display:block !important;
}

.linkTabActive{
    background-color:lightgrey !important;
}

@media only screen 
    and (min-device-width: 150px)
    and (max-device-width: 320px) {
        /* ---- HEADER ---- */
        #headerDiv > h1 {
            font-size:5.5em;
            text-transform: uppercase;
        }
        
        #aBrowseRecsLink, #aSearchAllRecsLink {
            font-size:3.25em;
            margin-right:5px;
        }
        
        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select, #searchForm select option, .bRecCategory h1 {
            font-size:2.5em;
        }
        .iptGrp select {
            width:65%;
        }
        .iptGrp input {
            width:75%;
        }
        #btnClearForm {
            min-width: 95%;
            display:block;
            text-align:center;
        }
        
        /* ---- RECIPE LIST ---- */
        #recipeList tr td a, .bRecImage a {
            font-size:2.5em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recViewDiv {
            width:100%;
            margin-right:10px;
            font-size:2.5em;
        }
        #recViewBtnBlock {
            width:100%;
        }
        #recViewBtnBlock button {
            font-size:2.5em;
            min-width: 95%;
            text-align:center;
            float:left;
        }
        #recImgDiv {
            width:100%;
        }
        #btnClearRec {
            min-width:100%;
        }
        #btnPrintRec {
            display:none;
        }
        #recImg {
            display:inline-block;
            margin-left: 2%;
        }   
        
/* ---- BROWSE RECIPES ---- */

        .bRecImage img {
            width:350px;
            height:350px;
        }        
}

@media only screen
    and (min-device-width: 321px)
    and (max-device-width: 667px) {
        /* ---- HEADER ---- */
        #headerDiv > h1 {
            font-size:5em;
            text-transform: uppercase;
        }

        #aBrowseRecsLink, #aSearchAllRecsLink {
            font-size:3.5em;
            margin-right:7px;
        }        
        
        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select, #aBrowseRecsLink, #aSearchAllRecsLink, .bRecCategory h1 {
            font-size:2.75em;
        }
        .iptGrp select {
            width:65%;
        }
        .iptGrp input {
            width:75%;
        }
        #btnClearForm {
            min-width: 95%;
            display:block;
            text-align:center;
        }
        
        /* ---- RECIPE LIST ---- */
        #recipeList tr td a, .bRecImage a {
            font-size:2.75em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recViewDiv {
            margin-right:10px;
            font-size:2.5em;
        }
        #recViewBtnBlock {
            width:100%;
        }
        #recViewBtnBlock button {
            font-size:2.5em;
            min-width: 95%;
            text-align:center;
            float:left;
        }
        #btnPrintRec {
            display:none;
        }
        #recImg {
            display:inline-block;
            margin-left: 2%;
        }   
        
/* ---- BROWSE RECIPES ---- */
        .bRecImage {
            width:385px;
        }
        
        .bRecImage img {
            width:375px;
            height:375px;
        }
}

@media only screen 
    and (min-device-width: 668px)
    and (max-device-width: 800px) {
        /* ---- HEADER ---- */
        #headerDiv > h1 {
            font-size:4.5em;
        }

        #aBrowseRecsLink, #aSearchAllRecsLink {
            font-size:3em;
            margin-right:10px;
        }              

        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select, #aBrowseRecsLink, #aSearchAllRecsLink, .bRecCategory h1 {
            font-size:2em;
        }
        .iptGrp select {
            width:75%;
        }
        .iptGrp input {
            width:80%;
        }
        #btnClearForm {
            width:25%;
        }
        
        /* ---- RECIPE LIST ---- */
        #recipeList tr td a, .bRecImage a {
            font-size:2em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recViewDiv {
            margin-right:10px;
            font-size:2em;
        }
        #recViewBtnBlock {
            width:100%;
            display:block;
        }
        #recViewBtnBlock button {
            font-size:2em;
            min-width: 95%;
            text-align:center;
            float:left;
        }
        #btnPrintRec {
            display:none;
        }
        #recImg {
            display:inline-block;
            margin-left: 2%;
        }  
        
/* ---- BROWSE RECIPES ---- */
        .bRecImage {
            width:410px;
        }
        
        .bRecImage img {
            width:400px;
            height:400px;
        }        
}

@media only screen
    and (min-device-width: 801px)
    and (max-device-width: 1024px) {
        /* ---- HEADER ---- */
        #headerDiv > h1 {
            font-size:4em;
        }
        
        #aBrowseRecsLink, #aSearchAllRecsLink {
            font-size:2.75em;
            margin-right:10px;
        }        
      
        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select, #aBrowseRecsLink, #aSearchAllRecsLink, .bRecCategory h1 {
            font-size:1.75em;
        }
        .iptGrp select {
            width:75%;
        }
        .iptGrp input {
            width:85%;
        }
        
        /* ---- RECIPE LIST ---- */
        #recipeList tr td a, .bRecImage a {
            font-size:1.75em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recViewDiv {
            margin-right:10px;
            font-size:1.75em;
        }
        #recViewBtnBlock {
            width:100%;
        }
        #recViewBtnBlock button {
            font-size:1.75em;
            min-width: 95%;
            text-align:center;
            float:left;
        }
        #btnPrintRec {
            display:none;
        }
        #recImg {
            display:inline-block;
            margin-left: 2%;
        }

/* ---- BROWSE RECIPES ---- */
        .bRecImage {
            width:410px;
        }
        
        .bRecImage img {
            width:400px;
            height:400px;
        }        
}