@charset "utf-8";

body {
  text-align: center;
  font-family: Osaka, sans-serif;
  background: url('../images/background-home.jpg') no-repeat 50% 0;
}

img {
  vertical-align: bottom;
}

#wrapper {
  width: 980px;
  margin: 0 auto;
  /*position: relative;*/
  text-align: left;
  /*background-color: #F09034;*/
}

header {
  width: 245px;
  height: 305px;
  position: absolute;
  top: 39px;
  left: 0px;
  background: url('../images/nav.png') no-repeat;
  z-index: 1;
}
header h1 {
  margin-top: 68px;
  padding-left: 13px;
}
#main-nav ul {
  margin-top: 7px;
}
#main-nav li {
  padding-bottom: 6px;
}
#main-nav li a {
  display: block;
  height: 18px;
  padding-left: 25px;
  font-family: Impact;
  font-size: 16px;
  font-weight: 200;
  color: white;
  vertical-align: bottom;
  background: url('../images/nav-arrow.gif') no-repeat 10px 18px;
}
#main-nav li a:hover {
  background-position: 10px 3px;
}

#main-nav li.link-active a {
}
#main-nav li.link-active a * {
  /*visibility: hidden;*/
  opacity: 0.5;
}

#home,
#information,
#art-works,
#links,
#contact {
  margin: 0;
  background-repeat: no-repeat;
}

#home {
  position: relative;
  height: 444px;
  background-image: url('../images/background-home.jpg');
  background-position: 50% 0;
}

#information {
  position: relative;
  height: 326px;
  background-image: url('../images/background-info.gif');
}

#art-works {
  height: 378px;
  background-image: url('../images/background-works.jpg');

}

#links {
  height: 252px;
  background-image: url('../images/background-links.jpg');
}

#contact {
  height: 710px;
  background-image: url('../images/background-contact.jpg');
}

/* -----------------------------------------------------------------------
 * HOME
 */
 
#home-flag {
  position: absolute;
  width: 125px;
  height: 61px;
  top: 61px;
  left: 477px;
  background: url('../images/flag.png') no-repeat 0 -61px;
}

#home-mouse {
  position: absolute;
  width: 26px;
  height: 45px;
  top: 144px;
  left: 677px;
  cursor: pointer;
  background: url('../images/mouse.png') no-repeat 0 0;
}

#links-illust-blog,
#links-art-life,
#links-haltija {
  position: absolute;
}

#links-art-life a,
#links-illust-blog a,
#links-haltija a {
  position: absolute;
  display: block;
}

#links-art-life-inner,
#links-illust-blog-inner,
#links-haltija-inner {
  position: absolute;
}

#links-art-life {
  top: 120px;
  left: 258px;
}
#links-art-life,
#links-art-life-inner {
  width: 87px;
  height: 85px;
  background: url('../images/art-life-back.gif') no-repeat;
}
#links-art-life a {
  /*top: 30px;
  left: 24px;*/
  padding: 34px 18px 26px 21px;
}

#links-illust-blog {
  top: 39px;
  left: 364px;
}
#links-illust-blog,
#links-illust-blog-inner {
  width: 105px;
  height: 105px;
  background: url('../images/blog-back.gif') no-repeat;
}
#links-illust-blog a {
  /*top: 38px;
  left: 26px;*/
  padding: 37px 16px 40px 25px;
}

#links-haltija {
  top: 50px;
  left: 752px;
}
#links-haltija,
#links-haltija-inner {
  width: 146px;
  height: 149px;
  background: url('../images/haltija-back.png') no-repeat;
}
#links-haltija a {
  position: absolute;
  padding: 59px 45px 56px 45px;
}
#links-haltija:hover,
#links-haltija:hover #links-haltija-inner {
  background-position: 100% 0;
}

.mobile #links-haltija:hover,
.mobile #links-haltija:hover #links-haltija-inner {
  background-position: 0 0;
}
.mobile #links-haltija:active,
.mobile #links-haltija:active #links-haltija-inner {
  background-position: 100% 0;
}

#text-block1,
#text-block2 {
  position: absolute;
  top: 315px;
  font-size: 9px;
  line-height: 1.7;
  text-align: justify;
}
#text-block1 {
  width: 20em;
  left: 380px;
}
#text-block2 {
  width: 17em;
  left: 645px;
}

/* -----------------------------------------------------------------------
 * INFORMATION
 */

#information-box {
  position: absolute;
  top: 84px;
  left: 524px;
  width: 350px;
  height: 212px;
  overflow: hidden;
}

#information-articles {
  width: 350px;
  height: 212px;
  overflow: auto;
  background-color: white;
}

#information-articles article {
  padding: 5px 6px;
  overflow: hidden;
  font-size: 9px;
  line-height: 14px;
}
#information-articles article::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}

.article-image {
  padding-right: 6px;
  overflow: hidden;
}
.article-title {
  padding-bottom: 2px;
  font-size: 11px;
  font-weight: bold;
  color: #940C4A;
  border-bottom: solid 1px #999;
}
.article-text {
  padding-top: 2px;
  font-size: 9px;
  text-align: justify;
}
.article-title,
.article-text {
  width: 248px;
}

.article-image,
.article-title,
.article-text {
  float: left;
}

