@charset "UTF-8";

/* ****************************************** Runko ******************************************** */
html {
	margin: 0;
	padding: 0;
}

body {
    
	font-family: Calibri, Arial, sans-serif;
	color: #402b1f;
	min-width: 320px;
	font-size: 90%;
	margin: 0 0 20px 0;
	padding: 0;
	background: #c7c9ce url("images/Pupsit-2014_02.jpg") no-repeat center top;
}

a:link {
	color: #55301f;
}

a:visited {
	color: #919096;
}

a:hover {
	color: #000;
	text-decoration: none;
}

a.img {
	border: 0 solid transparent;
}

h1 {
	font-size: 130%;
}

#wrapper {
	max-width: 1100px;
	margin: 0 auto;
	background-color: #f2f2f2;
}

#content {
	padding: 0 20px 1px 20px;
	background: transparent url("images/shadow.png") no-repeat center top;
}

#header {
	position: relative;
	line-height: 0;
}

#pupsit-like {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

#header a img {
	border: 0;
	width: 100%;
}

.menu {

	margin: 0 auto;
}

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

.menu li {
	float: left;
	display: block;
	margin: 8px 1px 8px 10px;
	padding: 0;
}

.menu li a:link, .menu li a:visited {
	color: #402b1f;
	text-decoration: none;
	text-transform: uppercase;
}

.menu li a:hover {
	color: #844019;
}

#main-menu li:first-child {
	margin-right: 10px;
}

#edit-menu {
	float: right;
	margin-right: 7px;
}

#footer {
	border-top: 1px solid #c0c0c0;
	border-bottom: 20px solid #c7c9ce;
	background-color: #fff;
	clear: both;
	margin-bottom: 30px;
	box-shadow: 0 8px 8px -8px black;
	position: relative;
}

#footer p {
	margin: 10px;
}

#footer #contact {
	border-top: 1px solid #ddd;
	padding-top: 7px;
	font-size: 80%;
}

#footer #footer-links {
	position: absolute;
	right: 0;
	bottom: 0;
}

#footer #footer-links.langlinks {
	border-top: 1px solid #ddd;
	padding-top: 7px;
	font-size: 80%;
	position: relative;
	bottom: auto;
	right: auto;
}

/* **************************************** Etusivu ******************************************** */

#info {
	width: 100%;
	clear: both;
	background-color: #919096;
	color: #f2f2f2;
	text-align: center;
	margin-bottom: 10px;
	position: relative;
}

#info h1 {
	margin: 0;
	padding: 10px 10px 0 10px;
}

#info p {
	margin: 0;
	padding: 0 10px 10px 10px;
}



#muokatut h2, #lisatyt h2 {
	font-weight: normal;
	font-size: 150%;
	margin: 5px 0;
}

a.pentue {
	border: solid #d0d0d0;
	border-width: 1px 1px 2px 1px ;
	background-color: #fff;
	margin-bottom: 15px;
	display: block;
	text-decoration: none;
	color: #402b1f;
	position: relative;
	padding: 5px 0;

	text-align: center;
}

a.pentue:hover {

	background-color: #e2e2e2;
	color: #351706;
	box-shadow: 0 4px 8px -6px black;
	margin: -2px 0 17px 0;
}

a.pentue2 {
	border: 1px solid #d0d0d0;
	background-color: #fff;
	margin-bottom: 15px;
	display: block;
	text-decoration: none;
	color: #402b1f;
	position: relative;
	padding: 5px 0;
	border-radius: 0 0px 0 10px;
	text-align: center;
}

a.pentue2:hover {
	border: 1px solid #b0b0b0;
	background-color: #e2e2e2;
	color: #351706;
	box-shadow: 0 4px 8px -6px black;
	margin: -2px 0 17px 0;
}

.status {
	border-bottom: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	width: 90px;
	display: block;
	text-align: center;
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 80%;
	height: 18px;
	padding-top: 3px;
}

a.pentue:hover .status, a.pentue2:hover .status {
	border-bottom: 1px solid #b0b0b0;
	border-right: 1px solid #b0b0b0;
}

.status.Syntyneet, .status.Born {background-color: #919191; color: #fff;}
.status.Suunnitelmissa, .status.Planned {background-color: #fff;}
.status.Odotettavissa, .status.Expected {background-color: #d9d9d9;}

.updated {
	font-size: 80%;
	position: absolute;
	right: 9px;
	top: 5px;
	color: #878082;
}

#lisatyt .kasvattaja, #muokatut .kasvattaja {
    padding-top: 0px;
}

.kasvattaja {
	display: block;
	font-weight: bold;
	font-size: 120%;
	padding-top: 20px;
}

.aika {
	display: block;
}
.sable {
	background: url("images/soopeli.png") no-repeat 4px 4px;
}

.tricolour {
	background: url("images/tricolour.png") no-repeat 4px 4px;
}

.bluemerle {
	background: url("images/bluemerle.png") no-repeat 4px 4px;
}

.isa {
	background-position: 3px 3px;
	position: relative;
}

/* ************************************* Pentuesivu ******************************************** */
#vasen-menu {
	width: 24%;
	float: left;
	clear: left;
	background: #fff;
}

#vasen-menu h3 {
	margin: 0;
	padding: 10px;
	font-size: 120%;
	background: #919096;
	color: #fff;
	font-weight: normal;
	text-transform: uppercase;
}

