/*
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:#fff;
	font-size:20px;
	/* set a background colour here if required */
}


/* FONTS
-------------------------------------------------------------- */

/* header fonts */
h1,h2,h3,h4,h5,h6,th,dt{font-family: 'Open Sans', sans-serif;}
.shop-title h2{font-family: 'BenchNine', sans-serif;}

/*content fonts */
p,ol,ul,dd,pre,td,input,textarea,address,form,#nav-above,#nav-below,.entry-utility,.pagination,.shop-cta,#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:#e96608;}

.highlight, .lead-in h2 {color:#1963B1;}

.alt-colour {color:#666;}

/* Link colours  */
a:link {color: #00387d;}

a:visited {color: #00387d;}

/*menu colours */
#seja-framework-menu a{color:#ec650b;}

#seja-framework-menu ul a {color:#fff;}

#seja-framework-menu li:hover > a {color: #f98d45;}

#seja-framework-menu ul :hover > a {color:#f98d45;}

/* current menu page colour */
#seja-framework-menu ul li.current_page_item > a,#seja-framework-menu ul li.current-menu-ancestor > a,#seja-framework-menu ul li.current-menu-item > a,#seja-framework-menu ul li.current-menu-parent > a {color: #fff;}

/*default text colour */
p,ol,ul,dd,pre,td,.comment-body p,.custom-block {color:#444;}

ins {color:#444;}

/* 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:#999;}

/* dark colour */
input,textarea,.category-title {color:#900;}

/* 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: #ff8200;}

/*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:#1b3379;
}

#header {}

#top-content-block {}

#content-shell {}

#alt-content-block {}

#content {
	background:#fff;
}

#footer {
	background:#5f5f5f;
}

#colophon {
	
}

#wp-calendar td {}


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

.no-bullet {}
 /* remove the bullet - this needs to move to a different location */
.header-contact { margin-left:20px; float:left; width:500px;}
 /* this is the wrapper for the header and will need to be calculated - therefore it should move to the header-styles file*/
.header-contact h3.widget-title {}


.homepage-logo{
	position:relative;
	margin-left:150px;
}

.homepage-logo slider {
	position:relative;
	z-index:1;
}

.logo-overlay{
	position:absolute;
	left:-150px;
	top:0;
	z-index:10;
}

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


#navigation{clear:both; position:relative;}
 /* to place this to the side of the logo, remove the clear and set float:left */
#navigation .header-search {
	position:absolute;
	top:5px;
	right:15px;
}
@media(max-width:800px) {
	#navigation .header-search {
		top:-40px;
	}
}

.header-menu {
	width:100%;
	/* add float right if you want a right justified menu (NOTE: Right float menu is not suitable if you're going to add drop down elements (especially if they are at the right hand side) */
}

#navigation #seja-framework-menu {  /* background colours for the menu bar */
}

#navigation #seja-framework-menu li { /* borders between menu items */
}

#navigation #seja-framework-menu a {
	/* text-transform: uppercase; */
	font-size:18px;
}

#navigation #seja-framework-menu ul { /* dropdown background */
	top: 45px; /* change this to adjust the drop-down's position */
	background: #1b3379;
	background: -moz-linear-gradient(top,  #1b3379 0%, #1841b9 100%);
	background: -webkit-linear-gradient(top,  #1b3379 0%,#1841b9 100%);
	background: linear-gradient(to bottom,  #1b3379 0%,#1841b9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b3379', endColorstr='#1841b9',GradientType=0 );
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#navigation #seja-framework-menu ul {
	
}

#navigation #seja-framework-menu ul li { /* dropdown borders */
	-moz-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	-webkit-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	
}

#navigation #seja-framework-menu ul li a{
	font-size:0.85rem;
}

#navigation #seja-framework-menu ul a:hover { /* dropdown hover colour */
}

#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: #			DOWN ARROW COLOUR
}

#navigation #seja-framework-menu ul li:first-child > a:hover::after {
	border-bottom-color: #			DOWN ARROW HOVER COLOUR
}

#navigation #seja-framework-menu ul ul li:first-child a:after{
	border-right-color: #			LEFT ARROW COLOUR
}

#navigation #seja-framework-menu ul ul li:first-child a:hover:after {
	border-right-color: # 			LEFT ARROW HOVER COLOUR
}

