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;
}