body {
font-family:New Century Schoolbook, serif;
border:0;
width:100%;
background:#f6f6f6;
min-width:600px;
font-size:90%;
margin:0;
padding:0;
}

a {
color:#369;
}

a:hover {
text-decoration:none;
}

h1,h2,h3 {
margin:.8em 0 .2em;
padding:0;
}

p {
margin:.4em 0 .8em;
padding:0;
}

img {
margin:10px 0 5px;
}

#ytplayer {
max-width: 100%;
min-width: 640px;
display: block; 
margin-left: auto;
margin-right: auto;
margin-top: 2%;
margin-bottom: 2%;
}

img.responsiveimage {
max-width: 100%;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
margin-bottom: 2%;
}

figcaption.responsiveimage {
    display: block;
    text-align: center;
    margin-bottom: 1em;
}

@media screen and (orientation: portrait) {
img.responsiveimage { max-width: 100%; }
}

@media screen and (orientation: landscape) {
img.responsiveimage { max-height: 100%; }
}

#header {
clear:both;
float:left;
width:100%;
border-bottom:1px solid #000;
}

#header p,#header h1,#header h2 {
margin:0;
padding:.4em 15px 0;
}

#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0;
padding:0;
}

#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}

#header ul li a {
display:block;
float:left;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
margin:0 0 0 1px;
padding:3px 10px;
}

#header ul li a span {
display:block;
}

#quote {
font-style:italic;
clear:both;
background:#eee;
border-top:4px solid #000;
text-align:right;
margin:0;
padding:6px 15px!important;
}

.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}

.colright,.colmid,.colleft {
float:left;
width:100%;
position:relative;
}

.col1,.col2,.col3 {
float:left;
position:relative;
overflow:hidden;
padding:0 0 1em;
}

.leftmenu {
background:#f6f6f6;
}

.leftmenu .colleft {
right:75%;
background:#eee;
}

.leftmenu .col1 {
width:57%;
left:105%;
}

.leftmenu .col2 {
width:23%;
left:20%;
}

#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}

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

.portrait {
max-width:100%;
height:auto;
border:0;
}

#centeredmenu {
float:left;
width:100%;
background:#f6f6f6;
border-bottom:4px solid #000;
overflow:hidden;
position:relative;
}

#centeredmenu ul {
clear:left;
float:left;
list-style:none;
position:relative;
left:50%;
text-align:center;
margin:0;
padding:0;
}

#centeredmenu ul li {
display:block;
float:left;
list-style:none;
position:relative;
right:50%;
margin:0;
padding:0;
}

#centeredmenu ul li a {
display:block;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
margin:0 0 0 1px;
padding:3px 10px;
}

#header ul li a:hover,#centeredmenu ul li a:hover {
background:#369;
color:#fff;
}

#header ul li a.active,#header ul li a.active:hover,#centeredmenu ul li a.active,#centeredmenu ul li a.active:hover {
background:#000;
color:#fff;
font-weight:700;
}
/* muistokirja styles */
.memorybook {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	display: table;	
}
.note {
	margin-bottom:1.00em;
	padding:0.50em;
}
.note-item{
	display: table-row;
	background-color: #eee;
}
.note-item .label{		
	text-align:right;
	font-weight: bold;
	padding: 0.25em 0.75em 0.00em 1.00em; 
	display: table-cell;
}
.note-item .content{		
	text-align:left;
	padding: 0.25em 1.00em 0.00em 0.00em; 
	display: table-cell;
}

/* kirjoita muistokirjaan styles */
label {
    display:block;
    margin-top:20px;
}

.muistelo {
    display:block;
}

input, textarea {
    width:439px;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
}

input:focus, textarea:focus {
    border:1px solid #97d6eb;
}

textarea {
        height:213px;
}

#submit {
    display:block;
    width:127px;
    height:38px;
    margin-top:20px;
    cursor:pointer;
}

#submit:hover {
    border:1px solid #97d6eb;
    opacity:.9;
}