@charset "utf-8";

/*
//
// ***** Global *****
//
*/

html {

	/* Temporary - force a scrollbar to put the page at the correct X position */
	overflow-y: scroll;

}

body {

	/* Greyish background for the page */
	background-color: #D3CBBC;

	/* Fonts */
	font-family: "Century Gothic", Tahoma, Geneva, sans-serif;

}

.standard-background {

	/* Tiling background */
	background: url('../images/global/background_strip.jpg') repeat-y center top;

}

.standard-width {

	/* Global width for main content blocks (usually DIVs inside blocks that have the standard background */
	width: 882px;

}

.highlight {

	/* Red highlight (for header separator so far) */
	color: #cf5e5d;

}

.clearfix {

	/* Clear Fix */
	clear: both;

}

/*
//
// ***** Forms *****
//
*/

.form-container {

	/* Wrapper around the form on a chosen Product */
	background: #D2CEC7;

	/* Padding */
	padding: 10px 10px 6px;

	/* General text size */
	font-size: 13px;

}

.form-section {

	/* Major section on the form */
	background: #B8B0A3;

	/* Corners */
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;

	/* Padding */
	padding: 4px 18px 11px 16px;

	/* Bottom margin to separate each section */
	margin: 0 0 6px 0

}

.form-section-header {

	/* Reset spacing */
	margin: 3px 0 0 1px;
	padding: 0;

	/* Font */
	font-size: 14px;
	font-weight: bold;
	color: #333;
	text-shadow: none;

	/* Make form headings display on their own line where possible */
	display: block;

	/* Left align */
	text-align: left;

}

.form-header-description {

	/* Text that follows on the same line as a form section header */
	font-weight: normal;

}

.form-field-description {

	/* Small gap above any form field labels that aren't headers */
	margin: 6px 0 0 2px;

	/* These are usually on actual label tags so make sure they're not inline */
	display: block;

	/* Left align */
	text-align: left;

}

input[type=text], input[type=email], input[type=tel], textarea, select {

	/* Green border */
	border: 1px solid #3F5810;

	/* Less crappy font */
	font-family: "Century Gothic", Tahoma, Geneva, sans-serif;
	font-size: 14px;

	/* Full width */
	width: 100%;

	/* Gap above any form fields */
	margin: 3px 0 0 0;

}

textarea {

	/* Attempt to normailise height between browsers */
	min-height: 55px;

	/* Prevent resizing */
	resize: none;

}

input[type=submit], .btn {

	/* Default background colour */
	background-color: #3f5810;
	
	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#778f43, #3f5810);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#778f43), to(#3f5810));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#778f43, #3f5810); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#778f43, #3f5810);

	/* Corners */
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;

	/* Fonts etc. */
	color: #fff;
	font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 0 #333333;
	border: 0;
	cursor: pointer;

	/* Less crappy font */
	font-family: "Century Gothic", Tahoma, Geneva, sans-serif;

	/* Layout... */
	margin: 5px 0 5px 0;
	padding: 5px 14px 7px;

	/* No underlining */
	text-decoration: none;

}

input[type=submit]:hover, .btn:hover {

	/* Hover state for Submit buttons */
	color: #CCC;

}

input[type=submit]:active, .btn:active {

	/* Active state for Submit buttons */
	color: #999;

}

input[type=image] {

	/* Even up the gap above and below the Pypal button */
	margin-top: 3px;

}

.submit-button-container {

	/* Centre the button */
	text-align: center;
	padding: 10px 8px 11px;

	/* Default background colour */
	background-color: #778F43;

	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#BBD08A, #778F43);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBD08A), to(#778F43));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#BBD08A, #778F43); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#BBD08A, #778F43);

}

.mandatory-text {

	/* Red highlights for mandatory form stuff */
	color: #C00;
	font-weight: bold;

}

/*
//
// ***** Form Errors *****
//
*/
.form-field-error {

	/* Red theme for fields that contain an error */
	border: 1px solid #881c1c !important;
	background: #E6BDBD !important;

}

.error-message {

	/* Red error text */
	color: #C00;
	font-weight: bold;

	/* Reset margin and padding (because this will probably be inside an h2 or h3 */
	margin: 0;
	padding: 0;

	/* Left align */
	text-align: left;

}

.title-text .error-message {

	/* If the error message occurs inside a title, bump the size up */
	font-size: 18px;

}

.form-section .error-message {

	/* If the error message occurs inside a form, shrink its size down */
	font-size: 12px;

	/* Indent it a bit */
	margin: 2px 0 0 2px;

}

/*
//
// ***** jQuery UI overrides *****
//
*/

.ui-widget {

    font-family: "Century Gothic", Tahoma, Geneva, sans-serif;
    font-size: 14px;

}

/*
//
// ***** fancyBox overrides *****
//
*/
#fancybox-loading {

	/* Change path to image */
	background: #000 url('../images/global/fancybox/fancybox_loading.gif') center center no-repeat;

}

.fancybox-close, .fancybox-prev span, .fancybox-next span {

	/* Change path to image - green icons not black */
	background-image: url('../images/global/fancybox/fancybox_sprite_green.png');

}

.fancybox-prev, .fancybox-next {

	/* Change path to image */
	background: transparent url('../images/global/fancybox/blank.gif');

}

.fancybox-outer {

	/* Corners */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;

	/* Make border grey */
	background-color: #E7E2DC;

}

.fancybox-image {

	/* Corners */
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;

}

.fancybox-title, .image-title {

	/* Style the title to match the title on the products in the online shop etc.) */
	margin: 0;
	padding: 5px 0 5px 10px;
	min-height: 20px;

	/* Font */
	color: #993300;
	/*font-size: ;*/
	font: 14px "Century Gothic", Tahoma, Geneva, sans-serif;
	font-weight: bold;
	text-shadow: 0 1px 0 #ccc;
	text-align: left;

	/* Default background colour */
	background-color: #BBD08A;
	
	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#BBD08A, #778F43);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBD08A), to(#778F43));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#BBD08A, #778F43); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#BBD08A, #778F43);

}

/*
//
// ***** Header *****
//
*/

#header-contents {

	/* Dimensions */
	height: 220px;

	/* Centre alignment */
	margin: auto;

	/* Background image - small mobile version first */
	background: url('../images/global/header/background_mobile.jpg') no-repeat right top;

	/* Set relative positioning so that things inside this DIV can be absolutely positioned */
	position: relative;

}

#header-contents h1 {

	/* Logo - add logo image at the right size and move the text off screen */
	background: url('../images/global/header/logo.png') no-repeat;

	/* Replacement for text-indent: -9999px; */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

	/* Set absolute positioning so that you can move the logo into position without affecting anything else in the header */
	position: absolute;
	top: 38px;
	left: 43px;

}

#header-contents h1 a {

	/* Set display:block and add dimensions so the a tag inside the h1 will be clickable over the entire logo */
	display: block;
	width: 219px;
	height: 114px;

}

#header-contents ul {

	/* Align to the right of the header */
	float: right;
	text-align: right;

	/* Set font and colour */
	font-weight: bold;
	font-size: 15px;
	color: #aea799;
	line-height: 22px;

	/* Position */
	margin: 106px 18px 0 0;

}

#header-contents li:first-child {

	/* Larger font size for the first header list item */
	font-size: 21px;
    margin: 0 -3px 0 0;

}

#header-contents a {

	/* Remove underlining on links in the header and turn them grey */
	text-decoration: none;
	color: #aea799;

}

#header-contents a:hover, #header-contents a:focus {

	/* Red highlight on links in the header */
	color: #993300;

}

#header-contents .facebook, #header-contents .twitter, #header-contents .pinterest, #header-contents .instagram {
	
	/* Replacement for text-indent: -9999px; */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	
	/* Limit these links to the size of the icons in their backgrounds */
	width: 16px;
	height: 16px;
	
	/* Align right and space out to match the other items in the header */
	/* Was doing this with float right and 8px left margin but that stopped background icons appearing an iPod iOS 3.1 */
	display: inline-block;
	margin: 6px 0 0 5px;
	
}

#header-contents .facebook {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat -16px -96px;

}

#header-contents .twitter {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat -16px -112px;

}

