/*-----------------------------------------------
# [Master Stylesheet] 
#  
# Project:				Mainostoimisto Kirnauskis 2.0
# Version:				2.2
# Last change:			22.09.2010
# Last assigned to:		Joni 
-----------------------------------------------*/

/*-----------------------------------------------
General
-----------------------------------------------*/

body
{
background: #000 url(../i/bg-etusivu.jpg) center 5px no-repeat;
color: #808080; 
font: 75% 'Trebuchet ms', 'Helvetica neue', Helvetica, Arial, sans-serif;
line-height: 2em;
}

body#blogi,
body#tyot {
background: #000 url(../i/bg-blogi.jpg) center 5px no-repeat;
}

body.tyonayte {
background-image: none;
}

html>body {
font-size:12px;
}

hr {
border: 0;
}

div.hr {
clear: both;
background: #222;
height: 5px;
}

div.hr-lines {
clear: both;
background: transparent url(../i/hr-lines.png) 0 0 repeat-x;
height: 10px;
margin: 1.5em 0 3em;
}

div.hr-video {
border: solid #333;
border-width: 1px 0;
clear: both;
background: #fff url(../i/hr-video.jpg) center 0 no-repeat;
height: 82px;
margin: 1.5em 0 3em;
text-align: center;
}

div.hr-video p {
font-family: futura-pt, Helvetica, arial, sans-serif;
font-size: 2.67em;
margin-top: 30px;
}

div.hr hr, 
div.hr_dotted hr {
display: none;
}

div.clear {
clear: both;
}

img {
padding: 0 10px 10px 0;
}

.last {
margin-right: 0 !important;
}


/*-----------------------------------------------
Typography - General
-----------------------------------------------*/

h1, h2, h3, h4, h5,
h1 a, h2 a, h3 a, h4 a, h5 a 
{
color: #fff;
font-family: 75% futura-pt, 'Trebuchet ms', 'Helvetica neue', Helvetica, Arial, sans-serif;
}

/* Heading sizes in typographic scale */

h1 {
letter-spacing: -1px;
font-size: 2em; /* 24px */
margin: 40px 0 24px 40px; /* margin-top + margin-bottom = line-height x 2 */
}

h1 span {
color: #1495e5;
}

#blogi h1 span {
font-size: 14px;
clear: both;
}

h2 {
font-size: 1.43em; /* 17px */
margin: 24px 0 15px 40px;
}

h3 {
font-size:1.25em; /* 15px */
margin: 24px 0 8px;
}

h4 {
font-size:1.08em; /* 13px */
font-weight: bold;
margin: 24px 0 8px;
}

h5 {
font-size:1.167em; /* 14px */
margin: 2.172em 0 0.4em;
}

p {
font-size: 1em; /* 12px */
margin: 0 0 1em 0;
}

blockquote p {
font: 1.167em Times, serif;
font-style: italic;
}

address {
font-style: normal;
}

strong {
font-weight: bold;
}

span.bullet {
color: #ccc;
padding: 0 5px;
}

p.ingress {
color: #333;
font: 1.167em Georgia,Times, serif;
font-style: italic;
}

ul, ol {
margin: 0 0 1.5em 30px;
line-height: 1.5em;
}


/*-----------------------------------------------
Links - General
-----------------------------------------------*/

a {
color: #1495e5; 
cursor: pointer;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/*-----------------------------------------------
Layout
 -----------------------------------------------*/

div.container {
position: relative;
margin: 0 auto;
overflow: auto;
width: 960px;
clear: both;
}

div#content {
float: left;	
background: #000;
margin-top: 200px;
width: 960px;
}

.tyonayte div#content {
margin-top: 0;
}

div#footer {
background: #0f0f0f;
padding-bottom: 50px;
width: 100%;
}

div#footer div.container {
border-top: 5px solid #222;
padding-top: 40px;
}

/*-----------------------------------------------
Logo
 -----------------------------------------------*/
 
a.mainostoimisto-kirnauskis-helsinki {
float: left;
display: block;
background: url(../i/mainostoimisto-kirnauskis-helsinki.png) no-repeat;
height: 24px;
margin: 80px 0 0 40px;
text-indent: -999em;
width: 230px;
}

