/* ------------------------------ Reset ------------------------------ */

    /* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, b, u, i, center,
    dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
    body { line-height: 1; background-color: #f7f7f7; }
    ol, ul, menu { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    table { border-collapse: collapse; border-spacing: 0; }

    html, button, input, select, textarea { font-family: "Helvetica Neue", "Arial" , sans-serif; color: #333; }
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    a { text-decoration: none; /* color: #256295; */ }
    a:hover { text-decoration: underline; }
    img { vertical-align: middle; max-width: 100%; height: auto; }
    iframe, object { vertical-align: middle; max-width: 100%; }
    textarea { resize: vertical; }
    video { width: 100% !important; height: auto !important; }

    h1 { font-size: 2em; }
    h2 {font-size: 1.2em; }
    h3 { font-size: 1em; }
    h4 { font-size: 1em; }
    h5 { font-size: 0.83em; }
    h6 { font-size: 0.67em; }

    strong { font-weight: bold; }
    em, i { font-style: italic; }
    .underline { text-decoration: underline; }

    ::-webkit-input-placeholder { color: #666; }
    ::-moz-placeholder { color: #666; }
    :-ms-input-placeholder { color: #666; }
    input:-moz-placeholder { color: #666; }

    /* --- Movies Styles --- */
    body { background-color: #fff; font-family: arial; }
    * { box-sizing: border-box; }


/* --- Movie and TV Embeds, see also: /public/styles/main.css --- */

    .cb_embed {
        margin-bottom: 20px;
        min-height: 342px;
    }

    .embed_preview {
        margin-top: 40px;
    }

    .embed_preview > div:not(.embed) {
        width: 80%;
        max-width: 800px;
        margin: 40px auto;
    }

    .embed_preview > legend {
        font-family: "Oswald", "Helvetica Neue", "Arial" , sans-serif;
        margin-bottom: 0.5em;
    }

    .embed {
        background-color: #fff;
        border: solid 1px #ddd;
        padding: 10px 10px 0;
        width: 100%;
        max-width: 585px;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 20px #ddd;
        position: relative;
    }
    .article-content > .embed {
        margin-bottom: 20px;
    }

        .embed > a { text-decoration: none; color: #0059B2; }
        .embed > .blank { background-color: #bbb; }
        .embed > .image { width: 75px; height: auto; float: left; margin-bottom: 10px }
        .embed > .image > img { max-width: 100%; height: auto; display: block; }

        .embed > .title { padding: 5px 0; margin-left: 85px; }
        .embed > .title > h1 { font-size: 1.6em; display: inline-block; margin-right: 5px; font-weight: 400; font-family: "Oswald", "Helvetica Neue", "Arial", sans-serif; }
        .embed > .title > h1 > .year { font-family: "Arial"; font-size: 0.75em; color: #999; display: inline; font-weight: 300; margin-left: 0.5em;}

        .embed > .title .rating { margin-top: 5px; }
        .embed > .title .rating > p { color: #999; margin-bottom: 5px; font-family: "Oswald", "Helvetica Neue", "Arial" , sans-serif; font-weight: 300; }
        .embed > .title .rating > .movie-score { font-size: 3em; font-weight: 100; display: block; margin-bottom: 10px; font-family: "Helvetica Neue", "Arial", sans-serif; }


        .embed > .movietickets { font-family: "Helvetica Neue", "Arial", sans-serif; font-weight: 100; font-size: 1.1em; background-color: #ddd; display: block; margin: 0 10px 0 0; padding-bottom: 8px; color: #0059B2; font-weight: 300; text-align: center; width: 150px; display: block; clear: both; padding: 10px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; transition: all 200ms ease; }
        .embed > .movietickets > b { color: #333; vertical-align: baseline; }
        .embed > .movietickets > span { display: block; font-size: 0.5em; color: #808080; text-align: left; margin-left: 36px; margin-top: 3px; }
        .embed > .movietickets > span > span { color: #0059B2; }
        .embed > .movietickets > a:hover { text-decoration: none; background: rgba(51, 51, 51, .9) none repeat scroll 0 0; }


        .embed > .title > .rating > .rank,
            .embed > .rating-container > .rating-half > .rank { display: inline-block; color: #fff; background-color: #256295; border-radius: 3px; padding: 3px 8px; margin-right: 8px; font-size: 1em }

        .embed > .rating-container { clear: both; overflow: hidden; margin: 10px 0 0; }
        .embed > .rating-container > .rating-half { padding: 0px 5px; line-height: 20px; width: 100%; display: block; vertical-align: top; }
        .embed > .rating-container > .stars { background-color: #eee; padding: 5px 15px; line-height: 40px; font-size: 1em;  font-family: "Oswald", "Helvetica Neue", "Arial" , sans-serif; color: #666; letter-spacing: normal; max-width: 213px; margin-bottom: 10px; }
        .embed > .rating-container > .stars > a { color: #666; }
        .embed > .rating-container > .stars > .icon-star { font-size: 1.1em; color: #999; }
        .embed > .rating-container > .stars > .icon-star:first-of-type { margin-left: 0.5em; }
        .embed > .rating-container > .stars > .icon-star:hover { color: #dbcb19; text-decoration: none; }
        .embed > .rating-container > .stars > .movieyellow,
            .embed > .rating-container > .stars > .starselected { color: #dbcb19; }
        .embed > .rating-container > .rating-half > .user-ranking { margin-right: 10px; color: #666; font-size: 1em; display: inline-block; font-weight: 200; font-family: 'Helvetica Neue', Arial, sans-serif; }

        .embed > .footer { border-top: solid 1px #ddd; padding: 5px 5px 10px; line-height: 32px; margin-top: 10px; }
        .embed > .footer > a > .comicbook-logo { display: block; background: url(http://media.comicbook.com/uploads1/2015/04/comicbook-logo-132774.png); text-indent: -9999px; background-size: 100% 100%; width: 150px; height: 35px; float: right; }

        @media only screen and (min-width: 420px) {
            .embed.tickets > .title { width: 288px; }
            .embed > .title { width: 100%; }
        }

        @media only screen and (min-width: 542px) {
            .embed > .image { width: 110px; }
            .embed > .title { margin-left: 120px; }
            /*.embed > .movietickets { position: absolute; right: 0; top: 10px; margin-left: 120px; }*/
            .embed > .rating-container > .rating-half { display: inline-block; max-width: 233px; }
            .embed > .rating-container > .stars { margin-right: 1em }
            .embed > .rating-container > .rating-half > .user-ranking { display: block; margin-top: 0; }
        }

        @media only screen and (min-width: 540px) {
            .embed > .movietickets { position: absolute; right: 0; top: 10px; margin-left: 120px; }
        }