/* section name
/***********************************************************/

/* zero out the margin & padding on the body */
body {
	margin:0;
	padding:0;
	background-color:#a6a0a0;
	}
  
 .clear {
  clear:both;
  }
  
 .handMe {cursor:pointer;}
 
a {
  text-decoration:none;
  color:#ed1616;
  }
  
a:hover {
  text-decoration:underline;
  }

/* set and center the drop shadows on the main box */	
#shadowBox {
  width:964px;
	margin-right:auto;
	margin-left:auto;
	background: url(/images/bg_shadowbox.gif) top center repeat-y;
	}
	
/* set and center the main box that holds the page content */
#mainBox {
  position:relative;
  width:900px;
  height:auto;
	margin-right:auto;
	margin-left:auto;
	background-color:#ececec;
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:10px;
  color:#000;
	}
  
/* set the background of the graphic directly above the footer */
div.pageBottomBg {
  background-color:#212121;
  }
  
  
/* Home Page
/***********************************************************/
  
/* style the Flash warning paragraph */
.flashWarn {
  margin:0;
  padding:20px;
  }
  
/* set the box for the Flash nav */
#flashNav {
  float:left;
  width:664px;
  height:573px;
  padding:0;
  margin:0;
  }
  
/* set the box for the news */
#newsBox {
  float:left;
  width:236px;
  height:573px;
  padding:0;
  margin:0;
  }
  
/* set the background for the news content container */
#newsItemBox {
  height:428px;
  background: url(/images/home_news_bg.gif) top center repeat-y;
  }
  
/* news section image, headline, and dateline */
div.newsHome img {
  float:left;
  }
  
div.newsHomeHeadline {
  float:left;
  margin-top:10px;
  padding-left:7px;
  }
  
div.newsHome h1 {
  width:150px;
  margin:0;
  padding:0;
  font-weight:bold;
  font-size:12px;
  }
  
div.newsHome h2 {
  margin:0;
  padding:0;
  font-weight:normal;
  font-size:10px;
  }
  
/* news text and link to full article */
div.newsExcerpt p {
  width:200px;
  margin:4px 0px 0px 12px;
  padding:0;
  line-height:1.3;
  }
  
div.newsExcerpt a {
  text-decoration:none;
  color:#ed1616;
  }
  
div.newsExcerpt a:hover {
  text-decoration:underline;
  }

/* For AJAX Links */
span.fakeLink {
	text-decoration:none;
  	color:#ed1616;
}
span.fakeLink:visited{ text-decoration:none;}
span.fakeLink:hover{ text-decoration:underline;}
span.fakeLink { cursor: pointer}


img.newsItemDivider {
  margin:6px 0px 2px 0px;
  }

/* the update section is the four buckets at the bottom of the homepage */

/* the top graphic of the update section */  
#topUpdatable {
  /* height:41px; 
  text-align:top;*/
  }
  
/* container for the buckets */
#updatableBox {
  width:898px;
  height:202px;
  border-right:1px solid #939393;
  border-left:1px solid #939393;
  background-color:#d0d0d0;
  }
  
/* the buckets have a 10px left margin and widths are set inline */
#updatableBox div {
  float:left;
  height:202px;
  margin-left:9px;
  }

/* left container has a different margin and we need to account for the IE float bug */
#updatableBox div.updateContainerLeft {
  margin-left:4px;
  }
  html>body #updatableBox div.updateContainerLeft {margin-left:8px;}

 
/* Data Page
/***********************************************************/

/******* Data Detail Box ********/

/* set the container that will contain the different types of data (screenshots, videos, wallpapers) */
div.dataDetail {
  width:664px;
  height:100%;
  background-color:#ececec;
  }
 
 
 /* set the container for videoCategory title */
div.videoCategory {
	margin-left: 18px;
	font-weight: bold;
  }
   
/* set the container for media selector sets */
div.mediaSelectorBox {
  width:603px;
  height:auto;
  margin-left:36px;
  }

/* set the box below the media header and it's borders */
div.mediaBox {
  width:601px;
  height:auto;
  background-color:#dbdbdb;
  border:1px solid #fff;
  border-top:0; border-bottom:0;
  }
  
