﻿/*
HTML 5 Template Name: TechBusiness
File: Layout CSS
Author: OS Templates
Author URI: http://www.os-templates.com/
Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
*/

/* Layout */

.clear:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; line-height:0;
}

.clear {
    display:block;
    clear:both;
}

html[xmlns] .clear{
    display:block;
}

* html .clear{
    height:1%;
}

.fl_left{float:left;}
.fl_right{float:right;}

.wrapper {
    display:block;
    width:100%;
    text-align:left;
    clear:both;
}

.top {
    color:#C7C7C7;
    background: #ffffff;
    border-top:8px solid #76C38F;
    border-bottom:1px solid #D8D8D8;
    position: fixed;
    z-index: 10;
}

.content {
    color:#666666;
    background-color:#FFFFFF;
    float:left;
    padding-top: 118px;
}

#header, #container, #footer, #copyright {
    display:block;
    max-width:960px;
    margin:0 auto;
}

.content {
    height: 100%;
}

#header {
    padding:22px 0 30px;
}

#header #hgroup {
    float:left;
}

#container{
    padding: 20px 0;
    line-height: 1.5em;
    min-height: 400px;
}

#latest {
    padding-bottom: 20px;
    display:block;
    border-bottom: 1px solid #D6D6D6;
}

#latest ul {
    display:block; 
    float:left; 
    margin:0; 
    padding:0; 
    list-style:none;
}

#latest ul li{
    margin-bottom: 10px;
}

#latest ul li img{
    display:block; 
    padding:4px; 
    border:1px solid #D6D6D6;
}

#news {
    display:block; 
    float:right; 
    width:304px; 
}

#info { 
    margin: 20px 0 20px 0;
    padding:0 0 15px 0;
    display:block;
    border-bottom: 1px solid #D6D6D6;
}

#info .fl_left {
    width: 615px;
}

#rotate {
    width: 630px;
    height: 240px;
}


/* Content */

body {
    margin:0;
    padding:0;
    font-size:13px;
    font-family:Arial,Helvetica,sans-serif;
    background-color:#151717;
}

img {
    margin:0;
    padding:0;
    border:none;
    line-height:normal;
    vertical-align:middle;
    max-width: 100%;
}

#rotate img {
    width: 620px;
    height: 230px;
}

#map iframe {
    border: 0;
    width: 304px;
    height: 190px;
}

.logo {
    margin-right: 30px;
    margin-bottom: 30px;
    display: inline-block;
    width: 210px;
}

.logo img {
    max-width: 210px;
}

h1, h2, h3 {
    margin:0;
    padding:0;
    font-weight:normal;
    line-height:normal;
    font-family:Georgia,"Times New Roman",Times,serif;
}

#container h1, #container h2, #container h3{
    margin-bottom:10px;
    font-weight:bold;
}

#header h1{
    font-size:36px;
}

#header h2{
    font-size:12px; 
    text-transform:uppercase;
}

#container h1 {
    font-size: 20px;
}

#container h2 {
    font-size: 17px;
}

#container h3 {
    font-size: 14px;
}

#feedback h3 {
	margin-top: 25px;
}

#copyright {
    padding:20px 0;
}

#copyright p {
    margin:0;
    padding: 0;
}

#page-nav ul {
    margin:0;
    padding:0; 
    list-style:none;
}

#page-nav{
    display:block; 
    float:right; 
    margin:20px 0 0 0; 
    padding:0; 
}

#page-nav ul li{
    display:inline-block;
}

form {
    margin:0; 
    padding:0; 
    border:none;
}

form #submit, form #reset {
    margin:0;
    padding: 3px 10px;
    color:#333;
    background-color:#EEEEEE;
    cursor:pointer;
}

form #reset {
    margin-left: 10px;
}

input, textarea, select{
    resize:none; 
    outline:none;
}

input[type="text"] {
    width: 200px;
}

#feedback input[type="text"] {
    width: 300px;
}

select {
    width: 200px;
}

.borderless-table {
    border: 0;
    border-collapse:collapse;
    table-layout:auto;
    width: auto;
}

.borderless-table td {
    border: 0;
    padding: 5px;
}


/* Links */

a {
    outline:none;
    text-decoration:none;
}

.content a {
    color:#76C38F;
}

#page-nav a {
    color: #999;
}

#page-nav a:hover, .content a:hover {
    color:#56AED4;
}

.footer, .footer a{
    color:#989898;
    background-color:#151717;
}

