@import url(default.css);

/* -----------------------*/
/* gallery thumbnail view */
/* -----------------------*/
#gallery #sidebar {float: right; margin: 1em 0 0; padding: 0; width: 180px;}

#gallery #thumbnails {margin: 1em 0 0; padding: 0; float: left; width: 650px;}
#gallery .thumbnailbox {margin: 0 5px 10px 5px; padding: 0; float: left; width: 14em;
    background: #EEE url(img/thumbnailbox_r.gif) 100% 100% no-repeat;}
#gallery .thumbnailbox:hover {background-color: #E6E6E6;}

#gallery .thumbnailbox dl {background: url(img/thumbnailbox_l.gif) 0 0 no-repeat; text-align: center;}
#gallery .thumbnailbox dt, #gallery .thumbnailbox dd {display: block; margin: 0; padding: 0 6px 0.2em;
    text-align: center; overflow: hidden; white-space: nowrap;}
#gallery .thumbnailbox dt {font-weight: bold; margin-left: 6px; padding: 6px 6px 0 0;
    background: url(img/thumbnailbox_r.gif) 100% 0 no-repeat;}
#gallery .thumbnailbox dd {font-size: 0.8em;}
#gallery .thumbnailbox dd.year, #gallery .thumbnailbox dd.select {display: inline; padding: 0.2em;}
#gallery .thumbnailbox dd.resizebox {display: block; height: 13em; width: 13em; margin: 0 auto 5px; padding: 0;
    text-align: center; line-height: 13em; vertical-align: middle;}
#gallery .thumbnailbox dd.album {padding-bottom: 6px; background: url(img/thumbnailbox_l.gif) 0 100% no-repeat;}
#gallery .selected, #gallery .selected:hover {background-color: #FFE;}

#gallery .small dt {font-weight: normal;}
#gallery .small dd.year, #gallery .small dd.select {display: none;}
#gallery .small dd.album {height: 6px; padding: 0 0 6px 60px; width: 0px; height: 0px;}

/* filter */
#gallery .filter .buttons {display: block; margin:0.5em 0 0 4.5em;}

#gallery .filter select optgroup {color: #999;}
#gallery .filter select optgroup option {color: #000;}

/* navigation */
#gallery #thumbnails .navbottom {clear: both;}
#gallery .navigation h2 {color: #543;}

/* gallery sidebar */
#gallery #lastviewed, #gallery #tools, #gallery #tags {padding: 0; font-size: 0.9em;
    background: url(img/sbox_m.gif) 0 0 repeat-y;}
#gallery #tags {margin: 1em 0;}
#gallery #sidebar span, #gallery #tags div {display: block; padding: 1em 12px 0 8px;}
#gallery #sidebar h3 {padding-top: 6px; background: url(img/sbox_t.gif) no-repeat;}
#gallery #tools span.select {background: url(img/sbox_b.gif) 0 100% no-repeat; padding-bottom: 10px;}
#gallery #tools span span, #gallery #sidebar h3 span {display: inline;}
#gallery #tools .button {display: block; width: 160px; margin-bottom: 0.3em;}
#gallery #tags a:hover {color: #F60; background-color: #DDD;}
#gallery #tags .tagsbottom {padding: 0; height: 10px; background: url(img/sbox_b.gif) 0 100% no-repeat;}


/* ---------------------*/
/* gallery details view */
/* ---------------------*/
#gallery ol, #gallery ul {list-style-type: none; margin: 0; padding: 0;}
#gallery #mediabox h2 {margin: 0; padding-bottom: 0.5em; text-align: center;}
#gallery #mediabox {padding: 0 1em 2em; background: #000 url(img/headerbox.gif) 50% 0 no-repeat; text-align: center;}

