source: extensions/modus/css/base.css.tpl @ 25794

BODY {
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-family: Arial,Helvetica,sans-serif;
        min-width: 300px; /*responsive layout*/
        background-color: {$skin.BODY.backgroundColor};
        color: {$skin.BODY.color};
}

A {
        text-decoration:none;
        color: {$skin.A.color};
}

A:hover {
        text-decoration:underline;
        color: {$skin['A:hover'].color};
}

A .pwg-icon {
        opacity: 0.9;
}
A:hover .pwg-icon {
        opacity: 1;
}

IMG {
        border: 0; /*IE <= 9 adds border for linked images*/
}

H2 {
        margin: 0;
        padding: 2px 5px 3px 0;
        text-align: left;
        font-size: 20px;
        font-weight: normal;
}

BLOCKQUOTE {
        margin: 8px 10px; /*reduce default user agent margin too large for mobiles*/
}

INPUT, SELECT {
        margin: 0;
        font-size: 1em; /* <= some browsers don't set it correctly */
}

TABLE { /* horizontaly centered */
        margin-left: auto;
        margin-right: auto;
}


FORM { padding: 0; margin: 0; }


{if !empty($skin.controls)}
INPUT[type="text"], INPUT[type="password"], SELECT, TEXTAREA
{if empty($skin.buttons)}
,INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"]
{/if}
{
{if !empty($skin.controls.backgroundColor)}
        background-color: {$skin.controls.backgroundColor};
{/if}
{if !empty($skin.controls.gradient)}
        {$skin.controls.gradient|cssGradient};
{/if}
{if !empty($skin.controls.color)}
        color: {$skin.controls.color};
{/if}
{if !empty($skin.controls.border)}
        border: {$skin.controls.border};
{/if}
}
{/if}

{if !empty($skin['controls:focus'])}
INPUT:focus, TEXTAREA:focus {
{if !empty($skin['controls:focus'].backgroundColor)}
        background-color: {$skin['controls:focus'].backgroundColor};
{/if}
{if !empty($skin['controls:focus'].color)}
        color: {$skin['controls:focus'].color};
{/if}
{if !empty($skin['controls:focus'].boxShadow)}
        box-shadow: {$skin['controls:focus'].boxShadow};
{/if}
}
{/if}


{if !empty($skin.buttons)}
INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"] {
{if !empty($skin.buttons.backgroundColor)}
        background-color: {$skin.buttons.backgroundColor};
{/if}
{if !empty($skin.buttons.gradient)}
        {$skin.buttons.gradient|cssGradient};
{/if}
{if !empty($skin.buttons.color)}
        color: {$skin.buttons.color};
{/if}
{if !empty($skin.buttons.border)}
        border: {$skin.buttons.border};
{/if}
}
{/if}

{if !empty($skin.buttonsHover)}
INPUT[type="button"]:hover, INPUT[type="submit"]:hover, INPUT[type="reset"]:hover {
{if !empty($skin.buttonsHover.backgroundColor)}
        background-color: {$skin.buttonsHover.backgroundColor};
{/if}
{if !empty($skin.buttonsHover.gradient)}
        {$skin.buttonsHover.gradient|cssGradient};
{/if}
{if !empty($skin.buttonsHover.color)}
        color: {$skin.buttonsHover.color};
{/if}
{if !empty($skin.buttonsHover.boxShadow)}
        box-shadow: {$skin.buttonsHover.boxShadow};
{/if}
{if !empty($skin.buttonsHover.border)}
        border: {$skin.buttonsHover.border};
{/if}
}
{/if}

FIELDSET {
        padding: 1em;
        margin: 1em 0.5em;
        overflow: hidden; /* <- makes Opera happy */
        border: 1px solid gray;
}

LEGEND {
        font-style: italic;
        color: inherit; /*for IE*/
}


/**
 * Content
 */

.titrePage {
        padding: 3px 10px;
        line-height: 24px;
{if !empty($skin.pageTitle.backgroundColor)}
        background-color: {$skin.pageTitle.backgroundColor};
{/if}
{if !empty($skin.pageTitle.gradient)}
        {$skin.pageTitle.gradient|cssGradient}
{/if}
{if !empty($skin.pageTitle.color)}
        color: {$skin.pageTitle.color};
{/if}
}

{if !empty($skin.pageTitle.link.color)}
.titrePage A {
        color: {$skin.pageTitle.link.color};
}
{/if}

{if !empty($skin.pageTitle.linkHover.color)}
.titrePage A:hover {
        color: {$skin.pageTitle.linkHover.color};
}
{/if}

/* now revert text colors to dropdowns*/
{if !empty($skin.pageTitle.color)}
.titrePage .switchBox {
        color: {$skin.BODY.color};
}
{/if}
{if !empty($skin.pageTitle.link.color)}
.titrePage .switchBox A {
        color: {$skin.A.color};
}
{/if}

{if !empty($skin.pageTitle.linkHover.color)}
.titrePage .switchBox A:hover {
        color: {$skin['A:hover'].color|default:$skin.A.color};
}
{/if}

{if !empty($skin.pageTitle.textShadowColor)}
.titrePage H2 A, #imageHeaderBar H2{
        text-shadow: 1px 1px 3px {$skin.pageTitle.textShadowColor};
}
{/if}

.content .navigationBar, .content .additional_info, .content .calendarBar {
        margin: 8px 4px;
        text-align: center;
}

.content .pageNumberSelected {
        font-style: italic;
        font-weight: bold;
}

.content .additional_info {
        font-size: 110%;
}

