/******************************/
/* general stuff **************/
/******************************/

html,  body,  div,  span,  object,  iframe, blockquote, pre, abbr,
address, cite, code, del, dfn, em, ins, kbd, q, samp, small, /* strong, */ sub, sup, var,
b, i, dl, dt, dd, fieldset, form, label, legend, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, 
section, summary, time, mark, audio, video, input, select, textarea {
	font-family: Montserrat, Open Sans, Arial, helvetica, sans-serif;
}

/*******************************************************************************************************************************************************/
/************** general styles *************************************************************************************************************************/
/*******************************************************************************************************************************************************/

h1 {color: #DE3541;}
h2 {color: #DE3541;}
h3 {color: #DE3541;}

.highlightColour {color: #DE3541;}

/*******************************************************************************************************************************************************/
/************** SALES PAGE STYLES **********************************************************************************************************************/
/*******************************************************************************************************************************************************/

p.productPriceLarge {
	font-size: 50px;
}

li.yes {background: url('../../../App_Themes/ClientPortal/Images/spacers_etc/if_tick_382552.png');}
li.no {background: url('../../../App_Themes/ClientPortal/Images/spacers_etc/if_cross_309090.png');}
li.triangle {background: url('../../../App_Themes/ClientPortal/Images/spacers_etc/if_warning_380689.png');}

li.yes, li.no, li.triangle {
	padding-left: 25px;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: left top;
	padding-bottom: 4px;
	margin-bottom: 4px;
}

/*******************************************************************************************************************************************************/
/************** MAIN LAYOUT DIV STYLES *****************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.outerContaner {
	border-top: 10px solid #DE3541;
}

div.container-title-banner {
	background-color: #DE3541;
}

div.containerInsideTwo, div.containerInsideTwoMobileNav, div.containerInsideTwoTitleBanner, div.containerInsideTwoBanner {
	border-left: 0px;
	border-right: 0px;
}

div.containerInsideTwoTitleBanner, div.containerInsideTwoBanner {
	border-top: 0px;
}

div.container-header /* div.containerInside div.containerInsideTwo */ {
	box-shadow: 0 8px 8px -8px rgba(55,71,67,.2);
}

/* Amended to deal with square logo */
div.header-main {height: 140px;}
div.header-main-right {padding-top: 90px;}

div.containerInsideTwoTitleBanner {
	background-color: inherit;
	border-bottom: 0px;
	border-top: 0px;
}

div.titleBanner {
	color: #ffffff;
	font-weight: bold;
	line-height: 50px;
	padding: 0px;
}

div.container-footer div.containerInside div.containerInsideTwo {
	background-color: #ffffff;
}

div.container-footer {
	border-top: 2px solid #cccccc;
}

div.container-company div.containerInside div.containerInsideTwo {
	background-color: #ffffff;
}

div.footer-main div.twoColumnContentFooter h2, div.footer-main div.twoColumnContentFooter p {color: #58585b;}

div.footer-main div.twoColumnContentFooter p a:link,
div.footer-main div.twoColumnContentFooter p a:visited,
div.footer-main div.twoColumnContentFooter p a:active,
div.footer-main div.twoColumnContentFooter p a:hover {
	color: #58585b;
	text-decoration: underline;
}

div.footer-company {
	color: #58585b;
}

div.footer-company p a:link, div.footer-company p a:visited,
div.footer-company p a:active, div.footer-company p a:hover {
	color: #58585b;
	text-decoration: underline;
}

div.header-main-left img {width: 250px;}

/*******************************************************************************************************************************************************/
/************** main nav STYLES ************************************************************************************************************************/
/*******************************************************************************************************************************************************/

li.topNavigationOn a {background-color: #DE3541;}

li.topNavigationOn a:link, li.topNavigationOn a:visited,
li.topNavigationOn a:active, li.topNavigationOn a:hover {
	color: #ffffff;
}

li.topNavigationOn a, li.topNavigationOff a {
   -webkit-border-radius: 0px; /* For older versions of Safari and Chrome */
    -moz-border-radius: 0px; /* For older versions of Firefox */
	border-radius: 0px;
	background-color: #ffffff;
}

li.topNavigationOn a:link {COLOR: #DE3541; text-decoration: none; background-color: #ffffff;}
li.topNavigationOn a:visited {COLOR: #DE3541; text-decoration: none; background-color: #ffffff;}
li.topNavigationOn a:active {COLOR: #DE3541; text-decoration: none; background-color: #ffffff;}
li.topNavigationOn a:hover {COLOR: #DE3541; text-decoration: none; background-color: #ffffff;}

li.topNavigationOff a:link {color:#8b8680; text-decoration: none; background-color: #ffffff;}
li.topNavigationOff a:visited {color:#8b8680; text-decoration: none; background-color: #ffffff;}
li.topNavigationOff a:active {color:#DE3541; text-decoration: none; background-color: #ffffff;} 
li.topNavigationOff a:hover {color:#DE3541; text-decoration: none; background-color: #ffffff;}

/******************************/
/* inputs / buttons ***********/
/******************************/

input, select, textarea,
div.input_halfsize_fake, div.input_popupLong_fake {
	-webkit-border-radius: 3px; /* For older versions of Safari and Chrome */
    -moz-border-radius: 3px; /* For older versions of Firefox */
	border-radius: 3px;
	border: 2px solid #DE3541;
}				

input:focus, select:focus, textarea:focus {
	outline: none; /* Removed default border so set own */
	border: 2px solid #58585b;
}

input[type="radio"]:focus, input[type="checkbox"]:focus {outline: solid;} /* Useful when using tab key */

.input_halfsize_mandatory, .select_halfsize_mandatory, 
.input_dd_mandatory, .input_mm_mandatory, .input_yyyy_mandatory {
	background-color: #ffffff;
}

div.buttonStandard a, .input_button_main, .input_button_highlight {
	background-color: #DE3541;
}

div.buttonStandard a, div.buttonSecondary a, div.buttonHighlight a, div.buttonWarning a, div.buttonModalClose a,
.input_button_main, .input_button_secondary, .input_button_highlight {
	-webkit-border-radius: 5px; /* For older versions of Safari and Chrome */
    -moz-border-radius: 5px; /* For older versions of Firefox */
	border-radius: 5px;
	border: 2px solid #DE3541;
}

div.buttonStandard a:link, div.buttonStandard a:visited, .input_button_main {color: #ffffff;}

div.buttonStandard a:active, div.buttonStandard a:hover, div.buttonStandard a:focus
div.buttonHighlight a:active, div.buttonHighlight a:hover, div.buttonHighlight a:focus
.input_button_main:active, .input_button_main:hover, .input_button_main:focus, 
.input_button_highlight:active, .input_button_highlight:hover, .input_button_highlight:focus { 
	outline: none; /* Removed default border so set own */
	color: #DE3541;
	background-color: #ffffff;
	border: 2px solid #DE3541;
}

div.buttonSecondary a, .input_button_secondary {background-color: #ffffff;}

div.buttonSecondary a:active, div.buttonSecondary a:hover, div.buttonSecondary a:focus
.input_button_secondary:hover, .input_button_secondary:focus {
	outline: none; /* Removed default border so set own */
	background-color: #e1e1e1;
	border: 2px solid #DE3541;
}

div.buttonHighlight a:active div.smallButtonText,
div.buttonHighlight a:hover div.smallButtonText,
div.buttonHighlight a:focus div.smallButtonText {
	color: #DE3541;
	background-color: #ffffff;
}

/*******************************************************************************************************************************************************/
/************** Highlight box **************************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.productBoxHighlight-top, div.productBoxSelected-top {border: 4px solid #DE3541;}
div.productBoxHighlight-bottom, div.productBoxSelected-bottom {border: 4px solid #DE3541;}

div.productBox-top, div.productBoxHighlight-top, div.productBoxSelected-top {
	/* background-color: #be242c; */
    background-color: #DE3541;
}
div.productHighlightText { /* This is the selected / popular panel */
    background-color: #DE3541;
    border: 4px solid #DE3541;
}

div.box {
	-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
	border-radius: 0px;
    background-color: #e1e1e1; 
    border: 0px;
	
}

/*******************************************************************************************************************************************************/
/************** Screen specific stuff ******************************************************************************************************************/
/*******************************************************************************************************************************************************/

/* Anything less than 1019px (Medium size) */
@media only screen and (max-width: 1019px) 
{	

}

/* Anything less than 767px (Small size) */
@media only screen and (max-width: 767px)
{	

}

/* Smaller than iPhone 5s width */
@media only screen and (max-width: 567px)
{	

}

/* Anything less than 399px (Tiny size) */
@media only screen and (max-width: 399px)
{	
	/************** header stuff ************************************************/

	div.header-main-left {width: 100%;}

	div.header-main-right {
		float: left;
		width: 100%;
		padding-top: 10px;
	}
}