a:link {text-decoration: underline; color:#000000;}
a:visited {text-decoration: underline; color:#000000;}
a:hover {text-decoration: underline; color:#bfbfbf; opacity:0.5;}
a:active {text-decoration: underline; color:#000000;}
  



/* Index CSS */


body{
    overflow-x:hidden;
    overflow-x: clip;
    max-width: 100%;
    margin:0px;
    padding:0px;

}


#header{
    position:fixed; 
    background-color:white; 
    left:0px; 
    top:0px; 
    padding:0;
    margin:0;
    width:100%; 
    margin-left:0px;
    margin-right:0px;
    z-index:1;
    height:100px;
    box-shadow: 0px 0px 10px 1px #999999;
}
            
@media only screen and (max-width: 450px) {
  #header {
    width:100%;
    height:100px;

  }
}

#headerimg{
    height:99px;
    z-index:-1;
    text-decoration:none;
}
            
@media only screen and (max-width: 450px) {
  #headerimg {
    width:80%;
    

  }
}

#featurestorycontainer {
    width:100%;
}

@media only screen and (max-width: 450px) {
  #featurestorycontainer {
    max-width: 450px;
    max-height: 650px;
    overflow:hidden;
    display:block;
  }
}

#featurestoryimage{
    width:100%;
    display:inline;
}
            
@media only screen and (max-width: 450px) {
  #featurestoryimage {
    display:none;

  }
}

#featurestoryimagecropped{
    display:none;
}
            
@media only screen and (max-width: 450px) {
  #featurestoryimagecropped {
    display:inline;
    width:100%;
    opacity:1;

  }
}

#adspace{
    width:100%;
    display:inline;
}
            
@media only screen and (max-width: 450px) {
  #adspace {
    display:none;

  }
}

#adspacemobile{
    display:none;
}
            
@media only screen and (max-width: 450px) {
  #adspacemobile {
    width:100%;
    display:inline;
  }
}



#featurestorytext{
    position:absolute; 
    top:150px; 
    left:100px;
    background-color:#000d1a; 
    color:white; 
    opacity:.9; 
    width:350px; 
    padding:45px; 
    box-shadow: -5px 5px 5px #999999;
}
            
@media only screen and (max-width: 450px) {
  #featurestorytext {
      width:70%;
      margin-left:10%;
      margin-right:15%;
      top:18%;
      right:-5%;
      background-color:#000d1a;  
      padding:5%;
      color:white;
      
    

  }
}


#foodwhisperscinema  { 
    width:30%;
}

@media only screen and (max-width: 450px) {
  #foodwhisperscinema  {
    width:90%;
  }
   
} 




#storycreditline{
    margin-top:0px; 
    margin-bottom:5%; 
    text-align:center;
}
            
@media only screen and (max-width: 450px) {
  #storycreditline {
    width:90%;
    padding-left:5%;
    padding-right:5%;
    

  }
}


#storyimage  { 
    width:80%; 
    margin-left:10%;
    margin-right:10%;
}

@media only screen and (max-width: 450px) {
  #storyimage  {
    width:100%;
    margin-left:0%;
    margin-right:0%;
  } 
}



#storyptags  { 
    width:60%; 
    margin-left:20%;
    margin-right:20%;
}

@media only screen and (max-width: 450px) {
  #storyptags  {
      width:90%; 
    margin-left:5%;
    margin-right:5%;

  }
    
}

#storytext  { 
    margin-left:5%;
    margin-right:5%;
    width:45%; 
    float:right;
 
}

@media only screen and (max-width: 450px) {
  #storytext  {
      float:none;
      width:95%; 
      margin-left:2.5%;
      margin-right:2.5%;
  }
    
}


#floatingtext  { 
    margin-top:3%; 
    margin-bottom:3%; 
    width:75%; 
    margin-left:12.5%; 
    margin-right:12.5%;
 
}

@media only screen and (max-width: 450px) {
  #floatingtext  {
    width:90%; 
    margin-left:5%; 
    margin-right:5%;
  }
    
}

#linkimage  { 
    width:45%; 

}

@media only screen and (max-width: 450px) {
  #linkimage  {
      width:100%;
      margin-left:0%; 
      margin-right:0%;
  } 
}

#communitypage {
text-align:center; 
font-size:20px; 
left:0px; 
width:90%; 
margin:5%;  
padding-top:5%; 
padding-bottom:5%;
    
}

            
@media only screen and (max-width: 450px) {
  #communitypage  {
      margin-top:25%;
      margin-bottom:25%;
} 




