html,
body,
.mask,
.slides_container,
.slides_control {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-family: helvetica, sans-serif;
  color: #ddd;
  font-weight: 300;
  background-color: #000;
  background: #000 url(../images/wallpaper.jpg) center center fixed;
}

ul, ol {
  margin: 0;
}

#slides_control {
  position :relative !important;
}

.prev,.next { z-index: 110000 }

#book     { z-index: 9}

.pagination { z-index: 100 }
#bot        { z-index: 99 }
#photos     { z-index: 12}
#loading { z-index: 200}

/* pagination
------------------------------------------------------------------------------*/

.pagination {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  text-align: center;
}

.pagination li {
  display: inline;
  margin: 0 3px;
}

.pagination a {
  display: inline-block;
  width:  5px;
  height: 5px;
  background-color: #ddd;
  border: 1px solid #ddd;
  border-radius:         3px;
  -moz-border-radius:    3px;
  -webkit-border-radius: 3px;
  text-indent: -999em;
  opacity: 0.3;
}

.pagination .current a {
  opacity: 1;
  box-shadow:         0 0 5px 1px #fff;
  -moz-box-shadow:    0 0 5px 1px #fff;
  -webkit-box-shadow: 0 0 5px 1px #fff;
}

.pagination .current:active a {
  opacity: 0.7;
}

.prev, .next {
  position: absolute;
  bottom: 0;
  height: 58px;
  width: 94px;
  display: block;
  background: url(../images/arrows.png) 0 center no-repeat;
  text-indent: -1000em;
  opacity: 0.5;
  -webkit-transition: opacity 0.1s ease-in-out;
  display: none;
}

.prev:hover, .next:hover {
  opacity: 1;
}

#book:hover .prev, 
#book:hover .next {
  display: block;
}

.prev {
  left: 20px;
  background-position: 0 bottom ;
}

.next {
  right: 20px;
  background-position: -94px bottom ;
}

/* structure
------------------------------------------------------------------------------*/

#book {
  opacity: 0;
}

.photo-group {
  display: none;
  
}

.photo-group:first-child {
  display: block;
}

.photo {
  float: left;
  display: inline;
  position: relative;
  box-shadow:         36px 0 10px 5px  #000, -36px 0 10px 5px #000;
  -moz-box-shadow:    36px 0 10px 5px  #000, -36px 0 10px 5px #000;
  -webkit-box-shadow: 36px 0 10px 5px  #000, -36px 0 10px 5px #000;
}

.photos_3 {
  width: 24%;
  margin: 10% 4% 0;
}

.photos_2 {
  width: 31%;
  margin: 10% 8% 0;
}

.photo img{
  box-shadow:         inset 0 0 10px #000;
  -moz-box-shadow:    inset 0 0 10px #000;
  -webkit-box-shadow: inset 0 0 10px #000;
  
}

.photo img,
.photo .frame {
  width: 100%;
}

.photo .frame * {
  position: absolute;
}

.photo .frame .top,
.photo .frame .bottom {
  left: 0;
  height: 46px;
  width: 100%;
}

.photo .frame .left,
.photo .frame .right {
  top: -36px;
  height: 100%;
  width: 46px;
}

.photo .frame .top    { 
  top: -36px;
  background: url(../images/frame-top.png);
}

.photo .frame .right    { 
  right: -36px;
  background: url(../images/frame-right.png);
}

.photo .frame .bottom    { 
  bottom: 0;
  background: url(../images/frame-bottom.png);
}

.photo .frame .left    { 
  left: -36px;
  background: url(../images/frame-left.png);
}

.photo .frame .corner {
  width:  46px;
  height: 46px;
}

.photo .frame .right-top,
.photo .frame .left-top      { top:  -36px }

.photo .frame .right-bot,
.photo .frame .left-bot   { bottom: 0;  }

.photo .frame .right-top      { right:  -36px; background: url(../images/corner-tr.png) right top     }
.photo .frame .left-top       { left:   -36px; background: url(../images/corner-tl.png) left  top     }
.photo .frame .right-bot      { right:  -36px; background: url(../images/corner-br.png) right bottom  }
.photo .frame .left-bot       { left:   -36px; background: url(../images/corner-bl.png) left  bottom  }


/* body corners
------------------------------------------------------------------------------*/

#top,
#bot,
.body-corner {
  position: fixed; 
  z-index: 1;
}

#tl { top: 0; left: 0; }
#tr { top: 0; right: 0; }
#bl { bottom: 0; left: 0; }
#br { bottom: 0; right: 0; }

#top, #bot {
  height: 200px;
  width: 100%;
}

#top { background: url(../images/top.png) center top repeat-x; }
#bot { background: url(../images/bot.png) center bottom repeat-x; bottom: 0;}



/* hello
------------------------------------------------------------------------------*/

#loading {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#loading .loading-img {
  margin: 20px auto;
  width: 80px;
  line-height: 0;
  padding: 25px 0;
  border-radius:         10px;
  -moz-border-radius:    10px;
  -webkit-border-radius: 10px;
  background-color: #000;
  opacity: 0;
}

#hello {
  position: relative;
  margin: 0 auto 0;
  width: 520px; 
}

#hello h1 {
  width: 520px;
  height: 180px;
  text-indent: -1000em;
  background: url(../images/30years.png) center top no-repeat;
}

#begin {
  position: relative;
  width: 520px;
  height: 94px;
  margin: 10px 0 0;
  z-index: 10000;
  cursor: pointer;
  background: url(../images/begin.png) center top no-repeat;
  text-indent: -10000em;
  -webkit-transition: opacity 0.1s ease-in-out;
}

#begin:hover {
  opacity: 0.7;
}