@import 'fonts.css';

/** Add custom page definitions here to override defaults ... **/

img {
	max-width: 100%;
	height: auto;
}

html.Product .typography aside.product-images {
	float: right; margin-left: 3em; margin-bottom: 1em; max-width: 40%;
	text-align: center; font-size: 75%;
}
html.Product .typography aside.product-images ul {
	list-style: none; margin: 0; padding: 0;
}
html.Product .typography aside.product-images ul>li+li {
	border-top: 1px solid #efefef;
	margin-top: 1em; padding-top: 1em;
}
html.Product .typography aside.product-images a {
	display: block; margin-bottom: 0.5em;
}	

#page-banner #product-slides.jqDocked {
    position: relative; top: 36px;
    width: 1440px; margin: 0 -235px;
}
#page-banner #product-slides.jqDocked .jqDockWrap {
    margin: 0 auto;
}
#page-banner #product-slides.jqDocked .jqDockLabelText {
    font: bold 20px/1 Arial, sans-serif;
    color: white; text-shadow: 0 1px 2px black;
    text-align: center; margin-bottom: -10px;
}

/** CALENDAR PAGES **/
html.Calendar header aside {
	float: right; margin-top: 0.1em;
}
html.Calendar header aside+h1 {
	margin-top: 0;
}
html.Calendar #Form_MonthJumpForm .field {
	display: inline-block; margin: 0; padding: 0; border: 0;
}
html.Calendar.ie7 #Form_MonthJumpForm .field {
	display: inline !important;
}
html.Calendar #Form_MonthJumpForm .field select {
	font-size: 13px; vertical-align: top;
}
html.Calendar.ie7 #Form_MonthJumpForm .field select {
	margin-left: 4px;
}
html.Calendar #Form_MonthJumpForm fieldset, html.Calendar #Form_MonthJumpForm .Actions {
	display: inline; margin: 0; padding: 0; border: 0;
}
html.Calendar #Form_MonthJumpForm .Actions input {
	margin: 0; padding: 3px 5px; border: 0;
	font-weight: bold; text-transform: uppercase;
	vertical-align: top;
	font-size: 12px;
}
html.Calendar.ie #Form_MonthJumpForm .Actions input {
	padding: 5px 5px 4px 5px;
}
html.Calendar.ie7 #Form_MonthJumpForm .Actions input {
	padding: 2px 5px 2px 5px;
	position: relative; top: -6px;
}

/** GENERIC PAGES **/
html {
	background: url(../images/BackgroundBase.jpg) center top repeat-x #fff;
}
body {
	background: url(../images/Background.jpg) center top no-repeat;
}
html #page-header, html #page-footer, html #page-banner, html #page-menu, html #page-body {
	width: 100%;				/* you can lock in a min width if you have bg images */
}
html #page-header-wrapper, html #page-footer-wrapper, html #page-banner-wrapper, html #page-menu-wrapper, html #page-body-wrapper {
	max-width: 940px;				/* we don't want it to stretch too big, cause it will look funky */
	padding: 0 15px !important;		/* we always want a little padding so things don't look cramped */
}
html #page-body { 
	margin-bottom: 40px;
}
html #page-header-wrapper {
	padding-bottom: 2px !important;
}
html #page-header-wrapper h1 {
	position: relative;
	left: -65px;
	font-size: 150%;
}
html #page-header-wrapper .contactDetails {
	position: absolute;
	top: 5px;
	right: 10px;
	color: #000000;
	font-size: 18px;
	line-height: 1.2;
	font-family: "franklin_gothic_fs_medregular", Arial, Helvetica, sans-serif;
	text-align: right;
}
html #page-header-wrapper .contactDetails a {
	font-family: "franklin_gothic_fs_bookRg", Arial, Helvetica, sans-serif;
}
html #page-header-wrapper .contactDetails a {
	color: #000000;
	text-decoration: none;
}
html #page-header-wrapper .contactDetails a:hover {
	text-decoration: underline;
}

html #page-header-wrapper .contactDetails p {
	margin: 0;
}

