/*  *****************************
    Summary not required in final
    **************************** */


.myName:after { 
  content: ": Layout    L-A-R    T-M-B ";
}


.stylesheet_summary:after { 
  content: "For line height: 24px/16px 1.5em \A
header  : \A
top     :aside-left      article    aside-right \A
middle  : \A
bottom  :aside-left      article    aside-right \A
footer  : \A
";
}

/* highlighting 
.top {
  outline: 2px solid blue;
} 
.bottom {
  outline: 2px solid red;
} 
.whitespace_banner {
  outline: 2px solid silver;
}

.article{ 
  outline-style: dotted;
}
*/

/*  *****************************
    Layout
    **************************** */

.article h1,
.article h2,
.article h3,
.article h4 {
  text-align: left;
}

/* custom */
/* using lock avoids effecting the size of the container */
 .whitespace_banner {
   padding-top: 7.0em;
 }
 .whitespace_nav {
   margin: 0;
   height: 7em;
 }
 
 .small_show {
   display: none;
 }


/* vertical */
.header {
  padding-top: 3em;
  height: 15em;
  width: 100%;
  background-color:black;    /* EXCEPTION */
}
.header>img {
  height: 83%;
}

.top,
.bottom {
  display: inline-block;
} 

.top {
  height:16.5em;
  padding-top: 3em;
}

.middle {
  clear: both;
}
.bottom {
  padding-top: 1.5em;
}

/* horizontal */
.aside_left { 
  float:left;
  padding-right:1em;       /* EXCEPTION */
  width:12em;
}

.article { 
  padding-left:1em;       /* EXCEPTION */
  padding-right:1em;       /* EXCEPTION */
  width: 41em; 
  text-align:justify;
}

.aside_right {
  padding-left:1em;       /* EXCEPTION */
  text-align:center;
  width:12em;
}

.top.article {
  float:left;
}

.bottom_switcher {
   float:left;
 }
 
.footer {
  width: 64em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}