@import url("/fonts/almoni.css");
html {
    height: 100%;
}

body {
    background: rgba(0, 0, 0, 0) url("images/background.jpg") repeat scroll 0 0;
    box-shadow: 0 0 48px -19px rgba(0, 0, 0, 0.75) inset;
    direction: rtl;
    margin: 0;
    padding: 0;
    font-family : almoni-tzar, Arial, Sans-serif;
    min-height: 100%;
	overflow: hidden;
}

body.ready, body.israelis {
overflow: auto;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#map-and-list {
    margin: 0 auto;
    max-width: 100%;
    width: 840px;
    position: relative;
}

#loading-overlay {
    position: fixed;
    height: 100%;
    width: 100%;
     background-color: rgba(255, 255, 255, 0.8); 
    z-index: 10;
}

#loading-wraper {
    position:relative;
	margin: 50px auto 0;
	width: 200px;
}

#heading, #main, #list {
    margin: 0 auto;
    max-width: 100%;
    width: 840px;
    position: relative;
}

#main {
    padding-bottom: 50px;
    border-bottom: 2px solid #000; 
    margin-bottom: 20px;
}

#heading {
	background: url('images/new_title_hebrew.png') no-repeat center calc(100% - 10px);
	height: 45px;
	padding: 45px 0 9px;
	border-bottom: 2px solid #000;
	margin-bottom: 32px;
}

#logo {
    background: rgba(0, 0, 0, 0) url("images/logo.png") no-repeat scroll right top;
    height: 90px;
    position: absolute;
    right: 0;
    bottom: 3px;
    width: 80px;
}

#list {
    padding-bottom:200px;
}

h3 {
    font-size: 25px; 
    color: #a94631; 
    margin: 0 0 20px;
}

.slider-container .bound {
    display: inline-block;
    width: 30px;
    font-size: 16px;
}
.slider-container .upper {
    text-align: right;
}
#date-slider-container .bound {
    width: 30px;
}

#range-filters {
    font-size: 20px;
}

#age {
    margin-bottom: 10px;
}

#map-wraper {
	float: left;
	max-width: 100%;
}

#map-container {
	position: relative;
	width: 500px;
	min-height: 200px;
	margin-top: 51px;
	max-width: 100%;
}

#map-container::after {
	padding-top: 130%;
	display: block;
	content: "";
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}

#stats-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
}

#stats {
	position: absolute;
	bottom: 10px;
	text-align: center;
	font-size: 20px;
	width: 100%;
}

.class-stats {
	background-color: gray;
	display: inline-block;
	width: 16%;
	height: auto;
	color: white;
	padding: 38.5% 1.5% 0px;
	background: rgba(0, 0, 0, 0) none no-repeat scroll center top / 86% auto;
}

.class-stats .count {
    font-size: 45px;
    margin: 0px;
}

#stats-man {
    background-image: url("images/man_grey.svg");    
}

#stats-woman {
    background-image: url("images/woman_grey.svg");
}

#stats-infant {
    background-image: url("images/infant_grey.svg");
}

#stats-child {
    background-image: url("images/child_grey.svg");
}

#stats-elder {
    background-image: url("images/old_grey.svg");
}

#stats-man.active{
    background-image: url("images/man-active.svg");    
}

#stats-woman.active{
    background-image: url("images/woman-active.svg");
}

#stats-infant.active{
    background-image: url("images/infant-active.svg");
}

#stats-child.active{
    background-image: url("images/child-active.svg");
}

#stats-elder.active{
    background-image: url("images/old-active.svg");
}

.slider-container .slider {
    display: inline-block;
    width: 215px;
    margin-left: 10px;
    margin-right: 10px;
}

.option {
    cursor: pointer;
}

.region-marker .count {
    display: table-cell;
    font-size: 22px;
    text-align: center;
    vertical-align: middle;
}

.region-marker .label {
    bottom: 85%;
    color: white;
    font-size: 20px;
    font-weight: bold;
    left: 85%;
    position: absolute;
    white-space: nowrap;
    text-shadow: 0 0 4px #000;
}

.region-marker {
}

.region-marker .count-container {
    border-radius: 50%;
    background-color: white;
    text-align: center;
    border: 2px solid #a94631;
    color: #a94631;
    height: 100%;
    width: 100%;
    display: table;
}

.region-marker .count-container:before {
    content: " ";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 3px solid white;
    opacity: 0.7;
}