html #page-menu {
	color: #ffffff;
	background: #696c7f url(../images/MainMenuBackground.png) 0 -2px repeat-x;
	background: -moz-linear-gradient(top, #686c7e 13%, #818391 41%, #686c7e 69%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#686c7e), color-stop(41%,#818391), color-stop(69%,#686c7e));
	background: -webkit-linear-gradient(top, #686c7e 13%,#818391 41%,#686c7e 69%);
	background: -o-linear-gradient(top, #686c7e 13%,#818391 41%,#686c7e 69%);
	background: -ms-linear-gradient(top, #686c7e 13%,#818391 41%,#686c7e 69%);
	background: linear-gradient(to bottom, #686c7e 13%,#818391 41%,#686c7e 69%);
	padding-top: 4px;
	height: 25px;
	border-bottom: 11px solid #a7000a;
}
html #page-menu .main-menu {
	position: relative;
	left: -4px;
}
html #page-menu .main-menu > ul > li {
	margin-right: 20px !important;
}
html #page-menu .main-menu > ul > li > a {
	color: #ffffff;
	text-transform: uppercase;
	border-radius: 5px;
	height: 36px;
	line-height: 26px;
	padding: 0 10px;
	display: inline-block;
	font-size: 14px;
	-webkit-transition: background 250ms;
	transition: background 250ms;
}
html #page-menu .main-menu > ul > li.section > a,
html #page-menu .main-menu > ul > li:hover > a {
	color: #ffffff;
	background: #aa0009;
	text-decoration: none;
	font-weight: normal;
}
html #page-menu .main-menu > ul > li > ul {
	display: none;
}
html body #page-header-menu {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
html #page-banner {
	height: 275px;
	background: #000000 url(../images/BannerBackground.png) center 0 no-repeat;
	border-bottom: 15px solid #810007;
}
html.mobile #page-banner {
	overflow-x: auto;
}
html #page-footer {
	color: #ffffff;
	background: #1a1a1a;
	margin-top: 80px;
}
html #page-footer-wrapper {
	padding-top: 20px !important;
	padding-bottom: 64px !important;
	font-size: 14px;
	line-height: 1.3;
	position: relative;
}
html #page-footer-wrapper:before {
	content: "";
	display: block;
	position: absolute;
	background: url(../images/FooterBackground.png) 0 0 no-repeat;
	width: 90px;
	height: 54px;
	top: -54px;
	right: 100px;
}
html #page-footer-wrapper a {
	color: #ffffff;
}
html #page-footer-wrapper .footer-left {
	float: left;
	width: 78%;
}
html #page-footer-wrapper .footer-menu {
	margin-bottom: 20px;
}
html #page-footer-wrapper .footer-menu > ul > li {
	margin-right: 30px;
	text-transform: uppercase;
}
html #page-footer-wrapper .footer-menu > ul > li.section > a {
	font-weight: normal;
	text-decoration: underline;
}
html #page-footer-wrapper .contact {
	display: block; 
	float: right;
	font-size: 13px;
	width: 22%;
	margin: 0;
}
html #page-footer-wrapper .contact * {
	font-style: normal;
}
html #page-footer-wrapper .contact span {
	white-space: normal !important;
}
html #page-footer-wrapper .legal, #page-footer-wrapper .legal .credit {
	color: #afafaf;
	display: block;
	font-size: 12px;
}
html #page-footer-wrapper .legal a, #page-footer-wrapper .legal .credit a {
	color: #afafaf;
}
html #page-content-wrapper {
	padding-top: 35px !important;
	padding-bottom: 5px !important;
}
html #page-body.has-sidebar #page-content {
	width: 66%; 
	float: left;
}
html #page-body.has-sidebar #page-content-wrapper {
	padding-right: 40px;
}
html #page-body #page-content article>footer {
	clear: both;
}

html #page-sidebar {
	width: 31.8%; 
	float: right;
	position: relative;
	left: 14px;
}
html #page-sidebar-wrapper {
	padding-top: 51px !important;
	padding-bottom: 10px !important;
}
html #page-sidebar .MenuWidget nav ul {
	list-style: disc !important;
	margin-left: 25px !important;
}
html #page-sidebar .MenuWidget nav ul li {
	float: none !important; 
	margin: 0 0 0 10px;
	display: list-item !important;
}
html #page-sidebar .MenuWidget nav ul li + li {
	margin-top: 0.25em !important;
}

