/* 
-----------------------------------------------------
*******   STYLE SHEET FOR POSTURE PEOPLE WEB SITE   *******
*******   Created by Stuart Nicholls          *******
*******   www.stuartnicholls.co.uk            *******
-----------------------------------------------------

CONTENTS

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. forms
	7. tables
	8. misc stuff

	A. debug colours

-----------------------------------------------------
Notes:


-----------------------------------------------------
*/



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

* {/* zero all margins and padding */
		margin: 0;
		padding: 0;
		}

body {	/* skip-navigation container */	
		}

#skipNav { /* skip-navigation container */
		position: absolute;
		top: 2px;
		left: 5px;
		width: 80px;
		text-align: center;
		}
		
		
/* For the benefit of sticky footer - NOTE: .NET Platforms
When coding sites for ASP.net where each page is inside a <form> tag,
be sure to add the form tag to the height:100% statement,
else it will break the sticky footer. Like this;

html, body, form, #wrap {height: 100%;}*/

html, body, #siteWrapperDiv {
		height: 100%;
}
		
#channelGlazingMainStyle{
		background:url(../images/siteBgRepeater.gif) repeat-x #f5fafe;
		color:#3a3a3a;
		line-height:1.5em;
		font-size:1.4em;
}
		
/*  --------- 2. structure  --------- */

body > #siteWrapperDiv {height: auto; min-height: 100%;}

#siteWrapperDiv{
		width:960px;
		margin:0 auto;
}

#mainContentWrapper
{
	width:960px;
	float:left;
}

#mainContentWrapper a
{
	text-decoration:underline;
}

#mainContentWrapper.callout h1
{
	margin:4px 0 20px 0;
}

#mainContentWrapper.callout strong
{
	font-size:1.2em;
}

#headerDiv{
		width:960px;
		float:left;
		margin:0;
		padding:0;
}

#headerDiv #openingTimes{
		float:right;
		width:450px;
		margin:8px 4px 0 0;
		padding:0;
		text-align:right;
		color:#383737;
}

#headerDiv #openingTimes li{
		padding:3px 0 0 0;
}

#headerDiv #openingTimes .phoneNumber{
		font-size:2em;
		letter-spacing:-0.05em;
		padding:13px 0 0 0;
}

#contentToFooterSpace{ /* An unfortunate result of using CSS Sticky Footer technique;
							This non-semantic <div> is required to add space between
							main content and footer as margins cannot be adjusted for
							these elements (sticky footer will overlap or create
											an unwanted scrollbar) - TP 22/06/09 */
		width:960px;
		height:22px;
		float:left;
}

#footer{	/* EXTRA CODE REQUIRED ONCE TRANSFERED TO .NET - See line 49 of this file TP 22/06/09 */
		width:100%;
		float: left;
		margin:-165px 0 0 0; /* negative value of footer height */
		padding:0;
		background:url(../images/footerTopRepeater.gif) repeat-x top #242424;
		position: relative;
		height: 165px;
		clear:both;
}

#footerContentsWrapper{
		width:964px;
		margin:0 auto;
		margin-top:4px;
		padding:24px 0 0 0;
		background:#242424;
}

#footerContentsWrapper dl{
		width:213px;
		height:106px;
		float:left;
		margin:0 24px 0 0;
		padding:0;
		color:#FFF;
		border-right:1px solid #505050;
		background:#242424;
}

#footerContentsWrapper #otherInformation{
}

#footerContentsWrapper dt{
		font-size:1.2em;
		font-weight:bold;
		margin:0 0 8px 0;
}

#footerContentsWrapper dd a{
		font-size:1.1em;
		line-height:1.6em;
		color:#FFF;
		border-bottom:1px dotted #7F7F7F;
		margin:0;
}

#footerContentsWrapper dd a:hover{
		color: #CCC;
		text-decoration:none;
		border-bottom:1px solid #606060;
}

#footerContentsWrapper p{
		color:#FFF;
		font-size:1.2em;
		margin:0 0 22px 0;
		padding:0;
		line-height:normal;
}

#footerContentsWrapper p a{
		color:#FFF;
		text-decoration:underline;
}

#footerLogos{
		width:482px;
		margin:0;
		padding:0;
		height:68px;
		float:left;
		border:1px solid #6b6b6b;
}

#footerLogos li{
		display:inline;
		height:64px;
		float:left;
}

#footerBuffer{
		width:100%;
		height:100%;
		float:left;
		background:#242424;
}