#footer {
    background-color:white;
    color: black;
    position: relative;
    width:100%;
    bottom: 0px;
    margin-bottom:0px;
    z-index:0;
    margin-top:5%;
    margin-left:0px;
    margin-right:0px;
} 



#spilledtakeoutimg {
width:50%;
margin-top:5%;
margin-bottom:5%;
    
}

            
@media only screen and (max-width: 450px) {
  #spilledtakeoutimg  {
      width:90%;
      margin-left:5%; 
      margin-right:5%;
  } 
}          
            

    
          










/* Authors Page */


#authorsbio  { 
    
    margin-left:35%;
    margin-right:35%;
    margin-bottom:5%; 
    width:30%;
}

@media only screen and (max-width: 450px) {
  #authorsbio  {
    width:90%; 
    margin-left:5%; 
    margin-right:5%; 
  }
   
}


/* Contributors Page */


#contributorsleftcolumn  { 
    width:45%; 
    margin-bottom:100px; 
    float:left;
}

@media only screen and (max-width: 450px) {
  #contributorsleftcolumn  {
    float:none;
    width:90%;
  }
   
}

#contributorsrightcolumn  { 
    width:45%; 
    margin-bottom:100px; 
    float:right;
}

@media only screen and (max-width: 450px) {
  #contributorsrightcolumn  {
    float:none;
    width:90%;
 
  }
   
}




/* Side Navigation Bar */

#navigationbutton {
    
    
}
     
@media screen and (max-width: 450px) {
  #navigationbutton { margin-top:10px;}
}
    
}


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  z-index:3;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
  transition: 0.3s;

}
        
.sidenav no {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
  transition: 0.3s;
  opacity: .5;

}

.sidenav a:hover {
  color: #666666;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px; 

}


        
@media screen and (max-width: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}






/* Community Page  */

#communityimage{
    width:100%;
    z-index:-100;
    display:inline;
    opacity:.4;
}
            
@media only screen and (max-width: 450px) {
  #communityimage {
    display:none;

  }
}


#communityimagecropped{
    display:none;
}
            
@media only screen and (max-width: 450px) {
  #communityimagecropped {
    display:inline;
    width:100%;
    opacity:.4;

  }
}


/* Careers Page  */

#careersimage{
    width:100%;
    z-index:-100;
    display:inline;
    opacity:.3;
}
            
@media only screen and (max-width: 450px) {
  #careersimage {
    display:none;

  }
}


#careersimagecropped{
    display:none;
}
            
@media only screen and (max-width: 450px) {
  #careersimagecropped {
    display:inline;
    width:100%;
    opacity:.3;

  }
}



#careersbackground  { 
    position:absolute; 
    top:150px;
    width:60%; 
    margin-left:20%; 
    margin-right:20%; 
    font-size:25px;
}

@media only screen and (max-width: 450px) {
  #careersbackground  {
    width:90%; 
    margin-left:5%; 
    margin-right:5%; 
    font-size:25px;
  }
   
} 




/* About Page */

#aboutimage{
    width:100%;
    z-index:-100;
    display:inline;
    opacity:.3;
}
            
@media only screen and (max-width: 450px) {
  #aboutimage {
    display:none;

  }
}


#aboutimagecropped{
    display:none;
}
            
@media only screen and (max-width: 450px) {
  #aboutimagecropped {
    display:inline;
    width:100%;
    opacity:.3;

  }
}



#aboutbackground  { 
    position:absolute; 
    top:150px;
    width:60%; 
    margin-left:20%; 
    margin-right:20%; 
    font-size:25px;
}

@media only screen and (max-width: 450px) {
  #aboutbackground  {
    width:90%; 
    margin-left:5%; 
    margin-right:5%; 
    font-size:25px;
  }
   
} 


#aboutlogo  { 
    width:75%;
}

@media only screen and (max-width: 450px) {
  #aboutlogo  {
    width:90%;
  }
   
} 





/* Join our mailing list form css */

input[type=text], select {
  width: 55%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  background-color: black;
  color: white;
  padding: 12px 18px;
  margin: 8px 0;
  border: solid;
  border-width: 1px;
  border-color:black;
  cursor: pointer;
  width:100px;
}

input[type=submit]:hover {
  background-color: #999999;
}

#formdiv {
  margin-top:2%;
}

#maillogo {
  width:150px;
}

@media screen and (max-width: 450px) {
  #maillogo { 
      width:75px;
    }
}



