* {
   padding:0;
   margin:0;
   font-family: arial;
   font-size: 13px;
}

body {
background: url('images/bridge_background.gif');
background-color: #FFF8DC;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}

#preimageloader {
max-height: 2px;
max-width: 2px;
position: absolute;
left: -1000px;
top: -1000px;
width: 1px;
height: 1px;
}

#preimageloader img {
width: 1px;
height: 1px;
display: block;
}

.timeplot {
background: #fff;
}

#descrip i {
font-size: 100%;
}

#conflictboxes {
height: 160px;
}

#timelineshowerrapper {
height: 364px;
}

#timelineshower {
background: yellow;
visibility: visible;
}

#nextarrow {
display: block;
margin-top: 20px;
}

#groundworkh3 {
margin-bottom: 30px;
}

#timelineshower #date {
color: blue;
font-style: oblique;
font-size: 15px;
}

#timelineshower img {
width: 100%;
height: 200px;
display: block;
margin-bottom: 5px;
}

#timelineshower #descrip {
margin-bottom: 5px;
display: block;
font-size: 130%;
}

#timelineshower #descrip:first-letter {
display: block;
float: left;
font-size: 200%;
padding: 0 4px;
color: orange;
background: navy;
}

#timelineshower {
float: left;
padding: 5px;
width: 373px;
margin-top: 20px;
border: 2px solid orange;
}

#timeline {
margin-left: 20px;
float: left;
list-style-type: none;
border-left: 3px solid red;
width: 170px;
}

#timeline li {
width: 100%;
margin-left: 7px;
cursor: crosshair;
}

#timeline li:hover {
color: red;
}

#timeline .item {
color: blue;
font-size: 120%;
}

#timeline #point2 {
margin-top: 30px;
}

#timeline #point3 {
margin-top: 70px;
}

#timeline #point4 {
margin-top: 20px;
}

#timeline #point5 {
margin-top: 80px;
}

#timeline #point6 {
margin-top: 7px;
}
span.citation {
font-size: 70%;
vertical-align: top;
}

.pullquoteleft {
float: left;
}

.pullquoteleft, .pullquoteright {
     font-size: 16px;
     width: 130px;
     background-color: transparent;
     border-color: maroon;
     border-style: solid;
     border-width: 6px 0px;
     text-align: left;
     padding: 10px 30px 10px 10px;
     margin: 20px 10px;
     text-decoration: none;
     display: block;
}

.emblem {
display: block;
position: relative;
left: 120px;
margin-top: -20px;
}

#conflictboxprc, #conflictboxus {
width: 278px;
padding: 5px;
float: left;
height: 140px;
margin-top: 10px;
}

#conflictboxprc {
border: 1px solid yellow;
color: yellow;
background: red;
}

#conflictboxus {
border: 1px solid;
color: navy;
background: #fff;
}

#transcript {
visibility: hidden;
z-index: 3;
width: 250px;
height: 200px;
position: absolute;
top: 200px;
left:0;
border: 1px solid orange;
background: #FFD700;
padding: 15px;
}

#quote {
font-style: oblique;
font-family: georgia, arial;
font-size: 110%;
margin-bottom: 10px;
}

#all {
width: 600px;
position: absolute;
right: 50%;
padding-bottom: 130px;
margin-right: -300px;
border-style: solid;
border-width: 0 5px;
border-color: #000;
background-image: url('images/whiteopacity.png');
}

#paddinger {
width: 580px;
margin-left: auto;
margin-right: auto;
}

h2 {
font-size: 18px;
color: #FF4500;
margin-bottom: 10px;
}

#compromise, #conflict {
margin-bottom: 10px;
}

#compromise a, #conflict a, #right a {
color: #FF4500;
font-size: 18px;
font-weight: bold;
}


#compromise a:link, #conflict a:link, #right a:link {
text-decoration: none;
}

#compromise a:visited, #conflict a:visited, #right a:visited {
text-decoration: none;
}

#compromise a:hover, #conflict a:hover, #right a:hover {
text-decoration: underline;
}

#banner {
height: 140px;
width: 580px;
background: navy;
background-image: url('images/banner.jpg');
}

#utility {
width: 90px;
margin-top: 5px;
float: right;
}

#utility a {
color: #FFD700;
}

#catcher {
width: 580px;
height: 272px;
background-image: url('images/catcher.gif');
}

#left {
width: 265px;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-top: 10px;
border-right: 0px solid navy;
}

#conflict img, #compromise img {
float: left;
margin-right: 3px;
margin-bottom: 3px;
width: 100px;
height: 100px;
}

