CSS Dinner

1 - Type Selector---config.json

{
    "doThis": "Select the plates",
    "selector" : "plate",
    "boardMarkup": "<plate></plate><plate></plate>"
}

1 - Type Selector---main.tour

{
  "title": "CSS Dinner",
  "description": "CSS Dinner",
  "steps": []
}

1 - Type Selector---README.md

Type Selector

Select elements by their type. Selects all elements of type A. Type refers to the type of tag, so div, p and ul are all different element types.

Examples

• div selects all div elements.
• p selects all p elements.

2 - Type Selector---config.json

{
    "doThis": "Select the bentos",
    "selector" : "bento",
    "boardMarkup": "<bento></bento><plate></plate><bento></bento>"
}

2 - Type Selector---README.md

Type Selector

Select elements by their type. Selects all elements of type A. Type refers to the type of tag, so div, p and ul are all different element types.

Examples

• div selects all div elements.
• p selects all p elements.

3 - ID Selector---config.json

{
    "doThis": "Select the fancy plate",
    "selector" : "#fancy",
    "boardMarkup": "<plate id='fancy'></plate><plate></plate><bento></bento>"
}

3 - ID Selector---README.md

ID Selector

Selects the element with a specific id. You can also combine the ID selector with the type selector.

Examples

• #cool selects any element with id="cool"
• ul#long selects ul id="long"

4 - Desecendant Selector---config.json

{
    "doThis": "Select the apple on the plate",
    "selector" : "plate apple",
    "boardMarkup": "<bento></bento><plate><apple/></plate><apple></apple>"
}

4 - Desecendant Selector---README.md

Descendant Selector

A + B selects all B inside of A. B is called a descendant because it is inside of another element.

Examples

• p strong selects all strong elements that are inside of any p
• ul#long selects ul id="long"

5 - Descendant & ID Selector---config.json

{
    "doThis": "Select the pickle on the fancy plate",
    "selector" : "#fancy pickle",
    "boardMarkup": "<bento><orange></orange></bento><plate id='fancy'><pickle></pickle></plate><plate><pickle></pickle></plate>"
}

5 - Descendant & ID Selector---README.md

Combine the Descendant & ID Selectors

#id A

You can combine any selector with the descendent selector.

Examples

#cool span selects all span elements that are inside of elements with id="cool"

6 - Class Selector---config.json

{
    "doThis": "Select the small apples",
    "selector" : ".small",
    "boardMarkup": "<apple></apple><apple class='small'></apple><plate><apple class='small'></apple></plate><plate></plate>"
}

6 - Class Selector---README.md

Class Selector

Select elements by their class

.classname

The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes.

Examples

.neato selects all elements with class="neato"

7 - Class Selector---config.json

{
    "doThis": "Select the small oranges",
    "selector" : "orange.small",
    "boardMarkup": " <apple></apple><apple class='small'></apple><bento><orange class='small'></orange></bento><plate><orange></orange></plate><plate><orange class='small'></orange></plate>"
}

7 - Class Selector---README.md

Combine the Class Selector

A.className

You can combine the class selector with other selectors, like the type selector.

Examples

• ul.important selects all ul elements that have class="important"
• #big.wide selects all elements with id="big" that also have class="wide"

canvas.html

<link href="style.css" rel="stylesheet" />

<h2 class="order"></h2>

<div class="game-wrapper">
    <div class="table-wrapper">
        <div class="table-surface"></div>
        <div class="nametags"></div>
        <div class="table"></div>
    </div>
    <div class="table-edge">
        <div class="table-leg"></div>
        <div class="table-leg"></div>
    </div>
</div>

<div class="editor">
    <div class="editor-pane html-view">
        <div class="file-window">
            <div class="line-numbers">
                1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16
            </div>
            <div class="markup"></div>
        </div>
    </div>
</div>

<div class="helper"></div>

<script type="text/javascript" src="script.js"></script>

line.gif

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": ["httonts.googleapis.com/css?family=Satisfyps://f"],
  "tutorial": "CSS Diner",
  "readmeBehavior": "inputComment",
  "layout": "splitLeft",
  "input": {
    "fileName": "selector.css",
    "prompt": "<< Type the CSS selector that solves this challenge",
    "completionMessage": "Awesome job! You're now a CSS expert."
  }
}

script.js

