/* ----------------------------------------------------------------- Chromecore CMS Created 17.06.2008 by AK Last Updated: See SVN Documentation: see http://chromewiki/doku.php?id=front_end_development_tips_for_back_end&s=forms ----------------------------------------------------------------- */ @import "common.css"; /* CSS reset */ body { font-family: Arial, Helvetica, Sans-serif; color:#413a3c; background-color: #fff; text-align:center; } /* Customisable section */ #shell #header { background:url(/resources/images/content/morrison-co-logo-large.gif) no-repeat 0 0; } #shell #login-form { background:url(/resources/images/ui/backgrounds/morrisons-dragon-shell-bg.jpg) no-repeat right top; } /* STRUCTURE ------------------------------------------------- */ /* temporary grid display */ #temp-layout-grid { display:none; background:url(/resources/images/ui/backgrounds/temp-grid-overlay.gif) repeat-y center 0 !important; position:absolute; z-index:8; top:0; left:7px; width:100%; height:6000px; } #shell { width:980px; text-align:left; margin:0 auto; background:#fff url(/resources/images/ui/backgrounds/page-bg-left.gif) repeat-y; } #shell .liner { background:url(/resources/images/ui/backgrounds/page-bg-right.gif) repeat-y right top; } #shell .liner .liner { background:url(/resources/images/content/chrome-logo-1-large.jpg) no-repeat 16px 13px; padding:13px 0 13px 16px; } #main-content { width:576px; min-height:400px; float:left; margin-top:-3px; } .wide #main-content { width:768px; } #footer { font-size:0.8em; text-align:right; margin:0 auto; width:980px; } #footer .liner-top { background:url(/resources/images/ui/backgrounds/page-bg-bottom.gif) no-repeat; height:15px; } /* LAYOUT TEMPLATES To apply any configuration of columns from one to a maximum of five, use the following classes followed by a .clear and/or a .clearer class. * 'layout-col-1' – spans one column * 'layout-col-2' – spans two columns * 'layout-col-3' – spans three columns * 'layout-col-4' – spans four columns * 'layout-col-5' – spans five columns -------------------------------------------- */ /* resusable row & column decorations against white */ .layout-1xxx { background:url(/resources/images/ui/dividers/layout-border-1xxx-v.gif) repeat-y; } .layout-x1xx { background:url(/resources/images/ui/dividers/layout-border-x1xx-v.gif) repeat-y; } .layout-xx1x { background:url(/resources/images/ui/dividers/layout-border-xx1x-v.gif) repeat-y; } .layout-xxx1 { background:url(/resources/images/ui/dividers/layout-border-xxx1-v.gif) repeat-y; } .layout-11xx { background:url(/resources/images/ui/dividers/layout-border-11xx-v.gif) repeat-y; } .layout-x11x { background:url(/resources/images/ui/dividers/layout-border-x11x-v.gif) repeat-y; } .layout-xx11 { background:url(/resources/images/ui/dividers/layout-border-xx11-v.gif) repeat-y; } .layout-1xx1 { background:url(/resources/images/ui/dividers/layout-border-1xx1-v.gif) repeat-y; } .layout-111x { background:url(/resources/images/ui/dividers/layout-border-111x-v.gif) repeat-y; } .layout-x111 { background:url(/resources/images/ui/dividers/layout-border-x111-v.gif) repeat-y; } .layout-1111 { background:url(/resources/images/ui/dividers/layout-border-1111-v.gif) repeat-y; } .layout-11x1 { background:url(/resources/images/ui/dividers/layout-border-11x1-v.gif) repeat-y; } .layout-1x11 { background:url(/resources/images/ui/dividers/layout-border-1x11-v.gif) repeat-y; } .layout-x1x1 { background:url(/resources/images/ui/dividers/layout-border-x1x1-v.gif) repeat-y; } .layout-1x1x { background:url(/resources/images/ui/dividers/layout-border-1x1x-v.gif) repeat-y; } .layout-1xxx, .layout-x1xx, .layout-xx1x, .layout-xxx1, .layout-11xx, .layout-x11x, .layout-xx11, .layout-1xx1, .layout-111x, .layout-x111, .layout-1111, .layout-11x1, .layout-1x11, .layout-x1x1, .layout-1x1x { min-height:100px; } /* reusable layout columns */ .layout-col-1, .layout-col-2, .layout-col-3, .layout-col-4, .layout-col-5 { float:left; margin-left:12px; } .layout-col-1 { width:180px; float:left; } .layout-col-2 { width:372px; float:left; } .layout-col-3 { width:564px; float:left; } .layout-col-4 { width:756px; float:left; } .layout-col-5 { width:948px; margin:0; } .layout-col-2 .layout-col-1, .layout-col-2-first .layout-col-1, .layout-col-3 .layout-col-1, .layout-col-3-first .layout-col-1, .layout-col-4 .layout-col-1, .layout-col-4-first .layout-col-1, .layout-col-5 .layout-col-1 { margin:0; } /* LINKS ------------------------------------------------- */ a { color:#413a3c; text-decoration:underline; } a:hover { color:#e0001a; } /* Back to top */ #main-content .backtotop { text-align:right; } #main-content .backtotop a { text-decoration:none; color:#e0001a; } /* HEADER ------------------------------------------------- */ #header { position:relative; width:960px; margin-bottom:9px; } #header .h1-title { background:#534b4d; width:372px; height:169px; margin:0 0 0 192px; } #header .h1-title h1 { margin:0 0 -3px; font-size:1.9em; color:#fff; padding:9px 10px 0; } #header .h1-title h1 a { display:block; color:#fff; font-weight:normal; text-decoration:none; } #header img { position:absolute; top:0; right:13px; } #header .h1-title .byline { color:#c2bfc0; font-size:1.3em; display:block; text-transform:uppercase; margin-left:11px; } /* MAIN NAV & SECONDARY NAV (use #nav-wrapper to target both) ------------------------------------------------- */ #nav-primary { float:left; width:180px; } #nav-wrapper ul li { font-size:1.05em; line-height:1.4em; } #nav-wrapper ul li a { font-weight:bold; color:#413a3c; display:block; text-transform:uppercase; text-decoration:none; padding:6px; background:url(/resources/images/ui/dividers/dotted-divider-h-1.gif) repeat-x left bottom; } #nav-wrapper ul li a:hover { color:#e0001a; background-color:#f9f9f9; } /* submenu */ #nav-wrapper ul li.active a, #nav-wrapper ul li.active a:hover { color:#e0001a; background-color:#f0f0f0; } #nav-wrapper ul li.active li a { color:#413a3c; font-size:0.85em; background:#f9f9f9 url(/resources/images/ui/dividers/dotted-divider-h-2.gif) repeat-x left bottom; padding:4px 6px 4px 24px; } #nav-wrapper ul li.active li a:hover { color:#e0001a; background-color:#fff; } #nav-wrapper ul li.active li.active a { color:#e0001a; } #nav-wrapper ul li.active li li a { padding-left:36px; font-weight:normal; font-size:0.75em; } /* search box */ #nav-primary .search_box { margin:64px 0 0; } #nav-primary .search_box div { width:180px; } #nav-primary .search_box input { width:172px; } #nav-primary .search_box .submit { width:auto; margin-top:6px; } /* HEADINGS ------------------------------------------------- */ h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; text-transform:uppercase; line-height: 1.4em; font-weight:bold; } h1 { font-size:1.2em; margin:0.5em 0 0; } h2 { font-size:1.3em; margin:0.5em 0 0.6em; } h2.page-title { margin-left:12px; } /* BODY TEXT STYLES ------------------------------------------------- */ #main-content p { margin-bottom:1em; } #main-content .text-date, #related .text-date { color:#000; } #main-content .text-body-large { font-size:1.2em; } /* LIST STYLES ------------------------------------------------- */ #main-content ul, #main-content ol { margin:1.2em 30px 1.2em; } #main-content ol { margin-left:38px; } #main-content ol ol { margin-left:22px; } #main-content ul ul, #main-content ol ol, #main-content ul ol, #main-content ol ul { margin-top:0.6em; } #main-content ul li { list-style:disc; } #main-content ol.alpha li { list-style-type: lower-latin; } #main-content ol.alpha ol li, #main-content ol.alpha ul li { list-style: inherit; } /* A to Z */ #main-content .alphabet ul { margin:0 0 0.5em; } #main-content .alphabet ul li { display:inline; border-right:1px solid #ccc; padding:0 4px 0 2px; } #main-content .alphabet ul li a { color:#ed1c24; text-decoration:none; } #main-content .alphabet ul li a:hover { text-decoration:underline; } /* Pagination */ .nav-pagination { min-height:2em; font-size:0.92em; margin:6px 18px 2em 12px; } #main-content .nav-pagination p { float:left; width:40%; margin:0; } #main-content .nav-pagination ul { float:right; width:60%; text-align:right; margin:0; } #main-content .nav-pagination ul li { display:inline; margin-left:-4px; } .nav-pagination ul li a, .nav-pagination ul li strong { border-right:2px solid #ccc; padding:0 6px 1px; font-weight:normal; text-decoration:none; } .nav-pagination ul li strong { font-weight:bold; } .nav-pagination ul li.paginationPreviousVisible a { margin-right:6px; background:url(/resources/images/ui/icons/left-arrow.gif) no-repeat 0 0; padding-left:16px; } .nav-pagination ul li.paginationNextVisible a { border:none; background:url(/resources/images/ui/icons/right-arrow.gif) no-repeat right top; padding-right:16px; } .nav-pagination ul li.paginationPreviousVisible a:hover { text-decoration:underline; color:#ed1c24; } /* Footer nav */ #footer ul { margin-bottom:2em; } #footer li { display:inline; border-right:1px solid #ccc; padding:0 4px; } #footer .last { border:none; } /* DATA TABLES ------------------------------------------------- */ table caption, table th, table td { vertical-align:top; text-align:left; } table th { border-bottom:1px solid #999; padding:5px 6px; text-transform:uppercase; background:#de1b21 url(/resources/images/ui/backgrounds/th-bg-red.gif) repeat-x; color:#fff; font-size:1em; } table th a { color:#fff; text-decoration:none; } table th a:hover { color:#fff; text-decoration:underline; } table td { border-bottom:1px dotted #ccc; padding:3px; } table tr td { background:#f5f5f5; } table tr.alt td { background:#fff; } /* .data-record-list table */ .data-record-list { margin-top:1em; width:100%; } .data-record-list th { white-space:nowrap; background:none; border-bottom:4px solid #c3bcba; color:#534b4d; font-weight:bold; padding-bottom:3px; line-height:1.2em; } .data-record-list th a { color:#534b4d; } .data-record-list th a:hover { color:#ed1c24; text-decoration:none; } .data-record-list th img { vertical-align:middle; } .data-record-list td { border-bottom:none; padding:3px 6px; } .data-record-list .last td { background:url(/resources/images/ui/dividers/dotted-divider-h-1.gif) repeat-x left bottom; } /* FORMS ------------------------------------------------- */ .submit { margin:12px 0.2em 0.2em 0; } .submit input { cursor:pointer; } fieldset { background:#e7e4e3; padding:13px; margin-bottom:12px; font-size:0.9em; } input { } label, .label { color:#534b4d; } /* Text/textarea fields */ .textfield-group, .textarea-group { margin:0 0 12px; } .textfield-group div, .textarea-group div { width:412px; } .textfield-group input, .textarea-group input { padding:3px; border:1px solid #c3bcba; border-bottom:4px solid #b1a8a6; background:#fff; color:#776b6e; } /* Long versions */ .textfield-group input.form-text-control-long, .textarea-group input.form-text-control-long, .textfield-group .form-text-control, .textarea-group .form-text-control { width:396px; } /* Medium versions */ .textfield-group input.form-text-control, .textarea-group input.form-text-control { width:172px; } /* readonly */ .textfield-group .readonly input, .textarea-group .readonly input { border-color:#d5d0cf; border-bottom-color:#bcb4b3; background-color:#f3f1f1; color:#b5aeb0; } /* variations */ .textfield-group span.calendar-input-box-container { border:none; } /* validations */ .textfield-group .validationerror input, .textarea-group .validationerror input { border-bottom-color:#b5151a; } .textfield-group div.validationerror span, .textarea-group div.validationerror span { border-bottom-color:#d71920; } /* Radio/checkbox fields */ .radio-group { margin:0 0 12px; } #main-content .radio { margin:3px 3px 0; border:none; background:none; width:auto; display:inline; } /* Select fields */ .select-group { margin:0 0 12px; } /* Submit/buttons */ .submit input, input.submit { color:#fff; padding:4px 8px 2px; border:1px solid #534b4d; background:#c71d30; text-transform:uppercase; font-size:0.9em; -moz-border-radius: 5px; -webkit-border-radius: 5px; width:auto; } /* Error messages */ #message { color:#e0001a; background:#f9f9f9; padding:9px 13px; border-bottom:2px solid #e3dedd; margin-top:12px; } #error-panel {margin-left:200px; margin-bottom:10px; border: solid #ff0000 1px; color: #ff0000; padding: 10px;}/*Added by Trevor. This sets the l&f of the error panel displayed when there is a failed database connection*/ /* Editable records */ .view-details-container { background:#f3f2f1; padding:13px 0 30px; margin-bottom:12px; font-size:0.9em; } .view-details-container .view-details-row { clear:both; border-bottom:1px solid #eceae9; padding:4px 13px; } .view-details-container .view-details-label { float:left; clear:both; width:130px; font-weight:bold; } .view-details-container .view-details-field, .view-details-container .view-details-field-long-text { margin-left:143px; } #main-content .view-details-container .view-details-field ul, #main-content .view-details-container .view-details-field ul li { display:inline; margin:0; } /* Image lists */ .layout-col-1 #image-list { margin-top:50px; } #image-list img { border:2px solid #b1a8a6; margin: } /* Login form */ #login-form { margin-top:-10px; background:#d41720 url(/resources/images/content/chrome-hq-red.jpg) no-repeat; min-height:254px; } #login-form fieldset { background:none; padding-top:0; font-size:1em; } #login-form .textfield-group label { color:#fff; } #login-form .submit input { } #login-form .link-extra { margin-top:36px; } #login-form a { color:#fff; } #login-form .failed-message { color:#ff0000; } /* Search box */ #search-box { margin-top:32px; background:#c4c7bf; padding:3px 10px 8px; } #search-box fieldset { background:none; } #search-box .textfield-group label { position:absolute; visibility:hidden; } #search-box .textfield-group div span { width:162px; } #search-box .textfield-group div input { width:154px; } /* POPUPS ------------------------------------------------- */ .popup { position:fixed; top:50%; left:50%; width:562px; z-index:3; text-align:left; display:none; } .popup-linertop { background:url(/resources/images/ui/popups/popup-layer-top.png); height:23px; } .popup-linermid { background:url(/resources/images/ui/popups/popup-layer-mid.png); min-height:80px; padding:0 23px; position:relative; } .popup h3 { font-size:1.2em; background:#cfcdc7; width:528px; height:23px; margin:-11px 0 12px -11px; padding:4px 0 0 10px; cursor:move; } .popup-linerbottom { background:url(/resources/images/ui/popups/popup-layer-bottom.png); height:23px; } #background-overlay { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:2; display:none; background:#000; } .popup .tool-close { position:absolute; top:5px; right:20px; width:20px; height:20px; background:url(/resources/images/ui/icons/icon-close.gif) no-repeat 0 0; outline:none; cursor:pointer; } /*added by Trevor George*/ #popup-footer{ background:#cfcdc7; width:528px; height:23px; margin-bottom:-10px;margin-left:-11px; padding:4px 0 0 10px; }; /* TOOLS ------------------------------------------------- */ /* generic tools classes */ #main-content .tools-inline { margin:0; list-style:none; } #main-content .tools-inline li { display:inline; float:left; font-size:0.9em; margin-right:12px; } #main-content .tools-inline li a { display:block; float:left; padding-left:19px; text-decoration:none; color:#e0001a; } #main-content .tools-inline li a:hover { text-decoration:underline; } .tool-edit a { background:url(/resources/images/ui/icons/silk/pencil.png) no-repeat 0 0; } .tool-unpublish a, .tool-disable a { background:url(/resources/images/ui/icons/silk/time_delete.png) no-repeat 0 0; } .tool-publish a, .tool-enable a { background:url(/resources/images/ui/icons/silk/time_add.png) no-repeat 0 0; } .tool-delete a { background:url(/resources/images/ui/icons/silk/cross.png) no-repeat 0 0; } .tool-view a { background:url(/resources/images/ui/icons/silk/magnifier.png) no-repeat 0 0; } .tool-add a { background:url(/resources/images/ui/icons/silk/add.png) no-repeat 0 0; } .tool-linkbreak a { background:url(/resources/images/ui/icons/silk/link_break.png) no-repeat 0 0; } .users-record .tool-enable a { background:url(/resources/images/ui/icons/silk/user_green.png) no-repeat 0 0; } .users-record .tool-disable a { background:url(/resources/images/ui/icons/silk/user_orange.png) no-repeat 0 0; } /* View records actions */ .edit-record-actions, .view-record-actions { position:relative; margin:0 0 8px; } .actions-liner { float:right; } #main-content .edit-record-actions .actions-liner ul, #main-content .view-record-actions .actions-liner ul { float:right; margin:0; } .edit-record-actions h3, .view-record-actions h3 { font-size:0.9em; float:left; text-transform:none; margin-right:12px; } /* table results icons */ #main-content .record-actions ul { margin:0; width:120px; } #main-content .record-actions li { display:inline; float:left; margin-bottom:6px; } #main-content .record-actions a { display:block; width:16px; height:16px; position:relative; float:left; margin:2px 8px 2px 0; cursor:pointer; } #main-content .record-actions a span { visibility: hidden; position: absolute; } /* Image tools */ .layout-col-1 #image-list img { width:176px; } #image-list .single-image-caption, #image-list .single-image-copyright { font-size:0.92em; } #image-list .single-image-copyright { color:#999999; } #image-list .single-image-actions { margin:8px 0 16px; } /* SIFR 3 ------------------------------------------------- */ @media screen { .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; } } @media print { .sIFR-flash { display : none !important; height : 0; width : 0; position : absolute; overflow : hidden; } .sIFR-alternate { visibility : visible !important; display : block !important; position : static !important; left : auto !important; top : auto !important; width : auto !important; height : auto !important; } } /* Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active so they only apply if sIFR is active. Make sure to limit the CSS to the screen media type, in order not to have the printed text come out weird. */ @media screen { .sIFR-active h1, .sIFR-active .header .byline, .sIFR-active h2.page-title, .sIFR-active #login-form h2, .sIFR-active #search-box h2 { font-family: Arial; visibility: hidden; } .sIFR-active h1 { font-size: 23px; } .sIFR-active #header .byline { font-size:16px; } .sIFR-active h2.page-title { font-size: 17px; } .sIFR-active #login-form h2, .sIFR-active #search-box h2 { font-size: 17px; } }