Css

Buttons

MAIN CSS - DEFAULT CATEGORY

/* IMPORTS
=============================*/
@import url(/css:print/code/1);
 
/* CONTAINERS
=============================*/
 
#container {
    background-color: #C1CDBC;
    background-image: url("/local--files/css:theme/container-bg2.jpg");
    background-position: left top;
    background-repeat: repeat-x;
}
 
#content-wrap {
    margin:150px auto 0 auto;
    width:950px;
}
 
.image-container {
    padding: 0 5px 5px;
}
 
/* COMMON
=============================*/
 
body {
    color: #424242;
    font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
 
a {
    color: #ffffcc;
    text-decoration: none;
}
 
a:link, a:visited {
    color: #326E56;
}
 
a.newpage {
    color: red;
    text-decoration: none;
}
 
a:hover {
    background-color: transparent;
    color: #560000;
    text-decoration: underline;
}
 
hr {
    color: #888888;
    margin:1em 0;
}
 
.hrule {
    border:1px solid #468259;
    margin: 5px 0
}
 
p {
    margin-top: 0;
}
 
/* HEADINGS
=============================*/
 
h1, h2, h3, h4, h5, h6 {
    color: #383838;
}
 
/* HEADER
=============================*/
 
#header {
    -moz-box-shadow: 0 5px 1px #778791;
    -webkit-box-shadow: 0 5px 1px #778791;
    background-image: url(/local--files/slideshow:images-v3/station.jpg);
    background-position: left top
    background-repeat: no-repeat;
    box-shadow: 0 5px 1px #778791;
    height: 375px;
    margin: 0 auto;
    position: relative;
    top: 0;
    width: 950px;
    z-index: 0;
}
 
#header #login-status, #login-status a {
    color: #ffffff;
}
 
#header h1 {
    height: 175px;
    left: 90px;
    position: absolute;
    width: 500px;
    z-index: 100;
}
 
#header h2 {
    color:#ffffff;
    font-size:165%;
    letter-spacing: -1px;
    margin-top:-60px;
    position: absolute;
    width:250px;
}
 
#header h1 a {
    background-color:#ffffff;
    background-image: url("/local--files/css:theme/home.png");
    background-position: left top;
    background-repeat: no-repeat;
    border: 1px solid #336F56;
    border-radius: 10px 10px 10px 10px;
    display: none;
    height: 85px;
    margin-left: -135px;
    margin-top: 292px;
    outline: medium none;
    text-indent: -9999px;
    width: 40px;
    z-index: 99;
}
 
#header h1 a:hover {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #383838;
}
 
#header h2 a, #header h2 a:hover {
    background-color:transparent;
    color:#ffffff;
    display:none;
    height:40px;
    text-decoration: none;
    top:40px;
}
 
.slideshow {
    height: 375px;
    margin-left: -36px;
    margin-top: -571px;
    position: absolute;
    width: 950px;
    z-index: 0;
}
 
/* ACCOUNT/LOGIN
=============================*/
 
#login-status {
    display:none;
}
 
#account-options  {
    background-color:#F1D7E0;
}
 
#account-topbutton {
    background-color: transparent;
    border: none;
}
 
#account-options li a:hover {
    background-color: #dddddd;
    color: #5B1D46;
}
 
.printuser img.small {
    display:none;
}
 
/* TOP BAR
==============================*/
 
#top-bar {
    background: none repeat scroll 0 0 #ffffff;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    height: 60px;
    left: 0;
    margin: 0 auto;
    position: relative;
    top: 380px;
    width: 950px;
    z-index: 10;
}
 
.table.wiki-content-table th, table.wiki-content-table tr:nth-child(odd) { 
    background-color: #727272; 
}
 
#top-bar li {
    border: medium none;
    display: inline;
    margin: 0 auto;
    padding: 0 25px 2px;
    position: relative;
}
 
#top-bar li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px; 
    color: #000;
    display:block;
    outline:0;
    padding: 0;
    text-decoration:none;
    text-shadow: 1px 0px 1px #bbb;
}
 
