/*
*   Main Form Style Sheet
*
*	colors used:
*	main background: #212121
*	Article Title: #336699
*	Read Article Link: #3366CC
*
*	main background: #212121 // #D6D6D6
*	main background: #212121
*	main background: #212121
*
*	Body width: 730px  **NEED TO ADJUST BANNER
*/

/*********************** Global Reset ELEMENTS ***********************/
body, h1, h2, h3, h4, h5, p, ul, ol, li {
	padding: 0;
	margin: 0;
	}
img {border: none;}


/*********************** LAYOUT ELEMENTS ***********************/
html {
	background: #3863a8 url('../images/tuaw-bg2.jpg');
	background-repeat: no-repeat;

	}

body {
	width: 1180px;
	margin: 0 auto;
	padding-bottom: 40px;
	font: 12px sans-serif;
	color: #333333;
	}


#bannerArea {
	margin: 5px 0 10px 0;
	text-align: center;
	}

#bannerArea a {
	text-decoration: none;
	}

#bodyContainer {
	background-color: #fff;
	}
	

#header {
	background: url('../images/header_background.png') 0px 0px repeat-x;
	height: 69px;
	}
	#headerContainer{
		text-align: left;
	}

	#headerContainer img{
		margin-left: 15px;
	}	
	#header span {
		height: 69px;

		}
	
	#header #leftBorder {
		float: left;
		background: url('../images/header_leftBorder.png') 0px 0px no-repeat;
		width: 8px;
		}
	
	#header #logoBackground {
		float: left;
		}	

	#header #logo2 {
		float: left;
		background: url('../images/header_AnimationArenaLogo.png') 0px 0px no-repeat ;
		width: 264px;
		}	
	#header #navBarTransition {
		float: right;
		background: url('../images/header_navTransition.png') 0px 0px no-repeat;
		width: 28px;
		height: 69px;
	
		}	

	#header #navigation {
		float: right;
		background: url('../images/header_navigationBackground.png') 0px 0px repeat-x ;
		height: 69px;
		color: #fff;	
		}	

	#header #navigation .navSpacer{
		margin: 0 2px;
		}


		#header #navigation div.navigationBarLinks{

			color: #fff;	
			text-align: left;
			}	
	
		#header #navigation div.navigationBarLinks a {
			text-decoration: none;
			color: #fff	
			}
		#header #navigation div.navigationBarLinks a:link, 
		#header #navigation div.navigationBarLinks a:visited {}	

		#header #navigation div.navigationBarLinks a:hover { text-decoration:underline; color:#ff9933;	}	

	
		#header #navigation #topLinks{
			margin-top: 15px;
			font-size: 13px;
			}	
			#header #navigation #topLinks a:hover { color: #ff9933; }



		#header #navigation #bottomLinks{
			clear:left;
			font-size: 11px;
			margin-top: 20px;
			color: #333 !important;
			}	
		#header #navigation #bottomLinks a { color: #000000;}
		#header #navigation #bottomLinks a:hover { color: #0000CC; text-decoration:underline}
		
	#header #rightBorder {
		float: right;
		background: url('../images/header_rightBorder.png') 0px 0px no-repeat;
		width: 7px;
		height: 69px;
		}	

#mainBody {
	clear:both;
	background-color: #fff;
	}

#content {
	width: 785px;
	float: left;
	padding: 18px;

	}


#content .contentColumn {
	margin-top: 10px;
	width: 385px;
	float: left;
	}

#content .contentColumnPadding {
	margin-right: 15px;
	}
#content #content_ColLarge{

	clear: both;
	padding-top: 10px;

	}

	
	#content .inBodyFormatting h1 {
		font-size: 14px;
		color: #336699 !important;
		margin-bottom: 10px;
		}
	#content .inBodyFormatting p {
		margin: 0 2px 10px 2px;	
		line-height: 14px;
		}

	#content table {
		border-collapse: collapse;
		width: 100%;
	
		}
			#content table th{
				background-color: #5BABEB;
				padding: 10px;
				color: #fff;
				text-align: left;
				font-size: 12px;
				vertical-align: middle;
				border-right: 1px solid #fff;
				}
			#content table td{
				border-right: 1px solid #fff;
				padding: 6px;
				line-height: 14px;
				}
			#content table td.center {
				text-align: center;
				}
		
			#content table td.center a {
				color: #336699 !important;
				font-weight: bold;
				font-size: 12px;
				
				}
			#content table td.center img {
					margin-top: 3px;		
				}
		
		
			#content table tr.oddRow td{
				background-color: #eee;
				}
			#content table tr.evenRow td{
				background-color: #e0e0e0;
				}
	