#header-contents .pinterest {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat -16px -128px;

}

#header-contents .instagram {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat -16px -144px;

}

#header-contents .facebook:hover {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px -96px;

}

#header-contents .twitter:hover {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px -112px;

}

#header-contents .pinterest:hover {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px -128px;

}

#header-contents .instagram:hover {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px -144px;

}

/*
//
// ***** Nav *****
//
*/
nav ul {

	/* Centre the nav */
	margin: auto;

	/* Dimensions */
	height: 30px;

	/* Light green background */
	background: #778F43;

	/* Dark green top and bottom border */
	border: 1px solid #3F5810;
	border-width: 1px 0;


}

nav a, nav a:focus {

	/* Remove the text from the nav */
	text-indent: -10000px;

	/* Same background image for all nav items */
	background: url('../images/global/nav/nav.png') no-repeat;

	/* Display nav links horizontally - float left rather than display inline so you can apply widths */
	float: left;

	/* Same height for all nav items */
	height: 30px;

	/* Remove the dotted outline */
	outline: 0;

}

#nav-home {

	/* Home button */
	width: 80px;

}

#nav-home:hover, #nav-home:focus {

	/* Home button - over and focus */
	background-position: 0 -30px;

}

#nav-home.nav-selected {

	/* Home button - selected */
	background-position: 0 -60px;

}

#nav-services {

	/* Services button */
	width: 96px;

	/* Show correct portion of the nav sprite: left by 80px */
	background-position: -80px 0;

}

#nav-services:hover, #nav-services:focus {

	/* Services button - over and focus */
	background-position: -80px -30px;

}

#nav-services.nav-selected {

	/* Services button - selected */
	background-position: -80px -60px;

}

#nav-weddings {

	/* Weddings button */
	width: 108px;

	/* Show correct portion of the nav sprite: left by 80px + 96px */
	background-position: -176px 0;

}

#nav-weddings:hover, #nav-weddings:focus {

	/* Weddings button - over and focus */
	background-position: -176px -30px;

}

#nav-weddings.nav-selected {

	/* Weddings button - selected */
	background-position: -176px -60px;

}

#nav-online-shop {

	/* Online Shop button */
	width: 120px;

	/* Show correct portion of the nav sprite: left by 80px + 96px + 108px */
	background-position: -284px 0;

}

#nav-online-shop:hover, #nav-online-shop:focus {

	/* Online Shop button - over and focus */
	background-position: -284px -30px;

}

#nav-online-shop.nav-selected {

	/* Online Shop button - selected */
	background-position: -284px -60px;

}

#nav-contact {

	/* Contact Us button */
	width: 114px;

	/* Show correct portion of the nav sprite: left by 80px + 96px + 108px + 120px */
	background-position: -404px 0;

}

#nav-contact:hover, #nav-contact:focus {

	/* contact button - over and focus */
	background-position: -404px -30px;

}

#nav-contact.nav-selected {

	/* contact button - selected */
	background-position: -404px -60px;

}

#nav-blog {

	/* Blog button */
	width: 75px;

	/* Show correct portion of the nav sprite: left by 80px + 96px + 108px + 120px + 114px */
	background-position: -518px 0;

}

#nav-blog:hover, #nav-blog:focus {

	/* blog button - over and focus */
	background-position: -518px -30px;

}

#nav-blog.nav-selected {

	/* blog button - selected */
	background-position: -518px -60px;

}

/*
//
// ***** Page titles *****
//
*/
.page-title {

	/* Centre */
	margin: auto;

	/* Spacing and borders - 4px of top padding to align the text, plus 246px to move the text downwards enough to show the full background banner image */
	padding: 64px 0 5px 0;
	border-bottom: 2px dotted #999999;

}

/* Main banner image as background - small mobile version first - page-specific */
.sitehome .page-title {
		
	background: url('../images/global/header/banners/01_mobile.jpg') no-repeat center top;
		
}
.services .page-title {
		
	background: url('../images/global/header/banners/02_mobile.jpg') no-repeat center top;
		
}
.weddings .page-title {
		
	background: url('../images/global/header/banners/03_mobile.jpg') no-repeat center top;
		
}
.online-shop .page-title {
		
	background: url('../images/global/header/banners/04_mobile.jpg') no-repeat center top;
		
}
.contact .page-title {
		
	background: url('../images/global/header/banners/05_mobile.jpg') no-repeat center top;
		
}
.blog .page-title {
		
	background: url('../images/global/header/banners/06_mobile.jpg') no-repeat center top;

	/* Tweak padding to move the page title under the blog banner */
	/* This kicks in at all sizes, but gets overridden on devices wider than 625px */
	padding-top: 110px;

}

.title-text {

	/* Fonts */
	color: #778F46;
	font-size: 18px;
    font-weight: bold;

}

/*
//
// ***** General page content layout *****
//
*/

#page-columns-container {

	/* Centre */
	margin: auto;

	/* Gap between the page title and the start of the content */
	padding: 10px 0 0 0; 

}

.special-banner {

	/* Move any text in the banner off screen */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	
	/* Set relative positioning and a higher z-index than the rest of the page */
	position: relative;
	z-index: 2;
	
	/* Set height to match the height of the background image */
	height: 136px;
	
	/* Negative top and bottom margins to make the content in the banner overlap the content above and below it */
	margin: -103px auto -22px;
	
}

#blog-banner {

	/* Full Blog banner */
	background: url(../../images/global/header/blogBanner.png) no-repeat right;
	
}

.info-banner {
	
	/* Style the title to match the title on the products in the online shop etc.) */
	margin: 0 0 10px 0;
	padding: 5px 10px;
	min-height: 20px;

	/* Font */
	color: #fff;
	font: 14px "Century Gothic", Tahoma, Geneva, sans-serif;
	font-weight: bold;

	/* Default background colour */
	background-color: #BBD08A;
	
	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#BBD08A, #778F43);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBD08A), to(#778F43));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#BBD08A, #778F43); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#BBD08A, #778F43);
	/* Standard */
	background-image: linear-gradient(#BBD08A, #778F43);
	
	/* Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	
}

#page-column-main {

	/* Dimensions */
	width: 622px;

	/* Move into columns */
	float: left;

}

#page-column-main p {

	/* Fonts */
	font-size: 13px;
	line-height: 20px;

	/* Separate paragraphs a bit */
	margin-bottom: 7px;

}

#page-column-sidebar {

	/* Dimensions */
	width: 220px;

	/* Move into columns */
	float: left;

	/* Gap between the two columns and correct gap above the sidebar's title */
	margin: -6px 0 0 40px;

}

#page-column-sidebar h3 {

	/* Centre the sidebar header */
	text-align: center;

}

.standard-image-border {

	/* Grey border, separated from the image */
	border: 1px solid #CCCCCC;
	padding: 3px;

	/* White background */
	background: #fff;

}

.thumbnails-grid {

	/* Gap below the Recent Work title */
	margin: 5px 0 0 0;

	/* Background grey */
	background: #E7E2DC;

	/* Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	/* Spacing around all the images - this is even because of the whitespace between the images */
	padding: 10px 0 6px 0;

	/* Centre the thumbnails in this panel */
	text-align: center;

}

/*
//
// ***** Homepage *****
//
*/
#homepage-portraits {

	/* Left alignment */
	float: left;

	/* Gap for text on right and below, top margin to align the image */
    margin: 4px 10px 2px 0;

}

#recent-work-container {

	/* Gap above the Recent Work title */
	margin: 20px 0 0 0;

}

.thumbnails-grid li {

	/* Display recent work thumbnails in a line */
	display: inline;

	/* Gap between each thumbnail */
	margin: 0 1px;

}

#testimonials {

	/* Gap between sidebar title and list of testimonials */
	margin: 5px 0 0 0;

}

#testimonials li {

	/* Spacing and borders */
	padding: 2px 0 10px 0;
	border-top: 2px dotted #999999;

}

#testimonials p {

	/* Fonts */
	color: #993300;
	font-size: 12px;
    line-height: 16px;
	text-align: center;

	/* Spacing */
	padding: 3px 0 0 0;

}

#testimonials p:nth-child(n+2) {

	/* Highlight the second paragraph (onwards) of every testimonial */
	color: #000;

}

