/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


/*html {
	height: 100%;
	min-height: 600px;
}*/

body {
	background-color: rgba(20,20,20,1);
	font-family: Lato, sans-serif;
/*	height: 100%;*/
}

#container {
	position:relative;
	margin: auto;
	width: 1024px;
	overflow: hidden;

	-webkit-transition: height 0.4s ease-in-out;
	-moz-transition: height 0.4s ease-in-out;
	-ms-transition: height 0.4s ease-in-out;
}

#container.old {
	height: 1245px;
}

#container.new {
	height: 1045px;
}

#container.intro {
	height: 750px;
}

#c {
	width: auto;
	margin: auto;
	position: absolute;
	top: 45px;
	left: 48px;
	display: none;
}

canvas {
	position: absolute;
}

#container.new canvas {
	cursor: pointer;
}

#stage {
	z-index: 0;
}

#overstage {
	z-index: 1;
}

#distributionView {
	z-index: 0;
}

.header {
	display: none;
}

.header h1 {
	color: rgba(255,255,255,0.8);
	margin: 14px 0px 0px 0px;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
	padding-left: 22px;
}

.header div {
	background-color: rgb(40,40,40);
	position: absolute;
	top: 11px;
	border: none;
	cursor: pointer;
	padding: 13px 30px 14px 30px;
	box-shadow: inset 0 0 1px 0px rgb(20,20,20);
}

.header div.leftView {
	left: 252px;
	border-top-left-radius: 1px;
	border-bottom-left-radius: 1px;
	-moz-border-top-left-radius: 1px;
	-moz-border-bottom-left-radius: 1px;
}

.header div.rightView {
	left: 312px;
	border-top-right-radius: 1px;
	border-bottom-right-radius: 1px;
	-moz-border-top-right-radius: 1px;
	-moz-border-bottom-right-radius: 1px;
}

.header div:not(.curView):hover {
	background-color: rgb(50,50,50);
}

.header div:hover:not(.curView) > span {
	color: rgb(150,150,150);
}

.header span {
	position: absolute;
	top: 3px;
	left: 6px;
	color: rgb(120,120,120);
	font-family: Lato, sans-serif;
	font-size: 20px;
	font-weight: 400;
	cursor: pointer;
}

.header div.curView {
	background-color: rgb(60,60,60);
	z-index: 1;
}

.header div.curView span {
	color: rgb(190,190,190);
	z-index: 1;
}

/*#oldText {
	left: 7px;
}*/

/*#oldDiv {
	left: 252px;
}*/

/*#newText {
	left: 7px;
}*/

/*#newDiv {
	left: 312px;
}*/

.header h2 {
	color: rgba(255,255,255,0.4);
	text-align: right;
	font-size: 20px;
	font-weight: 400;
	position: relative;
	text-transform: uppercase;
	letter-spacing: 1px;
	top: -13px;
	padding-right: 22px;
	float: right;
	width: 200px;
}

#peoplebox {
	position: absolute;
	z-index: 1;
	left: 22px;
	top: 56px;
	display: none;
}

	#peoplecount {
		color: rgba(255,180,0,0.7);
		font-size: 60px;
		font-weight: 700;
	}

	#peoplelabel, #yearlabel {
		font-size: 14px;
		font-weight: 700;
		position: relative;
		top: 6px;
		letter-spacing: 1px;
	}

	#peoplelabel {
		color: rgba(255,180,0,0.7);
		text-align: left;
	}

#sinceNumBox {
	position: absolute;
	z-index: 1;
	left: 22px;
	top: 145px;
	display: none;
	color: rgba(171,101,3,0.80);
}

	#sinceNum {
		font-size: 32px;
		font-weight: 700;
		float: left;
	}

	#sinceNumText {
		font-size: 12px;
		font-weight: 400;
		font-style: italic;
		margin-left: 5px;
		margin-top: 3px;
		width: 130px;
		line-height: 13px;
		float: right;
	}

#yearsbox {
	position: absolute;
	z-index: 2;
	right: 32px;
	top: 56px;
	display: none;
}

	#yearscount {
		color: rgba(255,255,255,0.7);
		font-size: 60px;
		font-weight: 700;
		float: right;
	}

	#yearlabel {
		margin: 0px 0px 0px 0px;
		color: rgba(255,255,255,0.7);
		font-size: 14px;
		font-weight: 700;
		float: right;
		cursor: default;
	}