#content img.sitebanner {
	margin: 0 0 10px 0;
	}

#content a.Highlight {
	display: block;
	text-align: center;
	font-size: 1.2em;
	color: #003366;
	margin: 5px 0 12px 0;
	}

#footer {
	clear:both;
	margin: 40px;
	padding-bottom: 25px;
	border-top: 2px solid #ccc;
	}
	
	#footer p {
		padding: 20px 0 0 0;	
		text-align: center;
		}
	#footer p span {
		font-weight: bold;
	}
	#footer p a {
		color: #336699 !important;
		text-decoration: none !important;
	}





/********************** SECTION FORMAT/STYLES **********************/


.sectionHeader {

	border-bottom: 1px solid #A2A2A2;
	height: 26px;
	background: #fff url('../images/articleHeading_smallbar.gif') 0px 0px repeat;


	}


.sectionHeader .sectionTitle {
	float: left;
	height: 26px;
	background: transparent url('../images/articleHeading_titleBackground.gif') 0 0 no-repeat;
	}

.sectionHeader .sectionTitle h2 {
	padding: 0px;
	margin: 7px 20px 0px 23px;
	font-size: 1.1em;
	color: #333;
	}	

.sectionHeader .headerTransition {
	float: left;
	height: 26px;
	width: 37px;
	background: transparent url('../images/articleHeading_transition.gif') 0 0 no-repeat;
	}

.sectionHeader .sectionheader_tail {
	float: right;
	height: 26px;
	width: 2px;
	background: transparent url('../images/articleHeading_rightBorder.gif') 0 0 no-repeat;
	}


.contentBlock {
	clear:both;
	margin: 14px 2px 10px 2px;
	}

	.contentBlock br {clear:both;}


	.contentBlock p { 
		margin: 0 0 10px 0;
		padding: 0;
		font-size: 11px;
		line-height: 15px;
	
		}
	
	.contentBlock p br{ 
		clear: none;
		}


	.contentBlock img {
		float: left;
		margin: 0 15px 15px 5px;
		}
	
	.contentBlock b {
		padding: 0;
		margin: 0 0 10px 0;
		font-size: 13px;
		color: #336699;
		
		}

	.contentBlock a:hover,
	.contentBlock a { 
		color: #336699 !important;
		text-decoration: none !important;
		}
	
	.contentBlock a b,
	.contentBlock b a { 
		color: #3366CC !important;
		}
		
		.contentBlock a:hover b,
		.contentBlock b a:hover { 
		color: #3366CC !important;
		text-decoration:underline
		}
	
	.contentBlock div.gallery {
		margin: 0 15px 15px 0;
		float: left;
	}
		.contentBlock div.gallery a {
			border: 1px solid #fff;
			float: left;
			width: 107px;
			height: 107px;	
			overflow: hidden;
			
			}
		.contentBlock div.gallery a:hover {
			border: 1px solid #369;
		}
		.contentBlock div.gallery img {
			margin:0; padding:0;
		}



a.linkToDetails {
	color: #3366CC !important;
	float: right; 
	margin: 5px 0px 0px 0px; 
	font-size: .9em;
	font-weight: bold;
	text-decoration: underline !important;
	}



#links {
	float: left;
	width: 340px;
	margin: 18px 18px 18px 0;
	}

#links img {
	margin-bottom: 10px;
	}

#links .linkColumn{
	float: left;
	width: 165px;
	}

#links .linkColumn_padding {
	margin-right: 10px;
	}

#links h3 {
	background: transparent url('../images/linkHeaderBackground.gif') 0 0 no-repeat;
	height: 28px;
	text-align: center;
	color: #fff !important;
	font-size: 13px;
	padding-top: 7px;
	}

#links ul {
	margin: 0 15px 15px 15px;
	padding: 0;
	}

#links ul li {
	margin: 5px 0;
	padding: 0;
	color: #336699 !important;
	list-style: none;
	}