.region-marker .count-container:hover {
    border: 2px solid white;
    color: transparent;
    background: #a94631 url("images/zoom.svg") no-repeat center center / 50% ;
}

.region-marker .count-container:hover:before {
    border: 3px solid #a94631;
}

#load-more {
    display: none;
}

#filters{
    width: 310px;
	max-width:100%;
    margin-left:20px;
    float: right;
}

body.israelis #filters {
    float: none;
    /* position: absolute;
    left:0;*/
    margin: 0;
    width: 380px;
}

body.israelis #filters .slider-container {
    display: inline-block;
}

#filters .select, #range-filters {
    border-bottom: 1px solid #000;
    width: 100%;
    margin-left:20px;
    margin-bottom:20px;
    padding-bottom: 20px;
}
#class-filter {
    text-align: center;}

#class-filter .option {
    display: inline-block;
    padding-top: 50px;
    width: 50px;
    background: url('images/buttons.png') no-repeat;
    cursor: pointer;
    margin-left:10px;
    position: relative;
}

#class-filter .option .class-tooltip {
    opacity: 0;
    background-color: black;
    border-radius: 5px;
    display: block;
    left: -25px;
    padding: 5px;
    position: absolute;
    width: 100px;
    transition: opacity 0.5s ease;
    color: white;
    z-index: -5;
}

#class-filter .option:hover .class-tooltip {
    opacity: 1;
    z-index: 5;
}

#class-filter .option:last-child {
    margin-left: 0;
}

#class-filter #class-infant {
    background-position: -480px top;
}

#class-filter #class-infant.selected {
    background-position: -215px top;
}
#class-filter #class-child {
    background-position: -426px top;
}

#class-filter #class-child.selected {
    background-position: -161px top;
}
#class-filter #class-woman {
    background-position: -318px top;
}

#class-filter #class-woman.selected {
    background-position: -53px top;
}
#class-filter #class-elder {
    background-position: -372px top;
}

#class-filter #class-elder.selected {
    background-position: -107px top;
}
#class-filter #class-man {
    background-position: -265px top;
}

#class-filter #class-man.selected {
    background-position: 0 top;
}

.ui-slider .ui-slider-range {
    background-position: 0 0;
    border: 0 none;
    height: 4px;
    top: -1px;
    background-image: none;
    background: #aa4632;
}

.ui-corner-all, .ui-corner-bottom {
    border-radius: 0;
}

.ui-slider-horizontal .ui-slider-handle {
    border: 0;
    top:-3px;
    border-radius: 4px;
    cursor: pointer;
    height: 8px;
    position: absolute;
    width: 8px;
    z-index: 2;
    background: #aa4632;
    background-image: none;
    margin: 0;
}
.ui-widget-content { 
    background-image: none;
    background: #000;
    height: 2px;
}

#combatant-filter .option, #cause-filter .option, #hisul-filter .option {
    font-size: 17px; 
    margin-bottom: 4px;
    padding-right: 20px;
    background: url('images/radiooff.svg') no-repeat right top / 15px;
}

#combatant-filter .selected, #cause-filter .selected , #hisul-filter .selected {
    background-image: url('images/radioon.svg');
}

#filters div:last-child {
    border: none;
}

#list-items-container {
    /* margin-left: -12px; */
}

.list-item, #load-more {
    background: #2c2c2c;
    width: 272px;
    height: 150px;
    margin-left: 12px;
    margin-bottom: 12px;
    float:right;
    overflow:hidden;
    color: #fff;
    position:relative;
	cursor: grab;
}

.list-palestinians .list-item:nth-child(3n+3), #load-more {
margin:0 0 12px;
}

#list-soldiers .list-item:nth-child(2n+2){
margin:0 0 12px;
}

.short-description, .long-description {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #2c2c2c;
    padding: 10px 60px 15px 20px;
    box-sizing: border-box;
    margin-right: 5px;
}

.long-description {
    opacity: 0;
    transition: opacity 0.5s ease;
    padding-right: 20px;
    margin: 0;
	overflow-y: auto;
	height: 150px;
}

.list-item:hover .long-description {
    opacity: 1;
}

