/******************************************************/
/*                                                    */
/*  Header: Backgrounds, titles, menu bar, search     */
/*                                                    */
/******************************************************/

header
{
   position: fixed;
   top: 0;
   left: 0;

   width: 100%;
   height: 100px;

   background: rgb(230, 230, 230); /* For browsers that don't support gradients */
   background: linear-gradient(to bottom right, rgb(230, 230, 230), rgb(255, 255, 255));
   box-shadow: 0 5px 10px -8px rgb(182, 182, 182);

   z-index: 1;
}

header .photo1
{
   background-image: url("../photos/kayak.jpg");
   background-size: contain;
   position: fixed;
   top: 5px;
   left: 5%;
   height: 90;
   width: 251;
   box-shadow: 0 0 10px 10px rgb(235, 235, 235) inset, 0 0 5px 5px rgb(235, 235, 235);
   border-radius: 5px;
   z-index: -1;
}

header .photo2
{
   background-image: url("../photos/anorak.jpg");
   background-size: contain;
   position: fixed;
   top: 5px;
   right: 5%;
   height: 90;
   width: 179;
   box-shadow: 0 0 10px 10px rgb(240, 240, 240) inset, 0 0 5px 5px rgb(240, 240, 240);
   border-radius: 5px;
   z-index: -1;
}

.splash
{
   display: inline-block;
   width: 100%;
}

.splash h1
{
   text-align: center;
   margin-top: 15px;
   text-shadow: 0 0 10px white;
}

.menu-bar
{
   display: inline-block;
   width: 100%;
   text-align: center;
}

.menu-bar li
{
   text-align: left;
}

.menu-bar nav
{
   display: inline-block;
}

/******************************************************/
/*                                                    */
/*  Main area: TOC, Article                           */
/*                                                    */
/******************************************************/

.article-menu
{
   position:fixed;
   top: 100px;
   left: 0;
   bottom: 0;
   width: 20%;
   overflow: auto;
}

article
{
   position: relative;
   top: 100px;
   left: 20%;
   min-width: 700px;
   width: 60%;
   padding: 30px;
   box-sizing: border-box;
   min-height: 75%
   min-height: calc(100% - 80px);
}

.article-copyright
{
   text-align: center;
   padding: 0;
   margin: 0;
   line-height: 110%;
   font-size: 10pt;
}

h1
{
   font-size: 24pt;
   margin-bottom: 10pt;
}

h2
{
   font-size: 18pt;
   margin: 8pt 0;
}

h3
{
   font-size: 16pt;
   margin: 6pt 0;
}

p
{
   font-size: 14pt;
   margin-bottom: 10pt;
}

img
{
   margin: 5px;
}

.right
{
   float: right;
}

.prevnext
{
   position: relative;
}

.prev
{
   display: inline-block;
   position: relative;
   top: 0;
   left: 0;
   padding: 0;
   font-size: 14pt;
}

.next
{
   display: inline-block;
   position: absolute;
   top: 0;
   right: 0;
   padding: 0;
   font-size: 14pt;
}

/******************************************************/
/*                                                    */
/*  Footer: Contact and copyright                     */
/*                                                    */
/******************************************************/

footer
{
   position: relative;
   top: 100px;
   left: 20%;
   min-width: 700px;
   width: 60%;
   height: 25px;
   box-shadow: 0 5px 10px -8px rgb(122, 122, 122) inset;
}

.contact
{
   left: 10px;
}

.page-copyright
{
   right: 10px;
}