#utilities 
{
	float: left;
	width: 158px;		/* should be 160 ?? - YES - but poss risky to change?? - miks - 07/2008 */
	line-height: 1.4em;	/* added to prevent IE peekaboo bug - possibly better elsewhere?? - miks */
	font-size: 0.9em;	/* ?? */

	/* added Aug 2009 - to allow image positioning within utilities */
	margin-top: 0px;
	position: relative !important;
}

#utilities div
{
	background-color: #F2F2F2;		/* default - override using specific utility ID if nec */	
	margin-bottom: 10px;			/* separate utilities vertically... */
	border-bottom: 1px solid #fff; 		/* fix for margin-collapse */
	padding-top: 8px;
}
#utilities div div
{
	border-bottom-width: 0;		/* remove border from DIVs within utility DIVs */
}

#utilities div.first-item		/* deprecated - use first-child selector */
{
	background-position: top right;
	background-image: url(generic/images/curve-top.gif);
}
#utilities div:first-child
{
	background-position: top right;
	background-image: url(generic/images/curve-top.gif);
}
#utilities div div:first-child
{
	background-image: none;		/* remove curve from DIVs within utility DIVs, put in inappropriately by previous rule */
}




/* ----- utility promo styles ------- */
#utilities .promo .panel-footer a
{
	color: #fff;
}
/* promos are the only panel instances in a utilities DIV - remove unnecessary formatting */
#utilities .panel, #utilities .promo
{
	padding: 0;		
	border-bottom: none;
}
#utilities .panel-footer
{
	padding-top: 4px;	/* reinstate correct value from nhm-page.css, overwritten above */
}



/* ----- utility content styles ----- */
#utilities h5
{
	margin: 0px 5px 5px 10px;
	font-size: 1.2em;
}
#utilities h6
{
	/* color: #000;
	font-weight: normal; */
	margin-left: 10px;	
}

#utilities p		
{ 
	margin: 0px 10px 10px 10px; 
}
#utilities address		
{
	margin-bottom: 10px;
}
#utilities form		{ padding: 0px 10px 10px 10px; }
#utilities input	{ margin: 0; }
#utilities fieldset 	
{ 
	border-width: 0; 
	vertical-align: top;
}

#utilities ul		{ padding: 5px 5px 10px 12px; clear: both; }
#utilities ul li, #utilities ol li
{
	padding-bottom: 2px;
	background-position: left 0.5em;	/* hack slightly for IE ? */
}

#utilities object {margin:0;} /* added for new flash promos */

/* see also: #utilities ul li in content.css */


#utilities ol
{
	margin-left: 30px;
	margin-bottom: 10px;
}




/* ----- links -------------------------------- */

/* links in LI - bold and black - eg toolbox */
#utilities li a:link, #utilities li a:visited, #utilities li a:active
{	
	color: #000;
	font-weight: bold;
}


#utilities a.point-right 
{
	display: block;
	text-align: right;
	font-weight: bold;
	margin-right: 10px;
	margin-bottom: 10px;
}
#utilities p a.point-right, #utilities .panel-footer a.point-right 
{
	margin-right: 0px;		/* re-adjust from previous rule-block for other a.point-right */
	margin-bottom: 0px;
}



/* ----- utility search styles ----- */
/* BETTER TO USE A "SEARCH" CLASS ON THE UTILITY ITSELF ?? - MAYBE NOT, AS STILL NEED TO DISCRIMINATE THE TWO INPUTS... */

#utilities .search-box 
{
	width: 109px;		/* was 110px - but Mac FireFox wraps submit graphic - miks - 06/2009 */
	margin-top: 0;
}
#utilities input.search-go 
{
	width: 19px;
	position: relative;
	top: 4px;		/* needs adjustment? */
	margin-right: 0px !important;
}




/* ----- other specific utilities ---------------------------------------------- */

/* ----- taxonomy (originally for sotd 2009) ----- */
#utility-taxonomy h6 { margin-bottom: 10px; }



/* ----- share-this ----- */
/* last-child would be better - but not supported by IE */
#utility-share-this div.menu ul li.last-item
{
	padding-right: 0px ! important;		/* so less padding on last icon - avoids wrapping */
						/* maybe best to add this to .menu class definition in nhm-page.css ??? */
}


/* ----- nature-plus "look for" (move to n-p stylesheet??) ----- */
/* maybe need a class to position images like this ?? */
#utility-lookfor .narrow, #utility-lookfor ul 
{
	width: 120px;
}
#utility-lookfor
{
	position: relative;
	width:230px;
}
#utility-lookfor img
{
	position:absolute;
	bottom:0;
	right:0;
}


/* ----- RSS ----- */
#utility-feeds h5
{
	background-image: url("/includes/images/generic/icons/filetypes/rss-14x14.gif");
	background-position: right center;
	margin-right: 8px;
}



/* ----- SPONSORS ----- */
/* CHECK THIS - MIGHT BE VERY DIFFERENT TO ACTUAL OUTPUT */
/* 
original intention was that multiple sponsors would be listed in a UL.
However, it seems this is not what will happen (instead, they are just added 
as sucessive div.sponsor), so some of this CSS is probably redundant.
- miks - 07/2008
*/
#utilities #utility-sponsors ul li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 5px;
}

#utilities #utility-sponsors div.sponsor
{
	border: 0px solid red;
}	


