body {
text-align: center;
margin: 0px;
font-family: "Lucida Grande","Lucida Sans Unicode","Lucida",tahoma, verdana, arial, sans-serif;
background: url('http://www.zarecons.net/img/bodybg.gif');
background-repeat: repeat-x;
background-color: #cdc5b9;
color: #000;
font-size: 12px;
}

.hide {
display: none;
}

.block {
display: block;
}

.inline {
display: inline;
}

div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, img, p, td {
margin: 0;
padding: 0;
}

p, h3, h4, h5, h6  {
margin: 1em 0;
}

h2 {
font-size: 18px;
margin: 0.8em 0;
}

h3 {
font-size: 14px;
}

h4 {
font-size: 12px;
}

h1{
margin: 0.67em 0;
}

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

h3 a {
color: #000;
}

a:hover {
text-decoration: underline;
}

ul {
list-style: none;
}

div#topbar {
background-color: #fff;
border-bottom: 1px solid #000;
padding: 5px 20px;
font-size: 11px;
height: 15px;
}

#topbar li {
float: left;
padding: 0 10px;
}

#topbar form {
text-align: right;
}

div#wrapper {
position: absolute;
left: 1%;
right: 1%;
width: 983px;
margin: 10px auto;
text-align: left;
background-color: transparent;
color: #000;
}

div#contents {
position: relative;
left: -5px;
background: #fff url('http://www.zarecons.net/img/mainbg_left.gif') repeat-y;
color: #000;
width: 993px;
padding: 1px 0px;
}

div#footer {
padding-left: 15px;
color: #A89B8A;
position: relative;
left: 0;
top: 0;
height: 84px;
}

#footer div.yhteystiedot {
color: #655;
position: absolute;
left: 15px;
}

#footer a {
color: #655;
font-weight: bold;
}

#footer div.tilastot {
position: absolute;
right: 15px;
text-align: right;
}

#contents div.shader {
background: transparent url('http://www.zarecons.net/img/mainbg_right.gif') right repeat-y;
padding: 10px 5px;
overflow: auto;
}

div.leftbar {
background: url('http://www.zarecons.net/img/left_separator.gif') 257px 20px no-repeat;
}

div#header {
position: relative;
background: transparent url('http://www.zarecons.net/img/navibg_main.gif') bottom repeat-x;
}

#header div.left {
position: absolute;
left: -5px;
width: 993px;
height: 5px;
bottom: 0;
background: transparent url('http://www.zarecons.net/img/navibg_left.gif') no-repeat;
}

#header div.right {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 5px;
background: transparent url('http://www.zarecons.net/img/navibg_right.gif') no-repeat;
}

#contents div.topleft {
position: absolute;
top: 0;
left: 0;
width: 993px;
height: 5px;
background: transparent url('http://www.zarecons.net/img/mainbg_topleft.gif') no-repeat;
}

#contents div.topright {
float: right;
width: 10px;
height: 5px;
background: transparent url('http://www.zarecons.net/img/mainbg_topright.gif') no-repeat;
}

#contents div.bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 993px;
height: 10px;
background: #fff url('http://www.zarecons.net/img/mainbg_bottom.gif') bottom repeat-x;
}

#contents .bottom div.bottomleft {
width: 10px;
height: 10px;
position: absolute;
left: 0;
top: 0;
background: transparent url('http://www.zarecons.net/img/mainbg_bottomleft.gif') no-repeat;
}

#contents .bottom div.bottomright {
width: 10px;
height: 10px;
position: absolute;
right: 0px;
top: 0px;
background: transparent url('http://www.zarecons.net/img/mainbg_bottomright.gif') no-repeat;
}

/* LOGO */
h1#logolink {
background: url('http://www.zarecons.net/img/newlogo.gif') no-repeat;
width: 304px;
height: 60px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
margin: 0 0 20px;
margin-left: 17px;
}
/* LOGO END */

/* NAVI */
ul#mainnavi {
height: 25px;
overflow: hidden;
margin-left: 20px;
}

#mainnavi li {
background: #a89b8a url('http://www.zarecons.net/img/navi_normal_left.gif') no-repeat;
height: 25px;
margin: 0 1px;
float: left;
}

#mainnavi li a {
background: transparent url('http://www.zarecons.net/img/navi_normal_right.gif') right no-repeat;
display: block;
padding: 5px 10px;
height: 15px;
text-transform: uppercase;
font-size: 11px;
color: #000;
text-decoration: none;
}

#mainnavi li.hover {
background: #00809c url('http://www.zarecons.net/img/navi_hover_left.gif') no-repeat;
}

#mainnavi li.hover a {
background: transparent url('http://www.zarecons.net/img/navi_hover_right.gif') right no-repeat;
color: #fff;
}

#mainnavi li.selected {
background: #fff url('http://www.zarecons.net/img/navi_active_left.gif') no-repeat;
}

