/** * Gallery 3 Browny Wind Theme Screen Styles * * @requires YUI reset, font, grids CSS * * Sheet organization: * 0) Pre Overrides * 1) Font sizes, base HTML elements * 2) Reusable content blocks * 3) Page layout containers * 4) Content blocks in specific layout containers * 5) States and interactions * 6) Positioning and order * 7) Navigation and menus * 8) jQuery and jQuery UI * 9) More Browny */ /** ******************************************************************* * 0) Pre Overrides **********************************************************************/ /* ThemeRoller overrides ~~~~~~~~~~~~~~ */ @import "themeroller/ui.tabs.css"; /** ******************************************************************* * 1) Font sizes, base HTML elements **********************************************************************/ /* ~browny~ */ body, html { background-color: #5a3007; font-family: 'Century gothic', Verdana, 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } .ui-widget { font-family: 'Century gothic', Verdana, 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: 'Century gothic', Verdana, 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } #g-user-profile #g-comment-detail .g-author { font-family: Cursive, Serif; } select, input, button, textarea { font: 99% 'Century gothic', Verdana, Arial, Helvetica, Clean, sans-serif; } p { margin-bottom: 1em; text-shadow: 0px 1px 1px #F7F5F0; } em { font-style: oblique; } h1, h2, h3, h4, h5, strong, th { font-weight: bold; text-shadow: 1px 1px 0px #fff; } h1 { font-size: 1.7em; } #g-dialog h1 { font-size: 1.1em; } h2 { font-size: 1.4em; } #g-sidebar .g-block h2 { font-size: 1.2em; } #g-sidebar .g-block li { margin-bottom: .6em; } #g-content, #g-site-menu, h3 { font-size: 1.2em; } #g-sidebar, .g-breadcrumbs { font-size: .9em; } #g-banner, #g-footer, .g-message { font-size: .8em; } #g-footer h3 { text-shadow: 1px 1px 1px #F7F5F0; } #g-album-grid .g-item, #g-item #g-photo, #g-item #g-movie { font-size: .7em; } #l10n-client h2 { text-shadow: none; } /* Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~browny~ */ a, .g-menu a, #g-dialog a, .g-button, .g-button:hover, .g-button:active, a.ui-state-hover, input.ui-state-hover, button.ui-state-hover { color: #7f5429 !important; cursor: pointer !important; text-decoration: none; -moz-outline-style: none; } a:hover, #g-dialog a:hover { text-decoration: underline; } .g-menu a:hover { text-decoration: none; } #g-dialog #g-action-status li { width: 400px; white-space: normal; padding-left: 32px; } /* Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ ul.g-text li, .g-text ul li { list-style-type: disc; } ol.g-text li, .g-text ol li { list-style-type: decimal; } .g-text li, .g-text li { margin-left: 1em; } /* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form { margin: 0; } fieldset { border: 1px solid #ccc; padding: 0 1em .8em 1em; } #g-banner fieldset, #g-sidebar fieldset { border: none; padding: 0; } legend { font-weight: bold; margin: 0; padding: 0 .2em; } #g-banner legend, #g-sidebar legend, input[type="hidden"] { display: none; } input.textbox, input[type="text"], input[type="password"], textarea { border: 1px solid #e8e8e8; border-top-color: #ccc; border-left-color: #ccc; clear: both; color: #333; width: 50%; } textarea { height: 12em; width: 97%; } input:focus, input.textbox:focus, input[type=text]:focus, textarea:focus, option:focus { background-color: #ffc; color: #000; } input.checkbox, input[type=checkbox], input.radio, input[type=radio] { float: left; margin-right: .4em; } /* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form li { margin: 0; padding: 0 0 .2em 0; } form ul { margin-top: 0; } form ul ul { clear: both; } form ul ul li { float: left; } input, select, textarea { display: block; clear: both; padding: .2em; } input[type="submit"], input[type="reset"] { display: inline; clear: none; float: left; } /* Forms in dialogs and panels ~~~~~~~~~ */ #g-dialog ul li { padding-bottom: .8em; } #g-dialog fieldset, #g-panel fieldset { border: none; padding: 0; } #g-panel legend { display: none; } input[readonly] { background-color: #F4F4FC; } #g-dialog input.textbox, #g-dialog input[type=text], #g-dialog input[type=password], #g-dialog textarea { width: 97%; } /* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */ .g-short-form legend, .g-short-form label { display: none; } .g-short-form fieldset { border: none; padding: 0; } .g-short-form li { float: left; margin: 0 !important; padding: .4em 0; } .g-short-form .textbox, .g-short-form input[type=text] { color: #666; padding: .3em .6em; width: 100%; } .g-short-form .textbox.g-error { border: 1px solid #f00; color: #f00; padding-left: 24px; } .g-short-form .g-cancel { display: block; margin: .3em .8em; } #g-sidebar .g-short-form li { padding-left: 0; padding-right: 0; } /* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ table { width: 100%; } #g-content table { margin: 1em 0; } caption, th { text-align: left; } /* ~browny~ */ th, td { border: none; border-bottom: 1px solid #f6f3ef; padding: .5em; } td { vertical-align: top; } /* Text ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-text-small { font-size: .8em; } .g-text-big { font-size: 1.2em; } .g-text-right { text-align: right; } /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ /* ~browny~ */ .g-block h2 { background-color: #EDE4D5; padding: .3em .8em; } .g-block-content { margin-top: 1em; } /*** ****************************************************************** * 3) Page layout containers *********************************************************************/ /* Dimension and scale ~~~~~~~~~~~~~~~~~~~ */ .g-one-quarter { width: 25%; } .g-one-third { width: 33%; } .g-one-half { width: 50%; } .g-two-thirds { width: 66%; } .g-three-quarters { width: 75%; } .g-whole { width: 100%; } /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-view { background-color: #fff; border: 1px solid #ccc; border-bottom: none; } /* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */ /* ~browny~ */ #g-header { margin-bottom: 2em; } /* ~browny~ */ #g-banner { background-color: #EDE4D5; border-bottom: 1px solid #ccc; min-height: 9em; padding: .5em 20px; position: relative; } #g-content { padding-left: 20px; position: relative; width: 696px; } #g-sidebar { padding: 0 20px; width: 220px; } /* ~browny~ */ #g-footer { background-color: #EDE4D5; border-top: 1px solid #ccc; margin-top: 20px; padding: 10px 20px; } /** ******************************************************************* * 4) Content blocks in specific layout containers *********************************************************************/ /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~browny~ */ #g-banner #g-quick-search-form { clear: right; float: right; margin-top: 1.15em; } #g-banner #g-quick-search-form input[type='text'] { width: 17em; } #g-content .g-block h2 { background-color: transparent; padding-left: 0; } /* Sidebar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-sidebar .g-block-content { padding-left: 1em; } #g-sidebar #g-image-block { overflow: hidden; } /* Album content ~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-content #g-album-grid { margin: 1em 0; position: relative; z-index: 1; } #g-content #g-album-grid .g-item { background-color: #fff; border: 1px solid #fff; float: left; padding: .6em 8px; position: relative; text-align: center; width: 213px; z-index: 1; } #g-content #g-album-grid .g-item h2 { margin: 5px 0; } #g-content .g-photo h2, #g-content .g-item .g-metadata { display: none; margin-bottom: .6em; } /* ~browny~ */ #g-content #g-album-grid .g-album { background-color: #EDE4D5; } #g-content #g-album-grid .g-album h2 span.g-album { background: transparent url('../images/ico-album.png') no-repeat top left; display: inline-block; height: 16px; margin-right: 5px; width: 16px; } #g-content #g-album-grid .g-hover-item { border: 1px solid #000; position: absolute !important; z-index: 1000 !important; } #g-content .g-hover-item h2, #g-content .g-hover-item .g-metadata { display: block; } #g-content #g-album-grid #g-place-holder { position: relative; visibility: hidden; z-index: 1; } /* Search results ~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-content #g-search-results { margin-top: 1em; padding-top: 1em; } /* Individual photo content ~~~~~~~~~~~~~~ */ #g-item { position: relative; width: 100%; } #g-item #g-photo, #g-item #g-movie { padding: 2.2em 0; position: relative; } #g-item img.g-resize, #g-item a.g-movie { display: block; margin: 0 auto; } /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-footer #g-credits li { padding-right: 1.2em; } /* In-line editing ~~~~~~~~~~~~~~~~~~~~~~ */ #g-in-place-edit-message { background-color: #fff; } /* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-edit-permissions-form td { background-image: none; } #g-edit-permissions-form fieldset { border: 1px solid #ccc; } #g-permissions .g-denied { background-color: #fcc; } #g-permissions .g-allowed { background-color: #fcf9ce; } #g-permissions .g-breadcrumbs a { border: 1px solid #fff; } #g-permissions .g-active a { border: 1px solid #ddd; background: #eee; } /** ******************************************************************* * 5) States and interactions **********************************************************************/ .g-active, .g-enabled, .g-available, .g-selected, .g-highlight { font-weight: bold; } .g-inactive, .g-disabled, .g-unavailable, .g-uneditable, .g-locked, .g-deselected, .g-understate { color: #ccc; font-weight: normal; } .g-editable { padding: .2em .3em; } .g-editable:hover { background-color: #ffc; cursor: text; } .g-error, .g-info, .g-success, .g-warning { padding-left: 30px; } form li.g-error, form li.g-info, form li.g-success, form li.g-warning { background-image: none; padding: .3em .8em .3em 0; } .g-short-form li.g-error { padding: .3em 0; } form.g-error input[type="text"], li.g-error input[type="text"], form.g-error input[type="password"], li.g-error input[type="password"], form.g-error input[type="checkbox"], li.g-error input[type="checkbox"], form.g-error input[type="radio"], li.g-error input[type="radio"], form.g-error textarea, li.g-error textarea, form.g-error select, li.g-error select { border: 2px solid #f00; margin-bottom: .2em; } .g-error, .g-denied, tr.g-error td.g-error, #g-add-photos-status .g-error { background: #f6cbca url('../images/ico-error.png') no-repeat .4em 50%; color: #f00; } .g-info { background: #e8e8e8 url('../images/ico-info.png') no-repeat .4em 50%; } /* ~browny~ */ .g-success, .g-allowed, #g-add-photos-status .g-success { background: #fcf9ce url('../images/ico-success.png') no-repeat .4em 50%; } tr.g-success { background-image: none; } tr.g-success td.g-success { background-image: url('../images/ico-success.png'); } .g-warning, tr.g-warning td.g-warning { background: #fcf9ce url('../images/ico-warning.png') no-repeat .4em 50%; } form .g-error { background-color: #fff; padding-left: 20px; } .g-open { } .g-closed { } .g-installed { background-color: #eeeeee; } .g-default { background-color: #c5dbec; font-weight: bold; } .g-draggable { cursor: move; } .g-draggable:hover { border: 1px dashed #000; } .ui-sortable .g-target, .ui-state-highlight { background-color: #fcf9ce; border: 2px dotted #999; height: 2em; margin: 1em 0; } /* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ .g-loading-large, .g-dialog-loading-large { background: #e8e8e8 url('../images/loading-large.gif') no-repeat center center !important; } .g-loading-small { background: #e8e8e8 url('../images/loading-small.gif') no-repeat center center !important; } /** ******************************************************************* * 6) Positioning and order **********************************************************************/ .g-left { clear: none; float: left; } .g-right { clear: none; float: right; } .g-first { } .g-last { } /* ~browny~ */ .g-even { background-color: #BAAD8B; text-align: right; } /* ~browny~ */ .g-odd { background-color: #EDE4D5; text-align: left; } /** ******************************************************************* * 7) Navigation and menus *********************************************************************/ /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~browny~ */ #g-banner #g-login-menu { color: #999; float: right; padding: .5em; } /* ~browny~ */ #g-banner #g-login-menu li { padding-left: 1.2em; } /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~browny~ */ #g-site-menu { bottom: 0; left: 250px; position: absolute; } #g-site-menu ul { margin-bottom: 0 !important; } /* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-context-menu { background-color: #fff; bottom: 0; left: 0; position: absolute; } .g-item .g-context-menu { display: none; margin-top: 2em; width: 100%; } #g-item .g-context-menu ul { display: none; } .g-context-menu li { border-left: none; border-right: none; border-bottom: none; } .g-context-menu li a { display: block; line-height: 1.6em; } .g-hover-item .g-context-menu { display: block; } .g-hover-item .g-context-menu li { text-align: left; } .g-hover-item .g-context-menu a:hover { text-decoration: none; } /* View Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-view-menu { margin-bottom: 1em; } #g-view-menu a { background-repeat: no-repeat; background-position: 50% 50%; height: 30px !important; width: 43px !important; } #g-view-menu #g-slideshow-link { background-image: url('../images/ico-view-slideshow.png'); } #g-view-menu .g-fullsize-link { background-image: url('../images/ico-view-fullsize.png'); } #g-view-menu #g-comments-link { background-image: url('../images/ico-view-comments.png'); } #g-view-menu #g-print-digibug-link { background-image: url('../images/ico-print.png'); } /** ******************************************************************* * 8) jQuery and jQuery UI *********************************************************************/ /* Generic block container ~~~~~~~~~~~~~~~ */ .g-block { clear: both; margin-bottom: 2.5em; overflow: hidden; } .g-block-content { } /* Superfish menu overrides ~~~~~~~~~~~~~~ */ .sf-menu ul { width: 12em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 12em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 12em; } /* ~browny~ */ .sf-menu li li, .sf-menu li li ul li { background: #d3b07e url('../images/ui-bg_highlight-soft_15_d3b07e_1x100.png') 50% 50% repeat-x; } /* ~browny~ */ .sf-menu li { background: #d3b07e url('../images/ui-bg_highlight-soft_45_d3b07e_1x100.png') 50% 50% repeat-x; text-shadow: 0px 1px 1px #fff; } /* ~browny~ */ .sf-menu a { border-top: 1px solid #e0cbae; } /* ~browny~ */ .sf-menu li:hover { background-color: #e0cbae; } /* ~browny~ */ .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #e0cbae; } /* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ .ui-widget-overlay { background: #000; opacity: .7; } .ui-dialog-content { text-shadow: 0px 1px 1px #fff; } /* Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-button { display: inline-block; margin: 0 4px 0 0; padding: .2em .4em; text-shadow: 0px 1px 1px #fff; } .g-button, .g-button:hover, .g-button:active { cursor: pointer !important; outline: 0; text-decoration: none; -moz-outline-style: none; } button { padding: 2px 4px 2px 4px; } /* jQuery UI ThemeRoller buttons ~~~~~~~~~ */ .g-buttonset { padding-left: 1px; } .g-buttonset li { float: left; } .g-buttonset .g-button { margin: 0; } .ui-icon-left .ui-icon { float: left; margin-right: .2em; } .ui-icon-right .ui-icon { float: right; margin-left: .2em; } /* Rotate icon, ThemeRoller only provides one of these */ .ui-icon-rotate-ccw { background-position: -192px -64px; } .ui-icon-rotate-cw { background-position: -208px -64px; } .g-progress-bar { height: 1em; width: 100%; margin: .5em 0; display: inline-block; } /* Status and validation messages ~~~~~~~~ */ .g-message-block { background-position: .4em .3em; border: 1px solid #ccc; padding: 0; } #g-action-status { margin-bottom: 1em; } #g-action-status li, p#g-action-status, div#g-action-status { padding: .3em .3em .3em 30px; } #g-site-status li { border-bottom: 1px solid #ccc; padding: .3em .3em .3em 30px; } .g-module-status { clear: both; margin-bottom: 1em; } .g-message { background-position: 0 50%; } /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-breadcrumbs { clear: both; padding: 0 20px; } /* ~browny~ */ .g-breadcrumbs li { background: transparent url('../images/ico-separator.gif') no-repeat scroll left center; float: left; padding: .5em 8px .5em 18px; } .g-breadcrumbs .g-first { background: none; padding-left: 0; } .g-breadcrumbs li a, .g-breadcrumbs li span { display: block; } #g-dialog ul.g-breadcrumbs { margin-left: 0; padding-left: 0; } /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-paginator { padding: .2em 0; width: 100%; } .g-paginator li { float: left; width: 30%; } .g-paginator .g-info { background: none; padding: .2em 0; text-align: center; width: 40%; } /* Dialogs and panels ~~~~~~~~~~~~~~~~~~~~ */ #g-dialog { text-align: left; } #g-dialog legend { display: none; } #g-dialog .g-cancel { margin: .4em 1em; } #g-panel { display: none; padding: 1em; } /* Inline layout ~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-inline li { float: left; margin-left: 1.8em; padding-left: 0 !important; } .g-inline li.g-first { margin-left: 0; } /* Autocomplete ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .ac_loading { background: white url('../images/loading-small.gif') right center no-repeat !important; } /** ******************************************************************* * 9) More Browny (Extra overrides for better Browny look) *********************************************************************/ /* ~browny~ */ /* /modules/gallery/css/gallery.css ~~~~~~ */ #g-add-photos-form p { margin-bottom: .5em !important; } #g-permissions .g-allowed { background-color: #fcf9ce !important; } /* /modules/gallery/css/l10n_client.css ~~ */ #l10n-client .labels { background:#262626 !important; } /* Uploadify ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .uploadifyQueueItem { border: 2px solid #EBEBDF !important; background-color: #FAFAEB !important; } .uploadifyQueue { margin-top: 1em; } /* User Profile ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-user-profile h1 { color: #5A3007; margin: 1.25em 0em 2em 4.4em; } #g-user-profile .g-avatar { float: left; position: absolute; left: 0em; top: 1.3em; width: 90px !important; height: 90px !important; margin: 0em 0em 0em .6em; } #g-user-profile .g-block h2 { background-color: #F5EFE6; margin-bottom: .5em; padding-left: .8em; } #g-user-profile .g-block-content h2 { background-color: transparent; margin-bottom: inherit; } #g-user-profile #g-comment-detail .g-author a { float: left; position: relative; top: -0.3em; left: 0em; margin-right: .6em; } #g-user-profile #g-comment-detail div { margin-left: 5em; line-height: 150%; } #g-user-profile #g-comment-detail ul li { border: .1em dotted #D4BE9B; padding: .8em .5em; margin-bottom: .5em; } /* Comments ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-content #g-comments .g-avatar { float: left; margin-right: .4em; margin-left: 0; } /* Organize ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-organize { color: #6E3B1C !important; } #g-organize-hover { background-color: #92623C !important; } #g-organize-active { background-color: #F2EEE9 !important; } /* EXIF ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-exif-data { font-size: .85em !important; } /* 3rd Party Modules ~~~~~~~~~~~~~~~~~~~~~ */ /* CalendarView */ #g-calendar-grid { margin: 8px 8px 8px 8px !important; border: dotted #EDE4D5; padding-left: 8px; } table.calendar td:hover { background: #EDE4D5 !important; } #g-view-menu #g-calendarview-link { background-image: url('../images/ico-view-calendarview.png') !important; } /* DownloadFullSize */ #g-view-menu #g-download-fullsize-link { background-image: url('../images/ico-view-downloadfullsize.png') !important; } /* DownloadAlbum */ #g-view-menu #g-download-album-link { background-image: url('../images/ico-view-downloadalbum.png'); } /* comment_block */ .g-odd .g-thumbnail, .g-even .g-thumbnail { margin-top: 3px; margin-bottom: 3px; }