#contentWrapperDiv{
		width:960px;
		float:left;
		padding:0;
		padding-bottom: 165px;  /* must be same height as the footer */
}

.servicesBox{
		width:313px;
		float:left;
		padding:0 0 2px 0;
}

#tradeBoxHome{
		background:url(../images/tradeBoxHome.png) no-repeat top left;
		margin:0 10px 26px 0;
		clear: both;
}

#domesticBoxHome{
		background:url(../images/domesticBoxHome.png) no-repeat top left;
		margin:0 10px 26px 0;
}

#commercialBoxHome{
		background:url(../images/commercialBoxHome.png) no-repeat top left;
		margin:0 0 26px 0;
}

.servicesBox dl{
		width:140px;
		float:left;
		margin:0;
		padding:43px 0 25px 30px;
}

.servicesBox img{
		width:46px;
		height:44px;
		float:right;
		margin:163px 1px 0 0;
}

.servicesBox dt{
		visibility:hidden;
}

.servicesBox dd{
		color:#333;
		font-size:1.1em;
		line-height:1.3em;
		padding:5px 0 5px 12px;
		background:url(../images/blackBullet.gif) no-repeat top left;
}

.homeProductsBox {
		width:218px;
		height: 240px;
		float:right;
		display:inline; /* Keeping IE6 happy ~ TP 06/07/09 */
		margin:0 0 30px 40px;
		padding:0;
		/*border:1px solid #b4b4b4;*/
}

#homeProductsBoxBespoke{
		background:url(../images/bespokeBoxHome.png) top left;
}

#homeProductsBoxMirrors{
		background:url(../images/mirrorsGlassBoxHomeBg.jpg) top left;
}

#homeProductsBox24Hour{
		background:url(../images/repairBoxHome.png) top left;
}

#homeProductsBoxMirrors dt a, #homeProductsBoxBespoke dt a, #homeProductsBox24Hour dt a{ /* Unfortunately, this level of specificity is required to target these links in IE6 ~ TP 23/06/09*/
		color:#444444;
}

.homeProductsBox dt{
		width:218px;
		text-align:center;
		font-size:1.4em;
		font-weight: bold;
		color:#FFF;
		line-height:3.4em;
		text-indent: 10px;
}

.homeProductsBox dt a{
		color:#FFF;
}

.homeProductsBox dd{
	font-size:1.2em;
	line-height:1.5em;
	margin:140px 0 0;
	padding:8px;
	text-align:center;
	width:202px;
}

.homeProductsBox dd a
{
	color: #fff;
	text-shadow: #444444 1px 1px 1px; 
}

#mirrorsHeadArea{
		width:960px;
		float:left;
		margin:0 0 8px 0;
}

#mirrorsHeadArea p{
		width:760px;
		float:left;
		line-height:2.2em;
		padding:12px 25px 12px 0;
		border-right:1px solid #CCC;
}

#mirrorsHeadArea p a{
		text-decoration:underline;
}

#mirrorListingsWrapper{
		width:960px;
		float:left;
		margin:10px 0 0 0;
		padding:0 0 25px 0;
		border-bottom:1px solid #CCC;
}

#mirrorListingsWrapper dl{
		width:170px;
		float:left;
		display:inline; /* Just making IE6 happy */
		margin:0 10px 30px 10px;
		padding:0;
		background:#e5f0fa;
}

#mirrorListingsWrapper .productName{
		margin:8px 0 3px 8px;
		font-size:1.3em;
		font-weight:bold;
}

#mirrorListingsWrapper .price{
		margin:0 8px 0 8px;
		font-size:1.8em;
		letter-spacing:-1px;
		color:#494949;
}

#mirrorListingsWrapper .moreDetails{
		margin:3px 0 12px 8px;
		font-size:1.1em;
}

#mirrorListingsWrapper .moreDetails a{
		text-decoration:underline;
}

#mirrorListingsWrapper img{
		border:1px solid #CCC;
}

/* Contact Details */

.vcard{
		font-size:1.2em;
		margin:0;
		padding:0;
}

.vcard dt{
		font-size:1.2em;
		font-weight:bold;
		padding:0 0 0.2em 0;
}

.vcard dd{
		line-height:1.8em;
		padding:0 0 1em 0;
		color: #666;
}

.vcard dd a{
		color: #666;
}

#contactDetails{
		width:550px;
		float:right;
		margin:0;
		padding:0 0 0 25px;
		border-left:1px solid #CCC;
}

