/* -------------------------------------------------------------- 
   Master.css  
-------------------------------------------------------------- */

@import "reset.css";
@import "typography.css";
@import "forms.css";
@import "tb.css";

/* Widgets
-------------------------------------------------------------- */

.clearfix:after, .FormItem:after, .CheckWrap:after,
.Checks:after, .Checks label:after, .kurssi:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix, .FormItem, .CheckWrap, .Checks, .Checks label, .kurssi { display: inline-block; }
/* IE-mac \*/
	.clearfix, .FormItem, .CheckWrap, .Checks, .Checks label, .kurssi { display: block; }
/* IE-mac */

.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.hide, .HiddenInput, .hidden { display: none; }

/* Layout
-------------------------------------------------------------- */

body, html { width: 100%; height: 100%; }
body { text-align: center; }
#bodywrap { min-height: 100%; }
#mainwrap { position: relative; width: 960px; margin: 0 auto; text-align: left; }

#header { position: relative; width: 960px; height: 440px; }

/* Polku */
ul.breadcrumb, ul.breadcrumb li, ul.breadcrumb ul {
	display: inline; margin: 0; padding: 0; list-style: none outside;
	line-height: 40px; font-size: 11px; color: #787a7a;
}
ul.breadcrumb { display: block; height: 40px; width: auto;  }
ul.breadcrumb li a { color: #dcdfe0; font-weight: normal; }

/* Teemavalitsin */
#themeselector { position: absolute; top: 0px; right: 0px; height: 40px; }
#themeselector .FormItem { padding: 11px 0 0; float: right; }
#themeselector label, #themeselector select { font-size: 11px; width: auto; color: #abadad; }
#themeselector select { background: #141516; border: 1px solid #242426; color: #abadad; margin-right: 0; }

#logo { display: block; position: absolute; left: 360px; top: 110px; margin: 0; padding: 0; width: 240px; height: 180px; }
#logo img { position: relative; margin: 0; padding: 0; border: 0; display: block; }

#navi {
	position: absolute; top: 360px; left: 0px; width: 960px; height: 80px;
	margin: 0; padding: 0; list-style: none outside;
}
#navi li {
	position: relative; float: left; width: 160px; height: 80px;
	list-style: none outside; margin: 0; padding: 0;
	line-height: 80px; text-align: center;
}
#navi li a {
	position: relative; float: left; width: 160px; height: 80px;
	background: url(../i/nav-bg.png) no-repeat left top;
}
#navi li a:hover { background-image: url(../i/nav-hover.png); }
#navi li a span {
	display: block; position: absolute; top: 0px; left: 0px; width: 160px; height: 80px; cursor: pointer;
	background: url(../i/nav-t-etusivu.png) no-repeat left top; overflow: hidden; text-indent: -1000em;
}
#navi li#nav-etusivu a span { background-image: url(../i/nav-t-etusivu.png); }
#navi li#nav-kurssit a span { background-image: url(../i/nav-t-kurssit.png); }
#navi li#nav-tilat a span { background-image: url(../i/nav-t-tilat.png); }
#navi li#nav-kalusto a span { background-image: url(../i/nav-t-kalusto.png); }
#navi li#nav-henkilot a span { background-image: url(../i/nav-t-henkilot.png); }
#navi li#nav-yhteys a span { background-image: url(../i/nav-t-yhteys.png); }

#main {
	position: relative; width: 960px;
	background: #edeff0 url(../i/main-top.gif) repeat-x left top;
}

#content { position: relative; background: url(../i/3cols-bg.jpg) repeat-y left top; }
.main-top { position: relative; z-index: 1; height: 260px; background: url(../i/3cols-top.jpg) no-repeat left top; }
.main-bottom { position: relative; z-index: 1; clear: both; height: 80px; background: url(../i/3cols-bottom.jpg) no-repeat left top; }

.kuntajako #content, .kalusto #content, .kurssit #content, .uutiset #content { background: url(../i/2cols-bg.jpg) repeat-y left top; }
.kuntajako .main-top, .kalusto .main-top, .kurssit .main-top, .uutiset .main-top { background: url(../i/2cols-top.jpg) no-repeat left top; }
.kuntajako .main-bottom, .kalusto .main-bottom, .kurssit .main-bottom, .uutiset .main-bottom { background: url(../i/2cols-bottom.jpg) no-repeat left top; }

.col { position: relative; float: left; width: 280px; padding: 0 20px; margin: -240px 0 -60px; min-height: 340px; z-index: 2; }

