@font-face {
    font-family: typewriter;
    src: url( "/fonts/TravelingTypewriter.ttf" );
}
@font-face {
    font-family: gothique;font-family: gothique;font-family: gothique;font-family: gothique;font-family: gothique;font-family: gothique;font-family: gothique;
    src: url( "/fonts/AGothiqueTime.ttf" );
}
@font-face {
    font-family: buttercup;
    src: url( "/fonts/ButtercupSample.ttf" );
}



html {
  height: 100%;
}
body {
  min-height: 100%;
  min-width: 1220px;
  margin: 0;
  background: url( "/img/body-bg.jpg" ) center 100px repeat;
}
div {
  position: relative;
  z-index: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  outline: none;
}


.background {
  z-index: -1000;
}



#field {
  width: 100%;
  height: 100%;
  min-height: 841px;
  margin: 0;
  background: url( "/img/bg.jpg" ) center center repeat-x;
  position: relative;
}
#field > div {
  width: 1220px;
  height: 690px;
  margin: auto;
  background-image: url( "/img/all-bg.png" );
  background-position: center bottom;
  background-repeat: no-repeat;
}



#premenu {
  width: 170px;
  height: 400px;
  background: url( "/img/menu-pole.png" ) center bottom no-repeat;
  position: absolute;
  left: 150px;
  bottom: 290px;
}
#premenu > div {
  width: 170px;
  height: 400px;
  background: url( "/img/menu-bush.png" ) center bottom no-repeat;
}

#menu {
  text-align: center;
  position: absolute;
  left: 150px;
  bottom: 290px;
}
#menu > ul {
  width: 170px;
  height: 400px;
  padding: 0;
  margin: 0;
}
#menu > ul > li {
  width: 100%;
  height: 40px;
  display: block;
}
#menu > ul > li.main {
  height: 85px;
}
#menu > ul > li > a {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  font-size: 0;
  z-index: 1000;
}
#menu > ul > li > a[href]:hover {
  position: relative;
  top: 1px;
}
#menu > ul > li.main > a {
  background: url( "/img/menu-main.png" ) center center no-repeat;
}
#menu > ul > li.ceremony > a {
  background: url( "/img/menu-ceremony.png" ) center center no-repeat;
}
#menu > ul > li.lodging > a {
  background: url( "/img/menu-lodging.png" ) center center no-repeat;
}
#menu > ul > li.confirmate > a {
  background: url( "/img/menu-confirmate.png" ) center center no-repeat;
}
#menu > ul > li.gifts > a {
  background: url( "/img/menu-gifts.png" ) center center no-repeat;
}
#menu > ul > li.gallery > a {
  background: url( "/img/menu-gallery.png" ) center center no-repeat;
}
#menu > ul > li.gallery_off > a {
  background: url( "/img/menu-gallery-off.png" ) center center no-repeat;
}
#menu > ul > li.instagram > a {
  background: url( "/img/menu-instagram.png" ) center center no-repeat;
}
#menu > ul > li.instagram_off > a {
  background: url( "/img/menu-instagram-off.png" ) center center no-repeat;
}



#main {
}

#main > div.cloud {
  width: 85px;
  height: 65px;
  background: url( "/img/all-cloud.png" ) center top no-repeat;
  position: absolute;
}
#main > div.cloud.item1 {
  left: 340px;
  bottom: 630px;
}
#main > div.cloud.item2 {
  left: 100px;
  bottom: 590px;
}
#main > div.plane {
  width: 210px;
  height: 180px;
  background: url( "/img/all-plane.png" ) center top no-repeat;
  position: absolute;
  right: 100px;
  bottom: 55px;
}

#main > .arch {
  width: 100%;
  height: 605px;
  background: url( "/img/main-arch.png" ) center top no-repeat;
  position: absolute;
  right: 0;
  bottom: 80px;
}
#main > .arch > .couple {
  width: 100%;
  height: 605px;
  background: url( "/img/main-couple.png" ) center bottom no-repeat;
}

