body
{
   font: 10px verdana, arial, sans-serif;
   color:#687888;
   margin: 0px;
   padding: 0px;
   scrollbar-face-color: #DCE0E2;
   scrollbar-shadow-color: #687888;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-3dlight-color: #687888;
   scrollbar-darkshadow-color: #DCE0E2;
   scrollbar-track-color: #BCBFC0;
   scrollbar-arrow-color: #6E7E88;
}
a, a:link, a:active, a:hover, a:visited
{
  font-weight: bold;
  color: #506f8f;
  text-decoration: none;
}
a:hover{
    text-decoration: underline;
    color: rgb(65,86,121);
}
.darklink a,.darklink  a:link,.darklink  a:active,.darklink  a:hover,.darklink  a:visited
{
  font-weight: normal;
}
body.tutorial
{
  background: url(/images/svg/blubg.svg) top left repeat-y, url(/images/sidebar.png) top left repeat-y;
  background-size: 64px 5px, 59px 500px;
  padding: 16px 16px 16px 80px;
}
body.tutorial h1{
  font-size: 20px;
  color: rgb(136, 164, 216);
}
body.tutorial header{
  border-top:10px solid #88a0c8;
  border-bottom:2px solid #88a0c8;
  display: flex;
}
body.tutorial header .nav
{
  flex:1;
  line-height: 39px;
  color: rgb(136, 160, 200);
  font-weight: bold;
}
body.tutorial header select
{
  background-color: #88a0c8;
  color: white;
}
footer{
  text-align: center;
  margin-bottom: 20px;
}
.bottom_links
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px 0 10px 0px;
}
.bottom_links a
{
  flex: 1 auto;
  background: #88a0c8;
  color: white;
  text-align: center;
  margin-right: 2px;
  margin-bottom: 2px;
  min-width: 100px;
  max-width: 200px;
  padding: 2px 0px 2px 0px;
  cursor: pointer;
  transition: background-color 0.2s linear;
}
.bottom_links a:hover{
  text-decoration: none;
  background-color: rgb(65,86,121);
}
.breadcrumbs
{
  margin: 8px 0 20px 0;
}
.description
{
  margin-bottom: 40px;
}
.breadcrumbs a,.breadcrumbs a:link,.breadcrumbs a:active,.breadcrumbs a:visited,.breadcrumbs a:hover{
  color: #485888;
  text-transform:capitalize;
  font-weight: bold;
  text-decoration: none;
}
.breadcrumbs a:hover{
  text-decoration: underline;
}
.tut
{
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}
.tut .tutNumber
{
  font-size: 26px;
  font-weight: bold;
  color: #999999;
  padding: 0px 10px 10px 10px;
  margin-top: -20px;
  min-width: 40px;
}
.tut .tutNumber .small
{
  font-size: 18px;
}
.tut .tutImg
{
  margin: 0px 40px;
  background-color: #fff;
  min-width: 222px;
}
.tut .tutImg img, .tut .tutImg iframe{
  display: block;
  border: #8098c0 1px dotted;
}

.tut .tutText{
  color: #003068;
  width: 100%;
}
.bottom_border
{
  height: 2px;
  background-color: #88a0c8;
}
.question
{
  text-align: center;
  padding: 20px 0;
}
.back_tutorials
{
  text-align: center;
  padding: 0 0 20px 0;
  font-weight: bold;
}
.back_tutorials a:hover{
  text-decoration: underline;
}
a.thumbnail img{
  border: 1px solid #646a6c;
  width: 58px;
  height: 58px;
}

a.thumbnail{
  display: inline-block;
  position: relative;
  background-color: #fff;
  height: 60px;
  width: 60px;
}
a.thumbnail::before{
  content: " ";
  border: 1px solid #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 56px;
  height: 56px;
}
a.thumbnail::after{
  content: " ";
  border: 1px solid #5c5e5c;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 54px;
  height: 54px;
}
.table{
  display:table;
  width: 100%;
}
.table-cell, .table-cell-header{
   display: table-cell;
   vertical-align: middle;
   padding: 8px;
   color: #687888;
}
.table-cell.top-align{
   vertical-align:top;
}
.table-cell-header
{
  font-weight: bold;
  color: white;
}
.table-cell.thumbnail
{
  width: 60px;
}
.table-row{
   display: table-row;
   padding: 8px;
   position:relative;
}
.table-row:nth-child(odd)		{ background-color:rgb(232,237,244); }
.table-row:nth-child(even)		{ background-color:#fff; }

/*
.pointer.table-row:nth-child(odd):hover		{ background-color:rgb(198, 203, 231);}
.pointer.table-row:nth-child(even):hover		{ background-color:rgb(241, 241, 241);}
*/

.pointer:hover .table-cell{
  color: black;
  cursor: pointer;
}
.pointer:hover img{
  box-shadow: 1px 1px 4px rgba(0,0,0,0.21);
}
.table-header    { display: table-header-group; }
.table-header .table-row{background-color:rgb(177,191,221);color:white;}
.table-body    { display: table-row-group; }
.pointer{
  cursor: pointer;
}
.greenText
{
  color: #d8d858;
  font-weight: bold;
}
.pb{
  padding-bottom: 4px;
}
.pbl{
  padding-bottom: 24px;
}
.prr{
  padding-bottom: 24px;
}
.greyBox{
  background-color: #F0F0F0;
  border: 2px solid #CCCCCC;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 16px;
  color: rgb(102, 102, 102);
  line-height: 2em;
}
.greenBox
{
  background-color: #d8d856;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 16px;
  color: #686868;
  line-height: 2em;
}
#randomtip{
  margin-top: 4px;
}
.capitalise
{
  text-transform:capitalize;
}
.toprightbanner
{
  height: 39px;
  width: 215px;
  overflow: hidden;
  display: inline-block;
  text-align: right;
  padding-top: 4px;
  margin-right: 8px;
}
.trb_title{
  font-family: verdana;
  font-size: 20px;
  color: rgb(137,158, 193);
  font-weight: bold;
  letter-spacing: -1px;
}
.trb_link,.trb_link a, .trb_link a:link, .trb_link a:active, .trb_link:visited, .trb_link:hover{
  font-family: verdana;
  font-size: 8px;
  color: rgb(204,204, 204);
  margin-top: -2px;
  font-weight: bold;
}
.tutSummary
{
  margin-bottom: 60px;
}
/*
Equal or narrower
*/
@media (max-width: 600px) {
  .nav{
    display: none;
  }
  header{
    justify-content: flex-end;
  }
  .hide_mobile{
    display: none;
  }
  body.tutorial {
    background-image: url(/images/svg/blubg.svg);
    background-position: -59px 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .tut
  {
    flex-flow: row wrap;
  }
  .tut .tutNumber, .tut .tutImg, .tut .tutText{
    flex: 1 100%;
  }
  .tut .tutImg
  {
    margin: 0px;
  }
  .tut .tutNumber{
    padding-left: 0px;
  }
  .tut .tutText{
    margin-top: 20px;
  }
}
.boldtext
{
  font-weight: bold;
}
.intro
{
  padding: 0 20px 50px 20px;
}
#spotlight
{
  height: 130px;
width: 180px;
margin-right: 100px;
border: #8098C0;
  border-style: dotted;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
background: url(/images/spotlight.jpg);
float: left;
background-size: 181px 133px;
}
.lineText
{
  text-decoration: line-through;
}