@charset "utf-8";
/* LILAC CSS Document */

* { margin: 0; padding: 0; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
img { border: 0; -ms-interpolation-mode: bicubic; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
input[type="submit"]::-moz-focus-inner { border:0; } /* Firefox */





body {
	background: #f9eeec url(../images/pylon-page-bg.jpg) center top no-repeat fixed;
	font: normal 0.9em/1.4em 'Open Sans', sans-serif; color: #231f20;
	-webkit-text-size-adjust: 100%; /* Stop iPhone landscape text scale-up */ 
	margin: 10px 0 0 0;
}
@media only screen and (max-width: 640px) { body { background: #c2c1c0 url(../images/pylon-page-bg-tile.jpg) left top repeat-x fixed; } } /* Smartphone Landscape */

.container, .mcontainer { margin: 0 auto; width: 960px; padding: 0; text-align: left; overflow: hidden; }
.mcontainer { min-height: 520px; }
@media only screen and (max-width: 768px) { .container {  width: 100%; padding: 0; } } /* Tablet portrait */

.floatleft { float: left; }
.floatright { float: right; }
.clearfloats { clear: both; }

.hide { display: none; }
.show { display: inline; }



		
		
/* T E X T */
p { padding: 0 0 12px 0; }
h1 { font-size: 1.6em; padding: 32px 0 18px 0; font-weight: 700; }
h2 { font-size: 1.35em; line-height: 1.6em; padding: 10px 0 8px 0; font-weight: 600; }
h3 { font-size: 1.1em; padding: 4px 0 9px 0; font-weight: 600; }
.small { font-size: 0.8em; line-height: 1.4em; }
.smaller { font-size: 0.6em; line-height: 1.5em; }

.liintro { padding: 0 0 6px 0; }
ul { padding: 0 0 6px 23px; }
ul li { padding: 0 0 6px 0; }
.limidtro { padding: 0; margin: -5px 0 7px 0; }
.liouttro { padding: 0; margin: -5px 0 18px 0; }




/* G E N E R I C   L I N K S */
a { color: #c86134; text-decoration: underline; }
a:hover  { color: #941600; }
.notd { text-decoration: none; color: inherit; } /* Used on homepage image/ad */
.notd:hover { text-decoration: none; color: inherit; }



/* C O L O U R S */
.orange { color: #c86134; }
.red  { color: #941600; }




/* T O P   B A N N E R */
.banner {
	width: 100%; 
	background: #f8f8f8; /* IE8 fallback */
	background: rgba(255,255,255,0.85);
	border-bottom: solid 1px #fff;
	box-shadow: 0px 1px 0px rgba(57,32,56,0.1);
}

.logo { float: left; max-width: 212px; margin: 11px 0 19px 3.6%; line-height: 1em; }
.logo img { width: 100%; }

.strapline { float: right; padding: 32px 30px 22px 0; font-size: 1.6em; font-weight: 700; }


/* M E N U S  -  T O P   A N D   F O O T E R */
.menu {	clear: right; float: right; text-align: right; font-size: 0.9em; width: 70%; padding: 0 1.2% 0 0; }
.menu a {
	line-height: 1.1em; text-align: center; vertical-align: middle;
	display: inline-block; padding: 0 2.4% 0 2.4%;
	color: #c86134; text-decoration: none;
}
.menu a:last-child { padding-right: 0; }
.menu a:hover { text-decoration: none; color: #941600; }
.menu a.on { color: #8f6ea7; }
.menu a.on:hover { cursor: default; }

@media only screen and (max-width: 768px) { /* Tablet Portrait */
	.strapline { width: 50%; text-align: right; line-height: 1.2em; }
	.menu {	clear: both; width: 100%; text-align: center; margin: 0 0 14px 0; }
}
@media only screen and (max-width: 640px) { /* Smartphone Landscape */
	.logo { max-width: 212px; margin: 11px 0 19px 5%; }
	.strapline { width: 40%; padding: 26px 5% 12px 0; font-size: 1.4em; }
	.menu {	clear: both; width: 100%; text-align: center; margin: 0 0 14px 0; }
	.menu a { padding: 0 1.85% 0 1.85%; font-size: 0.95em; }
	.menu a.on { display: none; }
	
}
@media only screen and (max-width: 320px) { /* Smartphone Portrait */
	.logo { float: none; width: 99.4%; max-width: 212px; padding: 10px 0 0 0.6em; margin: 0 auto; text-align: center; }
	.strapline { float: none; width: 98%; padding: 8px 1% 12px 1%; text-align: center; }
	.menu {	clear: both; width: 100%; text-align: center; margin: 0 0 12px 0; }
	.menu a { padding: 6px 4% 10px 4%; font-size: 0.95em; }
	.menu a.on { display: none; }
	
}




/* L A Y O U T */
.cols4 { float: left; width: 42.8%; padding: 0 3.6% 18px 3.6%; } /* Half page width: 4 of the 8 columns */
.cols8 { width: 92.8%; padding: 10px 3.6% 0 3.6%; } /* Half page width: 4 of the 8 columns */
@media only screen and (max-width: 640px) { /* Smartphone Landscape */
	.cols4 { float: left; width: 92.8%; padding: 0 3.6% 0 3.6%; }
}




/* H O M E P A G E */
.homecol1 { float: left; width: 42.8%; padding: 47px 2.4% 10px 3.6%; } /* total width 48.8% */


/* Carousel */
#carousel { /* The masking container for the carousel content. */
	position: relative; float: left; overflow: hidden;
	height: auto; width: 50%; margin: 36px 1.2% 10px 0; padding: 0;  /* total width 51.2% */
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	background: url(../images/pylon.jpg);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) { #carousel { background: url(../images/pylon-retina.jpg); background-size: cover; } }

#horses { position: relative; width: 100%; height: 320px; } /* The container for the carousel content. Gets animated by JS. */

.carNav { position: absolute; z-index: 10; top: 6px; right: 5px; }
.carNav a {
	display: block; float: right; width: 14px; height: 14px;
	-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
	margin: 0 0 0 6px; padding: 0;
	background: #faf8f7;
}
.carNav a:hover { color: #941600; box-shadow: 0px 2px 2px rgba(000,000,000,0.55); }

#carMark {
	position: absolute; z-index: 20; top: 6px; right: 85px;
	width: 10px; height: 10px;
	-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
	background: #775a90; border: solid 2px #faf8f7;
}


#horse1, #horse2, #horse3, #horse4, #horse5, #horseR { position: absolute; width: 100%; top: 0px; }
#horse1 { left: 0%; }
#horse2 { left: 100%; }
#horse3 { left: 200%; }
#horse4 { left: 300%; }
#horse5 { left: 400%; }
#horseR { left: 500%; }

#horse1, #horseR { height: 320px; padding: 0; color: #fff; font-size: 1em; text-align: left; }  /* Height: 320px; */
	.horse1bg { background: #332240; padding: 15px 0 6px 0; height: 305px; opacity: 0.96; }
	#horse1 h2, #horseR h2 { padding: 0 16px 6px 16px; }
	#horse1 p, #horseR p { padding: 0 16px 6px 16px; font-size: 0.9em; line-height: 1.4em; }
	#horse1 img, #horseR img { float: right; width: 100%; max-width: 228px; height: auto; margin: 3px 15px 5px 15px; box-shadow: 0px 3px 4px rgba(0,0,0,0.6); }
	#horse1 a, #horseR a { color: #fff; }
	#horse1 a:hover, #horseR a:hover { color: #cb6402; }

#horse2 { height: 320px; padding: 0; color: #fff; font-size: 1em; text-align: left; }  /* Height: 320px; */
	.horse2bg { background: #cc6600; padding: 15px 0 6px 0; height: 305px; opacity: 0.96; }
	#horse2 img { width: 100%; max-width: 224px; height: auto; margin: 0 0 5px 15px; }
	#horse2 p { padding: 0 16px 6px 16px; font-size: 0.9em; line-height: 1.4em; }
	#horse2 a { color: #fff; }
	#horse2 a:hover { color: #941600; }

#horse3 { height: 320px; padding: 0; color: #fff; font-size: 1em; text-align: left; }
	.horse3bg { background: #000; padding: 27px 0 6px 0; height: 293px; opacity: 0.85; }
	#horse3 img { width: 100%; max-width: 354px; height: auto; margin: 0 0 6px 16px; }
	#horse3 p { padding: 0 16px 8px 16px; }

#horse4 { height: 320px; padding: 0; color: #fff; text-align: left; font-size: 0.9em;  }
	.horse4bg { background: #2c216b; padding: 20px 0 6px 0; height: 300px; opacity: 0.96; }
	#horse4 img { width: 100%; max-width: 100px; height: auto; margin: 0 0 10px 17px; }
	#horse4 p { padding: 0 16px 10px 16px; line-height: 1.4em; }

#horse5 { height: 320px; padding: 0; color: #fff; font-size: 1em; text-align: left; }  /* Height: 320px; */
	.horse5bg { background: #332240; padding: 15px 0 6px 0; height: 305px; opacity: 0.96; }
	#horse5 h2 { padding: 0 16px 6px 16px; }
	#horse5 p { padding: 0 16px 6px 16px; font-size: 0.9em; line-height: 1.4em; }
	#horse5 img { float: right; width: 100%; max-width: 228px; height: auto; margin: 3px 15px 5px 15px; box-shadow: 0px 3px 4px rgba(0,0,0,0.6); }
	#horse5 a { color: #fff; }
	#horse5 a:hover { color: #cb6402; }
	
@media only screen and (max-width: 768px) { /* Tablet Portrait  :  Height: 363px; */
	#carousel { margin-top: 42px; height: 363px; width: 50%; background-size: cover; }
	#horse1, #horseR { height: auto; padding: 0; }
		.horse1bg { height: 348px; padding: 15px 0 0 0; }
		#horse1 p, #horseR p { line-height: 1.3em; }
	#horse2 { height: auto; padding: 0; }
		.horse2bg { height: 348px; padding: 15px 0 0 0; }
		#horse2 p { line-height: 1.3em; }
	#horse3 { height: auto; padding: 0; }
		.horse3bg { height: 318px; padding: 45px 0 0 0; }
	#horse4 { height: auto; padding: 0; }
		.horse4bg { padding: 20px 0 6px 0; height: 343px; }
	#horse5 { height: auto; padding: 0; }
		.horse5bg { height: 348px; padding: 15px 0 0 0; }
		#horse5 p { line-height: 1.3em; }
}
@media only screen and (max-width: 640px) { /* Smartphone Landscape  :  Height: 300px; */
	.homecol1 { float: none; width: 93%; padding: 16px 3.5% 0 3.5%; margin: 0; }
	.homecol1 p { text-align: justify; }
	#carousel { float: none; width: 93%; height: auto; margin: 10px 3.5% 0 3.5%; }
	#horses { height: 300px; }
	
	#horse1, #horseR { width: 100%; height: auto; padding: 0; }
		.horse1bg { height: 288px; padding: 12px 0 0 0; opacity: 1; }
		#horse1 img, #horseR img { max-width: 200px; }
		#horse1 p, #horseR p { line-height: 1.3em; }
	#horse2 { width: 100%; height: auto; padding: 0; }
		.horse2bg { height: 288px; padding: 12px 0 0 0; opacity: 1; }
		#horse2 img { margin: 0 0 4px 15px; }
		#horse2 p { line-height: 1.2em; }
	#horse3 { width: 100%; height: auto; padding: 0; }
		.horse3bg { height: 290px; padding: 10px 0 0 0; opacity: 1; }
	#horse4 { width: 100%; height: auto; padding: 0; }
		.horse4bg { padding: 10px 0 0 0; height: 290px; }
		#horse4 img { margin: 0 0 5px 17px; }
		#horse4 p { line-height: 1.3em; }		
	#horse5 { width: 100%; height: auto; padding: 0; }
		.horse5bg { height: 288px; padding: 12px 0 0 0; opacity: 1; }
		#horse5 img { max-width: 200px; }
		#horse5 p { line-height: 1.3em; }		
}
@media only screen and (max-width: 320px) { /* Smartphone Portrait  :  Height: 386px; */
	#carousel { height: auto; margin: 10px 3.5% 0 3.5%; }
	#horses { height: 386px; }
	
	#horse1, #horseR { width: 100%; height: auto; padding: 0; }
		.horse1bg { height: 372px; padding: 14px 0 0 0; }
		#horse1 h2, #horseR h2 { padding: 14px 16px 6px 16px; }
		#horse1 img, #horseR img  { max-width: 120px; margin: 3px 15px 5px 15px; }
		#horse1 p, #horseR p { font-size: 0.85em; line-height: 1.5em; }
	#horse2 { width: 100%; height: auto; padding: 0; }
		.horse2bg { height: 372px; padding: 14px 0 0 0; }
		#horse2 img { margin: 0 0 5px 15px; }
		#horse2 p { font-size: 0.85em; line-height: 1.3em; }
	#horse3 { width: 100%; height: auto; padding: 0; }
	.horse3bg { height: 341px; padding: 45px 0 0 0; opacity: 1; }
		#horse3 img { max-width: 260px; }
		#horse3 p { font-size: 0.85em; }
	#horse4 { width: 100%; height: auto; padding: 0; }
		.horse4bg { padding: 10px 0 0 0; height: 376px; }
	#horse5 { width: 100%; height: auto; padding: 0; }
		.horse5bg { height: 372px; padding: 14px 0 0 0; }
		#horse5 h2 { padding: 14px 16px 6px 16px; }
		#horse5 img { max-width: 120px; margin: 3px 15px 5px 15px; }
		#horse5 p { font-size: 0.85em; line-height: 1.5em; }		
}





/* C O N T A C T */
.contactdetail { margin: -12px 0 -8px 0; }


/* 2nd-level pages */
.minheight { min-height: 375px; }
@media only screen and (max-width: 768px) { .minheight { min-height: 430px; } } /* Tablet Portrait */
@media only screen and (max-width: 640px) { .minheight { min-height: 100px; } } /* Smartphone Landscape */




/* Generic Content Panels & Panel-Buttons */
.panelbtn, .panel {
	display: block; background: #faf8f7;
	width: 95.2%; padding: 14px 2.4% 2px 2.4%; margin: 0 0 20px 0;
	color: #231f20; text-decoration: none;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	border-top: solid 1px #fff; border-bottom: solid 1px #fff;
	box-shadow: 0px 1px 2px #fff, 0px 4px 0px #ccc, 0px 9px 5px rgba(000,000,000,0.55);
}
.panelbtn:hover { margin: -2px 0 22px 0; box-shadow: 0px 1px 2px #fff, 0px 4px 0px #ccc, 0px 11px 6px rgba(000,000,000,0.55); }
.panelbtn:active, .panel { margin: 4px 0 20px 0;  box-shadow: 0px 1px 2px #e6e6e6, 0px 1px 3px rgba(000,000,000,0.55); }

@media only screen and (max-width: 640px) { .panelbtn, .panel { width: 90.4%; padding: 14px 4.8% 2px 4.8%; } } /* Smartphone Landscape */





/* ICON PANELS / BUTTONS */
.iconbtns { clear: both; height: 134px; padding: 20px 0 0 0; }

.iconbtns a {	
	display: block; float: left;
	width: 21.35%; /* Fallback */
	width: calc(22.6% - 12px); height: 99px; padding: 10px 0 0 12px; margin: 0 1.2% 10px 1.2%;
	font-size: 1.1em; line-height: 1.45em; text-decoration: none;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	border-top: solid 1px #fff; border-bottom: solid 1px #fff;
	box-shadow: 0px 1px 2px #fff, 0px 4px 0px #ccc, 0px 9px 5px rgba(000,000,000,0.55);
}
.iconbtns a:hover { margin-top: -2px; box-shadow: 0px 1px 2px #fff, 0px 4px 0px #ccc, 0px 11px 6px rgba(000,000,000,0.55); }



.iconbtns a:active { margin-top: 4px;  box-shadow: 0px 1px 2px #e6e6e6, 0px 1px 3px rgba(000,000,000,0.55); }

.products, .products-on { background: #faf8f7 url(../images/icon-products.png) no-repeat right bottom; }
.simulation, .simulation-on { background: #faf8f7 url(../images/icon-simulation.png) no-repeat right bottom; }
.bespoke, .bespoke-on { background: #faf8f7 url(../images/icon-bespoke.png) no-repeat right bottom; }
.support, .support-on { background: #faf8f7 url(../images/icon-support.png) no-repeat right bottom; }

.iconbtns a.products-on,
.iconbtns a.simulation-on,
.iconbtns a.bespoke-on,
.iconbtns a.support-on,
.iconbtns a.products-on:hover,
.iconbtns a.simulation-on:hover,
.iconbtns a.bespoke-on:hover,
.iconbtns a.support-on:hover
{ color: #c86134; margin-top: 4px;  box-shadow: 0px 1px 2px #e6e6e6, 0px 1px 3px rgba(000,000,000,0.55); cursor: default; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.products, .products-on {	background: #faf8f7 url(../images/icon-products-retina.png) no-repeat right bottom; }
	.simulation, .simulation-on { background: #faf8f7 url(../images/icon-simulation-retina.png) no-repeat right bottom; }
	.bespoke, .bespoke-on { background: #faf8f7 url(../images/icon-bespoke-retina.png) no-repeat right bottom; }
	.support, .support-on { background: #faf8f7 url(../images/icon-support-retina.png) no-repeat right bottom; }
	.products, .simulation, .bespoke, .support, .products-on, .simulation-on, .bespoke-on, .support-on { background-size: 65%; }
}
@media only screen and (max-width: 640px) { /* Smartphone Landscape */
	.iconbtns a { width: calc(43% - 12px); height: 99px; padding: 10px 0 0 12px; margin: 12px 3.5% 18px 3.5%; }
	.iconbtns a:hover, .iconbtns a:active,
	.iconbtns a.products-on, .iconbtns a.simulation-on, .iconbtns a.bespoke-on, .iconbtns a.support-on,
	.iconbtns a.products-on:hover, .iconbtns a.simulation-on:hover, .iconbtns a.bespoke-on:hover, .iconbtns a.support-on:hover { margin-top: 12px; }
}
@media only screen and (max-width: 320px) {
	.iconbtns a { font-size: 1em; background-size: 65%; }
}





.lastupdated { font-size: 0.85em; margin: -5px 0 0 0; }


.pdf { display: inline-block; height: 40px; padding: 12px 0 0 46px; background: url(../images/pdf-icon.png) left top no-repeat; } /* no longer used */


.img-float { float: right; padding: 10px 0 20px 30px; max-width: 200px; }
@media only screen and (max-width: 640px) { .img-float { padding: 10px 0 20px 20px; max-width: 160px; } }
@media only screen and (max-width: 320px) { .img-float { padding: 20px 0 20px 18px; max-width: 80px; } }


/* FOOTER */
.footer {
	clear: both; margin: 20px 0 30px 0; padding: 12px 0 14px 0;
	font-size: 0.85em;
	border: 1px solid #fff;
	outline: 1px solid rgba(57,32,56,0.12);
	background: #f8f8f8; /* IE8 fallback */  background: rgba(255,255,255,0.85);
}
.footer .container { padding: 0 30px 0 30px; width: 900px; }

.copyright { float: left; width: 30%; padding: 3px 0 0 0; color: #a3a1a0; font-size: 0.85em; line-height: 2.2em; }
.copyright a { display: inline-block; padding: 0 8px 0 8px; color: #a3a1a0; text-decoration: none; }
.copyright a:first-child { padding: 0 8px 0 0; }
.copyright a:hover { color: #941600; }

.footer .menu { width: 70%; padding: 13px 0 0 0; display: none; }

@media only screen and (max-width: 768px) { /* Tablet Portrait */
	.footer .container { padding: 0 2.4% 0 2.4%; width: 95.2%; }
	.copyright { width: 100%; padding: 3px 0 0 0; }
	.footer .menu { width: 100%; }
	.copytext { float: left; }
	.copylinks { float: right; }
}
@media only screen and (max-width: 640px) { /* Smartphone Landscape */
	.footer .menu { display: block; margin: 0 0 11px 0; padding: 5px 0 0 0; }
	.copytext, .copylinks { float: none; width: 100%; text-align: center; }
	.copytext { margin: 8px 0 6px 0; }
}
@media only screen and (max-width: 320px) { /* Smartphone Portrait */
	.footer .menu { margin: 0 0 2px 0; padding: 3px 0 0 0; }
}