/* Style sheet for Kestovaippayhdistys ry
 * Screen layout
 * Copyright © 2005 Marko Mäkelä
 */

@import "common.css";

body	{
	color: black;
	background-color: #eee;
	background-image: url(images/leftbg.png);
	background-repeat: repeat-y;
}

html	{
	border: 0; margin: 0; padding: 0;
}

h1, h2, h3 {
	color: black;
}

/* Logo header */
h1.logo {
	margin: 0; padding: 0; line-height: 0;
	color: white;
	margin: 0; border: 0; padding: 0; height: 105px;
	background-image: url(images/headerbg.png); /* 1px×105px */
	background-repeat: repeat-x;
}
h1.logo img {
	margin-left: 14px;
}
h1.logo span.line {
	display: block;
	position: absolute;
	left: 0; right; 0; top: 12px;
	border-width: 2px 0 0;
	border-style: solid;
	border-color: #bbddee;
	width: 100%;
	height: 0px;
}
h1.logo span {
	position: absolute;
	left: 174px /* 14px + 146px + 14px */; right: 0; top: 0;
	text-align: center;
}
h1.logo span img {
	padding: 32px 0; /* center vertically: (105px-40px)/2=32px */
}

/* Menu layout begins */

p.menu {
	background-color: #13829f;
	color: white;
	font-weight: bold;
	font-variant: small-caps;
	margin: 0; border: 0;
	padding: .2em 0 .2em 174px /* 14px + 146px + 14px */;
	line-height: 125%;
	border-width: 0 0 2px;
	border-style: solid;
	border-color: #bbddee;
}

.menu a	{
	padding: 0 .5em;
	background-color: #1da7cb;
}
.menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
	color: white;
	text-decoration: none;
}
.menu a:link, .menu a:visited {
 	background-color: #13829f;
}
.menu a:hover, .menu a:active {
	background-color: #1da7cb;
}

div.submenu {
	float: left;
	width: 11em;
	margin: 3em 1em 0 0;
	text-align: right;
	color: #13829f;
}

.submenu a:link, .submenu a:visited {
 	color: black;
	text-decoration: underline;
}
.submenu a:hover, .submenu a:active {
	color: #13829f;
	background-color: transparent;
	text-decoration: none;
}

/* Menu layout ends */

img.bleft, img.bright	{
	padding: 3px;
}

/* Hyperlinks */
a:link, a:visited	{
	color: #13829f;
	text-decoration: underline;
}
a:hover, a:active	{
	color: #1da7cb;
	text-decoration: none;
}

/* Two-column layout */
div.columns {
	margin: 0 auto 0 14px;
	display: block;
}
div.left {
	float: left;
	width: 60%;
	max-width: 52em;
	padding: 1em;
	margin: 0;
}
div.left h2 {
	border-style: solid;
	border-color: black;
	border-width: 0 0 1px 0;
}
div.left p {
	margin: 0 0 .5em;
}
div.right {
	float: left;
	width: 30%;
	max-width: 25em;
	padding: 0;
	margin: 1em 0;
	border: 1px solid #82bcde;
}
div.right p {
	text-align: justify;
}

div.highlight {
	display: inline;
}
div.highlight p { margin: 0 0 1em; }
div.highlight div.in { padding: 1em; }
div.highlight h3 {
	clear: right;
	display: block;
	padding: .5em; margin: 0; border: 0;
	background-image: url(images/hgradient.png);
	background-repeat: repeat-x;
	background-color: #eee;
}
div.highlight img {
	display: block;
	float: right;
	padding: 0 0 1em 1em;
}

div.content {
	display: block;
	float: left;
	max-width: 72em;
	width: 68%;
	padding: 1em;
	margin: 0;
	border: 0;
}
div.content p {
	text-align: justify;
}