@font-face {
  font-family: NotoSG;
  src: url("../_fonts/NotoSansGothic.ttf") format("truetype");
}

body 
{
  background-color: gray;
  background-image: url("../_img/paper-texture.jpg");
  background-repeat: repeat;
  
  font-family: NotoSG;
  
  color: black;
}

/* 

The main blocks 

*/

/* layout stuff */

#top
{
  display: block;
  
  padding-left: 10%;
  padding-right: 10%;
  
  margin-top: 64px;
}

#main
{
  display: flex;
  flex-direction: row;
  
  
  min-height: 512px;

  padding-left: 10%;
  padding-right: 10%;
  
  margin-top: 12px;
}

/* page sections */

#navbar
{ 
  background-color: #FD5;
}

#sidebar
{
  width: 30%;
  
  background-color: #B7F;
  
  margin-right: 6px;
}

#container
{
  width: 70%;
  
  background-color: white;
  
  margin-left: 6px;
}

/* Blocks */

.block
{
  padding: 12px 12px 12px 12px;
  
  box-shadow: 10px 5px 15px black;
  
  border-radius: 6px;
  border: 3px solid black;
}

/* 

Paddings for sidebars 

*/

.sp-1
{
  padding-left: 8px;
}

.sp-2
{
  padding-left: 16px;
}

.sp-3
{
  padding-left: 24px;
}

.sp-4
{
  padding-left: 32px;
}

/* 

Margins for sidebars 

*/

.mt-1
{
  margin-top: 4px;
}

.mt-2
{
  margin-top: 8px;
}

/* 

Some typography

*/

.note
{
  font-size: 0.8em;
  color: gray;
}

.smol
{
  font-size: 0.8em;
}

/* 

Tables

*/

.table-display
{
  border-collapse: collapse;
  border: 2px solid black;
}

.table-display td, .table-display th
{
  border: 1px solid gray;
  min-width: 64px;
}

.table-display-section
{
  border: 2px solid black;
}

.table-display-hcol
{
  font-weight: bold;
}