#contactDetails .org{
		font-weight:normal;
		font-size:1em;
		color: #666;
		line-height:1.8em;
		padding: 0;
}

#contactDetails .adr{
		width:180px;
		float:left;
		margin:0;
		padding:0;
}

#contactDetails .adr dd{
		padding:0;
}

#contactDetails .contactMethods{
		width:240px;
		float:left;
}

/* ---------- 3. links and navigation ----------- */

/*MAIN NAV START*/

#mainNav{
		float:right;
		display:inline;/* keeping IE6 happy */
		margin:22px 220px 0 0;
		padding:0 0 0 14px;
		background:url(../images/mainNavBgSlidingDoorsLeft.gif);
		font-size:1.4em;
		font-weight: bold;
		color:#FFF;
}

#mainNav li{
		display:inline;
		padding:13px 0 16px 0;
		float:left;
		background:url(../images/mainNavSeparators.gif) no-repeat right top;
}

#mainNav li a{
}

#mainNav li a{
		color:#FFF;
		padding:0 7px 0 6px;
}

#mainNav li a:hover{
		color: #E0E0E0;
		background:url(../images/hoverStateMainNav.gif) no-repeat bottom;
		text-decoration:none;
		padding:0 7px 13px 6px;
}

#mainNav .first{}

#mainNav .last{
		border:none;
		padding:13px 8px 16px 0;
		background:none;
}

#mainNav .last a{
		border:none;
}

/*MAIN NAV END*/

/*SECONDARY NAV START*/

#secondaryNav{
		float:right;
		margin:0;
		padding:0 0 0 17px;
		background:url(../images/headerNavBgSlidingDoorsLeft.gif) #F00;
		font-size:1.25em;
		color:#FFF;
}

#secondaryNav li{
		display:inline;
		height:42px;
		float:left;
}

#secondaryNav li a{
		color:#FFF;
		border-right:1px solid #CCC;
		line-height:2.7em;
		padding:0 6px 0 6px;
}

#secondaryNav li a:hover{
		color: #E0E0E0;
}

#secondaryNav .first{}

#secondaryNav .last
{
		min-width:100px;
		margin:0;
		height:42px;
		padding:0 2px 0 0;
		background:url(../images/headerNavBgSlidingDoorsRight.gif) no-repeat bottom right;
}

#secondaryNav .last a{
		border:none;
}

/*SECONDARY NAV END*/

.breadCrumb{
		width:900px;
		float:left;
		margin:22px 0 55px 0;
		padding:0 0 0 28px;
		font-size:1.6em;
		font-weight:bold;
		color:#393838;
		background:url(../images/logoIconHeading.gif) no-repeat left;
}

.breadCrumb li{
		display:inline;
}

.breadCrumb li a{
		background:url(../images/breadcrumbArrow.gif) no-repeat right;
		padding:0 16px 0 0;
}

.breadCrumb li h1{
		width:auto;
		display:inline;
		margin:0;
		padding:0 0 0 5px;
		font-size:inherit;
		background:none;
}

/* Mirror Listings Pagination */

#pagination{
		width:100px;
		float:right;
		margin:10px 0 0 0;
		font-size:1.2em;
}

#pagination li{
		display:inline;
}

/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		}
		
p{
		/*padding:0 0 4px 14px;*/
		font-size:1.3em;
		line-height:1.8em;
}

h1{
}

blockquote{
		font-size:1.4em;
		font-weight:bold;
		color:#052748;
		text-align:center;
		letter-spacing:-1px;
		padding:12px 0 0 0;
}

.source{
		font-size:1.1em;
		text-align:right;
		font-style:italic;
		padding:0 0 12px 0;
}

.source strong{
		font-style:italic;
}

.introTextHome{
	float:left;
	font-size:1.4em;
	line-height:2em;
	margin:0 0 30px 14px;
	width:100%;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #ddd;
}

.introTextHome strong{
	color:#900;
	font-weight: normal;
	font-size: 1.2em;
}

.textHome{
	float:left;
	line-height:2em;
	margin:0 0 30px 14px;
	width:430px;
}

.textHome a
{
	text-decoration:underline;
}

.textHome a:hover
{
	text-decoration:none;
}


.mainTitle{
	width:950px;
	float:left;
	color:#FFF;
	line-height:2em;
	font-size:1.6em;
	padding:0 0 0 10px;
	font-weight:bold;
	background:url(../images/tradeTitlesBgGradRepeat.gif);
}