#footer { position: relative; width: 960px; height: 40px; padding-top: 15px; padding-bottom: 20px; text-align: center; }
#main-bbg {
	position: absolute; top: 0px; left: 0px; width: 960px; height: 10px;
	background: url(../i/main-bottom.png) no-repeat left top;
}
.bottomyhteys { margin: 0 0 5px; padding: 0; color: #aaa; font-size: 11px; }

/* Sisältösivut
-------------------------------------------------------------- */

.doubleleft { width: 600px; }

.kuntajako-content { position: relative; float: left; width: 640px; margin: -240px 0 -60px; min-height: 340px; z-index: 2; }
.kuntajako-content .col { min-height: 0; margin: 0; z-index: 3; }
.kuntajako-content .kajaani {
	margin-right: -1px; padding-right: 21px;
	background: url(../i/2cols-splitter.gif) repeat-y right top;
}
.kuntajako-content .sotkamo {
	margin-left: -1px; padding-left: 21px;
	background: url(../i/2cols-splitter.gif) repeat-y left top;
}

ul.sisaltokuvat { margin: 0 -5px; padding: 0; list-style: none outside; }
ul.sisaltokuvat li { position: relative; float: left; margin: 0 5px 9px; padding: 0; width: 135px; height: 135px; }
ul.sisaltokuvat li a { position: relative; float: left; margin: 0; padding: 4px; background: #FFF; border: 1px solid #c3c6c7; }
ul.sisaltokuvat li a:hover { border-color: #73787a; background: #d7dadb; }

.kurssi { float: left; clear: left; width: 455px; padding: 9px 0; margin: 8px 0 9px; }
.kurssi p { font-size: 14px; margin: -9px 0 0; padding: 0 0 9px; }
.kurssi dl { margin: 0; padding: 0; }
.kurssi dt { float: left; clear: left; width: 100px; margin: 0; padding: 0; clear: both; }
.kurssi dd { display: block; margin-left: 105px; }

.reunuskuvat { float: right; width: 135px; }
.reunakuva {
	display: block;
	margin: 48px 0 72px; padding: 4px; background: #FFF;
	border: 1px solid #c3c6c7; 
}

/* Uutiset
-------------------------------------------------------------- */

.uutiset-content { position: relative; float: left; width: 640px; margin: -240px 0 -60px; min-height: 340px; z-index: 2; }
.uutiset-content .col { min-height: 0; margin: 0; z-index: 3; }

.uutiset-content .uutis-palsta { width: 360px; }
.uutiset-content .uutis-lista { width: 220px; padding-left: 0; }

.uutis-lista h2 {
	margin: 0; padding: 18px 20px;
	background: url(../i/kalustolistat-top.gif) no-repeat left top;
}
.uutis-lista ul {
	margin: 0 0 18px; padding: 0 20px 18px;
	background: url(../i/kalustolistat-bottom.gif) no-repeat left bottom;
}
.uutis-lista ul li {
	display: block; margin: 0; padding: 0 0 9px;
}
.uutis-lista ul li a {
	font-size: 11px;
}

/* Duunarit
-------------------------------------------------------------- */

#duunariwrapperi { margin: 0 -9px; width: 618px; }
.duunari { float: left; width: 255px; height: 270px; margin: 0 9px 18px; padding: 17px; border: 1px solid #c3c6c7; background: #dadddf; }
.duunari img { display: block; margin: 0; padding: 0; border: 1px solid #c3c6c7; }
.duunari h2 { padding: 9px 0; margin: 0; }
.duunari h4 { margin: 0; padding: 0; }

/* Kalustosivu
-------------------------------------------------------------- */

.kalusto-content { position: relative; float: left; width: 640px; margin: -240px 0 -60px; min-height: 340px; z-index: 2; }
.kalusto-content .col { min-height: 0; margin: 0; z-index: 3; }

.kalusto-content .kalusto-selain { width: 360px; }
.kalusto-content .kalusto-lista { width: 220px; padding-left: 0; }

.kalusto-lista h2 {
	margin: 0; padding: 18px 20px;
	background: url(../i/kalustolistat-top.gif) no-repeat left top;
}
.kalusto-lista ul {
	list-style: none outside; margin: 0 0 18px; padding: 0 20px 18px;
	background: url(../i/kalustolistat-bottom.gif) no-repeat left bottom;
}
.kalusto-lista ul li {
	display: block; margin: 0; padding: 0;
	height: 36px; width: 100%;
	white-space: nowrap; overflow: hidden;
}
.kalusto-lista ul li a {
	position: relative; float: left; width: auto; height: 36px;
}
.kalusto-lista ul li a.kalustolista-tn {
	width: 41px; height: 26px; margin: 0 5px 0 0; padding: 2px 3px 8px;
	background: url(../i/kalustolistat-tnbg.gif) no-repeat left top;
}
.kalusto-lista ul li a.kalustolista-tn:hover { padding: 0 1px 6px; width: 45px; height: 30px; }
.kalusto-lista ul li a.kalustolista-tn:hover img { border: 2px solid #3e3f40; }
.kalusto-lista ul li a.kalustolista-nimi {
	font-size: 11px; font-weight: bold; text-transform: uppercase;
	letter-spacing: 1px; color: #5a5b5c; padding: 0; line-height: 28px;
	text-decoration: none;
}
.kalusto-lista ul li a.kalustolista-nimi:hover { color: #3e3f40; }

/* Kalustot  */

#kalustokuvat {
	width: 356px; height: 237px; padding: 2px 3px 4px; margin: 0 -1px 9px;
	background: url(../i/kalustoselain-bg.gif) no-repeat left top; position: relative;
}
#kalustokuvat .jcarousel-clip { width: 356px; height: 237px; overflow: hidden; }
#kalustoselain-iso {
	list-style: none outside; width: 356px; height: 237px; overflow: hidden;
	padding: 0; margin: 0; position: relative; overflow: hidden;
}
#kalustoselain-iso li {
	position: relative; float: left; list-style: none outside;
	width: 356px; height: 237px; margin: 0; padding: 0;
}
#kalustoselain-iso li a { text-decoration: none; }
#kalustoselain-iso li a, #kalustoselain-iso li a img { 
	position: relative; float: left; display: block; z-index: 3;
	margin: 0; padding: 0; width: 356px; height: 237px;
}
#kalustoselain-iso li a span {
	position: absolute; display: block; width: 356px; height: 36px; left: 0px; bottom: 0px; z-index: 4;
	background: #121314; opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); line-height: 36px;
	text-align: center; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #c1c5c7;
}
#kalustokuvat .jcarousel-next {
	position: absolute; right: 0px; bottom: 0px; width: 36px; height: 36px; background: blue;
	background: url(../i/next.png) no-repeat left top;
}
#kalustokuvat .jcarousel-prev {
	position: absolute; left: 0px; bottom: 0px; width: 36px; height: 36px; background: red;
	background: url(../i/prev.png) no-repeat left top;
}
#kalustokuvat .jcarousel-next:hover { background-image: url(../i/next-hover.png); }
#kalustokuvat .jcarousel-prev:hover { background-image: url(../i/prev-hover.png); }
.jcarousel-prev-disabled, .jcarousel-next-disabled { opacity: 0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); }

