/*
Description: HTML PHP Responsive site for Ilmastointi Kotikumpu
Author: Kimmo Kovalainen, iggo
*/

/* RESET ----------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}

body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; clear: both; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
a img { border: none; }
a { text-decoration: none; }
a:focus { outline: none; }


/* IE10 WIN8 WINPHONE8 MEDIA QUERY FIX */
@-webkit-viewport	{ width: device-width; }
@-moz-viewport		{ width: device-width; }
@-ms-viewport		{ width: device-width; }
@-o-viewport			{ width: device-width; }
@viewport				{ width: device-width; }


/* GENERAL -------------------------------------------------------------- */
html { min-height: 100%; position: relative; overflow-y: scroll; }
body { background: #E0E8EB; font: 14px "Open Sans", Arial, Helvetica, sans-serif; margin: 0 0 100px; }

img { max-width: 100%; height: auto !important; }

header,
footer,
section { width: 100%; clear: both; position: relative; overflow-x: hidden; }

.clear { clear: both; }


/* TYPOGRAPHY ----------------------------------------------------------- */
hr { background-color: #CCC; border: 0 none; height: 1px; margin: 32px 0; }
blockquote { font-style: italic; margin: 20px 20px 2px 20px; padding: 20px; }

h1 { color: #333; font: bold 24px/36px "Open Sans", Arial, Helvetica, sans-serif; margin: 0 0 18px 0; text-transform: uppercase; }
h1 a { color: #333; }
h2 { color: #333; font: bold 16px/26px "Open Sans", Arial, Helvetica, sans-serif; margin: 0px 0 8px 0; }
h2 a { color: #333; }
h3 { color: #2E3191; font: bold 15px/25px "Open Sans", Arial, Helvetica, sans-serif; margin: 20px 0 5px 0; text-transform: uppercase; }
h3 a { color: #333; }

p { margin: 0 0 18px; line-height: 22px; color: #333; }
a { color: #2A6496; }
a:hover { color: #2A6496; text-decoration: underline; }
a:focus { color: #2A6496; }

.btn { border: none; border-radius: 6px; text-transform: uppercase; font-weight: bold; font-size: 16px; transition: all 0.08s ease-in-out 0s;   }
.btn:hover { opacity: 0.9; }
.btn-primary,
.btn-primary:hover { background: #2E3191; }


/* HEADER --------------------------------------------------------------- */
header { text-align: center; padding: 20px 0; }
.navbar-header { width: 100%; }
.navbar-brand { float: none; display: block; }


/* NAV ------------------------------------------------------------------ */
nav { float: right; margin-top: 46px; }
.nav li { float: left; }
.nav li a { color: #333; font: bold 13px/22px "Open Sans", Arial, Helvetica, sans-serif; display: block; padding: 10px 15px 10px; border-radius: 0px; margin: 0px; transition: all 0.1s ease-in-out 0s; text-transform: uppercase; border-radius: 8px; }
.nav li a:hover { text-decoration: none; }
.nav li a:focus { background: none; }

.nav li.current-menu-item a,
.nav li.current-page-ancestor a { color: #FFF; background: rgba(255,255,255,0.1); }
.nav li ul { display: none; }



/* CONTENT -------------------------------------------------------------- */
section { padding: 20px 0 5px; }

section ul,
section ol { margin: 0 0 20px 0; }
section ul li { background: url(images/checkmark.png) no-repeat 0px 3px;  padding-left: 0px; margin: 0 0 8px; line-height: 18px; }
section ol li { list-style: decimal; color: #333; margin: 0 0 8px 25px; line-height: 18px; }

section .col-sm-4 { text-align: center; }

form label { clear: both; float: left; }
form input { clear: both; float: left; margin: 0 0 10px 0; width: 100%; border: 1px solid rgba(0,0,0,0.25); padding: 5px; border-radius: 5px; }
form textarea { clear: both; float: left; border: 1px solid rgba(0,0,0,0.2); padding: 5px; width: 100%; margin: 0 0 20px 0; border-radius: 5px; }
form .btn { border-radius: 5px; background: rgba(0,0,0,0.2); }


.readmore { padding: 12px 16px; background: rgba(0,0,0,0.5); color: #FFF; text-transform: uppercase; font-weight: bold; border-radius: 4px; display: inline-block; }
.readmore:hover,
.readmore:focus { background: rgba(0,0,0,0.4); color: #FFF; text-decoration: none; }


/* FOOTER -------------------------------------------------------------- */
footer { padding: 20px 0 20px; background: rgba(0,0,0,0.1); position: absolute; bottom: 0; left: 0; text-align: center; }

p.copyright { margin: 0; color: #FFF; text-align: center; font: normal 12px "Open Sans", Arial, Helvetica, sans-serif; }
p.copyright a { color: #FFF; font-weight: bold; }
p.copyright a:hover { text-decoration: underline; color: #FFF; }

p.iggo { margin: 0; color: #FFF; text-align: center; font: normal 12px "Open Sans", Arial, Helvetica, sans-serif; }
p.iggo a { color: #FFF; font-weight: bold; }
p.iggo a:hover { text-decoration: underline; color: #FFF; }



@media (max-width: 1200px) {
	body { margin: 0 !important; }
	footer { position: relative; }
}

@media (max-width: 992px) {
	header { position: relative; top: auto; left: auto; }
	body { padding: 0 !important; }
}

@media (max-width: 992px) and (min-width:768px) {
	nav { text-align: center; }
	.navbar-header { float: none !important; }
	#mainmenu-collapse { text-align: center; width: 100%; }
	.nav { margin: 0 auto !important; float: none !important; display: inline-block; }
}

@media (max-width: 768px) {
	#mainmenu-collapse { width: 100%; }
	.nav { margin: 0; }
	.nav li { clear: both; float: left; width: 100%; text-align: center; }

	header { text-align: center; }
	.navbar-brand { float: none; display: block; }
	nav { float: none; margin-top: 0; }
	.nav li a { border-radius: 0; }
}