body, ul, table, form{
    margin:0;
    padding:0;
    background: url('./../img/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#canvas {
    display: none;
}

::-moz-selection{
    background:#999;
    color:white;
    text-shadow:none;
}

.bookshelf-row{
    display:none;
}

@font-face {
    font-family: Aleo;
    src: url("../../../fonts/Aleo-Regular.ttf") format("truetype");
}

h1{
    font:32px Aleo, helvetica, arial;
    font-weight:lighter;
    margin:20px 0;
    color:white;

    -webkit-text-fill-color: white;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 0.005em;
}

h2, h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:black;
    font-weight:bold;
}

h3 {
    margin: 10px 0;
    font-size:25px;
    letter-spacing: -0.05em;
}

a{
    text-decoration:none;
    color:black;
}

a:hover{
    text-decoration:underline;
}

p{
    line-height:22px;
    margin:20px 0;
}

li{
    list-style:none;
}

.splash{
    width:100%;
    height:700px;
    overflow:hidden;
    position:relative;
    background-color: rgba(0,0,0,0.3);
    /* background:url(../img/splash-bg.jpg) bottom left repeat-x; */
    
    -webkit-transition:height 1s;
    -moz-transition:height 1s;
    -ms-transition:height 1s;
    -o-transition:height 1s;
    transition:height 1s;
}

.splash .gradient{
    position:absolute;
    bottom:-100px;
    left:0;
    width:100%;
    height:100px;
    z-index:1000;
}

.no-transition{
    -webkit-transition:none;
    -moz-transition:none;
    -ms-transition:none;
    -o-transition:none;
    transition:none;
}

.splash .center{
    width:1000px;
    height:700px;
    margin:auto;
    position:relative;
    z-index: 0;
}

