/* *****************************************************
 Tämä css-tiedosto sisältää tyylimäärittelyt manuaalisten
 havaintojen syöttöön tarkoitetulla webbisivulla:
 http://astra.fmi.fi/hasyweb

 Näitä tyylejä käytetään useilla sivuston alisivuilla.
 Joillakin alisivuilla on lisäksi omat css-tiedostonsa.

                 Lasse Hakkinen 2010-2011
 ***************************************************** */

:root{
	font-size: 10px;
}

/* Zero down margin and padding on all elements */
* {
	margin  : 0;
	padding : 0;
	font : normal 12pt Tahoma, "Lucida Grande", Arial, sans-serif;
}

img { border : 0 }

body { background-color : #DBEDF9; }

sub {
	font-size: smaller;
}

#body_content {
	position : relative;
	margin	 : 10px auto 40px auto;
	padding  : 10px;
	background-color : white;

	border	 : 2px solid gray;
	border-radius		  : 10px;
	-moz-border-radius    : 10px;
	-webkit-border-radius : 10px;

	box-shadow         : 10px 10px 50px #888;
	-moz-box-shadow    : 10px 10px 50px #888;
	-webkit-box-shadow : 10px 10px 50px #888;
}


/* Banner contains the FMI logo and an image of blue stripes in the background */

#banner {
/*
	background	: url(../images/background_banner.jpg) no-repeat right top;
 */
	height		: 45px;
	padding		: 10px;
}


/* Footer contains language flags and an image of blue stripes in the background */

#footer {
    min-height: 100px;
    display: flex;
    gap: 1.6rem;
    justify-content: center;
    align-items: flex-start;
}

/* Mouse is over a language flag */

#footer a:hover img { border : 1px solid black; }

form { text-align : center; }

.infoblock {
	font-size : 14pt;
	color      : #333;
	text-align : center;
	margin		: 0px auto 0px auto;
/*
	padding     : 7px 20px 10px 20px;
 */
	padding     : 7px 8px 10px 8px;
	line-height : 30px;
}

.infoblock.pt12 { font-size	: 12pt;}

.infoblock p.ids { font-size : 10pt; margin-top : 5px;}

.time_infoblock {
	font-size	: 14pt;
	color		: #333;
	text-align	: center;
	margin     : 10px auto 0px auto;
	padding    : 7px 20px 2px 20px;
	line-height : 30px;
}

.rounded_corners {
  	border		: 1px solid #bbb;
	border-radius		  : 10px;
	-moz-border-radius    : 10px;
	-webkit-border-radius : 10px;
}

.bg_gray { background-color : #F5F5F5; }


.textbox {
	margin  : 10px auto 20px auto;
	padding : 8px;
}

.errorbox {
	font-size		 : 10pt;
	margin			 : 10px auto 0px auto;
	padding-bottom   : 10px;
	padding-top      : 10px;
	background-color : #FFF3ED;
}

.errorbox h3 {
	font-size : 12pt;
	text-align : center;
	margin : 0px auto 10px auto;
	color : red;
}



#obs_old_form {
	margin	   : 15px auto 15px auto;
	text-align : center;
}

#change_time_button {
	width  : auto;
	margin : 0px 10px 0px 10px;
}



/* Main title of the page. E.g. 'Havaintoilmoitus' */
h1 {
	font-size  : 18pt;
	text-align : center;
	color      : #555;
	margin     : 0px auto 0px auto;
}

/* Subtitle of the page. E.g. 'Sisäänkirjautuminen' */
h2 {
	font-size  : 14pt;
	text-align : center;
	color      : #555;
	margin     : 10px auto 20px auto;
}

button {
	font-size  : 10pt;
	text-align : center;
	color      : #000000;
	padding    : 5px;
	margin-top : 15px;
}

 button:hover {
 	cursor : pointer;
 	color : #CCAB6E;
}

input.text  {
	height		  : 18px;
	vertical-align : middle;
	padding       : 2px;
	border-top    : 2px solid #999;
	border-left   : 2px solid #999;
	border-bottom : 1px solid #ccc;
	border-right  : 1px solid #ccc;
}

input.button {
	margin-top : 15px;
	font-size  : 10pt;
}

input:focus { background: #ffc; }
textarea:focus { background: #ffc; }


table { margin : 0px auto 0px auto; }
table td {
	padding    : 6px;
	text-align : left;
}


.error { color : red; }
.left  { text-align : left; }

#contact_button {
	position : absolute;
	top : 5px;
	right : 10px;
	font-size : 9pt;
	width : auto;
}


#contact_info {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	display : none;
	position : absolute;
	top : 70px;
	left : 0;
	width : 360px;	/* 550px - 20px */
	background-color : #D9EFFF;
	z-index : 1000;
	padding : 5px 15px 5px 15px;
	margin : 0px 20px 0px 20px;
	box-shadow         : 5px 5px 20px #888;
	-moz-box-shadow    : 5px 5px 20px #888;
	-webkit-box-shadow : 5px 5px 20px #888;
}

#contact_info h4 {
	color : black;
	font-size : 12pt;
	margin-top : 10px;
	margin-bottom : 10px;
}

#contact_info p {
	color : black;
	font-size : 10.5pt;
	margin-bottom : 10px;
}

#contact_info a {
	font-size : 10.5pt;
	text-decoration : none;
	color : #6F3400;
}


#contact_info button { margin : 15px auto 15px auto; }



img.logo{
	width: 100%;
	max-width: 20rem;
}


#footer img.flag {
    min-height: 1.6rem;
    margin: 0;
    padding: 0;
    border: 1px solid;
    border-radius: 2px;
	width: auto;
	height: auto;
}