body {background: linear-gradient(to right, #272727 , #ffffff, #272727);}

div#logo {background-image: image(img/foodfed-logo_circle200.png)}


span#brand-title {
    font-size: 30px;
    font-family: sans-serif;
    font-weight: 100;
/** font-family: 'Calligraffitti', cursive; **/
    vertical-align: baseline;
    line-height: 20px;
}



@media only screen and (max-width: 1032px) {body {background:grey;}}

/** all fonts **/
p {font-family: sans-serif; margin: 2%; font-family: 'Raleway', sans-serif;}
h1 {font-family: sans-serif; margin: 0% 2% 0% 2%; font-family: 'Raleway', sans-serif;}
h2 {font-family: sans-serif; margin: 2%; font-family: 'Raleway', sans-serif;}
h3 {font-family: sans-serif; margin: 0% 2% 0% 2%; font-family: 'Raleway', sans-serif;}
ul#opening-hrs {font-family: sans-serif;}
ul.task-list {font-family: sans-serif; margin: 2%;}
ul#footer-info li  {font-family: sans-serif; font-size:.8em;}

a.url {display: block; background-color: black; margin: 4%; padding: 2%; border-radius: 5px; text-align: center; color: white; float: right;}

a.url:hover {background-color: #5a5a5a;}


h2.employment-title {font-family: 'Raleway', sans-serif;; margin: 30px 0px 11px 2%; padding: 0px 0px 0px 0; border-bottom: dotted 1px #8a8989; width: 94%;}


ul.list-simple {font-family: sans-serif; font-size: 14px; float: right; width: 50%;}
ul.list-simple li {margin-bottom: 7px;}

ul.employment-list span.date {float: right; display: inline-block; padding: 0px; font-size: .8em; margin: 0px 19px 0 0;}

ul.other-list span.date {
    float: right;
    display: block;
    padding: 3px;
    font-size: .8em;
    margin: 2px;
    width: 103px;
    background-color: #f8f2fb;
    text-align: center;
    border-radius: 7px;
    border: 1px dotted #c6c6c6;     
}



/** all fonts end **/








/** promo-image **/
ul.promo-image {margin: 0px; padding: 3px 0px 8px 3px;}
ul.promo-image li:hover {opacity: 1;}


ul.promo-image li {opacity: .6; height:100%; width: 98%; display: inline-block; margin: 1%; border-radius: 9px; box-shadow: 0px 2px 6px 1px rgba(95, 95, 95, 0.75); background-repeat: no-repeat; background-position: right; background-size: contain;}

/** backup to keep
ul.promo-image li {opacity: .6; height: 165px; width: 20%; display: inline-block; margin: 1%; border-radius: 9px; box-shadow: 0px 2px 6px 1px rgba(95, 95, 95, 0.75); padding: 1%;     color: black;}

@media only screen and (max-width: 555px) {ul.promo-image li {opacity: .6; height: 165px; width: 45.3%; display: inline-block; margin: 1% 0% 1% 1%; border-radius: 9px; box-shadow: 0px 2px 6px 1px rgba(95, 95, 95, 0.75);}}

@media only screen and (max-width: 1300px) {ul.promo-image li {opacity: .6; height: 86px; width: 78%; display: inline-block; margin: 1%; border-radius: 9px; box-shadow: 0px 2px 6px 1px rgba(95, 95, 95, 0.75);}} 
**/











ul.promo-image li.promo-a {background-image: url("img/table-idea.png");}
ul.promo-image li.promo-b {background-image: url("img/rwd.png");}
ul.promo-image li.promo-c {background-image: url("img/original-code.png");}
ul.promo-image li.promo-d {background-image: url("img/google-stats.png");}
ul.promo-image li.promo-f {background-image: url("img/sky-beautiful.png");}
ul.promo-image li h2{}
ul.promo-image li p{}
ul.promo-image img.promo{}
/** promo-image end **/




/** Task list **/
ul.info-list {margin: 0 0 0 0;width: 92%;margin: 9px auto; padding: 0px;}
ul.info-list li {margin: 0 0 12px 0; padding: 0px;}
ul.task-list {margin: 1px 0px 0px 40px; padding: 0 0 0 0px;}
ul.task-list {}
ul.task-list li {background-color: #ffffff; height: 1.5em; padding: 5px; width: 97%; height: 2em; border-bottom: dotted 1px grey; list-style-type: upper-latin;}

ul.task-list li span.task-name {display: block; float: left; font-weight: bold;}
ul.task-list li span.date-set {display: block; float: right;}
ul.task-list li.description {display: block; height: 1.5em; width: 89%; border-bottom: dotted 1px #f1f1f1; border-right: dotted 1px grey;}

ul.task-list li.outcome {display: block; height: 1.5em; width: 89%; border-bottom: dotted 1px grey; border-right: dotted 1px grey; margin-bottom: 14px;}
/** Task list **/


/** Header **/
div#header-wrap {min-height: 100px;}
div#site-wrap {width: 66%; margin: 9px auto; box-shadow: 0px 2px 29px 2px rgba(0, 0, 0, 0.3); border-radius: 17px; border: solid 1px #bbbbbb; background-color: #f8f2fb;}


img.info-image-rwd {width: 45%; float: left; margin: 0 2% 2% 2%;}

img.info-image {width: 80%;}



img.site-image {float: left; margin: 0% 2% 0% 2%; width: 5.3%; box-shadow: 0px 2px 24px 2px rgba(6, 32, 33, 0.15); border-radius: 9px; opacity: 0.5;}
img.site-image:hover { opacity: 1;}


img.site-image-stretch {margin: 1% 3% 1% 2%; float: right; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 3px; max-width: 50%; height: auto;}

img.site-image-small {float: left; margin: 0 2%; width: 7%; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 3px; opacity: .9;}

div#logo-small {float: left;}
img#logo {width: 80px; margin: 2%;}

@media only screen and (max-width: 1300px) {div#site-wrap {min-width: 300px;  width:100%; margin: 9px auto;}}
/** Header End **/

    
/** footer **/
img#footer-img {width: 4%; float: left; margin: 1%; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 6px; opacity: .9;}

img#footer-img-right {width: 4%; float: right; margin: 1%; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 6px; opacity: .9;}

@media only screen and (max-width: 650px){img#footer-img-right{display:none;}}

div#footer-wrap {height: 100%; border-radius: 7px; margin: auto; width: 96%; display: table; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15);}

@media only screen and (max-width: 700px){div#footer-wrap {display: none;}}



div#all-footer-ul {margin: auto; width: 339px;}

@media only screen and (max-width: 400px) {div#all-footer-ul {margin: 0px; width: 335px;}}

ul#footer-info:nth-child(1) {float: left; list-style-type: none; padding:00px; border-left: 0px solid #b7b7b7; margin: 2% 0px 2% 10px;}

ul#footer-info {float: left; list-style-type: none; padding: 00px; border-left: 1px solid #b7b7b7; margin: 2% 0px 2% 10px;}

@media only screen and (max-width: 400px) {ul#footer-info {border-bottom: 1px solid #b7b7b7; border-left: 0px solid #b7b7b7; margin: auto; width: 160px;}}

@media only screen and (max-width: 400px) {ul#footer-info {float: left; list-style-type: none; padding: 00px; border-left: 0px solid #b7b7b7; margin: 2% 0px 2% 30px;}}

ul#footer-info li {margin: 0 0 0 12px;}

/** footer end **/



/** food-info start **/

div#food-info {width: 78%; height: 96%; margin: 2% 11%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 12px 2px rgba(6, 32, 33, 0.05); border-radius: 1%; padding: 1% 0% 1% 0%; border-bottom: dotted 1px #c8c6c6; border-radius: 7px;}



@media only screen and (max-width: 1300px) {div#food-info {width: 80%; margin: 2% 10%;}}
@media only screen and (max-width: 600px) {div#food-info {width: 98%; margin: 13% 1%;}}

div#food-info:hover {}

div#food-info-left {float:left; width: 48%; height: 100%; margin: 1% 1%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 1%;}

div#food-info-right {float:right; width: 48%; height: 100%; margin: 1% 1%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 1%;}

@media only screen and (max-width: 800px) {div#food-info-left {width: 95%; height: 100%; margin: 1% 1%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 1%;}}

@media only screen and (max-width: 800px) {div#food-info-right {width: 95%; height: 100%; margin: 1% 1%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 1%;}}

div#food-info-right-single {width: 32%; float: right; height: 100%; margin: 1% 1%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15); border-radius: 1%;}

div#food-info-left-double {width: 64%; float: left; height: 100%; margin: 1% 1%; background-color: #eaeae9; font-family: monospace; box-shadow: 0px 2px 29px 2px rgba(6, 32, 33, 0.15);
border-radius: 1%;}


/** food-info end **/




/** style extras  **/
.line-space {width: 80%; background-color: #bfbfbf; height: 1px; margin: 2% auto; box-shadow: 0px 2px 6px 1px rgba(187, 193, 195, 0.75);}

.line-space-below {width: 80%; background-color: #bfbfbf; height: 1px; margin: 1% auto 1% auto; box-shadow: 0px 2px 6px 1px rgba(187, 193, 195, 0.75);}

.space {width: 80%; height: 1px; margin: 2% auto;}

/** style extras end **/


/** open hours  **/
ul#opening-hrs {float: right; list-style-type: none; padding: 0px; margin: 2%;}
ul#opening-hrs li {display: block; height: 1.1em;  font-size: .8em;}
ul#opening-hrs li span {font-weight: 600;width: 85px; display: block;float: left; text-align: right; margin-right: 8px;}
/** open hours end **/


/** main navigation  
.nav {width: 608px;  margin: 0px 0px 3% 0px;} @media only screen and (max-width: 900px) {.nav {width: 96%;}} 
**/

/** 
@media only screen and (max-width: 900px) {.nav ul {list-style: none; background-color: #5a5a5a; padding: 0; margin: 0; border-radius: 9px; box-shadow: aquamarine; box-shadow: 0px 2px 6px 1px rgba(50, 50, 50, 0.75);}
**/


/** main nav **/

img.home-icon {width: 25px; background-color: #84939b; margin: 9px 0px 0 5px;} 
img.home-icon:hover {background-color: #9daeca;}  

.nav ul {text-transform: uppercase; font-size: .8em; font-family: 'Raleway', sans-serif; list-style: none; background-color: #353535; padding: 0; margin: 0; border-radius: 3px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;box-shadow: aquamarine; box-shadow: 0px 2px 6px 1px rgba(50, 50, 50, 0.75); width:623px;}

@media only screen and (max-width:700px) {.nav ul {list-style: none; background-color: #5a5959; padding: 0; margin: 0 6px 14px 8px; border-radius: 3px; box-shadow: aquamarine; box-shadow: 0px 2px 6px 1px rgba(50, 50, 50, 0.75); width:240px}}


.nav li {line-height: 34px; text-align: left; font-size: 1.4em; display: inline-block; margin: 0 0% 0 3%; border-left: dotted 1px #484242; vertical-align: middle;}

@media only screen and (max-width: 700px) {.nav li {font-size: 1.2em; text-align: left; font-size: 1.2em; display: block; margin: 0 0% 0 3%; width:218px;}}

@media only screen and (max-width: 700px) {.nav li a {border-bottom:dotted 1px #6d6b6b; width: 85%; }}

/** 
@media only screen and (max-width: 900px) {.nav li {display: block; }}}
**/

.nav a {text-decoration: none; color: #9daec1; display: block; padding-left: 15px; width: 85%; width:110%;}

.nav a:hover {color:white;}

/* Sub Menus */
.nav li li {font-size: .8em;}

/* Sub Menus */
.nav li ul {position: absolute; display: none; width: inherit;}







/* Sub Menus Last Child attribute adjusted for media selectors.
.nav li ul li:last-child a{color:#5a5959;background-color:#9f9f9f;width:58%;margin:0 0 0 78px;border-radius:10px;padding:0 5px 0 8px;height:31px;}

.nav li ul li:last-child a:hover {background-color:#b8b8b8;} */

/* ============================================= adjusted for media selectors.*/
@media only screen and (max-width: 700px) {.nav li ul li:last-child a{color:#5a5959;background-color:#9f9f9f;width:58%;margin:0 0 0 78px;border-radius:10px;padding:0 5px 0 8px;height:31px;}}

@media only screen and (max-width: 700px) {.nav li ul li:last-child a:hover {background-color:#b8b8b8;}}
/* ============================================= adjusted for media selectors.*/


/* this need a specific class. */

@media only screen and (max-width: 700px) {.nav li ul.drop-down {position: relative; width: 207px; background-color: #737373;}}
/* this needs to be toggled by the class related to the selected li  - with a global jQuery script. */

.nav li ul {display: block; z-index: 2;}
/* .nav li:hover ul {display: block; z-index: 2;} */

.nav li ul li {display: block; padding: 0px; margin: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; width: 187px;}

.nav li ul li a {text-decoration: none; color: #9daec1; display: block; padding-left: 7px; border-bottom: dotted 1px #908e8e; padding-left:5px; width:100%;}