.splash .details{
    float:left;
    margin-top:150px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.details li{
    font:23px 'District Thin', helvetica, arial;
    list-style:none;
    font-weight:lighter;
    line-height:30px;
    color:#333;

    -webkit-text-fill-color: #333;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 0.0005em;
}

.details .options{
    margin:10px 0;
    float:left;
}

.details .options p{
    margin:10px 0;
}

.details .options a{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    font-size:14px;
    color:#334C13;
    text-shadow:0 1px 1px white;
    text-decoration:none;
    margin-left:5px;
}

.details .options a:hover{
    text-decoration:underline;
}

.details .production{
    margin-top:40px;
    margin-bottom:20px;
}

.headline{
    font-size:18px;
    line-height:30px;
    margin:50px 0;
}

.preview{
    height:800px;
}

.bookshelf{
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
}

.preview .no-transition{
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -o-transition:none !important;
    -ms-transition:none !important;
    transition:none !important;
}

.preview .no-transform{
    -webkit-transform:scale3d(1, 1, 1) !important;
    -moz-transform:scale3d(1, 1, 1) !important;
    -o-transform:scale3d(1, 1, 1) !important;
    -ms-transform:scale3d(1, 1, 1) !important;
    transform:scale3d(1, 1, 1) !important;
}

.preview .bookshelf{
    opacity:0;

    -webkit-transform: translate3d(-100px, 0, 0) scale3d(0.5, 0.5, 1);
    -moz-transform: translate3d(-100px, 0, 0) scale3d(0.5, 0.5, 1);
    -o-transform: translate3d(-100px, 0, 0) scale3d(0.5, 0.5, 1);
    -ms-transform: translate3d(-100px, 0, 0) scale3d(0.5, 0.5, 1);
    transform: translate3d(-100px, 0, 0) scale3d(0.5, 0.5, 1);
}

.details{
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
    cursor:default;
}

.preview .details{
    opacity:0;
    -webkit-transform: translate(20px, 0) scale3d(0.9, 0.9, 1);
    -moz-transform: translate(20px, 0) scale3d(0.9, 0.9, 1);
    -ms-transform: translate(20px, 0) scale3d(0.9, 0.9, 1);
    -o-transform: translate(20px, 0) scale3d(0.9, 0.9, 1);
    transform: translate(20px, 0) scale3d(0.9, 0.9, 1);
}

.animate{
    -webkit-transition:-webkit-transform 1s;
    -moz-transition:-moz-transform 1s;
    -ms-transition:-ms-transform 1s;
    -o-transition:-o-transform 1s;
    transition:transform 1s;
}

.details .options .icon{
    display:block;
    float:left;
}

.go-up{
    width:44px;
    height:44px;
    background-position:-44px -22px;
    margin-top:10px;
    position:absolute;
    top:-5px;
    right:20px;
    display:none;
}



.table-contents{
    background-position:-88px 0;
}

.zoom-in{
    background-position:-198px 0;
}

.zoom-out, .zoom-out-hover{
    background-position:-220px 0;
    width:44px;
    height:44px;
    position:absolute;
    top:20px;
    right:20px;
}

.table-contents-hover{
    background-position:-88px -22px;
}

.zoom-in-hover{
    background-position:-198px -22px;
}

.zoom-out-hover{
    background-position:-264px 0;
}

.bookshelf{
    margin-top:30px;
}

.bookshelf .shelf{
    width:100%;
    max-width: 426px;
    height: auto;
    display: block; margin: 0 auto;
}

.bookshelf .shelf .row-1{
    position:relative;
    max-width: 426px;
    width:100%;
    height:158px;
    display: block;
    /* margin-left:33px; */

}

.bookshelf .shelf .row-1:after,
.bookshelf .shelf .row-2:after{
    background:url(../img/wall-bookshelf.png);
    max-width: 426px;
    background-size:100%;
    background-repeat: no-repeat;
    background-position:bottom left;
    width:100%;
    height:210px;
    display:block;
    content:"";
    /* margin-left:-38px; */
}

.bookshelf .shelf .row-2{
    position:relative;
    margin-top:20px;
    height:164px;
    width:360px;
    /* margin-left:33px; */
}

.bookshelf .shelf .row-2:after{
    height:216px;
}

.bookshelf .shelf .loc{
    position:absolute;
    bottom:0;
    width:100%;
    /* margin-left: 33px; */
}

.bookshelf .shelf .loc > div{
    width:33%;
    height:100%;
    float:left;
    text-align:center;
    position:relative;
}

.bookshelf .suggestion{
    font:12px 'District Thin', helvetica, arial;
    color:white;
    text-align:center;
    line-height:40px;
}

.bookshelf .sample,
.bookshelf-row .sample{
    margin:auto;
    position: relative;
    z-index:1;

    -webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    -moz-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    -ms-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    -o-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    box-shadow:2px 2px 5px rgba(0,0,0,0.6);

    -webkit-transition:-webkit-transform 0.1s;
    -webkit-transform:translate(0, 0);
    -moz-transition:-moz-transform 0.1s;
    -moz-transform:translate(0, 0);
    -ms-transition:-ms-transform 0.1s;
    -ms-transform:translate(0, 0);
    -o-transition:-o-transform 0.1s;
    -o-transform:translate(0, 0);
    transition:transform 0.1s;
    transform:translate(0, 0);
}

.sample .loader{
    position:absolute;
    width:32px;
    height:32px;
    top:50%;
    left:50%;
}

.sample .loader i{
    background:white url(../img/loader.gif) 4px 4px no-repeat;
    position:relative;
    top:-16px;
    left:-16px;
    width:32px;
    height:32px;
    display:block;

    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

.bookshelf .shelf .hover,
.bookshelf-row .hover,
.bookshelf .shelf .loading{
    z-index:2;
    cursor:none;
    background-color:white;
    -webkit-transform: scale3d(1.1, 1.1, 1) translate3d(0, -5px, 0);
    -moz-transform: scale3d(1.1, 1.1, 1) translate3d(0, -5px, 0);
    -ms-transform: scale3d(1.1, 1.1, 1) translate3d(0, -5px, 0);
    -o-transform: scale3d(1.1, 1.1, 1) translate3d(0, -5px, 0);
    transform: scale3d(1.1, 1.1, 1) translate3d(0, -5px, 0);
}

.bookshelf .thumb1,
.bookshelf-row .thumb1{
    background-image:url(../cardapios/wine/cover-mini.jpg);
    width: 85px;
    height:115px;
}

.bookshelf .thumb2,
.bookshelf-row .thumb2{
    background-image:url(../cardapios/menu/cover-mini.jpg);
    width:85px;
    height:115px;
}

.bookshelf .thumb3,
.bookshelf-row .thumb3{
    background-image:url(../cardapios/drink/cover-mini.jpg);
    width:85px;
    height:115px;
}

footer {
    font:14px helvetica, arial;
    line-height:100px;
    text-align:center;
    color:#666;
}

#logo {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}

.bookshelf .bottom-banner {
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
}

.bookshelf .bottom-banner img {
    max-width: 343px;
    width: 80%;
    height: 80%;
    max-height: 200px;
}

.title {
    font:12px Aleo, helvetica, arial;
    text-align:center;
    color:white;
}

.navigation{
    width:100%;
    height:60px;
    z-index:1000;
    background:white;
}

.navigation nav {
    width:1000px;
    margin:auto;
}

.navigation ul{
    width:1110px;
    margin-left:-50px;
}

.navigation li{
    width:20%;
    float:left;
    list-style:none;
    text-align:center;
    line-height:60px;
}

.footer {
    position:absolute;
    bottom:0;
    width:100%;
    text-align: center;
}

.footer p {
    font:12px Aleo, helvetica, arial;
    color:#333;
}

.footer p a {
    font:12px Aleo, helvetica, arial;
    color:white;
}

.navigation li a{
    font:16px Aleo, helvetica, arial;
    color:#333;
    padding:5px 10px;
}

.navigation li a:hover{
    text-decoration:none;
}

.navigation .hover,
.navigation .on{
    background:#333;
    color:white;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    text-decoration:none;
}

.fixed .navigation{
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    -o-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    position:fixed;
    top:0;
}

.fixed .navigation .go-up{
    display:block;
}

.samples{
    position:absolute;
    top:0;
    left:0;
    width:1000px;
    height:700px;
    display:none;
}

.show-samples .samples{
    display:block;
}

.samples .bar{
    height:100px;
    width:1000px;
    overflow:hidden;
    opacity:0;
    -webkit-transition:opacity 0.1s;
    -moz-transition:opacity 0.1s;
    -o-transition:opacity 0.1s;
    -ms-transition:opacity 0.1s;
    transition:opacity 0.1s;

}

.show-bar .bar{
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -o-transition:opacity 1s;
    -ms-transition:opacity 1s;
    transition:opacity 1s;
    opacity:1;
}

.show-bar .details{
    display:none;
}

.show-bar .bookshelf{
    display:none;
}

.turnjs-slider{
    opacity:0;
    -webkit-transition:opacity 0.1s;
    -moz-transition:opacity 0.1s;
    -o-transition:opacity 0.1s;
    -ms-transition:opacity 0.1s;
    transition:opacity 0.1s;
}

.show-bar .turnjs-slider{
    opacity:1;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -o-transition:opacity 1s;
    -ms-transition:opacity 1s;
    transition:opacity 1s;
}

.samples .share{
    margin-top:40px;
    text-align:center;
}

.samples .share .icon{
    margin:0 20px;
    cursor:pointer;
}

.samples .quit{
    background-position:-44px 0;
    cursor:default;
    position:absolute;
    right:0;
    top:45px;
}

.samples .quit:hover{
    background-position:-66px 0;
}

#book-wrapper{
    width:960px;
    height:600px;
    margin-left:20px;
    margin-right:20px;
}

header{
    width:1000px;
    margin:20px auto;
}

.content{
    width:1000px;
    margin:auto;
    font-family: "helvetica neue", helvetica, arial;
}

.fixed .content{
    padding-top:60px;
}

.content section{
    margin:100px 0;
    font-size:15px;
    color:#666;
}

.content li{
    padding:2px;
    line-height:30px;
}

.api-chart{
    width:100%;
    float:left;
}

.api-chart:after{
    content:".";
    clear:both;
    visibility:hidden;
}

.api-chart .column{
    width:20%;
    float:left;
}

.api-chart h4{
    font-weight:bold;
    color:#333;
    margin:10px 0;
}

.api-chart ul{
    margin:0;
    padding:0;
}

.api-chart li{
    list-style:none;
}

.api-chart a{
    padding:2px 10px;
    color:#666;
}

.api-chart a:hover{
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    background:#ddd;
    text-decoration:none;
    color:#333;
}

.browser-support{
    line-height:50px;
}

.browser-support:after{
    content:".";
    clear:both;
    visibility: hidden;
}

.browser-support span{
    float:left;
    margin-right: 20px;
}

.support{
    width:50px;
    height:44px;
    display:block;
    float:left;
    background:url(../pics/browser-support.gif);
}

.safari{
    background-position: 0 0;
}

.chrome{
    background-position: -50px 0;
}
.firefox{
    background-position: -100px 0;
}
.ie{
    background-position: -150px 0;
}

.simple-sample:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height:0;
}

.simple-sample .code{
    width:400px;
    float:left;
}

.simple-sample .sample{
    width:600px;
    line-height:250px;
    float:left;
    text-align:center;
}

.simple-sample .sample a{
    cursor:pointer;
}

.code pre{
    font: 14px "Menlo", monospace;
    margin:20px 0;
}

.code .number{
    color:#975186;
}

.code .tag{
    color:#6A976C;
}

.code .selector{
    color:#3A4F97;
}

.code .properties{
    color:#5B7297;
}

.code .string{
    color:#4C6797;
}

.code .script{
    color:#650D16;
}

.code .style{
    color:#9F0678;
}

.note{
    color:#999;
}