/* ---------------------------------
  Feature Article Rotator 2 Styles
--------------------------------- */

/* Base control style. */
.FeatureArticleRotator
{
  width: 702px; /* The width of the rotating control. */
  height: 175px; /* The height of the rotating control. */
  position: relative; /* Position relative so we can absolutely position elements inside of it. */
  overflow: hidden; /* No image or text should flow outside of the control. */
}

/* Skin for the control. */
.FeatureArticleRotator .Skin
{
  width: 702px; /* Width of the skin. */
  height: 242px; /* Height of the skin. */
  position: absolute; /* Position absolutely so we can z-index it above the rotating image. */
  top: 0px; /* Skin will encompass the entire control. */
  left: 0px; /* Skin will encompass the entire control. */
  background-image: url('../Media/Images/Content/FeatureArticles/FAR_Skin.png'); /* Skin image. */
  z-index: 100; /* Puts the image above the non-indexed image. */
}

/* Image list. */
.FeatureArticleRotator ul.ArticleImages
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can move the image down. */
  top: 0px;  /* Drops the image below the rounded corners.  Top opacity is lost, because the image doesn't extend to the top. */
  left: 0px; /* Remain on the left edge of the rotator. */
  width: 702px;  /* Fill up the entire width of the rotator.  The skin will add necessary borders. */
  height: 175px; /* Explicit height necessary so that the image doesn't show beyond the rounded corners. */
  overflow: hidden; /* Hides any image overflow in the event that the image is too tall. */  
}

/* Individual list items containing the image. */
/* - Each list item will need to have its z-index cycled to allow for the rotating and cross-fade effect. */
.FeatureArticleRotator ul.ArticleImages li
{
  display: block; /* Removesthe list item bullets. */
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can do the cross-fade effect. */
  top: 0px; /* Item should remain at the top. */
  left: 0px; /* Item should remain on the left. */
}

/* Article button list. */
.FeatureArticleRotator ul.ArticleButtons
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can place the buttons within the space provided by the skin the image down. */
  right: 5px; /* Indented from the right. */
  top: 7px; /* Vertically center within the provided area. */
  z-index: 200; /* Buttons should appear on the top of the skin. */
  overflow: hidden; /* Ensures that any additional buttons will be hidden. */
}

/* Article button items. */
.FeatureArticleRotator ul.ArticleButtons li
{
  display: block; /* Get rid of the list-item bullets. */
  float: left; /* Float the items so they appear on the same line. */
  width: 17px; /* The width of the image. */
  height: 17px; /* The height of the image. */
  padding: 0px; /* Remove default padding. */
  margin: 0px 9px 0px 0px; /* Remove default margins and add some separation between buttons with a right margin. */
}

/* Article image list. */
.FeatureArticleRotator ul.ArticleImages
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
}

/* Article image items. */
.FeatureArticleRotator ul.ArticleImages li
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely */
  top: 0px; /* Item should remain at the top. */
  left: 0px; /* Item should remain on the left. */
  display: block; /* Remove list item bullet */
}

/* Article title list. */
.FeatureArticleRotator ul.ArticleTitles
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can place the title within the space provided by the skin the image. */
  left: 150px; /* Move to the right. */
  top: 150px; /* Move down. */
  z-index: 200; /* Title should appear on the top of the skin. */
  width: 545px; /* Allow the title to fill up most of the space allotted. */
  height: 18px; /* Ensures that only one line of text is displayed.  This will need to be updated if the font size is changed. */
  overflow: hidden; /* Ensures that titles that are too long do not flow outside of the allotted area. */
  color: #8A100F; /* Text color. */
  font-weight: bold; /* Text weight. */
}

/* Article title items. */
/* - The backround image for the items are very specific and needs to be updated if there is any change to the size or positioning of the items. */
.FeatureArticleRotator ul.ArticleTitles li
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can z-index it above the rotating image. */
  top: 0px; /* Item should remain at the top. */
  left: 0px; /* Item should remain on the left. */
  display: block; /* Remove list item bullet */
  height: 18px; /* Ensures that only one line of text is displayed.  This will need to be updated if the font size is changed. */
  width: 545px; /* Force the item to use all of the allotted space. */
  background-image: url('../Media/Images/Content/FeatureArticles/FAR_ArticleTitleBackground.png'); /* This prevents other titles from bleeding through and necessary for the cross-fade. */ 
}

.FeatureArticleRotator ul.ArticleTitles li a
{
  color: #8A100F; /* Text color. */
  font-weight: bold; /* Text weight. */
  text-decoration: none; /* No underline. */
}

.FeatureArticleRotator ul.ArticleTitles li a:link
{
}

.FeatureArticleRotator ul.ArticleTitles li a:visited
{
}

.FeatureArticleRotator ul.ArticleTitles li a:hover
{
  text-decoration: underline; /* Underline on hover. */
}

.FeatureArticleRotator ul.ArticleTitles li a:active
{
}

/* Article description list. */
.FeatureArticleRotator ul.ArticleDescriptions
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can place the description within the space provided by the skin the image. */
  left: 42px; /* Move to the right. */
  top: 185px; /* Move down. */
  z-index: 200; /* Description should appear on the top of the skin. */
  width: 640px; /* Allow the description to fill up most of the space allotted. */
  height: 50px; /* Ensures that only XX lines of text are displayed.  This will need to be updated if the font size is changed. */
  overflow: hidden; /* Ensures that descriptions that are too long do not flow outside of the allotted area. */
  color: #313B44; /* Text color. */
  font-weight: normal; /* Text weight. */
}

/* Article description items. */
/* - The backround image for the items are very specific and needs to be updated if there is any change to the size or positioning of the items. */
.FeatureArticleRotator ul.ArticleDescriptions li
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can z-index it above the rotating image. */
  top: 0px; /* Item should remain at the top. */
  left: 0px; /* Item should remain on the left. */
  display: block; /* Remove list item bullet */
  height: 50px; /* Ensures that only XX lines of text are displayed.  This will need to be updated if the font size is changed. */
  width: 640px; /* Force the item to use all of the allotted space. */
  background-image: url('../Media/Images/Content/FeatureArticles/FAR_ArticleDescriptionBackground.png'); /* This prevents other descriptions from bleeding through and necessary for the cross-fade. */ 
  overflow: hidden;
}

/* Article description toggle display button/image. */
.FeatureArticleRotator img.ToggleDescription
{
  padding: 0px; /* Remove default padding. */
  margin: 0px; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can place the image in the title bar. */
  left: 120px; /* Move to the right. */
  top: 150px; /* Move down. */
  z-index: 300; /* Image should appear on the top of the skin. */
  cursor: pointer; /* Pointer to indicate it being clickable. */
}