html, body { border: 0; margin: 0; padding: 0; height: 100%; max-height: 100%;  }

body { font: 0.8125em Verdana, sans-serif; line-height: 1; }           
  
img { border: none }

/* Menu bar layout */

#container {
   width: 100%;
   height: 100%;
   min-height: 100%;
   z-index: 4;
}

#menuwrapper, #controlswrapper {
   margin: 0;
   z-index: 4;
   position: absolute;
}

#menu {
  margin: 0 auto;
  overflow: hidden;
}

#menupadding {
   margin: 0;
   padding: 0;
}

#menu table, #controls table {
   height: 100%;
   width: 100%;
}   

#menuitems {
   vertical-align: middle;
   width: auto;
   padding: 0;
   margin: 0;
}   

#menuitems ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
   background: red;
}

.topmenu #menuitems li {
   display: inline;
   margin: 0;
   padding: 0;
   list-style-type: none;
}

.leftmenu #menuitems li {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

/* Content layout */

#content ul, #content ol {
   margin-top: 13pt;
   margin-bottom: 13pt;
   margin-left: 7%
}

#contentCenterer {
   margin: 0 auto;
}

#content h1 {
   font-size: 180%;
}

#content h2 {
   font-size: 130%;
}

#content h3 {
   font-size: 110%;
}

#content p {
}

/* Gallery Index */

#albumIndex {
   margin: 0 auto;
}

#content a.albumLink, #content a.albumLink:hover {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: transparent;
   z-index: 5;
}

#content a.albumLink img {
   width: 100%;
   height: 100;
   border: none;
}

#content .albumText a {
   position: relative;
   z-index: 20;
}

.albumBox {
  overflow: hidden;
  position: relative;
  float: left;
}

.albumThumb {
}

.albumText {
}

/* Contact page */

#contact-area {
   display: inline-block;
   margin: 0 auto;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
}

#contact-area td {
   vertical-align: top;
}

#contact-area label {
   text-align: right;
}

.LV_invalid {
   display: block;
}   

.LV_valid {
   display: none;
} 

#thanks {
   text-align: center;
   font-weight: bold;
   margin-top: 70px;
}   

/* The controls */

#controlswrapperwrapper, #gridcontrolswrapperwrapper {
   position: absolute;
   position: fixed;
   bottom: 0;
   margin-left: auto;
   width: 100%;
   text-align: center;
   z-index: 3;
   overflow: hidden;
}

#controlswrapper {
   float: left;
   position: relative;
   left: 50%;
}

#controls, #gridControls {
   float: left;
   position: relative;
   left: -50%;
}

#controlspadding table {
}

#controlswrapper table {
   width: 1px;
}

#gridControls ul {
   list-style: none;
}

#gridControls li {
   display: block;
   float: left;
   list-style: none;
}

.controlContainer { display: inline-block; } 

#brandingwrapper {
   z-index: 3;
}

/* The image belt */

#beltcontainer {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

.beltobjectwrapper {
   position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
}   

.beltobjectmatting {
   position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}   

.beltobjectoutercenterer {
   position: absolute;
   display: table;
	width: 100%;
	height: 100%;
}   

.beltobjectcenterer {
   width: 100%;
}

.fitvertical .beltobjectcenterer {
   height: 100%;
}

.fithorizontal .beltobjectcenterer {
   display: table-cell;
   vertical-align: middle;
	#position: absolute;
	#top: 50%;
}

.beltobject {
   padding: 0;
   width: 100%;
   overflow: hidden;
}

.fithorizontal .beltobject {
   #position: relative;
   #top: -50%;
}

.fitvertical .beltobject {
   position: absolute;
}

.beltobject img {
   display: block;
   margin: 0 auto;
   padding: 0;
}

.beltobject img {
   -ms-interpolation-mode:bicubic;
}

.fithorizontal img {
   height: auto;
}

.fitvertical img {
   height: 100%;
   width: auto;
}

#dotswrapper {
   width: 100%;
   text-align: center;
   position: fixed;
   #position: absolute;
   line-height: 0;
   padding: 0;
   margin: 0;
   overflow: hidden;
   z-index: 3;
}

#dots {
   display: inline-block;
   color: black;
   font-family: Times;
   white-space: nowrap;
}

#dots a {
   display: inline-block;
   padding: 0 2px;
   cursor: pointer;
}

#dots a.selected {
   opacity: 1;
   filter:alpha(opacity=100);
}

.slant {
  line-height: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  width: 0;
}

#pausebutton1 {
  display: none;
}

.loading {
   width: 100%;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   font-family: Times;
   position: relative;
}

