/*
	General style definitions for GOC website
	(c) Duncan Weaver, Three Degrees West 2008
	
	--- First, define the standard tags ---
*/
body
{
	background-color: #FFFFFF;
	color: #000000;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}
img {
	border: none;
}
h1
{
	font-size: 24px;
	font-weight: bold;
	color: #666633;
	margin: 0;
	padding: 0 0 10px 0;
}
h2 {
	font-size: 12px;
	color: #666633;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
h3 {
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0;
	padding: 10px 20px 0px 0;
	text-align: right;
	float: right;
}
p {
	margin: 8px 0;
	padding: 0;
	display: block;
	line-height: 1.4em;	/* important to define this for IE9 compatibility */
}
li {
	list-style-image: url(/images/icons/Bullet.gif);
}
td, th {
	font-size: 14px;
}
hr {
	width: 100%;
	padding: 0px;
	margin: 6px 0px;
	height: 1px;
	border: 0 none;
	background-color: #E0E0C2;
	color: #E0E0C2;
}
form {
	margin: 0;
	padding: 0;
}
a:link {
	color: #666633; text-decoration: none
}
a:visited {
	color: #666633; text-decoration: none
}
a:hover {
	color: #666633; text-decoration: underline
}

/*	--- Some common classes for inline styles used throughout the site --- */

.runningtitle {
	font-weight: bold; 
	color: #666633;
}
.smalltext {
	font-size: 11px;
}
.largetext {
	font-size: 18px;
}
.titleBold {
	font-weight: bold;
	color: #666633;
	font-size: 18px;
}
.titleLight {
	font-weight: normal;
	color: #666633;
	font-size: 18px;
}
.titleBlack {
	font-weight: bold;
	color: #000000;
	font-size: 18px;
}
.titleGrey {
	font-weight: bold;
	color: #999999;
	font-size: 18px;
}
.grey {
	color: #CCCCCC;
}
.comment {
	color: #999999;
}
.smalltext p {
	margin: 0;
}
.smalllist p {
	font-size: 12px;
	line-height: 17px;
	margin: 0px;
	padding: 0;
/*	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	/*IE only - nice touch*/
}

.mylist {
	margin: 4px 0 0 0;
}
.mylist p {
	font-size: 12px;
	line-height: 17px;
	margin: 0px;
	padding: 0;
}

.inset {
	margin-left: 20px;
}
.spacer {
	height: 16px;
}
.pictureleft {
	float: left;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 2px;
	border: 0px none;
}
.pictureright {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 2px;
	border: 0px none;
}

.welsh {
	color: #BF4040;
}
.welsh a {
	color: #BF4040;
}
.welsh a:hover {
	text-decoration: underline;
	color: #BF4040;
}
.warningPanel {

	margin: 4px 0px;
	padding: 2px;
	background-color: #FFE8E8;
	border: 1px solid #CC0000;
}
.imgborder {
	border: 1px solid #666666;
}
.eventFlash {
	font-size: 14px;
	font-weight: bold;
	margin: 14px 0;
	padding: 3px 11px;
	background-image: url(/images/GOC/layout/BG_flash.jpg);
	background-repeat: repeat-x;
	color: #FFFFFF;
	display: inline;
}
.eventFlash a {
	color: #FF6600;
}
.eventFlashText {
	font-size: 14px;
	font-weight: bold;
	color: #FF6600;
}
.birthday {
	color: #CC0000;
	font-weight: bold;
}


/*
	These panels are used to highlight blocks of text on CMS pages. They may be applied by the FCK editor (to a div)
	where p tags can't be added within the div. These styles redefine the p tag so that the fomatting appears
	the same if paragraphs are included when edited elsewhere. Use <br /> tags to create the illusion of paragrahs 
	within these panels when using FCK.
*/

.PanelRed {
	border: 1px solid #AE0000;
	background-image: url(/images/GOC/layout/BG_cboxred.jpg);
	background-color: #FFEFDF;
}

.PanelGreen {
	border: 1px solid #666633;
	background-image: url(/images/GOC/layout/BG_cboxdkolive.jpg);
	background-color: #F2F2E6;
}

.PanelYellow {
	border: 1px solid #CC9900;
	background-image: url(/images/GOC/layout/BG_cboxochre.jpg);
	background-color: #FFF9E6;
}
.PanelRed, .PanelGreen, .PanelYellow {
	margin: 8px 0;
	padding: 10px 20px;
	background-repeat: repeat-x;
}
.PanelRed p, .PanelGreen p, .PanelYellow p {
	padding: 0px;
	margin-right: 0px;
	margin-left: 0px;
}
/*	--- CBOXes are coloured/shaded boxes essential to the site's look/feel --- */

/*	Dark Olive  */

.cboxDkOliveTop {
	background-image: url(/images/GOC/layout/BG_cboxdkolive_top.jpg);
	background-repeat: repeat-x;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #666633;
	padding: 0 10px;
	margin: 10px 0 0 0;
}
.cboxDkOliveTop a, .cboxDkOliveTop a:visited {
	color: #FFFFFF;
}
.cboxDkOliveTop a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.cboxDkOlive {
	background-image: url(/images/GOC/layout/BG_cboxdkolive.jpg);
	background-repeat: repeat-x;
	background-color: #F2F2E6;
	padding: 10px;

}
.cboxDkOlive hr {
	width: 100%;
	padding: 0px;
	margin: 6px 0px;
	border-top: 1px solid #000000;
	border-right: 1px none;
	border-bottom: 1px none;
	border-left: 1px none;
}

/*	Olive (main body) */

.cboxOliveTop {
	background-image: url(/images/GOC/layout/BG_cboxolive_top.jpg);
	background-color: #CACA93;
	background-repeat: repeat-x;
	font-weight: bold;
	color: #000000;
	padding: 0 10px;
	margin: 10px 0 0 0;
}
.cboxOliveTop a, .cboxOliveTop a:visited {
	color: #000000;
}
.cboxOliveTop a:hover {
	color: #000000;
	text-decoration: underline;
}

.cboxOlive {
	background-image: url(/images/GOC/layout/BG_cboxolive.jpg);
	background-repeat: repeat-x;
	background-color: #F9F9F2;
	padding: 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #F1F1E7;
	border-right-color: #F1F1E7;
	border-bottom-color: #F1F1E7;
	border-left-color: #F1F1E7;

}
.cboxOlive hr {
	width: 100%;
	padding: 0px;
	margin: 6px 0px;
	border-top: 1px solid #000000;
	border-right: 1px none;
	border-bottom: 1px none;
	border-left: 1px none;
}

/*	Red (menus)  */

.cboxRedTop {
	background-image: url(/images/GOC/layout/BG_cboxred_top.jpg);
	background-color: #CACA93;
	background-repeat: repeat-x;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0 10px;
	margin: 10px 0 0 0;
}
.cboxRedTop a, .cboxRedTop a:visited {
	color: #FFFFFF;
}
.cboxRedTop a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.cboxRed {
	background-image: url(/images/GOC/layout/BG_cboxred.jpg);
	background-repeat: repeat-x;
	background-color: #FFEFDF;
	padding: 10px;
	border-style: none;
}
.cboxRed hr {
	width: 100%;
	padding: 0px;
	margin: 6px 0px;
	border-top: 1px solid #000000;
	border-right: 1px none;
	border-bottom: 1px none;
	border-left: 1px none;
}

/*	Ochre (menus)  */

.cboxOchreTop {
	background-image: url(/images/GOC/layout/BG_cboxochre_top.jpg);
	background-color: #CACA93;
	background-repeat: repeat-x;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0 10px;
	margin: 10px 0 0 0;
}
.cboxOchreTop a, .cboxOchreTop a:visited {
	color: #FFFFFF;
}
.cboxOchreTop a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.cboxOchre {
	background-image: url(/images/GOC/layout/BG_cboxochre.jpg);
	background-repeat: repeat-x;
	background-color: #FFF9E6;
	padding: 10px;
	border-style: none;
}
.cboxOchre hr {
	width: 100%;
	padding: 0px;
	margin: 6px 0px;
	border-top: 1px solid #FFF4CA;
	border-right: 1px none;
	border-bottom: 1px none;
	border-left: 1px none;
}

/*	Grey (menus)  */


.cboxGreyTop {
	background-image: url(/images/GOC/layout/BG_cboxgrey_top.jpg);
	background-color: #CACA93;
	background-repeat: repeat-x;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0 10px;
	margin: 10px 0 0 0;
}
.cboxGreyTop a, .cboxGreyTop a:visited {
	color: #FFFFFF;
}
.cboxGreyTop a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.cboxGrey {
	background-image: url(/images/GOC/layout/BG_cboxgrey.jpg);
	background-repeat: repeat-x;
	background-color: #FFF9E6;
	padding: 10px;
	border-style: none;
}
.cboxGrey hr {
	width: 100%;
	padding: 0px;
	margin: 6px 0px;
	border-top: 1px solid #000000;
	border-right: 1px none;
	border-bottom: 1px none;
	border-left: 1px none;
}

/*	--- Help text --- */

.HelpPanelTop {
	background-color: #3399CC;
	color: #FFFFFF;
	padding: 2px 2px 2px 4px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	display: block;
	font-weight: bold;
	background-image: url(/images/styles/HLPtopbgnd.jpg);
	background-repeat: repeat-x;
	border-top: 1px solid #3399CC;
	border-right: 1px solid #3399CC;
	border-bottom: 1px none #3399CC;
	border-left: 1px solid #3399CC;
	height: 15px;
}
.HelpPanel {
	background-color: #E6F2F9;
	color: #3399CC;
	padding: 4px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	display: block;
	background-image: url(/images/styles/HLPbgnd.jpg);
	background-repeat: repeat-x;
	border-top: 1px none #3399CC;
	border-right: 1px solid #3399CC;
	border-bottom: 1px solid #3399CC;
	border-left: 1px solid #3399CC;
	font-size: 11px;
}
.HelpPanel p {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 90px;
}
.HelpText p {
	color: #3399CC;
	font-size: 11px;
}
.HelpPopupWrapper {
	position: absolute;
	left: 100px;
	top: 100px;
	height: 300px;
	z-index: 9;
	font-size: 11px;
}
.HelpText {
	color: #3399CC;
}
.HelpText p {
	font-size: 11px;
	margin: 4px;
	padding: 0px;

}
.HelpText li {
	font-size: 11px;
}

/*	--- Error panel --- */

.errors {
	margin: 10px 0;
	padding: 10px;
	background-color: #FFE8E8;
	border: 1px solid #CC0000;
	color: #CC0000;
}
.errors ul {
	padding: 0 0 0 10px;
	margin: 0;
}
.errors li {
	margin: 0 20px 0 20px; 
	list-style-image: url(/images/icons/BulletError.gif);
}
.errors a, .errors a:visited, .errors a:hover {
	color: #CC0000;
}

/* --- Forms on editing pages --- */

.cformTop {
	background-color: #6A6A69;
	border: solid;
	border-width: 1px;
	border-color: #6A6A69;
	padding: 0 10px;
	color: #FFFFFF;
	width: 96%;
	display: block;
}
.cform {
	margin: 0;
	background-color: #EFEFDE;
	border: solid;
	border-width: 1px;
	border-color: #B7B7A6;
	padding: 10px;

/*	The following added so that floated cf divs inside are cleared properly. 
	Also width fixed for IE (see separate stylesheet)
*/
	width: 96%;	/* 	96%;margin-right: 20px;*/
	display: block;
	float: left;
}
/*	cform which doesn't muck up floats */
.cform2 {
	margin: 0;
	padding: 10px;
	background-color: #EFEFDE;
	border: 1px solid #B7B7A6;
}
.cformhelp {
	width: 96%;
	padding: 0;
	display: block;
}
.cf2 {
	width: 22px;
	float:left;
}
.cf5 {
	width: 70px;
	float:left;
}
.cf6 {
	width: 84px;
	float:left;
}
.cf8 {
	width: 112px;
	float:left;
}
.cf10 {
	width: 140px;
	float:left;
}
.cf12 {
	width: 168px;
	float:left;
}
.cf15 {
	width: 210px;
	float:left;
}
.cf20 {
	width: 280px;
	float:left;
}
.cf25 {
	width: 350px;
	float:left;
}

.cfcol {
	float: left;
}

.cfend {
	clear: left;
	height: 0; 
	line-height: 0;
}
.nobottom {
	border-bottom: none;
}
.notop {
	border-top: none;
}
.cform p, .cform div /*.cform button*/ {
	font-size: 12px;
}

/*	The following syntax will only work on Firefox
	If attributes applied to all input tags in IE7, affects text colours input buttons/submits even when another class applied
*/

.cform input {			/* input[type="text"], .cform input[type="password"], .cform input[type="file"] attribute selectors don't work on IE */
	color: #CC0000;
	font-size: 12px;
	padding: 0 2px;
	vertical-align: top;
}
select {
	color: #CC0000;
	font-size: 12px;
	padding: 0;
	vertical-align: top;
}
.cform option {
	font-size: 12px;
	color: #CC0000;
	padding: 0 2px;
}
.cform textarea, .ctextbox {		/*ctextbox used for non-cform forms to mimic style*/
	color: #CC0000;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	vertical-align: top;
}


/* Locked text boxes with button for selector */
.cformltext {
	color: #CC9999;
	height:18px;
	margin:0;
	/*font-size:10px;*/
	border:1px solid #B7B7A6;
	padding:1px;
	vertical-align:middle;
	/*border-right:none;*/
	overflow: hidden;
	vertical-align: top;
}
.cformlbutton {
	height:20px;
	margin:0;
	font-size:10px;
	border:1px solid #B7B7A6;
	padding:1px 4px 3px 4px;
	vertical-align:middle;
	text-decoration:none;
	color: #6A6A69;
	background-color: #B7B7A6;   
	vertical-align: top;
}
.cformlbutton:hover {
	cursor: pointer;
}

.FCKwrapper {
	/*width: 500px;*/
}

.cbutton {
	border: solid;
	font-size: 12px;
	border-width: 1px;
	border-color: #B7B7A6;
	padding: 1px 8px 1px 8px;
	background-color: #EFEFDE;
	vertical-align: top;
	background-image: url(/images/GOC/layout/BG_cboxolive_top.jpg);
	background-repeat: repeat-x;
	color: #000000;
	background-position: 1px;

}
.cbutton:hover {
	background-color: #B7B7A6;
	cursor: pointer;
	text-decoration: none;
	background-image: url(/images/GOC/layout/BG_cboxdkolive_top.jpg);
	background-repeat: repeat-x;
	color: #FFFFFF;
}


.cformbutton, .cform .cformbutton, .loginbutton {
	border: 1px solid #B7B7A6;
	font-size: 12px;
	padding: 1px 4px 2px 4px;
	background-color: #EFEFDE;
	background-image: url(/images/GOC/layout/BG_cboxolive_top.jpg);
	background-repeat: repeat-x;
	color: #000000;
}
.cformbutton:hover, .cform .cformbutton:hover, .loginbutton:hover {		/* doesn't always operate on IE due to yet another bug */
	background-color: #B7B7A6;
	cursor: pointer;
	text-decoration: none;
	background-image: url(/images/GOC/layout/BG_cboxdkolive_top.jpg);
	color: #FFFFFF;
}

.cbutton a, .cformbutton a {
	color: #000000;
}
.cbutton a:hover, .cformbutton a:hover {
	color: #FFFFFF;
	text-decoration: none;
}


.logintext {
	font-size: 12px;
	color: #666633;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

/*	Header banners - random classes generated to apply different b/g styles through CSS */

.HeaderBG01 {
	background-image: url(/images/GOC/hdr/HeaderBG01.jpg);
	background-repeat: repeat-x;
}
.HeaderBG02 {
	background-image: url(/images/GOC/hdr/HeaderBG02.jpg);
	background-repeat: repeat-x;
}
.HeaderBG03 {
	background-image: url(/images/GOC/hdr/HeaderBG03.jpg);
	background-repeat: repeat-x;
}
.HeaderBG04 {
	background-image: url(/images/GOC/hdr/HeaderBG04.jpg);
	background-repeat: repeat-x;
}
.HeaderBG05 {
	background-image: url(/images/GOC/hdr/HeaderBG05.jpg);
	background-repeat: repeat-x;
}
.HeaderBG06 {
	background-image: url(/images/GOC/hdr/HeaderBG06.jpg);
	background-repeat: repeat-x;
}
.HeaderBG07 {
	background-image: url(/images/GOC/hdr/HeaderBG07.jpg);
	background-repeat: repeat-x;
}
.HeaderBG08 {
	background-image: url(/images/GOC/hdr/HeaderBG08.jpg);
	background-repeat: repeat-x;
}
.HeaderBG09 {
	background-image: url(/images/GOC/hdr/HeaderBG09.jpg);
	background-repeat: repeat-x;
}
.HeaderBG10 {
	background-image: url(/images/GOC/hdr/HeaderBG10.jpg);
	background-repeat: repeat-x;
}	

/*	--- Tables - where used appropriately - not for layout --- */

.ctable {
	border-spacing: 0;
	border-collapse: collapse;
	border-color: #EFEFDE;
	border-width: 1px;
	border-style: solid;
/*	border-left-style: solid;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;*/
}
.ctable td {
/*	border-color: #EFEFDE;
	border-width: 1px;
	border-left-style: none;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;*/
	border-color: #EFEFDE;
	border-width: 1px;
	border-style: solid;
	font-size: 11px;
	padding: 0 6px;
	margin:0;
}
.ctable th {
	background-color: #EFEFDE;
/*	border-color: #EFEFDE;
	border-width: 1px;
	border-left-style: none;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;*/
	font-size: 11px;
	padding: 0 6px;
	margin:0;
}
.grouplistCol{
	margin-right: 20px;
	float: left;
	margin-bottom: 20px;
}
.grouplistCol p{
	text-indent: -10px;
	margin: 0;
	padding: 0px 0px 0px 10px;
}
.SELMselector0 {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	opacity:0.7;
	filter:alpha(opacity=70);
	visibility: hidden;
	z-index: 98;
}
.SELMselector {
	border: 3px solid #999999;			/*#E0E0C2;*/
	background-color: #FFFFFF;
	padding: 4px;
	z-index: 99;
	height: 350px;
	width: 500px;
	margin: 0px;
	padding: 10px;
	visibility: hidden;
	position: fixed;
	overflow: auto;
}
.SELMlistbox {
	height: 300px;
	width: 200px;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	color: #CC0000;
}
.SELMlayoutBlockRight {
	background-color: #E0E0C2;
	text-align: right;
}
.SELMlayoutcolumn {
	float: left;
	margin: 0;
	padding: 6px;
}
.SELMbutton {
	padding: 0 11px;
	border: 2px outset #666633;
	background-color: #666633;
	color: #FFFFFF;
	font-size: 9px;
	margin: 0px;
}
.boxedin {
	border: 1px solid #B7B7A6;
	padding: 8px;
	margin: 4px;

}
.toggle a {
	color: #000000; text-decoration: none; 
}

/* 
	layoutTable is to be used in cforms to replace divs which are too problematic
	the definitions must occur after those for cform in order that alignments are properly handled
*/

.layoutTable {
	border-style: none;
	border-spacing: 0;
}
.layoutTable td {
	padding: 3px 10px 3px 0;
	vertical-align: bottom;
	font-size: 11px;
}

.layoutTable input, .layoutTable select, .layoutTable button, .layoutTable img {
	margin: 0;
	vertical-align: bottom;
}
.layoutTable td.top, .layoutTable img.top {
	vertical-align: top;
}
.layoutTable td.mid, .layoutTable img.mid {
	vertical-align: middle;
}
.layoutTable td.nosp {
	padding-right: 3px;
}
.layoutTableOption {
	border-style: none;
	border-spacing: 0;
}
.layoutTableOption td {
	padding: 2px;
	font-size: 11px;
}

/* nmtable for new messages in My GOC*/
.nmtable {
	border-style: none;
	border-spacing: 0;
}
.nmtable td {
	padding: 0;
	font-size: 11px;
}



.alert {
	color: #CC0000;
	font-weight: bold;
}
.alert a, .alert a:hover {
	color: #CC0000;
}

/* saved search list */

.sslist {
	margin-left: 20px;
	padding: 0 0 0 20px;
}
.sslist li{
	font-weight: bold;
	line-height: 1.3em;
	font-size: 11px;
}

/* image grid - moved from event details page */
.imageGrid {
	padding: 8px 8px 0 0;
	text-align: center;
}
.attendancebox {
	border: 1px solid #000000;
	padding: 4px 8px;
}
/*	highlight warnings in red, with link also in red */
.warninglink {
	font-weight: bold;
	color: #CC0000;
}
a.warninglink {
	font-weight: bold;
	color: #CC0000;
}