/*
@media all and (min-width: 1025px){ body {background-color: white; } } 
@media all and (min-width: 801px) and (max-width: 1024px){ body {background-color: blue; } }
@media all and (min-width: 401px) and (max-width: 800px){ body {background-color: yellow; } }
@media all and (max-width: 400px){ body {background-color: red; } }
*/
section, header, aside, article, nav, footer, main { display: block; }
html {font-size: 12px;  margin: 0; padding: 0; } /* 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#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; margin: 0.2em 0; }
	header nav#logo ul li img { height: auto; max-width: 100%; display: inline-block; }
	header nav#logo ul li#INGVLogo { text-align: left; }
	header nav#logo ul li#HSITLogo { text-align: right; }

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	aside#trouble{ 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; }
	aside#RightNavBar { float: right; width: 26%; border-left: 1px dashed #333; padding-left: 1.3em;}
	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 { background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	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; margin: 0.2em 0; }
	header nav#logo ul li img { height: auto; max-height: 4em; max-width: 100%; display: inline-block; }
	header nav#logo ul li#INGVLogo { text-align: left; }
	header nav#logo ul li#HSITLogo { text-align: right; }

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	aside#trouble{ 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; }
	aside#RightNavBar { float: right; width: 26%; border-left: 1px dashed #333; padding-left: 1.3em;}
	nav#lastHourMapRight img { display: none; }
	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 { background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	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; }
	header nav#logo ul li#INGVLogo { text-align: left; }
	header nav#logo ul li#HSITLogo { text-align: right; }

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	aside#trouble{ 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; }
	aside#RightNavBar { display: none; }
	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 { background: #fff; margin: 0.2em; }
	header nav#pages { height: 2em; background: #333; border: 1px solid #333; color: white; padding: 0.5em 0; }

	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; }
	header nav#logo ul li#INGVLogo { text-align: left; }
	header nav#logo ul li#HSITLogo { text-align: right;}

	aside#dataAlert{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	aside#trouble{ text-align: center; line-height: 1.5em; border-bottom: 1px dashed #333; margin-bottom: 0.3em;}
	main { float: left; width: 95%; text-align: center; margin-bottom: 1em; font-size: 0.8em; padding: 1em; }
	aside#RightNavBar { display: none; }
	footer { bottom: 0; left: 0; border-top: 1px dotted gray; clear: both; } 
}

aside#trouble{ background: #ffcc7dd1; font-size: 1.2em; margin: 0.5em 20%; padding: 0.2em; border: 1px dashed #333;}

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#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; }

@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; } }

aside#RightNavBar nav { margin-bottom: 2em; } 
aside#RightNavBar nav h2{ font-size: 1.3em; color: #333; text-align: center; border-left: 1px dashed gray; border-top: 1px dashed gray; margin-right: 2em; border-radius: 0.5em; }
aside#RightNavBar nav ul{ padding-left: 2em; }
aside#RightNavBar nav ul li{ list-style: none; font-size: 1.2em; }
aside#RightNavBar nav ul li:before { content: "\00BB \0020"; }


main>h5#WhereWeAre { font-size: 1.2em; font-style: italic; margin: 0 0 0 0.5em; text-align: left; }

main>h1{ font-size: 1.5em; font-style: italic; border-bottom: 1px dashed #333; }

form>fieldset { margin: 0.5em 0; border: 1px solid #333; }
form>fieldset>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;
}

form fieldset>ul { margin: 0; padding: 0; }
form fieldset>ul>li { list-style: none; margin: 0.5em 0; padding: 0; }
form fieldset>ul>li>label { text-align: right; padding-right: 1em; font-weight: bold;}
form fieldset>ul>li>label:first-letter { text-transform: uppercase; } 

@media all and (min-width: 1025px){ 
	form fieldset ul li label { display: inline-block; width: 40%; text-align: right; }
	form fieldset ul li select, 
		form fieldset ul li input, 
		form fieldset ul li textarea{ width: 40%; }

	form fieldset ul li input#quake_date, 
		form fieldset ul li input#quake_time{ width: 20%; margin-right: 20%; }

	form fieldset ul li div.hints{ width: 30%; margin-left: 52%; }
}
@media all and (min-width: 801px) and (max-width: 1024px){  
	form fieldset ul li label { display: inline-block; width: 40%; text-align: right; }
	form fieldset ul li select, 
		form fieldset ul li input, 
		form fieldset ul li textarea{ width: 40%; }

	form fieldset ul li input#quake_date, 
		form fieldset ul li input#quake_time{ width: 20%; margin-right: 20%; }

	form fieldset ul li div.hints{ width: 30%; margin-left: 52%; }
}
@media all and (min-width: 401px) and (max-width: 800px){ 
	form fieldset ul li label { display: block; width: 90%; text-align: center; margin-left: 5%; font-size: 1.2em;}
	form fieldset ul li select, 
		form fieldset ul li input, 
		form fieldset ul li textarea{ width: 80%; height: 1.5em; }

	form fieldset ul li input#quake_date, 
		form fieldset ul li input#quake_time{ width: 20%; margin-right: 20%; }

	form fieldset ul li div.hints{ width: 30%; margin-left: 52%; }
}
@media all and (max-width: 400px){ 
	form fieldset ul li label { display: block; width: 90%; text-align: center; margin-left: 5%; font-size: 1.2em;}
	form fieldset ul li select, 
		form fieldset ul li input, 
		form fieldset ul li textarea{ width: 80%; height: 2em;}

	form fieldset ul li input#quake_date, 
		form fieldset ul li input#quake_time{ width: 40%; }

	form fieldset ul li div.hints{ width: 55%; margin-left: 35%; }
}


fieldset#EarthquakeInfo p,
fieldset#PointOfView p,
fieldset#IndoorExperience p,
fieldset#OutdoorExperience p,
fieldset#QuakeNoise p{
	font-size: 1.1em;
	padding: 0.2em;
	text-align: center;
	border: 0.1em dashed gray;
	margin: 0.1em 0.5em; 

}

p.ColorNavy { color: navy; }
p.ColorRed { color: red; }


fieldset#isAdverted ul{ display: flex; justify-content: space-between; } 
fieldset#isAdverted ul li { list-style: none; width: 50%; }
fieldset#isAdverted ul li button {
	width: 60%;
	min-height: 1em;
	padding: 0.2em;
	margin: 1em 0 0 10%;
	text-decoration: none;
	font-size: 2em;
	border-radius: 1em;
	font-weight: bold;
}

fieldset#EarthquakeInfo { background: #FFD2C6; }
fieldset#PointOfView,
fieldset#POV { background: #B0FFAD; }
fieldset#isAdverted { background: #FFB6B6; }
fieldset#IndoorExperience, 
fieldset#OutdoorExperience,
fieldset#Experience { background: #DCEFFF; }
fieldset#QuakeNoise,
fieldset#Contact { background: #f4bf8c; }
fieldset#LightEffect { background: #ddeff8; }
fieldset#BuildingDamages { background: #DAD9FF; }
fieldset#DescriptionBuildingDamages{ background: #CBB0FF; }
fieldset#subscriberForm { background: #8dc4ff; } 
fieldset#SimpleSearch{ background: #f1ff7d61; } 
fieldset#Auth{ background: #dcffdd; } 


fieldset#Filters {
	width: 90%;
	margin: 0 4% 1em 5%;
	background: #f7ffc8;
	border: 0.062em solid black;
	padding: 0.5em;
	font-size: 1.3em;
}

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



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 { margin: 0 0 0 1.5em; padding: 0;}
fieldset#Filters dl dd ul li input { width: 1em; vertical-align: baseline; }
fieldset#Filters dl dd ul li label{ width: auto; font-weight: normal; display: inline; }
fieldset#Filters ul li{ list-style: none; margin: 0 0 0.5em 0; }

fieldset#Filters dl dd ul.listProvince li { display: inline-block; margin-left: 0.2em; border: 1px solid gray; background-color: #BEF701a6; padding: 0.1em 0.3em; border-radius: 0.5em;} 

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;
}

fieldset#Profile  { width: 80%; margin-left: 10%; font-size: 1em; text-align: left; background: #e9f1ff; }
fieldset#Profile legend  { font-size: 1.2em; }
fieldset#Profile ul li { list-style: none; margin-bottom: 0.5em; font-size: 1.2em; text-align: left; }
fieldset#Profile ul li label { width: 45%; text-align: right; display: inline-block; font-weight: bold; }
fieldset#Profile ul li input[type="text"],
fieldset#Profile ul li input[type="password"] { width: 35%; text-align: left; }
fieldset#Profile ul li input[type="radio"]{ text-align: center; }
fieldset#Profile ul li img {  }
fieldset#Profile ul li span#change_email_note { display: none; }

fieldset.NewElem { width: 90%; margin: 0.2em 4.5% 2em 4.5%; background: #cbffcb; }
fieldset.NewElem ul li { list-style: none; margin-bottom: 0.5em; font-size: 1.2em; text-align: left; }
fieldset.NewElem ul li label { width: 45%; text-align: right; display: inline-block; font-weight: bold; }
fieldset.NewElem ul li input { width: 35%; text-align: left; height: 1.8em; }
fieldset.NewElem ul li select{ width: 10%; text-align: left; height: 1.8em; margin: 0; vertical-align: middle;}
fieldset.NewElem button { width: 50%; text-align: center; font-size: 1.4em; border-radius: 0.4em; }


section#Contacts { font-size: 1.1em; text-align: left; }
section#QuakesInEvidence {}
section#QuakesInEvidence>h1 { font-size: 1.5em; border-bottom: 1px solid #333; width: 50%; margin-left: 25%; }
section#QuakesInEvidence>ul { display: flex; justify-content: space-between; margin: 0; padding: 0; width: 100%; }

section#QuakesInEvidence>ul>li{ text-align: center; font-size: 1.2em; list-style: none;}
section#QuakesInEvidence>ul>li>button  {display: block; max-width: 15em; width: 80%; background-color: white; margin-left: auto; margin-right: auto;}
section#QuakesInEvidence>ul>li>button img.QuakesInEvidence{ width: 100%;  }

section.QuakeBlock {
	border: 1px solid #333;
	background-color: #fcffde;
	margin: 1em 0;
	padding: 0 0 0.5em 0;
}

section.QuakeBlock h2 {
	font-size: 1.5em;	
	text-align: center;
	border-bottom: 0.1em solid #333;
	margin-top: 0;
	background: #333;
	color:white;
}

section.QuakeBlock figure.QuakeMap{
	display: block;
	float: left;
	text-align: center;
}

@media all and (min-width: 1025px){
	section.QuakeBlock figure.QuakeMap figcaption{ font-size: 1em; font-style: italic;}
	section.QuakeBlock figure.QuakeMap{ margin: 0 1%; width: 40%; }
	section.QuakeBlock figure.QuakeMap form { margin-top: 2em; }
	section.QuakeBlock figure.QuakeMap img { width: 80%; }
}

@media all and (min-width: 801px) and (max-width: 1024px){
	section.QuakeBlock figure.QuakeMap figcaption{ font-size: 1em; font-style: italic;}
	section.QuakeBlock figure.QuakeMap{ margin: 0 1%; width: 40%; }
	section.QuakeBlock figure.QuakeMap form { margin-top: 2em; }
	section.QuakeBlock figure.QuakeMap img { width: 80%; }
}

@media all and (min-width: 401px) and (max-width: 800px){
	section.QuakeBlock figure.QuakeMap a figcaption{ display: none; }
	section.QuakeBlock figure.QuakeMap{ margin: 0 1%; width: 96%; clear: both; }
	section.QuakeBlock figure.QuakeMap form { margin-top: 2em; clear: both; }
	section.QuakeBlock figure.QuakeMap img { width: 80%; }
}

@media all and (max-width: 400px){
	section.QuakeBlock figure.QuakeMap a figcaption{ display: none; }
	section.QuakeBlock figure.QuakeMap{ margin: 0 2%; width: 96%; clear: both; }
	section.QuakeBlock figure.QuakeMap form { margin-top: 2em; clear: both; }
	section.QuakeBlock figure.QuakeMap img { width: 80%; }

}


section.QuakeBlock dl {
	display: block;
	padding-top: 0;
	margin-top: 0;
	text-align: left;
}

@media all and (min-width: 1025px){ section.QuakeBlock dl { float: left; width: 50%; } } 
@media all and (min-width: 801px) and (max-width: 1024px){ section.QuakeBlock dl { float: left; width: 50%; } } 
@media all and (min-width: 401px) and (max-width: 800px){ section.QuakeBlock dl { float: left; width: 90%; } } 
@media all and (max-width: 400px){ section.QuakeBlock dl { width: 90%; } } 

section.QuakeBlock dl dt {
	font-size: 1.2em;
	font-weight: bold;
}

section.QuakeBlock dl dd {
	font-size: 1.1em;
}

section.QuakeBlock h3{
	clear: both;
	font-size: 1.5em;
	background: #ebffff;
	border-top: 0.05em dotted #6186b8;
	border-bottom: 0.05em dotted #6186b8;
}

section.QuakeBlock h3 a{
	text-decoration: none;
}

section.QuakeBlock form input[type="submit"]{
	width: 50%;
	min-height: 2em;
	padding: 0.2em;
	margin: 0.2em 25%;
	text-decoration: none;
	font-size: 1.5em;
	border-radius: 0.5em;
	font-weight: bold;
	background: orange;
}

@media all and (min-width: 1025px){ section.QuakeBlock form input[type="submit"]{ width: 50%; margin: 0.2em 25% 0;} }
@media all and (min-width: 801px) and (max-width: 1024px){ section.QuakeBlock form input[type="submit"]{  width: 50%; margin: 0.2em 25% 0;} }
@media all and (min-width: 401px) and (max-width: 800px){ section.QuakeBlock form input[type="submit"]{  width: 90%; margin: 0.2em 5% 0;} }
@media all and (max-width: 400px){ section.QuakeBlock form input[type="submit"]{  width: 90%; margin: 0.2em 5% 0;} }

section#subscribersMap figure img{
	margin: 0px 1em;
	float: left;
}

section#lastHourMap table#lastHourMapTable, section#subscribersMap section table.infoSubscribers{ 
	margin: 0px 1em;
	border-collapse: collapse; 
	float: left;
	display: none;
}

@media all and (min-width: 1025px){ 
	section#subscribersMap figure img{ margin-left: 1em; width: 65%; } 
	section#subscribersMap section { float: left; width: 25%; } 
}
@media all and (min-width: 801px) and (max-width: 1024px){  
	section#subscribersMap figure img{ margin: 1em; width: 98%; } 
	section#subscribersMap section { float: left; }
	section#subscribersMap section select { display: block; }
}
@media all and (min-width: 401px) and (max-width: 800px){ 
	section#subscribersMap figure img{ margin: 1em; width: 98%; } 
	section#subscribersMap section { float: left; }
	section#subscribersMap section select { display: block; }
}
@media all and (max-width: 400px){ 
	section#subscribersMap figure img{ margin: 1em; width: 98%; } 
	section#subscribersMap section { float: left; }
	section#subscribersMap section select { display: block; }
}


section#InteractiveMapBlock{ width: 98%; height: 60em; margin-right: 1%; }
div#InteractiveMap {
	width: 100%;
	height: 60em;
}


section#CommuneQuakes{
	width: 98%;
	float: left;
	font-size: 1.5em;
	margin: 0.2em 1%;
}

table#TableQuakes,
table#TableCommunes{
	border: 1px solid black;
	border-collapse: collapse; 
}

table#TableQuakes thead tr th,
table#TableCommunes thead tr th{
	font-weight: bold;
	font-size: 0.9em;
	border: 1px solid black;
}

table#TableQuakes tbody tr td,
table#TableCommunes tbody tr td{
	font-size: 0.8em;
	border: 1px solid black;
}


div.hints{
	color: navy;
	font-weight: bold;
	font-size: 1em;
	text-align: justify;
	font-style: italic;
	padding: 0.3em;
	background-color: #f7f4f4;
	border: 1px solid darkgray;

}




li.warn {
	color: red;
	border: 0.1em dashed red;
	text-align: justify;
	background: #ffd6d67a;
	margin: 1%;
	padding: 1%;
	font-size: 1.1em;

}

article#WhatIsInfoTerremoti { }
article#WhatIsInfoTerremoti p { font-size: 1.5em; text-align: justify;}
article#WhatIsInfoTerremoti dl { font-size: 1.5em; text-align: justify;}
article#WhatIsInfoTerremoti dl dt { font-weight: bold; }

li.info,
p.info{
	color: navy;
	border: 0.1em dotted gray;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	background: #ddd7f1;
	width: 96%;
	margin: 1%;
	padding: 1%;
}

div#NeededFields{
	clear: both;
	padding: 2px 1% 2px 1%;
	margin: 10px 15%;
	text-align: center;
	background: #e2ffe3;
	font-weight: bold;
	font-size: 1.5em;
	border: 1px outset red;
}

div#NeededFields:before {
	content:" * ";
	color: red;
	font-weight: bold;
}


button#adverted{ background: #ebff7e; border: 5px solid orange; }
button#not_adverted{ background: #95d8ff; border: 5px solid navy; }


.buttonOrange{
	min-width: 40%;
	min-height: 1em;
	padding: 0.5em;
	margin: 1em 0;
	text-decoration: none;
	font-size: 1.3em;
	border-radius: 0.3em;
	background: orange;
	color: black;
}


label.mandatory:after { content:" * "; color: red; font-weight: bold; }

span.Counters { color: red; padding-right: 0.5em; }
ul#InfoSite li:before { content: ""; }


@media all and (min-width: 1025px){
	ul#InfoSite li{ font-size: 1.2em; }
	span.Counters{  font-size: 1.2em; }
}

@media all and (min-width: 801px) and (max-width: 1024px){
	ul#InfoSite li{ font-size: 1.2em; }
	span.Counters{  font-size: 1.2em; }
}

@media all and (min-width: 401px) and (max-width: 800px){
	ul#InfoSite li{ font-size: 1.2em; }
	span.Counters{  font-size: 1.2em; }
}
@media all and (max-width: 400px){
	ul#InfoSite li{ font-size: 1.2em; }
	span.Counters{  font-size: 1.2em; }
}

article.ExplainBlock, 
article.SocialBlock{
	border: 0.1em solid #15488e;
	font-size: 1.1em;
	float: left;
	padding: 1%;
	text-align: justify;
	margin: 0.5em 2% 0.5em 0; 
	width: 96%;
}

article.ExplainBlock { background: #d5e4f8; }

article.ExplainBlock h1,
article.SocialBlock h1 { text-align: left; border-bottom: 0.05em dotted gray; }

@media all and (min-width: 1025px){ 
	article.ExplainBlock h1,
	article.SocialBlock h1{ font-size: 1.4em; } 
}
@media all and (min-width: 801px) and (max-width: 1024px){ 
	article.ExplainBlock h1,
	article.SocialBlock h1{ font-size: 1.4em; } 
}
@media all and (min-width: 401px) and (max-width: 800px){ 
	article.ExplainBlock h1,
	article.SocialBlock h1{ font-size: 1.4em; } 
}
@media all and (max-width: 400px){ 
	article.ExplainBlock h1,
	article.SocialBlock h1{ font-size: 1.1em; } 
}

article.ExplainBlock h1 img { margin-right: 0.5em; }
article.SocialBlock h1 img { margin-right: 0.5em; width: 2em; }

article.ExplainBlock dl dt,
article.SocialBlock dl dt{ font-weight: bold; }

article.ExplainBlock dl dd,
article.SocialBlock dl dd{ font-style: italic; }



form#NextSearchModule ul{ display: flex; justify-content: space-between; clear: both; padding: 0px; margin: 1em; }
form#NextSearchModule ul li { list-style: none; font-size: 1.3em; }



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; }


tr.magnitude0 { background: #ff000082; }
tr.magnitude1 { background: #da000082; }
tr.magnitude2 { background: #b8000082; }
tr.magnitude3 { background: #b8007382; }
tr.magnitude4 { background: #b800a482; }
tr.magnitude5 { background: #b800fa82; }
tr.magnitude6 { background: #52007082; }
tr.magnitude7 { background: #00000082; }

.mcs_I, .ems_I { width: 1em; background: #a8a8a8; opacity: 0.8; }
.mcs_II, .ems_II { width: 1em; background: #5068ae; opacity: 0.8; }
.mcs_III, .ems_III { width: 1em; background: #0031bb; opacity: 0.8; }
.mcs_IV, .ems_IV { width: 1em; background: #009be9; opacity: 0.8; }
.mcs_V, .ems_V { width: 1em; background: #01f901; opacity: 0.8; }
.mcs_VI, .ems_VI { width: 1em; height: 100%; background: #fdf401; opacity: 0.8; }
.mcs_VII, .ems_VII { width: 1em; background: #fea900; opacity: 0.8; }
.mcs_VIII, .ems_VIII { width: 1em; background: #ff0000; opacity: 0.8; }
.mcs_IX, .ems_IX, 
.mcs_X, .ems_X, 
.mcs_XI, .ems_XI, 
.mcs_XII, .ems_XII { width: 1em; max-width: 49px; background-image: url('/images/danger-stripe.png'); }

section.GISSearch figure img { width: 90%; } 

@media all and (min-width: 1025px){ section.GISSearch{ float: left; width: 47%; } }
@media all and (min-width: 801px) and (max-width: 1024px){  section.GISSearch{ width: 90%; margin-left: 5%; } }
@media all and (min-width: 401px) and (max-width: 800px){ section.GISSearch{ width: 90%; margin-left: 5%; } }
@media all and (max-width: 400px){ section.GISSearch{ width: 90%; margin-left: 5%; } }


section.GISSearch{
	border: 1px dotted gray;
	margin: 1em;
}

section.GISSearch h2{
	border-top: 1px dotted gray;
	border-bottom: 1px dotted gray;
	text-align: center;
	font-size: 1.5em;
}


article.Video{
	border: 0.1em solid #15488e;
	background: #f8f2d5;
	font-size: 1.4em;
	padding: 1em;
	margin: 1em 0;
	text-align: justify;
}

article.Video h1{
	text-align: left;
	font-size: 1.2em;
	border-bottom: 1px dotted gray;
}

article.Video h1 img{
	margin-right: 0.5em;
}

article.Video p{
	font-size: 1.2em;
}

article.Video div.video-container{
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden;
}

article.Video div.video-container iframe {
	width: 100%; 
	height: 100%; 
	position: absolute; 
	top: 0; 
	left: 0;
}


article.Video footer{
	font-size: 1em;
	padding: 1em;
	text-align: right;
	font-style: italic;
	border: 0;
}

figure.FigFigcaptionUp {
	border: 1px dotted gray;
	text-align: center;
}

@media all and (min-width: 1025px){ }

@media all and (min-width: 801px) and (max-width: 1024px){
	figure.FigFigcaptionUp img{  width: 99%; }
}
@media all and (min-width: 401px) and (max-width: 800px){
	figure.FigFigcaptionUp  img{  width: 99%; }
	figure.FigFigcaptionUp  { margin: 0; padding: 0; }
}
@media all and (max-width: 400px){ 
	figure.FigFigcaptionUp img{  width: 99%; }
	figure.FigFigcaptionUp { margin: 0; padding: 0; }
}

figure.FigFigcaptionUp figcaption{
	color: black;
	font-size: 1.4em;
	font-style: italic;
	border-bottom: 1px dotted gray;
	text-align: left;
	background:  #fdffee;
	padding: 0.2em 2em;
	margin-bottom: 0.3em;

}

article.PubScience{
	border: 0.1em solid #15488e;
	background: #f8f2d5;
	padding: 1em;
	margin: 1em 0;
	text-align: justify;
}

article.PubScience h1{
	text-align: left;
	font-size: 1.2em;
	border-bottom: 0;
}

article.PubScience h2:before{
	content: "di "; 
}
article.PubScience h2{
	text-align: left;
	font-size: 0.9em;
	font-weight: none;
	font-style: italic;
	border-bottom: 0.05em dotted gray;
}

article.PubScience h1 img{
	margin-right: 0.5em;
}

article.PubScience footer{
	font-size: 1em;
	padding: 1em;
	text-align: right;
	font-style: italic;
	border: 0;
}

article.News0, article.News1{
	border: 0.1em solid #15488e;
	padding: 1em;
	margin: 1em 0;
	text-align: justify;
}

article.News0{ background: #f8ead5; } 
article.News1{ background: #d7f8d5; }

article.News0 h1, article.News1 h1{
	text-align: left;
	font-size: 1.1em;
	border-bottom: 0;
}

article.News0 footer, article.News1 footer{
	font-size: 1em;
	padding: 1em;
	text-align: right;
	font-style: italic;
	border: 0;
}

article.DOI{
	border: 0.1em solid #15488e;
	background: #f8f2d5;
	font-size: 1em;
	padding: 1em;
	margin: 1em 0;
	text-align: justify;
}

article.DOI h1{
	text-align: left;
	font-size: 1.2em;
	border-bottom: 1px dotted gray;
}

article.DOI h1 img{
	margin-right: 0.5em;
}

article.DOI p{
	font-size: 1.2em;
}

article.DOI dl dt{
	font-weight: bold;
}

p#LicenseNote {
	border: 0.1em solid navy;
	background: #f2faff;
	font-size: 1.2em;
	padding: 1em;
	margin: 1em 0;
	text-align: center;
}

p#warnInEvidence {
	color: red;
	border: 0.1em dashed red;
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	background: #ddd7f1;
	width: 96%;
	margin: 1%;
	padding: 1%;
}

section#HistDoc h1{  
	font-size: 1.8em;
	border-bottom: 1px solid green;
	margin: 0.5em;
	text-align: center;
	
}

section#HistDoc h2{  
	font-size: 1.2em;
	margin: 0.5em;
	text-align: right;
	color: darkgray;
	padding-left: 40%;
}

section#HistDoc article{ text-align: center; margin-bottom: 4em;} 
section#HistDoc article h1 { font-size: 1.2em; text-align: left; font-weight: bold; border: 0; margin-left: 2em;}
section#HistDoc article h2 { font-size: 1.1em; text-align: left; font-weight: bold; border: 0; color: darkgray; padding-left: 2.5em;}
section#HistDoc article p { font-size: 1em; text-align: justify; margin-left: 1em;}

section#HistDoc article figure {
	border: 1px dotted gray;
	text-align: center;
}

section#HistDoc article figure img{ width: 99%; }

@media all and (min-width: 1025px){ 
	section#HistDoc article figure { }
}
@media all and (min-width: 801px) and (max-width: 1024px){
	section#HistDoc article figure { }
}
@media all and (min-width: 401px) and (max-width: 800px){
	section#HistDoc article figure { margin: 0; padding: 0; }
}
@media all and (max-width: 400px){ 
	section#HistDoc article figure { margin: 0; padding: 0; }
}

section#HistDoc article figure figcaption{
	color: black;
	font-size: 1.4em;
	font-style: italic;
	border-bottom: 1px dotted gray;
	text-align: left;
	background:  #fdffee;
	padding: 0.2em 2em;
	margin-bottom: 0.3em;

}




@media all and (min-width: 1025px){
	footer ul#footerMenu{ display: flex; justify-content: space-between; padding: 0; } 
	footer ul#footerMenu li{ display: inline-block; list-style: none;  }
}

@media all and (min-width: 801px) and (max-width: 1024px){
	footer ul#footerMenu{ display: flex; justify-content: space-between; padding: 0; } 
	footer ul#footerMenu li{ display: inline-block; list-style: none; } 
}

@media all and (min-width: 401px) and (max-width: 800px){
	footer ul#footerMenu{ justify-content: space-between; padding: 0; }
	footer ul#footerMenu li{ list-style: none; }
}

@media all and (max-width: 400px){
	footer ul#footerMenu{ justify-content: space-between; padding: 0; }
	footer ul#footerMenu li{ list-style: none;  }
}

footer ul#footerMenu li nav ul { padding-left: 0.5em; }
footer ul#footerMenu li nav ul li{ display: block; list-style: none;} 


footer#FaqAlert{
	width: 80%;
	margin: 1% 9%;
	padding: 20px;
	font-size: 1.5em;
	clear: both;
	background-color: #ffa6a6;
	border: 0.1em solid #a6adff;
	margin-bottom: 1em;
}

article#scale { }
article#scale h2{
	font-size: 1.1em;
	font-weight: bold;
	color: darkgray;
	text-align: right;
	margin: 1em 0 0 0;
	font-style: italic;
}

article#scale section h1 {
	font-size: 1.3em;
	border-top: 1px dashed blue;
	padding: 0.2em;
	border-radius: 0.5em;
	border-bottom: 0;
	margin: 1em 0 0 0;
}

article#scale section { text-align: justify; } 

ul li.people { list-style-image: url('/images/people.png'); vertical-align: middle; }
ul li.object { list-style-image: url('/images/object.png'); vertical-align: middle; }
ul li.building { list-style-image: url('/images/building.png'); vertical-align: middle; }

section.building{ font-size: 1em;}
section.building hgroup { border: 1px dashed blue; background:#d7d6f1; padding: 0.5em;}  
section.building hgroup h1 { font-size: 1.5em; border: 0px; margin-bottom: 0.5em;}  
section.building hgroup h2 { font-size: 1.3em; font-style: italic;} 

section.building article { border: 1px solid black; font-size: 1.3em; font-style: italic; margin-top: 1em;} 
section.building article h1 { font-size: 1.3em; font-style: italic; border-bottom: 1px solid gray;} 

section.building article figure img { width: 90%; } 


section#AuthNotes ul { margin: 0; padding: 0; }
section#AuthNotes ul li { list-style: none; margin-bottom: 0.5em; font-size: 1.2em; text-align: center; border: 1px dotted gray; padding: 0.2em; }

section#Subscribe{
	text-align: justify;
	padding: 1em;
}
section#Subscribe.okSubscribe{
	background-color: #B0FFAD;
	border: 1px solid green;
}

section#Subscribe h1{
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 1em;
	font-weight: bold;
	border: 0;
}

section#okSubscribe h2{
	font-size: 1.2em;
	margin-bottom: 1em ;
	text-align: center;
}

section#Subscribe.koSubscribe{
	background-color: #FFD7D8;
	border: 1px solid red;
}
section#Subscribe.okUnsubscribe{
	background-color: #fffcad;
	border: 1px solid green;
}
section#Subscribe.koUnsubscribe{
	background-color: #fffcad;
	border: 1px solid red;
}

section#Thanx {
	clear: both;
	margin: 1em 1%;
}

section#Thanx div.ThanxCollaboration {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	margin: 2em 0;
}

section#Thanx h1#HeaderInfoSubscribe { margin: 1em 0; border: 1px dashed gray; padding: 0.5em; background: #c6ffd2; }

section#Thanx div#WriteUs {
	text-align: center;
	margin: 1em 0;
	margin-bottom: 1em;
	padding: 0.5em;
	font-size: 1.2em;
	font-style: italic;
}

aside#DoYouKnow{
	font-size: 1.2em;
	font-style: italic;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow-y: auto;
	padding: 0.5em;
	margin-bottom: 0.5em;
	max-width: 80%;
	margin-left: 10%;

}

aside#DoYouKnow img{
	margin: 0 0.5em;
	max-height: 5em;
	float: left;
}

@media all and (min-width: 1025px){ 
	section#Thanx aside#DoYouKnow{ 
		width: 60%;
		margin-left: 20%;
		padding: 1em 1em 1em 40px;
	}
}
@media all and (min-width: 801px) and (max-width: 1024px){  
	section#Thanx aside#DoYouKnow{ 
		width: 60%;
		margin-left: 20%;
		padding: 1em 1em 1em 40px;
	}
}
@media all and (min-width: 401px) and (max-width: 800px){ 
	section#Thanx aside#DoYouKnow{ 
		width: 80%;
		margin-left: 10%;
		padding: 1em 1em 1em 40px;
	}
}
@media all and (max-width: 400px){ 
	section#Thanx aside#DoYouKnow{ 
		width: 90%;
		padding-left: 40px;
	}
}


section#Thanx footer {
	text-align: right;
	margin: 1em 0 1em 49%;
	font-style: italic;
	color: darkgray;
	font-size: 1.4em;
	font-weight: bold;
}

article#Compile4Emergeo{
	font-size: 1.2em;
	text-align: start;
	margin: 3em;
	font-style: italic;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	min-height: 3em;
}

article#Compile4Emergeo img {
	height: 3em;
	float: left;
	padding-right: 1em;
}
 
article#mailSent { font-size: 1.2em; text-align: left; }
article#mailSent p { border: 1px dotted gray; padding: 1em; text-align: justify; font-family: monospace, monospace; }


section#AuthError {
	width: 90%; 
	margin-left: 5%; 
	font-size: 1.2em; 
	border-radius: 0.5em; 
	text-align: center;
	font-weight: bold;
	padding: 1em;
	background: #fbdede; 
	border: 1px solid red;	
}

@media all and (min-width: 801px){ 
	section#AuthNav{ width: 20%; margin: 0px; float: left;}
	section#AuthContent{ width: 78%; margin: 0px 0.5%; float: left;}
}

@media all and (max-width: 800px){ 
	section#AuthNav{ width: 90%; margin: 0 4%;}
	section#AuthContent{ width: 90%; margin: 0 4%; }
}

section#AuthNav nav.AuthNavbar {
	border: 1px dashed gray;
	margin-bottom: 1em;
}

section#AuthNav nav.AuthNavbar h2 {
	border-bottom: 1px dashed gray;
	padding: 0.5em 0;
	margin: 0;
}
section#AuthNav nav.AuthNavbar ul{ 
	margin-top: 1em;
	padding: 0;
}

section#AuthNav nav.AuthNavbar ul li { 
	list-style: none;
	margin-bottom: 0.8em;
}

section#AuthContent iframe {width: 80%; height: 400px;}

section#DataUpdated{ 
	width: 90%; 
	margin-left: 5%; 
	font-size: 1.8em; 
	border-radius: 0.5em; 
	text-align: center;
	font-weight: bold;
	padding: 1.5em;
}

section.Status0{ background: #fbdede; border: 1px solid red; }
section.Status1{ background: #cbffcb; border: 1px solid green; }

section.WebserviceDocs { font-size: 1.2em; line-height: 1.5em; text-align: left; margin-left: 2em 1%;  clear: both;}
section.WebserviceDocs h3 { font-size: 1.7em; line-height: 1.5em; text-align: center; padding: 0; margin-top: 0; border-bottom: 1px solid green; }
section.WebserviceDocs dl dt { font-weight: bold; }

span.little_note { font-size: 0.8em; font-style: italic; text-align: center; display: inline-block; width: 100%;}

table.ListAll{
	border: 1px solid black;
	border-collapse: collapse; 
	width: 98%;
	margin: 1em 0.9%;
}

table.ListAll tr th { border: 1px solid black; font-size: 1.1em; }
table.ListAll tr td { border: 1px solid black; padding: 0.3em; }
table.ListAll tr:nth-child(odd) { background: #004eff38; }
table.ListAll tr:nth-child(even) { background: #00800026; }
table.ListAll tr:first-child { background: #fffcae; }
table.ListAll tr td button { border: 1px solid black; padding: 0.3em; border-radius: 0.2em; margin: 0.5em 0; }

section#ViewQuest { font-style: italic; line-height: 1.90em; text-align: justify; }
section#ViewQuest h2 { border-bottom: 1px dotted navy; }
section#ViewQuest aside {border: 1px solid #ff9900; background: #cdc83245; text-align: center; width: 90%; margin: 1em 5%; }
section#ViewQuest aside h1 {border-bottom: 1px dashed #ff9900; text-align: center; font-size: 1.3em; font-variant: small-caps;}

section.ListUserAnswers { text-align: left; } 
section.ListUserAnswers dl { margin: 0.5em; }
section.ListUserAnswers dl dt { }
section.ListUserAnswers dl dd, 
span.UserAnswers{ border: 1px dashed gray; padding: 0 0.2em; font-weight: bold; } 

article.rules { width: 98%; padding: 0.5em; background: #eeffc5; border: 1px solid green; }
article.rules pre {font-size: 0.8em;} 
div.centerize { text-align: center; } 
span.underline { text-decoration: underline; }

button#enable_dev_menu { width: 70%; margin: 2em 15%; font-size: 1.2em; background: #fddab5; padding: 0.5em; font-weight: bold; }
section.ActiveService{ border: 1px dashed green; background: #ddffdd; padding: 1em; text-align: left; margin-bottom: 1em;}
section.ActiveService dl {  margin: 0.5em; }
section.ActiveService dl dt {  font-weight: bold; font-size: 1.2em; }
section.ActiveService dl dd {  font-style: italic; font-size: 1.2em; }
span.evidence{  font-weight: bold; color: red; }

section.DisabledService{ border: 1px dashed black; background: #d6d6d6; padding: 1em; text-align: left; margin-bottom: 1em;}
section.DisabledService dl {  margin: 0.5em; }
section.DisabledService dl dt {  font-weight: bold; font-size: 1.2em; }
section.DisabledService dl dd {  font-style: italic; font-size: 1.2em; }
section.DisabledService dl dd span.evidence{  }

span.selectedQuake {
	color: red; 
	font-size: 14px; 
	font-weight: bold;
}
article.Hidden{ background: gray; border: 1px solid gray; }
button.NoBreakline {white-space: nowrap;} 

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

table.infoSubscribers { margin-top: 1em; width: auto; }
table.infoSubscribers thead tr th { border: 1px solid black; font-size: 1.3em;}
table.infoSubscribers tr td { border: 1px solid black; font-size: 1.2em;}


td.Subscribers0{ background: #ffffff; }
td.Subscribers1{ background: #f7ff45; }
td.Subscribers2{ background: #49df45; }
td.Subscribers3{ background: #45e9eb; }
td.Subscribers4{ background: #7c85ca; }

section#Address { font-size: 1.4em; }
section#Address ol li { text-align: left; }
section#Address figure img{ width: 99%; }