*/
/*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:'Font Awesome 5 Free', 'Font Awesome 5 Pro';
	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:1.8rem;margin-bottom:36px;}
/* for more compact designs use this - line-height:1.6em;margin-bottom:18px; */
h1,h2,h3{font-weight:300;}
/*custom styles */
.header-search {position:relative;}
.shop-title{margin-top:50px;float:left;}
.shop-title h2{color:#fff;text-transform:uppercase;padding-left:40px;font-size:4.5rem;letter-spacing:2px;}
.shop-title h2 .alt-colour{color:#e96608;}
.entry-title {padding:4px 15px 0 60px;background:url(../images/craigs-icon.svg) no-repeat;background-size:50px auto;}
.product_title.entry-title {background:none;}
#top-content-block + #content{clear:both;}
.lead-in {padding:5px 2%;float:left;width:45%}
.lead-in h2 {margin-bottom:8px;}
/*home page*/
.shop-cta{background: -moz-linear-gradient(top,  rgba(243,247,255,0) 0%, rgba(243,247,255,1) 75%, rgba(243,247,255,1) 100%);background: -webkit-linear-gradient(top,  rgba(243,247,255,0) 0%,rgba(243,247,255,1) 75%,rgba(243,247,255,1) 100%);background: linear-gradient(to bottom,  rgba(243,247,255,0) 0%,rgba(243,247,255,1) 75%,rgba(243,247,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3f7ff', endColorstr='#f3f7ff',GradientType=0 );padding:10px 2%;-webkit-border-radius: 0 0 15px 15px;-moz-border-radius:0 0 15px 15px;border-radius:0 0 15px 15px;}
.shop-cta a.cta {font-size: 1.75rem;color: #00387d;background: #c4d3f7;display: block;text-align: center;text-decoration: none;padding: 10px;font-weight: 400;margin: 0 0 10px;}
.shop-cta a.cta:hover {background:#ec650b;color:#fff;}
.shop-cta ul.products li {background:#fff;}
#about-us{margin:0 2% 20px 0;}
#exclusive-range {margin:0 0 2%;}
.home #top-content-block {background:#405dad;}
.home #top-content-block h2 {color:#fff;text-shadow:0px -1px 1px #222;}
.home #top-content-block p {color:#e3e9fa;}
#catch-of-the-week h2 {padding-left:45px;background:url(../images/catch-of-the-week-shadow.svg) no-repeat;background-size:40px auto;}
#youtube h2 {padding-left:60px;background:url(../images/craigs-youtube-shadow.svg) no-repeat;background-size:50px auto;}
/*home page sidebar */
li.widget_newsletterwidget .widget-title,#craigs-fishing-reports h3.report-title {background:url(../images/craigs-fishing-report.svg) no-repeat bottom left;background-size:100px auto;font-size:1.9em;font-weight:300;padding:50px 0 30px 100px;}
#craigs-fishing-reports {background:#f3f7ff;-webkit-border-radius: 15px 15px 0 0;-moz-border-radius: 15px 15px 0 0;border-radius: 15px 15px 0 0;padding:0 5% 8px;}
#craigs-fishing-reports .report-content {font-size:0.8em;}
.fishing-report-teaser {border:1px solid #c4d3f7;padding:0 5%;}
.report-content h3{font-weight:400;font-size:1.5rem;margin:0 0 5px 0}
.fishing-report-teaser h3 a {text-decoration:none;}
.report-content p {line-height:1.5em;}
.report-request-form {border-top:1px solid #fff;background:#c4d3f7;padding:5px 10% 10px;-webkit-border-radius: 0 0 15px 15px;-moz-border-radius:0 0 15px 15px;border-radius:0 0 15px 15px;}
.report-request-form h3 {text-align:center;text-shadow:0px -1px 1px #fff;}
.report-request-form form p {margin-bottom:5px;}
/* blog page */
.widget_archive ul li a,.widget_product_categories ul li a {font-size:0.8em;border-bottom:1px solid #ccc;display:block;padding:5px 20px;}
.widget_archive ul li a{max-width:210px;}
/*contact */
.contact-page {font-size:1.5em;line-height:1.5em;color:#00387D;}
/*footer*/
.layout-type-tee #footer-widget-area { width:1000px;max-width:90%;}
.layout-type-tee #footer-widget-area img {padding:8px 35px;}
.layout-type-tee #second, .layout-type-tee #third {border-right:1px dotted #999;}
#footer .widget-title {font-weight:300}
#footer .widget_nav_menu a{    font-size: 0.8em;border-bottom: 1px dotted #999;}

/* FORM
-------------------------------------------------------------- */
/* want larger form elements - wrap the form using .large-form  */
input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="file"],input[type="url"],select,textarea {background: #f5f5f5;border: 1px solid #bbb;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type="submit"],a.button{border: 1px solid #ec650b;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color:#fff;text-transform:uppercase;text-decoration:none;}
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:#ec650b;}
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:#bdb7b8;}
.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:#b4b4b4;}
/* 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;}
.ui-datepicker .ui-widget-header { /* add a background here if you're using the cf7 datepicker (jquery ui) */ }
/* menubar form */
.header-search .screen-reader-text {display:none;}
.header-search input#s {font-size:0.8rem;}
.header-search input[type="submit"]{font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro';content:"\f002";font-weight:900;font-size:16px;padding:5px;background:none;color:#ec650b;position:absolute;top:3px;right:4px;}
/* 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;}
.woocommerce ul.products{margin:0;}
/* slideout sidebar */
.two-fixed .col2.slideout{width:550px;background:#f5f5f5;-webkit-border-radius:0 15px 15px 0;-moz-border-radius:0 15px 15px 0;border-radius:0 15px 15px 0;-moz-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;-webkit-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;box-shadow: 0 1px 0 #1d47c1, 0 3px 0 #061952;}
.two-fixed .col2.slideout{left: calc(100% - 75px);}
ul.products li.has-padding{-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);box-shadow: 2px 2px 4px rgba(0,0,0,0.3);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;font-size:0.8em;}
h2.woocommerce-loop-category__title mark.count{font-size:0.75em;background:none;font-style:italic;color:#1b3379;}
/* 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:#f5f5f5;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;}
/* styles from old template TEMP*/
i.widget_newsletterwidget {
border:1px solid #CCC;
background:#F4F4F4;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
padding:10px 10px 0;
}

@media( min-width:801px) {.smallscreen {display:none;}}
@media( max-width:800px) {.largescreen {display:none;}}