/* DEFINING FONTS */
            @font-face {
                font-family: RockLight;
                src: local("Rockwell MT Light");
            }
            @font-face {
                font-family: Rock;
                src: local("Rockwell");
            }

            body, html {
                height:100%;
                width:100%;
                margin:0;
                padding:0;
                border:0;
            }
            body {
                font-family:Rock, Tahoma, Consolas, arial, sans-serif;
                font-size:1.3em;
                background-image:url("../lib/img/bluesquares.png");
                background-size:cover;

            }


            .display-container {
                position: fixed;
                height: 60%;
                top:17%;
                width: 100%;
                color: #FFFFFF;
                padding-top: 3em;
            }

            .display-container .header-container {
                width:100%;
                padding:0 200px;
                box-sizing:border-box;
                white-space:nowrap;
            }


            .display-container h3 {
                text-align:center;
                letter-spacing:0.1em;
                font-size:2em;
                font-family:RockLight;
                display:inline-block;
                opacity:0.6;
                margin:0;
                padding:0;
            }

            .display-container p {
                padding: 1em 7em 0 10em;
                line-height:137%;
            }

            .display-container img {
                margin : 0 2em 0 0;
                display: inline-block;
                height: 2em;
                background: #177BC0;
                padding:5px 18px;
                border-radius:5px;
                vertical-align:bottom;
                border: 1px solid #EAEAEA;


            }

            .browse {
                width:88px;
                height:100%;
                position:fixed;
                left:0;
                z-index:99999;
                background:#EFE9E4;
                overflow:scroll;
                overflow-x:hidden;
            }

            .browse a {
                display:block;
                padding:0;
                padding-top:5px;
                margin:0;
                border-bottom:2px solid #000;
                border-top:1px solid #645564;
                height:30px;
                background-color:#323232;
                

            }

            .browse a:hover {
                background-color:#177bc0;
                transition:background-color .1s ease-in;
            }
            .browse a.selected {
                background-color:#177BC0; 
            }

            .browse a img {
                height:28px;
                margin:auto;
                padding:0;
                border:0;
                display:block;
                width: 28px;
            }


            /* navigation */

            .navigator {
                z-index:99999;
                position:fixed;
                height:100px;
                background-color: none;
                width:100px;
                top:40%;
                border-radius:50%;
                text-align:center;
                padding:20px;
                font-size:4em;
                font-weight:bold;
                color:#FFFFFF;
                font-family:arial;
                opacity:0.4;
                box-sizing:border-box;
                transition:opacity ease-out .2s;
            }
            .navigator:hover {
                cursor:pointer;
                transition:color ease-in .1s, opacity ease-in .2s;
                opacity:0.9;

            }

            #nav-prev.navigator {
                left:100px;
            }
            #nav-next.navigator {
                right:0;
            }