/** * Gallery 3 Browny Wind Theme Screen Styles * * @requires YUI reset, font, grids CSS * * Sheet organization: * 1) Font sizes, base HTML elements * 2) Reusable content blocks * 3) Page layout containers * 4) Content blocks in specific layout containers * 5) Navigation and menus * 6) ThemeRoller * 7) jQuery and jQuery UI * 8) Right-to-left language styles * 9) More Browny */ /** ******************************************************************* * 1) Font sizes, base HTML elements **********************************************************************/ /* ~browny~ */ body, html { background-color: #5a3007; font-family: 'Geeza Pro', Tahoma, 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } p { margin-bottom: 1em; } em { font-style: oblique; } h1, h2, h3, h4, h5, strong, th { font-weight: bold; } 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-album-grid .g-item, #g-item #g-photo, #g-item #g-movie { font-size: .7em; } /* 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; } /* 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; } /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ /* ~browny~ */ .g-block h2 { background-color: #EDE4D5; padding: .3em .8em; } .g-block-content { margin-top: 1em; } /*** ****************************************************************** * 3) Page layout containers *********************************************************************/ /* 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; } /** ******************************************************************* * 5) 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'); } /** ******************************************************************* * 6) ThemeRoller Theme **********************************************************************/ /* ~browny~ */ /* ThemeRoller overrides ~~~~~~~~~~~~~~~~~ */ @import "themeroller/ui.tabs.css"; /** ******************************************************************* * 7) jQuery and jQuery UI *********************************************************************/ /* Superfish menu overrides ~~~~~~~~~~~~~~ */ /* ~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; } /* ~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; } /** ******************************************************************* * 8) Right to left language styles *********************************************************************/ .rtl #g-header #g-login-menu, .rtl #g-header #g-quick-search-form { clear: left; float: left; } .rtl #g-header #g-login-menu li { margin-left: 0; padding-left: 0; padding-right: 1.2em; } .rtl #g-site-menu { left: auto; right: 240px; } .rtl #g-view-menu #g-slideshow-link { background-image: url('../images/ico-view-slideshow-rtl.png'); } .rtl #g-sidebar .g-block-content { padding-right: 1em; padding-left: 0; } .rtl #g-footer #g-credits li { padding-left: 1.2em !important; padding-right: 0; } /** ******************************************************************* * 9) More Browny (Extra overrides for better Browny look) *********************************************************************/ /* ~browny~ */ /* /lib/gallery.common.css ~~~~~~~~~~~~~~~ */ .g-info { background: #e8e8e8 url('../images/ico-info.png') no-repeat .4em 50%; } .g-success, .g-allowed, #g-add-photos-status .g-success { background: #fcf9ce url('../images/ico-success.png') no-repeat .4em 50%; } tr.g-success td.g-success { background-image: url('../images/ico-success.png'); } .g-odd { background-color: #EDE4D5; } .g-breadcrumbs li { padding: .5em 8px .5em 18px; } .rtl .g-breadcrumbs li { padding: .5em 18px .5em 8px; } /* /modules/gallery/css/gallery.css ~~~~~~ */ #g-add-photos-form p { margin-bottom: .5em !important; } #g-permissions .g-allowed { background-color: #fcf9ce !important; } #g-user-profile th, #g-user-profile td { border: 1px dotted #ccc !important; } /* /modules/gallery/css/l10n_client.css ~~ */ #l10n-client .labels { background:#262626 !important; } /* Uploadify ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .uploadifyQueueItem { border: 2px solid #EBEBDF !important; background-color: #FAFAEB !important; } .rtl .uploadifyQueueItem .cancel { float: left; } .uploadifyQueue { margin-top: 1em; } /* User Profile ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-avatar g-left { width: 80px !important; height: 80px !important; } /* 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; } .g-odd { background: #BAAD8B !important; } .g-even { background: #EDE4D5 !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; } .rtl #g-calendar-grid { padding-right: 8px; padding-left: 0px; } #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') !important; } /* DownloadAlbum */ #g-view-menu #g-download-album-link { background-image: url('../images/ico-view-downloadalbum.png'); }