* html a.mainostoimisto-kirnauskis-helsinki {
margin-left: 20px;
}

/*-----------------------------------------------
Navigation
 -----------------------------------------------*/

ul#navigation {
float: right;
margin: 45px 40px 0 0;
right: 0;
width: 360px;
}

* html ul#navigation {
margin-right: 20px;
}

ul#navigation li {
float: left;
margin-right: 30px;
}

ul#navigation li a {
background: transparent url(../i/bg-navigation.png) no-repeat;
display: block;
height: 100px;
width: 100px;
text-indent: -9999px;
}

ul#navigation li#navigation-tyot a { background-position: 0 0; }
ul#navigation li#navigation-tyot a:hover,
ul#navigation li#navigation-tyot.selected { background-position: 0 -110px; }

ul#navigation li#navigation-ihmiset a { background-position: -130px 0; }
ul#navigation li#navigation-ihmiset a:hover,
ul#navigation li#navigation-ihmiset.selected { background-position: -130px -110px; }

ul#navigation li#navigation-blogi a { background-position: -260px 0; }
ul#navigation li#navigation-blogi a:hover,
ul#navigation li#navigation-blogi a.selected  { background-position: -260px -110px; }



/*-----------------------------------------------
Additional Navigation
 -----------------------------------------------*/

dl.additional-navigation {
float: right;
margin-right: 30px;
width: 230px;
}

dl.additional-navigation dt {
color: #fff;
}

dl#order.additional-navigation {
width: 140px;
}



/*-----------------------------------------------
Frontpage
 -----------------------------------------------*/

div.column {
float: left;
display: inline;
margin: 0 0 30px 40px;
width: 450px;
}

#frontpage a.additional-info {
color: #fff;
float: left;
background: transparent url(../i/icon-plus.png) 0 17px no-repeat;
font-size: 1.25em;
font-style: italic;
margin-left: 40px;
padding: 20px 0 20px 40px;
width: 90px;
}

#frontpage dl.references {
float: left;
margin: 21px 40px 1.5em 0px;
width: 620px;
}

#frontpage dl.references dt,
#frontpage dl.references dd {
float: left;
}

#frontpage dl.references dt {
clear: left;
padding-right: 5px;
}

#frontpage dl.references dd {
clear: right;
background: transparent url(../i/icon-bullet.png) 0 10px no-repeat;
padding-left: 12px;
}

* + html #frontpage dl.references dd { 
display: none;
}

#frontpage dl.references dd a {
color: #808080;
}

#frontpage dl.references dd a span {
color: #808080;
font-size: 0.7em;
}

a.more-link {
float: left;
margin-top: 20px;
}

p#read-more {
color: #1495E5;
}

a#lue-uutiskirje {
float: right;
background: transparent url(../i/btn-lue-uutiskirje.png) 0 0 no-repeat;
display: block;
height: 100px;
margin-right: 40px;
text-indent: -9999px;
width: 100px;
}

#slider {
width:880px;
}

#slider img{
border:none;
}

#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}

#slider li { 
width:880px;
overflow:hidden; 
}

span#controls {
position: absolute;
top: 170px;
left: 690px;
}

span#controls ol.controls {
margin: 0;
}

span#controls ol.controls li {
display: inline;
}

span#controls ol.controls li a {
padding: 0 6px;
}




/*-----------------------------------------------
Ihmiset
 -----------------------------------------------*/

p#additional-description {
float: right;
color: #fff;
margin-right: 40px;
width: 360px;
}

dl.people {
float: left;
margin-bottom: 30px;
}

dl.people dt {
float: left;
clear: both;
border-top: 5px solid #222;
color: #fff;
font-size: 1.67em;
padding: 30px 0 20px 40px;
width: 920px;
}

dl.people dd {
float: left;
color: #fff;
line-height: 1.5em;
padding: 0 0 1.5em 40px;
width: 180px;
}

dl.people dd strong,
dl.people dd em {
display: block;
color: #808080;
}

dl.people dd strong {
color: #fff;
font-weight: normal;
}

