/* General settings: */
body {
  background: #333; color: Ivory;
  font-family: 'Josefin Sans', sans-serif;
  font-size:  16pt;
}
a:link, a:visited { color: Gainsboro; }
a:active, a:hover, a:focus { color: PaleTurquoise; }
table { border: none; border-collapse: collapse; }
img   { border-style: none; }

/* Page Structure */
#topbar  { padding: 0; width: 100%; clear: both; }
#leftbar { margin: 0; padding: 0; position: absolute; left: 0; width: 10em; height: 100%;
           font-family: 'Baumans', cursive; font-size: 14pt;}
#content { margin: 0; padding: 0; position: absolute; left: 11em; width: auto; }

/* Topbar styles: */
h1 { margin: 2px 1em; font-weight: normal; font-size: 22pt; font-variant: small-caps; letter-spacing: 0.4em; }
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover, h1 a:focus { color: inherit; text-decoration: none; }
#topbar hr { margin: 2px 0 10px; }

div.social { float: right; clear: none; width: 64px; }

/* Leftbar styles: */
#leftbar li { margin: 0.1em; padding: 0; color: Gainsboro; }
#leftbar ul { margin: 0 0 0.75em 0.75em; padding: 0; list-style-type: none; }
.staff_only { color: Red; }
.staff_only a:link, .staff_only a:visited { color: Tan; }
.staff_only a:active, .staff_only a:hover, .staff_only a:focus { color: HotPink; }

/* Bread crumbs at the top of content div: */

.breadcrumbs    { font-family: 'Droid Sans', sans-serif; font-size: smaller; }
div.breadcrumbs { display: block; width: 100%; text-align: left; padding: 4px 32px; }
.breadcrumbs a { color: PaleTurquoise; text-decoration: none; }

/* Prev, next links on gal_image page */
div.gal_link {margin: 0; padding: 0; position: absolute; background-repeat: no-repeat; background-position: center center;
  top:    32px;
  width:  32px;
  height: 633px;
}

div.prev_img       { left: 0; background-image: url('img/ArrowGL_56.png'); }
div.prev_img:hover { background-image: url('img/ArrowBL_56.png') }

div.next_img       { background-image: url('img/ArrowGR_56.png'); }
div.next_img:hover { background-image: url('img/ArrowBR_56.png') }
div.next_img.gal   { left: 1056px; }
div.next_img.sonn  { left: 1120px; }

/* Bookpage on gal_image page */
div.page {
  position: absolute;
  margin: 0;
  background: Gainsboro;
  color: Black;
  font-size: 1em;
  left: 32px;
  top: 32px;
  padding:24px;
}

/* Bookpage for a normal gal: */
div.page.gal {
  width:  976px;
  height: 585px;
}

/* Bookpage for a snonnet: */
div.page.sonn {
  width: 1040px;
  height: auto;
}

table.page { margin: 0; table-layout: fixed; width: 100%; }
td.legend  { vertical-align: bottom; white-space: pre-wrap; }
td.sonnet  { vertical-align: top; padding-left: 0px; font-family: 'Neuton', serif; font-size: 16pt;}
td.sonnet.txt{ white-space: pre-wrap; }
td.story   { vertical-align: top; padding: 8px 16px;
             font-size: smaller; font-weight: 300;}
td.picture { vertical-align: top; }
.page a:link,   .page a:visited { color: Navy; }
.page a:active, .page a:hover, .page a:focus { color: Blue; }
p.sonn-sign { text-align: right; font-style: italic; margin-right: 2em; }

div.tag {
  position: absolute;
  margin: 0;
  background: Gainsboro;
  color: Black;
  font-size: 1em;
  left: 32px;
  top:  675px;
  width: 1004px;
  padding:3px 10px;
}

td.legend.img_left { padding-left: 24px }
td.legend.img_top  { padding-top: 16px }

.tag a:link,   .tag a:visited { color: Navy; }
.tag a:active, .tag a:hover, .tag a:focus { color: Blue; }

/* Price lists */

#content.shop { background: #F0F0F0; color: Black; padding: 0 1em 1em; }

/* All tables */
.shop td.icon { padding: 0; vertical-align: middle }
.shop td.txt  { padding: 0 1em; vertical-align: middle; }
.shop table a { font-size: smaller; }
.shop a:link,   .shop a:visited { color: #191970; }
.shop a:active, .shop a:hover, .shop a:focus { color: Blue; }

/* Main table */
.shop table.main  { background-color: #E7E7E7; }

.shop tr.main:hover, .shop tr.main:active, .shop tr.main.big {
  border-color: #8FA3B8;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-style: solid none;
}

.shop div.pic  { position: relative; width: 528px; }
.shop thead tr { background-color: #DCDCDC; }
.shop th { padding: 0.5em 1em; vertical-align: top; }
.shop th.header { cursor: pointer; background-repeat: no-repeat; background-position: center right;
                  background-image: url('img/sort_updown_135.png') }
.shop th.headerSortUp   { background-image: url('img/sort_up_135.png'); }
.shop th.headerSortDown { background-image: url('img/sort_down_135.png'); }

.shop tr.odd>td.zebra { background-color: #F0F0F0; }
.shop td.price { text-align: right }

/* More or less buttons */
.shop div.btn {
  visibility: hidden;
  position: absolute; right: 0; top: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  float: right;
  background-repeat: no-repeat;
  background-position: center center;
  width:  29px;
  height: 31px;
  border-color: #8FA3B8;
  border-width: 1px;
  border-style: none solid solid;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius:  5px;
  opacity: 0.55;
}

.shop div.btn.more { background-image: url('img/chevron_down_149.png'); }
.shop div.btn.less { background-image: url('img/chevron_up_149.png'); }
.shop tr.main:hover div.btn, .shop tr.main:active div.btn { visibility: visible }

/* Small tables */
.shop table.small td { margin: 0; background-color: transparent; }
.shop table.small td.txt { width: 100% }

/* Big tables */
.shop td.txt-left { padding: 0.5em; vertical-align: bottom; width: 100% }
.shop td.img-left { padding: 0.5em 0 }
.shop td.txt-top  { padding: 0.5em }
.shop td.img-top  { padding: 0.5em 0 0 }

/* Plain text pages */
div.textpage {
  width:  1024px;
  margin: 24px 0px;
}
.textpage img.right { float: right; margin: 0 0 0 0.75em; }
.textpage img.left  { float: left;  margin: 0 0.75em 0 0; }

/* Thumbnail tables */
td.gal_name  { vertical-align: top; padding-right: 1em; font-size: 1.4em; font-weight: bold; }
td.thumb  { padding: 0; }
td.icon_holder { padding-right: 0.5em; }

div.thumb {
  position: relative;
  width:  192px;
  height: 192px;
  padding:0px;
}
div.icon {
  position: relative;
  width:  80px;
  height: 80px;
}

.click { cursor: pointer; }