#links ul li a {
	color: #336699 !important;
	text-decoration: none;
	}
	
	#links ul li a:hover{
	color: #336699 !important;
	text-decoration: underline;
	}

#links p {
	text-align: center;
	}


.linksHeader {
		margin-bottom: 15px;	
	}
	.linksHeader h4 {
		background: transparent url('../images/linksHeader.gif') 0 0 no-repeat;
		padding: 5px 0 2px 15px;
		font-size: 1.1em;
		color: #E70101;
		}

	.linksHeader .linksHeader_body {
		border: 1px solid #A1A1A1;	
		background-color: #F0F0F0;
	}


	.linksHeader ol {
		list-style: none;
		margin: 5px;
		}

	.linksHeader ol li	{
		background-repeat: no-repeat;
		background-position: 0 0;
		margin: 5px 0 ;
		padding: 0 0 5px 35px;
		}
		
	.linksHeader ol li a {
		color: #0099FF !important;
		text-decoration: none !important;
		text-align: left;
		
	} 
	
	.linksHeader ol li a:hover {
		color: #0099FF !important;
		text-decoration: underline !important;
		text-align: left;
		
	} 
	

	.linksHeader p,
	.linksHeader p a {
		margin: 10px 5px;
		color: red !important;
		}
	.linksHeader ol li.bulletNumber_1 {	background-image:  url('../images/linksHeader_bullet_1.gif');}
	.linksHeader ol li.bulletNumber_2 {	background-image:  url('../images/linksHeader_bullet_2.gif');}
	.linksHeader ol li.bulletNumber_3 {	background-image:  url('../images/linksHeader_bullet_3.gif');}
	.linksHeader ol li.bulletNumber_4 {	background-image:  url('../images/linksHeader_bullet_4.gif');}
	.linksHeader ol li.bulletNumber_5 {	background-image:  url('../images/linksHeader_bullet_5.gif');}
		


/********************** Mantis **********************/
#MantisContent {
		width: 779px;
		border: 3px solid #336600;
		border-top: 18px solid #336600;
		background-color:#FFFFFF;
		
	}

#MantisContent #MantisContentImage {
	position: static;
	z-index: -1;
	text-align: center;
	}
	
#MantisContent #MantisContentImage img{
	width: 736px;  /* 785 (Content Body Size) - 6px for border width = 779px */
/*
	border: 1px solid green;
*/
	}


#MantisContent #MantisContentBody {

	width: 740px !important;
	color: #000000;
	line-height: 16px;
	margin: 0px auto 13px auto;

	z-index: 50;
	}

	#MantisContentBody img { margin: 0 15px 15px 15px; }

	#MantisContentBody p { }

		#MantisContent #MantisContentBody p.left {clear:both;}
		#MantisContent #MantisContentBody p.left img{
			float: left;
			clear:left;
			}
		#MantisContent #MantisContentBody p.right {clear:both;}
		#MantisContent #MantisContentBody p.right img{
			float: right;
			clear:right;
			}
			
		#MantisContent #MantisContentBody h1 { 
			color: #000000!important;
			font-size: 20px !important;
			vertical-align:bottom;
			margin-bottom: 15px;
			}

		#MantisContent #MantisContentBody .diggBadge { 
			float:left;
			margin-right:15px;
			}

		#MantisContent #mantisContentFooter {
			clear:both;
			padding: 10px;
			text-align: center;
			color: #fff;
			background-color: #336600;
			
		}
		#MantisContent #mantisContentFooter a {
			color: #fff !important;
			}
			
			
			
			
			
			
			
			/********************** Animation Career Disney **********************/
#ACContent {
		width: 779px;
		border: 3px solid #003366;
		border-top: 18px solid #003366;
		background-color:#FFFFFF;
		
	}

#ACContent #ACContentImage {
	position: static;
	z-index: -1;
	text-align: center;
	}
	
#ACContent #ACContentImage img{
	width: 736px;  /* 785 (Content Body Size) - 6px for border width = 779px */
/*
	border: 1px solid green;
*/
	}