$(document).ready(() => {
    $(".table").on("mouseover", "*", function (e) {
        e.stopPropagation();
        showTooltip($(this));
    });

    $(".markup").on("mouseover", "div *", function (e) {
        el = $(this);
        const markupElements = $(".markup *");
        const index = markupElements.index(el) - 1;
        showTooltip($(".table *").eq(index));
        e.stopPropagation();
    });

    $(".markup").on("mouseout", "*", (e) => {
        hideTooltip();
        e.stopPropagation();
    });

    $(".table").on("mouseout", "*", (e) => {
        hideTooltip();
        e.stopPropagation();
    });

    $(".table-wrapper,.table-edge").css("opacity", 0);

    setTimeout(function () {
        loadLevel();
        $(".table-wrapper,.table-edge").css("opacity", 1);
    }, 50);
});

function checkResults(ruleSelected, levelSelected, rule) {
    const ruleTable = $(".table").clone();
    ruleTable.find(".strobe").removeClass("strobe");
    ruleTable.find(rule).addClass("strobe");
    return ($(".table").html() == ruleTable.html());
}

function getMarkup(el) {
    const hasChildren = el.children.length > 0 ? true : false;
    const elName = el.tagName.toLowerCase();
    const wrapperEl = $("<div/>");
    let attributeString = "";
    $.each(el.attributes, () => {
        if (this.specified) {
            attributeString = attributeString + ' ' + this.name + '="' + this.value + '"';
        }
    });
    let attributeSpace = "";
    if (attributeString.length > 0) {
        attributeSpace = " ";
    }
    if (hasChildren) {
        wrapperEl.text("<" + elName + attributeSpace + attributeString + ">");
        $(el.children).each((i, el) => {
            wrapperEl.append(getMarkup(el));
        });
        wrapperEl.append("&lt;/" + elName + "&gt;");
    } else {
        wrapperEl.text("<" + elName + attributeSpace + attributeString + " />");
    }
    return wrapperEl;
}

function loadBoard() {
    const markupHolder = $("<div/>")

    $(window.config.boardMarkup).each((i, el) => {
        if (el.nodeType == 1) {
            const result = getMarkup(el);
            markupHolder.append(result);
        }
    });

    $(".table").html(window.config.boardMarkup);
    addNametags();
    $(".table *").addClass("pop");

    $(".markup").html('<div>&ltdiv class="table"&gt' + markupHolder.html() + '&lt/div&gt</div>');
}

function addNametags() {
    $(".nametags *").remove();
    $(".table-wrapper").css("transform", "rotateX(0)");
    $(".table-wrapper").width($(".table-wrapper").width());

    $(".table *").each(function () {
        if ($(this).attr("for")) {
            const pos = $(this).position();
            const width = $(this).width();
            const nameTag = $("<div class='nametag'>" + $(this).attr("for") + "</div>");
            $(".nametags").append(nameTag);
            const tagPos = pos.left + (width / 2) - nameTag.width() / 2 + 12;
            nameTag.css("left", tagPos);
        }
    });

    $(".table-wrapper").css("transform", "rotateX(20deg)");
}

function loadLevel() {
    loadBoard();
    resetTable();

    $(".order").text(window.config.doThis);

    setTimeout(() => {
        $(".table " + window.config.selector).addClass("strobe");
        $(".pop").removeClass("pop");
    }, 200);
}

function resetTable() {
    $(".display-help").removeClass("open-help");
    $(".clean,.strobe").removeClass("clean,strobe");
    $(".clean,.strobe").removeClass("clean,strobe");
    $("input").addClass("input-strobe");
    $(".table *").each(() => {
        $(this).width($(this).width());
    });

    const tableWidth = $(".table").outerWidth();
    $(".table-wrapper, .table-edge").width(tableWidth);
}

function hideTooltip() {
    $(".enhance").removeClass("enhance");
    $("[data-hovered]").removeAttr("data-hovered");
    $(".helper").hide();
}

