/* STEP 2a: Set the border properties on the DIV#the-box - border-width, border-style, border-color */
#the-box
{
    border-width: 5px;
    border-style: solid;
    border-color: #0B5AE8;
}
/* STEP 2b: Control one of the four borders independently of the others */
#the-box
{
    border-bottom-width: 10px;
}
/* STEP 2c: Apply shorthand to the borders using the clock rule (TRBL) */
#the-box
{
    border-width: 10px 5px;
}
/* STEP 2d: Apply shorthand to the borders using the correct order of border properties width, style, color */
#the-box
{
    border: 6px solid #6136c4;
}
/* STEP 3a: Set padding values on the DIV#the-box element */
#the-box
{
    padding: 20px;
}
/* STEP 3b: Apply a background-image to the same element (controlling background-repeat, background-position, and background-size) */
body
{
    background-image: url('../images/3px-tile.png');
    /*background-repeat: no-repeat;
    background-position: center;
    background-size: contain;*/
}
/* STEP 3c: Instead, apply the same background-image to the BODY, and apply a background-color to the DIV#the-box */
#the-box
{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
    background: rgb(206,219,233); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=0 ); /* IE6-9 */
}
/* STEP 4a: Control the width of the DIV#the-box with a fixed unit (px) */
#the-box
{
    width: 200px;
    height: 200px;
    /*width: 70%;*/
}
/* STEP 4b: Change the width to a relative unit of measure (%) */

/* STEP 5a: Set the width above back to a fixed unit, then adjust the height so the the content no longer fits 50px by 20px*/

/* STEP 5b: Apply various values to the overflow property to see how to handle content that doesn't fit it's container */
#the-box
{
    overflow: scroll;
    margin: 10px auto;
}
/* STEP 6a: Change the display property of the p span element */
p span
{
    display: block;
}
/* STEP 6b: Manipulate the box model of the p span element */
p span
{
    border: 3px solid black;
    padding: 10px;
    margin: 5px;
}
/* STEP 7: Add a margin to the box using the shorthand;