CSS
Main CSS
The CSS below cascades from and changes the base CSS which is at http://static.wikidot.com/common--theme/base/css/style.css
/* @IMPORT - external fonts. @import rules must be the first rules in the stylesheet =============================================================================*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans); @import url(/fonts:baskerville-mt/code/1); @import url(/fonts:myriad-pro/code/1); /* GLOBAL h1, h2 etc are headings. h1 is the largest , h6 is the smallest =============================================================================*/ html { background-color:#dfdfdf; } body, h1,h2,h3,h4,h5,h6 { color: #909090; font-family: "Baskerville-MT", serif; } /* GLOBAL - PARAGRAPH Normal paragraph font, color, size etc =========================================================================*/ p { font-size: 18px; } /* GLOBAL - LINKS color, style (underline/italic), =========================================================================*/ a { color:#000; cursor:pointer; text-decoration:none; } /* CONTAINERS the "boxes" that contain everything else ==========================================================================*/ #container { background-color: #dfdfdf; } div#container-wrap { background-color: #ffffff; } #content-wrap { background-color: #fff; height:528px; margin:0 auto; padding-bottom:26px; position:relative; width:900px; } body { background-color: #dddddd; font-size: 0.80em; color: #333; } /* LOGIN The sign in link in the top right of the admin page. We have removed most of the options as they are not needed. Colors and other styles can be added. =========================================================================*/ #account-options li:nth-child(1), #account-options li:nth-child(2), #account-options li:nth-child(3), #account-options li:nth-child(4), #account-options li:nth-child(5) { display: none; } #login-status, .printuser img.small { visibility:hidden; } /* HEADER The main header of the site, contains the name and any images. Also contains the link back to the homepage from any other page. ====================================================================*/ #header { background-color:#fff; height: 170px; margin: 0 auto; top: 20px; width: 900px; } #header h1 a { background-color: transparent; color: #58585a; display: block; font-family: "MyriadProLightRegular", "Open Sans", arial; font-size: 170%; font-weight:normal; height: 58px; opacity: 0.9; overflow: hidden; padding-left:10px; padding-top:63px; text-align: left; width: 700px; z-index: 10; } #header h2 { background-color: transparent; color:#666633; font-family: "Baskerville-MT", serif; font-size: 60px; height: 80px; margin-top: -120px; opacity: 0.9; overflow: hidden; padding-left: 10px; text-align: left; width: 800px; z-index: 10; } /* SEARCH BOX We are not using a search box so this has been turned off ====================================================================*/ #search-top-box { display:none; } /* TOP BAR ======================================================================*/ #top-bar { border-top: 1px solid #999966; display: block; height: 72px; left:10px; right: 10px; top: 170px; width: 880px; } #top-bar ul { margin-left: 186px; } #top-bar ul li a.current-link { border-top: 6px solid #bbb; font-weight: bold; padding-top:0; } #top-bar li { margin: 0; padding: 0; } #top-bar li a { font-family: "MyriadProLightRegular","Open Sans",arial; font-size: 20px; font-weight:normal; padding: 6px 0 0; text-align: left; width: 148px; } /* to compensate for variable with menu text inside fixed width box */ #top-bar li:nth-child(1) { margin-left: -180px; width: 125px; } #top-bar li:nth-child(2) { margin-left:-10px; width: 176px; } #top-bar li:nth-child(3) { width: 203px; } #top-bar li:nth-child(4) { width: 163px; } #top-bar li a:hover { font-weight:bold; text-decoration: none; } #top-bar li ul { border: none;; } #top-bar li ul li { float: left; margin-left: 10px; padding: 0; } #top-bar li ul li a { background-color: #FFFFFF; border: none; font-size: 16px; padding-left:25px; text-align: left; width: 180px; } /* SIDE BAR =====================================================================*/ #side-bar { background-color: #999966; display:block; height:468px; margin:0 0 0 10px; padding: 0; position: absolute; top:72px; width:176px; } #side-bar ul { list-style-type: none; margin-top: 20px; padding: 0; position: relative; width: 166px; z-index: 10; } #side-bar li { float: left; } #side-bar a, #side-bar a:visited, #side-bar p { color: #FFFFFF; display: block; font-family: "MyriadProLightRegular", "Open Sans", arial; font-size: 20px; height: 35px; line-height: 25px; padding-left:10px; padding-top: 6px; text-decoration: none; width: 166px; } #side-bar .wiki-email a { font-weight:normal; padding-left:0; } #side-bar a:hover { background-color: #999966; } #side-bar li a.current-link { border-left: 6px solid #bbb; font-weight: bold; } #side-bar li:hover { position: relative; } #side-bar a:active, #side-bar a:focus, #side-bar li:hover > a { background-color: #999966; color: #fff; font-weight:bold; width:158px; } #side-bar li ul { background-color: #999966; left: 90px; margin-top: 0; padding: 0 5px 5px; position: absolute; top: 0; visibility: hidden; width: 249px; } #side-bar li ul li a, #side-bar li ul li a:hover { height: 23px; padding-top: 0; width: 230px; } #side-bar li:hover > ul, #side-bar ul a:hover ul, #side-bar ul a:hover ul a:hover ul, #side-bar ul a:hover ul a:hover ul a:hover ul, #side-bar ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; } #side-bar ul a:hover ul ul, #side-bar ul a:hover ul a:hover ul ul, #side-bar ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } /* PAGE TITLE This design does not use a page title except on CSS, font and admin pages, so it has been turned off. If used you can add colors, size and other styling =======================================================================*/ #page-title { display:none; } /* CONTENT The block that holds the content of the page below the title and above the footer ========================================================================*/ #breadcrumbs { display:none; } #main-content { height: 425px; margin-left: 10px; margin-right:20px; margin-top: 20px; padding: 72px 0 18px; width:900px; } #page-content { background-color: #DDDDDD; background-image: url("/local--files/css:theme/content-bg-clachtoll.jpg"); background-position: left top; background-repeat: no-repeat; height:468px; margin-left: 176px; margin-top: 0; padding: 0; width: 704px; } /* CONTENT BLOCK The semi-transparent block containing the content ========================================================================*/ .content-large, .content-small { background-color: #E5F0FA; /* height: 288px; */ height:auto; left: 360px; max-height:400px; opacity: 0.7; overflow:hidden; padding: 0 10px; position: absolute; text-align: left; width: 511px; } .content-large p, .content-small p { color: #666633; margin-bottom: 10px; margin-top: 10px; } .content-large p { font-size: 44px; } .content-small p { font-size: 19px; } /* DATAFORMS Styling for the CMS editor ============================================*/ .form-table { margin-left: 213px; margin-top: 12px; } #action-area { background-color: #FFFFFF; padding-top: 50px; width:880px; } #action-area h1 { display: none; } .form-labels { display:none; } /* Following rule is for the reset/delete/add file button in the dataform */ .form-values a { border:1px solid #383838; color:#383838; margin-left:50px; padding:0 10px; } textarea { background-color: #FFFFFF; border:1px solid #999966; font-family: "Baskerville-MT", serif; font-size: 16px; padding: 10px 0 0 10px; } .form-values #edit-page-title { width: 650px; } /* COLUMNS used for the hel:blog page only ===================================================================/* div.column21 { float: left; padding: 0 10px; position:relative; width:183px; } div.column22 { float: left; position: relative; width: 511px; } /* TABLES ========================================================================*/ table.wiki-content-table { margin:0; width: 600px; } /* BUTTONS Styling for buttons on the site (Edit, History etc) ========================================================================*/ div.buttons { text-align: right !important; } div.buttons input, input.button, button, file, a.button, .button-bar a, #new-post-button, .rate-points, .rateup a, .ratedown a, .cancel a, .pager a, .pager .current, div.new-post a, .owindow .button-bar a, .wiki-standalone-button { height: auto; padding: 6px 10px; font-family: "MyriadProLightRegular","Open Sans",arial; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: url(http://themes.wdfiles.com/local--files/hello/hello-button-bg.gif) repeat-x; border: 1px solid #d4d4d4; color: #616161; margin: 0 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover, .button-bar a:hover, #new-post-button:hover, .rateup a:hover, .ratedown a:hover, .cancel a:hover, .pager a:hover, div.new-post a:hover, .owindow .button-bar a:hover { color: #515151; background: #fff; text-decoration: none; cursor: pointer; } #files-button, #more-options-button, #tags-button, #site-tools-button, #print-button { display: none; } /* TABS Positioning, size, colors and other styling for the Yahoo UI tabs we've used for navigation instead of the top bar and side bar===============================================================================*/ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { bottom: 0; position: absolute; top:320px; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { background-color:#fff; border-color:#fff; height: 215px; margin-top: -15px; padding-bottom:35px; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: #fff; } .yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em { border-radius: 15px 0 15px 0; display: block; font-family: 'EB Garamond'; font-size: 15px; text-align: center; width: 165px; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { background-color: #BFD690; background-image: none; color: #000000; font-family: 'EB Garamond'; font-size: 15px; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { border-color: #888888; border-radius: 15px 0 15px 0; font-family: 'EB Garamond'; font-size: 15px; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em { border: 1px solid #A3A3A3; } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a { border: none; display: block; vertical-align: bottom; } /* FOOTER Positioning, sizes, colors of the footer area of the site, inlcuding the Edit and History buttons and copyright ==========================================================================*/ #footer { background-color: #FFFFFF; border:none; clear: both; margin: 0 auto; overflow: hidden; padding: 3px 8px 3px 9px; width: 883px; } #footer .options, #page-info, .page-watch-options { display:none !important; } .page-options-bottom { margin-right: 25px; margin-top: -10px; } .page-options-bottom a { background: url("http://themes.wdfiles.com/local--files/hello/hello-button-bg.gif") repeat-x scroll 0 0 transparent; border: 1px solid #D4D4D4; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); color: #616161; font-family: "MyriadProLightRegular","Open Sans",arial; height: auto; margin: 0 5px; padding: 6px 10px; } .page-history tr, #history-form-1, #edit-page-textarea, #license-area, #footer a, #footer p, table.form td, table.form th { font-family: "MyriadProLightRegular", "Open Sans", arial; } #license-area, #footer a, #footer p { font-size:12px; font-weight:normal; } .page-tags { display: none; } /* CODE The block that holds the CSS code on this page ======================================================================*/ .code { background-color: transparent; padding-left: 10px; } pre { white-space: pre-wrap; white-space: pre-line; } /* PAGE EDITOR ============================== */ .wd-editor-toolbar-panel div { background-color:#DDDDDD; border-color: #888888; border-style: solid solid none; border-width: 1px 1px 0; float:left; height:30px; padding-top:10px; } .wd-editor-toolbar-panel ul li { margin: 1px 0 1px 1px; padding: 0; } #edit-page-textarea, #edit-page-bottomtable { width:860px !important; } .edit-page-bottomtable { width:800px !important; } .change-textarea-size, .edit-help-34 { display:none; } #owindow-1 { font-family: "MyriadProLightRegular"; font-size: 16px; left: 576.5px; opacity: 0.9999; top: 447.5px; visibility: visible; } .new-page-box { margin: 0; text-align: left !important; } /* IE HACKS ============================== */ #top-bar ul { margin-left /*\**/: 25px\9; } :root #top-bar li:nth-child(1) { margin-left: -20px \ ; } :root #top-bar li:nth-child(2) { margin-left: 40px \ ; } .content-large, .content-small { filter: alpha(opacity=70); } .content-large p { font-size /*\**/:39px\9; } .content-small p { font-size /*\**/: 18px\9; }
INTRO/USING CATEGORY (2)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-stacpollaidh.jpg); }
UNDERSTANDING CATEGORY (3)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-cairngorm.jpg); }
OBTAINING CATEGORY (4)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-mull.jpg); }
HAVING CATEGORY (5)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-cummingston.jpg); }
ABOUT CATEGORY (6)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-mull.jpg); }
ENVIRONMENTAL CATEGORY (7)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-kinlochleven.jpg); }
WATER CATEGORY (8)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-clachtoll.jpg); }
EXPERIENCE CATEGORY (9)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-cairngorm.jpg); }
SERVICES CATEGORY (10)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-cummingston.jpg); }
CONTACT CATEGORY (11)
@import url("/css:theme/code/1"); #page-content { background-image: url(/local--files/css:theme/content-bg-stacpollaidh.jpg); }
ADMIN/CSS/IMAGE-BOX/SYSTEM/FONTS/SITEADMIN CATEGORIES (12)
The CSS below cascades from (and changes) the main CSS above but is only used in specific categories of pages
@import url("/css:theme/code/1"); body, h1,h2,h3,h4,h5,h6 { font-family: "MyriadProLightRegular", "Open Sans", arial; } #content-wrap { height: auto; } #login-status { text-align:right; top:75px; visibility:visible; width:250px; } #login-status a { font-weight:normal; } #side-bar { top: 71px; } #page-title { border-bottom:1px solid #EEEEEE; display:block; font-size:180%; margin-top:-54px; padding-bottom:2px; padding-left:20px; } #main-content { height: auto; } #page-content { background-color: transparent; background-image:none; height: auto; padding: 5px 0 0 5px; } #files-button, #more-options-button, #tags-button, #site-tools-button, #print-button { display: inline; } #site-manager { background-color: #FFFFFF; margin: 1.5em auto; } #site-manager-menu li a, .printuser a { font-family: "MyriadProLightRegular", "Open Sans", arial; font-size: 14px; font-weight:normal; } #history-form-1 { margin-top: 475px; } .wiki-content-table a { color: #999966; }
BLOG CATEGORY (13)
@import url("/css:theme/code/1"); .page-calendar-box a { color:#fff; font-family: "MyriadProLightRegular","Open Sans",arial; font-size: 14px; padding-left:5px; } .content-small { height: 400px; max-height: 400px; }
HEL CATEGORY (14)
@import url("/css:theme/code/1"); .content-large, .content-small { margin-top: 0; } table.wiki-content-table { margin: 20px 0 10px; width:500px; } table.wiki-content-table th, table.wiki-content-table td { font-family: "MyriadProLightRegular","Open Sans",arial; font-size: 14px; }
NAV CATEGORY (15)
@import url("/css:theme/code/12"); #page-content { height:468px; }