@charset "UTF-8";

/* Css 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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* HTML */

body {
font: 300 12px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}

h2 {
font: 900 14px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
padding: 18px 0 12px 0;
clear: both;
}

p {
padding: 0 0 12px 0;
clear: both;
}

a {
color: #fff;
}

a:hover {
color: #fd9;
}

/* Layout elements */

#togglewrap {
height: 24px;
position: absolute;
top: 0;
right: 0;
padding: 3px;
width: 24px;
}

#togglewrap a {
display: block;
width: 24px;
height: 24px;
padding: 0;
background: url(../img/btn_login.png) no-repeat top left;
float: right;
}

#togglewrap a:hover {
background-position: bottom left;
}

#togglewrap a span {
display: none;
}

#login {
background: #000;
padding: 3px 40px;
text-align: right;
height: 24px;
}

#login input.width200 {
width: 120px;
border: 1px solid #555;
background: #111;
color: #fff;
vertical-align: baseline;
}

#login input.width100 {
width: 55px;
border: 1px solid #555;
background: #333;
color: #fff;
vertical-align: baseline;
}

#login label {
margin: 0 0 0 10px;
line-height: 24px;
padding: 0;
}

#logo {
width: 680px;
margin: auto;
padding: 26px 0 24px;
}

#menu {
width: 720px;
height: 60px;
margin: auto;
}

#heading {
width: 680px;
height: 40px;
padding: 30px 0 20px;
margin: auto;
}

#heading h1 {
display: block;
width: 680px;
height: 40px;
background-position: top left;
background-repeat: none;
}

#heading h1 span {
display: none;
}

/* Otsikot */

#h1_referenssit { background-image: url(../img/h1_referenssit.png); }
#h1_ohjeisto { background-image: url(../img/h1_ohjeisto.png); }
#h1_yritys { background-image: url(../img/h1_yritys.png); }
#h1_yhteystiedot { background-image: url(../img/h1_yhteystiedot.png); }
#h1_palvelut { background-image: url(../img/h1_palvelut.png); }
#h1_maineprint { background-image: url(../img/h1_maineprint.png); }


/* Menu */

#menu ul {
list-style: none;
padding: 0;
margin: 0;
}

#menu ul li {
display: block;
float: left;
height: 60px;
}

#menu ul li a {
display: block;
float: left;
height: 60px;
background-position: center left;
background-repeat: no-repeat
position: relative;
}

#menu ul li a:hover { background-position: top left; }
#menu ul li.current a { background-position: bottom left; }
#menu ul li a span { display: none; }

a#etus { background-image: url(../img/btn_etus.png); width: 101px; }
a#yrit { background-image: url(../img/btn_yrit.png); width: 83px; }
a#palv { background-image: url(../img/btn_palv.png); width: 104px; }
a#refe { background-image: url(../img/btn_refe.png); width: 136px; }
a#ohje { background-image: url(../img/btn_ohje.png); width: 104px; }
a#yhte { background-image: url(../img/btn_yhte.png); width: 144px; }


/* Etusivu */

#etusivu {
background: #262626 url(../img/etus_body_bg.jpg) no-repeat top center;
}

#etusivu #menu {
background: url(../img/etus_menu_bg.png) no-repeat top center;
}

#etusivu h4 {
font: 900 12px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fd9;
padding: 0;
clear: both;
}

/* Referenssit */

#referenssit {
background: #1f2b23 url(../img/refe_body_bg.jpg) no-repeat top center;
}

#referenssit #menu {
background: url(../img/refe_menu_bg.png) no-repeat top center;
}

#referenssit #content {
width: 692px;
margin: auto;
}

#referenssit #content .thumb_item {
width: 131px;
height: 164px;
padding: 7px 11px 8px;
margin: 10px;
float: left;
background: url(../img/refe_item_bg.png) no-repeat top left;
}

#referenssit #content .thumb_item .thumb {
width: 131px;
height: 115px;
background-position: center center;
background-repeat: no-repeat;
}

#referenssit #content .thumb_item .thumb a {
width: 131px;
height: 115px;
display: block;
background: url(../img/refe_item_mask.png) no-repeat top center;
}

#referenssit #content .thumb_item .thumb a:hover {
background-position: bottom center;
}

#referenssit #content .thumb_item .date {
width: 131px;
height: 43px;
text-align: center;
font: 700 11px/43px "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #222;
}


/* Perussivun muotoilut */

#content {
width: 680px;
margin: -30px auto 30px;
}

#content #text {
width: 350px;
float: left;
}

#content #text li {
padding: 0 0 0 21px;
line-height: 24px;
background-repeat: no-repeat;
background-position: top left;
display: block;
float: left;
width: 150px;
}

#content #text li.wide {
width: 320px;
}

#content #image {
width: 300px;
float: right;
text-align: center;
}

.clear {
width: 100%;
height: 1px;
font-size: 1px;
line-height: 1px;
clear: both;
}

/* Ohjeisto */

#ohjeisto {
background: #1f292d url(../img/ohje_body_bg.jpg) no-repeat top center;
}

#ohjeisto #menu {
background: url(../img/ohje_menu_bg.png) no-repeat top center;
}

#ohjeisto #content #text li {
background-image: url(../img/ohje_li.png);
}


/* Yritys */
#yritys { 
background: #2c222c url(../img/yrit_body_bg.jpg) no-repeat top center;
}

#yritys #menu {
background: url(../img/yrit_menu_bg.png) no-repeat top center;
}



/* Yhteys */

#yhteystiedot {
background: #2b251f url(../img/yhte_body_bg.jpg) no-repeat top center;
}

#yhteystiedot #menu {
background: url(../img/yhte_menu_bg.png) no-repeat top center;
}

#yhteystiedot h2 span {
font-size: 12px;
line-height: 16px;
}

#yhteystiedot #content #text li {
background-image: url(../img/yhte_li.png);
}


/* Palvelut */

#palvelut {
background: #25281f url(../img/palv_body_bg.jpg) no-repeat top center;
}

#palvelut #menu {
background: url(../img/palv_menu_bg.png) no-repeat top center;
}

/* Referenssit */

#referenssit h2, #referenssit h3, #referenssit h4, #referenssit p {
margin-left: 10px;
}

fieldset {
margin: 0;
border: 1px solid #fff;
padding: 15px;
}

#referenssit fieldset {
margin: 0 10px;
}

legend {
border: 1px solid #fff;
background: #fff;
padding: 0 9px 0 10px;
color: #000;
font: 900 10px/16px Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}

#content .width200 {
border: 1px solid #000;
background: #fff;
color: #000;
width: 200px;
}

#content .width, #content textarea {
border: 1px solid #000;
background: #fff;
color: #000;
width: 400px;
}

#content .formi_button {
border: 1px solid #fff;
background: #000;
color: #fff;
}

.admin a {
margin-left: 10px;
border: 1px solid #fff;
background: #000;
color: #fff;
padding: 3px 8px;
text-decoration: none;
font: 900 10px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}

.admin a:hover {
color: #fd9;
}