#ACContent #ACContentBody {

	width: 740px !important;
	color: #000000;
	line-height: 16px;
	margin: 0px auto 13px auto;

	z-index: 50;
	}

	#ACContentBody img { margin: 0 15px 15px 15px; }

	#ACContentBody p { }

		#ACContent #ACContentBody p.left {clear:both;}
		#ACContent #ACContentBody p.left img{
			float: left;
			clear:left;
			}
		#ACContent #ACContentBody p.right {clear:both;}
		#ACContent #ACContentBody p.right img{
			float: right;
			clear:right;
			}
			
		#ACContent #ACContentBody h1 { 
			color: #000000!important;
			font-size: 20px !important;
			vertical-align:bottom;
			margin-bottom: 15px;
			}

		#ACContent #ACContentBody .diggBadge { 
			float:left;
			margin-right:15px;
			}

		#ACContent #acContentFooter {
			clear:both;
			padding: 10px;
			text-align: center;
			color: #fff;
			background-color: #003366;
			
		}
		#ACContent #acContentFooter a {
			color: #fff !important;
			}
			

			
			
/********************** DEFAULT Article Page **********************/
/********************** NOTE: Extra Styles will be added later ****/

#ArticleContent  {
	width:779px;
	border-style:solid;
	border-width:18px 3px 3px 3px;
	background-color:#4C1B12;
	border-color:#323232;
	}

#ArticleContent #ArticleContentImage { 
	position: static;
	z-index: -1;
	text-align: center;
	background-position: top center;
	width: 779px;
	margin-right: 0;
	background-repeat: no-repeat;
	/* only change these */	
	background-image: url('../images/Banner2.jpg');
	height: 50px;

	}
	
#ArticleContent #ArticleContentBody {
	clear:both;
	width: 779px !important;
	color: #fff;
	line-height: 18px;
	margin: 0px auto 13px auto;
	z-index: 50;
	overflow:hidden;

	}

	#ArticleContent #ArticleContentBody #Column1 {
		float: left;
		margin: 0 0 0 0;
		width: 45%;
		}

	#ArticleContent #ArticleContentBody #Column2 {
		float: right;
		margin: 0 0 0 0;
		width: 45%;
		}

	#ArticleContent #ArticleContentBody h1 { 
			color: #666;
			font-size: 17px ;
			vertical-align: bottom;
			text-align: center;
			margin-bottom: 15px;
			}

	#ArticleContent #ArticleContentBody h2 { 
			color: #666;
			font-size: 14px ;
			vertical-align: bottom;
			text-align: center;
			margin-bottom: 15px;
			}


	#ArticleContentBody img { 		margin-bottom: 10px; }

	#ArticleContentBody p { 
		margin-bottom: 10px;
		}

		#ArticleContent #ArticleContentBody p.left {clear:both;}
		#ArticleContent #ArticleContentBody p.left img{
			float: left;
			clear:left;
			}
		#ArticleContent #ArticleContentBody p.right {clear:both;}
		#ArticleContent #ArticleContentBody p.right img{
			float: right;
			clear:right;
			}
			

		#ArticleContent #ArticleContentBody .diggBadge { 
			float:left;
			margin-right:15px;
			}

		#ArticleContent #articleContentFooter {
			clear:both;
			padding: 10px;
			text-align: center;
			color: #fff;
			background-color: #323232;
			
		}
		#ArticleContent #articleContentFooter a {
			color: #fff !important;
			}

/********************** Article Page OVERRIDES **********************/

/* IRON MAN Article */
.IronmanContent {
	border-color:#000 !important;
	background-color: #000 !important;
	}

	.IronmanContent #ArticleContentImage
	{ 
		background-image: url('../images/ironmanBanner_title.jpg') !important;
		height: 81px !important;
	}
			
	.IronmanContent #ArticleContentBody {
		/* sample of how to change background image*/
		background-image: url('../images/ironmanBanner_backgroundImage.jpg');
		background-position: right 0;
		background-repeat: no-repeat;
	}
		
	.IronmanContent  #ArticleContentBody #Column1 {
		width: 350px !important;
		margin: 81px 0 0 20px !important;
	}
	
	.IronmanContent  #ArticleContentBody #Column2 {
			display:none;
		}

	.IronmanContent  #ArticleContentBody h1 {
		color: #FFCC66 !important;
		}



/********************** TEXT and ELEMENTS **********************/

a {	border: none; }
img {	border: none; }



/*********************** MISC STYLES ***********************/
div.clear { clear:both;}
div.hr { 
	height: 1px;
	background: #fff url('../images/separatorDots.gif ') repeat-x;
	margin: 0px 0;
	}
	
	div.hr hr { display: none;}