/*	FT-Common-XXX Stylesheet
	---------------------------------	*/

/*	Website Design by Fancy Togs */

/*	Changelog
	---------	
	No.	
	V005 -062 22/1/13 ready for content	
		-063 15/4/24 text-x-large & text-xx-large added
		
*/	
	
	

/*	Resets
	------	*/

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
	p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
	img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
	dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figure, figcaption, hgroup, 
	menu, footer, header, nav, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
	}

	article, aside, canvas, figure, figure img, figcaption, hgroup,
	footer, header, nav, section, audio, video {
		display: block;
	}

	a img {border: 0;}



/*	Typography 
	----------	*/
	
	* {
		color:black;
		list-style-type:none;
		font-family: Arial, Helvetica, sans-serif;
		line-height:1.2;  /* use plain value as it is relative to actual final font size */
		-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	}
	
	p, h1, h2, h3, h4, h5, h6, li, a {
		margin-bottom: .3em;
	}

	p {
		margin-left: 3%;
		text-align: justify;
	}
	.italic {
		font-style:italic;
	}

	.bold {
		font-weight:700;
	}

	.text-centered  p {    /* needs to be specific to override other p formatting */
		text-align: center;
		margin-left: 0;
		margin-right: 0;
	}
	
	.text-large {
		font-size: large;
	}
	
	.text-x-large {
		font-size: x-large;
	}
	
	.text-xx-large {
		font-size: xx-large;
	}
	
	.text-inset p {   /*need to use inset as ul and li not recognised as content by safari Reader */
		margin-left: 10%;
	}
	

	
	.content-box  h2 {
		margin-right:10px;
	}

	.info-box  h2 {
		margin-right:10px;
	}


	div .quote-box {
	/* inset box, fine line edge, square corners, italics, light coloured fill */
		margin: 1em 5% 1em 10%;
		background-color: gainsboro;
		border: 1px solid limegreen;
		font-style:italic;
		text-align: center;
		padding: 1em 5% 1em 5%;
		width: auto;
	}


/* Selection colours */
/*
::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}
*/


/*		Common Layout
		-------------
		max width 800px
		single column, vertically stacked, 
		centralised on wide window
		
		images sized for 300 wide by 300 high including upto 700 wide screens as big mobile screen in landscape only 300 high
		
		uses media query to modify layout for widths below 451px and above 795px 
		
		
*/

html {
	background-image:url('../img/black-purple-vertical-2x1000px-001.jpg');
	background-repeat:repeat-x;
	background-color:purple;
}

body {	
	width:auto;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

div {
	max-width: 100%;
}

h1 {
	font-size: 0;
}

h2, h3 {
	text-align:center;
}

li {
	padding-left: 0;
	margin-left: 9%;
	list-style-type: disc;
}

.info-box {
	background-color:orange;
	width:auto;
	margin:10px;
	padding-top:10px; 
	padding-left:10px;
	border:3px solid black;
	border-radius:15px;
}

.content-box {
	background-color:limegreen;
	width:auto;
	margin:10px;
	padding-top:10px; 
	padding-left:10px;
	border:3px solid black;
	border-radius:15px;
}

.text-box {
	background-color: lemonchiffon;
	width: auto;
	padding: 10px;
	border: 3px solid black;
	border-radius: 11px;
	margin-bottom: 10px;
	margin-right: 10px;
}

/* Accessability Features */

		a:active, a:focus  {   /* mark link currently selected using keyboard */
			font-style: italic;
			font-size: larger;
			/* outline: invert dashed medium; */
		}


#branding {
	width:auto;
	max-width: 600px;
	margin: 10px auto;
	/* margin:10px; */
	padding: 0 10px;
}

#branding a {   
	/* needs to be specific to prevent more global CSS overruling it */
	color:limegreen;
	font-weight:700;
}
#branding p {   
	/* needs to be specific to prevent more global CSS overruling it */
	color:limegreen;
	margin-left:0;
	margin-top: .5em;
	margin-bottom: .5em;
}

#ft-logo {
	float: left;
	display: block;
	margin-top: 1.5em;
	margin-left: 20px; /* adjust to suit visual balance of logo position */
}

.old-ie #ft-logo {
	margin-top: .5em;
}


#branding-bullets  {
	float: right;
	min-width: 50%;  /* forces vertical stack of bullets & contact */
	margin: 0 10px 0 0;
	/* margin-left: 3%; */
	/* min-height: 92px; */
	/* padding-top: auto;
	padding-bottom: auto; */
}