/* float the media items */ 
div.mediaItem {
  float:left;
  width:132px;
  padding:5px 0px 5px 15px;
  }
  
/* float the New! descriptor for the media type */
div.mediaItem p.new {
  float:left;
  padding:2px 0px 0px 5px;
  margin:0;
  }

/* float the date the media item was posted */
div.mediaItem p.date {
  float:right;
  padding:2px 5px 0px 0px;
  margin:0;
  }
  
/* any selector sets (videos, wallpapers) that do not appear on the top row need a background */
div.mediaSelectorBg {
  background:url(/images/bg_media_selector.gif) repeat-y;
  }
  
div.mediaLink {
	padding:10px 5px 0px 0px;
  /*text-align:center;*/
}
  
/******* Character Data Column *******/

/* set the width of the column that contains the character data and set the background image */
div.dataColBox {
  float:left;
  width:236px;
  /*background:#ececec url(/images/bg_data_column.jpg) top center no-repeat;*/
  }
  
/* outer container holds the header label */
div.dataColOuter {
  width:221px;
  margin-left:3px;
  /*background:url(/images/bg_data_col_divider.gif) 0px 569px no-repeat;*/
  }

/* inner container sets the border and background color */  
div.dataColInner {
  width:219px;
  border-right:1px solid #8c9daa;
  border-left:1px solid #8c9daa;
  background-color:#fafafa;
  }
  
/* position the character icon table */
div.charIconBox {
  padding:2px 0px 4px 0px;
  }  
  
/* pad the character name */
div.charNameBox {
  padding:6px 0px 6px 8px;
  }
  
/* set the container for the section tabs */
#sectionTabBox {
  width:219px;
  height:22px;
  border-right:1px solid #8c9daa;
  border-left:1px solid #8c9daa;
  background:url(/images/bg_tabs.gif) repeat-x;
  }
  
#sectionTabBox div {
  float:left;
  }
  

/* box that holds the data and section labels */
div.dataColTextBox {
  width:193px;
  margin-left:14px;
  }
  
/* character data header */
div.dataColCharText h1 {
  margin:0;
  padding:8px 0px 0px 0px;
  font-weight:bold;
  font-size:10px;
  }
  
/* character column text - default text style for column */
div.dataColCharText p {
  margin:0;
  padding:0px 0px 10px 0px;
  }
  
/* character data text - indented in layout  */
div.dataColCharText p.data {
  margin:2px 0px 5px 12px;
  padding:0;
  }
  
div ul {
  width:175px;
  margin:0;
  padding:0;
  }
  
div li {
  margin:0px 0px 0px 20px;
  padding:0px 0px 8px 0px;
  list-style-image: url(/images/list_triangle.gif);
  }
  
img.dataDiv {
  margin:10px 0px 5px 0px;
  }
  
/* style the marvel.com bio link */
a.marvelBio {
  margin:0;
  padding:0;
  font-weight:bold;
  text-decoration:none;
  color:#ed1616;
  }
  
a.marvelBio:hover {
  text-decoration:underline;
  }
  
p.moreMedia {
  padding:0;
  margin:0;
  }

p.moreMedia a {
  font-size:11px;
  font-weight:normal;
  text-decoration:none;
  color:#ed1616;
  }
  
p.moreMedia a:hover {
  text-decoration:underline;
  }
  
  
/* Game Story & Info
/***********************************************************/

div.gameFeatures {
  margin-top:10px;
  }

div.gameFeatures ul {
  width:175px;
  margin:0;
  padding:0;
  }
  
div.gameFeatures li {
  margin:5px 0px 0px 20px;
  padding:0px 0px 8px 0px;
  list-style-image: url(/images/list_triangle.gif);
  }
  

/* News
/***********************************************************/  

/* News dropdown */
div.pageNavBox {
  width:193px;
  padding:0;
  margin:0;
  }

div.pageNavBox form {
  display:inline;
  }
  
div.pageNavBox select {
  margin:0;
	padding:0;
	font-family: verdana, tahoma, sans-serif; 
	font-size: 10px;
	color: #000;
  }
  
/* Pagination section  */  
div.paginationBox {
  margin-right:auto;
  margin-left:auto;
  padding:0px 0px 3px 0px;
  width:135px;
  }
  