.bodyHeading{
	font-weight:bold;
	font-size:1.5em;
}

.greenTickList{
		margin:2em 0 2em 0;
}

.greenTickList#videos li{
		font-size:1em;
}

.greenTickList li{
		line-height:2.4em;
		font-size:1.1em;
}

.greenTickList p{
		display:inline;
		font-weight:bold;
		padding:0 0 0 20px;
		background: url(../images/smallGreenTick.gif) no-repeat left;
}

.mirrorsIntroText{
		width:800px;
		float:left;
		border-right:1px solid #CCC;
}

.locationMapTitle{
		width:539px;
		float:left;
		color:#FFF;
		line-height:2em;
		font-size:1.6em;
		padding:0 0 0 10px;
		font-weight:bold;
		background:url(../images/tradeTitlesBgGradRepeat.gif);
}

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

a img {/* remove borders from linked images */
		border: 0;
		}
		
#headerDiv #logo{
		width:473px;
		height:134px;
		float:left;
}
	
#calloutButton {
		position: absolute;
		margin-top: 13.45em; /* Margin in EM's required to allow movement during scaling to prevent
								content sitting under image */
		margin-right: 0pt;
		margin-bottom: 0pt;
		margin-left: 740px;
}

#launchGalleryButton{
		width:236px;
		height:147px;
		float:right;
		margin:0 0 10px 20px;
}

.servicePageMainImage{
		width:243px;
		float:left;
		margin:0 20px 70px 0;
		padding:2px;
		border:1px solid #CCC;
}

.contactPageMainImage{
		width:340px;
		float:left;
		margin:16px 20px 8px 0;
		padding:2px;
		border:1px solid #CCC;
}

.aboutPageMainImage{
		width:480px;
		float:left;
		margin:6px 20px 8px 0;
		padding:2px;
		border:1px solid #CCC;
}

.calloutPageMainImage{
		width:400px;
		float:left;
		margin:6px 20px 8px 0;
		padding:2px;
}

.paypalLogo{
		width:162px;
		float:right;
}

/* ---------- 6. forms ---------- */

#contactForm{
		width:352px;
		float:left;
		padding:0 0 0 0;
		margin:15px 22px 0 0;
}

#contactForm strong{
		font-style:italic;
		font-weight:normal;
}

#contactForm strong span{
		color:#de0404;
		font-weight:bold;
}

#contactForm dl{
		font-size:1.2em;
		margin:0;
		padding:20px 0 0 0;
}

#contactForm dt{
		color:#052748;
		font-weight:bold;
		padding:0 0 0.4em 0;
}

#contactForm dt span{
		color:#de0404;
}

#contactForm input{
		font-size:1em;
		font-weight:normal;
		color: #666;
		padding:4px;
		width:350px;
		background:#e9e9e9;
		border:1px solid #CCC;
		margin:0 0 1.4em 0;
}

#divSendButton a{
		width:138px;
		float:left;
		display:inline; /* Just keeping IE6 happy */
		margin:6px 0 0 223px;
		padding:0;
		font-size:1.1em;
		color:#FFF;
		line-height:2.4em;
		font-weight:bold;
		background:url(../images/submitRequestButtonOff.gif) no-repeat top;
		text-align:center;
}

	/* -- search area -- */

	
/* ---------- 7. tables ---------- */
	
table {/* defaults */
		font-size: 100%;
		border-top: 1px solid #aaaaaa;
		border-left: 1px solid #aaaaaa;
		margin-bottom: 1em;
		}
	

td p {/* bring paragraphs within cells to standard size */
		font-size: 1em;
		}
		
		/* table without borders */
		
table.noBorders {
		border: 0;
		}
		
table.noBorders td {
		border: 0;
		}
		
		
/* ---------- 8. misc stuff ---------- */

clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#map_canvas{
		width:547px;
		height:300px;
		float:left;
		padding:0;
		margin:8px 0 0 0;
		border:0;
		display:inline;
		border:1px solid #CCC;
}

#map_canvas #markerFlag{
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #d9d9c8;
	padding: 5px;
	opacity: 0.85;
	font-size:0.6em;
	font-weight:600;
	color:#282625;
}
#tooltip h3, #tooltip div { margin: 0; }

/* ---------- 9. Styles for layout table used for search results ---------- */
		



/* ------------ A. debug  ------------ */