function showTooltip(el) {
    el.attr("data-hovered", true);
    const tableElements = $(".table *");
    const index = tableElements.index(el);
    const that = el;
    $(".markup > div *").eq(index).addClass("enhance").find("*").addClass("enhance");
    const helper = $(".helper");

    const pos = el.offset();

    helper.css("top", pos.top - 65);
    helper.css("left", pos.left + (el.width() / 2));

    let helpertext;

    console.log("Three");
    const elType = el.get(0).tagName.toLowerCase();
    helpertext = '<' + elType;

    let elClass = el.attr("class");

    if (elClass) {
        if (elClass.indexOf("strobe") > -1) {
            elClass = elClass.replace("strobe", "");
        }
    }

    if (elClass) {
        helpertext = helpertext + ' class="' + elClass + '"';
    }

    const elFor = el.attr("for");

    if (elFor) {
        helpertext = helpertext + ' for="' + elFor + '"';
    }

    const id = el.attr("id");
    if (id) {
        helpertext = helpertext + ' id="' + id + '"';
    }

    helpertext = helpertext + '></' + elType + '>';
    helper.show();
    helper.text(helpertext);
}

function checkInput(rule) {
    if (rule === ".strobe") {
        rule = null;
    }

    $(".shake").removeClass("shake");

    $(".strobe,.clean,.shake").each(() => {
        $(this).width($(this).width());
        $(this).removeAttr("style");
    });

    const baseTable = $('.table');

    try {
        $(".table").find(rule).not(baseTable);
    }
    catch (e) {
        rule = null;
    }

    const ruleSelected = $(".table").find(rule).not(baseTable);            // What the correct rule finds
    const levelSelected = $(".table").find(window.config.selector).not(baseTable); // What the person finds

    let win = false;

    if (ruleSelected.length == 0) {
        $(".editor").addClass("shake");
    }

    if (ruleSelected.length == levelSelected.length && ruleSelected.length > 0) {
        win = checkResults(ruleSelected, levelSelected, rule);
    }

    if (win) {
        ruleSelected.removeClass("strobe");
        ruleSelected.addClass("clean");

    } else {
        ruleSelected.removeClass("strobe");
        ruleSelected.addClass("shake");

        setTimeout(() => {
            $(".shake").removeClass("shake");
            $(".strobe").removeClass("strobe");
            levelSelected.addClass("strobe");
        }, 500);
    }

    return win;
}

style.css

.table-wrapper {
    margin-top: 10px;
    transform: rotateX(20deg);
    min-height: 92px;
    transform-origin: bottom;
    z-index: 9999;
    position: relative;
    margin: 10px auto 0 auto;
    width: 250px;
}

.table {
    transform-style: preserve-3d;
    outline: solid 1px transparent;
    margin: 0px auto 0px auto;
    min-height: 112px;
    padding: 15px 15px 22px 15px;
    display: inline-block;
    z-index: 999;
    position: relative;
    white-space: nowrap;
}

