/** General ***********************************************/

a {
    color: #336600;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

form {
	margin: 0px;
	padding: 0px;
}

big {
	font-size: 1.2em;
}

body {
    background: #f2f1ef url(../images/layout/body_bg.png) repeat-x left top;
    color: #282828;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 0.8em;
    line-height: 1.5em;
}

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

button {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 1.0em;
}

h1, h2, h3, h4 {
	margin: 0px;
	padding: 0px;
	color: #000000;
    font-weight: normal;
}

h1 {
    font-size: 1.7em;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 1.6em;
    letter-spacing: -0.5px;
}

h3 {
    font-size: 1.2em;
    letter-spacing: -0.5px;
}

input, select, textarea {
	margin: 0px;
    color: #282828;
    font-family: sans-serif;
    font-size: 1.2em;
}

textarea {
	overflow: auto;
    resize: none;
}

/** Shared styles ****************************************/

/** Plain button **/

a.button-plain {
    display: block;
    margin: 0px 13px 0px 0px;
    float: left;
    color: #7c9933;
    font-size: 0.85em;
    line-height: 1.0em;
}

a.button-plain span {
    display: block;
    padding: 0px 18px 0px 0px;
    background: transparent url(../images/layout/button_plain.png) no-repeat right 0px;
}

a.button-plain span span {
    padding: 6px 0px 5px 18px;
    background-position: left 0px;
}

/** Submit button **/

button.submit {
    margin: 0px;
    padding: 0px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 1.2em;
    line-height: 1.0em;
    letter-spacing: -0.7px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
}

button.submit span {
    display: block;
    padding: 0px 18px 0px 0px;
    background: transparent url(../images/layout/button_plain.png) no-repeat right -80px;
}

button.submit span span {
    padding: 4px 0px 6px 18px;
    background-position: left -80px;
}

button.submit:hover {
    text-decoration: underline;
}

button.submit:active {
    margin-top: 1px;
}

/** Products **/

div#page-content div.product-logo {
    position: absolute;
    left: 0px;  
    top: 0px;
    width: 65px;
    height: 65px;
    background: transparent url(../images/layout/product_icons.png) no-repeat 0px -65px;
}

div#page-content div.logo-hevonen-mukanasi {
    background-position: 0px 0px;
}

div#page-content div.logo-psykologi-verkossa {
    background-position: -65px 0px;
}

div#page-content div.logo-ryhmat {
    background-position: -130px 0px;
}

/** Fields **/

input.textfield, 
textarea {
    padding: 7px 7px 7px 7px;
    border: 1px solid #aeaeae;
    border-radius: 1px;
    background-color: #ffffff;
    box-shadow:  inset 0px 0px 3px rgba(0, 0, 0, 0.4);
    -moz-border-radius: 1px;
    -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 1px;
    -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.4);
}

textarea {
    padding-right: 0px;
}

input.textfield:focus, 
textarea:focus {
    background-color: #e0e7bd;
    color: #000000;
}

/** Error **/

span.error {
    color: #ff3300;
}

/** Required **/

span.required {
    color: #ff3300;
}

/** List with links **/

ul.linklist {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.linklist li {
	padding: 0px 0px 0px 17px;
    background: transparent url(../images/layout/bullet_link.png) no-repeat 2px 10px;
}

/** Container ********************************************/

div#page {
	position: relative;
	min-height: 100%;
    height: auto !important;
    height: 100%;
}

/** Header ***********************************************/

div#page-header {
    position: relative;
    margin: 0px auto 0px auto;
    background: transparent url(../images/layout/header_bg.png) no-repeat left 10px;
    width: 950px;
    height: 160px;
}

/** Logo **/

div#page-header a.logo {
    position: absolute;
    left: 0px;
    top: 58px;
    width: 239px;
    height: 55px;
    background: transparent url(../images/layout/header_logo.png) no-repeat left top;
}

div#page-header a.logo em,
div#page-header a.logo strong {
    display: none;
}

/** Login **/

div#page-header div.login {
    position: absolute;
    right: 0px;
    top: 25px;
}

div#page-header div.login a {
    color: #7a9731;
}

div#page-header div.login a.button-plain span span {
	padding-left: 37px;
	background-position: 0px -40px;
}


/** Logout **/

div#page-header div.logout {
    position: absolute;
    right: 0px;
    top: 25px;
}

div#page-header div.logout span.account {
	padding: 2px 7px 0px 0px;
	float: left;
    color: #999999;
    font-size: 0.9em;
}

div#page-header div.logout span.account strong {
	padding: 0px 5px 0px 5px;
    color: #000000;
    font-weight: normal;
}

