section, header, aside, article, nav, footer, main { display: block; }
html { font-size: 12px;  /* WinIE text resize correction */ }  
body{ font-size: 12px; margin: 0; padding: 0; font-family: "Roboto condensed","Helvetica Neue",Helvetica,Arial,sans-serif; }

@media all and (min-width: 1025px){
	header { padding: 0; margin: 0 0 0.2em 0; width: 100%; }
	header nav#social { height: 2.5em; background: #333; border: 1px solid #333; }
	header nav#logo { background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	header nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; }
	header nav ul li { display: inline-block; }

	header nav#logo ul { width: 100%;}
	header nav#logo ul li {  margin: 0.2em 0; }
	header nav#logo ul li img { height: auto; max-width: 100%; display: inline-block; }

	img.pagesImg { padding-right: 0.3em;} 

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	main { float: left; width: 70%; text-align: center; margin-bottom: 1em; font-size: 1em; padding: 1em; }
	div#Legenda { max-width: 12em; font-size: 0.9em; }
	footer { bottom: 0; left: 0; border-top: 1px dotted gray; clear: both; } 
}
@media all and (min-width: 801px) and (max-width: 1024px){
	header { padding: 0; margin: 0 0 0.2em 0; width: 100%; }
	header nav#social { height: 2.5em; background: #333; border: 1px solid #333; }
	header nav#logo { height: 6em; background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	header nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; }
	header nav ul li { display: inline-block; }

	header nav#logo ul { width: 100%; }
	header nav#logo ul li { margin: 0.2em 0; }
	header nav#logo ul li img { height: auto; max-height: 4em; max-width: 100%; display: inline-block; }

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	main { float: left; width: 65%; text-align: center; margin-bottom: 1em; font-size: 0.8em; padding: 1em; }
	div#Legenda { max-width: 12em; font-size: 0.9em; }
	footer { bottom: 0; left: 0; border-top: 1px dotted gray; clear: both; } 
}
@media all and (min-width: 401px) and (max-width: 800px){ 
	header { padding: 0; margin: 0 0 0.2em 0; width: 100%; }
	header nav#social { height: 2.5em; background: #333; border: 1px solid #333; }
	header nav#logo { height: 6em; background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	header nav#social ul,
	header nav#pages ul { display: flex; justify-content: space-between; margin: 0; padding: 0; }
	header nav ul#social li,
	header nav ul#pages li { display: inline-block; }

	header nav#logo ul {  width: 100%; margin: 0; padding: 0;}
	header nav#logo ul li { list-style: none; margin: 0.2em 0; }
	header nav#logo ul li img { height: auto;  max-height: 3em; max-width: 100%; display: inline-block; }

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	main { float: left; width: 98%; text-align: center; margin: 1em 1%; font-size: 0.8em; padding: 1em 0; }
	div#Legenda { max-width: 12em; font-size: 0.8em; }
	footer { bottom: 0; left: 0; border-top: 1px dotted gray; clear: both; } 
}
@media all and (max-width: 400px){ 
	header { padding: 0; margin: 0 0 0.2em 0; width: 100%; }
	header nav#social { height: 2.5em; background: #333; border: 1px solid #333; }
	header nav#logo { height: 6em; background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	header nav#social ul,
	header nav#pages ul { display: flex; justify-content: space-between; margin: 0; padding: 0; }
	header nav ul#social li,
	header nav ul#pages li { display: inline-block; }

	header nav#logo ul {  width: 100%; margin: 0; padding: 0;}
	header nav#logo ul li { list-style: none; margin: 0.2em 0; }
	header nav#logo ul li img { height: auto; max-height: 3em; max-width: 100%; display: inline-block; }

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	main { float: left; width: 98%; text-align: center; margin-bottom: 1em; font-size: 0.8em; padding: 1%; }
	div#Legenda { max-width: 12em; font-size: 0.8em; }
	footer { bottom: 0; left: 0; border-top: 1px dotted gray; clear: both; } 
}

