/*
Theme Name: Seja Design Framework V2.15
Description: Customise styles - This is where you style your theme. 
This style sheet should load last (although some plugins may load later), so anything 
written here should be final, without the need for the !important call. 
*/

body {	
	background:#6e1714;
	font-size:18px;
	/* set a background colour here if required */
}

/* FONTS
-------------------------------------------------------------- */
/*
/* header fonts */
h1,h2,h3,#navigation ul a{font-family: 'Dosis', sans-serif;}
h4,h5,h6,th,dt, #navigation ul ul a{font-family: 'Open Sans', sans-serif;}
/*content fonts */
.header-contact a{font-family: 'Michroma', sans-serif;}
p,ol,ul,dd,pre,td,input,textarea,address,form,#copyright-wrapper{font-family: 'Open Sans', sans-serif;}
pre,#respond .form-allowed-tags{font-family: "Courier 10 Pitch", Courier, monospace;}
code,kbd {font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}

/* FONT COLOURS
-------------------------------------------------------------- */

/*Highlight colours */
h1,h2,h3,h4,h5,h6,legend,th,address,.entry-title,.entry-title a:link,.entry-title a:visited,h3#comments-title,h3#reply-title,#wp-calendar caption,.widget-title {color:#01688f;}
.highlight {color:#8f0e01;} 
.alt-colour {color:#16909e;}
/* Link colours  */
a:link {color: #4b2020;}
a:visited {color: #4b2020;}
.header-contact a:link,.header-contact a:visited{color:#fff;}
/*menu colours */
#seja-framework-menu a{color:#fff;}
#seja-framework-menu ul a {color:#fff;}
#seja-framework-menu li:hover > a {color: #f39146;}
#seja-framework-menu ul :hover > a {color:#f39146;}
/* current menu page colour */
/*default text colour */
p,ol,ul,dd,pre,td,.comment-body p,.custom-block {color:#2f4148;}
ins {color:#2f4148;}
/* light colour */
.entry-meta,.entry-meta a:link,.entry-meta a:visited,.entry-utility,.entry-utility a:link,.entry-utility a:visited,.navigation a:link,.navigation a:visited,p.logged-in-as,p.logged-in-as a:link,p.logged-in-as a:visited,p.form-allowed-tags,p.comment-meta,.comment-meta a:link,.comment-meta a:visited {color:#91a6ae;}
/* dark colour */
input,textarea,.category-title {color:#202b2f;}
/* link hover colours */
a:active,a:hover,.entry-title a:active,.entry-title a:hover,.entry-meta a:active,.entry-meta a:hover,.entry-utility a:active,.entry-utility a:hover,.navigation a:active,.navigation a:hover,#comments .comment-meta a:active,#comments .comment-meta a:hover,p.logged-in-as a:active,p.logged-in-as a:hover,.site-info a:active,.site-info a:hover,.copyright a:active,.copyright a:hover {color: #a52508;}
/*footer widgets*/
#footer-widget-area .widget-title {color:#fff}
#footer-widget-area p,#footer-widget-area ol,#footer-widget-area ul,#footer-widget-area dd,#footer-widget-area pre,#footer-widget-area td {color:#fff;}
#footer-widget-area a:link,#footer-widget-area a:visited {color:#fff;}
#footer-widget-area a:active,#footer-widget-area a:hover{color:#fff;}

/* BACKGROUND COLOURS
-------------------------------------------------------------- */

#header-shell {
	background:url(../images/headers/hwt-header-shell-bg.jpg) repeat;
}
#header {background:url(../images/headers/hwt-header-bg-large.jpg) no-repeat top center;}

#top-content-block,#content-shell,#alt-content-block,#content{background:#fff;}
#footer {
	background:url(../images/footer-bg-large.jpg) no-repeat top center; overflow:hidden;
}
@media(min-width:1920px){
	#footer{background-size:100% auto;}
}
@media(max-width:1200px){
	#footer{background:url(../images/footer-bg-medium.jpg)no-repeat top center;}
}
@media(max-width:600px){
	#footer{background:url(../images/footer-bg-small.jpg)no-repeat top center;}
}

/* HEADER
-------------------------------------------------------------- */ 

.no-bullet {} /* remove the bullet - this needs to move to a different location */
.header-contact { margin-left:20px;text-align:center;color:#cddee5;font-size:1.3em;} /* this is the wrapper for the header and will need to be calculated - therefore it should move to the header-styles file*/
.header-img{text-align:center;}
.header-img img{float:none;}

/* NAVIGATION 
-------------------------------------------------------------- */


#navigation{clear:both; text-align:center;} 

.header-menu {
	width:100%;
}
#navigation #seja-framework-menu {  
}
#navigation #seja-framework-menu li { 
	display:inline-block;
	float:none;
}
#navigation #seja-framework-menu a {
	padding:7px 20px 6px; 
	font-size:1.3em;
	font-weight:500;
}
#navigation #seja-framework-menu ul { 
	top: 45px; 
	background: #33120a;
	background: -moz-linear-gradient(top,  #33120a 0%, #591507 100%);
	background: -webkit-linear-gradient(top,  #33120a 0%,#591507 100%);
	background: linear-gradient(to bottom,  #33120a 0%,#591507 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33120a', endColorstr='#591507',GradientType=0 );
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#navigation #seja-framework-menu ul a {
	font-size:1em;
	text-align:left;
}
#navigation #seja-framework-menu ul li { 
	-moz-box-shadow: 0 1px 0 #33120A, 0 2px 0 #a14633;
	-webkit-box-shadow: 0 1px 0 #33120A, 0 2px 0 #a14633;
	box-shadow: 0 1px 0 #33120A, 0 2px 0 #a14633;
}
#navigation #seja-framework-menu ul a:hover { /* dropdown hover colour */
	background-color: #591507;
}
#navigation #seja-framework-menu ul li:first-child > a { /* not sure what this is */
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
/* navigation arrow colours */
#navigation #seja-framework-menu ul li:first-child > a::after {
	border-bottom-color: #f39146;
}
#navigation #seja-framework-menu ul ul li:first-child a:after{
	border-right-color: #f39146;
}
/*responsive menu */
#navigation nav select {
	border: 1px solid #000;
	background:url(../images/bar.svg) #f1f1f1 no-repeat 8px 16px;
	color:#333;
	/*** May need to add a height attribute and adjust the '16px' in the background above (chrome is displaying differently to firefox) */
}
#navigation nav select option::before,
#sidebar-navigation nav select option::before {
	font-family:'FontAwesome';
	font-size:0.4em;
	content: "\f1db";
	padding-right:12px;
	position:relative;
	top:-5px;
}
/* NOTE: to set colour of the navbar icon you will need to edit the bar.svg file in the images folder (or use bar-light.svg on dark themes) */

/* PAGE ELEMENTS
-------------------------------------------------------------- */

.separator {
	
}
.seja-link-div {
	background:#f1f1f1;
}
p {line-height:2rem;margin-bottom:20px;}/* for more compact designs use this - line-height:1.6em;margin-bottom:18px; */
.entry-title {
	font-size:2.2rem;
	font-weight:600;
}
.whats-on {
	border-top:1px dashed #ccc;
	margin-top:20px;
}
.menu-pdf-wrapper {
	text-align:right;
}
#comments {
	font-size:0.75rem;
}
#comments h3 {
	line-height:1rem;
	margin:0 0 10px 0;
}
.alignnone {
	max-width:100%;
	height:auto;
}
	
