/*////////////////////////////////////////////////////////////
		CSS-resetti
( http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ )
////////////////////////////////////////////////////////////*/

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* /Meyer */

body {
  background-color: #8fc31f;
  font-family: Verdana, serif;
  font-size: clamp(0.8em, calc(2rem - 1.5vw), 2rem);
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}
h1,
h2,
h3 {
  margin: 10px;
  padding: 10px 0;
}
h4 {
  font-size: 1.2em;
  margin: 10px 10px 3px 10px;
  padding: 10px 0 0 0;
}
a {
  color: #d8d900;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #8e8e00;
  text-decoration: underline;
  font-weight: bold;
}

.small {
  font-size: 0.7em;
}

.clear {
  clear: both;
}

#container {
  margin: 0 auto 0 15%;
  width: 700px;
  border: 12px solid white;
  background-color: #207921;
  color: #ffffe0;
}

#logo {
  height: 268px;
  background-image: url(gfx/logo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#links {
  background-color: White;
  text-align: center;
  border-top: 12px solid white;
  border-bottom: 12px solid white;
  font-size: 10px;
}
#links ul {
  margin: 40px 0 0 0;
  list-style-type: none;
}
#links ul li {
  display: inline;
}
#links a {
  font-size: 1.2em;
  margin: 0 20px;
  padding: 45px 0 0 0;
  color: #30301b;
  text-decoration: none;
}
#links a.selected {
  font-size: 1.5em;
  font-weight: bolder;
  text-decoration: underline;
}
#links a:hover {
  height: 32px;
  margin: 0 20px;
  color: #7f8061;
  text-decoration: underline;
}
#diarylinks ul {
  margin: 0 20px 20px 35px;
  list-style-type: disc;
}
#diarylinks ul li {
  margin: 0 0 6px 0;
}

#diary-entries.list a {
  font-weight: 400;
}
#diary-entries.list .textbox {
  margin: 5px 20px;
}

#home {
  background: url(gfx/home.png) center no-repeat;
}
#plans {
  background: url(gfx/plans.png) center no-repeat;
}
#info {
  background: url(gfx/info.png) center no-repeat;
}
#diary {
  background: url(gfx/diary.png) center no-repeat;
}
#huolto {
  background: url(gfx/huolto.png) center no-repeat;
}
#rss {
  background: url(gfx/rss.png) right no-repeat;
  padding: 0 1.7em 0 0;
  margin: 0 10px 0 0;
}

#content {
  text-align: justify;
  padding: 0 0 20px 0;
}

#content p {
  margin: 0 20px;
  padding: 0 0 20px 0;
  line-height: 1.5em;
}

#content .filename {
  padding: 0 0 0 20px;
  margin: 0;
  line-height: 1.3em;
}

#content .textbox {
  border: 1px solid black;
  margin: 10px 20px 20px 20px;
  padding: 10px;
  background-color: #f4f4f4;
  color: #004201;
}
#content .textbox a {
  color: #228b22;
}
#content .commentbox {
  border: 1px solid black;
  margin: 10px 20px 20px 20px;
  padding: 10px;
  background-color: #00aeb0;
}

#content img {
  max-width: 48%;
  border: 1px solid black;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

#content .imgright {
  float: right;
  margin: 0 0 0 10px;
}
#content .imgleft {
  margin: 0 10px 0 0;
  float: left;
}

#input td {
  padding: 5px 0 0px 20px;
}

#input select,
#input textarea,
#input input {
  margin: 0 0 10px 0;
  padding: 2px 5px;
}

#footer {
  height: 40px;
  width: 700px;
  padding: 10px 0 5px 0;
  background-color: White;
  background-image: url(gfx/palm.png);
  background-position: left center;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 1.2em;
  color: Black;
}

#separator {
  height: 15px;
}

#sort-controls {
  margin: 0 20px 10px 20px;
  font-size: 0.9em;
}

#sort-controls .sort-link {
  color: #004201;
  cursor: pointer;
  text-decoration: none;
}

#sort-controls .sort-active {
  font-weight: bold;
  text-decoration: underline;
  color: white;
  cursor: default;
}

.deadlink {
  color: gray !important;
  font-weight: 100;
}
.deadlink:hover {
  color: gray !important;
  cursor: not-allowed;
  font-weight: 100;
  text-decoration: none;
}

.entry-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.entry-link .textbox:hover {
  cursor: pointer;
  opacity: 0.85;
}

@media (max-width: 1024px) {
  #container {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border: 0;
  }

  #footer {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    height: auto;
    padding: 20px 10px;
  }
}

@media only screen and (max-device-width: 500px) and (max-device-height: 900px) and (orientation: portrait) {
  body {
    font-size: clamp(0.8em, calc(3rem - 1.5vw), 3rem);
  }
  #links a {
    font-size: 2em;
  }
  #links a.selected {
    font-size: 2em;
  }
}

@media only screen and (max-device-height: 500px) and (max-device-width: 900px) and (orientation: landscape) {
  body {
    font-size: clamp(0.8em, calc(2.3rem - 1.5vw), 2.3rem);
  }
}