/*  
Theme Name: Saffron Walden Scouts
Theme URI: http://www.www.saffronwaldenscouts.org.uk
Description: The Saffron Walden Scouts theme has been designed for the use of the Saffron Walden Scout District. v2.3 - updated functions.php to remove specific menus at startup. Subsequent trial edits to include print.css and associated header.php mod to add script.
Version: 2.3h
Author: Saffron Walden Scouts
Author URI: http://www.saffronwaldenscouts.org.uk

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/

/* HTML Elements */
* {
	margin:0;
	padding:0;
}

/* Printing classes */
.none,
.print-only {
	display: none;
}
	
.noPrint {
	display: block;
}

/* Hide reCAPTCHA v3 Badge */
.grecaptcha-badge {
	visibility: hidden;
}


body {
	font: 100% Nunito Sans, Arial;
	color: #333;
	max-width: 2500px;
}

p {	
	margin: 15px 0;
}

a:link, a:visited {
	color: rgb(132,164,11);
	text-decoration:none;
	font-weight:bold;
}

a:hover, a:active {
	color: rgb(237,119,3);
	text-decoration:none;
	font-weight:bold;
}

a img {
	border:0;
}

code {
	font: 1.0em 'Courier New', Courier, Fixed;
	background:#ececec;
}	

acronym, abbr, span.caps {	
	font-size: 0.9em;
	letter-spacing: .07em;
	cursor: help;
}			

acronym, abbr {
	border-bottom: 1px dashed #999;
}

blockquote {
	padding: 10px 10px 0 10px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background: #eee;
	font:1.0em Arial;
	line-height:1.5em;
	margin:10px 0px;
}

select {
	width: 130px;
}	


/* Structure */
#head {
	min-height:1px;		/* Needed to keep div open (e.g. for Brandcolour background) */
	margin:0px auto;
	padding:10px;
	font-size:0.7em;
}

#page {
	/*width:95%;*/
	/*min-width:600px;*/
	max-width: 100%;
	margin:0px auto;
	padding:10px;
	padding-bottom:0px;
	background:#fff;	/* Standard white background */
	font-size:0.7em;
}

#searchform {
	float:right;
	text-align:right;
	padding-top:8px;
	margin-right:10px;
}


/* Navigation Bar */
#navbar {
	display:block;
	clear:left;
	margin:0 auto;
	padding-left:10px;
	text-transform:none;
	font:1.0em Verdana, Helvetica, Arial;
}

/* Navigation MENU - displays menu horizontally */
.menu-item {
	float:left;
	display:block;
}

.menu-item ul {
	list-style: none;
	padding: 0px;
}

.menu-item li {
	float:left;
	list-style:none;
	cursor: pointer;
	display:block;
	border-right:0px solid #333;
}

.menu-item li:hover {
	color:rgb(132,164,11);
}

.menu-item a, .menu-item a:visited {
	margin: 0px;
	padding:10px 16px;
	font-weight:bold;
	color:#fff;
	display:block;
}

.menu-item a:hover {
	text-decoration:none;
	font-weight:strong;
	color:#000;	/*rgb(132,164,11);*/
	display:block;
}

/* Dropdown Menus */		
.menu-item li {
	float: left;
	margin: 0px;
	padding: 0px;
}
	
.menu-item > li li {
/* Submenu list items */
	float: left;
	margin: 0px;
	border-right:0px solid #333;
	padding: 0px 10px 0px 10px;
	width: 200px;
	text-transform:none;
}
	
.menu-item li li a, .menu-item li li a:link, .menu-item li li a:visited {
	background:rgb(132,164,11);
	width: 200px;
	float: none;
	margin: 0px;
	padding: 5px;
	border-top: 0px dotted #fff;
	color:black/*#fff*/;
}
	
.menu-item li li a:hover, .menu-item li li a:active {
	background:rgb(237,119,3);
	color:#fff;
}

.menu-item li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

.menu-item li:hover ul {
	left: auto;
	display: block;
}

/* Also handle :focus-within pseudo-selector */
.menu-item li:focus-within ul {
	left: auto;
	display: block;
}
	
.menu-item li:hover ul, .menu-item li.sfhover ul {
	left: auto;
}

/* Following allows menu depth to be shown */
/*.menu-item .sub-menu .menu-item .sub-menu {
	width: 100%;
	overflow: hidden;
	background-color: rgb(132,164,11);
}
.menu-item-has-children li li a:before {
	content: "• ";
}
.menu-item-has-children li li {
	position: relative;
	left: 10px;
}*/

.menu-item-has-children li li a:before {
	content: "---";
}
.menu-item-has-children li li li a:before {
	content: "------";
}
.menu-item-has-children li li li li a:before {
	content: "---------";
}
.menu-item-has-children li li li li li a:before {
	content: "------------";
}


/* Specific rule that should only match to third level sub-menu */
/*#navbar  > ul > .menu-item > ul > li > .sub-menu > .menu-item > .sub-menu {
	position: relative;
	left: 10px;
	background-color: pink !important;
	opacity: 0.5;
}
*/