.old-ie #branding-bullets  {
	width: auto;  /* needed for narrow screens */
	margin: .5em 10px 0 2em;	
}


#branding-bullets p,
#branding-bullets a {
	text-align: right;
	font-weight: 700;
}

#branding-contact {
	float: right;
	min-width: 50%;   /* forces vertical stack of bullets & contact */
	margin: 0 10px 10px 0;
}

.old-ie #branding-contact  {
	width: auto;  /* needed for narrow screens */
	margin: 1em 10px 10px 1em;
}


#branding-contact p,
#branding-contact a {
	text-align: right;
}



/* #branding-contact a {
	color:orange;
} */

#ft-logo-knotwork {
	clear:both;
	display:block;
	max-width:100%;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
}

#branding-slogan p {
	color:orange;
	font-weight:700;
	text-align:center;
	margin-bottom:0px;
}

#branding-message p {
	text-align:center;
}



.featured-images {
	clear:both;
	max-width:100%;
	text-align: center;
	margin: 10px;
	background-color:black;
	border:3px solid black;
	border-radius:15px;
}

.featured-images img {
	max-width: 80%;
    height: auto;
	width: auto;
    margin: 10px 0;
}

/* Navigation & Menu Systems */

		#navigation-wrapper{
			position:static;  /* static is standard default */
		}
		
		#menu-spacer {
			/* height: 5.5em; */
			display: none;
		}

		#bottom-navigation {
			width: auto;
		}

		#bottom-navigation.info-box ,
		#top-navigation.info-box {
			/* padding-bottom:10px;
			padding-right:10px; */
		}
		
		#top-navigation.info-box {
			margin-bottom: 0;
		}
		
		#menu ul {
			list-style: none outside none;
			padding: 0;  /* prevents list level auto indents */
			margin: 0;   /* prevents list level auto indents */
			/* background-color: pink;   testing marker */ 
		}
		
		#menu li {
			font-weight: 700;
			margin-left: 0;  /* 0 left margin prevents list level auto indents */
			margin: 0 0 0 0; /* top level menu title needs no right margin as its additional to lower levels */
			list-style-type: none;
		}
		
		#menu li.menu-group {
			/* border: 1px solid red; */      /* testing marker */
			margin: 0 10px 10px 0;
			padding: 10px 0 0 10px;
			border-radius:11px;
			border: 3px solid black;
			background-color: lemonchiffon;
		}
		
		#menu li.menu-group ul {
			margin-top: .25em;  /* adds space under menu-group titles */
		}
		
		#menu li.menu-group li {   /* removes li.menu-group attributes from lower levels */
			font-size: medium;
		}			
		
		#menu li a,
		.jumptomenu-button a {
			font-weight: 700;			
			text-align: center;
			display: block;  /* NEEDED as "a" are normally inline */
			padding: .5em .5em .5em .5em;
			margin: 0 10px 10px 0;
			border-radius:11px;
			border: 3px solid black;
			height: auto;
			background-color: limegreen;
		}
		
		#menu li li li a {
			border-radius: 8px;
		}
		
		#menu h2 {
			margin-top: .25em;
			margin-bottom: .5em;
		}
		
		#menu h3 {
			text-align: left;
		}

.text-box img {
	display: block;
	max-width: 35%; /* good image size proportions and allows enough space for text centrally between opposing images */
	max-height: 300px;   /* landscape smartphone limit */
	height: auto; /* prevents image distortion when container width restricted */
	margin: 0 0 10px 0;
	width:auto;   /* sorts image distortion bug in IE8 */
	border: 1px solid black;   /* provides separation from background colour for pale images, safari messes the radiused corners whatever thickness so stick with 1px as better elsewhere */
	border-radius: 8px;	
}

.text-box img.left {
	float:left;
	margin-left:3%;  /* to match p left margin */
	margin-right: 10px;
}


.text-box img.right{
	float:right;
	margin-left: 10px;
}


.text-box img.center {
	max-width:90%;
	float:none;
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.text-box div.text-group {
	display:block;
	clear:both;
	margin: 10px 0 20px 0;
	padding:0;
	width: 100%;
	padding-top:20px;
	border-top: 3px solid orange;
}


/* clearfix extends the div to include floated content */
	.clearfix:after,
	.text-group:after,
	.text-box:after,
	.content-box:after,
	.info-box:after,
	.product-details:after,
	#navigation-wrapper:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		font-size: 0;
	}