.table-surface {
    box-shadow: 0px 40px 10px rgba(0, 0, 0, .2);
    background: #dd992d;
    background: -webkit-linear-gradient(#dd992d, #cd8c26);
    background: linear-gradient(#dd992d, #cd8c26);
    position: absolute;
    height: 100%;
    bottom: 0;
    width: 100%;
}

.table plate {
    z-index: 99999;
}

.table-edge {
    width: 250px;
    margin: 0 auto 10px auto;
    background: #ac741c;
    height: 15px;
    transform: rotateX(-40deg);
    transform-origin: top;
    z-index: 2;
}

.table-leg {
    width: 24px;
    height: 10px;
    background: #84570f;
    position: absolute;
    top: 15px;
}

.table-leg:first-child {
    left: 20px;
}

.table-leg:last-child {
    right: 20px;
}

orange,
apple,
pickle,
bento,
plate {
    transition: transform ease-out .2s;
}

.pop {
    animation: pop .2s;
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: scale(.3);
        transform-origin: center;
    }

    60% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}




.clean {
    animation: cleanme .2s 1;
    transform: translateY(-600px);
}

@keyframes cleanme {
    0% {
        transform: translateY(0px) rotate3d(0, 0, 0, 0deg);
    }

    100% {
        transform: translateY(-600px) rotate3d(0, 0, 0, 0deg);
    }
}

bento,
plate {
    box-shadow: 0px 8px 0px rgba(0, 0, 0, .1);
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    position: relative;
}

plate {
    border-bottom: solid 5px #DDD;
    background: white;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}

bento {
    height: 100px;
    background: brown;
    position: relative;
    border: solid 3px #711c12;
    border-width: 20px 2px;
}



plate bento {
    height: 74px;
    width: 74px;
    position: absolute;
    top: -8px;
    left: 4px;

}

plate bento apple,
plate bento orange {
    top: -36px !important;
}

bento:before {
    content: "";
    position: absolute;
    width: calc(100%);
    top: 0;
    left: 0;
    border: solid 10px rgba(0, 0, 0, .1);
    border-width: 10px 0 0 0px;
}

.markup {
    line-height: 150%;
    font-family: menlo;
    z-index: 1;
}


@-webkit-keyframes input {
    50% {
        background: none;
    }
}

@-moz-keyframes input {
    50% {
        background: none;
    }
}

.editor input:focus {
    outline: none;
    border-color: #555;
}

apple {
    background: #e41919;
    border-color: #ab1212;
}

orange {
    background: orange;
    border-color: #bd6e07;
}

orange,
apple,
pickle {
    box-shadow: 0px 5px 0px rgba(0, 0, 0, .2);
    display: inline-block;
    margin: 0 10px;
    height: 60px;
}



carrot {
    background: orange;
    width: 60px;
    height: 60px;
    display: inline-block;
    box-shadow: 0px 5px 0px rgba(0, 0, 0, .15);

    background: #f9e4ac;
    border-style: solid;
    border-color: #88611e;
    border-width: 2px 2px 12px 2px;
    -webkit-border-radius: 15px 15px 6px 6px;
    border-radius: 15px 15px 6px 6px;
    margin: 20px 10px;
}


orange,
apple {
    -webkit-border-radius: 100px;
    border-radius: 100px;
    border-style: solid;
    border-width: 2px 4px 15px 4px;
    height: 60px;
    width: 60px;
    position: relative;
    margin: 20px 10px;
}

orange.small,
apple.small {
    height: 30px;
    width: 30px;
    border-width: 2px 4px 8px 4px;
    margin: 30px 10px;
}

pickle {
    background: #179837;
    width: 25px;
    border-radius: 30px;
    display: inline-block;
    position: relative;
    border: solid 2px #025a18;
    border-width: 2px 2px 9px 2px;
    margin: 20px 10px;
}

pickle.small {
    height: 40px;
    width: 18px;
    border-width: 1px 2px 6px 2px;
    margin: 30px 10px;
}

orange:before,
apple:before {
    content: "";
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .3);
    height: 30%;
    width: 30%;
    top: 0px;
    left: calc(50% - 15%);
    border-radius: 100px;
}

/*FRUITS ON A PLATTER*/

bento orange,
bento apple,
plate orange,
plate apple {
    left: calc(50% - 30px);
    margin: 0;
    position: absolute;
}

plate>apple:last-child,
plate>orange:last-child,
bento>apple:last-child,
bento>orange:last-child {
    top: calc(50% - 35px);
}

plate .small,
bento .small {
    left: calc(50% - 15px);
    margin-left: 0;
    margin-right: 0;
}

plate>.small:only-child,
bento>.small:only-child {
    position: absolute;
    top: calc(50% - 15px);
    margin: 0;
}

plate>pickle:only-child,
bento>pickle:only-child {
    top: calc(50% - 40px);
    left: calc(50% - 10px);
    z-index: 99999;
    margin: 0;
    position: absolute;
}

plate>pickle.small:only-child,
bento>pickle.small:only-child {
    top: calc(50% - 22px);
    left: calc(50% - 8px);
    z-index: 99999;
}

.shake {
    animation: shake .1s 5;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(5px);
    }
}

.strobe {
    transform-origin: bottom;
    animation: strobeStart .5s ease-out, strobe 1s infinite;
    animation-delay: 0s, .5s;
}

@keyframes strobeStart {
    0% {
        transform: skew(0deg, 0deg) scaleY(1);
        animation-timing-function: ease-in;
    }

    40% {
        transform: skew(0deg, 0deg) scaleY(.9);
        animation-timing-function: ease-out;
    }

    100% {
        transform: skew(4deg, 0deg) scaleX(1);
    }
}

@keyframes strobe {
    0% {
        transform: skew(4deg, 0deg) scaleX(1);
    }

    10% {
        transform: skew(1deg, 0deg) scaleY(.9);
    }

    50% {
        transform: skew(-4deg, 0deg) scaleX(1);
    }

    60% {
        transform: skew(-1deg, 0deg) scaleY(.9);
    }

    100% {
        transform: skew(4deg, 0deg) scaleX(1);
    }
}



