body{
	 background-color: #000;
	 }
a{
	 color: #000;
	 text-decoration: none;
	 }
p{
	 font-size: 1.2em;
	 font-family: "Lucida Grande","Lucida Sans","Lucida Sans Unicode","Lucida","Trebuchet","Trebuchet MS","Arial","sans";
	 }
a:hover{
	 text-decoration: underline;
	 color: #333;
	 }
h1{
	 font-family:"Century Gothic",Avant Garde,Century Gothic,'ITC Avant Garde Gothic',Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	 font-size: 2.5em;
	 }
h2{
	 font-family:"Century Gothic",Avant Garde,Century Gothic,'ITC Avant Garde Gothic',Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	 font-size: 1.8em;
	 text-transform: uppercase;
	 font-weight: normal;
	 }
h3{
	 font-family: "Century Gothic",Avant Garde,Century Gothic,Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	 font-size: 1.4em;
	 text-transform: uppercase;
	 }
hr{
	 margin-top: 30px;
	 margin-bottom: 0px;
	 border: 1px solid #545454;
	 }
#body{
	 background: #000 url('/images/story/2010/sc9/sc9_bg.jpg') repeat-x top center;
	 margin: 0 auto;
	 }



.button a{
	/*This is the parent style for the Learn more links with the ">"*/
	background: transparent url('/images/story/2010/sc9/more_gray_on_white.gif') no-repeat right center;
 	padding-right: 18px;
	display: inline-block;
}

.button a:hover{
	 text-decoration: underline;
}	 

/* Navigation Defaults and Overrides */ 
.platform_nav {
	 clear:both;
	 overflow:hidden;
	 width:100%;
	 }
.platform_nav h1 span {
	 display: none;
	 }
.platform_nav h1 {
	 display:inline;
	 float:left;
	 width: 285px;
	 height: 95px;
	 background: transparent url('/images/story/2010/sc9/speed-concept-icon.gif') no-repeat 0px 31px;
	 }
.platform_nav h1 a{
	 width: 285px;
	 height: 90px;
	 display: block;
	 }
.platform_nav ul {
	 display:inline;
	 float:left;
	 margin:50px 0 0 20px;
	 padding: 0px 0 10px 10px;
	 }
.platform_nav ul li {
	 color:#fff;
	 display:inline;
	 font-family:"Century Gothic",Avant Garde,Century Gothic,'ITC Avant Garde Gothic',Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	 font-size:1.3em;
	 font-weight:500;
	 list-style-image:none;
	 list-style-position:outside;
	 list-style-type:none;
	 margin:0;
	 padding:0;
	 text-transform:uppercase;
	 }
.platform_nav ul li a {
	 color:#fff;
	 padding: 10px;
	 margin-right: 10px;
	 text-decoration:none;
	 font-family:"Century Gothic",Avant Garde,Century Gothic,'ITC Avant Garde Gothic',Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	 }
.platform_nav ul li a:hover {
	 background:#fff none repeat scroll 0 0;
	 color: #000;
	 }
.platform_nav ul li.selected a{
	 background:#fff none repeat scroll 0 0;
	 color: #000;
	 }
	 
.platform_nav ul.de li {
	font-size: 1.2em;
}

.platform_nav ul.de li a {
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 5px;
}
	 
/* End Navigation and Overrides */
#body h1 + p{
	 font-size: 1.5em;
	 color: #4d4d4d;
	 }

/* Content section and Overrides */ 
#content_container{
	 background: #fff url('/images/story/2010/shared/content_top_bg.jpg') repeat-x top left;
	 }
	 

#content_footer{
	font-family:"Century Gothic",Avant Garde,Century Gothic,'ITC Avant Garde Gothic',Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	background: url('/images/story/2010/shared/content_bottom_rpt_bg.jpg') repeat-x bottom left;
	margin: 15px 0px 30px 0px;
	text-align: right;
	height: 80px;
	padding: 0px 25px;
}
#content_footer span{
	display: inline-block;
	background-color: #fff;
	color: #000;
	padding: 5px 12px 5px 10px;
	font-size: 1.4em;
	margin-left: 10px;
	margin-top: -8px;
	text-transform: uppercase;
	float: right;
}
#content_footer h4{
	border-top: 1px solid #545454;
	padding: 20px 0px 0px 0px;
	font-size: 1.0em;
	font-weight: normal;
	color: #fff;
	font-size: 1.4em;

}
#content_footer a{
	color: #fff;
}

#content_footer a:hover > span{
	 background-color: #545454;
	 color: #fff;
	 }

.left_container{
	 width: 557px;
	 margin: 25px 0 0 25px;
	 }

* html .left_container {
	margin-left: 13px;
}

.right_container {
	margin: 25px 0 0 0;
}

/* Was Why */


