/***************************************************************************
This is the newsfeed structure
****************************************************************************
<div id = "" class="LayeredNewsContentContainer">
*
******<div class="LayeredNewsContentContainerWrapperHidden">
      *
      ******<div class="LayeredNewsFeedHeader">
      *     *
      *     *****<div class="LayeredNewsFeedTitleBar">
      *     *    *	
      *     *    ******<div class="LayeredNewsFeedTitle">
      *     *           *
      *     *           ******<div class="LayeredNewsFeedSlideShow LayeredNewsFeedSlideShowOff">
      *     *                 *
      *     *                 ******<span class="LayeredNewsFeedSlideShowText">
      *     *
      *     ****<div class="LayeredNewsFeedTabs">
      *          *	
      *          ******<ul class="LayeredNewsFeedTabsList">
      *                *
      *                ******<li class="LayeredNewsFeedTabsListItem">
      *                      *
      *                      ******<div class="LayeredNewsFeedTabsListItemContainer">Tab Title
      * 
      ******<div class="LayeredNewsFeedContainer">
            *	
            ******<div class="LayeredNewsImageContainer">
            *     *
            *     ******<div class="NewslayerPictureAndCaption">
            *           *
            *           ******<a class="NewslayerPictureWrapperLink">
            *           *     *
            *           *     ******<div class="NewsLayerPicture"><img>
            *           * 
            *           ******<div class="NewsLayerCaptionIncludingHideButton">
            *                 * 
            *                 ******<div class="NewsLayerCaptionHideButton">Hide
            *                 * 
            *                 ******<div class="NewsLayerCaptionWrapper">
            *                       * 
            *                       ******<div class="NewsLayerCaptionTitle">
            *                       * 
            *                       ******<div class="NewsLayerCaption">
            *                       * 
            *                       ******<a class="NewslayerPictureLink">
            *                             * 
            *                             ******<div class="NewsLayerCaptionLink">Read More</div>
            * 
            *	
            ******<div class="NewslayerTitleContainer">
                 *
                 ******<ul class="NewslayerTitleList">
                       *
                       ******<li class="NewslayerTitle" id="#ContentID#_NewslayerTitle">
                             *
                             ******<div class="NewslayerTitleInner">
                                   *
                                   ******<div class="NewslayerTitleImageDiv"><img>
                                   *
                                   ******<div class="NewslayerTitleDiv">
***************************************************************************/



/*This is the wireframe structure part of the css*/

/*the overall container*/
.LayeredNewsContentContainer{
	position:relative;
	width:460px;
	height:380px;
	padding:0px;
	margin: 0px;
	background: #eeeeee;
	border: 1px solid black;
	font-size: 86%;
	
}

/*this is used by jquery to hide the contents until fully loaded - should be visibility:hidden*/
.LayeredNewsContentContainerWrapperHidden{
	padding:0px;
	margin: 0px;
	visibility:hidden;
	display: none;	
}

/*Contains the title stuff AND the nav tabs*/
.LayeredNewsFeedHeader{
	width: 100%;
	height: 54px;
	position: relative;
	margin: 0px;
	padding: 0px;
}

/*slide show title bar - contains the title AND the slideshow toggle button*/
.LayeredNewsFeedTitleBar{
	height:20px;
	font-weight:bold;
	color:#ffffff;
	padding:5px;
	margin: 0px;
}

.LayeredNewsFeedTitle{
	float:left;	
}

.LayeredNewsFeedTitle h3{
 color: black;
 font-weight: bold;
}

/*slide show toggle buttons*/
.LayeredNewsFeedSlideShow{
float: right;
display: block;
padding: 2px 5px;	
cursor: pointer;
}

.LayeredNewsFeedSlideShow span{

}


/*the feed tabs are all in here*/
.LayeredNewsFeedTabs{
	height:26px;
	margin: 0px
	padding: 0px	
}

.LayeredNewsFeedTabs ul{
	float: left;
	background: transparent;
	margin: 0 0 0 5px;
	padding: 0px;
}