/* image infos, tags */
#gallery #properties {float: left; width: 30%;}
#gallery #properties h3 {margin: 1em 0 0.3em; clear: both;}
#gallery #properties ul {list-style-type: none; padding-left: 1em;}
#gallery #properties li {list-style-type: none; margin: 0; padding: 0;}
#gallery #properties li span {margin: 0; padding: 0;}
#gallery #properties .tags li {float: none; white-space: nowrap;}
#gallery #properties .tags a {margin: 0;}
#gallery #properties .functions li {float: none; margin-bottom: 0.5em;}
#gallery #properties .functions .info {margin-right: 1em;}

#gallery #tags h4.mostfrequent {margin: 0 0 0.3em;}
#gallery #tags a.weight1 {font-size: 80%;}
#gallery #tags a.weight2 {font-size: 85%;}
#gallery #tags a.weight3 {font-size: 90%;}
#gallery #tags a.weight4 {font-size: 95%;}
#gallery #tags a.weight5 {font-size: 100%;}
#gallery #tags a.weight6 {font-size: 110%;}
#gallery #tags a.weight7 {font-size: 120%;}
#gallery #tags a.weight8 {font-size: 130%;}
#gallery #tags a.weight9 {font-size: 140%;}
#gallery #tags a.weight10 {font-size: 150%;}
#gallery #tags a.alltags {display: block; margin-top: 0.5em;}

/* comments */
#gallery #comments {float: right; width: 68%; margin-top: 1.5em; padding-left: 1em; border-left: 1px solid #CCC;}
#gallery #comments h3 {display: block; float: none; margin: 0 0 0.3em;}
#gallery #comments h3.comments {margin-top: 1.8em;}
#gallery #comments dl {background-color: #F0F0F0; margin-bottom: 1em;}
#gallery #comments .infos {background: #000 url(img/headerbox.gif) 50% 0 no-repeat; width: 3.4em; float: left;}
#gallery #comments .infos li {display: block; text-align: center; width: 2em;}
#gallery #comments .infos li.number {margin: 0 0 0.25em; width: 100%;
    color: #F90; font: normal 1.5em/1.4em "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; vertical-align: middle;}
#gallery #comments dd.name {color: #F90; font-size: 1.25em; font-family: "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 3px 0 0.33em 3.36em; border-top: 0px solid #666;}
#gallery #comments .infos li.daymonth, #gallery #comments .infos li.year {color: #444; font-size: 0.8em; text-align: center; width: 100%;}
#gallery #comments .infos li.year {padding-bottom: 0.5em;}
#gallery #comments .textbox {width: 100%; height: 5em; display: block; margin-bottom: 1em;}
#gallery dd.comment, #gallery dd.edit {padding: 0 0.5em 1em 1em; border-left: 3.4em solid #000; margin-bottom: 0;}
#gallery #comments .ratingdetails {color: #999; font-size: 0.8em; margin-left: 1em;}

/* back links */
#gallery .navbottom {clear: both; margin-top: 2em;}

/* ecard */
#gallery .ecard h3 {margin-bottom: 1em;}
#gallery .ecard .image {float: left;}
#gallery .ecard .data {margin-left: 22em;}
#gallery .ecard .imagecontainer {height: 20em; width: 20em; text-align: center;}
#gallery .ecard dd, #gallery .ecard dt {margin-bottom: 1em;}
#gallery .ecard dd label, #gallery .ecard dt label {display: block; /*float: left; width: 8em;*/}
#gallery .ecard .card {float: left; border: 1px solid #999; padding: 1em; width: 40em;}
#gallery .ecard .card .title {font-size: 1.2em; font-weight: bold;}
#gallery .ecard .card .imagecontainer {height: 20em; width: 20em; text-align: left; margin-top: 1em;}
#gallery .ecard .card img {float: left;}
#gallery .ecard .card .message {margin-top: 1em;}
#gallery .ecard .addresses {clear: both; display: block;}
#gallery .ecard .addresses span {display: block;}
#gallery .ecard div.commands {margin-top: 1em;}
#gallery .ecard p {clear: both;}