source: trunk/themes/elegant/theme.css @ 22155

/* backgrounds */

html, body                                                                      { background-color: #111;}

#content, .content                                                      { background-color: #222;}
.content .titrePage                                                     { background-color: #111;}

#menubar, #the_page #menuSwitcher.menuhidden    { background-color: #222;}

#thePicturePage, #imageHeaderBar                        { background-color: #111;}
#imageInfos, #infoSwitcher.infohidden           { background-color: #333;}
#thePicturePage #comments                                       { background-color: #333;}
#pictureCommentList li                                          { background-color: #444;}

.calendarTitle                                                          { background-color: #222;}

.switchBox, .header_notes                                       { background-color: #555;}
.thumbnailCategory , .commentElement                    { background-color: #333;}
.message                                                                        { background-color: #666;}

INPUT[type="text"], INPUT[type="password"],
INPUT[type="button"], INPUT[type="submit"],
INPUT[type="reset"], INPUT[type="file"],
SELECT, TEXTAREA, OPTION                                                        { background-color: #555;}
INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #666;}


/* font colors */

body, legend                                                                    { color: #aaa;}
a                                                                                       { color: #ccc;}
a:hover                                                                                 { color: #fff;}
INPUT.rateButton                                                        { color: #fff;}
H1, H3, INPUT.rateButtonSelected                        { color: #ccc;}
.message                                                                        { color: #fff;}
.commentContent .comments_toggle:hover          { color: #fff;}
INPUT[type="text"], INPUT[type="password"],
INPUT[type="button"], INPUT[type="submit"],
INPUT[type="reset"], INPUT[type="file"],
SELECT, TEXTAREA                                                        { color: #ccc;}
INPUT:focus, SELECT:focus, TEXTAREA:focus       { color: #fff;}


/* borders */

#content,.content, .content .titrePage          { border-bottom: 2px solid #444;}
#imageHeaderBar                                                                 { border: solid 0 #444; border-bottom-width:2px;}
#copyright                                                                      { border-top-width:2px;}
#content .calendarTitleBar                                      { border-bottom: none;}
.calendarTitle                                                          { border-top: 2px solid #444;}
.switchBox                                                                      { border: 1px solid #000;}
.switchBoxTitle                                                                 { border-bottom: 1px solid #444;}
INPUT, SELECT, TEXTAREA                         { border: 1px solid #666;}
FIELDSET {border: 2px solid #444;}

/* form */
legend {font-style:normal;}
#qsearchInput {margin-left:-20px}

/* icons */ 

.pwg-icon                                                                       { background-image: url(icon/icons_sprite.png);}
A:hover .pwg-icon                                                       { background-image: url(icon/icons_sprite-hover.png);}


/* general rules */

body            { margin: 5px 0;}
a:hover                 { border-bottom: none;}
#copyright      { padding:0 4px 0 0; text-align:right;}


/* content */

#the_page  #content.menushown, #the_page > .content.menushown, .contentWithMenu         { margin-left: 240px;}
#the_page  #content.menuhidden, #the_page > .content.menuhidden                                         { margin-left: 35px;}
#the_page  #content, #the_page > .content                                                                                       { margin-right: 0;}

#content,.content                       { margin-bottom: 4px; padding-bottom: 4px;}
#thePicturePage #content        { padding-bottom: 0;}
.content .titrePage                     { padding:0; margin-bottom:4px;}
.content .titrePage H2          { line-height: 20px; padding: 8px 0 0 2px;}


/* menubar */

#menubar  {
        display: inline;
        width: 230px;
        float: left;
        margin: 28px 8px 10px 0;
        padding: 0;
}
#menubar DT                             { text-align: left;}
#menubar dd                             { padding: 0 0 1em 1em;}
#menubar .pwg-icon-filter { display: none;}

#quickconnect FIELDSET {
    margin: 0 10px 0 -10px;
    border: 2px solid #444444;
}

/* switchers */

#menuSwitcher {
        display: block;
        text-align: center;
        height: 32px;
        cursor: pointer;
        float: left;
        margin: 28px 0 0 -34px;
}


#imageInfos, #infoSwitcher.infohidden           { border-radius: 10px 0 0 10px;}
#menubar, #the_page #menuSwitcher.menuhidden    { border-radius: 0 10px 10px 0;}
#the_page #menuSwitcher.menuhidden                      { width: 25px; margin-left: 0;}

#infoSwitcher {
        display: block;
        text-align: center;
        height: 32px;
        cursor: pointer;
        position:absolute;
        left:75%;
        top:0;
        margin: 10px 0 0 7px;
        z-index:99;
}

#infoSwitcher.infohidden {
        width:25px;
        top:10px;
        right:0;
        left:auto;
        margin:0;
}

#slideshow #theImage                    { width: 100%; margin: auto; overflow: visible;}
#theImage.infohidden            { width: 100%;}

#commentsSwitcher                                       { float: left; margin: 2px 0; cursor:pointer;}
.noCommentContent #commentsSwitcher     { display: none;}

.switchArrow                            { width: 16px; height: 16px; margin: 8px 5px 8px 4px;}
.switchArrow                            { background: transparent url("icon/arrows_ccc.png");}
.switchArrow:hover                      { background: transparent url("icon/arrows_fff.png");}
.menuhidden .switchArrow                { background-position: 0 0;}
.menushown   .switchArrow               { background-position: -16px 0;}
.infohidden .switchArrow                { background-position: -16px 0;}
.infoshown   .switchArrow               { background-position: 0 0;}
.commentshidden .switchArrow    { background-position: -48px 0;}
.commentsshown   .switchArrow   { background-position: -32px 0;}


/* switchboxes */

.switchBox {
    border-radius: 4px 4px 4px 4px;
    padding: 0.5em 10px;
    text-align: left;
    z-index: 100;
}
.derivativeSizeDetails                          { display: none;}

/* thumbnails */

#thumbnails                                             { padding-top: 5px;}
.thumbnailCategory .illustration,
.commentElement .illustration           { margin: 2px; text-align: center;}


/* picture page */

.contentWithMenu #imageHeaderBar        { padding: 0;}
#imageHeaderBar                                                 { padding: 0 0 0 10px;}
#imageHeaderBar                                                 { width: auto;}
#imageHeaderBar h2                                      { font-size: 100%; font-weight: inherit;}
#imageHeaderBar .browsePath {
        display:inline-block;
        float:left;
        font-size:120%;
        line-height:20px;
        padding: 8px 0 0 2px;
        font-weight:bold;
        margin:0;
}
#imageToolBar .imageNumber                      { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;}
#imageToolBar                                           { margin-top: -28px; margin-bottom: 0; float: right;}
#thePicturePage .pwg-button                     { width: 26px;}
#thePicturePage .actionButtons          { margin-right: 26px;}

#theImageAndInfos {
        display: block;
        width: 100%;
        position: relative;
}
#theImage {
        display: inline-block;
        width: 75%;
        vertical-align: top;
        overflow: auto;
        padding: 10px 0 5px 0;
}

.rateButtonStarFull                                     { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;}
.rateButtonStarEmpty                            { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;}


/* image infos */

#imageInfos {
        display: inline-block;
        width: 24.5%;
        vertical-align: top;
        padding-top: 35px;
        padding-bottom: 5px;
        margin: 10px 0 10px 0.5%;
        word-wrap:break-word;
}

#imageInfos .navThumbs                          { width: 250px; height: 130px; margin: auto; padding: 0 5px;}
#imageInfos .navThumb                           { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;}
#imageInfos #linkPrev                           { float: left;}
#imageInfos #linkNext                           { float: right;} 
#imageInfos .thumbHover                                 { position: absolute; width: 100%; height: 100%;}
#imageInfos .prevThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
#imageInfos .prevThumbHover:hover       { background: transparent url(icon/img_prev.png) no-repeat center center;}
#imageInfos .nextThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
#imageInfos .nextThumbHover:hover       { background: transparent url(icon/img_next.png) no-repeat center center;}

#imageInfos dl.imageInfoTable           { display: block; padding: 0 15px; margin: 12px auto;}
#imageInfos .imageInfo                          { display: block; line-height: 16px;}
#imageInfos .imageInfo dt                               { display: block; font-weight: bold; text-align: left; padding: 0;}
#imageInfos .imageInfo dd                       { display: block; text-align: left; margin: 0 0 5px 20px;}
#imageInfos h3                                          { margin: 20px 0 10px;}


/* image comments */

#thePicturePage #comments                       { padding: 2px 5px;}
#thePicturePage #comments h3                    { margin: 10px 0;}
#thePicturePage #comments form          { margin: 10px 0;}
#thePicturePage #comments fieldset              { margin: 0 1em;}

.commentshidden #pictureComments                { display: none;}
.commentContent .comments_toggle        { cursor: pointer;}

#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;}
#commentAdd                                             { float: left; }
#pictureCommentList                                     { float: right; }

#commentAdd input[type="text"],
#commentAdd textarea {
        width: 95%;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 100%;
}

#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;}
#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}
#pictureComments h4                                     { margin: 0;}
#pictureComments form p                         { margin: 5px 0;}
#pictureComments form p textarea                { margin: 10px 0;}
#pictureComments INPUT                          { margin: 10px;}
#pictureComments INPUT[type=submit]     { margin: 0;}
.commentElement .description            { padding: 5px;} 


/* calendar */

.calendarViews          { margin-top: 4px;}

/* plugins */

#the_page .content .stuffs              { margin: 0!important}
.categoryActions .theme_menuf   { display: none;}