html #page-sidebar .WidgetHolder {
	padding: 25px;
	border: 1px solid #808080;
	border-radius: 10px;
	background: #ffffff url(../images/SidebarBoxBackground.png) top center no-repeat;
	font-size: 18px;
}
html #page-sidebar .WidgetHolder h3 {
	line-height: 1;
	font-size: 155%;
}

/** ROTATORS **/
.rotate > * {
	position: absolute; display: block; list-style: none;
}
/** BREADCRUMB LISTS **/
nav.breadcrumbs { width: 75%; font-size: 75%; border-top: 1px solid #ccc; margin-top: 4em !important; }
nav.breadcrumbs, nav.breadcrumbs * { color: #aaa !important; text-decoration: none !important; }
nav.breadcrumbs a:hover { text-decoration: underline !important; }

/** SOCIAL **/
.social nav li.twitter a { background: url(../images/Twitter27x27.png) no-repeat; display: inline-block; width: 27px; height: 27px; zoom: 0.75; text-indent: -9999px; overflow: hidden; }
.social nav li.facebook a { background: url(../images/Facebook27x27.png) no-repeat; display: inline-block; width: 27px; height: 27px; zoom: 0.75; text-indent: -9999px; overflow: hidden; }

/** NAVIGATION (MENUS) **/
nav>ul { display: block !important; margin-left: 0 !important; }
nav>ul>li { display: block !important; float: left; margin-right: 10px; }
nav>ul:after { display: block !important; clear: left; content: ' '; }
nav>ul li.section>a { font-weight: bold; }

/** BASIC LAYOUT ***/
#page, #page-wrapper,
#page-header, #page-header-wrapper,
#page-footer, #page-footer-wrapper,
#page-body, #page-body-wrapper,
#page-menu, #page-menu-wrapper,
#page-banner, #page-banner-wrapper,
#page-sidebar, #page-sidebar-wrapper,
#page-content, #page-content-wrapper {
	position: relative; margin: 0 auto; padding: 0;
	vertical-align: top; zoom: 1; height: auto;
	display: block;
}
#page-header:after, #page-banner:after, #page-menu:after, #page-body:after, #page-body-wrapper:after, #page-footer:after, #page-footer-wrapper:after {
	display: block; content: ' '; clear: both;
}

.searchResults p.searchQuery {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 16px;
}

.searchResults ul#SearchResults {
	margin: 40px auto 0 auto;
	padding: 0;
}
	.searchResults ul#SearchResults li {
		border-top: 1px solid #eeeeee;
		padding: 20px 0;
		list-style-type: none;
	}
	.searchResults ul#SearchResults a.searchResultHeader {
		font-size: 18px;
		border-bottom: none;
	}
	.searchResults ul#SearchResults p {
		margin: 12px 0;
	}
	
.searchResults #PageNumbers {
	border-top: 1px solid #eeeeee;
	padding-top: 20px;
}
	.searchResults #PageNumbers a {
		padding: 0 5px
	}
	.searchResults #PageNumbers .pagination {
		float: left
	}
	.searchResults #PageNumbers p {
		float: right
	}
	.searchResults #PageNumbers .next,
	.searchResults #PageNumbers .prev {
		font-size: 14px
	}
	.searchResults #PageNumbers .next {
		margin-left: 15px
	}
	.searchResults #PageNumbers .prev {
		margin-right: 15px
	}



#Form_CommentsForm {
	padding-bottom: 30px;	
}
.commenting-rss-feed {
	display: none;	
}

#comments-holder ul.comments-list {
	margin-left: 0;
}
ul.comments-list > li.comment {
	padding: 10px;
	list-style: none;
	clear: left;
}
ul.comments-list > li.comment+li.comment {
	border-top: 1px solid #eee;
}
ul.comments-list > li.comment.odd {
	background: rgba(255,255,255,0.75);
}
ul.comments-list > li.comment img.gravatar {
	display: block;
	float: left;
	margin: 0 20px 10px 0;
}
ul.comments-list > li.comment p.info {
	font-size: 12px;
	text-transform: uppercase;	
}
ul.comments-list > li.comment p {
	margin-left: 70px;
}

