/* 

ToC

	1. defaults
	2. structure
	3. fonts
	4. links
	5. images

*/



/* --------- 1. defaults  --------- */

*	{
		padding: 0;
		margin: 0;
		}

body {
		color: #120087;
		background:	#d3d3d3;
		}
		
.goleft  {float: left;}
.goright {float: right;}
		
/*  --------- 2. structure  --------- */

#wrapper {
		width: 780px;
		margin: 0 auto;
		padding: 5px 0;
		}
		
#contentArea {
		background:	url(http://www.gorlestonbeach.org.uk/images/galleryhead.jpg) no-repeat;
		}
		
#introductoryText {
		float: right;
		width: 272px;
		margin-right: 12px;
		padding-top: 20px;
		}

#portfolioImage {
		float: right;
		margin-right: 20px;
		width: 465px;
		padding-top: 20px; 
		}

.separator {
		clear: both;
		height: 1px;
		background: #000000;
		border-bottom: 1px solid #120087;
		}

.separatorInvisible {
		clear: both;
		height: 1px;
		}
		
#thumbnails {
		background: 	#d3d3d3;
		padding-left: 10px;
		}

#thumbnails div {
		width: 112px;
		height: 190px;
		float: left;
		margin-right: 15px;
		}

#thumbnails .separatorInvisible {
		float: none;
		height: 1px;
		}

#footer p{text-align: center;}
		

/* ---------- 3. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		}

h1 {
		font: normal 1.5em/2em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		padding-left: 10px;
		color: #120087;
		text-transform: uppercase;
		margin-bottom: 10px;
		}

h2 {
		font: normal 1.3em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		padding-top: 10px;
		margin-bottom: 10px;
		text-transform: uppercase;
		color: #120087;
		}

.instructions {
		color: #120087;
		text-transform: lowercase;
		float: right;
		padding-right: 12px;
		}

p {
		font: 1.2em/1.6em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		margin-bottom: 0.8em;
		}

#thumbnails div p {
		margin-bottom: 0;
		line-height: 1.3em;
		}

#caption {
		margin-top: 10px;
		}

/* ---------- 4. links ---------- */

a {
		color: #120087;
		}
		
a:hover, #thumbnails div a:hover {
		color: #8080ff;
		}

/* ---------- 5. images ---------- */


#portfolioImage img {
		border: 1px solid #120087;
		margin-bottom: 8px;
		}

#thumbnails div img {
		border: 1px solid #120087;
		margin-bottom: 3px;
		}

#thumbnails div a:hover img {
		border-color: #d3d3d3;
		}