#vasen-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 10px solid #919096;
	box-shadow: 0 6px 6px -6px black;
}

#vasen-menu ul li {
	margin: 0;
	padding-left: 8px;
	padding-right: 5px;
	border-bottom: 1px solid #eee;

}

#vasen-menu li a:link, #vasen-menu li a:visited {
	color: #402b1f;
	text-decoration: none;
	text-transform: uppercase; 
	display: block;
	width: 100%;
	padding: 5px 2px 5px 0px;
}

#vasen-menu li:hover {
	background-color: #e2e2e2;
}

#pentueen-tiedot {
	width: 75%;
	margin-left: 1%;
	float: left;
	background: #fff;
	margin-bottom: 10px;
	position: relative;
}


#pentue-updated {
	position: absolute;
	top: 5px;
	left: 20px;
	color: #999;
	font-weight: 100;
}

#pentue-status, #pentue-info, #pentue-sukutaulu, #pentue-extrakuvat, #pentue-kasvattaja, #koiranet {
	margin: 15px 20px;
}

#pentue-status {
	margin-top: 25px;
}

#jalostuskoira {
	width: 99%;
	margin-left: 20px;
	border: 1px solid #c0c0c0;
	border-top: 10px solid #155086;
	margin-bottom: 20px;
	background: #fafafa;
}

#pentue-ema, #pentue-isa {
	width: 45%;
	float: left;
	margin-left: 20px;
	border: 1px solid #c0c0c0;
	border-top: 10px solid #155086;
	margin-bottom: 20px;
	background: #fafafa;
	
}

#ylarivi {
	display: inline-flex;
	width: 99%;
}

#pentue-ema {
	border-top: 10px solid #862015;
}

#isakuva img  {
	box-shadow: 0 4px 6px -6px black;
}

#isakuva  {
	text-align: center;
	margin: 10px 0;
}

#isainfo, #emainfo {
	margin: 10px 20px;
}

.parent_data {
	margin-bottom: 10px;
}

#pentue-info {
	clear: both;
}

#pentue-kasvattaja {
	border: 1px solid #919096;
	padding: 10px;
	background: #fafafa;
	box-shadow: 0 4px 6px -6px black;
}

#pentue-kasvattaja table .kasvots {
	width: 25%;
}

#pentue-kasvattaja table {
	width: 100%;
	border-spacing: 0;
}

#pentue-kasvattaja tr td {
	border-bottom: 1px solid #e2e2e2;
	padding-left: 10px;
}

#pentue-sukutaulu {
	border-collapse: collapse; 
	width: 95%;
}

#pentue-sukutaulu td {
	border: 1px solid #c0c0c0;
	padding: 3px 3px 3px 7px;
}

#pentueen-tiedot img {
	max-width: 95%;
/*	max-height: 100%; */
/*	margin: 0 9px; */
}

#pentue-like img {
	max-width: 100%;
}

#pentue-extrakuvat {
	margin-bottom: 20px;
}

#pentue-extrakuvat * {
	display: block;
}

#pentue-extrakuvat img {
	border: 1px solid #c0c0c0;
	padding: 5px;
}

#kaksoisastutus {
	font-weight: bold;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-top: -15px;
}

.vanhempi {
	margin: 10px 20px;
	font-weight: bold;
}

.kaksoisastutus #pentue-ema {
	clear: both;
}

.kaksoisastutus #pentue-ema #emainfo {
	margin: 10px;
}

.kaksoisastutus #pentue-ema #emainfo, .kaksoisastutus #pentue-ema  #emakuva{
	float: left;
	max-width: 48%;	
}

/* **************************************** Listaus ******************************************** */
.listaus #info {
	padding-bottom: 10px;	
	font-size: 120%;
}

.listaus h2 {
	font-size: 150%;
	margin: 0 0 5px 0;
	padding: 0;
}

.listaus h2 a:link, .listaus h2 a:visited {
	text-decoration: none;
	color: #919096;
}

.listaus h2 a:hover {
	color: #919096;
}

.listaus .status {
	display: none;
}

.listaus.kaikki .status {
	display: block;
}
/*
.listaus.kaikki a.pentue {
	padding: 5px 0 5px 170px;
}
*/


