/* remember to define focus styles! */
:focus {
	outline: 0;}
	
#media-panel {
	MARGIN: 0px; 
	HEIGHT: 300px; 
	OVERFLOW: hidden}
	
.span-4{
	width: 460px;}

UL#imageList{
	LIST-STYLE-TYPE: none; 
	WIDTH: 300px; 
	HEIGHT: 15px; 
	LIST-STYLE-IMAGE: none; 
	margin-left: -5px; 
	padding: 0px;}
	
* + HTML #mainColumn #imageList LI {
	MARGIN-BOTTOM: 5px; 
	FLOAT: left;
	background-image: none;}
	
* HTML #mainColumn #imageList LI {
	MARGIN-BOTTOM: 5px; 
	FLOAT: left;
	background-image: none;}
	
.imageListIconHidden {
	WIDTH: 15px; 
	MARGIN-BOTTOM: 5px; 
	FLOAT: left; 
	HEIGHT: 0px !important; 
	VISIBILITY: hidden; 
	OVERFLOW: hidden; 
	MARGIN-RIGHT: 10px; 
	PADDING-TOP: 15x}
	
LI .imageListIconHidden {
	WIDTH: 15px; 
	MARGIN-BOTTOM: 5px; 
	FLOAT: left; 
	HEIGHT: 0px !important; 
	VISIBILITY: hidden; 
	OVERFLOW: hidden; 
	MARGIN-RIGHT: 5px; 
	PADDING-TOP: 15x}
	
.imageListIconOnlyOne {
	BACKGROUND-IMAGE: url(/images/case-studies/projectIconActive.jpg); 
	WIDTH:15px; 
	BACKGROUND-REPEAT: no-repeat; 
	MARGIN-BOTTOM: 5px; 
	FLOAT: left; 
	HEIGHT: 0px !important; 
	OVERFLOW: hidden; 
	MARGIN-RIGHT: 5px; 
	PADDING-TOP: 15px}
	
A.imageListIcon {
	BACKGROUND-IMAGE: url(/images/case-studies/projectIcon.jpg); 
	WIDTH: 15px; 
	BACKGROUND-REPEAT: no-repeat; 
	MARGIN-BOTTOM: 5px; 
	FLOAT: left; 
	HEIGHT: 0px !important; 
	OVERFLOW: hidden; 
	MARGIN-RIGHT: 5px; 
	PADDING-TOP: 15px}
	
LI A .imageListIcon {
	BACKGROUND-IMAGE: url(/images/case-studies/projectIcon.jpg); 
	WIDTH: 15px; 
	BACKGROUND-REPEAT: no-repeat; 
	MARGIN-BOTTOM: 5px; 
	FLOAT: left; 
	HEIGHT: 0px !important; 
	OVERFLOW: hidden; 
	MARGIN-RIGHT: 10px; 
	PADDING-TOP: 15px}
	
A.imageListIcon:hover {
	BACKGROUND-IMAGE: url(/images/case-studies/projectIconActive.jpg)}
	
A.imageListIconActive {
	BACKGROUND-IMAGE: url(/images/case-studies/projectIconActive.jpg); 
	WIDTH: 15px; 
	DISPLAY: block; 
	BACKGROUND-REPEAT: no-repeat; 
	MARGIN-BOTTOM: 5px; 
	FLOAT: left; 
	HEIGHT: 0px !important; 
	OVERFLOW: hidden; 
	MARGIN-RIGHT: 5px; 
	PADDING-TOP: 13px}
	
A.imageListIconActive:hover {
	BACKGROUND-IMAGE: url(/images/case-studies/projectIconActive.jpg)}
	
.videoStage {
	BACKGROUND-REPEAT: no-repeat; 
	HEIGHT: 300px}
	
.mediaItem {
	BACKGROUND-REPEAT: no-repeat; 
	MARGIN-BOTTOM: 20px; 
	HEIGHT: 300px}

.threepixelpad {
	width: 300px; /* JD 30-12-09 to allow right col */
	PADDING-BOTTOM: 0px; 
	PADDING-TOP: 0px}
	
.flashpixelpad {
	PADDING-BOTTOM: 0px; 
	PADDING-TOP: 5px}
	
.threepixelpad P {
	MARGIN-BOTTOM: 10px}

#getFlashPlayer {
	WIDTH: 799px; 
	HEIGHT: 501px; 
	FONT-SIZE: 1.7em; 
	FONT-WEIGHT: bold; 
	PADDING-TOP: 245px}
	
#fullScreenFlash {
	MARGIN-BOTTOM: 5px}

/* JD 30-12-09 to add image*/

.imagesGraphic{
	float: left;
	margin-right:5px;}

/* JD 30-12-09 to add right col */
 
#rightCol{
	float: right;
	width: 120px;}

#rightCol P{
	width: 120px;}

#rightCol .rightColQuote{
	font-weight: bold;
	color: #c0d72f;}