html, body{
    height: 100%;
    width: 100%;
    overflow: hidden !important;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif, arial, tahoma;
    background: url(/ppw/_images/ppw-gray-bg.png);
}
*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
iframe{
    border: none;
}
#presentation-iframe, #canvas, #buttons-container,
#buttons-container .nav{
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#presentation-iframe{
    z-index: 1;
}
#canvas{
    z-index: 2 !important;
}

#annotations-container{
    position: absolute;
    left: 2.5%;
    bottom: 0px;
    width: 95%;
    height: 0px;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.9);
    color: #555;
    z-index: 6;
    font-size: 2em;
    line-height: 2.4em;

    -webkit-transition: height 300ms linear;
    -moz-transition: height 300ms linear;
    transition: height 300ms linear;
}

#notesContainer{
    color: #444;
}
#currentSlideIdx{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    font-size: 200px;
}

/* BUTTONS */
#buttons-container{
    z-index: 5 !important;
}
#btn-back{

}

.showing-controls #btn-toggle-camera{
    top: -86px;
    right: -70px;
}
.showing-controls #btn-next-slide{
    bottom: -80px;
    right: -80px;
}
.showing-controls #btn-previous-slide{
    bottom: -80px;
    left: -80px;
}

#btn-toggle-camera{
    position: absolute;
    top: -300px;
    right: -300px;
}
#btn-next-slide{
    position: absolute;
    bottom: -300px;
    right: -300px;
}
#btn-previous-slide{
    position: absolute;
    bottom: -300px;
    left: -300px;
}



#btn-annotations{
    position: absolute;
    bottom: 16px;
    left: 50%;
    margin: 0px;
    margin-left: -110px;
}
#btn-annotations a{
    margin-bottom: 0px;
    border-radius: 20px 20px 0px 0px;
    height: 80px;

    -webkit-transition: bottom 300ms linear;
    -moz-transition: bottom 300ms linear;
    transition: bottom 300ms linear;

}
#btn-annotations a span{
    margin: 0px;
    line-height: 122px !important;
}
#btn-annotations a:before{
    display: none;
}
#btn-annotations a span:before{
    position: relative;
    top: -12px;
}









/* buttons styles (inspired by http://codepen.io/chriscoyier/pen/ctugI) */
.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.btn-icon {
    line-height: 150px !important;
    font-size: 3em;
}

.nav {
  list-style: none;
  text-align: center;
}

.nav li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

.nav a:link, .nav a:visited {
  display: block;
  text-decoration: none;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
  color: #a7a7a7;
  margin: 36px;
  width: 144px;
  height: 144px;
  position: relative;
  text-align: center;
  line-height: 144px;
  border-radius: 50%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
  border: solid 1px transparent;
}

.nav a:before {
  content: "";
  display: block;
  /*background: #fff;*/
  border-top: 2px solid #ddd;
  position: absolute;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: inset 0px 8px 48px #ddd;
}

.nav a:active {
  box-shadow: none;
  border: solid 1px #a7a7a7;

  font-size: 0.9em;
}

.nav a:hover {
  text-decoration: none;
  color: #555;
  background: #f5f5f5;
}

#state-buttons-container{
    position: absolute;
    z-index: 999;
    left: 6px;
    top: 6px;
    /*width: 480px;*/
    height: 48px;
}

#state-buttons-container>div{
    /*border: outset 3px;*/
    position: absolute;
    border: solid 1px #999;
    margin-right: 4px;
    border-radius: 10px;
    /*background-color: #f0f0f0;*/
    /*background-size: 100%;*/
    width: 40px;
    height: 40px;
    float: left;

    background: rgb(242,246,248); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,246,248,1)), color-stop(50%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */

}


