/****************************************************************************** 
 * Name: style.css
 * Desc: Stylesheet for the recipe website
 * RCS : $Id: style.css,v 1.2 2015/11/03 23:19:21 shaun Exp $
 *****************************************************************************/

/****************************************************************************** 
 * generic styles
 *****************************************************************************/
body {
    background-color: #FFFFFF;
}


/****************************************************************************** 
 * table styles for the standard webpage
 *****************************************************************************/
table.main {
   background-color: #FFFFFF;
   width           : 100%;
}

td.header{
   text-align     : left;
   font-size      : large;
   font-family    : arial;
   font-weight    : bold;
   padding-top    : 3px;
   padding-left   : 15px;
   padding-right  : 15px;
}

td.title {
   text-align     : left;
   font-size      : medium;
   font-family    : arial;
   font-weight    : normal;
   font-weight    : bold;
   vertical-align : top;
   width          : 125px;
   padding-left   : 15px;
   padding-right  : 15px;
}

td.data {
   font-size      : medium;
   text-align     : left;
   font-family    : arial;
   vertical-align : top;
   padding-left   : 15px;
   padding-right  : 15px;
}

td.footer {
   text-align     : left;
   font-size      : small;
   font-family    : arial;
   padding-top    : 0px;
   padding-bottom : 0px;
   padding-left   : 15px;
}

a.recipe_name {
   text-align     : left;
   font-size      : medium;
   font-family    : arial;
   padding-top    : 0px;
   padding-bottom : 0px;
   padding-left   : 15px;
}

p.error_msg {
   padding-left   : 15px;
}


/****************************************************************************** 
 * styles for the mobile webpage
 *****************************************************************************/

p.header {
   font-size     : large;
   font-family   : arial;
   font-weight   : bold;
   padding-right : 15px;
   padding-left  : 15px;
}

p.title {
   font-size       : medium;
   font-family     : arial;
   font-weight     : bold;
   padding-right   : 15px;
   padding-left    : 15px;
   text-decoration : underline;
}

p.data {
   font-size     : medium;
   font-family   : arial;
   padding-right : 15px;
   padding-left  : 15px;
}

p.footer_title {
   font-size       : small;
   font-family     : arial;
   font-weight     : bold;
   padding-right   : 15px;
   padding-left    : 15px;
   text-decoration : underline;
}

p.footer_data {
   font-size     : small;
   font-family   : arial;
   padding-right : 15px;
   padding-left  : 15px;
}

li.category {
   list-style-type : disc;
   font-size       : medium;
   font-family     : arial;
   padding-left    : 15px;
}


/****************************************************************************** 
 * styles for bootstrap, primarily the navbar
 *****************************************************************************/

/* navbar */
.navbar-inverse {
   background-color: #4970b7;
   border-color    : #F8F8F8;
}

/* title */
.navbar-inverse .navbar-brand {
   color : #EEEEEE;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
   color : #FFFFFF;
}

/* link */
.navbar-inverse .navbar-nav > li > a {
   color : #EEEEEE;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
   color : #FFFFFF;
}

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus {
   color            : #FFFFFF;
   background-color : transparent;
}

.navbar-inverse .navbar-nav > .open > a, 
.navbar-inverse .navbar-nav > .open > a:hover, 
.navbar-inverse .navbar-nav > .open > a:focus {
   background-color : transparent;
   color            : #EEEEEE;
}

/* caret */
.navbar-inverse .navbar-nav > .dropdown > a .caret {
    border-top-color    : #EEEEEE;
    border-bottom-color : #EEEEEE;
}
.navbar-inverse .navbar-nav > .dropdown > a:hover .caret,
.navbar-inverse .navbar-nav > .dropdown > a:focus .caret {
    border-top-color    : #FFFFFF;
    border-bottom-color : #FFFFFF;
}
.navbar-inverse .navbar-nav > .open > a .caret, 
.navbar-inverse .navbar-nav > .open > a:hover .caret, 
.navbar-inverse .navbar-nav > .open > a:focus .caret {
    border-top-color    : #FFFFFF;
    border-bottom-color : #FFFFFF;
}

/* mobile version */
.navbar-inverse .navbar-toggle {
    border-color: #DDD;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #FFFFFF;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #FFFFFF;
    }
}