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

/* revised 19 June 08 */


/* ---------- GENERAL TEXT ----------- */
HTML { font-size: 100%; /*IE reminder*/}
BODY { font-size: 0.75em; font-family: Arial, Helvetica, Sans-serif; color: #555555; padding: 0px; margin: 0px; }
table { font-size: 100%; /*IE reminder*/ }
P { font-family: Arial, Helvetica, Sans-serif; color: #555555; margin-top: 0px; margin-bottom: 10px; }
.leadtext { font-size: 1.166em; font-weight: bold; /*float:left; width: 70%;*/ padding: 5px 0px 5px 0px; /*margin-bottom: 10px;*/ margin-bottom: 1.0em; clear: both; }
.leadtext p { margin-bottom: 0px; }
TD { font-family: Arial, Helvetica, Sans-serif; color: #555555; }
H1 { font-size: 1.833em; font-family: Verdana, Arial, Helvetica, Sans-serif; color: #555555; font-weight: bold; margin-top: 6px; margin-bottom: 10px; border-bottom: solid 1px #EEEEFF; }
H2 { font-size: 1.5em; color: #555555; font-weight: bold; margin-top: 16px; margin-bottom: 6px; }
H3 { font-size: 1.333em; color: #555555; font-weight: bold; margin-top: 16px; margin-bottom: 6px; }
H4 { font-size: 0.916em; color: #555555; font-weight: bold; margin-top: 16px; margin-bottom: 6px; }
H5 { font-size: 1em; margin-top: 16px; margin-bottom: 6px; }
HR { clear: both; color: #EEEEFF; height: 1px; }
SELECT { font-family: Arial, Helvetica, Sans-serif; font-size: 0.8333em; color: #333333; }
INPUT { font-family: Arial, Helvetica, Sans-serif; font-size: 1em; color: #333333; }
TEXTAREA { font-family: Arial, Helvetica, Sans-serif; font-size: 1em; color: #333333; }
A { font-family: Arial, Helvetica, Sans-serif; color: #777777; text-decoration: none; }
A:hover { /*color: #999999; text-decoration: underline; float: none; background: none*/ }

/* SD HTML5 BITS */
.mainarea INPUT[type='text'],.mainarea INPUT[type='password'], .mainarea TEXTAREA { 
	border: 0px; 
	box-shadow: -0px 0px 4px #888888;
	border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border: 5px 5px 5px 5px; 
  background: #ffd; 
  height: 2em; 
  padding: 4px; }

INPUT:hover, .mainarea INPUT[type='text']:hover,.mainarea INPUT[type='password']:hover, .mainarea TEXTAREA:hover {
	box-shadow: -0px 0px 6px #8888ff;
	}

#layout_style TEXTAREA, #layout_style INPUT[type='text'] { height: 100%; background: #fff; }

.formleft img { vertical-align: top; width: 100%; }
/* SD HTML5 BITS */
.formright li { list-style:none; margin-left:none; }
.formright li input { padding-right:1em; }

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

/********************************************/
/*************** PAGE ELEMENTS **************/
/********************************************/
.pagearea { /*background: #ffffff;*/ background: transparent; }
.displayarea { width: 770px; background: #FFFFFF; }
.headingarea { float: left; 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 { }
  .lefttop { }
  .leftmain { width: 120px; }
  .leftbase { }
.toplinkarea { text-align: right; padding-top: 4px; }
	.toplinkline { }
	.topbuttonholder { display: inline; margin-bottom: 3px; }
	/* function tabs at the top of the page - dependent on how org preferences have been chosen */
	.toptab { }
	.toptab:hover { }
	.toptab:active { }
	
.mainarea { width: 100%; padding-bottom: 5px; }
/*.mainarea p { overflow: hidden; }*/ /*stops content pushing out (IE does auto)*/
  .text { padding-left: 4px; padding-right: 4px; }
  .text H4 { margin-top: 0px; margin-bottom: 10px; }

.body_wwg { background: #FFF; } /*for wysiwyg*/
  
  
/* form elements */
  .mainform { padding: 5px 5px 5px 5px; /* L/R padding? */ margin-top: 10px; clear: both; }
		/*BUG - IE won't recognise margin-bottom so padding-bottom is added via conditional*/ 
	  .formleft { clear: both; float: left; padding: 0px; margin: 0px; margin-bottom: 16px; width: 32%; font-weight: bold; }
	  .formleftta { clear: both; float: left; padding: 0px; margin: 0px; margin-bottom: 6px; width: 94%; font-weight: bold; }
	  .formright { float: left; padding: 0px 10px 0px 10px; margin: 0px; margin-bottom: 16px; width: 62%; }
	  .formright p { padding: 0px; margin: 0px; }
	  #showproduct_style .formright p { margin-bottom: 10px; }
	  #addmod_product_style .formright p { margin-bottom: 10px; }
	  #addmod_product_style .formright .formright p { margin-bottom: 10px; }
	  .formtextarea { padding: 0px; margin-bottom: 20px; padding-left: 4px; }
		/*BUG - due to clearing problems there is a height:1% conditional for IE*/ 
	  .formline { clear: both; padding: 0px; margin: 0px; }
	  .formsubmit { clear: both; padding: 0px; margin: 0px; margin-top: 16px; margin-bottom: 6px; }


.mainform li { padding-bottom: 5px; }

.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: smaller; }
	.footerright { float: left; }

.botlinkarea { text-align: center; padding-top: 10px; }
	.botlinkline { }
	.botbuttonholder { display: inline; margin-bottom: 3px; margin-left: 1%; margin-right: 1%; }

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

.button { font-weight: bold; text-decoration: none; font-size: 0.8333em; font-family: Arial, Helvetica, sans-serif; } /* a around images and link */
	.button:hover { text-decoration: none; }
	.button:active { text-decoration: none; }

.buttonMark { font-weight: bold; text-decoration: none; font-size: 0.8333em; font-family: Arial, Helvetica, sans-serif; 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: 30px; }
#site_settings_style H1 { margin-bottom: 50px; }

/* NEW Jan07 - H1 title icons */
.title_icon { }

.toolitem { float: left; margin: 4px; margin-bottom: 14px; padding: 4px; text-align: center; width: 90px; }
.text .toolitem { float: left; margin: 4px; margin-bottom: 14px; padding: 4px; text-align: center; width: 90px; }
.toolitem A:hover { text-decoration: none; }


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

	/* for two toning lists (if used) */
	.listbg1 { background: transparent; }
	.listbg2 { background: transparent; }
	
	/* First list element (treated as a title or heading) */
	.listform H5 { font-size: 1em; margin: 0px; padding: 0px; font-weight: bold; color: #555555; }
	.listwrapperLR H5 { font-size: 1em; margin: 0px; padding: 0px; font-weight: bold; color: #555555; }
	.listwrapperTB H5 { font-size: 1em; margin: 0px; padding: 0px; font-weight: bold; color: #555555; }

	/* links within lists if first element (ie acts as heading too) */
	.lista1 { font-size: 11px; font-size: 0.916em; color: #555555; } /* 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 { font-size: 1em; } /* trying to get accidental listitems in p */
	.listitem { font-size: 0.916em; margin: 0px; padding: 0px; } /* p or div */
	.listitem p { font-size: 1.09em; margin: 0px; padding: 0px; }
	.listitemL { font-size: 0.916em; margin: 0px; padding: 0px; } /* when new row is created, usually for summary */
	.listitemL p { font-size: 1.09em; margin: 0px; padding: 0px; }
	.listLogo img { border: none; margin: 2px; margin-left: 0px; }
	.listpages { font-size: 0.8333em; padding-left: 10px; } /* 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; margin-top: 6px; margin-bottom: 20px; text-align: left; }

	.listwrapperLR td { padding: 3px 3px 3px 4px; }
	#list_orgs_style .listwrapperLR td { padding: 3px 3px 4px 4px; }

	#list_orgs_style .listwrapperLR .listbg1 { }
	#list_orgs_style .listwrapperLR .listbg2 { }
	#list_orgs_style .listwrapperLR .listitemL { margin-left: 71px; margin-bottom: 6px; }

	#show_mylist_style .listwrapperLR td { padding-bottom: 10px; }
	#list_comms_style .listbg1 { background-color: #eee; }

	
/*adjustment for news rowspan=2*/
	.listwrapperLR .listC1 { width: 1%; /*background: #999999;*/ } /*1st TD*/
	.listwrapperLR .listC1 .listLogo { margin-right: 10px; } /*1st TD*/
	.listwrapperLR TD .listitem p { margin-top: 0px; padding-top: 0px; }
	.listwrapperLR TD .listitemL { margin-bottom: 35px; } /* can be P or DIV when new row is created, usually for summary */
	.listwrapperLR TD .listitemL p { margin-top: 0px; padding-top: 0px; }

	.listwrapperLR .rightpic { margin: 2px; padding: 0px; border: none; }
	.listwrapperLR .leftpic { margin: 0px; margin-bottom: 4px; margin-right: 8px; padding: 0px; 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; margin-top: 6px; margin-bottom: 20px; text-align: left; }
	
	.listwrapperTB .listbg1 { background-color: #F3F3F3; padding: 10px; border: 1px solid #DDD; }
	.listwrapperTB .listbg2 { background-color: #F3F3F3; padding: 10px; border: 1px solid #DDD; }
	.listwrapperTB TD { padding: 4px 4px 4px 4px; }
	.listwrapperTB H5 { margin-top: 4px; margin-bottom: 4px; }
	.listwrapperTB .listLogo { margin: 0px; } /* a */
	.listwrapperTB .listLogo img { margin: 0px; margin-bottom: 8px; } /* a */
	.listwrapperTB .listitem { margin-bottom: 4px; padding: 0px; } /* p or div */
	.listwrapperTB .listitemL { margin-bottom: 0px; padding: 0px; } /* p or div */
	.listwrapperTB .listitemL p { margin: 0px; padding: 0px; } /* p or div */

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


/* FORUM */
.forumXwrapperLR {  }/*DIV*/
	.forumXbg1 { background: #FFF; }/* TR */
	.forumXbg1 TD { }
	.forumXbg2 { background: #EFEFEF; }/* TR */
	.forumXbg1 TD { }
	.forumXC1 { padding: 3px 7px 0px 3px; width: 65px; }/*TD*/
	.forumXLogo { border: 1px solid #EFEFEF; }/*a around avitar*/
.forumXwrapperLR H5 { margin: 0px; margin-top: 6px; margin-left: 2px; }
	.forumXa1 { }/*a inside H5*/
	.forumXa { }/*a around quote icon?*/
	.forumXitem { margin: 5px; }/*DIV*/
	.forumXbg1 .forumXitem { font-size: 10px; padding: 0px; margin: 0px; margin-top: 6px; }/*p*/
	.forumXbg2 .forumXitem { font-size: 10px; padding: 0px; margin: 0px; margin-top: 6px; }/*p*/
	.forumXitemL { background: transparent; padding: 4px 0px 20px 78px; }/*DIV*/
	.forumXitemL p { padding: 0px; margin: 0px; }
/* 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 { margin: 0px; padding: 0px; }
.infowrapper ul { margin: 0px; padding: 0px; }
.infomenu ul { margin: 0px; padding: 0px; }
.orgmenu ul { margin: 0px; padding: 0px; }
.updXmenu ul { margin: 0px; padding: 0px; }
.newsXmenu ul { margin: 0px; padding: 0px; }
.Notanantbox ul { margin: 0px; padding: 0px; }
.basketXmenu ul { margin: 0px; padding: 0px; }
.infotable li { list-style: none; }
.infomenu li { list-style: none; }
.orgmenu li { list-style: none; }
.updXmenu li { list-style: none; }
.newsXmenu li { list-style: none; }
.Notanantbox li { list-style: none; }
.basketXmenu li { list-style: none; }

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

.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; font-size: 12px; }
.headingarea .infowrapper { font-size: 0.8333em; }
/*.toplinkarea .infomenu { font-size: 0.8333em; }*/
.headingarea a, .headingarea a:hover { text-decoration: none; }

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


.orgmenu { font-size: 0.8333em; }
.orgmenu { clear: both; float: left; width: 100%; background: transparent; padding-top: 0px; margin-bottom: 16px; 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: 108px; /*height: 18px;*/ padding: 5px 0px 5px 10px; background: #EEEEFF; margin: 0px; border: solid 1px #DDDDDD; }
    .orglink { color: #555555; font-weight: normal; }
    .orglink:hover { }
    .orgbase {}
	.orgmenu .listpages { font-size: 1em; }

.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; font-size: 12px; }
.headingarea .orgitem { font-size: 0.8333em; }
/*.toplinkarea .orgmenu { font-size: 0.8333em; }*/


/* Calendar elements m=month text style, x=today text style, a=linked */
.calendar { font-size: 0.8333em; }
.calendar { clear: both; margin-bottom: 16px; }	
	.caltable { background: #eef; width: 100%; }
	.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 { }
	.calitem { margin: 0px; text-align: center; font-size: 1.1em; padding: 2px 0px 2px 0px; } /*H4*/
	.callink { font-weight: bold; } /*a inside */
    .callink:hover {}
	.cal { font-size: 9px; color: #666666; text-align: center; margin-bottom:1px; margin-top:1px; }
	.calm { font-size: 9px; 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: 9px; color: #774400; font-weight: bold; text-align: center;  }
	.cala { font-size: 9px; 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: 1.1em; }
#list_events_style .calm { font-size: 1.1em; }
#list_events_style .calx { font-size: 1.1em; }
#list_events_style .cala { font-size: 1.1em; }
#list_events_style .calendar { background: #FFFFFF; width: 100%; }
#list_events_style .caltable {  background: #FFFFFF; width: 100%; }


#personpage_style .cal { font-size: 10px; }
#personpage_style .calm { font-size: 10px; }
#personpage_style .calx { font-size: 10px; }
#personpage_style .cala { font-size: 10px; }


/* Notanant network menu list */ /*This version auto expands to horizontal */
.Notanantfull { font-size: 0.8333em; }
.Notanantfull { clear: both; float: left; width: 100%; margin-bottom: 16px; background: #eeeeff; }
.Notanantsmall { float: right; }
	.NStatus { font-size: 0.75em; margin: 0px; margin-top: 6px; margin-bottom: 6px; }
    .Notananttop { width: 120px; height: 28px; background: URL(images/quicklinksw.gif) no-repeat; }
	/* be carefull in FF when changing background on hover */
	.Notananttop a:hover { width: 120px; height: 28px; }
	.Notanantbox { float: left; width: 100%; background: transparent; /*border: 0px; padding: 0px; margin: 0px;*/ }
	.Nitem { float: left; width: 108px; /*height: 16px;*/ padding: 5px 0px 5px 10px; /*margin: 0px;*/ text-align: left; border: solid 1px #DDDDDD;  }
	.Ntext { float: left; font-size: 0.9em; color: #555566; text-align: left; display: inline; padding: 3px; }
	.Ninput { } /*input*/
	.Nform { clear: both; }
	.Nformbox { float: left; padding: 0px; margin: 0px; }
	.Nlink { color: #555566; font-weight: normal; /*padding: 0px; margin: 0px;*/ }
	.Nlink:hover { color: #FFF; text-decoration: underline; background: none; }

/*for notanantlogin*/
.Notanantbox { font-size: 0.8333em; }
.Notanantfull .Notanantbox { font-size: 1em; }

.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; font-size: 12px; } /* notanantlogin */
.headingarea .Notanantfull .Notanantbox { line-height: normal; font-size: 10px; } /* notanantfull */
.headingarea .Ntext { font-size: 0.8333em; }


.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 { font-size: 11px; }
.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 { font-size: 0.8333em; }
.basketXmenu { clear: both; width: 120px; /*bottom margin is on base*/ text-align: center; }
	.basketXtop { height: 12px; background: #DDDDEE; margin: 0px; padding-top: 4px; padding-bottom: 4px; font-size: 10px; font-weight: bold; }
	.basketXtable { width: 120px; padding: 4px 0px 4px 0px; background: #FFFFFF; text-align: left; }
	.basketXwrapper { width: 120px; padding: 4px 0px 4px 0px; background: #FFFFFF; text-align: left; }
	.basketXfirst { margin-left: 4px; padding-left: 10px; background: transparent URL(images/basket_arrow.gif) left no-repeat; text-align: left; }
	.basketXlink { padding: 4px 0px 4px 28px; background: URL(images/basket.gif) left no-repeat; }
	.basketXlink:hover { background: URL(images/basket.gif) left no-repeat; }
	.basketXa1 { font-size: 1.1em; }
	.basketXa1:hover { }
	.basketXtotal { width: 120px; height: 12px; background: #FFFFFF; margin: 0px;/*It's a p*/ padding: 4px 0px 4px 0px; border-top: 2px #DDE solid; }
	.basketXbase { width: 120px; background: #DDDDEE; margin-bottom: 16px; padding: 4px 0px 4px 0px; text-align: center; }
	.basketXbase a { font-size: 1.1em; }
	.basketXbase a:hover { }


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


.searcharea { width: 120px; margin-bottom: 16px; }
    .searchtop {  }
	.searchform { }
	.searchinput { font-size: 0.75em; text-align: left; } /*input*/
	.searchlink { font-size: 0.75em; font-style: italic }
	.searchlink:hover { font-size: 0.75em; background: none; }
	.searchbase { }


/* 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 { font-size: 0.916em; }
.newsXmenu { text-align: left; margin-bottom: 20px; clear: both; width: 118px; }
    .newsXtop { margin: 0px; padding: 2px; padding-left: 10px; font-size: 1.0em; font-weight: bold; } /* h4 */
	/*.newsXtable { background-color: #eeeeff; border: solid 1px #555555; width: 118px; } GONE!!! */
	.newsXwrapperTB { padding: 10px 0px 10px 0px; background: #eeeeff; border: solid 1px #999999; width: 118px; }
	/* some kind of bug when adding padding to width defined wrapperTB (IE & FF) */
	.newsXbg1 { padding: 0px 10px 10px 10px; }
	.newsXbg2 { padding: 0px 10px 10px 10px; }
	.newsXfirst { /*padding: 6px 6px 3px 12px; font-size: 11px; text-align: left;*/ }
    .newsXwrapperTB H5 { margin: 0px; margin-top: 2px; margin-bottom: 4px; } /* H5 around a */
	.newsXitem { /*padding: 2px 3px 2px 0px;*/ margin: 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 { font-size: 0.916em; }
.updXmenu { text-align: left; margin-bottom: 20px; clear: both; width: 118px; }
/* features UL */
    .updXtop { margin: 0px; padding: 2px; padding-left: 10px; font-size: 1.0em; font-weight: bold; } /* H4 */
	.updXtable { padding: 10px; background: #eeeeff; border: solid 1px #999999; } /* DIV!!! */
	.updXwrapper { padding: 10px; background: #eeeeff; border: solid 1px #999999; } /* DIV!!! */
	/* this should change 'table' to 'wrapper' */
	.updXfirst { padding: 3px 0px 6px 0px; } /* li around a */
    .updXitem { padding: 3px 0px 6px 0px; }
    .updXa { } /* a */
    .updXa:hover {}
	.updXa1 { }
	.updXa1:hover {}
    .updXbase {}


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

.subsiteXlist { font-size: 0.916em; }
.subsiteXlist { text-align: left; margin-bottom: 20px; clear: both;  }
	.subsiteXtop { margin: 0px; padding: 3px; font-size: 1.27em; font-weight: bold; } /*h4*/
	.subsXtitle { height: 12px; font-weight: bold; }
	.subsXwrapperLR { padding: 10px; border: solid #eeeeff 1px; }
	.subsXwrapperLR TD { margin: 0px; padding: 0px 0px 4px 0px; /*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; padding: 10px 10px 10px 10px; /*background: #eee;*/ background: transparent; }
	.subsXbg2 { clear: both; padding: 10px 10px 10px 10px; /*background: #ddd;*/ background: transparent; }
	.subsXLogo { float: left; width: 55px; margin-right: 10px; margin-bottom: 0px; } /* a around img */
	.subsXLogo img { border: none; }
	.subsXwrapperLR H5 { }
	.subsXwrapperTB H5 { float: left; margin: 0px; margin-top: 4px; margin-bottom: 8px; padding-right: 6px; } /*H5 around a1 link*/
	.subsXa { }
	.subsXa:hover { }
	.subsXa1 { margin: 0px; padding: 0px; } /* a around link */
	.subsXa1:hover { }
	.subsXitem { clear: both; padding: 0px; padding-top: 10px; margin: 0px; } /* p or div*/
	.subsXitem p { padding: 0px; margin: 0px; }
	.subsiteXbase { }

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


/*NOTE: .topicsXwrapperTB can appear as table or div structure */
/* XMARK appears when placed in column */
.topicsXlist { font-size: 0.916em; }
.topicsXlist { text-align: left; margin-bottom: 20px; clear: both; }
    .topicsXtop { margin: 0px; padding: 3px; font-size: 1.27em; /*color: #555555;*/ font-weight: bold; } /*h4*/
	.topicsXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 */
	.topicsXbg1 { clear: both; padding: 10px; background: none;  }
	.topicsXMARKbg1 { clear: both; padding: 10px; background: none;  }
	.topicsXbg2 { clear: both; padding: 10px; background: none; }
	.topicsXMARKbg2 { clear: both; padding: 10px; background: none; }
	.topicsXLogo { float: left; width: 55px; /*position: relative; top: 0px; left: 0px;*/ margin-right: 10px; margin-bottom: 4px; } /*a around img*/
	.topicsXLogo img { border: none; }
	.topicsXwrapperTB H5 { /*float: left;*/ margin: 0px; margin-top: 0px; margin-bottom: 4px; padding: 0px; padding-right: 6px; } /*H5 around a1 link*/
   /* IE bug */
	.topicsXa { }
    .topicsXa:hover { }
	.topicsXa1 { margin: 0px; padding: 0px; } /*a around link*/
	.topicsXMARKa1 { margin: 0px; padding: 0px; }
	.topicsXa1:hover { }
	.topicsXitem { /*clear: both;*/ padding: 0px; margin: 0px; margin-bottom: 4px; } /*p or div*/
	.topicsXMARKitem { /*clear: both;*/ padding: 0px; margin: 0px; margin-bottom: 5px; } /*p or div*/
	.topicsXitem p { padding: 0px; margin: 0px; }
	.topicsXMARKitem p { padding: 0px; margin: 0px; }
    .topicsXbase { }
	.topicsXlist .listpages { font-size: 0.909em; }
	/* 
	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 { padding-right: 10px; }	
	.topicsXwrapperTB table .topicsXLogo { float: none; }
	.topicsXwrapperTB table H5 { float: none; }
	.topicsXwrapperTB table .topicsXbg1 { background: none; border: none; }
	.topicsXwrapperTB table .topicsXbg2 { background: none; border: none; }


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

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


.memXlist { text-align: left; margin: 10px; /*clear: both; width: 250px;*/ }
.memXlist { font-size: 0.916em; }
/* Title (H1) appears outside the memXbg1 div*/
/* display: none; works on title */
	.memXtop { margin: 0px; padding: 3px; font-size: 1.09em; /*color: #555555;*/ font-weight: bold; } /* h4 */
	.memXtitle { margin: 0px; padding: 4px 4px 4px 10px; font-size: 1em; } /* h1 */
	.memXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 ---!!!! */
	.memXbg1 { /*float: left; clear: both;*/ width: 130px; min-height: 55px; padding: 10px; margin-right: 4px; margin-bottom: 4px; background: #EFEFEF; border: 1px solid #DDDDDD; }
	.memXbg2 { /*float: left; clear: both;*/ width: 130px; min-height: 55px; padding: 10px; margin-right: 4px; margin-bottom: 4px; background: #EFEFEF; border: 1px solid #DDDDDD; }
	.memXwrapperTB H5 { float: left; /*position: relative; left: 0px;*/ width: 65px; padding: 0px; margin: 0px; } /*H5 around a1 link and img*/
	.memXwrapperTB H5 .memXa1 { float: left; padding-bottom: 6px; border: solid 0px #009; }
	.memXwrapperTB H5 img { padding: 0px; }
	.memXlist .leftpic { float: none; padding: 0px; margin: 0px; }
	.memXa { }
	.memXa:hover { }
	.memXa1 { font-size: 1.09em; font-weight: bold; } /*a around link*/
	.memXa1:hover { }
	.memXitem { padding: 0px 0px 3px 0px; margin: 0px; } /*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 { font-size: 0.916em; }
.productXlist { text-align: left; margin-bottom: 20px; clear: both; }
    .productXtop { margin: 0px; padding: 3px; font-size: 1.27em; /*color: #555555;*/ font-weight: bold; } /*h4*/
	.productXwrapperTB { background: transparent; }
	/* height 1% bug fix for IE6 for bg1&2 */
	.productXbg1 { clear: both; padding: 10px; background: none;  }
	.productXMARKbg1 { clear: both; padding: 10px; background: none;  }
	.productXbg2 { clear: both; padding: 10px; background: none; }
	.productXMARKbg2 { clear: both; padding: 10px; background: none; }
	.productXLogo { float: left; width: 55px; /*position: relative; top: 0px; left: 0px;*/ margin-right: 10px; margin-bottom: 4px; } /*a around img*/
	.productXLogo img { border: none; }
	.productXwrapperTB H5 { /*float: left;*/ margin: 0px; margin-top: 0px; margin-bottom: 4px; padding: 0px; padding-right: 6px; } /*H5 around a1 link*/
	.productXwrapperTB .productXLogo { width: 105px; }
   /* IE bug */
	.productXwrapperLR H5 { margin-top: 5px; }
	.productXa { }
    .productXa:hover { }
	.productXa1 { margin: 0px; padding: 0px; } /*a around link*/
	.productXMARKa1 { margin: 0px; padding: 0px; }
	.productXa1:hover { }
	.productXitem { /*clear: both;*/ padding: 0px; margin: 0px; margin-bottom: 4px; } /*p or div*/
	.productXMARKitem { /*clear: both;*/ padding: 0px; margin: 0px; margin-bottom: 5px; } /*p or div*/
	.productXitem p { padding: 0px; margin: 0px; }
	.productXMARKitem p { padding: 0px; margin: 0px; }
    .productXbase { }
	.productXlist .listpages { font-size: 0.909em; }
	/* 
	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 { padding-right: 10px; }	
	.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; margin-bottom: 20px; margin-top: 40px;}
.shopXwrapperLR { font-size: 0.916em; }
	.shopXwrapperLR td { border-top: solid #eeeeee 1px; padding: 8px 0px 8px 0px; }
	.shopXwrapperLR tr {}
	.shopXbg1 { padding: 6px 0px 4px 0px; } /*TR*/
	.shopXbg2 { padding: 6px 0px 4px 0px; } /*TR*/
	.shopXC1 {}
	.shopXtitle { color: #999999; text-align: center; margin-bottom: 10px;}
	.shopXLogo img { border: none; margin: 4px 6px 4px 14px; }
	.shopXwrapperTB .shopXLogo { width: 135px; float: left; clear: both; }
	.shopXwrapperTB .shopXLogo img { }
	.shopXfirst {}
	.shopXwrapperLR h5 { margin: 2px 8px 2px 8px;}
	.shopXitem { margin: 2px 8px 2px 8px; } /* p */
	.shopXa {}
	.shopXa1 {} /* a inside H5 */

#showshop_style form { margin-bottom: 8px; }
#showshop_style input { margin-top: 10px; }

/* 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: 20px; 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: 16px; margin-top: 10px; }


.addrXlist { margin-bottom: 10px; clear: both; }
.addrXlist { font-size: 0.916em; }
/* Subclasses mirror the list elements above*/
	.addrXtable {}
	.addrXfirst { padding: 2px 3px 2px 15px; text-align: left; }
    .addrXitem { padding: 2px 3px 2px 15px; text-align: left; }
    .addrXa { }
    .addrXa:hover {}
	.addrXa1 { padding: 1px 6px 2px 0px; font-size: 12px;}
	.addrXa1:hover {}
    .addrXbase {}

/* Breadcrumbs of recently visited sites */
.history { clear: both; text-align: left; padding: 3px; margin-bottom: 20px; margin-top: 10px; margin-bottom: 12px; }
    .histtitle { font-weight: bold; font-size: 0.916em; }
    .histitem { list-style: none; margin: 0px; margin-left: 6px; padding: 3px; }
    .histlink { font-size: 10px; color: #555555; text-align: left; }
    .histlink:hover { color: #555555; }
.history ul { margin: 0px; padding: 0px; }

/* 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 { padding-right: 10px; padding-left: 10px; padding-top: 4px; padding-bottom: 4px; border: none; }
.leftpic { float: left; padding-right: 10px; padding-left: 10px; padding-top: 4px; padding-bottom: 4px; border: none; }
.rightpic { float: right; padding-right: 10px; padding-left: 10px; padding-top: 4px; padding-bottom: 4px; border: none; }
.rightcolumn .leftpic { padding: 0px; margin-bottom: 10px; }
.rightcolumn .rightpic { padding: 0px; margin-bottom: 10px; }
.rightcolumn .linepic { padding: 0px; margin-bottom: 10px; }
.leftcolumn .leftpic { padding: 0px; margin-bottom: 10px; }
.leftcolumn .rightpic { padding: 0px; margin-bottom: 10px; }
.leftcolumn .linepic { padding: 0px; margin-bottom: 10px; }
.headingarea .leftpic { padding: 0px; margin-bottom: 0px; }
.headingarea .rightpic { padding: 0px; margin-bottom: 0px; }
.headingarea .linepic { padding: 0px; margin-bottom: 0px; }



.mainLogo {}
H1 .leftpic  { float: right; border: none; margin: 0px; margin-top: 6px; padding: 0px; position: relative; bottom: 16px; right: 0px; }
H1 .rightpic  { float: right; border: none; margin: 0px; margin-top: 6px; padding: 0px; position: relative; bottom: 16px; 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 { margin-bottom: 10px; padding: 0.333em; }
.left { margin-right: 0.8333em; }
.right { margin-left: 0.8333em; }
.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:120px; top:0px; display:none; }
.leftout UL LI:hover UL { display: block; }

/* 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:4em; margin-right:2em; background: url('images/noentry2.gif') no-repeat; padding-left:3em; padding-bottom:3px; font-weight: bold; font-style: italic; color: #FF0000; margin-top:2em; margin-bottom:3em; }
.siteviews { }

/* 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;*/ font-size: 1.4em;  }
.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 { font-size: 1.2em; }

/* Layout page */
#image_library_style ul { margin-top: 20px; }
#image_library_style li { list-style: none; margin-bottom: 10px; }
#image_library_style li img { margin-left: 10px; 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 { margin-left: 10px; 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 { }

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:0px;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
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 0.5em;
 margin-left: 3px;
 border: 1px solid #ddd;
 border-bottom: 1px solid #ccc;
 background: #ccc;
 text-decoration: none;
 color: #fff;
 font-size:8pt;
}

/*ul.tabbernav li a:link { color: #448; }*/
/*ul.tabbernav li a:visited { color: #667; }*/

ul.tabbernav li a:hover
{
 color: #fff;
 background: #68C;
 /*border-color: #aaa;*/
}

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

ul.tabbernav li.tabberactive a:hover
{
 color: #fff;
 background: #68c;
 /*border-bottom: 1px solid white;*/
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #ddd;
 border-top:0;
 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
  /*height:320px; */
 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
  overflow:auto; 
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

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

/*editbar*/
.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 { background: #eae9da; margin: 0px; padding: 0px; width: 100%; /*border-top: 0px solid #343434;*/ } /*div*/
.editbar { text-align: left; }

#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;  box-sizing: border-box; }

.fix-top {
		position:fixed;
		top:10px;
		z-index:88;
		}

#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;
	}

#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:5%;
	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: -8px;
	right: -8px;
	background: #63656E;
	color: #fff;
	border-radius: 16px;
	width: 22px;
	text-align: center;
	box-shadow: 1px 1px 2px #888;
	font-size: 14px;
	font-weight: bold;
	}
#wzdclose:hover, #wzdclose:active {
	background:#494B66;
	}
	
#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;
	}
	
/* 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 { width: 960px; background: #FFFFFF; }
.xleftmain { width: 180px; }
.xinfotop { width: 174px; }
.xinfofirst { width: 168px; }
.xinfoMARKfirst {  width: 168px }
.xorgitem { width: 168px; }
.Notananttop { width: 120px; height: 28px; background: URL(images/quicklinksw.gif) no-repeat; }
.Notananttop a:hover { width: 120px; height: 28px; }
.Nitem { width: 108px; }
.basketXmenu { width: 180px; }
.basketXtable { width: 180px; }
.basketXwrapper { width: 180px; }
.basketXtotal { width: 180px; }
.basketXbase { width: 180px; }
.xsearcharea { width: 180px; }
.newsXmenu { width: 178px; }
.newsXwrapperTB  { width: 178px; }
.updXmenu { width: 178px; }
.memXbg1 { width: 130px; }
.memXbg2 { width: 130px; }
.memXwrapperTB H5 { width: 65px; }
.productXwrapperTB .productXLogo { width: 105px; }
.shopXwrapperTB .shopXLogo { width: 135px; }
*/

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

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

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 0.5em;
 margin-left: 3px;
 border: 1px solid #ddd;
 border-bottom: 1px solid #ccc;
 background: #ccc;
 text-decoration: none;
 color: #fff;
 font-size:8pt;
}

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;
}

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 */