div.paginationBox div {
  float:left;
  margin-left:auto;
  margin-right:auto;
  padding:8px 6px;
  }
  
/* make sure the arrow graphics don't get underlined */
div.paginationBox a {
  text-decoration:none;
  }
  
/* Page jump box */
div.pageNavBox table {
  margin-right:auto;
  margin-left:auto;
  padding-bottom:8px;
  }
  
div.pageJumpBox p.goToPage {
  margin:0;
  padding:0;
  background-color:red;
  }


/* News item listing styles */
div.mainNews {
  margin-top:12px;
  }

div.mainNewsItem {
  width:185px;
  margin:0;
  padding:0px 0px 15px 0px;
  }
  
div.mainNewsItem img {
  /*padding-right:5px;*/
  }

div.mainNewsItem h1 {
  margin:0;
  padding:0;
  font-size:11px;
  font-weight:bold;
  }
  
div.mainNewsItem p {
  margin:0;
  padding:2px 0px 0px 0px;
  }
  
div.mainNewsItem a {
  margin:0;
  padding:0;
  text-decoration:none;
  color:#ed1616;
  }
  
div.mainNewsItem a:hover {
  text-decoration:underline;
  }
  
/* set the area for displaying a news article */
div.newsArticleBox {
  width:603px;
  height:auto;
  margin-left:36px;
  }
  
div.newsArticleBox p {
  margin:0;
  padding:0;
  }

h1.headline {
  margin:0;
  padding:15px 0px 0px 0px;
  font-size:18px;
  color:#d20000;
  }
  
p.dateline {
  margin:3px 0px 0px 0px;
  padding:0;
  font-size:12px;
  font-weight:bold;
  }
  
div.newsArticleBox p.article {
  margin:15px 0px 0px 0px;
  padding:0;
  font-size:11px;
  line-height:1.4;
  }
  
div.newsArticleBox a {
  text-decoration:none;
  color:#ed1616;
  }
  
div.newsArticleBox a:hover {
  text-decoration:underline;
  }
  
  
/* article navigation below article */
#articleNav {
  height:15px;
  padding-top:30px;
  }
  
/* container for the article navigation with a default left float */
#articleNav div {
  float:left;
  }
  
/* default float all divs in the container left */
#articleNav div.left {
  float:left;
  }
  
/* float the next linkright */
#articleNav div.right {
  float:right;
  }
  
#articleNav a {
  text-decoration:none;
  color:#ed1616;
  }
  
#articleNav a:hover {
  text-decoration:underline;
  }
  
  
/* Community
/***********************************************************/

/* set up the container for the community links */  
#communityBox {
  float:left;
  width:603px;
  padding:0;
  margin:0;
  margin-left:18px;
  }
  html>body #communityBox {margin-left:36px;}
  
/* size and stroke the container for the stakeholder images and link list */
div.communityBoxBorder {
  width:601px;
  border-left:1px solid #f5f5f5;
  border-right:1px solid #f5f5f5;
  background-color:#dbdbdb;
  }
  
/* set up the box for the stakeholder buttons */
#linkButtonsBox {
  width:597px;
  height:68px;
  margin:0px 0px 0px 4px;
  padding:0;
  background-color:#dbdbdb;
  text-align:center;
  }

/* separate the stakeholder buttons */ 
#linkButtonsBox div {
  float:left;
  width:295px;
  margin:0px 0px 10px 0px;
  padding:0;
  }
 
/* center out the community list */  
div.communityList {
  text-align:center;
  }
  
/* zero out and then set the padding and margins for the community list */  
div.communityList p {
  padding:6px 0px;
  margin:0;
  }
 
div.communityList a {
  text-decoration:none;
  color:#ed1616;
  }
  
div.communityList a:hover {
  text-decoration:underline;
  }
 
/* box for site kit */
#siteKitBox {
  float:left;
  margin:26px 0px 0px 32px;
  } 

  
/* Promo box
/***********************************************************/

/* set the container for the promo link items */
div.promoLinkBox {
  width:603px;
  height:auto;
  margin:30px 0px 0px 0px;
  }
  
/* float the promo links */
div.promoLink {
  float:left;
  }
  
 
/* Pop Up: Buy Now
/***********************************************************/