#top-bar a, #top-bar li ul li, #top-bar li ul li a {
    background-color:transparent;
    text-decoration:none;
}
 
#top-bar ul {
    padding-left: 10px;
    padding-top: 8px;
}
 
#top-bar ul li a:hover, #top-bar li:hover, #top-bar ul li  {
    background-color: transparent;
    color: #444;
    height:auto;
    left:0;
    text-shadow: 1px 0px 1px #bbb;
}
 
#top-bar ul li a:hover, #top-bar li:hover {
    text-decoration: underline;
}
 
#top-bar li ul {
    border:none;
    height:auto;
    position: absolute;
    visibility: hidden;
    z-index: 100;
}
 
#top-bar li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:left;
    text-align:left;
    width:200px;
}
 
#top-bar li ul li a, #top-bar li ul li:hover {
    background-color: #ffffff;
    color: #383838;
    margin-top: 0;
    padding-left: 0;
    text-shadow: 1px 1px 1px #888888;
    width: 200px;
    height: auto;
    border: 2px solid #888888;
    font-size: 12px;
}
 
/* SIDE BAR
=============================*/
 
#side-bar {
    background-position: center top;
    background-repeat: no-repeat;
    display:block;
    float: right;
    margin-top: 110px;
    min-height:300px;
    padding: 1em 2em 2em;
    width: 230px;
    z-index: 99;
}
 
#side-bar ul {
    padding-left: 15px;
}
 
#side-bar h4 {
    margin-bottom: 5px;
    margin-top: 5px;
}
 
#side-bar h4 a {
    color: #356b50;
}
 
/* BREADCRUMBS
=============================*/
 
#breadcrumbs {
    background: none repeat scroll 0 0 rgba(240, 240, 240, 0.4);
    border-color: #CECECE;;
    border-radius: 4px 0 0 4px;
    border-style: solid none solid solid;
    border-width: 1px medium 1px 1px;
    box-shadow: 0 1px 0 #FFFFFF inset, 1px 0 0 #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.1);
    clear: both;
    height: 28px;
    overflow: hidden;
    padding-left: 10px;
    padding-top: 5px;
    position: absolute;
    top:460px;
    width: 629px;
}
 
/* SEARCH BOX
=============================*/
 
#search-top-box {
    background: none repeat scroll 0 0 rgba(240, 240, 240, 0.4);
    border: 1px solid #CECECE;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 0 #FFFFFF inset, 1px 0 0 #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.1);
    clear: both;
    color: transparent;
    height: 29px;
    overflow: hidden;
    margin-right:35px;
    padding-top:4px;
    position:absolute;
    right:0;
    text-align:right;
    top:454px;
    width:263px;
}
 
#search-top-box input.empty, #search-top-box input.text {
    background: none repeat scroll 0 0 rgba(240, 240, 240, 0.4);
    background-image:url("/local--files/css:theme/search.png");
    background-position:right top;
    background-repeat:no-repeat;
    border:none;
    padding-top:4px;
    width:250px;    
}
 
#search-top-box input.text {
    color:#383838;
}
 
.search-box .query-area {
    display:none;
}
 
/* PAGE TITLE
=============================*/
 
#page-title {
    background: url("/local--files/css:theme/title_bg.gif") repeat-x scroll 0 bottom transparent;
    border: medium none;
    color: #424242;
    font-size: 26px;
    font-weight: normal;
    height: 25px;
    letter-spacing: -1px;
    margin: 20px 0 25px !important;
    padding: 20px 0 26px;
    position: relative;
    text-decoration: none;
    top: 10px;
    width: 900px;
}
 
/* CONTENT 
=============================*/
 
#main-content {
    background-color:#FFFFFF;
    border-bottom: 5px solid #383838;
    border-left:1px solid #468259;
    border-right:1px solid #468259;
    border-top:5px solid #dedede;
    margin: -85px auto 0 !important;
    min-height:300px;
    padding:0 0 0 10px;
    width:940px;
}
 