.LayeredNewsFeedTabs li{
	margin: 0px 4px 0px 0px;
	height:26px;
	cursor: default;
	float: left;
	background: #cccccc;
	list-style: none;
	padding: 0 5px;
}

.LayeredNewsFeedTabs span{
	line-height: 26px;
	display: block;
}


/*contains all the display stuff for the feed that matches a nav tab - Does not caontain the nav tab itself*/
.LayeredNewsFeedContainer{
	position: relative;
	float: left;
	width: 100%;
	background: white;
	height: 320px;	
}

/*Outer div contains all the main images and associated captions*/
.LayeredNewsImageContainer{
	position:absolute;
	width: 240px;
	height: 320px;
	top:0px;
	left: 0px;
	
}

/*Inner div contains an image and its associated captions*/
.NewslayerPictureAndCaption{
	background: white;	
}

/*The image and its link*/
a.NewslayerPictureWrapperLink{
	
}

.NewsLayerPicture{
	position: relative;
	height:180px;
	overflow: hidden;	
}

.NewsLayerPicture img{
	
}
	
/*The caption container*/
.NewsLayerCaptionIncludingHideButton{
	position: relative;
	height: 138px;
	
}

/*a show / hide button sits here*/
.NewsLayerCaptionHideButton{
	position:absolute;
	width:40px;
	top: -20px;
	left: 0px;
	padding: 0 0 0 5px ;
	line-height: 20px;
	background-color: red;
	font-weight:bold;
	color:#ffffff;
	z-index: 1000;
}
/*This contains all the caption elements so jquery can hide / show them all at once*/
.NewsLayerCaptionWrapper{
	padding: 5px;
	
}
.NewsLayerCaptionTitle{
	color: black;
	font-size: 1.6em;
	font-weight: bold;
	margin-bottom: 5px;
	cursor: pointer;
}

.NewsLayerCaption{
	position: relative;
	height: 80px;
	overflow: hidden;
	
}

/*can be used, or can use the default readmore class in mura instead*/
a.NewslayerPictureLink{
	
}

a.NewslayerPictureLink .NewsLayerCaptionLink{
	font-size: 130%;
	cursor: pointer;
	position: absolute;
	bottom: 5px;
	
}
       
     


/*This is the container div for the nav titles*/
.NewslayerTitleContainer{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 220px;
	cursor: pointer;
	
}

/*This is the list of the nav titles*/
.NewslayerTitleContainer ul{
	width: 100%;
	margin: 0px;
	padding: 0px;
}

/*This is the list item containing a title*/
.NewslayerTitleContainer li{
	position: relative;
	list-style: none;
	width: 100%;
	margin: 0px;
	min-height: 80px;
	border-bottom: 1px solid black;
}
* html .NewslayerTitleContainer li{
	height: 80px;
}


/*An inner div inside the li*/
.NewslayerTitleContainer li .NewslayerTitleInner{
	padding: 5px 5px 5px 90px;
	
}

/*A wrapper for the little image - this has actually been changed to a span*/
.NewslayerTitleInner .NewslayerTitleImageDiv {
position: absolute;
top: 0px;
left: 0px;
	
}

/*the little image*/
.NewslayerTitleInner .NewslayerTitleImageDiv img{
	
}

/*the actual title text in the navigation list - this has actually been changed to a span*/
.NewslayerTitleInner .NewslayerTitleDiv{
	
}
                  

/*This is the jquery stuff*/

/*This needs to be visible, jquery uses this to show all the contents once loaded*/
.LayeredNewsContentContainerWrapper{
	
}

/*jquery uses this class to test state of slideshow
- also can be used to put a different image in for each state*/
.LayeredNewsFeedSlideShowOff{
	background: red;
	
}
.LayeredNewsFeedSlideShowOn{
	background: lime;
	color: black;
	
}

/* this is what jquery sets the active top tab to*/
.LayeredNewsFeedTabs li.LayeredNewsFeedTabsListItemActive{
	background: white;
}

/*this is what jquery sets the default state side nav item to*/
.NewslayerTitle{
	background: #CCCCCC;	
}

/*this is what jquery sets the active side nav item to*/
.NewslayerTitleHover{
	background: #999999;
}