/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

@import url('https://fonts.googleapis.com/css?family=Share+Tech');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Roboto');


html, body {
    margin: 0;
    padding: 0;
    border: 0;
	height: 100%
}

html, button, input, select, textarea, 
	.pure-g [class *= "pure-u"] {
	font-family: Lato, sans-serif;
	font-size: 1.1em;
}

h1, h2, h3 {
    font-family: Roboto, sans-serif;
    }

h2 {
	margin-bottom: 0;
    }

#container {
   min-height:100%;
   position:relative;	
    }

.page-header, .page-block {
	background-color: rgb(242, 242, 242);
	border-radius: 12px;
	}
.page-block {
	margin: 2em 2em 0;
	padding: 0.5em; 
	text-align: center;
	}

#content {
	padding: 0.5em 3.5rem 230px;
}


#header {
    background-color: #2274a5;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
    border-bottom: 5px #21295c solid;
    }
    
#header h1 {
    padding: 0;
    margin: 0 0 0 2em ;
    
    color: #ffffff;
    font-family: 'Share Tech', sans-serif;
    text-indent: -9999px;
    background: url(/img/ergonomiapalvelu-logo.png) no-repeat;
    min-height: 100px;
    }


@media screen and (max-width: 680px) {
	.pure-g [class *= "pure-u"] {
		font-family: Lato, sans-serif;
		font-size: 80%;
	}

	#header h1 {
		padding: 0;
		margin: 0 0 0 5px;
		
		color: #ffffff;
		font-family: 'Share Tech', sans-serif;
		text-indent: -9999px;
		background: url(/img/ergonomiapalvelu-logo.png) no-repeat;
		background-size: contain;
		min-height: 100px;
		}

	div#content {
		padding: 0.5em 5px 300px;
	}
}


.pure-g > div[class*="pure-u-"] {
  padding: 0 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#footer {
	position: absolute;
	bottom: 0; 
	left: 0;
	color: #ffffff;
	border-top: 5px #2274a5 solid;
	background-color: #21295c;
	width: 100%;
	
	}
#footer .container {
	font-size: 1.2em;
	padding: 0.5em 4em 1em;
	text-align: center;
	}
	
#footer .container a {
		color: #ffffff;
	}

#footer .container a:hover {
		color: #ffffff;
		background-color: #2274a5;
	}


@media screen and (max-width: 680px) {
	div#footer .container {
		padding: 0.5em 5px;
		font-size: 1em;
	}
}

.large {
	max-width: 35em;
	height: 7em;
	}
	
.message {
	background-color: rgb(242, 242, 242);
		-webkit-box-shadow:	inset 0 10px 15px rgba(0, 0, 0, 0.1);
		   -moz-box-shadow:	inset 0 10px 15px rgba(0, 0, 0, 0.1);
		        box-shadow:	inset 0 10px 15px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	padding: 0.1em 0.5em;
	}

.required {
	font-weight: bold;
	color: red;
	}
.error {
	color: red;
	}
div.error {
	background-color: #ffaaaa;
	}


div.l-box {
        padding: 1em;
}