div#page-header div.logout a {
    color: #7a9731;
}

div#page-header div.logout a.button-plain span span {
    padding-left: 37px;
    background-position: 0px -40px;
}

/** Menu **/

div#page-header ul.menu {
    position: absolute;
    right: 0px;
    top: 53px;
    list-style: none;
}

div#page-header ul.menu li {
    float: left;
}

div#page-header ul.menu li a {
    display: block;
    padding: 10px 17px 8px 17px;
    border-bottom: 3px solid #dcdcdc;
    color: #828282;
    font-size: 1.35em;
    letter-spacing: -0.3px;
}

div#page-header ul.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

div#page-header ul.menu li.selected a {
    color: #000000;
    border-color: #adc144;
}

div#page-header ul.menu li#menu-keskustelu.selected a {
    border-color: #3c8dc5;
}

div#page-header ul.menu li#menu-yritys.selected a {
    border-color: #624740;
}

div#page-header ul.menu li#menu-palvelut.selected a {
    border-color: #7cbab5;
}

div#page-header ul.menu li#menu-otayhteytta.selected a {
    border-color: #e75442;
}

/** Content **********************************************/

div#page-content {
	margin: 0px auto 0px auto;
	padding: 60px 0px 350px 0px;
	width: 950px;
}

/** Footer ***********************************************/

div#page-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #d8d8d8;
}

div#page-footer div.content {
	width: 950px;
	margin: 0px auto 0px auto;
	padding: 30px 0px 30px 00px;
	overflow: hidden;
}

/** Info **/

div#page-footer div.info {
    float: left;
    padding: 0px 40px 20px 0px;
    width: 200px;
    background: transparent url(../images/layout/line_vertical.png) repeat-y right top;
}

div#page-footer div.info div.text {
    background: transparent url(../images/layout/footer_logo.png) no-repeat left 5px;
    padding: 45px 0px 30px 0px;
    color: #666666;
    font-size: 0.9em;
}

div#page-footer div.info div.copyright {
    color: #999999;
    font-size: 0.8em;
}

/** Sections **/

div#page-footer div.sections {
    float: right;
}

div#page-footer div.section {
    float: left;
    padding: 10px 0px 10px 70px;
    width: 166px;
}

div#page-footer div.section em {
    font-style: normal;
    font-size: 0.9em;
}

div#page-footer div.section h3 a {
    color: #000000;
}

div#page-footer div.section ul.linklist {
	margin: 15px 0px 0px 0px;
    font-size: 0.9em;
}

/** Template: home ***************************************/

div#page-content.home {
    padding-top: 0px;
}

/** Teaser **/

div#home-teaser {
    position: relative;
	margin: 0px auto 0px auto;
    width: 946px;
    height: 400px;
}

/** Shades **/

div#home-teaser div.shades {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 360px;
    z-index: 2;
}

div#home-teaser div.shades span {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	background-repeat: no-repeat;
}

/** Images **/

div#home-teaser div.images {
	position: relative;
	width: 944px;
    height: 360px;
    z-index: 1;
    overflow: hidden;
}

div#home-teaser div.images div.item {
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width: 100%;
    height: 360px;
    background-repeat: no-repeat;
    backround-position: left top;
    z-index: 1;
}

/** Link **/

div#home-teaser a.link {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 946px;
    height: 360px;
    background-color: #ffffff;
    z-index: 5;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

/** Mask **/

div#home-teaser div.mask {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 944px;
    height: 358px;
    border: 1px solid #ffffff;
    box-shadow:  inset 0px 0px 6px rgba(0, 0, 0, 0.4);
    z-index: 4;
    cursor: pointer;
    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
}

/** Spotlight **/

div#home-teaser div.spotlight {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 305px;	
    z-index: 3;
}

div#home-teaser div.spotlight div.header {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 100%;
    height: 50%;
    background: transparent url(../images/layout/teaser_spotlight.png) no-repeat left top;
    z-index: 1;
}

div#home-teaser div.spotlight div.footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: block;
    width: 100%;
    height: 50%;
    background: transparent url(../images/layout/teaser_spotlight.png) no-repeat left bottom;
    z-index: 2;
}

div#home-teaser div.spotlight div.content {
    position: relative;
    padding: 25px 0px 25px 0px;
    overflow: hidden;
    z-index: 3;
}

div#home-teaser div.spotlight div.content div.text {
    margin: 0px 30px 0px 30px;
    padding: 7px 0px 12px 0px;
}