.listaus a.pentue {
	width: calc(50% - 188px); 
	padding: 5px 0 5px 180px; 
	float: left;
	text-align: left;
	margin: 2px 3px; 
	line-height: 1.4;
	height: 100px;
	text-align: left;
}

.listaus.kaikki a.pentue2 {
	padding: 5px 0 5px 120px;
} 

.listaus a.pentue2 {
	width: calc(100% - 122px);
	float: left;
	margin-right: 5px; 
	text-align: left;
	line-height: 1.4;
	height: 65px;
	text-align: left;
}


#lisatyt a.pentue, #muokatut a.pentue {
	width: calc(100% - 28px);
/*	float: left; */
	margin-right: 5px;
	padding: 30px 0 5px 23px;
	line-height: 1.2;
	height: 55px;
	border-radius: 0 0px 0 10px;
    background-color:#fff;
}

#lisatyt, #muokatut {

	width: calc(45% - 32px);
    padding: 10px;
	float: left;
	margin-bottom: 10px;
}

#lisatyt {
	margin-left: 2%;
	margin-right: 50px;
}

#muokatut {
	margin-left: 2%;
}



.listaus .aika {
	font-size: 110%;
	position: absolute;
	right: 8px;
	top: 7px;
}

.listaus .updated {
	bottom: 2px;
	top: auto;
}

.emakuva, .isakuva, .emakuva2, .isakuva2 {
	width: 90px;
	height: 54px;
}

a .emakuva img, a .isakuva img, a .emakuva2 img, a .isakuva2 img {
	border: 0 solid transparent;
}

.isakuva img  {
	max-width: 145px;
	position: absolute;
	clip:rect(0px,145px,100px,0px);
}

.emakuva img {
	left: 105px;
}

.isakuva img {
	left: 5px;
}


/* ************************************** Linkkisivu ******************************************* */
#linkkisivu {
	margin-bottom: 20px;
}

#linkkisivu ul {
	float: left;
}

#linkkisivu ul {
	list-style: none;
	width: 25%;
	margin: 0 0 20px 20px;
	padding: 0;
}


#linkkisivu ul b {
	font-size: 150%;
}

/* *************************************** Lomakkeet ******************************************* */
#lisayssivu form, #muokkaussivu form {
	background: #fff;
	padding: 20px;
}

#lisayssivu .titlerow, #muokkaussivu .titlerow {
	font-size: 120%;
	font-weight: 600;
	border-top: 1px solid #c2c2c2;
	padding: 10px 0;
}

#lisayssivu input[type=text], #lisayssivu input[type=password],
#muokkaussivu input[type=text], #muokkaussivu input[type=password] {
	width: 100%;
}

textarea {
	width: 100%;
}

#isantiedot, #emantiedot {
	float: left;
	margin-left: 20px;
	border: 1px solid #c0c0c0;
	border-top: 10px solid #155086;
	margin-bottom: 20px;
	width: 87%;
}

#emantiedot {
	border-top: 10px solid #862015;
}

.pedigree table {
	border-collapse: collapse; 
	border-spacing: 0;
	width: 100%;
}

.pedigree td {
	border: 1px solid #c0c0c0;
	padding: 3px 3px 3px 7px;
}

#lisayssivu .pedigree input[type=text], #muokkaussivu .pedigree input[type=text]{
	width: 90%;
}

/* ********************************* Ohjeita ja infoa ****************************************** */
.infoa, .ohjeita {
	width: 49%;
	float: left;
}

.infoa h3, .ohjeita h3 {
	font-size: 120%;
	margin-bottom: 0;
}

.ohjeita {
	margin-left: 1%;
}

.infoa {
	margin-right: 1%;
}


/* ****************************** Responsiivisuuhommelit *************************************** */

@media (min-width: 701px) {
	.slicknav_menu {display: none;}
}

