@charset "utf-8";

/*

   Table Times Tabletop Layout Styles
   Author: Koh Heng Woon
   Date:   7 May 2019
   
   Filename: Layout.css

*/
body {
    margin: 0 auto;
    width: 100%;
	max-width: 1020px;
    min-width: 640px;
 }

 /* Header */

body > header{ 
	margin: 0; 
    width: 100%;
    padding: 0 0 0 0.3em;
}

body > header > img { /*Logo at the header*/
    margin: 0.5em 20px 0 20px;
    display: block;
    float: left;
}

/*Navigation*/
#searchbar{
    width: 80%; /*relative to the nav box it's in*/
}

#side > button{
    width: 17%;
    background: none;
    border: none;
}

body > nav#side {
    position: sticky; /*Follows based on scroll*/
    top: 5%; /*Distance from top of screen*/
    float: left;
    width: 20%;	
    margin: 2.5% 1% 0 1.5%; /*Outside box*/
    padding: 10px; /*Inside box*/
}

/*Blog post*/
body > article.post {
    width: 71%;
    margin: 2.5% 1.5% 1.5% 27.5%;
    padding: 20px 30px 30px 30px;
}

.cover{ /* Cover images for posts are slightly wierd and hence is a bit more standardised with this.*/
    min-width: 70%;
    max-width: 90%;
}

.postcontent{ /* All the stuff in blog posts*/
    margin-top: 2%;
    padding: 2%;
}

/*Contact*/
input, textarea, select, button { /*Make it standardised width*/
    width : 70%;
  }

.container > h2, .container > p{
    padding-left: 20px;
}

fieldset{
    margin-top: 10px;
    margin-bottom: 5px;
    border: 0px;
    
}
/*Footer*/
footer{
    clear: top;
    float: bottom;
	max-width: 1020px;
    min-width: 640px;
    padding: 3%;
    bottom: 0px;
    margin-top: 3%;
}

nav#leftfoot{
    float: left;
    padding: 5px;
    width: 45%;
}

nav#rightfoot{
    width: 45%;
    padding: 5px;
    margin: 0 0 0 50%;
}

#rightfoot > img{
    height: 60px;
}