#mainnavi li.selected a {
background: transparent url('http://www.zarecons.net/img/navi_active_right.gif') right no-repeat;
color: #000;
}

/* PAGINAATIO */
div.pagination {
background-color: #f2f2f2;
text-align: center;
font-size: 12px;
margin: 10px 0px;
}

div.pagination a {
text-decoration: none;
font-weight: 600;
}

div.pagination a:hover {
text-decoration: underline;
}
/* PAGINAATIO END */

div.listbox {
width: 206px;
margin: 0 30px 0 15px;
padding: 15px 5px 15px 0;
float: left;
clear: left;
border-bottom: 1px solid #e8dfd5;
border-right: 1px solid #e8dfd5;
}

.listbox h3 {
font-size: 14px;
}

.listbox div.more {
text-align: right;
}

div.contentarea {
width: 711px;
margin: 10px 15px 1px 257px;
position: relative;
top: 0;
left: 0;
padding-bottom: 9px;
}

img#etusivukuva {
display: block;
margin: 20px auto;
}

div.koirakategoria {
margin-left: 20px;
}

table.litter {
width: 711px;
margin: 15px 0;
border-collapse: collapse;
}

.litter td {
width: 348px;
vertical-align: top;
}

.litter div.vanhus {
padding: 0 15px;
}

.litter div.vasen {
border-right: 1px solid #e8dfd5;
}

.vanhus h4 {
text-align: center;
}

.vanhus img {
display: block;
margin: 10px auto;
border: 1px solid #666;
}

.kasvattipentue h2, .pentue h2, .kasvattipentue h3, .pentue h3 {
text-align: center;
}

.pennut li {
text-align: center;
}

ul.pennut {
margin: 15px 0;
}


table.sukutaulu {
margin: 5px 0;
border-collapse: collapse;
}

.sukutaulu td {
width: 205px;
padding: 10px 15px;
border: 1px solid #ddd;
}

.sukutaulu td.m {
color: #129;
}

.sukutaulu td.f {
color: #921;
}

.sukutaulu div.tittelit {
font-size: 10px;
text-transform: uppercase;
}

.sukutaulu .m div.tittelit {
color: #89c;
}

.sukutaulu .f div.tittelit {
color: #c98;
}

div.kuvaselaus {
background-color: #e8dfd5;
margin: 15px;
padding: 10px 15px;
border: 1px solid #a89b8a;
overflow: auto;
}

.kuvaselaus label {
margin: 0 10px;
}

.kuvaselaus div.kuva {
float: left;
width: 130px;
padding: 10px 5px;
text-align: center;
cursor: pointer;
border: 1px solid #a89b8a;
margin: 5px 10px;
background-color: #fff;
}

.kuvaselaus div.kuva img {
display: block;
margin: 0 auto;
}

.adminform label, .imageform label {
display: block;
}

.adminform input.text, .imageform input.text {
width: 300px;
}

div.uutiskuvat {
float: right;
}

div.uutinen {
overflow: auto;
position: relative;
border-top: 1px solid #e8dfd5;
padding: 15px 0;
}

.uutinen a img {
border: 1px solid #a89b8a;
margin: 5px 15px 5px;
width: 175px;
}

div.uutistiedot {
position: absolute;
top: 30px;
right: 15px;
color: #e8dfd5;
font-size: 10px;
}

.eka div.uutistiedot {
top: 15px;
}

div.galleryimage {
float: left;
width: 155px;
margin: 5px;
padding: 10px 5px 5px;
border: 1px solid #a89b8a;
text-align: center;
font-size: 10px;
}

.galleryimage dl {
margin: 5px 0 0;
}

.galleryimage dt {
display: none;
}

.galleryimage dd {
height: 13px;
overflow: hidden;
}

.galleryimage a img {
border: 1px solid #a89b8a;
}

div.imagecontainer {
overflow: auto;
}

div.picbrowse {
position: absolute;
right: 0;
}

.picbrowse a {
margin-left: 10px;
}

div.murujono {
margin-bottom: 10px;
}

.biggalleryimage img {
border: 1px solid #666;
display: block;
margin: 15px auto;
}

div.imageinfo {
position: relative;
left: 0;
top: 0;
border-top: 1px solid #a89b8a;
border-bottom: 1px solid #a89b8a;
margin: 30px 15px;
padding: 15px;
background-color: #f8efe5;
}

.imageinfo dt {
/*
float: left;
width: 70px;
margin: 0 10px 0 0;
text-align: right;
clear: left;
*/
display: none;
}

.imageinfo dd {
font-weight: bold;
}

.imageinfo ul {
position: absolute;
top: 15px;
right: 15px;
text-align: right;
}

div.vkviesti {
border-top: 1px solid #f8efe5;
padding: 15px 0;
position: relative;
top: 0;
left: 0;
}

div.aika {
position: absolute;
top: 15px;
right: 0;
font-size: 10px;
color: #a89b8a;
}

div.eka {
border-top: 0;
padding: 10px 0 15px;
}