#main > .sign {
  width: 300px;
  height: 210px;
  background: url( "/img/main-sign.png" ) center bottom no-repeat;
  position: absolute;
  left: 65px;
  bottom: 55px;
}

#main > .story {
  width: 350px;
  height: 480px;
  background: url( "/img/main-panel.png" ) center bottom no-repeat;
  position: absolute;
  right: 100px;
  bottom: 200px;
}
#main > .story > div.cloud {
  width: 350px;
  height: 185px;
  background: url( "/img/main-panel-cloud.png" ) center center no-repeat;
}
#main > .story > h1 {
  margin: 0;
  padding: 0 20px 0 60px;
  color: white;
  color: #453219;
  font-family: gothique, fantasy;
  font-weight: normal;
  letter-spacing: 3px;
  line-height: 1em;
}
#main > .story > h1 > span {
  float: left;
  display: inline-block;
  font-size: 2em;
}
#main > .story p {
  margin: 0;
  padding: 0 20px 0 60px;
  color: white;
  color: #453219;
  font-size: 12px;
  font-family: typewriter, monospace;
  font-weight: bold;
  line-height: 1.4em;
}
#main > .story p.first {
  text-indent: 30px;
}



#ceremony {
}

#ceremony > div.sky {
  width: 1220px;
  height: 560px;
  background: url( "/img/ceremony-sky.png" ) center top no-repeat;
  position: absolute;
}
#ceremony > div.balloon {
  width: 180px;
  height: 225px;
  background: url( "/img/ceremony-balloon.png" ) center top no-repeat;
  position: absolute;
  left: 430px;
  top: 0;
}
#ceremony > div.cloud {
  width: 85px;
  height: 65px;
  background: url( "/img/all-cloud.png" ) center top no-repeat;
  position: absolute;
  left: 100px;
  bottom: 590px;
}
#ceremony > div.cloud_l1 {
  width: 140px;
  height: 95px;
  background: url( "/img/all-cloud-l1.png" ) center top no-repeat;
  position: absolute;
  left: 330px;
  top: 150px;
}
#ceremony > div.cloud_l2 {
  width: 90px;
  height: 65px;
  background: url( "/img/all-cloud-l2.png" ) center top no-repeat;
  position: absolute;
  left: 300px;
  top: 225px;
}
#ceremony > div.cloud_r1 {
  width: 75px;
  height: 55px;
  background: url( "/img/all-cloud-r1.png" ) center top no-repeat;
  position: absolute;
  right: 450px;
  top: 150px;
}
#ceremony > div.cloud_r2 {
  width: 100px;
  height: 70px;
  background: url( "/img/all-cloud-r2.png" ) center top no-repeat;
  position: absolute;
  right: 200px;
  top: 100px;
  
}