.short-description h2 {
    border-bottom: 1px solid #969696;
    color: #48aa9e;
    font-size: 22px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.short-description p, .long-description p {
    margin: 0;
}

.short-description a, .long-description a{
    color: #fff;
}

.woman .short-description h2 {
    color: #e8c03e;
}

.infant .short-description h2 {
    color: #b75f7e;
}

.elder .short-description h2 {
    color: #886880;
}
.man .short-description h2, .foreign .short-description h2{
    color: #546284;
}
.civilian .short-description h2 {
    color: #5a8fae;
}
.soldier .short-description h2 {
    color: #839961;
}

.short-description {
  background: url("images/child.svg") no-repeat scroll right center / 50px auto;
}

.woman .short-description {
    background-image: url('images/woman.svg');
}

.infant .short-description {
    background-image: url('images/infant.svg');
}
 
.elder .short-description {
    background-image: url('images/old.svg');
}
.man .short-description, .foreign .short-description {
    background-image: url('images/man.svg');
}
.soldier .short-description {
    background-image: url('images/soldier.svg');
}
.civilian .short-description {
    background-image: url('images/israeli.svg');
}

#list-heading {
    margin-bottom: 10px;
    color: #aa4632;
    font-weight:bold;
    font-size: 25px;
}

#list-heading .select {
    color: #000;
    display: inline-block;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 2px solid #000;
    line-height: 25px;
    font-weight: normal;
}

#list-heading .select .option{
    display: inline-block;
}

#fatalities-count {
    display: inline-block;
}

#civilian-fatalities-count, #isf-fatalities-count , #foreign-fatalities-count  {
    display: inline-block;
}

.selected {
    color: #aa4632;
}

#list-civilians {
    float: right;
    width: 282px;
	max-width:100%;

}

#list-soldiers {
    float: right;
    width: 558px;
	max-width:100%;
}

#load-more {
    display: block;
    font-size: 40px;
    line-height: 144px;
    text-align: center;
    cursor: pointer;
}

#back-button {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
	display: none;
}

#filters-heading {
height: 50px; }

#filters-heading h3 {
    display: inline-block;
}
#reset-filters {
    display: inline-block;
}

.leaflet-container {
    font-family: almoni-tzar, arial, sans-serif;
}

#list-content h2 {
    font-size: 26px;
    font-weight: normal;
    margin: 12px 0;
}

#main #nav {
    color: #aa4632;
    display: block;
    font-size: 25px;
    left: 0;
    position: absolute;
    top: 0;
    text-decoration:none;
}

.region-marker .label-North-Gaza, .region-marker .label-Beit-Hanoun, .region-marker .label-alBureij-RC, .region-marker .label-aNuseirat-RC, .region-marker .label-Abasan-alKabirah, .region-marker .label-alMughraqa-Abu-Midein, .region-marker .label-Khuzaah , .region-marker .label-Um-aNaser-alBayuk, .region-marker .label-Bshit-RC, .region-marker .label-Rafah-RC, .region-marker .label-Egyptian-Border {
    left: initial;
    right: 85%;
}

.region-marker .label-Abasan-alJadidah-aSaghirah {
	white-space: normal;
}


.label-marker .label{
    color: white;
    font-size: 33px;
    white-space: nowrap;
    text-align: center;
}

.loading {
	-webkit-animation:spin 2s linear infinite;
	-moz-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { 
	-moz-transform:rotate(360deg); 
	}
}
@-webkit-keyframes spin { 100% { 
	-webkit-transform:rotate(360deg); 
	}
}
@keyframes spin { 100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
	}
}

#fatalities-count-container {
	width: 500px;
	max-width:100%;
	position: relative;
	text-align: center;
	margin-top: 20px;
	font-size: 40px;
}

@media only screen and (max-width: 500px) {
 #filters {margin:0;}
.list-item, #load-more, .list-palestinians  .list-item:nth-child(3n+3), #list-soldiers .list-item:nth-child(2n+2) {margin: 0 20px 12px;} 
 #heading {
 height: 45px;
 padding-top: 10px;
 background: url('images/new_title_hebrew.png') no-repeat center calc(100% - 10px) / 50%;
 }
#logo {
	background: rgba(0, 0, 0, 0) url("images/logo.png") no-repeat scroll right calc(100% - 6px) / 100% auto;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 13%;
}
 }
 
 #langswitch a {
	display: block;
	text-decoration: none;
	color: #000;
	font-size: 17px;
	font-family: ;
	font-family: Arial, sans-serif;
	font-weight: bold;
	margin-bottom: 2px;
	padding: 2px;
}

#langswitch {
	position:absolute;
	left: 0;
}

#footnotes {
	width: 840px;
	max-width: 100%;
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
}