/* Set the colour of text used to state the version of CSS to yellow */
.version-tag {
    color: #FFEB3B;
}


/* THE BOX MODEL STYLES
-------------------------------------------------- */

/* The box model box requires no example, so use the left box and set its width
to 100% */
#box-model .box-left {
    width: 100%;
}
/* Align the box model image central */
#box-model img {
    display: block;
    margin: 0 auto;
}
/* Set the text colour for 'Margin' to an orange */
#_key_margin {
    color: #FF9800;
}
/* Set the text colour for 'Border' to a grey */
#_key_border {
    color: #616161;
}
/* Set the text colour for 'Padding' to a green */
#_key_padding {
    color: #4CAF50;
}


/* Remove bullets from the list in the margins box */
#margins li {
    list-style-type: none;
}
/* Set all list items to use the Consolas font */
li {
    font-family: Consolas,monaco,monospace;
}

/* Add a border around some of the examples used.
Fill 90% of total width, set height ot a fixed 200px and add a grey border */
.example-frame {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: 200px;
    padding-top: 0px;
    border: 1px solid #E0E0E0;
}
/* For each sample, add a red border so it's easy to see what the CSS has done.
Set width to 120px and no margins so the border goes around the text */
.sample {
    border: 1px solid #FF0000;
    width: 120px;
    margin: 0px;
}


/* MARGINS STYLES
-------------------------------------------------- */

/* For the margins example, give the text a 20px margin on the left and a 45px
margin from the top */
#_margin_sample {
    margin-top: 45px;
    margin-left: 20px;
}


/* PADDING STYLES
-------------------------------------------------- */

/* For the padding example, give the text a 15% padding on the right and a 45px
padding from the top. Set top and left margins to 0 so the red border overlaps
the grey border (gives impression that the top left os a 0,0 coordinate)  */
#_padding_sample {
    padding-top: 45px;
    padding-right: 15%;
    margin-top: -1px;
    margin-left: -1px;
}


/* BORDER STYLES
-------------------------------------------------- */

/* For the borders example, give the text a 20px margin on the left to indent it
and set the width to 110px */
#_borders_sample {
    margin-left: 20px;
    width: 110px;
}
/* Set default colour for the list of border styles */
#_border_styles {
    color: #E53935;
}
/* Remove the bullet pint from the list, set each item to 60px width, add a 10px
margin to the bottom and align the text center */
#_border_styles li {
    list-style-type: none;
    width: 60px;
    margin-bottom: 10px;
    text-align: center;
}
/* For each example in the list, apply the relevant type of border */
#_list_solid {
    border: 1px solid #FF0000;
}
#_list_dashed {
    border: 1px dashed #FF0000;
}
#_list_double {
    border: 1px double #FF0000;
}
#_list_groove {
    border: 1px groove #FF0000;
}
#_list_dotted {
    border: 1px dotted #FF0000;
}
#_list_ridge {
    border: 1px ridge #FF0000;
}
#_list_inset {
    border: 1px inset #FF0000;
}
#_list_outset {
    border: 1px outset #FF0000;
}


/* COLOUR STYLES
-------------------------------------------------- */

/* For the table of colours, set the font to Roboto and add a 10px padding to the
left */
#_color_table {
    padding-left: 10px;
    font-family: 'Roboto', sans-serif;
}
/* Add a column gap of width 60px between the two sets of colours */
#_column_space {
    width: 60px;
}
/* For the hex cells, give them all a 5px padding and the text colour white */
.hex-color {
    padding: 5px;
    color: #FFFFFF;
}
/* For each colour in the table, set the background colour accordingly and change
the text colour to black if necessary */
#_color_black {
    background-color: #000000;
}
#_color_white {
    background-color: #FFFFFF;
    color: #000000;
}
#_color_red {
    background-color: #FF0000;
}
#_color_orange {
    background-color: #FFA500;
    color: #000000;
}
#_color_yellow {
    background-color: #FFFF00;
    color: #000000;
}
#_color_green {
    background-color: #008000;
}
#_color_blue {
    background-color: #0000FF;
}
#_color_indigo {
    background-color: #4B0082;
}
#_color_violet {
    background-color: #EE82EE;
}
/* In the colours example, set the background colour to black, the text colour to
red and set widths so the background colour will fill the whole of the text.
Add a left margin to indent it slightly */
#_colors_sample {
    color: #FF0000;
    background-color: #000000;
    width: 110px;
    margin: 0px;
    margin-left: 15px;
}