#testimonials a {
	
	/* Dark green links, no underline */
	color: #006633;
	text-decoration: none;
	
}

#testimonials a:hover, #testimonials a:focus {

	/* Link highlights - red */
	color: #993300;

}

.testimonial-image {
	
	/* Gap above testimonial images, centred */
	padding-top: 10px;
	text-align: center;
	
}

#lmd {
	
	/* Top border and spacing */
	border-top: 2px dotted #999999;
	
}

#blog-awards-blog {
	
	/* When used in the blog itself */
	text-align: center;
	margin-bottom: 10px;
	
}

#bfa-membership, #nfa-awards, #blog-awards, #lmd {

	/* Centre the BFA membership elements etc. */
	text-align: center;

	/* Fonts */
	color: #666666;
	font-size: 12px;

	/* Spacing and borders */
	padding: 10px 0 8px 0;
	border-bottom: 2px dotted #999999;

}

#bfa-membership {
	
	padding-top: 4px;
	
}

.newsflash {
	
	/*  */
	color: #778F46;
	font-weight: bold;	
	
}

.newsflash a {
	
	/* Red links, no underline */
	color: #993300;
	text-decoration: none;
	
}

.newsflash a:hover, .newsflash a:focus {

	/* Link highlights - dark green */
	color: #006633;

}

/*
//
// ***** Internal footer (inside the background image) *****
//
*/
footer {

	/* Top and bottom spacing */
	padding: 12px 0 14px 0;

}

#footer-contents {

	/* Centre */
	margin: auto;
	text-align: center;

	/* Background image - small mobile version first */
	background: url('../images/global/footer/background_mobile.jpg') no-repeat right top;

	/* Fonts */
	font-size: 12px;
    font-weight: bold;
	color: #666666;
    line-height: 20px;

	/* Set height using top padding */
	padding: 100px 0 4px 0;

}

#footer-contents a {

	/* Links in the footer */
	color: #993300;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;

}

#footer-contents a:hover, #footer-contents a:focus {

	/* Link highlights */
	color: #006633;

}

#footer-contents li {

	/* Display in a line */
	display: inline;

}

/*
//
// ***** External footer (closing off the background image) *****
//
*/
#footer-external {

	background: url('../images/global/background_footer.jpg') no-repeat center top;
    height: 29px;

}

/*
//
// ***** Services page *****
//
*/

#services-list li {

	/* Default background colour */
	background-color: #778F43;
	
	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#BBD08A, #778F43);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBD08A), to(#778F43));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#BBD08A, #778F43); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#BBD08A, #778F43);

	/* Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	/* Gap around edges */
    padding: 10px 10px 11px;

	/* Gap between service panels */
	margin: 0 0 8px;

	/* Make sure any floated elements inside the panels don't break out of the panels */
	display: inline-block;

}

#services-list li:last-child {

	/* Remove the extra bottom margin from the last services panel */
	margin-bottom: 0;

}

#services-list img {

	/* Align any services images left */
	float: left;

	/* Make sure there's a gap on the right of these images */
	margin-right: 10px;

}

#services-list li:nth-child(even) img {

	/* In supported browsers, float every even-numbered image right */
	float: right;

	/* Reverse the right margin, put it on the left */
	margin-right: 0;
	margin-left: 10px;

}

#services-list h3 {

	/* Larger, bolder font for headings in the services panels */
	font-size: 22px;
    font-weight: bold;

	/* Dark green colour */
	color: #3F5810;

	/* Shadow */
	text-shadow: 0 1px 0 #d6e7b0;

}

#services-list p a {

	/* Sort out links in the services panels */
	color: #993300;
	text-decoration: none;
	font-weight: bold;

}

#services-list p a:hover, #services-list p a:focus {

	/* Highlight on links in the header */
	color: #eee;

}

.services #page-column-sidebar {

	/* Increase the width and decrease the right margin of the side on the Services page */
	margin: -6px 0 0 15px;
	width: 245px;

}

/*
//
// ***** Weddings *****
//
*/

#wedding-photography {

	/* Make sure the grid of wedding photos always has some left/right space at the edges */
	padding-left: 10px;
	padding-right: 10px;

	/* No top margin needed */
	margin-top: 0;

}

.weddings #page-column-sidebar {

	/* Increase the width and decrease the right margin of the side on the Services page */
	margin: -6px 0 0 15px;
	width: 245px;

}

.weddings #page-column-sidebar p {

	/* Text formatting for paragraphs in the sidebar of the Weddings page - and homepage main column links */
	font-size: 13px;
    line-height: 17px;

	/* Top padding on the paragraphs, to make them start in line with the thumbnails grid, and bottom padding to separate them */
	padding: 3px 0 5px 0;

}

.weddings #page-column-sidebar p a, .sitehome #page-column-main p a {

	/* Red, bold, non-underlined links */
	color: #993300;
	font-weight: bold;
	text-decoration: none;

}

.weddings #page-column-sidebar p a:hover, .weddings #page-column-sidebar p a:focus, .sitehome #page-column-main p a:hover, .sitehome #page-column-main p a:focus {

	/* Link highlights */
	color: #006633;

}

#wedding-links {

	/* Make sure the wedding links sit below the thumbnails grid and aside */
	clear: left;

	/* Give them top/bottom dotted border */
	border-top: 2px dotted #999999;
	border-bottom: 2px dotted #999999;

	/* Separate from what's above them and centre */
	margin-top: 15px;

	/* Inline-block otherwise the margin is ignored */
	display: inline-block;

	/* Text */
	color: #778F46;
	font-size: 15px;
	font-weight: bold;
	text-align: center;

	/* Gap above and below the text */
	padding: 5px 0 7px 0;

	/* Full width */
	width: 100%;

}

#wedding-links a {

	/* Sort out wedding links */
	color: #993300;
	text-decoration: none;

}

#wedding-links a:hover, #wedding-links a:focus {

	/* Highlight on links */
	color: #3F5810;

}

#wedding-packages-container {

	/* Gap above the package columns */
	padding-top: 15px;

}

.wedding-package {

	/* Limit width and float left so that packages display in columns  */
	/* This is the standard width of 882px - (36px of margin / 2) / 3 columns */
	float: left;
	width: 262px;

	/* Green background colour and flower background */
	background: url('../images/global/background_panel.jpg') no-repeat right bottom #BBD08B;

	/* Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	/* Gap around edges - much larger gap at the bottom so you can properly see the background image */
    padding: 10px 10px 125px;

}

.wedding-package h3 {

	/* Package heading */
	color: #3F5810;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 1px 0 #D6E7B0;

	/* Background bullet */
	background: url('../images/global/bullet.png') no-repeat 0 4px;

	/* Indent the heading so you can see the bullet */
	padding-left: 20px;

}

.wedding-package-price {

	/* Make sure the prices display on a new line */
	display: block;

}

.wedding-package h4 {

	/* Heavier font and green colour for secondary heading */
	color: #3F5810;
	font-weight: bold;
	font-size: 14px;

	/* Space out a bit */
	margin: 5px 20px 15px 20px;

}

.wedding-package ul {

	/* Indent bulleted lists */
	margin: 0 40px;

}

.wedding-package li {

	/* Restore bullets to lists */
	list-style: disc;

	/* Spread list items out */
	margin: 8px 0;

}

.wedding-package p, .wedding-package li {

	/* Font size for general text */
	font-size: 14px;

}

.wedding-package p {

	/*  */
	margin: 0 20px;

}

#wedding-package-1 {

	/* Left-align the background of column 1 */
	background-position: left bottom;

}

#wedding-package-2 {

	/* Give the middle columns left/right margins to separate the three columns */
	margin: 0 18px;

	/* Centre-align the background of column 1 */
	background-position: center bottom;

}

/*
//
// ***** Online Shop *****
//
*/

.online-shop #page-columns-container {

	/* Fake a 100% height sidebar with a background image matching the colour of the sidebar */
	/* This will appeat to be 10px too high because this div has 10px of padding at the top */
	background: url(../images/online-shop/sidebar_background.gif) repeat-y 0 10px;

}