ul.action-links {
	margin: 10px 0 10px 70px !important;	
	text-align: left;
	font-size: smaller;
}
ul.action-links > li {
	padding: 0;
	margin: 0;	
	list-style: none;
	position: relative;
	display: inline;
	margin-right: 4px;
}
ul.action-links > li:after {
	content: '|';
	margin-left: 7px;
}
ul.action-links > li:last-child:after {
	content: '';
}

.typography .specificationsTable {
	width: 100%;
}
.typography .specificationsTable th,
.typography .specificationsTable td {
	text-align: left;
	padding: 5px 10px;
}
.typography .specificationsTable th {
	background: #E9E7E4;
}
.typography .specificationsTable th.center,
.typography .specificationsTable td.center {
	text-align: center;
}
.typography .specificationsTable > tbody > tr:first-child > td {
	border-top: 2px solid #A90009;
}

.typography .specificationsTable tbody tr {
	border-bottom: solid 1px #d7d7d7;
}
.typography .specificationsTable tbody tr:first {
	border-top: solid 1px #d7d7d7;
}
.typography .specificationsTable tbody tr:nth-child(odd) {
	background-color: #f9f7f4;
}
.typography .specificationsTable .type {
	width: 240px;
}
.typography .specificationsTable .series {
	width: 100px;
}
.typography .specificationsTable td.dividerLeft {
	border-left: 1px solid #d7d7d7;
}
.typography .specificationsTable td.dividerRight {
	border-right: 1px solid #d7d7d7;
}
.typography .tableHolder {
	max-width: 100%;
	overflow: auto;
	margin-top: 1em;
}


/* ----- MOBILE MENU ------------------------------------ */

html #page-menu #mobile-menu-button {
	display: none;
}

html #page-menu-wrapper #mobile-menu-button {
	position: relative;
	top: -1px;
	display: none;
	padding: 0;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-transition: all 1000ms;
	transition: all 1000ms;
}
	html #page-menu-wrapper #mobile-menu-button .inner {
		display: inline-block;
		padding-right: 40px;
		position: relative;
	}
	html #page-menu-wrapper #mobile-menu-button .hamburger {
		position: absolute;
		right: 0;
		top: 4px;
	}
	html #page-menu-wrapper #mobile-menu-button .hamburger span {
		position: absolute;
		display: block;
		height: 3px;
		width: 20px;
		right: 0;
		background: #ffffff;
		-webkit-transition: all 1000ms;
		transition: all 1000ms;
	}
	html #page-menu-wrapper #mobile-menu-button .hamburger .first {
		top: 0px;	
	}
	html #page-menu-wrapper #mobile-menu-button .hamburger .second {
		top: 6px;	
	}
	html #page-menu-wrapper #mobile-menu-button .hamburger .third {
		top: 12px;
	}
#mobile-menu-close {
	padding: 10px 0;
	color: #ffffff;
	background: #696c7f url(../images/MainMenuBackground.png) 0 -2px repeat-x;
	background: -moz-linear-gradient(top, #686c7e 13%, #818391 41%, #686c7e 69%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#686c7e), color-stop(41%,#818391), color-stop(69%,#686c7e));
	background: -webkit-linear-gradient(top, #686c7e 13%,#818391 41%,#686c7e 69%);
	background: -o-linear-gradient(top, #686c7e 13%,#818391 41%,#686c7e 69%);
	background: -ms-linear-gradient(top, #686c7e 13%,#818391 41%,#686c7e 69%);
	background: linear-gradient(to bottom, #686c7e 13%,#818391 41%,#686c7e 69%);
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s;
}
#mobile-navigation {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	background: #ffffff;
	z-index: 900000;
}
#mobile-menu-header {
	background: #3d3d3d;
}
#mobile-navigation #dynamic-mobile-menu {
	position: absolute;
	top: 44px;
	left: 0;
	bottom: 0;
	z-index: 1;
	overflow: auto;
	width: 100%;
	bottom: 0;
	background: #ffffff;
	height: 550px;
}
#dynamic-mobile-menu {
	position: relative;
	left: 0px;
	right: auto;
	display: block;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#dynamic-mobile-menu > ul {
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
	text-align: left;
	display: block !important;
}
#dynamic-mobile-menu > ul > li > ul {
	display: none;
}
#dynamic-mobile-menu > ul > li {
	display: block;
	padding: 0;
	background: #ffffff;
	border-bottom: 1px solid #707070;
}
#dynamic-mobile-menu > ul > li > a {
	text-transform: uppercase;
	display: block;
	padding: 16px 0px 16px 15px;
	color: #3d3d3d;
	text-decoration: none;
	font-size: 16px;
	cursor: pointer;
	position: relative;
	border: none;
}
#dynamic-mobile-menu > ul > li.backLink {
	background: #666666;
}
#dynamic-mobile-menu > ul > li.backLink > a {
	padding-left: 40px;
	color: #ffffff;
}
#dynamic-mobile-menu > ul > li.backLink > a:after, 
#dynamic-mobile-menu > ul > li.hasMenu > a:after {
	content: " ";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 18px;
	background: url(../images/arrow-icon.svg) 0 0 no-repeat;
	background-size: 20px;
}
#dynamic-mobile-menu > ul > li.backLink > a:after {
	left: 5px;
	background-image: url(../images/arrow-icon-light.svg);
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
#dynamic-mobile-menu ul > li.hasMenu > a:after {
	right: 5px;
}