#page-content {
    background-image:url("/local--files/css:theme/pagebg.png");
    background-position:right bottom;
    background-repeat:no-repeat;
    min-height:400px;
    padding:0 25px;
    width:640px;
}
 
.subject-image {
    width: 250px;
}
 
.image-box {
    width:0;
}
 
.content-header {
     background-color: #F2F2F2;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.08, rgb(182,189,184)),color-stop(0.53, rgb(225,230,225)), color-stop(0.8, rgb(230,235,231)));
    background-image: -moz-linear-gradient(center bottom,rgb(182,189,184) 8%,rgb(225,230,225) 53%,rgb(230,235,231) 80%);
    border-bottom: none;;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 1px 0 #dddddd inset, 1px 0 0 #dddddd inset, 0 1px 2px rgba(0, 0, 0, 0.04);
    color: #333333;
    font-size: 18px;
    height:25px;
    left: -1px;
    margin: 0;
    padding: 10px 15px 8px;
    position: relative;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 592px;
}
 
.content-block {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    border: 1px solid #CECECE;
    border-radius: 0 0 4px 4px;
    border-top: 2px solid #dedede;
    box-shadow: 0 1px 0 #FFFFFF inset, 1px 0 0 #FFFFFF inset, 0 0 1px rgba(0, 0, 0, 0.1);
    clear: none;
    display: block;
    margin: 0 0 15px 1px;
    overflow: hidden;
    padding: 15px 10px;
    width: 596px;
}
 
.form-image, image-box-image, img {
    background: url(/local--files/css:theme/blank.jpg) no-repeat center center;
}
 
/* BUTTONS
=============================*/
 
.wiki-standalone-button, .wiki-standalone-button a, div.buttons input, input.button, button, file, a.button {
    background: url("http://themes.wikidot.com/local--files/rainbow-base/button_2.png") repeat-x scroll 0 0 #F4F4F4;
    height: 20px;
    margin: 0 0 0 2px;
    padding: 0 0 0 2px;
    text-align:center;
    width: 200px;
}
 
div.buttons {
    width:500px;
}
 
#search-top-box .button {
    display: none;
}
 
#files-button, #more-options-button, #tags-button, #site-tools-button, #print-button {
    display: none;
}
 
.newevent-button {
    background-color: #EEEEEE;
    background-image: -moz-linear-gradient(center top , #EEEEEE, #DDDDDD);
    border-color: #D2D2D2 #CCCCCC #C6C6C6;
    border-radius: 11px 11px 11px 11px;
    border-style: solid;
    border-width: 1px;
    color: #666666 !important;
    display: inline-block;
    font-size: 11px;
    margin: 4px 300px 4px 0;
    padding: 2px 6px;;
    text-align:center !important;
}
 
/* BULLETS
=============================*/
.list-pages-box ul {
    padding-left: 15px;
}
 
/* INLINE HOVER TIPS
=============================*/
 
.hover {
    color: #3B4;
     text-decoration: underline;
    border-bottom: 1px solid;
}
 
.hover:hover {
     text-decoration: none;
    border-bottom: none;
}
 
.hover span {    
    display: none;
}
 
.hover:hover span {
    position: absolute;
    display: inline;
    margin: 15px -20px;
    height: auto;
    width: 250px;
    background: #FFF;
    border: 2px solid #34B;
    color: #000;
    padding: 1em;
}
 
.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
 
/* TABS
=============================*/
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    background-color: gray;
}
 
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border-color: gray;
}
 
.yui-navset .yui-content {
    background-color: #ffffff;
}
 
/* COLUMNS
============================== */
 
/*spacer between columns*/
 
div.columnspacer {
    float: left;
    position:relative; 
    width:10px;
}
 
/*2 column layout */
div.column21 { 
    float: left;
    margin-left: -20px; 
    padding: 0 10px 0 0; 
    position:relative; 
    width:268px;
}
 
div.column22 { 
    float: left;
    margin-left: -30px; 
    padding: 0 10px; 
    position:relative; 
    width:320px;
}
 
