@font-face {
    font-family: 'Museo100';
    src: url('../fonts/museosans-100-webfont.eot');
    src: url('../fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museosans-100-webfont.woff') format('woff'),
         url('../fonts/museosans-100-webfont.ttf') format('truetype'),
         url('../fonts/museosans-100-webfont.svg#MuseoSans100Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Museo300';
    src: url('../fonts/museosans-300-webfont.eot');
    src: url('../fonts/museosans-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museosans-300-webfont.woff') format('woff'),
         url('../fonts/museosans-300-webfont.ttf') format('truetype'),
         url('../fonts/museosans-300-webfont.svg#MuseoSans300Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {overflow:hidden !important;font-family:Helvetica, Arial, sans-serif;font-size:13px;}
strong {color:#ff5a00; font-weight: normal;}
*:focus {outline:none;}
.float-right {float:right;}
.float-left {float:left;}
.orange {color:#ff5a00;}

em {font-family:Museo100;font-size:12px;font-style:normal; text-transform: uppercase;}
em strong {font-family:Museo100;font-size:12px;font-style:normal; text-transform: uppercase;}

h1, h2, h3, h4, h5, h6 {color:#616161;font-weight:bold;padding:10px 0;}
h1 {font-size:30px;line-height:30px;}
h2 {font-size:24px;line-height:24px;}
h3 {font-size:36px;line-height:18px; color:#fff; font-family:Museo100; text-transform: uppercase;}
h4 {font-size:16px;line-height:16px;}
h5 {font-size:14px;line-height:14px; font-family:Museo100; text-transform: uppercase;}
h6 {font-size:12px;line-height:12px;}

p {line-height:20px;padding:5px 0;}

img.float-left {margin:2px 15px 0 0;}
img.float-right {margin:2px 0 0 15px;}

blockquote {padding:0px;}
blockquote p {color:#ff5a00;font-size:28px;line-height:34px; font-family:Museo100; text-transform:uppercase;}
blockquote p em {font-size:16px;line-height:20px;}
blockquote p big {font-size:24px;line-height:32px;}
blockquote p big em {font-size:28px;line-height:34px;}
.separator {width: 616px; border-top:1px dashed #E5E5E5;height:0;font-size:0;line-height:0;margin:0px auto 6px auto;}

.rounded {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;position:relative;}

/* buttons */
.btn {height:28px;line-height:28px;padding:0 16px;background:url(../images/buttons.jpg) 0 0;display:block;color:#fff;font-size:12px;font-family:DroidSerifBoldItalic;
text-shadow:
		1px 1px 0px rgba(107,106,107,0.7),
		0px 1px 0px rgba(000,000,000,0.2);}	
.btn.float-left {margin:0 5px 0 0;}
.btn.float-right {margin:0 0 0 5px;}
.btn.orange {background-position:0 0;border:1px solid #df7324;}
.btn.orange:hover {background-position:0 -28px;}
.btn.blue {background-position:0 -56px;border:1px solid #2066ac;}
.btn.blue:hover {background-position:0 -84px;}
.btn.purple {background-position:0 -112px;border:1px solid #7028c2;}
.btn.purple:hover {background-position:0 -140px;}
.btn.green {background-position:0 -168px;border:1px solid #3e9224;}
.btn.green:hover {background-position:0 -196px;}
.btn.black {background-position:0 -224px;border:1px solid #737373;}
.btn.black:hover {background-position:0 -252px;}
.btn.red {background-position:0 -280px;border:1px solid #c50000;}
.btn.red:hover {background-position:0 -308px;}
.btn.yellow {background-position:0 -336px;border:1px solid #d9ad13;color:#6f590a;
text-shadow:
		1px 1px 0px rgba(255,255,255,0.7),
		0px 1px 0px rgba(255,255,255,0.2);}
.btn.yellow:hover {background-position:0 -364px;}
.btn.grey {background-position:0 -392px;border:1px solid #afafaf;color:#5d5d5d;
text-shadow:
		1px 1px 0px rgba(255,255,255,0.7),
		0px 1px 0px rgba(255,255,255,0.2);}
.btn.grey:hover {background-position:0 -420px;}

/* left bar */
#bar {
	position:fixed;
	top:0;
	left:0;
	width:170px;
	background:#3a3a3a;
	height:100%;
	z-index:100;
	padding:60px 30px 30px 30px;
	color:#616161; 
	-webkit-box-shadow: 1px 0px 0px rgba(255, 255, 255, .17), 0 1px 0 rgba(255, 255, 255, .14) inset;
}

#navigation {padding:0px 0 0 0;position:relative;z-index:90;}
#navigation ul {padding:10px 0 0 0;}
#navigation li {margin:15px 0;display:block; text-align: center;}
#navigation li a {cursor:pointer; padding-right:10px;color:#909090; text-align: center;}
#navigation li.current { }
#navigation li.current a {color:#fff; text-shadow: #000 0 1px 1px;}
#nav_spacer {display: block; width: 177px; height: 2px; margin: 10px 0 10px -5px; background:url(../images/nav_spacer.png) no-repeat 0 0;}

/* social icons */
#social {position:fixed;bottom:170px;left:30px;z-index:50;}
#social ul {padding:25px 0 0 0;}
#social ul li {float:left;padding:0 5px 5px 0;}
#social ul li a {display:block;float:left;height:16px;width:16px;background:url(../images/social-icons.png) no-repeat 0 0;}
#social ul li.forrst a {background-position:0 0;}
#social ul li.forrst a:hover {background-position:0 -16px;}
#social ul li.dribbble a {background-position:-16px 0;}
#social ul li.dribbble a:hover {background-position:-16px -16px;}
#social ul li.twitter a {background-position:-32px 0;}
#social ul li.twitter a:hover {background-position:-32px -16px;}
#social ul li.facebook a {background-position:-48px 0;}
#social ul li.facebook a:hover {background-position:-48px -16px;}
#social ul li.rss a {background-position:-64px 0;}
#social ul li.rss a:hover {background-position:-64px -16px;}

#footer {position:fixed;bottom:20px;left:30px;font-size:11px;color:#909090; padding:25px 0 0 0;z-index:50; text-align: center;}



/* section and backgrounds */
#container {position:relative;}

/* backgrounds for specific id's */
#home {background:url(../images/1.jpg) 170px center no-repeat fixed;}
#about {background:url(../images/1.jpg) 170px center no-repeat fixed;}
#typography {background:url(../images/1.jpg) 170px center no-repeat fixed;}
#elements {background:url(../images/1.jpg) 170px center no-repeat fixed;}
#contact {background:url(../images/1.jpg) 170px center no-repeat fixed;}

/* default background for all non specific sections */
.section {display:block;background:url(../images/5.jpg) center center no-repeat fixed;}
/* if you want scaled background, add .scale-background class to proper section container ( <div class="section scale-background"> ) */
.scale-background {-webkit-background-size:cover !important;-moz-background-size:cover !important;-o-background-size:cover !important;background-size:cover !important;}

/* define your custom backgrounds and add them as class to proper section container ( <div class="section mybackgroundclass"> ) */
#etusivu {background:url(../images/bg_etusivu.jpg) 170px center no-repeat fixed;}
#varaa_palju {background:url(../images/bg_varaa_palju.jpg) 170px center no-repeat fixed;}
#tietoa_paljusta {background:url(../images/bg_tietoa_paljusta.jpg) 170px center no-repeat fixed;}
#galleria {background:url(../images/bg_gallery.jpg) 170px center no-repeat fixed;}
#yhteystiedot {background:url(../images/bg_yhteystiedot.jpg) 170px center no-repeat fixed;}



.section .content {position:absolute;top:50px;left:250px;color:#909090;}
.section .content.transparent .content-holder {background:none;}

.section .content .inner {padding:10px 42px;}
.section .content .header {background:#3A3A3A; height:75px;line-height:54px;display:block; padding: 25px 0 0 40px; position:absolute;top:0;left:0;width:660px;z-index:200;}
.section .content .header.hidden {display:none;}
.section .scroll-content {overflow:auto;margin-top:-99px;padding-top:0px;}
.section .scroll-content .padding {padding-top:15px;}
.section .content.projects .scroll-content {margin-top:0;padding-top:0;}
.section .content-holder {background:#fff;width:700px;padding-top:100px;}
.section .content.projects .content-holder {width:740px;padding-top:0;}
.section .content.project-details {padding-top:0px;}
.section .content.project-details .scroll-content {margin-top:0;}
.section .content.project-details .content-holder {padding-top:0;}

.section .content.project-details .bg {background:url(../images/project-details-bg.jpg) repeat-y;}
.section .content.project-details .inner {padding:10px 20px;}
.section .content.project-details .inner .column.float-right {padding-left:20px;}
.section .content.project-details .rotator {position:relative;width:700px;}
.section .content.project-details .rotator ul {position:relative;z-index:100;}
.section .content.project-details .rotator li {width:700px;}
.section .content.project-details .rotator a.close {background:url(../images/project-details-close.jpg) no-repeat 0 0;width:26px;height:26px;display:block;cursor:pointer;position:absolute;top:0;right:0px;z-index:300;}
.section .content.project-details .rotator a.close:hover {background-position:0 -26px;}
.section .content.project-details .rotator .pager {position:absolute;bottom:15px;right:15px;z-index:900;}
.section .content.project-details .rotator .pager a {width:9px;height:9px;display:block;float:left;background:#fff;margin:0 0 0 2px;text-indent:-9999px;}
.section .content.project-details .rotator .pager a.current {background:#ff5a00;}

/* projects */
#projects {position:relative;top:-20px;}
#projects li {width:220px;background:#fff;display:block;position:absolute;}
#projects li .inner {padding:10px 20px 20px 20px !important;}
#projects li .show-details {float:right;margin-top:10px;}
#projects li .show-details:hover {text-decoration:underline;}
#projects li .image .bg {background:url(../images/project-image.png) repeat;display:block;position:absolute;top:0;left:0;display:none;}
#projects li .image .ico {display:block;position:absolute;top:auto;left:auto;display:none;}
#projects li .image.picture .ico {background:url(../images/type-picture.png) no-repeat top left;width:65px;height:64px;z-index:100;}
#projects li .image.movie .ico {background:url(../images/type-movie.png) no-repeat top left;width:65px;height:64px;z-index:200;}

/* lists */
.list li {padding:2px 0;}
.list li p {font-size:12px;padding:0 0 0 12px;display:block;}
.list.plus li p {background:url(../images/plus.png) no-repeat left 3px;}
.list.dot li p {background:url(../images/dot.png) no-repeat left 7px;}
ol.list {list-style:decimal inside;color:#ff5a00;font-style:italic;font-size:13px;}
ol.list li p {color:#909090;padding:0;}
.list.small {font-size:13px;}
.list.small li {line-height:20px;padding:0 0 4px 0;}

/* google map */
#google_map {width:700px !important;height:300px !important;display:block;position:relative;margin:0;padding:0;}

/* contact */
#contact fieldset {padding:20px 0;}
#contact .inner {background:url(../images/contact-bg.jpg) repeat-y;}
#contact-form .row {float:left;width:440px;padding:0 0 10px 0;}
#contact-form .input-text {width:300px;height:28px;border:1px solid #ebebeb;border-top:1px solid #bfbfbf;background:#f5f5f5;padding:0 10px;float:right;font-family:Tahoma, Geneva, sans-serif;font-size:12px;}
#contact-form .input-textarea {width:300px;height:100px;border:1px solid #ebebeb;border-top:1px solid #bfbfbf;background:#f5f5f5;padding:10px;float:right;resize:none;font-family:Tahoma, Geneva, sans-serif;font-size:12px;overflow:hidden;}
#contact-form .input-submit {float:right;cursor:pointer;font-size:12px;}
#contact-form label {width:100px;float:left;line-height:30px;text-align:center;}
#contact-form .holder {position:relative;}
#contact-form .message {display:none;position:absolute;top:110px;left:15px;color:#945000;}
#contact-form .message .top {background:url(../images/message-top.png) no-repeat top left;width:428px;height:17px;line-height:0;}
#contact-form .message .contents {background:url(../images/message-content.png) repeat-y;width:428px;padding:5px 0;}
#contact-form .message .bottom {background:url(../images/message-bottom.png) no-repeat top left;width:428px;height:14px;line-height:0;margin-left:-1px;}
#contact-form #alert {padding:0 20px;}
#contact-form #alert ul {padding:10px 0 0 0;}
#contact-form #alert ul li {line-height:18px;}

/* tabs */
.tabs {padding:10px 0;}
.tabs .frame {border:1px solid #dcdcdc;position:relative;margin-top:-1px;z-index:10;}
.tabs .nav {position:relative;margin-left:1px;z-index:20;}
.tabs .nav li {float:left;}
.tabs .nav li a {background:#f6f6f6;height:30px;line-height:30px;padding:0 20px;float:left;color:#616161;border:1px solid #dcdcdc;margin-left:-1px;font-weight:bold;}
.tabs .nav li a.current {background:#fff;border-bottom:1px solid #fff;}
.tabs .rounded {border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
.tabs .cnt {display:none;padding:10px 20px;}
.tabs .cnt.current {display:block;}

/* toggles */
.toggles {padding:10px 0;}
.toggles .toggle .head {background:#f6f6f6;border:1px solid #dcdcdc;}
.toggles .toggle .head a {height:40px;line-height:40px;display:block;padding:0 25px;color:#616161;background:url(../images/arrow-right.png) no-repeat 10px center;font-weight:bold;}
.toggles .toggle .head.current a {background:url(../images/arrow-down.png) no-repeat 10px center;}
.toggles .toggle .cnt {display:none;padding:10px 20px;border:1px solid #dcdcdc;border-top:0;}
.toggles .toggle.current .cnt {display:block;}

/* infoboxes */
.info {padding:20px 20px;}
.info p {padding:0;margin:0;font-size:14px;}
.info.info {background:#bbe5f5;border:1px solid #7db4da;color:#004973;}
.info.warning {background:#fcf8e2;border:1px solid #f0d53f;color:#945000;}
.info.error {background:#fce2e2;border:1px solid #fb8e8e;color:#940000;}
.info.success {background:#e2f6bb;border:1px solid #cada7d;color:#3c7300;}


img.gallery {
	display: block;
	float: left;
	padding: 2px;
	}