.redBox {
    width: 50px;
    height: 50px;
    background-color: red;
}

.greenBox {
    width: 50px;
    height: 50px;
    background-color: green;
}

.blueBox {
    width: 50px;
    height: 50px;
    background-color: blue;
}

.orangeBox {
    width: 50px;
    height: 50px;
    background-color: orange;
}

.flowArticle {
    -webkit-flow-into: article;
}

.regionArticle {
    -webkit-flow-from: article;
}

.regionArticleAfter::after {
    display: block;
    width: 50px;
    height: 50px;
    content: 'This text should not be displayed';
    border: 1px solid black;
    -webkit-flow-from: article;
}

.regionArticleBefore::before {
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    -webkit-flow-from: article;
}

.borderBox {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid black;
}

.borderBoxNoFloat {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

.pass {
    font-weight: bold;
    color: green;
}

.fail {
    font-weight: bold;
    color: red;
}

.break {
    -webkit-region-break-before: always;
    display: block;
}

.token {
    color: blue;
    font-weight: bold;
}

.description {
    width: 600px;
}

.bigBox {
    height: 100px;
    width: 300px;
}

.greyBigBox {
    height: 100px;
    width: 300px;
    background-color: lightgrey;
}

.descriptionVertical {
    height: 600px;
}

.bigBoxVertical {
    height: 300px;
    width: 100px;
}

.greyBigBoxVertical {
    height: 300px;
    width: 100px;
    background-color: lightgrey;
}

.float {
    float: left;
}

.clear {
    clear: both;
}