/*
header nav#social ul { display: flex; justify-content: space-between; margin: 0; padding: 0; float: right;}
header nav#social ul li { display: inline-block; list-style: none; margin-right: 1em;}
header nav#social ul li a img { height: 2.5em; }


header nav#logo ul { display: flex; justify-content: space-between; width: 100%; margin: 0; padding: 0;}
header nav#logo ul li { display: inline-block; list-style: none; background: white; margin: 0.2em 0; width: 50%;}
header nav#logo ul li img { height: auto; max-width: 90%; display: inline-block; }
header nav#logo ul li#INGVLogo { text-align: left; }
header nav#logo ul li#HSITLogo { text-align: right; }

header nav#pages ul { display: flex; justify-content: space-between; margin: 0; padding: 0.2em 0;}
header nav#pages ul li{ display: inline-block; list-style: none;  width: 16.6%; border-right: 1px solid gray; text-align: center; font-weight: bold; padding: 0; margin: 0;} 
header nav#pages ul li img.pagesImg { height: 2em; vertical-align: middle; }
header nav#pages ul li img.pagesImg { transition: transform 400ms 0ms, z-index 0ms 400ms; }
header nav#pages ul li img.pagesImg:hover { transform: scale(1.7);  z-index: 2; }

header nav#pages ul li a { text-decoration: none; cursor: pointer; }
header nav#pages a:link, 
header nav#pages a:visited, 
header nav#pages a:active, 
header nav#pages a:hover { color: white; }
*/

header nav#social { background: #333; }
header nav#logo { background: #fff; }
header nav#pages { background: #333; color: white; }


header nav#social ul { float: right;}
header nav#social ul li { margin-right: 1em;}
header nav#social ul li a img { height: 2.5em; }

header nav#logo ul li#INGVLogo { text-align: left; }
header nav#logo ul li#HSITLogo { text-align: right; }

header nav#pages ul { padding: 0 0; width: 100%; }
header nav#pages ul li{ width: 16.6%; border-right: 1px solid gray; text-align: center; font-weight: bold; } 
header nav#pages ul li img.pagesImg { height: 2em; vertical-align: middle; }
header nav#pages ul li img.pagesImg { transition: transform 400ms 0ms, z-index 0ms 400ms; }
header nav#pages ul li img.pagesImg:hover { transform: scale(1.7);  z-index: 2; }

header nav#pages ul li a { text-decoration: none; cursor: pointer; }
header nav#pages a:link, 
header nav#pages a:visited, 
header nav#pages a:active, 
header nav#pages a:hover { color: white; }

ul li { list-style: none; }


@media all and (min-width: 1025px){ img.pagesImg { padding-right: 0.3em;} } 
@media all and (min-width: 801px) and (max-width: 1024px){  img.pagesImg {display: none; padding: 0;} }
@media all and (min-width: 401px) and (max-width: 800px){ span.pagesLabel {display: none; } }
@media all and (max-width: 400px){ span.pagesLabel {display: none; } }

@media all and (min-width: 1025px){ 
	section#LeftInfo { margin: 0 0.5%; width: 40%; float: left; }

	section#InteractiveMapBlock{ width: 55%; height: 70em; float: right; margin-right: 1%; }
	section.SvgGraphNearMap{ width: 48%; margin: 1em 1%;  float: left; clear: right; }
	section.SvgGraph{ width: 98%; margin: 0.5em 1%; min-height: 25em; float: left; clear: both; }

	body section#CommuneQuakes table#TableQuakes{ width: 100%; }
}
@media all and (min-width: 801px) and (max-width: 1024px){  
	section#LeftInfo { margin: 0 0.5%; width: 40%; float: left; }

	section#InteractiveMapBlock{ width: 98%; height: 70em; margin-left: 1%; clear: both; }
	section.SvgGraphNearMap{ width: 98%; margin-left: 1%; clear: both;}
	section.SvgGraph{ width: 98%; margin: 0.5em 1%; min-height: 25em; clear: both; }

	body section#CommuneQuakes table#TableQuakes{ width: 100%; }
}
@media all and (min-width: 401px) and (max-width: 800px){ 
	section#LeftInfo { margin: 0 0.5%; width: 98%; float: left; }

	section#InteractiveMapBlock{ width: 90%; height: 60em; margin: 0 5%; clear: both;}
	section.SvgGraphNearMap{ width: 98%; margin-left: 1%; clear: both;}
	section.SvgGraph{ width: 98%; margin: 0.5em 1%; min-height: 25em; clear: both;}

	body section#CommuneQuakes table#TableQuakes{ display: none; }
}
@media all and (max-width: 400px){ 
	section#LeftInfo { margin: 0 0.5%; width: 98%; float: left; }


	section#InteractiveMapBlock{ width: 90%; height: 60em; margin: 0 5%; clear: both;}
	section.SvgGraphNearMap{ width: 98%; margin-left: 1%; clear: both;}
	section.SvgGraph{ width: 98%; margin: 0.5em 1%; min-height: 25em; clear: both;}

	body section#CommuneQuakes table#TableQuakes{ display: none; }
}

