html, body {
	font-family: "Source Sans Pro", Arial, Verdana, Helvetica, Arial, sans-serif;
	margin:0;
	padding:0;
}
a {
	color: #9f2b2b;
}
.noScroll {
	overflow: hidden;
}
.wrapper {
	width: 972px;
	margin:0 auto;
	margin-top: 20px;
	position: relative;
}

.wrapper > .text {
	margin-left: 20px;
	width: 400px;
	margin-bottom: 30px;
}
.wrapper > .text .title {
	color: #9f2b2b;
	font-weight: bold;
	font-size: 24px;
}
.wrapper > .text .subtitle {
	color: #9f2b2b;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 5px;
}
.wrapper > .text .descrText {
	font-size: 12px;
	line-height: 15px;
	margin-bottom: 30px;
}

/*svg styles */

rect.air {
	pointer-events: none;
	fill: white;
}
rect.ground {
	pointer-events: none;
	fill: black;
}
rect.other {
	pointer-events: none;
	fill: black;
}
rect.hover {
	cursor: pointer;
	opacity:0;
	fill: transparent;
}
.ticks {
}
.ticks g {
}
.ticks line {
	stroke: white;
}


.ticks .yTickLbl {
	text-anchor: end;
	fill: white;
}
.ticks .yearTick {
	stroke: white;
	opacity: 0.5;
}
.ticks .yearLbl {
	fill: white;
	font-size: 18px;
}
.upTickGroup line {
	stroke: #939393;
}
.upTickGroup text {
	text-anchor: end;
	fill: #939393;
}
.typeLabel {
	pointer-events: none;
	opacity: 0.5;
	font-size: 75px;
	font-weight: bold;
}
svg .overlay {
	pointer-events: none;
	fill: #fff;

	opacity:0;
	-webkit-transition: opacity 0.1s ease-out;  
       -moz-transition: opacity 0.1s ease-out; 
         -o-transition: opacity 0.1s ease-out;
            transition: opacity 0.1s ease-out;
}
svg#attacks {
}
.mouseFollowDot {
	stroke: white;
	fill: #ac1d28;
	pointer-events: none;
}

.annotations circle {
	fill: #9f2b2b;
	cursor: pointer;
}
.annotationGuide {
	stroke: #c2c2c2;
	opacity:0;
	pointer-events: none;
	-webkit-transition: opacity 0.1s ease-out;  
       -moz-transition: opacity 0.1s ease-out; 
         -o-transition: opacity 0.1s ease-out;
            transition: opacity 0.1s ease-out;
}
.keyGroup {
	pointer-events: none;
	-webkit-transition: opacity 0.25s ease-out;  
       -moz-transition: opacity 0.25s ease-out; 
         -o-transition: opacity 0.25s ease-out;
            transition: opacity 0.25s ease-out;
}
.keyGroup.locked {
	pointer-events: auto;
}
.keyGroup rect {
	fill: black;
	opacity:0.7;
}
.keyGroup line {
	stroke: #cecece;
}
.keyGroup text {
	fill: white;
	font-size: 14px;
}
/* End svg style */




