/* CSS Document */
/*********************
 Page/White Bubble
**********************/
html {
	margin : 0px;
	padding : 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #666666;
	height:100%;
    margin-bottom: 1px;
}
	
body {
	margin : 0px;
	padding : 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #666666;
	height:100%;
}
h1 {
	color: #400080;
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	border: none;
	padding-left: 15px;
	border
	padding-right: 15px;
}
.title {
	color: #400080;
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	border: none;
	padding-left: 15px;
	padding-right: 15px;
}
p.menuheaders {
  margin: 0 0 2pt 0;
  vertical-align:top;
}
.paragraph {
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	}
a { 
	//color: #406f40;
	//color: #2c63f5;
	color: #009933;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	border: none;
	text-decoration: none;
}


table {
	/* height:100%;  */
	vertical-align:top;
}
/*********************
 Bubble Backgrounds
**********************/
.orangebubble{
	background-color: #ffb829;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 6px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	height:125;
	vertical-align:top;
}
.nowplay {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}
.bluebubble{
	background-color: #6699FF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	vertical-align:top;
}
.redbubble{
	background-color: #FFFF99;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	vertical-align:top;
	border: medium solid #000000;
}
.whitebubble{
	background-color: #FFFFFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	vertical-align: top;
	text-align: left;
}
/*********************
 Orange Bubble Header
**********************/
.name {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align:center;
	padding:0px;
}
.tagline {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	text-align:center;
	padding:0px;
}
h6.nowplaying {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight:bold;
	border: none;
	padding-top:0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 15px;
}
/*********************
 Blue Bubble Links
**********************/
a.submenulink {
	color: #FFFFFF;
	font-size: 9pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-left: 36px; /*  was 15px*/
	text-decoration:none;
}
.menulink {
    margin-left: 19px;
	color: #ffb829;
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	border: none;
	padding: 5px;
	text-decoration: none;
}
a:hover {
	text-decoration:underline;
}
/*********************
 White Bubble
**********************/
.contact {
	vertical-align:bottom;
	text-align:center;
	padding:15px;
}
p.list {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	border: none;
	padding:0px;
}
.breadcrumb {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 8pt;
	border: none;
	text-decoration: none;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
a.firstbreadcrumb { 
	color: #009933;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 8pt;
	border: none;
	text-decoration: none;
	margin-left:15px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
a.breadcrumb { 
	color: #009933;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 8pt;
	border: none;
	text-decoration: none;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
.arrows {
	color: #8f67ad;
}.upright {
	clear: none;
	float: right;
}
.floatright {
	float: none;
	z-index: 9;
	position: absolute;
	right: 170px;
	top: 370px;
	left: 217px;
	width: 125px;
	height: 118px;
}
.Float-R {
	float: right;
	z-index: -9;
}
.invisible {
	visibility: hidden;
}
.bottomright {
	position: fixed;
	right: 150px;
	bottom: 20px;
}
.newsflash {
	background-color: #FF3E43;
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14pt;
	vertical-align:top;
	border: thick solid #00DF00;
}
/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */

/**
 * Styling the container (the wrapper)
 * 
 * position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.
 */

#slideshow {
    position:relative;
    width:800px;
    height:400px;
    overflow:hidden;
    border:8px solid #ccc;
}

/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
 * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

#slideshow img {
    position:absolute;
    width:800px;
    height:400px;
    top:50%;
    left:50%;
    margin-left:-400px;
    margin-top:-200px;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 10s;
       -moz-transition-property: opacity, -moz-transform;
       -moz-transition-duration: 3s, 10s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 3s, 10s;
         -o-transition-property: opacity, -o-transform;
         -o-transition-duration: 3s, 10s;
            transition-property: opacity, transform;
            transition-duration: 3s, 10s;
}

/**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
 */

#slideshow img  {
    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
            transform-origin: bottom left;
}

#slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}

#slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
       -o-transform-origin: bottom right;
          transform-origin: bottom right;
}

/**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. 
 * The rule below moves all images past the second one down the stack. 
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}

/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}
div p span {
}