/* FORM
-------------------------------------------------------------- */
/* want larger form elements - wrap the form using .large-form  MAKE A NOTE OF THIS IN THE HELP PAGES*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
input[type="url"],
select,
textarea { 
	background: #fafafa;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
}
input[type="submit"],
a.button{
	border: 1px solid #176ea8;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#fff;
	text-transform:uppercase;
}
input[type="submit"],a.button,
.woocommerce #content input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce-page #content input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt	{
	background: #722310;
	background: -moz-linear-gradient(top,  #722310 0%, #962008 100%);
	background: -webkit-linear-gradient(top,  #722310 0%,#962008 100%);
	background: linear-gradient(to bottom,  #722310 0%,#962008 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#722310', endColorstr='#962008',GradientType=0 );
}
input[type="submit"]:hover,a.button:hover,
.woocommerce #content input.button.alt:hover,.woocommerce #respond input#submit.alt:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,.woocommerce-page #respond input#submit.alt:hover,.woocommerce-page a.button.alt:hover,.woocommerce-page button.button.alt:hover,.woocommerce-page input.button.alt:hover {
	background: #0ab5c2;
	background: -moz-linear-gradient(top,  #0ab5c2 0%, #16909e 100%);
	background: -webkit-linear-gradient(top,  #0ab5c2 0%,#16909e 100%);
	background: linear-gradient(to bottom,  #0ab5c2 0%,#16909e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ab5c2', endColorstr='#16909e',GradientType=0 );
}
.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt[disabled]:disabled, .woocommerce #respond input#submit.alt[disabled]:disabled:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt[disabled]:disabled, .woocommerce a.button.alt[disabled]:disabled:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt[disabled]:disabled, .woocommerce button.button.alt[disabled]:disabled:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt[disabled]:disabled, .woocommerce input.button.alt[disabled]:disabled:hover {
	background:#bdb7b8;
}
/* widget search submit button */
.widget_search input#searchsubmit {
	-webkit-border-radius: 0 15px 15px 0;
	-moz-border-radius:    0 15px 15px 0;
	border-radius:         0 15px 15px 0;
}
.membership-form input {
	margin-bottom:10px;
}
.ui-datepicker .ui-widget-header { /* add a background here if you're using the cf7 datepicker (jquery ui) */ }

