/*********** C O L O U R S *********
	#f4ffe8 - pale green
	#CC6600 - gold
	#FFFF00 - neon yellow
*/
/*********** RESET ***********/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr { 
	margin: 0;padding: 0;}
table {border-collapse: collapse; border-spacing: 0;}
/*****************************/
html, body {
    background-color: white;
    color: #1c1c1c;
    border-color: darkred;
    margin: 0;
    padding: 0;
    font-size: 16px;
    text-align: left;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
a:link, a:visited {color: green; background-color: transparent;}
a:hover, a:focus, a:active {color: darkred; background-color: transparent;}

h1 {clear: both; font-size: 36px; margin: 25px 0 15px 0; color: green;}
h2 {clear: both; font-size: 36px; margin: 24px 0 15px 0; color: green;}
h3 {clear: both; font-size: 24px; margin: 12px 0 10px 0; color: green;}
h4 {font-size: 24px; font-weight: bold; margin: 20px 0 10px 0; color: green;}

#wrapper h5 {font-size: 18px; font-weight: bold; margin: 5px 0 3px 0;}
#wrapper h6 {font-size: 18px; font-weight: normal; font-style: italic; margin: 5px 0 3px 0;}

p {font-size: 16px; margin: 5px 0;}

ul {padding-left: 64px;}
li {margin: 5px 0;}
hr {clear: both; color: lightGrey; background-color: lightGrey; height: 3px;}

/* C L A S S E S */
.floatleft {float: left !important;}
.floatright {float: right !important;}
.clear {
	clear: both !important;
	margin: 0;padding: 0;
	line-height: 0.15em; height: 0.15em;
}
.noClear {clear: none !important;}
.clearRight {clear: right;}
.clearLeft {clear: left !important;}
.clearBoth {clear: both !important;}
.tiny {font-size: 11px !important;}
.small {font-size: 12px !important;}
.bigger {font-size: 125% !important;}
.smaller{font-size: 80% !important;}
.centre, .center {text-align: center !important;}
.hide {display: none !important;}
.show {display: block !important;}
.showAuto {}	/* display according to type of tag/previous style when un-hiding */
.red {color: red !important;}

.absCentre {	/* centre horizontally and vertically in *positioned* container - OVERRIDE MAX-WIDTH/HEIGHT */
	position: absolute; top: 0; left: 0; bottom: 0; right: 0;
	width: auto; max-width: 150px;
	height: auto; max-height: 150px;
	margin: auto;
}
.warning {background-color: transparent; color: #FF9900;} /* orange */
p.failMsg {color: red !important}

div#wrapper {
	max-width: 900px; min-width: 545px; min-height: 600px;
	margin: 30px auto 30px auto; padding: 0;
	border: 1px solid darkred;
	background-color: #f4ffe8; 	/* pale green */
}
div#wrapper.narrow {width: 545px;}
div#content {
	padding: 0 25px 0 25px; min-height: 1050px;
	position: relative;
}
div#header {height: 150px; margin: 20px 0 0 20px;}
div#wrapper.narrow div#header {margin: 0; height: 270px;}
div#header img#logoHeader {width: 300px; float: left; margin: 0 200px 0 0;}
div#wrapper.narrow div#header img#logoHeader {margin: 0 30px 10px 20px;}
div#header div.box {
	border: 2px solid darkred;
	clear: none; float: left; width: 320px; height: 100px;
	margin: 5px 0 5px 0; padding: 5px;
}
div#header div.box p {text-align: center; font-size: 18px;}
div#header div.box img {width: 100%;}

div#wrapper.narrow div#meetingBox {margin: 25px auto 0 auto; clear: both; float: none;}

/* Home Energy box */
div#header img#logoHeader {margin: 0 30px 0 0;}	/* Remove when deleting HE box */

div#header div#HEinfo {margin: 5px 20px 0px 0; padding: 0 0 10px 0; width: 160px; background-color: white;}
div#header div#HEinfo img {width: 100%; margin: 0 !important;}
div#header div#HEinfo img#lnkYouTube {width: 48px !important;float: right;margin-top: -6px !important;}
div#header div#HEinfo p {text-align: center; font-size:12px; line-height: 1.1em; margin: 0;}
/****** EV Show 2024
div#header div#HEinfo {margin: 5px 20px 0px 0; padding: 0 0 10px 0; width: 160px;}
div#header div#HEinfo img {float: left; width: 65px; margin: 8px 0 0 0 !important;}
div#header div#HEinfo p {text-align: center; font-size: 16px; font-weight:bold;  line-height: 1.5em; margin: 0;}
div#header div#HEinfo p#EVtitle {font-size:18px; margin-top: 14px !important;}
div#header div#HEinfo p#EVinfo {clear: left; font-size:12px;}
**********/
div#header div#HEinfo a {text-decoration: none;}

