Description:
/
The Art in Articles
By Timothy Foster
Copyright 2013
/
/* Imports
=============================*/
@import url(http://themes.wdfiles.com/local--files/the-art-in-articles/cssFont_tangerine.css);
@import url(http://snippets.wdfiles.com/local--code/sp-css-import);
@import url(http://checklist-app.wdfiles.com/local--code/checklist-css);
/* Logo Image
=============================*/
#container-wrap{
background-image: url(http://tinypic.com/r/2ladjc7/5);
background-repeat: no-repeat;
}
/* Global
=============================*/
body{
font-family: sans-serif;
min-height: 101%;
}
p{ line-height: 1.4em; }
a{
color: #4476A7;
text-decoration: none;
}
a:hover{
color: #487AAB;
text-decoration: underline;
background: none;
}
a.newpage{ color: #AAA; }
a.newpage:hover{ color: #A2A2A2; }
div.buttons input, input.button, button,
a.button, .pager span.target a,
.owindow .button-bar a, div.new-post a{
border-radius: 10px;
background: #DDD;
color: #444;
border: none;
text-decoration: none;
transition: background 150ms;
-moz-transition: background 150ms;
-webkit-transition: background 150ms;
-o-transition: background 150ms;
}
div.buttons input:hover, input.button:hover, button:hover,
a.button:hover, .pager span.target a:hover,
.owindow .button-bar a:hover, .new-post a:hover{
background: #E4E4E4;
color: #444;
text-decoration: none;
}
input.text, input[type=text], textarea{
border-radius: 5px;
border: 1px solid #DDD;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25) inset;
transition: box-shadow 150ms;
-moz-transition: all 150ms;
-webkit-transition:all 150ms;
-o-transition: all 150ms;
}
input.text:focus, input[type=text]:focus, textarea:focus{
box-shadow: 0 0 2px -1px rgba(0,0,0,.05) inset;
border-color: #BBB;
}
/* ?! */
html *::selection{
background-color: #5CA2E0;
color: #F7F7F7;
}
html *::-moz-selection{
background-color: #5CA2E0;
color: #F7F7F7;
}
/* */
/* Outer Frame
=============================*/
body{ background-color: #DDD; }
#container-wrap{
margin: 30px 0 0 30px;
background-color: #FFF;
border-top-left-radius: 50px;
background-repeat: no-repeat;
}
/* Header
=============================*/
#header{ height: 105px; }
#header h1{
font-family: 'TangerineRegular', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-size: 38pt;
margin: 5px 0 0 62px;
}
#header h1 a{
color: #4476A7;
text-shadow: -1px 1px 2px rgba(0,0,0,0.25);
transition: color 350ms linear;
-moz-transition: color 350ms linear;
-webkit-transition: color 350ms linear;
-o-transition: color 350ms linear;
}
#header h1 a:hover{
text-decoration: none;
color: #64A0C8;
}
#header h2{
font-style: italic;
font-size: 12pt;
margin: 0 0 0 142px;
letter-spacing: 1px;
}
/* Top Bar
=============================*/
#top-bar{
width: 100%;
right: 10px;
background: #DDD;
margin: 0;
border-radius: 0 10px 10px 0;
}
#top-bar ul{ padding: 0 0 0 227px; }
#top-bar li a{
color: #444;
background: #DDD no-repeat right center url(http://themes.wdfiles.com/local--files/the-art-in-articles/topBarArrow.png);
padding-right: 1.75em;
padding-left: .5em;
padding-top: 1px;
/*font-style: italic;*/
letter-spacing: 1px;
transition: all 400ms;
-moz-transition: all 400ms;
-webkit-transition: all 400ms;
-o-transition: all 400ms;
}
#top-bar li ul li{
background: #DDD;
transition: all 400ms;
-moz-transition: all 400ms;
-webkit-transition: all 400ms;
-o-transition: all 400ms;
}
#top-bar li ul li a{
display: block;
width: 150px;
background: #DDD;
font-size: 90%;
padding: 0 80px 0 24px;
text-indent: -10px;
}
#top-bar li ul li:hover{ background: #E5E5E5; }
#top-bar li a:hover, #top-bar li a.current-link{
background-color: #E5E5E5;
color: #444;
text-decoration: none;
}
#top-bar li ul li a:hover{
background: #E5E5E5;
text-indent: 0;
}
#top-bar li ul{
background: #DDD;
overflow: hidden;
width: 0px;
margin-left: 13px;
transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-webkit-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
}
#top-bar li:hover ul{ width: 200px; }
/* Login Status
=============================*/
#login-status{
color: #444;
font-size: 90%;
}
#login-status a strong{ text-decoration: none; }
#login-status .printuser a{ display: none; }
#account-topbutton{
background: #DDD;
color: #444;
border: none;
border-radius: 5px;
}
#account-options{
background-color: #FFF;
border: 1px solid #BBB;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
border-radius: 5px;
text-align: right;
max-width: 120px;
}
#account-options li a{
transition: padding-right 150ms;
-moz-transition: padding-right 150ms;
-webkit-transition: padding-right 150ms;
-o-transition: padding-right 150ms;
}
#account-options li a:hover{
color: #487AAB;
text-decoration: none;
padding-right: 8px;
}
#account-options li:nth-child(1),
#account-options li:nth-child(2),
#account-options li:nth-child(3),
#account-options li:nth-child(5){ display: none; }
/* Search Bar
=============================*/
#search-top-box{
width: 242px;
top: 60px;
border: 1px solid #AAA;
background: #FFF;
border-radius: 3px;
}
#search-top-box input.text{
border: none !important;
background: none !important;
box-shadow: none !important;
width: 212px;
color: #555;
border-radius: 0;
}
#search-top-box input.text.empty{ color: #AAA; }
#search-top-box input.button{
text-indent: -9999px;
width: 20px;
height: 20px;
border: none;
padding: 0;
background-color: #FFF;
background-image: url(http://themes.wdfiles.com/local--files/the-art-in-articles/search-icon.png);
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
/* Side Bar
=============================*/
#side-bar{
width: 200px;
font-size: 90%;
color: #444;
}
#side-bar h1, #side-bar h2{
font-size: 12pt;
background-color: #DDD;
padding: 5px 0 5px 1em;
margin: 0 7px 0 -1em;
border-radius: 0 10px 10px 0;
}
#side-bar h2{
font-size: 10pt;
padding: 3px 0 3px 1em;
}
#side-bar h3, #side-bar h4,
#side-bar h5, #side-bar h6{ font-size: 10pt; }
/* Footer
=============================*/
#footer{
background: #DDD;
border-radius: 0 10px 10px 0;
margin-right: 10px;
}
#license-area{ opacity: .75; }
/* Main Content
=============================*/
#main-content{
margin: 15px 0 15px 220px;
background-color: #FFF;
border: 1px solid #BBB;
border-right: none;
box-shadow: 0 0 4px -1px rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
}
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6{ margin: 12px 0 8px 0; }
#main-content h1{ font-size: 18pt; }
#main-content h2{ font-size: 16pt; }
#main-content h3{ font-size: 14pt; }
#main-content h4{ font-size: 12pt; }
#main-content h5{ font-size: 11pt; }
#main-content h6{ font-size: 10pt; }
#main-content h1{ border-bottom: 1px solid #CCC; }
#main-content p{ margin: 8px 0 12px 0; }
hr{ background-color: #CCC; }
#breadcrumbs{
margin-left: 2em;
font-size: 90%;
color: #444;
}
.page-watch-options{ font-size: 80%; }
.pager .pager-no{ display: none; }
.pager .current{
background: #DDD;
padding: 2px 9px;
color: #444;
border-radius: 10px;
border: none;
}
#page-version-info{ display: none; }
.error-block{ text-align: center; }
/* Toc
=============================*/
#toc{
background-color: #FFF;
border: 1px solid #BBB;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
border-radius: 5px;
min-width: 210px;
}
#toc #toc-action-bar{
padding: 0;
position: relative;
left: 146px;
top: 4px;
font-size: 80%;
height: 0;
}
#toc-action-bar::before{
color: #444;
content: '(';
}
#toc-action-bar::after{
color: #444;
content: ')';
}
#toc .title{
padding-left: 2em;
color: #444;
text-align: left;
}
/* Code Blocks
=============================*/
.code{
background: none;
background-image: url(http://themes.wdfiles.com/local--files/the-art-in-articles/code.png);
background-repeat: no-repeat;
background-position: top right;
border: none;
border-left: 2px solid #DDD;
border-right: 1px dashed #EEE;
margin: 6px 1em 6px 1em;
padding: 0 1em;
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
}
.code pre{
font-family: monospace;
font-size: 13px;
line-height: 1.25em;
}
/* Wikidot's Tables
=============================*/
table.wiki-content-table{
border-radius: 5px;
}
table.wiki-content-table th{
background: #DDD;
color: #444;
font-weight: bold;
letter-spacing: 1px;
border: none;
padding: 1px 1em;
}
table.wiki-content-table td{
border: none;
background: none;
padding: 2px 1em;
color: #222;
}
table.wiki-content-table tr:nth-child(odd){
background-color: #F7F7F7;
}
/* Timothy Foster's Image Box
=============================*/
.image-box{
border: 1px solid #BBB;
border-radius: 5px;
background-color: #FFF;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
.image-box-heading{
background-color: #DDD;
border-radius: 5px 5px 0 0;
color: #444;
letter-spacing: 1px;
}
.image-box-caption{
color: #777;
font-style: normal !important;
}
/* Generic Hovertips
=============================*/
.hovertip{
border: 1px solid #BBB !important;
background: #FFF;
opacity: .95 !important;
border-radius: 5px;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
.hovertip .content{ font-size: 90%; }
/* James Kanjo's Hovertips
=============================*/
.hover{
text-decoration: underline;
border-bottom: 1px solid;
color: #4476A7;
}
.hover:hover{
text-decoration: none;
border-bottom: none;
}
.hover span{
visibility: hidden;
position: absolute;
opacity: 0;
transition: opacity 500ms;
-moz-transition: opacity 500ms;
-webkit-transition: opacity 500ms;
-o-transition: opacity 500ms;
}
.hover:hover span{
visibility: visible;
position: absolute;
display: inline;
opacity: 1;
color: #444;
font-size: 90%;
margin: 15px -20px;
height: auto;
background: #FFFFFF;
border: 1px solid #BBB;
width: 300px;
padding: 1em;
border-radius: 5px;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
.hover:hover span span{
position: relative;
margin: auto;
height: auto;
width: auto;
border: none;
padding: 0;
}
/* Tabview
=============================*/
.yui-navset .yui-nav a{
border-radius: 5px 5px 0 0;
border: none;
background: none;
color: #777;
font-size: 90%;
}
.yui-navset .yui-nav .selected a{
background: #DDD;
border-radius: 5px 5px 0 0;
border: none;
color: #444;
letter-spacing: 1px;
font-size: 100%;
}
.yui-navset .yui-nav{ border-bottom: 3px solid #DDD; }
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus{
background: none;
color: #444;
}
.yui-navset .yui-nav .selected a:hover,
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus{
background: #DDD;
color: #444;
}
.yui-navset .yui-nav a em{ border: none; }
.yui-navset .yui-content{
border-radius: 0 0 5px 5px;
border: 1px solid #BBB;
background: #FFF;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
/* Rate Widget
=============================*/
.page-rate-widget-box{ margin: 5px 0; }
.page-rate-widget-box .rate-points{
border: 1px solid #BBB;
background: #FFF;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
border-radius: 5px;
padding: 2px 10px;
margin-right: 6px;
text-transform: capitalize;
color: #444;
font-weight: normal;
}
.page-rate-widget-box .rate-points .number{ font-weight: bold; }
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a{
color: #444;
background: #DDD;
font-weight: bold;
transition: all 150ms;
-moz-transition: all 150ms;
-webkit-transition: all 150ms;
-o-transition: all 150ms;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover{
background: #E4E4E4;
text-decoration: none;
}
.page-rate-widget-box .rateup a{ border-radius: 10px 0 0 10px; }
.page-rate-widget-box .cancel a{ border-radius: 0 10px 10px 0; }
/* Owindow
=============================*/
.odialog-shader{ opacity: .5; }
.owindow{
border: 1px solid #BBB;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0 0 8px 4px rgba(0,0,0,.1);
}
.owindow .button-bar a{ text-transform: capitalize; }
.owindow h1{ font-size: 14pt; }
.owindow h2{ font-size: 12pt; }
.owindow .content img:first-child{
border-radius: 5px;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
padding: 0 !important;
margin: 2px 8px;
}
/* Action Area
=============================*/
/* Editor Panel thanks to leiger */
#np-editor-panel,
#wd-editor-toolbar-panel,
#post-edit-panel{
height: 30px;
position: relative;
overflow: hidden;
-webkit-transition: height 450ms ease-in-out;
-moz-transition: height 450ms ease-in-out;
-o-transition: height 450ms ease-in-out;
-ms-transition: height 450ms ease-in-out;
transition: height 450ms ease-in-out;
}
#np-editor-panel:hover,
#wd-editor-toolbar-panel:hover,
#post-edit-panel:hover{ height: 90px; }
div.change-textarea-size{ visibility: hidden; }
.edit-page-bottomtable{ width: 100%; }
/* New Wikidot Editor Buttons
By Matt Gentile at Icondeposit.com */
.wd-editor-toolbar-panel a{
margin: 0;
/*padding: 0.1em 0.2em;*/
border: none;
/*float: left;*/
background-color: transparent !important;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.18);
-webkit-shadow: 0px 1px 3px rgba(0,0,0,0.18);
-moz-shadow: 0px 1px 3px rgba(0,0,0,0.18);
-o-shadow: 0px 1px 3px rgba(0,0,0,0.18);
}
.wd-editor-toolbar-panel a:hover{
/*background-color: transparent;*/
border: none;
}
.wd-editor-toolbar-panel a:active {
box-shadow: none;
-webkit-shadow: none;
-moz-shadow: none;
-o-shadow: none;
}
.wd-editor-toolbar-panel a {
background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdb.png);
}
.wd-editor-toolbar-panel a:hover {
background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbhover.png);
}
.wd-editor-toolbar-panel a:active {
background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbactive.png);
}
/* Navi-Bar
=============================*/
#navi-bar{
border-color: #888;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#navi-bar .new-site input.text{
text-align: right;
opacity: .5;
transition: opacity 500ms;
-moz-transition: opacity 500ms;
-webkit-transition: opacity 500ms;
-o-transition: opacity 500ms;
}
#navi-bar .new-site input.text:focus{ opacity: 1; }
/* Kenneth's simpleCal
=============================*/
.cal-main-table{
border-radius: 5px;
box-shadow: 0 0 4px -2px rgba(0,0,0,.25);
}
.cal-wrap-table a{ color: #4476A7; }
.cal-wrap-table a:hover{ color: #487AAB; }
.cal-wrap-table .cal-main-table .cal-hover-box{ margin-top: 3px; }
.cal-wrap-table .cal-main-table div.hover-mini-event,
.cal-event-list div.mini-event{
border: none;
background: #DDD;
border-radius: 10px;
padding: 1px 8px;
}
.cal-wrap-table .cal-main-table .hover-mini-event a{ color: #444; }
.cal-wrap-table .cal-main-table .dh-content{ background: #FFF; }
.cal-wrap-table .new-page-box{
border: none !important;
background: none !important;
padding: 0 !important;
}
.cal-wrap-table .new-page-box input.text{
border-radius: 5px;
border: none;
border: 1px solid #DDD !important;
box-shadow: 0 0 2px -1px rgba(0,0,0,.25) inset;
background: #FFF !important;
padding: 2px !important;
transition: box-shadow 150ms;
-moz-transition: all 150ms;
-webkit-transition:all 150ms;
-o-transition: all 150ms;
}
.cal-wrap-table .cal-hover-box .new-page-box input.text{
width: 95%;
}
.cal-wrap-table .cal-modal-content{
border: 1px solid #BBB;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0 0 8px 4px rgba(0,0,0,.1);
}
.cal-wrap-table .cal-hover .collapsible-block-unfolded-link{
right: 47%;
top: 17%;
}
/* Timothy's Checklist
=============================*/
.checklist-status-head,
.checklist-item-head,
.checklist-priority-head,
.checklist-date-head,
.checklist-options-head{
background-color: #DDD;
padding: 0 5px 0 5px;
color: #444;
letter-spacing: 1px;
font-weight: bold;
}
.checklist-table tr:nth-child(odd){ background-color: #F7F7F7; }
/* Quick Comments
=============================*/
#np-editor-title, #np-title,
#np-editor-panel,
#np-cancel, #np-preview,
#new-post-form br{ display: none; }
#np-text{
width: 85% !important;
height: 200px !important;
}
.signature{ display: none; }
span.printuser.avatarhover a:first-child{ display: none; }
#thread-container .head .options{ display: none; }
#thread-container .post{
border: 1px solid #BBB;
border-radius: 5px;
background: #FFF;
margin: 14px 0;
padding: 5px 10px;
color: #777;
}
#thread-container .post .content{ padding-left: 8px; }
#thread-container .head .odate{ float: right; }
#thread-container .head{ background: none; }
div.comments-box #thread-container .post{
font-size: 90%;
color: #444;
}
/* Forum
=============================*/
blockquote{
background: none;
background-image: url(http://themes.wdfiles.com/local--files/the-art-in-articles/quotes.png);
background-repeat: no-repeat;
background-position: top right;
border: none;
border-left: 2px solid #DDD;
border-right: 1px solid #EEE;
margin: 6px 2em;
padding: 3px 1em;
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
}
blockquote p{
font-style: italic;
color: #555;
}
.forum-start-box .forum-group div.head{
background: #DDD;
color: #444;
border: none;
}
.forum-start-box .head .title{
color: #444;
letter-spacing: 1px;
}
/* Site Manager
=============================*/
#site-manager .head{ border-bottom: 1px solid #CCC; }
/* Printing
=============================*/
body.print-body{
background-image: none !important;
background-color: #FFF !important;
}
.print-body #content-wrap,
.print-body #main-content{
border: none !important;
box-shadow: none !important;
margin: 0;
}
.print-body .quickCom{ display: none !important; }
// Special class for omitting things from print
.print-body .noprint{ display: none; }
How to install
- go to: your wiki admin panel » appearance » themes
- choose External CSS theme
- supply the following URL as the CSS location
http://themes.wdfiles.com/local--code/ultimati-s-theme
Code
Notes
Similar themes |
Browse themes by tag
2.0
3d
3d-buttons
610nm
and
and/or
ardeol
articles
band
base
beige
black
blog
bloo
blue
bmc
border
boring
brown
business
camo
cat
chocholate
christian
christmas
city
clan
claret
claus
clay
clean
coffe
coke
colorful
company
contest
contest-win
corperate
corporate
corporation
creative
crimson
cross
css3
css3-buttons
curved
d14
dark
dashed
deep
|