dl.people dd em {
font-style: italic;
margin-bottom: 6px;
}

/*-----------------------------------------------
Työt
 -----------------------------------------------*/

div.reference {
border-top: 5px solid #222;
padding: 3em 40px;
}

.tyonayte div.reference {
border: 0;
}

div.reference h2 {
font-size: 1.67em;
display: block;
margin: 0 0 0.5em;
}

div.reference h3,
a.project-link,
a.some {
display: inline-block;
}

div.reference h3 {
margin-top: 0;
}

div.column-360 {
float: left;
margin: 0 30px 0 0;
width: 360px;
}

body#mainostoimisto-kirnauskis div.column-360, body#briefly-in-english div.column-360 {
margin: 0 0 0 75px;
}

div.reference div.column-360, div.reference div.column-490 {
margin-bottom: 30px;
}

div.reference {
clear: both;
}

div.reference h4 {
font: 1em 'Trebuchet ms', 'Helvetica neue', Helvetica, Arial, sans-serif;
margin-top: 10px;
}

a.takaisin {
float: right;
background: transparent url(../i/btn-takaisin.png) 0 0 no-repeat;
display: block;
height: 100px;
margin: 40px 40px 20px 0;
text-indent: -9999px;
width: 100px;
}

dl#navigation-share {
float: left;
padding-bottom: 10px;
width: 100%;
}

dl#navigation-share dt,
dl#navigation-share dd {
float: left;
}

dl#navigation-share dt {
margin: 20px 0 0 40px;
width: 130px;
}

dl#navigation-share dd {
padding-top: 18px;
width: 260px;
}

dl#navigation-share dd#facebook {
margin-top: 3px;
}

dl#navigation-share dd span,
dl#navigation-share dd p {
float: left;
}

dl#navigation-share dd p {
margin: 3px 0 0 5px;
}

dl#navigation-share dd a{
display: block;
padding: 20px 0 20px 40px;
}

dl#navigation-share dd#facebook-share {
background: transparent url(../i/icon-facebook.png) 0 17px no-repeat;
}

dl#navigation-share dd#twitter-share {
background: transparent url(../i/icon-twitter.png) 0 17px no-repeat;
}

dl#navigation-share dd#email-share {
background: transparent url(../i/icon-email.png) 0 17px no-repeat;
}

a.previous-tyot {
color: #1495E5;
position: absolute;
top: 40px;
left: 430px;
background: transparent url(../i/icon-arrows-prev-dark.png) 0 -39px no-repeat;
padding: 1px 0 9px 40px;
}

a.previous-tyot:hover {
color: #fff;
text-decoration: none;
}

p.disabled-previous-tyot {
position: absolute;
color: #333;
top: 40px;
left: 430px;
background: transparent url(../i/icon-arrows-prev-dark.png) 0 0 no-repeat;
padding: 1px 0 9px 40px;
}

a.next-tyot {
color: #1495E5;
position: absolute;
top: 40px;
right: 40px;
background: transparent url(../i/icon-arrows-next-dark.png) 109px -39px no-repeat;
padding: 1px 40px 9px 0;
}

a.next-tyot:hover {
color: #fff;
text-decoration: none;
}

p.disabled-next-tyot {
position: absolute;
color: #333;
top: 40px;
right: 40px;
background: transparent url(../i/icon-arrows-next-dark.png) 110px 0 no-repeat;
padding: 1px 40px 9px 0;
}

.customer {
margin-bottom: 10px;
}

.customer span {
padding: 0 10px;
}

#kuvat {
position: absolute;
top: 168px;
right: 280px;
}



/*-----------------------------------------------
Blogi
 -----------------------------------------------*/

#blog-archive {
clear: both;
border-top: 5px solid #222;
line-height: 2em;
margin-left: 0;
}

#blog-archive li {
float: left;
border-bottom: 5px solid #222;
padding: 1.5em 40px;
}

#blog-archive h2 {
background: transparent url(../i/icon-quotation-mark.png) 0 0 no-repeat;
margin-left: 0;
padding: 3px 0 3px 40px;
}

