@charset "UTF-8";
html {
  box-sizing: border-box;
  background: white;
}
* {
  box-sizing: inherit;
}
body {
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:100%;
  width:100%;}

p {
    padding-left: 10px;}

h1 {
  text-align:center;
  font-family:"Helvetica Neue","Lucida Sans Unicode", "Lucida Grande", sans-serif;}

h3 {
    padding: 5px;}

img {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 5px;}

iframe{
    float:right;
    width:73%;
    height:1000px}

.table-box {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-right: 5px;
  margin-bottom: 5px; }

table.asst-table {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 20px 10px; }
  table.asst-table td {
    white-space: nowrap;
    word-break: break-all; }

table {
  border-collapse: collapse;
  width: 90%;}

th,td {
  padding:2px;
  text-align: left;}

th {
  font-size: 110%;}

a {color: #4459e2;
	text-decoration: none;}
  
.side{
    float:left;
    width:25%;}
nav ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex-wrap;
	justify-content: center;
}

ul {
    position: relative;
    display: inline-block;}

ul ul {
    display: none;
    position: absolute;
    left: 0;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;}

li:hover ul {
    display: block;
    margin:0;
    padding: 0;}

.links li {
    display:inline;
    position: relative;
    text-align: left;
    padding:12px;
    cursor:pointer;}

.links li li {
    display: block;
    color: #a6b9d8;}

.links {
    text-align: center;
    width:50%;
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
    margin-left: 25%;
    background-color: grey;
    color: white;}

#main {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding-left: 50px;
  padding-top: 125px;
  height: 100%;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}

.main {
    position: relative;
    left: 310px;
    width: calc(100% - 335px)}

.post {
    padding:5px;
    border-radius: 30px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 4px 13px 0 rgba(0, 0, 0, 0.39);*/}

.pic-post{
    padding:0px;}
.pic{
    padding:0px;}

.header {
    position: relative;
    left: 310px;
    /*width: calc(100% - 365px);*/}

a:link {   /* unvisited link */
    color: #66686b;
    text-decoration: none;}

a:visited {
    color: #66686b;
    text-decoration: none;}

a:hover {  /* mouse over link */
    color: black;
    text-decoration: none;}

a:active { /* selected link */
    color: blue;
    text-decoration: none;}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;}

.pic img {
    width: 100%;
    border-radius: 30px;}

/*p {margin-left: 20px}*/

/*Flex Layout*/
#container-heading{ 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
.box-heading{
	width: 15%;
	flex: 1 0 0%;
}
.box1{
	flex: 1;
}
.box2{
	flex: 9 auto;
}
#container-main{ 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
.box-main{
	width: 25%;
	flex: 1 0 0%;
}
#container-aside{ 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.box-aside{
	width: 33%;
	flex: 1 0 0%;
	text-align: center;
}

html {margin-left: 20px; margin-top:20px; margin-right:20px; background: white}