/* some sensible defaults */


*{padding:0;margin:0;}

a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */

html {font:  100% "Trebuchet MS", Verdana, Geneva, Helvetica, Arial, sans-serif;
		 }



body {	font:  62.5% "Trebuchet MS", Verdana, Geneva, Helvetica, Arial, sans-serif;	/* allows 1em to equal about 10px */
			height: 100%;
			width: 100%;
			background: #35a6ae url("images/bodybg.jpg") repeat-x;	/* the blue gradient across the whole page*/
			}


/* TYPOGRAPHY */

p {	text-align: center;	/* centres the paragraphs, if you want to align left it's 'text-align: left;' instead */
		font: 1.3em "trebuchet ms", verdana, geneva, helvetica, sans-serif;	/* set your paragraph font here, it's on 'trebuchet ms' as first choice, 'verdana' 2nd etc */
		line-height: 1.5;
		color: #2d4658;	/* choose text colour with a 'hex value' preceeded by '#' */
	}

	
a {	color: #2d4658;
		text-decoration: no underline;	
	}

	a:hover {
		text-decoration: none;	
	}
	


		
		
h1 {	font: 1.6em "trebuchet ms", verdana, geneva, helvetica, sans-serif; /* h1 = amy fetzer - imaginative, informative editorial */
		text-align: center;
		color: #2d4658;
		padding: 0px 0 20px 0;	/* padding (space around text) goes 'top, right, bottom, left', so 30px bottom here */
	}


h2 	{font: 1.5em "trebuchet ms", verdana, geneva, helvetica, sans-serif;	/* h2 = amy fetzer */
	text-align: center;
	color: #2d4658;
	padding: 0 0 20px 0;
	}


h3 {	font: 1.4em "trebuchet ms", verdana, geneva, helvetica, sans-serif;	/* h3 = 'freelance journalist' */
		text-align: center;
		color: #2d4658;
		padding: 0px 0 10px 0;
		border-bottom: 1px solid #fff;
		margin-bottom: 20px;
		}	
		
		
h4 {	font: 1.4em "trebuchet ms", verdana, geneva, helvetica, sans-serif;	/* h3 = 'freelance journalist' */
		text-align: center;
		color: #2d4658;
		padding: 20px 0 10px 0;
		}
		
		
h5, h6		{font: 1.3em "trebuchet ms", verdana, geneva, helvetica, sans-serif;	/* h3 = 'freelance journalist' */
		text-align: center;
		color: #2d4658;
		}	

		
/* BASIC LAYOUT */


#wrapper {	width: 780px;	/* keeps everything together */
				margin: 0 auto;	/* centres it on the page */
				border: 5px solid #ffffff;	/* white border */
				background: #cdeaec url("images/bgflowers.gif") no-repeat bottom;	/* graphic on bottom */
				padding: 0;
			}
			
			
			
#header {	position: relative;
				float: left;
				width: 780px;
				background: url("images/mountain.jpg") no-repeat top left;	/* this div contains the top image */
				}
				
#header2 {	position: relative;
				float: left;
				width: 780px;
				background: none; no-repeat top left; 
				/* this is the div I have created without the photo in it */
				}
				
				
#content {	clear: both;	/* the div below the 'header' div, containing all the content */
				position: relative;
				margin: 0;
				border-top: 3px solid #fff;
				padding: 30px 55px 0px 55px; /* 20px padding top and 0 bottom,  55px padding left and right */
				}	
				
				
#footer {	clear: both;	/* all the info at the bottom */
		margin: 20px 55px 0 55px;
		padding-top: 20px;
		}
		
		
/* ADVANCED LAYOUT TO ALLOW FOR TESTIMONIALS */

body#pagehome #content #testi
 {	margin: 40px auto 0 auto;
	width: 400px;
}
													
body#pagetestimonials #content #testileft
{float: left;
width: 310px;
margin: 40px 0 0 10px;
}

body#pagetestimonials #content #testiright 	{
	float: right;
	width: 310px;
	margin: 40px 10px 0 0;
}

body#pagehome #content #testi p,
body#pagetestimonials #content #testileft p,
body#pagetestimonials #content #testiright p
															{border: 1px dotted #fff;
															padding: 2em;
															font-style: italic;
															background-color: #daf1f3;
															margin-bottom: 15px;}

