/* As this page uses the CSS sheet for course, I override some rules here */

/* Overrides main margins so page appears central */
.container {
    margin-right: 20%;
}
/* Set width of each white box to 100% (fill container div) */
.box-left {
    width: 100%;
}

/* Set each download box to 40% width and align them side by side.
Also sets their heights to 100px */
.template {
    float: left;
    width: 40%;
    height: 100px;
}
/* Make the text a bigger, white font that is aligned central  */
.template p {
    font-size: 18pt;
    text-align: center;
    color: #FFFFFF;
    margin-top: 35px;
}
/* Set the colour of the XHTML box to a teal colour and indent it 5px on the left */
.left {
    background-color: #009688;
    margin-left: 5%;
}
/* Set the colour of the HTML box to an orange colour and indent it 10px on the left
(to leave a space between the two) and a 5px margin on the right so they remain central */
.right {
    background-color: #FF9800;
    margin-left: 10%;
    margin-right: 5%;
}
/* Override course margin changes as there isn't a contents box to cater for */
@media (max-width: 1200px) {
    .container {
        margin-left: 10%;
        margin-right: 10%;
    }
}
/* Change top margin of XHTML text as it wraps to 2 lines and this keeps it vertically aligned
to the center */
@media screen and (max-width: 667px) {
    #_xhtml {
        margin-top: 21px;
    }
}
/* When the browser width gets small enough, stack the boxes on top of eachother, rather than
side by side. Reset margin top of XHTML text as it will all fir on 1 line again */
@media screen and (max-width: 450px) {
    .template {
        width: 100%;
        margin: 0;
    }
    .right {
        margin-top: 20px;
    }
    #_xhtml {
        margin-top: 35px;
    }
}