html
{
background: #1a1a1a url('images/layout/bg-html.jpg');
}

body
{
margin: 0;
font-size: 14px;
text-align: center;
font-family: "ff-dagny-web-pro-1", "ff-dagny-web-pro-2", arial;
color: #151515;
}

a
{
outline: none;
text-decoration: none;
color: #305d16;
font-style: italic;
}

hr
{
height: 2px;
border: 0;
background: #B8B8B8;
border-bottom: 1px solid #fff;
margin: 22px 0 22px 0;
}

#header-section
{
height: 98px;
background: url('images/layout/bg-header.jpg') repeat-x;
border-bottom: 1px solid #0b0b0b;
}

#header, #contentarea, #footer, #banner
{
margin: auto;
text-align: left;
width: 860px;
position: relative;
}

#logo
{
position: absolute;
left: -146px;
}

.logo-link
{
position: absolute;
top: 30px;
left: 7px;
display: block;
width: 230px;
height: 42px;
}

#menu
{
position: absolute;
left: 450px;
top: 42px;
width: 400px;
}

#menu li
{
padding-right: 12px;
float: left;
}

#menu li a
{
letter-spacing: 2px;
color: #f3f3f3;
font-weight: 600;
font-size: 12px;
display: block;
height: 26px;
font-style: normal;
text-transform: uppercase;
text-shadow: 1px 2px 2px #000;
}

#menu li a:hover
{
background: center bottom url('images/layout/bg-menu-li.jpg') no-repeat;
}

#menu li a:active
{
height: 28px;
}

#menu li a.selected
{
background: center bottom url('images/layout/bg-menu-li.jpg') no-repeat;
}

#header .contact
{
position: absolute;
top: 83px;
left: 602px;
color: #595959;
font-size: 12px;
}

#line-top, #line-bottom
{
height: 5px;
background: #595959;
}

#line-top
{
border-top: 1px solid #6f6f6f;
}

#line-bottom
{
border: 1px solid #6f6f6f;
}


/* content */

#content-section
{
background: #eee center top url('images/layout/bg-contentarea.jpg') no-repeat;
text-shadow: 1px 1px 0px #fff;
}

#banner-section
{
background: center bottom url('images/layout/line-content.jpg') no-repeat;
}

#banner
{
padding: 48px 0 54px 0;
}

#banner-inner
{
padding: 0 40px 0 20px;
text-align: center;
font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
}

#banner-inner h1
{
color: #434343;
font-size: 26px;
font-family: "etica-1","etica-2";
font-weight: 300;
}

#banner-inner h1 .quote
{
color: #305D16;
font-weight: bold;
}

#banner-inner h1 .inner em
{
font-style: normal;
font-weight: 600;
}

#banner-inner p
{
font-size: 15px;
line-height: 21px;
color: #595959;
clear: both;
padding-top: 10px;
}

#contentarea
{
padding: 30px 0 48px 0;
}

#content
{
width: 540px;
float: left;
}

#content-tabs
{
padding-bottom: 20px;
padding-left: 20px;
}

#content-tabs ul li
{
float: left;
padding-right: 5px;
}

#content-inner
{
position: relative;
overflow: hidden;
clear: both;
line-height: 18px;
}

#content-inner.wpadding
{
padding: 0 20px 0 20px;
}

#content-inner .panes div 
{
width: 500px;
padding-left: 20px;
padding-right: 20px;
float:left;
display:block;
}

#content-inner .panes
{
width:20000em;
position:relative;
clear:both;
}

#fade-left, #fade-right
{
position: absolute;
top: 78px;
width: 20px;
z-index: 100;
}

#fade-left
{
left: 0px;
background: url('images/layout/bg-fade-left.png') repeat-y;
}

#fade-right
{
right: 320px;
background: url('images/layout/bg-fade-right.png') repeat-y;
}

#sidebar
{
float: left;
width: 320px;
}

#sidebar-inner
{
padding: 0px 14px 0px 34px;
line-height: 17px;
}


/* footer */

#footer-section
{
background: url('images/layout/bg-footer.jpg') repeat-x;
min-height: 200px;
border-top: 1px solid #0b0b0b;
padding: 30px 0 0 20px;
color: #ebebeb;
font-size: 13px;
text-shadow: 1px 1px 0px #000;
}

#footer-left
{
width: 274px;
float: left;
padding-bottom: 20px;
}

#footer-middle
{
width: 246px;
float: left;
z-index: 20;
}

#footer-right
{
width: 320px;
float: left;
text-align: right;
padding: 41px 0 24px 0;
z-index: 10;
}

#footer a:hover
{
color: #447623;
}

#footer-bottom
{
font-size: 12px;
color: #494949;
padding: 22px 0 50px 0;
text-shadow: 1px 1px 0px #000;
background: center top url('images/layout/line-footer.jpg') no-repeat;
}

#footer-bottom a
{
font-style: normal;
color: #9F9F9F;
font-size: 10px;
}

#footer-bottom a:hover
{
color: #CFCFCF;
}

.clear
{
clear: both;
}

.no-border
{
border: 0 !important;
}


/* footer form */
#footer .input
{
background: transparent url('images/layout/bg-input.jpg');
height: 25px;
width: 246px;
border: 1px solid #131313;
/*border-right: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;*/
border-radius: 6px;
margin-bottom: 7px;
}

#footer input
{
background: transparent;
width: 234px;
padding: 5px 0 0 6px;
border: 0;
color: #efefef;
font-family: "ff-dagny-web-pro-1", "ff-dagny-web-pro-2", arial;
font-size: 13px;
text-shadow: 1px 1px 0px #000;
}

