/* ChamberArt 2015 redesign — component styles copied verbatim from the archived
   site (capture 20150515), with small patches where an asset couldn't be pulled.
   Loaded last so it overrides the older 2011 rules. */

/* ---- Logo: Pictavera frame + wordmark (img/logo.svg, vector, colours from theme.css palette) ---- */
a.logo {
    display:inline-block; float:left;
    width:205px; height:76px; margin-top:10px;
    background:url("img/logo.a270edd75d4f.svg") no-repeat left center;
    background-size:contain;
}

/* ---- Breadcrumb + page bar ---- */
#breadcrumb {
    width:956px; height:37px; float:left;
    background:#000; border-bottom:2px solid #535353;
    border-right:2px solid #535353; border-left:2px solid #535353;
    box-sizing:border-box;
}
#breadcrumb span { float:left; height:37px; line-height:37px; margin-left:10px; }
#breadcrumb span a { color:#fff; font:bold 12px Verdana; text-decoration:none; }
#breadcrumb span a:hover { color:var(--c-text-hover); text-decoration:underline; }

#page_bar {
    width:956px; height:37px; float:left; background:#000;
    border:2px solid #535353; border-radius:0 0 4px 4px; box-sizing:border-box;
}
#page_bar span { float:left; font:bold 16px Verdana; color:#fff; margin:8px; }


/* ---- Horizontal A–Z alphabet row ---- */
#alphabet_holder {
    width:956px; float:left; background:#000; box-sizing:border-box;
    border:2px solid #535353; padding:15px 5px; margin-top:3px;
}
#alphabet_holder a {
    margin-right:2px; display:inline-block; padding:3px 8px;
    border:1px solid #595959; background-color:#292929; text-decoration:none;
    color:#fff; border-radius:4px; font:13px Tahoma;
}
#alphabet_holder a:hover { border-color:var(--c-line-hover); color:var(--c-text-hover); }
#alphabet_holder a.alphabet_current { border:1px solid var(--c-line); color:var(--c-text); }

/* ---- Content grid: framed thumbnails with hover roll-over ---- */
#content_holder {
    width:956px; float:left; background:#000; box-sizing:border-box;
    border:2px solid #535353; padding:15px 7px; margin-top:3px;
}
#content_holder .image {
    margin:0 12px 15px 0; float:left; position:relative;
    border:1px solid #535353; width:300px; height:250px;
    text-align:center; line-height:248px; background:#111;
}
#content_holder .image img {
    vertical-align:middle; position:relative; z-index:1;
    width:auto; max-width:296px; max-height:248px;
}
#content_holder .image .noimg { color:#8a7f72; line-height:1.4; display:inline-block;
    vertical-align:middle; padding:10px; }
span.roll {
    background:rgba(0,0,0,0.72); width:298px; height:248px;
    position:absolute; z-index:10; top:0; left:0; display:none;
    line-height:normal; padding-top:70px; box-sizing:border-box;
}
.image:hover span.roll { display:block; }
.author-n { font:bold 17px Tahoma; color:var(--c-text); margin-top:20px;
    width:298px; display:block; text-align:center; float:left; }
.author-p { font:bold 15px Tahoma; color:#fff; margin-top:10px;
    width:298px; display:block; text-align:center; float:left; }

/* ---- Archive: author button list (left) + paintings grid (right) ---- */
.archive_list { float:left; width:310px; text-align:left; }
.archive_list a {
    float:left; display:block; width:93%; padding:8px 0 8px 10px;
    border:1px solid #595959; text-decoration:none; color:#fff;
    background-color:#292929; font:12px Verdana; border-radius:4px; margin:4px;
}
.archive_list a:hover { border-color:var(--c-line-hover); color:var(--c-text-hover); text-decoration:underline; }
.ads { float:left; width:600px; margin-left:8px; }
.ads .image { width:280px; height:200px; line-height:198px; }
.ads .image img { max-width:276px; max-height:196px; }
.ads span.roll { width:278px; height:198px; }
.ads .author-n, .ads .author-p { width:278px; }

/* ---- 2015 layout fixes ---- */
#container { background:url("img/cont_bg2_clean.70fed564f779.gif") no-repeat; }
#logo_menu { height:96px; }
a.but { margin-top:8px; }
a.but span { margin-top:30px; }
#header { clear:both; position:relative; float:left; }
.image .noimg { font-size:12px; color:#6f6f7a; }

/* keep logo (205) + 6 nav buttons within the 950px column so the menu doesn't wrap */
#logo_menu { height:100px; overflow:visible; }
#menu { width:730px; margin-left:4px; margin-top:14px; }
a.but { width:118px; height:81px; background-size:118px 81px; margin-top:0; }
a.but span { width:118px; margin-top:34px; font-size:12px; }

/* ---- Painting (view) page — image frame (title/facts/story: painting.css) ---- */
#view_holder { width:956px; float:left; }
.view-image {
    width:956px; float:left; text-align:center; background:#000;
    border:2px solid #535353; box-sizing:border-box; padding:22px 10px; margin-top:3px;
}
.view-image img { max-width:900px; max-height:640px; border:3px solid #323232; }
.view-image .noimg-large { color:#8a7f72; display:inline-block; padding:60px; }

#view_comments {
    width:956px; float:left; background:#000; border:2px solid #535353;
    box-sizing:border-box; padding:14px; margin-top:3px; color:#dde;
}
#view_comments .vc-title { color:var(--c-text); font:bold 16px Georgia, serif;
    display:block; margin-bottom:8px; }
#view_comments .comment { padding:6px 0; border-bottom:1px solid #2c2723; }

/* ---- 7-button nav (HOME…RANDOM + MORE) fits the 950px column ---- */
#menu { width:742px; margin-left:2px; }
a.but { width:105px; height:81px; background-size:105px 81px; }
a.but span { width:105px; font-size:11px; }

/* final nav sizing: logo(200) + 7 buttons fit inside the 950 column */
a.logo { width:200px; margin-top:12px; }
#logo_menu { height:104px; }
#menu { width:744px; margin-left:2px; margin-top:16px; }
a.but { width:105px; height:81px; background-size:105px 81px; margin-left:1px; }
a.but span { width:105px; font-size:11px; margin-top:34px; }