#state-buttons-container div div{
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: 100%;
}
#state-buttons-container .selected{
    /*border: outset 2px;*/
    background-color: #a33;

    background: rgb(187,208,219); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(187,208,219,1) 0%, rgba(169,189,203,1) 50%, rgba(141,168,183,1) 51%, rgba(158,205,236,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,208,219,1)), color-stop(50%,rgba(169,189,203,1)), color-stop(51%,rgba(141,168,183,1)), color-stop(100%,rgba(158,205,236,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(187,208,219,1) 0%,rgba(169,189,203,1) 50%,rgba(141,168,183,1) 51%,rgba(158,205,236,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(187,208,219,1) 0%,rgba(169,189,203,1) 50%,rgba(141,168,183,1) 51%,rgba(158,205,236,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(187,208,219,1) 0%,rgba(169,189,203,1) 50%,rgba(141,168,183,1) 51%,rgba(158,205,236,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(187,208,219,1) 0%,rgba(169,189,203,1) 50%,rgba(141,168,183,1) 51%,rgba(158,205,236,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd0db', endColorstr='#9ecdec',GradientType=0 ); /* IE6-9 */
}
#state-buttons-container .selected>div{
    background-size: 70%;
}

#state-buttons-container div:nth-child(1){
    top: 0px;
    left: 0px;
}
.showing-controls #state-buttons-container div:nth-child(2){
    left: 0px !important;
    top: 42px !important;
}
.showing-controls #state-buttons-container div:nth-child(3){
    left: 0px !important;
    top: 84px !important;
}
.showing-controls #state-buttons-container div:nth-child(4){
    top: 0px !important;
    left: 42px !important;
}
.showing-controls #state-buttons-container div:nth-child(5){
    top: 0px !important;
    left: 84px !important;
}


#state-buttons-container div:nth-child(2){
    left: -100px;
    top: 42px;
}
#state-buttons-container div:nth-child(3){
    left: -100px;
    top: 84px;
}
#state-buttons-container div:nth-child(4){
    top: -100px;
    left: 42px;
}
#state-buttons-container div:nth-child(5){
    top: -100px;
    left: 84px;
}


#btn-settings>div{
    background: url(/ppw/_images/gear.png) no-repeat;
    width: 48px;
    height: 48px;
    float: left;
}
#btn-spotlight>div{
    background: url(/ppw/_images/spotlight.png) no-repeat;
    width: 48px;
    height: 48px;
    float: left;
}
#btn-laserpoint{
    width: 100%;
    height: 100%;
    float: left;
}
    #btn-laserpoint:before{
        content: "";
        background-color: red;
        box-shadow: 0px 0px 6px red;
        margin: auto;
        margin-top: 10px;
        width: 20px;
        height: 20px;
        display: block;
        border-radius: 50%;
        border: solid 1px white;
    }
#btn-drawing>div{
    background: url(/ppw/_images/drawing.png) no-repeat;
    width: 48px;
    height: 48px;
}
#btn-thumbs>div{
    background: url(/ppw/_images/thumbs.png) no-repeat;
    background-position: center center;
    width: 48px;
    height: 48px;
    background-size: auto !important;
}

#state-buttons-container>div,
#btn-toggle-camera, #btn-next-slide, #btn-previous-slide,
#settings-container
{
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#settings-container{
    background: rgba(0, 0, 0, 0.7);
    color: white;
    position: absolute;
    right: 0px;
    top: 2%;
    width: 0px;
    height: 96%;
    overflow: hidden !important;
    box-sizing: border-box;
    white-space: nowrap;
    border: none !important;
    opacity: 0;
    -moz-box-sizing: border-box;
    z-index: 999999;
    padding: 4px;
    /*margin-left: 54px;*/
    font-size: 1.2em;
    line-height: 30px;
    outline: solid 1px #000;
}

.indent{
    margin-left: 40px;
}

.font-sizes{

}
.font-sizes span{
    margin-top: 10px;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    text-align: center;
    line-height: 20px;
}
.font-sizes span:nth-child(1){
    font-size: 12px;
    margin-right: 12px;
}
.font-sizes span:nth-child(2){
    font-size: 20px;
    margin-left: 12px;
}

#settings-container h2, #settings-container h4{
    margin: 0px;
}
.showing-settings #settings-container{
    /*left: 0%;*/
    width: 270px;
    display: block;
    opacity: 1;
}
.go-back{
    position: absolute;
    right: 60px;
    bottom: 0px;
    color: white;
}