/* Set the main photo (the picture of XHTML code) to relative and set the height of
the image to 300px and the width to 100%. Hide all overflow so only that area of
the screen is filled with the image. Add an opacity to remove focus */
#_main_photo {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
    opacity: 0.7;
    background-image: url("../media/homepage-code.png");
    z-index: 1;
}
/* This will hold the language cards and the spacers between them.
Set it to absolute and use a higher z-index so it ovelaps the picture. Set width
to 100% as this is a container where full width is required */
#_card_holder {
    position: absolute;
    width: 100%;
    z-index: 2;
}
/* This will provide an equal gap between each language card.
Float left so they will be positioned in line with the cards and set a default
width of 10% (leaving 60% for the cards) */
.card-spacer {
    float: left;
    width: 10%;
}
/* These show the language name and icon.
Float them all left so they wil be positioned inline with eachother and the spacers.
Give them a fixed height of 200px and set a negative margin so the cenetr a=of each
card is positioned over the bottom edge of the main photo. Set default background
colour to white and add a shadow to give them focus. Set their widths to 20% each
to fill the full width of the page */
.topic-card {
    float: left;
    width: 20%;
    height: 200px;
    margin-top: -100px;
    background-color: #FFFFFF;
    z-index: 2;
    box-shadow: 2px 2px 5px #888888;
}
/* Set the text to appear central and allow space for the icons with padding */
.topic-card h1 {
    padding-top: 30px;
    font-size: 30pt;
    text-align: center;
	font-weight: 300;
}
/* Display the icons central */
.topic-card img {
    display: block;
    margin: 0 auto;
}

/* Set the HTML card to a dark orange background */
#_html_card {
    background-color: #FF8A65;
}
/* Set the HTML card to a lighter orange background on mouse hover */
#_html_card:hover {
    background-color: #FFAB91;
}
/* Set the CSS card to a light blue background */
#_css_card {
    background-color: #64B5F6;
}
/* Set the CSS card to a lighter blue background on mouse hover */
#_css_card:hover {
    background-color: #90CAF9;
}
/* Set the JS card to a light yellow background */
#_js_card {
    background-color: #FFF176;
}
/* Set the JS card to a lighter yellow background on mouse hover */
#_js_card:hover {
    background-color: #FFF59D;
}

/* Add a margin to the top of the container to allow space for the cards.
Override the right margin as there is no contents box to cater for */
.container {
    margin-top: 180px;
    margin-right: 20%;
}
/* Add a light orange underline to the HTML heading */
#_html_title {
    text-decoration: underline;
    text-decoration-color: #FFCCBC;
}
/* Add a light blue underline to the CSS heading */
#_css_title {
    text-decoration: underline;
    text-decoration-color: #BBDEFB;
}
/* Add a light yellow underline to the JS heading */
#_js_title {
    text-decoration: underline;
    text-decoration-color: #FFF9C4;
}
/* Set the font size of the language headings to 30pt and decrease th ebottom margin
so they're closer to the text below */
.container h1 {
    font-size: 30pt;
    margin-bottom: -15px;
}
/* Set the line height of the language text to 1.4 and increase font size to 18pt */
.container p {
    font-size: 18pt;
    line-height: 1.4;
}


/* RESIZING RULES
-------------------------------------------------- */

/* Reduce space between the cards and increase the width of the cards */
@media (max-width: 1000px) {
    .card-spacer {
        width: 7%;
    }
    .topic-card {
        width: 24%;
    }
}

/* Screen width is too small to display the language name.
Hide the text showing the languages name and increase the spacing between each card.
As the icon is th eonly thing in the cards, change the height to fit and reduce the
top margin so the new center of the crad is over the bottom edge of the main photo.
Adjust their widths and reduce the top margin of the main container as less vertical
space is being used by the cards */
@media (max-width: 830px) {
    .card-spacer {
        width: 13.75%;
    }
    .topic-card {
        width: 15%;
        height: 100px;
        margin-top: -50px;
    }
    .topic-card img {
        padding-top: 20px;
    }
    #_html_card h1 {
        display: none;
    }
    #_css_card h1 {
        display: none;
    }
    #_js_card h1 {
        display: none;
    }
    .container {
        margin-top: 120px;
    }
}

/* Widht is very small so reduce width between each card and increase the widths of
the cards themselves. Change main container margins to 10% to fill more of the width
with page content */
@media (max-width: 700px) {
    .card-spacer {
        width: 10%;
    }
    .topic-card {
        width: 20%;
    }
    .container {
        margin-left: 10%;
        margin-right: 10%;
    }
}