/* scroll bar */
.ui-flickable-container,
.ui-flickable-wrapper,
.ui-flickable-content {
  background-color: transparent;
}
.ui-flickable-disabled .ui-flickable-container, .ui-flickable-canceled {
  cursor: default;
  background-color: transparent;
}

.flickable-scrollbar {
  background-color: #3359AA;
  border-radius: 5px;
}

/* -----------------------------------------------------------------------
 * ART WORKS
 */

/* slide show */
#artworks-slideshow {
  padding-top: 40px;
  margin-left: 290px;
}

.slideshow-container {
  overflow: hidden;
}

.slideshow-display,
.slideshow-thumbnails {
  float: left;
}

.slideshow-display {
}
.slideshow-display::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.slideshow-screen,
.slideshow-prev,
.slideshow-next {
  height: 283px;
  float: left;
}
.slideshow-screen {
  width: 283px;
  background-color: #546828;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.slideshow-prev,
.slideshow-next {
  width: 28px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.slideshow-prev:hover,
.slideshow-next:hover {
  background-position: 100% 50%;
}
.slideshow-prev {
  background-image: url('../images/prev.gif');
}
.slideshow-next {
  background-image: url('../images/next.gif');
}

.slideshow-caption {
  clear: both;
  padding-top: 3px;
  margin: 0 28px;
  font-size: 11px;
  line-height: 1.2;
}

.slideshow-thumbnails {
  width: 114px;
  overflow: hidden;
  padding-left: 70px;
}
.slideshow-thumbnails::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}
.slideshow-thumb {
  display: block;
  float: left;
  padding-right: 6px;
  padding-bottom: 6px;
}
.slideshow-thumb a {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
}
.slideshow-thumb-cover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slideshow-thumb a .slideshow-thumb-cover {
  -moz-transition: background-color 0.3s ease 0;
  -webkit-transition: background-color 0.3s ease 0;
  -o-transition: background-color 0.3s ease 0;
  -ms-transition: background-color 0.3s ease 0;
  transition: background-color 0.3s ease 0;
}
.slideshow-thumb a:hover .slideshow-thumb-cover {
  background-color: rgba(0,0,0,.5);
}

/* -----------------------------------------------------------------------
 * LINK
 */

#links-inner {
  padding-top: 66px;
  padding-left: 374px;
  overflow: hidden;
}
#links-inner::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}

#links ul {
  float: left;
  width: 250px;
  list-style: none;
}
#links li {
  padding-left: 7px;
  font-size: 12px;
  line-height: 1.5;
  background: url('../images/link-mark.gif') no-repeat 1px 50%;
}

#links a {
  color: black;
}
#links a:visited {
  color: #666;
}
#links a:hover {
  color: #E12D16;
}
#links a:active {
  color: black;
}

/* -----------------------------------------------------------------------
 * CONTACT
 */

#form-set {
  padding-top: 206px;
  margin-left: 450px;
}
#form-set p {
  font-size: 11px;
  line-height: 1.3;
  margin-top: 3px;
}
#form-set form {
  width: 405px;
  height: 295px;
  display: block;
  background: url('../images/contact.gif') no-repeat #79561E;
}
#form-set form ul {
  list-style: none;
  padding: 5px 10px;
}
#form-set form li {
  overflow: hidden;
  padding: 5px 0;
}
#form-set form li::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}

#form-set li label {
  /*width: 102px;
  padding-left: 55px;*/
  width: 157px;
  padding: 5px 0;
  color: white;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
}
#form-set li input,
#form-set li textarea {
  width: 228px;
  padding: 4px 0;
  margin: 0;
  border: none;
  line-height: 14px
}
#form-set li textarea {
  max-width: 228px;
  min-width: 228px;
  height: 112px;
  max-height: 112px;
  min-height: 112px;
  resize: none;
}

#form-set li label,
#form-set li input,
#form-set li textarea {
  display: block;
  float: left;
  font-size: 12px;
}
#form-set li label,
#form-set li input {
}

#form-submit {
  padding: 4px;
  margin-top: 12px;
  margin-right: 10px;
  margin-left: 167px;
  border-radius: 4px;
  background-color: #624304;
  text-align: center;
}
#form-submit input {
  width: 120px;
  height: 32px;
  border: none;
  cursor: pointer;
  color: black;
  font-size: 14px;
  line-height: 14px;
  background: url('../images/submit.gif') no-repeat;
}

#mailer-alert-block {
  position: absolute;
  top: -180px;
  left: -123px;
  width: 286px;
  height: 135px;
  background: url('../images/hukidashi.png') no-repeat;
}
#mailer-alert-block p {
  margin: 43px;
  text-align: center;
}

.mailer-alarm {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: -4px;
  left: 385px;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  background: url('error.gif') no-repeat 2px 4px #c00;
}
.alarm-nib {
  display: block;
  position: absolute;
  left: -30px;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-right-color: #c00;
}

/* -----------------------------------------------------------------------
 * footer
 */

footer {
  background: url('../images/background-contact.jpg') no-repeat 0 100%;
}
footer p {
  font-size: 11px;
  font-family: Verdana;
  line-height: 24px;
  text-align: center;
  /*color: white;*/
}