.controls {
	position: absolute;
	top: 0;
	width: 100%;
	left: 0px;
	z-index: 5;
}
.controls .typesToInclude div {
	float: left;
	margin-right: 10px;
	cursor: pointer;
}
.controls .typesToInclude div.active {
	font-weight: bold;
}
.controls .key {
	position: absolute;
	top: 247px;
	right:10px;
	background: #e3e3e3;
	padding: 1px 4px;
	font-size: 12px;
	border: 1px solid #cdcdcd;
	cursor: pointer;
}
.minMax {
	position: absolute;
	top: 221px;
	right: 50px;
}
.minMax > * {
	float: left;
}
.minMax span {
	font-size: 12px;
	font-style: italic;
	text-transform: uppercase;
	margin-top: 28px;
	margin-right: 10px;
}
.minMaxSVG .fullRect {
	fill: #4d4d4d;
}
.minMaxSVG .bgRect {
	fill:#e3e3e3;
}
.minMaxSVG line {
	stroke: black;
	stroke-dasharray: 2,2
}
.minMaxSVG .minLine {
	stroke: #999;
}
.minMaxSVG .activeLine {
	stroke-dasharray:none;
}
.minMaxSVG .minLbl {
	text-anchor: end;
}
.minMaxSVG .box {
	fill: white;
	stroke: #d7d7d7;
	cursor: pointer;
}
.minMaxSVG .box.active {
	fill: #393939;
	stroke: none;
}
.minMaxSVG .lbl {
	fill: #000;
	font-size: 11px;
	pointer-events: none;
}
.minMaxSVG .lbl.active {
	fill: #fff;
}
.minMaxSVG .fillRect {
	fill: #4d4d4d;
	opacity: 0.5;
}
.minMaxSVG .fillBGRect {
	fill: #4d4d4d;
	opacity: 0;
	
}
/*
.minMaxSVG .box:hover {
	fill: #595959;
}
.minMaxSVG .box.active:hover {
	fill: #393939;
}
*/
.controls .timeGroupingControl {
	clear: both;
	width: 200px;
}
.controls .timeGroupingControl > span {
	width: 100px;
	display: inline-block;
	cursor: pointer;
}
.controls .timeGroupingControl input {
	margin-right: 5px;
	cursor: pointer;
}

.stats {
	position: absolute;
	right:0px;
	top:40px;
	clear: both;
}
.stats .type {
	clear: both;
}
.stats .type .lbl {
	float: left;
	width: 80px;
	text-align: right;
	padding-right: 5px;
}
.stats .type .value {
	float: left;
}
.stats svg {
	
}
.stats svg .inactive {
	fill: #e5e5e5;
}
.stats svg .active {
	fill: #8e211c;
}
.stats .typeGroup text {
	text-anchor: middle;
}
.stats .typeGroup .lbl {
	font-weight: bold;
	font-size: 14px;
}
.stats .typeGroup .value {
	font-size: 24px;
}
.stats .typeGrouptotal .lbl {
	font-size: 22px;
}
.stats .typeGrouptotal .value {
	font-size: 37px;
}
.commanders {
	
}
.commanderBG {
	cursor: pointer;
}
.commander text {
	fill: white;
	font-size: 11px;
	text-anchor: middle;
	pointer-events: none;
}

.redHoverLine {
	opacity:0;
	stroke: red;
	-webkit-transition: opacity 0.3s ease-out;  
       -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out;
            transition: opacity 0.3s ease-out;
    pointer-events: none;
}


.tooltip {
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
	width: 210px;
	font-size: 13px;
	-webkit-transition: opacity 0.3s ease-out;  
       -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out;
            transition: opacity 0.3s ease-out;
}
.tooltip .tooltipContent {
	background: white;
	padding-bottom: 10px;
}
.tooltip .none {
	padding: 0 10px;
	font-size: 12px;
}
.tooltip .time {
	background: #f1f1f1;
	font-weight: bold;
	font-size: 16px;
	color: #686868;
	padding: 3px 10px;
	margin-bottom: 10px;
}
.tooltip .total {
	padding-left: 10px;
	float: left;
}
.tooltip .value {
	font-weight: bold;
}
.tooltip .types {
	float: right;
	font-weight: bold;
	
}

.tooltip .types .air {
	width: 50px;
	height: 18px;
	/*background: url('../images/airIcon.png') 0 0 no-repeat;*/
	float: left;
	text-align: center;
}
.tooltip .types .ground {
	width: 50px;
	float: left;
	height: 18px;
	/*background: url('../images/groundIcon.png') 0 0 no-repeat;*/
	text-align: center;
}