/* FOOTER */
#footer-widget-area{
	width:1050px!important;
	max-width:100%;
}
.footer-logo,.footer-logo-first{float:left;position:relative;}
.footer-logo{padding-left:17px;}
.logo-tabtouch{margin:34px 0}
.logo-facebook,.logo-foxsport,.logo-bistro,.logo-wifi{margin:46px 0 47px;}
.logo-theguide{}
/* WOOCOMMERCE
-------------------------------------------------------------- */
/* pricing colour here */
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color:#8fae1b;}
/* GREEN colour here */
.woocommerce-message::before {
	color: #8fae1b;}
.woocommerce-message {
    border-top-color: #8fae1b;
}
/* RED colour here */
.woocommerce a.remove {
	color:#f00 !important;
}
.woocommerce a.remove:hover {
    background: #ff0000;
}

/* PAGINATION AND CALENDAR
-------------------------------------------------------------- */
.pagination span, .pagination a {
	background: #fff; /* background colour of inactive pagination blocks */
}
.pagination .current,
.pagination a:hover{
	color:#fff; /* font colour of current page block */
	/* background colour selected in Admin > Seja Template > Theme Settings > Theme Content */
}
.pagination a:hover{
	background: #f90; /* match both with the theme hover colour */
	border:1px solid #f90;
}
#wp-calendar td{background:#eaf3f6;border:1px solid #fff;}
/* MOSAIC
-------------------------------------------------------------- */
.mosaic-wrapper{
	/* to make responsive (but causes issues with overlay postion)width:calc( 33% - 25px); */
}
.mosaic-block {
	width:400px;
	/*fixed size */
	height:250px;
	/* responsive size
	padding-bottom:62.5%; /*maintains ratio */
}
.mosaic-block h3,
.mosaic-block p,
.mosaic-block a {
	color:#ffffff
}
.mosaic-backdrop {
	background:#111;
}
.mosaic-overlay {
	background:#fff;
}
/* WEATHER ICON */

.seja-weather-graph {
	width:45px; 
}
.seja-weather-output p {
	color:#967a50;
	margin-bottom:0;
}
.seja-weather-location h2 {
	font-size:0.9rem;
	font-weight:300;
	text-align:center;
}

/* PARALLAX
-------------------------------------------------------------- 

.site-header {
    background-color: #fafafa;
}
.parallax .site-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}
.parallax .site-title a {
    color: #ffffff;
}
body.has-header-image .site-description, 
body.has-header-video .site-description {
    color: #ffffff;
}
.has-header-image #navigation{
	width:900px;  /* let's make this dynamic, based on the logo image width */   /*
}
.has-header-image #content-shell {
	background:#fff;
}
.seja-parallax-scroll-icon {
	fill:#e6e7e8; 
}*/