#ceremony > div.mountains {
  width: 1220px;
  height: 430px;
  background: url( "/img/ceremony-mountains.png" ) center bottom no-repeat;
  position: absolute;
  bottom: 70px;
}
#ceremony > div.road {
  width: 1220px;
  height: 430px;
  background: url( "/img/ceremony-road.png" ) center bottom no-repeat;
  position: absolute;
  bottom: 40px;
}
#ceremony > div.town {
  width: 550px;
  height: 425px;
  background: url( "/img/ceremony-town.png" ) center top no-repeat;
  position: absolute;
  right: 60px;
  bottom: 190px;
}
#ceremony > div.car {
  width: 270px;
  height: 200px;
  background: url( "/img/ceremony-car.png" ) center top no-repeat;
  position: absolute;
  left: 200px;
  bottom: 200px;
}
#ceremony > ul.bubble {
  padding: 0;
  position: absolute;
  left: 420px;
  bottom: 200px;
}
#ceremony > ul.bubble > li {
  color: black;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  font-family: typewriter, monospace;
  position: absolute;
}
#ceremony > ul.bubble > li > a {
  height: 20px;
  font-weight: 700;
  display: block;
}
#ceremony > ul.bubble > li > a:hover {
  position: relative;
  top: 1px;
}
#ceremony > ul.bubble > li.item1 {
  left: 0;
  bottom: 175px;
}
#ceremony > ul.bubble > li.item1 > a {
  width: 70px;
  padding: 15px 0 25px;
  background: url( "/img/ceremony-bubble-where.png" ) center top no-repeat;
}
#ceremony > ul.bubble > li.item2 {
  left: 0;
  bottom: 130px;
}
#ceremony > ul.bubble > li.item2 > a {
  width: 140px;
  padding: 2px 0 5px;
  background: url( "/img/ceremony-bubble-directions.png" ) center top no-repeat;
}
#ceremony > ul.bubble > li.item3 {
  left: 20px;
  bottom: 95px;
}
#ceremony > ul.bubble > li.item3 > a {
  width: 145px;
  padding: 5px 0 15px;
  background: url( "/img/ceremony-bubble-after.png" ) center top no-repeat;
}
#ceremony > ul.bubble > li.item4 {
  left: 20px;
  bottom: 60px;
}
#ceremony > ul.bubble > li.item4 > a {
  width: 120px;
  padding: 10px 0 20px 10px;
  background: url( "/img/ceremony-bubble-wear.png" ) center top no-repeat;
}
#ceremony > ul.bubble > li.item5 {
  left: 30px;
  bottom: 0;
}
#ceremony > ul.bubble > li.item5 > a {
  width: 120px;
  padding: 7px 0 20px 10px;
  background: url( "/img/ceremony-bubble-parking.png" ) center top no-repeat;
}

#ceremony > div.panel {
  width: 550px;
  height: 450px;
  position: absolute;
  right: 100px;
  top: 0;
  display: none;
}
#ceremony > div.panel.open {
  display: block;
}
#ceremony > div.panel > div#texts {
  width: 550px;
  height: 0;
  margin: 10px 0 0;
  overflow: hidden;
  font-size: 12px;
}
#ceremony > div.panel > div#texts.open {
  height: 440px;
}
#ceremony > div.panel > div#texts > div {
  width: 330px;
  height: 400px;
  padding: 25px 110px;
  background: url( "/img/ceremony-panel.png" ) center bottom no-repeat;
  position: absolute;
  left: 0;
  bottom: 0;
}
#ceremony > div.panel > div#texts > div > div > h1 {
  margin: 1em 0 0;
  color: #453219;
  font-family: buttercup, fantasy;
  font-size: 1.3em;
  line-height: 1em;
}
#ceremony > div.panel > div#texts > div > div.open > h1 {
  font-size: 1.8em;
  line-height: 1em;
}
#ceremony > div.panel > div#texts > div > div > p {
  height: 0;
  margin: 0;
  color: #453219;
  font-size: 12px;
  font-family: typewriter, monospace;
  font-weight: bold;
  overflow: hidden;
}
#ceremony > div.panel > div#texts > div > div > p > a {
  text-decoration: underline;
}
#ceremony > div.panel > div#texts > div > div > p > a:hover {
  position: relative;
  top: 1px;
}
#ceremony > div.panel > div#texts > div > div.open > p {
  height: auto;
  margin: 1em 0;
}
#ceremony > div.panel > div.pole {
  width: 550px;
  height: 45px;
  background: url( "/img/ceremony-panel-pole.png" ) center bottom no-repeat;
  position: absolute;
  left: 0;
  top: -10px;
}

#ceremony > div.plane {
  width: 210px;
  height: 180px;
  background: url( "/img/all-plane.png" ) center top no-repeat;
  position: absolute;
  right: 100px;
  bottom: 55px;
}
#ceremony > div.title {
  width: 455px;
  height: 190px;
  background: url( "/img/ceremony-title.png" ) center top no-repeat;
  position: absolute;
  left: 85px;
  bottom: 55px;
}



#lodging {
}

#lodging > div.sky {
  width: 1220px;
  height: 370px;
  background: url( "/img/lodging-sky.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 300px;
}