.calloutText {
	font-size: 150px;
	width: 400px;
	margin: 50px auto;
	color: rgba(255,180,0,1);
	display: none;
}

#questionMark {
	position: absolute;
	top: 112px;
	right: 15px;
	border: 5px solid rgb(20,20,20);
	opacity: 1;
	display: none;
}

.methodsTooltip {
	padding: 15px 20px 20px 20px;
	background-color: rgba(20,20,20,.75);
	font-family: Lato, sans-serif;
	width: 450px;
	libe-height: 10px;
}

.methodsTooltip .close {
	position: absolute;
	background: url(img/CloseButton.gif) no-repeat;
	padding: 3px;
	right: 8px;
	top: 8px;
	cursor: pointer;
	width: 13px;
	height: 13px;
	opacity: 0.7;
}

.methodsTooltip .close:hover {
	opacity: 1;
}

.methodsTooltip h1 {
	/*position: relative;
	color: rgba(255,255,255,0.5);
	margin: 0px 0px 12px 0px;
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 2px;*/
	font-size: 14px;
	font-weight: 400;
	color: rgba(210,210,210,0.7);
	margin-bottom: 10px;
	letter-spacing: 1px;
}	

.methodsTooltip h2 {
	color: rgba(210,210,210,0.7);
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 4px;
	letter-spacing: 1px;
}

.methodsTooltip p {
	/*color: rgba(120,120,120,0.8);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;*/
	font-size: 14px;
	font-weight: 300;
	color: rgba(130,130,130,1);
	line-height: 17px;
}

.methodsTooltip a {
	color: rgba(120,120,120,1);
}

#numTop {
	top: 298px;
}

#pctTop {
	top: -15px;
}

#topFilter {
	bottom: -264px;
	left: -47px;
}

.filterShell {
	overflow: hidden;
	max-height: 116px;
	padding-top: 1px;
}

.filterList {
	width: 150px;
	top: 0px;
	line-height: 13px;
}

.shortList {
	position: static;
}

.longList {
	position: relative;
	top: 0px;
}

.scrollArrow {
	opacity: 0.8;
	cursor: pointer;
}

.top.scrollArrow {
	padding-top: 4px;
}

.bot.scrollArrow {
	padding-bottom: 4px;
}

.leftWhiteLabel {
	display: none;
	z-index: 1;
	position: absolute;
	left: 0px;
	color: rgb(180,180,180);
}

.percent {
	font-size: 14px;
	font-weight: 400;
	left: 11px;
	text-transform: uppercase;
}

.filterLabel {
	cursor: pointer;
	margin-top: 3px;
	margin-bottom: 1px;
}

.filterLabel:hover .filterLabelClose {
	opacity: 1;
}

.filterLabelText {
	display: inline-block;
	font-size: 13px;
	font-style: normal;
	font-weight: 300;
	text-transform: capitalize;
}

.filterLabelClose {
	display: inline-block;
	margin: 0px 5px 0px 0px;
	background: url(img/labelX.png) no-repeat;
	cursor: pointer;
	width: 7px;
	height: 7px;
	vertical-align: 1px;
	opacity: 0.7;
}

.filterLabelClose:hover {
	opacity: 1;
}

#botFilter {
	top: 446px;
	left: 11px;
}

#pctBot {
	top: 428px;
}

#numBot {
	top: 394px;
}

.rightWhiteLabel {
	display: none;
	z-index: 1;
	position: absolute;
	right: 23px;
	font-size: 12px;
	color: rgba(180,180,180,1);
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	padding-right: 22px;
}

#topHistLabel {
	top: 293px;
}

#stolenTopLabel {
	top: 275px;
	text-transform: none;
	font-size: 14px;
}

.italic {
	font-style: italic;
}

/*#botHistLabel {
	top: 370px;
}*/

#distSwitch {
	position: absolute;
	left: 15px;
	top: 344px;
	z-index: 2;
	width: 31px;
	height: 17px;
	display: none;
	opacity: 0.85;
	cursor: pointer;
	background: url('img/distribViewIcon.png') no-repeat;

	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;	
}

#distSwitch:hover {
	opacity: 1;
}

#distSwitch.focus {
	background: url('img/timeViewIcon.png') no-repeat;
}

