@font-face {
  font-family: OldStyle;
  src: url(webfonts/oldstyle/OLDSH___.TTF);
}

@font-face {
  font-family: OldStyleItal;
  src: url(webfonts/oldstyle/OLDSIH__.TTF);
}

@font-face {
  font-family: OldStyleCaps;
  src: url(webfonts/oldstyle/OLDSSCH_.TTF);
}

@font-face {
  font-family: BookmanBoldItal;
  src: url(webfonts/bookmanoldital.ttf);
}

strong {
  font-family: 'OldStyleCaps';
  font-size: 18px
}


a { 
  font-family: 'OldStyle', Georgia, serif; 
  font-size: 16px;
  text-decoration: none;
  color: black;
}


body{
    background-image: url("hop-vine.png");
    background-repeat: no-repeat;
    background-position: right;
    background-color: #f7f1e1;
    background-size: 25%;
}

#container{
	width: 100%;
	height:90vh;
}

#sidebar {
	width:25%;
	float:left;
	height:90vh;
	position:relative;
}

#menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#body-container{
	width:75%;
	/*margin-left: 25%;*/
  float:left;
	height:90vh;
	position:relative;
}

#content {
  position: absolute;
  top: 50%;
  margin-left:5%;
  margin-right:40%;
  /*left: 50%;*/
  transform: translateY(-50%);
  font-family: 'OldStyle', Georgia, serif; 
  font-size: 16px;

}

#foot-container {
  text-align: center;
  font-family: 'OldStyleItal';
  width: 100%;
  float:left;
}

@media screen and (max-width: 400px) {
   #sidebar { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    height: 75vh ;  
 	}

  	#body-container {
  		margin-left: 0;
  		width: 100%;
      height: 25vh;
  	}

    #content{
      height: 30vh;
    }
}