#lodging > div.moon {
  width: 145px;
  height: 160px;
  background: url( "/img/lodging-moon.png" ) center top no-repeat;
  position: absolute;
  right: 220px;
  top: 20px;
}
#lodging > div.cloud {
  width: 85px;
  height: 65px;
  background: url( "/img/all-cloud.png" ) center top no-repeat;
  position: absolute;
  left: 100px;
  bottom: 590px;
}
#lodging > div.cloud_l1 {
  width: 140px;
  height: 95px;
  background: url( "/img/all-cloud-l1.png" ) center top no-repeat;
  position: absolute;
  left: 340px;
  top: 80px;
}
#lodging > div.cloud_l2 {
  width: 90px;
  height: 65px;
  background: url( "/img/all-cloud-l2.png" ) center top no-repeat;
  position: absolute;
  right: 175px;
  top: 155px;
}

#lodging > div.town {
  width: 1220px;
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: 360px;
}
#lodging > div.town.item1 {
  background-image: url( "/img/lodging-town1.png" );
}
#lodging > div.town.item2 {
  background-image: url( "/img/lodging-town2.png" );
}
#lodging > div.town.item3 {
  background-image: url( "/img/lodging-town3.png" );
}

#lodging > div.hill {
  width: 1220px;
  height: 250px;
  background: url( "/img/lodging-hill.png" ) center bottom no-repeat;
  position: absolute;
  left: 0;
  bottom: 240px;
}
#lodging > div.hill > div {
  position: absolute;
  width: 335px;
  left: 640px;
  top: 75px;
  font-weight: bold;
}
#lodging > div.hill > div > h1 {
  margin: 0;
  color: #453219;
  font-family: buttercup, fantasy;
  font-size: 1.3em;
  line-height: 1.3em;
}
#lodging > div.hill > div > p {
  margin: 0.5em 0;
  color: #453219;
  line-height: 20px;
  text-align: left;
  font-size: 10px;
  font-family: typewriter, monospace;
  line-height: 1.3em;
}

#lodging > div.hotels {
  width: 1220px;
  height: 210px;
  position: absolute;
  left: 0;
  bottom: 60px;
  direction: rtl;
  font-weight: bold;
  text-align: center;
}
#lodging > div.hotels > div {
  width: 270px;
  height: 170px;
  margin: 0 10px 0 -190px;
  padding: 20px 20px 20px 210px;
  background: url( "/img/lodging-panel.png" ) center bottom no-repeat;
  color: #453219;
  display: inline-block;
  vertical-align: bottom;
  direction: ltr;
  text-align: left;
  font-family: typewriter, monospace;
}
#lodging > div.hotels > div > h1 {
  margin: 0.1em 0 0;
  font-family: buttercup, fantasy;
  font-size: 1em;
  line-height: 1em;
}
#lodging > div.hotels > div > h1:hover {
  position: relative;
  top: 1px;
}
#lodging > div.hotels > div > p {
  margin: 5px 0;
  line-height: 20px;
  text-align: left;
  font-size: 10px;
  line-height: 1.3em;
}
#lodging > div.hotels > div > ul {
  margin: 5px 0;
  padding: 0 0 0 1em;
  list-style: disc;
}
#lodging > div.hotels > div > ul > li {
  color: #453219;
  line-height: 20px;
  text-align: left;
  font-size: 10px;
  line-height: 1.3em;
}



#confirmate {
}
#confirmate > div.wall {
  width: 1220px;
  height: 430px;
  background: url( "/img/confirmate-wall.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}
#confirmate > div.floor {
  width: 1220px;
  height: 215px;
  background: url( "/img/confirmate-floor.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 45px;
}

#confirmate > div.jars {
  width: 460px;
  height: 380px;
  background: url( "/img/confirmate-jars.png" ) center center no-repeat;
  position: absolute;
  left: 75px;
  bottom: 150px;
}
#confirmate > div.pen {
  width: 255px;
  height: 155px;
  background: url( "/img/confirmate-pen.png" ) center center no-repeat;
  position: absolute;
  left: 240px;
  bottom: 30px;
}
#confirmate > div.ship {
  width: 340px;
  height: 230px;
  background: url( "/img/confirmate-ship.png" ) center center no-repeat;
  position: absolute;
  right: 170px;
  bottom: 65px;
}