.plus {
    color: #666;
    padding: 0px 4px;
    font-size: 40px;
    display: none;
}

[data-hovered] {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .4);
}

plate [data-hovered] {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, .3);
}

.helper {
    position: absolute;
    background: black;
    padding: 10px 15px 12px 15px;
    z-index: 1000;
    font-size: 18px;
    color: white;
    border-bottom: solid 2px #BBB;
    box-shadow: 0px 5px 0px rgba(0, 0, 0, .2);
    display: none;
    transform: rotateX(20deg);
    outline: solid 1px transparent;
    word-wrap: nowrap;
    white-space: nowrap;
}

plate:before {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 32px);
    top: calc(50% - 32px);
    height: 65px;
    width: 65px;
    border-radius: 60px;
    border-top: solid 6px #CCC;
    opacity: .4;
    background: rgba(255, 255, 255, 1);
}

#fancy:after {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 47px);
    top: calc(50% - 44px);
    height: 68px;
    width: 74px;
    border-radius: 60px;
    border: solid 10px #009ff2;
    opacity: .4;
}

orange {
    z-index: 1000;
}


board {
    display: none;
}

/* Fancy orange stacking */

plate apple,
plate orange {
    position: absolute;
}

plate apple:last-child,
plate orange:last-child {
    z-index: 300;
}

plate apple:nth-last-child(2),
plate orange:nth-last-child(2) {
    top: -25px;
    z-index: 400;
}

plate apple:nth-last-child(3),
plate orange:nth-last-child(3) {
    top: -65px;
    z-index: 500;
}

plate apple:nth-last-child(4),
plate orange:nth-last-child(4) {
    top: -105px;
    z-index: 600;
}


.teach-wrapper {
    border-right: solid 1px rgba(255, 255, 255, .1);
    font-size: 16px;
    border-right: solid 1px rgba(255, 255, 255, .1);
    border-left: solid 1px rgba(255, 255, 255, .1);
    font-size: 12px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;
    margin: 0;
    padding: 27px 20px 20px 20px;
    color: rgba(255, 255, 255, .3);
}

.markup * {
    font-family: menlo, monospace;
    cursor: default;
}

.game-wrapper {
    -webkit-perspective: 400px;
    transform: translate3d(0, 0, 0);
    perspective: 400px;
    text-align: center;
    position: relative;
    padding-top: 15px;
    margin-bottom: 50px;
}


.order {
    color: black;
    font-size: 45px;
    margin: 0;
    font-weight: 400;
    text-align: center;
    padding: 10px 30px;
}

.info-wrapper {
    display: none;
}

.what-is-this {
    text-align: center;
    margin-top: 35px;
    padding: 20px 0;
    width: 725px;
    color: rgba(255, 255, 255, .3);
    font-size: 15px;
    margin: 0 auto;
    font-weight: 400;
}

.what-is-this h2 {
    font-weight: 400;
    font-size: 20px;
    color: #888;
}

.what-is-this a {
    color: white;
    opacity: .5;
    text-decoration: none;
}

.what-is-this a:hover {
    opacity: .7;
}

.markup {
    line-height: 150%;
}

.markup * {
    color: rgba(255, 255, 255, .3);
}

.markup .enhance {
    color: rgba(255, 255, 255, .7);
}

.markup div {
    padding-left: 20px;
}

.markup>div {
    padding-left: 0px;
}

.left-col {
    width: calc(100% - 375px);
    text-align: center;
    overflow-x: visible;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}


.level-menu .levels a {
    display: block;
    cursor: pointer;
    padding: 5px 12px 5px 22px;
    color: #777;
}

.level-menu .level-syntax {
    position: relative;
    display: inline-block;
}

.level-menu .levels a.completed .checkmark {
    opacity: .55;
    border: solid 3px #4cbb4a;
    border-width: 0 3px 3px 0;
}

.level-menu .levels a .checkmark {
    position: relative;
    display: inline-block;
    margin-right: 14px;
    width: 8px;
    height: 13px;
    opacity: 2;
    border: solid 3px white;
    border-width: 0 3px 3px 0;
    opacity: .2;
    top: -1px;
    transform: rotate(40deg);
}

.level-menu .levels a.current {
    font-weight: bold;
    color: #AAA;
    background: rgba(255, 255, 255, .07);
}

.level-menu .levels a:hover {
    background: rgba(255, 255, 255, .05);
}