@media (max-width: 700px) {
	#ylarivi { display: block;}
	.infoa, .ohjeita, #info, #lisatyt, #muokatut, #pentueen-tiedot, #pentue-isa, #pentue-ema, #jalostuskoira, .listaus a.pentue {width: auto; float: none; clear: both; margin: 0; border-right:0; border-left: 0;}
	.listaus a.pentue {width: auto; padding-left: 10px;}
	.listaus a.pentue {margin-bottom: 10px;}
	a.pentue, a.pentue:hover {border-right:0; border-left: 0; border-radius: 0 0px 0 0px;}
	#pentueen-tiedot {padding-top: 1px; padding-bottom: 1px; margin-bottom: 10px;}
	#pentue-sukutaulu {font-size: 80%; width: 90%;}
	#pentue-sukutaulu td {padding: 1px 1px 1px 3px;}
	#content {padding: 0;}
	#vasen-menu {display: none; position: fixed; bottom: -50px; width: 100%; background-color: #fff;}
	#vasen-menu ul {border-bottom: 0;}
	#vasen-menu ul li {float: left; background-color: #fff;}
	#pentue-like {top: 5px; right: 5px;}
	#info-like {top: auto; bottom: -37px;}
	.isakuva, .emakuva, .isakuva2, .emakuva2 {display: none;}
	.listaus h2 {margin-left: 10px;}
	.listaus #info {margin-bottom: 5px;}
	.listaus.kaikki a.pentue {padding-left: 20px; height: auto; }
	.listaus.kaikki a.pentue2  {padding: 5px 0 5px 20px; height: auto;  width: calc(99% - 20px);}
	.menu li {margin: 4px 1px 4px 10px;}
	#footer #footer-links {border-top: 1px solid #ddd;padding-top: 7px;font-size: 80%; position: relative; bottom: auto; right: auto;}
	.kaksoisastutus #pentue-ema #emainfo, .kaksoisastutus #pentue-ema  #emakuva{float: unset;max-width: 100%;}		
	    a.pentue { margin: 10px; padding: 5px 0 5px 5px; border-radius: 0 0px 0 0px;}

}

@media (max-width: 450px) {
	#ylarivi { display: block;}
	#linkkisivu ul {float: none; width: 100%; margin-bottom: 0;}
	#pentue-kasvattaja table {width: 100%;}
	#pentue-kasvattaja td {display: block;}
	#pentue-kasvattaja tr td:nth-child(2) {padding-left: 15px;}
	#pentue-kasvattaja tr td:nth-child(2) {border-bottom: 1px solid #e2e2e2; padding-bottom: 3px; padding-top: 0;}
	#pentue-kasvattaja tr td:nth-child(1) {border-bottom: 0px solid #e2e2e2;}
	.listaus.kaikki .updated {bottom: auto; top: 21px; right: 9px;} 
	.listaus.kaikki .kasvattaja {margin-top: 17px;}
	.listaus.kaikki a.pentue {padding-left: 10px; height: auto;}
	.listaus.kaikki a.pentue2  {padding: 5px 0 5px 20px; height: auto;  width: calc(99% - 20px);}
	.listaus.kaikki .aika {top: 1px;}
	#muokatut .kasvattaja, #lisatyt .kasvattaja {margin-top: 0px;}
	#edit-menu {display: none;}

}


/* ************************************ SlickNav *********************************************** */
.slicknav-menuname {
	color: #fff;
	text-transform: uppercase;
	margin: 2px 0 0 5px;
	display: none;
	line-height: 3.2;
}
/*
    Mobile Menu Core Style
*/

.slicknav_btn { position: absolute; display: block; vertical-align: middle; float: left; line-height: 1.125em; cursor: pointer; }
.slicknav_menu  .slicknav_menutxt { display: block; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 7px; }
.slicknav_menu .slicknav_no-text { margin: 16px 12px; }
.slicknav_menu .slicknav_icon-bar { display: block; width: 2.125em; height: 0.25em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.25em }
.slicknav_nav { clear: both }
.slicknav_nav ul,
.slicknav_nav li { display: block }
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block }
.slicknav_nav .slicknav_item a { display: inline }
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }
/* IE6/7 support */
.slicknav_menu { *zoom: 1 }

/* 
    User Default Style
    Change the following styles to modify the appearance of the menu.
*/

.slicknav_menu {
	font-size:16px;
}
/* Button */
.slicknav_btn {
	margin: 0px;	
	text-decoration:none;	
	background-color: #919096;
/*	padding: 16px; */
	width: 59px;
}
.slicknav_btn:hover {

}
/* Button Text */
.slicknav_menu  .slicknav_menutxt {	
	color: #FFF;
	font-weight: normal;	
	text-shadow: 0 1px 3px #000;	
	line-height: 0.7;
	margin-right: 10px;
	text-transform: uppercase;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
  background-color: #f5f5f5;
}
.slicknav_menu {
	background:#fff;
	padding:0px;
}
.slicknav_nav {
	color:#fff;
	margin: 52px 0 0 0;	
	padding:0;
	font-size:0.875em;
}
.slicknav_nav, .slicknav_nav ul {
	list-style: none;
	overflow:hidden;
}
.slicknav_nav ul {
	padding:0;
	margin:0 0 0 20px;
}
.slicknav_nav .slicknav_item {
	padding:5px 10px;
	margin:2px 5px;
}
.slicknav_nav a{
	padding:5px 10px;
	text-decoration:none;
	color:#919096;
}
.slicknav_nav .slicknav_item a {
	padding:0;
	margin:0;
}
.slicknav_nav .slicknav_item:hover {
	background:#e2e2e2;
	color:#fff;	
}
.slicknav_nav a:hover{
	background:#e2e2e2;
	color:#222;
}
.slicknav_nav .slicknav_txtnode {
     margin-left:15px;   
}