/*-------------------------------------------    
    General Styles
-------------------------------------------*/

body {
    margin:                 0;
}

#header{
    position:               relative;
	z-index:                1000;
	background-color:       #fff;
	border-bottom:          #f1f5f8;
}

#content{
	min-width: 				960px;
	width:					expression(document.body.clientWidth < 965? "960px": "auto" );
}

#decodingdatawrap  {
    margin:                 0;
    padding:                0;
    width:                  100%;
	position:               relative;
	background-color: 		#25292c;
	color: 					#bcb3b4;
}

#decodingdata {
	margin: 				0 auto 0 auto;
	width:					960px;
	position: 				relative;
}

#decodingdata p,
#decodingdata a{
	font:                   14px/1.5 "Trebuchet MS", Verdana, Arial, sans-serif;
}

/*  
    Clearfix
    http://www.positioniseverything.net/easyclearing.html
*/

#decodingdata:after,
#decodingdata #tile:after, 
#decodingdatawrap #intermission:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html #decodingdata,
* html #decodingdata #tile,
* html #decodingdatawrap #intermission {
	height: 				1%;
}


* + html #decodingdata,
* + html #decodingdata #tile,
* + html #decodingdatawrap #intermission {
	height: 				1%;
}


#decodingdatawrap p a,
#decodingdatawrap #gsapp a { 
    color:                  #fff;
	font-weight: 			bold;
    text-decoration:		none;
	border-bottom:			1px dotted #fff;
	border-bottom:			1px dotted rgba(255,255,255,0.4);
}
#decodingdatawrap p a:hover,
#decodingdatawrap p a:focus,
#decodingdatawrap #gsapp a:hover,
#decodingdatawrap #gsapp a:focus{ 
    text-decoration:		none;
	border-bottom:			1px solid #fff;
	border-bottom:			1px solid rgba(255,255,255,0.4);
}




/*-------------------------------------------    
    Global Combinations
-------------------------------------------*/
/* Global style for image replacement (using Phark) */


#decodingdatawrap h1,
#decodingdatawrap h2,
#decodingdatawrap h3,
#decodingdatawrap h4,
#decodingdatawrap #information h3 a,
#decodingdatawrap #information a#information-cta,
#decodingdatawrap #cnntech p a,
#decodingdatawrap .visualization h4 a span,
#decodingdatawrap blockquote,
#decodingdatawrap #footnote,
#decodingdatawrap #theW 
{ 
    display:                block; 
    text-indent:            -9999px; 
    background-repeat:      no-repeat; 
    background-position:    0 0; 
    background-color:       transparent; 
    margin:                 0;
    padding:                0;
    font-size: 				2px;
}



#decodingdatawrap #headlines h1 {
    background-image:       url(../../images/stories/decoding-data/screen/decoding-data-title.gif);
    width:                  627px;
    height:                 221px;
    position:               absolute;
    top:                    81px;
    left:                   340px;
}



#decodingdatawrap #headlines h2 {
    background-image:       url(../../images/stories/decoding-data/screen/subhead.gif);
    width:					510px;
    height: 				127px;
    position:               absolute;
    left:					158px;
    top:					200px;
}

#decodingdatawrap blockquote {
    background-image:       url(../../images/stories/decoding-data/screen/quote.gif);
    width: 					307px;
    height: 				83px;
}


#decodingdatawrap #information h3 a{
	background-image:       url(../../images/stories/decoding-data/screen/we-feel-fine.gif);
	margin: 				0 auto 10px auto;
	width:					140px;
	height: 				137px;
	
	/* DM: changed */
	background-image:       url(../../images/stories/decoding-data/screen/mountains.gif);
	width:					211px;
	height: 				322px;

}

#decodingdatawrap #information h3 a:hover,
#decodingdatawrap #information h3 a:focus{
	/*background-position:  0 -137px;*/
}


#decodingdatawrap #information a#information-cta {
	background-image:       url(../../images/stories/decoding-data/screen/visit-we-feel-fine.gif);
	width:					126px;
	height: 				12px;
	
	/* DM: changed */
	background-image:       url(../../images/stories/decoding-data/screen/visit-iib.gif);
	width:                  195px;
	height:                 17px;
}
#decodingdatawrap #information a#information-cta:hover,
#decodingdatawrap #information a#information-cta:focus{
	background-position: 	0 -12px;
	background-position: 	0 -17px;
}

#decodingdatawrap #information a { 
    font-size:              12px;
}


#decodingdatawrap #cnntech p a{
	background-image:       url(../../images/stories/decoding-data/screen/watch-the-slideshow.gif);
	width:					152px;
	height: 				17px;
	border-bottom:			none;
}
#decodingdatawrap #cnntech p a:hover,
#decodingdatawrap #cnntech p a:focus{
	background-position: 	0 -17px;
	border-bottom:			none;
}

#decodingdatawrap #cnntech h3 {
    background-image:       url(../../images/stories/decoding-data/screen/cnn.gif);
    width:					212px;
    height: 				70px;
}

#decodingdatawrap #gsapp h3 {
    background-image:       url(../../images/stories/decoding-data/screen/gsapp.gif);
    width:					160px;
    height: 				92px;
	margin: 				0 0 10px 0;
}


/* VISUALIZATIONS - RIGHT BAR*/

#decodingdatawrap #causesofdeath h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/causes-of-death.gif);
	width:					117px;
	height: 				10px;
}

#decodingdatawrap #thecostofgettingsick h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/cost-of-getting-sick.gif);
	width:					182px;
	height: 				10px;
}