.online-shop #page-column-sidebar {

	/* General layout for the sidebar */
	width: 170px;
	margin: -10px 10px 0 0;
	padding: 10px;
	background-color: #BBD08A;

	/* Add a 10px white border to the top of the sidebar to act as a mask over the green background image, when the sidebar is moved up by -10px of top margin */
	border-top: 10px solid #FFFFFF;

}

.online-shop #page-column-sidebar h3 {

	/* Header for the sidebar */
	font-weight: normal;
	line-height: 20px;
	font-size: 15px;
	color: #930;

	/* Remove massive margins */
	margin: 0px;

	/* Replace the line of full stops that used to be below this header with a dotted border */
	border-bottom: dotted 2px #000;

	/* Space out the header, to line up nicely with any seasonal banner that might be over on the right */
	padding: 5px 0 14px;
	margin: 0 0 16px;

}

.online-shop #page-column-sidebar p {

	/* Paragraphs in the sideBar */
	font-weight: normal;
	line-height: 16px;
	font-size: 13px;
	color: #000;

	/* Separate paragraph tags */
	margin-bottom: 13px;

}

.online-shop #page-column-sidebar a {

	/* Remove underlining on links in the online shop sidebar and turn them red */
	text-decoration: none;
	color: #993300;

}

.online-shop #page-column-sidebar a:hover, .online-shop #page-column-sidebar a:focus {

	/* Green link highlights */
	color: #006633;

}

.paypal {

	/* Replace any Paypal spans with the actual Paypal logo */
	background: url(../images/online-shop/PayPal_mark_60x38.gif) no-repeat;
	width: 60px;
	height: 38px;
	display: block;	

	/* Spacing */
	margin: 10px 10px 10px 5px;
	
	/* Replacement for text-indent: -9999px; */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

}

.online-shop #page-column-main {

	/* Float the main page column right so that the page aside sits on the left */
    float: right;

	/* You've lost 60px from the side bar so add them onto the main column to allow for two columns of products */
	width: 682px;

}

#online-shop-products-list {

	/* Negative top margin on the list of products, to counter-act the negative top margin separating each individual product */
	margin-top: -10px;

}

.online-shop-product {

	/* Display in a line, limit width, set background etc. */
	/* Height used to be set to 280px but no longer necessary, height will usually be normalised across products with a height on the description P tag */
	float: left;
	width: 300px;
	background: #E7E2DC;
	padding: 10px 12px 15px;
	margin: 10px 8px 0 8px;

	/* Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	/* Give this element a relative position, so you can use absolute positioning to position the magnifying glass etc. inside this area */
	position: relative;

}

.online-shop-product:nth-child(odd) {

	/* Odd-numbered products - no left margin, more right margin to replace left/right 8px margin on all products */
	margin-left: 2px;
	margin-right: 16px;

	/* For nth-child affected products add more left/right/top padding */
	padding: 14px 16px 15px;

}

.online-shop-product:nth-child(even) {

	/* Even-numbered products */
	margin-left: 0;
	margin-right: 0;

	/* For nth-child affected products add more left/right/top padding */
	padding: 14px 16px 15px;

}

.online-shop-product-image {

	/* Corners */
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;

	/* Remove gap below image in Firefox */
	display: block;

}

.online-shop-magnify-image {

	/* Line up the magnifying glass in relation to the 300x160px image */
	position: absolute;
	top: 136px;
	left: 278px;

	/* White background, partially transparent for decent browsers */
	background: #fff;
	background: rgba(255, 255, 255, 0.65);

	/* Corners - half of a 24px PNG with a 2px padding, to create a circle */
	-webkit-border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	border-radius: 13px;

	/* Padding to separate image from edge of border */
	padding: 2px;

	/* Disable interactivity */
	pointer-events: none;

}

.online-shop-magnify-image:nth-child(odd), .online-shop-magnify-image:nth-child(even) {

	/* In browsers with nth-child support each product has an extra 4px of padding - add this to the position of the magnifying glasses to compensate */
	top: 140px;
	left: 282px;

}

.online-shop-delivery-banner {

	/* Allow exact positioning inside the parent element */
	position: absolute;

	/* 'Border', away from the edge of the Product image it sits above */
	top: 14px;
	left: 14px;

	/* Remove text */
	text-indent: -10000px;

	/* Actual image */
	background: url('../images/online-shop/delivery_banner.png') no-repeat;

	/* Match dimensions of background image */
	width: 79px;
	height: 59px;

	/* Disable interactivity */
	pointer-events: none;

}

.online-shop-delivery-banner:nth-child(odd), .online-shop-delivery-banner:nth-child(even) {

	/* In browsers with nth-child support each product has an extra 4px of padding - add this to the position of the delivery banners to compensate */
	top: 18px;
	left: 18px;

}

.online-shop-product p, .online-shop-product-price-list {

	/* Spacing around all product descriptions and any ULs containing prices */
	/* Use !important on the margins to ensure that #page-column-main p styles are overridden */
    margin: 0 !important;
    padding: 5px 5px 0;

}

.online-shop-product-description {

	/* Align prices to the bottom of each product window */
	min-height: 60px;

	/* Descriptions should always be left aligned */
	text-align: left;

}

.online-shop-product-description-three-line {

	/* Taller height for products with 3-line descriptions */
	min-height: 75px;

	/* Descriptions should always be left aligned */
	text-align: left;

}

.online-shop-product-description-four-line {

	/* Taller height for products with 4-line descriptions */
	min-height: 90px;

	/* Descriptions should always be left aligned */
	text-align: left;

}

.online-shop-product-description-five-line {

	/* Taller height for products with 5-line descriptions */
	min-height: 110px;

	/* Descriptions should always be left aligned */
	text-align: left;

}

.online-shop-product-description-six-line {

	/* Taller height for products with 6-line descriptions */
	min-height: 125px;

	/* Descriptions should always be left aligned */
	text-align: left;

}

.online-shop-product-description-seven-line {

	/* Taller height for products with 7-line descriptions */
	min-height: 145px;

	/* Descriptions should always be left aligned */
	text-align: left;

}

.online-shop-product-price-list {

	/* Make sure that the list of prices responds properly to its padding */
	float: left;

}

.online-shop-product-price {

	/* Price - larger size */
    color: #3F5810;
    float: left;
    font-size: 19px;
    font-weight: bold;

	/* Set a height, otherwise tails of gs and js etc. bump up the height of the entire product slightly */
	height: 22px;

}

.online-shop-product-price-description {

	/* Price - smaller size for any descriptive words between prices, like 'regular' */
	font-size: 12px;
	font-weight: normal;

}

.online-shop-buy-button {

	/* Layout... */
	float: right;
	margin: 5px 0 0;
	padding: 2px 9px 4px 9px;

	/* Default background colour */
	background-color: #3f5810;
	
	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#778f43, #3f5810);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#778f43), to(#3f5810));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#778f43, #3f5810); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#778f43, #3f5810);

	/* Corners */
	-webkit-border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	border-radius: 7px;

}

a.online-shop-buy-button {

	/* Button link styles */
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 0 #333;
	text-align: center;
	font-weight: bold;
	font-size: 12px;

}

a:hover.online-shop-buy-button {

	/* Button hover styles */
	color: #CCC;

}

a:active.online-shop-buy-button {

	/* Button active styles */
	color: #999;

}

/*
//
// ***** Order Details *****
//
*/

#order-details-container {

	/* Same grey background as a product, but encompassing the chosen product and the form */
	background: #E7E2DC;
	padding: 10px 12px 15px;

	/* Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

}

.order-details-product {

	/* Set position relative on the product at the top of the order details page so that the magnifying glass etc. can be displayed inside it */
	position: relative;

	/* Gap below this */
	margin: 0 0 10px 0;

}

.order-details-radio-option {

	/* Containers for Product size radion buttons */
	background: #BBD08A;
    display: inline-block;
    padding: 5px 9px;
	margin: 5px 2px 0 0;

	/* Corners */
	-webkit-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border-radius: 6px;

}

.order-details-radio-option .online-shop-product-price {

	/* For any prices on forms, remove the left float */
	float: none;

}

/*
//
// ***** Order confirmation *****
//
//
*/
.final-product-sum {

	/* Put the components of the final price calculation in a line */
	display: inline;

}

