/* --------------------------------------------- */ 
/*	Squire Creative												       */
/*	Build start date: 26/06/2009                 */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* KEY                                           */
/* --------------------------------------------- */
/* 1.	General Setup                              */
/* 2.	SkipLinks                                  */
/* 3.	Typography		                             */
/* 4.	Wrapper                                    */
/* 5.	Navigation                                 */
/* 6.	Footer		                                 */
/* --------------------------------------------- */
/* 0.875 = 14		                                 */
/* 0.8125 = 13		                               */
/* 0.75 = 12		                                 */
/* 0.6875 = 11		                               */
/* 0.625 = 10		                                 */
/* 0.5625 = 9		                                 */
/* 0.5 = 8		                                 	 */


/* --------------------------------------------- */
/* 1. General Setup                              */
body { font: 100%/1.5em georgia, times, serif; background: #3a3a3a url(/a/img/global/bg.gif) repeat 0 0; padding: 0; margin: 0; color: #FFF; }

/* --------------------------------------------- */
/* 2. Generic Classes                            */
.offScreen { position: absolute; left: -5000px; }
.clear { clear: both; }
.message { background: #FFFFD3; border: 2px solid #e9e879; padding: 5px 10px; line-height: 1.5em }

/* --------------------------------------------- */
/* 5. Structure                                  */
#wrapper { text-align: left; font-size: 1em; width: 1000px; margin: 0 auto; overflow: hidden; background: url(/a/img/global/drop.png) repeat-y 0 0;}
	#wrapper #foil { width: 920px; text-align: left; font-size: 1em; margin: 0 auto; background: url(/a/img/global/drop.png) repeat-y 0 0;}

/* --------------------------------------------- */
/* 6. Header	                                   */
#header { position: relative; background: transparent url(/a/img/global/header/header_inc.jpg) repeat 0 0; margin: 0; padding: 0; height: 210px; }
#header #identity { position: absolute; bottom: 40px; left: 20px; }
	#header #identity img { border: 0; }
ul#nav { list-style-type: none; background: #AA77AA; margin: 0; padding: 0; overflow: hidden; font: 0.875em georgia, serif; padding: 0 0 0 20px; }
	ul#nav li a span { text-transform: uppercase; }
	ul#nav li { float: left;}
		ul#nav li a { padding: 2px; display: block; float: left; color: #111; text-decoration: none; border-top: 5px solid #AA77AA; border-bottom: 5px solid #AA77AA; margin: 0 10px 0 0; }
			ul#nav li a:hover { border-top: 5px solid #92278F; border-bottom: 5px solid #92278F; }
			ul#nav li.active a { border-top: 5px solid #92278F; border-bottom: 5px solid #92278F; }
			

#content { background: transparent url(/a/img/global/page/grey_body_bg.jpg) repeat-y 0 0; padding: 0; margin: 0; }
#page { padding-top: 20px;}
body#home h1 { font: 3em georgia, times, serif; color: #AA77AA; width: 320px; float: left; margin: 0 0 0 20px; padding: 0; line-height: 1.125em; }
body#design h1 { font: 3em georgia, times, serif; color: #779ECE; width: 280px; float: left; margin: 0 0 0 20px; padding: 0; line-height: 1.125em; }
body#photography h1 { font: 3em georgia, times, serif; color: #779ECE; width: 280px; float: left; margin: 0 0 0 20px; padding: 0; line-height: 1.125em; }

body#blog h1 { font: 3em georgia, times, serif; color: #DDBB77; margin: 0; padding: 0; line-height: 1em; }
body#contact h1 { font: 3em georgia, times, serif; color: #88CC99; margin: 0; padding: 0; line-height: 1em; }

.post { width: 500px; margin-bottom: 25px; }

.post.sub { border-top: 10px solid #AA77AA; padding-top: 20px;}
.post.sub h2 { font: 1.5em georgia, times, serif; color: #DDBB77; margin: 0; padding: 0; line-height: 1em; }

.col { width: 300px; float: left; line-height: 1.125em; color: #CCC; }
.col.twoThirds { width: 580px; float: left; line-height: 1.125em; color: #CCC; margin: 0 20px;}
	.col p { line-height: 1.3em; font-size: 0.75em;}
	.col.centre { margin: 0 10px; }
		.col.centre a { color: #aa77aa; }

body#blog .col.twoThirds a { color: #DDBB77}
	body#blog .col.twoThirds p.postInfo { font-size: 0.625em; color: #DDBB77}

p.permalinks { font-size: 1.125em; color: #DDBB77; font-weight: normal; }
	p.permalinks a { text-decoration: none; }

.commentBox { }
.commentBox .author { color: #DDBB77; margin-top: -10px; font-size: 0.625em; }	
	h2 { font-weight: normal; color: #AA77AA; margin: 0 0 -5px 0; line-height: 1.125em; font-size: 0.875em;}

	.seedTray.blog.previous h4 { font-size: 0.875em; color: #ddbb77;}
		.seedTray.blog.previous .postInfo { font-size: 0.625em; color: #ddbb77; margin-bottom: -5px; }
			.seedTray.blog.previous .postBox { margin-bottom: 25px;}
				.seedTray.blog.previous .postBox a.readMore { font-size: 0.75em; }
			
ul#pagination { list-style-type: none; margin: 0 0 25px 0; padding: 0; overflow: hidden; }
	ul#pagination li { float: left; margin-right: 5px; font-size: 0.625em; }
		ul#pagination li a { background: #AABB77; color: #2A2A2A !important; padding: 2px 5px;}
	
	.seedTray { background: #1F1C1D; margin-right: 20px; padding: 20px; margin-bottom: 20px; }
		.seedTray.blog a { color: #ddbb77;}
		.seedTray.twitter a { color: #AA77AA;}
		.seedTray.twitter ul { margin: 0; padding: 0; list-style-type: none; font-size: 0.75em; }

		.seedTray.photography h4 { color: #AA77AA; font-size: 0.875em; }
			.seedTray.photography a { color: #AA77AA;  }

	h3 { color: #a2d5ef; text-transform: uppercase; font-weight: normal; font-size: 0.75em; margin: 0 0 5px 0; }
		h3#twitter { background: url(/a/img/global/twitterBird.gif) no-repeat 100% 0; color: #a2d5ef; text-transform: uppercase; font-weight: normal; font-size: 0.75em; margin: 0 0 5px 0; height: 42px;}
	h4 { font-weight: bold; font-style: italic; font-size: 0.75em; margin: 0; }
	.seedTray.twitter h4 { color: #AA77AA; font-size: 0.875em;}
	.twitterDateStamp { margin: -10px 0 0 0; color: #999; font-size: 0.625em !important; }
	.footNote { color: #CCC; font-size: 0.625em !important; }
		.footNote a { color: #A2D5EF; }

		.portfolioWrap img  { border: 0; }
		
body#design .portfolioWrap { border-top: 10px solid #779ECE; }
	body#design .portfolioWrap { padding-top: 20px; }
		body#design .portfolioWrap ul li { padding-bottom: 25px; }

body#photography .portfolioWrap { border-top: 10px solid #779ECE; }
	body#photography .portfolioWrap { padding-top: 20px; }
		body#photography .portfolioWrap ul li { padding-bottom: 25px; }


.portfolioWrap { background: url(/a/img/global/page/blue_body_bg.jpg) repeat-y 0 0; overflow: hidden; padding-bottom: 20px;}
	.portfolioWrap h2 { background: #779ECE; color: #111; line-height: 2em; padding-left: 20px; margin: 0 0 20px 0; }
		.portfolioWrap h2 span { text-transform: uppercase; }
		.portfolioWrap h2 a { font-size: 0.625em; background: #0072BC; color: #FFF; padding: 2px; margin-left: 10px;}
		
		ul.portfolio { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
			ul.portfolio li { position: relative; padding: 0 20px 50px 20px; float: left; font-size: 0.75em; margin-bottom: 25px; min-height: 225px; height: auto !important; height: 225px; }
				ul.portfolio li img { border: 2px solid transparent; width: 276px;  }
					ul.portfolio li img:hover { border: 2px solid #ab76aa; }
				ul.portfolio li p.viewTheWork { position: absolute; left: 20px; bottom: 10px; }
				ul.portfolio li.centre p.viewTheWork { position: absolute; left: 0px; bottom: 10px; }
				body#design ul.portfolio li p.viewTheWork { bottom: 10px;}

				ul.portfolio li p a { font-weight: bold; color: #aa77aa;}
			ul.portfolio li p { margin: 0; }
			ul.portfolio.photography li { font-weight: bold; min-height: 185px; height: auto !important; height: 185px;}
				ul.portfolio.photography li p { width: 275px; line-height: 1.5em; }
			ul.portfolio li.centre { padding: 0 0 50px 0; }
			
			dl { overflow: hidden; margin: 0; padding: 0; width: 275px; }
			dl dt { float: left; width: 4em; line-height: 1.5em; margin: 0; clear: left; color: #779ECE; }
			dl dd { display: block; line-height: 1.5em; color: #CCC; font-weight: bold; float: left; margin: 0; width: 225px; /* Not ideal! */ }
			dl dd a { font-weight: bold; color: #aa77aa;}
			
#footer { border-top: 10px solid #AA77AA; background: url(/a/img/global/footer/footerBg.jpg) repeat-y 0 0; overflow: hidden; font-size: 0.875em; line-height: 1.125em; color: #CCC; padding: 15px 20px 0 20px;}
	#footer a { color: #CCC; }
	#contactInformation a,
	#links a { color: #CCC; }
	#links { margin-left: 300px; }
		#links h5 { color: #aa77aa; margin: 0 0 7px 0; font-size: 1em;}
		#links ul { list-style-type: none; margin: 0; padding: 0; float: left; width: 12em;}
			#links ul li { margin-right: 15px; font-size: 0.825em; }
#contactInformation { float: left; }
#contactInformation p.tel,
#contactInformation p.email { margin: 0 0 10px 0; }
address { font-size: 1em; font-style: normal; line-height: 1.25em; margin-bottom: 5px;}
	address span { color: #88CC99; padding-bottom: 5px; display: block; font-weight: bold; }
#tail { background: url(/a/img/global/footer/tail.png) no-repeat 0 0; clear: both; width: 1000px; margin: 0 auto; height: 60px; }

#content #page .post.contactInfo #contactInformation a,
#content #page .post.contactInfo #links a { color: #88CC99; }
#callOut { position: absolute; left: 640px; top: 90px; width: 245px;}
#callOut h2 { color: #88CC99; font-size: 1em; }
	#callOut p { font-size: 0.75em; line-height: 1.125em;}
		#callOut p.cta { margin-top: -5px; }
			#callOut p a { color: #88CC99; }

#commentForm { margin-top: 50px; border-top: 10px solid #AA77AA; }
#commentForm .commentPreview { margin: 10px 0 20px 0; border-bottom: 5px solid #AA77AA; padding: 10px 0 20px 0; }
#commentForm textarea { background: #FFF; height: 100px; width: 100%; }

	#commentForm fieldset { border: 0; margin: 0; padding: 0; }
		#commentForm fieldset legend { display: none; }
		#commentForm fieldset .row { display: block; padding: 5px 0; clear: none !important; clear: left; overflow: hidden;}
			#commentForm fieldset .row .label { display: block; padding-top: 0.4em; float: left; font-weight: bold; width: 100px; }
				#commentForm fieldset .row .field input { padding: 0px; width: 130px; float: left; margin-right: 10px; color: #b4b4b4;}
					#commentForm fieldset .row input.submit { margin-left: 0; width: auto; color: #3a3a3a; }
				#commentForm fieldset .row .field textarea { height: 75px; padding: 5px; width: 335px; }

#commentPrefs { margin-top: 25px; }

.contactForm h4 { color: #88cc99; font-size: 0.875em; }
.contactForm form { }
	.contactForm form fieldset { border: 0; padding: 0; margin: 0;}
		.contactForm form fieldset legend { display: none; }
			.contactForm form fieldset .row { margin: 0 0 10px 0; }
				.contactForm form fieldset .row.submit { margin-top: 5px; }
	.contactForm form fieldset span.label { font-size: 0.75em;}
	.contactForm form fieldset span.field input.text { width: 236px; background: #ccc; }
	.contactForm form fieldset span.field select { width: 239px; background: #ccc; }
	.contactForm form fieldset span.field textarea { width: 236px; height: 100px; background: #ccc;}