/* POINTS */
.points{
	margin:1ex 1ex;
	position: relative;
	display: none;
}

/* VIEW REPORT */
.points .view-report,
.points .view-report-block{
	display: none;
}

.points .view-report table,
.points .view-report-block table{
	width:100%;
	font-family:monospace;
	border-collapse: collapse;
}
.points .view-report td,
.points .view-report-block td{
	border:1px solid #888;
	text-align:center;
}
.points .view-report tr:nth-child(2n+3) ,
.points .view-report-block tr:nth-child(even) {
	background: #f4f4f4;
}



/* POINT DETAILED VIEW */
#point_details {
	padding:0em;
	background:#fff;
	overflow:auto;
}
#point_details .body {
	padding:1em;
}

#point_details .header {
	height:3em;
	line-height:3em;
	background-size: contain;
	background-repeat: no-repeat;
    vertical-align: middle;
}
#point_details .header:after{
    vertical-align: middle;
	font-family: sans-serif;
	font-weight: bold;
	font-size: large;
	color: #fff;
	margin-left:5em;
}
/* Center map button */
#point_details .center-map{
	position: absolute;
	top:1ex;
	right:5em;
	height:2em;
	width:2em;
	display:block;
}
/* alert header */
#point_details .header[type="10"]:after,
#point_details .header[type="11"]:after {content:"ALERT";}
#point_details .header[type="10"],
#point_details .header[type="11"] {
	background-color: #ba2726;
	background-image: url(images/point_icon_alert.png);
}

/* info header */
#point_details .header[type="12"]:after{content:"INFORMATION";}
#point_details .header[type="12"] {
	background-color: #415faa;
	background-image: url(images/point_icon_poi.png);
}

/* animal header */
#point_details .header[type="20"]:after,
#point_details .header[type="21"]:after,
#point_details .header[type="22"]:after {content:"ANIMAL";}
#point_details .header[type="23"]:after {content:"RHINOS SIGHTING";}
#point_details .header[type="20"],
#point_details .header[type="21"],
#point_details .header[type="22"],
#point_details .header[type="23"] {
	background-color: #6ba78a;
	background-image: url(images/point_icon_animal.png);
}

#point_details .title {
    display: inline-block;
    vertical-align: middle;
	margin:0.3em;
	font-family: sans-serif;
	font-weight: bold;
	font-size: large;
	color: #fff;
}

#point_details .row {
	margin-bottom: 1ex;
}
#point_details .row.last {
	margin-bottom: 0ex;
}

#point_details .label {
	display: inline-block;
	vertical-align: top;
	font-family: sans-serif;
	width: 8em;
	font-size: small;
	color: #777;
}

#point_details .top .value {
	display: inline-block;
	vertical-align: top;
	font-family: sans-serif;
	font-weight: bold;
}

#point_details .description {
	margin: 1ex 0ex 1em 0ex;
}

#point_details .rhinos > div{
	margin: 0.5ex 0ex;
	padding: 0ex 0ex 0ex 3em;
	background:#efe;
	position:relative;
}
#point_details .rhinos .index{
	position:absolute;
	top:2px; left:2px;
}

#point_details .top {
	position:relative;
}

#point_details .media {
    overflow: auto;
    white-space: nowrap;
}
#point_details .body > .media {
    background-color: #ccc;
}
/* PHOTOS & photo preview */
#point_details .media img {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
	cursor:pointer;
	margin:3px;
}

#point_details .media img:hover{
	outline: 2px solid #888;
}

#point_details .media a {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px;
}

#point_details .media a:hover{
    background-color: #eee;
}

#point_details .icon {
	float: left;
	margin-right: 1em;
}

/*.photos{
	width:100%;
	background:#ddd;
}
img.preview {
	display:inline-block;
	border:1px solid #444;
	max-height:100px;
	max-width:100px;
	margin: 0.5ex;
	vertical-align: middle;
	cursor:pointer;
}*/

/* LIST ICONS */
.points td > img{
	display:inline-block;
	margin:0px;
	height:1.5em;
}

/* ICON CATEGORIES */
.icon{
	display:inline-block;
	position: relative;
	background-repeat: no-repeat;
	background-position: top center;
	color:#fff;
	padding:0px;
}
/* Small list variant */
span.icon{
	background-size:contain;
	width:   2em;
	height:1.5em;
}
/* Big item view variant */
div.icon{
	background-size:3em 3em;
	width:4em;
	height:5em;
}
div.icon:after{
	position:absolute;
	bottom:0px;
	width:100%;
	display:block;
	text-align:center;
}

/* Alert categories */
.icon[alert]{background-color:#fdd;color:#800;}
div.icon[alert='0']:after{ content: "Weapons"; }
   .icon[alert='0']{ background-image:url(images/c2_red.png); }
div.icon[alert='1']:after{ content: "Tracks"; }
   .icon[alert='1']{ background-image:url(images/cat_alert_tracks.svg); }
div.icon[alert='2']:after{ content: "Dangerous people"; }
   .icon[alert='2']{ background-image:url(images/cat_alert_intruder.svg); }
div.icon[alert='3']:after{ content: "Fire"; }
   .icon[alert='3']{ background-image:url(images/cat_alert_fire.svg); }
div.icon[alert='4']:after{ content: "Suspicious Activity"; }
   .icon[alert='4']{ background-image:url(images/cat_alert_suspicious_activity.svg); }
div.icon[alert='5']:after{ content: "Other"; }
   .icon[alert='5']{ background-image:url(images/c7_red.png); }
   
/* Info categories */
.icon[info]{background-color:#ddf;color:#008;}
div.icon[info='0']:after{ content: "Road conditions"; }
   .icon[info='0']{ background-image:url(images/c6_red.png); }
div.icon[info='1']:after{ content: "Broken Fence"; }
   .icon[info='1']{ background-image:url(images/c3_red.png); }
div.icon[info='2']:after{ content: "Natural Water Hole"; }
   .icon[info='2']{ background-image:url(images/c_water.png); }
div.icon[info='3']:after{ content: "Others"; }
   .icon[info='3']{ background-image:url(images/c7_red.png); }

/* Animals */
div.icon[animal='0']:after{	content: "Rhino"; }
.icon[animal='0']{
	background-color:#408662;
	background-image:url(images/point_animal_rhino.png);
}

div.icon[animal='1']:after{	content: "Leopard"; color:#DD9F47;}
.icon[animal='1']{
	background-color:#FFEF92;
	background-image:url(images/point_animal_leopard.png);
}

div.icon[animal='2']:after{	content: "Lion"; }
.icon[animal='2']{
	background-color:#DD9F47;
	background-image:url(images/point_animal_lion.png);
}

div.icon[animal='3']:after{	content: "Wild Dogs"; }
.icon[animal='3']{
	background-color:#662C2C;
	background-image:url(images/point_animal_dogs.png);
}

div.icon[animal='4']:after{	content: "Elephant"; }
.icon[animal='4']{
	background-color:#808285;
	background-image:url(images/point_animal_elephant.png);
}

div.icon[animal='5']:after{	content: "Other"; }
.icon[animal='5']{
	background-color:#9DA1D1;
	background-image:url(images/point_animal_other.png);
}