.tooltip .headers .air {
	width: 30px;
	height: 18px;
	background: url('../images/airIcon.png') 0 0 no-repeat;
	padding-left: 21px;
	float: left;
}
.tooltip .headers .ground {
	width: 30px;
	float: left;
	height: 18px;
	background: url('../images/groundIcon.png') 0 0 no-repeat;
}
.tooltip .headers {
	margin-left: 128px;
	margin-bottom: 2px;
}
.tooltip .fatalities {
	clear: both;
}
.tooltip .cumTotal {
	clear: both;
	padding: 10px;
	font-style: italic;
}
.tooltip .close {
	position: absolute;
	top: -23px;
	background: #fff;
	color: #ccc;
	font-size: 24px;
	right:0px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	cursor: pointer;
	pointer-events: auto;
	display: none;
	border: 1px solid #ccc;
	text-indent: 4px;
	line-height: 20px;
}

.tooltip .seeAttacks {

	cursor: pointer;
	display: none;
	position: absolute;
	top: 4px;
	right: 7px;
	pointer-events: auto;
	font-size: 12px;
	padding: 1px 3px;
	background: #9e0819;
	color: white;
}
.tooltip.locked .close {
	display: block;
}
.tooltip.locked .seeAttacks {
	display: block;
}
.tooltip.empty.locked .seeAttacks {
	display: none;
}
.tooltip .attacks {
	padding-top:24px;
}
/*
.tooltip .stat {
	clear: both;
	font-size: 12px;
}
.tooltip .bigStat {
	font-size: 16px;
}
.tooltip .value {
	float: right;
}
.tooltip .most .value {
	clear: both;
}
.tooltip .cumTotal {
	margin-top: 5px;
}
*/
.commanderTT {
	position: absolute;
	top: 56px;
	z-index:10;
	border: 1px solid #dadada;
	opacity:0;
	width: 270px;
	-webkit-transition: opacity 0.3s ease-out;  
       -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out;
            transition: opacity 0.3s ease-out;
    box-shadow: 0px 0px 7px 0px black;
}
.commanderTT .bottomBar {
	height: 4px;
	position: absolute;
	bottom: -1px;
	left:-1px;
	width: 272px;
	background-color: #dadada;
}
.commanderTT .content {
	background: white;
	padding: 10px;
	font-size: 13px;
}
.commanderTT .commanderStats{
	width: 120px;
	float: left;
	margin-right: 10px;
}
.commanderTT .commanderStats span {
	font-weight: bold;
}
.commanderTT #ttMap {
	width: 120px;
	height: 100px;
	float: left;
}
.commanderTT .stat {
	clear:both;
}
.commanderTT .stat .value {
	float: right;
}
.commanderTT .name {
	font-size: 15px;
	font-weight: bold;
	color: #ba0000;
}
.commanderTT svg path {
	fill: #3c3c3c;
	opacity: 0.5;
}
.commanderTT svg circle {
	fill: rgba(175,13,13, 0.4);
	stroke: rgba(175,13,13, 1);
}
.commanderTT .time {
	position: absolute;
	right: 14px;
	top: 10px;
}
.commanderTT .responsible > div {
	float: left;
}
.commanderTT .responsible .text {
	font-style: italic;
}
.commanderTT .responsible .hr {
	height: 2px;
	background: #d0d0d0;
	width: 164px;
	margin-top: 7px;
	margin-left: 5px;
}
.commanderTT .types {
	margin-top: 5px;
	font-weight: bold;
}
.commanderTT .types .air {
	width: 35px;
	height: 18px;
	background: url('../images/airIcon.png') 0 0 no-repeat;
	padding-left: 20px;
	float: left;
}
.commanderTT .types .ground {
	width: 30px;
	float: left;
	height: 18px;
	background: url('../images/groundIcon.png') 0 0 no-repeat;
	padding-left: 20px;
}
.commanderTT .region {
	font-size: 12px;
}
.commanderTT .region .most {
	font-size: 13px;
	font-weight: bold;
}
.commanderTTArrow {
	position: absolute;
	width: 20px;
	height: 12px;
	background: url('../images/commanderTTArrowDark.png') 0 0 no-repeat;
	top: 216px;
	z-index: 12;
	-webkit-transition: opacity 0.3s ease-out;  
       -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out;
            transition: opacity 0.3s ease-out;
    opacity: 0;
}
.intro {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: white;
	z-index: 10;
}
.intro .icons {
	position: absolute;
	opacity:0;
	z-index:1;
}
.intro .cacheCanvas {
	position: absolute;
	opacity: 0;
	z-index:1;
}
.intro svg {
	position: absolute;
	z-index: 3;
}
.intro .introText {
	text-align: center;
	font-size:24px;
	margin-top: 60px;
}
.intro .dismiss {
	text-align: center;
	background: #bf0e15;
	color: white;
	font-size: 40px;
	width: 53px;
	padding-bottom: 5px;
	border-radius: 50%;
	margin: 0 auto;
	margin-top: 60px;
	cursor: pointer;
}
.intro .dismiss:hover {
	opacity: 0.85;
}
.commanderLabel {
	position: absolute;
	font-size: 12px;
	font-style: italic;
	top: 253px;
	text-transform: uppercase;
	left: 20px;
}


