/* FR pages - commonly used styles */

/*=== HIGHLIGHTS ===*/

/* Theme summary with image and strapline */

.themesummary {background-color:#bfe7ff;padding:10px;margin-bottom:1em;float:left;}
.themesummary img {float:right;margin-left:10px;}
.themesummary p.strap {font-weight:bold;}

/* Links to navigational pages with icons  */

.seealso {clear:left;background-color:#bfe7ff;margin-top:1em;padding:10px;position:relative;}
.seealso h2 {margin-top:0;margin-bottom:5px;font-size:1.1em;}
.seealso ul {list-style-type:none;padding-left:0;margin-left:0;}
.seealso ul li {float:left;position:relative;padding-right:6px;width:24%;font-weight:bold;}
.seealso ul li img {float:left;margin-right:4px;}
.seealso div {clear:left;font-size:1px;line-height:1px;}

/* Summary in bold */

.synopsis {background-color:#bfe7ff;padding:10px;font-weight:bold;}

/* Warning in bold */

.warning {color:red;border:1px solid red;padding:10px;font-weight:bold;}

/*=== LISTS ===*/

/* Links (standard indent) */

.links {list-style-type:none;list-style-image: url(/images/fcdgreen_chevron.gif/$FILE/fcdgreen_chevron.gif);}

/* Links (left-aligned) */

.linksleft {list-style-type:none;margin-left:0;padding-left:0;}
.linksleft li {background-image: url(/images/fcdgreen_chevron.gif/$FILE/fcdgreen_chevron.gif);padding-left:15px;background-repeat:no-repeat;background-position:0 3px;}

/* Individual link (paragraph) */

.link {background-image: url(/images/fcdgreen_chevron.gif/$FILE/fcdgreen_chevron.gif);padding-left:15px;background-repeat:no-repeat;background-position:0 3px;}

/* Thumbnails (60x60) */

.icons {list-style-type:none;margin-left:0;padding-left:0;}
.icons li a {font-weight:bold;}
.icons li {clear:left;margin-bottom:1em; zoom:1;/*Hack stops IE double spacing*/}
.icons li img {float:left;margin-right:0.5em;margin-bottom:1em;}

/* Publications with a thumbnail image for each */

.pub_list {list-style-type:none; margin-left:0; padding-left:0;}
.pub_list li {clear:left; float:left; margin-bottom:1em;width:100%;}
.pub_list img {float:left;margin-right:10px;}

/* Space list entries */

.spaced li {margin-bottom:1em;}

/* PDF lists */

.pdflist li {margin-bottom:0.5em;}

/* Video lists */

.videolist {list-style-type:none;list-style-image: url(/images/video_bullet.gif/$FILE/video_bullet.gif);}
.videolist li {margin-bottom:1em;}

/* Individual video link (paragraph) */

.videolink {background-image: url(/images/video_bullet.gif/$FILE/video_bullet.gif);padding-left:20px;background-repeat:no-repeat;background-position:0 3px;}

/*=== (Simple) FLOATS ===*/

.floatright {float:right;margin-left:20px;margin-bottom:20px;}
.floatleft  {float:left;margin-right:10px;margin-bottom:1em;}
.clearright {clear:right;}
.clearleft  {clear:left;}
.clearboth  {clear:both;}

/*=== EVENTS ===*/

/* Event page summaries */

.frevents h2 {font-size:1.1em;border-top:1px solid #e3e9e0;padding:1em 0 0 0;margin:1em 0 0 0;}
.frevents p {margin-top:0.5em;margin-bottom:2em;}
.frevents p strong {color:#cc3333;}

/*=== NEWS ===*/

.headline {color:#333333;font-weight:bold;font-size:1.1em;}
.newsstrap {font-size:0.8em;border-bottom:1px solid #cccccc;color:#333333;}
.RHSFRnews {float:right;margin-bottom:20px;width:180px;}

/*=== CAPTIONED IMAGES ===*/

/* Declare widths inline (e.g. image width)
/* Positioning variants: float left (*l) and float right (*r)
/* Use: DIV(cimg*) caption BR IMG BR caption /DIV
/* Text in SPAN is in bold, except when in A SPAN then has magnifying glass icon (i.e. for 'enlarge' link)
/* Only links in SPAN are underlined (prevents FF underlining thumbnail links)
/* For groups of captioned images in a single block see below */

.cimg {margin-bottom:20px;padding:9px;text-align:center;color:#333333;font-size:0.8em;background-color:#f2f2f2;}
.cimg img {margin-bottom:4px;border:1px solid #333333;}
.cimg a {text-decoration:none!important;}
.cimg span {font-weight:bold;}
.cimg a span {background-image: url(/images/mag_green14.gif/$FILE/mag_green14.gif);padding-left:22px;background-repeat:no-repeat;font-weight:normal!important;text-decoration:underline!important;font-size:1.1em;}

.cimgl {clear:left;float:left;margin-right:20px;margin-bottom:20px;padding:9px;text-align:center;color:#333333;font-size:0.8em;background-color:#f2f2f2;}
.cimgl img {margin-bottom:4px;border:1px solid #333333;}
.cimgl a {text-decoration:none!important;}
.cimgl span {font-weight:bold;}
.cimgl a span {background-image: url(/images/mag_green14.gif/$FILE/mag_green14.gif);padding-left:22px;background-repeat:no-repeat;font-weight:normal!important;text-decoration:underline!important;font-size:1.1em;}

.cimgr {clear:right;float:right;margin-left:20px;margin-bottom:20px;padding:9px;text-align:center;color:#333333;font-size:0.8em;background-color:#f2f2f2;}
.cimgr img {margin-bottom:4px;border:1px solid #333333;}
.cimgr a {text-decoration:none!important;}
.cimgr span {font-weight:bold;}
.cimgr a span {background-image: url(/images/mag_green14.gif/$FILE/mag_green14.gif);padding-left:22px;background-repeat:no-repeat;font-weight:normal!important;text-decoration:underline!important;font-size:1.1em;}

/* Modifier classes */

.cimgp {padding:0px!important;background-color:white!important;}		/* Enlarge popup (no caption) */

/*=== GROUP OF CAPTIONED IMAGES ===*/

/* Row(s) of captioned images with a further single common caption in a single coloured background
/* Embed cimg DIVs in this main DIV and define overall width */

.imggroup {overflow:hidden;padding:0;margin-bottom:20px;background-color:#f2f2f2;font-size:0.8em;text-align:center;}
.imggroup span {font-weight:bold;}
.imggroup div.cimg {float:left;margin-left:5px;margin-right:5px;margin-bottom:0;font-size:1em;}
.imggroup p {clear:left;margin-top:10px;margin-bottom:5px}

/*=== IMAGE GALLERY ===*/

/* Gallery of images with (optional) 'enlarge' link and captions below
/* Declare width of LI as appropriate
/* Use UL(imggallery) LI img+link BR caption /LI /UL 
/* Text in SPAN is bold except where in A SPAN then has magnifying glass icon (i.e. for 'enlarge' link)
/* For caption to right omit BR and use imggalleryl modifier class below
/* For no image link and caption to right use imggalleryr modifier class
/* Only links in SPAN are underlined (prevents FF underlining thumbnail links) */

.imggallery {list-type-image:none;list-style-type:none;padding-left:0;margin-left:0;}
.imggallery li {float:left;margin-right:20px;margin-bottom:20px;padding:9px;text-align:center;color:#333333;font-size:0.8em;background-color:#f2f2f2;}
.imggallery li img {margin-bottom:4px;border:1px solid #333333;}
.imggallery li a {text-decoration:none!important;}
.imggallery li span {font-weight:bold;}
.imggallery li a span {background-image: url(/images/mag_green14.gif/$FILE/mag_green14.gif);padding-left:22px;background-repeat:no-repeat;font-weight:normal!important;text-decoration:underline!important;font-size:1.1em;}

/* Modifier classes */

.imggalleryp li {padding:0px!important;background-color:white!important;}	/* Enlarge popup (no caption) */
.imggalleryl li a {float:left;margin-right:10px;}				/* Image and enlarge link to left of caption */
.imggalleryl li {text-align:left!important;}					/* Image and enlarge link to left of caption */ 
.imggalleryr li {text-align:left;}						/* Image (with no link) to left, caption to right */
.imggalleryr li img {float:left;margin-right:10px;}

/*===  PARAGRAPHS WITH IMAGE ===*/

/* Image is to left or right of paragraph text (i.e. the caption)
/* Declare P width as appropriate
/* Use P IMG text */

.pimgl {clear:left;float:left;padding:9px;color:#333333;font-size:0.8em;background-color:#f2f2f2;}
.pimgl img {float:left;margin-right:20px;border:1px solid #333333;}

.pimgr {clear:right;float:right;padding:9px;color:#333333;font-size:0.8em;background-color:#f2f2f2;}
.pimgr img {float:right;margin-right:20px;border:1px solid #333333;}

/*=== BORDERED IMAGES ===*/

/* Image, no caption, that needs a border */

.bimg {border:1px solid #333333;}
.bimgl {clear:left;float:left;margin-right:20px;margin-bottom:20px;border:1px solid #333333;}
.bimgr {clear:right;float:right;margin-left:20px;margin-bottom:20px;border:1px solid #333333;}

/*=== BLOCKQUOTES ===*/

blockquote {background-color:#bfe7ff;padding:10px;}
blockquote p {margin-top:0;}

/*=== RHS ELEMENTS ===*/

/* H3 in RHS */
.rhsfrtint h3 {margin-top:0.5em;clear:left;font-size:1em;}

/* Partners area
/* Use P(rhsfrpa) A Partners area /A /P */

.rhsfrpa {background-image:url(/images/fcdgreen_chevron.gif/$FILE/fcdgreen_chevron.gif);padding:7px 7px 7px 22px;background-repeat:no-repeat;background-position:7px 10px;background-color:#ece2f0;font-weight:bold;}

/* IUFRO identification */

.rhsiufro {font-weight:bold;color:#003366;margin-bottom:1em;padding-right:7px;}

/* RSS link */

.fr_rss {margin-top:4px;margin-bottom:4px;}
.fr_rss img {float:left;margin-right:5px;padding-bottom:24px;}

/*=== MAGNIFYING GLASS ICON ===*/

.popup {vertical-align:middle;margin-right:6px;border:0!important;} /* Image in content */
.popup16 {background-image: url(/images/mag_green16.gif/$FILE/mag_green16.gif);padding-left:22px;background-repeat:no-repeat;font-weight:normal!important;}

/*=== INDEXED PAGE ANCHORS AND LINKS ===*/

/* Horizontal menu with pipe seperators (vertical line)
/* Declare menu as list with first item also using class="first" to give left pipe
/* Uses overflow to clear floated list items
/* (NB: if use display:inline rather than float get whitespace added between items)
/* Printing turned off */

.hmenu {list-style-type:none;margin-left:0;margin-right:0;padding:0;font-weight:bold;width:100%;overflow:hidden;}
.hmenu li {float:left;border-right:1px solid #999999;margin:0;padding-right:6px;padding-left:6px;color:#999999;}
.hmenu li.first {border-left:1px solid #999999;}
@media print {
.hmenu {display:none;}
}

/* Heading as an anchor; for example: Research programmes A to Z */
h2 a.anchor {border-bottom:2px solid #ece2f0;color:#5c2077;width:100%;display:block;}

/* Link to top of page or up to another page */
.toplink {clear:both;}

/* In main page content */
.toplink a {padding-left:20px;background-image:url(/images/arrowupg.gif/$FILE/arrowupg.gif);background-repeat:no-repeat;}

/* In RHS column */
.RHSFRtint p.toplink a {padding-left:20px;background-image:url(/images/arrowupp.gif/$FILE/arrowupp.gif);background-repeat:no-repeat;}

/*=== PUBLICATIONS ===*/

/* On publications pages */
.frpublications {margin-top:20px;} /* Compensate for RHS alignment */
.frpublications h2 {font-size:1.1em;}
.frpublications h2 sup {font-size:0.9em;font-weight:normal;}
.frpublications HR {clear:right;color:#cccccc;background-color:#cccccc;border:0;height:1px;}
.frpublications UL{list-style-image: url(/images/frpurple_sq7.gif/$FILE/frpurple_sq7.gif)};

/* In right hand column
/* Prevents Firefox underlining cover image when a link
/* Use P(rhsdoc) <A Cover image BR publication name A><BR>size<BR>Description </P> */
/*.rhsdoc a img {display:block;} - old version
/*.rhsdoc a br {display:none;} - old version */
.rhsdoc a img {vertical-align:middle;}
.rhsdoc {clear:left;} /* Hack that enables display of doc-type icon in IE */
.rhsdoc img {float:left;} /* Ditto */
.rhsdoc br {clear:left;} /* Ditto */

/*=== OFFICE DETAILS ===*/

/* Left & right block on office pages
/* Use DIV(class)...</DIV>, define width of RH block by inline style to suit photo (max 375px) */
.officel {float:left;width:350px;margin-right:20px;}
.officer {float:right;margin-bottom:1em;text-align:left;margin-top:1.5em;padding:10px;background-color:#f2f2f2;}

/* Office location map */
.officemap a img{margin-top:-5px;vertical-align:middle;} /*Stop FF underlining map link*/

/*=== ORGANISATION CHARTS ===*/

/* Use DIV(orgchart) P (chart name) UL /UL /DIV */

.orgchart {padding:5px 10px 5px 10px;background-color:#e3ece4;width:70%;}
.orgchart p {margin-bottom:0;font-weight:bold;color:#333333;margin-top:0;}
.orgchart ul {border-left:1px solid #333333;padding-left:0;margin-left:4px;list-style-type:none;padding-top:5px;margin-top:0;margin-bottom:0;}
.orgchart ul li {background-image:url(/images/frgrey_line.gif/$FILE/frgrey_line.gif);background-repeat:no-repeat;background-position:center left;padding-left:20px;margin-bottom:5px;}

/*=== TREE SPECIES AND PROVENANCE ===*/
/* Use <em></em> for latin name text class for <p> */

.latinname {font-size:1.3em;color:red;font-weight:bold;}

/*=== RESEARCH FORESTS BANNER ===*/
/* Comprises five 140px wide images seperated by 1px (total 704px) with text underneath
/* Note bg colour is as .synopsis class
/* Use DIV(rf_banner) img img img img img(right) DIV text /DIV /DIV */

.rf_banner {float:left;color:black;font-size:0.9em;font-weight:bold;padding-bottom:5px;margin-bottom:2em;background-color:#bfe7ff;width:704px;}
.rf_banner img {border-right:1px solid white;}
.rf_banner img.right {border:0;}
.rf_banner div {padding-left:5px;}

/*=== PRINTING ===*/

/* Control layout of printed pages */

@media print {
#pagebanner {display:none;width:0;height:0;}	/* Not printed */
.imggallery li {float:none;}
.officel {float:none;}
.officer {float:none;}
}