#replay {
	cursor: pointer;
	position: absolute;
	right: 24px;
	top: 350px;
}

.axis {
	position: absolute;
	z-index: 0;
	border-color: rgba(200,200,200,0.4);
	width: 881px;
	left: 76px;
	height: 3px;
	border-style: solid;
	display: none;
}

.axisLabel {
	position: absolute;
	top: 354px;
	color: rgba(200,200,200,0.7);
	font-size: 8px;
	display: none;
}

.tooltip {
	z-index: 2;
}

.bigTooltip {
	padding: 8px 10px 8px 10px;
	color: rgba(200,200,200,1);
	font-family: Lato, sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 18px;
	border-radius: 3px;
	-moz-border-radius: 3px;
}

span.introTooltip {
	color: #fff;
	text-shadow: 0 0 10px #000;
}

.smallTooltip {
	padding: 5px;
	color: rgba(200,200,200,1);
	font-family: Lato, sans-serif;
	font-size: 13px;
	font-weight: 300;
}

.hiddenTooltip {
	display: none;
}

.tEm {
	font-weight: 700;
}

.tIt {
	font-style: italic;
	font-weight: 300;
}

.hoverRule {
	border-width: 0px 0px 1px 0px;
	border-color: rgba(150,150,150,0.85);
}

#menuContainer {
	width: 100%;
	position: absolute;
	top: 680px;
}

#menuInnerDiv {
	display: table;
	margin: 0px auto;
}

#menuBox {
	z-index: 2;
	display: none;
}

#menuBox > .menuDiv {
	float: left;
	list-style-type: none;
	background: rgba(40,40,40,1);
	color: rgba(120,120,120,1);
	height: 24px;
	width: 117px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	border-right: 1px solid rgb(20,20,20);
}

/*#menuBox > .menuDiv:hover {
	background: rgba(60,60,60,1);
	color: rgba(210,210,210,1);
}*/

.menuDiv.leftcorner {
	border-bottom-left-radius: 2px;
	border-top-left-radius: 2px;
}

.menuDiv.leftcorner.shownList {
	border-top-left-radius: 0px;
}

.menuDiv.rightcorner {
	border-bottom-right-radius: 2px;
	border-top-right-radius: 2px;
}

.menuDiv.rightcorner.shownList {
	border-top-right-radius: 0px;
}

.menuTitle {
	font-size: 11px;
}

.filterDiv {
	display: none;
	position: absolute;
	top: -129px;
	cursor: pointer;
	z-index: 2;
}

.filterDiv .headlineDiv {
	display: block;
	height: 21px;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	-moz-border-top-left-radius: 2px;
	-moz-border-top-right-radius: 2px;
	background: rgba(40,40,40,0.75);
	color: rgb(120,120,120);
	border-bottom: 1px solid rgb(20,20,20);
	border-right: 1px solid rgb(20,20,20);
}

.filterDiv .headlineDiv span {
	font-size: 12px;
	line-height: 20px;
	display: block;
	margin: 0px 6px 0px 6px;
}

.headlineDiv .headlineTitle {
	float: left;
	font-style: italic;
}

.headlineDiv .headlineNoFilter {
	float: right;
	font-style: normal;
}

.headlineDiv .headlineNoFilter:hover {
	color: rgb(210,210,210);
}

.headlineDiv .headlineNoFilter.invisible {
	display: none;
}

.filterDiv.shownList {
	display: block;
}

.menuGroup {
	display: inline-block;
	vertical-align: bottom;
	height: 106px;
	width: 117px;
	background: rgba(40,40,40, 0.75);
	border-bottom: 1px solid rgb(20,20,20);
	border-right: 1px solid rgb(20,20,20);
}

.menuGroup li {
	height: 21px;
	font-weight: 400;
	font-size: 11px;
	line-height: 21px;
	text-align: left;
	color: rgb(120,120,120);
	text-transform: capitalize;
}

.menuGroup .hasValue:hover {
	background: rgb(60,60,60);
	color: rgb(210,210,210);
}

.menuGroup li .menuName {

}

.menuGroup li.checked .menuName {

}

.menuGroup li .menuToggle {
	background: url(img/filterOff.png) no-repeat;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0px 5px 1px 5px;
}

.menuGroup li.checked .menuToggle {
	background: url(img/filterOn.png) no-repeat;
}