.annotation {
	position: absolute;
	top: 313px;
	text-align: center;
	padding: 10px;
	background: #2e2e2e;
	color: white;
	opacity:0;
}

.attackList {
	position: fixed;
	top: -500px;
	height: 500px;
	width: 460px;
	padding: 20px;
	background: white;
	z-index: 10;
	display: none;
	opacity:0;
	
	-webkit-transition: opacity 0.5s ease-out;  
       -moz-transition: opacity 0.5s ease-out; 
         -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
}
.attackListOverlay {
	position: fixed;
	width: 100%;
	top:0;
	left:0;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 9;
	display: none;
	opacity:0;
	
	-webkit-transition: opacity 0.5s ease-out;  
       -moz-transition: opacity 0.5s ease-out; 
         -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
}
.attackList .close {
	color: #a8a8a8;
	border: 1px solid #a8a8a8;
	border-radius: 50%;
	position: absolute;
	top:10px;
	right:10px;
	cursor: pointer;
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-indent: 5px;
}
.attackList .dateTitle {
	font-weight: bold;
	text-align: center;
	color: #9b0007;
	font-size: 20px;
}
.attackList .table {
	margin-top: 10px;
}
.attackList .table .th {
	width: 460px;
}
.attackList .table .th .h {
	background: #4a4a4a;
	float: left;
	color: white;
	font-weight: bold;
	font-size: 13px;
	padding: 5px 0px 5px 10px;
}
.attackList .table .date {
	width: 40px;
}
.attackList .table .type {
	width: 97px;
}
.attackList .table .region {
	width: 140px;
}
.attackList .table .deaths {
	width: 65px;
}
.attackList .table .th {
	background: #4a4a4a;
	
}
.attackList .table .type {
	padding-left: 20px !important;
}
.attackList .table .expand {
	float: right;
	color: #9f2b2b;
	background: white;
	font-weight: bold;
	cursor: pointer;
	font-size: 11px;
	margin-right: 5px;
	margin-top: 6px;
	padding: 1px 3px;
}
.attackList .table .rows {
	height: 419px;
	clear: both;
	overflow-y: auto;
	margin-top: -4px;
}
.attackList .table .row {
	padding: 4px 0 3px 0;	
	cursor: pointer;
}
.attackList .table .row .cell {
	float: left;
	font-size: 13px;
	padding: 0px 0px 0px 10px;
	
}


.attackList .table .row .date {
	font-weight: bold;
}

