@import url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Narrow|PT+Serif&subset=cyrillic,latin);

html {
    height: 100%;
    overflow-y: scroll;
}
body {
    margin: 0;
    padding: 0;
    background-color: #444;
    color: #333;
    font-family: 'PT Serif', serif;
    height: 100%;
}
h1 {
	font-family: 'PT Sans', sans-serif;
	font-variant: small-caps;
	text-transform: lowercase;
    border-bottom: 1px solid #eee;
}
h4 {
	font-family: 'PT Sans', sans-serif;
}

header {
    background: rgba(255, 0,0, 0.3);
    color: red;
    height: 40px;
    position: fixed;
    top: 0px;
    left: 0px; right: 0px;
}
body>footer {
    height: 40px;
    position: fixed;
    left: 0px; right: 0px;
    bottom: 0px;

    background: rgba(255, 0,0, 0.3);
    color: red;
}

#page-nav {
    height: 40px;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;

    text-align: center;
    }
    #page-nav ul {
        margin: 0;
        padding: 10px; 
        list-style: none;
        }
        #page-nav ul li {
            display: inline;
            padding: 0 3px;
            }
            #page-nav ul li a {
                color: #80A1BF;
                padding: 1px 10px;
                background: #5873a0;
                border: 1px solid #80A1BF;
                font-size: 10px;
                text-decoration: none;
            }
            #page-nav ul li.selected a {
                color: #bbb;
                font-weight: bold;
                box-shadow: 0 0 30px white;
            }

.transition * {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#book {
    /*background: url("images/book_big.jpg") no-repeat;*/
    position: absolute;
    left: 50%;
    top: 50%;
}

canvas#pageflip {
    position: absolute;
    z-index: 1010;
}
.debug canvas#pageflip {
    border: 1px dotted orange;
}


.debug #pages section {
    border: 1px dashed yellow;
}
#pages section {
    background: url(images/paper.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    /*
    width: 850px;
    height: 600px;
    left: 885px;
    top: 10px;
    */
    overflow: hidden;
    position: absolute;
    }
    .debug #pages section .container {
        border: 1px dotted red;
    }
    #pages section .container {
        overflow: hidden;
        padding: 0;
        /*
        width: 850px;
        height: 600px;
        */
        font-size: 1.3em;
        }
        #pages section .container>div {
            padding: 1em 2em 0 3em;
            /*text-align: justify;*/
        }
        #pages section .container blockquote {
            text-align: right;
            color: #666;
        }
#pages section#last-page {
    background: url(images/last-page.jpg) no-repeat;
    background-size: 100% 100%;
}
#pages section#last-page>div {
    color: #558;
    font-size: 5em;
    text-align:center;
    text-shadow: -1px -1px 1px #88a;
    background: none;
    padding: 1em 0 0 0;
}


#pages section>div#front-cover {
    background-color: #7893C1;
    padding:0;
    margin:0;
}    




#pagination-prev div.arrow,
#pagination-next div.arrow {
    background: url('http://www.20thingsilearned.com/css/images/sprites.png') no-repeat top left transparent;
}

#pagination-prev {
    cursor: pointer;
    position:absolute;
    z-index:1500;
    top:50%;
    left:0;
    }
    #pagination-prev a {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    #pagination-prev div.arrow {
        position: absolute;
        top: 50%;
        margin-top: -35px;
        background-position:-366px -189px;
        width:42px;
        height:70px;
        text-indent:-10000em;
    }
    #pagination-prev:hover div.arrow {
        background-position:-366px -290px;
    }
    #pagination-prev:active div.arrow {
        background-position:-366px -390px;
    }
#pagination-next {
    position:absolute;
    z-index:1500;
    top:50%;
    right:0px;
    margin-top: -35px;
    }
    #pagination-next div.arrow {
        background-position:-471px -189px;
        width:42px;
        height:70px;
        text-indent:-10000em;
    }
    #pagination-next:hover div.arrow {
        background-position:-471px -290px;
    }
    #pagination-next:active div.arrow {
        background-position:-471px -390px;
    }

#pages .experts {
    }
    #pages .experts {
        /* font-size: 0.8em; */
    }
    #pages .experts img {
        height: 14em;
        float: left;
        margin-right: 1em;
        border: 1px solid #eee;
    }
    #pages .experts .person {
        }
        #pages .experts .person dt {
            font-weight: bold;
        }
        #pages .experts .person dd.title {
            font-size: 1em;
            font-variant: small-caps;
            text-transform: lowercase;
            font-family: "PT Sans Narrow", "PT Sans", sans-serif;
            margin-bottom: 1em;
        }
        #pages .experts .person dd {
            font-size: 0.8em;
            margin-bottom: 0.5em;
        }

    #pages .experts .contact {
        padding-top: 1em;
        clear:both;
        }
        #pages .experts .contact dt {
            font-variant: small-caps;
            text-transform: lowercase;
            font-family: "PT Sans Narrow", "PT Sans", sans-serif;
            display: inline;
        }
        #pages .experts .contact dd {
            font-size: 0.8em;
            display: inline;
            border: 1px solid #eee;
            padding: 0 0.3em;
            margin: 0 0.3em 0 0;
        }
        #pages .experts .contact dd.phone:before {
            content: "☎";
            margin-right: 0.2em;
        }
        #pages .experts .contact dd.email:before {
            content: "@";
            margin-right: 0.2em;
        }


#pages .clients {
    }
    #pages .clients dt {
    }
    #pages .clients dd {
        font-variant: small-caps;
        text-transform: lowercase;
        font-family: "PT Sans Narrow", "PT Sans", sans-serif;
        margin-bottom: 0.5em;
    }

#pages ul.contacts {
    list-style: none;
    padding: 0;
    margin-bottom: 0.5em;
}