/* ----------------------------------------------------------------- Screen stylesheet www.devine1.co.nz Created 10/04/2010 by Alan Koeninger Last Updated: See SVN ----------------------------------------------------------------- */ @import "common.css"; body { font-family:Arial, Helvetica, sans-serif; color:#868686; background-color: #141311; text-align:center; } .print { display:none; } #top { position:absolute; left:0; top:0; } /* MASTER TEMPLATE SHELL -------------------------------------------- */ #zone-header, #zone-sectionheader, #zone-maincontent, #zone-footer { clear:both; } #zone-header .liner, #zone-sectionheader .liner, #zone-maincontent .liner, #zone-footer .liner { width:993px; margin:0 auto; text-align:left; } /* Header */ #zone-header { background:#000 url(/wp-content/themes/devine/images/devine-masthead-2.jpg) no-repeat center top; min-height:171px; } #zone-header .logo { margin-left:74px; } /* Main nav */ #zone-sectionheader { background:url(/wp-content/themes/devine/images/primary-nav-bg.png) no-repeat center top; height:64px; } #zone-sectionheader #primary-nav ul { margin:0 0 0 22px; } #zone-sectionheader #primary-nav li { float:left; } #zone-sectionheader #primary-nav li span { display:none; } #zone-sectionheader #primary-nav li a { width:240px; height:39px; position:relative; display:block; float:left; font-family:'IM Fell DW Pica', Arial, Helvetica, sans-serif; color:#b3b3b3; font-size:1.9em; line-height:1.4; border-right:2px solid #646464; padding:15px 0 9px; text-align:center; background-repeat:repeat-x; } #zone-sectionheader #primary-nav li a:hover { text-decoration:none; } #zone-sectionheader #primary-nav li.current_page_item a { color:#fff; } #zone-sectionheader #primary-nav li.page-item-6 a { border-left:2px solid #646464; } /* Section colours */ .piercing #zone-sectionheader #primary-nav li.page-item-6 a, #zone-sectionheader #primary-nav li.page-item-6 a:hover { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-piercing.png); } #zone-sectionheader #primary-nav li.page-item-6 a { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-piercing-hover.png); } .tattoo #zone-sectionheader #primary-nav li.page-item-91 a, #zone-sectionheader #primary-nav li.page-item-91 a:hover { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-tattoo.png); } #zone-sectionheader #primary-nav li.page-item-91 a { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-tattoo-hover.png); } .tarot #zone-sectionheader #primary-nav li.page-item-10 a, #zone-sectionheader #primary-nav li.page-item-10 a:hover { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-tarot.png); } #zone-sectionheader #primary-nav li.page-item-10 a { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-tarot-hover.png); } .devine-gear #zone-sectionheader #primary-nav li.page-item-12 a, #zone-sectionheader #primary-nav li.page-item-12 a:hover { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-devine-gear.png); } #zone-sectionheader #primary-nav li.page-item-12 a { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-devine-gear-hover.png); } .devine-light #zone-sectionheader #primary-nav li.page-item-86 a, #zone-sectionheader #primary-nav li.page-item-86 a:hover { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-devine-light.png); } #zone-sectionheader #primary-nav li.page-item-86 a { background-image:url(/wp-content/themes/devine/images/primary-nav-bg-devine-light-hover.png); } /* Homepage version */ .home #zone-sectionheader #primary-nav li.page-item-6 a { color:#d9cee1; background-image:url(/wp-content/themes/devine/images/home-nav-bg-piercing.png); } .home #zone-sectionheader #primary-nav li.page-item-6 a:hover { background-image:url(/wp-content/themes/devine/images/home-nav-bg-piercing-hover.png); } .home #zone-sectionheader #primary-nav li.page-item-91 a { background-image:url(/wp-content/themes/devine/images/home-nav-bg-tattoo.png); } .home #zone-sectionheader #primary-nav li.page-item-91 a:hover { background-image:url(/wp-content/themes/devine/images/home-nav-bg-tattoo-hover.png); } .home #zone-sectionheader #primary-nav li.page-item-10 a { color:#e1caca; background-image:url(/wp-content/themes/devine/images/home-nav-bg-tarot.png); } .home #zone-sectionheader #primary-nav li.page-item-10 a:hover { background-image:url(/wp-content/themes/devine/images/home-nav-bg-tarot-hover.png); } .home #zone-sectionheader #primary-nav li.page-item-12 a { color:#b9cdd9; background-image:url(/wp-content/themes/devine/images/home-nav-bg-devine-gear.png); } .home #zone-sectionheader #primary-nav li.page-item-12 a:hover { background-image:url(/wp-content/themes/devine/images/home-nav-bg-devine-gear-hover.png); } .home #zone-sectionheader #primary-nav li.page-item-86 a { color:#afccc2; background-image:url(/wp-content/themes/devine/images/home-nav-bg-devine-light.png); } .home #zone-sectionheader #primary-nav li.page-item-86 a:hover { background-image:url(/wp-content/themes/devine/images/home-nav-bg-devine-light-hover.png); } /* Main content */ #zone-maincontent .liner { padding:32px 0; } /* Footer */ #zone-footer { background-color:#141311; background-position:center -200px !important; border-top:4px solid #2d5246; min-height:142px; } #zone-footer .liner { position:relative; padding:20px 0; } #zone-footer .wrapper { margin-left:12px; } #zone-footer p, #zone-footer ul { color:#555; margin:0; clear:both; } #zone-footer li { float:left; font-size:1.1em; padding:0 10px 0 30px; display:block; background:url(/wp-content/themes/devine/images/icon-pentagram-footer.png) no-repeat 0 0; } #zone-footer li.first { background:none; padding-left:0; } #zone-footer li.logo { position:absolute; right:0; top:0; background:none; padding-left:0; } #zone-footer .copyright { clear:both; margin-top:10px; } /* LAYOUT TEMPLATES To apply any configuration of columns from one to a maximum of five, use the following classes followed by a .clear class. * 'layout-col-1' – spans one column * 'layout-col-2' – spans two columns * 'layout-col-3' – spans three columns -------------------------------------------- */ /* reusable layout columns */ .layout-col-1 { width:237px; float:left; margin:0; } .layout-col-2 { width:474px; float:left; margin:0; } .layout-col-3 { width:711px; float:left; margin:0; } #content.layout-col-3 { margin-left:32px; width:696px; background:url(/wp-content/themes/devine/images/sidebar-background-left.png) repeat-y right top; } #content.layout-col-3 .layout-col-2 { width:341px; margin-right:14px; } #content.layout-col-3 .last { margin-right:0; } .single #content.layout-col-3, .page-id-12 #content.layout-col-3, .home #content.layout-col-3 { padding-right:30px; width:666px; } #sidebar.layout-col-1 { margin-left:18px; width:247px; } /* LINKS -------------------------------------------- */ a { color:#e0dfe0; text-decoration:none; } a:hover, a:focus { text-decoration:underline; } /* Admin links */ #zone-maincontent .admin-edit-link { padding-top:10px; } #homepage-nav .admin-edit-link { clear:both; } #zone-maincontent .admin-edit-link a { background-color:#AE4F1D !important; text-decoration:none; font-size:10px; text-transform:uppercase; color:#fff !important; padding:0 5px; line-height:1.6; } #zone-maincontent .admin-edit-link a:hover { text-decoration:underline; } /* TEXT STYLES -------------------------------------------- */ /* starting text sizes */ dl, dt, dd, ul, ol, pre, input, textarea, p, blockquote, th, td { font-size:1em; } p, ul, ol { margin:0 0 1em; } /* linked text styles */ .text-link-1 { font-size:0.92em; } /* Bodytext - variations */ .text-body-large, .single #content { font-size:1.1em; line-height:1.65em; margin-bottom:1em; } .text-body-small { font-size:0.92em; } .text-byline { } .text-date { } /* HEADING STYLES -------------------------------------------- */ h1 { font-family:Arial, Helvetica, sans-serif; } h2, h3 { font-family:Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { margin:0 0 0.3em; } #zone-header h1 { margin:0; } #content h1 { font-family:'IM Fell DW Pica', Arial, Helvetica, sans-serif; margin-left:-4px; margin-bottom:13px; font-size:2.6em; line-height:1em; background:url(/wp-content/themes/devine/images/icon-pentagram-h1.gif) no-repeat 0 0; padding-left:36px; } #content h1 cufon { margin-top:-6px; } h2 { font-size:1.5em; color:#e0dfe0; } h3 { font-size:1.3em; color:#858480; } h4 { font-size:1em; font-weight:bold; } h5 { font-size:1em; font-weight:bold; } h6 { font-size:1em; } #content .hero h3 { color:#858480; } #content h2 .header-link { font-size:0.7em; padding:0 20px 0 5px; float:right; } /* LIST STYLES -------------------------------------------- */ /* inline list */ .text-list-inline li { display:inline; padding-right:5px; } /* Pagination */ .nav-pagination li { display:inline; } /* DATA TABLES -------------------------------------------- */ table { width:100%; margin-bottom:15px; } caption { text-align:left; } th { font-weight:normal; text-align:left; color:#e0dfe0; } th, td { vertical-align:top; padding:2px 0; } th { border-bottom:1px solid #272827; } td { border-bottom:1px solid #272827; } /* PRODUCTS -------------------------------------------- */ .products .post { float:left; width:300px; margin-right:15px; } .products .post p { margin-left:165px; } .products .post p.image { margin-left:0; float:left; width:165px; } .products .post img { width:150px; height:113px; border:2px solid #ccc; } /* GOOGLE MAP -------------------------------------------- */ #map_canvas { width:600px; height:400px; border:4px solid #254239; margin-bottom:14px; } /* GENERAL IMAGES -------------------------------------------- */ img.alignright, img.alignleft, img.alignnone { border:2px solid #ccc; } img.alignright { float:right; margin:0 24px 10px 14px; } img.alignleft { float:left; margin:0 14px 10px 0; } /* WIDGETS -------------------------------------------- */ /* Widget Hero */ .hero { color:#a9a9a9; margin:3px 20px 30px 0; } .hero p { margin-bottom:0.5em; } .hero .hero-image { float:left; width:351px; } .hero blockquote { font-size:1.3em; font-family:Arial, Helvetica, sans-serif; } .hero blockquote strong { font-weight:normal; color:#858480; font-size:1.2em; font-family:Arial, Helvetica, sans-serif; } .hero img { border:2px solid #ccc; } #content .layout-col-2 .hero { margin-right:0; } #content .layout-col-2 .hero .hero-image { width:341px; } /* Sidebar call now widget */ .textwidget { margin-bottom:18px; background:url(/wp-content/themes/devine/images/sidebar-widget-bottom.png) no-repeat left bottom; padding-bottom:10px; min-height:10px; } .textwidget div { background:url(/wp-content/themes/devine/images/sidebar-widget-top.png) no-repeat 0 0; padding-top:10px; } .textwidget div div { background:#383737; padding:8px 18px 1px; } .textwidget div div div { padding:0; background:none; } #sidebar .textwidget h2 { color:#e0dfe0; font-size:2em; margin:0; line-height:1.2em; font-family:'IM Fell Double Pica', Arial, Helvetica, sans-serif; } #sidebar .textwidget h3 { color:#ccc; font-size:2.2em; line-height:1em; font-family:'IM Fell Double Pica', Arial, Helvetica, sans-serif; } #sidebar .textwidget, #sidebar .textwidget p { color:#ccc; } /* Sidebar links widget */ #sidebar .widget-links h2 { color:#e0dfe0; font-size:1.4em; line-height:1.2em; } .widget-links { margin-bottom:18px; background:url(/wp-content/themes/devine/images/sidebar-link-widget-bottom.png) no-repeat left bottom; padding-bottom:10px; } .widget-links div { background:url(/wp-content/themes/devine/images/sidebar-link-widget-top.png) no-repeat 0 0; padding-top:10px; } .widget-links div div { background:url(/wp-content/themes/devine/images/sidebar-link-widget-middle.png) repeat; padding:8px 18px 1px; } /* Widget Gallery -------------------------------------------- */ .widget-gallery .gallery a { float:left; } .widget-gallery .gallery a { display:block; float:left; width:109px; height:106px; position:relative; } .widget-gallery .gallery a:hover { text-decoration:none; } .widget-gallery .gallery a img { border:2px solid #ccc; margin:2px 0 0 5px; width:92px; height:92px; } #content .widget-gallery .gallery a:hover img { border-color:#e0dfe0; } /* Carousel -------------------------------------------- */ #carousel { height:260px; overflow:hidden; float:right; margin-left:15px; } #carousel .viewport { float:left; width:315px; height:236px; overflow:hidden; position:relative; border:2px solid #254239; background:#000; } #carousel .buttons { display: block; margin: 30px 10px 0 0; float: left; } #carousel .disable { visibility: hidden; } #carousel .gallery { list-style: none; position: absolute; padding: 0; margin: 0; left: 0 top: 0; } #carousel .gallery-item { float: left; margin: 0 20px 0 0; padding: 1px; height: 236px; width: 315px;} #carousel .pager { clear:both; list-style:none outside none; margin:0;overflow:hidden; } #carousel .pager li { float:left; } #carousel .pagenum { display:block; font-weight:bold; padding:2px 5px; text-align:center; text-decoration:none; } #carousel .pagenum:hover { background:#254239; color:#fff; } #carousel .gallery br { clear:none !important; display:none; } /* HOMEPAGE -------------------------------------------- */ .home #zone-maincontent .liner { padding:0 0 32px; } /* Homepage nav */ .home #zone-maincontent #homepage-nav { margin-bottom:29px; } .home #zone-maincontent #homepage-nav ul { margin:0 0 0 22px; } .home #zone-maincontent #homepage-nav li { width:208px; min-height:196px; display:block; float:left; color:#b3b3b3; font-size:1.2em; border-right:2px solid #363b39; padding:14px 16px 16px; } .home #zone-maincontent #homepage-nav li.over { cursor:pointer; background:url(/wp-content/themes/devine/images/sidebar-link-widget-middle.png); } .home #zone-maincontent #homepage-nav li.section-1 { border-left:2px solid #363b39; color:#d9cee1; } .home #zone-maincontent #homepage-nav li h3 { font-size:0.9em; font-weight:normal; color:#e0dfe0; margin-bottom:20px; } .home #zone-maincontent #homepage-nav li a.button { font-size:0.85em; font-weight:bold; display:block; float:left; padding:3px 15px 2px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-decoration:none; } .home #zone-maincontent #homepage-nav li.section-1 a.button { background:#645271; color:#d9cee1; } .home #zone-maincontent #homepage-nav li.section-1.over a.button, .home #zone-maincontent #homepage-nav li.section-1 a.button:hover { background:#836a94; color:#fff; -webkit-box-shadow: 0 0 10px #d9cee1; -moz-box-shadow: 0 0 10px #d9cee1; box-shadow:0 0 10px #d9cee1; } .home #zone-maincontent #homepage-nav li.section-2 a.button { background:#914343; color:#e1caca; } .home #zone-maincontent #homepage-nav li.section-2.over a.button, .home #zone-maincontent #homepage-nav li.section-2 a.button:hover { background:#b45151; color:#fff; -webkit-box-shadow: 0 0 10px #e1caca; -moz-box-shadow: 0 0 10px #e1caca; box-shadow:0 0 10px #e1caca; } .home #zone-maincontent #homepage-nav li.section-3 a.button { background:#356380; color:#b9cdd9; } .home #zone-maincontent #homepage-nav li.section-3.over a.button, .home #zone-maincontent #homepage-nav li.section-3 a.button:hover { background:#427ba0; color:#fff; -webkit-box-shadow: 0 0 10px #b9cdd9; -moz-box-shadow: 0 0 10px #b9cdd9; box-shadow:0 0 10px #b9cdd9; } .home #zone-maincontent #homepage-nav li.section-4 a.button { background:#2a473d; color:#afccc2; } .home #zone-maincontent #homepage-nav li.section-4.over a.button, .home #zone-maincontent #homepage-nav li.section-4 a.button:hover { background:#3a6153; color:#fff; -webkit-box-shadow: 0 0 10px #afccc2; -moz-box-shadow: 0 0 10px #afccc2; box-shadow:0 0 10px #afccc2; } .home #zone-maincontent #homepage-nav li img { border:2px solid #000; margin-left:-3px; } .home #zone-maincontent #homepage-nav li.section-1.over img { border-color:#645271; } .home #zone-maincontent #homepage-nav li.section-2.over img { border-color:#914343; } .home #zone-maincontent #homepage-nav li.section-3.over img { border-color:#356380; } .home #zone-maincontent #homepage-nav li.section-4.over img { border-color:#2a473d; } /* Homepage content */ .home #content.layout-col-3 { background:none; } .home #content.layout-col-3 .layout-col-2 { width:326px; } /* #content.layout-col-3 .intro-section { margin-left:15px; width:646px; margin-bottom:18px; background:url(/wp-content/themes/devine/images/widget-bottom-3col.png) no-repeat left bottom; padding-bottom:10px; } #content.layout-col-3 .intro-section .liner { width:646px; background:url(/wp-content/themes/devine/images/widget-top-3col.png) no-repeat 0 0; padding:10px 0 0; } #content.layout-col-3 .intro-section .liner .liner { width:610px; background:url(/wp-content/themes/devine/images/widget-middle-3col.png) repeat; padding:8px 18px 1px; } #content.layout-col-3 .intro-section .layout-col-2 { margin-right:0; width:335px; } #content.layout-col-3 .intro-section .last { width:270px; } #content.layout-col-3 .intro-section h3 { color:#e0dfe0; } #content.layout-col-3 .intro-section p { font-size:1.1em; } */ /* SECTION COLOURS -------------------------------------------- */ /* Devine Light */ .devine-light, .default-liner, #zone-footer { background:#0d1311 url(/wp-content/themes/devine/images/devine-background-devine-light-2.jpg) no-repeat center top; } .devine-light #zone-footer, .devine-light .widget-gallery .gallery a img, .devine-light .hero img, .devine-light td, .devine-light .post img { border-color:#254239; } .devine-light h1, .devine-light a, .default-liner h1, .default-liner a { color:#3a6153; } .devine-light .textwidget, .default-liner .textwidget { background-image:url(/wp-content/themes/devine/images/sidebar-widget-bottom-devine-light.png); } .devine-light .textwidget div, .default-liner .textwidget div { background-image:url(/wp-content/themes/devine/images/sidebar-widget-top-devine-light.png); } .devine-light .textwidget div div, .default-liner .textwidget div div { background:#1a4235; } .devine-light #sidebar .textwidget h3, .default-liner #sidebar .textwidget h3, .devine-light #sidebar .textwidget a, .default-liner #sidebar .textwidget a { color:#8ea29b; } /* Piercing */ .piercing, .piercing #zone-footer { background:#101010 url(/wp-content/themes/devine/images/devine-background-piercing-2.jpg) no-repeat center top; } .piercing #zone-footer, .piercing .widget-gallery .gallery a img, .piercing .hero img, .piercing td, .piercing .post img { border-color:#372d3e; } .piercing h1, .piercing a, .home #homepage-nav .section-1 a { color:#836a94; } .piercing .textwidget { background-image:url(/wp-content/themes/devine/images/sidebar-widget-bottom-piercing.png); } .piercing .textwidget div { background-image:url(/wp-content/themes/devine/images/sidebar-widget-top-piercing.png); } .piercing .textwidget div div { background:#211628; } .piercing #sidebar .textwidget h3, .piercing #sidebar .textwidget a { color:#928c95; } /* Tattoo */ .tattoo, .tattoo #zone-footer { background:#141311 url(/wp-content/themes/devine/images/devine-background-tattoo-2.jpg) no-repeat center top; } .tattoo #zone-footer, .tattoo .widget-gallery .gallery a img, .tattoo .hero img, .tattoo td, .tattoo .post img { border-color:#514338; } .tattoo h1, .tattoo a { color:#c5a286; } .tattoo .textwidget { background-image:url(/wp-content/themes/devine/images/sidebar-widget-bottom-tattoo.png); } .tattoo .textwidget div { background-image:url(/wp-content/themes/devine/images/sidebar-widget-top-tattoo.png); } .tattoo .textwidget div div { background:#473b31; } .tattoo #sidebar .textwidget h3, .tattoo #sidebar .textwidget a { color:#a59f9a; } /* Tarot */ .tarot, .tarot #zone-footer { background:#140e0e url(/wp-content/themes/devine/images/devine-background-tarot-2.jpg) no-repeat center top; } .tarot #zone-footer, .tarot .widget-gallery .gallery a img, .tarot .hero img, .tarot td, .tarot .post img { border-color:#4a2323; } .tarot h1, .tarot a, .home #homepage-nav .section-2 a { color:#b45151; } .tarot .textwidget { background-image:url(/wp-content/themes/devine/images/sidebar-widget-bottom-tarot.png); } .tarot .textwidget div { background-image:url(/wp-content/themes/devine/images/sidebar-widget-top-tarot.png); } .tarot .textwidget div div { background:#411f1f; } .tarot #sidebar .textwidget h3, .tarot #sidebar .textwidget a { color:#a29190; } /* Devine gear */ .devine-gear, .devine-gear #zone-footer { background:#0f1014 url(/wp-content/themes/devine/images/devine-background-devine-gear-2.jpg) no-repeat center top; } .devine-gear #zone-footer, .devine-gear .widget-gallery .gallery a img, .devine-gear .hero img, .devine-gear td, .devine-gear .post img { border-color:#1d3442; } .devine-gear h1, .devine-gear a, .home #homepage-nav .section-3 a { color:#427ba0; } .devine-gear .textwidget { background-image:url(/wp-content/themes/devine/images/sidebar-widget-bottom-devine-gear.png); } .devine-gear .textwidget div { background-image:url(/wp-content/themes/devine/images/sidebar-widget-top-devine-gear.png); } .devine-gear .textwidget div div { background:#1a2e3a; } .devine-gear #sidebar .textwidget h3, .devine-gear #sidebar .textwidget a, .devine-gear .products .post h3 { color:#8e989e; }