#dynamic-mobile-menu > ul > li.current,
#dynamic-mobile-menu > ul > li.highlight,
#dynamic-mobile-menu > ul > li:active, 
#dynamic-mobile-menu > ul > li:focus {
	background-color: #dddddd;
}

#BetterNavigator.collapsed {
	opacity: 0.25;
}
#BetterNavigator.collapsed:hover {
	opacity: 1;
}


@media only screen and (min-width : 720px){
	html body.scrolledPage {
		padding-top: 115px !important;
	}
	html body.scrolledPage #page-header-menu {
		position: fixed;
		background-image: url(../images/Background.jpg), url(../images/BackgroundBase.jpg);
		background-position: center top, center top;
		background-repeat: no-repeat, repeat-x;
	}
	html body.scrolledPage #page-header-wrapper h1 a img {
		max-width: 300px; position: relativive; top: 4px;
	}
}
@media only screen and (max-width : 1080px) and (min-width : 720px){
	html body.scrolledPage #page-header-wrapper h1 {
		left: -20px;
	}
}

@media only screen and (max-width : 640px){
	html #page-menu .main-menu > ul, 
	html #page-menu .sub-menu {
		display: none !important;
	}
	html #page-menu #mobile-menu-button {
		display: block;
	}
}
@media only screen and (max-width : 720px){
	html #page-header-wrapper {
		padding: 0 !important;
	}
	html #page-header-wrapper h1 {
		left: 0;
		padding-top: 20px;
	}
	html #page-header-wrapper .contactDetails {
		font-size: 14px;
	}
	html #page-body.has-sidebar #page-content {
		width: auto; 
		float: none;
	}
	html #page-body.has-sidebar #page-content-wrapper {
		padding-right: 0px;
	}
	html #page-sidebar {
		width: auto; 
		float: none;
		left: 0;
		max-width: 320px;
	}
	html #page-footer-wrapper .footer-left {
		float: none;
		width: auto;
	}
	html #page-footer-wrapper .contact {
		float: none;
		width: auto;
		margin: 20px 0 0 0;
	}
	#page-content h1 {
		line-height: 1.2;
	}
	
	html.Product .typography aside.product-images {
		margin-left: 1em;
	}
}
@media only screen and (max-width : 480px) {
	form input.text, form input.mathspamprotector, form textarea, form select {
		width: 100%;
		font-size: 16px;
	}
	html #page-header-wrapper h1 {
		padding-top: 35px;
	}
}


/** PRINT OVERRIDES **/
@media print {
	html #page-header, html #page-footer, html #page-banner, html #page-sidebar,
	html #SilverStripeNavigator, html #SilverStripeNavigatorMessage,
	html nav.main-menu, html nav.breadcrumbs {
		display: none !important;
	}
	html #page-body, html #page-body #page-body-wrapper, 
	html #page-body #page-content, html #page-body #page-content #page-content-wrapper,
	html #page-body.has-sidebar #page-content, html #page-body.has-sidebar #page-content #page-content-wrapper {
		width: 100% !important; margin: 0 !important; padding: 0 !important;
	}
	html, html * {
		background: none !important;
	}
}