<style>
* {
  margin: 0;
  padding: 0;
}

/*Margin-left for Kairos*/
body { 
  background: #fff;
  margin-left: 80px;
}

/*Reserved for Kairos
.h1 {
}*/

/*Header*/
.header {
 width: 100%;
 background: #070743;
 box-shadow: 2px 2px 2px #ccc;
 border-bottom: 15px solid #169D99;
}

.header .wrapper
{
width: 75%;
    margin: 0 auto;
}
 
 .header .title 
 {
 font: 25px Helvetica, Arial, sans-serif;
  padding: 30px 20px 10px 30px;
 color: #fff;}
 
 .header .subtitle
  {
 font: 16px Helvetica, Arial, sans-serif;
 color: #fff;
  padding: 10px 20px 30px 35px;}

/*Header navigation*/
.hnav ul {
  padding-left:40%;
  padding-bottom:14px;
  min-width:600px;}

.hnav li {
list-style:none;
display:inline;
padding:0;
color:white;
}

.hnav li a {
  margin:1px;
  background:#169D99;
  text-decoration:none;
  font: 14px Helvetica, Arial, sans-serif;
  padding-right:10px;
padding-left:10px;
padding-top:12px;
padding-bottom:12px;
color:#fff;
text-decoration:none;
border-radius: 2px;
}

.hnav li a:hover, nav a:visited{
	color:#169D99;
  background:#fff;
  text-decoration:underline;
}

/*Side Container*/
.side
{float:right;
width:42%;
color:#fff;
background:#070743;
  font: 16px Helvetica, Arial, sans-serif;
  padding: 7px 10px 10px 10px;
border-top: 14px solid #169D99;
margin:8px;
border-radius: 2px;
min-width:300px;}

.side .title {
color: #fff;
font-weight: bold;
padding: 0px 6px 6px 6px;
font: 18px sans-serif, Helvetica, Arial;}

/*Article Body*/
.article
{line-height:1.5;
color: #222;
font: 19px sans-serif, Helvetica, Arial;
padding-right:15px;
padding-top:10px;
}

.article .wrapper
{
width: 68%;
    margin: 0 auto;
}

.foil {
background:#eaeaea;
padding:20px;
border-radius: 3px;}

.article h2
{color: #000080;
font-weight: bold;
padding:12px 5px 7px 7px;
font: 28px sans-serif, Helvetica, Arial;}

.article h3
{color: #ff9900;
font-weight: bold;
padding:7px;
font: 24px sans-serif, Helvetica, Arial;}

.article h3 a
{color: #ff9900;
font-weight: bold;
padding:7px;
font: 24px sans-serif, Helvetica, Arial;}

.article h4
{color: #ff9900;
padding:6px;
font: 20px sans-serif, Helvetica, Arial;}

.article p
{padding-top:3px;
padding-bottom:3px;}

.article p.answer
{padding-top:3px;
padding-left: 22px ;
text-indent: -22px ;
padding-bottom:3px;
}

.article p.ref
{padding-top: 7px;
line-height:1.3;
padding-left: 30px ;
text-indent: -30px ;
padding-bottom: 7px;
font: 16px sans-serif, Helvetica, Arial;}

.article blockquote
{color: #888;
line-height:1.6;
padding: 17px 17px 17px 13px;
margin-top:15px;
margin-bottom:20px;
font: 21px sans-serif, Helvetica, Arial;
border-top: 5px solid #ccc;
border-bottom: 5px solid #ccc;
width:370px;}

/*Viewpaths Container*/
.container {
  position: relative;
  overflow: hidden;
  margin: 50px auto;
  width: 850px;
  height: 500px;
}

.container img {
  position: absolute;
  top: 0;
  padding-left: 40px;
  z-index: -60;
}

.container li img {
  position: absolute;
  top: 0;
  left: 800px;
  z-index: -50;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  
}

/*Viewpaths Navigation in Container*/
.container nav {
  width: 170px;
  background: #fff;
}

.container nav h2 {
  padding: 20px;
  color: #ccc;
  text-align: left;
  font: 25px Helvetica, Arial, sans-serif;
}

.container ul {
  width: 800px;
  height: 500px;
  list-style: none;
}

.container li a {
  z-index: 1;
  display: block;
  margin-left:-30px;
  padding-left: 20px;
  width: 170px;
  height: 30px;
  background: white;
  color: #444;
  text-decoration: none;
  font: 14px/30px Helvetica, Verdana, sans-serif;
}

.container li:nth-child(1) {
  padding-top: 50px;
}

.container li a:hover {
  background: #eee;
}

.container li a:hover + img {
  left: 0px;
}

/*Footer*/
.footer
{
 border-top: 20px solid #169D99;
 background:#070743;
 color:white;
  display: block;
padding:27px;
margin-top: 20px;
}

.footer .wrapper
{
width: 75%;
    margin: 0 auto;
}

.footer h3
{font: 16px sans-serif, Helvetica, Arial;
 color:white;}