div#home-teaser div.spotlight div.content h3 {
    margin: 0px 30px 0px 30px;
    font-size: 1.3em;
}

div#home-teaser div.spotlight div.content span.button {
	display: block;
	float: left;
	margin: 0px 25px 0px 25px;
    padding: 0px 18px 0px 0px;
    background: transparent url(../images/layout/button_plain.png) no-repeat right -120px;
    color: #ffffff;
    line-height: 1.0em;
}

div#home-teaser div.spotlight div.content span.button span {
	display: block;
    padding: 4px 0px 0px 18px;
    height: 17px;
    background: transparent url(../images/layout/button_plain.png) no-repeat left -120px;
}

/** Steps **/

div#home-teaser div.steps {
	margin: 0px auto 0px auto;
    height: 28px;
    padding: 6px 0px 6px 0px;
}

div#home-teaser div.steps a {
    display: block;
    float: left;
    width: 28px;
    height: 28px;
    background: transparent url(../images/layout/teaser_bg.png) no-repeat 7px -42px;
    cursor: pointer;
    outline: none;
}

div#home-teaser div.steps a:hover {
    background-position: -43px -42px; 
}

div#home-teaser div.steps a:active {
    background-position: -43px 8px; 
}

div#home-teaser div.steps a.selected {
    background-position: 7px 8px;
}

/** Services **/

div#home-services {
    margin: 20px 0px 0px 0px;
}

div#home-services h2 {
    font-size: 1.7em;
    letter-spacing: -0.5px;
}

div#home-services div.box {
	margin: 20px 0px 0px 0px;
	padding: 0px 8px 0px 8px;
    background: #ffffff url(../images/layout/line_horizontal.png) repeat-x left top;
    overflow: hidden;
}

div#home-services div.item {
    position: relative;
    float: left;
    padding: 30px 20px 20px 80px;
    width: 211px;
}

div#home-services div.item div.product-logo {
    left: 7px;
    top: 15px;
}

div#home-services div.item div.text {
    padding: 15px 0px 20px 0px;
}

div#home-services div.item h3 {
    font-size: 1.4em;
}

div#home-services div.item a.more {
}

/** Template: company ************************************/

div#page-content.company div.content-about {
    position: relative;
    padding: 0px 0px 20px 185px;
    overflow: hidden;
    background: transparent url(../images/layout/line_vertical.png) repeat-y 595px top;
}

/** Image **/

div#page-content.company div.content-about div.image {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 142px;
    height: 167px;
    border: 1px solid #ffffff;
    background: #ffffff url(../images/content/yritys_1.jpg) no-repeat left top;
    box-shadow:  inset 0px 0px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
}

/** Content **/

div#page-content.company div.content-about div.content {
    padding: 0px 45px 0px 0px;
    width: 365px;
    float: left;
}

div#page-content.company div.content-about div.text {
	margin: 25px 0px 0px 0px;
}

/** Side **/

div#page-content.company div.content-about div.aside {
    padding: 0px 0px 0px 50px;
    width: 305px;
    float: left;
}

div#page-content.company div.content-about div.aside div.contact {
	padding: 5px 0px 45px 0px;
	overflow: hidden;
}

div#page-content.company div.content-about div.aside div.contact h3 {
	margin: 0px 0px 10px 0px;
    font-size: 1.4em;
}

div#page-content.company div.content-about div.aside div.contact a {
	display: block;
	float: left;
    padding: 3px 3px 3px 35px;
    background: transparent url(../images/layout/link_icons.png) no-repeat 0px 2px;
    
}

div#page-content.company div.content-about div.aside div.info {
    font-size: 0.9em;
}

div#page-content.company div.content-about div.aside div.info h3 {
	margin: 0px 0px 15px 0px;
    font-size: 1.4em;
}

div#page-content.company div.content-about div.aside div.info span.email {
    display: block;
    padding: 0px 3px 0px 22px;
    background: transparent url(../images/layout/link_icons.png) no-repeat -5px -100px;
}

div#page-content.company div.content-about div.aside div.info span.phone {
    display: block;
    padding: 0px 3px 0px 22px;
    background: transparent url(../images/layout/link_icons.png) no-repeat -5px -51px;
}

/** Template: services ***********************************/

div#page-content.services div.service {
	position: relative;
	margin: 40px 0px 0px 0px;
	padding: 0px 0px 0px 110px;
}

/** Logo **/

div#page-content.services div.service div.product-logo {
    left: 20px;  
    top: 5px;
}

/** Box **/

div#page-content.services div.service div.box {
    background: #ffffff url(../images/layout/line_vertical.png) repeat-y left top;
    overflow: hidden;
}

