@charset "UTF-8";

@font-face { font-family:p15; src: url(AdobeCleanRegular.otf); font-weight:400; }
@font-face { font-family:p15; src: url(AdobeCleanExtraBold.otf); font-weight:700; }

:root{ --red:#F66; --grn:#3C9; --gry:#333; }

*{ box-sizing:border-box; padding:0; margin:0; vertical-align:top; }
body{ background:#FFF; font:400 14px/20px p15; color:#333; }
ul, li{ list-style:none; }
header{ position:fixed; top:0; left:0; width:12%; height:100%; background:#333; z-index:99; display:none; }
footer{ position:fixed; top:0; right:0; width:4%; height:100%; background:#333; z-index:99; display:none; }
section{ position:fixed; top:0; left:0; width:100%; height:100%; background:#DDD; z-index:50; display:none; overflow:auto; }
section h1{ border-bottom:2px solid #CCC; padding:4px; font:700 20px/30px p15; color:#666; font-style:italic; text-transform:uppercase; }
section h1>span{ font:700 15px/30px p15; color:#999; font-style:italic; margin-left:5px; }
input:focus, textarea:focus, select:focus{ outline-width:0; outline:none; border-bottom:2px solid #333; background:#FF9; }

/* GENERALI */
.on{ display:block; }
.w100{ width:100%; }
.w70{ width:50%; }
.w50{ width:50%; }
.w40{ width:40%; }
.w30{ width:30%; }
.w25{ width:25%; }
.w20{ width:20%; }
.w15{ width:15%; }
.w10{ width:10%; }
.cl-0{ background:#FFF; }
.cl-1{ background:#EEE; }

/* SHELTER */
.shl{ padding:10px; }

.shl-wrp{  }
.shl-itm{ border-radius:5px; margin:10px 0; background:#FFF; }
.shl-bar{ position:relative; }
.shl-bar-txt{ font:700 18px/32px p15; color:#333; padding:5px 10px; text-transform:uppercase; border-bottom:2px solid #EEE; }
.shl-bar-txt span{ display:inline-block; width:28px; height:28px; padding:6px; border-radius:50%; opacity:0.25; margin:4px; cursor:pointer; }
.shl-bar-txt span>img{ width:16px; height:16px; }
.shl-bar-txt span:hover{ background:#999; opacity:0.5; }
.shl-bar-fil{ float:left; }

.shl-bar-fil li{ position:absolute; top:0; left:80px; padding:5px; }
.shl-bar-fil input{ border-radius:5px; background:#FFF; border:0; padding:6px 4px 6px 32px; font: 400 14px/24px p15; margin:0 4px; }
.shl-bar-fil li>img{ position:absolute; top:14px; left:18px; width:16px; height:16px; opacity:0.5; }

.shl-bar-btn{ position:absolute; top:0; right:0; padding:10px; }
.shl-bar-btn li{ display:inline-block; opacity:0.25; margin:0 2px; padding:4px; font:400 13px/16px p15; color:#000; text-transform:uppercase; border-radius:5px; cursor:pointer; }
.shl-bar-btn li:hover{ background:#999; opacity:0.5; }
.shl-bar-btn img{ width:16px; height:16px; margin-right:4px;  }
.shl-chn{ padding:5px; }
.shl-chn:after{ clear:both; display:block; content:" "; }
.shl-chn-itm-wrp{ float:left; padding:5px; width:10%; }
.shl-chn-itm{ border-radius:10px; background:#EEE; padding:5px; text-align:center; border:5px dotted #EEE; cursor:pointer; }
.shl-chn-itm:hover{ background:#FF9; }
.shl-chn-itm.alm-on{ border-color:#F66; }
.shl-chn-itm-ico{ position:relative; }
.shl-chn-itm-ico span{ position:absolute; top:-2px; left:-2px; width:20px; height:20px; border-radius:50%; font:400 14px/20px p15; color:#FFF; text-align:center; background:#369; }
.shl-chn-itm-ico img{ width:32px; height:32px; margin:5px; }
.shl-chn-itm-txt{ text-transform:uppercase; font:400 12px/20px p15; }
.shl-chn-itm-txt span{ display:inline-block; width:16px; height:16px; border-radius:50%; font:400 12px/16px p15; color:#FFF; text-align:center; background:#999; margin-right:4px; }
.shl-chn-alm{ border-top:1px solid #FFF; padding:5px; margin-top:5px; }
.shl-chn-alm-ico{ position:relative; display:inline-block; }
.shl-chn-alm-ico img{ width:32px; height:32px; margin:10px; }
.shl-chn-alm-ico span{ position:absolute; right:2px; width:16px; height:16px; border-radius:50%; font:400 12px/16px p15; color:#FFF; text-align:center; }
.shl-chn-alm-ico span.alm-on{ top:8px; background:#F66; }
.shl-chn-alm-ico span.alm-off{ bottom:8px; background:#396; }

.chn-wrp{ border-radius:5px; margin:10px 0; background:#FFF; }
.chn-itm{ }
.chn-map{ position:relative; height:600px; background:#EEE; }
.chn-lst-tes{ background:#BBB; font:700 14px/20px p15; color:#333; text-transform:uppercase; }
.chn-lst-row{ font:400 14px/20px p15; color:#666; text-transform:uppercase; cursor:pointer; }
.chn-lst-row.alm-on{ background:#F66; color:#FFF; }
/*.chn-lst-row:hover{ background:#FF9; }
.chn-lst-row.alm-on:hover{ background:#C00; }*/

.chn-lst-tes:after, .chn-lst-row:after{ clear:both; display:block; content:" "; }
.chn-lst-col{ float:left; padding:4px; }
.chn-lst-col:first-child{ border:0; }
.chn-lst-col span{ display:inline-block; width:26px; height:26px; padding:5px; border-radius:50%; opacity:0.25; margin:4px 4px 0 0; cursor:pointer; }
.chn-lst-col span:hover{ background:#999; opacity:0.5; }
.chn-lst-col span>img{ width:16px; height:16px; }

.tab-sez{ float:left; padding:10px; }
.tab-txt{ font:700 16px/24px p15; color:#333; text-transform:uppercase; margin-bottom:10px; }

.drg{ cursor:move; position:absolute; top:0; left:0; z-index:200; opacity:1; display:table; padding:5px; }

.map-wrp{ position:relative; width:1000px; height:600px; left:50%; margin-left:-500px; text-transform:uppercase; }
.map-dsg{ position:absolute; top:50%; left:50%; border:5px solid #369; border-radius:4px; background:#FFF; z-index:100; }
.map-rto{ width:520px; height:360px; margin-top:-180px; margin-left:-260px; }
.map-rtv{ width:360px; height:520px; margin-top:-260px; margin-left:-180px; }
.map-sqr{ width:460px; height:460px; margin-top:-230px; margin-left:-230px; }

.map-btn{ position:absolute; bottom:10px; left:50%; width:80px; height:40px; background:#6C9; color:#FFF; font:400 14px/40px p15; border:0; margin-left:-40px; border-radius:2px; cursor:pointer; z-index:200; }
.map-btn:hover{ background:#39F; }

.map-C{ width:140px; height:80px; background:#F60; border-radius:2px; }
.map-S{ width:60px; height:60px; background:#666; border-radius:50%; }
.map-D{ width:120px; height:20px; background:#000; border-radius:2px; }
.map-A{ width:80px; height:60px; background:#396; border-radius:2px; }
.map-B{ width:120px; height:100px; background:#39F; border-radius:2px; }
.map-V{ width:100px; height:60px; background:#06C; border-radius:2px; }
.map-W{ width:80px; height:40px; background:#F93; border-radius:2px; }

.map-txt{ display: table-cell; width:100%; height:100%; vertical-align: middle; font:400 12px/14px p15; color:#FFF; text-align:center; }
.map-txt-v{ transform:rotate(90deg); }

.map-lgd{ position:absolute; top:5px; right:5px; z-index:200; }
.map-lgd li{ display:inline-block; margin:5px; background:#FFF; border:1px solid #CCC; border-radius:2px; cursor:pointer; }
.map-lgd li:hover{ background:#FC0; }
.map-lgd li.rto{ margin-top:10px; width:30px; height:20px; }
.map-lgd li.rtv{ width:20px; height:30px;}
.map-lgd li.sqr{ margin-top:7px; width:25px; height:25px; }

.mod{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); display:none; z-index:100; }
.mod-wrp{ position:fixed; top:90px; left:50%; width:600px; height:100%; margin-left:-300px; background:#FFF; border-radius:0 0 10px 10px; box-shadow:0 0 10px #CCC; overflow:hidden; }
.mod-box{ position:relative; padding:10px; height:100%; overflow:auto; }
.mod-bar{ position:fixed; top:50px; left:50%; width:600px; height:40px; margin-left:-300px; font:700 20px/30px p15; color:#666; border-bottom:2px solid #CCC; padding:5px; border-radius:10px 10px 0 0; box-shadow:0 0 10px #CCC; overflow:hidden; background:#FFF; }
.mod-out{ position:fixed; top:10px; left:50%; width:30px; height:30px; margin-left:-15px; border-radius:50%; background:#FFF; box-shadow:0 0 10px #CCC; padding:8px; overflow:hidden; cursor:pointer; }
.mod-out:hover{ background:#FF9; }
.mod-out img{ opacity:0.5; width:14px; height:14px; }
.mod-itm{ position:relative; margin-top:10px; width:100%; }
.mod-itm span{ position:absolute; top:0; left:0; font:400 13px/16px p15; color:#999; display:block; text-transform:uppercase; }
.mod-itm input[type="text"]{ border:0; border-bottom:1px solid #CCC; font:400 16px/24px p15; color:#333; padding:5px; margin-top:14px; width:100%; }
.mod-itm input[type="button"]{ border:0; background:#6C9; font:400 14px/24px p15; color:#FFF; padding:4px 8px; border-radius:5px; width:120px; margin:10px 5px; cursor:pointer; }
.mod-itm input[type="button"]:hover{ background:#39F; }