#blog-archive h2,
#blog-archive p,
#blog-archive li li {
float: left;
width: 490px;
}

#blog-archive p a {
color: #808080;
}

#blog-archive p a:hover {
text-decoration: none;
}

div#content p.blog-post-info,
p.blog-order {
float: right;
color: #fff;
width: 240px;
}

#tyot #content {
position: relative;
overflow: hidden;
}

div#content p.blog-post-info span,
div#blog-author-info p span  {
color: #808080;
font-size: 0.92em;
font-style: italic;
}

p.blog-order {
margin-right: 40px;
}

#blog-archive p.blog-post-info a,
div#sidebar p.blog-post-info a {
display: block;
}

p.read-more {
color: #fff;
}

#blog-archive p.read-more a, 
div#content p.blog-post-info a {
color: #1495E5;
}

#blog-archive p.read-more a:hover, 
div#content p.blog-post-info a:hover {
text-decoration: underline;
}

div#blog-post {
position: relative;
float: left;
background: #fff;
color: #555;
padding: 30px 40px 40px;
width: 580px;
margin-bottom: 40px;
}

div#blog-post h1,
div#blog-post h2,
div#blog-post h3,
div#blog-post h4,
div#blog-post h5 {
color: #000;
margin-left: 0;
}

div#blog-post h1 {
margin-top: 50px;
}

* + html div#blog-post h1 {
margin-top: 80px;
}

* html div#blog-post h1 {
margin-top: 80px;
}

div#blog-post p,
div#blog-post ul,
div#blog-post ol {
width: 490px;
}

div#blog-post ul,
div#blog-post ol {
line-height: 2em;
}

div#blog-post ul li {
list-style-image: url(../i/icon-blue-bullet.png);
}

div#blog-author-info {
float:left;
padding: 20px 0 0;
width: 300px;
}

div#blog-author-info img {
float: left;
margin-left: 30px;
}

div#blog-author-info p {
float: left;
color: #fff;
margin-top: 20px;
width: auto;
}

div#blog-author-info p a {
display: block;
}

dl#blog-latest {
float: left;
margin: 1.5em 0 0 0;
width: 300px;
}

dl#blog-latest dt {
border-bottom: 5px solid #222;
color: #fff;
font-size: 1.3em;
padding: 0 0 5px 30px;
}

dl#blog-latest dd {
border-bottom: 5px solid #222;
line-height: 1.5em;
}

dl#blog-latest dd a {
display: block;
padding: 1em 30px 1em 30px;
}

dl#blog-latest dd a:hover {
background: #222;
text-decoration: none;
}

dl#blog-latest dd a span {
color: #aaa;
display: block;
font-size: 11px;
font-style: italic;
}

ul#blog-latest h3 {
font-size: 1em;
margin: 0;
}

a.previous {
position: absolute;
background: transparent url(../i/icon-arrows-prev.png) 0 -39px no-repeat;
height: 31px;
left: 40px;
width: 31px;
}

span.disabled-previous {
position: absolute;
height: 31px;
background: transparent url(../i/icon-arrows-prev.png) 0 0 no-repeat;
left: 40px;
width: 31px;
}

a.next {
position: absolute;
background: transparent url(../i/icon-arrows-next.png) 0 -39px no-repeat;
color: #fff;
height: 31px;
left: 75px;
width: 31px;
}

span.disabled-next {
position: absolute;
background: transparent url(../i/icon-arrows-next.png) 0 0 no-repeat;
height: 31px;
left: 75px;
width: 31px;
}

p#meta {
color: #aaa;
font-style: italic;
}

span.link-text {
position: absolute;
color: #1495E5;
left: 120px;
top: 32px;
}


/*-----------------------------------------------
Sitemap
 -----------------------------------------------*/

#sivukartta div#content dl {
margin-left: 40px;
}

#sivukartta div#content dl dt {
margin-top: 1.5em;
}

#sivukartta div#content dl dt:first-child {
margin: 0;
}

#sivukartta div#content dl dt,
#sivukartta div#content dl dt a {
color: #fff;
font-size: 1.2em;
}

#sivukartta div#content dl dd {
margin-left: 0px;
}