.eka div.aika {
top: 10px;
}

.vkviesti div.otsake {
font-size: 11px;
color: #666;
}

.vkviesti div.teksti {
padding: 10px 15px;
}

.vkviesti div.vastaus {
padding: 0 30px;
font-style: italic;
margin-bottom: 15px;
}

div.vieraskirjaformi {
padding: 10px 15px;
}

.vieraskirjaformi input {
width: 200px;
display: block;
height: 18px;
border: 1px solid #000;
padding: 1px;
margin: 5px 0 5px 210px;
}

.vieraskirjaformi label {
width: 200px;
text-align: right;
display: block;
float: left; 
clear: left;
height: 20px;
padding: 1px;
margin: 3px 0;
position: relative;
top: -15px;
}

.vieraskirjaformi textarea {
width: 500px;
margin-left: 210px;
border: 1px solid #000;
position: relative;
top: -43px;
}

.vieraskirjaformi input.button {
border: 2px outset #999;
width: auto;
height: auto;
padding: 2px 5px;
position: relative;
top: -43px;
}

table.luonnetestit {
border-collapse: collapse;
width: 90%;
margin: 10px auto;
}

.luonnetestit th, .luonnetestit td {
border: 1px solid #666;
padding: 3px 5px;
font-size: 12px;
text-align: center;
}

#luonnetestitaulu td {
cursor: pointer;
}

.luonnetestit tr.row0 {
background-color: #efe;
}

.luonnetestit tr.row1 {
background-color: #ded;
}

.luonnetestit td.kategoria {
background-color: #eee;
}

.luonnetestit .nimi {
text-align: left;
cursor: default;
}

ul.selite {
list-style: none;
font-size: 12px;
border: 1px solid #666;
background-color: #eee;
width: 250px;
padding: 5px 10px;
margin: 10px auto;
}

.tool-tip {
position: absolute;
border: 1px solid #666;
padding: 5px;
background-color: #fff;
opacity: .9;
}

.tool-title {
display: block;
font-size: 11px;
text-transform: uppercase;
color: #999;
}

.tool-text {
font-size: 12px;
}

.hidden {
display: none;
}

div.koirakuvat {
width: 270px;
float: left;
margin-bottom: 30px;
}

ul#hakemisto {
padding: 0px;
margin-left: 0px;
position: relative;
top: 0px;
background-color: #fffaf3;
border: 1px solid #ccc2bd;
background-image: url('http://www.zarecons.net/img/gallery_dots.gif');
background-repeat: repeat-y;
background-position: -2px 2px;
font-size: 10px;
height: auto;
overflow: hidden;
z-index: 100;
}

#hakemisto ul li {
padding: 0px;
}

ul#hakemisto a {
text-decoration: none;
}

ul#hakemisto li {
position:relative;
top: 0px;
height: 18px;
display: block;
background-image: url('http://www.zarecons.net/img/gallery_dots.gif');
background-repeat: repeat-y;
background-color: #fffaf3;
background-position: -2px 0px;
}

ul#hakemisto ul {
background-color: #fffaf3;
margin-left: 0px;
padding-left: 0px;
position: relative;
top: 0px;
width: auto;
background-image: url('http://www.zarecons.net/img/gallery_dots.gif');
background-repeat: repeat-y;
background-position: -2px 2px;
}

ul#hakemisto ul ul {
margin-left: 0px;
padding-left: 0px;
}

ul#hakemisto a img {
border: 0;
margin-top: 1px;
margin-left: 8px;
}

ul#hakemisto li.lastitem {
background-image: url('http://www.zarecons.net/img/gallery_lastdots.gif');
background-repeat: no-repeat;
}

ul#hakemisto a.togglelink {
position: absolute;
top: 4px;
margin-left: 2px;
}

ul#hakemisto a.folderlink {
position: relative;
left: 22px;
padding-right: 15px;
top: 2px;
}

ul.kategoriat li {
display: inline;
margin-right: 7px;
}

ul#hakemisto li.folderopen {
height: auto;
margin-left: 8px;
}

ul#hakemisto li.folderopen.hider {
margin-left: 0px;
padding-left: 8px;
background-position: 8px 0px;
}

ul#hakemisto li.folderclosed {
display: none;
}

ul#hakemisto a.folderlink.active {
top: 1px;
font-weight: 600;
font-size: 11px;
}

div.palstat {
overflow: auto;
}

.palstat div {
padding-bottom: 15px;
}

.palstat div.vasen {
width: 339px;
margin-right: 15px;
float: left;
}

.palstat div.oikea{
width: 339px;
padding-left: 15px;
margin-left: 355px;
}

div.koirakategoria {
float: left;
width: 330px;
margin-bottom: 15px;
}

.koirakategoria div.koirakategoria {
float: none;
width: auto;
margin-bottom: 15px;
}

input.button {
display: block;
}

.esittely img, .pentuja p img {
margin: 10px 15px;
border: 1px solid #000;
}