/** * Gallery 3 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) States and interactions * 6) Positioning and order * 7) Navigation and menus * 8) jQuery and jQuery UI * 9) Right-to-left language styles */ /** ******************************************************************* * 1) Font sizes, base HTML elements **********************************************************************/ body, html { background-color: #ccc; font-family: '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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 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: #5382bf !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; } /* 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; } th, td { border: none; border-bottom: 1px solid #ccc; 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 *********************************************************************/ .g-block h2 { background-color: #e8e8e8; 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 ~~~~~~~~~~~~~~~~~~~~~ */ #g-header { margin-bottom: 1em; } #g-banner { background-color: #e8e8e8; border-bottom: 1px solid #ccc; min-height: 5em; padding: 1em 20px; position: relative; } #g-content { padding-left: 20px; position: relative; width: 696px; } #g-sidebar { padding: 0 20px; width: 220px; } #g-footer { background-color: #e8e8e8; border-top: 1px solid #ccc; margin-top: 20px; padding: 10px 20px; } /** ******************************************************************* * 4) Content blocks in specific layout containers *********************************************************************/ /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-banner #g-quick-search-form { clear: right; float: right; margin-top: 1em; } #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; } #g-content #g-album-grid .g-album { background-color: #e8e8e8; } #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: #cfc; } #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%; } .g-success, .g-allowed, #g-add-photos-status .g-success { background: #d9efc2 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 { } .g-even { background-color: #fff; } .g-odd { background-color: #eee; } /** ******************************************************************* * 7) Navigation and menus *********************************************************************/ /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-banner #g-login-menu { color: #999; float: right; } #g-banner #g-login-menu li { padding-left: 1.2em; } /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-site-menu { bottom: 0; left: 140px; position: absolute; } #g-site-menu ul { margin-bottom: 0 !important; } /* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-context-menu { background-color: #fff; top: 0; left: 0; position: absolute; } .g-item .g-context-menu { display: none; margin-top: 0em; 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: 28px !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; } .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; } .sf-menu li li, .sf-menu li li ul li { background-color: #bdd2ff; } .sf-menu li:hover { background-color: #dfe9ff; } /* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ .ui-widget-overlay { background: #000; opacity: .7; } /* Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-button { display: inline-block; margin: 0 4px 0 0; padding: .2em .4em; } .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-top: .5em; 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; } .g-breadcrumbs li { background: transparent url('../images/ico-separator.gif') no-repeat scroll left center; float: left; padding: 1em 8px 1em 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 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) Right to left language styles *********************************************************************/ .rtl { direction: rtl; } .rtl #g-header, .rtl #g-content, .rtl #g-sidebar, .rtl #g-footer, .rtl caption, .rtl th, .rtl #g-dialog, .rtl .g-context-menu li a, .rtl .g-message-box li, .rtl #g-site-status li { text-align: right; } .rtl .g-text-right { text-align: left; } .rtl .g-error, .rtl .g-info, .rtl .g-success, .rtl .g-warning, .rtl #g-add-photos-status .g-success, .rtl #g-add-photos-status .g-error { background-position: center right; padding-right: 30px !important; } .rtl form li.g-error, .rtl form li.g-info, .rtl form li.g-success, .rtl form li.g-warning { padding-right: 0 !important; } .rtl .g-left, .rtl .g-inline li, .rtl #g-content #g-album-grid .g-item, .rtl .sf-menu li, .rtl .g-breadcrumbs li, .rtl .g-paginator li, .rtl .g-buttonset li, .rtl .ui-icon-left .ui-icon, .rtl .g-short-form li, .rtl form ul ul li, .rtl input[type="submit"], .rtl input[type="reset"], .rtl input.checkbox, .rtl input[type=checkbox], .rtl input.radio, .rtl input[type=radio] { float: right; } .rtl .g-right, .rtl .ui-icon-right .ui-icon { float: left; } .rtl .g-inline li { margin-right: 1em; } .rtl .g-inline li.g-first { margin-right: 0; } .rtl .g-breadcrumbs li { background: transparent url('../images/ico-separator-rtl.gif') no-repeat scroll right center; padding: 1em 18px 1em 8px; } .rtl .g-breadcrumbs .g-first { background: none; padding-right: 0; } .rtl input.checkbox { margin-left: .4em; } .rtl #g-add-comment { right: inherit; left: 0; } .rtl .ui-icon-left .ui-icon { margin-left: .2em; } .rtl .ui-icon-right .ui-icon { margin-right: .2em; } /* RTL Corner radius ~~~~~~~~~~~~~~~~~~~~~~ */ .rtl .g-buttonset .ui-corner-tl { -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -moz-border-radius-topright: 5px !important; -webkit-border-top-right-radius: 5px !important; border-top-right-radius: 5px !important; } .rtl .g-buttonset .ui-corner-tr { -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -moz-border-radius-topleft: 5px !important; -webkit-border-top-left-radius: 5px !important; border-top-left-radius: 5px !important; } .rtl .g-buttonset .ui-corner-bl { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 5px !important; -webkit-border-bottom-right-radius: 5px !important; border-bottom-right-radius: 5px !important; } .rtl .g-buttonset .ui-corner-br { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 5px !important; -webkit-border-bottom-left-radius: 5px !important; border-bottom-left-radius: 5px !important; } .rtl .g-buttonset .ui-corner-right, .rtl .ui-progressbar .ui-corner-right { -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -moz-border-radius-topleft: 5px !important; -webkit-border-top-left-radius: 5px !important; border-top-left-radius: 5px !important; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 5px !important; -webkit-border-bottom-left-radius: 5px !important; border-bottom-left-radius: 5px !important; } .rtl .g-buttonset .ui-corner-left, .rtl .ui-progressbar .ui-corner-left { -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -moz-border-radius-topright: 5px !important; -webkit-border-top-right-radius: 5px !important; border-top-right-radius: 5px !important; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 5px !important; -webkit-border-bottom-right-radius: 5px !important; border-bottom-right-radius: 5px !important; } /* RTL Superfish ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .rtl .sf-menu a { border-left: none; border-right:1px solid #fff; } .rtl .sf-menu a.sf-with-ul { padding-left: 2.25em; padding-right: 1em; } .rtl .sf-sub-indicator { left: .75em !important; right: auto; background: url('../../../lib/superfish/images/arrows-ffffff-rtl.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } .rtl a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: -10px -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ .rtl a:focus > .sf-sub-indicator, .rtl a:hover > .sf-sub-indicator, .rtl a:active > .sf-sub-indicator, .rtl li:hover > a > .sf-sub-indicator, .rtl li.sfHover > a > .sf-sub-indicator { background-position: 0 -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .rtl .sf-menu ul .sf-sub-indicator { background-position: 0 0; } .rtl .sf-menu ul a > .sf-sub-indicator { background-position: -10px 0; } /* apply hovers to modern browsers */ .rtl .sf-menu ul a:focus > .sf-sub-indicator, .rtl .sf-menu ul a:hover > .sf-sub-indicator, .rtl .sf-menu ul a:active > .sf-sub-indicator, .rtl .sf-menu ul li:hover > a > .sf-sub-indicator, .rtl .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: 0 0; /* arrow hovers for modern browsers*/ } .rtl .sf-menu li:hover ul, .rtl .sf-menu li.sfHover ul { right: 0; left: auto; } .rtl ul.sf-menu li li:hover ul, .rtl ul.sf-menu li li.sfHover ul { right: 12em; /* match ul width */ left: auto; } .rtl ul.sf-menu li li li:hover ul, .rtl ul.sf-menu li li li.sfHover ul { right: 12em; /* match ul width */ left: auto; } /*** shadows for all but IE6 ***/ .rtl .sf-shadow ul { background: url('../../../lib/superfish/images/shadow.png') no-repeat bottom left; padding: 0 0 9px 8px; border-top-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomleft: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 17px; -moz-border-radius-bottomright: 17px; -webkit-border-top-left-radius: 17px; -webkit-border-bottom-right-radius: 17px; border-top-left-radius: 17px; border-bottom-right-radius: 17px; } /* RTL ThemeRoller ~~~~~~~~~~~~~~~~~~~~~~~~ */ .rtl .ui-dialog .ui-dialog-titlebar { padding: 0.5em 1em 0.3em 0.3em; } .rtl .ui-dialog .ui-dialog-title { float: right; } .rtl .ui-dialog .ui-dialog-titlebar-close { left: 0.3em; right: auto; } /* RTL paginator ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .rtl .g-paginator .g-info { width: 35%; } .rtl .g-paginator .g-text-right { margin-left: 0; } .rtl .g-paginator .ui-icon-seek-end { background-position: -80px -160px; } .rtl .g-paginator .ui-icon-seek-next { background-position: -48px -160px; } .rtl .g-paginator .ui-icon-seek-prev { background-position: -32px -160px; } .rtl .g-paginator .ui-icon-seek-first { background-position: -64px -160px; } .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: 150px; } .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; }