body>h1 {text-align: center;}
h1.NoMarginTop {margin-top: 0; border-top: 1px dashed #333; border-left: 1px dashed #333; border-radius: 0.3em; }



img { border: 0; }


section#InteractiveMapBlock{
	text-align: center;
}


div#InteractiveMap{
	width: 100%;
	min-height: 60em;
	max-height: 70em;
	float: left;
	margin-right: 1%;
	clear: left;
}

section#Info,
section#NoData{
	background: #f6f6f6;
	border: 0.062em solid black;
	padding: 0.5em;
	font-size: 1.2em;
}


section#Info { max-width: 100%; }
fieldset#Filters { max-width: 100%;}
section#Info>dl>dt{ font-weight: bold; font-variant: small-caps; }
section#Info>dl>dd{ font-style: italic; display: block; margin-top: 0.2em; margin-bottom: 0.2em; padding-left: -1em; }

fieldset#Filters {
	margin-top: 1em;
	background: #f7ffc8;
	border: 0.062em solid black;
	padding: 1%;
	font-size: 1.3em;
}

div.LastUpdate{
	clear: both;
	font-size: 0.8em;
	text-align: right;
	font-style: italic;
	margin-top: 1em;
}

fieldset#Filters legend{
	font-size: 1.1em;
	font-weight: bold;
	border: 1px dotted #333;
	padding: 0.2em 1em;
	text-align: left;
	background: orange;
	color: black;
	font-style: italic;
}


fieldset#Filters { text-align: left; }
fieldset#Filters dl dt { font-style: italic; font-size: 1.1em; font-weight: bold;}
fieldset#Filters>dl>dd { margin-left: 1em; font-size: 0.8em; }
fieldset#Filters>dl>dd>ul { display:flex; justify-content: space-between; margin: 0 0 0 1.5em; padding: 0;}
fieldset#Filters>dl>dd>ul>li { list-style: none; margin: 0 0 0.5em 0; min-width: 12%; }
fieldset#Filters dl dd ul li input { width: 1em; vertical-align: baseline; }
fieldset#Filters dl dd ul li label{ width: auto; font-weight: normal;}
fieldset#Filters ul li{ list-style: none; margin: 0 0 0.5em 0; }


fieldset#Filters button{
	min-height: 2em;
	padding: 0.2em;
	text-decoration: none;
	border-radius: 0.5em;
	font-weight: bold;
	background: orange;
	width: 40%;
	font-size: 1.3em;
	margin-left: 30%;
}

fieldset#Filters span.note {
	font-size: 0.6em;
	color: red;
	font-style: italic;
}


body section#CommuneQuakes table#TableQuakes{
	border: 1px solid black;
	border-collapse: collapse; 
}

body section#CommuneQuakes table#TableQuakes thead tr th{
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	border: 1px solid black;
}

body section#CommuneQuakes table#TableQuakes tbody tr td{
	font-size: 1.1em;
	border: 1px solid black;
}

td.alignLeft{ text-align: left;}
td.alignCenter{ text-align: center;}
td.alignRight{ text-align: right;}