.right_container{
	 width: 292px;
	 color: #fff;
	 }
.left_container h2{
	 /*margin: 20px 0 0 0;*/
	 }
.left_container h2 + p{
	 margin: 5px 0 10px 0;
	 }
.right_container .details{
	 padding: 10px 25px;
	 color: #b4b4b4;
	 }
.right_container .details h5:hover{
	 text-decoration: underline;
	 }
.right_container .bumper{
	 float: left;
	 height: 437px;
	 }
.right_container .details h5{
	 font-size: 1.0em;
	 background: #ee3323 url('/images/story/2010/shared/setup_icon.gif') no-repeat 10px center;
	 color: #fff;
	 padding: 10px 30px;
	 }


#commercial{
	 margin: 10px 0px 25px 0px;
	 }
#commercial .details{
	 float: right;
	 width: 272px;
	 }
.column{
	 width: 272px;
	 float: left;
	 margin-right: 17px;
	 margin-bottom: 100px;
	 }
.column.last{
	 margin-right: 0px;
	 }
 
 /* Shared Class Styles */ 
.left_container{
	 float: left;
	 }
.right_container{
	 float: right;
	 }
 
 /* End Shared Class Styles */

.close_button{
	position: absolute;
	right: 20px;
	top: 15px;
	height: 35px;
	width: 250px;
	line-height: 35px;
	text-align: right;
}
.close_button p{
	margin: 0px;
	padding: 0px;
}	
.close_button a{
 	background: url('/images/story/2010/shared/modal_close.png') no-repeat center right;
 	padding-right: 35px;
	display: inline-block;
}

.moreInfo{
	 position: absolute;
	 margin-left: 85px;
	 margin-top: 48px;
	 }
.carousel_container{
	 width: 900px;
	 padding: 10px 0;
	 background-color: #2c2c2c;
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 }
#overlay_carousel{
	 width: 760px;
	 margin: 10px 25px 25px 25px;
	 }
	 
 /* root element for the scrollable. when scrolling occurs this element stays still. */ 
#overlay_carousel .scrollable{
	 width: 760px;
	 }
div.scrollable {
	 /* required settings */ position:relative;
	 overflow:hidden;
	 width: 852px;
	 height: 120px;
	 float: left;
	 background-color: #999;
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
	 }
/* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set width and height for the root element and not for this element. */ div.scrollable div.items {
	 /* this cannot be too large */ width:20000em;
	 position:absolute;
	 height: 120px;
	 }
/* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ 
div.scrollable div.items .carousel_item {
	 float:left;
	 width: 135px; /*152px*/; /*102px;*/
	 height: 100px;
	 margin: 10px 0 0 6px;
	 background: #fff;
	 }
 
#overlay_carousel div.scrollable div.items .carousel_item {
	 float:left;
	 width: 130px;
	 height: 100px;
	 margin: 10px 0 0 10px;
	 }
#overlay_carousel div.scrollable div.items .carousel_item.active .carousel_item_details{
	 background-color: #FFF;
	 }
#overlay_carousel div.scrollable div.items .carousel_item .carousel_item_details:hover{
	 background-color: #EE3323;
	 }
div.scrollable div.items .carousel_item .carousel_item_details{
	 background-color: #dfdfdf;
	 padding: 5px;
	 }
#overlay_carousel div.scrollable div.items .carousel_item .carousel_item_details{
	 background-color: #666666;
	 }
div.scrollable div.items .carousel_item .carousel_item_details .play_btn{
	 position: absolute;
	 margin-left: 45px;
	 margin-top: 30px;
	 }
div.scrollable div.items .carousel_item a{
	 margin: 0;
	 padding: 0;
	 font-size: 0.9em;
	 font-family: "Lucida Grande","Lucida Sans","Trebuchet","Trebuchet MS","Arial","sans";
	 }
div.scrollable div.items .carousel_item a img{
	 display: block;
	 margin: 0 auto;
	 }
div.scrollable div.items .carousel_item h3{
	 font-family:"Century Gothic",Avant Garde,Century Gothic,'ITC Avant Garde Gothic',Avant Garde Gothic,"Lucida Sans",Helvetica,Trebuchet,Arial,Sans;
	 margin: 0;
	 padding: 0;
	 font-size: 1.1em;
	 }
div.scrollable div.items .carousel_item p{
	 margin: 0;
	 padding: 0;
	 font-size: 1.0em;
	 }
/* you may want to setup some decorations to active the item */ 
div.items div.active {
	 	background-color:#fff;
	 }
.carousel_container .nextPage:hover {
	 background-position:0 -120px;
	 }
.carousel_container .nextPage {
	 cursor:pointer;
	 display:inline-block;
	 float:left;
	 overflow:hidden;
	 width:24px;
	 background-color: #2c2c2c;
	 background: #2c2c2c url('/images/story/2010/shared/carousel_right_on_2c2c2c.png') no-repeat scroll 0 0;
	 height:120px;
	 }
