/*  ----------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; }
table { font-size: 100%; /*IE reminder*/ }
P { margin:0px; padding: 0px; }
ul { margin:0px; padding: 0px; }
ul li { list-style: none; }
.leadtext {  clear: both; }
.leadtext p { }
TD {  }
H1 {  }
H2 {  }
H3 { }
H4 {  }
H5 {  }
HR { clear: both; color: #EEEEFF; height: 1px; }
SELECT { padding:0.1em; -webkit-border-radius: 3px; }
INPUT { }
TEXTAREA {  }
A {  color: #777777; text-decoration: none; }
A:hover { }

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

/********************************************/
/*************** PAGE ELEMENTS **************/
/********************************************/
.pagearea { /*background: #ffffff;*/ background: transparent; }
.displayarea { background: #FFFFFF; }
.headingarea { xoverflow: 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 { xfloat: left; clear:both; }
.leftcolumn { }
  .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 { }
	
.mainarea { }
/*.mainarea p { overflow: hidden; }*/ /*stops content pushing out (IE does auto)*/

  .text { }
  .text H4 { }

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

.editbar li { margin: 0px; font-size: 0.7em; margin-right: .3em; }
.mainarea p { margin-bottom: 1em; }
.mainarea h4 { font-size: smaller; margin: 0px; } /* Breadcrumb */
.mainarea form { padding-top: 0.3em;  }
.mainarea .formline { margin-bottom: 1em; overflow: auto; margin-left: 2em; font-size: 90%; }
.nt li, .nt p, .nt input { font-size: smaller;  margin-bottom: 0.4em; }
.nt input { margin-right: 0.3em; }

.toplinkarea li { display: inline; margin-right: 0.3em; font-size: smaller; }
.botlinkarea li { display: inline; margin-right: 0.3em; font-size: smaller; }
  
/* 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%; }
	  .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 { }
		/*BUG - due to clearing problems there is a height:1% conditional for IE*/ 
	  .formline { clear: both;  }
	  .formsubmit { clear: both; }


.mainform li {  }

.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;  }
	.botlinkline { }
	.botbuttonholder { display: inline; }

.editbar li { display: inline; }
.editbar ul { 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; } /* 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 { }
#site_settings_style H1 { }

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

.toolitem { float: left; text-align: center; width: 90px; }
.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; }
	.listbg2 { background: transparent; }
	
	/* First list element (treated as a title or heading) */
	.listform H5 {  }
	.listwrapperLR H5 {  }
	.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; }
	.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%; /*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 .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 { background-color: #F3F3F3;  border: 1px solid #DDD; }
	.listwrapperTB .listbg2 { background-color: #F3F3F3;  border: 1px solid #DDD; }
	.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: 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 {  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; }
.updXmenu li { list-style: none; }
.newsXmenu li { list-style: none; }
.Notanantbox li { list-style: none; }
.basketXmenu li { list-style: none; }

.infomenu {  }
.infomenu { clear: both; float: left; width: 100%; background: transparent; text-align: left; }
    .infotop { width: 114px;  text-align: center;  border: solid 1px #DDDDDD; } /*H4*/
	.infotop a { text-decoration: none; }
	.infotable { } /*div*/
	.infowrapper { } /*div*/
	.infofirst { float: left; width: 108px; /*height: 18px;*/  background: #EEEEFF;  border: solid 1px #DDDDDD; }
	.infoMARKfirst { float: left; width: 108px; /*height: 18px;*/ font-weight: bold; background: #EEEEFF; 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 {  }

.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; float: left; 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: 108px; /*height: 18px;*/ background: #EEEEFF; border: solid 1px #DDDDDD; }
    .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 { 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; } /*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 {  }
#list_events_style .calm {  }
#list_events_style .calx {  }
#list_events_style .cala {  }
#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 { }
.Notanantfull { clear: both; float: left; width: 100%;  background: #eeeeff; }
.Notanantsmall { float: right; }
	.NStatus {  }
    .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;*/ /*margin: 0px;*/ text-align: left; border: solid 1px #DDDDDD;  }
.Notanantbox form p { float: left; color: #555566; text-align: left; display: inline; }
.Notanantbox form { clear: both; }
	.Nformbox { float: left;  }
	.Nlink { color: #555566; font-weight: normal; /*padding: 0px; margin: 0px;*/ }
	.Nlink:hover { color: #FFF; text-decoration: underline; background: none; }

/*for notanantlogin*/
.Notanantbox {  }
.Notanantfull .Notanantbox {  }

.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: 120px; /*bottom margin is on base*/ text-align: center; }
	.basketXtop { height: 12px; background: #DDDDEE; font-weight: bold; }
	.basketXtable { width: 120px; background: #FFFFFF; text-align: left; }
	.basketXwrapper { width: 120px; 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; }
	.basketXlink:hover { background: URL(images/basket.gif) left no-repeat; }
	.basketXa1 {  }
	.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; 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: 120px; margin-bottom: 16px; }
    .searchtop {  }
	.searchform { }
	.searchinput {  text-align: left; } /*input*/
	.searchlink { font-style: italic }
	.searchlink:hover {  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 {  }
.newsXmenu { text-align: left;  clear: both; width: 118px; }
    .newsXtop {  font-weight: bold; } /* h4 */
	/*.newsXtable { background-color: #eeeeff; border: solid 1px #555555; width: 118px; } GONE!!! */
	.newsXwrapperTB {  background: #eeeeff; border: solid 1px #999999; width: 118px; }
	/* 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: 118px; }
/* 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; } /* 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;  }
	.topicsXMARKbg1 { clear: both;  background: none;  }
	.topicsXbg2 { clear: both;  background: none; }
	.topicsXMARKbg2 { clear: both;  background: none; }
	.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; }
	.topicsXwrapperTB table .topicsXbg1 { background: none; border: none; }
	.topicsXwrapperTB table .topicsXbg2 { background: none; border: none; }


.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 { clear: both;  background: #EFEFEF; border: 1px solid #DDDDDD; /*border-top: none;*/  }
	.featXbg2 { 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; } /*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; 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: 130px; min-height: 55px;   background: #EFEFEF; border: 1px solid #DDDDDD; }
	.memXbg2 { /*float: left; clear: both;*/ width: 130px; min-height: 55px;  background: #EFEFEF; border: 1px solid #DDDDDD; }
	.memXwrapperTB H5 { float: left; /*position: relative; left: 0px;*/ width: 65px; } /*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; /*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; }
	.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 { }
	.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: 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 { 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; }
.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: 16px; right: 0px; }
H1 .rightpic  { float: right; border: none; 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 { }
.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: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:8px; margin-right:8px; background: url('images/noentry2.gif') no-repeat; padding-left:24px; padding-bottom:3px; font-weight: bold; font-style: italic; color: #FF0000 }
.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;*/  }
.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 { }

/* $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 { text-align: left; background: #eae9da;  width: 100%; /*border-top: 0px solid #343434;*/ } /*div*/
.editbar a { } /*a inside*/
.editbar a img {  } /*img inside a*/
/*display:none when clapsed, display:inline when open - PROBLEM causes bug in CSS*/
.editbar ul { display: inline; } /*div*/
/*#links { width: 770px; border: solid 0px #ff0000; margin: 0px auto 0px auto; } *//*div*/
.editbar li { display: inline;  color: #777; } /*div*/
.editbar li img { margin: 0px;  vertical-align: middle;  } /*img inside a*/
.editbar li a { color: #555; } /*a inside span*/
.editbar li a:hover { color: #000; } /*a inside span*/

/* 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; }
.headingarea { width: 960px; border: #f00 solid 0px;}
.leftcolumn { float:left; width: 178px; border: #f00 solid 0px;}
.toplinkarea {float: right; width: 776px; border: #f00 solid 0px; }
.mainarea { float: left; width: 596px; border: #f00 solid 0px;}
.rightcolumn { float:right; width: 178px; border: #f00 solid 0px; }
.footer { width: 960px; border: #f00 solid 0px; }



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



.modalshade { position: absolute; 
				z-index: 999; 
				top: 0px; left: 0px; 
				width: 100%; 
				height: 300%; 
				background-attachment: fixed;
				background-color:rgba(180,200,255,0.8); 
			}

.modalbox {
				margin: auto; 
				position: absolute; 
				left: 0; right:0; top: 5%; 
				width:50%; 
				min-width:500px; 
				max-width:680px; 
				z-index: 9999; 
				background: #eee; 
				min-height: 300px; 
				padding:30px; 
				padding-bottom: 4px; 
				opacity: 1.0; 
				transition: 1s; }