/* BACKGROUND IMAGE STYLES
-------------------------------------------------- */

/* Add a margin left to align it with the text, add a height so the backgrounds
will be visible and set width to 60% so it doesn't take over the focus */
.bgimg-sample {
    margin-left: 10px;
    width: 60%;
    height: 100px;
}
/* Sets the styles for the text that appears over each background image example.
Set colour to black, and adjust the top padding so it appears in the center.
Use the Consolas font too */
.code-overlay {
    padding-top: 40px;
    color: #000000;
	font-family: Consolas,monaco,monospace;
}

/* Set the first background image example to apply 1 background image */
#_bgimg_1 {
    background-image: url("../media/background-image-1.png");
}
/* Set the second background image example to apply 2 background images */
#_bgimg_2 {
    background-image: url("../media/background-image-2.png"), url("../media/background-image-1.png");
    background-repeat: no-repeat, repeat;
}
/* Set the third background image example to apply a 2 colour gradient */
#_bgimg_3 {
    background-image: linear-gradient(#B3E5FC, #4FC3F7);
}
/* Set the fourth background image example to apply a 3 colour gradient */
#_bgimg_4 {
    background-image: linear-gradient(#B3E5FC, #4FC3F7, #D1C4E9);
}
/* Set the fifth background image example to apply a repeating 3 colour gradient */
#_bgimg_5 {
    background-image: repeating-linear-gradient(#B3E5FC, #D1C4E9 10%, #F0F4C3 20%);
}
/* Set the sixth background image example to apply a 2 colour radial gradient */
#_bgimg_6 {
    background-image: radial-gradient(#9575CD, #B3E5FC);
}
/* Give the example a single background image and set its height to 100px */
#_bgimg_sample {
    background-image: url("../media/background-image-1.png");
    margin-left: 15px;
    height: 100px;
}


/* FONT STACK STYLES
-------------------------------------------------- */

/* Change the font of the example text */
#_fonts_sample {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}


/* TEXT DECORATION STYLES
-------------------------------------------------- */

/* Show example link text with no underline */
#_decoration_sample:link {
    text-decoration: none;
}
/* Show example link text with a line-through whilst clicked */
#_decoration_sample:active {
    text-decoration: line-through !important;
}
/* Show example link text with an underline on mouse hover */
#_decoration_sample:hover {
    text-decoration: underline;
}


/* TEXT OVERFLOW STYLES
-------------------------------------------------- */

/* Remove bullet points from the text overflow list */
#text-overflow li {
    list-style-type: none;
}
/* Set the example text to have no-wrap and to hide the overlow. Set text overflow
to ellipsis so the hidden text will show ... instead. Give it a width small
enough to hide some content and a black border so it's ovbvious where the text
is cut off */
#_overflow_sample {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000;
    margin: 0;
    margin-left: 15px;
    width: 80px;

}


/* COLUMN STYLES
-------------------------------------------------- */

/* Split the example text into 3 columns, with no margins but the 15px indent on
the left */
#_columns_sample {
    margin: 0;
    margin-left: 15px;
    column-count: 3;
}


/* RESIZING STYLES
-------------------------------------------------- */

/* When the width is at least 1000px, show the sample text as blue */
@media screen and (min-width: 1000px) {
    #_media_sample {
        color: #0000FF;
    }
}
/* When the width is at least 1200px, show the sample text as red */
@media screen and (min-width: 1200px) {
    #_media_sample {
        color: #FF0000;
    }
}
/* Else, show the sample text as black */



/* Add a default left margin of 30px on example rules shown in code preview */
.example-rule {
    margin-left: 30px;
}