.hide { display: none !important; } /* ALERT COLORS */ alert { color: #eee; #color: #FFFF4D; text-shadow: -1px -1px 1px rgba(255,255,255,0.2), 1px 1px 5px rgba(0,0,0,0.8); } alert.alert-level-1 { color: #FFFF4D; } alert.alert-level-2 { color: #FF8000; } alert.alert-level-3 { color: #B20000; color: #FF1414; color: #FF0C00; } .map-anchor { position: absolute; z-index: 2; top:0; width:559px; height: 350px; margin-left: auto; margin-right: auto; } .map-viewer > span { color: #fff; display: block; margin-top: 20px; margin-left: 20px; } .map-viewer.small { top:0; width:559px; height: 350px; left:0; top: 0; margin-left: auto; margin-right: auto; } .map-viewer.big { height: 500px; width: 1000px; left: -220px; top: -1px; } .map-expand-btn { opacity: 0.4; margin: 15px; } .map-expand-btn:HOVER { opacity: 0.7; text-decoration: none; } .map-expand-btn span { display: none; width: 60px; margin-left: 10px; font-size: 12px; text-align: center; } .map-expand-btn:HOVER span { display: block; } .map-expand-btn:ACTIVE span { display: none; } .map-viewer .map-expand-btn span { width: 50px; margin-right: 0px; margin-left: 0px; color: rgba(255,255,255,0.5); } /* MAP INFO BOX */ .ibox-sea { background : rgba(255,255,255,1); color: #4E6297; box-shadow : 2px 2px 3px rgba(0,0,0,0.4); padding : 5px 5px 3px 5px; min-width: 100px; text-align : center; #position: absolute; } .ibox-sea .title { font-family: MyriadProLightRegular; #font-weight: 500 !important; font-size: 12px; text-transform: uppercase; white-space: nowrap; padding: 0px; line-height: 1em; margin: 0px; vertical-align: bottom; } .ibox-sea .title:BEFORE { content: ""; display: block; width: 0px; height: 0px; position: absolute; z-index: -1; bottom: 0; margin-bottom: -8px; margin-left: -5px; background-color: transparent; border-style: solid; border-width: 5px; border-top-width: 3px; border-color: transparent; border-left-color: #fff; border-top-color: #Fff; } .ibox-sea.active { background-color: rgba(20,39,73,0.8); color: #ffffff; box-shadow : 1px 1px 1px rgba(0,0,0,0.1); } .ibox-sea.active .title { font-size: 14px; } .ibox-sea.active .title:BEFORE { border-left-color: rgba(20,39,73,0.8); border-top-color: rgba(20,39,73,0.8); } .ibox-sea.active.alert-level-1 { background-color: #868734; } .ibox-sea.active.alert-level-1 .title:BEFORE { border-left-color: #868734; border-top-color: #868734; } .ibox-sea.active.alert-level-2 { background-color: #924900; } .ibox-sea.active.alert-level-2 .title:BEFORE { border-left-color: #924900; border-top-color: #924900; } .ibox-sea.active.alert-level-3 { background-color: #783333; } .ibox-sea.active.alert-level-3 .title:BEFORE { border-left-color: #783333; border-top-color: #783333; } /* ANIMATION */ .ibox-land, .ibox-land .more, .ibox-land .wicon { transition: all ease 0.2s; -o-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -webkit-transition: all ease 0.2s; } /* INFOBOX ON COAST AND LAND */ .ibox-land { background: rgba(255,255,255,0.3); box-shadow: none; color: #fff; border-radius: 4px; padding : 5px 5px 3px 5px; border-spacing: 0; z-index: 10; #min-width: 40px; width: auto; position: absolute; display: table; } .ibox-land .title { font-family: MyriadProLightRegular; font-size: 12px; text-transform: uppercase; white-space: nowrap; line-height: 1em; margin: 0 0 0 25px; text-align: right; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); } .ibox-land .more { font-size: 16px; font-family: MyriadProBold; #font-weight: 400; #display: none; text-align: center; height: 0px; overflow: hidden; } .ibox-land .more small { font-size: 12px; } .ibox-land:HOVER { z-index: 20; cursor: pointer; background-color: rgba(30,60,90,0.5); box-shadow: 2px 2px 3px 0px rgba(0,0,0, 0.5); -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0, 0.5);} .ibox-land:HOVER .more { #display: block; #height: auto; height: 20px; } .ibox-land.active { background-color: rgba(23,43,118,0.7); background-color: rgba(0,10,20,0.6); #background-color: rgba(0,5,3,0.7); #color: #ccc; padding : 5px 5px 3px 5px; z-index: 19; } .ibox-land.active:HOVER { box-shadow: 2px 2px 3px 0px rgba(0,0,0, 0.5); -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0, 0.5); } .ibox-land.active .more { #display: block; height: 16px; } .ibox-land .wicon { position: absolute; z-index: 21; width: 55px; height: 55px; background-size: 100% auto; left: -25px; top: -25px; } .ibox-land:HOVER .wicon { width: 65px; height: 65px; left: -35px; top: -30px; } /* TEXT BOX */ .ibox-land.text { #position: absolute; text-align: right; #right: 0; left: auto; width: 260px; max-width: 460px; #border: 1px solid; margin-left: -130px; display: block; } .ibox-land.text .title { display: inline-block; #float: right; padding-right: 3px; height: 10px; } .ibox-land.text .more { font-size: 11px; font-family: Tahoma, Arial, sans-serif; display: block; margin-top: 3px; text-align: left; color: #eee; #margin-top: 15px; height: 0px; } .ibox-land.text .title, .ibox-land.text .more { #width: 100px; width: 260px; } .ibox-land.text.active .more, .ibox-land.text:HOVER .more { #width: auto; width: 260px; height: 100px; } .ibox-land.text.active, .ibox-land.text:HOVER { width: 260px; #height: auto; margin-left: -130px; } .fore-info-box .col { transition: all ease 0.2s; -o-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -webkit-transition: all ease 0.2s; } /* FORECAST INFO */ .forecast-info { width: 100%; min-height:350px; margin-top: 350px; color: #fff; overflow: hidden; } .forecast-info .region { font-size: 26px; margin-bottom: 0px; margin-top: 20px; line-height: 1.6em; } /* .forecast-info .region:BEFORE { content: url(gfx/icoLandmark.png); vertical-align: middle; margin-right: 10px; } .forecast-info .region.alter:BEFORE { content: url(gfx/icoWatermarkWave.png); vertical-align: middle; margin-right: 10px; } */ .forecast-info .validity { font-size: 16px; color:#979797; line-height: 1.6em; margin-bottom: 10px; } .forecast-info .region + .validity { margin-top: -5px; } .fore-info-box { display: table; #width: 100%; border-spacing: 10px; table-layout: fixed; margin-left: -10px; margin-right: -10px; } .fore-info-box .row { display: table-row; } .fore-info-box .col { width: 1%; display: table-cell; } .fore-info-box a { text-decoration: none; } .fore-info-box .header .col { font-size: 22px; text-align: center; padding: 5px 6px 5px 6px; background-color: rgba(15,20,25,0.9); color: #575757; vertical-align: middle; white-space: nowrap; } .fore-info-box .header .col { background-color: rgba(0,5,10,0.5); } .fore-info-box .header .col small { font-size: 14px; } .fore-info-box .header .col.active { background-color: rgba(240,245,250,0.9); color: #101318; } .fore-info-box .header .col.active:HOVER { color: #101318;} .fore-info-box .header .col.active:BEFORE { display: block; content: ''; position: relative; float: left; z-index: 1px; margin-top: -16px; margin-left: 50%; width: 0px; height: 0px; border: 6px solid transparent; border-bottom-color: rgba(240,245,250,0.9); } .fore-info-box .body { background-color: rgba(0,5,10,0.3); } .fore-info-box .body .col { padding: 15px; } .fore-info-box .body .col.day-desc { padding: 8px 6px; } .fore-info-box .body .active { background-color: rgba(130,135,140,0.3); } .fore-info-box .body p { font-size: 11px; line-height: 1.3em; color: #aaa; font-family: Arial, Tahoma, sans-serif; } .fore-info-box .body p.white { color: #fff; } .fore-info-box .body alert { font-size: 13px; line-height: 1.2em; display:block; margin: 0px 0 15px 0px; #background: url(gfx/icoWarning.png) no-repeat 5px center; #padding-left: 50px; margin-left: 30px; } .fore-info-box .body alert:BEFORE { content: '\f071'; font-family: 'FontAwesome'; float:left; display: inline-block; width: 30px; font-size: 28px; color: inherit; margin: 0 10px 10px 0; padding-top: 10px; text-align: center; vertical-align: middle; margin-left: -30px; } .fore-info-box .body .col > * { opacity: 0.5; } .fore-info-box .body .col.active > * { opacity: 1; } .fore-info-box.days .header .col { text-align: left; } .fore-info-box.days .header .col span { display: inline-block; } .fore-info-box.days .header .col small { #float: right; display: inline-block; margin-top: 6px; width: 42px; text-align: right;} .fore-info-box .icon { width: 80px; height: 60px; background-repeat: no-repeat; background-position: center left; } .fore-info-box .icon.sun { background-image: url(../img/mIcons/slonecznie.png); } .fore-info-box .icon.fog { background-image: url(../img/mIcons/mgla.png); } .fore-info-box .icon.sun-clouds { background-image: url(../img/mIcons/slonce-chmury.png); } .fore-info-box .icon.rain { background-image: url(../img/mIcons/chmury-deszcz.png); } .fore-info-box .wind-ico { width: 12px; height: 12px; display: inline-block; vertical-align: bottom; margin-right: 5px; } .fore-info-box .wind-ico.e { background-image: url(../img/mIcons/e_white.png); opacity: 0.7; } .fore-info-box .wind-ico.n { background-image: url(../img/mIcons/n_white.png); opacity: 0.7; } .fore-info-box .wind-ico.ne { background-image: url(../img/mIcons/ne_white.png); opacity: 0.7; } .fore-info-box .wind-ico.nw { background-image: url(../img/mIcons/nw_white.png); opacity: 0.7; } .fore-info-box .wind-ico.s { background-image: url(../img/mIcons/s_white.png); opacity: 0.7; } .fore-info-box .wind-ico.se { background-image: url(../img/mIcons/se_white.png); opacity: 0.7; } .fore-info-box .wind-ico.sw { background-image: url(../img/mIcons/sw_white.png); opacity: 0.7; } .fore-info-box .wind-ico.w { background-image: url(../img/mIcons/w_white.png); opacity: 0.7; } .fore-info-box .wind-ico.zmienny { background-image: url(../img/mIcons/zmienny_white.png); opacity: 0.7; width: 1px; margin-right: 0; } .wicon { width: 100px; height: 90px; background-repeat: no-repeat; background-position: center center; } .fore-info-box .wicon { width: 100px; height: 90px; width: 100%; #margin: -5px -4px 0px -6px; background-size: 90%; background-position: center 10%; #margin-top: -5px; } /* CUSTOM ICONS SET */ .wicon { background-image: url(gfx/wicon/na.png); } .wicon.chmury-brak { background-image: url(gfx/wicon/01.png); } .wicon.chmury-male { background-image: url(gfx/wicon/02.png); } .wicon.chmury-srednie { background-image: url(gfx/wicon/03.png); } .wicon.chmury-duze { background-image: url(gfx/wicon/06.png); } .wicon.chmury-pelne { background-image: url(gfx/wicon/07.png); } .wicon.chmury-ciemne { background-image: url(gfx/wicon/08.png); } .wicon.mgla { background-image: url(gfx/wicon/fog.png); } .wicon.deszcz-mzawka { background-image: url(gfx/wicon/19.png); } .wicon.deszcz-rzadko { background-image: url(gfx/wicon/20.png); } .wicon.deszcz-przelotny{background-image: url(gfx/wicon/21.png); } .wicon.deszcz-slaby { background-image: url(gfx/wicon/22.png); } .wicon.deszcz-duzy { background-image: url(gfx/wicon/23.png); } .wicon.deszcz-snieg { background-image: url(gfx/wicon/36.png); } .wicon.snieg-rzadko { background-image: url(gfx/wicon/30.png); } .wicon.snieg-przelotny {background-image: url(gfx/wicon/31.png); } .wicon.snieg-slaby { background-image: url(gfx/wicon/33.png); } .wicon.snieg-sredni { background-image: url(gfx/wicon/34.png); } .wicon.snieg-duzy { background-image: url(gfx/wicon/35.png); } .wicon.snieg-zamiec { background-image: url(gfx/wicon/38.png); } .wicon.grad { background-image: url(gfx/wicon/29.png); } .wicon.burza-deszcz { background-image: url(gfx/wicon/27.png); } .wicon.burza-grad { background-image: url(gfx/wicon/28.png); } .wicon.noc.chmury-brak { background-image: url(gfx/wicon/51.png); } .wicon.noc.chmury-male { background-image: url(gfx/wicon/52.png); } .wicon.noc.chmury-srednie { background-image: url(gfx/wicon/53.png); } .wicon.noc.chmury-duze { background-image: url(gfx/wicon/54.png); } .wicon.noc.chmury-pelne { background-image: url(gfx/wicon/55.png); } .wicon.noc.chmury-ciemne { background-image: url(gfx/wicon/56.png); } .wicon.noc.mgla { background-image: url(gfx/wicon/fog.png); } .wicon.noc.deszcz-mzawka { background-image: url(gfx/wicon/60.png); } .wicon.noc.deszcz-rzadko { background-image: url(gfx/wicon/60.png); } .wicon.noc.deszcz-slaby { background-image: url(gfx/wicon/60.png); } .wicon.noc.deszcz-przelotny{background-image: url(gfx/wicon/61.png); } .wicon.noc.deszcz-duzy { background-image: url(gfx/wicon/61.png); } .wicon.noc.deszcz-snieg { background-image: url(gfx/wicon/72.png); } .wicon.noc.snieg-rzadko { background-image: url(gfx/wicon/70.png); } .wicon.noc.snieg-przelotny {background-image: url(gfx/wicon/71.png); } .wicon.noc.snieg-slaby { background-image: url(gfx/wicon/70.png); } .wicon.noc.snieg-sredni { background-image: url(gfx/wicon/70.png); } .wicon.noc.snieg-duzy { background-image: url(gfx/wicon/71.png); } .wicon.noc.snieg-zamiec { background-image: url(gfx/wicon/38.png); } .wicon.noc.grad { background-image: url(gfx/wicon/68.png); } .wicon.noc.burza-deszcz { background-image: url(gfx/wicon/66.png); } .wicon.noc.burza-grad { background-image: url(gfx/wicon/67.png); }