/*
//
// ***** Appearing on both the Order Details and Order Confirmation page *****
//
*/

.order-title {

	/* Font size */
	font-size: 22px;

	/* Line up with the sidebar */
	margin: -4px 0 5px 2px;

}

.order-details .form-container, .order-confirmation .form-container {

	/* Round off the bottom corners of the form */
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-bottomright: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;

}

.order-details .online-shop-product-image-link, .order-confirmation .online-shop-product-image-link {

	/* Stop the link around the image from cropping the image at smaller screen sizes */
	width: auto !important;

}

.order-details .online-shop-delivery-banner, .order-confirmation .online-shop-delivery-banner {

	/* Override any other position commands for the delivery banner */
	top: 4px !important;
	left: 2px !important;

}

.order-details .online-shop-magnify-image, .order-confirmation .online-shop-magnify-image {

	/* Simplest way - throw the magnifying glass all the way over to the left, then bring it back into place with negative left margin */
	left: 100% !important;
	margin-left: -34px !important;

	/* Set correct top value */
	top: 126px !important;

}

.order-details .form-field-description, .order-confirmation .form-field-description {

	/* Reduce the gaps between the lines that display your order choices on the confirmation screen */
	margin: 5px 0 -2px 2px !important;

}

.online-shop .form-section a {

	/* Red, bold, non-underlined links */
	color: #993300;
	font-weight: bold;
	text-decoration: none;

}

.online-shop .form-section a:hover, .online-shop .form-section a:focus {

	/* Link highlights */
	color: #006633;

}

/*
//
// ***** Contact page *****
//
*/

.contact #page-column-sidebar {

	/* Increase the width and decrease the right margin of the side on the Services page */
	margin: -6px 0 0 15px;
	width: 245px;

}

#contact-form-success, #contact-form-failure {

	/* Rounded corners, matching the contact form */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;

	/* Background green */
	background: #BBD08A;

	/* Background gradient in supported browsers only */
	/**/
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#BBD08A, #778F43);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBD08A), to(#778F43));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#BBD08A, #778F43); 
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#BBD08A, #778F43);

	/* Padding around text, with more at the bottom to show a bit of the image */
	padding: 10px 10px 30px;

	/* Gap below the thanks message */
	margin-bottom: 10px;

}

#contact-form-success p {

	/* Larger, bolder font */
	font-size: 22px;
    font-weight: bold;

	/* Dark green colour */
	color: #3F5810;

	/* Shadow */
	text-shadow: 0 1px 0 #d6e7b0;

}

#contact-form-failure p {

	/* Slightly larger, bolder font */
	font-size: 13px;
    font-weight: bold;

	/* Dark green colour */
	color: #3F5810;

}

#contact-form-failure p a {

	/* Red, non-underlined links */
	color: #993300;
	text-decoration: none;

}

#contact-form-failure a:hover, #contact-form-failure a:focus {

	/* Link highlights */
	color: #006633;

}

#contact-form-container {

	/* Round the corners on the contact form */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;

}

#contact-details {

	/* Gap below the title */
	margin-top: 5px;

	/* Border below the title */
	border-top: 2px dotted #999999;

	/* Border below the contact details */
	border-bottom: 2px dotted #999999;

	/* Gap above bottom border */
	padding-bottom: 15px;

}

#contact-details h4 {

	/* Font size */
	font-size: 15px;

	/* Gap above each header */
	padding-top: 10px;

	/* Indent */
	margin-left: 5px;

}

#contact-details p {

	/* Font size */
	font-size: 14px;

	/* Red text for contact details */
	color: #993300;

	/* Indent */
	margin-left: 10px;

}

#contact-details p a {

	/* Red, non-underlined links */
	color: #993300;
	text-decoration: none;

}

#contact-details a:hover, #contact-details a:focus {

	/* Link highlights */
	color: #006633;

}

.facebook, .twitter, .pinterest {

	/* Shrink font size */
	font-size: 14px;

	/* Indent and separate */
    margin-left: 5px;
    margin-top: 4px;

}

.facebook a, .twitter a, .pinterest a {

	/* Enough height to show the background icons inside the link hit area, in combination with the padding */
    height: 26px;

	/* Inline block to expand the hit area to required dimensions */
	display: inline-block;

	/* Left padding to show the icons */
    padding-left: 40px;

	/* Top padding to vertically centre the text */
    padding-top: 6px;

	/* Bold, red, non-underlined text */
	font-weight: bold;
	color: #993300;
	text-decoration: none;

}

.facebook a:hover, .facebook a:focus, .twitter a:hover, .twitter a:focus, .pinterest a:hover, .pinterest a:focus {

	/* Link highlights */
	color: #006633;

}

.facebook {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px 0px;

	/* Separate from the address details above */
	margin-top: 10px;

}

.twitter {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px -32px;

}

.pinterest {

	/* Icon as background */
	background: url('../images/global/icons/socialIconsSprite.png') no-repeat 0px -64px;

}

/*
//
// ***** Responsive breakpoint - 944px width (minimum width before the edges of the background go off the screen - wider in Firefox because it correctly includes scrollbar width) *****
//
*/
@media screen and (max-width:944px) {

	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_944.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width by 80px (fit 1024px down to fit 944px, so 882px down to 802px) */
		width: 802px;

	}

	#page-column-main {

		/* Reduce the width of the main content column down from 622px */
		width: 542px;

	}

	#recent-work li:nth-child(3):after {

		/* Insert a Unicode line feed and different white space control to split the recent work list items over two rows */
		content:"\A";
		white-space: pre;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_944.jpg') no-repeat center top;

	}

	.wedding-package {

		/* Reduce wedding package columns width */
		float: left;
		width: 238px;

	}

	#wedding-package-2 {

		/* Less gap between package columns */
		margin: 0 14px;

	}

	.online-shop #page-columns-container {

		/* Remove the 100% height sidebar background */
		background: none;

	}

	.online-shop #page-column-main {

		/* Stop the products list from aligning right */    
		float: none;

		/* Centre */
		margin: auto;

	}

	.online-shop-product:nth-child(odd) {

		/* Remove any left margin from odd-numbered products */
		margin-left: 0;

	}

	.online-shop #page-column-sidebar {

		/* Remove width restriction on the sidebar so it spans the page - retain left float to keep top margin intact */
		float: left;
		width: auto;

		/* Remove the 'fake' white border at the top */
		border-top: none;

		/* Remove right margin and negative top margin, replace the top border with top margin */
		/* Use !important to override a 20px top margin set in #page-column-sidebar styles in other media queries */
		margin: 10px 0 0 0 !important;

		/* Corners */
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 7px;

	}

	.online-shop #page-column-sidebar h3 {

		/* Left align the header in the Online Shop sidebar when the sidebar moves down under the products */
		text-align: left;

	}

}

/*
//
// ***** Responsive breakpoint - 864px width *****
//
*/
@media screen and (max-width:864px) {

	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_864.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width by 160px (fit 1024px down to fit 864px, so 882px down to 722px) */
		width: 722px;

	}

	#page-column-main {

		/* Reduce the width of the main content column down from 622px */
		width: 462px;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_864.jpg') no-repeat center top;

	}

	.wedding-package {

		/* Reduce wedding package columns width */
		float: left;
		width: 214px;

	}

	#wedding-package-2 {

		/* Less gap between package columns */
		margin: 0 10px;

	}

}