body#pagehome #content #testi p span,
body#pagetestimonials #content #testileft p span,
body#pagetestimonials #content #testiright p span,
body#pageclients #content #testibar a span	{
	font-style: normal;
	color:#7f99bf;
	display: block;
	padding-top: 10px;
}

body#pageclients #content #testibar	{	float: right;
						width: 150px;
						margin: 40px 0 0 0;
						}

body#pageclients #content #testibar a		{font: 1.2em "trebuchet ms", verdana, geneva, helvetica, sans-serif;	
															border: 1px dotted #fff;
															padding: 0.8em 0.6em;
															color: #909090;
															font-style: italic;
															background-color: #daf1f3;
															margin-bottom: 28px;
															display: block;
															text-decoration: none;}
															
body#pageclients #content #testibar a:hover
{	background: #93a8c7;
	color: #fff;
}

body#pageclients #content #testibar a:hover span	{
	color: #daf1f3;
}

/* NAVIGATION */
				

ul#nav	{		margin-top: 142px;	/* this is the navigation as a whole below the image, but still in the header div */
					border-top: 3px solid #fff;
					}

					
					
ul#nav li {		float: left;	/* this is the navigation 'list item', i.e. 'home', 'clients' etc */
					width: 129px;
					list-style-type:none;
					text-align: center;
					margin: 0;
					padding: 0;
					border-right: 1px solid #fff;
					}
					
					
					
ul#nav li.contact	{border: none;}


ul#nav li a	{ 					/* this is the navigation 'link', i.e. 'home', 'clients' etc - it just happens that all your list items are links as well */
					font: 1.7em "arial", "trebuchet ms",'Lucida Sans Unicode',Verdana, Geneva, Helvetica, Arial, sans-serif;
					color:  #3e4d36;
					display:block;
					background-color: #9bd3d7;
					text-decoration: none;
					padding: 0.3em 0;
					}
					
			
ul#nav li a:hover	{		/* controls what happens when the cursor moves over the link */
								background: #93a8c7;
								color: #fff;
								}

body#pagehome li.home a	{
								background: #93a8c7;
								color: #fff;
}

body#pageclients li.clients a	{
								background: #93a8c7;
								color: #fff;
}

body#pagearticles li.articles a	{
								background: #93a8c7;
								color: #fff;
}

body#pagephotos li.photos a	{
								background: #93a8c7;
								color: #fff;
}

body#pagetestimonials li.testimonials a	{
								background: #93a8c7;
								color: #fff;
}

body#pagecontact li.contact a	{
								background: #93a8c7;
								color: #fff;
}
				

/* LAYOUT DEPENDING ON PAGE - 'body#page...' denotes what page, on the html the 'body' element is given that ID */
			
body#pagehome #content #intro	{margin-top: 30px;}

body#pageclients #content {padding:	30px 30px 0 30px;}

body#pagecontact #content {height: 22em;}


		
		
/* LISTS */

body#pageclients ul#leftcol,
body#pageclients ul#rightcol				/* the 2 main columns used on the clients page */
									{	margin: 40px 20px 0 0;
										float: left;
										width: 260px;
										list-style-type: none;
										padding: 0;
										}

										

body#pageclients ul#leftcol li,
body#pageclients ul#rightcol li	{font: 1.3em "trebuchet ms", verdana, geneva, helvetica, sans-serif;
											text-indent: 0.5em;
											background-color: #c4d6e0;
											margin: 0 0 0.5em 0;
											color: #2d4658;
											height: 1.7em;
											}
											
body#pageclients ul#leftcol li a,
body#pageclients ul#rightcol li a	{		display: block;
														height: 1.7em;
													}
											
body#pageclients ul#leftcol li a:hover,
body#pageclients ul#rightcol li a:hover	{	background: #93a8c7;
															color: #fff;
														}



ul#articles	{	margin: 20px 0 40px 25px;
					list-style-type: none;
											}

											
ul#articles	li	{position: relative;
					font: 1.3em "trebuchet ms", verdana, geneva, helvetica, sans-serif;
					margin: 0 0 20px 0;
					float: left;
					width: 150px;	
					padding: 0;
					height: 150px;}
					
ul#articles li.textlink {position: relative;
					font: 1.3em "trebuchet ms", verdana, geneva, helvetica, sans-serif;
					margin: 15px 0 20px 0;
					float: left;
					width: 150px;
					padding: 0;
					height: 150px;
						}
						