/*4 column layout for listing on a page with no sidebar */
div.column41, div.column42, div.column43, div.column44 { 
    float: left;
    margin-left: 0; 
    padding: 0 10px; 
    position:relative; 
    width:200px;
}
 
/* CODE
============================== */
 
.code {
    color: #424242;
    font-family: verdana;
}
 
/* TABLES
============================== */
 
.form-table {
    empty-cells:show;
    width:650px;
}
 
table.wiki-content-table {
    margin:0;
    width: 800px;
}
 
table.wiki-content-table th {
    background-color:#ffffff;
    border:1px solid #383838;
    color:#223773;
    padding:0.3em 0.7em;
    text-align:left;
}
 
table.wiki-content-table tr {
    background-color: #ffffff;
    border:1px solid #383838;
}
 
table.wiki-content-table tr:nth-child(odd) {
    background-color:#dedede;
}
 
table.wiki-content-table td {
    border:none;
    color: #666666;
    font-size:85%;
    padding:0.3em 0.7em;
    text-align:left;
}
 
table.page-files {
    background-color:#CEE8E5;
    border:1px solid #468259;
    border-collapse:collapse;
    border-spacing:0;
    margin:1em auto;
}
 
.layout {
    border-collapse:collapse;
    color:#3B485F;
    width: 100%;
    table-layout:fixed;
}
 
.layout tr {
    background: #FCFFDF;
    border-bottom:1px solid #EFEFEF;
}
 
.layout td {
    padding-left: 1em;
}
 
.layout .truncate {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
 
.layout .header {
    height: 2em;
    background: #AFCCFF;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
    font-size: 13px;
}
 
.layout .footer {
    background: #FCFFDF;
    border-top: 1px solid #9F9F9F;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
}
 
table.form {
    margin:0;
    width:500px;
}
 
/* DATA FORMS
============================== */
 
.form-labels {
    font-weight: bold;
    vertical-align: top;
    width:150px;
}
 
#action-area {
    margin-top: 50px;
    min-height: 1500px;
}
 
/* 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;
}
 
.page-tags {
    padding-top: 25px;
}
 
/* FORUM - MINIMAL COMMENTS
============================== */
 
#new-post-form p {
    display:none;
}
 
/* minimal comments module */
.thread-container .post .signature, .thread-container .post .long .changes, .thread-container .post .long .head .options, .thread-container .post .long .head .title, .edit-help-34, #np-cancel, #np-preview, #np-title, #np-editor-title {
    display:none;
}
 
.thread-container .post {
    padding:10px 0 0;
}
 
#np-text  {
    height:75px;
    margin-top: -45px;
}
 
/* FOOTER
============================== */
 
#footer {
    background-color: #ffffff;
    color: #ffffff;
    height:295px;
    margin: 0 auto;
    width:930px;
}
 
#footer a {
    color: #383838;
}
 
#footer p {
    color: #383838;
}
 
.page-options-bottom {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    background-color: #424242;
    border-radius: 5px 5px 0 0;
    color: #ffffff;
    font-weight:bold;
    margin-bottom:0;
    text-align: center;
    width: 910px;
}
 
.page-options-bottom a {
    color: white;
}
 
#page-info, .page-watch-options, .page-tags {
    display:none;
}
 
/* LICENSE AREA
============================== */
 
#license-area, #license-area a {
    background-color: #424242;
    color: #FFFFFF;
}
 
/* COLLAPSIBLE BLOCKS
============================== */
 
.collapsible-block-unfolded-link a {
    color: #468259;
    font-weight: bold;
}
 
/* PAGE EDITOR
============================== */
 
.wd-editor-toolbar-panel div {
    background-color:#546778;
    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:877px !important;
}
 
.edit-page-bottomtable {
    width:885px !important;
}
 
.change-textarea-size {
    margin-top: 110px;
    padding-left: 1em;
    padding-right: 7em;
    position: absolute;
    right: 100px;
    text-align: right;
}
 
