body
{
   font-family: verdana, arial, sans-serif;
   font-size: 12px;
   line-height: 1.6em;
   color: rgb(48,88,128);
   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;
}
input, textarea
{
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: rgb(48,88,128);
}
body.tutorial
{
  background: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA1Ij48c3R5bGU+LnN0MSwuc3Qye2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzNjNTY3Y30uc3Qye2ZpbGw6I2M0ZDZmY308L3N0eWxlPjxwYXRoIGQ9Ik02MiAwaDJ2NWgtMnpNNTkgMGgxdjVoLTF6IiBjbGFzcz0ic3QxIi8+PHBhdGggZD0iTTMgMWgxdjJIM3pNMyAwaDF2MUgzek0zIDNoMXYxSDN6IiBjbGFzcz0ic3QyIi8+PC9zdmc+') top left repeat-y, url(/images/sidebar.png) top left repeat-y;
  background-size: 64px 5px, 59px 500px;
  padding: 4px 16px 16px 80px;
}
body.tutorial header{
  /*border-top:10px solid rgb(136, 160, 200);*/
  border-bottom:2px solid rgb(136, 160, 200);
  border-image-source: linear-gradient(to left, rgb(136,164,216), rgb(48,88,128));
  border-image-slice: 1;
  display: flex;
}
body.tutorial header .nav
{
  flex:1;
  line-height: 30px;
  color: rgb(136, 160, 200);
  font-weight: bold;
}
body.tutorial header select
{
  background-color: rgb(136, 160, 200);
  color: white;
}
a, a:link, a:active, a:hover, a:visited
{
  font-family: Geneva, Arial, Helvetica, san-serif;
  font-weight: bold;
  color: rgb(48,88,128);
  text-decoration: none;
}
a:hover{
  color:rgb(34,62,91);
  text-decoration: underline;
}
.text-center
{
  text-align: center;
}
.form_reset
{
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.border_blue{
  border: 1px solid rgb(136, 160, 200);
}
input.border_blue:hover, textarea.border_blue:hover{
  border: 1px solid rgb(48,88,128);
}
h1,h2,h3
{
  font-size: 24px;
  letter-spacing: -1px;
  color: rgb(136,164,216);
  margin: 32px 0px 8px 0px;
}
h2,h3
{
  letter-spacing: -0.5px;
  font-size: 18px;
}
h2.single ,h3.single
{
  margin-bottom: 16px;
}
.bottom_links
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.bottom_links a
{
  flex: 1 auto;
  flex-basis:0;
  background: rgb(136, 160, 200);
  color: white;
  text-align: center;
  margin-right: 2px;
  margin-bottom: 2px;
  min-width: 100px;
  max-width: 200px;
  cursor: pointer;
  transition: background-color 0.2s linear;
}
.bottom_links a:hover{
  text-decoration: none;
  background-color: rgb(101,132,184);
}
span.arrow
{
  font-size:1.2em;
}
.breadcrumbs
{
  text-transform: capitalize;
  flex-basis: 100%;
}
.greenText
{
  color: rgb(216,216,86);
  font-weight: bold;
}
.pointer
{
  cursor: pointer;
}
.biglink:hover a
{
  text-decoration: underline;
}
.greyBox{
  background-color: rgb(240,240,240);
  border: 1px solid rgb(215,215,215);
  color: rgb(102,102,102);
}
.greenBox
{
  background-color: rgb(216,216,86);
  color: rgb(102,102,102);
}
/*

*/
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;
}
.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(234,238,245); }
.table-row:nth-child(even)		{ background-color:#fff; }
.table-header    { display: table-header-group; }
.table-header .table-row{background-color:rgb(136, 160, 200);color:white;}
.table-body    { display: table-row-group; }
.table-row:hover .table-cell{
  color: black;
  cursor: pointer;
}
.table-row:hover img{
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
/**/
.trb_title{
  font-family: verdana;
  font-size: 18px;
  color: rgb(136, 160, 200);
  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: 10px;
  color: rgb(204,204,204);
  margin-top: -2px;
}
.toprightbanner
{
  text-align: right;
}
.dottedborder
{
  border: 1px rgb(136,164,216) dotted;
}
.dashedborder
{
  border: 1px rgb(136,164,216) dashed;
}
#spotlight
{
  height: 130px;
  width: 180px;
  background: url(/images/spotlight.jpg);
  background-size: 181px 133px;
  /*flex: 0 1 180px;*/
}
.squeeze
{
  max-width:100%;
  height:auto;
}
.lineText
{
  position: relative;
}
.lineText::before
{
  content: '';
  position: absolute;
  top: 50%;
  left: 0px;
  border-top: 2px solid rgba(48,88,128,0.5);
  width: 100%;
  transform: rotateZ(-10deg);
}
.lineText::after
{
  content: '';
  position: absolute;
  top: 50%;
  left: 0px;
  border-top: 2px solid rgba(48,88,128,0.5);
  width: 100%;
  transform: rotateZ(10deg);
}
.block
{
  display: block;
}
img.middle
{
  vertical-align:middle;
}
/*
  Flexbox
*/
.flex_contents
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}
.flex_contents .fill
{
  flex: 1;
  flex-grow: 1;
}
.redText, .redText a
{
  color: rgb(184,16,16);
}
.fill h1:first-child
{
  margin-top:0px;
}
ul.basic
{
  list-style:none;
  padding:0px;
  margin: 4px 4px 4px 8px;
}
ul.basic li
{
  padding-bottom: 4px;
}
/**/
.tut
{
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}
.tut .tutNumber
{
  font-size: 26px;
  font-weight: bold;
  color: rgb(153,153,153);
  padding: 0px 8px 8px 8px;
  min-width: 40px;
}
.tut .tutNumber .small
{
  font-size: ;
}
.tut .tutImg
{
  margin: 0px 40px 0px 0px;
  background-color: rgb(255,255,255);
  min-width: 222px;
}
.tut .tutImg img, .tut .tutImg iframe{
  display: block;
  /*border: 1px rgb(136,164,216) dotted;*/
}
.tut .tutText{
  width: 100%;
  line-height: 2.2em;
}
dt
{
  font-weight:bold;
}
dd
{
  margin-left: 16px;
}
.breadcrumbs
{
  list-style: none;
  margin:0px;
  padding: 0px;
}
.breadcrumbs li {
  display: inline;
}
.breadcrumbs li+li:before {
  padding: 0 4px 0 4px;
  content: "\203A";
}
/*
  Spacing
*/
.p0
{
  padding:0px;
}
.m0
{
  margin:0px;
}

.p_all_xs
{
  padding: 2px;
}
.m_all_xs
{
  margin: 2px;
}

.pl-xs
{
  padding-left: 2px;
}
.ml-xs
{
  margin-left: 2px;
}

.pt-xs
{
  padding-top: 2px;
}
.mt-xs
{
  margin-top: 2px;
}

.pb-xs
{
  padding-bottom: 2px;
}
.mb-xs
{
  margin-bottom: 2px;
}

.pr-xs
{
  padding-right: 2px;
}
.mr-xs
{
  margin-right: 2px;
}


.p_all_s
{
  padding: 4px;
}
.m_all_s
{
  margin: 4px;
}

.pl-s
{
  padding-left: 4px;
}
.ml-s
{
  margin-left: 4px;
}

.pt-s
{
  padding-top: 4px;
}
.mt-s
{
  margin-top: 4px;
}

.pb-s
{
  padding-bottom: 4px;
}
.mb-s
{
  margin-bottom: 4px;
}

.pr-s
{
  padding-right: 4px;
}
.mr-s
{
  margin-right: 4px;
}


.p_all_m
{
  padding: 8px;
}
.m_all_m
{
  margin: 8px;
}

.pl-m
{
  padding-left: 8px;
}
.ml-m
{
  margin-left: 8px;
}

.pt-m
{
  padding-top: 8px;
}
.mt-m
{
  margin-top: 8px;
}

.pb-m
{
  padding-bottom: 8px;
}
.mb-m
{
  margin-bottom: 8px;
}

.pr-m
{
  padding-right: 8px;
}
.mr-m
{
  margin-right: 8px;
}


.p_all_l
{
  padding: 16px;
}
.m_all_l
{
  margin: 16px;
}

.pl-l
{
  padding-left: 16px;
}
.ml-l
{
  margin-left: 16px;
}

.pt-l
{
  padding-top: 16px;
}
.mt-l
{
  margin-top: 16px;
}

.pb-l
{
  padding-bottom: 16px;
}
.mb-l
{
  margin-bottom: 16px;
}

.pr-l
{
  padding-right: 16px;
}
.mr-l
{
  margin-right: 16px;
}


.p_all_xl
{
  padding: 32px;
}
.m_all_xl
{
  margin: 32px;
}

.pl-xl
{
  padding-left: 32px;
}
.ml-xl
{
  margin-left: 32px;
}

.pt-xl
{
  padding-top: 32px;
}
.mt-xl
{
  margin-top: 32px;
}

.pb-xl
{
  padding-bottom: 32px;
}
.mb-xl
{
  margin-bottom: 32px;
}

.pr-xl
{
  padding-right: 32px;
}
.mr-xl
{
  margin-right: 32px;
}


p
{
  margin: 16px 0 16px 0;
}
/*

*/
@media (max-width: 600px) {
  .nav .innertext{
    display: none;
  }
  .trb_title
  {
    font-size:12px;
  }
  .trb_link,.trb_link a, .trb_link a:link, .trb_link a:active, .trb_link:visited, .trb_link:hover
  {
    font-size:8px;
    margin-top:-5px;
  }
  header{
    justify-content: flex-end;
  }
  .hide_mobile{
    display: none;
  }
  body.tutorial {
    background-image: none;
    background-position: -59px 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .tut
  {
    flex-flow: row wrap;
    contain: content;
  }
  .tut .tutNumber, .tut .tutImg, .tut .tutText{
    flex: 1 100%;
  }
  .tut .tutImg
  {
    margin: 0px;
    display: flex;
    justify-content: center;
  }
  .tut .tutNumber{
    padding-left: 0px;
  }
  .tut .tutText{
    margin-top: 20px;
  }
}
/*
  Responsive
*/

/*
  Screen 450 or less
*/
@media screen and (max-width: 450px) { 
  .break_450
  {
    display: block;
  }
  .mt-l_450
  {
    margin-top:16px;
  }
} 
kbd.key {
  border-radius: 3px;
  box-shadow: 0.5px 1px 2px rgba(0, 0, 0, .2), 1px 1px 0px 0px rgba(0, 0, 0, .1), inset -2px -2px 0px -1px rgba(0, 0, 0, .05);
  color: rgb(48,88,128);
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 0.25em 0.5em;
  white-space: nowrap;
  font-family: monospace;
}

kbd.menu samp {
  border-radius: 3px;
  border:1px solid rgb(136,164,216);
  color: rgb(48,88,128);
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 0.25em 0.5em;
  white-space: nowrap;
  font-family: monospace;
}

kbd.input {
  border-radius: 3px;
  border:1px solid rgb(136,164,216);
  box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, .2);
  padding: 0.25em 0.5em;
  font-size: 0.85em;
}