/* ###--- STYLING FOR SLIDER ---### */

#mybgcarousel{ 				/* CSS for specific carousel container called #mybgcarousel. */
max-width:100%;
max-height:400px;
}

/* ######### Shared CSS for various parts of carousel (in the event of multiple carousels) ######### */

div.bgcarousel{ 							/* shared CSS for main carousel container */
background: black url(images/ajaxload.gif) center center no-repeat; 		/* loading gif while caoursel is loading */
}

div.bgcarousel img.navbutton{ 		/* CSS for the nav buttons */
width:42px; 
height:42px; 
}

div.bgcarousel div.slide{ 			/* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; 		/* center image within carousel */
background-repeat: no-repeat;
background-size: cover; 			/* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

div.bgcarousel div.selectedslide{ 		/* CSS for currently selected slide */
}

div.bgcarousel div.slide div.desc{ 		/* DIV that contains the textual description inside .slide */
position: absolute;
border-radius: 9px;
color: white;
left: 35px;
top: 300px;
max-width: 655px;
padding: 7px 14px 7px 14px;
font: 14px sans-serif, Arial;
background-color: #154a80;
line-height:130%;
letter-spacing: 1px; 
word-spacing: 1px;
text-shadow: 1px 1px 1px #000; 
opacity: 0.6;				/* TRYING TO ADD TRANSPARENCY - NOT WORKING??? */
z-index:5;
}

div.bgcarousel div.selectedslide div.desc{ 	/* CSS for currently selected slide's desc div */
}

div.bgcarousel div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.bgcarousel div.slide div.desc a{
color:yellow;
text-decoration:none;
}