#selain-ohje { font-size: 11px; text-align: center; color: #666; }

/* Oikean palstan matskut
-------------------------------------------------------------- */

#kurssinosto-kuvake { display: block; float: right; padding: 0; margin: 0 -3px 4px 0; }
#kurssinosto-otsikko { line-height: 27px; width: 140px; overflow: visible; margin: -5px 0 5px; padding: 0; }
#kurssinosto-nappi, #kalustonosto-nappi, #uutisnosto-nappi {
	position: relative; display: block; clear: both;
	width: 282px; height: 74px; padding: 0; margin: 0 -1px -2px; overflow: hidden; text-indent: -1000em;
	background: url(../i/kurssinosto-nappi.png) no-repeat left top;
}
#uutisnosto-nappi { height: 56px; background-image: url(../i/uutisnosto-nappi.png); }

/* Kalustot @ oikea palsta */

#kalustonostot {
	width: 276px; height: 184px; padding: 2px 3px 4px; margin: 0 -1px 8px;
	background: url(../i/kalustonosto-bg.png) no-repeat left top; position: relative;
}
#kalustonostot .jcarousel-clip { width: 276px; height: 184px; overflow: hidden; }
#kalustoselain-pieni {
	list-style: none outside; width: 276px; height: 184px; overflow: hidden;
	padding: 0; margin: 0; position: relative; overflow: hidden;
}
#kalustoselain-pieni li {
	position: relative; float: left; list-style: none outside;
	width: 276px; height: 184px; margin: 0; padding: 0;
}
#kalustoselain-pieni li a { text-decoration: none; }
#kalustoselain-pieni li a, #kalustoselain-pieni li a img { 
	position: relative; float: left; display: block; z-index: 3;
	margin: 0; padding: 0; width: 276px; height: 184px;
}
#kalustoselain-pieni li a span {
	position: absolute; display: block; width: 276px; height: 36px; left: 0px; bottom: 0px; z-index: 4;
	background: #121314; opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); line-height: 36px;
	text-align: center; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #c1c5c7;
}
#kalustonostot .jcarousel-next {
	position: absolute; right: 0px; bottom: 0px; width: 36px; height: 36px; background: blue;
	background: url(../i/next.png) no-repeat left top;
}
#kalustonostot .jcarousel-prev {
	position: absolute; left: 0px; bottom: 0px; width: 36px; height: 36px; background: red;
	background: url(../i/prev.png) no-repeat left top;
}
#kalustonostot .jcarousel-next:hover { background-image: url(../i/next-hover.png); }
#kalustonostot .jcarousel-prev:hover { background-image: url(../i/prev-hover.png); }
.jcarousel-prev-disabled, .jcarousel-next-disabled { opacity: 0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); }

#kalustonosto-nappi { height: 56px; background-image: url(../i/kalustonosto-nappi.png); }

/* Karusellin pakolliset */

.jcarousel-container { position: relative; }
.jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; }
.jcarousel-list { z-index: 1; overflow: hidden; position: relative; }
.jcarousel-item { float: left; list-style: none outside; width: 75px; height: 75px; }
.jcarousel-next { z-index: 5; cursor: pointer; }
.jcarousel-prev { z-index: 5; cursor: pointer; }