.attackList .table .row .air {
	background: url('../images/airIcon.png') 0 1px no-repeat;
	padding-left: 20px;
	float: left;
}
.attackList .table .row  .ground {
	float: left;
	background: url('../images/groundIcon.png') 0 1px no-repeat;
	padding-left: 20px;
}
.attackList .table .cell.deaths {
	width: 108px;
}
.attackList .table .row:nth-child(even) {
	background: #efefef;
}
.attackList .table .row:hover {
	background: #e1e1e1;
}

.attackList .details {
	
	font-size: 12px;
	clear: both;
	display: none;
	padding-top: 1px;
	padding-bottom: 10px;
}
.attackList .row.expanded .details {
	display: block;
}
.attackList .row .location .bold {
	font-weight: bold;
}

.attackList .row .details > div {
	margin-top: 5px;
	padding-left: 20px;
}
.attackList .row .sources a {
	display: block;
	height: 1.3em;
	white-space: nowrap;
	overflow: hidden;
	width: 410px;
	color: #9b0007;
}
.attackList .monthStats {
	font-size: 14px;
	width: 100%;
	margin-top: 10px;
}
.attackList .monthStats > div {
	float: left;
	border: 1px solid #e1e1e1;
	background: #f8f8f8;
	padding: 4px 10px;
}
.attackList .monthStats .number {
	font-weight: bold;
}

.attackList .monthStats .air {
	width: 30px;
	height: 18px;
	background: url('../images/airIcon.png') 0 0 no-repeat;
	padding-left: 21px;
	font-weight: bold;
	
}
.attackList .monthStats .ground {
	width: 30px;
	padding-left: 21px;
	height: 18px;
	background: url('../images/groundIcon.png') 0 0 no-repeat;
	font-weight: bold;
	
}
.attackList .monthStats .lbl {
	padding-right: 22px;
}
.attackList .monthStats .fatalities {
	float: right;
}
.expandLbl {
	pointer-events: none;
	position: absolute;
	top:0;
	left:0;

	opacity:0;
	
	-webkit-transition: opacity 0.5s ease-out;  
       -moz-transition: opacity 0.5s ease-out; 
         -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
}
.expandLbl > div {
	float: left;
}
.expandLbl .leftArrow {
	width: 0; 
	height: 0; 
	
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent; 
	border-right: 9px solid rgba(255,255,255,0.9); 
	display: none;
}
.expandLbl .text {
	background: rgba(255,255,255,0.9);
	color: black;
	padding: 2px 1px;
	padding-left: 5px;
	font-size: 11px;
	font-style: italic;
}
.expandLbl .rightArrow {
	width: 0; 
	height: 0; 
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent; 
	border-left: 9px solid rgba(255,255,255,0.9); 
	display: block;
}
.expandLbl.left .leftArrow {
	display: block;
}
.expandLbl.left .rightArrow {
	display: none;
}
.expandLbl.left .text {
	padding-left: 1px;
	padding-right: 5px;
}

.annotationTip {
	position: absolute;
	padding: 10px;
	top:540px;
	left:0;
	z-index:10;
	font-size: 12px;
	width: 250px;
	background: white;
	display: none;
	opacity:0;
	-webkit-transition: opacity 0.3s ease-out;  
       -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out;
            transition: opacity 0.3s ease-out;
            
}
.annotationTip2 {
	top: 680px;
}
.annotationTip .title {
	font-size: 14px;
	font-weight: bold;
	color:#a40002;
}
.annotationTip .date {
	font-style: italic;
	font-size: 11px;
	margin-bottom: 3px;
}


.credit {
	color: white;
	position: absolute;
	bottom: 10px;
	font-size: 12px;
	text-align: right;
	right: 6px;
}
.credit a {
	color: white;
}
svg {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: moz-none;
	-ms-user-select: none;
	user-select: none;
}


.opacityFade {
	opacity:0;
	-webkit-transition: opacity 1s ease-out;  
       -moz-transition: opacity 1s ease-out; 
         -o-transition: opacity 1s ease-out;
            transition: opacity 1s ease-out;
}




.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}