div#titles {  
	color: #FFFFFF; 
	background-color: #000000;
	/* background-image:url('images/titlebg.jpg'); */
	background-size:contain;
	background-repeat:repeat-x; 
	overflow: hidden;
}
a,a:link,a:visited,a:hover {background-color: transparent; color: #009933;}

#HPmarginLeft {background-color:#EDF0F5; color: #000000;}}
#HPmarginLeft a,#HPmarginLeft a:link,#HPmarginLeft a:visited,#HPmarginLeft a:hover {background-color: transparent; color: #009933;}

#HPContent {background-color: color:#EDF0F5; color: #000000; }

#HPmarginRight {background-#FFFFFF; color: #000000; text-align: center;}

#HPmarginLeft img {max-width: 100%;  margin: 0 auto;}
#HPmarginRight img {max-width: 100%;  margin: 0 auto;}

/* Custom styling */
#sibcontainer{ width: 90%;  margin: auto;  padding: 20px;  border: 0px solid #666;  background: #ECFFEC   ; }
.nivo-controlNav {margin-top: -20px;}

#HPmarginLeft {padding-top: 6em; font-size: 0.76em;}
#HPmarginLeft div {max-width: 100% !important; }
#HPmarginLeft br {display: none;}
#HPmarginLeft hr {border-color: black !important;}
#HPmarginRight {padding-top: 1.5em;}
#HPmarginRight img {padding-bottom: 1em;}


/* 
Example responsive custom styling - this rule states that when displaying on-screen (e.g. not printing) AND
the screen client width is bigger than 992px then apply this css rule (which just adds a wide, white border to 
tht left and right margins. At and below this min-width and due to rules from twitter bootstrap (the main css), 
the left/right panels fall below the main content panel and at that width this rule no longer applys

uncomment ( remove /* and */ from following section ) to try this out and resize your browser window to 
observe the effect
*/

/*
@media screen and (min-width: 992px) {
	/* this gives illusion of panel gaps until browser window too small */
	#HPmarginLeft {border-right: #FFFFFF 20px solid; }
	#HPmarginRight {border-left: #FFFFFF 20px solid; }
}
*/