/* Common ----------------------------------------------- */ a, a:visited { color: #258; text-decoration: none; border-bottom: 1px dotted #469; } a:hover, a:active { color: #933; border-color: #b55; border-bottom-style: solid; } h1 { padding: 0 0 .5em; font-size: 1.7em; font-weight: normal; color: #543; border-bottom: 1px solid #ddd; } /* Page structure ----------------------------------------------- */ body { margin: 0; font-family: "Gill Sans", "Trebuchet MS", Verdana, sans-serif; font-size: small; color: #333; background-color: #ccb; background-image: url("../images/backgrounds/body-bg.jpg"); background-repeat: repeat-x; background-position: top; } /* ~~~~~ Header ~~~~~ */ div#g-header { padding: 0.5em 0; height: 1.5em; line-height: 1.5em; background-color: #000; background-image: url("../images/backgrounds/body-breadcrumbs-bg.gif"); background-repeat: repeat; background-position: top; border-bottom: 3px solid #bba; } a#g-logo, form#g-quick-search-form, div#g-site-menu { display: none; } #g-header-text{ color: #fff; font: oblique small-caps bold 1em Georgia,serif; position: absolute; left: 15px; height: 1.5em; line-height: 1.5em; } ul#g-login-menu { list-style-type: none; position: absolute; top: 0; right: 0; display: block; margin: 0; /*padding: 0.5em;*/ padding: 0; width: 20em; width: 2.5em; height: 2.5em; background: url('../images/icons/g-login-menu.png') no-repeat center center; z-index: 2; } ul#g-login-menu > li { display: none; text-align: right; padding: 2px 0; width: 20em; margin-left: -17.6em ; /* -(20-2.5) */ background-color: #fcfcfc; color: #000; } ul#g-login-menu > li:first-child { margin-top: 2.4em; } ul#g-login-menu > li > a { margin-right: 0.5em; } ul#g-login-menu > li:hover, ul#g-login-menu > li:hover > a { background-color: #5266f3; color: #fff; border-color: #fff; /* a:hover */ } ul#g-login-menu:hover { background-color: #5266f3; } ul#g-login-menu:hover > li { display: block; } ul.g-breadcrumbs { margin: 0; padding: 0; color: #777; text-align: center; } ul.g-breadcrumbs > li { display: inline; padding-left: 0.3em; } ul.g-breadcrumbs > li:after { content: "»"; } ul.g-breadcrumbs > li.g-active:after { content: ""; } ul.g-breadcrumbs > li > a { margin-right: 0.3em; color: #888; border-color: #777; } /* ~~~~~ Content ~~~~~ */ div#bd { padding: 15px; } /* ~~~~~ Footer ~~~~~ */ /* TODO */ #g-footer { clear: both; margin: 0 15px; border-top: 1px solid #ddc; color: #887; padding: .5em 0 2em 0; text-align: center; } #g-footer #g-credits { list-style: none; display: inline; margin: 0 auto; padding: 0; } #g-footer #g-credits li { display: inline; } /* Albums & Items ----------------------------------------------- */ .g-item, #g-item .g-paginator li.g-first, #g-item .g-paginator li.g-text-right { display: block; position: relative; text-align: center; background: #fff url("../images/backgrounds/thumb.png") no-repeat; border-radius: 5px; box-shadow: 3px 3px 0px #b7b7a7; -webkit-border-radius: 5px; -webkit-box-shadow: 3px 3px 0px #b7b7a7; -moz-border-radius: 5px; -moz-box-shadow: 3px 3px 0px #b7b7a7; } .g-item > a, #g-item .g-paginator li.g-first a, #g-item .g-paginator li.g-text-right a { display: block; width: 100%; height: 100%; text-decoration: none; background-position: center; background-repeat: no-repeat; border: 0; vertical-align: middle; } .g-item > a { display: table-cell; } #g-item .g-paginator li.g-first a, #g-item .g-paginator li.g-text-right a { border-bottom: none; text-indent: -9999em; font-size: 1px; color: #fff; } .g-item > h2 { position: absolute; left: 15px; bottom: 8px; margin: 0; padding-top: 8px; background: #fff; text-align: center; color:#333; line-height: 10px; font-size: 10px; font-weight: normal; text-transform: uppercase; letter-spacing: .1em; } .g-item > h2 a { border: 0; } #g-item .g-paginator li.g-text-right { position: absolute; top: 0px; } /* ~~~~~ Album ~~~~~ */ .g-item { float:left; margin:0 10px 10px 0; } .g-item.g-album > a { background-image: url("../images/emblems/g-item_g-album.png"); background-repeat: no-repeat; } #g-content > #g-info { clear:left; float:left; width:22%; margin:0; line-height:1.4em; } #g-content > #g-info h1 { margin:0 0 .5em; text-align:left; text-transform:none; letter-spacing:0; } #g-content > #g-info .g-description { line-height:1.6em; margin-bottom:1em; } #g-content > #g-album-grid { float:right; position:relative; width:75%; margin:0 0 15px; padding:0; list-style:none; line-height:1.4em; } #g-content > #g-album-grid li.g-item { } /*.g-item .g-context-menu,*/ .g-item .g-metadata { display: none; } .g-item > ul.g-context-menu { list-style-type: none; display: none; position: absolute; top: 0px; left: 0px; font-size: 12px; width: 32px; height: 32px; padding: 2px; margin: 0; } .g-item:hover > ul.g-context-menu { display: block; } .g-item:hover > ul.g-context-menu > li { display: block; width: 32px; height: 32px; background: url('../images/emblems/g-context-menu.png') no-repeat; } .g-item:hover > ul.g-context-menu > li:hover { background: none; } .g-item:hover > ul.g-context-menu > li > a { display: none; } .g-item:hover > ul.g-context-menu > li > ul { list-style-type: none; background: url('../images/backgrounds/000000_opacity50.png') 0 0 repeat; padding: 5px 2px ; display: none; position: absolute; top: 0; left: 0; width: 230px; text-align: left; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; z-index: 2; } .g-item:hover > ul.g-context-menu > li:hover > ul { display: block; } .g-item:hover > ul.g-context-menu > li:hover > ul > li { line-height: 16px; padding: 0px 0 0px 20px; } .g-item:hover > ul.g-context-menu > li:hover > ul > li > a { color: #fff; text-decoration: none; border: none; display: block; padding: 4px 0; } .g-item:hover > ul.g-context-menu > li:hover > ul > li > a > span { height: 16px; width: 16px; display: block; position: absolute; left: 2px; background-image: url("../images/icons/ui-icons_d8e7f3_256x240.png"); } .g-item:hover > ul.g-context-menu > li:hover > ul > li:hover > a { color: #f9bd01; } .g-item:hover > ul.g-context-menu > li:hover > ul > li:hover > a > span { background-image: url("../images/icons/ui-icons_f9bd01_256x240.png"); } span.ui-icon-pencil { background-position: -64px -112px; } span.ui-icon-folder-open { background-position: -16px -96px; } span.ui-icon-star { background-position: -224px -112px; } span.ui-icon-trash { background-position: -176px -96px; } span.ui-icon-rotate-ccw { background-position: -192px -64px; } span.ui-icon-rotate-cw { background-position: -208px -64px; } span.ui-icon-plus { background-position: -16px -128px; } span.ui-icon-note { background-position: -64px -96px; } span.ui-icon-key { background-position: -112px -128px; } #g-content > .g-paginator { clear:left; float:left; width:22%; position: relative; padding: 2em 0 0 0; margin: 0; } #g-content > .g-paginator li { padding: 0; margin: 0; list-style: none; } #g-content > .g-paginator .g-info { position: absolute; top: 0; width: 100%; background:#bba; text-align: center; padding:2px 0; margin:0 0 .5em; } #g-content > .g-paginator .g-first, #g-content > .g-paginator .g-text-right { width: 45%; float: left; } #g-content > .g-paginator .g-text-right { float: right; text-align: right; } #g-content > .g-paginator .g-first a + a:before { content: "« "; } #g-content > .g-paginator .g-text-right a:first-child:after { content: " »"; } #g-content > .g-paginator .g-first a:first-child, #g-content > .g-paginator .g-text-right a + a, #g-content > .g-paginator .ui-state-disabled { display: none; } #g-sidebar { clear:left; float:left; width:22%; } #g-sidebar .g-block { margin-top: 1em; } #g-sidebar .g-block h2 { width: 100%; background:#bba; text-align: center; padding:2px 0; margin:0 0 .5em; font-size: 1em; font-weight: normal; } /* ~~~~~ Item ~~~~~ */ #g-item { position: relative; } #g-item #g-photo, #g-item #g-movie { text-align: center; display: inline; position: relative; left: 50%; background: #b7b7a7; } #g-item #g-photo a { border: none; } #g-item #g-movie, #g-item #g-movie a { display: block; } #g-item #g-photo img, #g-item #g-movie object { border: 10px solid #fff; -webkit-box-shadow: 3px 3px 0px #b7b7a7; -moz-box-shadow: 3px 3px 0px #b7b7a7; } #g-item .g-paginator { position: absolute; left: 50%; width: 0px; height: 0px; list-style: none; padding: 0; margin: 0; } #g-item .g-paginator li { padding: 0; margin: 0; display: inline; } #g-item .g-paginator li.g-info { display: block; position: absolute; right: 340px; /* 640/2 + 10 + 10 */ top: 230px; width: 230px; height: 30px; padding-top: 10px; margin-top: 30px; text-align: right; font-style: italic; background-image: url("../images/divider_l.png"); background-position: right top; background-repeat: no-repeat; } #g-item .g-paginator li.g-first a:hover span, #g-item .g-paginator li.g-text-right a:hover span { display: block; position: relative; height: 22px; top: 10px; background-position: center; background-repeat: no-repeat; z-index: 2; } #g-item .g-paginator li.g-first a:hover span { background-image: url("../images/photonav_prev.png"); } #g-item .g-paginator li.g-text-right a:hover span { background-image: url("../images/photonav_next.png"); } #g-item .g-context-menu { display: none; } #g-item #g-info { width: 230px; position: absolute; top: 260px; /* (230 + 30) */ left: 50%; margin-left: 340px; /* (640/2 + 10 + 10) */ } #g-item #g-info h1 { text-align: left; font-size: 1em; border: none; padding-top: 10px; background-image: url("../images/divider_r.png"); background-position: left top; background-repeat: no-repeat; } #g-item .g-block { display: block; margin: auto; } #g-item .g-block#g-metadata { text-align: right; display: block; width: 300px; /* 230px is not enought: french is verbose */ position: absolute; right: 50%; margin-right: 340px; /* (640/2 + 10 + 10) */ top: 300px; /* (230 + 30 + 10 + 30) */ } #g-item .g-block#g-metadata h2 { font-size: 1em; padding-top: 10px; text-align: right; font-style: italic; background-image: url("../images/divider_l.png"); background-position: right top; background-repeat: no-repeat; } #g-item .g-block#g-metadata ul { list-style: none; padding: 0; } /* Status and validation messages ~~~~ */ .g-message-block { background-position: .4em .3em; border: 1px solid #ccc; padding: 0; } #g-action-status { width: 75%; float: right; 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%; } .g-warning { background: #fcf9ce url('../images/icons/ico-warning.png') no-repeat .4em 50%; } /* ~~~~~ Dialog ~~~~~ */ .ui-widget-overlay { background: #000; opacity: .8; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .ui-dialog { background: url("../images/backgrounds/f0f0f0_opacity80.png"); position: fixed !important; padding: 0; } .ui-dialog-titlebar { display: none; } #g-dialog { padding: 0 2em 0 15px; margin: 0; } #g-dialog form, #g-dialog div#g-edit-permissions-form { padding: 0 0 0 63px; /* 48 + 15 */ margin: 0; background-repeat: no-repeat; background-position: 0px 3em; } #g-dialog form#g-add-album-form { background-image: url("../images/icons/g-add-album-form.png"); } #g-dialog form#g-edit-album-form { background-image: url("../images/icons/g-edit-album-form.png"); } #g-dialog form#g-add-photos-form { background-image: url("../images/icons/g-add-photos-form.png"); } #g-dialog form#g-confirm-delete { background-image: url("../images/icons/g-confirm-delete.png"); } #g-dialog div#g-edit-permissions-form { background-image: url("../images/icons/g-edit-permissions-form.png"); } #g-dialog form fieldset, #g-dialog div#g-edit-permissions-form fieldset { border: none; padding: 0; margin: 0; } #g-dialog form fieldset legend, #g-dialog div#g-edit-permissions-form fieldset legend { font-size: 1em; font-weight: bold; /*text-align: center;*/ display: block; padding: 1em 0 1em 0; /*margin: auto;*/ } #g-dialog form fieldset ul, #g-dialog div#g-edit-permissions-form fieldset ul { list-style: none; margin: 0; padding: 0; } #g-dialog form fieldset ul li, #g-dialog div#g-edit-permissions-form fieldset ul li { padding-bottom: 0.8em; } /*#g-dialog form fieldset ul li label { padding-bottom: 0.5em; }*/ #g-dialog input.textbox, #g-dialog input[type=text], #g-dialog input[type=password], #g-dialog textarea { /*border: 1px solid #000;*/ width: 100%; padding: 0; margin: 0; } #g-dialog textarea { height: 8em; } #g-dialog input[type=submit].submit { float: right; } #g-dialog a.g-cancel { float: right; -moz-appearance: button; -webkit-appearance: push-button; /*clear: left;*/ } #g-add-photos-canvas-sd { height: 33px; /*margin-right: 63px;*/ position: relative; } #g-add-photos-button-sd { z-index: 1; display: block; position: relative; width: 150px; height: 20px; top: 6px; padding: 0; margin: auto; } #g-add-photos-canvas-sd object { margin: 0; z-index: 100; position: relative; display: block; margin: auto; top: -20px; /*top: 0; left: 50%; padding-right: 75px;*/ /*position: relative;display: none;*/ } .uploadifyQueue { display: none; } #g-add-photos-progress { margin-top: 1em; } #g-add-photos-progress li { padding: 0; } #g-add-photos-progress-text { font-size: 1.2em; } #g-add-photos-progressbar-frame { width: 100%; padding: 0 !important; border: 1px solid #aaa; } #g-add-photos-progressbar { display: block; height: 22px; width: 0%; background-image: url("../images/backgrounds/pbar-ani.gif"); background-repeat: repeat-x; } #g-add-photos-progressbar.stop { background-image: url("../images/backgrounds/pbar-ani-stop.gif"); } #g-dialog div#g-edit-permissions-form table { width: 100%; border: none; padding: 0; margin: 0; border-spacing: 0px; border-collapse: collapse; } #g-dialog div#g-edit-permissions-form table a { border: none; } #g-dialog div#g-edit-permissions-form tbody tr { border-bottom: 1px solid #aaa; } #g-dialog div#g-edit-permissions-form thead th { font-weight: normal; } #g-dialog div#g-edit-permissions-form tbody th { text-align: left; } #g-dialog div#g-edit-permissions-form td { width: 65px; } /*#g-dialog input[type=submit].submit { float: right; } #g-dialog a.g-cancel { float: left; clear: left; }*/ /* Forms in dialogs and panels ~~~~~~~~~ */ /*#g-dialog ul li { padding-bottom: .8em; } 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; }*/ /* Dialogs and panels ~~~~~~~~~~~~~~~~~~ */ /*#g-dialog { text-align: left; } #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; }*/