contents.css

@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,400,700);

html, body
{
    margin: 0;
}

body
{
    padding: 20px;
    font-family: "Lato", Arial, Sans-Serif;
    color: #555;
    margin: 0 auto;
}

#left
{
    top: 20;
    left: 20;
    position: absolute;
    width: 230px;
    white-space: nowrap;
}

aside
{
    top: 50px;
    right: 15px;
    position: fixed;
    margin-top: 50px;
    width: 85px;
    vertical-align: middle;
    z-index: 100;
}




#accord-logo
{
    position: fixed;
    left: -100px;
    top: -200px;
    font-size: 500pt;
    color: ThreeDShadow;
    font-weight: 100;
    text-shadow: 3px 5px 10px ThreeDShadow;
    font-family: Cambria;
    opacity: 0.1;
    cursor: default;
    z-index: -999999;
}

header h1
{
    padding: 0;
    margin-top: 50px;
    margin-left: 120px;
}



#li-intro
{
    background-image: url('../images/metro/appbar.beer.png');
}

#li-samples
{
    background-image: url('../images/metro/appbar.candy.cane.png');
}

#li-publications
{
    background-image: url('../images/metro/appbar.draw.pen.reflection.png');
}

#li-docs
{
    background-image: url('../images/metro/appbar.book.hardcover.open.png');
}

#li-license
{
    background-image: url('../images/metro/appbar.heart.png');
}

#li-issues
{
    background-image: url('../images/metro/appbar.bug.remove.png');
}

#li-contribute
{
    background-image: url('../images/metro/appbar.cloud.upload.png');
}

#li-forums
{
    background-image: url('../images/metro/appbar.speakerphone.png');
}

#li-faq
{
    background-image: url('../images/metro/appbar.question.png');
}

#li-contact
{
    background-image: url('../images/metro/appbar.email.hardedge.png');
}

#li-projects
{
    background-image: url('../images/metro/appbar.globe.png');
}

#li-about
{
    background-image: url('../images/metro/appbar.information.png');
}



.google-plus
{
    margin-left: 70px;
    display: block;
    width: 150px;
}

#download-buttons ul
{
    list-style: none;
    height: 100px;
    padding: 0;
}

#download-buttons
{
    margin-left: 25px;
}

    #download-buttons li
    {
        border-right: 1px solid #d2d2d2;
        height: 40px;
        margin-top: 10px;
        padding: 0;
        background: #eee;
        background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
        background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
        background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
        background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
        background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
        border-radius: 5px;
        border: 1px solid #d2d2d2;
        box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
        width: 160px;
    }

    #download-buttons ul a
    {
        line-height: 1;
        font-size: 11px;
        color: #999;
        display: block;
        text-align: left;
        padding-left: 15px;
        padding-top: 6px;
        height: 40px;
    }

    #download-buttons .version
    {
        float: right;
        margin-right: 15px;
        margin-top: -21px;
        height: 20px;
        padding-top: 4px;
        padding-left: 15px;
        vertical-align: middle;
        border-left: 1px solid #d2d2d2;
    }

    #download-buttons ul a strong
    {
        font-size: 14px;
        display: block;
        color: #222;
    }



.clearfix:after
{
    clear: both;
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
}


article
{
    min-height: 300px;
    text-align: justify;
}

article p
{
    color: #777;
    font-size: 15px;
    font-weight: normal;
    margin-top: 0;
}

article li
{
    margin-right: 20px;
    margin-top: 10px;
}



article h1
{
    margin-top: 30px;
    font-size: 16pt;
}

article h2
{
    font-size: 12pt;
}

article h3
{
    font-size: 10pt;
}

article .video
{
    text-align: center;
}

article .navigation li
{
    margin-right: 20px;
    margin-top: 2px;
}

article table
{
    display: block;
    margin-left: 20px;
    margin-right: auto;
    margin-bottom: 10px;
}

article img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}


article .fixed
{
    max-width: 800px;
}

#intro ul
{
    font-size: 14px;
}

#intro strong
{
}



#samples
{
    max-width: 1200px;
}

#samples h1
{
    clear: both;
    width: 100%;
}

#samples section
{
    display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* Firefox 19- */
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Chrome */
    display: flex; /* Opera 12.1, Firefox 20+ */ /* iOS 6-, Safari 3.1-6 */
    -webkit-box-orient: horizontal;
    -webkit-box-pack: justify;
    -webkit-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ /* Firefox 19- */
    -moz-flex-flow: row wrap;
    -moz-justify-content: space-between;
    -moz-box-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ /* Chrome */
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: space-between; /* IE10 */
    -ms-flex-flow: row wrap;
    -ms-justify-content: space-between; /* Opera 12.1, Firefox 20+ */
    flex-flow: row wrap;
    justify-content: space-between;
}