#conflict {
margin-bottom: 30px;
}

#right {
margin-top: 10px;
width: 290px;
float: left;
border-left: 0px solid navy;
}

#footer {
text-align: center;
min-width: 579px;
height: 37px;
float: left;
width: 580px;
margin-top: 40px;
background-image: url(images/footer.gif);
background-position: bottom;
background-repeat: no-repeat;
margin-bottom: 20px;
}

#footer a {
display: none;
}

p.text {
margin-bottom: 15px;
}

h3 {
font-size: 20px;
font-family: serif, arial;
}

#subhead {
width: 580px;
height: 150px;
border: 1px solid #000;
margin-bottom: 15px;
}

hr.belowsubhead {
margin-bottom: 20px;
display: none;
}


/* Map CSS */

#map {
background-image: url('images/chinamap.gif');
background-position: right;
background-repeat: no-repeat;
width: 580px;
height: 586px;
}

#map .point {
width: 20px;
height: 17px;
background-image: url('images/orange_bullet.gif');
text-align: center;
font-weight: bold;
color: #fff;
font-size: 12px;
padding-top: 3px;
cursor: crosshair;
position: absolute;
z-index: 3;
}

/* Map Point Locations */

#map #point1 {
left: 379px;
top: 540px;
}

#map #point2 {
top: 337px;
left: 476px;
}

#map #point3 {
top: 354px;
left: 451px;
}

#map #point4 {
top: 353px;
left: 435px;
}

#map #point5 {
top: 333px;
left: 420px;
}

#map #point6 {
top: 299px;
left: 417px;
}

#map #point7 {
top: 553px;
left: 358px;
}

#map #point8 {
top: 531px;
left: 435px;
}

#map #point9 {
top: 569px;
left: 427px;
}

#refreshmap {
display: block;
background-image: url('images/refreshmap.gif');
width: 110px;
height: 22px;
border: 1px solid #000;
position: absolute;
top: 758px;
right: 35px;
}

#viewertitle, #viewer {
background: #FFFF00;
border: 2px solid orange;
}

#viewer {
width: 240px;
height: 402px;
position: absolute;
visibility: hidden;
top: 263px;
left: 50px;
padding: 10px;
z-index: 4;
overflow: visible;
}

#viewertitle {
position: absolute;
top: -30px;
height: 22px;
margin-left: 0;
text-align: left;
padding: 5px;
width: 220px;
padding-left: 0;
text-indent: 5px;
padding-right: 5px;
color: #FF4500;
font-family: arial;
font-size: 13px;
font-weight: bold;
z-index: 5;
display: block;
}

#viewerdate {
margin-top: 20px;
font-family: monospace;
color: blue;
display: block;
font-style: oblique;
font-size: 90%;
}

#viewertext {
margin-top: 10px;
width: 240px;
display: block;
}

.viewerimages {
border: 1px solid #000;
margin-right: 3px;
margin-bottom: 3px;
display: block;
}

#map #nextbutton {
display: block;
position: absolute;
bottom: 10px;
right: 10px;
}

h4 {
color: #FF4500;
font-size: 24px;
border-bottom: 4px groove #FFD700;
margin: 30px 0 10px 0;
}

#compromisetable {
border: 3px groove #000;
}

#compromisetable ul {
list-style-type: none;
}

#compromisetable td {
padding: 5px;
}

#header {
font-weight: bold;
background: navy;
color: #fff;
}

#compromisetable li {
margin-bottom: 15px;
}


















/* Navbar CSS */

#navbar {
margin: 10px 0;
}

#navlist ul
{
margin: 0;
white-space: nowrap;
padding: 0;
font-size: 4px;
}

#navlist li
{
display: inline;
list-style-type: none;
margin-right: 0px;
}

#navlist a
{
padding: 1px 2px;
border: 1px solid #333;
background-color: navy;
margin-right: 0px;
font-weight: bold;
}

#navlist a:link, #navlist a:visited
{
color: #fff;
text-decoration: none;
font-size: 95%;
}

#navlist a:hover
{
border: 1px solid red;
background-color: #FFD700;
background-image: url(images/l1_over.gif);
color: red;
}

/*
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}
*/

/* 100% height CSS */

html, body {
margin:0px;
padding:0px;
height:100%;
}


#all {
min-height:100%;
text-align:left;
padding: 10px;
}

.citation {
font-size: xx-small;
vertical-align: top;
color: blue;
text-decoration: underline;
cursor: pointer;
}