ul#articles li.textlink a, ul#articles li.textlinkFIRST a {	/*only use this class if text link runs on same row as covershot image links */
	
									float: left;
									text-align: center;
									text-decoration: none;
									font: 1em "trebuchet ms", verdana, geneva, helvetica, sans-serif;
									padding: 0 0 0 0;
									background: #9bd3d7;
									border: 1px solid #000;
									width: 110px;	
									display: block;
									height: 150px;
									margin: 0 0 0 28px;
									}
									
									
ul#articles li.textlink a:hover,
ul#articles li.textlinkFIRST a:hover	{
													background: #93a8c7;
													color: #fff;
													border: 1px solid #fff;
}
				
ul#articles li.textlinkFIRST {position: relative;
					font: 1.3em "trebuchet ms", verdana, geneva, helvetica, sans-serif;
					margin: 15px 0 5px 0;
					float: left;
					width: 150px;
					padding: 0;
					}
						
ul#articles li.textlink a span, ul#articles li.textlinkFIRST a span
{text-decoration: underline;
}
											
ul#articles	li	a	{
		
		float: left;
		margin: 0;
		display: block;
		font: 1em "trebuchet ms", verdana, geneva, helvetica, sans-serif;
		width:	110px;	
		height: 150px;
		padding: 0;
}

ul#articles	li	a img {
	border: 1px solid #000;
	width: 110px;}

ul#articles	li	a:hover img {
	border: 1px solid #fff;}
	

body#pagearticles ul#articles {
	margin: 35px 0 20px 58px;
}

body#pagearticles ul#articles li a {
	border: 1px solid #000;
width: 110px;
text-indent: -9999px;
}

body#pagearticles ul#articles li	a:hover {border: 1px solid #fff;
	
}

body#pagearticles ul#articles li {
	background: #000;
	width: 110px;
	margin-right: 35px;
}
											
body#pagearticles ul#articles	li.travel a{background: url("images/travel-mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.lifestyle a{background: url("images/lifestyle_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.health a{background: url("images/health_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.kids a{background: url("images/kids_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.green a{background: url("images/green_mini.jpg") no-repeat;}	/* this image is wider than the rest for some reason, you could resize it if you want */

body#pagearticles ul#articles	li.celebs a{background: url("images/celebs_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.skiing a{background: url("images/skiing_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.comics a{background: url("images/comics_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.stories a{background: url("images/stories_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.education a{background: url("images/education_mini.jpg") no-repeat;}

body#pagearticles ul#articles	li.corporate a{background: url("images/corporate_mini.jpg") no-repeat;}




#onepix {position: relative;
			padding: 0;
			margin: -10px 0 0 220px;}
										
#twopix {position: relative;
			padding: 0;
			margin: -10px 0 0 150px;}		

#threepix {position: relative;
			padding: 0;
			margin: -10px 0 0 70px;}		

		

body#pagephotos #photowrapper	{
	width: 560px;
	margin: 0 auto;
}

body#pagephotos #leftphotos	/* the left and right list items on the photo gallery page */
										{float: left;
										width: 280px;
										margin: 20px 0 0 0;
											}

body#pagephotos #rightphotos		{float: left;
										width: 280px;
										margin: 20px 0 0 0;
										text-align: right;}

		
/* FOOTER TYPOGRAPHY */
		
		
#footer p	{
				padding-bottom: 10px;}
				
#footer p.credits	{font-size: 1.3em;
						padding: 0;
						color: #96a5ba;
				}

#footer a	{text-decoration: underline;
				padding-right: 1em;}

.credits a	{
	color: #96a5ba;
}

.credits a:hover	{
	color: #2d4658;
}

/* IMAGE LINKS */

img	{	/* controls 'img' tags in html, i.e. it's a default, to change dimensions for an image change 'width' and 'height' properties in html, not here as will apply to all */
	border: 1px solid #000;
	margin: 15px 0 0 0;
	
}

img.covershot	{position: absolute;
					top: 0px;
					left: 28px;
	
}

#scans {position: relative;
	margin: 0 auto;
	width: 800px;
}

#scansdps {position: relative;
	margin: 0 auto;
	width: 1040px;
	
}

#scans p {
	margin-top: 5px;
}
#scans img {
	width: 800px;
	padding: 0;
	margin: 20px auto 0 auto;
}

#scansdps img	{float: left;
	width:500px;
	margin: 20px 2px 0 0;
}

#scans img.clear 
	{clear: both
}