.product-box {
	background-color: black;
	width: auto;
	padding: 10px 0 0 10px;
	border: 3px solid black;
	border-radius: 11px;
	margin: 20px 10px 10px 0;  /* note top & bottom margins overlap and only biggest is actioned */
}



.product-box:first-child {
	/* note that :last-child does not work in ie8 and earlier so need to add extra space at top margin of lower boxes not bottom margins  */
	margin-top: 0;
}


.product-image {
	text-align: center; /* but does not work in ie7 */
	margin:10px 10px 10px 0; /* needs to be before ie7 hack */
	padding: 0;
	width:auto;
}

.old-ie .product-image {
	margin: 10px auto; /* auto left and right margins on the image container centers the images in ie7 */
}


.product-image img{
	max-width: 49%;
	max-height: 300px;
    height: auto;
    width: auto\9; /* ie8 bug fix */
	margin: 2% 0;
	border-radius: 8px;
}


img.landscape {
	max-width: 95%;
}


.product-image p {
	width: 80%;
	margin: 0 auto;
}

.product-details {
	margin: 0 10px 10px 0;
}

.product-description {
	border:none;
	margin: 10px 0 0 0;
}

.product-options {

	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */

	float:left;
	width: 60%;
	border:none;
	margin: 16px 0 0 0;
}

.iem7 .product-options,
.ie7 .product-options {
	float: none;
	width: auto;
}

.product-price {

	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */

	font-weight: 700;
	font-size: 150%;
	float: right;
	width: 37%;
	border:none;
	margin: 16px 0 0 0;
}

.iem7 .product-price,
.ie7 .product-price {
	float: none;
	width: auto;
}

.product-price p {
	margin:0;
	text-align: center;
}

.action-button {  /* action button uses div container padding to overcome floated predecessor margin overlap problems.  NOTE assumes container sorts out any side or bottom margins */
	margin: 0;
	clear: both;
	width: 100%;
	padding-top: 13px; /* additional spacing above button */
	padding-bottom: 0;
	text-align: center; /* centers button inside div */
	border: none;
}

.action-button a {   
	display: inline-block;    /* allows use of div container text-align to center the button */
	background-color: orange;
	width: auto; /* fit to text width */
	
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */

	max-width: 95%;
	margin: 0; /* use div container margins and padding to set spaces around button*/
	border: 3px solid black; 
	border-radius: 11px;
	text-align: center;  /* centers text within its own button box */
	font-weight: 700;
	font-size: 100%; 
	padding: .5em 1em;
}
	
#footer {
	clear:both;
}

#footer p {
	text-align:center;
	color:limegreen;
	font-weight:700;
	}



/*	make telephone number diallers hidden except on handheld devices 
	----------------------------------------------------------------*/
	
	.telephone {
		display:none;
	}	/*commented out for debugging on desktop pc */

	@media only handheld {
		p.telephone {
			display:inline;
		}
	}

/*	optimise for wide screens
	---------------------------	*/
@media only screen and (min-width: 795px) {   /* Ensure media query min-width less than default body max-width to get smooth width transition */

	body {	
		max-width: 1200px;
	}

	div#maincontent {
		float: right;
		width:70%;
	}
	
	div#bottom-navigation {
		float: left;
		width: 30%;
	}
	
	.jumptomenu-button {
	display:none;
	}
	
	.text-box img {
		max-height: none;
	}
	
	.product-image img {
		max-width: 95%;
		max-height: none;
	}
		
	.text-columns {
	
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:2;

	-moz-column-gap: 30px; /* Firefox */
	-webkit-column-gap: 30px; /* Safari and Chrome */
	column-gap: 30px;
	
	-moz-column-rule: 2px solid orange; /* Firefox */
	 -webkit-column-rule: 2px solid orange; /* Safari and Chrome */
	 column-rule: 2px solid orange;
	
	text-align: justify;
	}

	div.left-text-column {
		float:left;
		width:50%;
		margin: 0;
	}
	
	.text-box div.left-text-column {
		box-sizing:border-box;
		-moz-box-sizing:border-box; /* Firefox */
		-webkit-box-sizing:border-box; /* Safari */
		padding-right:15px;
		border-right:3px solid orange;
	}
		
	div.right-text-column {
		float:right;
		width: 50%;
		margin: 0;
	}
	.text-box div.right-text-column {
		box-sizing:border-box;
		-moz-box-sizing:border-box; /* Firefox */
		-webkit-box-sizing:border-box; /* Safari */
		padding-left:15px;
	}

	#ft-logo {
		margin-top: .5em;
		min-height: 5.5em;  /* 5em matches the height of bullets to prevent contact stepping down to centre when large fonts selected by user due to bullets being taller than floated image container. Plus .5em due to accumulated rounding errors in bullet height pixel calculation */
	}

	#branding-bullets  {
		float: right;
		min-width: 0;
		margin-left: 10%;
	}
	
	#branding-contact  {
		float: right;
		min-width: 0;
		margin-top: 1em;
	}
	
	
	

}   /*  end of wide screen optimisation  */


	
/*	optimise for narrow screens
	---------------------------	*/