.loading span {
   display: inline-block;
   opacity: 0;
   filter:alpha(opacity=0);
}

#pr1, #pr2 {
   position: fixed;
   #position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

#pr1 { z-index: 1 }
#pr2 { z-index: 1 }

#pr1 img {
   width: 100%;
   height: 100%;
}

/* Descriptions */

.descriptionWrapperWrapper {
   position: absolute;
   display: block;
   left: 0px;
   width: 100%;
   z-index: 1;
}

.descriptionWrapper {
   position: relative;
}

.description {
   position: relative;
   float: left;
}

/* Webkit slide animations */

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(100%,0,0);
    visibility: visible;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0%,0,0);
    visibility: visible;
    opacity: 1;
  }
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0%,0,0);
    visibility: visible;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%,0,0);
    visibility: visible;
    opacity: 1;
  }
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(-100%,0,0);
    visibility: visible;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0%,0,0);
    visibility: visible;
    opacity: 1;
  }
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0%,0,0);
    visibility: visible;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%,0,0);
     visibility: visible;
    opacity: 1;
  }
}

/* Styles applied to start the animation and define the end parameters.
 * Without the style rules the animation resets to the "from" parameters.
 */

.slideInLeft {
   -webkit-transform: translate3d(0%,0,0) !important;
   visibility: visible !important;
   opacity: 1 !important;
   
   -webkit-animation-name: slideInLeft;
   -webkit-animation-iteration-count: 1;
}

.slideOutLeft {
   -webkit-transform: translate3d(-100%,0,0) !important;
   visibility: hidden !important;
   opacity: 1 !important;
   
   -webkit-animation-name: slideOutLeft;
   -webkit-animation-iteration-count: 1;
}

.slideInRight {
   -webkit-transform: translate3d(0%,0,0) !important;
   visibility: visible !important;
   opacity: 1 !important;
   
   -webkit-animation-name: slideInRight;
   -webkit-animation-iteration-count: 1;
}

.slideOutRight {
   -webkit-transform: translate3d(100%,0,0) !important;
   visibility: hidden !important;
   opacity: 1 !important;
   
   -webkit-animation-name: slideOutRight;
   -webkit-animation-iteration-count: 1;
}

/* Applied after rotation to avoid seeing the animation again */

.slidInLeft {
   -webkit-transform: translate3d(0%,0,0) !important;
   visibility: visible !important;
   opacity: 1 !important;
}

.slidOutLeft {
   -webkit-transform: translate3d(-100%,0,0) !important;
   visibility: hidden !important;
   opacity: 1 !important;
}

.slidInRight {
   -webkit-transform: translate3d(0%,0,0) !important;
   visibility: visible !important;
   opacity: 1 !important;
}

.slidOutRight {
   -webkit-transform: translate3d(100%,0,0) !important;
   visibility: hidden !important;
   opacity: 1 !important;
}

/* Webkit image fade animations */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    visibility: visible;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: visible;
  }
}

.fadeIn {
   opacity: 1 !important;
   visibility: visible !important;
   
   -webkit-animation-name: fadeIn;
   -webkit-animation-iteration-count: 1;
}

.fadeOut {
   opacity: 0 !important;
   visibility: hidden !important;
   
   -webkit-animation-name: fadeOut;
   -webkit-animation-iteration-count: 1;
}

/* Applied after rotation to avoid seeing the animation again */

.fadedIn {
   opacity: 1 !important;
   visibility: visible !important;
}

.fadedOut {
   opacity: 0 !important;
   visibility: hidden !important;
}

/* Styles for the Non-Javascript version */

.controlContainer a {
  display:block;
  text-decoration:none;
}

/* Contact sheet */

#grid {
   position: absolute;
   text-align: center;
   /* background: blue; */
}

.gridIB {
   display: inline-block;
   margin: 0;
   padding: 0;
   text-align: left;
   /* background: red; */
}

#gridA {
   position: absolute;
}

.gridItem {
   overflow: hidden;
   border-style: solid;
   float: left;
   text-align: center;
}

.gridThumbnailContainer, .gridBar1, .gridBar2 {
   overflow: hidden;
   border-style: solid;
   text-align: center;
   position: relative;
   white-space: nowrap;
}

img.gridThumbnail {
   -ms-interpolation-mode:bicubic;
   border-style: solid;
   position: relative;
   z-index: 5;
}

.gridThumbnailContainer .gridNumber {
   position: absolute;
   z-index: 6;
}

.gridThumbnailContainer .badges {
   position: absolute;
   z-index: 6;
   right: 5px;
   bottom: 5px;
   height: 25px;
}