body {
    background: url(images/Cairns%20Red%20Bamboo_80.jpg);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    font-family: Handlee, cursive;
    margin: 0;
}


/* Info button */
#button {
    float: right;
    margin: 10px;
}

/*styling the heading - doodle */
#Title {
    width: 300px;
    margin: 0 auto;
    font-size: 70px;
/*    color: antiquewhite;*/
/*    color: #4d7406;*/
    font-weight: bolder;
    letter-spacing: 3px;
    padding-top: 20px;
/*    color: rgba( 49, 47, 48, 1);*/
/*    color: #80c401;*/
    text-decoration: underline;
/*    text-decoration-color: rgba( 49, 47, 48, 1);*/
    text-decoration-style: wavy;
    text-decoration-skip:edges;
    text-decoration-line: underline;
    margin-bottom: 20px;
    color: rgba( 155, 225, 85, 1 );
}

/*Containing div for the colour picker and width slider */
#tools {
    height: 150px;
    max-width: 400px;
    margin: 0 auto;
}

/*colour picker container*/
#colour {
    height: 39px;
}

/*Centralise the colour picker */
#brushColour {
    margin: 0 auto;
    height: 23px;
}

/*position the brush width example and give this wrapping div a height equal to the max height of the slider value so elements underneath do not move when a smaller brush size is selected. */
#brushSize {
    margin-top: 20px;
    height: 30px;
    position: relative;
}

/*style the brush thickness example line. The height must be set to the minimum value of the slider. Colour it to make it visible and centralise it. position:absolute down centralises the line vertically and makes it grow evenly from the central point as the slider is increased. Without this it grows downwards from the top. Position:relative is required on the wrapping div. The transform attribute is required because by default it centralises the top, left point. We want it to centralise the center point of the line. */
#example {
    height: 3px;
    width: 76px;
/*    border-radius: 100%;*/
    background: rgba( 49, 47, 48, 1);
    margin: 0 auto; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/*position the brush width slider */
#brushSlider {
    margin: 0 auto;
    margin-top: 20px;
}

/*The green border around the slider handle */
 #slider .ui-slider-handle {
     border: 2px solid rgba( 155, 225, 85, 1 );
}

/*Style the container for the drawing canvas  */
#canvasContainer {
    width: 400px;
    margin: 0 auto;
    height: 350px;
    border: 1px solid rgba( 49, 47, 48, 1);
}

/*the actual canvas tag. Do not set height and width attributes here, do it in the canvas tag so the mouse and line drawn sync up. */
#canvas {
    margin: 0 auto;
    background-color: white;
    cursor: crosshair;
}

/*Wrapper div for the buttons*/
#buttons {
    max-width: 400px;
    margin: 0 auto;
    height: 40px;
    position: relative;
    margin-top: 20px;
}

/*The actual buttons */
.buttons {
    height: 40px;
    width: 80px;
    margin: 0 auto;
    float: left;
}

/*Erase button active class to show that the user is in erase mode */
.buttonErase {
    background: linear-gradient(#fc8c8c, #fa0f0f,#fc8c8c);
    background: -moz-linear-gradient(#fc8c8c, #fa0f0f,#fc8c8c);
    background: -webkit-linear-gradient(#fc8c8c, #fa0f0f,#fc8c8c);
    background: -o-linear-gradient(#fc8c8c, #fa0f0f,#fc8c8c);
    background: -ms-linear-gradient(#fc8c8c, #fa0f0f,#fc8c8c);
    border-radius: 8px;
    border: 0.7px solid #fa0f0f;
    font-weight: bolder;
    font-family: monospace;
    letter-spacing: -1px;
    font-size: 18px;
    color: rgba( 155, 225, 85, 1 );
}

/*Erase button active class to show that the user is in erase mode - hover mode */
.buttonErase:hover {
     background: linear-gradient(#fdaaaa, #fa0f0f,#fdaaaa);
     background: -moz-linear-gradient(#fdaaaa, #fa0f0f,#fdaaaa);
     background: -webkit-linear-gradient(#fdaaaa, #fa0f0f,#fdaaaa);
     background: -o-linear-gradient(#fdaaaa, #fa0f0f,#fdaaaa);
     background: -ms-linear-gradient(#fdaaaa, #fa0f0f,#fdaaaa);
     border: 0.7px solid #fa0f0f;
}

/*  position the save button, the middle button, Use the transform attribute to ensure that it is centered within the containing div.  */
#save {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
}

/*  Align the reset button to the right of the containing div. */
#reset {
    position: absolute;
    right: 0; 
}

/*Style the footer */
#footer {
    margin-top: 100px;
/*    color: rgba( 49, 47, 48, 1);*/
/*    color: #80c401;*/
/*    font-weight: bolder;*/
    color: rgba( 155, 225, 85, 1 );
/*    color: rgba( 49, 47, 48, 1);*/
    font-weight: 900;
/*    text-align: left;*/
    text-decoration: underline;
}

/*Style the link wthin the footer.  */
#footer a{
    color: rgba( 155, 225, 85, 1 );
}

/*Style the link within the footer on hover  */
#footer a:hover {
    cursor: pointer;
    font-style: oblique;
}