/*---------------------------------------------------------------- BONDART.CO.UK CSS doc for managing the varying colour schemes across the site ----------------------------------------------------------------*/ /*---------------------------------------------------------------- BONDART.CO.UK HEXIDECIMAL COLOUR CODES HOME Strong colour (blue) - 00B9F3 Dark grey - 3B4B54 Mid-dark grey - 526671 Mid grey - 7F929E Mid-light grey - ABB7C0 Light grey - DEE6EB PROJECTS Strong colour (green) - 95C540 Dark grey - 424C3F Mid-dark grey - 5D6757 Mid grey - 8C9486 Mid-light grey - B3B9B2 Light grey - E4E7E1 PROJECTS - PAINTING / WALL BASED Strong colour (pink) - F096C1 Dark grey - 504950 Mid-dark grey - 6C646C Mid grey - 97919A Mid-light grey - B9B6BE Light grey - E8E6EA PROJECTS - LIVE ART Strong colour (red) - B62F36 Dark grey - 463A34 Mid-dark grey - 61514B Mid grey - 8F817C Mid-light grey - B4ADAB Light grey - E5DFDD PROJECTS - INSTALLATION Strong colour (turquoise) - 00AF97 Dark grey - 394A49 Mid-dark grey - 506463 Mid grey - 7F9192 Mid-light grey - ACB6B9 Light grey - DFE5E6 PROJECTS - SCULPTURE Strong colour (orange) - F1892F Dark grey - 4B463B Mid-dark grey - 696053 Mid grey - 968E82 Mid-light grey - B9B5AF Light grey - E8E5DF PROJECTS - VIDEO / ANIMATION Strong colour (yellow) - EEDA1D Dark grey - 4C5040 Mid-dark grey - 6A6C58 Mid grey - 989987 Mid-light grey - BABCB2 Light grey - E9E9E1 CONTACT Strong colour (lilac) - 9384BD Dark grey - 47464F Mid-dark grey - 605F6B Mid grey - 8C8D99 Mid-light grey - B2B3BD Light grey - E4E4E9 LINKS Strong colour (fuchsia) - BD60A2 Dark grey - 4C424C Mid-dark grey - 665B68 Mid grey - 918996 Mid-light grey - B5B2BC Light grey - E5E3E8 ----------------------------------------------------------------*/ /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- GENERAL (Colour styles that remain consistant irrespective of the pages colour scheme (mostly anything that is white) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Body styles - gives page a white background. ----------------------------------------------*/ body { background-color: #FFF; } /*Images and image links with double borders - the wide inner border is made white. ----------------------------------------------*/ .image-box, .image-link-box{ background-color: #FFF; } /*Form styles - 'Contact' page, 'Search' and 'Mailing List' forms - makes the label and submit texts white and the background of the submit button transparent ----------------------------------------------*/ label{ color: #FFF; } .submit{ color: #FFF; background-color: transparent; } /*Column 1a general styles. All paragraph text made white. ----------------------------------------------*/ #column1a p{ color: #FFF; } /*'Featured Projects' section styles. - Paragraph text and dashed bottom border between project articles made white. ----------------------------------------------*/ #featured-project .article{ border-bottom-color: #FFF; } #featured-project p{ color: #FFF; } /*'News' section styles. Article headings are white. ----------------------------------------------*/ #column1b .article h2{ color: #FFF; } /*'Project' and 'Image' page styles. - 'Image', 'Video', 'Information' and 'Additional' section texts, image thumbnail borders and dashed 'section divide' borders. ----------------------------------------------*/ #column1 #project-images, #column1 #project-video, #column1 #project-information, #column1 #project-additional{ color: #FFF; } #column1 #project-images #image-gallery img{ border-color: #FFF; } #column1 #project-images #image-gallery ul{ border-right-color: #FFF; } #column1 #image-gallery .hover-title{ background-color: #FFF; } #column1 .video-section, #column1 #project-information tr, #column1 #project-additional li{ border-bottom-color: #FFF; } #column1 #project-image-view h2{ color: #FFF; } #column1 #project-image-view #project-image-nav{ border-top-color: #FFF; } /*'Contact' page styles. - Form text is white. ----------------------------------------------*/ #column1b #contact-form p, #column1b #contact-form .submit{ color: #FFF; } /*Column 2 (right-hand column) styles. - Paragraph text and unordered list text made white. ----------------------------------------------*/ #column2 p, #column2 ul{ color: #FFF; } /*'Footer' styles. - Makes paragraph text in the 'Credits' cloud white. - Makes top and bottom dashed borders of the 'Footer navigation' white. ----------------------------------------------*/ #footer #credits p{ color: #FFF; } #footer #footer-nav ul{ border-color: #FFF; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- HOME (BLUE) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Index page ----------------------------------------------*/ #index a:link{ color: #3B4B54; } #index a:visited{ color: #7F929E; } #index a:hover{ color: #00B9F3; } #index a:active{ color: #526671; } /*General ----------------------------------------------*/ /*Menu links - for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #home #footer-info a:link, #home #breadcrumb a:link{ color: #3B4B54; } #home #footer-info a:visited, #home #breadcrumb a:visited{ color: #3B4B54; } #home #footer-info a:hover, #home #breadcrumb a:hover{ color: #FFF; } #home #footer-info a:active, #home #breadcrumb a:active{ color: #526671; } /*'Header' ----------------------------------------------*/ #home #header{ background: url(../graphics/blue/header-background.gif) top right no-repeat; } #home #header h1 { background: url(../graphics/blue/header-title.gif) no-repeat; } #home a.home-link{ background: url(../graphics/blue/header-navtext-home.gif) no-repeat 0 0; } #home a.projects-link{ background: url(../graphics/blue/header-navtext-projects.gif) no-repeat 0 0; } #home a.contact-link{ background: url(../graphics/blue/header-navtext-contact.gif) no-repeat 0 0; } #home a.links-link{ background: url(../graphics/blue/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #home #header #breadcrumb{ background: #00B9F3 url(../graphics/blue/header-breadcrumb-bottom.gif) bottom left no-repeat; } #home #header #breadcrumb-sides{ background: url(../graphics/blue/header-breadcrumb-sides.gif) top right no-repeat; } #home #header #breadcrumb{ color: #3B4B54; } #home #header #breadcrumb ul li ul li{ background: url(../graphics/blue/star.gif) no-repeat left center; } /*Styling for Column 1 (primary content) - on the 'Home' page this is divided into 2 further columns (1a and 1b). 1a contains the 'About' and 'Featured Projects' sections. 1b contains the 'News' section. ----------------------------------------------*/ /*Image links - applies to image links in both the 'Featured Projects' and the 'News' sections ----------------------------------------------*/ #home .image-box{ color: #ABB7C0; } #home a:link img{ border-color: #ABB7C0; } #home a:visited img{ border-color: #ABB7C0; } #home a:hover img{ border-color: #00B9F3; } #home a:active img{ border-color: #ABB7C0; } /*Text links - regular links and 'Top of page' links. ----------------------------------------------*/ #home a:link.text-link{ color: #FFF; background: url(../graphics/blue/arrow-light-forward.gif) no-repeat right center; } #home a:visited.text-link{ color: #7F929E; background: url(../graphics/blue/arrow-light-forward-visited.gif) no-repeat right center; } #home a:hover.text-link{ color: #00B9F3; background: url(../graphics/blue/arrow-light-forward-hover.gif) no-repeat right center; } #home a:active.text-link{ color: #526671; background: url(../graphics/blue/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #home a:link.text-link-top{ color: #3B4B54; background: url(../graphics/blue/arrow-dark-up.gif) no-repeat left center; } #home a:visited.text-link-top{ color: #7F929E; background: url(../graphics/blue/arrow-dark-up-visited.gif) no-repeat left center; } #home a:hover.text-link-top{ color: #00B9F3; background: url(../graphics/blue/arrow-dark-up-hover.gif) no-repeat left center; } #home a:active.text-link-top{ color: #526671; background: url(../graphics/blue/arrow-dark-up-visited.gif) no-repeat left center; } /*Column 1a (left-hand column) - general styles ----------------------------------------------*/ #home #about p, #home #featured-project .article, #home #featured-project .last-article{ background: url(../graphics/blue/column-background-tile.gif) repeat-y; } /*'About' section ----------------------------------------------*/ #home #about h1 { background: url(../graphics/blue/about-top.gif) left no-repeat; } #home #about { background: url(../graphics/blue/about-bottom.gif) bottom left no-repeat; } /*'Featured Projects' section ----------------------------------------------*/ #home #featured-project h1 { background: url(../graphics/blue/featured-project-top.gif) left no-repeat; } #home #featured-project{ background: url(../graphics/blue/featured-project-bottom.gif) bottom left no-repeat; } /*Column 1b (central column) - 'News' section ----------------------------------------------*/ #home #column1b { border-left-color: #ABB7C0; border-right-color: #ABB7C0; } #home #column1b h1 { background: url(../graphics/blue/news-title.gif) no-repeat; } #home #column1b p { color: #3B4B54; } #home .news-image-left, #home .news-image-right { background: #FFF url(../graphics/blue/news-cloud-left.gif) no-repeat left top; } #home .image-cloud{ background: url(../graphics/blue/news-cloud-right.gif) no-repeat right bottom; } #home #column1b .article { background: url(../graphics/blue/news-end-bar.gif) no-repeat center bottom; } #home #column1b .article h2{ background-color: #3B4B54; } #home #column1b .article h3{ color: #7F929E; } #home .news-text a:link{ color: #3B4B54; background: url(../graphics/blue/arrow-dark-forward.gif) no-repeat right center; } #home .news-text a:visited{ color: #7F929E; background: url(../graphics/blue/arrow-dark-forward-visited.gif) no-repeat right center; } #home .news-text a:hover{ color: #00B9F3; background: url(../graphics/blue/arrow-dark-forward-hover.gif) no-repeat right center; } #home .news-text a:active{ color: #526671; background: url(../graphics/blue/arrow-dark-forward-visited.gif) no-repeat right center; } /*Column 2 (right-hand column) - 'Search' form and 'Mailing list' sections ----------------------------------------------*/ #home #column2 #search h1{ background: url(../graphics/blue/search-top.gif) left no-repeat; } #home #column2 #search form{ background: url(../graphics/blue/search-background.gif) top left no-repeat; } #home #column2 #search{ background: url(../graphics/blue/search-bottom.gif) bottom left no-repeat; } #home #column2 #mailing-list h1 { background: url(../graphics/blue/mailing-list-top.gif) left no-repeat; } #home #mailing-list{ background: url(../graphics/blue/column-background-tile.gif) left repeat-y; } #home #column2 #mailing-list form{ background: url(../graphics/blue/mailing-list-bottom.gif) bottom left no-repeat; } #home #column1 .input, #home #column2 .input{ border-color: #ABB7C0; } /*'Footer' section styling ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #home #footer #credits{ background: url(../graphics/blue/footer-cloud.gif) top left no-repeat; } #home #footer #credits #cloud-extension{ background: url(../graphics/blue/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #home #footer #footer-nav{ background: url(../graphics/blue/footer-nav-top.gif) top left no-repeat; } #home #footer #footer-nav-bottom{ background: #3B4B54 url(../graphics/blue/footer-info-top.gif) bottom left no-repeat; } #home #footer #footer-nav a:link, #home #footer #credits a:link{ color: #FFF; } #home #footer #footer-nav a:visited, #home #footer #credits a:visited{ color: #FFF; } #home #footer #footer-nav a:hover, #home #footer #credits a:hover{ color: #00B9F3; } #home #footer #footer-nav a:active, #home #footer #credits a:active{ color: #526671; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #home #footer #footer-info{ background: #00B9F3; } #home #footer #footer-info-bottom{ background: url(../graphics/blue/footer-info-bottom.gif) bottom left no-repeat; } #home .info-side-border{ border-color: #3B4B54; } /*'Footer cog' - graphic embellishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #home #main-content{ background: url(../graphics/blue/footer-cog-top.gif) bottom right no-repeat; } #home #footer #footer-cog{ background: url(../graphics/blue/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- SEARCH RESULTS(BLUE) ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Column 1 (left-hand column) - 'Search Results' ----------------------------------------------*/ #home #column1 #search-results{ color: #3B4B54; } #home #column1 #search-results h1{ background: url(../graphics/blue/search-title.gif) no-repeat; } #home #column1 .search-next{ border-color: #ABB7C0; } #home #search-results a:link{ color: #3B4B54; } #home #search-results a:visited{ color: #3B4B54; } #home #search-results a:hover{ color: #00B9F3; } #home #search-results a:active{ color: #526671; } #home #search-list a:link{ background: url(../graphics/blue/arrow-dark-forward.gif) no-repeat right center; } #home #search-list a:visited{ background: url(../graphics/blue/arrow-dark-forward-visited.gif) no-repeat right center; } #home #search-list a:hover{ background: url(../graphics/blue/arrow-dark-forward-hover.gif) no-repeat right center; } #home #search-list a:active{ background: url(../graphics/blue/arrow-dark-forward-visited.gif) no-repeat right center; } /*Column 2 (left-hand column) - 'Advanced search' form ----------------------------------------------*/ #home #ad-search h1{ background: url(../graphics/blue/ad-search-top.gif) left no-repeat; } #home #ad-search{ color: #FFF; background: url(../graphics/blue/column-background-tile.gif) left repeat-y; } #home #ad-search form{ background: url(../graphics/blue/ad-search-bottom.gif) bottom left no-repeat; } #ad-search fieldset{ border-bottom-color: #FFF; } #ad-search select{ border-color: #ABB7C0 } /*-------------------------------------------------------------- ---------------------------------------------------------------- MAILING LIST REDIRECT(BLUE) ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Column 1 (left-hand column) - 'Mailing List rediect' message ----------------------------------------------*/ #home #column1b #mailing-list-redirect h1{ background: url(../graphics/blue/mailing-list-title.gif) no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ACCESSIBILITY(BLUE) ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Column 1 (left-hand column) - 'Accessibility' information ----------------------------------------------*/ #home #column1b #accessibility h1{ background: url(../graphics/blue/accessibility-title.gif) no-repeat; } #home #accessibility p, #home #accessibility h2, #home #accessibility h3, #home #accessibility ul{ color: #3B4B54; } #home #accessibility a:link{ color: #3B4B54; background: url(../graphics/blue/arrow-dark-forward.gif) no-repeat right center; } #home #accessibility a:visited{ color: #7F929E; background: url(../graphics/blue/arrow-dark-forward-visited.gif) no-repeat right center; } #home #accessibility a:hover{ color: #00B9F3; background: url(../graphics/blue/arrow-dark-forward-hover.gif) no-repeat right center; } #home #accessibility a:active{ color: #526671; background: url(../graphics/blue/arrow-dark-forward-visited.gif) no-repeat right center; } /*-------------------------------------------------------------- ---------------------------------------------------------------- SITEMAP(BLUE) ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Column 1 (left-hand column) - 'Sitemap' ----------------------------------------------*/ #home #column1b #sitemap h1{ background: url(../graphics/blue/sitemap-title.gif) no-repeat; } #home #sitemap a:link{ color: #3B4B54; } #home #sitemap a:visited{ color: #7F929E; } #home #sitemap a:hover{ color: #00B9F3; } #home #sitemap a:active{ color: #526671; } /*-------------------------------------------------------------- ---------------------------------------------------------------- UNSUBSCRIBE(BLUE) ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*Column 1 (left-hand column) - 'Unsubscribe' form and 'Unsubscribe rediect' message ----------------------------------------------*/ #home #column1b #unsubscribe h1{ background: url(../graphics/blue/unsubscribe-title.gif) left no-repeat; } #home #column1b #unsub-redirect h1{ background: url(../graphics/blue/unsub-redirect-title.gif) no-repeat; } #home #column1b #unsubscribe{ background: url(../graphics/blue/unsubscribe-bg-tile.gif) left repeat-y; } #home #column1b #unsubscribe form{ background: url(../graphics/blue/unsubscribe-bottom.gif) bottom left no-repeat; } #home #column1b #unsubscribe form p{ color: #FFF; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS MENU(GREEN) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General ----------------------------------------------*/ /*Menu links - menus on the strong colour background ('Breadcrumb trail', 'Footer Info' and 'Projects reorder menu') ----------------------------------------------*/ #projects #footer-info a:link, #projects #breadcrumb a:link, #projects #projects-menu-reorder a:link{ color: #424C3F; } #projects #footer-info a:visited, #projects #breadcrumb a:visited, #projects #projects-menu-reorder a:visited{ color: #424C3F; } #projects #footer-info a:hover, #projects #breadcrumb a:hover, #projects #projects-menu-reorder a:hover{ color: #FFF; } #projects #footer-info a:active, #projects #breadcrumb a:active, #projects #projects-menu-reorder a:active{ color: #5D6757; } /*Header ----------------------------------------------*/ #projects #header{ background: url(../graphics/green/header-background.gif) top right no-repeat; } #projects #header h1 { background: url(../graphics/green/header-title.gif) no-repeat; } #projects a.home-link{ background: url(../graphics/green/header-navtext-home.gif) no-repeat 0 0; } #projects a.projects-link{ background: url(../graphics/green/header-navtext-projects.gif) no-repeat 0 0; } #projects a.contact-link{ background: url(../graphics/green/header-navtext-contact.gif) no-repeat 0 0; } #projects a.links-link{ background: url(../graphics/green/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #projects #header #breadcrumb{ background: #95C540 url(../graphics/green/header-breadcrumb-bottom.gif) bottom left no-repeat; } #projects #header #breadcrumb-sides{ background: url(../graphics/green/header-breadcrumb-sides.gif) top right no-repeat; } #projects #header #breadcrumb{ color: #424C3F; } #projects #header #breadcrumb ul li ul li{ background: url(../graphics/green/star.gif) no-repeat left center; } /*Column 1 (primary content) - on the 'Projects menu' page this is a single column featuring a list of all the projects on the site. ----------------------------------------------*/ #projects #column1 #projects-menu-title h1 { background: url(../graphics/green/projects-menu-title.gif) no-repeat; } #projects #column1 #projects-menu-intro p{ color: #FFF; background: #424C3F; } #projects #column1 #projects-menu-intro{ background: url(../graphics/green/projects-reorder-top.gif) bottom center no-repeat; } #projects #column1 #projects-menu-reorder{ color: #424C3F; background-color: #95C540; } #projects #column1 #projects-menu-title{ background: url(../graphics/green/projects-reorder-bottom.gif) bottom center no-repeat; } #projects #column1 #projects-menu .projects-menu-image-link{ background-color: #424C3F; } #projects #column1 #projects-menu li a{ background-color: #424C3F; } /*'Projects menu' image link styling - colour coded according to the 5 different catagories Image border is the strong colour of the catagory but changes to 'Projects menu' page strong colour (green) on hover ----------------------------------------------*/ #projects li.painting a:link{ color: #F096C1; } #projects li.liveart a:link{ color: #B62F36; } #projects li.installation a:link{ color: #00AF97; } #projects li.sculpture a:link{ color: #F1892F; } #projects li.video a:link{ color: #EEDA1D; } #projects li.painting a:visited{ color: #F096C1; } #projects li.liveart a:visited{ color: #B62F36; } #projects li.installation a:visited{ color: #00AF97; } #projects li.sculpture a:visited{ color: #F1892F; } #projects li.video a:visited{ color: #EEDA1D; } #projects li.painting a:hover, #projects li.liveart a:hover, #projects li.installation a:hover, #projects li.sculpture a:hover, #projects li.video a:hover{ color: #95C540; } #projects li.painting a:active, #projects li.liveart a:active, #projects li.installation a:active, #projects li.sculpture a:active, #projects li.video a:active{ color: #B3B9B2; } /*'Top of page' links ----------------------------------------------*/ #projects a:link.text-link-top{ color: #424C3F; background: url(../graphics/green/arrow-dark-up.gif) no-repeat left center; } #projects a:visited.text-link-top{ color: #8C9486; background: url(../graphics/green/arrow-dark-up-visited.gif) no-repeat left center; } #projects a:hover.text-link-top{ color: #95C540; background: url(../graphics/green/arrow-dark-up-hover.gif) no-repeat left center; } #projects a:active.text-link-top{ color: #5D6757; background: url(../graphics/green/arrow-dark-up-visited.gif) no-repeat left center; } /*Column 2 (right-hand column) - 'Colour Code' section, 'Search' form and 'Newsletter Sign Up' form sections ----------------------------------------------*/ #projects #column2 #search h1{ background: url(../graphics/green/search-top.gif) left no-repeat; } #projects #column2 #search form{ background: url(../graphics/green/search-background.gif) top left no-repeat; } #projects #column2 #search{ background: url(../graphics/green/search-bottom.gif) bottom left no-repeat; } #projects #column2 #mailing-list h1 { background: url(../graphics/green/mailing-list-top.gif) left no-repeat; } #projects #column2 #mailing-list, #projects #column2 #colour-code p, #projects #column2 #colour-code ul{ background: url(../graphics/green/column-background-tile.gif) left repeat-y; } #projects #column2 #mailing-list form{ background: url(../graphics/green/mailing-list-bottom.gif) bottom left no-repeat; } #projects #column2 .input{ border-color: #B3B9B2; } #projects #column2 #colour-code h1{ background: url(../graphics/green/colour-code-top.gif) no-repeat; } #projects #column2 #colour-code{ background: url(../graphics/green/colour-code-bottom.gif) bottom no-repeat; } #dot-pink{ background: url(../graphics/green/dot-pink.gif) no-repeat left center; } #dot-red{ background: url(../graphics/green/dot-red.gif) no-repeat left center; } #dot-turquoise{ background: url(../graphics/green/dot-turquoise.gif) no-repeat left center; } #dot-orange{ background: url(../graphics/green/dot-orange.gif) no-repeat left center; } #dot-yellow{ background: url(../graphics/green/dot-yellow.gif) no-repeat left center; } /*Footer section ----------------------------------------------*/ /*'Credits' section (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #projects #footer #credits{ background: url(../graphics/green/footer-cloud.gif) top left no-repeat; } #projects #footer #credits #cloud-extension{ background: url(../graphics/green/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #projects #footer #footer-nav{ background: url(../graphics/green/footer-nav-top.gif) top left no-repeat; } #projects #footer #footer-nav-bottom{ background: #424C3F url(../graphics/green/footer-info-top.gif) bottom left no-repeat; } #projects #footer #footer-nav a:link, #projects #footer #credits a:link{ color: #FFF; } #projects #footer #footer-nav a:visited, #projects #footer #credits a:visited{ color: #FFF; } #projects #footer #footer-nav a:hover, #projects #footer #credits a:hover{ color: #95C540; } #projects #footer #footer-nav a:active, #projects #footer #credits a:active{ color: #5D6757; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #projects #footer #footer-info{ background: #95C540; } #projects #footer #footer-info-bottom{ background: url(../graphics/green/footer-info-bottom.gif) bottom left no-repeat; } #projects .info-side-border{ border-color: #424C3F; } /*'Footer cog' - graphic embellishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #projects #main-content{ background: url(../graphics/green/footer-cog-top.gif) bottom right no-repeat; } #projects #footer #footer-cog{ background: url(../graphics/green/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - PAINTING / WALL BASED(PINK) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links - for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #proj-painting #breadcrumb a:link, #proj-painting #footer-info a:link{ color: #504950; } #proj-painting #breadcrumb a:visited, #proj-painting #footer-info a:visited{ color: #504950; } #proj-painting #breadcrumb a:hover, #proj-painting #footer-info a:hover{ color: #FFF; } #proj-painting #breadcrumb a:active, #proj-painting #footer-info a:active{ color: #6C646C; } /*'Header' ----------------------------------------------*/ #proj-painting #header{ background: url(../graphics/pink/header-background.gif) top right no-repeat; } #proj-painting #header h1 { background: url(../graphics/pink/header-title.gif) no-repeat; } #proj-painting a.home-link{ background: url(../graphics/pink/header-navtext-home.gif) no-repeat 0 0; } #proj-painting a.projects-link{ background: url(../graphics/pink/header-navtext-projects.gif) no-repeat 0 0; } #proj-painting a.contact-link{ background: url(../graphics/pink/header-navtext-contact.gif) no-repeat 0 0; } #proj-painting a.links-link{ background: url(../graphics/pink/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #proj-painting #header #breadcrumb{ background: #F096C1 url(../graphics/pink/header-breadcrumb-bottom.gif) bottom left no-repeat; } #proj-painting #header #breadcrumb-sides{ background: url(../graphics/pink/header-breadcrumb-sides.gif) top right no-repeat; } #proj-painting #header #breadcrumb{ color: #504950; } #proj-painting #header #breadcrumb ul li ul li{ background: url(../graphics/pink/star.gif) no-repeat left center; } /*Column 1 (primary content) - Contains all the content pertaining to the particular project which may or may not include the following sections - 'Project title' with 'Banner' image, 'Project description' text, 'Image' section, 'Video' section, 'Information' section and 'Additional' section ----------------------------------------------*/ /*Text links - regular links, 'Back to...' links, 'Top of page' links and 'Download' links. ----------------------------------------------*/ #proj-painting a:link.text-link{ color: #FFF; background: url(../graphics/pink/arrow-light-forward.gif) no-repeat right center; } #proj-painting a:visited.text-link{ color: #97919A; background: url(../graphics/pink/arrow-light-forward-visited.gif) no-repeat right center; } #proj-painting a:hover.text-link{ color: #F096C1; background: url(../graphics/pink/arrow-light-forward-hover.gif) no-repeat right center; } #proj-painting a:active.text-link{ color: #6C646C; background: url(../graphics/pink/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #proj-painting a:link.text-link-back{ color: #FFF; background: url(../graphics/pink/arrow-light-back.gif) no-repeat left center; } #proj-painting a:visited.text-link-back{ color: #97919A; background: url(../graphics/pink/arrow-light-back-visited.gif) no-repeat left center; } #proj-painting a:hover.text-link-back{ color: #F096C1; background: url(../graphics/pink/arrow-light-back-hover.gif) no-repeat left center; } #proj-painting a:active.text-link-back{ color: #6C646C; background: url(../graphics/pink/arrow-light-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-painting a:link.text-link-top{ color: #504950; background: url(../graphics/pink/arrow-dark-up.gif) no-repeat left center; } #proj-painting a:visited.text-link-top{ color: #97919A; background: url(../graphics/pink/arrow-dark-up-visited.gif) no-repeat left center; } #proj-painting a:hover.text-link-top{ color: #F096C1; background: url(../graphics/pink/arrow-dark-up-hover.gif) no-repeat left center; } #proj-painting a:active.text-link-top{ color: #6C646C; background: url(../graphics/pink/arrow-dark-up-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-painting #page-bottom-links a:link.text-link-back{ color: #504950; background: url(../graphics/pink/arrow-dark-back.gif) no-repeat left center; } #proj-painting #page-bottom-links a:visited.text-link-back{ color: #97919A; background: url(../graphics/pink/arrow-dark-back-visited.gif) no-repeat left center; } #proj-painting #page-bottom-links a:hover.text-link-back{ color: #F096C1; background: url(../graphics/pink/arrow-dark-back-hover.gif) no-repeat left center; } #proj-painting #page-bottom-links a:active.text-link-back{ color: #6C646C; background: url(../graphics/pink/arrow-dark-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-painting a:link.text-link-down{ color: #FFF; background: url(../graphics/pink/arrow-light-down.gif) no-repeat right center; } #proj-painting a:visited.text-link-down{ color: #97919A; background: url(../graphics/pink/arrow-light-down-visited.gif) no-repeat right center; } #proj-painting a:hover.text-link-down{ color: #F096C1; background: url(../graphics/pink/arrow-light-down-hover.gif) no-repeat right center; } #proj-painting a:active.text-link-down{ color: #6C646C; background: url(../graphics/pink/arrow-light-down-visited.gif) no-repeat right center; } /*'Project title' links and 'Project description' text ----------------------------------------------*/ #proj-painting #column1 #project-title #page-top-links{ background-color: #504950; } #proj-painting #column1 #project-description p{ color: #504950; } /*'Image' and 'Video' ----------------------------------------------*/ #proj-painting #column1 .project-large-bg{ background: url(../graphics/pink/project-large-bg-tile.gif) left repeat-y; } #proj-painting #column1 #project-images h1{ background: url(../graphics/pink/images-top.gif) left no-repeat; } #proj-painting #column1 #project-video h1{ background: url(../graphics/pink/video-top.gif) left no-repeat; } #proj-painting #column1 #project-images, #proj-painting #column1 #project-video{ background: url(../graphics/pink/images-bottom.gif) bottom left no-repeat; } #proj-painting #column1 #image-display, #proj-painting #column1 .video-display{ background-color: #6C646C; } #proj-painting #column1 #image-gallery .hover-title{ color: #504950; } #proj-painting #column1 #image-display h2{ background-color: #6C646C; color: #97919A; } /*'Information' and 'Additional' ----------------------------------------------*/ #proj-painting #column1 #project-information h1{ background: url(../graphics/pink/information-top.gif) left no-repeat; } #proj-painting #column1 #project-additional h1{ background: url(../graphics/pink/additional-top.gif) left no-repeat; } #proj-painting #column1 .project-small-bg{ background: url(../graphics/pink/project-small-bg-tile.gif) left repeat-y; } #proj-painting #column1 #project-information, #proj-painting #column1 #project-additional{ background: url(../graphics/pink/information-bottom.gif) bottom left no-repeat; } /*'Project Image' ----------------------------------------------*/ /*Column 1 (main column) - Contains large version of selected image with onward navigation below ----------------------------------------------*/ #proj-painting #column1 #project-image-view h1{ background: url(../graphics/pink/images-top.gif) left no-repeat; } #proj-painting #column1 #project-image-view{ background: url(../graphics/pink/images-bottom.gif) bottom left no-repeat; } #proj-painting #column1 #project-image-view #image-large{ background-color: #6C646C; } #proj-painting #column1 #project-image-nav li a:link img{ border-color: #FFF; } #proj-painting #column1 #project-image-nav li a:visited img{ border-color: #FFF; } #proj-painting #column1 #project-image-nav li a:hover img{ border-color: #F096C1; } #proj-painting #column1 #project-image-nav li a:active img{ border-color: #F096C1; } #proj-painting #column1 #project-image-nav li a.no-image img{ border-color: #97919A; } /*Column 2 (right-hand column) - 'Featured Projects', 'Search' and 'Mailing List' sections ----------------------------------------------*/ /*General styles ----------------------------------------------*/ #proj-painting #featured-project .article, #proj-painting #featured-project .last-article, #proj-painting #mailing-list{ background: url(../graphics/pink/column-background-tile.gif) left repeat-y; } /*'Featured Projects' ----------------------------------------------*/ #proj-painting #featured-project h1{ background: url(../graphics/pink/featured-project-top.gif) left no-repeat; } #proj-painting #featured-project{ background: url(../graphics/pink/featured-project-bottom.gif) bottom left no-repeat; } #proj-painting .image-box{ color: #B9B6BE; } #proj-painting a:link img{ border-color: #B9B6BE; } #proj-painting a:visited img{ border-color: #B9B6BE; } #proj-painting a:hover img{ border-color: #F096C1; } #proj-painting a:active img{ border-color: #B9B6BE; } /*'Search' and 'Mailing List' ----------------------------------------------*/ #proj-painting #search h1{ background: url(../graphics/pink/search-top.gif) left no-repeat; } #proj-painting #search form{ background: url(../graphics/pink/search-background.gif) top left no-repeat; } #proj-painting #search{ background: url(../graphics/pink/search-bottom.gif) bottom left no-repeat; } #proj-painting #mailing-list h1{ background: url(../graphics/pink/mailing-list-top.gif) left no-repeat; } #proj-painting #mailing-list form{ background: url(../graphics/pink/mailing-list-bottom.gif) bottom left no-repeat; } #proj-painting .input{ border-color: #B9B6BE; } /*Footer ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #proj-painting #footer #credits{ background: url(../graphics/pink/footer-cloud.gif) top left no-repeat; } #proj-painting #footer #credits #cloud-extension{ background: url(../graphics/pink/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #proj-painting #footer #footer-nav{ background: url(../graphics/pink/footer-nav-top.gif) top left no-repeat; } #proj-painting #footer #footer-nav-bottom{ background: #504950 url(../graphics/pink/footer-info-top.gif) bottom left no-repeat; } #proj-painting #footer #footer-nav a:link, #proj-painting #footer #credits a:link{ color: #FFF; } #proj-painting #footer #footer-nav a:visited, #proj-painting #footer #credits a:visited{ color: #FFF; } #proj-painting #footer #footer-nav a:hover, #proj-painting #footer #credits a:hover{ color: #F096C1; } #proj-painting #footer #footer-nav a:active, #proj-painting #footer #credits a:active{ color: #6C646C; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #proj-painting #footer #footer-info{ background: #F096C1; } #proj-painting #footer #footer-info-bottom{ background: url(../graphics/pink/footer-info-bottom.gif) bottom left no-repeat; } #proj-painting .info-side-border{ border-color: #504950; } /*'Footer cog' - graphic embellishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #proj-painting #main-content{ background: url(../graphics/pink/footer-cog-top.gif) bottom right no-repeat; } #proj-painting #footer #footer-cog{ background: url(../graphics/pink/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - LIVE ART(RED) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links - for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #proj-liveart #breadcrumb a:link, #proj-liveart #footer-info a:link{ color: #463A34; } #proj-liveart #breadcrumb a:visited, #proj-liveart #footer-info a:visited{ color: #463A34; } #proj-liveart #breadcrumb a:hover, #proj-liveart #footer-info a:hover{ color: #FFF; } #proj-liveart #breadcrumb a:active, #proj-liveart #footer-info a:active{ color: #61514B; } /*'Header' ----------------------------------------------*/ #proj-liveart #header{ background: url(../graphics/red/header-background.gif) top right no-repeat; } #proj-liveart #header h1 { background: url(../graphics/red/header-title.gif) no-repeat; } #proj-liveart a.home-link{ background: url(../graphics/red/header-navtext-home.gif) no-repeat 0 0; } #proj-liveart a.projects-link{ background: url(../graphics/red/header-navtext-projects.gif) no-repeat 0 0; } #proj-liveart a.contact-link{ background: url(../graphics/red/header-navtext-contact.gif) no-repeat 0 0; } #proj-liveart a.links-link{ background: url(../graphics/red/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #proj-liveart #header #breadcrumb{ background: #B62F36 url(../graphics/red/header-breadcrumb-bottom.gif) bottom left no-repeat; } #proj-liveart #header #breadcrumb-sides{ background: url(../graphics/red/header-breadcrumb-sides.gif) top right no-repeat; } #proj-liveart #header #breadcrumb{ color: #463A34; } #proj-liveart #header #breadcrumb ul li ul li{ background: url(../graphics/red/star.gif) no-repeat left center; } /*Column 1 (primary content) - Contains all the content pertaining to the particular project which may or may not include the following sections - 'Project title' with 'Banner' image, 'Project description' text, 'Image' section, 'Video' section, 'Information' section and 'Additional' section ----------------------------------------------*/ /*Text links - regular links, 'Back to...' links, 'Top of page' links and 'Download' links. ----------------------------------------------*/ #proj-liveart a:link.text-link{ color: #FFF; background: url(../graphics/red/arrow-light-forward.gif) no-repeat right center; } #proj-liveart a:visited.text-link{ color: #8F817C; background: url(../graphics/red/arrow-light-forward-visited.gif) no-repeat right center; } #proj-liveart a:hover.text-link{ color: #B62F36; background: url(../graphics/red/arrow-light-forward-hover.gif) no-repeat right center; } #proj-liveart a:active.text-link{ color: #61514B; background: url(../graphics/red/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #proj-liveart a:link.text-link-back{ color: #FFF; background: url(../graphics/red/arrow-light-back.gif) no-repeat left center; } #proj-liveart a:visited.text-link-back{ color: #8F817C; background: url(../graphics/red/arrow-light-back-visited.gif) no-repeat left center; } #proj-liveart a:hover.text-link-back{ color: #B62F36; background: url(../graphics/red/arrow-light-back-hover.gif) no-repeat left center; } #proj-liveart a:active.text-link-back{ color: #61514B; background: url(../graphics/red/arrow-light-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-liveart a:link.text-link-top{ color: #463A34; background: url(../graphics/red/arrow-dark-up.gif) no-repeat left center; } #proj-liveart a:visited.text-link-top{ color: #8F817C; background: url(../graphics/red/arrow-dark-up-visited.gif) no-repeat left center; } #proj-liveart a:hover.text-link-top{ color: #B62F36; background: url(../graphics/red/arrow-dark-up-hover.gif) no-repeat left center; } #proj-liveart a:active.text-link-top{ color: #61514B; background: url(../graphics/red/arrow-dark-up-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-liveart #page-bottom-links a:link.text-link-back{ color: #463A34; background: url(../graphics/red/arrow-dark-back.gif) no-repeat left center; } #proj-liveart #page-bottom-links a:visited.text-link-back{ color: #8F817C; background: url(../graphics/red/arrow-dark-back-visited.gif) no-repeat left center; } #proj-liveart #page-bottom-links a:hover.text-link-back{ color: #B62F36; background: url(../graphics/red/arrow-dark-back-hover.gif) no-repeat left center; } #proj-liveart #page-bottom-links a:active.text-link-back{ color: #61514B; background: url(../graphics/red/arrow-dark-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-liveart a:link.text-link-down{ color: #FFF; background: url(../graphics/red/arrow-light-down.gif) no-repeat right center; } #proj-liveart a:visited.text-link-down{ color: #8F817C; background: url(../graphics/red/arrow-light-down-visited.gif) no-repeat right center; } #proj-liveart a:hover.text-link-down{ color: #B62F36; background: url(../graphics/red/arrow-light-down-hover.gif) no-repeat right center; } #proj-liveart a:active.text-link-down{ color: #61514B; background: url(../graphics/red/arrow-light-down-visited.gif) no-repeat right center; } /*'Project title' links and 'Project description' text ----------------------------------------------*/ #proj-liveart #column1 #project-title #page-top-links{ background-color: #463A34; } #proj-liveart #column1 #project-description p{ color: #463A34; } /*'Image' and 'Video' ----------------------------------------------*/ #proj-liveart #column1 .project-large-bg{ background: url(../graphics/red/project-large-bg-tile.gif) left repeat-y; } #proj-liveart #column1 #project-images h1{ background: url(../graphics/red/images-top.gif) left no-repeat; } #proj-liveart #column1 #project-video h1{ background: url(../graphics/red/video-top.gif) left no-repeat; } #proj-liveart #column1 #project-images, #proj-liveart #column1 #project-video{ background: url(../graphics/red/images-bottom.gif) bottom left no-repeat; } #proj-liveart #column1 #image-display, #proj-liveart #column1 .video-display{ background-color: #61514B; } #proj-liveart #column1 #image-gallery .hover-title{ color: #463A34; } #proj-liveart #column1 #image-display h2{ background-color: #61514B; color: #8F817C; } /*'Information' and 'Additional' ----------------------------------------------*/ #proj-liveart #column1 #project-information h1{ background: url(../graphics/red/information-top.gif) left no-repeat; } #proj-liveart #column1 #project-additional h1{ background: url(../graphics/red/additional-top.gif) left no-repeat; } #proj-liveart #column1 .project-small-bg{ background: url(../graphics/red/project-small-bg-tile.gif) left repeat-y; } #proj-liveart #column1 #project-information, #proj-liveart #column1 #project-additional{ background: url(../graphics/red/information-bottom.gif) bottom left no-repeat; } /*'Project Image' ----------------------------------------------*/ /*Column 1 (main column) - Contains large version of selected image with onward navigation below ----------------------------------------------*/ #proj-liveart #column1 #project-image-view h1{ background: url(../graphics/red/images-top.gif) left no-repeat; } #proj-liveart #column1 #project-image-view{ background: url(../graphics/red/images-bottom.gif) bottom left no-repeat; } #proj-liveart #column1 #project-image-view #image-large{ background-color: #61514B; } #proj-liveart #column1 #project-image-nav li a:link img{ border-color: #FFF; } #proj-liveart #column1 #project-image-nav li a:visited img{ border-color: #FFF; } #proj-liveart #column1 #project-image-nav li a:hover img{ border-color: #B62F36; } #proj-liveart #column1 #project-image-nav li a:active img{ border-color: #B62F36; } #proj-liveart #column1 #project-image-nav li a.no-image img{ border-color: #8F817C; } /*Column 2 (right-hand column) - 'Featured Projects', 'Search' and 'Mailing List' sections ----------------------------------------------*/ /*General styles ----------------------------------------------*/ #proj-liveart #featured-project .article, #proj-liveart #featured-project .last-article, #proj-liveart #mailing-list{ background: url(../graphics/red/column-background-tile.gif) left repeat-y; } /*'Featured Projects' ----------------------------------------------*/ #proj-liveart #featured-project h1 { background: url(../graphics/red/featured-project-top.gif) left no-repeat; } #proj-liveart #featured-project { background: url(../graphics/red/featured-project-bottom.gif) bottom left no-repeat; } #proj-liveart .image-box{ color: #B4ADAB; } #proj-liveart a:link img{ border-color: #B4ADAB; } #proj-liveart a:visited img{ border-color: #B4ADAB; } #proj-liveart a:hover img{ border-color: #B62F36; } #proj-liveart a:active img{ border-color: #B4ADAB; } /*'Search' and 'Mailing List' ----------------------------------------------*/ #proj-liveart #search h1{ background: url(../graphics/red/search-top.gif) left no-repeat; } #proj-liveart #search form{ background: url(../graphics/red/search-background.gif) top left no-repeat; } #proj-liveart #search{ background: url(../graphics/red/search-bottom.gif) bottom left no-repeat; } #proj-liveart #mailing-list h1{ background: url(../graphics/red/mailing-list-top.gif) left no-repeat; } #proj-liveart #mailing-list form{ background: url(../graphics/red/mailing-list-bottom.gif) bottom left no-repeat; } #proj-liveart .input{ border-color: #B4ADAB; } /*Footer ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #proj-liveart #footer #credits{ background: url(../graphics/red/footer-cloud.gif) top left no-repeat; } #proj-liveart #footer #credits #cloud-extension{ background: url(../graphics/red/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation'(repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #proj-liveart #footer #footer-nav{ background: url(../graphics/red/footer-nav-top.gif) top left no-repeat; } #proj-liveart #footer #footer-nav-bottom{ background: #463A34 url(../graphics/red/footer-info-top.gif) bottom left no-repeat; } #proj-liveart #footer #footer-nav a:link, #proj-liveart #footer #credits a:link{ color: #FFF; } #proj-liveart #footer #footer-nav a:visited, #proj-liveart #footer #credits a:visited{ color: #FFF; } #proj-liveart #footer #footer-nav a:hover, #proj-liveart #footer #credits a:hover{ color: #B62F36; } #proj-liveart #footer #footer-nav a:active, #proj-liveart #footer #credits a:active{ color: #61514B; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #proj-liveart #footer #footer-info{ background: #B62F36; } #proj-liveart #footer #footer-info-bottom{ background: url(../graphics/red/footer-info-bottom.gif) bottom left no-repeat; } #proj-liveart .info-side-border{ border-color: #463A34; } /*'Footer cog' - graphic embellishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #proj-liveart #main-content{ background: url(../graphics/red/footer-cog-top.gif) bottom right no-repeat; } #proj-liveart #footer #footer-cog{ background: url(../graphics/red/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - INSTALLATION(TURQUOISE) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links – for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #proj-installation #breadcrumb a:link, #proj-installation #footer-info a:link{ color: #394A49; } #proj-installation #breadcrumb a:visited, #proj-installation #footer-info a:visited{ color: #394A49; } #proj-installation #breadcrumb a:hover, #proj-installation #footer-info a:hover{ color: #FFF; } #proj-installation #breadcrumb a:active, #proj-installation #footer-info a:active{ color: #506463; } /*'Header' ----------------------------------------------*/ #proj-installation #header{ background: url(../graphics/turquoise/header-background.gif) top right no-repeat; } #proj-installation #header h1 { background: url(../graphics/turquoise/header-title.gif) no-repeat; } #proj-installation a.home-link{ background: url(../graphics/turquoise/header-navtext-home.gif) no-repeat 0 0; } #proj-installation a.projects-link{ background: url(../graphics/turquoise/header-navtext-projects.gif) no-repeat 0 0; } #proj-installation a.contact-link{ background: url(../graphics/turquoise/header-navtext-contact.gif) no-repeat 0 0; } #proj-installation a.links-link{ background: url(../graphics/turquoise/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #proj-installation #header #breadcrumb{ background: #00AF97 url(../graphics/turquoise/header-breadcrumb-bottom.gif) bottom left no-repeat; } #proj-installation #header #breadcrumb-sides{ background: url(../graphics/turquoise/header-breadcrumb-sides.gif) top right no-repeat; } #proj-installation #header #breadcrumb{ color: #394A49; } #proj-installation #header #breadcrumb ul li ul li{ background: url(../graphics/turquoise/star.gif) no-repeat left center; } /*Column 1 (primary content) - Contains all the content pertaining to the particular project which may or may not include the following sections - 'Project title' with 'Banner' image, 'Project description' text, 'Image' section, 'Video' section, 'Information' section and 'Additional' section ----------------------------------------------*/ /*Text links - regular links, 'Back to...' links, 'Top of page' links and 'Download' links. ----------------------------------------------*/ #proj-installation a:link.text-link{ color: #FFF; background: url(../graphics/turquoise/arrow-light-forward.gif) no-repeat right center; } #proj-installation a:visited.text-link{ color: #7F9192; background: url(../graphics/turquoise/arrow-light-forward-visited.gif) no-repeat right center; } #proj-installation a:hover.text-link{ color: #00AF97; background: url(../graphics/turquoise/arrow-light-forward-hover.gif) no-repeat right center; } #proj-installation a:active.text-link{ color: #506463; background: url(../graphics/turquoise/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #proj-installation a:link.text-link-back{ color: #FFF; background: url(../graphics/turquoise/arrow-light-back.gif) no-repeat left center; } #proj-installation a:visited.text-link-back{ color: #7F9192; background: url(../graphics/turquoise/arrow-light-back-visited.gif) no-repeat left center; } #proj-installation a:hover.text-link-back{ color: #00AF97; background: url(../graphics/turquoise/arrow-light-back-hover.gif) no-repeat left center; } #proj-installation a:active.text-link-back{ color: #506463; background: url(../graphics/turquoise/arrow-light-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-installation a:link.text-link-top{ color: #394A49; background: url(../graphics/turquoise/arrow-dark-up.gif) no-repeat left center; } #proj-installation a:visited.text-link-top{ color: #7F9192; background: url(../graphics/turquoise/arrow-dark-up-visited.gif) no-repeat left center; } #proj-installation a:hover.text-link-top{ color: #00AF97; background: url(../graphics/turquoise/arrow-dark-up-hover.gif) no-repeat left center; } #proj-installation a:active.text-link-top{ color: #506463; background: url(../graphics/turquoise/arrow-dark-up-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-installation #page-bottom-links a:link.text-link-back{ color: #394A49; background: url(../graphics/turquoise/arrow-dark-back.gif) no-repeat left center; } #proj-installation #page-bottom-links a:visited.text-link-back{ color: #7F9192; background: url(../graphics/turquoise/arrow-dark-back-visited.gif) no-repeat left center; } #proj-installation #page-bottom-links a:hover.text-link-back{ color: #00AF97; background: url(../graphics/turquoise/arrow-dark-back-hover.gif) no-repeat left center; } #proj-installation #page-bottom-links a:active.text-link-back{ color: #506463; background: url(../graphics/turquoise/arrow-dark-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-installation a:link.text-link-down{ color: #FFF; background: url(../graphics/turquoise/arrow-light-down.gif) no-repeat right center; } #proj-installation a:visited.text-link-down{ color: #7F9192; background: url(../graphics/turquoise/arrow-light-down-visited.gif) no-repeat right center; } #proj-installation a:hover.text-link-down{ color: #00AF97; background: url(../graphics/turquoise/arrow-light-down-hover.gif) no-repeat right center; } #proj-installation a:active.text-link-down{ color: #506463; background: url(../graphics/turquoise/arrow-light-down-visited.gif) no-repeat right center; } /*'Project title' links and 'Project description' text ----------------------------------------------*/ #proj-installation #column1 #project-title #page-top-links{ background-color: #394A49; } #proj-installation #column1 #project-description p{ color: #394A49; } /*'Image' and 'Video' ----------------------------------------------*/ #proj-installation #column1 .project-large-bg{ background: url(../graphics/turquoise/project-large-bg-tile.gif) left repeat-y; } #proj-installation #column1 #project-images h1{ background: url(../graphics/turquoise/images-top.gif) left no-repeat; } #proj-installation #column1 #project-video h1{ background: url(../graphics/turquoise/video-top.gif) left no-repeat; } #proj-installation #column1 #project-images, #proj-installation #column1 #project-video{ background: url(../graphics/turquoise/images-bottom.gif) bottom left no-repeat; } #proj-installation #column1 #image-display, #proj-installation #column1 .video-display{ background-color: #506463; } #proj-installation #column1 #image-gallery .hover-title{ color: #394A49; } #proj-installation #column1 #image-display h2{ background-color: #506463; color: #7F9192; } /*'Information' and 'Additional' ----------------------------------------------*/ #proj-installation #column1 #project-information h1{ background: url(../graphics/turquoise/information-top.gif) left no-repeat; } #proj-installation #column1 #project-additional h1{ background: url(../graphics/turquoise/additional-top.gif) left no-repeat; } #proj-installation #column1 .project-small-bg{ background: url(../graphics/turquoise/project-small-bg-tile.gif) left repeat-y; } #proj-installation #column1 #project-information, #proj-installation #column1 #project-additional{ background: url(../graphics/turquoise/information-bottom.gif) bottom left no-repeat; } /*'Project Image' ----------------------------------------------*/ /*Column 1 (main column) - Contains large version of selected image with onward navigation below ----------------------------------------------*/ #proj-installation #column1 #project-image-view h1{ background: url(../graphics/turquoise/images-top.gif) left no-repeat; } #proj-installation #column1 #project-image-view{ background: url(../graphics/turquoise/images-bottom.gif) bottom left no-repeat; } #proj-installation #column1 #project-image-view #image-large{ background-color: #506463; } #proj-installation #column1 #project-image-nav li a:link img{ border-color: #FFF; } #proj-installation #column1 #project-image-nav li a:visited img{ border-color: #FFF; } #proj-installation #column1 #project-image-nav li a:hover img{ border-color: #00AF97; } #proj-installation #column1 #project-image-nav li a:active img{ border-color: #00AF97; } #proj-installation #column1 #project-image-nav li a.no-image img{ border-color: #7F9192; } /*Column 2 (right-hand column) - 'Featured Projects', 'Search' and 'Mailing List' sections ----------------------------------------------*/ /*General styles ----------------------------------------------*/ #proj-installation #featured-project .article, #proj-installation #featured-project .last-article, #proj-installation #mailing-list{ background: url(../graphics/turquoise/column-background-tile.gif) left repeat-y; } /*'Featured Projects' ----------------------------------------------*/ #proj-installation #featured-project h1 { background: url(../graphics/turquoise/featured-project-top.gif) left no-repeat; } #proj-installation #featured-project { background: url(../graphics/turquoise/featured-project-bottom.gif) bottom left no-repeat; } #proj-installation .image-box{ color: #ACB6B9; } #proj-installation a:link img{ border-color: #ACB6B9; } #proj-installation a:visited img{ border-color: #ACB6B9; } #proj-installation a:hover img{ border-color: #00AF97; } #proj-installation a:active img{ border-color: #ACB6B9; } /*'Search' and 'Mailing List' ----------------------------------------------*/ #proj-installation #search h1{ background: url(../graphics/turquoise/search-top.gif) left no-repeat; } #proj-installation #search form{ background: url(../graphics/turquoise/search-background.gif) top left no-repeat; } #proj-installation #search{ background: url(../graphics/turquoise/search-bottom.gif) bottom left no-repeat; } #proj-installation #mailing-list h1{ background: url(../graphics/turquoise/mailing-list-top.gif) left no-repeat; } #proj-installation #mailing-list form{ background: url(../graphics/turquoise/mailing-list-bottom.gif) bottom left no-repeat; } #proj-installation .input{ border-color: #ACB6B9; } /*’Footer’ ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #proj-installation #footer #credits{ background: url(../graphics/turquoise/footer-cloud.gif) top left no-repeat; } #proj-installation #footer #credits #cloud-extension{ background: url(../graphics/turquoise/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #proj-installation #footer #footer-nav{ background: url(../graphics/turquoise/footer-nav-top.gif) top left no-repeat; } #proj-installation #footer #footer-nav-bottom{ background: #394A49 url(../graphics/turquoise/footer-info-top.gif) bottom left no-repeat; } #proj-installation #footer #footer-nav a:link, #proj-installation #footer #credits a:link{ color: #FFF; } #proj-installation #footer #footer-nav a:visited, #proj-installation #footer #credits a:visited{ color: #FFF; } #proj-installation #footer #footer-nav a:hover, #proj-installation #footer #credits a:hover{ color: #00AF97; } #proj-installation #footer #footer-nav a:active, #proj-installation #footer #credits a:active{ color: #506463; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #proj-installation #footer #footer-info{ background: #00AF97; } #proj-installation #footer #footer-info-bottom{ background: url(../graphics/turquoise/footer-info-bottom.gif) bottom left no-repeat; } #proj-installation .info-side-border{ border-color: #394A49; } /*'Footer cog' - graphic embelishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #proj-installation #main-content{ background: url(../graphics/turquoise/footer-cog-top.gif) bottom right no-repeat; } #proj-installation #footer #footer-cog{ background: url(../graphics/turquoise/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - SCULPTURE(ORANGE) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links – for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #proj-sculpture #breadcrumb a:link, #proj-sculpture #footer-info a:link{ color: #4B463B; } #proj-sculpture #breadcrumb a:visited, #proj-sculpture #footer-info a:visited{ color: #4B463B; } #proj-sculpture #breadcrumb a:hover, #proj-sculpture #footer-info a:hover{ color: #FFF; } #proj-sculpture #breadcrumb a:active, #proj-sculpture #footer-info a:active{ color: #696053; } /*'Header' ----------------------------------------------*/ #proj-sculpture #header{ background: url(../graphics/orange/header-background.gif) top right no-repeat; } #proj-sculpture #header h1 { background: url(../graphics/orange/header-title.gif) no-repeat; } #proj-sculpture a.home-link{ background: url(../graphics/orange/header-navtext-home.gif) no-repeat 0 0; } #proj-sculpture a.projects-link{ background: url(../graphics/orange/header-navtext-projects.gif) no-repeat 0 0; } #proj-sculpture a.contact-link{ background: url(../graphics/orange/header-navtext-contact.gif) no-repeat 0 0; } #proj-sculpture a.links-link{ background: url(../graphics/orange/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #proj-sculpture #header #breadcrumb{ background: #F1892F url(../graphics/orange/header-breadcrumb-bottom.gif) bottom left no-repeat; } #proj-sculpture #header #breadcrumb-sides{ background: url(../graphics/orange/header-breadcrumb-sides.gif) top right no-repeat; } #proj-sculpture #header #breadcrumb{ color: #4B463B; } #proj-sculpture #header #breadcrumb ul li ul li{ background: url(../graphics/orange/star.gif) no-repeat left center; } /*Column 1 (primary content) - Contains all the content pertaining to the particular project which may or may not include the following sections - 'Project title' with 'Banner' image, 'Project description' text, 'Image' section, 'Video' section, 'Information' section and 'Additional' section ----------------------------------------------*/ /*Text links - regular links, 'Back to...' links, 'Top of page' links and 'Download' links. ----------------------------------------------*/ #proj-sculpture a:link.text-link{ color: #FFF; background: url(../graphics/orange/arrow-light-forward.gif) no-repeat right center; } #proj-sculpture a:visited.text-link{ color: #968E82; background: url(../graphics/orange/arrow-light-forward-visited.gif) no-repeat right center; } #proj-sculpture a:hover.text-link{ color: #F1892F; background: url(../graphics/orange/arrow-light-forward-hover.gif) no-repeat right center; } #proj-sculpture a:active.text-link{ color: #696053; background: url(../graphics/orange/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #proj-sculpture a:link.text-link-back{ color: #FFF; background: url(../graphics/orange/arrow-light-back.gif) no-repeat left center; } #proj-sculpture a:visited.text-link-back{ color: #968E82; background: url(../graphics/orange/arrow-light-back-visited.gif) no-repeat left center; } #proj-sculpture a:hover.text-link-back{ color: #F1892F; background: url(../graphics/orange/arrow-light-back-hover.gif) no-repeat left center; } #proj-sculpture a:active.text-link-back{ color: #696053; background: url(../graphics/orange/arrow-light-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-sculpture a:link.text-link-top{ color: #4B463B; background: url(../graphics/orange/arrow-dark-up.gif) no-repeat left center; } #proj-sculpture a:visited.text-link-top{ color: #968E82; background: url(../graphics/orange/arrow-dark-up-visited.gif) no-repeat left center; } #proj-sculpture a:hover.text-link-top{ color: #F1892F; background: url(../graphics/orange/arrow-dark-up-hover.gif) no-repeat left center; } #proj-sculpture a:active.text-link-top{ color: #696053; background: url(../graphics/orange/arrow-dark-up-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-sculpture #page-bottom-links a:link.text-link-back{ color: #4B463B; background: url(../graphics/orange/arrow-dark-back.gif) no-repeat left center; } #proj-sculpture #page-bottom-links a:visited.text-link-back{ color: #968E82; background: url(../graphics/orange/arrow-dark-back-visited.gif) no-repeat left center; } #proj-sculpture #page-bottom-links a:hover.text-link-back{ color: #F1892F; background: url(../graphics/orange/arrow-dark-back-hover.gif) no-repeat left center; } #proj-sculpture #page-bottom-links a:active.text-link-back{ color: #696053; background: url(../graphics/orange/arrow-dark-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-sculpture a:link.text-link-down{ color: #FFF; background: url(../graphics/orange/arrow-light-down.gif) no-repeat right center; } #proj-sculpture a:visited.text-link-down{ color: #968E82; background: url(../graphics/orange/arrow-light-down-visited.gif) no-repeat right center; } #proj-sculpture a:hover.text-link-down{ color: #F1892F; background: url(../graphics/orange/arrow-light-down-hover.gif) no-repeat right center; } #proj-sculpture a:active.text-link-down{ color: #696053; background: url(../graphics/orange/arrow-light-down-visited.gif) no-repeat right center; } /*'Project title' links and 'Project description' text ----------------------------------------------*/ #proj-sculpture #column1 #page-top-links{ background-color: #4B463B; } #proj-sculpture #column1 #project-description p{ color: #4B463B; } /*'Image' and 'Video' ----------------------------------------------*/ #proj-sculpture #column1 .project-large-bg{ background: url(../graphics/orange/project-large-bg-tile.gif) left repeat-y; } #proj-sculpture #column1 #project-images h1{ background: url(../graphics/orange/images-top.gif) left no-repeat; } #proj-sculpture #column1 #project-video h1{ background: url(../graphics/orange/video-top.gif) left no-repeat; } #proj-sculpture #column1 #project-images, #proj-sculpture #column1 #project-video{ background: url(../graphics/orange/images-bottom.gif) bottom left no-repeat; } #proj-sculpture #column1 #image-display, #proj-sculpture #column1 .video-display{ background-color: #696053; } #proj-sculpture #column1 #image-gallery .hover-title{ color: #4B463B; } #proj-sculpture #column1 #image-display h2{ background-color: #696053; color: #968E82; } /*'Information' and 'Additional' ----------------------------------------------*/ #proj-sculpture #column1 #project-information h1{ background: url(../graphics/orange/information-top.gif) left no-repeat; } #proj-sculpture #column1 #project-additional h1{ background: url(../graphics/orange/additional-top.gif) left no-repeat; } #proj-sculpture #column1 .project-small-bg{ background: url(../graphics/orange/project-small-bg-tile.gif) left repeat-y; } #proj-sculpture #column1 #project-information, #proj-sculpture #column1 #project-additional{ background: url(../graphics/orange/information-bottom.gif) bottom left no-repeat; } /*'Project Image' ----------------------------------------------*/ /*Column 1 (main column) - Contains large version of selected image with onward navigation below ----------------------------------------------*/ #proj-sculpture #column1 #project-image-view h1{ background: url(../graphics/orange/images-top.gif) left no-repeat; } #proj-sculpture #column1 #project-image-view{ background: url(../graphics/orange/images-bottom.gif) bottom left no-repeat; } #proj-sculpture #column1 #project-image-view #image-large{ background-color: #696053; } #proj-sculpture #column1 #project-image-nav li a:link img{ border-color: #FFF; } #proj-sculpture #column1 #project-image-nav li a:visited img{ border-color: #FFF; } #proj-sculpture #column1 #project-image-nav li a:hover img{ border-color: #F1892F; } #proj-sculpture #column1 #project-image-nav li a:active img{ border-color: #F1892F; } #proj-sculpture #column1 #project-image-nav li a.no-image img{ border-color: #968E82; } /*Column 2 (right-hand column) - 'Featured Projects', 'Search' and 'Mailing List' sections ----------------------------------------------*/ /*General styles ----------------------------------------------*/ #proj-sculpture #featured-project .article, #proj-sculpture #featured-project .last-article, #proj-sculpture #mailing-list{ background: url(../graphics/orange/column-background-tile.gif) left repeat-y; } /*'Featured Projects' ----------------------------------------------*/ #proj-sculpture #featured-project h1{ background: url(../graphics/orange/featured-project-top.gif) left no-repeat; } #proj-sculpture #featured-project{ background: url(../graphics/orange/featured-project-bottom.gif) bottom left no-repeat; } #proj-sculpture .image-box{ color: #B9B5AF; } #proj-sculpture a:link img{ border-color: #B9B5AF; } #proj-sculpture a:visited img{ border-color: #B9B5AF; } #proj-sculpture a:hover img{ border-color: #F1892F; } #proj-sculpture a:active img{ border-color: #B9B5AF; } /*'Search' and 'Mailing List' ----------------------------------------------*/ #proj-sculpture #search h1{ background: url(../graphics/orange/search-top.gif) left no-repeat; } #proj-sculpture #search form{ background: url(../graphics/orange/search-background.gif) top left no-repeat; } #proj-sculpture #search{ background: url(../graphics/orange/search-bottom.gif) bottom left no-repeat; } #proj-sculpture #mailing-list h1{ background: url(../graphics/orange/mailing-list-top.gif) left no-repeat; } #proj-sculpture #mailing-list form{ background: url(../graphics/orange/mailing-list-bottom.gif) bottom left no-repeat; } #proj-sculpture .input{ border-color: #B9B5AF; } /*'Footer' ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #proj-sculpture #footer #credits{ background: url(../graphics/orange/footer-cloud.gif) top left no-repeat; } #proj-sculpture #footer #credits #cloud-extension{ background: url(../graphics/orange/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #proj-sculpture #footer #footer-nav{ background: url(../graphics/orange/footer-nav-top.gif) top left no-repeat; } #proj-sculpture #footer #footer-nav-bottom{ background: #4B463B url(../graphics/orange/footer-info-top.gif) bottom left no-repeat; } #proj-sculpture #footer #footer-nav a:link, #proj-sculpture #footer #credits a:link{ color: #FFF; } #proj-sculpture #footer #footer-nav a:visited, #proj-sculpture #footer #credits a:visited{ color: #FFF; } #proj-sculpture #footer #footer-nav a:hover, #proj-sculpture #footer #credits a:hover{ color: #F1892F; } #proj-sculpture #footer #footer-nav a:active, #proj-sculpture #footer #credits a:active{ color: #696053; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #proj-sculpture #footer #footer-info{ background: #F1892F; } #proj-sculpture #footer #footer-info-bottom{ background: url(../graphics/orange/footer-info-bottom.gif) bottom left no-repeat; } #proj-sculpture .info-side-border{ border-color: #4B463B; } /*'Footer cog' - graphic embelishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #proj-sculpture #main-content{ background: url(../graphics/orange/footer-cog-top.gif) bottom right no-repeat; } #proj-sculpture #footer #footer-cog{ background: url(../graphics/orange/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - ANIMATION / VIDEO(YELLOW) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links – for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #proj-video #breadcrumb a:link, #proj-video #footer-info a:link{ color: #4C5040; } #proj-video #breadcrumb a:visited, #proj-video #footer-info a:visited{ color: #4C5040; } #proj-video #breadcrumb a:hover, #proj-video #footer-info a:hover{ color: #FFF; } #proj-video #breadcrumb a:active, #proj-video #footer-info a:active{ color: #6A6C58; } /*'Header' ----------------------------------------------*/ #proj-video #header{ background: url(../graphics/yellow/header-background.gif) top right no-repeat; } #proj-video #header h1 { background: url(../graphics/yellow/header-title.gif) no-repeat; } #proj-video a.home-link{ background: url(../graphics/yellow/header-navtext-home.gif) no-repeat 0 0; } #proj-video a.projects-link{ background: url(../graphics/yellow/header-navtext-projects.gif) no-repeat 0 0; } #proj-video a.contact-link{ background: url(../graphics/yellow/header-navtext-contact.gif) no-repeat 0 0; } #proj-video a.links-link{ background: url(../graphics/yellow/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #proj-video #header #breadcrumb{ background: #EEDA1D url(../graphics/yellow/header-breadcrumb-bottom.gif) bottom left no-repeat; } #proj-video #header #breadcrumb-sides{ background: url(../graphics/yellow/header-breadcrumb-sides.gif) top right no-repeat; } #proj-video #header #breadcrumb{ color: #4C5040; } #proj-video #header #breadcrumb ul li ul li{ background: url(../graphics/yellow/star.gif) no-repeat left center; } /*Column 1 (primary content) - Contains all the content pertaining to the particular project which may or may not include the following sections - 'Project title' with 'Banner' image, 'Project description' text, 'Image' section, 'Video' section, 'Information' section and 'Additional' section ----------------------------------------------*/ /*Text links - regular links, 'Back to...' links, 'Top of page' links and 'Download' links. ----------------------------------------------*/ #proj-video a:link.text-link{ color: #FFF; background: url(../graphics/yellow/arrow-light-forward.gif) no-repeat right center; } #proj-video a:visited.text-link{ color: #989987; background: url(../graphics/yellow/arrow-light-forward-visited.gif) no-repeat right center; } #proj-video a:hover.text-link{ color: #EEDA1D; background: url(../graphics/yellow/arrow-light-forward-hover.gif) no-repeat right center; } #proj-video a:active.text-link{ color: #6A6C58; background: url(../graphics/yellow/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #proj-video a:link.text-link-back{ color: #FFF; background: url(../graphics/yellow/arrow-light-back.gif) no-repeat left center; } #proj-video a:visited.text-link-back{ color: #989987; background: url(../graphics/yellow/arrow-light-back-visited.gif) no-repeat left center; } #proj-video a:hover.text-link-back{ color: #EEDA1D; background: url(../graphics/yellow/arrow-light-back-hover.gif) no-repeat left center; } #proj-video a:active.text-link-back{ color: #6A6C58; background: url(../graphics/yellow/arrow-light-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-video a:link.text-link-top{ color: #4C5040; background: url(../graphics/yellow/arrow-dark-up.gif) no-repeat left center; } #proj-video a:visited.text-link-top{ color: #989987; background: url(../graphics/yellow/arrow-dark-up-visited.gif) no-repeat left center; } #proj-video a:hover.text-link-top{ color: #EEDA1D; background: url(../graphics/yellow/arrow-dark-up-hover.gif) no-repeat left center; } #proj-video a:active.text-link-top{ color: #6A6C58; background: url(../graphics/yellow/arrow-dark-up-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-video #page-bottom-links a:link.text-link-back{ color: #4C5040; background: url(../graphics/yellow/arrow-dark-back.gif) no-repeat left center; } #proj-video #page-bottom-links a:visited.text-link-back{ color: #989987; background: url(../graphics/yellow/arrow-dark-back-visited.gif) no-repeat left center; } #proj-video #page-bottom-links a:hover.text-link-back{ color: #EEDA1D; background: url(../graphics/yellow/arrow-dark-back-hover.gif) no-repeat left center; } #proj-video #page-bottom-links a:active.text-link-back{ color: #6A6C58; background: url(../graphics/yellow/arrow-dark-back-visited.gif) no-repeat left center; } /*----------------------------------------------*/ #proj-video a:link.text-link-down{ color: #FFF; background: url(../graphics/yellow/arrow-light-down.gif) no-repeat right center; } #proj-video a:visited.text-link-down{ color: #989987; background: url(../graphics/yellow/arrow-light-down-visited.gif) no-repeat right center; } #proj-video a:hover.text-link-down{ color: #EEDA1D; background: url(../graphics/yellow/arrow-light-down-hover.gif) no-repeat right center; } #proj-video a:active.text-link-down{ color: #6A6C58; background: url(../graphics/yellow/arrow-light-down-visited.gif) no-repeat right center; } /*'Project title' links and 'Project description' text ----------------------------------------------*/ #proj-video #column1 #project-title #page-top-links{ background-color: #4C5040; } #proj-video #column1 #project-description p{ color: #4C5040; } /*'Image' and 'Video' ----------------------------------------------*/ #proj-video #column1 .project-large-bg{ background: url(../graphics/yellow/project-large-bg-tile.gif) left repeat-y; } #proj-video #column1 #project-images h1{ background: url(../graphics/yellow/images-top.gif) left no-repeat; } #proj-video #column1 #project-video h1{ background: url(../graphics/yellow/video-top.gif) left no-repeat; } #proj-video #column1 #project-images, #proj-video #column1 #project-video{ background: url(../graphics/yellow/images-bottom.gif) bottom left no-repeat; } #proj-video #column1 #image-display, #proj-video #column1 .video-display{ background-color: #6A6C58; } #proj-video #column1 #image-gallery .hover-title{ color: #4C5040; } #proj-video #column1 #image-display h2{ background-color: #6A6C58; color: #989987; } /*'Information' and 'Additional' ----------------------------------------------*/ #proj-video #column1 #project-information h1{ background: url(../graphics/yellow/information-top.gif) left no-repeat; } #proj-video #column1 #project-additional h1{ background: url(../graphics/yellow/additional-top.gif) left no-repeat; } #proj-video #column1 .project-small-bg{ background: url(../graphics/yellow/project-small-bg-tile.gif) left repeat-y; } #proj-video #column1 #project-information, #proj-video #column1 #project-additional{ background: url(../graphics/yellow/information-bottom.gif) bottom left no-repeat; } /*'Project Image' ----------------------------------------------*/ /*Column 1 (main column) - Contains large version of selected image with onward navigation below ----------------------------------------------*/ #proj-video #column1 #project-image-view h1{ background: url(../graphics/yellow/images-top.gif) left no-repeat; } #proj-video #column1 #project-image-view{ background: url(../graphics/yellow/images-bottom.gif) bottom left no-repeat; } #proj-video #column1 #project-image-view #image-large{ background-color: #6A6C58; } #proj-video #column1 #project-image-nav li a:link img{ border-color: #FFF; } #proj-video #column1 #project-image-nav li a:visited img{ border-color: #FFF; } #proj-video #column1 #project-image-nav li a:hover img{ border-color: #EEDA1D; } #proj-video #column1 #project-image-nav li a:active img{ border-color: #EEDA1D; } #proj-video #column1 #project-image-nav li a.no-image img{ border-color: #989987; } /*Column 2 (right-hand column) - 'Featured Projects', 'Search' and 'Mailing List' sections ----------------------------------------------*/ /*General styles ----------------------------------------------*/ #proj-video #featured-project .article, #proj-video #featured-project .last-article, #proj-video #mailing-list{ background: url(../graphics/yellow/column-background-tile.gif) left repeat-y; } /*'Featured Projects' ----------------------------------------------*/ #proj-video #featured-project h1{ background: url(../graphics/yellow/featured-project-top.gif) left no-repeat; } #proj-video #featured-project{ background: url(../graphics/yellow/featured-project-bottom.gif) bottom left no-repeat; } #proj-video .image-box{ color: #BABCB2; } #proj-video a:link img{ border-color: #BABCB2; } #proj-video a:visited img{ border-color: #BABCB2; } #proj-video a:hover img{ border-color: #EEDA1D; } #proj-video a:active img{ border-color: #BABCB2; } /*'Search' and 'Mailing List' ----------------------------------------------*/ #proj-video #search h1{ background: url(../graphics/yellow/search-top.gif) left no-repeat; } #proj-video #search form{ background: url(../graphics/yellow/search-background.gif) top left no-repeat; } #proj-video #search{ background: url(../graphics/yellow/search-bottom.gif) bottom left no-repeat; } #proj-video #mailing-list h1{ background: url(../graphics/yellow/mailing-list-top.gif) left no-repeat; } #proj-video #mailing-list form{ background: url(../graphics/yellow/mailing-list-bottom.gif) bottom left no-repeat; } #proj-video .input{ border-color: #BABCB2; } /*'Footer' ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #proj-video #footer #credits{ background: url(../graphics/yellow/footer-cloud.gif) top left no-repeat; } #proj-video #footer #credits #cloud-extension{ background: url(../graphics/yellow/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #proj-video #footer #footer-nav{ background: url(../graphics/yellow/footer-nav-top.gif) top left no-repeat; } #proj-video #footer #footer-nav-bottom{ background: #4C5040 url(../graphics/yellow/footer-info-top.gif) bottom left no-repeat; } #proj-video #footer #footer-nav a:link, #proj-video #footer #credits a:link{ color: #FFF; } #proj-video #footer #footer-nav a:visited, #proj-video #footer #credits a:visited{ color: #FFF; } #proj-video #footer #footer-nav a:hover, #proj-video #footer #credits a:hover{ color: #EEDA1D; } #proj-video #footer #footer-nav a:active, #proj-video #footer #credits a:active{ color: #6A6C58; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #proj-video #footer #footer-info{ background: #EEDA1D; } #proj-video #footer #footer-info-bottom{ background: url(../graphics/yellow/footer-info-bottom.gif) bottom left no-repeat; } #proj-video .info-side-border{ border-color: #4C5040; } /*'Footer cog' - graphic embelishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #proj-video #main-content{ background: url(../graphics/yellow/footer-cog-top.gif) bottom right no-repeat; } #proj-video #footer #footer-cog{ background: url(../graphics/yellow/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - CONTACT(LILAC) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links – for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #contact #breadcrumb a:link, #contact #footer-info a:link{ color: #47464F; } #contact #breadcrumb a:visited, #contact #footer-info a:visited{ color: #47464F; } #contact #breadcrumb a:hover, #contact #footer-info a:hover{ color: #FFF; } #contact #breadcrumb a:active, #contact #footer-info a:active{ color: #605F6B; } /*'Header' ----------------------------------------------*/ #contact #header{ background: url(../graphics/lilac/header-background.gif) top right no-repeat; } #contact #header h1 { background: url(../graphics/lilac/header-title.gif) no-repeat; } #contact a.home-link{ background: url(../graphics/lilac/header-navtext-home.gif) no-repeat 0 0; } #contact a.projects-link{ background: url(../graphics/lilac/header-navtext-projects.gif) no-repeat 0 0; } #contact a.contact-link{ background: url(../graphics/lilac/header-navtext-contact.gif) no-repeat 0 0; } #contact a.links-link{ background: url(../graphics/lilac/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #contact #header #breadcrumb{ background: #9384BD url(../graphics/lilac/header-breadcrumb-bottom.gif) bottom left no-repeat; } #contact #header #breadcrumb-sides{ background: url(../graphics/lilac/header-breadcrumb-sides.gif) top right no-repeat; } #contact #header #breadcrumb{ color: #47464F; } #contact #header #breadcrumb ul li ul li{ background: url(../graphics/lilac/star.gif) no-repeat left center; } /*Column 1 styling (primary content) - on the 'Contact' page this is divided into 2 further columns (1a and 1b). 1a contains the 'About' and 'Featured Projects' sections. 1b contains the 'Contact' form. ----------------------------------------------*/ /*Text links - regular links and 'Top of page' links. ----------------------------------------------*/ #contact a:link.text-link{ color: #FFF; background: url(../graphics/lilac/arrow-light-forward.gif) no-repeat right center; } #contact a:visited.text-link{ color: #8C8D99; background: url(../graphics/lilac/arrow-light-forward-visited.gif) no-repeat right center; } #contact a:hover.text-link{ color: #9384BD; background: url(../graphics/lilac/arrow-light-forward-hover.gif) no-repeat right center; } #contact a:active.text-link{ color: #605F6B; background: url(../graphics/lilac/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #contact #column1 a:link.text-link-top{ color: #47464F; background: url(../graphics/lilac/arrow-dark-up.gif) no-repeat left center; } #contact #column1 a:visited.text-link-top{ color: #8C8D99; background: url(../graphics/lilac/arrow-dark-up-visited.gif) no-repeat left center; } #contact #column1 a:hover.text-link-top{ color: #9384BD; background: url(../graphics/lilac/arrow-dark-up-hover.gif) no-repeat left center; } #contact #column1 a:active.text-link-top{ color: #605F6B; background: url(../graphics/lilac/arrow-dark-up-visited.gif) no-repeat left center; } /*Column 1a ----------------------------------------------*/ #contact #about p, #contact #featured-project .article, #contact #featured-project .last-article{ background: url(../graphics/lilac/column-background-tile.gif) left repeat-y; } /*'About' ----------------------------------------------*/ #contact #about h1 { background: url(../graphics/lilac/about-top.gif) left no-repeat; } #contact #about { background: url(../graphics/lilac/about-bottom.gif) bottom left no-repeat; } /*'Featured Projects' ----------------------------------------------*/ #contact #featured-project h1 { background: url(../graphics/lilac/featured-project-top.gif) left no-repeat; } #contact #featured-project { background: url(../graphics/lilac/featured-project-bottom.gif) bottom left no-repeat; } #contact .image-box{ color: #B2B3BD; } #contact a:link img{ border-color: #B2B3BD; } #contact a:visited img{ border-color: #B2B3BD; } #contact a:hover img{ border-color: #9384BD; } #contact a:active img{ border-color: #B2B3BD; } /*Column 1b (central column) - 'Contact' form. ----------------------------------------------*/ #contact #column1b { border-left-color: #B2B3BD; border-right-color: #B2B3BD; } #contact #column1b input{ color: #47464F; } #contact #column1b #contact-form h1{ background: url(../graphics/lilac/contact-top.gif) left no-repeat; } #contact #column1b #contact-form{ background: url(../graphics/lilac/contact-bg-tile.gif) left repeat-y; } #contact #column1b #contact-form form{ background: url(../graphics/lilac/contact-bottom.gif) bottom left no-repeat; } #contact #column1b #contact-form .input, #contact #column1b #contact-form .select{ border-color: #B2B3BD; } /*Column 2 (right-hand column) - 'Search' and 'Mailing List' sections ----------------------------------------------*/ #contact #column2 #search h1{ background: url(../graphics/lilac/search-top.gif) left no-repeat; } #contact #column2 #search form{ background: url(../graphics/lilac/search-background.gif) top left no-repeat; } #contact #column2 #search{ background: url(../graphics/lilac/search-bottom.gif) bottom left no-repeat; } #contact #column2 #mailing-list h1 { background: url(../graphics/lilac/mailing-list-top.gif) left no-repeat; } #contact #mailing-list{ background: url(../graphics/lilac/column-background-tile.gif) left repeat-y; } #contact #column2 #mailing-list form{ background: url(../graphics/lilac/mailing-list-bottom.gif) bottom left no-repeat; } #contact #column2 .input{ border-color: #B2B3BD; } /*'Footer' ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #contact #footer #credits{ background: url(../graphics/lilac/footer-cloud.gif) top left no-repeat; } #contact #footer #credits #cloud-extension{ background: url(../graphics/lilac/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #contact #footer #footer-nav{ background: url(../graphics/lilac/footer-nav-top.gif) top left no-repeat; } #contact #footer #footer-nav-bottom{ background: #47464F url(../graphics/lilac/footer-info-top.gif) bottom left no-repeat; } #contact #footer #footer-nav a:link, #contact #footer #credits a:link{ color: #FFF; } #contact #footer #footer-nav a:visited, #contact #footer #credits a:visited{ color: #FFF; } #contact #footer #footer-nav a:hover, #contact #footer #credits a:hover{ color: #9384BD; } #contact #footer #footer-nav a:active, #contact #footer #credits a:active{ color: #605F6B; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #contact #footer #footer-info{ background: #9384BD; } #contact #footer #footer-info-bottom{ background: url(../graphics/lilac/footer-info-bottom.gif) bottom left no-repeat; } #contact .info-side-border{ border-color: #47464F; } /*'Footer cog' - graphic embelishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #contact #main-content{ background: url(../graphics/lilac/footer-cog-top.gif) bottom right no-repeat; } #contact #footer #footer-cog{ background: url(../graphics/lilac/footer-cog-bottom.gif) top right no-repeat; } /*-------------------------------------------------------------- ---------------------------------------------------------------- ---------------------------------------------------------------- PROJECTS - LINKS(FUCHSHA) ---------------------------------------------------------------- ---------------------------------------------------------------- ----------------------------------------------------------------*/ /*General styles ----------------------------------------------*/ /*Menu links – for menus on the strong colour background ('Breadcrumb trail' and 'Footer Info') ----------------------------------------------*/ #links #breadcrumb a:link, #links #footer-info a:link{ color: #4C424C; } #links #breadcrumb a:visited, #links #footer-info a:visited{ color: #4C424C; } #links #breadcrumb a:hover, #links #footer-info a:hover{ color: #FFF; } #links #breadcrumb a:active, #links #footer-info a:active{ color: #665B68; } /*'Header' ----------------------------------------------*/ #links #header{ background: url(../graphics/fuchsia/header-background.gif) top right no-repeat; } #links #header h1 { background: url(../graphics/fuchsia/header-title.gif) no-repeat; } #links a.home-link{ background: url(../graphics/fuchsia/header-navtext-home.gif) no-repeat 0 0; } #links a.projects-link{ background: url(../graphics/fuchsia/header-navtext-projects.gif) no-repeat 0 0; } #links a.contact-link{ background: url(../graphics/fuchsia/header-navtext-contact.gif) no-repeat 0 0; } #links a.links-link{ background: url(../graphics/fuchsia/header-navtext-links.gif) no-repeat 0 0; } /*'Breadcrumb trail' ----------------------------------------------*/ #links #header #breadcrumb{ background: #BD60A2 url(../graphics/fuchsia/header-breadcrumb-bottom.gif) bottom left no-repeat; } #links #header #breadcrumb-sides{ background: url(../graphics/fuchsia/header-breadcrumb-sides.gif) top right no-repeat; } #links #header #breadcrumb{ color: #4C424C; } #links #header #breadcrumb ul li ul li{ background: url(../graphics/fuchsia/star.gif) no-repeat left center; } /*Column 1 (primary content) - on the 'Links' page this is divided into 2 further columns (1a and 1b). 1a contains the 'About' and 'Featured Projects' sections. 1b contains the 'Links menu'. ----------------------------------------------*/ /*Text links - regular links and 'Top of page' links. ----------------------------------------------*/ #links a:link.text-link{ color: #FFF; background: url(../graphics/fuchsia/arrow-light-forward.gif) no-repeat right center; } #links a:visited.text-link{ color: #918996; background: url(../graphics/fuchsia/arrow-light-forward-visited.gif) no-repeat right center; } #links a:hover.text-link{ color: #BD60A2; background: url(../graphics/fuchsia/arrow-light-forward-hover.gif) no-repeat right center; } #links a:active.text-link{ color: #665B68; background: url(../graphics/fuchsia/arrow-light-forward-visited.gif) no-repeat right center; } /*----------------------------------------------*/ #links #column1 a:link.text-link-top{ color: #4C424C; background: url(../graphics/fuchsia/arrow-dark-up.gif) no-repeat left center; } #links #column1 a:visited.text-link-top{ color: #918996; background: url(../graphics/fuchsia/arrow-dark-up-visited.gif) no-repeat left center; } #links #column1 a:hover.text-link-top{ color: #BD60A2; background: url(../graphics/fuchsia/arrow-dark-up-hover.gif) no-repeat left center; } #links #column1 a:active.text-link-top{ color: #665B68; background: url(../graphics/fuchsia/arrow-dark-up-visited.gif) no-repeat left center; } /*Column 1a ----------------------------------------------*/ #links #about p, #links #featured-project .article, #links #featured-project .last-article{ background: url(../graphics/fuchsia/column-background-tile.gif) left repeat-y; } /*'About' ----------------------------------------------*/ #links #about h1 { background: url(../graphics/fuchsia/about-top.gif) left no-repeat; } #links #about { background: url(../graphics/fuchsia/about-bottom.gif) bottom left no-repeat; } /*'Featured Projects' ----------------------------------------------*/ #links #featured-project h1 { background: url(../graphics/fuchsia/featured-project-top.gif) left no-repeat; } #links #featured-project { background: url(../graphics/fuchsia/featured-project-bottom.gif) bottom left no-repeat; } #links .image-box{ color: #B5B2BC; } #links a:link img{ border-color: #B5B2BC; } #links a:visited img{ border-color: #B5B2BC; } #links a:hover img{ border-color: #BD60A2; } #links a:active img{ border-color: #B5B2BC; } /*'Links Menu' styling in column 1b. ----------------------------------------------*/ #links #column1b { border-left-color: #B5B2BC; border-right-color: #B5B2BC; } #links #column1b p { color: #4C424C; } #links #column1b #links-menu h1{ background: url(../graphics/fuchsia/links-top.gif) left no-repeat; } #links #column1b #links-menu a{ background-color: #4C424C; } #links #column1b #links-menu .links-menu-image-link{ background-color: #4C424C; } #links #links-menu a:link{ color: #FFF; } #links #links-menu a:visited{ color: #B5B2BC; } #links #links-menu a:hover{ color: #BD60A2; } #links #links-menu a:active{ color: #B5B2BC; } /*Column 2 (right-hand column) - 'Search' and 'Mailing List' sections ----------------------------------------------*/ #links #column2 #search h1{ background: url(../graphics/fuchsia/search-top.gif) left no-repeat; } #links #column2 #search form{ background: url(../graphics/fuchsia/search-background.gif) top left no-repeat; } #links #column2 #search{ background: url(../graphics/fuchsia/search-bottom.gif) bottom left no-repeat; } #links #column2 #mailing-list h1 { background: url(../graphics/fuchsia/mailing-list-top.gif) left no-repeat; } #links #mailing-list{ background: url(../graphics/fuchsia/column-background-tile.gif) left repeat-y; } #links #column2 #mailing-list form{ background: url(../graphics/fuchsia/mailing-list-bottom.gif) bottom left no-repeat; } #links #column2 .input{ border-color: #B5B2BC; } /*'Footer' ----------------------------------------------*/ /*'Credits' (Cloud at bottom left of 'Footer') ----------------------------------------------*/ #links #footer #credits{ background: url(../graphics/fuchsia/footer-cloud.gif) top left no-repeat; } #links #footer #credits #cloud-extension{ background: url(../graphics/fuchsia/footer-cloud-extension.gif) bottom left no-repeat; } /*'Footer navigation' (repeat of 'Main navigation' in 'Header' section) ----------------------------------------------*/ #links #footer #footer-nav{ background: url(../graphics/fuchsia/footer-nav-top.gif) top left no-repeat; } #links #footer #footer-nav-bottom{ background: #4C424C url(../graphics/fuchsia/footer-info-top.gif) bottom left no-repeat; } #links #footer #footer-nav a:link, #links #footer #credits a:link{ color: #FFF; } #links #footer #footer-nav a:visited, #links #footer #credits a:visited{ color: #FFF; } #links #footer #footer-nav a:hover, #links #footer #credits a:hover{ color: #BD60A2; } #links #footer #footer-nav a:active, #links #footer #credits a:active{ color: #665B68; } /*'Info navigation' (secondary Footer navigation) ----------------------------------------------*/ #links #footer #footer-info{ background: #BD60A2; } #links #footer #footer-info-bottom{ background: url(../graphics/fuchsia/footer-info-bottom.gif) bottom left no-repeat; } #links .info-side-border{ border-color: #4C424C; } /*'Footer cog' - graphic embelishment at the bottom right of the 'Footer'. Extends above the 'Footer' section so top section is in the bottom right of 'Main content' ----------------------------------------------*/ #links #main-content{ background: url(../graphics/fuchsia/footer-cog-top.gif) bottom right no-repeat; } #links #footer #footer-cog{ background: url(../graphics/fuchsia/footer-cog-bottom.gif) top right no-repeat; }