/*
** M E R I X
** 2008/10/23
*/

body {  margin: 0; padding: 0; color: #555; font: 11px/15px "Arial", "Helvetica", sans-serif; }

p, ul, ol, dl { padding-bottom:0; }
img { border: none; vertical-align: bottom; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
ul, ol { margin-left: 1.5em; padding-left: 0; }
ul { list-style-type: disc; }






/*
** header
*/
.header { position: relative; height:302px; overflow: hidden; background:url("images/bg1.jpg") repeat-x 0 0; color: #808080; width:915px; }

/*
** intro / non scripted version
*/
.intro { position: relative; overflow: hidden; padding: 0 0 0px !important; width:597px; }

.intro .navigation { position: absolute; left: 350px; overflow: hidden; width: 200px; background: transparent url("../images/intro_navigation_background.png") repeat 0 0; color: #ccc; text-align: center;}
.intro .navigation:hover ul { display: block; }
.intro .navigation ul { display: none; float: left; list-style: none; margin:0 0 0px 15px; padding:0 0 0 0; text-align: left; }
.intro .navigation li { float: left; }
.intro .navigation li a { overflow: hidden; float: left; width: 58px; height: 60px; background: transparent url("../images/intro_navigation.png") no-repeat 0 0; text-indent: -999em; }
.intro .navigation li a.previous { }
.intro .navigation li a.previous:hover { background-position: 0 100%; }
.intro .navigation li a.next { background-position: -114px 0; }
.intro .navigation li a.next:hover { background-position: -114px 100%; }
.intro .navigation p { position: relative; padding:10px 0 5px 0;}
.intro .navigation p span { padding:0 15px 0 0; background: transparent url("../images/bullet_03.png") no-repeat 100% 50%;  font-size:11px; text-transform: uppercase; color: #CCC}

.intro .content { width: auto; min-height:0px; margin: 0; padding: 0px 50px 0 0; border: none; }
.intro .content p.photo { float: left; margin: -50px 0 0 -545px; padding: 0;}
.intro .content h2 { background: transparent; color: #FFF; font-size: 1.75em; text-transform: uppercase; line-height: 1.2; letter-spacing: -.1ex; }
.intro .content h2 em { color: #A8B934; font-style: normal; }
.intro .content p.info { color: #535353; font-size: .833em; text-transform: uppercase; word-spacing: .5ex; }
.intro .content p.info * { word-spacing: normal; }
.intro .content a { background: transparent url("../images/border_00.png") no-repeat -1024px 100%; color: #A8B934; }
.intro .content a:hover { background-position: -1536px 100%; }
body .header .intro .content h2 { float: none; height: auto; margin: 0 !important; padding: 0; background: transparent; text-indent: 0; }

.intro p.ruler { position: relative; margin: 0px 0 0 750px; background:  #000 url("../images/intro_ruler.png") no-repeat 0 255px; font-size: .75em; text-transform: uppercase; line-height: 1; }
.intro p.ruler a { position: absolute; top: 0px; display: block; width: 44px; margin-left: 15px; padding: 7px 0 7px 0 ; background: transparent url("../images/button_01.png") no-repeat 0 0; color: #999; text-align: center; }
.intro p.ruler a span { position: absolute; bottom: 0px; display: block; width: 120px; margin: 0 -38px; }

.intro-0 p.ruler a { left: 0; }
.intro-2 p.ruler a { left: 75px; }
.intro-3 p.ruler a { left: 150px; }

/* scripted version of intro */
.intro-scripted { position: relative !important; width: 1260px !important; margin: 0 -155px !important; padding-bottom: 41px !important; }
.intro-scripted .navigation { position: absolute; left: 350px; z-index: 6; }
.intro-scripted .navigation ul { z-index: 7; display: block; padding:0;}
.intro-scripted .navigation li a.pause { width: 56px; background-position: -58px 0; }
.intro-scripted .navigation li a.pause:hover { background-position: -58px 100%; }
.intro-scripted .navigation li a.play { background-position: -172px 0 !important; }
.intro-scripted .navigation li a.play:hover { background-position: -172px 100% !important; }

.intro-scripted .content { position: absolute; left: 0; top: 0; z-index: 3; width: 990px; padding: 50px 170px 0 700px; }

.intro-scripted p.ruler { position: relative; z-index: 100; margin: 0px 0 0 750px; }
.intro-scripted p.ruler a { cursor: pointer; top:250px; }
.intro-scripted p.ruler a.drag,
.intro-scripted p.ruler a:hover { background-position: 100% 0; color: #FFF; }

.intro-scripted .fade-left { position: absolute; left: 0; top: 25px; z-index: 4; width: 200px; height: 300px; background: transparent url("images/intro_fade_left.png") no-repeat 0 0; }
.intro-scripted .fade-right { position: absolute; left: 700px; top: 25px; z-index: 4; width: 200px; height: 300px; background: transparent url("images/intro_fade_right.png") no-repeat 0 -10px; }