/*
//
// ***** Responsive breakpoint - 768px width (mostly applicable to iPad, but trigger 20px 'early' to ensure break happens just as the background starts to go off screen) *****
//
*/
@media screen and (max-width:788px) {

	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_788.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width by 256px (fit 1024px down to fit 768px, so 882px down to 626px) */
		width: 626px;

	}

	#page-column-main {

		/* Remove width restriction and left float from the main content column */
		width: inherit;
		float: none;

	}

	#recent-work li:nth-child(3):after {

		/* Stop splitting the recent work list items over two rows */
		white-space: inherit;

	}

	#page-column-sidebar {

		/* Remove width restriction and left float from the sidebar */
		width: inherit;
		float: none;

		/* Remove left margin that used to separte sidebar from main content column and add a gap to separate this panel from what's now above it */
		/* Mark this as importnat so it isn't cancelled out by styles like '.services #page-column-sidebar' */
		margin: 20px 0 0 0 !important;

	}

	#page-column-sidebar h3 {

		/* Remove centre alignment from the sidebar's title */
		text-align: left;

	}

	#testimonials p {

		/* Bring the testimonials in from the edges a bit */
		margin: 0 10px;

	}

	#footer-contents {

		/* Less top padding to accomodate more lines in the footer */
		padding-top: 82px;

	}

	#footer-contents ul {

		/* Limit the width of the list in the footer so it wraps in the right place and re-centre it */
		margin: auto;
    	width: 350px;

	}

	#footer-contents li:nth-child(3):after {

		/* Add back the missing trailing bullet to the last footer list item on the top line */
		/* To get the browser to actually display the bullet, not just render •, use Unicode hex escapes - below is a space (\20) then a bullet (\2022) */
		content: '\20\2022';
		white-space: nowrap;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_788.jpg') no-repeat center top;

	}

	.services #page-column-sidebar, .weddings #page-column-sidebar, .contact #page-column-sidebar {

		/* Remove the altered width settings applied to the sidebar on larger viewports */
		margin: inherit;
		width: inherit;

	}

	.wedding-package {

		/* After this breakpoint and smaller, stop the packages displaying in columns and remvoe any width restrictions */
		float: none;
		width: auto;

	}

	#wedding-package-2 {

		/* Remove left/right margins around 'column' 2 and replace with top/bottom margins */
		margin: 15px 0;

	}

	.online-shop #page-column-main {

		/* Remove width setting */
		width: inherit;

	}

	.online-shop-product, .online-shop-product-image-link {

		/* Reduce width enough for products to still fit into two columns */
		width: 273px;

	}

	.online-shop-product-image-link {

		/* Set display block and overflow hidden to crop the image inside this link */
		display: block;
		overflow: hidden;

	}

	.online-shop-magnify-image {

		/* Bring the magnifying glasses in by the same 27px that the product images have been shrunk by */
		left: 251px;

	}

	.online-shop-magnify-image:nth-child(odd), .online-shop-magnify-image:nth-child(even) {

		/* In browsers with nth-child support each product has an extra 4px of padding - add this to the position of the magnifying glasses to compensate */
		left: 255px;

	}

	.online-shop-product-price {

		/* Price - slightly smaller font so prices still fit on the same line as the Buy button */
		font-size: 18px;

	}

}

/*
//
// ***** Responsive breakpoint - 688px width (first one smaller than iPad portrait mode) *****
//
*/
@media screen and (max-width:688px) {

	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_688.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width by 336px (fit 1024px down to fit 688px, so 882px down to 546px) */
		width: 546px;

	}

	#nav-home {

		/* Decrease the space between nav items by 11px to avoid wrapping at this size - first the Home button */
		width: 69px;

	}

	#nav-services {

		/* Services button */
		width: 85px;

	}

	#nav-weddings {

		/* Weddings button */
		width: 97px;

	}

	#nav-online-shop {

		/* Online Shop button */
		width: 109px;

	}

	#nav-contact {

		/* Contact Us button */
		width: 103px;

	}

	#nav-blog {

		/* Blog button */
		width: 64px;

	}

	#blog-banner {

		/* Blog banner shrunk down for first breakpoint below iPad portrait */
		background: url(../../images/global/header/blogBanner688.png) no-repeat right;
		
	}
	
	#info-banner {
	
		/* Slightly more padding on the info banner when it wraps to two lines */
		padding-bottom: 7px;
		
	}

	#recent-work li:nth-child(3):after {

		/* Insert a Unicode line feed and different white space control to split the recent work list items over two rows */
		content:"\A";
		white-space: pre;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_688.jpg') no-repeat center top;

	}

	.online-shop #page-column-main {

		/* Stop the products list from aligning right */    
		float: none;

		/* Limit width - this should be 300px plus 12px of padding either side but to get this going in IE8 it seems to have to be 340px */
		width: 340px;

		/* Centre */
		margin: auto;

	}

	.online-shop #page-column-main:nth-child(1) {

		/* Limit width - this is the width of each product (300px) plus padding of 16px either side (32px) - padding is 16px for nth-child-enabled browsers */
		width: 420px;

	}

	.online-shop-product, .online-shop-product-image-link {

		/* Restore full 300px width as the products list has gone to one column */
	    width: 300px;

	}

	.online-shop-product:nth-child(odd), .online-shop-product:nth-child(even) {

		/* Products are now in one column so they don't need left/right margins (which would throw off the centring, in crap browsers at least) */
		margin-left: 0;
		margin-right: 0;

		/* Bump the padding right up to fill the screen a bit more - increase of 44px for nth-child browsers or 48px for crap browsers */
		/* This isn't working in IE, have not yet found out why so for now I'm not applying it to .online-shop-product */
		padding-left: 60px;
		padding-right: 60px;

	}

	.online-shop-magnify-image {

		/* Product image has expanded again, move the magnifying glass back into place */
		left: 278px;

	}

	.online-shop-magnify-image:nth-child(odd), .online-shop-magnify-image:nth-child(even) {

		/* In nth-child browsers move the magnifying glass by a further 48px of padding */
		left: 326px;		

	}

	.online-shop-delivery-banner:nth-child(odd), .online-shop-delivery-banner:nth-child(even) {

		/* Same for the delivery banner - 18px of left goes up to 62px */
		left: 62px;		

	}

	.online-shop-product-price {

		/* Price - put the price back to its usual font size */
		font-size: 19px;

	}

}

/*
//
// ***** Responsive breakpoint - 608px width (include max device width triggers for HTC Desire HD etc., 533px for older versions of Android and 615px for newer) *****
//
*/
@media screen and (max-width:608px),(max-device-width:533px),(max-device-width:615px),(max-width:480px) and (max-height:320px) {

	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_608.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width by 416px (fit 1024px down to fit 608px, so 882px down to 466px) */
		width: 466px;

	}

	#header-contents h1 {

		/* Move the main logo left by 10px */
		left: 33px;

	}

	#header-contents ul {

		/* Move the header contents list right by 10px */
		margin-right: 28px;

	}

	nav ul {

		/* Double the height of the nav because the links within it now need to wrap */
		height: 60px;

	}

	#nav-home {

		/* Nav items are now wrapping, add back 11px to their widths to restore original spacing - also apply custom margins to each one to align each row */
		/* First the Home button */
		width: 80px;
		margin: 0 7px 0 68px;

	}

	#nav-services {

		/* Services button */
		width: 96px;
		margin: 0 15px 0 25px;

	}

	#nav-weddings {

		/* Weddings button */
		width: 108px;
		margin: 0;

	}

	#nav-online-shop {

		/* Online Shop button */
		width: 120px;
		margin: 0 0 0 50px;

	}

	#nav-contact {

		/* Contact Us button */
		width: 114px;
		margin: 0 24px 0 0;

	}

	#nav-blog {

		/* Blog button */
		width: 75px;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_608.jpg') no-repeat center top;

	}

}

/*
//
// ***** Responsive breakpoint - 528px width (first breakpoint below mobile landscape width) *****
//
*/