#footer .textarea
{
background: transparent url('images/layout/bg-input.jpg');
border: 1px solid #131313;
/*-webkit-border-radius: 6px;
-moz-border-radius: 6px;*/
border-radius: 6px;
height: 127px;
margin-bottom: 12px;
text-align: left;
width: 300px;
float: right;
}

#footer .textarea textarea
{
border: 0;
width: 288px;
background: none transparent;
color: #efefef;
height: 116px;
font-family: "ff-dagny-web-pro-1", "ff-dagny-web-pro-2", arial;
font-size: 13px;
text-shadow: 1px 1px 0px #000;
padding: 6px 0 0 6px;
margin: 0;
}

#footer .input .captcha
{
background: url('images/layout/bg-captcha.png') no-repeat;
width: 114px;
float: left;
}
#footer .input.captcha img
{
padding: 3px 0 1px 5px;
}

#footer .input.captcha input
{
width: 120px;
text-transform: uppercase;
}

input.form-error
{
background: url('images/layout/error.png') no-repeat !important;
background-position: 209px -8px !important;
}

.captcha input.form-error
{
background: url('images/layout/error.png') no-repeat !important;
background-position: 95px -9px !important;
}

textarea.form-error
{
background: url('images/layout/error.png') no-repeat !important;
background-position: 261px -8px !important;
}

.form-error-msg
{
position: absolute;
top: 188px;
left: 564px;
color: #CF1919;
}


/* headers */
#content-inner h1
{
font-size: 20px;
font-weight: 400;
font-family: "etica-1","etica-2";
color: #305d16;
margin-bottom: 13px;
}

#sidebar-inner h1
{
color: #797979;
text-transform: uppercase;
padding-bottom: 10px;
border-bottom: 1px solid #B8B8B8;
font-family: "etica-1","etica-2";
font-weight: 600;
font-size: 14px;
}

#sidebar-inner h2
{
margin-top: 18px;
padding-bottom: 6px;
border-bottom: 1px solid #B8B8B8;
}

#sidebar-inner p
{
border-top: 1px solid white;
padding-top: 12px;
color: #2a2a2a;
}


/* lists */
#content-inner ul
{
margin: 12px 0 10px 2px;
}

#content-inner ul li
{
background: url('images/layout/bg-li.jpg') no-repeat;
background-position: 4px 7px;
padding: 4px 0 4px 24px;
}

#content-inner ul li:hover
{
background-color: #f6f6f6;
}

#sidebar-inner ul
{
padding-top: 8px;
}

#sidebar-inner ul li
{
background: url('images/layout/bg-li-small.jpg') no-repeat;
background-position: 2px 6px;
padding: 2px 0 2px 15px;
}

#footer-left ul
{
padding-top: 14px;
}

#footer-left ul li
{
background: url('images/icons/karttalinkki.png') no-repeat;
padding: 1px 0 0 20px;
}


/* buttons */
a.sprite
{
background: url('images/layout/sprite.png') no-repeat;
display: block;
float: left;
height: 25px;
padding-left: 14px;
color: #f9f9f9;
font-style: normal;
font-size: 13px;
font-weight: 700;
text-shadow: 1px 1px 1px #000;
}

a.sprite:hover
{
background-position: 0px -27px;
}

a.sprite:active
{
background-position: 0px -53px;
}

a.sprite.current
{
cursor: default;
background-position: 0px 0px;
text-decoration: underline;
}

a.sprite span
{
display: block;
line-height:23px;
padding: 0 18px 2px 4px;
background: url('images/layout/sprite.png') no-repeat;
background-position: right 0px;
}

a.sprite:hover span
{
background-position: right -27px;
}

a.sprite:active span
{
background-position: right -53px;
padding-top: 1px;
}

a.sprite.current span
{
background-position: right 0px;
padding-top: 0px;
}

#footer button
{
background: transparent none;
border: 0;
overflow: visible;
padding: 0;
}

/*#footer button::-moz-focus-inner
{
border: 0;
}*/


#footer button span.sprite
{
background: url('images/layout/sprite.png') no-repeat;
display: block;
height: 24px;
padding: 0 0 0 14px;
}

#footer button span em.sprite
{
display: block;
height: 24px;
background: top right url('images/layout/sprite.png') no-repeat;
padding: 0px 16px 0 3px;
color: #f9f9f9;
font-family: "ff-dagny-web-pro-1", "ff-dagny-web-pro-2", arial;
font-style: normal;
font-size: 13px;
font-weight: 700;
text-shadow: 1px 1px 1px #000;
line-height: 22px;
}

#footer button:active span.sprite
{
background-position: 0px -53px;
}

#footer button:active span em.sprite
{
background-position: right -53px;
line-height: 23px;
}


/* icons */
h1.icon
{
padding: 7px 0 7px 38px;
}

h1.icon.index
{
background: url('images/icons/suunnittelu4.png') no-repeat;
}
h1.icon.rekrytointi
{
background: url('images/icons/rekrytointi2.png') no-repeat;
}
h1.icon.analyysit
{
background: url('images/icons/analyysit.png') no-repeat;
}
h1.icon.integraatio
{
background: url('images/icons/integraatio.png') no-repeat;
}
h1.icon.migraatio
{
background: url('images/icons/migraatio.png') no-repeat;
}
h1.icon.yllapito
{
background: url('images/icons/yllapito2.png') no-repeat;
}
h1.icon.tyokalut
{
background: url('images/icons/tyokalut.png') no-repeat;
}
h1.icon.ominaisuudet
{
background: url('images/icons/projektit3.png') no-repeat;
}

img.icon
{
float: left;
padding-right: 5px;
}

.grails-logo
{
margin-bottom: 4px;
}


/* text styles */
.large
{
font-size: 16px;
}

.green
{
color: #305D16;
}