#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
					
#text { overflow: auto; height: 100px; padding: 26px; width: 500px; }
html,body { margin: 0; padding: 0;}
#content { padding: 0px;}
.container {
    background: url("/art/Backgrounds/gotham-wood-med.jpg");
    background-repeat: none;
    width: 760px; 
    height: inherit;
    position: relative;
}
.container#page .container { margin-left: 0px !important; padding-bottom: 24px; }
.letters { 
    background-image: url("/art/Backgrounds/wood-seamless.jpg"); 
    background-repeat: repeat; 
    width: 686px; 
    position: relative;
    line-height: 22px;
    font-family: 'EB Garamond', serif;
}
.letterPages {                  
    width: 620px;   
    background: #FFF;
    margin: 12px;
    padding: 32px;
    padding-right: 0px;
    border: solid #000 1px;
    -webkit-box-shadow: 2px 2px 12px 0px #333;
    -moz-box-shadow: 2px 2px 12px 0px #333;
    box-shadow: 2px 2px 12px 0px #333;
    min-height: 650px;
    font-size: 12px;
    line-height: 22px;
}
.photoContainer {
    min-height:60px;
}
.nameTag { 
    width:176px; 
    font-family: sans-serif;
    font-size:16px;
    margin-bottom:12px;margin-left:14px;
    background:#C66;
    color:#FFF;
    padding: 0;
    padding-top: 12px;
    padding-bottom: 6px;
    text-align:center;
}
p.first { padding-right: 118px;}

.letterP2 {	
    zoom: 1;
    z-index: 999999;
    top: 34px;
    left: 42px;
    position: relative;
    background: #fff;
}

.buttons { 	
    font-family: sans-serif; color: #FFF; text-align: center; font-size: 14px; 
    width: 160px; background: #000; height: auto; line-height: 50px;
    margin-right: 10px;
    border: solid #666 1px;
    float: left;
}
.buttons:hover {
    -webkit-box-shadow: 2px 2px 12px 0px #333;
    -moz-box-shadow: 2px 2px 12px 0px #333;
    box-shadow: 2px 2px 12px 0px #333;
}


.nav-row { margin-left: 40px; padding-top: 20px }
.more { font-family: sans-serif; 
        color: #FFF; font-size: 18px; font-weight: normal; 
        margin-left: 40px; padding-top: 60px; 
}
.navigation2 { position: absolute; top: 820px; left: 120px; z-index: 999999999;}
.navigation { }
.clear { clear: both; }
.relative_container { position: relative; }
.letterW { 
    margin-top:115px; 
    width: 580px; 
    overflow: hidden; 
    margin-top:0px; 
    background: #fff; 
}
.timelineSpectra1, .classSpectra1 { background: #990033; }
.timelineSpectra2, .classSpectra2 { background: #003366; }
.timelineSpectra3, .classSpectra3 { background: #006633; }
.timelineSpectra4, .classSpectra4 { background: #FF6633; }
.sop { 
    background:url("/art/Backgrounds/stack-papers.png");    
    background-repeat: no-repeat;
    height: 800px; position: absolute; 
    top: 93px;
    width: 626px;
    top: 124px;
    right: 68px;
}
.paper-clip { 	
    position: absolute; 
    width: 108px; height: 251px;
    z-index: 9999999;
    background-image: url("/art/paper-clip.png"); background-repeat: no-repeat; 
    top: 118px;
    right: 106px;
}

.letter-navigation { 
    width: 760px; background: #F2F1D3; height: 30px; 
    line-height: 30px; 
    border: inset #333 1px;
    border-width: 1px 0;
}
.letterpage { background: #fff; }
#prev { float: left; padding-left: 20px; }
#next { float: right; clear: right; padding-right: 20px;}
#prev a, #next a { font-size: 12px; line-height: 30px;}
.letter-photo-img { 
    margin-left: 16px; margin-bottom: 12px; margin-right: 12px; border: solid #FFF 6px;             
    -webkit-box-shadow: 0px 2px 6px 2px #666;
    -moz-box-shadow: 0px 2px 6px 2px #666;
    box-shadow: 0px 2px 6px 2px #666;
}
.letter-navigation ul { list-style-type: none; margin: 0 15px 0 30px; line-height: 32px; }
.letter-navigation ul li a { display: inline-block; width: 18px; line-height: 32px; font-size: 12px; text-decoration: none;}

.letter-navigation ul li.m { width: 25px;}
.letter-navigation ul li.m a { }
.selected-letter2 { 
    position: absolute; 
    border: solid black 1px;

    font-size: 12px;
    top: 70px;
    right: 0px;
    color: #fff;
    padding: 8px;
    background: #000;
    border-width: 1px 1px 1px 1px;
    width: 80px;
    text-align: center;
}


ul#timeline{
    list-style: none;
    margin: 0 12px 0 12px;
    padding: 0;
}
.y { float: left; width: 40px; font-weight:bold; font-size:12px; margin-right: 12px; }
.l { float: left; width: 18px; height: 32px; }
ul#timeline li{
    float: left;
    display: block;
    margin-right: 10px;
    cursor: pointer;
}
ul#timeline li span { cursor: pointer;  height:30px;  }
ul#timeline li {
    display: block;
    overflow: hidden;
    height: 30px;
    width: 40px;
    line-height: 32px;
}

#a1{
  width: 270px;
}
ul#timeline ul { display: inline-block }
.year-container { text-align:left; height: 30px;}
#previous-nav { position: absolute; right: 120px; top: 110px; cursor:pointer; }
#next-nav { position: absolute; right: 90px; top: 110px; cursor:pointer; }

.left-side { background: url("/art/left-arrow.png"); width: 40px; height: 44px; 
            position: absolute; top: 150px; left: -7px; 
            cursor: pointer;
}
.right-side { background: url("/art/right-arrow.png"); width: 40px; height: 44px; 
            position: absolute; top: 150px; right: -7px; 
            cursor: pointer;
}
#caret { padding-left: 20px;}
.nameTag a { font-size: 16px; color: #fff; line-height: 22px; font-weight: bold; font-family: sans-serif;}