/******************* main container *******************/
#interactiveLarge {
	height: 550px;
}

#container {
	top: 0px;
	left: 0px;
	width: 925px;
	margin: auto;
	position: relative;
}

/******************* sub-containers *******************/

#header {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 925px;
}

#yearsBar {
	position: absolute;
	left: 0px;
	top: 50px;
	width: 925px;	
	height: 32px;
	background-color: #DDDDDD;
}

#mainContent {
	position: absolute;
	left: 0px;
	top: 82px;
	width: 925px;	
	height: 464px;
}

#footer {
	position: absolute;
	left: 0px;
	top: 546px;
	width: 925px;	
	height: 30px;
}

/******************* header *******************/

#estimatedIndicator  {
	position: absolute;
	right: 47px;
	top: 17px;
	width: 359px;	
	font-family: lato, verdana, arial, sans-serif;
	font-size: 13px;
	color: #999999;
	text-align: center;
	height: 21px;
	border-bottom: 1px solid #BBBBBB;
	
}

/******************* year buttons *******************/

.yearButtonPlacement {
	position: absolute;
	left: 42px;
}

.yearButton, .yearButtonSelected {
	position: relative;
	display: inline-block;
	top: 0px;
	width: 43px;
	height: 24px;
	background-color: #DDDDDD;
	padding-top: 8px;
	cursor: pointer;
	text-align: center;
	font-family: lato, verdana, arial, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
}

.yearButton:hover, .yearButtonSelected {
	background-color: #018EBE;
}

/******************* main controls *******************/

#viewBy, #viewBy2  {
	position: absolute;
	right: 40px;
	top: 40px;
	width: 400px;	
	font-family: lato, verdana, arial, sans-serif;
	font-size: 16px;
	color: #999999;
	text-align: right;
}

#viewBy {
	z-index: 102;
}

#viewBy2  {
	z-index: 101;
}

.viewByLabel {
	font-family: lato, verdana, arial, sans-serif;
	font-size: 13px;
	color: #999999;
	text-align: right;
}

.viewBySelected {
	font-family: arial, lato, verdana, geneva, helvetica, sans-serif;
	font-size: 18px;
	color: #0066CC;
	text-align: right;
}

a.viewButton, a:visited.viewButton {
	font-family: arial, lato, verdana, geneva, helvetica, sans-serif;
	font-size: 18px;
	color: #999999;
	text-align: right;
	cursor: pointer;
	}
a:hover.viewButton {color: #0066CC;}

#bigYear {
	position: absolute;
	right: 40px;
	top: 55px;
	width: 400px;	
	font-family: arial, lato, verdana, geneva, helvetica, sans-serif;
	font-size: 65px;
	color: #777777;
	text-align: right;
}

#timelineStat {
	position: absolute;
	right: 94px;
	top: 125px;
	width: 300px;	
	font-family: arial, lato, verdana, geneva, helvetica, sans-serif;
	font-size: 16px;
	color: #0066CC;
	text-align: right;
}

#playTimelineDiv, #pauseTimelineDiv {
	position: absolute;
	right: 45px;
	top: 120px;
	width: 40px;
	text-align: right;
	background-color: #FFFFFF;
}

#playTimelineDiv {
	z-index: 101;
}

#pauseTimelineDiv {
	z-index: 100;
}

a.playButton, a:visited.playButton {
	display: block;
	width: 40px;
	height: 40px;
	background: url(http://i.cdn.turner.com/money/news/economy/world_economies_gdp/images/assets.png) 0px 0px no-repeat;
	padding: 0px;
	cursor: pointer;
	}
a:hover.playButton {background-position: -40px 0px;}

a.pauseButton, a:visited.pauseButton {
	display: block;
	width: 40px;
	height: 40px;
	background: url(../images/assets.png) 0px -40px no-repeat;
	padding: 0px;
	cursor: pointer;
	}
a:hover.pauseButton {background-position: -40px -40px;}

/******************* columns and items *******************/

#column {
	position: relative;
	display: inline-block;
	top: 35px;
	width: 88px;
	height: 380px;
	border: 0px;
	text-align: center;
}

#item1, #item2, #item3, #item4, #item5, #item6, #item7, #item8, #item9, #item10 {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100px;
	border: 0px;
	text-align: center;
}

#itemTxt1, #itemTxt2, #itemTxt3, #itemTxt4, #itemTxt5, #itemTxt6, #itemTxt7, #itemTxt8, #itemTxt9, #itemTxt10 {
	position: absolute;
	left: 0px;
	bottom: 65px;
	width: 100px;
	border: 0px;
	font-family: lato, verdana, arial, sans-serif;
	font-size: 13px;
	color: #888888;
	margin: 0px;
	padding: 0;
	text-align: center;
}

#itemAmt1, #itemAmt2, #itemAmt3, #itemAmt4, #itemAmt5, #itemAmt6, #itemAmt7, #itemAmt8, #itemAmt9, #itemAmt10 {
	position: absolute;
	left: 0px;
	bottom: 37px;
	width: 100px;
	border: 0px;
	font-family: lato, verdana, arial, sans-serif;
	font-size: 24px;
	text-align: center;
	color: #666666;
	margin: 0px;
	padding: 0;
	text-align: center;
	z-index: 200;
}

#itemImg1, #itemImg2, #itemImg3, #itemImg4, #itemImg5, #itemImg6, #itemImg7, #itemImg8, #itemImg9, #itemImg10 {
	position: relative;
	left: 27px;
	bottom: 0px;
	width: 100px;
	border: 0px;
	margin: 0px;
	padding: 0;
	text-align: center;
	display: block;
	width: 45px;
	height: 33px;
	background: url(http://i.cdn.turner.com/money/news/economy/world_economies_gdp/images/flags.png) 0px 50px no-repeat;
}

#itemTrail1, #itemTrail2, #itemTrail3, #itemTrail4, #itemTrail5, #itemTrail6, #itemTrail7, #itemTrail8, #itemTrail9, #itemTrail10 {
	position: absolute;
	background: url(http://i.cdn.turner.com/money/news/economy/world_economies_gdp/images/dotLine.png) 0px 0px;
	background-repeat: repeat-y;
	padding: 0px;
	left: 50px;
	bottom: 4px;
	width: 2px;
	border: 0px;
	color: #EEEEEE;
}

/******************* baseline *******************/

#baseLine {
	position: absolute;
	left: 0px;
	top: 414px;
	height: 1px;
	width: 925px;
	vertical-align:top;
	border-bottom: 1px solid #666666;
}

#baselineNote {
	position: absolute;
	left: 0px;
	top: 425px;
	font-family: lato, verdana, arial, sans-serif;
	font-size: 14px;
	height: 10px;
	color: #666666;
	text-align: left;
}

#baselineSource {
	position: absolute;
	right: 0px;
	top: 425px;
	font-family: lato, verdana, arial, sans-serif;
	font-size: 12px;
	height: 10px;
	color: #CCCCCC;
	text-align: right;
}

#interactiveBody
{
	height:670px;
}

#smt_secondary
{
	margin-bottom:8px;
}