/* Give sub-sub-menu a position of static (as otherwise the inherited value is absolute) */
.menu-item .sub-menu .menu-item .sub-menu {
	position: static;
}

/* Transitioning max-height and opacity on hover */
/*.menu-item .sub-menu .menu-item .sub-menu {
	opacity: 0.5;
	max-height: 0;
	width: 100%;
	overflow: hidden;
	transition: opacity 1s, max-height 1s;
}
.menu-item .sub-menu .menu-item:hover .sub-menu {
	opacity: 1.0;
	max-height: 100px;
}*/

/*	
.sub-menu>li>ul>li a:before{
	content:"--";
}
/.sub-menu {
	position:relative;
	left:10px;
}

li a:before .sub-menu {
	content:"--";
}
.sub-menu>li>ul>li a:after{
	content:"zzz";
}
.menu-item-has-children ul>li a:after {
	content: "xxx";
}*/
.menu-separator,
.menu-separator1 {
	border-bottom: 2px solid white; 
}
.menu-separator2 {
	border-bottom: 2px solid blue; 
}

/* Ensure menu sits on top of calendar */
#navbar ul.sub-menu {
	z-index: 2;
}

/* End of Navigation menu */

/* Text */
h1 {
	font:3.5em Verdana;
	color: black;
	font-weight:bold;
	letter-spacing:-0.05em;
	border-bottom:0px solid #ddd;
	border-top:0px solid #ddd;
	padding:0px 0px 5px 0px;
}

h2 {
	font:2.3em Verdana, Georgia, "Times New Roman";
	margin-bottom:3px;
	color:rgb(77,33,119);
	font-weight:bold;
}

h3 {
	font:1.8em Verdana;
	margin-bottom:3px;
	color:rgb(77,33,119);
	font-weight:bold;
}

h4 {
	font:1.4em Verdana;
	margin-bottom:3px;
	color:rgb(77,33,119);
	font-weight:bold;
}

h3.cat_title, h3.cat_title a {
	color:#333;
	letter-spacing:-0.05em;
	font-size:0.85em;
}

h3#respond {
	margin-top:0px;
	padding-top:20px;
}

h3#comments {
	margin-top:32px;
	padding-left:0px;
}

h3.authors {
	margin-top:15px;
}


/* Index Page */
#homepage {
	clear:both;
	margin:20px;
	padding:10px;
}
 
#topblock {
	float:right;
	/*width:600px;*/
	/*height:400px;*/
	border:10px;
	overflow:visible;
	background-repeat:no-repeat;
}

#brandpictures {
	width:50%;
	margin-left:0px;
	margin-top:0;
	padding:0;
	float:right;
}

#logo {
	background:#00a795;
	/*width:350px;*/
	max-width: 100%;
	/*height:120px;*/
	overflow: hidden;	/* To prevent logo extending over menu selectors */
}

#tagline {
	margin-top:5px;
	font-size:1em;
	color:#333;
}

#top {
	padding:0;
}

#headline {
	width:590px;
	float:left;
	background:#fff;
	padding:10px;
	font-size:1.05em;
	line-height:1.5em;
	margin:0;
}

#headline  div.title {
	font-weight:bold;
	font:2.4em Verdana;
	letter-spacing:-0.05em;
	display:block;
	padding-bottom:5px;
}

#headline div.meta {
	display:block;
	margin-top:-5px;
	padding-bottom:2px;
}

#headline p {
	padding-bottom:15px;
}

#featured {
	background:#fff;
	float:right;
	padding:10px 10px 9px 10px;
}

#featured .clearfloat {
	margin-top:7px;
	margin-bottom:8px;
	/*width:160px;*/
}

#featured .info {
	margin-top:5px;
	padding-top:5px;
	float:left;
	/*width:160px;*/
}

.info2 {
	margin-top:5px;
	padding-top:5px;
	float:left;
	width:50%; /* Remaining 50% used by brand pictures on home page */
}

.meta2 {
	/*width:230px;*/
}

#featured .title {
	font-weight:bold;
	/*width:160px;*/
}

#headline a img, #featured a img {
	border:0px solid #ccc;
	margin-top:0px;
	margin-right:10px;
	padding:2px;
}

#middle {
	/*width: 920px;*/
	background:#fff;
	float:right;
	padding:10px;
	margin:10px 0;
}

.carousel {
	background-size: 100%;
	background-size: cover;
	background-position: 0 0;
	background-repeat: no-repeat;
}

.brandcolour {
	background:#00a795;
}

.testcolour {
	background:RED;
}


/* Content Page */
#content {
	width:100%;
	/*min-width:600px;*/
	background:#fff;
	padding:10px;
	font-size:1.05em;
	line-height:1.75em;
	float:left;
}

#content .breadcrumbs, #content .breadcrumbs a {
	font-weight:bold;
	color:#333;
}

#content h2.title {
	font:3.5em Verdana;
	color: rgb(237,119,3);
	font-weight:bold;
	letter-spacing:-0.05em;
	border-bottom:0px solid #ddd;
	border-top:0px solid #ddd;
	padding:5px 0px;
}

