/** * Gallery 3 Default Theme Screen Styles * * @requires YUI reset, font, grids CSS * * Sheet organization: * 1) Basic HTML elements * 2) Reusable classes * 3) Reusable content blocks * 4) Page layout containers * 5) Content blocks in specific layout containers * 6) Navigation and menus * 7) Browser hacks * 8) jQuery and jQuery UI * 9) Right-to-left language styles */ /** ******************************************************************* * 1) Basic 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; } #gSearchResults h1 { margin-bottom: 1em; } #gProgress h1 { font-size: 1.1em; } h2 { font-size: 1.4em; } #gSidebar .gBlock h2 { font-size: 1.2em; } #gSidebar .gBlock li { margin-bottom: .6em; } h3 { font-size: 1.2em; } /* Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ a, .gMenu a, #gDialog a, .gButtonLink, .gButtonLink:hover, .gButtonLink:active, a.ui-state-hover, input.ui-state-hover, button.ui-state-hover { color: #5382BF !important; text-decoration: none; -moz-outline-style: none; } a:hover, #gDialog a:hover { text-decoration: underline; } .gMenu a:hover { text-decoration: none; } #gDialog .gCancel { clear: none; float: left; margin: .3em 1em; } #gForgotPasswordLink { float: right; font-size: .9em; } #gDialog .gCancel { float: left; } /* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ table { width: 100%; } #gContent table { margin: 1em 0 3em 0; } caption, th { text-align: left; } th, td { border: none; border-bottom: 1px solid #ccc; padding: .5em; vertical-align: top; } #gAdminMaintenance td { vertical-align: middle; } /* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ fieldset { border: 1px solid #ccc; padding-bottom: .8em; } #gHeader fieldset, #gSidebar fieldset, .gShortForm fieldset { border: none; } legend { font-weight: bold; margin-left: 1em; } #gHeader legend, #gSidebar legend, #gContent #gSearchForm legend, input[type="hidden"], .gShortForm label { display: none; } label { cursor: help; } input[type="text"], input[type="password"] { width: 50%; } input[type="text"], input[type="password"], textarea { border: 1px solid #e8e8e8; border-top-color: #ccc; border-left-color: #ccc; color: #333; } textarea { width: 100%; height: 12em; } input:focus, textarea:focus, option:focus { background-color: #ffc; color: #000; } /* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form li { margin: 0 !important; padding: .3em 1.5em .3em 1em; } 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; } /* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */ .gValidationRule { font-size: 80%; margin-top: .5em; } form.gError input[type="text"], li.gError input[type="text"], form.gError input[type="password"], li.gError input[type="password"], form.gError input[type="checkbox"], li.gError input[type="checkbox"], form.gError input[type="radio"], li.gError input[type="radio"], form.gError textarea, li.gError textarea, form.gError select, li.gError select { border: 2px solid red; } /** ******************************************************************* * 2) Reusable generic classes *********************************************************************/ .inactive, .understate { color: #ccc; font-weight: normal; } .left { float: left; margin: 1em 1em 1em 0; } .right { float: right; margin: 1em 0 1em 1em; } .txtright { text-align: right; } /** ******************************************************************* * 3) Reusable content blocks *********************************************************************/ .gBlock { background-color: #fff; border: 1px solid #ccc; clear: both; margin-bottom: 2.5em; padding: 1em; } #gSidebar .gBlockContent { padding: 0; } .gBlock h2 { background-color: #e8e8e8; padding: .3em .8em; } .gBlockContent { margin-top: 1em; } .gSelected img, .gAvailable .gBlock img { float: left; margin: 0 1em 1em 0; } .rtl .gSelected img, .rtl .gAvailable .gBlock img { float: right; } .gSelected { background: #e8e8e8; } .gAvailable .gInstalledToolkit:hover { cursor: pointer; background: #eee; } .gAvailable .gButtonLink { width: 96%; } .gSelected .gButtonLink { display: none; } .gUnavailable { border-color: #999; opacity: 0.4; } .gOddRow { background-color: #eee; } .gEvenRow { background-color: #fff; } /* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ #gMessage { width: 100%; } #gSiteStatus li, #gMessage li, .gModuleStatus { border: 1px solid #ccc; margin-bottom: .4em; } #gSiteStatus li { margin-bottom: 0; border: none; border-bottom: 1px solid #ccc; } .gModuleStatus { clear: both; margin-bottom: 1em; } .gError, .gInfo, .gSuccess, .gWarning { padding: .4em .5em .4em 30px; } .gError, tr.gError td.gError { background: #f6cbca url('../images/ico-error.png') no-repeat .4em 50%; } .gInfo { background: #e8e8e8 url('../images/ico-info.png') no-repeat .4em 50%; } .gSuccess { background: #d9efc2 url('../images/ico-success.png') no-repeat .4em 50%; } .gWarning, tr.gWarning td.gWarning { background: #fcf9ce url('../images/ico-warning.png') no-repeat .4em 50%; } .gPager .gInfo, tr.gError, tr.gInfo, tr.gSuccess, tr.gWarning { background: none; } .gInfo td.gInfo { background-color: transparent; } .gSuccess td.gSuccess { background-color: transparent; } .gError td { background-color: #f6cbca; } .gWarning td { background-color: #fcf9ce; } /* Inline layout (forms, lists) ~~~~~~~~~~ */ .gShortForm li { float: left; padding: .4em 0; } .gShortForm input[type="text"] { color: #666; padding: .3em .6em; width: 11em; } /*** ****************************************************************** * 4) Page layout containers *********************************************************************/ /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */ .gView { background-color: #fff; border: 1px solid #ccc; border-bottom: none; min-width: 974px !important; } /* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */ #gHeader { background-color: #e8e8e8; border-bottom: 1px solid #ccc; font-size: .8em; margin-bottom: 20px; padding: 0 20px; position: relative; } #gContent { font-size: 1.1em; padding-left: 20px; width: 96%; } #gSidebar { background-color: #fff; font-size: .9em; padding: 0 20px; width: 220px; } #gFooter { background-color: #e8e8e8; border-top: 1px solid #ccc; font-size: .8em; margin-top: 20px; padding: 10px 20px; } /** ******************************************************************* * 5) Content blocks in specific layout containers *********************************************************************/ /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #gHeader #gLogo { background: transparent url('../../../lib/images/logo.png') no-repeat 0 .5em; color: #A5A5A5 !important; display: block; height: 55px; padding-top: 5px; width: 105px; } #gHeader #gLogo:hover { color: #f60 !important; text-decoration: none; } #gHeader #gQuickSearchForm { clear: right; float: right; margin: 1em 0; } #gHeader #gQuickSearchForm input[type='text'] { width: 17em; } #gContent .gBlock h2 { background-color: transparent; padding-left: 0; } #gSidebar .gBlockContent { padding-left: 1em; } /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ #gHeader #gLoginMenu li, #gFooter #gCredits li { display: inline; } #gHeader #gLoginMenu li { padding-left: 1.2em; } #gFooter #gCredits li { padding-right: 1.2em; } #gContent #gSearchResults { margin-top: 1em; padding-top: 1em; } .gBlock .ui-dialog-titlebar { margin: -1em -1em 0; } #gSidebar .gBlock h2 { background: none; } #gPhotoStream { background-color: #e8e8e8; } #gPhotoStream .gBlockContent ul { border-right: 1px solid #e8e8e8; height: 135px; overflow: auto; overflow: -moz-scrollbars-horizontal; /* for FF */ overflow-x: scroll; /* scroll horizontal */ overflow-y: hidden; /* Hide vertical*/ } #gContent #gPhotoStream .gItem { background-color: #fff; border: 1px solid #e8e8e8; border-right-color: #ccc; border-bottom-color: #ccc; float: left; height: 90px; overflow: hidden; text-align: center; width: 90px; } .rtl #gContent #gPhotoStream .gItem { float: right; } #gSiteStatus { margin-bottom: 0; } #gContent .gItem { background-color: #fff; border: 1px solid #e8e8e8; border-right-color: #ccc; border-bottom-color: #ccc; height: 90px; padding: 14px 8px; text-align: center; width: 90px; } #gAdminCommentsMenu { margin: 1em 0; } #gAdminCommentsMenu a { margin: 0; padding: .2em .6em; } #gAdminGraphics .gAvailable .gBlock { clear: none; float: left; height: 17em; margin-right: 1em; width: 30%; } .rtl #gAdminGraphics .gAvailable .gBlock { float: right; margin-left: 1em; margin-right: 0em; } #gSiteTheme, #gAdminTheme { float: left; width: 48%; } .rtl #gSiteTheme, .rtl #gAdminTheme { float: right; } #gSiteTheme { margin-right: 1em; } #gUserAdminList { margin-bottom: 1em; } #gUserAdminList td { vertical-align: bottom; } #gUserAdminList .gDraggable:hover { border: 1px dashed black; } #gUserAdminList .admin { color: #55f; font-weight: bold; } .gActions a, .gActions span { margin-right: 3em; } li.gGroup { float: left; display: block; width: 200px; border: 1px solid gray; padding: 0; margin: 0 1em 1em 0; } .rtl li.gGroup { float: right; } li.gGroup h4 { background-color: #eee; border-bottom: 1px dashed #ccc; padding: .5em 0 .5em .5em; } li.gGroup .gButtonLink { padding: 0; } li.gGroup ul, li.gGroup div { height: 180px; margin: 1px; overflow: auto; padding-top: .2em; } li.gGroup div p { color: gray; text-align: center; padding: 2em .5em 0 .5em } li.gGroup .gUser { padding: .2em 0 0 .5em; } li.gGroup .gUser .gButtonLink { vertical-align: middle; } li.gDefaultGroup h4, li.gDefaultGroup .gUser { color: gray; } #gAdminAdvancedSettings tr.setting:hover { background: #ffc; } /** ******************************************************************* * 5) Navigation and menus *********************************************************************/ #gSiteAdminMenu, #gTagCloud ul { font-size: 1.2em; } /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #gHeader #gLoginMenu { color: #999; float: right; margin: 0; padding: 5px 0; } .rtl #gHeader #gLoginMenu { text-align: left; } /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #gSiteAdminMenu { bottom: 0; display: none; font-size: 1.2em; left: 140px; position: absolute; } #gSiteAdminMenu ul { margin-bottom: 0; } /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .gPager { clear: both; margin: 0; padding: 5px 0 !important; width: 100%; } .gPager li { float: left; margin: 0; width: 30%; } .gPager .gInfo { text-align: center; width: 40%; } /** ******************************************************************* * 6) Browser hacks *********************************************************************/ #gSiteAdminMenu:after, #gHeader:after, #gAdminCommentsMenu:after, #gGroupAdmin:after, .gSelected:after, .gAvailable .gBlock:after, #gModuleCreateForm ul li ul:after, #gDeveloperTools:after, #gPhotoStream:after, #gViewMenu:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } /** ******************************************************************* * 7) jQuery and jQuery UI *********************************************************************/ /* Superfish menu overrides ~~~~~~~~~~~~~~ */ .sf-menu li li, .sf-menu li li ul li { background-color: #bdd2ff; } .sf-menu li:hover { background-color: #dfe9ff; } /* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ .gLoadingLarge { background: #e8e8e8 url('../../../lib/images/loading-large.gif') no-repeat center center; font-size: 0; } .gDialogLoadingLarge { background: url('../../../lib/images/loading-large.gif') no-repeat center center !important; font-size: 0; } .gLoadingSmall { background: #e8e8e8 url('../../../lib/images/loading-small.gif') no-repeat center center; font-size: 0; } .gDraggable { cursor: move; } .gDropTarget { background-color: #cfdeff; border: 1px dotted #999; height: 100px; margin: 1em 0; } /* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ #gPanel { display: none; padding: 1em; } #gPanel legend { display: none; } #gPanel fieldset { border: none; } .ui-draggable { cursor: move; } .gButtonSetVertical a { width: 8em !important; } #gAdminDashboard .ui-dialog-titlebar, #gAdminDashboardSidebar .ui-dialog-titlebar { padding: .2em .4em; } .ui-widget-overlay { background: #000; opacity: .7; } #gDialog { text-align: left; } #gDialog li { padding-left: 0; } #gDialog form input[type="text"], #gDialog form input[type="password"] { width: 100%; } #gDialog #gLoginForm, #gDialog #gAddUserForm, #gDialog #gAddGroupForm { margin: 0 auto; width: 270px; } #gDialog fieldset { border: none; } #gDialog legend { display: none; } /* jQuery UI ThemeRoller buttons */ .gButtonLink { display: inline-block; margin: 0 4px 0 0; padding: .2em .4em; outline: 0; } .gButtonSet { padding-left: 1px; } .gButtonSet li { float: left; } .gButtonSet .gButtonLink { margin: 0; } .ui-icon-left .ui-icon { float: left; margin-right: .2em; } .ui-icon-right .ui-icon { float: right; margin-left: .2em; } .ui-icon-rotate-ccw { background-position: -192px -64px; } .ui-icon-rotate-cw { background-position: -208px -64px; } /*************** STUFF THAT NEEDS A HOME ****************/ #gMove ul { padding-left: 1em; } #gMove .selected { background: #999; } .gProgressBar { height: 1em; width: 100%; margin-top: .5em; display: inline-block; } #gAddPhotos p { margin: 0; padding: 0; } #gAddPhotosCanvas { height: 325px; width: 450px; overflow: auto; } #gAddPhotosQueue .progressbar { height: 4px; } #gAddPhotosQueue .title { font-size: 1.25em; } #gAddPhotosQueue .status { font-size: .75em; } #gAddPhotosQueue .box { margin-bottom: 8px; padding: 4px; } #gAddPhotosQueue .pending { background-color: #e8e8e8; border: 1px solid #d7d7d7; } #gAddPhotosQueue .error { background-color: #fcc; border: 1px solid #ebb; } #gAddPhotosQueue .uploading { background-color: #ff9; border: 1px solid #ee8; } #gAddPhotosQueue .complete { background-color: #cfc; border: 1px solid #beb; } #gAdminG2ImportNotes { padding-bottom: 20px; } #gAdminG2ImportDetails { padding-top: 20px; } #gAdminG2ImportDetails .gWarning { margin-top: 4px; } #gAdminG2ImportDetails .gInfo { padding: 2px; border: 1px solid #999; margin-bottom: 10px; } #gAdminG2ImportNotes p, #gAdminG2ImportDetails .gInfo p { padding: 0; margin: 0; } #gAdminG2ImportNotes ul li, #gAdminG2Import .gInfo ul li { padding-left: 0; margin-left: 20px; list-style-type: disc; } #gTagAdmin { table-layout: fixed; } #gTagAdmin td { border: 0; } #gTagAdmin ul { padding-bottom: .3em; } #gTagAdmin li { padding: .1em 0 .2em .3em; } #gTagAdmin .gColumn { float: left; width: 200px; } .rtl #gTagAdmin .gColumn { float: right; } .gEditable { padding: .1em .3em .2em .3em; } .gEditable:hover { background-color: #ffc; cursor: text; } #gRenameTagForm input { padding: 0 .2em 0 .2em; clear: none; float: left; margin: 0 .2em 0 0; } .rtl #gRenameTagForm input { float: right; } #gRenameTagForm input[type="text"].gError { border: 2px solid red; background: none; } #gRenameTagForm input[type="submit"] { height: 25px; } #gRenameTagForm a, #gRenameTagForm span { display: block; float: left; padding: .2em .2em 0 .1em; } .rtl #gRenameTagForm a, #gRenameTagForm span { float: right; } #gTaskLogDialog h1 { font-size: 1.1em; } .gTaskLog { border: 1pt solid; font-size: .9em; height: 400px; margin: .5em 0; overflow: auto; padding: .5em } #gServerAddAdmin { margin:auto; text-align: left; } .rtl #gServerAddAdmin { text-align: right; } #gServerAddAdmin form fieldset { border: medium none; } #gServerAddAdmin legend { display: none; } #gServerAddAdmin .gWarning { background-color: #FFFF99; } #gAuthorizedPath { margin: 0 !important; padding: 0.3em 1.5em 0.3em 1em; } #gServerAdd Admin #path { width: 80%; } .gRemoveDir:hover { cursor: pointer; } #gLanguagesForm table { width: 400px; float: left; margin: 0 3em 1em 0; } #gLanguagesForm .installed { background-color: #EEEEEE; } #gLanguagesForm .default { background-color: #C5DBEC; font-weight: bold; } #gLanguagesForm input { clear: both; } #gTranslations { padding: 2em 0 0 0; clear: both; } #gTranslations .gButtonLink { padding: .5em; } .gDocLink { float: right; } /* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */ .rtl { direction: rtl; } .rtl caption, .rtl th, .rtl #gDialog { text-align: right; } .rtl .txtright { text-align: left; } .rtl #gHeader #gQuickSearchForm, .rtl #gForgotPasswordLink, .rtl #gHeader #gLoginMenu, .rtl .ui-icon-right .ui-icon { clear: left; float: left; } .rtl #gDialog .gCancel, .rtl form ul ul li, .rtl input[type="submit"], .rtl input[type="reset"], .rtl .gShortForm li, .rtl #gContent #gAlbumGrid .gItem, .rtl #gSiteAdminMenu, .rtl .gPager li, .rtl .gButtonSet li, .rtl .ui-icon-left .ui-icon { float: right; }