@font-face {
    -ctag-tag: "fonts";
    -ctag-example: "<div></div>";
    -ctag-global: "true";

    font-family: Muli;
    src: url('Muli.ttf');
    font-weight: normal;
}
@font-face {
    font-family: Muli;
    src: url('Muli-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: Muli;
    src: url('Muli-Light.ttf');
    font-weight: light;
}
@font-face {
    font-family: Muli;
    src: url('Muli-ExtraLight.ttf');
    font-weight: extralight;
}
@font-face {
    font-family: Muli;
    src: url('Muli-Italic.ttf');
    font-style: italic;
}


html {
    -ctag-tag: "html";
    -ctag-global: "true";
    -ctag-example: "<div ...>{ .dog }{ .cat }</div>";
    -ctag-ignore: ".nano";

    width: 100%; height: 100%;
    margin: 0px; padding: 0px;
    color: #777;
    font-family: 'Muli', sans-serif;
	font-weight: light;


    * {
        box-sizing: border-box;
		background-position: center;
		background-repeat: no-repeat;
    }

    body {
        width: 100%; height: 100%;
        margin: 0px; padding: 0px;

    }

    .list_bottom_padding {
        height: 20px;
        clear: both;
    }

}

.expandoBack {
    width: 30px; height: 100%;
    float: left;
    background-image: url('back_arrow.png');
    transition: width .3s, background-size .3s;
    &:extend( .hand );

    &:hover {
        width: 70px;
        background-color: #eee;
    }
}

.expandoClose {
    /*<csstag tag="buttony">
        <div ...></div>
    </csstag>*/
    &:extend(
        .expandoBack all
    );
    background-image: url('close_arrow.png');

    &:hover {
        background-image: url('close_arrow_dark.png');
    }
}