/** Content **/

div#page-content.services div.service div.content {
	padding: 30px 50px 25px 40px;
    width: 440px;
    float: left;
}

div#page-content.services div.service div.content h2 {
	margin: 0px 0px 20px 0px;
}

/** Side **/

div#page-content.services div.service div.aside {
    padding: 30px 30px 0px 0px;
    width: 280px;
    float: left;
}


/** Image **/

div#page-content.services div.service div.image {
    height: 233px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: left top;
    box-shadow:  inset 0px 0px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.4);
}

div#page-content.services div#hevonen-mukanasi.service div.image {
    background-image: url(../images/content/palvelu_hevonen_1.jpg);
}

div#page-content.services div#psykologi-verkossa.service div.image {
    background-image: url(../images/content/palvelu_verkossa_1.jpg);
}

div#page-content.services div#ryhmat.service div.image {
	background-image: url(../images/content/palvelu_ryhmat_1.jpg);
}

/** Contact **/

div#page-content.services div.service div.contact {
    padding: 30px 0px 0px 0px;
}

div#page-content.services div.service div.contact div.text {
	position: relative;
    padding: 15px 10px 40px 37px;
}

div#page-content.services div.service div.contact div.text span.icon {
	position: absolute;
	left: 0px;
	top: 15px;
	display: block;
	width: 30px;
	height: 25px;
    background: transparent url(../images/layout/link_icons.png) no-repeat 0px 0px;
}

/** Template: contact ************************************/

div#page-content.contact div.contact-form {
	margin: 30px 0px 0px 0px;
	padding: 25px 0px 30px 0px;
    background: #ffffff url(../images/layout/line_horizontal.png) repeat-x left top;
}

/** Header **/

div#page-content.contact div.contact-form div.header {
    padding: 0px 400px 10px 30px;
}

/** Fields **/

div#page-content.contact div.contact-form div.fields {
    position: relative;
    padding: 30px 0px 0px 0px;
}

div#page-content.contact div.contact-form div.fields div.item {
    padding: 0px 0px 10px 30px;
    overflow: hidden;
}

div#page-content.contact div.contact-form div.fields div.item label {
    display: block;
    float: left;
    padding: 5px 0px 0px 0px;
    width: 90px;
}

div#page-content.contact div.contact-form div.fields div.item input.textfield {
    width: 300px;
}

div#page-content.contact div.contact-form div.fields div.message {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 475px;
}

div#page-content.contact div.contact-form div.fields div.message label {
    display: block;
    height: 30px;
}

div#page-content.contact div.contact-form div.fields div.message textarea {
    width: 435px;
    height: 155px;
}

/** Required **/

div#page-content.contact div.contact-form div.required {
	padding: 15px 400px 0px 30px;
	font-size: 0.9em;
}

/** Buttons **/

div#page-content.contact div.contact-form div.buttons {
    float: right;
    padding: 10px 25px 0px 0px;
}

/** Footer **/

div#page-content.contact div.contact-form div.footer {
	clear: both;
    padding: 0px 250px 0px 30px;
}

/** Error **/

div#page-content.contact div.contact-form div.error-text {
    padding: 0px 400px 20px 30px;
}

/** Success **/

div#page-content.contact div.contact-form div.success {
    padding: 3px 400px 0px 30px;
}

/** Template: talk ***************************************/

div#talk-content {
    background: transparent url(../images/layout/line_vertical.png) repeat-y 280px top;
    overflow: hidden;
}

div#talk-content h2 {
    font-size: 1.7em;
}

/** Side **/

div#talk-content div.aside {
	position: relative;
    float: left;
    padding: 5px 30px 50px 40px;
    width: 210px;
}

div#talk-content div.aside div.text {
}

div#talk-content div.aside h2 {
	margin: 0px 0px 20px 0px;
}

div#talk-content div.aside div.product-logo {
    left: 0px;  
    top: 4px;
    width: 24px;
    height: 25px;
    background-position: -85px -14px;
}

/** Content **/

div#talk-content div.content {
    float: left;
    padding: 5px 0px 50px 40px;
    width: 630px;
}

div#talk-content div.content h2 {
    margin: 0px 0px 20px 0px;
}

/** Login **/

div#talk-content div.content div.login-box {
    padding: 20px 30px 25px 30px;
    background: #ffffff url(../images/layout/line_horizontal.png) repeat-x left top;
    overflow: hidden;
}

div#talk-content div.content div.login-box div.error-text {
    padding: 0px 0px 20px 0px;
}

