.worldOfRolexGrid .navigation { z-index:-1; }

#frameset { overflow-x:hidden; overflow-y:hidden; }
    
.surface, 
.close { font-size:1em; margin:60px 0 0 720px; position:absolute; text-transform:uppercase; z-index:1; } 
.surface a:hover { color:#8b8b8b; } 
   
.content h2, 
.content h2, 
.content h2 { color:#656565; }

#tHomepage .textBox h2 { font-size:3.1em; padding:2px 0; letter-spacing:0; }
#tHomepage .textBox h3 { font-size:1.1em; letter-spacing:-0.02em; line-height:1em; padding:3px 0; text-transform:uppercase; }    
#tHomepage .textBox p { height:60px; width:400px; line-height:1.4em; padding:10px 0; }

#tFullstory .textBox h2 { font-size:2.2em; letter-spacing:0; }
#tFullstory .textBox h3 { font-size:1.1em; margin: 0 0 3px 0; letter-spacing:-0.02em; text-transform:uppercase; }    
#tFullstory .textBox p { height:60px; margin:5px 0; line-height:1.4em; }
          
#tDateday .textBox h2 { font-size:2.2em; letter-spacing:0; }
#tDateday .textBox h3 { font-size:1.1em; margin: 0 0 3px 0; letter-spacing:-0.02em; text-transform:uppercase; }    
#tDateday .textBox p { height:60px; line-height:1.4em; margin:5px 0; }

#tFullstory .scrollContainer div.panel .content p { line-height:1.2em; }
#tDate .scrollContainer div.panel .content p, 
#tDepth .scrollContainer div.panel .content p { line-height:1.2em; }  

.scaleVert { 
    background:url("../images/trieste/scales/scaleVert-40.png") 0 6px no-repeat; 
    display:block; 
    height:512px;
    margin:15px 0 0 610px; 
    position:absolute;  
    width:100px;
} 
.scaleHori { 
    background:url("../images/trieste/scales/scaleHori-60.png") no-repeat center; 
    display:block; 
    height:50px; 
    margin:378px 0 0 35px; 
    position:absolute; 
    width:884px; 
}
       
/** setup horizontal scrolling **/    
#tFullstory .scrollContainer,
#tDate .scrollContainer { width: 200000px; }

#tFullstory .scrollContainer .panel,
#tDate .scrollContainer .panel { float: left; }
    
/** horizontal buttons **/ 
#tDate .scrollButtons {
    cursor: pointer;
    height: 66px;
    position: absolute;
    top: 250px;
    width: 40px;
    z-index:1;
}
/** Vertical buttons **/
#tDepth .scrollButtons {
    cursor: pointer;
    height: 42px;
    position: absolute;
    left: 448px;
    width: 70px;
    z-index:1;
}

.scrollButtons.top { background:url("../images/arrowBig.png") -89px 0; top:50px; }
.scrollButtons.top:hover { background:url("../images/arrowBig.png") -89px -88px; }
.scrollButtons.bottom { background:url("../images/arrowBig.png") -89px -45px; top: 462px; }
.scrollButtons.bottom:hover { background:url("../images/arrowBig.png") -89px -135px; }    

/** homepage panel **/
#tHomepage .textBox { height:160px; margin:125px 0 0 135px; position:absolute; } 
.textBox ul { margin: 5px 0; }
.textBox ul li a {
	background:transparent url("../images/arrowSmall.png") no-repeat scroll right -18px; 
	color:#b89c43; 
	font-size:1em; 
	padding:0 15px 0 0;
}
.textBox ul li a:hover { background:transparent url(../images/arrowSmall.png) no-repeat scroll right -1px; color:#FFFFFF; } 

#tHomepage { float:left; height:552px; width:960px; }
    
#tHomepage .background, 
#tFullstory .background, 
#tPlayvideo .background {  
    background:url(../images/trieste/triesteBG.jpg) no-repeat;
    height:610px;
    left:0;
    margin:0;    
    padding:0;
    position:absolute;
    width:960px;
    z-index:-1;
}
  
#tDateday .scaleHori { background:url(../images/trieste/scales/scaleHoriSection-80.png) repeat-x center; margin:273px 0 0 30px; }
    
#scaleDetails { display:inline-block; margin: 0 0 0 5px; text-align:center; width:400px; }
    
