/* Minimal CSS Reset */
* {box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit;}
body {font-family: arial, helvetica, sans-serif;font-size: 16px;}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
}
ol, ul {list-style: none;}
img {max-width: 100%; height: auto;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, main, nav, section {
  display: block;
} 
/* End reset */

@font-face {
   font-family: myFirstFont;
   src: url(../include/ibm_vga8.ttf);
}

body {
  background: #ddd;
  font-family: myFirstFont;
   color: #666;
}


/* === structure === */
.wrapper {
  margin-top: 20px;
  width: 96%;
  max-width: 1000px;
  min-width: 320px;
  margin: 0 auto;
}
.header {
   background: #7093DB;
   color: #FF7F00;
}

.nav {
   background: #039;
   color: #C92121;
   font-family: myFirstFont;
}     
.container {
  margin-right: -250px;
  float: left;
  width: 100%;
  background: url(../images/side-bg2.png) repeat-y;
  background-position: 100% 0;
}

.content {
  margin-right: 250px; /* 20px added for center margin */
  background: white;
  padding: 10px 0;
}

.sidebar {
  width: 250px;
  float: left;
  padding: 10px 0;
  font-size: 0.8em;
}
.footer {
  background:#33389C;
  color: #F3B207;
  text-align: center;
  padding: 10px 0;
  font-family: myFirstFont;
}


/* Navigation
======================================== */

.menu {
    margin: 0 auto 0;
    font-weight: normal;
}
.menu a {
    display: inline-block;
    padding: 5px 15px;
    color: white;
    text-decoration: none;
}
.menu a:visited {
   color: white;
   }
.menu a.current {
   color: #FF7F00;
   text-decoration: underline;
}   
.menu a:hover {
    color: #fff;
    background: #FF7F00;
    text-decoration: underline;
}

/* Navigation Media Queries
======================================*/

@media screen and (max-width: 640px) {
.menu a {
    display: block;
    border-bottom: 1px solid #DEBE91;
    text-align: center;
    }
}
/* ==== end navigation ==== */

 
/* === page styles === */
.clear {
  clear: both;
}
.header img {
   padding: 10px;  
} 
p {
   padding: 0 10px 1.5em 10px;
   line-height: 1.6em;
}
h1 {
   font-family: myFirstFont;
   font-weight: normal;
   font-size: 2.2em;
   padding: 0 0 0 10px;
   margin: 0;
   text-shadow:1px 1px #333;
}
.header a {
   color: #FF7F00;
   text-decoration: none;
}
.strapline {
   font-size: 1.5em;
   color: #fff;
   font-family: myFirstFont;
   padding: 0 0 0 10px;
   font-weight: normal;
   text-shadow:1px 1px #333;
   display: inline-block;
}   
h3, h4, h5 {
   font-family: myFirstFont;
   font-weight: normal;
   font-size: 1.5em;
   padding: 0.5em 0 1em 10px;
   color: #666;
}
.boxout {
   width: 25%;
   height: auto;
   border: 1px solid #999;
   display: block;
   font-size: 0.8em;
}
.right {
   float: right;
   margin: 5px 10px 10px 10px;
}
.left {
   float: left;
   margin: 5px 10px 10px 10px;
}
ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 25px;
}       

/* single responsive image with caption */
.img-cap {
   /* border: 1px solid #ddd; */
   padding: 0 10px 10px 10px;
   }
   .img-cap img {
   display: block;
   width: 100%;
   margin-bottom: 0.3em;
   }
   .img-cap span {
   display: block;
   font: 90% myFirstFont;;
   /* margin-left: 3%; */
   }
   .left {
   margin: 0 2% 0 0;
   float:left;
   }
   .right {
   margin: 0 0 0 2%;
   float:right;
   }
/* end single responsive image with caption */

/* === Structure media queries === */

@media (max-width: 640px) {
  .container {
    margin-right: 0px;
    /* margin-bottom: 20px */;
  }
  .content {
    margin-right: 0px;
    width: 100%;
  }
  .sidebar {
    width: 100%;
    border-top: 1px solid #999;
    background: #f0f0f0;
    clear: left;
  }
}