/* Make this trigger when desktop falls below 528px width but not when iPhone etc. is in landscape mode */
@media screen and (max-width:528px) and (min-device-width:321px),(max-width:320px) {

	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_528.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width - at this point content must wrap so much that it's easiest to go straight down to mobile portrait width (320px - 14px for 7px gap at either side) */
		/* So 882px down to 306px = subtract 576px */
		width: 306px;

	}

	#header-contents {

		/* Increase the height of the header */
		height: 280px;

		/* Taller and thinner background image */
		background: url('../images/global/header/background_mobile_portrait.jpg') no-repeat right top;

	}

	#header-contents h1 {

		/* Centre the logo */
		left: 44px;

	}

	#header-contents ul {

		/* Move the header's list down below the logo and centre it by increasing the right margin */
		margin: 166px 44px 0 0;

	}

	nav ul {

		/* Increase the height of the nav */
		height: 90px;

	}

	#nav-home {

		/* Nav items are now wrapping into two columns - apply custom margins to each one to align each row */
		/* First the Home button */
		margin: 0 7px 0 45px;

	}

	#nav-services {

		/* Services button */
		margin: 0 15px 0 25px;

	}

	#nav-weddings {

		/* Weddings button */
		margin: 0 0 0 31px;

	}

	#nav-online-shop {

		/* Online Shop button */
		margin: 0 0 0 7px;

	}

	#nav-contact {

		/* Contact Us button - no margins needed for the Blog button because it's positioned using the margins on this button */
		margin: 0 27px 0 28px;

	}

	#page-title-container {

		/* Centre the page's title */
		text-align: center;

	}

	#blog-banner {

		/* Blog banner shrunk down for any breakpoint below the previous one (not iPod etc. landsacpe though) */
		background: url(../../images/global/header/blogBanner528.png) no-repeat right;
	
	}

	#page-column-main {

		/* Centre the text in the main column, so you can centre the main image */
		text-align: center;

	}

	#homepage-portraits {

		/* Remove left float and right margin from the homepage picture, to stop the text wrapping around it */
		float: none;
		margin-right: 0;

	}

	#recent-work-container {

		/* Restore left alignment on the Recent Work title */
		text-align: left;

	}

	#recent-work {

		/* Restore some left/right padding around the recent work thumbnails */
		padding-left: 10px;
		padding-right: 10px;

	}

	#recent-work li:nth-child(3):after {

		/* Remove the forced split in the list of recnt work items */
		content: inherit;
		white-space: inherit;

	}

	#footer-contents {

		/* Increase gap above the footer contents */
		padding-top: 42px;

		/* Decrease top padding and add bottom padding so the now-multiline footer contents line up inside the footer */
		padding: 37px 0 10px;

	}

	#footer-contents ul {

		/* Remove footer list width expansionion */
		width: inherit;

	}

	#footer-contents li:nth-child(3):after {

		/* Remove the extra bullet in the footer contents */
		content: '';
		white-space: normal;

	}

	#footer-contents li:nth-child(2):after {

		/* Instead add a bullet and split after the second item */
		content: '\20\2022\A';
		white-space: pre;

	}

	#footer-contents li:nth-child(4):after {

		/* Same again after the fourth */
		content: '\20\2022\A';
		white-space: pre;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_528.jpg') no-repeat center top;

	}

	#services-list li img, #services-list li:nth-child(even) img {

		/* Remove left/right floating from services images */
		float: none;

		/* Centre them */
		margin: auto;

	}

	#services-list h3 {

		/* Services images and headings are now centred, so vertivally separte them a bit */
		margin-top: 3px;

	}

	.online-shop #page-column-main {

		/* Limit the width of the main column */
	    width: 306px;

		/* Make sure the page column has no padding */
		padding: 0;

	}

	.online-shop #page-column-main:nth-child(1) {

		/* Sazme rule as above but separated out so the first one kicks in on IE */
	    width: 306px;
		padding: 0;

	}

	.online-shop-product, .online-shop-product-image-link {

		/* Knock each product's width down by 18px from 300px to 282px */
		width: 282px;

	}

	.online-shop-product, .online-shop-product:nth-child(odd), .online-shop-product:nth-child(even) {

		/* Put the padding back to how it was before spacing products out using nth-child rules */
		padding: 10px 12px 15px 12px;

	}

	.online-shop-product {

		/* Make sure all products have no margins other than 10px at the top */
		margin: 10px 0 0 0;

	}

	.online-shop-product:nth-child(odd), .online-shop-product:nth-child(even) {

		/* Sazme rule as above but separated out so the first one kicks in on IE */
		margin: 10px 0 0 0;

	}

	.online-shop-magnify-image {

		/* Magnifying glass - 322px of left back down to standard 278px */
		/* Then knock another 18px because that's how much you're cropping the image down by */
		top: 136px;
		left: 260px;		

	}

	.online-shop-magnify-image:nth-child(odd), .online-shop-magnify-image:nth-child(even) {

		/* Sazme rule as above but separated out so the first one kicks in on IE */
		top: 136px;
		left: 260px;		

	}

	.online-shop-delivery-banner:nth-child(odd), .online-shop-delivery-banner:nth-child(even) {

		/* Delivery banner - 62px of left back down to 18px */
		top: 14px;
		left: 14px;		

	}

	.online-shop-product-price {

		/* Price - slightly smaller font so prices still fit on the same line as the Buy button */
		font-size: 18px;

	}

	.order-title {

		/* When the 'Your order' title gets centred it doesn't need any left margin any more */
		margin-left: 0;

		/* Restore centre alignment */
		text-align: center;

	}

	.order-confirmation #page-column-main, .order-details #page-column-main {

		/* At this smallest size, remove the centre alignment from the main column on the order confirmation page */
		text-align: left;

	}

}

/*
//
// ***** iPhone/iPod Touch-specific styles - landscape *****
//
*/
@media screen and (max-width:480px) and (max-height:320px) {

	body {

		/* Stop iOS devices from messing with the fonts */
		-webkit-text-size-adjust: none;

	}

	#header-contents {

		/* Decrease the height of the header */
		height: 200px;

	}

	#header-contents h1 {

		/* Move the logo up by 20px */
		top: 18px;

	}

	#header-contents ul {

		/* Same for the header contents list */
		margin-top: 86px;

	}

	#page-column-main p {

		/* iOS is messing with the font size somehow, despite turning off size adjust. So bump the font size and line-height back up to match landscape orientation */
		font-size: 15px;
		line-height: 25px;

		/* Separate main column paragraphs a bit otherwise the smaller text gets a bit hard to read */
		margin-bottom: 8px;

	}

	#page-column-sidebar p {

		/* iOS is messing with the font size somehow, despite turning off size adjust. So bump the font size and line-height back up */
		/* Mark as important so these styles aren't cancelled out by '.page-class #page-column-sidebar p' styles */
		font-size: 15px !important;
		line-height: 20px !important;

	}

	#bfa-membership {

		/* iOS is messing with the font size somehow, despite turning off size adjust. So bump the font size back up to match landscape orientation */
		font-size: 15px;

	}

	#homepage-portraits {

		/* Decrease right margin on the homepage image to appear to give to equal left-right margins */
		margin-right: 8px;

	}

	#contact-form-success p {

		/* Again, fix font size */
		font-size: 22px;

	}

	.form-field-description {

		/* Make sure the Sunday delivery warning is the same size as the form filed labels */
		font-size: 13px !important;

	}

}

/*
//
// ***** iPhone/iPod Touch-specific styles - portrait *****
//
*/
@media screen and (max-width:320px) and (max-height:480px) {

	body {

		/* Stop iOS devices from messing with the fonts */
		-webkit-text-size-adjust: none;

	}

	#header-contents {

		/* Decrease the height of the header so the nav just touches the bottom of the viewport */
		height: 265px;

	}

	#header-contents h1 {

		/* Move the logo up by 20px */
		top: 18px;

	}

	#header-contents ul {

		/* Decrease the gap between the logo and the header list */
		margin-top: 154px

	}

	#page-column-main p {

		/* iOS is messing with the font size somehow, despite turning off size adjust. So bump the font size and line-height back up to match landscape orientation */
		font-size: 15px;
		line-height: 25px;

		/* Separate main column paragraphs a bit otherwise the smaller text gets a bit hard to read */
		margin-bottom: 8px;

	}

	#page-column-sidebar p {

		/* iOS is messing with the font size somehow, despite turning off size adjust. So bump the font size and line-height back up */
		/* Mark as important so these styles aren't cancelled out by '.page-class #page-column-sidebar p' styles */
		font-size: 15px !important;
		line-height: 20px !important;

	}

	#bfa-membership {

		/* iOS is messing with the font size somehow, despite turning off size adjust. So bump the font size back up to match landscape orientation */
		font-size: 15px;

	}

	#contact-form-success p {

		/* Again, fix font size */
		font-size: 22px;

	}

	.form-field-description {

		/* Make sure the Sunday delivery warning is the same size as the form filed labels */
		font-size: 13px !important;

	}

}

/*
//
// ***** Image overrides - only show larger background images at sizes larger than mobile *****
//
*/