@media only screen and (max-width: 451px) {
	
	p { text-align: left; }
	
	body {
		padding-left: 3px;
		padding-right: 8px;
	}

	.info-box, 
	.content-box,
	.featured-images {
		clear:both;
		margin:3px 0px;
		padding-top:5px; 
		padding-left:5px;
		border-width:2px;
		border-radius:15px;
	}

	.content-box  h2 {
		margin-right:10px;
	}

	.info-box  h2 {
		margin-right:10px;
	}	
	
	#branding  {
		clear:both;
		margin: 10px 0 0 0;
		padding: 0;
		/* padding-top:5px; 
		padding-left:5px; */
		/* border-width:2px;
		border-radius:15px; */
	}
	
	#ft-logo {
		float:none;
		clear:both;
		margin: .5em 0 0 0;		
	}
	
	#ft-logo img {
		display:block; /* img needs to be converted to block to allow it to center */
		margin-left: auto;
		margin-right: auto;
		margin-bottom:.5em;
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 bug fix*/
	}

	#branding-bullets {
		text-align:center;
		float:none;
		margin-top:1em;
		margin-left: auto;
		margin-right: auto;
		min-height: 0;
		width:auto;
	}
	
	#branding-bullets p {
		text-align:center;
	}
	

	#branding-contact {
		text-align:center;
		float:none;
		margin-left:auto;
		margin-right:auto;
		margin-top:1em;
		width:auto;
	}
	
	#branding-contact p {
		text-align:center;
	}
	
	
	#top-menu {
		display:none;
	}
		
	.text-box {
		padding:5px;
		border-width:2px;
		border-radius:11px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
		 
	#navigation.info-box {
		padding-bottom:5px;
		padding-right:5px;
	}
		
		#menu li.menu-group {
			margin: 0 5px 5px 0;
			padding: 5px 0 0 5px;
			border-radius:11px;
			border-width:2px;
		}
		
		#menu li a,
		.jumptomenu-button a {
			margin: 0 5px 5px 0;
			border-radius:11px;
			border-width:2px;
		}
		
		#menu li li li a {
			border-radius: 7px;
		}
	
	
	.text-box img {
		margin-bottom: 5px;
	}
	
	.text-box div.text-group {
		margin: 12px 0;
		padding-top: 12px;
		border-top-width: 2px;
	}
	
	.product-box {
		float:none;
		padding: 5px 0 0 5px;
		border-width: 2px;
		margin-top: 16px;
		margin-right: 5px;
	}
	
	.product-box:first-child {
		margin-top: 7px;
	}
	
	.product-image {
		margin-bottom:5px;
		margin-right: 5px;
	}
	
	.product-image img {
		max-width: 80%;
		border-radius: 7px;
	}
	
	.product-details {
		margin:0 5px 5px 0;
	}
	
	.product-description {
		float:none;
		border-radius: 7px;
		margin: 7px 0 0 0;
	}
		
	.product-options {
		float:none;
		clear: both;
		width: auto;
		border-width: 0;
		border-radius: 7px;
		margin: 7px 0 0 0;
	}

	.product-price {
		float:none;
		clear: both;
		width: auto;
		border-width: 0;
		border-radius: 7px;
		margin: 7px 0 0 0;
	}
	
	.action-button {
		padding-top:7px;
	}
	
	.action-button a {
		border-width: 2px;
		border-radius: 7px;
	}
	
	
}