#findings {
	position: absolute;
	width: 100%;
	top: 730px ;
	height: 430px;
	display: none;
}

.findingsRuleBox {
	text-align: center;
}

.findingsRule {
	border: none;
	border-top: thin solid;
	color: rgba(80,80,80,0.8);
	text-align: center;
	width: 964px;
}

.ruleText {
	display: inline-block;
	position: relative;
	font-size: 17px;
	font-weight: 400;
	color: rgba(120,120,120,0.9);
	top: -18px;
	padding: 0px 10px;
	background: rgba(20,20,20,1);
	font-style: italic;
	letter-spacing: 0px;
}

/*#oldFindingsRule:after {
	content: "What This Data Reveals";
}

#newFindingsRule:after {
	content: "Crowdsourced 2013 U.S. Gun Death Data";
}*/

.fLeft {
	display: inline-block;
	padding: 0.2% 2% 1% 6%;
	width: 42%;
	float: left;
}

.fRight {
	display: inline-block;
	padding: 0.2% 6% 1% 2%;
	width: 41%;
	float: right;
}

.fTop, .fBot, .topLine {
	display: inline-block;
	padding: 0px 50px 0px 50px;
	width: 962px;
}

.fTop {
	text-align: center;
}

.topLine {
	text-align: center;
	position: relative;
	top: -7px;
}

.find {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	padding: 0px 0px 18px 0px;
}

.fTop .find, .fBot .find {
	width: 46%;
}

.leftFind {
	padding-right: 4%;
}

#findings h1 {
	font-size: 14px;
	font-weight: 400;
	color: rgba(150,150,150,1);
	margin-bottom: 4px;
	text-transform: uppercase;
}

#findings img {
	float: left;
	margin: 4px 10px 3px 0px;
	border: thin solid;
	border-color: rgba(50,50,50,0.8);
	cursor: pointer;
}

#findings .img2013 {
	opacity: 0.75;
}

#findings .img2013:hover {
	opacity: 1;
}

#findings .imgContainer {
	float: left;
	position: relative;
	cursor: pointer;
}

#findings .imgContainer img {
	opacity: 0.50;
}

#findings .imgContainer:hover img {
	opacity: 0.80;
}

#findings .imgContainer span {
	position: absolute;
	width: 149px;
	text-align: center;
	color: rgba(150,150,150,0.75);

}

#findings .imgContainer .viewOverlay {
	left: 0px;
	top: 22px;
	font-size: 42px;
}

#findings .imgContainer .underViewOverlay {
	top: 65px;
	left: 0px;
	font-size: 14px;
	text-transform: uppercase;
}

#findings .headline {
	text-align: center;	
	color: rgba(255, 255, 255, 0.65);
	font-size: 21px;
	padding-bottom: 27px;
	padding-top: 14px;
}

#findings p, #findings a {
	font-size: 14px;
	font-weight: 300;
	color: rgba(110,110,110,1);
	line-height: 17px;
	margin-bottom: 8px;
}

#findings span.methodsClick, #click2010 {
	cursor: pointer;
	text-decoration: underline;
}

#blurb {
	display: none;
	position: absolute;
	bottom: 10px;
	width: 100%;
	line-height: 19px;
	color: rgb(120,120,120);
	text-align: center;
	font-size: 10px;
	font-weight: 400;
	padding-top: 8px;
	padding-bottom: 8px;

	-webkit-transition: bottom 0.4s ease-in-out;
	-moz-transition: bottom 0.4s ease-in-out;
	-ms-transition: bottom 0.4s ease-in-out;
}

#blurb.intro {
	bottom: 0px;
}

#logo, #methodsClick{
	border-right: 1px solid #666;
	display: inline-block;
	padding-right: 9px;
}


#blurb a, #blurb span, #blurb img {
	vertical-align: middle;
}

#blurb a, #methodsClick {
	color: rgb(150,150,150);
	text-decoration: none;
	opacity: 0.65;
	font-size: 12px;
}

#blurb a:hover, #methodsClick:hover {
	opacity: 1;
	cursor: pointer;
}

#blurb span {
	margin: 0px 9px 0px 9px;
	font-size: 12px;
}

#logo {
	margin: 0px 0px 0px 0px;
}

#blurb span.social {
	margin: 0;
}

#twit {
	margin-left: 2px;
	margin-right: 30px;
}