div#talk-content div.content div.login-box div.item {
	padding: 10px 0px 0px 0px;
	overflow: hidden;
}

div#talk-content div.content div.login-box div.item label {
    display: block;
    float: left;
    padding: 7px 10px 0px 0px;
    width: 100px;
}

div#talk-content div.content div.login-box div.item input {
	float: left;
    width: 250px;
}

div#talk-content div.content div.login-box div.buttons {
	padding: 20px 0px 0px 0px;
	width: 385px;
	text-align: right;
}

/** Template: register ************************************/

div#page-content.register div.register-box {
    padding: 20px 30px 25px 30px;
    background: #ffffff url(../images/layout/line_horizontal.png) repeat-x left top;
    overflow: hidden;
}

div#page-content.register div.register-box div.error-text {
    padding: 0px 0px 20px 0px;
}

div#page-content.register div.register-box div.item {
    padding: 10px 0px 0px 0px;
    overflow: hidden;
}

div#page-content.register div.register-box div.item div.help {
    display: block;
    clear: both;
    padding: 5px 100px 10px 160px;
    font-size: 0.9em;
    color: #666666;
}

div#page-content.register div.register-box div.item label {
    display: block;
    float: left;
    padding: 7px 10px 0px 0px;
    width: 150px;
}

div#page-content.register div.register-box div.item input {
    float: left;
    width: 250px;
}

div#page-content.register div.register-box div.buttons {
    padding: 20px 0px 0px 0px;
    width: 435px;
    text-align: right;
}

/** Talk: messages ***************************************/

/** Message list **/

div#page-content.messages div.message-list {
    padding: 10px 0px 30px 0px;
}

div#page-content.messages div.message-list div.icon-1,
div#page-content.messages div.message-list div.icon-2 {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 31px;
    height: 31px;
    background: transparent url(../images/layout/talk_icons.png) no-repeat 0px 0px;
}

div#page-content.messages div.message-list div.icon-2 {
    background-position: 0px -31px;
}

div#page-content.messages div.message-list div.item {
    position: relative;
    padding: 0px 0px 25px 47px;
}

div#page-content.messages div.message-list div.box {
    position: relative;
}

div#page-content.messages div.message-list div.text {
    padding: 20px 30px 0px 35px;
    background: transparent url(../images/layout/talk_box.png) no-repeat left top;
}

div#page-content.messages div.message-list div.from {
	padding: 15px 30px 20px 35px;
    background: transparent url(../images/layout/talk_box.png) no-repeat left bottom;
}

/** New message **/

div#page-content.messages div.new-message {
}

div#page-content.messages div.new-message h3 {
	margin: 0px 0px 0px 2px;
    font-size: 1.4em;
}

div#page-content.messages div.new-message div.error-text {
    padding: 15px 0px 5px 0px;
}

div#page-content.messages div.new-message div.text {
    padding: 15px 200px 25px 2px;
}

div#page-content.messages div.new-message textarea {
    width: 590px;
    height: 300px;
}

div#page-content.messages div.new-message div.buttons {
    float: right;
    padding: 15px 25px 0px 0px;
}

/** Template: default ************************************/

div#page-content.default div.text {
	padding: 25px 0px 50px 0px;
}

/** Module: inbox ****************************************/

/** Listing **/

div#page-content.inbox div.list ul {
	margin: 20px 0px 20px 0px;
	padding: 0px;
	list-style: none;
}

div#page-content.inbox div.list ul li {
	display: block;
	padding: 5px 10px 5px 10px;
	overflow: hidden;
	border-bottom: 1px solid #cccccc;
}

div#page-content.inbox div.list ul li span.special {
	cursor: default;
}

div#page-content.inbox div.list ul li span.latest,
div#page-content.inbox div.list ul li span.messages,
div#page-content.inbox div.list ul li span.institution {
    display: block;
    float: right;
    width: 180px;
    white-space: nowrap;
}

div#page-content.inbox div.list ul li span.latest {
    text-align: right;
}

div#page-content.inbox div.list ul li span.messages {
    width: 100px;
}

/** User info **/

div#page-content.messages div.user-info {
    margin: 40px 0px 40px 0px;
}

div#page-content.messages div.user-info h2 {
    margin: 0px 0px 30px 0px;
}

div#page-content.messages div.user-info strong {
    display: block;
}

div#page-content.messages div.user-info span.answer {
}

div#page-content.messages div.user-info span.no-answer {
	color: #999999;
	font-style: italic;
}

/** Message info **/

div#page-content.messages div.message-info {
    padding: 10px 30px 5px 0px;
}