/* Menu */
div#menu {clear: both; position: relative; padding: 5px 0 5px 0; height: 35px; background-color: #339900;}	/* green */
div#menu div.burger {display: none; padding: 2px 0 0 20px; cursor: pointer;}
div#menu ul {margin: 0; padding: 0 0 0 30px; list-style-type: none; height: 35px; position: relative;}
div#menu ul.vertical {height: auto; width: 200px; padding: 0; z-index: 9999; background-color: #339900;}	/* green */
div#menu li.menuItem {float: left; font-size: 18px; cursor: pointer;}
div#menu ul.vertical li.menuItem {float: none;}

div#menu li a {padding: 0 15px 0 15px; text-decoration: none; display: block;}

div#menu li a:link, div#menu li a:visited {color: black; text-decoration: none;}
div#menu li a:hover, div#menu li a:focus, div#menu li a:active {color: gold; background-color: transparent;}

div#menu li#liProjects, div#menu li#liRepair  {position: relative;}
div#menu li#liProjects span.hover, div#menu li#liRepair span.hover {color: gold;}
div#menu ul#ulProjects {position: absolute; z-index: 9999;
	width: 210px; height: auto; top: 35px; left: 0px;
	font-size: 16px; text-align: left;
	padding: 0 0 0 15px;
	background-color: #339900;	/* green */
}
div#menu ul#ulRepair {position: absolute; z-index: 9999;
	width: 210px; height: auto; top: 35px; left: 0px;
	font-size: 16px; text-align: left;
	padding: 0 0 0 15px;
	background-color: #339900;	/* green */
}
div#menu ul.vertical {position: absolute; top: 45px; left: 20px; background-color: #339900;}	/* green */
div#menu ul.vertical li {display: block;}
div#menu ul.vertical ul {background-color: #339900;}	/* green */
div#menu ul.vertical ul#ulProjects {top: 0; left: 200px;}
div#menu ul.vertical ul#ulProjects li a {padding: 0;}
div#menu ul.vertical ul#ulRepair {top: 0; left: 200px;}
div#menu ul.vertical ul#ulRepair li a {padding: 0;}
div#menu li {text-decoration: none; outline: none;}
div#menu li.notActive {pointer-events: none; cursor: default;}
div#menu li.notActive a {color: silver;}

/* iPad etc */
@media only screen and (max-device-width : 1024px) {
    div#menu div.burger {display: block;}
}
@media (max-width: 1024px) {
	div#menu div.burger {display: block;}
}
/* END MENU */

h1#title {color: darkred; font-size: 30px; line-height: 125%; margin: 0; padding: 14px 0 0 0; text-align: center; clear: none;}

div#jigsawBox {float: left; border: 1px solid darkred; width: 525px; margin: 20px 10px 10px 0;}
div#jigsawPuzzle {
	position: relative; height: 525px; margin-top: 10px;
	background-image: url("../Graphics/bg.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}
div#jigsawPuzzle div {position: absolute; width: 160px; height: 160px;}
div#jigsawPuzzle div img {width:100%; height:100%; cursor: pointer;}
div#jigsawPuzzle div.reduce    {top: 30px; left: 140px;}
div#jigsawPuzzle div.reuse     {top: 100px; left: 310px;}
div#jigsawPuzzle div.recycle   {top: 175px; left: 65px;}
div#jigsawPuzzle div.replace   {top: 245px; left: 250px;}

div#jigsawPuzzle div p {font-size: 36px; text-align: center; position: relative; cursor: pointer;}
div#jigsawPuzzle div.reduce p {top: -120px; left: 0px;}
div#jigsawPuzzle div.reuse p {top: -120px; left: 0px;}
div#jigsawPuzzle div.recycle p {top: -110px; left: -5px;}
div#jigsawPuzzle div.replace p {top: -120px; left: 0px;}
div#jigsawPuzzle div p {color: darkred !important;}
div#jigsawPuzzle div p.active {color: gold !important;}
div#jigsawPuzzle div p.clicked {color: gold !important;}

div#jigsawPuzzle p.respect {
	padding-top: 445px; text-align: center; font-size: 40px;
	color: #336600; font-weight: bold;
}

div#divDetail {height: 450px; overflow: auto; padding: 0 0 5px 5px;}
div#divDetail h2 {line-height: 1.2em; margin: 0; text-align: center; color: darkred;}
div#divDetail h3 {font-size: 18px; margin: 5px 0 0 15px;}
div#divDetail p {margin-left: 18px; margin-right: 10px;}
div#divDetail ul {list-style-type: circle; padding-left: 30px;}
div#divDetail ul.compact li {float: left;}
div#divDetail li {margin: 0 20px 0 0; font-size: 14px;}
div#divDetail div.reuse li {font-size: 18px;}
div#fbData {
	margin: 20px 0;	width: 340px; border: 1px solid darkred;
	float: left; height: 1112px; overflow: auto;
}
div#wrapper.narrow div#fbData {width: 505px; padding: 0 10px; margin: 0 0 10px 0;}

