@charset "UTF-8";

/* CSS Document */

body {
	color: #222222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-image: url(/kodika/kodika_pohja.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #878787;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, img {
	margin: 0;
	padding: 0;
	border: 0;
}
img {
	display: block;
}
p {
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
}

ul {
	padding: 0px;
	margin-left: 25px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 12px;
	line-height: 130%;
	/*text-transform: uppercase;*/
}

h2 {
	font-size: 16px;
	font-weight: bold;
	padding-top: 0;
	margin-top: 20px;
	margin-bottom: 10px;
}

h3 {
	font-size: 14px;
	font-weight: bold;
	padding-top: 0;
	margin-top: 0px;
	margin-bottom: 4px;
}
h4 {
	font-size: 12px;
	font-weight: bold;
}

a,  a:link {
	color: #CC3333;
	text-decoration: none;
}

a:visited {
	color: #CC3333;
	text-decoration: none;
}

a:hover {
	color: #0099CC;
	text-decoration: underline;
}

a:focus {
	color: #CCCCCC;
}

a:active {
	color: #000000;
}

.kuvateksti {
	color: #666666;
	font-style: italic;
}

#wrapper {
	width: 800px;
	margin-top: 65px;
	margin-right: auto;
	margin-left: auto;
}

#page {
	background-color: #FFFFFF;
	width: 800px;
	float: left;
	border: solid 3px #dfdfdf;
}

#header {
	background-color: #FFFFFF;
	height: 100px;
	width: 800px;
	float: left;
}

#logo a {
	background-repeat: no-repeat;
	height: 100px;
	width: 800px;
	float: left;
	cursor: pointer;
	padding: 0px;
	background-image: url(/kodika/kattor_logo_4v.jpg);
	background-position: center center;
	display: inline;
}

#logo a:hover {
	text-decoration: none;
}

#logo a span {
	visibility: hidden;
}

#header-flash {
	float: right;
	height: 70px;
	width: 600px;
}

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

#video-area {
	float: right;
	height: 325px;
	width: 600px;
}

#video {
	float: right;
	height: 285px;
	width: 600px;
}
#contact {
	float: left;
	padding: 20px;
	padding-top: 0px;
}
#contact p {
	margin-bottom: 7px;
}
#contact h2 {
	margin-top: 13px;
}
#contact h4 {
	margin-top: 5px;
}

#left {
	float: left;
	margin: 0;
	padding: 0;
	border: 0px solid #f0f;
}
#right {
	float: right;
	margin: 0;
	padding: 0;
}
.prodimg {
	float: left;
	margin: 0;
	padding: 10px;
}
.prod {
	float: right;
	margin: 0;
	padding: 10px;
	background: url(/kodika/images/fade_bg.gif) 0 bottom repeat-x;
}
#bottom {
	float: left;
	background: transparent;
	background-image: url(/kodika/images/Kodika_7_yhteys.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
}
#center {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

#content-wrap {
	float: right;
	width: 600px;
}

#content {
	float: right;
	width: 559px;
	padding: 20px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
}

#content-no-subnavi {
	float: right;
	width: 559px;
	padding: 20px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	border-top: 1px solid #CCCCCC;
}

.image-right {
	float: right;
	margin-bottom: 15px;
	margin-left: 15px;
	margin-top: 5px;
}

.image-left {
	float: left;
	margin-bottom: 15px;
	margin-right: 15px;
	margin-top: 0px;
}

/* Navigation */
#navigation-wrap {
	text-align: center;
	width: 800px;
	font-size: 13px;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	float: left;
	background-color: transparent;
	background-image: url(/kodika/navi_bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}

#navigation {
	position: relative;
	display: block;
	padding-left: 10px;
	height: 27px;
}

ul.navi {
	margin: 0px;
	padding: 0;
	list-style-type: none;
	width: auto;
	
}

ul.navi li {
	display: block;
	float: left;
	margin: 0 1px 0 0;
}

ul.navi li a {
	display: block;
	float: left;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 5px;
	padding-right: 4px;
	padding-bottom: 0;
	padding-left: 4px;
	
}
ul.navi li a:visited {
	color: #fff;
}
ul.navi li a:visited.current {
	color: #aaa;
}
ul.navi li a:hover {
	color: #aaa;
}
ul.navi li a.current {
	color: #aaa;
}
ul.navi li.divider {
	display: none;
}
#subnavi ul li.divider {
	display: none;
}


/*  Subnavi */

#subnavi {
	position: relative;
	display: block;
	font-size: 14px;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	float: left;
	background-color: transparent;
	background-image: url(/images/subnavi-bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 40px;
	width: 600px;
}

#subnavi-small {
	font-size: 12px;
}

#subnavi ul {
	margin: 0px;
	padding: 0;
	list-style-type: none;
	width: auto;
}

#subnavi ul li {
	display: block;
	float: left;
	margin: 0 1px 0 0;
}

#subnavi ul li a {
	display: block;
	float: left;
	color: #FFFFFF;
	text-decoration: none;
	height: 28px;
	padding-top: 12px;
	padding-right: 13px;
	padding-bottom: 0;
	padding-left: 13px;
}

#subnavi ul li a:hover {
	color: #fff;
	background: transparent url(/images/subnavi-hover.gif) repeat-x top center;
}

#subnavi ul li a.current {
	color: #fff;
	background: transparent url(/images/subnavi-active.gif) repeat-x top center;
}

#sections {
	float: left;
	width: 800px;
}

#padded {
	float: left;
	padding: 20px;
}

.padded {
	float: left;
	padding: 0 20px 20px 20px;
}

