/*-------------------------------------------------------------------- * You may modify the styles below to customize the look and feel * of photoGenoa pages. * * You may also consider applying a different jQuery UI theme to customize * the look of sliders, buttons, etc. * * Turn OFF line-wrap in your text editor to view this file correctly. * -------------------------------------------------------------------- */ /* ROOT STYLES ----------------------------------------------------------------------------------------- */ /* * #photoBin is the element that contains all photoGenoa content. Set its width and layout properties here * WARNING: Do NOT add padding to this element; use margins instead. * WARNING: Setting the width below 800px is not recommended. (It may result in funky layout issues.) * Note: PhotoGenoa is smart. Set the width here and it'll adapt everything else. */ #photoBin { width: 960px; padding-bottom: 80px; /* Use padding instead of margin here, because Firefox is absolutely retarded and will shift everything down when you apply a bottom margin. I hate Mozilla. Use WebKit or go home. */ } /* jQuery UI Overrides -------------------------------------------------------------------------------------- */ /* NOTE: * If you need to customize additional aspects of your chosen jQuery UI theme, * open the theme's css file, copy the appropriate declarations here and then modify * them as needed. You should never edit the theme's CSS file directly! * * The same rule applies with custom images. Copy the theme's images to the 'skin-images' * folder and modify them there. Never overwrite the theme's images! */ /* Interaction States */ /* Default State */ .ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #382f28; /*background: #7a925d url(skin_images/bg-ui-state-default.gif) 50% 50% repeat-x; */ font-weight: normal; color: #9bcc60; outline: none; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, /*Our buttons are anchor elements themselves, so we'll need this additional line for each state:*/ a.ui-state-default, a.ui-state-default:link, a.ui-state-default:visited { color: #eeeeee; text-decoration: none; outline: none; } /* Hover State */ .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #d6c085; /*background: #d6c085 url(skin_images/bg-ui-state-hover.gif) 50% 50% repeat-x; */ font-weight: normal; color: #ffffff; outline: none; } .ui-state-hover a, .ui-state-hover a:hover, a.ui-state-hover, a.ui-state-hover:hover { color: #ffffff; text-decoration: none; outline: none; } /* Active State */ .ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #c4c5c3; /*background: #f0efea url(skin_images/ui-bg_diagonals-small_100_f0efea_40x40.png) 50% 50% repeat; */ font-weight: normal; color: #403D38; outline: none; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited, a.ui-state-active, a.ui-state-active:link, a.ui-state-active:visited { color: #403D38; outline: none; text-decoration: none; } /* Interaction Cues */ /* Disabled State */ .ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .12; filter:Alpha(Opacity=12); /* Oh Microsoft, how I hate thee. Let me count the ways. */ border: 1px solid #d6c085; /*background: #7a925d url(skin_images/bg-ui-state-default.gif) 50% 50% repeat-x; */ font-weight: normal; color: #ffffff; outline: none; } .ui-state-disabled a, .ui-state-disabled a:link, .ui-state-disabled a:visited, a.ui-state-disabled, a.ui-state-disabled:link, a.ui-state-disabled:visited { color: #ffffff; text-decoration: none; outline: none; } /* Typography -------------------------------------------------------------------------------------- */ /* * If you'd like PhotoGenoa to follow the typography styles you've set for the * rest of your website, simply include your main CSS file in the header of every * PhotoGenoa page (index.php, gallery.php, upload-page.php) * * Otherwise, uncomment the styles below and customize the typography as you like * * NOTE: Some text sizes and fonts are hard-coded into photoGenoa. That is, they * do not use the standard h1 - h6 settings. This is because text in some places * (such as the captions under photos) must be a certain size to avoid layout issues. * Any text that can be resized without layout problems will follow the standard * h1 - h6 settings you set here or in your main CSS file. */ /* #photoBin { font: Helvetica, Arial, sans-serif; line-height: 1.5; color: #ccc; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; color: #ce5d16; } h2 { font-size: 2em; line-height: 1.2em; margin-bottom: 0.5em; color: #ce5d16; } h3 { font-size: 1.5em; line-height: 1.3; margin-bottom: .5em; color: #ce5d16; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: .9em; color: #ffffff; text-transform: uppercase; } h5 { font-size: 1em; font-weight: bold; margin-bottom: .25em; color: #ce5d16; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } p { margin: 0 0 2.5em; } */ /* INDEX PAGE --------------------------------------------------------------------------------------- */ /* Album Index Page Toolbar (contains title and upload button) */ #album-index-page-toolbar { margin: 0px 0px 35px 0px; } /* Title & description */ #album-index-page-title { width: 480px; margin: 0px 0px 0px 240px; text-align: left; } #album-index-page-upload-button { float: right; margin-top: 5px; } /* Album Thumbnails */ .album-wrapper { margin-top: 0px; margin-right: 30px; margin-bottom: 40px; /* Allow room for album title text + space if album thumb below this one is vertical! */ margin-left: 30px; } /* Album Titles (below each album thumbnail) */ .album-title { font-size: 16px; padding-top: 5px; line-height: 1.3; color: #114401; text-align:center } .album-title-hover { color: #ce5d16; } /* Album thumbnail borders NOTE: this setting also applies to thumbnails on the individual album views. For consistency. */ .thumbs a img, .thumbs-vertical a img, #slideshow-image-container img { border: 1px solid #ffffff; } /*Borders cause images to exceed dimensions of containing DIVs. Adjust IMG height/width % in gallery.php if changed.*/ /* Album thumbnail hover. Also applies on individual album views. */ .thumbs a:hover img, .thumbs-vertical a:hover img { border: 1px solid #2b1903; } /* Shared Styles: Grid & Slideshow Views --------------------------------------------------------------------------------------- */ /* Album Title at top of page */ #albumTitle { width: 100%; margin: 0px 0px 0px 0px; text-align: center; } #albumTitle h2 { margin: 0; padding: 0; } #albumTitle .instructions { color: inherit; } /* Toolbar Area */ #album-toolbar { margin: 10px 0px 25px 0px; color: #666; } /* Color: color of labels and +/- icons in toolbar */ #slider-handle { background: #cdc2a1; } /* Zoom slider handle color */ #slider .ui-slider-range { background: #382f28; } /* Zoom slider track color (for area to the left of the handle) */ /* Specifics: Grid View --------------------------------------------------------------------------------------- */ /* Thumbnails */ .photo-wrapper { /* These width/height values are the starting width/height for the thumbnails. You may need to adjust these values if you've changed the width of #photoBin or if you've changed the margins on each thumbnail (below). WARNING: these two values *MUST* be equal. Do not set them below 75 or above 320 unless you've modified 'album-page-controller.js' and 'config.php' to adjust thumbnail sizes */ width: 152px; height: 152px; /* These values control how much space is between each thumbnail WARNING: left/right margins MUST be the same! Otherwise, you'll get jerky, unreliable resize animations. */ margin-top: 20px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px; } /* Specifics: Slideshow View ---------------------------------------------------------------------------------------- */ /* There are no customizable options for this view. */ /* UPLOADS PAGE ---------------------------------------------------------------------------------------- */ /* Toolbar area at top of page */ #uploads-page-toolbar { margin: 0px 0 20px 0; } /* Title & description */ #uploads-page-title { width: 480px; /* Set auto left/right margins to center */ margin: 0 auto; text-align: left; } /* Email Form */ #upload-email-wrapper { margin-top: 90px; } /* File selection area */ .upload-divider { border-bottom: 1px solid #525252; } /* Horizontal lines at top & bottom of file list */ .fileUploadQueueItem { background-color: #e5dcbd; border: 3px solid #2b1903; } .fileUploadProgress { background-color: #FFFFFF; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5; } .fileUploadProgressBar { background-color: #114401; }