@font-face {
    font-family: 'museo_sans500_italic';
    src: url('fonts/museosans-500italic-webfont.eot');
    src: url('fonts/museosans-500italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-500italic-webfont.woff') format('woff'),
         url('fonts/museosans-500italic-webfont.ttf') format('truetype'),
         url('fonts/museosans-500italic-webfont.svg#museo_sans500_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans700';
    src: url('fonts/museosans-700-webfont.eot');
    src: url('fonts/museosans-700-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-700-webfont.woff') format('woff'),
         url('fonts/museosans-700-webfont.ttf') format('truetype'),
         url('fonts/museosans-700-webfont.svg#museo_sans700') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans900';
    src: url('fonts/museosans-900-webfont.eot');
    src: url('fonts/museosans-900-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-900-webfont.woff') format('woff'),
         url('fonts/museosans-900-webfont.ttf') format('truetype'),
         url('fonts/museosans-900-webfont.svg#museo_sans900') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans300';
    src: url('fonts/museosans-300-webfont.eot');
    src: url('fonts/museosans-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-300-webfont.woff') format('woff'),
         url('fonts/museosans-300-webfont.ttf') format('truetype'),
         url('fonts/museosans-300-webfont.svg#museo_sans300') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans300_italic';
    src: url('fonts/museosans-300italic-webfont.eot');
    src: url('fonts/museosans-300italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-300italic-webfont.woff') format('woff'),
         url('fonts/museosans-300italic-webfont.ttf') format('truetype'),
         url('fonts/museosans-300italic-webfont.svg#museo_sans300_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans500';
    src: url('fonts/museosans-500-webfont.eot');
    src: url('fonts/museosans-500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-500-webfont.woff') format('woff'),
         url('fonts/museosans-500-webfont.ttf') format('truetype'),
         url('fonts/museosans-500-webfont.svg#museo_sans500') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans100';
    src: url('fonts/museosans-100-webfont.eot');
    src: url('fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-100-webfont.woff') format('woff'),
         url('fonts/museosans-100-webfont.ttf') format('truetype'),
         url('fonts/museosans-100-webfont.svg#museo_sans100') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans100_italic';
    src: url('fonts/museosans-100italic-webfont.eot');
    src: url('fonts/museosans-100italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans-100italic-webfont.woff') format('woff'),
         url('fonts/museosans-100italic-webfont.ttf') format('truetype'),
         url('fonts/museosans-100italic-webfont.svg#museo_sans100_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'museo_sans500_italic';
        src: url('fonts/museosans-500italic-webfont.svg#museo_sans500_italic') format('svg');
    }
    @font-face {
        font-family: 'museo_sans700';
        src: url('fonts/museosans-700-webfont.svg#museo_sans700') format('svg');
    }
    @font-face {
        font-family: 'museo_sans900';
        src: url('fonts/museosans-900-webfont.svg#museo_sans900') format('svg');
    }
    @font-face {
        font-family: 'museo_sans300';
        src: url('fonts/museosans-300-webfont.svg#museo_sans300') format('svg');
    }
    @font-face {
        font-family: 'museo_sans300_italic';
        src: url('fonts/museosans-300italic-webfont.svg#museo_sans300_italic') format('svg');
    }
    @font-face {
        font-family: 'museo_sans500';
        src: url('fonts/museosans-500-webfont.svg#museo_sans500') format('svg');
    }
    @font-face {
        font-family: 'museo_sans100';
        src: url('fonts/museosans-100-webfont.svg#museo_sans100') format('svg');
    }
    @font-face {
        font-family: 'museo_sans100_italic';
        src: url('fonts/museosans-100italic-webfont.svg#museo_sans100_italic') format('svg');
    }
}
* { margin: 0; padding: 0; outline: 0; }
body, html { width:100%; height:100%;  }

body {
    font-size: 19px;
    line-height: 26px;
    font-family: 'museo_sans100';
    color: #fff;
    background: #ddd;
    min-width: 100%;
}

a { color: #CCC; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; color:#8d7249;  }
a img { border: 0; }

.clearfix { *zoom: 1; }
.clearfix:after { width: 100%; content: ''; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; display: block; }

a,
a img  { transition: color 1000ms, background-color 1000ms, opacity 1000ms; -webkit-transition: color 1000ms, background-color 1000ms, opacity 1000ms; }

a:hover, 
a:hover img { transition: color 300ms, background-color 300ms, opacity 300ms; -webkit-transition: color 300ms, background-color 300ms, opacity 300ms;}

a:hover img { opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=70); }

h1, h2, h3, h4, h5, h6, strong { font-weight:normal; }

strong { font-family: 'museo_sans500'; }

h2 { font-size: 100px; line-height: 108px; color:#8d7249; font-family: 'museo_sans100'; }

.shell { width: 780px; margin: auto; position:relative; z-index: 10; top: 50%;  }
.main { height:100%; position:relative;  }

/* header */
.header { position: relative;  }

h1.logo { position:absolute; top: 0; left: 50%; margin-top:-115px; margin-left:-390px; font-size: 0; line-height: 0; }
h1.logo a { display: block; width: 780px; height: 230px; text-indent: -4000px; background: url(images/logo.png) no-repeat 0 0; }
h1.logo a:hover { opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=70); }

h2.slogan { width: 780px; position:absolute; top: 50%; left: 50%; margin-left:-390px; margin-top:150px; text-transform: uppercase; font-size:16px; line-height:30px; text-align: center; color:#fff; }

/* pages */
.page {  position:relative; z-index: 99; height:100%;   }
.image-bg { position:absolute; top: 0; left: 0; z-index: 9; width:100%; height:100%;  }
.image-bg span { position:absolute; top: 0; left: 0; z-index: 9; width:100%; height:100%; background: url(images/overlay.png) repeat 0 0;  }
.image-bg img { position:absolute; top: 0; left: 0; z-index: 8; width:100%; height:100%;  }
.page-content { float:left; display:inline; width:460px; padding-right:20px; position:relative; z-index: 10; margin-top:-200px;   }

.page-image { float:left; display:inline; width:205px; height:314px; position:relative; z-index: 10; margin-top:-200px;    }


/* footer */
.footer { position:fixed; bottom: 0; width:100%; background: #000; height: 40px; z-index: 999; }
.footer .shell { top: 0; }
.copyright { color:#CCC; font-size:11px; line-height:28px; text-align: center; padding-top:6px;   }