#confirmate > div.surprise {
  width: 300px;
  height: 210px;
  position: absolute;
  right: 0;
  top: 0;
}
#confirmate > div.surprise > a {
  width: 300px;
  height: 210px;
  background: url( "/img/confirmate-surprise.png" ) center center no-repeat;
  display: inline-block;
  font-size: 0;
}
#confirmate > div.surprise > a:hover {
  position: relative;
  top: 1px;
}

#confirmate > div.panel_bg {
  width: 320px;
  height: 400px;
  padding: 170px 70px 90px;
  background: url( "/img/confirmate-panel.png" ) center center no-repeat;
  position: absolute;
  left: 400px;
  top: 0;
}
#confirmate > div.panel {
  width: 320px;
  height: 400px;
  padding: 170px 70px 90px;
  position: absolute;
  left: 400px;
  top: 0;
}
#confirmate > div.panel > form > h1 {
  width: 315px;
  height: 145px;
  background: url( "/img/confirmate-panel-header.png" ) center center no-repeat;
  font-size: 0;
}
#confirmate > div.panel > form > p {
  margin: 5px 15px;
  line-height: 11px;
  text-align: left;
  text-transform: uppercase;
  font-size: 10.5px;
  font-family: typewriter, monospace;
  font-weight: bold;
  display: none;
}
#confirmate > div.panel > form > p.message {
  text-transform: none;
}
#confirmate > div.panel > form > p.name {
  display: block;
}
#confirmate > div.panel > form > p.buttons {
  text-align: center;
  display: block;
}
#confirmate > div.panel > form > p > span {
  width: 60px;
  display: inline-block;
}
#confirmate > div.panel > form > p > span.medium {
  width: 110px;
}
#confirmate > div.panel > form > p > span.long {
  width: 250px;
}
#confirmate > div.panel > form > p > input[type=text] {
  width: 220px;
  background: transparent;
  border-width: 0 0 1px 0;
  border-color: #453219;
  font-size: 12px;
}
#confirmate > div.panel > form > p > label {
  cursor: pointer;
}
#confirmate > div.panel > form > p > input[type=text].medium {
  width: 170px;
}
#confirmate > div.panel > form > p > input[type=text].long {
  width: 285px;
}
#confirmate > div.panel > form > p > label > input[type=checkbox] {
  vertical-align: middle;
  margin: 0 3px;
}
#confirmate > div.panel > form > p > input[type=button] {
  height: 60px;
  padding: 0;
  margin: 0 5px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 0;
}
#confirmate > div.panel > form > p > input[type=button]:hover {
  position: relative;
  top: 1px;
}
#confirmate > div.panel > form > p > input.yes {
  width: 60px;
  background: url( "/img/confirmate-panel-yes.png" ) center center no-repeat;
  display: initial;
}
#confirmate > div.panel > form > p > input.no {
  width: 60px;
  background: url( "/img/confirmate-panel-no.png" ) center center no-repeat;
  display: initial;
}
#confirmate > div.panel > form > p > input.send {
  width: 70px;
  background: url( "/img/confirmate-panel-submit.png" ) center center no-repeat;
  display: none;
}
#confirmate > div.panel > form > p.done {
  display: none;
}

#confirmate > div.panel > form.extended > h1 {
  width: 315px;
  height: 115px;
  background: url( "/img/confirmate-panel-header-yes.png" ) center center no-repeat;
  font-size: 0;
}
#confirmate > div.panel > form.extended > p {
  display: block;
}
#confirmate > div.panel > form.extended > p > input.yes {
  display: none;
}
#confirmate > div.panel > form.extended > p > input.no {
  display: none;
}
#confirmate > div.panel > form.extended > p > input.send {
  display: initial;
}

