/*
 * Rauha 2 Webdesign
 * Tyylitiedosto näyttölaitteille
 * Emil Virkki 2006
 */

/***** Viewport *****/
 
html,body {
	margin: 0;
	padding: 0;
}

body {
	background: repeat-x url(bodybg.png) rgb(190,190,190);
	font-family: arial,sans-serif;
	font-size: 90%;
	text-align: center;
	color: black;
}

/***** Sivun päärakenne-elementit *****/

#main {
	width: 44em;
	max-width: 95%;
	background: repeat-x url(headerbg.png) white;
	margin: 0 auto 1em;
	text-align: left;
}

#head {
	background: no-repeat url(logo.png);
}

#head p {
	margin: 0;
	height: 108px;
	background: no-repeat 100% 0 url(topright.png);
}

#head p a {
	padding: 35px 10px 0 0;
	display: block;
	text-align: right;
	font-size: 90%;
}

#nav, #contentarea {
	border-left: 6px solid rgb(120,169,0);
	border-right: 6px solid rgb(120,169,0);
}

#nav {
	margin-top: -4px;
	height: 2em;
}

#nav ul, #footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav ul {
	margin-left: 7.5em; /* Koko leveys on 28em */
}

#nav ul li {
	display: block;
	width: 6em;
	float: left;
	background: rgb(230,239,208);
	padding: 0;
}

#nav a {
	display: block;
	text-decoration: none;
	padding: 0.3em 0;
	text-align: center;
	font-weight: bold;
}

#nav li.etusivu {
	width: 5em;
	background: 0 100% no-repeat url(navcorner-left.png) rgb(230,239,208);
}

body.etusivu #nav li.etusivu {
	background: 0 100% no-repeat url(active-navcorner-left.png) rgb(239,245,224);
	text-decoration: underline;
}

#nav li.palvelut {
	width: 5em;
}

body.palvelut #nav li.palvelut {
	background: rgb(239,245,224);
	text-decoration: underline;
}

#nav li.miksi {
	width: 11em;
}

body.miksi #nav li.miksi {
	background: rgb(239,245,224);
	text-decoration: underline;
}

#nav li.yhteys {
	width: 7.5em;
	background: 100% 100% no-repeat url(navcorner-right.png) rgb(230,239,208);
}

#nav a:link {
	color: rgb(74,106,0);
}

#nav a:visited {
	color: rgb(50,50,50);
}

#nav a:hover, #nav a:active {
	color: rgb(120,169,0);
}

body.yhteys #nav li.yhteys {
	background: 100% 100% no-repeat url(active-navcorner-right.png) rgb(239,245,224);
	text-decoration: underline;
}

#contentarea {
	line-height: 1.5em;
	padding: 0 2.4em 1em 2.4em;
}

body.yhteys #contentarea {
	background: 5px 0.6em no-repeat url(kyltti.jpg);
	padding-left: 180px;
}

#contentarea h1 {
	margin-top: 0;
	padding-top: 0.5em;
}

#footer {
	font-size: 90%;
	color: rgb(70,70,70);
	text-align: center;
	background: 0 100% no-repeat white url(bottomcorner-left-wide.png);
}

#footer ul {
	background: 100% 100% no-repeat url(bottomcorner-right.png);
	padding: 0 0 12px 0;
}

#footer li {
	display: inline;
	margin:  0.2em 0.2em;
	background: none;
}

/***** Leipätekstin elementit *****/

/* Linkit */

a, a:link {
	color: rgb(100,140,0);
	color: rgb(74,106,0);
}
a:visited {
	color: rgb(50,50,50);
}
a:hover, a:active {
	color: rgb(120,169,0);
}

/* Otsikot */

h1 {
	color: rgb(100,140,0);
	border-bottom: 2px solid rgb(230,230,230);
	font-size: 140%;
	clear: both;
}

h2 {
	color: rgb(50,50,50);
	font-size: 120%;
}

h3 {
	font-size: 100%;
}

/* Taulukot */

table {
	width: 100%;
	border-collapse: collapse;
}

th {
	text-align: left;
}

caption {
	font-style: normal;
	font-weight: bold;
	text-align: left;
	border-bottom: 2px solid rgb(230,230,230);
	font-size: 120%;
	color: rgb(100,140,0);
}

tr.row1 td {
	background: rgb(230,230,230);
}

/* Korostukset ja muut inline-elementit */

strong {
	color: rgb(50,50,50);
}

ins {
	text-decoration: none;
	background: rgb(230,230,230);
}

address {
	font-style: normal;
}

/* Muut leipiselementit */

img {
	float: left;
	border: 6px solid rgb(120,169,0);
	margin: 5px 5px 5px 0;
}

img.special { /* Ei-esittävät tai muuten erityiset kuvat */
	border: 0;
	display: none;
}

hr {
	border: 0;
	color: rgb(120,169,0);
	height: 3px;
	background: rgb(120,169,0);
	padding: 0;
}

blockquote {
	background: 1px 3px no-repeat url(quote.png);
	padding-left: 50px;
	margin: 0;
}

ul {
	margin: 0;
	padding: 0 0 0 1.5em;
}

ul li {
	list-style: none;
	display: block;
	padding-left: 15px;
	background: 2px 0.5em no-repeat url(bullet.png);
	margin-bottom: 0.3em;
}

dt {
	color: rgb(50,50,50);
}

pre.code {
	background: rgb(230,230,230);
}

/* Lomakkeet */

p.textfield label, p.select label {
	width: 30%;
	display: block;
	float: left;
}

p.longtextfield label {
	width: 100%;
	display: block;
}

p.textfield input, p.select select {
	width: 60%;
}

p.longtextfield input {
	width: 90%;
}

fieldset {
	border: 2px solid rgb(230,230,230);
	width: 60%;
	padding: 0.2em 1% 0.5em 1%;
}
p.textarea label {
	 display: block;
	 width: 99%;
}

textarea {
	width: 90%;
}

legend {
	font-weight: bold;
	color: rgb(50,50,50);
}

fieldset p.radio, fieldset p.checkbox {
	margin: 0.5em 0 0 0;
}

input#name {
	width: 40%;
}

/* Väliaikaiset tyylit */

#int {
	background: 0 0 no-repeat url(/graph/intti.png) rgb(91,94,25) ;
	color: rgb(242,242,86);
	border-top: 1em solid white;
	border-bottom: 0.5em solid white;
}

#int p {
	margin: 0 1.2em 1em;
}

#int p.intro {
	height: 100px;
	text-indent: -999em;
	margin: 0;
}

.yhteys #int {
	margin: 0 -1em;
}

body.yhteys #contentarea {
	background: 7px 1em no-repeat url(kyltti.jpg);
	padding-left: 180px;
}