/* These styles are generated from project.scss. */

.alert-debug {
    color: black;
    background-color: white;
    border-color: #d6e9c6;
}

.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

body {
    background-image: url('/static/images/graph-paper.png');
    background-repeat: repeat;
    background-position: left top;
    color: #444;
    overflow-y: scroll;
}

.simpled-navbar {
    background-color: #ffffff;
    border-color: #e7e7e7;
    min-height: 80px;
}

#coffeeStain {
    float: left;
    width: 255px;
    height: 155px;
    position: absolute;
    top: 80px;
    left: 0px;
    z-index: -1;
    background-image: url('/static/images/coffee-stain.png');
}

h1 {
    font-family: 'Amatic SC', Arial;
    font-size: 3em;
    margin-bottom: 5px;
    text-align: left;
    margin-top: 20px;
}

h2 {
    font-family: 'Amatic SC', Arial;
    font-size: 2.5em;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: normal;
    color: #555;
}

hr.pencil {
    background: url('/static/images/pencil_line_horz_tile.png') 50% 0 repeat-x;
    height: 10px;
    width: 100%;
    border: 0;
    margin-bottom: 2em;
}

.breadcrumb {
    background: none;
}


/* FOOTER */

footer {
    margin-top: 5em;
    color: #999;
    background-image: url('/static/images/pencil-line-horz-tile.png');
    background-repeat: repeat-x;
    background-position: left top;
}

footer a {
    color: #555;
}



/* FRONT PAGE */

.frontSection {
    margin-top: 3rem;
}

.frontSection li {
    margin-bottom: 10px;
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0RGQTNGRjgzMENGMTFFNDhEOTZENjYwNjgxRDU4NjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0RGQTNGRjkzMENGMTFFNDhEOTZENjYwNjgxRDU4NjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozREZBM0ZGNjMwQ0YxMUU0OEQ5NkQ2NjA2ODFENTg2NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozREZBM0ZGNzMwQ0YxMUU0OEQ5NkQ2NjA2ODFENTg2NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI%2FPq2dno0AAADDSURBVHjalJFrDcUgDIXHVVAJSEACEpCAFBwgAQnLFCBhEsABOOhdCSxbN37sJF14nC%2B0ZwIRl89iEBwV6BgA6AL7Hm7%2BC6SOKsYYLKUgKaWEUkoyuDdIEuCcQ65938erlkOR9iEEfNO6rmQqHGr9Uzsz9TY1%2BX9nAgBLznka2AGd6wE197ZtU6jW%2BoichkRr7etcMcYRP%2FDI2%2F%2Fx3t8AmlMpdcbOoaVfFDJprVv1F%2Fy1M9E%2BQvAR9GWdx8w36Kv%2BAgwApFXoQYAmqpEAAAAASUVORK5CYII%3D);
}

.frontSectionCopy h1 {
    margin-bottom: .5em;
}

.headline {
    font-size: 4em;
    font-family: 'Amatic SC', Arial;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.subHeadline {
    text-align: center;
    font-family: Arial;
    margin-top: 0px;
    font-size: 1.5em;
}

.examples .example {
    margin-bottom: 20px;
}

.examples .example img {
    margin-bottom: 0;
    padding: 10px;
    border-radius: 0;
}

.examples .example p {
    text-align: center;
}

.testimonial {
    margin-bottom: 40px;
}

.testimonial .quote {
    display: inline-block;
    position: relative;
    background-color: #fff;
    padding: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 35px;
    min-height: 8rem;
}

.testimonial .quote:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 30px;
    bottom: -30px;
    border: 20px solid;
    border-color: #FFF transparent transparent #FFF;
}

.testimonial .author {
    font-style: italic;
    padding-left: 10px;
}


/* BUY PAGE */
.buyBox {
    height: 400px;
    background-image: url('/static/images/box-buy.png');
    background-repeat: no-repeat;
}

.buyButtonArea {
    padding-top: 10px;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.buyBoxContent {
    margin-top: 15px;
    margin-left: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    height: 370px;
}

.buyButtonComment {
    bottom: 0px;
    padding-top: 8px;
    color: #777;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}


/* TRIAL PAGE */
.downloadBox {
    background-image: url('/static/images/box.png');
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 250px;
    background-size: 100% 100%;
    padding: 1rem;
}

.downloadBox .form-wrapper {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* Library */
.library-tile-item {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
}

.library-tile-item .library-thumbnail-holder {
    position: relative;
    width: 300px;
    height: 200px;
    padding: 0px;
    margin: 0px;
    background: url('/static/images/thumbnail_background.png') no-repeat;
}

.library-tile-item .library-thumbnail-holder .library-thumbnail {
    margin: 10px 0px 0px 25px;
    width: 250px;
    height: 165px;
}

.library-tile-item .library-thumbnail-holder .library-thumbnail-tape {
    position: absolute;
    top: -35px;
    left: 135px;
}

.library-tile-item .library-info {
    display: flex;
    flex-direction: column;
    width: 250px;
    margin-left: 10px;
}
.library-tile-item .library-info .library-view-details {
    margin-bottom: 0.5rem;
}
.library-tile-item .library-title {
    width: 100%;
}


#libraryItem .library-sample-holder {
    margin-top: 39px;
    position: relative;
    border: 7px solid #eaeaea;
    width: 290px;
    background-color: #FFFFFF;
}


#libraryItem .library-sample-holder .library-sample {

    width: 250px;
    margin: 20px 13px 20px 13px;

}
#libraryItem .library-sample-holder .library-sample-tape {
    position: absolute;
    top: -45px;
    left: 115px;
}

#LibraryInfo {
    margin-top: 31px;
}
#libraryItem .libraryName {
    font-weight: bold;
    font-size: 1.8em;
    margin-bottom: .5em;
}