/* Stylesheet for piceur.co.uk 2010. */

@media all {

	/* General body colours and fonts. */
	html {
		height: 100%;
	}

	body {
		font-family: "Georgia",serif;
		text-align: justify;
		margin: 15px 2px 15px 2px;
		border-width: 0 0 0 0;
		padding: 0 0 0 0;
		background: white;
		background-image: url("img/main_bg.png");
		background-repeat: no-repeat;
		background-position: 100px 250px;
	}

	/* Header/title bar. */
	#header {
		background-color: black;
		margin: 0px 0px 30px 0px;
		border-width: 0 0 0 0;
		padding: 15px 30px 15px 30px;
	}
	#header a img {
		border-width: 0;
	}
	#header:after {
		content:'';
		clear: both;
		display:block;
	}
	#header_logo {
		float: left;
	}
	#header_name {
		float: right;
	}

	/* Container of all of page apart from header. */
	#main_container {
		clear:both;
		margin: 0 0 0 0;
		border-width: 0 0 0 0;
		padding: 0 0 0 0;
	}

	/* General page elements. */
	div.pagetitle img {
		border-width: 0;
		padding-right: 10px;
	}

	/* Blocks of text. */
	#textblock {
		border-top: 1px solid black;
		margin: 0;
		padding: 10px 5px 5px 5px;
		/* border: 1px solid black; */
	}
	#textblock a {
		text-decoration: none;
	}
	#textblock ul {
		padding-left: 1em;
		margin-top: 0px;
	}
	#textblock li {
	}
	#textblock li ul {
		padding-left: 2em;
	}

	/* Bodge for the front page image. */
	#textblock img {
		display: block;
		margin-left: auto;
		margin-right: 0;
		margin-top: 10px;
		margin-bottom: 0;
	}

	/* Menu. */
	#menu {
		float: left;
		margin: 0 0 0 0;
		border-width: 0 0 0 0;
		padding: 15px 0 0 20px;
	}
	#menu ul {
		list-style-type: none;
		border: 0;
		margin: 0;
		padding: 0;
	}
	#menu li {
		border: 0;
		margin: 0;
		padding: 0;
	}
	#menu li a {
		border: 0;
		margin: 0;
		padding: 0;
		text-decoration: none;
	}
	a#menu_galleries {
		background-image: url("img/menu-galleries.png");
		background-repeat: no-repeat;
		display: block;
		min-width: 136px;
		min-height: 74px;
	}
	a:hover#menu_galleries {
		background-image: url("img/menu-galleries-hover.png");
	}
	a#menu_prices {
		background-image: url("img/menu-prices.png");
		background-repeat: no-repeat;
		display: block;
		min-width: 136px;
		min-height: 59px;
	}
	a:hover#menu_prices {
		background-image: url("img/menu-prices-hover.png");
	}
	a#menu_links {
		background-image: url("img/menu-links.png");
		background-repeat: no-repeat;
		display: block;
		min-width: 136px;
		min-height: 55px;
	}
	a:hover#menu_links {
		background-image: url("img/menu-links-hover.png");
	}
	/* TODO: might need to add "border: none" to the hover states of all the
	 * menu items.
	 * http://www.alistapart.com/articles/imagemap/
	 */
	#menu span {
		visibility: hidden;
	}

	/* Main body of page. */
	#main {
		margin: 0 0 0 0;
		border-width: 0 0 0 0;
		padding: 0 30px 0 30px;
		overflow: auto;
	}

	#main h1 {
		font-family: "Impact",sans-serif;
		font-size: 180%;
		font-weight: normal;
		text-align: right;
		margin: 0 0 20px 0;
		border: 0;
		padding: 0 0 0 0;
		color: black;
	}

	/* Galleries */
	div.gallery {
		border-width: 0 0 0 0;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}
	div.gallery ul {
		list-style-type: none;
		border-width: 0 0 0 0;
		margin: 0 0 10px 0;
		padding: 0 0 0 0;
		overflow: hidden;
		width: 100%;
	}
	div.gallery ul:after {
		display: block;
		clear: both;
		content: ".";
		height: 0;
		visibility: hidden;
	}
	div.gallery li {
		float: right;
		width: 25%;
		border-width: 0;
		margin: 0;
		padding: 0;
		display: block;
		text-align: right;
		vertical-align: top;
		/*
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
		*/
	}
	div.gallery li a {
		/*
		border: 1px solid red;
		*/
		border-width: 0;
		text-decoration: none;
		display: block;
		width: 90%;
		float: right;
	}
	div.gallery li a img {
		/* border: 1px solid #888; */
		border-width: 0;
		max-width: 100%;
		/* margin: 0 0 10px 0; */
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		margin-bottom: auto;
		/*padding: 1px; */
		/*width: 98%; */
		display: block;
		/* background: white; */
	}
	/* Use :before pseudo-tag to insert gfx to show link is a gallery? */
	/*
	div.gallery li a:before {
		content: 'before';
	}
	div.gallery li a:after {
		content: 'after';
	}
	*/
	div.gallery li a span.caption {
		width: 98%;
		/*
		background: #888;
		color: white;
		*/
		color: #444;
		border: 0;
		margin: 0;
		padding: 1px 2px 1px 2px;
		text-align: center;
		font-family: "Impact",sans-serif;
		display: block;
	}

	/* Gallery links */

	div.gal_nocap li.gal_gallink {
		position: relative;
	}

	div.gal_nocap li.gal_gallink a span {
		display: none;
	}

	div.gal_nocap li.gal_gallink a:hover span {
		position: absolute;
		display: inline;
		top: 0px;
		left: 0px;
		text-align: right;
		width: 60%;
		margin-top: 5px;
		margin-left: 40%;
		border: 0;
		padding: 5px;
		background-color: black;
		color: white;
		font-family: "Impact",sans-serif;
		font-size: 120%;
	}

	/* Gallery title */

	div.gal_nocap div.gal_title {
		clear:both;
		font-family: "Impact",sans-serif;
		font-size: 200%;
		text-align: right;
		margin: 0;
		padding: 10px 0 0 0;
		border-width: 0;
	}

	/* Gallery controls */

	div.gal_nocap div.gal_control {
		text-align: right;
		border-width: 0;
		padding: 7px 0 0 0;
		margin: 0;
	}

	div.gal_nocap div.gal_control a img {
		vertical-align: middle;
		border-width: 0 0 0 0;
		margin: 0 0 0 7px;
		padding: 0;
	}

	/* Gallery Pictures */
	#small_header {
		background-color: black;
		margin: 0px 0px 30px 0px;
		border-width: 0 0 0 0;
		padding: 10px 25px 10px 25px;
	}
	#small_header:after {
		content:'';
		clear: both;
		display:block;
	}

	#header_navigation {
		float: right;
	}

	/*
	#header_navigation a {
		vertical-align: top;
	}
	*/

	#header_navigation a img {
		border-width: 0;
		margin: 0 0 0 15px;
		vertical-align: top;
	}

	div.gal_img {
		text-align: center;
	}
	div.gal_img div.caption {
		/* TODO */
	}
	div.gal_img div.refnum {
		font-family: "Courier New",monospace;
		font-size: 150%;
	}

	/* Big pictures */
	div.bigpic {
		float: right;
		margin: 0 0 6px 6px;
		/* TODO: non-transparent white border around gallery imgs too. */
	}
	div.bigpic img {
		border: 1px solid #888;
		padding: 1px;
		margin: 0;
		background: white;
		/* Images are inline elements by default and so have a little white
		 * space on their bottoms to allow for descenders. This causes a gap
		 * between the image and the caption. Display:block fixes this.
		 */
		display: block;
	}
	div.bigpic div.caption {
		background: #888;
		border: 0;
		margin: 0;
		padding: 1px 2px 1px 2px;
		color: white;
		text-align: right;
		font-family: "Impact",sans-serif;
	}

	/* Contact details. */
	address.contact {
		font-style: normal;
	}
	dl.contactinfo {
		padding: 0;
		border: 0;
		margin: 0;
		font-size: 110%;
	}
	dl.contactinfo:after {
		display: block;
		clear: both;
		content: ".";
		height: 0;
		visibility: hidden;
	}
	dl.contactinfo dt {
		clear: both;
		float: left;
		font-weight: bold;
		width: 3em; 
		text-align: left;
	}
	dl.contactinfo dd {
		float: left;
		text-align: left;
	}
	dl.contactinfo dd a {
		text-decoration: none;
	}

}