.level-menu .level-number {
    opacity: .6;
    min-width: 24px;
    display: inline-block;
}

.level-menu-toggle-wrapper {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 30px;
    padding: 4px 2px;
    opacity: .25;
    transition: linear all .05s;
    cursor: pointer;
}

.level-menu-toggle-wrapper:hover {
    opacity: .4;
}

.level-menu-toggle {
    height: 2px;
    width: 27px;
    background: rgba(255, 255, 255, 1);
    transition: all .15s ease-out;
    cursor: pointer;
    position: relative;
    top: 10px;
}

.menu-open .level-menu-toggle {
    background: rgba(255, 255, 255, 0);
}

.level-menu-toggle:before,
.level-menu-toggle:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 1);
    transition: all .1s ease-out;
}

.level-menu-toggle:before {
    top: -10px;
    transform-origin: left;
}

.menu-open .level-menu-toggle:before {
    top: -9px;
    transform: rotate(45deg);
}

.level-menu-toggle:after {
    top: 10px;
    transform-origin: left;
}

.menu-open .level-menu-toggle:after {
    top: 10px;
    transform: rotate(-45deg);
}

.note {
    padding: 20px;
    width: 600px;
    color: #777;
    background: rgba(255, 255, 255, .9);
    text-align: left;
    margin: 20px auto 20px auto;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .5);
    display: none;
}

.note h3 {
    color: #444;
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

.note a {
    color: #1b6f9b;
    background: rgba(27, 111, 155, .1);
    font-weight: bold;
}

.note .note-toggle:hover {
    color: #1b6f9b;
    background: rgba(27, 111, 155, .15);
}

.note-toggle {
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .3);
    padding: 8px 15px 10px 15px;
    -webkit-border-radius: 20px;
    text-decoration: none;
    display: inline-block;
}

.note-toggle:hover {
    text-decoration: underline;
    color: rgba(255, 255, 255, .4);
}

.note pre {
    background: #DDD;
    padding: 10px;
    font-family: menlo, monospace;
    margin: 0;
    font-size: 14px;
}

.note h4 {
    font-size: 15px;
    margin: 0 0 5px 0;
    padding: 0;
}

/* Winner screen */

.winner {
    font-size: 30px;
    color: #EEE;
    text-shadow: 0px 4px 0px rgba(0, 0, 0, .15);
    display: inline-block;
    padding: 5px 20px 0px 20px;
    margin: 0;
}

.winner strong {
    font-size: 40px;
}


/* Tag treatment for the level helpers & examples */

tag {
    padding: 0 3px;
    color: #AAA;
    font-size: 13px;
    font-weight: bold;
}

tag:before {
    content: "<";
}

tag:after {
    content: ">";
}

.nametags {
    z-index: 1;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.nametag {
    font-family: "Satisfy", sans-serif;
    position: absolute;
    bottom: -14px;
    color: black;
    width: 80px;
    color: #09699b;
    font-size: 22px;
    box-shadow: -3px 4px 0 rgba(0, 0, 0, .1);
    background-image: url(https://gist.githubusercontent.com/lostintangent/8b418cf6226ef3a1c20273a45a7724d9/raw/line.gif);
    z-index: 9999;
    padding: 30px 0 2px 0;
    background-color: #c5d6dd;
    transform: rotate(-4deg);
    animation: slide .4s ease-out;
}

@keyframes slide {
    0% {
        transform: translateY(-20px);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(2px) rotate(-4deg);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0px) rotate(-4deg);
    }
}

.editor {
    width: 50%;
    margin: 0 auto;
    border: solid 10px rgba(0, 0, 0, .35);
    border-radius: 4px;
    overflow: hidden;
}

.editor * {
    font-family: menlo, monospace;
    font-size: 14px;
    line-height: 150%;
    padding: 0;
    margin: 0;
}

.editor .file-window {
    padding: 10px 10px 10px 46px;
    position: relative;
    min-height: 337px;
}


.editor .line-numbers {
    position: absolute;
    top: 0;
    left: 0;
    font-family: menlo, monospace;
    padding: 10px 10px;
    height: 100%;
    line-height: 150%;
    text-align: right;
}

.html-view .line-numbers {
    color: rgb(250, 246, 246);
    border-right: solid 1px #333;
}

.html-view .file-window {
    background: rgba(5, 5, 5);
}