div#footer {text-align: center; background-color: #339900;}	/* green */
div#signUp {color: #1c1c1c; padding: 3px 0; border-bottom: 1px solid darkred;}
div#signUp p {font-size: 16px;}
div#signUp p a {color: wheat !important;}
div#footer p {color: #1c1c1c; padding: 0; margin: 0;}
div#footer table {height: 40px; width: 100%; color: #1c1c1c;}
div#footer td {padding-left: 5px; font-size: 11px; text-align: center; color: #1c1c1c; background-color: #f4ffe8;} 	/* pale green */
div#footer td#icon {padding-left: 15px; width: 32px;} 
div#footer td a {color: #1c1c1c !important; text-decoration: none;}
div#footer td#copyright {text-align: left;} 
div#footer p#cookiePolicy {font-size: 12px; padding: 0 0 5px 0; background-color: #f4ffe8;} 	/* pale green */

div.msgbox {border-color: darkred;}
div.msgbox p {font-size: 16px;}
div#msgSuccess div.inner {color: white !important; background-color: green;}

/* --------F O R M S--------- */
#wrapper form {
	margin: 0;
	padding: 0;
}
#wrapper form p {
	clear: left;
	margin: 0;
	padding: 5px 0;
}
#wrapper form p.confirm {display: none;} /* honeypot */

#wrapper form p label {
	float: left;
	width: 35%;
	font-weight: bold;
}
#wrapper form p.small {font-size: 0.6em;}

#wrapper form p label.maxwidth {
	width: auto;
	margin-right: 15px;
}
#wrapper form input, #wrapper form textarea, #wrapper form select {
	color: #1C1C1C; 					/* nearly black */
	background-color: white;
}
#wrapper form input {width: 250px;}
#wrapper form input.radio {
	width: 20px;
	height: 20px;
 	vertical-align: top;
	background-color: transparent;
	margin-top: 0;
}
#wrapper form select {width: 150px;}

#wrapper form select.YesNo {width: 50px;}

#wrapper form textarea {
	width: 98%;
	height: 150px;
}
#wrapper form .checkbox {
	width: auto !important;
	margin: 5px 8px 0 0;
	background-color: black;
}
#wrapper form .button {		/* NB - class not tag */
	margin-top: 10px;
	color: black;
	background-color: #CFCFCF;			/* light grey (gray81) */
	padding: 2px 0;
	width: 60px;
}
#wrapper form input.imgbutton {
	border: none;
	padding: 0;
	color: inherit;
	background-color: black;
	position: absolute;					/* forces it to align properly */
	width: 20px;
	height: 20px;
}
#wrapper form input.dimmed {color: #AAAAAA;}
#wrapper form span.textCount {
	font-size: 9px;
	line-height: 9px;
}

/* ----- Update fieldsets ---- */
#wrapper fieldset {
	border: 1px solid #00f6ff;		/* bright blue */
	color: lightGrey;
	background-color: black;
	margin-top: 10px;
	padding: 10px;
}
#wrapper fieldset legend {
	font-size: 0.8em;
	color: #00f6ff;					/* bright blue */
	background-color: black;
}
#wrapper fieldset #okButton {
	clear: both;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}
#wrapper fieldset #clearButton {
	float: left;
	margin-top: 10px;
	margin-left: 40px;
}
#wrapper fieldset #cancelButton {
	float: right;
	margin-top: 10px;
	margin-right: 20px;
}
#wrapper fieldset ul {
	margin: 0;
	padding: 2px 0 0 3px;
}
#wrapper fieldset li {
    list-style: none;
    display: inline;
    margin: 0;
	padding: 0 15px 0 0;
}
/* ------- List of checkboxes ------------*/
#wrapper form div.checkList {
	border: 1px solid #00f6ff;			/* bright blue */
	padding: 3px 3px 5px 3px;
}
#wrapper form div.checkList div.inner {
	position: relative;					/* required for ie */
	overflow: auto;						/* scroll bars if too big for height */
	border: 1px solid #ffff00;			/* neon yellow */
	padding: 3px 0 5px 5px;
}
#wrapper form div.checkList ul {
	list-style: none;
	margin: 0;
	padding: 3px 0;
}
#wrapper form div.checkList li {
	font-size: 13px;
	line-height: 14px;
	padding: 0;
	margin: 0 0 8px 0;
	clear: both;
}
#wrapper form div.checkList li label {
    display: block;
    padding-left: 20px;
    text-indent: -20px;
}
#wrapper form div.checkList li label input {
    width: 20px !important;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    overflow: hidden;
}
/* --------T A B L E S--------- */
#content table#speakers {margin: 0; padding: 5px; width: 100%; height: auto; overflow: auto;}

#content table {
	clear: both;
	border: 1px solid darkgreen;
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}
#content table td {
	border: 1px solid darkgreen;
	padding: 4px;
}
#content table th {
	border: 1px solid darkgreen;
	background-color: lightgreen;
	color: #1c1c1c;	/* nearly black (gray11) */
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	padding-left: 4px;
}
#content table th.fixedwidth {
	width: 20px;
	padding-left: 0;
	text-align: center;
}
#content table td {font-size: 14px;}
#content table tr:hover, #content table tr.hilite {
	background-color: lightgreen;
	color: #1C1C1C;					
}
#content table img {border: none; margin: 0; padding: 0;}