.content .notification {
  padding:0 25px;
}

/* category and tag results paragraphs on a quick search */
.category_search_results, .tag_search_results {
  font-size: 16px;
  margin: 10px 16px;
}

/* actions */
.categoryActions {
        margin: 0 2px;
        width: auto;
        padding: 0;
        text-indent: 0;
        list-style: none;
        text-align: center;
        float: right;
}

.categoryActions LI {
        display: inline;
}

.switchBox {
        display: none;
        position: absolute;
        left: 0; top: 0; /*left, right set through js*/
        padding: 0.5em;
        z-index: 100;
        text-align:left;
        box-shadow: 2px 2px 5px gray;
        background-color: {$skin.dropdowns.backgroundColor};
}

.switchBoxTitle {
  border-bottom:1px solid gray;
  padding-bottom:5px;
  margin-bottom:5px;
}

#copyright {
        clear: both;
        font-size: 83%;
        text-align: center;
        margin: 0 0 10px 0;
}

A.wiki { cursor:help; }

/* Loader gif new in 2.5 */
.loader {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
}

/* User comments */
#comments {
        padding-left: 5px;
        padding-right: 5px;
        clear: both; /*the main image and info table might float on picture page for large screens*/
}

.commentsList {
        margin: 5px;
        padding: 0;
        list-style: none;
}

.commentElement {
        border-radius: 5px;
        margin: 5px 0;
        padding: 2px 0 0 2px;
        width: 100%;
{if !empty($skin.comment.backgroundColor)}
        background-color: {$skin.comment.backgroundColor};
{/if}
}

.commentElement .description {
        overflow: auto;
        /*width: inherit;*/
}

#comments input[type="text"],
#comments TEXTAREA {
        max-width: 100%;
        width: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.commentAuthor {
        font-weight: bold;
}

.commentDate {
        font-style: italic
}

#comments FORM P         {
        margin: 5px 0;
}


/**
 * Filter forms are displayed label by label with the input (or select...)
 * below the label. Use an UL to make a group (radiobox for instance).
 * Use a SPAN to group objects in line
 */

.filter UL,
.filter FIELDSET>LABEL {
        display: block;
        float: left;
        margin-right: 1em;
        padding: 0;
}

.filter LI {
        list-style: none;
        margin-bottom: 0.5em;
}

/*IE6 needs override because of > selector*/
.filter FIELDSET>LABEL>INPUT,
.filter FIELDSET>LABEL>SELECT {
        display: block;
        margin: 0.5em 0;
}


.properties UL {
        list-style: none;
        margin: 0;
        padding: 0;
}

.properties LI {
        margin-bottom: 0.5em;
        padding: 0;
        line-height: 1.8em;
        clear: left;
}

.properties SPAN.property {
        font-weight: bold;
        float: left;
        width: 50%;
        text-align: right;
        margin: 0;
        padding: 0 0.5em 0 0;
}

.properties P, .filter P {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
}

.tagSelection {
        margin: 1em 0 !important;
}

.tagSelection LI {
        display: inline-block;
        width: 150px;
        max-width: 49%;
        overflow: hidden;
        white-space: nowrap;
}




/* jQuery datepicker */
/*IMG.ui-datepicker-trigger {
        cursor : pointer;
}*/


/**
 * Default colors
 */

 /* So that non-links are slightly greyed out */
.content .navigationBar, SPAN.calItem, TD.calDayCellEmpty {
        color: gray;
}


.errors { /* Errors display */
        color: red;
        font-weight: bold;
        margin: 5px;
        border: 1px solid red;
        background: #ffe1e1 url(../../default/icon/errors.png) no-repeat center right;
        padding: 10px 50px 10px 10px;
}

/* Informations box */
.infos {
        color: #002000;
        background: #98fb98 url(../../default/icon/infos.png) no-repeat center right;
        margin: 5px;
        padding: 10px 50px 10px 10px;
}

/* Header message like upgrade*/
.header_msgs {
        text-align:center;
        font-weight: bold;
        color:#696969;  /* dimgray */
        background-color: #d3d3d3;
        margin: 1px;
        padding: 1px;
}

.message {
  color:white;
  background-color:#666;
  margin-bottom:1em;
  padding: 12px;
  border-radius: 3px;
}

/* image comments rules */

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

#pictureCommentList { 
        float: right;
        width: 50%;
}

/*#pictureCommentList .commentsOrder    { float: left; margin-bottom: 5px;}
#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}*/
#pictureComments h4                                     { margin: 0;}



@media screen and (max-width:480px) {
        SELECT,INPUT { /*controls in fieldset should not trigger "scroll"*/
                max-width: 270px;
        }
}


#albumActionsSwitcher {
        display: none;
}

@media screen and (max-width:640px) {
        #albumActionsSwitcher {
                display: block;
                width: 42px;
                padding-top: 2px;
                text-align: right;
                float: right;
        }

        #albumActionsSwitcher + .categoryActions {
                display: none;
                position: absolute;
                z-index: 1;
                background-color: {$skin.dropdowns.backgroundColor};
                padding: 10px 5px 5px;
                box-shadow: 2px 2px 5px gray;
                opacity: 0.95;
                text-align: left;
                min-width: 180px;
        }
        
        #albumActionsSwitcher + .categoryActions LI{
                display: block;
        }
        
        #albumActionsSwitcher + .categoryActions .pwg-button{
                display: block;
        }
        
        #albumActionsSwitcher + .categoryActions .pwg-button-text{
                display: inline;
                margin-left: 5px;
                text-transform: capitalize;
        }
}