﻿/**************************************************************
Website General
**************************************************************/
* {
  border: 0;
  margin: 0;
  padding: 0;
}
body {
  background-color: #AC43F2;	
  color: #fff;
  font-family: arial, helvetica, sans-serif;																																													
  font-size: 100.01%;
  letter-spacing: 0.5px;	
}
h1 {
  font-size: 3em;
}
h2 {
  font-family: helvetica, arial, sans-serif;	
  font-size: 2em;	
  text-align: center; 
  text-shadow: 1px 1px 3px #000;	  
}
p {
  font-size: 1.3em;
  margin: 1em auto;
}
#back {
  margin: 5em auto; 
  width: 50px;
}
.trennung {
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/*************************************************************
Website Site
*************************************************************/
#site {
  margin: 0 auto;	
  width: 80em;
}
/*************************************************************
Website Total
*************************************************************/
#total {	
  margin: 1em auto;	
  width: 70em;																	
}
/*************************************************************
Homepage Die Havaneser von Luxembourg / Menu - Navigation
*************************************************************/	  
#mmain {	
  display: -webkit-flex;	
  display: flex; 	
  -webkit-align-items: center;
  align-items: center;
  margin-top: 2em;
  width: 70em;
}
nav {
  font-family: "Comic Sans MS", arial, sans-serif;		
  width: 30em;
}
nav a {
  background-color: #C483F0;	
  border-radius: 10px;
  box-shadow: 0 5px 10px white inset;	
  color: #fff; 	
  display: block;	
  margin: 1em 0;
  padding: 0.4em;
  text-decoration: none; 
  width: 18em; 
}
nav a:focus,
nav a:hover {
  background-color: #FCE8DB;
  border-color: #C483F0;		
  color: #CB94EF; 
}
li {
  font-size: 1.3em;
  font-style: normal;
  font-weight: 600;		
  line-height: 2.5em;	
  list-style: none;
  text-align: center;
}
#siblings {
  text-align: right;
  width: 40em;
}
#siblings img {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;	
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);		
  width: 600px;
}
#footer {		
  font-size: 1em;
  font-style: italic;   
  font-weight: bold;  
  letter-spacing: normal;	
  min-height: 5em;
  padding-top: 2em;  	
  text-align: center;
}
.footer {
  font-style: normal;	
  font-weight: normal;
}
/*************************************************************
Website Jamila und Lou / Header
*************************************************************/
#header {
  display: -webkit-flex;	
  display: flex;  
  font-family: helvetica, arial, sans-serif;	
  min-height: 6em;   
  text-shadow: 2px 2px 4px #000;	 
}
#menu p {	
  font-size: 1.3em;  
  font-weight: bold;
  margin: 0;  
  padding-top: 0.15em;
  text-align: center;
}
#menuicon {
  border: 1px solid #fff;	
}
#menuicon div {
  background-color: #fff;	
  height: 0.5em;  
  margin: 0.688em 0;  
  width: 5.375em;
}
#heading {
  margin: 1em auto;													
}
#logo {
  width: 120px;
}
/*************************************************************
Website Jamila und Lou / Top
*************************************************************/
#top {	
  display: -webkit-flex;	
  display: flex; 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;  
  height: 40em;
  margin-top: 3em;
  width: 70em;
}
#left, #right {
  height: 20em;
  width: 35em;
}	
#imageleft, #imageright {
  margin: auto;
  width: 460px;
}		
#right p {
  margin: 0 0 0.5em; 
}
#blockquote {
  background-color: #CB94EF;	
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;	
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);		
  padding: 0.5em;
}
#blockquote p {
  margin-bottom: 0.3em;	
}
#right blockquote {
  color: #fff;
  font-family: georgia, arial, sans-serif;	
  font-size: 0.8em;
  font-style: italic;
  font-weight: bold;
  padding: 0.4em 0.8em;
}
#right cite {
  color: #2A13F9; 	
  font-size: 1.3em;
  font-style: italic;
  font-weight: bold;
  letter-spacing: normal;	
  padding: 0.04em;
}
/*************************************************************
Website Jamila und Lou / Button 
*************************************************************/
.button a {	
  border: 0.1em solid #fff;
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px;	  
  border-radius: 10px;		
  color: #fff;  
  display: block;  
  font-size: 1.2em;
  font-weight: bold;  
  margin: 2em auto; 
  padding: 1.2em;
  text-align: center;	
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;	  
  transition: all 1s ease; 	
  text-decoration: none;
  width: 12em;  		
}
.button a:focus,		
.button a:hover {
  background: #CB94EF; 
  cursor: pointer;	
  text-shadow: 1px 1px 3px #000;		  
  -webkit-transition: all 0.5s ease delay;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;		
} 
/*************************************************************
Website Jamila und Lou / Center
*************************************************************/
#center {
  display: -webkit-flex;  
  display: flex; 	
  -webkit-flex-direction: column;	
  flex-direction: column;		
}
#havanese {
  margin: auto;
  width: 400px;
}
/*************************************************************
Website Jamila und Lou / Bottom
*************************************************************/
#bottom {
  display: -webkit-flex; 
  display: flex; 	
  -webkit-flex-direction: column;	
  flex-direction: column;			
}
#bottom p {
  background-color: #C483F0;	
  border: 0.15em solid #fff;
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px;	  
  border-radius: 10px;	
  font-family: "Comic Sans MS", arial, sans-serif;	
  margin: 1.5em auto; 
  padding: 0.6em;  
}  
#news h3 {	
  background-color: #C483F0;
  border: 0.15em solid #fff;
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px;	  
  border-radius: 10px;	
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 2em auto 1em;  
  padding: 1em;
  text-align: center;	
  width: 12em;  
}
#imagebottom {
  margin: 1em auto;	
  width: 400px;
}
.test {	
  margin: 1em auto;  
  width: 240px;
}
.nub {
  background-color: #C483F0;	
  border-radius: 10px;
  box-shadow: 0 5px 10px white inset;	
  color: #fff; 	
  display: block;
  font-family: "Comic Sans MS", arial, sans-serif;		  
  font-size: 1.3em;  
  margin: 0.5em auto;
  padding: 0.4em;
  text-align: center;
  text-decoration: none; 
  width: 10em; 
}
/*************************************************************
Website Mehr über uns / Family
*************************************************************/	
#puppies {
  display: -webkit-flex;  
  display: flex; 	
  -webkit-flex-direction: column;	
  flex-direction: column;		
  margin-top: 2em;
  width: 70em;
}
#puppies h2 {
  margin-top: 1em;
}
#imagejamila, #imagelou{
  margin: 1em auto;
  width: 400px;
}
table#table01, table#table02 {
  border-collapse: collapse;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;	
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);	
  font-family: Georgia, arial, sans-serif; 
  font-size: 0.8em;
  font-weight: bold; 
  margin: 3em auto;  
  width: 75%;
}
table#table01 td, table#table02 td {
  height: 1.5em;
  padding-left: 5em; 
}
#table01 caption, #table02 caption {
  font-size: 1.5em;
  padding-bottom: 0.5em;
}
#table01 .col1, #table01 .col2,
#table02 .col1, #table02 .col2 {
  width: 15em		
}	
#table01 thead td, #table01 tfoot td,
#table02 thead td, #table02 tfoot td {
  background-color: #fff;		
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;	
  color: #000;    
  padding: 0;	
  text-align: center;
}
#table01 tr:nth-child(even), #table02 tr:nth-child(even) {
  background-color: #f2f2f2;
  color: #000;
}
#table01 td, #table02 td { 
  font-size: 1.8em;
  padding: 0.2em;
}  
#table01 td img, #table02 td img {
  width: 25px;	
}
#table01 a, #table02 a {
  background-color: #F9C971;	
  border-radius: 10px;
  box-shadow: 0 5px 10px white inset;	
  display: block;
  padding-top: 0.2em;
  text-align: center;
  width: 8em; 	
}
#family {
  display: -webkit-flex;  
  display: flex; 	
  -webkit-flex-direction: column;	
  flex-direction: column;		
  margin-top: 2em;
  width: 70em;
}
#parents {
  display: -webkit-flex;  
  display: flex; 
  -webkit-justify-content: center;
  justify-content: center;
}
#imagesylvie img {
  margin: 1em;
  width: 513px;
}
#imageralf img {
  margin: 1em;
  width: 591px;
}
#video01, #video02 {
  border: 1.5px solid white;  
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);	
  cursor: pointer;  
  width: 520px;
}
#video01 {
  margin: 2em auto;
}
#video02 {
  margin: 2em auto 1em;
}
/*************************************************************
Website Mehr über Hunde / Notes
*************************************************************/
#ncontent {	
  background: url(../media/bone.png) bottom no-repeat;
  background-size: 90%;	
  display: -webkit-flex;  
  display: flex; 	
  -webkit-flex-direction: column;	
  flex-direction: column;	  
  margin-top: 2em;
  width: 70em;
}
#ncontent h2 {
  margin-top: 1em;
}
#size {
  display: -webkit-flex;  
  display: flex; 
  -webkit-justify-content: center;
  justify-content: center;
}
#small img, #big img {
  margin: 1em;
  width: 470px;  
}
#ncontent blockquote {
  background-color: #CB94EF;	
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;	
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);	
  font-family: georgia, arial, sans-serif;	 
  font-size: 1.5em;
  font-style: italic;
  font-weight: bold; 
  margin: 1em auto; 
  padding: 1em; 
}
table#table03 {
  border: 2px solid black;
  border-collapse: collapse;	
  font-size: 1em;
  margin: 2em auto;  
  padding: 0.125em 1.25em; 
  text-align: center; 
}
#table03 caption {
  margin: 0 0 0.5em;
}
#table03 .col1 { 
  background-color: #D5A3F7;  
  width: 9.5em;  
} 	
#table03 .col2, .col3, .col4 { 
  background-color: #F7EFFC; 
  width: 9.5em;   
}
#table03 thead {
  background-color: #E6E5C9; 
  color: #000; 
}
#table03 tfoot {
  background-color: #ABAB96; 
}
#table03 tbody {
  color: #000;
}
#table03 th, #table03 td {
  border: 2px solid black;
}
#dogs {
  display: -webkit-flex;  
  display: flex; 
  margin-top: 4em;
}
#dogs1 img, #dogs2 img {
  margin: 3em;  
  width: 500px;  
}
/*************************************************************
Website Eure Nachricht an uns / Contact
*************************************************************/
#ccontent {
  margin-top: 2em;
}
form {
  background: url(../media/mail.png) center no-repeat;
  background-size: 100%;  
  height: 31em;
  margin: auto;   
  padding: 2em;
  text-shadow: 1px 1px 3px #000;  
  width: 46em; 
}
legend {
  font-size: 1.6em;
  margin-left: 11em;
  text-shadow: 1px 1px 3px #000;	
}
label {	
  cursor: pointer;
  display: block; 
  font-size: 1.2em;
  padding-top: 1em;
}
input, .text {
  font-family: georgia, arial, sans-serif;	 
  font-size: 0.8em; 
}
input:focus, 
textarea:focus {
  background-color: #FBD7BF;	
}
.text {
  border: 1px solid #000;   
  font-size: 0.9em; 
  margin-top: 0.5em;  
  padding: 0.7em 0.7em 0.7em 1.375em;      
  width: 49em; 
}
textarea.text {
  height: 6em;
}
.submit {
  background-color: gold;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;  
  color: #000; 
  cursor: pointer;  
  font-size: 1em;
  padding: 0.5em 1em;	
  position: relative;
  bottom: 3.25em;
  left: 14em;  
}
.reset {
  background-color: red;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;  
  border-radius: 20px;		   
  color: #fff;  
  cursor: pointer;  
  font-size: 1em;
  padding: 0.5em 1em;	  
  position: relative;
  bottom: 3.25em;
  left: 22em;	
}
.submit:focus, 
.reset:focus {
  background-color: #06C906;	
  outline: 0;
}