﻿div.p10 { width:initial; padding:0 10%;}
h1.pageTitle {text-align:center;}
.contentBlock {
    min-width:1230px;
    margin-top:15px;
    display:flex;
}
.contentBlock * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
img#map_img {
    width: 640px;
    height:640px;
}
h2.contentH2 { margin: 15px 0px 10px 0; }
h2.externalH2 { margin: 0px 0px 10px 0; }
.contentBlock > div:first-child {
    display:inline-block;
    flex-grow:1;
    margin-left:1em;
}
.innerBlock {
    padding:0 20px;
    background-color:#f0f0f0;
    border-radius: 10px;
    border: 1px #e1dddd solid;
    vertical-align:top;
    margin-bottom:1em;
}
.innerBlock.saveBlock { margin-top:1em;}
.contentBlock > div:last-child {
    display:inline-block;
    width:640px;
    vertical-align:top;
}
.source_block{ display:flex;}
.source_block > div{ 
    width:33.33%;
    border: 1px #e1dddd solid;
    border-radius: 10px 10px 0 0;
    border-width: 1px;
    padding:0.5em;
    cursor:pointer;
}
.source_block > div.selected{ background-color:#f0f0f0; border-width: 1px 1px 0 1px; }
.innerBlock.sources > div {
    height:9.5em;
    padding:0;
}
.myProjectsBlock { height:7em; overflow-y:scroll; }
.myProjectsBlock::-webkit-scrollbar-track { border-radius: 6px; background-color: #f8f8f8; }
.myProjectsBlock::-webkit-scrollbar { width: 8px; background-color: #f8f8f8; }
.myProjectsBlock::-webkit-scrollbar-thumb { border-radius: 8px;  background-color: #e52530; }
.project_row > span { display:inline-block; vertical-align:middle; }
.project_row > span:first-child { float:left; }
.project_row > span:nth-child(2) { width:30px; }
.project_row > span:nth-child(3) { width:50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project_row > span:nth-child(4) { width:100px; }
.project_row .btn { margin: 0 10px;}
.albums_row > span:nth-child(3) { width:60px; }
.albums_row > span:nth-child(4) { width:60%; }
.underline { text-decoration:underline;}

strike { text-decoration:line-through;}
textarea, input {	font-family: 'Open Sans Hebrew', sans-serif;}
.rounded {
	border: 1px #a0a0a0 solid;
    -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
	padding:4px 10px 4px 10px;
	margin:5px 0;
    font-size: initial;
}
.middle {vertical-align: middle;}
.btn {cursor:pointer;}
.place .btn, .project_row .btn { visibility:hidden; }
.place:hover, .project_row:hover {background-color:#e0e0e0;}
.place:hover .btn, .project_row:hover .btn { visibility:visible; }
.place:hover .btn.hide { visibility:hidden; }
.place.used .btn, .project_row.used .btn { visibility:hidden; }
.project_row.used:hover .btn.save { visibility:visible; }
.project_row.save .btn.save { visibility:visible; }
.btn.marker { color:#e52530; }
.btn.path { color:#586FFD; }
.btn.off, .place.skipped { color:#b0b0b0; }
.place.used, .project_row.used { font-weight:bold; }
.btn.left { float:left; }
.btn.left.top { margin-top:15px; }
.loading { margin-right:40px; }
.save_title { font-size:16px; font-weight:bold; margin-top:1em;}
#err, #err_save { margin-right:40px; color:#e52530; font-weight:bold; }
#OK_save { color:green; font-weight:bold; }
#geo_count, #geo_count_none, #geo_groups_count, #timeline_block { display:none; }
#geo_groups { 
    display:none;
    border-top: 1px solid #808080;
    margin: 0.5em 0;
}
#geo_groups.scroll { 
    max-height:20em;
    overflow-y:scroll;
    direction:ltr;
    padding-right: 0.5em;
}
#geo_groups.scroll::-webkit-scrollbar-track
{
	border-radius: 6px;
	background-color: #e0e0e0;
}

#geo_groups.scroll::-webkit-scrollbar
{
	width: 8px;
	background-color: #e0e0e0;
}

#geo_groups.scroll::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	background-color: #e52530;
}
#granularity {
    width:250px;
    float:left;
    position:relative;
    color:#e52530;
    padding-bottom:4px;
    border-bottom: 2px solid #808080;
    text-align:center;
    display:none;
}
#granularity > .gran_val {
    position:absolute;
    bottom:-25px;
    left:50%;
    width:40px;
    margin-left:-20px;
}
#granularity > .gran_val.default { color:#b0b0b0;}

#timeline_wrapper {
    float:left;
    width:70%;
    min-width:300px;
    position:relative;
}
.start_date, .end_date { position:absolute; left:0; top:-1em; font-size:80%;}
.end_date { right:0; }
.clear_all, .add_all { float:left; margin-left:0.9em; text-align:center; font-size: 80%; margin-top: 1em; display:none; }
.clear_all:hover, .add_all:hover { color:#e52530; }
#timeline_block {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}
#timeline {
    width:100%;
    height:25px;
    display:flex;
    align-items: flex-end;
    border-bottom: 2px solid #808080;
}
#timeline > span {
    height:100%;
    display:inline-block;
    background-color: transparent;
    flex-grow: 1;
    position:relative;
}
#timeline > span > span {
    height:0;
    width:100%;
    display:inline-block;
    background-color: #e2bfc1;
    position:absolute;
    bottom:0;
}
#timeline > span.active > span { background-color:#e52530;}
#timeline > span:hover { background-color:#b0b0b0;}
#timeline > span:hover > span { background-color:#c34149;}
.slidecontainer {width:100%; display:block; position:relative; text-align:center;}
.start_at, .end_at {cursor:pointer; position:absolute; color:#e52530; margin-top:-4px;}
.start_at {left:0; margin-left:-26px;}
.end_at {right:0; margin-right:-25px;}
.slidecontainer .text {font-size:80%;}
#marker_size img {cursor:pointer; opacity:0.5;}
#marker_size img:hover { opacity:1;}
#marker_size img.selected { opacity:1;}

.pica_btn.google > span { background-color: #4285F4; width:240px; }
.pica_btn.google > span:hover { background-color: #1c5eca; }
.pica_btn.google > span > img { 
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(100%);
    -ms-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
    height: 1.5em;
}

.share_block { padding:1em 0;}

@media only screen and (max-width: 640px) {
	/* mobile */
    .desktop_only { display:none; }
    div.p10 { padding:0;}
    .contentBlock { min-width:initial; width:100%; display:block; }
    .contentBlock > div:first-child { width:100%; margin:0;}
    .contentBlock > div:last-child { width:100%;}
    img#map_img { width: 100%; height:initial; }
    .share_block { padding:1em;}
}
