/*

	This website was created by Natural Graphic

	Copyright:	2008 Natural Graphic Ltd All rights reserved
	Author(s):	Alex Traylen
	Web:		www.naturalgraphic.co.uk
	Email:		talk [at] naturalgraphic.co.uk
	Phone:		+44 (0) 20 7241 2264

*/





/* -----------------------------------
+
+
+	General
+
+
----------------------------------- */

html,
body
		{
			background:#fff url(../img/backgrounds/bg-natural-graphic.png) 980px 0 repeat-y;
			line-height:120%;
			font-family:
				arial,
				verdana,
				sans-serif;
			height:100%;					/* needed for container min-height */
			color:#333;
		}

.clearer
		{
			line-height:1px;
			font-size:1px;
			clear:both;
		}





/* -----------------------------------
+
+
+	Typography
+
+
----------------------------------- */
	
h2
		{
			line-height:96%;
			font-size:105%;
			color:#000;
		}
		
h3
		{
			margin-bottom:20px;
			line-height:96%;
			font-size:96%;
		}
		
h4
		{
			margin-bottom:20px;
			line-height:96%;
			font-size:86%;
		}
		
h5
		{
			margin-top:20px;
		}
		
h6
		{
			margin-bottom:10px;
			color:#3c0;
		}
		
p
		{
			margin:0 0 20px 0;
			line-height:110%;
			font-size:86%;
		}		
		
		
		
		
		
/* -----------------------------------
+
+
+	Lists
+
+
----------------------------------- */

.column245px ul
		{
			/*background:lime;*/
			
			list-style-position:inside;
			list-style-type:square;
			margin-bottom:20px;
		}





/* -----------------------------------
+
+
+	Links
+
+
----------------------------------- */
	
a
		{
			color:#3c0;
		}
		
a:active
		{
			color:#3c0;
		}
		
a:visited
		{
			color:#3c0;
		}
		
a:hover
		{
			color:#000;
		}





/* -----------------------------------
+
+
+	General containers
+
+
----------------------------------- */

.container
		{
			position:relative;				/* needed for footer positioning*/
			height:100%;					/* IE6: treated as min-height*/
			height:auto !important;			/* real browsers */
			min-height:100%;				/* real browsers */
		}
		
.header
		{
			padding:20px 20px 30px 20px;
		}

.content
		{
			padding:0 10px 70px 10px;	/* bottom padding for footer */
			width:960px;
		}
		
.page
		{
			width:800px;
			float:left;
		}
		
.project
		{
			margin:0 0 50px 0;
			overflow:hidden;
		}

.footer
		{
			padding:20px 0 20px 10px;
			position:absolute;
			font-size:76%;
			width:960px;
			color:#999;
			bottom:0;						/* stick to bottom */
		}
		
.footer .copyright
		{
			margin:0 10px 0 170px;
			width:140px;
			float:left;
		}

.footer .validation
		{
			text-align:right;
			margin:0 10px;
			width:620px;
			float:left;
		}






/* -----------------------------------
+
+
+	Slideshow
+
+
----------------------------------- */

.slideshow
		{
			height:290px;
		}

.slideshow img
		{
			border:#ddd solid 5px;
		}
		
.slideshowcontrols
		{
			/*border-radius:4px;*/
			display:table-cell;
			background:#c2edb4;
		}
		
.slideshowcontrols .play
		{
			margin:3px 5px 4px 5px;
			line-height:100%;
			font-size:70%;
		}
		
.slideshowcontrols ul.slideshowbuttons
		{
			padding:0 2px 7px 3px;
			height:20px;
		}

.slideshowcontrols ul.slideshowbuttons li
		{
			display:inline-block;
			margin:0 1px 0 0;
		}
		
.slideshowcontrols ul.slideshowbuttons li a
		{
			border:#c2edb4 solid 2px;
			background-color:#fff;
			display:block;
			height:20px;
			width:20px;
		}
		
.slideshowcontrols ul.slideshowbuttons a.activeSlide
		{
			border:#ade89a solid 2px;
			background:#fff url(../img/slideshow/but-white-square-eye.png) top left no-repeat;
		}
			
.slideshowarrow
		{
			background-color:#fff;
			padding-bottom:3px;
			padding-left:5px;
			height:14px;
		}
			
.slideshowarrow img
		{
			vertical-align:top;
			display:inline;
			margin:0 0 0 12px;
			padding:0;
			border:0;
			height:14px;
		}
		




/* -----------------------------------
+
+
+	Grid
+
+
----------------------------------- */

/* Columns */

.column140px,
.column220px,
.column245px,
.column300px,
.column540px,
.column780px
		{
			margin:0 10px 20px 10px;
			float:left;
		}
		
.column140px
		{
			width:140px;
		}

.column220px
		{
			width:220px;
		}

.column245px
		{
			width:245px;
		}

.column300px
		{
			width:300px;
		}

.column540px
		{
			width:540px;
		}

.column780px
		{
			width:780px;
		}

/*
.column60px,
.column140px,
.column220px,
.column460px,
.column540px,
.column700px,
.column940px
		{
			margin:20px 10px 0 10px;
			float:left;
		}
		
.column60px
		{
			width:60px;
		}
		
.column140px
		{
			width:140px;
		}

.column220px
		{
			width:220px;
		}
		
.column460px
		{
			width:460px;
		}

.column540px
		{
			width:540px;
		}

.column700px
		{
			width:700px;
		}
		
.column940px
		{
			width:940px;
		}
*/
/* Wrappers 

.wrapper480px,
.wrapper720px
		{
			float:left;
		}
		
.wrapper480px
		{
			width:480px;
		}
		
.wrapper720px
		{
			width:720px;
		}
		*/





/* -----------------------------------
+
+
+	Warnings
+
+
----------------------------------- */

.iewarning
		{
			display:none;
		}





/* -----------------------------------
+
+
+	Main navigation
+
+
----------------------------------- */
		
.navigation
		{
			margin:0 10px;
			font-size:86%;
			width:140px;
			float:left;
		}
		
.navigation ul
		{
			list-style-type:none;
		}
		
.navigation ul li a
		{
			text-decoration:none;
		}
		
.navigation a.active
		{
			color:#000;
		}
		
		
		
/* -----------------------------------
+
+
+	Google Maps
+
+
----------------------------------- */

.googlemap
		{
			border:#ddd solid 5px;
			height:500px;
			width:530px;
		}

/*

.mapcanvas0,
.mapcanvas1,
.mapcanvas2
		{
			margin:30px 0 0 0;
			height:220px;
			width:220px;
		}
		
.mapform
		{
			border-bottom:.cdcdcd solid 1px;
			border-top:#fff solid 1px;
			background-color:#ececec;
			margin-bottom:30px;
			width:220px;
			float:left;
		}
		
.mapform fieldset
		{
			margin:10px;
		}
		
.mapform fieldset legend
		{
			padding-bottom:10px;
		}
		
.mapform fieldset label
		{
			color:#679b80;
			font-size:76%;
		}
		
.mapform fieldset input
		{
			
			border:.ccc solid 1px;
			margin:1px 0 7px 0;
			background:#fff;
			font-family:
				helvetica,
				arial,
				verdana,
				sans-serif;
			width:192px;
			height:18px;
			padding:3px;
		}
		
.mapform fieldset input.submit
		{
			background:#679b80;
			font-family:
				helvetica,
				arial,
				verdana,
				sans-serif;
			font-size:76%;
			margin:5px 0;
			height:30px;
			width:100px;
			color:#fff;
			border:0;
		}
		*/