/*
 * ponkis.xyz, dressed as iGoogle (2007-2008).
 *
 * The page chrome follows iGoogle's own markup and stylesheet (ig.css and
 * the skin stylesheets, from the Wayback Machine): #gbar, the #nhdrwrap
 * header with the #gsea search table, #tabs, the .modbox gadgets in
 * .yui-gb columns, and #footerwrap. Default colours are the Bus Stop skin.
 *
 * Written like it was then, so it works in IE 6+, Firefox 2+, Safari 3+ and
 * Opera 9+: content-box sizing, floats, image sprites, and a solid colour in
 * front of anything translucent.
 * Only the admin editor at the end uses modern CSS.
 *
 * Form controls are left unstyled so the browser/OS draws them.
 */

/* ----------------------------------------------------------------- base */

body {
  margin: 0;
  font: 13px "lucida grande", arial, helvetica, sans-serif;
  color: #000;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
h1, h2, h3 { font-size: 100%; }
img { border: 0; }
form { margin: 0; }
input, textarea, select { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

a:link { color: #0e6276; }
a:visited { color: #0e6276; }
a:hover { color: #002129; }

.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #0e6276;
  text-decoration: underline;
  cursor: pointer;
}

.muted, .gt { color: #676767; }
.small { font-size: 11px; }
.center { text-align: center; }
.c, .clear { clear: both; height: 0; overflow: hidden; font-size: 0; line-height: 0; }
.cf { zoom: 1; }
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.new { font-size: 9px; color: #da0d10; }
[hidden] { display: none !important; }
.no-js .js-only { display: none !important; }

/* ------------------------------------------------------ google bar (#gbar) */

#gbar { float: left; height: 22px; padding: 2px 0 0 10px; font: 13px arial, sans-serif; white-space: nowrap; }
#guser { padding: 2px 10px 5px; text-align: right; font: 13px arial, sans-serif; white-space: nowrap; }
.gb1 { margin-right: .73em; }
#gbar a, #guser a, #guser .linklike { color: #00c; }
#guser form { display: inline; }
.gbh { clear: both; height: 0; overflow: hidden; border-top: 1px solid #c9d7f1; }

/* the "more" menu, as Google's bar had it: hidden until "more" is clicked
   (the script in src/views/layout.js puts it under the link) */
.gb3 { text-decoration: none; }
.gb3 small { font-size: 10px; }
#gbi {
  visibility: hidden;
  position: absolute;
  z-index: 1001;
  top: 24px;
  left: 0;
  background: #fff;
  border: 1px solid;
  border-color: #c9d7f1 #36c #36c #a2bae7;
  white-space: nowrap;
}
.gb2 { display: block; padding: .2em .5em; }
a.gb2 { text-decoration: none; }
#gbar a.gb2:hover { background: #36c; color: #fff; }
.gbd { height: 0; overflow: hidden; border-top: 1px solid #c9d7f1; font-size: 1px; }

/* -------------------------------------------------------- header (#nhdrwrap) */

/* As iGoogle drew it: the theme's tile repeats across the whole width
   (#nhdrwrap) and its picture sits top-centre over it (#nhdrwrapinner); the
   images are the original files, unchanged. A small script in the page
   (src/views/layout.js) picks them per theme and time of day and sets the
   height; this is the default, Bus Stop (sunny, as busstop.xml defaults). */
#nhdrwrap { background: #78726b url(/img/igoogle/skins/busstop/sunny/header_tile.jpg) repeat-x 50% 0; }
#nhdrwrapinner { background: url(/img/igoogle/skins/busstop/sunny/header_bg.gif) no-repeat 50% 0; }
#nhdrwrapsizer { height: 220px; padding-top: 5px; }

#gsea { padding: 10px 0; }
#gsea table { margin: 0 auto; }
#gsea td { padding: 0; }
.gsealog { padding: 6px 2px 0 0; }
.gseain { color: #262626; font-size: 11px; }
.gseain input { font-size: 12px; }
#q { margin: 4px 0 5px; }
#btnG, #btnI { height: 1.7em; margin-bottom: 5px; padding-bottom: 3px; }
.gseaopt { width: 152px; margin: 0; padding: 3px 0 0 7px; text-align: left; font-size: 10px; }
#nhdrwrapsizer a { color: #0e6276; text-decoration: none; }
#nhdrwrapsizer a:hover { text-decoration: underline; }
/* white links beside the search box on Bus Stop, like its white logo */
body[data-theme="busstop"] #nhdrwrapsizer .gseaopt a { color: #fff; }

/* The logo is an image, like iGoogle's, with a version per skin and sky
   (public/img/logo/, 166x55): logo-white.png for Bus Stop (the default,
   also what IE 6 gets) and at night, logo-classic.png for Classic,
   logo-blue.png / logo-teal.png on other daytime skies and
   logo-teahouse.png for Tea House. The
   text is for screen readers and browsers with images off. IE 6 needs the
   filter to show PNG transparency. */
#regular_logo { width: 166px; height: 55px; margin: 0 5px 0 0; font-size: 20px; }
#regular_logo a {
  display: block;
  width: 166px;
  height: 55px;
  overflow: hidden;
  text-indent: -9999px;
  background: url(/img/logo/logo-white.png) no-repeat 0 0;
}
* html #regular_logo a {
  background: none;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/logo/logo-white.png', sizingMethod='crop');
}

/* "New!" message under the search box */
.msg { padding-bottom: 10px; text-align: center; font-size: 12px; }
.msg .msg_box { display: inline; padding: 3px 15px 3px 10px; font-weight: bold; background: #fff; }
#nhdrwrapsizer .msg_box a { color: #0e6276; }
#notice .msg_box { background: #ff9; }
#nhdrwrapsizer .msg_box a { color: #0e6276; text-decoration: underline; }

/* ----------------------------------------------------------------- tabs */

/* A row of floated tabs whose bottom borders make one strip, as in ig.css
   plus the Bus Stop skin (5px strip, the selected tab the same colour). */
#tabs { position: relative; z-index: 30; height: 28px; font-size: 12px; }
#tabs ul { margin: 0; padding: 0; list-style: none; }
#tabs li { margin: 0; padding: 0; }
.tab { float: left; height: 23px; line-height: 21px; border-bottom: 5px solid #dcd2c4; }
.tab.spacer { width: 8px; overflow: hidden; }
.tab span { float: left; padding: 0 10px; white-space: nowrap; }
.selectedtab, .unselectedtab { cursor: pointer; }
.selectedtab { height: 27px; font-weight: bold; color: #262626; background: #dcd2c4; border: 1px solid #dcd2c4; border-bottom: 0; }
.unselectedtab { height: 22px; color: #ebe5dd; background: #a0998f; border: 1px solid #dcd2c4; border-bottom-width: 5px; }
.unselectedtab:hover { background: #78726c; }
#tabs .tab-name { color: #262626; text-decoration: none; }
#tabs .unselectedtab .tab-name { color: #ebe5dd; }
#tabs .unselectedtab:hover .tab-name { color: #fff; }
#tabs a.tab-name:hover { text-decoration: underline; }
.tab .ddbox { float: none; display: inline-block; margin: 0 0 0 6px; vertical-align: -1px; }
#tabs li.addtab { font-weight: normal; }
#addstuff { color: #262626; }
#tabs li.droptab, #tabs li.droptab:hover { background: #fff1a8; }
#tabs li.droptab .tab-name { color: #000 !important; }
#tabs li.addtab a, #addstuff a { color: #fff; text-decoration: none; }
body[data-theme="busstop"] #addstuff #select-theme { color: #262626; }
#tabs li.addtab a:hover, #addstuff a:hover { text-decoration: underline; }
#addstuff {
  height: 23px;
  overflow: hidden;
  zoom: 1;
  padding-right: 10px;
  line-height: 21px;
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
  border-bottom: 5px solid #dcd2c4;
}

/* -------------------------------------------------------------- page body */

#doc3 { overflow: hidden; zoom: 1; }
#modules { min-width: 786px; padding: 20px 25px 0; overflow: hidden; zoom: 1; background: #fff; }

/* three gadget columns (iGoogle used YUI's grid) */
.yui-gb { zoom: 1; }
.yui-gb .yui-u { float: left; width: 32%; margin-left: 2%; *margin-left: 1.895%; min-height: 140px; }
.yui-gb .first { margin-left: 0; *margin-left: 0; }

.announcement { padding: 4px 12px; background: #ff9; text-align: center; font-size: 12px; }

.empty-hint { margin: 30px 0; text-align: center; color: #676767; }

/* ---------------------------------------------------------------- gadgets */

.modbox { margin-bottom: 15px; zoom: 1; }
.modtitle {
  position: relative;
  zoom: 1;
  padding: 0 8px;
  font-size: 12px;
  line-height: 21px;
  color: #696e2f;
  background: #e1e5b2 url(/img/igoogle/mt_back.gif) no-repeat;
  border: 1px solid #c7cc8c;
  cursor: move;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: none;
}
.modtitle_text {
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modtitle a.mtlink, .modtitle a.mtlink:visited { color: #696e2f; }
.modtitle a.mtlink:hover { color: #002129; }
.modboxin { padding: 5px 9px 10px; overflow: hidden; zoom: 1; font-size: 12px; background: #fff; border: 1px solid #e4e5cf; }
.modboxin.flush { padding: 5px 5px 8px; }
.modbox.static .modtitle { cursor: default; }
.modbox.min .modboxin { display: none; }
.modbox.min .modtitle { border-bottom: 1px solid #c7cc8c; }
body[data-theme="classic"] .modbox.min .modtitle { border-bottom: 1px solid #c5d7ef; }

/* title-bar buttons: iGoogle's sprite (arrow, enlarge, max, min, shrink, x;
   the second row is the hover state) */
a.ddbox, a.delbox, a.minbox, a.maxbox {
  float: right;
  width: 12px;
  height: 12px;
  margin: 4px 0 0 3px;
  overflow: hidden;
  background: url(/img/igoogle/buttons.gif) no-repeat 0 0;
}
a.ddbox { background-position: 0 0; }
a.ddbox:hover { background-position: 0 -12px; }
a.maxbox { background-position: -24px 0; }
a.maxbox:hover { background-position: -24px -12px; }
a.minbox { background-position: -36px 0; }
a.minbox:hover { background-position: -36px -12px; }
a.delbox { background-position: -60px 0; }
a.delbox:hover { background-position: -60px -12px; }

.modbox.dragging { position: fixed; z-index: 1000; margin: 0; opacity: .75; filter: alpha(opacity=75); pointer-events: none; }
.is-dragging, .is-dragging * { cursor: move !important; }
.g-placeholder { margin-bottom: 15px; border: 2px dashed #999; }
.modbox.flash .modtitle, .modbox.flash .modboxin { border-color: #ffd000; }

/* --------------------------------------------------------- menus, dialogs */

/* iGoogle's drop-down menus */
.dd { position: absolute; z-index: 2001; margin-top: 2px; padding: 1px 0; background: #fff; }
.dd_border { border: 1px solid #7aa5d6; }
a.dd_item, .dd a.dd_item:link, .dd a.dd_item:visited { display: block; padding: 2px 6px; font-size: 12px; white-space: nowrap; text-decoration: none; color: #3366cc; }
.dd a.dd_item:hover, .dd a.dd_item:focus { color: #000; background: #efefef; }

/* the little prompt (naming a tab), framed like iGoogle's dialogs */
.dlg { width: 340px; max-width: 95%; padding: 0; background: #fff; border: 8px solid #c3d9ff; outline: 1px solid #3a5774; font-size: 13px; }
.dlg form { padding: 10px 12px 12px; }
.dlg-head { padding: 5px 12px !important; background: #e0edfe; zoom: 1; }
.dlg-head h2 { margin: 0; font-size: 13px; }
.dlg-x { float: right; background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; }
.dlg-label { display: block; margin-bottom: 6px; font-weight: bold; }
.dlg input { width: 100%; }
.dlg-actions { margin-top: 10px; text-align: right; }


/* ----------------------------------------------------------------- footer */

#footerwrap { clear: both; color: #c7e1b2; background: #89b25c url(/img/igoogle/busstop_footer.gif) no-repeat 0 0; border-top: 5px solid #dcd2c4; }
#footer_promos { margin: 0; padding: 20px 10px 30px; line-height: 19px; text-align: center; font-size: 93%; }
#footerwrap a, #footerwrap .linklike { color: #fff; text-decoration: none; }
#footerwrap a:hover, #footerwrap .linklike:hover { text-decoration: underline; }
.copyr { font-size: 82%; }

/* -------------------------------------------------------------- directory */
/* "Add stuff": iGoogle's gadget and theme directory (/ig/directory) */

body.directory { font-size: 13px; }
.directory #backhome { margin: 12px 15px 20px; }
.directory .backlink { font-weight: bold; }
.directory #header_logo { float: left; width: 166px; height: 55px; margin: 0 0 0 15px; font-size: 100%; }
.directory #header { height: 45px; padding-top: 10px; margin: 0 15px 0 181px; }
/* The Gadgets/Themes tabs. iGoogle drew them as inline links whose padding
   happened to land on the strip's bottom line with its fonts; here they're
   floats of a fixed height in pixels, and the selected one is a pixel taller,
   so it always covers the line (in IE 6 too). */
.header_tab { height: 26px; margin: 0; padding: 10px 0 0; list-style: none; font-size: 110%; font-weight: bold; background: #e5ecf9; border-bottom: 1px solid #3366cc; }
.header_tab li { float: left; display: inline; margin-left: 7px; }
.header_tab li a { float: left; height: 17px; padding: 3px 20px 5px; line-height: 17px; color: #0000cc; border: 1px solid #e5ecf9; border-bottom: 0; }
.header_tab li a.selected { position: relative; height: 18px; color: #000; text-decoration: none; background: #fff; border-color: #3366cc; }
.directory #sidebar { float: right; width: 275px; margin: 0 15px 0 5px; }
.directory #container { margin: 0 295px 0 15px; }
.directory #nav { float: left; width: 160px; margin: 0; padding: 9px 0 0; list-style: none; }
.directory #nav li { padding-top: 5px; }
.directory #nav li.navhead { padding-top: 0; font-size: 110%; font-weight: bold; color: #666; }
.directory #nav li.selected { font-weight: bold; }
.directory #main { margin-left: 170px; }
.directory #pagehead { margin: 0 0 10px; line-height: 35px; border-bottom: 1px solid #7aa5d6; }
.directory #pagehead h2 { margin: 0; font-size: 110%; }
.directory-entry { float: left; width: 100%; margin-bottom: 12px; padding: 0 0 10px; border-bottom: 1px solid #d9e2f4; }
.directory-entry.first { padding-top: 10px; }
.directory-entry .gadget { float: left; width: 140px; text-align: center; }
.directory-entry .thumb { border: 1px solid #0027e3; }
.directory-entry .gadget .thumb { margin-bottom: 5px; }
.directory-entry form { margin: 0; }
.directory-entry .info { margin: 0 110px 0 150px; }
.directory-entry .info p { margin: 0 0 5px; }
.directory-entry .headlink { font-size: 110%; font-weight: bold; }
.directory-entry .green_url { color: #008000; font-size: 85%; }
.directory-entry .author { float: right; width: 100px; overflow: hidden; font-size: 85%; color: #666; }
.directory-entry .author p { margin: 0 0 4px; }
.directory-entry .skin { margin-right: 110px; }
.theme-entry .info { margin: 0 110px 5px 0; }
.directory-entry .skin .thumb { display: block; margin-bottom: 5px; }
.directory-entry .added, .theme-cell .added { display: none; font-size: 85%; }
.directory-entry .added.on, .theme-cell .added.on { display: block; }

/* the themes, two to a row */
.theme-grid { padding-top: 10px; overflow: hidden; zoom: 1; }
.theme-cell { float: left; width: 48.5%; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #d9e2f4; }
.theme-cell.right { float: right; }
.theme-cell .thumb-frame { margin-bottom: 6px; border: 1px solid #0027e3; }
.theme-cell .thumb { display: block; width: 100%; height: auto; }
.theme-cell .author { float: right; width: 100px; overflow: hidden; font-size: 85%; color: #666; }
.theme-cell .author p { margin: 0 0 4px; }
.theme-cell .info { margin: 0 110px 5px 0; }
.theme-cell .info p { margin: 0 0 5px; }
.theme-cell .headlink { font-size: 110%; font-weight: bold; }
.theme-cell form { margin: 0; }
.theme-add { clear: both; }
.added .check { color: #008000; font-size: 13px; }
.directory .module { margin-bottom: 10px; }
.directory .module h3 { height: 17px; margin: 0; padding: 5px 11px; font-size: 110%; background: #ecf4fd; }
.directory .module p { margin: 11px; }
.directory #search { background: #e5ecf9; border: 1px solid #3366cc; }
.directory #search h3 { background: none; }
.directory #no_results { padding: 10px 0 50px; font-size: 120%; font-weight: bold; }
.directory #bottom { clear: both; margin: 0 15px; }
.directory #bottom p { margin: 0; padding: 20px 0 10px; }

/* ------------------------------------------------------- gadget contents */

/* YouTube gadget, laid out like iGoogle's: the 2005 logo, then rows of
   videos that read left to right (as many as fit, public/js/app.js), each
   title cut off at the thumbnail's width */
.yt-bar { margin: 0 0 6px; font-size: 11px; line-height: 22px; }
.yt-logo { margin-right: 4px; vertical-align: middle; }
.yt-list { max-width: 45%; font-size: 11px; vertical-align: middle; }
.yt-pages { margin-left: 4px; white-space: nowrap; }
.yt-pages a { padding: 0 1px; }
.yt-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.yt-video { padding: 4px 2px 8px; text-align: left; vertical-align: top; font-size: 11px; }
.yt-thumb { display: block; margin: 0 0 2px; padding: 1px; border: 1px solid #999; }
.yt-title { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.yt-title a { color: #000; text-decoration: none; }
.yt-title a:hover { text-decoration: underline; }
.yt-length { color: #676767; }
.yt-search { margin: 4px 0 0; white-space: nowrap; }
.yt-search input[type="text"] { width: 70%; }

/* star ratings (public/js/ratings.js) */
.rating { font-size: 11px; color: #676767; white-space: nowrap; }
.rating .stars a { text-decoration: none; }
.rating img { border: 0; vertical-align: baseline; }
.rating .stars.mine img { margin-bottom: 0; }
/* in the gadgets the count is green and underlined, like the "14 reviews"
   of Google's movie showtimes */
.modbox .rating-count { color: #393; text-decoration: underline; }
.directory-entry .author .rating, .theme-cell .author .rating { white-space: normal; }
.directory-entry .author .rating-count, .theme-cell .author .rating-count { display: block; }
.directory-entry .author .photo, .theme-cell .author .photo { vertical-align: middle; }

/* "Edit settings": iGoogle's .meditbox, in the gadget's title bar under a
   line, with the labels on the left in the title's colour (ig.css) */
.meditbox {
  position: relative;
  z-index: 4;
  clear: both;
  margin-top: 5px;
  padding: 6px 5px 5px;
  border-top: 1px solid #c7cc8c;
  border-top-color: inherit;
  font-size: 12px;
  line-height: normal;
  white-space: normal;
  cursor: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  touch-action: auto;
}
body[data-theme="classic"] .meditbox { border-top-color: #7aa5d6; }
.meditbox input, .meditbox select { margin-left: 3px; font-size: 12px; }
.meditbox select { margin-bottom: 2px; }
.meditbox a { text-decoration: underline !important; font-weight: normal !important; }
.medit-table { width: 95%; margin: 0 auto; border-collapse: collapse; }
.medit-table td { padding: 1px 0 2px; vertical-align: middle; }
.medit-label { width: 35%; padding-right: 2px !important; text-align: right; white-space: nowrap; }
.medit-field { text-align: left; }
.medit-field label { white-space: nowrap; }
.medit-text { display: block; width: 100%; margin: 0 0 4px; font: 12px arial, sans-serif; }
.medit-units { margin: 0 0 4px; }
.medit-hint { margin: 4px 0 0; font-size: 11px; color: #676767; }
.medit-actions { margin-top: 4px; text-align: right; }
.medit-msg { float: left; color: #c00; font-size: 11px; }
.medit-line { white-space: nowrap; }
.edit-list { margin: 4px 0 2px 35%; padding-left: 16px; }

/* the little x that removes an item (to-do list) */
.bm-del { background: none; border: 0; color: #c00; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }

/* weather */
.wx-city { zoom: 1; }
.wx-city + .wx-city { margin-top: 10px; }
.wx-name { display: block; font-weight: bold; padding-bottom: 3px; margin-bottom: 5px; border-bottom: 1px solid #ccc; }
.wx-body { overflow: hidden; zoom: 1; }
.wx-now { float: left; margin-right: 8px; }
.wx-days { float: right; text-align: center; font-size: 12px; }
.wx-day { float: left; margin-left: 10px; }
.wx-icon { display: block; width: 40px; height: 40px; margin: 2px auto; border: 1px solid #8a9aae; }

/* clocks */
.clocks { overflow: hidden; zoom: 1; }
.clock { float: left; width: 48%; margin: 0; text-align: center; }
.clock + .clock { float: right; }
.clock svg { display: block; width: 100%; max-width: 130px; margin: 0 auto; }
.clock-face { fill: #fff; }
.clock-nums { font-size: 12px; fill: #000; text-anchor: middle; }
.clock-ampm, .clock-date { font-size: 8px; fill: #444; text-anchor: middle; }
.hand-h { stroke: #3a5f95; stroke-width: 2; }
.hand-m { stroke: #3a5f95; stroke-width: 1.5; }
.hand-s { stroke: #3a5f95; stroke-width: .75; }
.clock-pin { fill: #3a5f95; }
.clock-digital { padding: 10px 0; }
.clock-digital .clock-time { font: bold 22px "Courier New", monospace; }
.clock-digital .clock-date { font-size: 11px; color: #444; }

/* themes: iGoogle's "select a theme" box (.modbox_s) with its list of
   thumbnails (.skinth, the selected one .skinthsel) */
.modbox_s .modtitle { border-color: #abb079; background: #e1e5b2 none; }
.modbox_s .modboxin { padding: 9px 9px 10px; background: #f0f2da; border-color: #abb079; border-top-color: #d1d694; }
#skinbox_b_scroller { white-space: nowrap; }
a.skinth, a.skinthsel { display: block; height: 25px; margin-bottom: 1px; padding: 4px; line-height: 25px; font-weight: bold; color: #000; text-decoration: none; background: #fff; }
a.skinthsel { background: #feffc5; }
a.skinth:hover { background: #f5f5f5; }
.skinimg { float: left; width: 80px; height: 25px; margin-right: 7px; overflow: hidden; }
.skinimg img { border: 0; }
.theme-actions { margin-top: 8px; text-align: right; }

/* calendar: Google Calendar's own date picker, with its stylesheet from
   calendar.xml (the DP_ classes) and its 2px corner pictures. The text is
   13px x 1.35, as the gadget had it, then 83% and 85%. */
.cal { position: relative; padding: 2px 0 4px; text-align: center; font-size: 17.5px; }
.dp-frame { margin: 2px auto 0; border-collapse: collapse; background: #c3d9ff; }
.dp-frame td { padding: 0; }
.dp-edge td { height: 2px; font-size: 1px; line-height: 1px; }
.dp-tl, .dp-tr, .dp-bl, .dp-br { width: 2px; background-repeat: no-repeat; }
.dp-tl { background-image: url(/img/igoogle/calendar/corner_tl.gif); }
.dp-tr { background-image: url(/img/igoogle/calendar/corner_tr.gif); }
.dp-bl { background-image: url(/img/igoogle/calendar/corner_bl.gif); }
.dp-br { background-image: url(/img/igoogle/calendar/corner_br.gif); }
.dp-in { width: 13em; }
.DP_monthtable { width: 100%; padding: 0; background: #fff; border-bottom: 1px solid #a2bbdd; font-size: 83%; }
.DP_monthtable td { padding: 2px; text-align: center; font-family: Verdana, sans-serif; font-size: 85%; cursor: pointer; }
.DP_heading td { background: #c3d9ff; color: #112abb; vertical-align: middle; }
.DP_cur { font-weight: bold; line-height: 1em; padding-bottom: 4px; cursor: default !important; }
.DP_prev, .DP_next { padding-bottom: 6px !important; }
.DP_prev { text-align: right !important; }
.DP_next { text-align: left !important; }
.DP_days td { background: #c3d9ff; cursor: default; }
.DP_weekday { background: #fff; }
.DP_weekend { background: #e8eef7; }
td.DP_weekday.DP_selected { background: #ace; }
td.DP_weekend.DP_selected { background: #9bd; }
.DP_offmonth { color: #888; }
.DP_today { background: #9ab !important; border: 1px solid !important; border-color: #567 #abc #abc #567 !important; color: #fff; }
td.DP_today.DP_selected { background: #579 !important; border-color: #246 #9bd #9bd #246 !important; }
.DP_day_top { border-top: 1px solid #a2bbdd; }
.DP_day_right { border-right: 1px solid #a2bbdd; }
.DP_day_left { border-left: 1px solid #a2bbdd; }
.cal-today { margin-top: 3px; font-size: 11px; }
/* the box a click on a day opens */
.cal-pop { position: absolute; z-index: 10; width: 15em; text-align: left; font-size: 11px; background: #fff; border: 1px solid gray; }
.cal-pop-head { padding: 1px 2px 2px; background: #e8eef7; zoom: 1; }
.cal-pop-x { float: right; margin: 2px 2px 0 0; cursor: pointer; }
.cal-pop-body { padding: 2px; }

/* The same calendar as the uploader's date picker (public/js/files.js),
   under the date box. Days before today can't be picked. */
.date-pop { width: 15em; }
.date-pop .cal { font-size: 15px; }
.DP_monthtable td.DP_past { color: #bbb; cursor: default; }
.cal-open { margin: 0 4px; font-size: 11px; }

/* iGoogle's tabs inside a gadget (lib/libtabs.js, its tablib_ classes),
   as the Asset Directory uses them */
.tablib_table { width: 100%; margin: 0 0 6px; border-collapse: separate; text-align: left; font-size: 12px; }
.tablib_table td { line-height: 1.2; }
.tablib_selected, .tablib_unselected { padding: 2px 12px; text-align: center; white-space: nowrap; }
.tablib_selected { background: #fff; border: 1px solid #87afda; border-bottom-width: 0; color: #3366cc; font-weight: bold; cursor: default; }
.tablib_unselected { background: #ddd; border: 1px solid #aaa; border-bottom-color: #87afda; }
.tablib_unselected a { display: block; color: #000 !important; text-decoration: none; }
.tablib_spacerTab { width: 1px; padding: 0 1px; border-bottom: 1px solid #87afda; }
.tablib_emptyTab { padding: 0 1px; border-bottom: 1px solid #87afda; }
.tablib_fill { width: 100%; }

/* the Asset Directory: one file a row, its date on the right */
.asset-table { width: 100%; border-collapse: collapse; }
.asset-table td { padding: 3px 4px 3px 0; vertical-align: top; border-bottom: 1px solid #e5ecf9; }
.asset-name a { word-break: break-all; }
.asset-date { width: 1%; padding-right: 0 !important; white-space: nowrap; text-align: right; font-size: 11px; }
.asset-acts { font-size: 11px; }
.asset-pages { float: left; }
.privacy { padding: 0 3px; font-size: 11px; color: #000; }
.privacy.public { background: #dfd; }
.privacy.unlisted { background: #fff1a8; }
.privacy.private { background: #fdd; }
.sites .rating { margin-left: 0; }

/* the uploader: the form in the gadget, and a line and a bar per file */
.gadget-upload { margin: 0 0 6px; padding: 4px 0; background: #e5ecf9; border: 1px solid #c3d9ff; }
.gadget-upload .medit-label { width: 30%; }
.gadget-upload input[type="file"] { width: 95%; }
.upload-progress { margin: 4px 4px 0; }
.upload-item { margin: 6px 0; font-size: 12px; word-wrap: break-word; }
.upload-acts { font-size: 11px; }
.upload-bar { height: 8px; margin-top: 2px; overflow: hidden; background: #fff; border: 1px solid #87afda; }
.upload-bar div { height: 8px; background: #c3d9ff; }
.upload-item.done .upload-bar div { background: #9c6; }
.upload-item.failed .upload-bar div { background: #e99; }

/* weather, before a city is picked: iGoogle's sun and the place box */
.wx-welcome img { float: left; margin: 5px 10px 20px 0; }
.wx-welcome form { margin-top: 2px; }

/* the swap button (currency converter) */
.swap { background: none; border: 0; font-size: 15px; cursor: pointer; color: #333; padding: 0 2px 2px; vertical-align: bottom; }

/* notes, to-do */
.notes { width: 100%; min-height: 130px; }
.todo { list-style: none; margin: 0 0 8px; padding: 0; }
.todo li { padding: 2px 0; border-bottom: 1px dotted #ccc; zoom: 1; }
.todo li .bm-del { float: right; }
.todo input:checked + span { color: #999; text-decoration: line-through; }
.todo-add input { width: 70%; }

/* currency converter */
.conv input { width: 90px; }
.conv-out { margin: 10px 0 4px; }


/* ================================================================ themes */

/* The Bus Stop skin (sunny) is the default above. Other skins recolour the
   tabs, gadget frames, links and footer, with values from iGoogle's skin
   stylesheets where they were archived (Classic, City Scape, Tea House).
   The header picture comes from the script in the page, which also marks
   dark skies with data-sky="dark" for a white logo and header links. */

body[data-sky="dark"] #regular_logo a { background-image: url(/img/logo/logo-white.png); }
body[data-sky="dark"] #nhdrwrapsizer a { color: #fff; }
body[data-sky] #nhdrwrapsizer .msg_box a { color: #0e6276; }
body[data-sky="light"] #regular_logo a { background-image: url(/img/logo/logo-blue.png); }
body[data-theme="sweetdreams"][data-sky="light"] #regular_logo a { background-image: url(/img/logo/logo-teal.png); }
body[data-theme="busstop"] #regular_logo a { background-image: url(/img/logo/logo-white.png); }
body[data-theme="classic"] #regular_logo a { background-image: url(/img/logo/logo-classic.png); }
body[data-theme="teahouse"] #regular_logo a { background: url(/img/logo/logo-teahouse.png) no-repeat 8px 0; }
body[data-theme="teahouse"][data-time="midnight"] #regular_logo a,
body[data-theme="teahouse"][data-time="2am"] #regular_logo a,
body[data-theme="teahouse"][data-time="3.14am"] #regular_logo a,
body[data-theme="teahouse"][data-time="4am"] #regular_logo a { background: url(/img/logo/logo-white.png) no-repeat 0 0; }

/* Classic is plain ig.css: Arial, bold gadget titles, the blue buttons */
body[data-theme="classic"] { font-family: arial, sans-serif; }
body[data-theme="classic"] .modtitle_text { font-weight: bold; }
body[data-theme="classic"] a.ddbox, body[data-theme="classic"] a.delbox,
body[data-theme="classic"] a.minbox, body[data-theme="classic"] a.maxbox { background-image: url(/img/igoogle/buttons.gif); }
body[data-theme="springscape"] a.ddbox, body[data-theme="springscape"] a.delbox,
body[data-theme="springscape"] a.minbox, body[data-theme="springscape"] a.maxbox { background-image: url(/img/igoogle/buttons-springscape.gif); }

body[data-theme="classic"] #nhdrwrap { background: #fff; }
body[data-theme="classic"] #nhdrwrapinner { background: none; }
body[data-theme="classic"] #nhdrwrapsizer { height: auto; padding-bottom: 6px; }
body[data-theme="classic"] #nhdrwrapsizer a { color: #0000cc; text-decoration: underline; }
body[data-theme="classic"] .gseain { color: #000; }
body[data-theme="classic"] .msg .msg_box { background: #ff9; }
body[data-theme="classic"] .modtitle { border-top-color: #7aa5d6; border-bottom: 0; }
/* Classic keeps ig.css's own gadget metrics (the skins use smaller type) */
body[data-theme="classic"] .modtitle { padding: 2px 5px; font-size: 110%; line-height: normal; }
body[data-theme="classic"] .modtitle_text { font-size: 100%; }
body[data-theme="classic"] .modboxin { padding: 5px 5px 10px; font-size: 13px; }
body[data-theme="classic"] a.ddbox, body[data-theme="classic"] a.delbox,
body[data-theme="classic"] a.minbox, body[data-theme="classic"] a.maxbox { margin-top: 2px; }
body[data-theme="classic"] #footerwrap .copyr { color: #000; }

body[data-theme="classic"] a:link, body[data-theme="classic"] a:visited, body[data-theme="classic"] .linklike { color: #0000cc; }
body[data-theme="classic"] #tabs { height: 24px; }
body[data-theme="classic"] .tab, body[data-theme="classic"] #addstuff { border-bottom: 1px solid #7aa5d6; }
body[data-theme="classic"] .selectedtab { height: 23px; color: #3366cc; background: #fff; border-color: #7aa5d6; border-bottom: 0; }
body[data-theme="classic"] .unselectedtab { color: #262626; background: #e5ecf9; border-color: #7aa5d6; border-bottom-width: 1px; }
body[data-theme="classic"] .unselectedtab:hover { background: #7aa5d6; }
body[data-theme="classic"] #tabs .tab-name { color: #3366cc; }
body[data-theme="classic"] #tabs .unselectedtab .tab-name { color: #262626; }
body[data-theme="classic"] #tabs li.addtab a, body[data-theme="classic"] #addstuff, body[data-theme="classic"] #addstuff a { color: #0000cc; }
body[data-theme="classic"] .modtitle { color: #3366cc; background: #e5ecf9 none; border-color: #c5d7ef; }
body[data-theme="classic"] .modtitle a.mtlink, body[data-theme="classic"] .modtitle a.mtlink:visited { color: #3366cc; }
body[data-theme="classic"] .modboxin { border-color: #c5d7ef; }
body[data-theme="classic"] .modbox.min .modtitle { border-bottom-color: #c5d7ef; }
body[data-theme="classic"] #footerwrap { color: #0000cc; background: #fff none; border-top: 1px solid #7aa5d6; }
body[data-theme="classic"] #footerwrap a, body[data-theme="classic"] #footerwrap .linklike { color: #0000cc; }

body[data-theme="beach"] a:link, body[data-theme="beach"] a:visited, body[data-theme="beach"] .linklike { color: #2357c3; }
body[data-theme="beach"] #tabs { height: 24px; }
body[data-theme="beach"] .tab, body[data-theme="beach"] #addstuff { border-bottom: 1px solid #fff; }
body[data-theme="beach"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #fff; border-bottom: 0; }
body[data-theme="beach"] .unselectedtab { color: #6b5320; background: #f3e7c9; border-color: #fff; border-bottom-width: 1px; }
body[data-theme="beach"] .unselectedtab:hover { background: #c9b27a; }
body[data-theme="beach"] #tabs .tab-name { color: #262627; }
body[data-theme="beach"] #tabs .unselectedtab .tab-name { color: #6b5320; }
body[data-theme="beach"] #tabs li.addtab a, body[data-theme="beach"] #addstuff, body[data-theme="beach"] #addstuff a { color: #fff; }
body[data-theme="beach"] .modtitle { color: #6b5320; background: #efe3c3 none; border-color: #d6c28a; }
body[data-theme="beach"] .modtitle a.mtlink, body[data-theme="beach"] .modtitle a.mtlink:visited { color: #6b5320; }
body[data-theme="beach"] .modboxin { border-color: #eadfc0; }
body[data-theme="beach"] .modbox.min .modtitle { border-bottom-color: #d6c28a; }
body[data-theme="beach"] #footerwrap { color: #5e4a1c; background: #d9c48e none; border-top: 1px solid #c9b27a; }
body[data-theme="beach"] #footerwrap a, body[data-theme="beach"] #footerwrap .linklike { color: #5e4a1c; }

body[data-theme="cityscape"] a:link, body[data-theme="cityscape"] a:visited, body[data-theme="cityscape"] .linklike { color: #2466a5; }
body[data-theme="cityscape"] #tabs { height: 24px; }
body[data-theme="cityscape"] .tab, body[data-theme="cityscape"] #addstuff { border-bottom: 1px solid #9facc4; }
body[data-theme="cityscape"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #9facc4; border-bottom: 0; }
body[data-theme="cityscape"] .unselectedtab { color: #314d81; background: #dae3f2; border-color: #9facc4; border-bottom-width: 1px; }
body[data-theme="cityscape"] .unselectedtab:hover { background: #9facc4; }
body[data-theme="cityscape"] #tabs .tab-name { color: #262627; }
body[data-theme="cityscape"] #tabs .unselectedtab .tab-name { color: #314d81; }
body[data-theme="cityscape"] #tabs li.addtab a, body[data-theme="cityscape"] #addstuff, body[data-theme="cityscape"] #addstuff a { color: #2466a5; }
body[data-theme="cityscape"] .modtitle { color: #2466a5; background: #c8d0dd none; border-color: #9facc4; }
body[data-theme="cityscape"] .modtitle a.mtlink, body[data-theme="cityscape"] .modtitle a.mtlink:visited { color: #2466a5; }
body[data-theme="cityscape"] .modboxin { border-color: #cfd7e5; }
body[data-theme="cityscape"] .modbox.min .modtitle { border-bottom-color: #9facc4; }
body[data-theme="cityscape"] #footerwrap { color: #fff; background: #a2a0af none; border-top: 1px solid #97b0dd; }
body[data-theme="cityscape"] #footerwrap a, body[data-theme="cityscape"] #footerwrap .linklike { color: #fff; }

body[data-theme="sweetdreams"] a:link, body[data-theme="sweetdreams"] a:visited, body[data-theme="sweetdreams"] .linklike { color: #1f5fa0; }
body[data-theme="sweetdreams"] #tabs { height: 24px; }
body[data-theme="sweetdreams"] .tab, body[data-theme="sweetdreams"] #addstuff { border-bottom: 1px solid #fff; }
body[data-theme="sweetdreams"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #fff; border-bottom: 0; }
body[data-theme="sweetdreams"] .unselectedtab { color: #2b5d8a; background: #dbe9f5; border-color: #fff; border-bottom-width: 1px; }
body[data-theme="sweetdreams"] .unselectedtab:hover { background: #8fb3d6; }
body[data-theme="sweetdreams"] #tabs .tab-name { color: #262627; }
body[data-theme="sweetdreams"] #tabs .unselectedtab .tab-name { color: #2b5d8a; }
body[data-theme="sweetdreams"] #tabs li.addtab a, body[data-theme="sweetdreams"] #addstuff, body[data-theme="sweetdreams"] #addstuff a { color: #2b5d8a; }
body[data-theme="sweetdreams"] .modtitle { color: #1b466c; background: #d9e8f5 none; border-color: #a6c6e2; }
body[data-theme="sweetdreams"] .modtitle a.mtlink, body[data-theme="sweetdreams"] .modtitle a.mtlink:visited { color: #1b466c; }
body[data-theme="sweetdreams"] .modboxin { border-color: #cfe0ef; }
body[data-theme="sweetdreams"] .modbox.min .modtitle { border-bottom-color: #a6c6e2; }
body[data-theme="sweetdreams"] #footerwrap { color: #fff; background: #2e5f8a none; border-top: 1px solid #a6c6e2; }
body[data-theme="sweetdreams"] #footerwrap a, body[data-theme="sweetdreams"] #footerwrap .linklike { color: #fff; }

body[data-theme="teahouse"] a:link, body[data-theme="teahouse"] a:visited, body[data-theme="teahouse"] .linklike { color: #4e8029; }
body[data-theme="teahouse"] #tabs { height: 24px; }
body[data-theme="teahouse"] .tab, body[data-theme="teahouse"] #addstuff { border-bottom: 1px solid #fff; }
body[data-theme="teahouse"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #fff; border-bottom: 0; }
body[data-theme="teahouse"] .unselectedtab { color: #4e8029; background: #ddedd1; border-color: #fff; border-bottom-width: 1px; }
body[data-theme="teahouse"] .unselectedtab:hover { background: #a4c98b; }
body[data-theme="teahouse"] #tabs .tab-name { color: #262627; }
body[data-theme="teahouse"] #tabs .unselectedtab .tab-name { color: #4e8029; }
body[data-theme="teahouse"] #tabs li.addtab a, body[data-theme="teahouse"] #addstuff, body[data-theme="teahouse"] #addstuff a { color: #fff; }
body[data-theme="teahouse"] .modtitle { color: #4e8029; background: #c7e4b3 none; border-color: #a4c98b; }
body[data-theme="teahouse"] .modtitle a.mtlink, body[data-theme="teahouse"] .modtitle a.mtlink:visited { color: #4e8029; }
body[data-theme="teahouse"] .modboxin { border-color: #d8e5cf; }
body[data-theme="teahouse"] .modbox.min .modtitle { border-bottom-color: #a4c98b; }
body[data-theme="teahouse"] #footerwrap { color: #a9bc9b; background: #434c4b none; border-top: 5px solid #779460; }
body[data-theme="teahouse"] #footerwrap a, body[data-theme="teahouse"] #footerwrap .linklike { color: #a9bc9b; }

body[data-theme="springscape"] a:link, body[data-theme="springscape"] a:visited, body[data-theme="springscape"] .linklike { color: #2e6b1d; }
body[data-theme="springscape"] #tabs { height: 24px; }
body[data-theme="springscape"] .tab, body[data-theme="springscape"] #addstuff { border-bottom: 1px solid #fff; }
body[data-theme="springscape"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #fff; border-bottom: 0; }
body[data-theme="springscape"] .unselectedtab { color: #3d6b2c; background: #e0f0cf; border-color: #fff; border-bottom-width: 1px; }
body[data-theme="springscape"] .unselectedtab:hover { background: #a9cf86; }
body[data-theme="springscape"] #tabs .tab-name { color: #262627; }
body[data-theme="springscape"] #tabs .unselectedtab .tab-name { color: #3d6b2c; }
body[data-theme="springscape"] #tabs li.addtab a, body[data-theme="springscape"] #addstuff, body[data-theme="springscape"] #addstuff a { color: #fff; }
body[data-theme="springscape"] .modtitle { color: #2e5418; background: #d7ecc2 none; border-color: #a9cf86; }
body[data-theme="springscape"] .modtitle a.mtlink, body[data-theme="springscape"] .modtitle a.mtlink:visited { color: #2e5418; }
body[data-theme="springscape"] .modboxin { border-color: #d5e8c4; }
body[data-theme="springscape"] .modbox.min .modtitle { border-bottom-color: #a9cf86; }
body[data-theme="springscape"] #footerwrap { color: #fff; background: #5d8f3a none; border-top: 5px solid #a9cf86; }
body[data-theme="springscape"] #footerwrap a, body[data-theme="springscape"] #footerwrap .linklike { color: #fff; }

body[data-theme="tiger"] a:link, body[data-theme="tiger"] a:visited, body[data-theme="tiger"] .linklike { color: #8a5a00; }
body[data-theme="tiger"] #tabs { height: 28px; }
body[data-theme="tiger"] .tab, body[data-theme="tiger"] #addstuff { border-bottom: 5px solid #d2bf7c; }
body[data-theme="tiger"] .selectedtab { height: 27px; color: #3d2c08; background: #d2bf7c; border-color: #d2bf7c; border-bottom: 0; }
body[data-theme="tiger"] .unselectedtab { color: #fff8e0; background: #b5a370; border-color: #d2bf7c; border-bottom-width: 5px; }
body[data-theme="tiger"] .unselectedtab:hover { background: #8a7640; }
body[data-theme="tiger"] #tabs .tab-name { color: #3d2c08; }
body[data-theme="tiger"] #tabs .unselectedtab .tab-name { color: #fff8e0; }
body[data-theme="tiger"] #tabs li.addtab a, body[data-theme="tiger"] #addstuff, body[data-theme="tiger"] #addstuff a { color: #fff; }
body[data-theme="tiger"] .modtitle { color: #5a4312; background: #efe2b5 none; border-color: #d2bf7c; }
body[data-theme="tiger"] .modtitle a.mtlink, body[data-theme="tiger"] .modtitle a.mtlink:visited { color: #5a4312; }
body[data-theme="tiger"] .modboxin { border-color: #e8dcb4; }
body[data-theme="tiger"] .modbox.min .modtitle { border-bottom-color: #d2bf7c; }
body[data-theme="tiger"] #footerwrap { color: #f2e9c4; background: #4e3f1f none; border-top: 5px solid #d2bf7c; }
body[data-theme="tiger"] #footerwrap a, body[data-theme="tiger"] #footerwrap .linklike { color: #f2e9c4; }

body[data-theme="jr"] a:link, body[data-theme="jr"] a:visited, body[data-theme="jr"] .linklike { color: #1e5c86; }
body[data-theme="jr"] #tabs { height: 24px; }
body[data-theme="jr"] .tab, body[data-theme="jr"] #addstuff { border-bottom: 1px solid #fff; }
body[data-theme="jr"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #fff; border-bottom: 0; }
body[data-theme="jr"] .unselectedtab { color: #1d4258; background: #d8e8f1; border-color: #fff; border-bottom-width: 1px; }
body[data-theme="jr"] .unselectedtab:hover { background: #9fc0d4; }
body[data-theme="jr"] #tabs .tab-name { color: #262627; }
body[data-theme="jr"] #tabs .unselectedtab .tab-name { color: #1d4258; }
body[data-theme="jr"] #tabs li.addtab a, body[data-theme="jr"] #addstuff, body[data-theme="jr"] #addstuff a { color: #fff; }
body[data-theme="jr"] .modtitle { color: #1d4258; background: #d3e5ef none; border-color: #9fc0d4; }
body[data-theme="jr"] .modtitle a.mtlink, body[data-theme="jr"] .modtitle a.mtlink:visited { color: #1d4258; }
body[data-theme="jr"] .modboxin { border-color: #cfe0ea; }
body[data-theme="jr"] .modbox.min .modtitle { border-bottom-color: #9fc0d4; }
body[data-theme="jr"] #footerwrap { color: #fff; background: #2c4f66 none; border-top: 1px solid #9fc0d4; }
body[data-theme="jr"] #footerwrap a, body[data-theme="jr"] #footerwrap .linklike { color: #fff; }

body[data-theme="classic"] .modbox_s .modboxin { background: #e5ecf9; }
body[data-theme="beach"] .modbox_s .modboxin { background: #f3e7c9; }
body[data-theme="cityscape"] .modbox_s .modboxin { background: #dae3f2; }
body[data-theme="sweetdreams"] .modbox_s .modboxin { background: #dbe9f5; }
body[data-theme="teahouse"] .modbox_s .modboxin { background: #ddedd1; }
body[data-theme="springscape"] .modbox_s .modboxin { background: #e0f0cf; }
body[data-theme="tiger"] .modbox_s .modboxin { background: #b5a370; }
body[data-theme="jr"] .modbox_s .modboxin { background: #d8e8f1; }
body[data-theme="planets"] .modbox_s .modboxin { background: #e1e4ef; }
body[data-theme="holidayvillage"] .modbox_s .modboxin { background: #d6e9f5; }
body[data-theme="autumn"] .modbox_s .modboxin { background: #efe3cf; }

/* Solar System, Holiday Village and Autumn: their skin stylesheets weren't
   archived, so these colours are picked from their pictures */
body[data-theme="planets"] a:link, body[data-theme="planets"] a:visited, body[data-theme="planets"] .linklike { color: #2f4a8a; }
body[data-theme="planets"] #tabs { height: 24px; }
body[data-theme="planets"] .tab, body[data-theme="planets"] #addstuff { border-bottom: 1px solid #8e95b3; }
body[data-theme="planets"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #8e95b3; border-bottom: 0; }
body[data-theme="planets"] .unselectedtab { color: #e6e8f2; background: #3e4361; border-color: #8e95b3; border-bottom-width: 1px; }
body[data-theme="planets"] .unselectedtab:hover { background: #5b6187; }
body[data-theme="planets"] #tabs .tab-name { color: #262627; }
body[data-theme="planets"] #tabs .unselectedtab .tab-name { color: #e6e8f2; }
body[data-theme="planets"] #tabs li.addtab a, body[data-theme="planets"] #addstuff, body[data-theme="planets"] #addstuff a { color: #fff; }
body[data-theme="planets"] .modtitle { color: #2a3354; background: #e1e4ef none; border-color: #a8b0c8; }
body[data-theme="planets"] .modtitle a.mtlink, body[data-theme="planets"] .modtitle a.mtlink:visited { color: #2a3354; }
body[data-theme="planets"] .modboxin { border-color: #d5d9e6; }
body[data-theme="planets"] .modbox.min .modtitle { border-bottom-color: #a8b0c8; }
body[data-theme="planets"] #footerwrap { color: #c8cce0; background: #1d1f2e none; border-top: 1px solid #8e95b3; }
body[data-theme="planets"] #footerwrap a, body[data-theme="planets"] #footerwrap .linklike { color: #c8cce0; }

body[data-theme="holidayvillage"] a:link, body[data-theme="holidayvillage"] a:visited, body[data-theme="holidayvillage"] .linklike { color: #1d5f9a; }
body[data-theme="holidayvillage"] #tabs { height: 24px; }
body[data-theme="holidayvillage"] .tab, body[data-theme="holidayvillage"] #addstuff { border-bottom: 1px solid #fff; }
body[data-theme="holidayvillage"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #fff; border-bottom: 0; }
body[data-theme="holidayvillage"] .unselectedtab { color: #1d4f73; background: #d6e9f5; border-color: #fff; border-bottom-width: 1px; }
body[data-theme="holidayvillage"] .unselectedtab:hover { background: #a9cbe3; }
body[data-theme="holidayvillage"] #tabs .tab-name { color: #262627; }
body[data-theme="holidayvillage"] #tabs .unselectedtab .tab-name { color: #1d4f73; }
body[data-theme="holidayvillage"] #tabs li.addtab a, body[data-theme="holidayvillage"] #addstuff, body[data-theme="holidayvillage"] #addstuff a { color: #fff; }
body[data-theme="holidayvillage"] .modtitle { color: #1d4f73; background: #dcecf7 none; border-color: #a9cbe3; }
body[data-theme="holidayvillage"] .modtitle a.mtlink, body[data-theme="holidayvillage"] .modtitle a.mtlink:visited { color: #1d4f73; }
body[data-theme="holidayvillage"] .modboxin { border-color: #cfe2ef; }
body[data-theme="holidayvillage"] .modbox.min .modtitle { border-bottom-color: #a9cbe3; }
body[data-theme="holidayvillage"] #footerwrap { color: #fff; background: #0f3a5c none; border-top: 1px solid #a9cbe3; }
body[data-theme="holidayvillage"] #footerwrap a, body[data-theme="holidayvillage"] #footerwrap .linklike { color: #fff; }

body[data-theme="autumn"] a:link, body[data-theme="autumn"] a:visited, body[data-theme="autumn"] .linklike { color: #8a4b14; }
body[data-theme="autumn"] #tabs { height: 24px; }
body[data-theme="autumn"] .tab, body[data-theme="autumn"] #addstuff { border-bottom: 1px solid #c9a77c; }
body[data-theme="autumn"] .selectedtab { height: 23px; color: #262627; background: #fff; border-color: #c9a77c; border-bottom: 0; }
body[data-theme="autumn"] .unselectedtab { color: #6b3d1d; background: #e9dfd0; border-color: #c9a77c; border-bottom-width: 1px; }
body[data-theme="autumn"] .unselectedtab:hover { background: #d2b48c; }
body[data-theme="autumn"] #tabs .tab-name { color: #262627; }
body[data-theme="autumn"] #tabs .unselectedtab .tab-name { color: #6b3d1d; }
body[data-theme="autumn"] #tabs li.addtab a, body[data-theme="autumn"] #addstuff, body[data-theme="autumn"] #addstuff a { color: #fff; }
body[data-theme="autumn"] .modtitle { color: #7a3f12; background: #f1e4cf none; border-color: #d2b48c; }
body[data-theme="autumn"] .modtitle a.mtlink, body[data-theme="autumn"] .modtitle a.mtlink:visited { color: #7a3f12; }
body[data-theme="autumn"] .modboxin { border-color: #eadcc6; }
body[data-theme="autumn"] .modbox.min .modtitle { border-bottom-color: #d2b48c; }
body[data-theme="autumn"] #footerwrap { color: #e8d9c4; background: #3b2533 none; border-top: 1px solid #c9a77c; }
body[data-theme="autumn"] #footerwrap a, body[data-theme="autumn"] #footerwrap .linklike { color: #e8d9c4; }

/* ============================================================ site pages */


.more-link { margin: 8px 0 0; text-align: right; font-size: 12px; zoom: 1; }
.last-updated { float: left; font-size: 11px; color: #676767; }
.blog-updated { margin: 6px 0 0; font-size: 11px; color: #676767; }
.post-edited { font-style: italic; }

/* inner page layouts: main column plus sidebar, one column, or two halves */
.page { padding: 0 0 10px; zoom: 1; }
.page-main { float: left; width: 65%; }
.page-side { float: right; width: 32.5%; }
.page-col { float: left; width: 48.8%; }
.page-col + .page-col { float: right; }
.page-side .modbox, .page-col .modbox { margin-bottom: 15px; }
.page .modboxin { padding: 10px 12px; font-size: 13px; }

/* blog */
.draft-tag { padding: 0 3px; background: #fff1a8; font-size: 11px; font-weight: normal; color: #000; }
.draft-note { padding: 3px 6px; background: #fff1a8; }
.filter-note { margin: 0 0 10px; padding: 3px 6px; background: #e5ecf9; }

.date-header { margin: 18px 0 6px; font-size: 11px; font-weight: bold; color: #676767; text-transform: uppercase; }
.entry { margin: 0 0 14px; }
.entry p { margin: 3px 0; }
.entry-title { margin: 0 0 3px; font-size: 16px; font-weight: normal; }
.entry-labels { font-size: 12px; color: #676767; }

.post-title { margin: 0 0 10px; font-size: 18px; }
.post-album { margin: 0 0 10px; }
.post-body { line-height: 1.45; word-wrap: break-word; }
.post-body img, .post-body video, .post-body iframe { max-width: 100%; height: auto; }
/* a post's own headings are a level down (src/content.js): # is an h2 */
.post-body h2 { font-size: 17px; }
.post-body h3 { font-size: 15px; }
.post-body h4 { font-size: 14px; }
.post-body blockquote { margin: 10px 0 10px 20px; color: #444; }
.post-body pre { padding: 6px; overflow: auto; background: #f5f5f5; border: 1px solid #ddd; }
.post-body code { font-family: "Courier New", monospace; }
.post-footer { margin: 16px 0 0; padding-top: 6px; border-top: 1px dotted #999; font-size: 11px; color: #676767; }
.blog-pager { margin: 14px 0 0; text-align: center; font-size: 12px; zoom: 1; }
.blog-pager .newer { float: left; }
.blog-pager .older { float: right; }
.hl { background: #ff6; }

/* "Poooonkis" page numbers */
.pager { margin: 18px auto 0; border-collapse: collapse; text-align: center; font-size: 13px; }
.pager td { padding: 0 1px; vertical-align: top; }
.pager span { font: 26px/1 Georgia, "Times New Roman", serif; color: #eeb211; }
.pager .pl-P span { color: #3369e8; }
.pager .pl-cur span { color: #d50f25; }
.pager .pl-end span { color: #009925; letter-spacing: -1px; }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }

/* blog sidebar */
.about-me, .profile { font-size: 12px; zoom: 1; }
.about-me:after, .profile:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.avatar { float: left; margin: 0 10px 4px 0; border: 1px solid #999; }
.side-list { margin: 0; padding: 0; list-style: none; line-height: 1.7; }
.archive, .archive ul { margin: 0; padding: 0 0 0 14px; list-style: none; }
.archive { padding-left: 0; }
.archive li { margin: 2px 0; }
.archive summary { cursor: pointer; }
.feed-badge { padding: 0 3px; font: bold 9px/12px Verdana, sans-serif; color: #fff; background: #f60; border: 1px solid; border-color: #ffc8a4 #7d3302 #3f1a01 #ff9a57; text-decoration: none; }
.feed-link { text-decoration: none; }

/* search results */
.results-bar { margin-bottom: 14px; padding: 3px 6px; text-align: right; background: #e5ecf9; border-top: 1px solid #3366cc; zoom: 1; }
.results-label { float: left; }
.results-bar span { font-size: 12px; }
.results { max-width: 640px; margin: 0; padding: 0 6px; list-style: none; }
.result { margin: 0 0 18px; }
.result h3 { margin: 0; font-size: 16px; font-weight: normal; }
.result-date { color: #676767; }
.result cite { font-style: normal; color: #008000; }
.result cite a { color: #7777cc; }
.no-results { padding: 0 6px; }
.search-page .modbox { max-width: 700px; }

.not-found { text-align: center; }
.not-found h1 { font-size: 18px; }

/* mystral: laid out like Google's own download pages of the time
   (Picasa, Google Earth): the name and a line about it, the screenshot and
   features on the left, a big download box on the right */
.mys-head { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid #c9d7f1; }
.mys-head h1 { margin: 0 0 4px; font: bold 24px arial, sans-serif; color: #222; }
.mys-tagline { margin-left: 6px; font-size: 15px; font-weight: normal; color: #676767; }
.mys-head p { margin: 0; font-size: 14px; }
.mys-shot { margin: 0 0 15px; text-align: center; }
.mys-shot img { max-width: 100%; height: auto; border: 1px solid #999; }
.mys-features { width: 100%; border-collapse: collapse; }
.mys-features td { width: 50%; padding: 4px 10px 8px 0; vertical-align: top; }
.mys-features h3 { margin: 0 0 2px; font-size: 13px; color: #222; }
.mys-features p { margin: 0; }
.mys-steps { margin: 4px 0 8px; padding-left: 22px; line-height: 1.6; }
.mys-download { margin: 0 0 15px; padding: 12px; text-align: center; background: #e5ecf9; border: 1px solid #7aa5d6; }
a.mys-button, a.mys-button:visited {
  display: block;
  padding: 9px 6px 8px;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  background: #3a7d24;
  border: 1px solid #2b5e1a;
  border-top-color: #5a9d44;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
a.mys-button:hover { color: #fff; background: #2f6b1c; }
.mys-button span { font-size: 11px; font-weight: normal; color: #def0d6; }
.mys-meta { margin: 8px 0 4px; font-size: 11px; color: #444; }
.mys-links { margin: 0; font-size: 11px; }
.mys-req { margin: 0; padding-left: 16px; }
.mys-req li { margin: 0 0 4px; }

/* site map */
.sitemap-list { margin: 0 0 6px; padding-left: 18px; line-height: 1.6; }
.sitemap-list ul { margin: 0; padding-left: 18px; }
.sitemap-year { margin: 6px 0 2px; font-size: 13px; }

/* legal & notices */
.legal .modboxin p, .legal .modboxin li { line-height: 1.45; }
.dmca-template { margin: 8px 0; padding: 6px 8px; overflow: auto; font: 12px "Courier New", monospace; background: #f5f5f5; border: 1px solid #ddd; white-space: pre-wrap; }

/* the suggestions under the search box (public/js/site.js), like Google
   Suggest's */
.suggest { position: absolute; z-index: 3000; background: #fff; border: 1px solid #000; font: 13px arial, sans-serif; text-align: left; }
.suggest table { width: 100%; border-collapse: collapse; }
.suggest td { padding: 1px 3px; cursor: default; white-space: nowrap; }
.suggest .s-text { overflow: hidden; }
.suggest .s-note { width: 1%; padding-left: 10px; text-align: right; font-size: 11px; color: #008000; }
.suggest tr.web td { border-top: 1px solid #ddd; color: #444; font-weight: normal; }
.suggest tr.on td { background: #36c; color: #fff; }
.suggest tr.on .s-note { color: #fff; }
.suggest .s-close { padding: 0 3px 1px; text-align: right; font-size: 11px; }
.suggest .s-close a { color: #00c; }

/* contact */
.details-table { width: 100%; border-collapse: collapse; }
.details-table td { padding: 3px 4px; border-bottom: 1px solid #eee; }
.details-table td { width: 45%; }
.what-i-do { margin: 0; }
.what-i-do dt { margin-top: 8px; font-weight: bold; }
.what-i-do dd { margin: 2px 0 0 14px; }

/* profile and presence: the status word in Google Talk's colours, then the
   status message, wrapped even where it has no spaces */
.presence { color: #676767; }
.presence.online { color: #090; }
.presence.idle { color: #d98000; }
.presence.dnd { color: #c00; }
.mood { margin: 8px 0 4px; font-style: italic; color: #676767; word-wrap: break-word; overflow-wrap: break-word; }
.mood-emoji { font-style: normal; vertical-align: middle; }
img.mood-emoji { vertical-align: -3px; }
.mood-more { font-style: normal; font-size: 11px; }

.entry-list, .tracks { margin: 0; padding-left: 18px; }
.entry-list li, .tracks li { margin: 3px 0; }
.list-head { margin: 8px 0 2px; }
.yt-tabs { margin: 0 0 8px; font-size: 12px; }


/* ================================================================== admin */
/* The admin is for the site owner in a current browser, so it can use
   modern CSS. */

.login-box { width: 330px; max-width: 100%; margin: 30px auto; padding: 12px 16px; background: #e8eefa; border: 1px solid #c3d9ff; }
.login-title { margin: 0 0 10px; text-align: center; }
/* the admin's password and an upload key, side by side */
.login-sides { margin: 0 auto; border-collapse: collapse; }
.login-side { padding: 0 12px; vertical-align: top; }
.login-side .login-box { margin: 30px 0; }
.login-side .hint { margin-top: 8px; text-align: center; }
.login-table td { padding: 3px; }
.error { color: #c00; font-weight: bold; }
.error-box { margin: 0 0 12px; padding: 6px 10px; background: #fdd; border: 1px solid #c00; }
.warnings { margin: 0 0 12px; padding: 6px 10px; background: #fff1a8; border: 1px solid #e3cf6b; font-size: 12px; }
.warnings ul { margin: 4px 0 0; }
.admin > .notice { margin: 0 auto 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th { padding: 4px 6px; text-align: left; background: #e5ecf9; border-bottom: 1px solid #c3d9ff; }
.admin-table td { padding: 4px 6px; vertical-align: top; border-bottom: 1px solid #eee; }
.nowrap { white-space: nowrap; }
.linklike.danger { color: #c00; }

.form-table { width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.form-table th { width: 110px; padding: 6px 8px 4px 0; text-align: right; vertical-align: top; white-space: nowrap; }
.form-table td { padding: 3px 0; }
.form-table input:not([type]), .form-table input[type="text"] { width: 100%; }
.form-table #slug { width: calc(100% - 48px); }
.form-table details label { display: inline-block; margin: 4px 12px 0 0; }
.hint { margin: 3px 0 0; font-size: 11px; color: #676767; }

.editor-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px; border-bottom: 1px solid #999; }
.editor-modes { display: flex; gap: 3px; }
.editor-modes .mode { padding: 3px 12px; font-size: 12px; color: #0000cc; background: #e5ecf9; border: 1px solid #999; border-bottom: 0; border-radius: 3px 3px 0 0; cursor: pointer; }
.editor-modes .mode.active { color: #000; font-weight: bold; background: #fff; margin-bottom: -1px; padding-bottom: 4px; }
.editor-toolbar { padding: 0 0 4px; }
.editor #body { display: block; width: 100%; min-height: 380px; resize: vertical; }
.editor #body.dropping { outline: 2px dashed #3366cc; }
.preview { min-height: 380px; padding: 10px; border: 1px solid #ccc; border-top: 0; }
.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.settings textarea, .settings #promoText { width: 100%; }
.settings fieldset { margin: 0 0 10px; }
.settings .modbox { margin-bottom: 15px; }
.settings .form-table th { width: 90px; }
.settings .form-table #aka { max-width: 360px; }
.age-out { margin-left: 10px; }
.avatar-pick { overflow: hidden; }
.avatar-pick > label { display: block; margin: 2px 0; }
.avatar-pick .indent { margin: 0 0 8px 22px; }
.avatar-pick #avatarUrl { width: 60%; min-width: 200px; }
.avatar-pick .off, .status-pick .off { opacity: .45; filter: alpha(opacity=45); }
.status-pick > label { display: block; margin: 2px 0; }
.status-pick .indent { margin: 0 0 8px 22px; }
.status-pick #statusMessage { width: 60%; min-width: 200px; }
.theme-preview { display: block; max-width: 100%; height: auto; margin-top: 4px; border: 1px solid #0027e3; }
.theme-table th { width: 90px; }
.contact-table input:not([type]), .contact-table textarea { display: block; width: 100%; margin-bottom: 4px; }
.contact-table .rows-table input:not([type]) { margin-bottom: 0; }
.rows-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rows-table th { padding: 3px 4px; text-align: left; font-weight: normal; color: #676767; }
.rows-table td { padding: 2px 4px 2px 0; }
.rows-table td input:not([type]) { width: 100%; }
.rows-table .row-tools { width: 1%; }
.rows-table .row-tools button { padding: 0 4px; }
.rows-table tr.removed input:not([type]) { text-decoration: line-through; opacity: .5; }
.settings-save { position: sticky; bottom: 0; margin: 0; padding: 8px 0; background: #fff; border-top: 1px solid #ddd; }

/* Files */
.files-table .privacy { white-space: nowrap; }
.file-delete { margin-top: 12px; }
.upload-form .keep-date input[type="time"] { width: 6em; }
.key-new { word-wrap: break-word; }
.key-secret { width: 100%; max-width: 620px; margin-top: 4px; font-family: monospace; }
.keys-table .privacy { white-space: nowrap; }
/* Delete buttons next to Edit links, on one line */
form.inline { display: inline; margin: 0; }