CSS

edit

files

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;
}
Copyright © 2012-2015 Ian Cowan - Highland Environmental Law