tr.range1 { background: #A8A8A8a6; }
tr.range2 { background: #5068AEa6; }
tr.range3 { background: #0031BBa6; }
tr.range4 { background: #0066D2a6; }
tr.range5 { background: #009BE9a6; }
tr.range6 { background: #00CA75a6; }
tr.range7 { background: #01F901a6; }
tr.range8 { background: #BEF701a6; }
tr.range9 { background: #FDF401a6; }
tr.range10 { background: #FDCF00a6; }
tr.range11 { background: #FEA900a6; }
tr.range12 { background: #FE7300a6; }
tr.range13 { background: #FF0000a6; }


body section#IntensityMaps article{
	display: block;
	clear: both;
	width: 100%;
}

body section#IntensityMaps article h2{
	text-decoration: none;
	font-style: italic;
	font-variant: small-caps;
	border-bottom: 0.062em solid navy;
}

body section#IntensityMaps article h2 img.IconHSIT {
	max-height: 1em;
	margin-right: 0.5em;
}


body section#IntensityMaps article h2 a img.InfoURL{
	max-height: 1em;
	margin-left: 0.5em;
}

body section#IntensityMaps article ul{
	margin: 0;
	padding: 0;
	width: 100%;
}

body section#IntensityMaps article ul li{
	display: inline-block;
	list-style: none;
	padding: 0;
	text-align: center;
	border: 1px dotted gray;
}

body section#IntensityMaps article ul li figure{
	display: block;
	padding: 0;
	margin: 0;
}

body section#IntensityMaps article ul li figure figcaption{
	display: block;
	width: 100%;
	border-bottom: 1px dotted gray;
	background-color: #f3f3db;
}

body section#IntensityMaps article ul li figure img{
	max-width: 100%;
	padding: 0;
	margin: 0;
}

div.MapInfo{
	display: block;
	margin: 0.4em 0;
	font-variant: small-caps;
	background-color: #d6f6ef;
	border-top: 1px dotted gray;
	border-bottom: 1px dotted gray;
}


section.SvgGraph h1, section.SvgGraphNearMap h1 { text-align: center; width: 100%; }
section.SvgGraph div svg, section.SvgGraphNearMap div svg{ border: 1px dashed gray; }
section.SvgGraph p, section.SvgGraphNearMap p { font-style: italic; font-size: 0.8em; padding: 0.2em 1em 0.4em 1em;}

body section footer {
	display: block;
	text-align: right;
	margin: 1em 0;
}

body footer {
	font-family: monospace;
	text-align: right;
	font-size: 0.5em;
}

div.InfoQuake { border-radius: 0.5em; padding: 0; font-size: 14px; border: 1px solid black; background: #ffffff; text-align: left;}
div.InfoQuake h1 { font-weight: bold; font-size: 1em; margin: 0; padding: 0.2em; background-color: navy; border-radius: 0.5em 0.5em 0 0; color: white; white-space: nowrap; text-align: center;}
div.InfoQuake dl { margin: 0.2em;}
div.InfoQuake dl dt { font-weight: bold; }
div.InfoQuake dl dd { font-style: italic; margin-left: 0.5em; }

div#Legenda {
	min-width: 12em;
	background-color: white;
	position: absolute;
	top: 2em;
	right: 0px;
	text-align: left;
	padding: 0;
	border: 1px solid black;
	border-radius: 0.5em;
}

div#Legenda h1 { margin: 0; text-align: center; padding: 0.2em; background-color: #92ce92; border-radius: 0.2em 0.2em 0 0;} 
div#Legenda h2 { border-bottom: 1px dotted gray; border-top: 1px solid black; margin: 0; text-align: center; padding: 0.1em; } 
div#Legenda ul { margin: 0.5em 0.4em; padding: 0px; } 
div#Legenda ul li { list-style: none; padding-bottom: 0.2em;} 
div#Legenda ul li img.Star0{ width: 11px; } 
div#Legenda ul li img.Star1{ width: 11px; } 
div#Legenda ul li img.Star2{ width: 13px; } 
div#Legenda ul li img.Star3{ width: 18px; } 
div#Legenda ul li img.Star4{ width: 23px; } 
div#Legenda ul li img.Star5{ width: 28px; } 
div#Legenda ul li img.Star6{ width: 30px; } 

div#Legenda ul li span.ColorBlock { width: 1em; margin-right: 0.4em;}
/*
div#Legenda table tr td.Depth0{ background-color: #ffcb16; width: 1em; } 
div#Legenda table tr td.Depth1{ background-color: #ffff00; width: 1em; } 
div#Legenda table tr td.Depth2{ background-color: #27b700; width: 1em; } 
div#Legenda table tr td.Depth3{ background-color: #0059d2; width: 1em; } 
div#Legenda table tr td.Depth4{ background-color: #dd59d2; width: 1em; } 
div#Legenda table tr td.Depth5{ background-color: #ff0000; width: 1em; } 
*/
div#Legenda div#Centroid { text-align: center; border-top: 1px solid black;  border-bottom: 1px dotted gray; margin: 0.4em 0; font-size: 1.2em;}
div#Legenda div#Centroid img.Hunt{ width: 30px;  clear: both; }