/*
Theme Name: Seja Framework Version 3.0
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. 
*/

/* DEV NOTE : There are instructional comments along the way to help you in building your theme, feel free to delete these and any empty rules upon completion (although it's best to keep the description comments for ease of future editing) */

body {	
	background:url(../../images/framework-bg.png) no-repeat top center; /* set a full page background colour here if required */
	font-size:20px; /* changing this will affect font sizes and line hights, form sizes, and (importantly) the drop-down gap in the primary navigation */
}

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

/* add in your custom font calls here */

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 */
.highlight {color:#f00;}
.alt-colour {color:#00f;}
/*menu colours */
#seja-framework-menu a{color:#fff;}
#seja-framework-menu ul a {color:#6ff;}
#seja-framework-menu li:hover > a {color: #ff0;}
#seja-framework-menu ul :hover > a {color:#ff0;}
/* 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;}
/* 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,.archive h1.page-title {color:#900;}
#wp-calendar caption,#wp-calendar tfoot a{color:#fff;}
/*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;}


/* MAIN BLOCKS - Structure and Colours
-------------------------------------------------------------- */

#header-shell {background:rgba(0,0,0,0.15);}
#header {} /* delete any elements that are not being used */
#top-content-block {}
#content-shell {}
#alt-content-block {}
#scroll-page{}
#content {background:#fff;}
#footer {background:#222;}
#colophon {background:#333;}

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

.no-bullet {} /* remove the bullet  */
.header-contact { margin-left:20px; float:left; width:500px; max-width:calc(100% - 20px)} /* this is the wrapper for the header contact widget - 500px is recommended but adjust as required*/
.header-contact h3.widget-title {}


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

/* navigation styles have a lot of options that can be removed to clean it up. It is not unusual to delete practically ALL of these style rules */

#navigation{clear:both;} 
	/* to place navigation to the side of the logo, remove the clear and set (float:left) */ 
	/*to centre navigation, set (text-aligh:center) and modify #navigation #seja-framework-navigation li (below) */

.header-menu {
	width:100%;
	/* add float right if you want a right align navigation (NOTE: Right float menu is not suitable if you're going to add drop down elements (especially if the drop-downs are on the right-hand side) */
}
#navigation #seja-framework-menu {  /* background colours for the menu bar */
	border: 1px solid #222;
	background-color: #111;
	background-image: -moz-linear-gradient(#444, #111); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));	
	background-image: -webkit-linear-gradient(#444, #111);	
	background-image: -o-linear-gradient(#444, #111);
	background-image: -ms-linear-gradient(#444, #111);
	background-image: linear-gradient(#444, #111);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#navigation #seja-framework-menu li { /* borders between menu items */ /* to centre, set (display:inline-block;float:none;) */
	border-right: 1px solid #222;
	-moz-box-shadow: 1px 0 0 #444;
	-webkit-box-shadow: 1px 0 0 #444;
	box-shadow: 1px 0 0 #444;
}
#navigation #seja-framework-menu a {
	/* text-transform: uppercase; */
	padding:12px 20px;
	text-shadow: 0 1px 0 #000;
	font-size:1rem;
}
#navigation #seja-framework-menu ul a {} /* dropdown font size in here if different */
#navigation #seja-framework-menu ul { /* dropdown background */
	top: 45px; /* change this to adjust the drop-down's position */
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);    
	background: -o-linear-gradient(#444, #111);	
	background: -ms-linear-gradient(#444, #111);	
	background: linear-gradient(#444, #111);
	-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
	-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#navigation #seja-framework-menu ul {
	/* Constrain the dropdown by adding a size here (not recommended) */
}
#navigation #seja-framework-menu ul li { /* dropdown borders */
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#navigation #seja-framework-menu ul a:hover { /* dropdown hover colour */
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec,  #0186ba);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
}
#navigation #seja-framework-menu ul li:first-child > a { /* curved top of first drop-down hover */
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
/* navigation arrow colours */ /*Instructional - these are the arrows that appear in the navigation child when you hover over the parent */
#navigation #seja-framework-menu ul li:first-child > a::after{border-bottom-color:#000;} /* Down arrow colour */		
#navigation #seja-framework-menu ul ul li:first-child a:after{border-right-color:#000;} /* Left arrow colour */
#navigation #seja-framework-menu ul li:first-child a:hover:after{border-bottom-color:#f00;} /* Down arrow hover colour */
#navigation #seja-framework-menu ul ul li:first-child a:hover:after{border-right-color:#f00} /* 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:'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) */

/* SCROLL PAGES
-------------------------------------------------------------- */

.scroll-page-wrapper.inner-wrapper{}
/* styles are examples, add and delete as required */
.scroll-block{padding:20px 0;} 
.scroll-block-1 {background:#FFF}
.scroll-block-2 {background:#FF9}
.scroll-block-3 {background:url(../../images/macarons.jpg) no-repeat fixed; background-size:100% auto;}
.scroll-block-4 {background:#09F}


/* CONTENT - GENERAL
-------------------------------------------------------------- */

.separator {}
.seja-link-div {background:#f1f1f1;}
p {line-height:2rem;margin-bottom:30px;}/* for more compact designs use this - line-height:1.6em;margin-bottom:18px; */


/* CONTENT - 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: #f8f8f8;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
	/* inner shadowing, if you must! 
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
	-moz-box-shadow:    inset 0 0 5px rgba(0,0,0,0.3);
	box-shadow:         inset 0 0 5px rgba(0,0,0,0.3);
	*/
}
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;
}
.calendar_wrap, /* use the same background as the button for the calendar or move it and give it new attributes */
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	{
/* Gradients can be generated here - http://www.colorzilla.com/gradient-editor/ */
background: rgb(71,110,229);
background: -moz-linear-gradient(top,  rgb(71,110,229) 0%, rgb(80,143,224) 100%);
background: -webkit-linear-gradient(top,  rgb(71,110,229) 0%,rgb(80,143,224) 100%);
background: linear-gradient(to bottom,  rgb(71,110,229) 0%,rgb(80,143,224) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#476ee5', endColorstr='#508fe0',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: rgb(237,119,52);
background: -moz-linear-gradient(top,  rgb(237,119,52) 0%, rgb(242,141,87) 100%);
background: -webkit-linear-gradient(top,  rgb(237,119,52) 0%,rgb(242,141,87) 100%);
background: linear-gradient(to bottom,  rgb(237,119,52) 0%,rgb(242,141,87) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed7734', endColorstr='#f28d57',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;
}
.ui-datepicker-div{font-size:0.75em;} /* if you've changed the font size in body{}, you may want to adjust this */
.ui-datepicker .ui-widget-header { /* add a background here if you're using the cf7 datepicker (jquery ui) */ }

/* FOOTER
-------------------------------------------------------------- */

#footer {font-size:0.8em;}

/* 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;
}
/* 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;
}
/* 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 */
}
#wp-calendar tbody td{background:#f5f5f5;border:1px solid #fff;}
#wp-calendar tbody a{background: #f00;color:#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; 
}