#padded-top {
	float: left;
	padding: 20px;
	padding-top: 0px;
}

/* Drop down menu */

.jqueryslidemenu{
font-size: 14px;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	float: left;
	background-color: transparent;
	background-image: url(/images/subnavi-bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 40px;
	width: 600px;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
	float: left;
	color: #FFFFFF;
	text-decoration: none;
	height: 28px;
	padding-top: 12px;
	padding-right: 13px;
	padding-bottom: 0;
	padding-left: 13px;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{

color: #fff;
	background: transparent url(/images/subnavi-active.gif) repeat-x top center;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{

	


}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
	background-image: url(/images/bullet-navi.gif);
	background-repeat: no-repeat;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
font: normal 13px ;
width: 150px;
background-color: #F29039;
	padding-left: 20px;
	padding-top: 5px;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.jqueryslidemenu ul li ul li a:hover{
	color: #FFFFFF;
	background: #F29039 url(/images/bullet-navi-active.gif) no-repeat left 6px ;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* News */

#news {
	float: left;
	width: 200px;
}

#news h2, .about h2 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 0px;
	text-transform: uppercase;
	/*border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #FF6600;*/
	margin-top: 0px;
	padding-bottom: 10px;
}

.news-content {
	padding: 12px;
	padding-right: 8px;
	padding-top: 10px;
	font-size: 12px;
}
#news p {
	margin-bottom: 8px;
}
.dropcontent{
	width: 180px;
	/*border: 1px solid black;
	background-color: #DFDFFF;
	padding: 3px;*/
	display:none;
}

.tm-content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.2em;
	color: #fff;
	background: #222;
	padding: 12px;
	padding-bottom: 5px;
	height: 85px;
}
.about-content {
	padding: 12px;
	padding-left: 20px;
	padding-right: 20px;
}

#basic {
	float: left;
	border-top: solid 2px #dfdfdf;
	border-right: solid 2px #dfdfdf;
}
#basic p {
	padding: 0;
	line-height: 15px;
}
.basic-content {
	/*height: 92px;*/
	padding: 6px;
	padding-left: 10px;
	padding-bottom: 0px;
}

#ad {
	float: left;
	width: 200px;
}

#about {
	float: left;
	width: 400px;
}

#about h1 {
	font-size: 26px;
	font-weight: normal;
	margin-bottom: 10px;
	/*
	text-transform: uppercase;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #FF6600;
	*/
	margin-top: 0px;
	padding-bottom: 0px;
}

#element {
	float: left;
	height: 85px;
	width: 800px;
}

#footer {
	background: transparent;
	height: 25px;
	width: 800px;
	float: left;
	text-align: center;
	margin-bottom: 20px;
}

.footer-content {
	margin-top: 6px;
	font-size: 12px;
}

/* Hinnasto */

#hinnasto {
	width: 340px;
	padding: 0;
	margin: 15px 0;
}

th {
	font-weight: bold;
	font-size: 12px;
	color: #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #fff url(/images/taulukko_otsikko_tausta.gif) repeat-x;
}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #ccc;
	background: none;
}

td {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #fff;
	padding: 6px 6px 6px 12px;
}


td.alt {
	background: #f8f8f8;

}

th.spec {
	border-left: 1px solid #ccc;
	border-top: 0;
	background: #fff url(/images/bullet1.gif) no-repeat;
	font: bold 12px;
	color: #333;
}

th.specalt {
	border-left: 1px solid #ccc;
	border-top: 0;
	background: #f8f8f8 url(/images/bullet2.gif) no-repeat;
	font: bold 12px;
	color: #333;
}

/* Nostot */

.bottomimage {
	float: left;
}

#nosto {
	background: #FFFFFF url(/images/nosto_normaali.jpg) no-repeat 0 bottom;
	width: 198px;
	height: 230px;
	float: right;
	margin-bottom: 10px;
	border: 1px solid #CCCCCC;
	margin-left: 15px;
}
#nosto h2 {
	font-size: 16px;
	font-weight: bold;
	margin: 5px 0px 10px 10px;
}
#nosto p {
	font-size: 12px;
	font-weight: bold;
	margin: 0px 0px 2px 10px;
}
#nosto ul {
	font-size: 12px;
	font-weight: bold;
	margin: 0px 0px 0px 25px;
}
#nosto .decimal {
	list-style-type: decimal;
	margin: 0px 0px 0px 29px;
}

.content-left {
	float: left;
	width: 340px;
	margin: 0px 0px 0px 0px;
	border:solid 0px #dddddd;
}

.content-right {
	float: right;
	width: 180px;
	border:solid 0px #dddddd;
}

table.contact {
	font-size: 12px;
	border: 0;
	margin: 10px 0px 5px 0px;
}
table.contact td {
	border: 0;
	padding: 0px 10px 3px 0px;
}
table.contact input {
	width: 250px;
}

#gallery {
	float:left;
	margin:0px 2px 5px 2px;
	padding:0px 0px 0px 0px;
	border:solid 0px #dddddd;
}
#images {
	/*width:100%;*/
	float:left;
	margin:0px;
	padding:0px;
	border:solid 0px #dddddd;
}
#gallery .image {
	float:left;
	margin:4px 4px 4px 4px;
	padding:4px 4px 4px 4px;
	border:solid 0px #dddddd;
	vertical-align:middle;
}
#scroll {
	float:left;
	font-size: 16px;
	font-weight: bold;
	margin:10px 0px 10px 4px;
	padding:4px 4px 4px 4px;
	border:solid 0px #aaaaaa;
}