.carousel_container .prevPage:hover {
	 background-position:0 -120px;
	 }
.carousel_container .prevPage {
	 cursor:pointer;
	 display:inline-block;
	 float:left;
	 overflow:hidden;
	 width:24px;
	 background-color: #2c2c2c;
	 background: #2c2c2c url('/images/story/2010/shared/carousel_left_on_2c2c2c.png') no-repeat scroll 0 0;
	 height:120px;
	 }
.carousel_container a.disabled{
	 visibility: hidden;
	 }
.multi_text{
	 display: none;
	 }
 
 /*//////////////////////////////////////////////////////////////////// 
 Float Fix 
 ////////////////////////////////////////////////////////////////////*/ 
.clearfix:after {
	 content: ".";
	 display: block;
	 height: 0;
	 clear: both;
	 visibility: hidden;
	 }
 .clearfix {
	 display: inline-block;
	 }
 /* Hides from IE-mac \*/ * html .clearfix {
	 height: 1%;
	 }
.clearfix {
	 display: block;
	 }

 /* End hide from IE-mac */
.tooltip{
	 display:none;
	 width:223px;
	 }
	 
	 
 /* tooltip styling */ 
.tooltip .tooltip_content{
	 font-size:11px;
	 color:#545454;
	 background-color: #d5d5d5;
	 padding: 15px;
	 }
.tooltip .tooltip_content.right_container{
	 width: 200px;
	 background-color: #000;
	 }
.tooltip .tooltip_content.right_container h3{
	 color: #fff;
	 }
.tooltip .tooltip_content.right_container p{
	 color: #707070;
	 margin: 0 0 10px 0;
	 }

.tooltip .tooltip_content a{
	 color: #000;
	 background: url('/images/story/2010/shared/circle_arrow_on_f9f9f9.png') no-repeat right bottom;
	 }

.tooltip .tooltip_arrow{
	 width: 27px;
	 height: 14px;
	 background: url('/images/story/2010/shared/tooltip_vertical_d5d5d5.png') no-repeat top center;
	 margin: 0 auto;
	 }
.tooltip .tooltip_arrow.left_container{
	 width: 10px;
	 height: 21px;
	 margin: 100px 0 0 0;
	 background: url('/images/story/2010/shared/bl_tooltip_arrow.png') no-repeat center center;
	 }

/* a .label element inside tooltip */ 
.tooltip .label {
	 color:yellow;
	 width:35px;
	 }
.tooltip h3 {
	 color:#000;
	 font-weight:bold;
	 }
.tooltip p {
	 color: #545454;
	 font-size: 11px;
	 margin: 0 0 10px;
	 }
	 






#overlay_conatiner #overlay_content{
	 background: #fff url('/images/story/2010/shared/modal_content_bg.png') repeat-x;
	 padding: 25px;
	 }
	 
#overlay_content .left_container,
#overlay_content .right_container {
	margin: 0;
	padding: 0;
}
#overlay_conatiner #overlay_content #loader_container{
	 margin: 0 auto;
	 min-height: 150px;
	 text-align: center;
	 padding: 150px 0 0 0;
	 }
#overlay_conatiner #overlay_content #overlay_media{
	 width: 530px;
	 }
#overlay_conatiner #overlay_content #overlay_text h2{
	 font-weight: bold;
	 }
#overlay_conatiner #overlay_content #overlay_text{
	 width: 210px;
	 padding-left: 20px;
	 }
#overlay_conatiner #overlay_content #overlay_text ol{
	 margin: 0px;
	 padding: 20px;
	 }
#overlay_conatiner #overlay_content #overlay_text ol li{
	 margin: 0px;
	 padding-bottom: 10px;
	 }
	 
	 #overlay_conatiner{
	 background-color: #fff;
	 width: 810px;
	 display: none;
	 }
#overlay_conatiner .right_container{
	color: #000;
	 }
#sc7_story #overlay_conatiner{
	 background-color: #fff;
	 width: 530px;
	 display: none;
	 padding: 60px 25px 25px 25px;
	 }
#overlay_conatiner #overlay_header{
	 height: 60px;
	 line-height: 60px;
	 position: relative;
	 
	 }
#overlay_conatiner #overlay_header h1{
	 font-weight: normal;
	 }
#overlay_conatiner #overlay_header .left_container{
	 width: 500px;
	 margin-left: 25px;
	 }
	 
* html #overlay_conatiner #overlay_header .left_container{
	margin-left: 13px;	 
}
	 
#overlay_header .left_container, 
#overlay_header .right_container { 
	margin: 0; 
	padding: 0; 
}