/*  ----------Ntnt Specific----------  */

/* revised 19 June 08 */


/* ---------- GENERAL TEXT ----------- */
html { font-size: 100%; /*IE reminder*/}
body { font-family: Arial, Helvetica, Sans-serif; color: #555555; padding: 0px; margin: 0px; box-sizing: border-box; -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box; }
div, h1, h2, h3, h4, h5, main, footer, header, section, article, nav, aside { box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
table { font-size: 100%; /*IE reminder*/ }
p { margin:0px; padding: 0px; }
ul { margin:0px; padding: 0px;  box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
li { list-style: none;  box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

.mainarea { line-height:1.5; padding-bottom: 4em; }

.leadtext {  clear: both; }
.leadtext p { }
.bread, .listpages, .siteviews, .searchlink, .NStatus { font-size: 9pt; }
.listpages { clear:both; }
td {  }
h1 { font-size: 1.833em; margin-top: 0.5em; margin-bottom:1.0em; }
h2 {  }
h3 { }
h4 { font-size: 1em; }
h5 { font-size: 1em; }
hr { clear: both; color: #EEEEFF; height: 1px; }
select {}
input {  }
textarea {  }
a {  color: #777777; text-decoration: none; }
a:hover { }

.mainarea ul { margin-top: 0px; }

/* SD HTML5 BITS */
.mainarea INPUT[type='text'],.mainarea INPUT[type='password'], .mainarea TEXTAREA { 
	border: 1px solid #eee5dc; 
	border-bottom: 1px solid #e6ceb4;
	xbox-shadow: -0px 0px 3px #888888;
	xborder-radius: 5px 5px 5px 5px;
  xbackground: #ffd; 
  xheight: 2em;
  margin-bottom: 4px; 
  padding: 4px 4px 4px 0.3em; 
  max-width: 100%;
  font-size:1rem;
  }
.mainarea TEXTAREA { width:90%; padding-left:1em; }
INPUT:hover, .mainarea INPUT[type='text']:hover,.mainarea INPUT[type='password']:hover, .mainarea TEXTAREA:hover {
	box-shadow: 0px 0px 1px #88f;
	}

#qformdiv .mainarea {
	width:100%;
	min-height:auto;
	}
#closebutton { z-index:99; }

#ntntbar { position:fixed; top:0; left:0; }

/********************************************/
/*************** PAGE ELEMENTS **************/
/********************************************/
.pagearea { /*background: #ffffff;*/ clear:both; background: transparent; }
.displayarea {  background: #fff; }
.headingarea { overflow: hidden; }
	/* Note that to have these elements on the same line you need float: commands - NOT display: inline
	   Also be very careful about width: 100% - it doesn't work in tables as you'd expect */
  .headerleft { float: left; }
  .headermain {  float: left; width: 100%; height: 103px; overflow: hidden; /*background: url(mainbanner2.jpg);*/ }
  .headerright { float: left; }
.leftcolumn { padding:0 /*affects column image alignment*/ }
  .lefttop { }
  .leftmain { }
  .leftbase { }

.toplinkarea { text-align: right; }
	.toplinkline { }
	.topbuttonholder { display: inline;}
	/* function tabs at the top of the page - dependent on how org preferences have been chosen */
	.toptab { }
	.toptab:hover { }
	.toptab:active { }
.rightcolumn li { font-size: small; margin-bottom:0.5em; }
.leftcolumn li { font-size: small; margin-bottom:0.5em; }
.headingarea .nt li { font-size: small; }
	
.mainarea { }
/*.mainarea p { overflow: hidden; }*/ /*stops content pushing out (IE does auto)*/

  .text { }
  .text H4 { }

.body_wwg { background: #FFF; } /*for wysiwyg*/

.xeditbar li { margin: 0px; font-size: 0.7em; margin-right: .3em; }
.mainarea p { margin-bottom: 1em; }
.mainarea h4 { font-size: small; margin: 0px; } /* Breadcrumb */
.mainarea form { padding-top: 0.3em; overflow:auto; padding-bottom:1em; }
.mainarea .formline { margin-bottom: 0.5em; margin-left: 2em; font-size: 90%; max-width:95%; padding-bottom:0.5em; padding-top:3px; overflow:auto; line-height:1.35; }
.nt li, .nt p, .nt input { xfont-size: small; xmargin-bottom:1em; }
.nt input { margin-right: 0.3em; }

.toplinkarea li { display: inline; margin-right: 0.3em; font-size: small; }
.botlinkarea li { display: inline; margin-right: 0.3em; font-size: small; }
 
#showproduct_style .formline { padding-bottom:0; font-size:1em; }

/* form elements */
  .mainform { clear: both; }
		/*BUG - IE won't recognise margin-bottom so padding-bottom is added via conditional*/ 
	  .formleft { clear: both; float: left; width: 32%; padding-right:0.5em }
	  .formleftta { clear: both; float: left; width: 94%; }
	  .formright { float: left;  width: 62%; }
	  .formright p { }
	  #showproduct_style .formright p {  }
	  #addmod_product_style .formright p {  }
	  #addmod_product_style .formright .formright p { }
	  .formtextarea { padding-left: 4px; padding-top:0.5em; }
		/*BUG - due to clearing problems there is a height:1% conditional for IE*/ 
	  .formline { clear: both;  }
	  .formsubmit { clear: both; margin-bottom:1.5em; margin-left:5%; }


.mainform li { list-style: initial; margin-left:3em; padding-bottom: 1em; }
.mainform ul { margin-bottom: 1em; }

.rightcolumn { }
    .righttop { }
	.rightmain { }
	.rightbase { }

.footer { }
	/* Note that to have these elements on the same line you need float: commands - NOT display: inline
	   Also be very careful about width: 100% - it doesn't work in tables as you'd expect */
    .footerleft { float: left; }
	.footermain { float: left; text-align: center; font-size: small; }
	.footerright { float: left; }

.botlinkarea { text-align: center; font-size:small; }
	.botlinkline { }
	.botbuttonholder { display: inline; }

.xeditbar li { display: inline; }
.xeditbar ul { text-align: left; }
.xeditbar { text-align: left; }
/* BUTTONS */
/*padding/width used differently for tabs and buttons*/
.butop { }
.butlh { }
.butrh { }

.button { font-weight: bold; text-decoration: none; } /* a around images and link */
	.button:hover { text-decoration: none; }
	.button:active { text-decoration: none; }

.buttonMark { font-weight: bold; text-decoration: none; color: #DDD; } /*a wrapping current*/
	.buttonMark:hover { text-decoration: none; }
	.buttonMark:active { text-decoration: none; }



/* NEW May06 - Page Specific Div Selectors */
#showbasket_style { background: URL(images/showbasket.gif) left top no-repeat; }
#showbasket_style H1 { padding-left: 1.5em; }
#site_settings_style H1 { padding-left: 1.5em; }

/* NEW Jan07 - H1 title icons */
.title_icon { vertical-align: top; }

.toolitem { float: left; text-align: center; width: 90px; font-size:0.9em; padding-bottom:1em; }
.text .toolitem { float: left; text-align: center; width: 90px; }
.toolitem A:hover { text-decoration: none; }


/* List elements */
  .listform {  text-align: left; } /* form */
  /*.listtable { padding-left: 4px; padding-top: 2px; margin-bottom: 10px; clear: both; } GONE !!!!*/
	.listtitle { color: #EEEEFF; font-weight: bold; } /* H1 */
  	/*H1 margin background bug in I.E.*/

	/* for two toning lists (if used) */
	.listbg1 { background: transparent; margin-bottom: 2em;}
	.listbg2 { background: transparent; margin-bottom: 2em;}
	
	/* First list element (treated as a title or heading) */
	.listform H5 {  }
	.listwrapperLR H5 { margin-top: 0px; margin-right:6px; font-size:1em; }
	.listwrapperTB H5 {  }

	/* links within lists if first element (ie acts as heading too) */
	.lista1 { } /* a inside H5 */
	.lista1:hover { color: #AAAABB; text-decoration: underline; }

	/* links within lists */
	.lista { /*font-size: 11px;*/ color: #555555; } /*a*/
	.lista:hover { color: #AAAABB; text-decoration: underline; }
	
	p .listitem {  } /* trying to get accidental listitems in p */
	.listitem {  } /* p or div */
	.listitem p {  }
	.listitemL {  } /* when new row is created, usually for summary */
	.listitemL p {  }
	.listLogo img { border: none; min-width: 55px; margin-right: 0.5em; }
	.listpages { } /* div *//*when multiple. used in menus too*/

/* LEFT TO RIGHT DIV WRAPPER, USED ON LIST_ORGS, LIST_COMMS, LIST_PERSONS ... also news display */
	/* .listbg is on TR - padding will not apply */
	.listwrapperLR { clear: both; text-align: left; }

	.listwrapperLR td {  }
	#list_orgs_style .listwrapperLR td { }

	#list_orgs_style .listwrapperLR .listbg1 { }
	#list_orgs_style .listwrapperLR .listbg2 { }
	#list_orgs_style .listwrapperLR .listitemL { }

	#show_mylist_style .listwrapperLR td { }
	#list_comms_style .listbg1 { background-color: #eee; }

	
/*adjustment for news rowspan=2*/
	.listwrapperLR .listC1 { width: 1%; padding-right: 0.8em /*background: #999999;*/ } /*1st TD*/
	.listwrapperLR .listC1 .listLogo {  } /*1st TD*/
	.listwrapperLR TD .listitem p { }
	.listwrapperLR TD .listitemL { } /* can be P or DIV when new row is created, usually for summary */
	.listwrapperLR TD .listitemL p { }
	.listwrapperLR .row1 td { padding-top:2em;}
	.listwrapperLR TD { min-width:6em; }
	#list_persons_style .listwrapperLR TD { min-width:auto; padding-right:3px; }
	#list_images_style .listwrapperLR TD { min-width:auto; padding-right:3px; }
	#list_products_style .listwrapperLR TD { min-width:auto; padding-right:3px; }
	.listwrapperLR .listC1 { min-width:0; }
	.listwrapperLR .rightpic { border: none; }
	.listwrapperLR .leftpic { border: none; }
	/* can contain .rightpic - any borders need to be removed where they are set - change class of image? */
	/* if contain .leftpic it has been placed in summary */
	

/* TOP TO BOTTOM DIV WRAPPER, USED ON LIST_KBHEADERS */
	/* .listbg is on DIV inside TD - padding will apply */
	.listwrapperTB { clear: both; text-align: left; }
	
	.listwrapperTB .listbg1 { xbackground-color: #F3F3F3;  xborder: 1px solid #DDD; padding:0.5em; }
	.listwrapperTB .listbg2 { xbackground-color: #F3F3F3;  xborder: 1px solid #DDD; padding:0.5em; }
	.listwrapperTB TD {  }
	.listwrapperTB H5 {  }
	.listwrapperTB .listLogo { } /* a */
	.listwrapperTB .listLogo img { } /* a */
	.listwrapperTB .listitem {  } /* p or div */
	.listwrapperTB .listitemL { } /* p or div */
	.listwrapperTB .listitemL p { } /* p or div */

/*Specific topic article display types*/
.kbfull .listwrapperTB  .listbg1 { background-color: transparent; }
.kbfull .listwrapperTB  .listbg2 { background-color: transparent; margin-bottom: 1em; }
.kbfull .listwrapperTB H5 { margin-top: 0px; margin-bottom: 1em; } /*changing H5 margin to match smaller text*/
.kbfull .listwrapperTB .listitem p { margin-top: 0px; margin-bottom: 1em; } /*restoring p margin*/
.kbfull .listpages { clear: both; }
.kbblog .listwrapperTB H5 { clear:both; margin-top: 1em; margin-bottom: 1em; } /*changing H5 margin to match smaller text*/
.kbblog .listwrapperTB .listitem p { margin-top: 0px; margin-bottom: 1em; } /*restoring p margin*/
.kbblog .listbg1 { margin-bottom: 4em; }
.kbblog .listbg2 { margin-bottom: 4em; }
.kbforum {}
.kbgallery .listwrapperTB .listbg1 { padding: 10px; width: 100%; }
.kbgallery .listwrapperTB .listbg2 { padding: 10px; width: 100%; }
.kbgallery .listwrapperTB { margin-top: 0px; }
.kbads {}


/* FORUM */
.forumXwrapperLR {  }/*DIV*/
	.forumXbg1 { background: #FFF; }/* TR */
	.forumXbg1 TD { }
	.forumXbg2 { background: #EFEFEF; }/* TR */
	.forumXbg1 TD { }
	.forumXC1 {  width: 65px; }/*TD*/
	.forumXLogo { border: 1px solid #EFEFEF; }/*a around avitar*/
.forumXwrapperLR H5 {  }
	.forumXa1 { }/*a inside H5*/
	.forumXa { }/*a around quote icon?*/
	.forumXitem {  }/*DIV*/
	.forumXbg1 .forumXitem {  }/*p*/
	.forumXbg2 .forumXitem {  }/*p*/
	.forumXitemL { background: transparent;  }/*DIV*/
	.forumXitemL p { }
/* WORKED!!! */
/* FORUM WITH THREADS */
.forumXa1 img{ float: left; height: 26px; }/*img inside a inside H5*/

/********************************************/
/************ NOTANANT COMPONENTS ***********/
/********************************************/

/* THIS METHOD DOESN'T WORK IN ff *//*
.infotable ul, .infomenu ul, .orgmenu ul, .updXmenu ul, .newsXmenu ul, { margin: 0px; padding: 0px; }
.infotable li, .infomenu li, .orgmenu li, .updXmenu li, .newsXmenu li, { list-style: none; }
*/
.infotable ul { }
.infowrapper ul {  }
.infomenu ul {  }
.orgmenu ul { }
.updXmenu ul {  }
.newsXmenu ul {  }
.Notanantbox ul {}
.basketXmenu ul {  }
.infotable li { list-style: none; }
.infomenu li { list-style: none; }
.orgmenu li { list-style: none; padding:0.5em; }
.updXmenu li { list-style: none; }
.newsXmenu li { list-style: none; }
.Notanantbox li { list-style: none; }
.basketXmenu li { list-style: none; }

.headingarea .infomenu ul { display:flex; }

.infomenu {  }
.infomenu { clear: both; float: left; width: 100%; background: transparent; text-align: left; margin-bottom:1em; }
    .infotop { width: 100%;  text-align: center;  border: 0px; margin-bottom:0.5em; padding:0.5em; } /*H4*/
	.infotop a { text-decoration: none; }
	.infotable { } /*div*/
	.infowrapper { } /*div*/
	.infofirst, .infoMARKfirst { width: 100%; /*height: 18px;*/  padding: 0.5em; background: #EEEEFF;  border:0; }
	.infoMARKfirst { font-weight: bold; }
	.infoMARKa { font-weight: normal; }
    .infoitem { }
    .infoa { color: #555555; font-weight: normal; }
    .infoa:hover { }
	.infoa1 { color: #555555; font-weight: normal; }
	.infoa1:hover {  }
    .infobase { }
	.infomenu .listpages {  }

.headingarea .infotop { display: none; }
.headingarea .infobase{ display: none; }
/* These styles are needed to over-ride the inherited text settings used for title input etc. N.B. do the title styles need to be there? */
.headingarea .infomenu { line-height: normal; }
.headingarea .infowrapper {  }
/*.toplinkarea .infomenu { font-size: 0.8333em; }*/
.headingarea a, .headingarea a:hover { text-decoration: none; }

.mainarea .infomenu .infotop { display: none; }


.orgmenu {  }
.orgmenu { clear: both; width: 100%; background: transparent; text-align: left; }
    /*org top is purely ornamental*/
	.orgtop { /*width: 114px; margin: 0px; text-align: center; padding: 2px; border: solid 1px #DDDDDD;*/ display: none; }
    .orgitem { float: left; width: 100%; /*height: 18px;*/ background: #EEEEFF; border: 0px }
    .orglink { color: #555555; font-weight: normal; }
    .orglink:hover { }
    .orgbase {}
	.orgmenu .listpages { }

.headingarea .orgtop { display: none; }
.headingarea .orgbase { display: none; }
/* These styles are needed to over-ride the inherited text settings used for title input etc. N.B. do the title styles need to be there? */
.headingarea .orgmenu { line-height: normal;  }
.headingarea .orgitem { }
/*.toplinkarea .orgmenu { font-size: 0.8333em; }*/


/* Calendar elements m=month text style, x=today text style, a=linked */
.calendar { }
.calendar { clear: both; }	
	.caltable { width: 100%; padding:0.3em; border-spacing:0 0.3em; }
	.caltop { display: none; } 
	/*not currently used - H4 is labelled .calitem - should switch to .caltop*/
	/*BUG in IE7 .caltop empty div gets space around it, any border on main calendar then has a gap */
	.calbase { margin-bottom:1em; }
	.calitem { margin: 0px; text-align: center; margin-bottom:0.7em; } /*H4*/
	.callink { font-weight: bold; } /*a inside */
    .callink:hover {}
	.cal { font-size: 0.8em; color: #666666; text-align: center; margin-bottom:1px; margin-top:1px; }
	.calm { font-size: 0.8em; color: #000000; font-weight: normal; text-align: center; margin-bottom:1px; margin-top:1px;} /*bold can make calendar more than 120px wide*/
	.calx { font-size: 0.8em; color: #774400; font-weight: bold; text-align: center;  }
	.cala { font-size: 0.8em; color: #000080; background: #ffddaa; border-top: solid 1px #cc9900; border-bottom: solid 1px #cc9900; text-align: center; display: block; width:100%; }
	/*NEW SD: Marks the start and end of long events. Please leave*/
	.cal2 { background: #eebb77; }
	.caly { border-left: solid 1px #cc9900; }
	.calz { border-right: solid 1px #cc9900; }
	.cala:hover { color: #ffffff; }

#list_events_style .cal { font-size: 100%; }
#list_events_style .calm { font-size: 100%; }
#list_events_style .calx { font-size: 100%; }
#list_events_style .cala { font-size: 100%; }
#list_events_style .calendar { background: #FFFFFF; width: 100%; }
#list_events_style .caltable {  background: #FFFFFF; width: 100%; }


#personpage_style .cal { font-size: 0.8em; }
#personpage_style .calm { font-size: 0.8em; }
#personpage_style .calx { font-size: 0.8em; }
#personpage_style .cala { font-size: 0.8em; }


/* Notanant network menu list */ /*This version auto expands to horizontal */
.Notanantfull { }
.Notanantfull { clear: both; width: 100%; margin-bottom:1em; font-size:small; }
.Notanantsmall { float: right; }
	.NStatus {  }
    .Notananttop { width: 100%; height: 28px; background: URL(images/quicklinksw.gif) no-repeat; }
	/* be carefull in FF when changing background on hover */
	.Notananttop a:hover { width: 100%; height: 28px; }
	.Notanantbox { width: 100%; background: transparent; /*border: 0px; padding: 0px; margin: 0px;*/ }
	.Nitem { width: 100%; padding:0.5em; text-align: left; border: 0px  }
.Notanantbox form p { float: left; color: #555566; text-align: left; display: inline; }
.Notanantbox form { clear: both; }
	.Nformbox { text-align:right;  }
	.Nlink { color: #555566; font-weight: normal; /*padding: 0px; margin: 0px;*/ }
	.Nlink:hover { color: #FFF; text-decoration: underline; background: none; }

/*for notanantlogin*/
.Notanantbox {  }
.Notanantfull .Notanantbox {  }
.Notanantfull input { max-width: 60%; font-size:small; }

.headingarea .Notananttop { width: 100%; height: 10px; background: #555 URL(images/Ngrip.gif) top left repeat-x; }
.headingarea .Notananttop a:hover { width: 100%; height: 10px; }
/* These styles are needed to over-ride the inherited text settings used for title input etc. N.B. do the title styles need to be there? */
.headingarea .Notanantbox { line-height: normal; } /* notanantlogin */
.headingarea .Notanantfull .Notanantbox { line-height: normal;  } /* notanantfull */
.headingarea .Ntext {  }


.N_profile { background: URL(Components/ICONS/p_b_on_grey.gif) right no-repeat; }
.N_messages { background: URL(Components/ICONS/m_b_on_grey.gif) right no-repeat; }
.N_messages_new { background: URL(Components/ICONS/mn_b_on_grey.gif) right no-repeat; }
.N_messages_new .Nlink { }
.N_membership { background: URL(Components/ICONS/mm_b_on_grey.gif) right no-repeat; }
.N_links { background: URL(Components/ICONS/l_b_on_grey.gif) right no-repeat; }
.N_join { background: URL(Components/ICONS/j_b_on_grey.gif) right no-repeat; }
.N_logoff { background: URL(Components/ICONS/log_b_on_grey.gif) right no-repeat; }


/*NEW May06*/
.basketXmenu {  }
.basketXmenu { clear: both; width: 100%; /*bottom margin is on base*/ text-align: center; }
	.basketXtop { height: 12px; background: #DDDDEE; font-weight: bold; }
	.basketXtable { width: 100%; background: #FFFFFF; text-align: left; }
	.basketXwrapper { width: 100%; background: #FFFFFF; text-align: left; }
	.basketXfirst {  background: transparent URL(images/basket_arrow.gif) left no-repeat; text-align: left; }
	.basketXlink {  background: URL(images/basket.gif) left no-repeat; padding-left: 28px; }
	.basketXlink:hover { background: URL(images/basket.gif) left no-repeat; }
	.basketXa1 {  }
	.basketXa1:hover { }
	.basketXtotal { width: 100%; height: 12px; background: #FFFFFF; margin: 0px;/*It's a p*/ padding: 6px 0px 6px 0px; border-top: 2px #DDE solid; }
	.basketXbase { width: 100%; background: #DDDDEE; text-align: center; }
	.basketXbase a {  }
	.basketXbase a:hover { }


.helparea { text-align: left; }
    .helplink  { /*font-size: 9px;*/ color: #CCCCDD; }
	.helparea ul { }
	.helparea li { list-style: none; }
.headingarea .helparea li { display: inline; }


.searcharea { width: 100%; margin-bottom: 1em; }
    .searchtop {  }
	.searchform { }
	.searchinput {  text-align: left; max-width:80%; } /*input*/
	.searchlink { font-style: italic }
	.searchlink:hover {  background: none; }
	.searchbase { }
	INPUT[name='searchtext'] { max-width:90%; }


/* NOTE - H4's and H5's currently get their color from text sheets */

/* NOTE: floats can be applied to news and update menus then cleared using base DIV, order dependent though */
.newsXmenu {  }
.newsXmenu { text-align: left;  clear: both; width: 100%; }
    .newsXtop {  font-weight: bold; } /* h4 */
	/*.newsXtable { background-color: #eeeeff; border: solid 1px #555555; width: 118px; } GONE!!! */
	.newsXwrapperTB {  background: #eeeeff; border: solid 1px #999999; width: 100%; }
	/* some kind of bug when adding padding to width defined wrapperTB (IE & FF) */
	.newsXbg1 {  }
	.newsXbg2 {  }
	.newsXfirst { /*padding: 6px 6px 3px 12px; font-size: 11px; text-align: left;*/ }
    .newsXwrapperTB H5 {  } /* H5 around a */
	.newsXitem { /*padding: 2px 3px 2px 0px;*/ } /* p */
    .newsXa { } /* a */
    .newsXa:hover {}
	.newsXa1 { }
	.newsXa1:hover {}
    .newsXbase { }
	.newsXmenu img { border: none; }


/* NOTE: floats can be applied to news and update menus then cleared using base DIV, order dependent though */
.updXmenu {  }
.updXmenu { text-align: left; clear: both; width: 100%; }
/* features UL */
    .updXtop {  font-weight: bold; } /* H4 */
	.updXtable {  background: #eeeeff; border: solid 1px #999999; } /* DIV!!! */
	.updXwrapper {  background: #eeeeff; border: solid 1px #999999; } /* DIV!!! */
	/* this should change 'table' to 'wrapper' */
	.updXfirst {  } /* li around a */
    .updXitem {  }
    .updXa { } /* a */
    .updXa:hover {}
	.updXa1 { }
	.updXa1:hover {}
    .updXbase {}


/* NOTE - H4's and H5's currently get their color from text sheets */

.subsiteXlist {  }
.subsiteXlist { text-align: left;  clear: both;  }
	.subsiteXtop { font-weight: bold; } /*h4*/
	.subsXtitle {  font-weight: bold; }
	.subsXwrapperLR { border: solid #eeeeff 1px; }
	.subsXwrapperLR TD { /*border: solid #eeeeff 0px;*/ }
	.subsXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 */
	/* if background color then add in padding for top and bottom (for non-x) */
	.subsXbg1 { clear: both;  /*background: #eee;*/ background: transparent; }
	.subsXbg2 { clear: both; /*background: #ddd;*/ background: transparent; }
	.subsXLogo { float: left; width: 55px; margin-right: 10px; margin-bottom: 4px;} /* a around img */
	.subsXLogo img { border: none; }
	.subsXwrapperLR H5 { }
	.subsXwrapperTB H5 { float: left; } /*H5 around a1 link*/
	.subsXa { }
	.subsXa:hover { }
	.subsXa1 { } /* a around link */
	.subsXa1:hover { }
	.subsXitem { clear: both;  } /* p or div*/
	.subsXitem p {  }
	.subsiteXbase { }

	/* for %%subsites-x */
	.subsXwrapperTB TD {  }
	.subsXwrapperTB table .subsXLogo { float: none; }
	.subsXwrapperTB table H5 { float: none; }
	.subsXwrapperTB table .subsXbg1 { /*background: #eee;*/ background: transparent; border: none;  }
	.subsXwrapperTB table .subsXbg2 { /*background: #ddd;*/ background: transparent; border: none;  }
	.subsXwrapperTB table .subsXitem {  }


/*NOTE: .topicsXwrapperTB can appear as table or div structure */
/* XMARK appears when placed in column */
.topicsXlist {  }
.topicsXlist { text-align: left; clear: both; }
    .topicsXtop {/*color: #555555;*/ font-weight: bold; } /*h4*/
	.topicsXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 */
	.topicsXbg1 { clear: both;  background: none; padding: 1em 0em 1em 0; }
	.topicsXMARKbg1 { clear: both;  background: none;   padding: 1em;}
	.topicsXbg2 { clear: both;  background: none;  padding: 1em 0em 1em 0; }
	.topicsXMARKbg2 { clear: both;  background: none; padding: 1em; }
	.topicsXLogo { float: left; width: 55px; /*position: relative; top: 0px; left: 0px;*/ } /*a around img*/
	.topicsXLogo img { border: none; }
	.topicsXwrapperTB H5 { /*float: left;*/  } /*H5 around a1 link*/
   /* IE bug */
	.topicsXa { }
    .topicsXa:hover { }
	.topicsXa1 {  } /*a around link*/
	.topicsXMARKa1 {  }
	.topicsXa1:hover { }
	.topicsXitem { /*clear: both;*/ } /*p or div*/
	.topicsXMARKitem { /*clear: both;*/  } /*p or div*/
	.topicsXitem p { }
	.topicsXMARKitem p {  }
    .topicsXbase { }
	.topicsXlist .listpages {  }
	/* 
	NOTE: can use these rules to align summary - problem when no thumb though
	.topicsXitem { margin-left: 65px; }
	.topicsXwrapperTB table .topicsXitem { margin-left: 0px; }
	*/

	/* for %%topics-x */
	.topicsXwrapperTB TD {  }	
	.topicsXwrapperTB table .topicsXLogo { float: none; }
	.topicsXwrapperTB table H5 { float: none; font-weight:normal; }
	.topicsXwrapperTB table .topicsXbg1 { background: none; border: none; padding-right:1em; }
	.topicsXwrapperTB table .topicsXbg2 { background: none; border: none; padding-right:1em; }


.featXlist { text-align: left;  clear: both; }
.featXlist {  }
/* Title (H1) appears outside the featXbg1 div*/
/* display: none; works on title */
	.featXtop {  /*color: #555555;*/ font-weight: bold; } /* h4 */
	.featXtitle {  border: none; } /* h1 */
	.featXwrapperTB { background: transparent; }
	.featXwrapperTB TD { padding-right: 10px; }
	/* height 1% bug fix for IE6 for bg1&2 */
	.featXbg1 { padding: 1em; clear: both;  background: #EFEFEF; border: 1px solid #DDDDDD; /*border-top: none;*/  }
	.featXbg2 { padding: 1em; clear: both;  background: #EFEFEF; border: 1px solid #DDDDDD; /*border-top: none;*/ }
	.featXLogo { float: left; /*width: 55px;*/ margin-right: 10px; margin-bottom: 8px; } /*a around img*/
	.featXLogo img { border: none; }
	.featXwrapperTB H5 { float: left; margin: 0.1em; } /*H5 around a1 link*/
	.featXa { }
	.featXa:hover { }
	.featXa1 {   } /*a around link*/
	.featXa1:hover { }
	.featXlist .leftpic { }
	.featXlist .rightpic {  }
	/* IE HACK - display:inline added to item and itemL too get rid of clearing space */
	.featXitem { clear: both; } /*p or div*/
	.featXitem p { /*padding: 0px; margin: 0px;*/ }
	.featXitemL { clear: both;  } /* when new row is created, usually for summary - MAYBE TEMP */
	.featXitemL p { /*padding: 0px; margin: 0px;*/ }
	.featXbase {}

/*featured hack*/
.rightcolumn .featXLogo img { width: 55px; max-height: 55px; }


.memXlist { text-align: left; margin: 10px; /*clear: both; width: 250px;*/ }
.memXlist {  }
/* Title (H1) appears outside the memXbg1 div*/
/* display: none; works on title */
	.memXtop {  /*color: #555555;*/ font-weight: bold; } /* h4 */
	.memXtitle {  } /* h1 */
	.memXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 ---!!!! */
	.memXbg1 { /*float: left; clear: both;*/ width: 100%; min-height: 55px;   background: #EFEFEF; border: 1px solid #DDDDDD; }
	.memXbg2 { /*float: left; clear: both;*/ width: 100%; min-height: 55px;  background: #EFEFEF; border: 1px solid #DDDDDD; }
	.memXwrapperTB H5 { float: left; /*position: relative; left: 0px;*/ width: 50%; } /*H5 around a1 link and img*/
	.memXwrapperTB H5 .memXa1 { float: left; border: solid 0px #009; }
	.memXwrapperTB H5 img { }
	.memXlist .leftpic { float: none;  }
	.memXa { }
	.memXa:hover { }
	.memXa1 { } /*a around link*/
	.memXa1:hover { }
	.memXitem {  } /*p or div*/
	.memXbase { }

	.memXwrapperTB TD { /*padding-right: 10px;*/ }
	.memXwrapperTB TABLE .memXbg1{ width: auto; }
	.memXwrapperTB TABLE .memXbg2{ width: auto; }


/*NEW May06*//*
.productXlist { margin-bottom: 10px; clear: both; }
    .productXtop { margin: 0px; }
	.productXtable { }
	.productXtable td { }
	.productXbg1 { padding: 10px; }
	.productXbg2 { padding: 10px; }
	.productXfirst { }
    .productXitem { }
    .productXa { }
    .productXa:hover {}
	.productXa1 { }
	.productXa1:hover {}
    .productXbase {}
	.productXitem img { border:none; }
	*/

/*NOTE: styles copied from topics */
/*NOTE: .productXwrapperTB can appear as table or div structure */
/* XMARK appears when placed in column - does it? */
.productXlist {  }
.productXlist { text-align: left;  clear: both; }
    .productXtop {  /*color: #555555;*/ font-weight: bold; } /*h4*/
	.productXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 */
	.productXbg1 { clear: both; background: none;  }
	.productXMARKbg1 { clear: both;  background: none;  }
	.productXbg2 { clear: both;  background: none; }
	.productXMARKbg2 { clear: both;  background: none; }
	.productXLogo { float: left; width: 55px; margin-right: 10px; margin-bottom: 4px; /*position: relative; top: 0px; left: 0px;*/  } /*a around img*/
	.productXLogo img { border: none; }
	.productXwrapperTB H5 { /*float: left;*/  } /*H5 around a1 link*/
	.productXwrapperTB .productXLogo { width: 105px; }
   /* IE bug */
	.productXwrapperLR H5 {  }
	.productXa { }
    .productXa:hover { }
	.productXa1 {  } /*a around link*/
	.productXMARKa1 {}
	.productXa1:hover { }
	.productXitem { /*clear: both;*/ } /*p or div*/
	.productXMARKitem { /*clear: both;*/  } /*p or div*/
	.productXitem p { }
	.productXMARKitem p { }
    .productXbase { }
	.productXlist .listpages { }
	/* 
	NOTE: can use these rules to align summary - problem when no thumb though
	.topicsXitem { margin-left: 65px; }
	.topicsXwrapperTB table .topicsXitem { margin-left: 0px; }
	*/

	/* for %%topics-x */
	.productXwrapperTB TD { }	
	.productXwrapperTB table .topicsXLogo { float: none; }
	.productXwrapperTB table H5 { float: none; }
	.productXwrapperTB table .productXitem { clear: both; }
	.productXwrapperTB table .topicsXbg1 { background: none; border: none; }
	.productXwrapperTB table .topicsXbg2 { background: none; border: none; }





/*NEW May06 - left same as arkade*/
.shopXwrapperLR { text-align:left;}
.shopXwrapperLR {  }
	.shopXwrapperLR td { border-top: solid #eeeeee 1px; padding:4px; }
	.shopXwrapperLR tr {}
	.shopXbg1 {  } /*TR*/
	.shopXbg2 {  } /*TR*/
	.shopXC1 {}
	.shopXtitle { color: #999999; text-align: center; margin-bottom: 10px;}
	.shopXLogo img { border: none; }
	.shopXwrapperTB .shopXLogo { width: 135px; float: left; clear: both; }
	.shopXwrapperTB .shopXLogo img { }
	.shopXfirst {}
	.shopXwrapperLR h5 { margin-top:0px; margin-bottom:6px; }
	.shopXitem { } /* p */
	.shopXa {}
	.shopXa1 {} /* a inside H5 */

#showshop_style form {  }
#showshop_style input {  }

/* Dispatch Note address override */
div#despatch_note_style .listwrapperTB h5 {
	font-size: 2em;
	}
div#despatch_note_style .listwrapperTB p.listitem {
	font-size: 1.66em;
	}


/*NEW June06*/
.rssreader { margin-bottom: 2em; clear: both; text-align: left; }
	.rsstitle { padding: 0px; margin-bottom: 2px; font-weight: bold; }
	.rssdescription { padding: 0px; margin-bottom: 2px; }
	.rssitem { padding: 2px 0px 2px 0px; list-style-type: square; }
	.rssreader ul { padding: 0px; margin: 0px; margin-left: 1em; margin-top: 10px; }


.addrXlist { clear: both; }
.addrXlist { }
/* Subclasses mirror the list elements above*/
	.addrXtable {}
	.addrXfirst {  text-align: left; }
    .addrXitem {  text-align: left; }
    .addrXa { }
    .addrXa:hover {}
	.addrXa1 { }
	.addrXa1:hover {}
    .addrXbase {}

/* Breadcrumbs of recently visited sites */
.history { clear: both; text-align: left;  }
    .histtitle { font-weight: bold;  }
    .histitem { list-style: none;  }
    .histlink {  color: #555555; text-align: left; }
    .histlink:hover { color: #555555; }
.history ul {}

/* IMAGES */
/* .linepic is the default image class, it is non-floating and cleared in HTML with <br clear='both'> */
/* .leftpic and .rightpic allow images in text (%%image and %%image_r) to 'float' so text flows around them */
/* Symbolpic is so you can control the size of symbolicYN answers where you have images as symbols */
.linepic { border: none; }
.leftpic { float: left;  border: none; }
.rightpic { float: right;  border: none; }
.mainarea .leftpic, .mainarea .rightpic, .mainarea .linepic { padding-right: 10px; padding-left: 10px; padding-top: 4px; padding-bottom: 4px; max-width:90%; }
.rightcolumn .leftpic { }
.rightcolumn .rightpic {  }
.rightcolumn .linepic { }
.leftcolumn .leftpic {  }
.leftcolumn .rightpic {  }
.leftcolumn .linepic {  }
.headingarea .leftpic {  }
.headingarea .rightpic {  }
.headingarea .linepic {  }



.mainLogo {}
H1 .leftpic  { float: right; border: none;  position: relative; bottom: 1em; right: 0px; }
H1 .rightpic  { float: right; border: none; position: relative; bottom: 1em; right: 0px; }
#showtopic_style H1  { }
H1 .linepic { /*border:none; margin: 0px; padding: 0px; don't work*/ float: none; }
a img { border: none; }
.clearfix { clear: both; }

/*boxes and sidebars*/
.sidebar { }
.left {  }
.right {  }
.leftcolumn .sidebar, .rightcolumn .sidebar, .headingarea .sidebar { clear: both; }

/* SD: RIGHT HAND SIDE FLOATING SUBMENUS AND DROPDOWN MENUS - COMMENT OUT. DON'T DELETE. */
.leftout UL LI { position: relative;}
.leftout LI UL { position: absolute; left:96%; top:0px; display:none; z-index:99 }
.leftout UL LI:hover UL { display: block; width:100%; }
.leftout UL LI UL LI {  margin-bottom:0; padding-bottom:0.5em; }

/* The .dropdown position: absolute allows the dropdown menu to break out of the header but affects float:right behaviour*/
.dropdown { position: absolute; }
.dropdown ul { list-style:none; }

.dropdown UL LI { position: relative; }
.dropdown LI UL { position: absolute; left:0px; top:20px; display:none; }
.dropdown UL LI:hover UL { display: block; }

/*############################################### */
/*############################################### */


/* ERROR DISPLAY (not used consistently at present) */
.error { margin-left:8px; margin-right:8px; background: #fff; padding-left:24px; padding-bottom:3px; font-weight: bold; font-style: italic; color: #E94141; padding-top:1.5em; text-align:center; }
.error::before {
    content: url('images/noentry2.gif');
}
.siteviews { margin-bottom: 1em; margin-top:1em; }

/* Blipsite guide *//*
.guide { background: #5983D0 URL(images/blip_guideback1.gif) repeat-x; color: #FFFFFF; border: solid 2px #3366FF; height: 120px; margin-bottom: 10px; }
.guide p { margin: 0px; padding: 10px 10px 10px 10px; color: #333333; }
.guide p a { color: #003598; }
.guide p a:hover { color: #FFFFFF; }
.guide_link { background: transparent URL(images/blip_guideback.gif) no-repeat right top; padding: 10px 10px 10px 10px; height: 40px; font-size: 1.4em;  }
.guide_link p { color: #003598; padding: 0px; }
.guide_link p a { color: #FFFFFF; }
.guide_options { float: right; margin-right: 10px; }
.guide_options a { color: #333333; }
.guide_options img { margin-right: 4px; vertical-align: middle; } 
.guide br { display: none; }
#guide_end { font-size: 1.2em; }*/

/* Blipsite guide 2*/
.guide { background: #F5F5F5; color: #FFFFFF; border: solid 2px #CCCCCC; /*1% I.E. hack in style_ie6 */ margin-bottom: 10px; margin-left: 10px; }
.guide p { margin: 0px; margin-left: 5px; padding: 10px 10px 10px 33px; color: #555555; background: URL(images/blip_gbulb.gif) left 6px no-repeat; }
.guide p a { color: #555555; }
.guide p a:hover { color: #BDC943; }
.guide_link { padding: 5px 10px 15px 10px; /*height: 30px;*/  }
.guide_link p { color: #999999; padding: 0px; margin: 0px; margin-left: 0px; background: none; /*width: auto;*/ }
.guide_link p a { color: #BDC943; padding: 0px; padding-right: 35px; background: URL(images/blip_garrow.gif) right no-repeat; }
span.guide_options { float: right; margin-right: 10px; }
span.guide_options a { color: #555555; }
span.guide_options img { margin-right: 4px; vertical-align: middle; } 
.guide brd { display: none; }
#guide_end { }

/* Layout page */
#image_library_style ul { }
#image_library_style li { list-style: none;  }
#image_library_style li img { vertical-align: middle; border: solid 4px #E3E3E3; }

#layout_options_style ul { }
#layout_options_style li { list-style: none; margin-bottom: 10px; }
#layout_options_style li img {  vertical-align: middle; border: solid 4px #E3E3E3; }

#layout_options_style .toolitem { width: 130px; background: #F9F9F9; border: solid 3px #F0F0F0; }
#layout_options_style .text .toolitem { width: 130px; }
#layout_options_style .toolitem a { color: #3366FF; }
#layout_options_style .toolitem A:hover { }

/*--------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

.tabber {
}
.tabberlive {
 margin-top:0px;
}

.tabberlive ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 4px solid #b7d7ff;
 font: bold 11pt Arial, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
 color: #fff;
}

ul.tabbernav li a
{
 padding: 3px 1em;
 margin-left: 0.5em;
 border: 1px solid #ddd;
 border-bottom: 1px solid #ccc;
 background: #ccc;
 text-decoration: none;
 color: #fff;
 font-size:8pt;
 border-radius:0.3em 0.3em 0em 0em;
}

ul.tabbernav li a:hover
{
 color: #fff;
 background: #68C;
}

ul.tabbernav li.tabberactive a
{
 background-color: #9bf;
 color: #fff;
 border: #ddd;
 border-bottom: 4px solid #b7d7ff;
 font-size:11pt;
 border-radius:0.3em 0.3em 0em 0em;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #fff;
 background: #68c;
}

.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #ddd;
 border-top:0;
  overflow:auto; 
  padding-top:2em;
  padding-bottom:2em;
}

.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}
/* END tabbing */

.editable{
     color: #000;
     background-color: #ffffd3;
 }

/*editbar*/
.editbar .button { font-size: 11px; }
.editbar { background: #eae9da; margin: 0px; padding: 0px; width: 100%; /*border-top: 0px solid #343434;*/ } /*div*/
.editbar a { } /*a inside*/
.editbar a img { margin-top: 3px; margin-left: 2px; } /*img inside a*/
/*display:none when clapsed, display:inline when open - PROBLEM causes bug in CSS*/
.editbarlinkarea { margin: 0px; padding:0px;} /*div*/
/*#links { width: 770px; border: solid 0px #ff0000; margin: 0px auto 0px auto; } *//*div*/
.editlinkline { display: inline; margin-left: 5px; } /*div*/
.editbuttonholder { display: inline; margin-left: 3px; margin-right: 3px; color: #777; } /*div*/
.editbuttonholder img { margin: 0px; margin-top: 4px; margin-bottom: 3px; vertical-align: middle;  } /*img inside a*/
.edittop { } /*span*/
.edittop .button { color: #555; } /*a inside span*/
.edittop .button:hover { color: #000; } /*a inside span*/
.edittop a { } /*buttom a inside span*/
.edittop a:hover { } /*a inside span*/

/*temp*/
.editbuttonholder { display: inline; margin-bottom: 3px; }
.editbar .editlinkline { display: inline; }
.editbar .editbarlinkarea { text-align: left; }
.editbar { text-align: left; position:relative; }

#menuicon { position: absolute; float:right; top:2px; right: 15px; z-index: 999; margin-right: 24px; }
#closebutton { font-size: 10pt; color: #555; background: #fff; padding:3px; border: 1px solid #ccc; position: absolute; right:0px; top: 0px; padding-top: 6px; margin: 0;}

#closebutton {
	background: #86929e;
	color: #fff;
	font-weight: bold;
	border-radius: 16px;
	width: 34px;
	height: 34px;
	text-align: center;
	top: -12px;
	right: -12px;
	font-size: 16px;
	box-shadow: 2px 2px 4px #8888;
	border: 2px solid #fff;
	cursor:pointer;
	}
/* Update to change widths
.displayarea { width: 960px; background: #FFFFFF; }
.leftmain { width: 120px; }
.infotop { width: 114px; }
.infofirst { width: 108px; }
.infoMARKfirst {  width: 108px }
.orgitem { width: 108px;
.Notananttop { width: 120px; height: 28px; background: URL(images/quicklinksw.gif) no-repeat; }
.Notananttop a:hover { width: 120px; height: 28px; }
.Nitem { width: 108px; }
.basketXmenu { width: 120px; }
.basketXtable { width: 120px; }
.basketXwrapper { width: 120px; }
.basketXtotal { width: 120px; }
.basketXbase { width: 120px; }
.searcharea { width: 120px; }
.newsXmenu { width: 118px; }
.newsXwrapperTB  { width: 118px; }
.updXmenu { width: 118px; }
.memXbg1 { width: 130px; }
.memXbg2 { width: 130px; }
.memXwrapperTB H5 { width: 65px; }
.productXwrapperTB .productXLogo { width: 105px; }
.shopXwrapperTB .shopXLogo { width: 135px; }
*/

/* Update to change widths */
.displayarea { max-width: 960px; background: #FFFFFF; xdisplay:flex; xflex-wrap:wrap; margin-left:auto; margin-right:auto; /* display:flex breaks things*/ }
.headingarea { width:100%; max-width: 960px; }
.leftcolumn { float:left; width: 178px; }
.toplinkarea {float: right;  }
.mainarea { float: left; padding-left:2em; padding-right:2em; flex:1; }
.rightcolumn { float:right; width: 178px;  }
.footer { width:100%; max-width: 960px; }
.botlinkarea { clear:both; float: right; width:100%; max-width: 960px; }

.xeditbuttonholder { float:left; margin-right:4px; }
.xeditlinkline { display: inline; background: #ff0; border-bottom: solid 1px #bbb;}

.xleftmain { width: 180px; }
.xinfotop { width: 174px; }
.xinfofirst { width: 168px; }
.xinfoMARKfirst {  width: 168px }
.xorgitem { width: 168px; }
.xNotananttop { width: 120px; height: 28px; background: URL(images/quicklinksw.gif) no-repeat; }
.xNotananttop a:hover { width: 120px; height: 28px; }
.xNitem { width: 108px; }
.xbasketXmenu { width: 180px; }
.xbasketXtable { width: 180px; }
.xbasketXwrapper { width: 180px; }
.xbasketXtotal { width: 180px; }
.xbasketXbase { width: 180px; }
.xsearcharea { width: 180px; }
.xnewsXmenu { width: 178px; }
.xnewsXwrapperTB  { width: 178px; }
.newsXmenu { width: auto; }
.xnewsXwrapperTB  { width: auto; }
.xupdXmenu { width: 178px; }
.xmemXbg1 { width: 130px; }
.xmemXbg2 { width: 130px; }
.xmemXwrapperTB H5 { width: 65px; }
.productXwrapperTB .productXLogo { width: 105px; }
.shopXwrapperTB .shopXLogo { width: 135px; }

#cookielaw {
	position: fixed;
	bottom: 0px;
	right: 10px;
	width: 18em;
	background: rgb(57, 55, 44) none repeat scroll 0% 0%;
	color: rgb(68, 68, 68);
	padding: 8px;
	display: inline;
	border-radius: 10px 10px 0 0;
	box-shadow: 1px 1px 2px #888;
	color: #fff;
	}
#cookielaw a {
	color:#D2C108;
	}

#shadepanel { 
	position:fixed;
	z-index:199;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-attachment: fixed;
	background-color: rgba(107, 110, 119, 0.8);
}
.guide {
	margin:auto;
	position:absolute;
	left:0;
	right:0;
	top:15%;
	width:80%;
	min-width:300px;
	max-width:680px;
	z-index:299;
	min-height: 300px;
	padding: 30px;
	padding-bottom: 24px;
	opacity: 1.0;
	transition: 1s;
	border-radius:10px;
	}
#wzdclose {
	position: absolute;
	top: -12px;
	right: -12px;
	background: #63656E;
	color: #fff;
	border-radius: 16px;
	width: 22px;
	text-align: center;
	box-shadow: 1px 1px 2px #888;
	font-size: 14px;
	font-weight: bold;
	cursor:pointer;
	}
#wzdclose:hover, #wzdclose:active {
	background:#272F9F;
	}
.fix-top {
		position:fixed;
		top:10px;
		z-index:88;
		}

/* update May 18 */
		
h1, h2, h3 { margin-top:2.4em; margin-bottom: 1.2em; line-height:1.24; }
.mainform.frm_ { margin-top: 4em; }
.formsubmit { display: flex; }
.formsubmit .formleft { width: 83%; text-align: right; }
.formsubmit .formright { width: 15%; padding-left: 1em; }
.topicsXwrapperTB { }
.listwrapperLR table { border-spacing:0 1em; }
.listwrapperLR TD { min-width: auto; padding-right:1em; }
.listwrapperLR td:first-child { padding:0; }
.listwrapperLR .row1 td { padding-top: 0em; }
.listwrapperLR .listitem { padding-bottom:0em; padding-right:1em; }
.listwrapperLR .listitem.thead { font-size:0.8em; padding:0; }
.listwrapperLR .listitemL p { margin-bottom: 0.6em; }
.listwrapperLR .listitemL	{ margin-bottom: 1.2em; }
.listwrapperLR H5 { margin-bottom:0em; font-weight:normal; margin-top:-4px; }
.listwrapperLR .listC1 { padding:0; }
.listwrapperTB H5 { margin-bottom:0em; margin-top:0em; font-weight:normal; }

h3.listtitle { margin-top:0em; margin-bottom:0.5em; }

.subsXwrapperTB table H5 { font-weight:normal; padding-right:1em; margin-top:0.6em; }

#menu_style ul { margin-left: 4em; margin-top:1em; }
#menu_style li { list-style: square; margin-bottom:1.5em; text-decoration: underline #2bc8e2 }

#list_comms_style .listbg1 { background-color: #fcfcfe; }

#site_settings_style .toolbar, .toolbar { display:flex; flex-wrap:wrap; margin-bottom:0.5em }
.toolitem { flex-grow: 1; line-height:1.24; padding-top:0.5em; margin-right:0.5em; max-width:80px; overflow:hidden; border-radius:3px}

#site_settings_style .toolbar { justify-content:space-around; }
#site_settings_style .toolitem { box-shadow: none; }
#layout_options_style .toolitem { max-width:none; }
#site_settings_style .text { margin-bottom: 3em; }
#site_settings_style .text ul { margin-left:4em; margin-top:1em; }
#site_settings_style .text li { list-style: square; margin-bottom:1.5em; }

#list_products_style .mainform.frm_ { margin-top:2em; }

.iconedit { display:flex; }
.iconedit div { padding-left:2em; font-size:0.9em;}
.iconedit div input { font-size: 0.9em; }

.pagearea.noskin, .noskin .displayarea { background: #fff; }

.formright li { list-style:none; margin-left:0; }
.formright li input { margin-right:0.5em; vertical-align: top; }

#topics-W .ulrow li {
list-style:none;
margin-left:0;
max-width:50%;
}

#topics-W .ulrow li img {
max-width:100%;

}

#topics-W .ulrow {
display:flex;
flex-wrap:wrap;
border:1px solid #eef;
padding:1em;
}

#topics-W .ulrow .listfirst {
order:-1;
width:100%;
display:block;
font-weight:bold;
font-size:1.2em;
max-width:100%;
}

@media (max-width:640px) {
	.mainarea { padding-left:1em; padding-right:1em; max-width:100%; }
	.mainarea .leftpic, .mainarea .rightpic { max-width:50%; }
	.mainarea h1 .leftpic, .mainarea h1 .rightpic { display:none; }
	
	#topics-W .ulrow li { max-width:unset; }
	}