.scaleHori ul { display:inline-block; text-align:center;}
.scaleHori li.date { font-size:0.8em; margin:2px 0; }
.scaleHori li.title { font-size:1em; margin:17px 0; }
.scaleHori li.title a { color:#989898; }
.scaleHori li.title a:hover { color:#FFFFFF; }

/** Date & Day panel **/
#tDateday { width:960px; height:552px; float:left; }
#tDateday .textBox { width:450px; height:160px; margin:440px 0 0 60px; position:absolute; }

#tDate .background, 
#tDepth .background { background:url("../images/trieste/panelBG-70.jpg") no-repeat; position:absolute; width:960px; height:552px; }
    
#tDateday .background {  
    background:#000000 url("../images/trieste/bubble.png") 498px 180px no-repeat;
    position:absolute;
    width:960px;
    height:552px;
    z-index:-1;
}    
  
#tDateday .scaleHori ul { margin: 0 0 0 5px;}
#tDateday .scaleHori ul li { float:left; width: 30px; height:32px; display:block}
#tDateday .scaleHori ul li a { 
    background:url("../images/trieste/scales/spot.png") no-repeat center -38px; 
    display:block;
    height:32px; 
    width:30px; 
    text-transform:uppercase; 
    color:#989898; 
    font-size:0.8em; 
} 
#tDateday .scaleHori li a:hover { background:url("../images/trieste/scales/spot.png") no-repeat center -102px; color:#FFFFFF; } 

#tDateday .scaleVert ul { margin: 5px 0 0 0; }
#tDateday .scaleVert ul li { height:10px; }
#tDateday .scaleVert ul li a { 
    background:url("../images/trieste/scales/spot.png") no-repeat -4px -55px;
    color:#454545; 
    font-size:0.8em;  
    height:10px;
    padding:0 0 0 16px;
} 
#tDateday .scaleVert li a:hover { background:url("../images/trieste/scales/spot.png") no-repeat -4px -5px; color:#FFFFFF; } 

.depthMarginOne { margin:5px 0 0 0; }   
.depthMarginTwo { margin:10px 0 0 0; }
.depthMarginThree { margin:20px 0 0 0; }
.depthMarginFour { margin:40px 0 0 0; }
.depthMarginFive { margin:50px 0 0 0; }
.depthMarginSix { margin:250px 0 0 0; }

.dateMarginOne { margin:0 0 0 10px; }   
.dateMarginTwo { margin:0 0 0 25px; }
.dateMarginThree { margin:0 0 0 60px; }
.dateMarginFour { margin:0 0 0 120px; }
.dateMarginFive { margin:0 0 0 330px; }

/** Full Story / Date / Depth panels **/

#tFullstory, 
#tDate, 
#tDepth { display:block; float:left; height:552px; width:960px; }
    
#tFullstory .textBox { bottom:0; margin:0 0 10px 100px; position:absolute; } 

#tFullstory #slider, 
#tDate #slider, 
#tDepth #slider { height:552px; position: relative; width: 960px; }

#tFullstory #slider .scroll,
#tDate #slider .scroll, 
#tDepth #slider .scroll {
    clear: left;
    display:inline-block;
    height:552px;
    overflow:hidden;
    position: relative;
    width:960px;
}

#tFullstory .scrollContainer div.panel, 
#tDate .scrollContainer div.panel, 
#tDepth .scrollContainer div.panel { height: 552px; width: 960px; display: block; }

#tFullstory .scrollContainer div.panel .content,
#tDate .scrollContainer div.panel .content,
#tDepth .scrollContainer div.panel .content { height:200px; display:block; width:250px; }

#tFullstory .scrollContainer div.panel .content { padding:130px 0 0 150px; width:700px; }
#tDate .scrollContainer div.panel .content { padding:150px 0 0 400px; }
#tDepth .scrollContainer div.panel .content { padding:200px 0 0 370px; }

#tFullstory .scrollContainer div.panel .content p,
#tDate .scrollContainer div.panel .content p, 
#tDepth .scrollContainer div.panel .content p { line-height:1.2em; }

#tFullstory .scrollContainer div.panel .content img,
#tDate .scrollContainer div.panel .content img,
#tDepth .scrollContainer div.panel .content img { background:#8b8b8b; display:block; float:left; margin:0 20px 100px 0; position:relative; }

#tFullstory #slider ul.navigation {
    background:url(../images/trieste/scales/scaleHoriSection-80.png) repeat-x center;
    bottom:60px;   
    display:block; 
    height:50px;    
    list-style: none; 
    margin:0 0 0 35px;
    position:absolute;
    text-align:center;  
    width:884px; 
    z-index:1;
}

#tFullstory #slider ul.navigation li { display: inline-block; height:50px; width:18px; margin:0 2px; }
#tFullstory #slider ul.navigation a {
    background:url("../images/trieste/scales/spot.png") no-repeat -2px -38px;
    display:block;
    height:50px;
    width:20px;
    text-decoration: none;
}

#tFullstory #slider ul.navigation a:hover, 
#tFullstory #slider ul.navigation a.selected:hover { background:url("../images/trieste/scales/spot.png") no-repeat -2px -153px; }
#tFullstory #slider ul.navigation a.selected { background:url("../images/trieste/scales/spot.png") no-repeat -2px -102px; }
#tFullstory #slider ul.navigation a:focus { outline: none; }
    
/** Play Video panel **/
#tPlayvideo { 
    display:block;
    float:left;
    height:552px;
    margin:1000px 0 0 0;
    text-align:center;
    width:960px;
    z-index:-1;
}