@font-face {
  font-family: 'AC';
  src: url('ac.eot?') format('eot'), url('ac.ttf') format('truetype');
}

@font-face {
  font-family: 'IC';
  src: url('ic.eot?') format('eot'), url('ic.otf') format('opentype');
}

@font-face {
  font-family: 'SY';
  src: url('sy.eot?') format('eot'), url('sy.ttf') format('truetype');
}

* {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent}
html {background: #000000 url(bg.jpg) no-repeat fixed; background-size: cover; height: 100%}
body {color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.5em; text-align: center; font-weight: 400; padding-left: 130px; height: 100%}

.icon {font-family: 'AppleSDGothicNeo-Medium', 'SY', 'IC'}

nav {background: rgba(0, 0, 0, 0.5); width: 130px; position: fixed; left: 0; top: 0; height: 100%; min-height: 650px; z-index: 10000}
nav a {font-family: 'AvenirNextCondensed-Medium', 'AC', Helvetica, Arial, sans-serif; color: #FFFFFF; text-decoration: none; font-size: 16px; display: block; text-align: center; padding: 30px 0; width: 130px; margin-top: 1px}
nav a#home {padding-top: 90px; background: transparent url(logoff.png) no-repeat center 20px; background-size: 57px 57px; color: #ffffff; margin-top: 0; text-transform: uppercase; font-family: 'AvenirNextCondensed-Medium', 'AC', Helvetica, Arial, sans-serif}
nav a:hover, nav a#home:hover {background-color: #ffffff; color: #000000}
nav a#home:hover {background-image: url(logo00.png)}

footer {background: transparent; position: fixed; bottom: 0; left: 0; z-index: 10001; width: 130px}
footer a {font-family: 'AvenirNextCondensed-Medium', 'AC', Helvetica, Arial, sans-serif; text-decoration: none; padding: 10px 0; display: inline-block}
footer a:first-child {margin-right: 20px}
footer a#privacy {display: block; color: #888888; margin-top: 10px; font-size: 0.8em; width: 100%}

code {display: block; white-space: pre; overflow: auto; margin: 2em 0; padding: 1em; background-color: #eeeeee; -webkit-overflow-scrolling: touch}

h1, h2, h3 {font-weight: 500; margin: 0 0 0.5em 0; font-size: 1.7em; line-height: 1.1em; font-family: 'AvenirNextCondensed-Medium', 'AC', Helvetica, Arial, sans-serif}
h2 {margin-top: 3em}
h1 {font-size: 3em}
h4, h5, h6 {font-size: 1em; font-weight: bold}
dt {font-size: 1em; line-height: 1em; margin-top: 2em; margin-bottom: 1em; font-weight: bold}
p {font-size: 1em; margin-bottom: 1em}
ul, ol, dl {margin-top: 1em; margin-bottom: 1em}
ul {list-style-type: disc}
li {margin-left: 2em}
.toc li {margin: 2em}
.gray {color: #888888}

table {margin: 0; width: 100%; border-collapse: collapse}
th, td {padding: 0.5em; text-align: left; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc}
th {border-bottom: 2px solid #ffffff}
.contentbox th {border-bottom: 1px solid #333333}
table tr:last-child td, table tr:last-child th {border-bottom: none}
tr td:last-child, tr th:last-child {border-right: none}

input {-webkit-appearance: none; border-radius: 0}

section#contentcenter {margin-left: auto; margin-right: auto; text-align: center; margin-top: 2em}
div#content {margin-left: auto; margin-right: auto; text-align: left; max-width: 800px; padding: 1em}
div#manual {background-color: #ffffff}
div#manual h3 {margin-top: 3em; margin-bottom: 1em}
div#manual h4, div#manual h5, div#manual h6 {margin-top: 3em; margin-bottom: 1em; border-bottom: 1px solid #cccccc}
div#manual img {max-width: 100%}
div#toc {font-size: 0.875em}
div#toc span {display: inline-block; width: 4em}
div#toc a {color: #333333; text-decoration: none; display: block; padding-bottom: 0.5em}
div#toc a:hover {color: #CC6600}
div#toc a.level3 {border-bottom: 1px solid #cccccc; padding-top: 0.5em; padding-bottom: 0; margin-bottom: 0.5em}
div#toc a.level4 {margin-left: 4em}
div#toc a.level5 {margin-left: 8em}
div#toc a.level6 {margin-left: 12em}
a img {border: none}

blockquote {text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em; padding: 0 2em}
blockquote span {display: block; font-size: 0.85em; color: #888888; margin-top: 0.5em}

div.contentbox, div.featureblock {margin: 5em 0; clear: both; background-color: rgba(255, 255, 255, 0.95); border-radius: 2px; color: #333333}
div.contentbox {margin-top: 1em; padding: 2em}
div.contentbox *:last-child, div.featureblock *:last-child {margin-bottom: 0}
div.contentbox *:first-child, div.featureblock *:first-child {margin-top: 0}
div.featureblock {position: relative; overflow: hidden; padding-left: 30%}
div.featureblock div {padding: 2em}
div.featureblock div.img {position: absolute; top: 0; left: -30%; height: 100%; width: 60%; overflow: hidden; text-align: right; padding: 0}
div.featureblock div.img img {height: 100%}
div.featureblock h2 {font-size: 1.4em; margin-top: 1em}
div.featureblock p {font-size: 0.9em}
div.featureblock h2, div.featureblock p {padding-left: 20px}

img.svg {vertical-align: -0.35em; height: 1.4em}
img.svgpadding {vertical-align: -0.35em; height: 1em; padding: 0.4em}
p.img {text-align: center; margin: 2em 0}
p.img img {border-radius: 50%; width: 40%; border: 20px solid rgba(0, 0, 0, 0.5)}
p.sqimg img {border: 20px solid rgba(0, 0, 0, 0.5)}
div.contentbox p.img img {border: none}
.manualnav {margin-top: 4em}
.manualnav span {float: right}
.manualnav a {text-decoration: none; color: #ffffff}
.centerAlign {text-align: center}
.topSpace {margin-top: 3em}
.lroman {list-style-type: lower-roman}

p.appstore {text-align: center; margin: 10% 0}
p.appstore a, a.cta {display: inline-block; text-align: center; height: 57px; background: #cdcda6 url(logo33.png) no-repeat top left; background-size: 57px 57px; padding-left: 57px; padding-right: 20px; color: #333333; text-transform: uppercase; text-decoration: none; line-height: 57px; white-space: nowrap; font-family: 'AvenirNextCondensed-Medium', 'AC', Helvetica, Arial, sans-serif; border-radius: 5px}
p.appstore a:hover, a.cta:hover {background-color: #ffffff; color: #000000; background-image: url(logo00.png)}

div#blur {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #000000 url(bgblur.jpg) no-repeat fixed; background-size: cover}
div#firstpage {height: 100%; height: 100vh}
div#firstpage div {height: 66%; position: relative}
div#firstpage div img {max-width: 80%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
div#firstpage h1 {text-align: center; margin-top: 0}
div#firstpage p {text-align: center; margin-top: 0}
div#firstpage p.appstore {margin-top: 3em}
div#fbfooter {padding: 2em 0 40px 0; text-align: center}
img.imgHidden {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
img.imgVisible {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

@media screen and (max-width: 700px) {
  nav {position: static; width: auto; height: auto; min-height: auto; padding: 1em}
  nav a {display: inline; padding: 0.5em}
  nav a#home, nav a#home:hover {padding-top: 0.5em; background-image: none}
  body {padding-left: 0}
}

@media print {
  nav, footer, span#pdfversion {display: none}
  body {padding-left: 0; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch}
  div#manual h3, div#manual h4 {page-break-before: always}
}