/** * Gallery 3 Default Theme Screen Styles * * @requires YUI reset, font, grids CSS * * Sheet organization: * 1) Basic HTML elements * 2) Reusable content blocks * 3) Page layout containers * 4) Content blocks in specific layout containers * 5) Navigation and menus * 6) Browser hacks * 7) jQuery and jQuery UI * 8) Right-to-left language styles */ /** ******************************************************************* * 1) Basic HTML elements **********************************************************************/ body, html { background-color: #ccc; font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; color: #e8e8e8; } p { margin-bottom: 1em; } em { font-style: oblique; } h1, h2, h3, h4, h5, strong, th { font-weight: bold; } h1 { font-size: 1.5em; } #g-search-results h1 { margin-bottom: 1em; } #g-progress h1 { font-size: 1.1em; } h2 { font-size: 1.2em; } #g-sidebar .g-block h2 { font-size: 1.2em; } #g-sidebar .g-block li { margin-bottom: .6em; } h3 { font-size: 1.2em; } h4 { font-size: 0.9em; } /* 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: #ffffcc !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; } th, td { border: none; border-bottom: 1px solid #ccc; padding: .5em; vertical-align: top; } /* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ fieldset { border: 1px solid #ccc; padding-bottom: .8em; } #g-banner fieldset, #g-sidebar fieldset, .g-short-form fieldset { border: none; } legend { font-weight: bold; margin-left: 1em; color: #e8e8e8; } #g-banner legend, #g-sidebar legend, #g-content #g-search-form legend, input[type="hidden"], .g-short-form 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: 90%; 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 ~~~~~~~~~~~~~~~~~~~~~~~ */ 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 red; } /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ .g-block h2 { background-color: #333; padding: .3em .8em; } .g-block-content { margin-top: 1em; } /* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ /* Inline layout (forms, lists) ~~~~~~~~~~ */ .g-short-form li { float: left; padding: .4em 0; } .g-short-form input[type="text"] { color: #666; padding: .3em .6em; width: 11em; } /*** ****************************************************************** * 3) Page layout containers *********************************************************************/ /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-view { background-color: #333333; border: 1px solid #e8e8e8; border-bottom: none; } /* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */ #g-header { margin-bottom: 1em; background-color: #484848; border-bottom: 1px solid #e8e8e8; } #g-banner { background-color: #333333; border-bottom: 1px solid #e8e8e8; font-size: .8em; min-height: 5em; padding: 1em 20px; position: relative; } #g-content { font-size: 1.2em; padding-left: 20px; position: relative; width: 600px; } #g-sidebar { background-color: #333333; font-size: .9em; padding: 0 20px; width: 220px; } #g-footer { background-color: #484848; border-top: 1px solid #ccc; font-size: .8em; margin-top: 20px; padding: 10px 20px; } /** ******************************************************************* * 4) Content blocks in specific layout containers *********************************************************************/ /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-banner #g-logo img { margin: 0; } #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; } #g-sidebar .g-block-content { padding-left: 1em; } /* Album content ~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-content #g-album-grid { margin: 1em 0; position: relative; z-index: 1; } #g-content #g-album-grid .g-item { background-color: #484848; border: 1px solid #e8e8e8; float: left; font-size: .7em; padding: .6em 8px; position: relative; text-align: center; width: 180px; height: 210px; 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 { color: #ffffcc; display: none; margin-bottom: .6em; } #g-content #g-album-grid .g-album { background-color: #484848; } #g-image-block .g-parent-album h4 span { 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-album h2 span { 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 { background-color: #000; position: absolute !important; z-index: 1000 !important; border: 1px solid #f9bd01; } #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; } /* Individual photo content ~~~~~~~~~~~~~~ */ #g-content #g-item { position: relative; width: 100%; } #g-content #g-photo { position: relative; } #g-content #g-item .g-fullsize-link img { display: block; margin: 1em auto !important; } #g-comments { margin-top: 2em; position: relative; } #g-comments ul li { margin: 1em 0; } #g-comments .g-author { border-bottom: 1px solid #ccc; color: #999; height: 32px; line-height: 32px; } #g-comments ul li div { padding: 0 8px 8px 43px; } #g-comments ul li #g-recaptcha { padding: 0; } #g-comments ul li #g-recaptcha div { padding: 0; } #g-comments .g-avatar { height: 32px; margin-right: .4em; width: 32px; } #g-admin-comment-button { position: absolute; right: 0; top: 2px; } #g-content #g-comment-form { margin-top: 2em; } /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-banner #g-login-menu li, #g-footer #g-credits li { display: inline; } #g-banner #g-login-menu li { padding-left: 1.2em; } #g-footer #g-credits li { padding-right: 1.2em; } #g-content #g-search-results { margin-top: 1em; padding-top: 1em; } /** ******************************************************************* * 5) Navigation and menus *********************************************************************/ #g-site-menu, #g-tag-cloud ul { font-size: 1.2em; } /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-banner #g-login-menu { color: #999; float: right; } /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-site-menu { bottom: 0; display: none; left: 300px; 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 { font-size: .7em; } #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'); } /* Tags and cloud ~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-tag-cloud ul { text-align: justify; } #g-tag-cloud ul li { display: inline; line-height: 1.5em; text-align: justify; } #g-tag-cloud ul li a { text-decoration: none; } #g-tag-cloud ul li span { display: none; } #g-tag-cloud ul li.size1 a { color: #9cf; font-size: 80%; font-weight: 100; } #g-tag-cloud ul li.size2 a { color: #69f; font-size: 90%; font-weight: 300; } #g-tag-cloud ul li.size3 a { color: #69c; font-size: 100%; font-weight: 500; } #g-tag-cloud ul li.size4 a { color: #369; font-size: 110%; font-weight: 700; } #g-tag-cloud ul li.size5 a { color: #0e2b52; font-size: 120%; font-weight: 900; } #g-tag-cloud ul li.size6 a { color: #0e2b52; font-size: 130%; font-weight: 900; } #g-tag-cloud ul li.size7 a { color: #0e2b52; font-size: 140%; font-weight: 900; } #g-tag-cloud ul li a:hover { color: #f30; text-decoration: underline; } #g-welcome-message p { padding-bottom: 1em; } /** ******************************************************************* * 6) jQuery and jQuery UI *********************************************************************/ /* Superfish menu overrides ~~~~~~~~~~~~~~ */ .sf-menu a { border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; } .sf-menu li { color: #fff; background-color: #333; } .sf-menu li li, .sf-menu li li ul li { color: #fff; background-color: #333; } .sf-menu li:hover { color: #fff; background-color: #777; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #777; } /* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ .ui-widget-overlay { background: #000; opacity: .7; } /* 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; } .ui-icon-rotate-ccw { background-position: -192px -64px; } .ui-icon-rotate-cw { background-position: -208px -64px; } /* STUFF THAT NEEDS A HOME */ #g-move ul { padding-left: 1em; } #g-move .selected { background: #999; } /* Server Add */ #g-server-add button { margin-bottom: .5em; } #g-server-add-tree { cursor: pointer; padding-left: 4px; width: 95%; } #g-server-add-tree li { padding: 0; float: none; } #g-server-add-tree span.selected { background: #ddd; } #g-server-add-tree { border: 1px solid #ccc; height: 20em; overflow: auto; margin-bottom: .5em; padding: .5em; } #g-server-add ul ul li { padding-left: 1.2em; } /* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-edit-permissions-form { clear: both; } #g-edit-permissions-form td { background-image: none; } #g-edit-permissions-form fieldset { border: 1px solid #ccc; padding: 0; } #g-permissions .g-denied, #g-permissions .g-allowed { text-align: center; vertical-align: middle; } #g-permissions .g-denied { background-color: #fcc; } #g-permissions .g-allowed { background-color: #cfc; } /*************** STUFF THAT NEEDS A HOME ****************/ #g-add-photos #SWFUpload_0 { position: relative; top: -200px; left: 134px; } #g-add-photos .g-breadcrumbs { border: 0; margin: 0; padding-left:10px; } #g-add-photos-canvas { border: 1px solid #CCCCCC; margin: .5em 0 .5em 0; width: 469px; height: 325px; overflow: auto; } #g-add-photos button { margin-bottom: .5em; float: right; } #g-uploadqueue-infobar { clear: both; } #g-uploadqueue-infobar #g-cancelupload { display: none; cursor: pointer; } #g-add-photos-canvas { } #g-add-photos-queue .progressbar { height: 4px; } #g-add-photos-queue .title { font-size: 1.25em; } #g-add-photos-queue .status { font-size: .75em; } #g-add-photos-queue .box { margin-bottom: 8px; padding: 4px; } #g-add-photos-queue .pending { background-color: #e8e8e8; border: 1px solid #d7d7d7; } #g-add-photos-queue .error { background-color: #fcc; border: 1px solid #ebb; } #g-add-photos-queue .uploading { background-color: #ff9; border: 1px solid #ee8; } #g-add-photos-queue .complete { background-color: #cfc; border: 1px solid #beb; } #g-admin-g2-import-notes { padding-bottom: 20px; } #g-admin-g2-import-details { padding-top: 20px; } #g-admin-g2-import-details .g-warning { margin-top: 4px; } #g-admin-g2-import-details .g-info { padding: 2px; border: 1px solid #999; margin-bottom: 10px; } #g-admin-g2-import-notes p, #g-admin-g2-import-details .g-info p { padding: 0; margin: 0; } #g-admin-g2-import-notes ul li, #g-admin-g2-import .g-info ul li { padding-left: 0; margin-left: 20px; list-style-type: disc; } /* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */ .rtl { direction: rtl; } .rtl caption, .rtl th, .rtl #g-dialog { text-align: right; } .rtl .g-right, .rtl #g-header #g-quick-search-form, .rtl #g-header #g-login-menu, .rtl .ui-icon-right .ui-icon { clear: left; float: left; } .rtl .g-left, .rtl #g-dialog .g-cancel, .rtl form ul ul li, .rtl input[type="submit"], .rtl input[type="reset"], .rtl .g-short-form li, .rtl #g-header #g-logo img, .rtl #g-content #g-album-grid .g-item, .rtl #g-site-menu, .rtl .g-breadcrumbs li, .rtl .g-pager li, .rtl .g-buttonset li, .rtl .ui-icon-left .ui-icon { float: right; }