/* Landscape */
@media only screen and (min-device-width: 616px) {

	#header-contents {

		/* Background image */
		background: url('../images/global/header/background.jpg') no-repeat right top;

	}

	.page-title {

		/* Spacing and borders - 4px of top padding to align the text, plus 246px to move the text downwards enough to show the full background banner image */
		padding: 250px 0 5px 0;

	}
	
	/* Page-specific banners */
	.sitehome .page-title {
		
		background: url('../images/global/header/banners/01.jpg') no-repeat center top;
		
	}
	.services .page-title {
		
		background: url('../images/global/header/banners/02.jpg') no-repeat center top;
		
	}
	.weddings .page-title {
		
		background: url('../images/global/header/banners/03.jpg') no-repeat center top;
		
	}
	.online-shop .page-title {
		
		background: url('../images/global/header/banners/04.jpg') no-repeat center top;
		
	}
	.contact .page-title {
		
		background: url('../images/global/header/banners/05.jpg') no-repeat center top;
		
	}
	.blog .page-title {
		
		background: url('../images/global/header/banners/06.jpg') no-repeat center top;

		/* Tweak padding to move the page title under the blog banner */
		padding-top: 300px;
		
	}

	#footer-contents {

		/* Background image */
		background: url('../images/global/footer/background.jpg') no-repeat right top;

	}

	#services-list li {

		/* Background image plus standard green background */
		background: url('../images/global/background_panel.jpg') top right no-repeat #BBD08A;

	}

	#contact-form-success, #contact-form-failure {

		/* Background image plus standard green background */
		background: url('../images/global/background_panel.jpg') center right no-repeat #BBD08A;

	}
}

/* 1px wider than the third breakpoint */
@media screen and (min-width:789px) {

	#wedding-packages-container {

		/* Columns won't be the same height, so add a background image to the bottom left */
		background: url('../images/global/background_content_left.jpg') no-repeat left bottom;

		/* Columns inside the container are floated so without inline-block their container won't have a height and the background image will sit at the top */
		display: inline-block;

	}

	.contact #page-columns-container {

		/* Background image for the bottom-right corner */
		background: url('../images/global/background_content_right.jpg') no-repeat bottom right;

		/* Enough bottom padding to show this image */
		padding-bottom: 140px;

	}

	.contact #footer-contents {

		/* Background image - flipped on the contact page */
		background: url('../images/global/footer/background_flipped.jpg') no-repeat left top;

	}

}

/* 'Re-override' and ensure you get mobile images on the desktop when you've shrunk your browser window down to less than 528px width */
@media only screen and (max-width:528px) and (min-device-width: 800px) and (min-device-height: 600px) {

	#header-contents {

		/* Taller and thinner background image */
		background: url('../images/global/header/background_mobile_portrait.jpg') no-repeat right top;

	}

	#services-list li {

		/* Default background colour */
		background-color: #BBD08A;
	
		/* Background gradient in supported browsers only - reversed from usual, dark green now at the top */
		/**/
		/* Firefox 3.6+ */
		background-image: -moz-linear-gradient(#778F43, #BBD08A);
		/* Safari 4+, Chrome 1+ */
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#778F43), to(#BBD08A));
		/* Safari 5.1+, Chrome 10+ */
		background-image: -webkit-linear-gradient(#778F43, #BBD08A); 
		/* Opera 11.10+ */
		background-image: -o-linear-gradient(#778F43, #BBD08A);

	}

}

/*
//
// ***** Desire HD-specific styles *****
//
*/

/* This is for 800x480 screens which return 533x320 on Andriod 2.2- and 615x369 on Andriod 2.3+ */
/* This works on Deire HD but not reliably on standard Desire */

/* Trigger in landscape but not when your height is 600px or more */
@media screen and (min-device-width:533px) and (max-device-height:599px) and (orientation:landscape) {

	.fancybox-title, .image-title {

		/* More padding at the top of any image titles */
		padding: 9px 0 5px 10px;

	}

	.facebook a, .twitter a {

		/* Decrease the icon height and increase the padding to centre the line of text next to the icons */
		height: 24px;
		padding-top: 8px;

	}

	input[type=submit], .btn {

		/* Increase top padding from 5px to centre the text in any Submit button */
		padding-top: 8px;

	}

}

/* Trigger in portrait but not when your height is 1024px or more */
@media screen and (min-device-height:533px) and (max-device-height:1023px) and (orientation:portrait) {

	.fancybox-title, .image-title {

		/* More padding at the top of any image titles */
		padding: 9px 0 5px 10px;

	}

	.facebook a, .twitter a {

		/* Decrease the icon height and increase the padding to centre the line of text next to the icons */
		height: 24px;
		padding-top: 8px;

	}

	input[type=submit], .btn {

		/* Increase top padding from 5px to centre the text in any Submit button */
		padding-top: 8px;

	}

}

/*
//
// ***** Lumia 800-specific styles *****
// ***** Copy of the Responsive breakpoint - 608px width styles because Landscape Lumia has a width of 800px *****
// ***** Also an override for #header-contents that removes mobile portrait background image and replaces with landscape *****
//
*/

/* Landscape */
@media only screen and (orientation:landscape) and (max-device-width: 480px) and (max-device-height: 800px) {
	
	.standard-background {

		/* Use a general background image that isn't as wide */
		background: url('../images/global/background_strip_608.jpg') repeat-y center top;

	}

	.standard-width {

		/* Reduce global width by 416px (fit 1024px down to fit 608px, so 882px down to 466px) */
		width: 466px;

	}
	
	#header-contents {

		/* Background image - small mobile version first */
		background: url('../images/global/header/background_mobile.jpg') no-repeat right top;
	
	}

	#header-contents h1 {

		/* Move the main logo left by 10px */
		left: 33px;

	}

	#header-contents ul {

		/* Move the header contents list right by 10px */
		margin-right: 28px;

	}

	nav ul {

		/* Double the height of the nav because the links within it now need to wrap */
		height: 60px;

	}

	#nav-home {

		/* Nav items are now wrapping, add back 11px to their widths to restore original spacing - also apply custom margins to each one to align each row */
		/* First the Home button */
		width: 80px;
		margin: 0 7px 0 68px;

	}

	#nav-services {

		/* Services button */
		width: 96px;
		margin: 0 15px 0 25px;

	}

	#nav-weddings {

		/* Weddings button */
		width: 108px;
		margin: 0;

	}

	#nav-online-shop {

		/* Online Shop button */
		width: 120px;
		margin: 0 0 0 50px;

	}

	#nav-contact {

		/* Contact Us button */
		width: 114px;
		margin: 0 24px 0 0;

	}

	#nav-blog {

		/* Blog button */
		width: 75px;

	}

	#footer-external {

		/* Use a new thinner closing footer image, to match the tiled image used in the standard background class */
		background: url('../images/global/background_footer_608.jpg') no-repeat center top;

	}
	
}

/*
//
// ***** Playbook-specific styles *****
//
*/

/* Portrait */
@media only screen and (orientation:portrait) and (max-device-width: 600px) and (min-device-height: 1024px) {

	#footer-contents li:nth-child(2):after, #footer-contents li:nth-child(4):after {

		/* Instead add a bullet and split after the second and fourth items */
		content: '\20\2022\A';
		white-space: pre;

	}

	#footer-contents li:nth-child(3):after {

		/* Remove bullet and the split after the third item */
		content: '';
		white-space: normal;

	}

	#footer-contents {

		/* Reduce the padding above the footer contents so they don't fall off the bottom */
		padding-top: 38px;

		/* Bump the font size up a bit to force the first line to wrap */
		font-size: 13px;

	}

	#services-list li {

		/* Background image plus standard green background */
		background: url('../images/global/background_panel.jpg') top right no-repeat #BBD08A;

	}

	.online-shop-product-price-list {

		/* Bring the prices on each product upwards a bit, otherwise the Buy button looks to be too high */
		margin-top: -3px !important;

	}

}

/* Landscape */
@media only screen and (orientation:landscape) and (max-device-height: 600px) and (min-device-width: 1024px) {

	.online-shop-product-price-list {

		/* Bring the prices on each product upwards a bit, otherwise the Buy button looks to be too high */
		margin-top: -3px !important;

	}

}

/*
//
// ***** iPad-specific styles *****
//
*/

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* Both orientations */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}