#confirmate > div.panel > form.done > p {
  display: none;
}
#confirmate > div.panel > form.done > p.done {
  margin: 50px 0;
  display: block;
  line-height: normal;
  text-align: center;
  font-family: gothique;
  font-size: 50px;
  font-weight: normal;
}



#gifts {
}

#gifts > div.cloud {
  width: 85px;
  height: 65px;
  background: url( "/img/all-cloud.png" ) center top no-repeat;
  position: absolute;
  left: 100px;
  bottom: 590px;
}
#gifts > div.cloud_l1 {
  width: 140px;
  height: 95px;
  background: url( "/img/all-cloud-l1.png" ) center top no-repeat;
  position: absolute;
  left: 400px;
  top: 60px;
}
#gifts > .mountains {
  width: 430px;
  height: 235px;
  background: url( "/img/gifts-mountains.png" ) center top no-repeat;
  position: absolute;
  left: 300px;
  top: 145px;
}
#gifts > .balloon {
  width: 360px;
  height: 300px;
  position: absolute;
  left: 510px;
  top: -10px;
}
#gifts > .balloon > .car {
  width: 300px;
  height: 260px;
  background: url( "/img/gifts-car.png" ) center top no-repeat;
  position: absolute;
  left: 60px;
  top: 0;
}
#gifts > .balloon > .smoke {
  width: 115px;
  height: 140px;
  background: url( "/img/gifts-smoke.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  top: 160px;
}
#gifts > .balloon > .ribbon {
  width: 60px;
  height: 60px;
  background: url( "/img/gifts-ribbon.png" ) center top no-repeat;
  position: absolute;
  left: 160px;
  top: 150px;
}

#gifts > .map {
  width: 1220px;
  height: 350px;
  background: url( "/img/gifts-map.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 55px;
}
#gifts > .map > div {
  position: absolute;
  width: 300px;
  left: 630px;
  top: 75px;
  font-weight: bold;
}
#gifts > .map > div > h1 {
  margin: 1em 0 0;
  color: white;
  font-family: buttercup, fantasy;
  font-size: 1.3em;
  line-height: 1.3em;
}
#gifts > .map > div > p {
  color: white;
  line-height: 20px;
  text-align: left;
  font-size: 10px;
  font-family: typewriter, monospace;
  line-height: 1.3em;
}
#gifts > .map > div > p > span {
  font-size: 12px;
}



#gallery {
}

#gallery > div.cloud {
  width: 85px;
  height: 65px;
  background: url( "/img/all-cloud.png" ) center top no-repeat;
  position: absolute;
  left: 100px;
  bottom: 590px;
}
#gallery > div.cloud_l1 {
  width: 140px;
  height: 95px;
  background: url( "/img/all-cloud-l1.png" ) center top no-repeat;
  position: absolute;
  right: 100px;
  top: 160px;
}
#gallery > div.balloon {
  width: 180px;
  height: 160px;
  background: url( "/img/gallery-balloon.png" ) center top no-repeat;
  position: absolute;
  right: 65px;
  top: -10px;
}
#gallery > div.wall {
  width: 1220px;
  height: 490px;
  background: url( "/img/gallery-wall.jpg" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 200px;
}
#gallery > div.floor {
  width: 1220px;
  height: 150px;
  background: url( "/img/gallery-floor.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 50px;
}

#gallery > div.bags {
  width: 220px;
  height: 185px;
  background: url( "/img/gallery-bags.png" ) center top no-repeat;
  position: absolute;
  left: 105px;
  bottom: 155px;
}
#gallery > div.ropes {
  width: 1220px;
  height: 605px;
  background: url( "/img/gallery-ropes.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 75px;
}
#gallery > div.ropes > div.hearts {
  width: 1220px;
  height: 605px;
  background: url( "/img/gallery-hearts.png" ) center top no-repeat;
  position: absolute;
  left: 0;
  bottom: 0;
}