/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

.tSelected {
    background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  /*color: white;*/
  display: none;
  /*padding: 100px 20px;*/
  height: 100%;
}

#newRec {background-image:url('/RecipeManagement/images/veggies.jpg');}
#updateDeleteRec {
    background-image:url('/RecipeManagement/images/herbs_and_spices.jpg');
    background-repeat: repeat-y;
    overflow:visible;
    min-height: 2000px;
}

body {
    max-width:1600px;
    min-height: 2000px;
}

label {
  display: inline-block;
  width: 160px;
  text-align: right;
}​

/* ---- CONTENT AREA ---- */

#contentDiv, #addForm {
    font-family: 'garamond';
    width:100%;
}

#newRec .iptGrp, #btnCFDiv {
    display: inline-block;
    font-family: 'garamond';
    font-size:16pt;
    width:100%;
}

#tbl_ingr, #tbl_dire {
    display: inline-block;
    font-family: 'garamond';
    font-size:14pt;
}

#btnCFDiv {
    padding:10px 10px;
}

.clearfix, #tbl_ingr, #tbl_dire {
    width:90%;
    margin-left:10px;
}

.clearfix span {
    font-family: 'garamond';
    font-size:18pt;
    font-weight: 700;
}

.clearfix {
    margin-top:25px;
}

#tbl_ingr, #tbl_dire {
    background-color:white;
}

/* ---- 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;
    display:inline-block;
    width:95%;
}

.iptGrp select option, .iptGrp select {
    font-family: 'garamond';
    font-size:16pt;
    margin:5px;
}

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

.iptGrp {
    font-family: 'garamond';
    font-size:16pt;
    width:100%;
    margin:10px;
    padding:10px;
}

.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 {
    text-decoration: none;
    font-size:16pt;
    margin:5px;
}

/* ---- RECIPE EDIT DELETE ---- */

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

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

.newIngrRec,.newIngrRec input,.newIngrRec select, .newDireRec, .newDireRec input, .newDireRec select {
    background-color:#c0fcc5;
}

.editedIngr,.editedIngr input,.editedIngr select,.editedDire,.editedDire input,.editedDire,
.editedRecName input,.editedRecImg input,.editedRecKeywords input {
    background-color:#feffa8;
}

.deletedIngr,.deletedIngr input,.deletedIngr select,.deletedDire,.deletedDire input,.deletedDire select {
    background-color:#ffd1d1;
}

#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;
}

/* ---- RECIPE ADD FORM ---- */

#recInfo {
    width:100%;
}

@media only screen 
    and (min-device-width: 150px)
    and (max-device-width: 320px) {
        /* ---- HEADER ---- */
        #headerDiv > h1 {
            font-size:5.5em;
            text-transform: uppercase;
        }
        
        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select, #searchForm select option {
            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 {
            font-size:2.5em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recView {
            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%;
        }   
}

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

        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select {
            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 {
            font-size:2.75em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recView {
            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%;
        }   
}

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

        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select {
            font-size:2em;
        }
        .iptGrp select {
            width:75%;
        }
        .iptGrp input {
            width:80%;
        }
        #btnClearForm {
            width:25%;
        }
        
        /* ---- RECIPE LIST ---- */
        #recipeList tr td a {
            font-size:2em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recView {
            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%;
        }  
}

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

        /* ---- SEARCH FORM ---- */
        #searchForm label, #searchForm button, #searchForm input, #searchForm select {
            font-size:1.75em;
        }
        .iptGrp select {
            width:75%;
        }
        .iptGrp input {
            width:85%;
        }
        
        /* ---- RECIPE LIST ---- */
        #recipeList tr td a {
            font-size:1.75em;
        }  
      
        /* ---- RECIPE VIEW ---- */
        #recView div {
            max-width:100%;
            min-width:90%;
        }
        #recView {
            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%;
        }
}