html { font-size: 10pt }
body {
   margin: 20 auto; background: white }
body, table, div, select {
   font: 1rem verdana, arial, sans-serif }
body, div { border-color: #dfdddb }
table { border-color: whitesmoke; margin-top: 4pt }

h1 { font: bold 1.8rem arial, verdana, helvetica; color: #ffc; margin: 0 }
h2 { font: bold 1.6rem verdana,helvetica; color: #753; margin: 0 }
h3 { font: bold 1.4rem verdana,helvetica; color: #357; margin: 6 }
h3 b { color: maroon }
h4 { font: bold 1.35rem arial; color: #46a; margin: 0 }
h5 { font: bold 1.35rem verdana; color: #520; margin: 0 }

p { text-indent: 25pt; text-align: justify; line-height: 19pt }
.data p, ul p, ol p { text-indent: 0 }

a:link, a:visited { color: #005 }
a:active { color: #500 } 
a:hover { color: #500 }

abbr { cursor: hand }
hr { color: blue }
b, strong { color: #030 }
i, em, dfn {
   font-family: "Bookman Old Style", serif;
   font-size: 1.1em; font-weight: bold; color: #500 }
h2 i { color: #005 }

ul, ol, dl {
   margin: 0 40 20 80; padding: 5px; text-align: left }
dl {
   margin-bottom: -10px }
ul ul, ul ol {
   margin-top: 5; margin-left: 32; margin-bottom: 0 }
ol ol, ol ul {
   margin-top: 5; margin-left: 24; margin-bottom: 0 }
ul li, ol li { padding: 4pt }
li { line-height: 20pt; text-align: justify }
li div { padding-top: 16px; padding-bottom: 12px }

summary { text-indent: 25; padding: 12; cursor: pointer }
summary b { font: bold 1.1 rem verdana; color: #0f4f6f;
   text-shadow: -2px 2px 4px #888 }
summary::marker { font-size: 1.25rem; color: maroon }
details:open {
   background-color: #efefde; margin: 12pt 0; border-radius: 10px; border: 1px inset }
details [open] {
   background-color: #efefde; margin: 12pt 0; border-radius: 10px; border: 1px inset }
details p { padding: 0 12pt }
details details { margin-left: 30pt }
details details:open { margin-left: 30pt; background-color: ghostwhite }
details details [open] { margin-left: 30pt; background-color: ghostwhite }

dt a:link, dt a:visited {
   width: 100%; padding: 5px; font-weight: bold }
/*dt a:hover {
   background: ddc }*/
dt a:hover {
   font: small-caps bold; background: sienna; color: khaki }
dd {
   margin-left: 30px; padding-top: 5px; padding-bottom: 15px }
cite {
   font-weight: 500; color: navy }
pre cite {
   color: #040 }
code {
   font-size: 1.15rem; font-weight: bold; color: #004040 }

img { border-color: darkslategray }
input, textarea { font-size: 0.92rem }
select {
   background: whitesmoke }
small {
   font-size: 0.78rem }
sup {
   font-size: 0.65rem }
tt {
   font-size: 1rem; font-weight: 600; color: navy }

table.data { margin: 0 auto 24pt; font-size: 11pt;
   box-shadow: 6px 6px 9px gray }
table.data th { background-color: steelblue; color: snow; font-style: italic; 
   vertical-align: top; text-align: center; padding: 10;
   text-shadow: 2px 2px 3px #333 }
table.data td { background-color: #eed; vertical-align: top; padding: 10 }
table.data a:hover { font-style: italic } 
table.data th a:link, table.data th a:visited { color: snow }

table.menu th {
   background-color: #bbccdd; padding: 5px; border: 1px outset }
table.menu td {
   font-size: 0.92rem; background-color: #f3f3ef; vertical-align: top }

table.code {
   width: 90%; background-color: rgb( 240, 240, 232 ) }
.code td { padding: 15px }
td.tab {
   width: 15%; font: 0.65rem verdana; text-align: center; padding: 3px;
   background-color: #eed; border: 1px inset; cursor: hand; }
td.backtab {
   width: 15%; font: 0.65rem verdana; text-align: center; padding: 3px;
   background-color: #ccb; border: 1px inset; cursor: hand; }
td.space {
   width: 55%; font: 0.65rem verdana; padding: 0;
   background-color: white }
table.reference {
   font: 0.65rem verdana; padding-bottom: 1px; padding-left: 1px;
   padding-right: 1px; padding-top: 1px; width: 90% }
table.reference td {
   padding-bottom: 2px; padding-left: 5px; width: 25% }
table.reference td a {
   color: black }
table.reference td a:hover {
   color: #600 }

.indent {
   margin-left: 30px; margin-right: 30px; 
   margin-top: 20px; padding: 10px;
   background-color: whitesmoke; border: 1px inset;
   text-indent: 0 }
.indent ul {
   margin-left: 60 }
.indent ul ul {
   margin-left: 20 }
.indent div {
   padding: 3px }
.data .indent {
   margin-left: 8px; margin-right: 8px; margin-bottom: 10px;
   background: rgb( 240, 240, 232 ) }
ul .indent, ol .indent {
   margin-left: 0; margin-right: 10px; margin-bottom: 10px;
   background: whitesmoke }
.code {
   color: navy }
.code b {
   color: #600 }
.code cite {
   font-weight: normal }
div.code {
   padding-left: 25px }

ul table, ol table {
   margin-left: -20px; margin-top: 20px; margin-bottom: 10px }

.small {
   font-size: 0.78rem; text-indent: 0; text-align: center }
.snippet {
   /*font: 0.78rem verdana, arial, sans-serif;*/ 
   background: rgb( 240, 240, 232 ); color: navy;
   margin-left: 30px; margin-right: 30px; margin-top: 20px;
   padding: 10px; border: 1px inset }
.snippet b { color: #600 }
.data .snippet {
   margin-left: 8px; margin-right: 8px }
ul .snippet, ol .snippet {
   margin-left: -10px; margin-right: 0 }
.snippet cite {
   font-weight: normal }

.sample td { background: #dda; padding: 10px }

.header { text-shadow: 2px 2px 4px #333 }
.subheader h5 { font: bold 1.3rem arial; color: #359; margin-top: 18pt;
   text-shadow: -2px 2px 3px #999 }
.content {
   background: rgb( 230, 230, 232 ) }
.content th { padding: 5px }
.content td { padding: 5px; border: 1px ridge }
.notes { font: bold 0.65rem verdana, arial, sans-serif; 
   color: #339; text-align: right }
.refs {
   font-size: 0.92rem; font-weight: 600;
   background: #345; color: #bca; ;
   margin-left: 30px; margin-right: 30px; padding: 10px }
.refs a:link, .refs a:visited, .refs a:active {
   font-weight: 600; color: lightsteelblue;
   text-decoration: none }
.refs a:hover {
   font: small-caps bold; background: darkgreen; color: khaki }
.refs dd {
   margin-left: 20px; padding: 3px }
.showme {
   text-indent: 0; text-align: right;
   margin: 20px 30px }
.showme a:link, .showme a:visited {
   font: bold 0.78rem arial; background: navy; color: lime;
   text-decoration: none; padding: 8px; border-radius: 12px }
.showme a:hover {
   background: maroon; color: yellow;
   text-transform: uppercase }
.showme a:active {
   background: darkslategray; color: khaki }
.thumbs {
   font-size: 0.76rem; text-align: center;
   margin: 15px }
.thumbs a {
   font-size: 0.76rem }
.caption {
   color: #030; font: bold 0.76rem arial;
   padding: 3px }
.lang {
   font: bold 0.65rem arial; color: navy }
.url {
   color: #00a }

/*.top { background: black url('images/top.jpg') no-repeat; }*/
.travel { font: bold 1.1rem 'Bookman Old Style', serif }
.travel_ { font: bold 0.92rem 'Bookman Old Style', serif }
.menus { padding: 10px }
.menus p {
   text-indent: 0; text-align: right }

.index { margin: 20 auto; background: #dfdfce; box-shadow: -8px 8px 8px gray; }
.index th { background: steelblue;
   color: beige; padding: 5px; text-align: right }
.index tr { vertical-align: top }

.index dl { margin: 10px }
.index dt a:link, .index dt a:visited {
   display: block; width: 100%; background: whitesmoke; padding: 5px; font-weight: bold;
   border: 1px outset silver }
.index dt a:hover {
   font: small-caps bold; background: sienna; color: khaki;
   border-radius: 8px; box-shadow: 4px 4px 4px gray }

.demo { transition: all 2s }
.divDemo {
   width: 100px; height: 100px;
   border: 2px inset; border-radius: 10px;
   background: linear-gradient(skyblue, orange);
   transition: 1.5s;
}
.syntax {
   background: ghostwhite; color: navy;
   margin-left: 40px; margin-right: 40px;
   padding: 10px; border: 1px inset; font-weight: bold }
.syntax b {
   color: #036 }
.syntax i {
   color: #400 }
.syntax tt {
   font: normal 0.85rem 'Bookman Old Style'; color: #420 }
.syntax cite { color: navy }

.tree { margin: 10 30 }
.tree a:hover {
   font-variant: small-caps; font-weight: bold;
   background: sienna; color: khaki
}

table.members { margin-top: 10px }

table.nspace {
   border: 1px inset }
table.nspace td {
   padding: 5px; vertical-align: top;
   background: whitesmoke }

/* travel */

.hilite { font-size: larger; color: #620 }
.header { text-shadow: 2px 2px 2px gray }

.tops { background: #404000 }
.tops td { padding: 3px }

.side { background: linear-gradient(rgba(0, 30, 30, 0.6)), 
   url('side.jpg'); background-position: center; horizontal-align: center }
.sidebarheader {
   font-weight: bold; background-color: sienna; color: beige }

.slowshow { text-shadow: -2px 2px 6px dimgray; animation: slowshow 1.25s ease-in both }
@keyframes slowshow {
   0% { opacity: 0 }
   50% { opacity: 0.5; scale: 1.5 }
   100% { opacity: 1 }
}

.msg {
   font: bold 13pt arial; color: navy }
.hotelLink a:link, .hotelLink a:visited {
   width: 98%; background: #d2d5c2; padding: 8px; font-size: 12pt; font-weight: bold;
   border-radius: 10px; border: 1px outset; text-decoration: none; display: block;
   transition: all 0.3s }
.hotelLink a:hover {
   font-variant: small-caps; background: #044; color: khaki;
   text-shadow: 2px 2px 2px #333 }

.destHeader {
   width: 100%; font: bold 18pt verdana; line-height: 20pt; color: khaki;
   text-align: center; text-shadow: 2px 2px 3px #333 }
.desc {
   background: ghostwhite; border: 1px inset }
sup { font-size: 7pt }

table.linksTab { border-collapse: collapse; table-layout: fixed; margin-top: 6px }
table.linksTab th {
   background-color: steelblue; height: 26pt; border-color: ghostwhite }
table.linksTab th a {
   color: beige; text-decoration: none }
table.linksTab th a:not(.aspNetDisabled):hover { 
   background-color: maroon; color: khaki }

table.qfacts { width: 96%; font-size: 11pt; box-shadow: 6px 6px 9px gray }
table.qfacts th {
   background-color: darkolivegreen; color: beige; font-style: italic; vertical-align: top;
   text-align: right; white-space: no-wrap; padding: 8px }
table.qfacts td {
   background-color: khaki; vertical-align: top; padding: 8px }

table.lm p { text-indent: 15px; text-align: left; font-size: 10pt }
table.lm ul { margin-left: 10 }

table.lmfacts { margin: 0 auto 24pt; font-size: 11pt;
   box-shadow: 6px 6px 9px gray }
table.lmfacts th { background-color: sienna; color: khaki; font-style: italic; 
   vertical-align: top; text-align: center; padding: 8px }
table.lmfacts td { background-color: #eed; vertical-align: top; padding: 8px }
table.lmfacts td:last-child { text-align: right }

.pager { font: bold 11pt verdana, arial, sans serif; color: beige;
   vertical-align: middle;
   text-shadow: 2px 2px 1px #202020 }
.pager td { padding: 3 3 3 8 }
.pager a:link, .pager a:visited, .pager a:active { 
   font: bold 11pt verdana, arial, sans serif; color: beige;
   text-decoration: none }
.pager a:hover { background: #800; color: khaki }

/* for header */
.tophead { table-layout: fixed; width: 100%; margin-top: -3pt }
.tophead td { border: 1px outset steelblue }
.base { background-image: linear-gradient(#004040,#404000) }
.logoback { background-color: darkslategray; 
   background-image: linear-gradient(rgba(0, 16, 16, 0.76 )), url('/shared/header.jpg');
   background-position: center; border-radius: 20px; width:98%; height: 2.5rem;
   display: flex; justify-content: center; align-items: center;
}
.travelPh { display: inline-block; font: bold 1.4rem 'Bookman Old Style', serif;
   color: beige; text-shadow: 5px 5px 5px black; max-width: 80vw;
   animation: logo_reveal 1s; justify-content: center;
}
.travelPh i { color: khaki }
.navbar { background: #369 }
.navbar td { text-shadow: -3px 3px 3px #222 }
.navbar a:link, .navbar a:visited {
   font-weight: 600; color: lightcyan; text-decoration: none }
.navbar a:active { background-color: maroon; color: khaki }
.navbar a:hover { color: khaki }