/* create the container for the retailer "tiles" and center it */
#retailerListBox {
  width:208px;
  margin-right:auto;
  margin-left:auto;
  border-right:1px solid #fff;
  border-left:1px solid #fff;
  background-color:#e6e6e6;
  text-align:center;
  }

/* pad the "tiles"  */
#retailerListBox div {
  padding-top:10px;
  }

  
/* close button on retailer and newsletter pop-up  */
img.buttonClose {
  margin:16px 0px 0px 69px;
  }
  
  
/* Pop Up: Newsletter Sign-Up
/***********************************************************/

/* create the container for the intro and link buttons */
#newsletterContentBox {
  width:208px;
  height:430px;
  margin-right:auto;
  margin-left:auto;
  border-right:1px solid #fff;
  border-left:1px solid #fff;
  background-color:#e6e6e6;
  text-align:center;
  }

#newsletterContentBox p {
  margin:0;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:10px;
  color:#000;
  text-align:left;
  }
  

/* Pop Up: Screenshot Viewer 
/***********************************************************/
 
/* close link */
a.screenClose {
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:10px;
  text-decoration:none;
  color:#333;
  }
  
a.screenClose:hover {
  text-decoration:underline;
  }
 
/* set the container and background image for the screenshot controller */ 
#screenControlBox {
  width:178px;
  height:38px;
  margin-right:auto;
  margin-left:auto;
  background:url(/images/bg_screens_diamond.gif) no-repeat;
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:10px;
  color:#000;
  }
  
/* float the divs inside the container */
#screenControlBox div {
  float:left;
  }
  
/* zero out the padding on the count and source text */
#screenControlBox p {
  margin:0;
  padding:0;
  }

/* set containers for the next and previous arrows */
#screenControlBox div.arrowBox {
  width:27px;
  height:38px;
  }
  

/* Pop Up: Wallpaper Viewer
/***********************************************************/

body.viewWallpaper {
  margin:0;
  padding:0;
  background-color:#f1f1f1;
  }
  
body.viewWallpaper table {
  margin-top:25px;
  }

body.viewWallpaper p {
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:11px;
  color:#000;
  }
  
  
/* Pop Up: Trailer
/***********************************************************/

body.viewTrailer {
  margin:0;
  padding:0;
  background-color:#f1f1f1;
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:10px;
  color:#000;
  }
  
body.viewTrailer p {
  margin:0;
  padding:0;
  }
  
#trailerNavBox div {
  float:left;
  width:50%;
  }
  
body.viewTrailer a {
  font-family:verdana, tahoma, sans-serif;
  font-weight:normal;
  font-size:10px;
  text-decoration:none;
  color:#333;
  }
  
body.viewTrailer a:hover {
  text-decoration:underline;
  }
  

/* Team Builder */

.formLabel {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align:right;
	padding-right: 3px;
}

/* Footer
/***********************************************************/

/* set container for the footer */
#footerBox {
  background-color:#212121;
  border-right:1px solid #939393; 
  border-left:1px solid #939393;
  }

/* position the footer plain text menu */
#footerMenu {
  margin-left:auto;
  margin-right:auto;
  padding-top:14px;
  margin-bottom:25px;
  text-align:center;
  color:#fff;
  }
  
/* style the footer menu links */
#footerMenu a {
  padding:0px 12px;
  text-decoration:none;
  color:#fff;
  }
  
div.logoRow div {
  float:left;
  }
  
hr.logoGarden {
  width: 857px;
  height:1px;
  margin:20px;
  border:none;
  border-top:1px solid #797979;
  } 
  
div.legalBox p {
  margin:0px 24px;
  padding:0px 0px 20px 0px;
  color:#e3e3e3;
  }
  
  
  
/* sIFR repalcement */
h3.charName {
  font-family:verdana, tahoma, sans-serif;
	font-weight:bold;
	letter-spacing:0;
	margin:0;
	padding:0;
	line-height: 1em;
	font-size:18px;
}

h3.videoType {
  	font-family:verdana, tahoma, sans-serif;
	font-weight:bold;
	letter-spacing:0;
	margin:0;
	padding:0px;;
	line-height: 1em;
	font-size:18px;
}