#decodingdatawrap #majorhealthissues h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/major-health-issues.gif);
	width:					146px;
	height: 				10px;
}
#decodingdatawrap #yourhealthprofile h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/your-health-profile.gif);
	width:					147px;
	height: 				10px;
}
#decodingdatawrap #thecostofchronicdisease h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/cost-of-chronic-disease.gif);
	width:					207px;
	height: 				10px;
}
#decodingdatawrap #worldhealth h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/world-health.gif);
	width:					101px;
	height: 				10px;
}
#decodingdatawrap #thebetterhealthstudy h4 a span{
	background-image:       url(../../images/stories/decoding-data/screen/better-health-study.gif);
	width:					176px;
	height: 				10px;
}

#decodingdatawrap .visualization h4 a span {
	cursor:					pointer;
}

#decodingdatawrap .visualization h4 a:hover span,
#decodingdatawrap .visualization h4 a:focus span
{
	background-position: 	0 -10px;
}



#decodingdatawrap #visualizingdata h3{
	background-image: 		url(../../images/stories/decoding-data/screen/visualizing-data.gif);
	width:					137px;
	height: 				11px;
	margin-bottom: 			10px;
}

#decodingdatawrap #footnote{
	background:				transparent url(../../images/stories/decoding-data/screen/citation.gif) no-repeat 0 20px;
	width:					960px;
	height: 				39px;
	padding: 				20px 0 60px 0;
	border-top:  			1px solid #323338;
	float: 					left;
}


#decodingdatawrap #theW-image{
	background-image: 		url(../../images/stories/decoding-data/screen/drop-cap-w.png);
	width:					587px;
	height: 				676px;
	position: 				absolute;
	top: 					-180px;
	left: 					-200px;
	z-index: 				30;
}



* html #decodingdatawrap #theW {
	background-image: 		url(../../images/stories/decoding-data/screen/drop-cap-w-ie6.jpg);
}


#decodingdatawrap #theW{
	width:					320px;
	height: 				280px;
	float: 					left;
}

/*----------------------------------------*/

#decodingdatawrap #headlines {
	width:					960px;
	height:					345px;
	border-bottom: 			1px solid #323338;	
	z-index: 110;
	position: relative;
}

#decodingdatawrap #tile {
	background-image: 		url(../../images/stories/decoding-data/screen/tile.jpg);
	position: relative;
	z-index: 10;
}


#decodingdatawrap #main {
	width:					670px;
	float: 					left;
	position: 				relative;
	z-index: 				100;
}

#decodingdatawrap #main p{
	margin-bottom: 30px;
}

#decodingdatawrap #intro {
	border-bottom: 			1px solid #323338;
	padding: 				20px 30px 30px 0;
}

#decodingdatawrap #intro p:first-child:first-line,
#decodingdatawrap #continue p:first-child:first-line {
	color: 					#de33dc;
	font-size: 				90%;
	text-transform: 		uppercase;
	letter-spacing: 		0.1em;
}

#decodingdatawrap #main #intermission{
	border-bottom: 			1px solid #323338;
	padding: 				10px 10px 10px 0;
}

#decodingdatawrap #main #intermission blockquote{
	width: 320px;
	float: left;
}

#decodingdatawrap #main #intermission #video{
	float: right;
}

#intermission:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}



#decodingdatawrap #continue {
	width:					390px;
	padding: 				30px 10px 30px 0;
	float: 					left;
}



#decodingdatawrap #externalsiteexamples {
	width:					247px;
	margin:					10px 10px 0 0 ;
	float: 					right;
}

#decodingdatawrap #externalsiteexamples p,
#decodingdatawrap #externalsiteexamples #gsapp a{
	font:               	13px/1.5 "Trebuchet MS", Verdana, Arial, sans-serif;
}


#decodingdatawrap #externalsiteexamples #information {
	background-color:  		#141414;
	background-color:       #fff;
	color:					#c6c7c8;
	padding: 				20px;
	margin-bottom: 			10px;
}

#decodingdatawrap #externalsiteexamples #information p,
#decodingdatawrap #externalsiteexamples #information h3 {
	color:					#c6c7c8;
	color:                  #666;
}



#decodingdatawrap #externalsiteexamples #cnntech {
	background-color:		#ca0002;
	margin-bottom: 			10px;
	padding-bottom:			20px;
}
#decodingdatawrap #externalsiteexamples #cnntech p,
#decodingdatawrap #externalsiteexamples #cnntech h3 {
	margin: 				20px 20px 0 20px;
	color: 					#000;
}

#decodingdatawrap #externalsiteexamples #gsapp {
	background-color:  		#051315;
	color:					#c6c7c8;
	padding: 				20px;
	margin-bottom: 			10px;
}


#decodingdatawrap #visualizingdata {
	padding-top: 			20px;
	padding-left: 			20px;
	width: 					270px;
	float: 					right;

}

* html #decodingdatawrap #visualizingdata {
	margin-left: -4px;
}

#decodingdatawrap #visualizingdata p{
	margin-bottom:			15px;
	font:               	12px/1.5 "Trebuchet MS", Verdana, Arial, sans-serif;
	color:                  #bbb;
}


#decodingdatawrap .visualization {
	background-color: 		#424649;
	display:				block;
	width: 					260px;
	margin-bottom: 			10px;
	padding-bottom: 		5px;
	
}
#decodingdatawrap #visualizingdata .visualization h4 a span,
#decodingdatawrap #visualizingdata .visualization p{
	margin: 			10px;
}


#decodingdatawrap .visualization img {
	background-color: 		#333;
	display:				block;
	width: 					260px;
	height: 				144px;
}