.sample-app
{
    display: block;
    width: 330px;
    height: 250px;
    color: Black;
    overflow: hidden;
    display: inline-block;
    border-right: 1px solid #d2d2d2;
    margin-right: 10px;
    margin-top: 10px;
    padding: 10px;
    background: #eee;
    background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
    background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    border-radius: 5px;
    border: 1px solid #d2d2d2;
    box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
    -webkit-box-flex: auto; /* iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1.0; /* Firefox 19- */
    -webkit-flex: auto; /* Chrome */
    -ms-flex: auto; /* IE10 */
    flex: auto; /* Opera 12.1, Firefox 20+ */
}


/* Workaround until Firefox implements flex-wrap properly:
   https://bugzilla.mozilla.org/show_bug.cgi?id=702508 */

@supports not (flex-wrap: wrap)
{
    #samples section
    {
        display: inherit;
        vertical-align: middle;
        text-align: center;
    }

    .sample-app
    {
        flex: none;
        display: inline-block;
    }
}

.sample-app p
{
    font-size: 10pt;
    line-height: 11pt;
}

.sample-app img
{
    display: block;
    margin: 0 auto 20px auto;
    max-width: 90%;
    max-height: 90%;
}

.sample-app iframe
{
    text-align: center;
    display: block;
    margin: 0 auto 20px auto;
    width: 95%;
}

.sample-app h2
{
    margin-top: 0;
    font-size: 12pt;
}

.sample-links
{
    margin-bottom: 4px;
}

.sample-links ul
{
    list-style-type: none;
    padding-left: 5px;
}

.sample-links li
{
    font-size: 12px;
    line-height: 14px;
}




#faq :first-child
{
    margin-top: 0;
}

#faq h1
{
    margin-top: 50px;
    font-size: 12pt;
}

#faq p
{
    font-weight: 300;
    margin-left: 20px;
}

#faq ul
{
    margin-left: 20px;
}



#license :first-child
{
    margin-top: 0;
}

#license h1
{
    margin-top: 50px;
}

#license h2
{
    margin-top: 50px;
    font-size: 12pt;
}

    #license h2 + p
    {
        font-weight: 300;
        margin-left: 20px;
    }


#publications ul, ol
{
    font-size: 14px;
}

#publications p + ul, p + ol
{
    margin-top: 25px;
}


#comments
{
    margin-top: 50px;
}





footer
{
    margin: 50px 100px 0 230px;
    clear: both;
    text-align: right;
    border-top: 1px solid #d2d2d2;
    height: 50px;
}

    footer p
    {
        font-size: small;
    }


@media print, screen and (max-width: 960px)
{

    div#content-wrapper
    {
        width: auto;
        margin: 0;
    }

    header, article, footer
    {
        float: none;
        position: static;
        width: auto;
    }

    header
    {
        padding-right: 320px;
    }

    article
    {
        border: 1px solid #e5e5e5;
        border-width: 1px 0;
        padding: 20px 0;
        margin: 0 0 20px;
    }

    header a small
    {
        display: inline;
    }

    header ul
    {
        position: absolute;
        right: 50px;
        top: 52px;
    }
}

@media print, screen and (max-width: 720px)
{
    body
    {
        word-wrap: break-word;
    }

    header
    {
        padding: 0;
    }

        header ul, header p.view
        {
            position: static;
        }

    pre, code
    {
        word-wrap: normal;
    }
}

@media print, screen and (max-width: 480px)
{
    body
    {
        padding: 15px;
    }

    header ul
    {
        display: none;
    }
}

@media (max-width: 680px)
{
    aside
    {
        display: none;
    }

    #middle
    {
        padding-right: 0;
    }
}

@media print
{
    body
    {
        padding: 0.4in;
        font-size: 12pt;
        color: #444;
    }
}



/* Sample gallery */

.thumbnails
{
    text-align: left;
    padding-left: 0;
}

.modal-body
{
    max-height: 80%;
}

.modal img
{
    max-width: 100%;
    max-height: 300px;
}

.modal-dialog
{
    width: 800px;
}

@media (max-width: 768px)
{
    .modal
    {
        width: 90%;
        margin-left: 2%;
    }
}

.filter
{
}