body {
    font-size: 18px;
    color: #000;
    background-color: #BFC4BE;
    background-image: url("../images/roller2.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}

	/* this is to change link colour and stop underlining */
a {
	text-decoration: none;
}
a:link {
	color: #000;
}
a:visited {
	color: #000;
}
a:hover {
	color: #00E;
}




.one {
	/* this is to size, space out and border a row of up to three thumbnails*/
        display: inline-block;
        padding: 2% 2%;
        margin: auto;
        border-style: solid;
        border-width: 0.5%;
        border-color: #ACAD9B;
        border-radius: 15%;
        font-size: 1em;
        width: 28%;
        background-color: #BFC4BE;
}


.onepointone {
	/* this is to size, space out and border a row of up to nine thumbnails*/
        display: inline-block;
        padding: 2% 2%;
        margin: auto;
        border-style: solid;
        border-width: 0.5%;
        border-color: #ACAD9B;
        border-radius: 15%;
        font-size: 1em;
        width: 4.5%;
        background-color: #BFC4BE;	
}


.onepointfive {
	/* this is to size, space out and border one full width thumbnail*/
        display: inline-block;
        padding: 2% 2%;
        margin: auto;
        border-style: solid;
        border-width: 0.5%;
        border-color: #ACAD9B;
        border-radius: 15%;
        font-size: 1em;
        width: 95%;
        background-color: #BFC4BE;
}


.john {
	/*this is for the first row of thumbnails to place it nearly below the background image*/
      display: block;
       width: 970px;
       margin: auto;
       margin-top: 600px;
}

.hazel {
	/*this is for the second and subsequent row of thumbnails*/
      display: block;
       width: 970px;
       margin: auto;
}