* {
  box-sizing: border-box;
}

body             { margin: 0;
                   font-family: 'Times New Roman', Georgia, Garamond, serif; }
header           { padding:          1px;
                   text-align:       center;
                   background-color: #FFFFFF; }

.main-title      { font-size:        4em;
                   font-weight:      600;
                   text-align:       center;
                   color:            maroon; }
.sub-title       { font-size:        1em;
                   text-align:       center;
                   color:            blue;  }

.top-menu-bar    { padding-top:      10px;
                   padding-bottom:   10px;
                   display:          flex;
                   background-color: #800000; }
.top-menu-holder { margin:           auto;
                   width:            800px;   }
.top-menu-bar a  { padding-top:      10px;
                   padding-bottom:   10px;
                   padding-left:     20px;
                   padding-right:    20px;
                   color:            yellow;
                   text-decoration:  none;
                   text-align:       center;  }

.top-menu-bar a:hover {
  background-color: orange;
  color: tomato;
}

.row {  
  display: flex;
  flex-wrap: wrap;
}
.lesson-holder {
  width: 50%;
  background-color: #FFF;
  padding: 10px;
}

.carder {  
  padding: 10px;
    border: 1px solid #808080;
    background-color: antiquewhite
}

.side {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
}

.left-side {
  flex: 25%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 60%;
  background-color: white;
  padding: 20px;
}

.SectSide1 {
  width: 100%;
  padding: 20px;
    border: 1px solid #000;
  background-image: url('../Images/SectSide1.png');
}

.SectSide2 {
  width: 100%;
  padding: 20px;
    border: 1px solid #000;
  background-image: url('../Images/SectSide2.png');
}

.Sections-Common {
    width:            100%;
    padding:          20px;
    height:           200px;
    border:           1px solid #000;
}

.Section01 { background-image: url('../Images/Section01.png'); }
.Section02 { background-image: url('../Images/Section02.png'); }
.Section03 { background-image: url('../Images/Section03.png'); }
.Section04 { background-image: url('../Images/Section04.png'); }
.Section05 { background-image: url('../Images/Section05.png'); }
.Section06 { background-image: url('../Images/Section06.png'); }
.Section07 { background-image: url('../Images/Section07.png'); }
.Section08 { background-image: url('../Images/Section05.png'); }
.Section09 { background-image: url('../Images/Section05.png'); }
.Section10 { background-image: url('../Images/Section05.png'); }
.Section11 { background-image: url('../Images/Section05.png'); }
.Section12 { background-image: url('../Images/Section05.png'); }
.Section13 { background-image: url('../Images/Section05.png'); }
.Section14 { background-image: url('../Images/Section05.png'); }
.Section15 { background-image: url('../Images/Section05.png'); }
.Section16 { background-image: url('../Images/Section05.png'); }
.Section17 { background-image: url('../Images/Section05.png'); }
.Section18 { background-image: url('../Images/Section05.png'); }
.Section19 { background-image: url('../Images/Section05.png'); }
.Section20 { background-image: url('../Images/Section05.png'); }

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

@media (max-width: 900px) {
  .row, .top-menu-bar {   
    flex-direction: column;
  }
header        { padding:          0; }
.lesson-holder {
  width: 100%;
}
}