#kartta iframe {
margin: 0 0 1.5em 40px;
}



/*-----------------------------------------------
Footer
 -----------------------------------------------*/

#footer h2 {
float: left;
font: 1em 'Trebuchet ms', 'Helvetica neue', Helvetica, Arial, sans-serif;
display: inline;
margin: 4px 0 5px 40px;
}

div#footer address {
clear: left;
color: #888;
margin-left: 40px;
width: 490px;
}

div#footer address a {
display: block;
}

ul.who-we-are,
ul.subscribe {
float: right;
line-height: 2em;	
}

ul.who-we-are {
margin: 0 30px 0 0;
width: 230px;
}
div#footer ul.subscribe {
margin: 0 40px 0 0;
width: 100px;
}

/*-----------------------------------------------
Search
-----------------------------------------------*/

#contact-form {
float: left;
}

#contact-form h2 {
margin-left: 0;
}

#search input.text-field {
width: 455px;
}

#search input.button {
margin: 0 0 0 5px;
}

/*-----------------------------------------------
Dynamic form
-----------------------------------------------*/

input, textarea, select {
background: #080808;
border: 2px solid #333;
color: #fff;
font: 1em 'Trebuchet ms', 'Helvetica neue', Helvetica, Arial, sans-serif;
}

input, textarea {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

input.text-field {
color: #888;
margin-bottom: 4px;
padding: 6px;
}

fieldset {
float: left;
display: inline;
background:transparent url(../i/hr_dotted.gif) repeat-x scroll 0 bottom;
margin-right: 30px;
}

fieldset.no_border {
background: none;
}

legend {
color: #1495E5;
line-height: 1.2em; /* 24px / 16px = 1.2em */
font-size: 1.67em;
margin: 0;
padding: 0;
}

/*-- Dynamic form start --*/

.dynamic-form {
float: left;
display: inline;
margin: 0 0 20px 40px;
}

.dynamic-form label {
float: left;
clear: both;
display: block;
color: #fff;
width: 80px;
padding: 5px 0;
}

.dynamic-form input.checkbox,
.dynamic-form input.radio {
float: left;
clear: left;
margin: 1.5em 5px 0 0;
}

.dynamic-form input.radio {
float: left;
clear: left;
margin: 1.7em 5px 0 0;
}

.dynamic-form label.checkbox {
float: left;
clear: none;
margin-top: 1.5em;
width: 370px;
}

* html .dynamic-form label.checkbox {
margin: 1.7em 0 3px;
}

* + html .dynamic-form label.checkbox {
margin: 1.7em 0 3px;
}

.dynamic-form .text-field,
.dynamic-form .browser,
.dynamic-form select {
float: left;
width: 210px;
}

.dynamic-form select {
width: 275px;
}

.dynamic-form textarea {
clear: both;
float: none;
height: 144px;
padding: 6px;
width: 404px;
color: #888;
resize: vertical;
overflow: auto;
}

* + html .dynamic-form textarea {
height: 158px;
}

.dynamic-form input.button {
float: left;
border: 0;
}

span.star {
color: #c14e0f;
font-size: 1.17em;
line-height: 0.9em;
}

label.error {
color: #c14e0f;
}

.dynamic-form a#show_more_profile {
float:left;
font-size:1.17em;
font-weight:bold;
padding:1.5em 0;
width:100%;
}

.dynamic-form label.checkbox.public_info {
display:inline;
float:right;
margin:0.4em 100px 0 0;
width:auto;
}

.dynamic-form input.checkbox.public_info {
clear:none;
display:inline;
float:right;
margin:0.4em 5px 0 0;
}

#viesti-lbl {
	float: none;
}

/*-----------------------------------------------
Jaakko
-----------------------------------------------*/
/*
#blogi h1 span {
color: #ccc;
display: block;
font: 60% 'Trebuchet ms', 'Helvetica neue', Helvetica, Arial, sans-serif;
font-style: italic;
}
*/
#ihmiset dd span {
display: block;
}
.error span {
display: none;
}
.column-360 #certificates img {
float: left;
margin: 0;
padding: 0;
}