#header h1 a{
    color:#505050;
}

#header h2 a {
    color: #C7C7C7;
    text-transform:uppercase;
}


/* Tables */

table {
	width:auto;
	border-collapse:collapse;
	table-layout:auto;
	vertical-align:top;
	margin-bottom:15px;
	border:1px solid #CCCCCC;
}

table thead th {
	color:#FFFFFF;
	background-color:#666666;
	border:1px solid #CCCCCC;
	border-collapse:collapse;
	text-align:center;
	table-layout:auto;
	vertical-align:middle;
}

table tbody td {
	vertical-align:top;
	text-align:center;
	border-collapse:collapse;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
}

#akkreditointi tbody td {
	vertical-align:top;
	text-align:Left;
	border-collapse:collapse;
}

#kilpailuohjeet  {
	border: none;
}

#kilpailuohjeet td {
	text-align:left;
	border: none;
}

table thead th, table tbody td {
	padding:5px;
	border-collapse:collapse;
}

table tbody tr.light {
	color:#666666;
	background-color:#F7F7F7;
}

table tbody tr.dark {
	color:#666666;
	background-color:#E8E8E8;
}


/* Responsive settings */

@media handheld, only screen and (max-width: 970px) {
    #header, #container, #footer, #copyright{display:block; width:auto; margin:0 10px;}
    #rotate { width: 490px; height: 188px !important;}
    #rotate img { width: 480px; height: 178px;}
    #news, #info .fl_right { float: left; margin-left: 25px;}
    #info .fl_left { width: 490px; }
    #header h1 {font-size: 32px;}
    #page-nav { margin-top: 17px; }
    .content { padding-top: 111px;}
}

@media handheld, only screen and (max-width: 855px) {
    #latest ul {float: none; clear: both;}
    #news {float: none; width: auto; clear: both; margin-left: 0; margin-top: 20px; }    
    #rotate { width: 630px; height: 240px !important; }
    #rotate img { width: 620px; height: 230px;}
    #latest { padding-bottom: 10px; }
    #info .fl_left { width: auto;}
    #info .fl_right { float: none; margin-left: 0px; margin-top: 10px;}
    #info { padding-bottom: 2px;}
    #header h1 {font-size: 30px;}
    .content { padding-top: 109px;}
    #page-nav { margin-top: 16px; }
}

@media handheld, only screen and (max-width: 670px) {
    #rotate { width: 490px; height: 190px !important;}
    #rotate img { width: 480px; height: 178px;}   
    #header h1 {font-size: 28px;}
    #header { padding-top: 20px; padding-bottom: 20px;}
    .content { padding-top: 94px;}
    #page-nav { margin-top: 14px; }
}

@media handheld, only screen and (max-width: 530px) { 
    #rotate { width: 400px; height: 155px !important;}
    #rotate img { width: 390px; height: 145px;}    
    #container {padding-top: 10px;}
    #page-nav { display: none;}
    #header h1 {font-size: 24px;}
    #header { padding-top: 10px; padding-bottom: 10px;}
    #news {margin-top: 15px;}
    #maasto { display: none;}
    .content { padding-top: 68px;}
    #map iframe { height: 125px;}    
    .logo { width: 200px; margin-right: 25px; margin-bottom: 25px; }
    .logo img { max-width: 200px;}
}

@media handheld, only screen and (max-width: 440px) {
    #rotate { display: none !important; width: 0; height: 0 !important; }
    #news {margin-top: 10px;}
    #header h1 {font-size: 22px;}
    #header h2 {font-size: 11px;}
    .content { padding-top: 65px;}
}

@media handheld, only screen and (max-width: 350px) {
    #header h1 {font-size: 18px;}
    #header h2 {font-size: 10px;}
    .content { padding-top: 60px;}
    .logo { width: 180px; margin-right: 20px; margin-bottom: 20px; }
    .logo img { max-width: 180px; }
     #map iframe { width:250px; height: 100px;}
}

@media handheld, only screen and (max-width: 300px) {
    .logo { width: 150px; margin-right: 10px; margin-bottom: 10px;}
    .logo img { max-width: 150px; }
    .content { padding-top: 50px;}
    #header h2 {display: none;}
    #map { display: none;}
}


/* Print settings */

@media print {
    #top { display: none; }
    .content { padding-top: 0px;}
    #rotate { display: none !important; } 
    #news {float: none; clear: both; margin-left: 0; margin-top: 20px; width: auto;}
    #map { float: none;}
}