div.buttons {
    background-color: transparent;
    margin-left: -10px;
    padding-left: 10px;
    width: 920px;
}
 
div.buttons input, input.button, button, file, a.button {
    background: url("http://themes.wikidot.com/local--files/rainbow-base/button_2.png") repeat-x scroll 0 0 #F4F4F4;
    margin: 0 0 0 2px;
    padding: 0 0 0 2px;
    width: 110px;
}
 
#action-area h1, #edit-page-title {
    color: #011640;
}
 
.owindow .title {
    background-color: #424242;
    color: #FFFFFF;
}
 
/* SITE MANAGER
============================== */
 
#site-manager {
    margin:20px auto;
}
 
/* SITE MANAGER
============================== */
 
.index a {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 #F9F9F9 inset, 1px 0 0 #F9F9F9 inset;
    color: #666666;
    display: block;
    font-size: 18px;
    padding: 2px 0;
    text-align: center;
    text-transform: uppercase;
    width: 28px;
}
 
/* IE7 HACKS
============================== */
 
#top-bar {    background-color: #ffffff !ie7!;}
.slideshow { display:none !ie7!; }
#main-content {margin: -575px auto 0 !ie7!; position: absolute !ie7!;}

EDITOR(2)

@import url("/css:theme/code/1");
 
#header #login-status, #login-status a {
    color: #000000;
}
 
#login-status {
    border: 2px solid red;
    display: block;
    margin-top: 585px;
    position: absolute;
    text-align: center;
    width: 300px;
}
 
/* for the newpage entries */
h6 { 
    color: #468259;
    float:left; 
    font-size:120%;
    font-weight:normal; 
    margin:0; 
    width:200px;  }

STAY/TO STAY(3)

@import url("/css:theme/code/1");
 
.table.wiki-content-table th, table.wiki-content-table tr:nth-child(odd) { 
    background-color: #0A8DD8;
}
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_stay.png");
    margin-top:50px;
}
 
#page-title {
    visibility:hidden;
}

ADMIN/SLIDESHOW/CSS/NAV/INC (4)

@import url("/css:theme/code/1");
 
#header #login-status, #login-status a {
    color: #000000;
}
 
#login-status {
    display: block;
    margin-top: 480px;
    top;100px;
    position: absolute;
    width: 200px;
}
 
#side-bar {display: none;}
#page-content {width:800px;}
 
#files-button, #more-options-button, #tags-button, #site-tools-button, #print-button {
    display: inline;
}

PLAY CATEGORY (5)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_play.png");
}
 
.playlisting {
    -moz-border-radius: 0 0 25px 0;
    background: -moz-linear-gradient(center top , #F5F5F5, #FFFFFF, #FFFFFF 60%) repeat scroll 0 0 #FFFFFF;
    border-color: #383838;
    border-right: 1px solid #383838;
    border-style: solid;
    border-width: 2px 1px 1px;
    margin: 10px 0;
    padding-left: 20px;
    width: 800px;
}

COMMUNITY (6)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_community.png");
}

HERITAGE (7)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_heritage.png");
}
 
#page-content { width: 650px; }

SEARCH (8)

@import url("/css:theme/code/1");

YOU (9)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_you.png");
}
 
div.buttons { width: 820px; }

NATURE (10)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_nature.png");
}

YOUTH (11)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_youth.png");
}
 
#page-title {
    visibility:hidden;
}
 
#page-content { width: 650px; }

BUSINESS (12)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_business.png");
}
 
#page-content { width: 650px; }

MUSIC AND THE ARTS (13)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_musicarts.png");
}

EVENTS (14)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_events.png");
}
 
#page-content { width: 650px; }
 
table.wiki-content-table {
       width: 540px;
}

SHOP (15)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_nature.png");
}
 
.content-header {
    height:40px;
}

EATING (16)

@import url("/css:theme/code/1");
 
#side-bar {
    background-image: url("/local--files/css:theme/activities_nature.png");
}
 
.content-header {
    height:40px;
}
Site Design, Syntax and Examples by Rob Elliott 2008-2016