/* 
	Visual component boxes 
	Version : 1.2
	Filename : _boxes.css
	Type: DEVOLVED - External / Internal  
	Date created : 31/10/2006
	Validates : CSS2, CSS2.1, CSS3
								
	Known issues: 
	- Netscape v4 does not recognise background colours or float positioning,
	- IE exhibits a problem with boxes when inside a floating container, need to apply position: relative hack,
	- Boxes are elastic by default, use break-word attribute to stop IE causing boxes to float down							
*/

/* IE hacks */
.boxsplashleader,
.boxpromo { word-wrap: break-word; }
.boxpromo .footer { position: relative; }
/* need position relative for IE bug http://www.evolt.org/article/MSIE6_bug_with_floating_divs_and_spacers/17/23899/ */
/* need this for IE bug with clearing float inside and hiding other container content */

/* Splash image box for home pages */
.boxsplashhome { font-size: 1em; margin: 0; padding: 0; overflow: hidden; height: 150px; }
.boxsplashhome .header { float: left; height: 100%; width: 450px; }
.boxsplashhome .header h2 { color: #ffffff; font-size: 1.2em; margin: 0; padding: 0.5em 0.5em 0.3em 0.6em; width: 200px; }
.boxsplashhome .header p { color: #ffffff; font-size: 1em; padding: 0 0.5em 0.3em 0.6em; width: 200px; }
.boxsplashhome .header img { float: right; }

/* Splash image box for leader pages */
.boxsplashleader { font-size: 1em; border-bottom: 10px solid #cccccc; margin: 0 0 1em 0; padding: 0; overflow: hidden; word-wrap: break-word;}
.boxsplashleader h1,
.boxsplashleader h2,
.boxsplashleader .header-title { font-weight:bold; font-size: 1.1em; color: #ffffff; margin: 0; padding: 0.3em 0 0.3em 0.6em; line-height: 1.2; }
.boxsplashleader .header { height: 1%; }
.boxsplashleader .body { height: 183px; line-height: 1.2; }
.boxsplashleader .footer { width: 90%; clear: both; }

/* Promo boxes for home and leader pages */
.boxpromo { font-size: 1em; margin-top: 0.8em; line-height: 1.2em; word-wrap: break-word; width: 100%; position: relative; }
.boxpromo .header, 
.boxpromo .body { font-size: 0.85em; padding: 0.3em 0.7em 0.3em 0.8em; }
.boxpromo .footer { margin: 0; padding: 0; height: 1px; width: 90%; clear: both;}
.boxpromo .body { padding-top: 0.8em; }
.boxpromo h2 { font-size: 1.1em; }
.boxpromo .header h2 { margin: 0; padding: 0; }
.boxpromo .body h2 { margin: 0 0 0.5em 0; padding: 0; }
.boxpromo p { margin: 0; padding: 0 0 0.5em 0; }
.boxpromo ul { margin: 0; padding: 0 0 0.5em 0; }
.boxpromo ul li { margin: 0 0 0 2em; padding: 0; }
.boxpromo img {	float: left; border: 1px solid black; background-color: #f5f5f5; margin-right: 1.1em; margin-bottom: 0.4em;padding: 0; position: relative; }

/* Advert boxes for third column on content pages */
.boxadvert { background-color: #ffccff; width: 170px; }
.boxadvert h2 { background-color: #cc3399; color: #ffffff; font-size: 0.9em; font-weight: bold; margin: 0; padding: 0.5em 0.8em;}
.boxadvert img { border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
.boxadvert-strapline { font-size: 0.85em; line-height: 1.3em; margin: 0; padding: 0.5em 1em 1.2em 1em; }

/* Pullquote boxes for content pages*/
.boxquote { background-color: #f5f5f5; font-size: 0.85em; margin: 0.5em 0 0 0; padding: 0.8em; width: 15em; float: left; margin-right: 1.4em; margin-bottom: 0.5em; }
.boxquote-quotation { padding-bottom: 1em; line-height: 1.4em; }
.boxquote-author { border-top: 1px dashed #999999; font-weight: bold; margin: 0; padding-top: 0.5em; text-align: right; width: 100%; }
.boxquote-small { width: 15em; }
.boxquote-large { width: 20em; }

/* Image boxes for content pages */
.boximage { background-color: #f5f5f5; color: inherit; display: block; font-size: 0.85em; margin: 0.8em 1.4em 0.5em 0; padding: 0; width: 152px; float: left; text-align: left; }
.boximage img { border: 1px solid #666666; }
.boximage-strapline { font-size: 1em; margin: 0; padding: 0.5em 0.6em 0.8em 0.8em; }
.boximage-strapline-hidden .boximage-strapline { display: none; }
.boximage-width-100px { width: 102px; }
.boximage-width-125px { width: 127px; }
.boximage-width-150px { width: 152px; }
.boximage-width-175px { width: 177px; }
.boximage-width-200px { width: 202px; }
.boximage-width-225px { width: 227px; }
.boximage-width-250px { width: 252px; }
.boximage-width-275px { width: 277px; }
.boximage-width-300px { width: 302px; }
.boximage-width-350px { width: 352px; }
.boximage-width-400px { width: 402px; }

/* Class to position boxes within content container */
.box-float-left { float: left; margin-right: 1.4em; margin-bottom: 0.5em; }
.box-float-right { float: right; margin-left: 1.4em; margin-right: 0.3em; margin-bottom: 0.5em; }

/* Classes used to position images in boxes */
.box-imagefloat-left img { float: left; margin-right: 1.1em; margin-bottom: 0.4em; }
.box-imagefloat-right img { float: right; margin-left: 1.1em; margin-bottom: 0.4em; }
.box-image-hidden img { display: none; }

/* Classes used to apply colour box-pallete-s for foreground and backgrounds of content boxes */
/*  
pallete				shade 0 shade 1 shade 2
red					cc0000	ff9999	ffcccc
blue				0066cc	3399ff	99ccff
green				006633	66cc66	ccffcc	// 006633 changed from 006633 on 2011-03-25
turquoise			009999	66cccc	ccffff
mauve				cc3399	ff99cc	ffccff
*/
/* Single-colour palletes */
/* Grey background */
.box-pallete-grey { background-color: #f5f5f5; color: inherit; }
.box-pallete-greyred { background-color: #f5f5f5; color: inherit; }
.box-pallete-greyred h2 { background-color: #f5f5f5; color: #cc0000; }
.box-pallete-greyblue { background-color: #f5f5f5; color: inherit; }
.box-pallete-greyblue h2 { background-color: #f5f5f5; color: #0066cc; }
.box-pallete-greygreen { background-color: #f5f5f5; color: inherit; }
.box-pallete-greygreen h2 { background-color: #f5f5f5; color: #006633; }
.box-pallete-greyturquoise { background-color: #f5f5f5; color: inherit; }
.box-pallete-greyturquoise h2 { background-color: #f5f5f5; color: #009999; }
.box-pallete-greymauve { background-color: #f5f5f5; color: inherit; }
.box-pallete-greymauve h2 { background-color: #f5f5f5; color: #cc3399; }

/* White background */
.box-pallete-white { background-color: #ffffff; color: inherit; }
.box-pallete-whitered { background-color: #ffffff; color: inherit; }
.box-pallete-whitered h2 { background-color: #ffffff; color: #cc0000; }
.box-pallete-whiteblue { background-color: #ffffff; color: inherit; }
.box-pallete-whiteblue h2 { background-color: #ffffff; color: #0066cc; }
.box-pallete-whitegreen { background-color: #ffffff; color: inherit; }
.box-pallete-whitegreen h2 { background-color: #ffffff; color: #006633; }
.box-pallete-whiteturquoise { background-color: #ffffff; color: inherit; }
.box-pallete-whiteturquoise h2 { background-color: #ffffff; color: #009999; }
.box-pallete-whitemauve { background-color: #ffffff; color: inherit; }
.box-pallete-whitemauve h2 { background-color: #ffffff; color: #cc3399; }

/* Multi-colour (shade 1 background) palletes */
.box-pallete-darkred { background-color: #ff9999; color: inherit; }
.box-pallete-darkred .header { background-color: #cc0000; color: inherit; }
.box-pallete-darkred .header h2 { background-color: #cc0000; color: #ffffff !important; }

.box-pallete-darkblue { background-color: #3399ff; color: inherit; }
.box-pallete-darkblue .header { background-color: #0066cc; color: inherit; }
.box-pallete-darkblue .header h2 { background-color: #0066cc; color: #ffffff !important; }

.box-pallete-darkgreen { background-color: #66cc66; color: inherit; }
.box-pallete-darkgreen .header { background-color: #006633; color: inherit; }
.box-pallete-darkgreen .header h2 { background-color: #006633; color: #ffffff !important; }

.box-pallete-darkturquoise { background-color: #66cccc; color: inherit; }
.box-pallete-darkturquoise .header { background-color: #009999; color: inherit; }
.box-pallete-darkturquoise .header h2 { background-color: #009999; color: #ffffff !important; }

.box-pallete-darkmauve { background-color: #ff99cc; color: inherit; }
.box-pallete-darkmauve .header { background-color: #cc3399; color: inherit; }
.box-pallete-darkmauve .header h2 { background-color: #cc3399; color: #ffffff !important; }

/*	Multi-colour (shade 2 background) box-pallete-s */
.box-pallete-red { background-color: #ffcccc; color: inherit; }
.box-pallete-red .header { background-color: #cc0000; color: inherit; }
.box-pallete-red .header h2 { background-color: #cc0000; color: #ffffff !important;	}
.box-pallete-red .boxquote-author { border-top: 1px dashed #cc0000; }

.box-pallete-blue { background-color: #99ccff; color: inherit; }
.box-pallete-blue .header { background-color: #0066cc; color: inherit; }
.box-pallete-blue .header h2 { background-color: #0066cc; color: #ffffff !important; }
.box-pallete-blue .boxquote-author { border-top: 1px dashed #0066cc; }

.box-pallete-green { background-color: #ccffcc; color: inherit; }
.box-pallete-green .header { background-color: #006633; color: inherit; }
.box-pallete-green .header h2 { background-color: #006633; color: #ffffff !important; }
.box-pallete-green .boxquote-author { border-top: 1px dashed #006633; }

.box-pallete-turquoise { background-color: #ccffff; color: inherit; }
.box-pallete-turquoise .header { background-color: #009999; color: inherit; }
.box-pallete-turquoise .header h2 { background-color: #009999; color: #ffffff !important; }
.box-pallete-turquoise .boxquote-author { border-top: 1px dashed #009999; }

.box-pallete-mauve { background-color: #ffccff; color: inherit; }
.box-pallete-mauve .header { background-color: #cc3399; color: inherit; }
.box-pallete-mauve .header h2 { background-color: #cc3399; color: #ffffff !important; }
.box-pallete-mauve .boxquote-author { border-top: 1px dashed #cc3399; }

.box-pallete-purple { background-color: #EECDFF !important; color: inherit; }
.box-pallete-purple .header { background-color: #660099 !important; color: inherit; }
.box-pallete-purple .header h2 { background-color: #660099; color: #ffffff !important; }
.box-pallete-purple .boxquote-author { border-top: 1px dashed #660099; }


.boxpromo img.no-border {border:0;}