.post {
	font-size:1.05em;
	line-height:1.75em;
}

.post p {
	margin-top:0px;
}

.post .clearfloat {
	border-bottom:0px dotted #ccc;
	margin:10px 0px;
}

.post ul, .post ol {
	margin-bottom:15px;
}

.post ul li {	
	list-style:square;
	margin-left:30px;
}

.post ol li {	
	list-style:decimal;
	margin-left:30px;
}

.post ol li ul li {	
	list-style:square;
	margin-left:20px;
}

.post img, .post a img, #archive img {
	border:0px solid #ccc;
	margin:0 0px 0px 0;
	padding:2px;
}

.post .ads {
	margin-top:10px;
}

.entry {
	margin-top:20px;
}


/* Footer */
#footerall,
#footerleft,
#footermiddle,
#footerright {
	color:#7413dc;
	font-size:1.0em;
}

#footerall {
	clear:both;	
	padding-left:10%;
	padding-right:10%;
	padding-top:0px;
	padding-bottom:0px;
	margin: 0px auto;
	border-top: 5px solid #7413dc;
}

#footerleft,
#footermiddle,
#footerright {
	float:left;
	min-height:10px;
	margin-top:10px;
}

#footerleft {
	width:40%;
}
#footermiddle {
	width:40%;
}
#footerright {
	width:20%;
}

#copyright {
	clear:both;
	text-align:left;
	color:#7413dc;
	font-size:0.8em;
	padding:3px;
	padding-left:40px;
}

#footer a:link, #footer a:visited {
	color: #7413dc;
	text-decoration:none;
	font-weight:bold;
}

#footer a:hover, #footer a:active {
	color: #e22e12;
	text-decoration:none;
	font-weight:bold;
}

#copyright a:hover {
	text-decoration:underline;
}

#footerright img {
	max-width: 100%;
	float: right;
}

/* Float Properties */
.left {
	float:left;
}
.right {
	float:right;
}
.clearfloat {
	display:block;
}

.clearfloat:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}


/* Hides from IE-mac */
* html .clearfloat {
	height:1%;
}

*+html .clearfloat {
	height:1%;
}


/* NEW NAVIGATION CSS??? http://seorave.com/style-wordpress-menus-dropdowns/ */
#main-nav	{
	height: 30px; /* set to the height you want your menu to be */
	margin: 0 0 10px; /* just to give some spacing */
}
#main-nav ul	{
	margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
}
#main-nav li	{
	display: block;
	float: left;
	line-height: 30px; /* this should be the same as your #main-nav height */
	height: 30px; /* this should be the same as your #main-nav height */
	margin: 0; padding: 0; /* only needed if you don't have a reset */
	position: relative; /* this is needed in order to position sub menus */
}
#main-nav li a  {
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 15px;
}
#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
	color: #000;
	background: #ccc;
}

#main-nav ul ul { /* this targets all sub menus */
	display: none; /* hide all sub menus from view */
	position: absolute;
	top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
}
#main-nav ul ul li { /* this targets all submenu items */
	float: none; /* overwriting our float up above */
	width: 150px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
#main-nav ul ul li a { /* target all sub menu item links */
	padding: 5px 10px; /* give our sub menu links a nice button feel */
}
#main-nav ul li:hover > ul {
	display: block; /* show sub menus when hovering over a parent */
}

#main-nav ul ul li ul {
	/* target all second, third, and deeper level sub menus */
	left: 150px; /* this needs to match the sub menu width set above -- width + padding + borders */
	top: 0; /* this ensures the sub menu starts in line with its parent item */
}

/* Table CSS */
.tTable{
	display: table;
	width: 100%;
}
.tRow {
	display: table-row;
}
.tCol {
	display: table-column;
}
.tCell, .tCellSidesOnly, .tCellNoBottom {
	display: table-cell;
	padding: 3px 10px;
	border: 1px solid #999999;
}
.tCellSidesOnly {
	border-style: none solid none solid;
}
.tCellNoBottom {
	border-style: solid solid none solid;
}
.tHead {
	display: table-header-group;
	font-weight: bold;
}
.tBody {
	display: table-row-group;
}
.tColGroup {
	display: table-column-group;
}
.tFoot {
	display: table-footer-group;
	font-weight: bold;
}

/* Add 'NEW','UPDATED' (typically used in a list) */
.newAfter::after {
	font-weight: bold;
	background: yellow;
	content: " *** NEW! ***";
}
.newBefore::before {
	font-weight: bold;
	background: yellow;
	content: " *** NEW! ***";
}
.updatedAfter::after {
	font-weight: bold;
	background: orange;
	content: " *** UPDATED! ***";
}
.updatedBefore::before {
	font-weight: bold;
	background: orange;
	content: " *** UPDATED! ***";
}

/* Tactical fix to resolve temp header issue */
#page-bar2 img {
    height: 50px;
}

iframe {
	max-width: 100%;
}