#utilities #utility-sponsors div.sponsor a
{
	display: block;
	background-position: left 0.5em;		/* hack slightly for IE ? 0.6 ?? */
	padding-left: 12px;
	color: #000;
	font-weight: bold;
}
#utilities #utility-sponsors a.logo
{
	background-image: none !important;
	padding-left: 0 !important;
	margin-bottom: 5px;
	
}
#utilities #utility-sponsors a.logo img
{
	margin: auto;
	/* position: relative;
	left: -12px;			THIS WORKS - but check with real mark-up */

}
#utility-sponsors div.sponsor
{
	margin: 0px 10px 10px 10px; 
}
#utility-sponsors ul div.sponsor	/* this is prob not in use now - sponsor DIVs are inserted into the utility directly - miks - 08/2008 */
{
	border: 0px solid red;
	padding: 0px;
	background-image: none;		/* otherwise :first-child rule puts in background curve */
}
#utility-sponsors div.sponsor p		/* for non-linked sponsor text */
{
	font-weight: bold;
	margin-left: 0px;
	margin-right: 0px;
}


/* ----- "fantastic fact" ----- */
div#fantastic-fact 
{
	background-position: bottom left;
	background-image: url(generic/images/curve-bot.gif);
	padding-top: 0;
}
div#fantastic-fact img
{
	margin-bottom: 10px;
}

/*-------- social media icons -------- */

#utilities .utility-social 
{	
	border-top:1px solid #fff;
	margin:5px 10px;
}
#utilities .utility-social ul, #utilities .utility-social h5 
{
	padding-left: 0;
	margin-left: 0;
}
#utilities .utility-social li 
{
	padding: 3px 0 3px 21px;
	background-position: left center;
}
#utilities .utility-social .facebook 	{background-image:url(generic/images/social-networks/16px/facebook.gif);}
#utilities .utility-social .twitter 	{background-image:url(generic/images/social-networks/16px/twitter.gif);}
#utilities .utility-social .youtube 	{background-image:url(generic/images/social-networks/16px/youtube.gif);}




/*-------- help ---------------------- */
#utility-help 
{
	background-position: right top;
	background-repeat: no-repeat;
}
#utility-help h5 
{
	background-position: left center
	background-repeat: no-repeat;
	padding-left: 18px; 	
}



/* -------- language ------------------ */
#utility-language li.english
{
	padding-left: 21px;
	background: url(/includes/images/generic/flags/16x11px/gb.gif) left center no-repeat;
}
#utility-language li.welsh
{
	padding-left: 21px;
	background: url(/includes/images/generic/flags/16x11px/wales.gif) left center no-repeat;
}
#utility-language li.gaelic
{
	padding-left: 21px;
	background: url(/includes/images/generic/flags/16x11px/scotland.gif) left center no-repeat;
}


/* -------- blog posts ---------------- */
#utility-blog-posts ul
{
	padding-left: 0px;
}
#utility-blog-posts ul li
{
	background-image: none ! important;
	padding-left: 0px;
}







/* -------- seasonal background -------- */
#utilities div.seasonal 
{
	background-image: url(generic/images/backgrounds/bg-seasonal-utility.jpg) !important;
}
#utilities div.seasonal .image 
{
	padding-top: 0;	
}



/* ----------- bookmarks --------------------*/

#utilities .utility-bookmarks h5 
{
	padding:1px 0 1px 20px;
}



/* ----------- bookmarks overlay --------------------*/
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
}
#bookmark-this .window {
	position:absolute;
    left:0;
    top:0;
    display:none;
    z-index:9999;
	text-align:left;
	-moz-border-radius-topright:12px;
	-webkit-border-top-right-radius:12px;
	-khtml-border-top-right-radius:12px;
	border-top-right-radius:12px;
	padding:5px;
	width:600px;
}
#bookmark-this h2 {
	color:#fff;
	padding-left:30px;
	background: url(generic/images/icon-bookmark.gif) left center no-repeat;
	margin-left:15px;
}
#bookmark-this .content {
	background-color:#fff;
	padding:15px 5px;
	margin:5px 0 0;
	-moz-border-radius-topright:12px;
	-webkit-border-top-right-radius:12px;
	-khtml-border-top-right-radius:12px;
	border-top-right-radius:12px;
}
#bookmark-this fieldset {
	padding:0 10px;
	margin:0;
	border:0;
}
#bookmark-this .buttons {
	text-align:right;
}
#bookmark-this span {
	font-size:.8em;
	color:#747474;
	font-weight:normal;
}
#bookmark-this label {
	font-size: 1.1em;
	font-weight:bold;
	padding:20px 0 10px;
	display:block;
}
#bookmark-this textarea {
	width:550px;
	height:85px;
	border:1px solid #747474;
	margin:0;
	padding:3px;
	font-size:1.1em;
}
#bookmark-this fieldset p {margin:0 0 10px;}

#jive-bookmark-tags {
	border:1px solid #747474;
	padding:3px;
	font-size:1.1em;
}
#bookmark-this textarea:focus, #jive-bookmark-tags:focus {border:1px solid #0099d9;}
.jive-form-taglist {
	font-size:.9em;
}
.jive-form-taglist p {
	margin-bottom:0;
	padding-top:8px;
}
.jive-form-taglist ul {
	margin:0;
	padding:0;
}
.jive-form-taglist ul li {
	display:inline;
	margin:0;
	padding:0 0 0 5px;
}
.jive-form-taglist .jive-tag-selected {
	background-color:#f2f2f2;
}
#details {
	background-color:#f2f2f2;
	padding:10px 0;
	margin:0 10px;
	border:1px solid #e4e4e4;
}
#links {
	margin:20px 0 0 25px;
	padding: 0 0 0 20px;
	background-position: top left;
	background-repeat:no-repeat;
}
#links h4 {
	margin-bottom:0;	
}
.discuss {
	background-image:url(generic/images/icon-discuss.gif);
}
.view {
	background-image:url(generic/images/icon-bookmark.gif);
}