Skip to content

Instantly share code, notes, and snippets.

@claudiob
Created June 7, 2011 22:22
Show Gist options
  • Save claudiob/1013326 to your computer and use it in GitHub Desktop.
Save claudiob/1013326 to your computer and use it in GitHub Desktop.
Three different CSS coding styles
/*
Theme Name: Stubbornella
Theme URI: http://www.stubbornella.org/@@@theme specific url@@@
Description: The stubbornella CMS theme based on the default WordPress theme.
Version: .1
Author: Nicole Sullivan
Author URI: http://www.stubbornella.org/
Stubbornella Beta .1
http://www.stubbornella.org/ @@@theme specific url@@@
This theme was designed and built by Nicole Sullivan,
whose website you will find at http://www.stubbornella.org/
*/
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0pr2
*/
/* reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* fonts */
body{font:13px/1.231 helvetica,arial, clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
#ufo{text-indent: -5999px;}
/* Begin navigation */
#nav{overflow:hidden; _overflow:visible; zoom:1; position:absolute; bottom:0px; left:0; padding-bottom:5px;padding-left:4px; width:100%; clear:both;}
#nav li,#nav a, #nav span{float:left;}
#nav li.current, #nav a, #nav span{background:url(img/skin/nav_all.gif) no-repeat;}
#nav li.current{background-position:top right !important;font-size:110%; font-weight: bold;}
#nav li.current a{background-position:top left !important;color:#38373C; }
#nav li.current a span{background-position:bottom right !important;padding: 8px 20px 10px 15px;_padding:7px 20px 9px 15px;}
#nav a{background-position: 0 -87px; text-decoration:none;color:#fff;}
#nav .first a{background-position: 0 -999px;}
#nav a:hover, #nav a:focus{background-position:100% -47px;}
#nav a:hover span, #nav a:focus span{background-position: 0 -47px;padding: 4px 15px 14px 15px;_padding:7px 20px 9px 15px;}
#nav span{background-position: 999px 999px;padding: 4px 15px 14px 15px; cursor:pointer;}
/*#nav li{border:solid 1px red;}
#nav a{border:solid 1px orange;}
#nav span{border:solid 1px yellow; background-image:none !important;}*/
/* End navigation */
/* Begin Typography & Colors */
body {background-color: #f2f2f2;color: #38373D;}
#page {border: 1px solid #959596;text-align: left; width: 1050px;margin:0 auto;padding-top:1px;}
#event {width:300px;float:right;}
#content{margin-bottom:30px;}
.narrowcolumn .postmetadata {text-align: center;}
.alt {background-color: #f8f8f8;}/* sets every other comment to gray bkg */
.me {background-color: #F8E6F2;}/* bkg color of my comments, here pink */
#footer {background-color: #38373c;border-top: solid 10px #e2e2e2;color:#e2e2e2;}
#headerimg .description {text-align: center;}
h1{position:absolute; top:-23px; left:10px;font-size:100%; }
h1 a{color: #333333;}
.description{visibility:hidden;}
h1 a{display:block;}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {text-decoration: none;}
h2{font-size: 24px; font-family:"Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; letter-spacing:-1;line-height:26px;font-weight:normal;}
h3{font-size: 150%;}
h4{font-size: 120%;}
h5{font-weight: bold;}
h6{font-style: italic;}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {text-decoration: none;}
em{font-style:italic;}
strong{font-weight:bold;}
pre{background-color:#F8E6F2;padding: 10px; margin: 20px 0;overflow-x:auto;overflow-y: hidden;border-top: 1px dashed #DF2B72;border-bottom: 1px dashed #DF2B72;}
.entry p a:visited {color: #b85b5a;}
.basicList{padding-left: 25px;margin: 10px;}
.basicList li{list-style-image: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/puce.gif);}
ol{margin: 10px;padding-left:25px;}
ol li{list-style-type:decimal;}
.commentlist{padding-left:0;}
.commentlist li, #commentform input, #commentform textarea {}
.commentlist li { }
.commentlist cite, .commentlist cite a {font-weight: bold;}
small, .nocomments, .postmetadata, blockquote, strike {color: #777;}
a, h2, h2 a:hover, h3 a:hover {color: #DF2B72;text-decoration: none;}
a:hover {color: #AE0345;text-decoration: underline;}
#wp-calendar #prev a {}
#wp-calendar a {text-decoration: none;}
#wp-calendar caption {text-align: center;}
#wp-calendar th {font-style: normal;text-transform: capitalize;}
blockquote{padding: 20px 40px; border-left: 20px solid #e2e2e2; margin: 20px; font-size: 15px;}
blockquote cite:before{content: "~";}
blockquote cite{text-align: right;display:block;padding-top:10px; font-size: 13px;}
blockquote.callout {float: right; width: 50%;}
.wp-caption-text { color: #777; font-style: italic;margin-top: 0px;}
/* End Typography & Colors */
/* Skip to content (not yet used as I have little navigation before main content) */
.skip{background:transparent none repeat scroll 0%;display:block;overflow:hidden;padding:0.5em 0pt;text-indent:-600em;text-align:left; position:absolute; top:0; left:0;width:100%;z-index:10;}
.skip:hover, .skip:focus, .skip:active{display:block;background: #DF2B72 url("img/skin/body_bkg.gif") repeat-x bottom left;color:#fff;text-indent:10px;text-decoration:none;}
/* /Skip */
/* Begin Structure */
body { background:#f2f2f2 url("img/skin/body_bkg.gif") repeat-x top left;}
#page { background:none; border: none; }
hr{display:none;}
#header {height: 200px;width: 742px; z-index:10;}
#header{height:217px; background-image:none !important;background-color:none !important;zoom:1;}
#headerimg { background: url('img/skin/header.gif') no-repeat -1px 0;height: 217px; position:relative;border-left:solid 1px #ccc;}
#sidebar{width:500px;float:right;}
#sidebar ul{padding-left: 35px; }
#sidebar ul ul{padding:0;}
#sidebar a:link{color:#38373D;}
.narrowcolumn {float: left;width: 540px;}
.midcolumn{width: 500px;}
.widecolumn {width: 727px;}
#content { background: url("img/skin/col_bkg_wide.gif") repeat-y 100% -3px;margin-top:-7px;_margin-top:-8px;z-index:11;}
#content .content_t{background: url("img/skin/col_t.gif") no-repeat top right;}
.content_t{border-left:solid 1px #ccc;}
#content .content_b{background: url("img/skin/col_b.gif") no-repeat bottom right;padding: 2px 8px 8px 0;}
.post {padding: 19px 28px 19px 19px;}
.widecolumn .post {margin: 0;}
.narrowcolumn .postmetadata {padding-top: 5px;}
.widecolumn .postmetadata {margin: 30px 0;}
.widecolumn .smallattachment {text-align: center;float: left;width: 128px;margin: 5px 5px 5px 0px;}
.widecolumn .attachment {text-align: center;margin: 5px 0px;}
.postmetadata {clear: left;}
#footer {clear: both;}
#footer p {margin: 0;padding: 20px 0;text-align: center;}
p{margin: 10px 0;}
/* End Structure */
/* Begin Headers */
.pagetitle {color:#38373C; padding:18px 18px 0 18px;font-size:150%;}
#sidebar h2 {margin: 16px 0 15px 0;}
/* End Headers */
/* Begin Images */
p img {padding: 0;max-width: 100%;_width:100%;}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid), a little tweaked now for backwards compatibility with my old theme... */
/* centered */
.c{display: block;margin-left: auto;margin-right: auto;}
.txt_c{text-align:center}
/* right */
img.r, {padding: 4px;margin: 0 0 2px 7px;display: inline;}
.txt_r{text-align:right;}
.r, .alignright{float: right;}
/* left */
img.l,img.floatLeft, img.floatRight {padding: 4px;margin: 0 7px 2px 0;display: inline;}
.txt_l{text-align:left;}
.l,.alignleft,.floatLeft, .floatRight{float: left}
/* End Images */
/* Begin Lists */
.post ul, #sidebar ul ul{}
#sidebar ul ul{}
#sidebar ul .cat{overflow:hidden; _overflow: visible; zoom:1;list-style-type:none; list-style-image:none;color: #38373C; font-weight:bold;padding:0;}
.cat a{text-transform: uppercase;}
.cat a:link {color:#38373c; }
.cat li{background: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/puce.gif) no-repeat 0 2px; padding-left:13px; margin-right: 14px;float:left;width:40%;}
.cat .cat_even{background-image:url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/puce_dark.gif);}
/* End Entry Lists */
/* Begin Form Elements */
.searchform {margin: 15px 19px 7px 19px;text-align: right; width:700px;color: #DF2B72;}
.searchform input{background-color:#F8E6F2; border:solid 1px #222222; color: #36373C;}
.searchform input:focus,.searchform input:hover{background-color:#fff;}
.searchform #searchsubmit {background: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/search_button.gif) no-repeat center center; border:none; background-color:none;text-indent: -5999px;height:16px; width:16px; color:transparent;font-size:0px;}
.no-results{padding:18px;}
.no-results h2{color: #38373C; font-size:150%;}
.no-results .searchform{width:auto;}
.entry form { /* This is mainly for password protected posts, makes them look better. */text-align:center;}
select {width: 130px;}
#respond{padding:18px;}
#commentform{margin:0 28px 0 18px; padding:0 0 48px 0; overflow:hidden; overflow:visible; zoom:1;}
#commentform input#author,#commentform input#email,#commentform input#url {width: 170px;padding: 2px;margin: 5px 5px 1px 0;border:solid 1px #222222;background-color:#F8E6F2;}
#commentform textarea {width:100%;padding: 0;border:solid 1px #222222; background-color:#F8E6F2;}
#commentform input:hover, #commentform input:focus, #commentform textarea:hover, #commentform textarea:focus{background-color:#fff;}
#commentform #submit {margin: 0;float: right; }
/* End Form Elements */
/* Begin Comments*/
#comments{padding:18px;}
.commentlist{text-align: justify;border-top: 1px dashed #DF2B72;margin:10px 18px 10px 10px;}
.commentlist li{padding: 9px;list-style: none;border-bottom: 1px dashed #DF2B72;}
.commentlist p {margin: 10px 5px 10px 0;}
#commentform p {margin: 5px 0;}
.nocomments {text-align: center;margin: 0;padding: 0;}
.commentmetadata {margin: 0;display: block;}
.author_comment{background-color:pink;}
/* End Comments */
/* Recent Articles */
.recentArticles ul {padding: 0;border-top: 1px dashed #DF2B72;margin:10px;}
#content .recentArticles{padding: 0 9px 0 0;}
#content .recentArticles h2{padding-left:18px;}
#sidebar .recentArticles ul{padding:0;margin:0;}
.recentArticles ul li {list-style-type: none;list-style-image:none;border-bottom: 1px dashed #DF2B72;font-size:90%;}
.recentArticles ul li a{display:block !important;text-decoration:none;color: #36373C; padding:5px 10px; font-weight:bold;}
.recentArticles ul li a:hover, .recentArticles ul li a:focus{background-color:#F8E6F2;color:#E22A72 !important;}
.recentArticles ul li a .date{display:block; font-style:italic;font-weight:normal;}
.recentArticles ul li a:hover .date, .recentArticles ul li a:focus .date{color: #36373C !important;}
/* End Recent Articles */
/* Twitter */
#sidebar .twtr-tweets{padding:0 !important;margin:0;border-top: 1px dashed #DF2B72; color:#36373C;}
#sidebar .twtr-tweets .twtr-tweet {list-style-type: none;list-style-image:none;border-bottom: 1px dashed #DF2B72;padding:5px 10px;}
#sidebar .twtr-tweets span{}
#sidebar .twtr-tweets span a{font-style: normal;color:#DF2B72;}
#sidebar .twtr-tweets span a:hover, #twitter_update_list span a:focus, #twitter_update_list span a:visited{text-decoration:underline; color:#AE0345;}
#sidebar .twtr-tweets .twtr-tweet:hover, .twtr-tweets .twtr-tweet:focus{background-color:#F8E6F2;}
#sidebar .twtr-tweets i a {font-style:italic;font-size:100% !important;color: #777 !important;}
.twtr-widget .twtr-tweet-wrap{padding:0 !important;}
.twtr-hd, .twtr-ft{display:none;}
.twtr-doc{width:auto !important;}
/* End Twitter */
/* tag cloud */
.wp-tag-cloud-title{padding:0 20px 0 20px;}
.wp-tag-cloud{padding:0 20px 20px 20px;}
.wp-tag-cloud li{display:inline;}
.wp-tag-cloud a{color: #38373D;}
/* end tag cloud */
/* Begin Sidebar */
#sidebar{padding: 0 0 10px 0;}
#sidebar form {margin: 0;}
/* End Sidebar */
/* Begin Calendar */
.none{width:auto;}
#wp-calendar{empty-cells: show;margin: 10px auto 0;width: 155px;}
#wp-calendar #next a {padding-right: 10px;text-align: right;}
#wp-calendar #prev a {padding-left: 10px;text-align: left;}
#wp-calendar a {display: block;}
#wp-calendar caption {text-align: center;width: 100%;}
#wp-calendar td {padding: 3px 0;text-align: center;}
#wp-calendar td.pad:hover { /* Doesn't work in IE */background-color: #fff; }
/* End Calendar */
/* grids */
.line, .lastUnit {overflow: hidden;_overflow:visible;_zoom:1; }
.unit{float:left;_zoom:1;}
.unitExt{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}
/* ====== media ====== */
.media{margin:10px 0;clear: both;}
.media, .media .bd{overflow:hidden; _overflow:visible; zoom:1;}
.media .img{float:left;margin-right: 10px; margin-bottom: 10px;}
.media .img img{display:block;}
.media .mediaAction{float:right; margin-left: 10px; margin-bottom: 10px;}
/* ====== Tables ====== */
.data{margin: 10px 0;position:relative; zoom:1;vertical-align: top;border:1px solid #bcbabf;background-color: #eee;}
.data table {width:100%;}
.data tr:nth-child(odd){background-color: #e2e2e2;}
th, td{vertical-align:top;border:1px solid #fff; }
.txtC, .data .txtC td, .data .txtC th{text-align:center;}
.txtL, .data .txtL td, .data .txtL th{text-align:left;}
.txtR, .data .txtR td, .data .txtR th{text-align:right;}
.txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
.txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
.txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
.data th,.data td{padding:5px}
.data thead th{background-color: #38373D; color: #e2e2e2;vertical-align: middle !important; text-align: center;padding: 10px;font-size: 112%;}
/* ************************************************************************* */
/* TYPOGRAPHY */
/* ************************************************************************* */
/* font-family */
input, textarea, select, button {font-family: arial, helvetica, clean, sans-serif}
body {font-family: helvetica, arial, clean, sans-serif}
pre, code, kbd, samp, tt {font-family: monospace}
h2 {font-family: "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif}
/* font-size */
h1, h5, h6, table {font-size: 100%}
h2 {font-size: 24px}
h3, .pagetitle, .no-results h2 {font-size: 150%}
h4 {font-size: 120%}
input, textarea, select, button {font-size: 99%}
body, blockquote cite {font-size: 13px}
#nav li.current {font-size: 110%}
blockquote {font-size: 15px}
.searchform #searchsubmit {font-size: 0px}
.recentArticles ul li {font-size: 90%}
#sidebar .twtr-tweets i a {font-size: 100% !important}
.data thead th {font-size: 112%}
/* font-style */
address, caption, cite, code, dfn, strong, th, var,
body, select, input, button, textarea, table,
#wp-calendar th, #sidebar .twtr-tweets span a {font-style: normal}
em, h6, .wp-caption-text,
.recentArticles ul li a .date,
#sidebar .twtr-tweets i a {font-style: italic}
/* font-variant */
abbr, acronym, body, select, input, button,
textarea, table {font-variant: normal}
/* font-weight */
address, caption, cite, code, dfn, em, th, var,
h1, h2, h3, h4, h6, input, textarea, select,
body, button, table, .recentArticles ul li a .date {font-weight: normal}
strong, h5, #nav li.current, .commentlist cite,
.commentlist cite a, #sidebar ul .cat,
.recentArticles ul li a {font-weight: bold}
/* line-height */
body {line-height: 1.231}
select, input, button, textarea, table {line-height: normal}
pre, code, kbd, samp, tt {line-height: 100%}
h2 {line-height: 26px}
/* ************************************************************************* */
/* TEXT */
/* ************************************************************************* */
/* letter-spacing */
h2 {letter-spacing: -1}
/* text-align */
caption, th, #page, .skip, .txt_l, #wp-calendar #prev a,
.txtL, .data .txtL td, .data .txtL th {text-align: left}
.narrowcolumn .postmetadata, #headerimg .description,
#wp-calendar caption, .widecolumn .smallattachment,
.widecolumn .attachment, #footer p, .txt_c, .entry form,
.nocomments, #wp-calendar td, .txtC, .data .txtC td,
.data .txtC th, .data thead th {text-align: center}
blockquote cite, .txt_r, .searchform,
#wp-calendar #next a, .txtR, .data .txtR td,
.data .txtR th {text-align: right}
.commentlist {text-align: justify}
/* text-decoration */
#nav a, h1, h1 a, h1 a:hover, h1 a:visited,
#headerimg .description, h2, h2 a, h2 a:hover,
h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited,
#sidebar h2, #wp-calendar caption, cite, a,
#wp-calendar a, .skip:hover, .skip:focus, .skip:active,
.recentArticles ul li a {text-decoration: none}
a:hover, #sidebar .twtr-tweets span a:hover,
#twitter_update_list span a:focus,
#twitter_update_list span a:visited {text-decoration: underline}
/* text-transform */
#wp-calendar th {text-transform: capitalize}
.cat a {text-transform: uppercase}
/* text-indent */
#ufo, .searchform #searchsubmit {text-indent: -5999px}
.skip {text-indent: -600em}
.skip:hover, .skip:focus, .skip:active {text-indent: 10px}
/* ************************************************************************* */
/* COLORS */
/* ************************************************************************* */
/* color */
html, legend {color: #000}
#nav li.current a, .pagetitle, #sidebar ul .cat,
.no-results h2 {color: #38373C}
#nav a, .skip:hover, .skip:focus, .skip:active {color: #fff}
body, #sidebar a:link, .wp-tag-cloud a {color: #38373D}
#footer, .data thead th {color: #e2e2e2}
h1 a {color: #333333}
.entry p a:visited {color: #b85b5a}
small, .nocomments, .postmetadata, blockquote, strike,
.wp-caption-text {color: #777}
a, h2, h2 a:hover, h3 a:hover, .searchform,
#sidebar .twtr-tweets span a {color: #DF2B72}
a:hover, #sidebar .twtr-tweets span a:hover,
#twitter_update_list span a:focus,
#twitter_update_list span a:visited {color: #AE0345}
.cat a:link {color: #38373c}
.searchform input, .recentArticles ul li a,
#sidebar .twtr-tweets {color: #36373C}
.searchform #searchsubmit {color: transparent}
.recentArticles ul li a:hover,
.recentArticles ul li a:focus {color: #E22A72 !important}
.recentArticles ul li a:hover .date,
.recentArticles ul li a:focus .date {color: #36373C !important}
#sidebar .twtr-tweets i a {color: #777 !important}
/* background-color */
html {background-color: #FFF}
body {background-color: #f2f2f2}
.alt {background-color: #f8f8f8}
.me, pre, .searchform input, #commentform input#author,
#commentform input#email, #commentform input#url,
#commentform textarea, .recentArticles ul li a:hover,
.recentArticles ul li a:focus,
#sidebar .twtr-tweets .twtr-tweet:hover,
.twtr-tweets .twtr-tweet:focus {background-color: #F8E6F2}
#footer {background-color: #38373c}
.skip {background-color: transparent}
.skip:hover, .skip:focus, .skip:active {background-color: #DF2B72}
#header {background-color: none !important}
.searchform input:focus, .searchform input:hover,
#commentform input:hover, #commentform input:focus,
#commentform textarea:hover, #commentform textarea:focus,
#wp-calendar td.pad:hover {background-color: #fff}
.searchform #searchsubmit {background-color: none}
.author_comment {background-color: pink}
.data {background-color: #eee}
.data tr:nth-child(odd) {background-color: #e2e2e2}
.data thead th {background-color: #38373D}
/* ************************************************************************* */
/* BACKGROUNDS */
/* ************************************************************************* */
/* background-image */
#nav li.current, #nav a, #nav span {background-image: url(img/skin/nav_all.gif)}
.skip, #page {background-image: none}
.skip:hover, .skip:focus, .skip:active, body {background-image: url("img/skin/body_bkg.gif")}
#header {background-image: none !important}
#headerimg {background-image: url('img/skin/header.gif')}
#content {background-image: url("img/skin/col_bkg_wide.gif")}
#content .content_t {background-image: url("img/skin/col_t.gif")}
#content .content_b {background-image: url("img/skin/col_b.gif")}
.cat li {background-image: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/puce.gif)}
.cat .cat_even {background-image: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/puce_dark.gif)}
.searchform #searchsubmit {background-image: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/search_button.gif)}
/* background-repeat */
#nav li.current, #nav a, #nav span, #headerimg,
#content .content_t, #content .content_b, .cat li,
.searchform #searchsubmit {background-repeat: no-repeat}
.skip {background-repeat: repeat}
.skip:hover, .skip:focus, .skip:active, body {background-repeat: repeat-x}
#content {background-repeat: repeat-y}
/* background-attachment */
.skip {background-attachment: scroll}
/* background-position */
#nav li.current {background-position: top right !important}
#nav li.current a {background-position: top left !important}
#nav li.current a span {background-position: bottom right !important}
#nav a {background-position: 0 -87px}
#nav .first a {background-position: 0 -999px}
#nav a:hover, #nav a:focus {background-position: 100% -47px}
#nav a:hover span, #nav a:focus span {background-position: 0 -47px}
#nav span {background-position: 999px 999px}
.skip {background-position: 0%}
.skip:hover, .skip:focus, .skip:active {background-position: bottom left}
body {background-position: top left}
#headerimg {background-position: -1px}
#content {background-position: 100% -3px}
#content .content_t {background-position: top right}
#content .content_b {background-position: bottom right}
.cat li {background-position: 2px}
.searchform #searchsubmit {background-position: center center}
/* ************************************************************************* */
/* LISTS */
/* ************************************************************************* */
/* list-style-type */
ol li {list-style-type: decimal}
#sidebar ul .cat, .recentArticles ul li,
#sidebar .twtr-tweets .twtr-tweet {list-style-type: none}
/* list-style-image */
.basicList li {list-style-image: url(http://www.stubbornella.org/content/wp-content/themes/stubbornella/img/pictos/puce.gif)}
#sidebar ul .cat, .recentArticles ul li,
#sidebar .twtr-tweets .twtr-tweet {list-style-image: none}
/* list-style */
li, .commentlist li {list-style: none}
/* ************************************************************************* */
/* TABLES */
/* ************************************************************************* */
/* border-collapse */
table {border-collapse: collapse}
/* border-spacing */
table {border-spacing: 0}
/* empty-cells */
#wp-calendar {empty-cells: show}
/* ************************************************************************* */
/* LAYOUT */
/* ************************************************************************* */
/* display */
h1 a, blockquote cite, .skip, .skip:hover, .skip:focus,
.skip:active, .c, .commentmetadata,
.recentArticles ul li a .date, #wp-calendar a,
.media .img img {display: block}
hr, .twtr-hd, .twtr-ft {display: none}
img.r, img.l, img.floatLeft, img.floatRight,
.wp-tag-cloud li {display: inline}
.recentArticles ul li a {display: block !important}
/* visibility */
.description {visibility: hidden}
/* position */
#nav, h1, .skip {position: absolute}
#headerimg, .data {position: relative}
/* float */
#nav li, #nav a, #nav span, .narrowcolumn,
.widecolumn .smallattachment, .l, .alignleft,
.floatLeft, .floatRight, .cat li, .unit, .media .img {float: left}
#event, blockquote.callout, #sidebar, .r, .alignright,
#commentform #submit, .unitExt, .media .mediaAction {float: right}
.size1of1, .lastUnit {float: none}
/* clear */
#nav, #footer, .media {clear: both}
.postmetadata {clear: left}
/* ************************************************************************* */
/* SIZES */
/* ************************************************************************* */
/* width */
#nav, .skip, #commentform textarea, #wp-calendar caption,
.data table {width: 100%}
#page {width: 1050px}
#event {width: 300px}
blockquote.callout, .size1of2 {width: 50%}
#header {width: 742px}
#sidebar, .midcolumn {width: 500px}
.narrowcolumn {width: 540px}
.widecolumn {width: 727px}
.widecolumn .smallattachment {width: 128px}
.cat li, .size2of5 {width: 40%}
.searchform {width: 700px}
.searchform #searchsubmit {width: 16px}
.no-results .searchform, .none, .lastUnit {width: auto}
select {width: 130px}
#commentform input#author, #commentform input#email,
#commentform input#url {width: 170px}
.twtr-doc {width: auto !important}
#wp-calendar {width: 155px}
.size1of3 {width: 33.33333%}
.size2of3 {width: 66.66666%}
.size1of4 {width: 25%}
.size3of4 {width: 75%}
.size1of5 {width: 20%}
.size3of5 {width: 60%}
.size4of5 {width: 80%}
/* max-width */
p img {max-width: 100%}
/* height */
#header, #headerimg {height: 217px}
.searchform #searchsubmit {height: 16px}
/* ************************************************************************* */
/* POSITIONS */
/* ************************************************************************* */
/* top */
h1 {top: -23px}
.skip {top: 0}
/* bottom */
#nav {bottom: 0px}
/* left */
#nav, .skip {left: 0}
h1 {left: 10px}
/* vertical-align */
sup {vertical-align: text-top}
sub {vertical-align: text-bottom}
.data, th, td, .txtT, .data .txtT td, .data .txtT th {vertical-align: top}
.txtB, .data .txtB td, .data .txtB th {vertical-align: bottom}
.txtM, .data .txtM td, .data .txtM th {vertical-align: middle}
.data thead th {vertical-align: middle !important}
/* overflow */
#nav, .skip, #sidebar ul .cat, .line, .lastUnit, .media,
.media .bd {overflow: hidden}
#commentform {overflow: visible}
/* overflow-x */
pre {overflow-x: auto}
/* overflow-y */
pre {overflow-y: hidden}
/* z-index */
.skip, #header {z-index: 10}
#content {z-index: 11}
/* ************************************************************************* */
/* MARGINS */
/* ************************************************************************* */
/* margin-top */
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6,
code, form, fieldset, legend, input, textarea, th, td,
#page, .widecolumn .post, #footer p, img.r, img.l,
img.floatLeft, img.floatRight, #commentform,
#commentform #submit, .nocomments, .commentmetadata,
#sidebar .recentArticles ul, #sidebar .twtr-tweets,
#sidebar form {margin-top: 0}
ol, p, .basicList, .commentlist, .commentlist p,
.recentArticles ul, #wp-calendar, .media, .data {margin-top: 10px}
pre, blockquote {margin-top: 20px}
.wp-caption-text {margin-top: 0px}
#content {margin-top: -7px}
.widecolumn .postmetadata {margin-top: 30px}
.widecolumn .smallattachment, .widecolumn .attachment,
#commentform input#author, #commentform input#email,
#commentform input#url, #commentform p {margin-top: 5px}
#sidebar h2 {margin-top: 16px}
.searchform {margin-top: 15px}
/* margin-right */
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, input, textarea, p,
th, td, .widecolumn .post, .widecolumn .postmetadata,
#footer p, #sidebar h2, img.r, #commentform #submit,
#commentform p, .nocomments, .commentmetadata,
#sidebar .recentArticles ul, #sidebar .twtr-tweets,
#sidebar form, .media, .data {margin-right: 0}
ol, .basicList, .recentArticles ul, .media .img {margin-right: 10px}
blockquote {margin-right: 20px}
#page, .c, #wp-calendar {margin-right: auto}
.widecolumn .smallattachment, #commentform input#author,
#commentform input#email, #commentform input#url,
.commentlist p {margin-right: 5px}
.widecolumn .attachment {margin-right: 0px}
img.l, img.floatLeft, img.floatRight {margin-right: 7px}
.cat li {margin-right: 14px}
.searchform {margin-right: 19px}
#commentform {margin-right: 28px}
.commentlist {margin-right: 18px}
/* margin-bottom */
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6,
code, form, fieldset, legend, input, textarea, th, td,
#page, .widecolumn .post, #footer p, #commentform,
#commentform #submit, .nocomments, .commentmetadata,
#sidebar .recentArticles ul, #sidebar .twtr-tweets,
#sidebar form, #wp-calendar {margin-bottom: 0}
ol, p, .basicList, .commentlist, .commentlist p,
.recentArticles ul, .media, .media .img,
.media .mediaAction, .data {margin-bottom: 10px}
pre, blockquote {margin-bottom: 20px}
#content, .widecolumn .postmetadata {margin-bottom: 30px}
.widecolumn .smallattachment, .widecolumn .attachment,
#commentform p {margin-bottom: 5px}
#sidebar h2 {margin-bottom: 15px}
img.r, img.l, img.floatLeft, img.floatRight {margin-bottom: 2px}
.searchform {margin-bottom: 7px}
#commentform input#author, #commentform input#email,
#commentform input#url {margin-bottom: 1px}
/* margin-left */
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, input, textarea, p,
th, td, .widecolumn .post, .widecolumn .postmetadata,
#footer p, #sidebar h2, img.l, img.floatLeft,
img.floatRight, #commentform input#author,
#commentform input#email, #commentform input#url,
#commentform #submit, .commentlist p, #commentform p,
.nocomments,.commentmetadata, #sidebar .recentArticles ul,
#sidebar .twtr-tweets, #sidebar form, .media, .data {margin-left: 0}
ol, .basicList, .commentlist, .recentArticles ul,
.media .mediaAction {margin-left: 10px}
blockquote {margin-left: 20px}
#page, .c, #wp-calendar {margin-left: auto}
.widecolumn .smallattachment, .widecolumn .attachment {margin-left: 0px}
img.r {margin-left: 7px}
.searchform {margin-left: 19px}
#commentform {margin-left: 18px}
/* ************************************************************************* */
/* PADDINGS */
/* ************************************************************************* */
/* padding-top */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
code, form, fieldset, legend, input, textarea, p, th, td,
#sidebar ul ul, p img, #sidebar ul .cat, #commentform,
#commentform textarea, .nocomments, .recentArticles ul,
#content .recentArticles, #sidebar .recentArticles ul,
.wp-tag-cloud-title, .wp-tag-cloud, #sidebar {padding-top: 0}
pre, blockquote cite, .data thead th {padding-top: 10px}
blockquote, #footer p {padding-top: 20px}
#nav li.current a span {padding-top: 8px}
#nav a:hover span, #nav a:focus span, #nav span, img.r,
img.l, img.floatLeft, img.floatRight {padding-top: 4px}
#page {padding-top: 1px}
.skip {padding-top: 0.5em}
#content .content_b, #commentform input#author,
#commentform input#email, #commentform input#url {padding-top: 2px}
.post {padding-top: 19px}
.narrowcolumn .postmetadata, .recentArticles ul li a,
#sidebar .twtr-tweets .twtr-tweet, .data th, .data td {padding-top: 5px}
.pagetitle, .no-results, #respond, #comments {padding-top: 18px}
.commentlist li {padding-top: 9px}
#sidebar .twtr-tweets, .twtr-widget .twtr-tweet-wrap {padding-top: 0 !important}
#wp-calendar td {padding-top: 3px}
/* padding-right */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
code, form, fieldset, legend, input, textarea, p, th, td,
#sidebar ul ul, #footer p, p img, #sidebar ul .cat,
#commentform, #commentform textarea, .nocomments,
.recentArticles ul, #sidebar .recentArticles ul,
#sidebar, #wp-calendar td {padding-right: 0}
pre, .recentArticles ul li a,
#sidebar .twtr-tweets .twtr-tweet, #wp-calendar #next a,
.data thead th {padding-right: 10px}
blockquote {padding-right: 40px}
#nav li.current a span, .wp-tag-cloud-title,
.wp-tag-cloud {padding-right: 20px}
#nav a:hover span, #nav a:focus span, #nav span {padding-right: 15px}
.skip {padding-right: 0pt}
#content .content_b {padding-right: 8px}
.post {padding-right: 28px}
.pagetitle, .no-results, #respond, #comments {padding-right: 18px}
img.r, img.l, img.floatLeft, img.floatRight {padding-right: 4px}
#commentform input#author, #commentform input#email,
#commentform input#url {padding-right: 2px}
.commentlist li, #content .recentArticles {padding-right: 9px}
#sidebar .twtr-tweets, .twtr-widget .twtr-tweet-wrap {padding-right: 0 !important}
.data th, .data td {padding-right: 5px}
/* padding-bottom */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
code, form, fieldset, legend, input, textarea, p, th, td,
#sidebar ul ul, .pagetitle, p img, #sidebar ul .cat,
#commentform textarea, .nocomments, .recentArticles ul,
#content .recentArticles, #sidebar .recentArticles ul,
.wp-tag-cloud-titl {padding-bottom: 0}
pre, #nav li.current a span, #sidebar, .data thead th {padding-bottom: 10px}
blockquote, #footer p, .wp-tag-cloud {padding-bottom: 20px}
#nav, .recentArticles ul li a,
#sidebar .twtr-tweets .twtr-tweet,
.data th, .data td {padding-bottom: 5px}
#nav a:hover span, #nav a:focus span, #nav span {padding-bottom: 14px}
.skip {padding-bottom: 0.5em}
#content .content_b {padding-bottom: 8px}
.post {padding-bottom: 19px}
img.r, img.l, img.floatLeft, img.floatRight {padding-bottom: 4px}
.no-results, #respond, #comments {padding-bottom: 18px}
#commentform {padding-bottom: 48px}
#commentform input#author, #commentform input#email,
#commentform input#url {padding-bottom: 2px}
.commentlist li {padding-bottom: 9px}
#sidebar .twtr-tweets, .twtr-widget .twtr-tweet-wrap {padding-bottom: 0 !important}
#wp-calendar td {padding-bottom: 3px}
/* padding-left */
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6,
code, form, fieldset, legend, input, textarea, p, th, td,
.commentlist, #sidebar ul ul, #content .content_b,
#footer p, p img, #sidebar ul .cat, #commentform,
#commentform textarea, .nocomments, .recentArticles ul,
#content .recentArticles, #sidebar .recentArticles ul,
#sidebar, #wp-calendar td {padding-left: 0}
ol, .basicList {padding-left: 25px}
pre, .recentArticles ul li a,
#sidebar .twtr-tweets .twtr-tweet,
#wp-calendar #prev a, .data thead th {padding-left: 10px}
blockquote {padding-left: 40px}
#nav, img.r, img.l, img.floatLeft, img.floatRight {padding-left: 4px}
#nav li.current a span, #nav a:hover span,
#nav a:focus span, #nav span {padding-left: 15px}
.skip {padding-left: 0pt}
#sidebar ul {padding-left: 35px}
.post {padding-left: 19px}
.pagetitle, .no-results, #respond, #comments,
#content .recentArticles h2 {padding-left: 18px}
.cat li {padding-left: 13px}
#commentform input#author, #commentform input#email,
#commentform input#url {padding-left: 2px}
.commentlist li {padding-left: 9px}
#sidebar .twtr-tweets, .twtr-widget .twtr-tweet-wrap {padding-left: 0 !important}
.wp-tag-cloud-title, .wp-tag-cloud {padding-left: 20px}
.data th, .data td {padding-left: 5px}
/* ************************************************************************* */
/* BORDERS */
/* ************************************************************************* */
/* border-top */
#footer {border-top: solid 10px #e2e2e2}
pre, .commentlist, .recentArticles ul,
#sidebar .twtr-tweets {border-top: 1px dashed #DF2B72}
/* border-bottom */
pre, .commentlist li, .recentArticles ul li,
#sidebar .twtr-tweets .twtr-tweet {border-bottom: 1px dashed #DF2B72}
/* border-left */
blockquote {border-left: 20px solid #e2e2e2}
#headerimg, .content_t {border-left: solid 1px #ccc}
/* border */
fieldset, img, abbr, acronym {border: 0}
#page, .searchform #searchsubmit {border: none}
.searchform input, #commentform input#author,
#commentform input#email, #commentform input#url,
#commentform textarea {border: solid 1px #222222}
.data {border: 1px solid #bcbabf}
th, td {border: 1px solid #fff}
/* ************************************************************************* */
/* DYNAMIC */
/* ************************************************************************* */
/* cursor */
#nav span {cursor: pointer}
/* zoom */
#nav, #header, #sidebar ul .cat, #commentform, .media,
.media .bd, .data {zoom: 1}
/* ************************************************************************* */
/* GENERATED */
/* ************************************************************************* */
/* content */
q:before, q:after {content: ''}
blockquote cite:before {content: "~"}
/* ************************************************************************* */
/* UNRECOGNIZED PROPERTIES */
/* ************************************************************************* */
/* _left */
.lastUnit {_left: -3px}
/* *font */
body {*font: x-small}
/* _overflow */
#nav, #sidebar ul .cat, .line, .lastUnit, .media,
.media .bd {_overflow: visible}
/* _width */
p img {_width: 100%}
/* _margin-right */
.lastUnit {_margin-right: -3px}
/* _padding */
#nav li.current a span, #nav a:hover span,
#nav a:focus span {_padding: 7px 20px 9px 15px}
/* _zoom */
.line, .lastUnit, .unit {_zoom: 1}
/* *font-size */
input, textarea, select {*font-size: 100%}
body {*font-size: small}
pre, code, kbd, samp, tt {*font-size: 108%}
/* _margin-top */
#content {_margin-top: -8px}
/* _position */
.lastUnit {_position: relative}
/* ************************************************************************* */
/* TYPOGRAPHY */
/* ************************************************************************* */
font-family:
arial, helvetica, clean, sans-serif: input, textarea, select, button
helvetica, arial, clean, sans-serif: body
monospace: pre, code, kbd, samp, tt
"Century Gothic","Trebuchet MS",
Arial,Helvetica, sans-serif: h2
font-size:
100%: h1, h5, h6, table
24px: h2
150%: h3, .pagetitle, .no-results h2
120%: h4
99%: input, textarea, select, button
13px: body, blockquote cite
110%: #nav li.current
15px: blockquote
0px: .searchform #searchsubmit
90%: .recentArticles ul li
100% !important: #sidebar .twtr-tweets i a
112%: .data thead th
font-style:
normal: address, caption, cite, code, dfn, strong, th, var, body, select, input, button, textarea, table, #wp-calendar th, #sidebar .twtr-tweets span a
italic: em, h6, .wp-caption-text, .recentArticles ul li a .date, #sidebar .twtr-tweets i a
font-variant:
normal: abbr, acronym, body, select, input, button, textarea, table
font-weight:
normal: address, caption, cite, code, dfn, em, th, var, h1, h2, h3, h4, h6, input, textarea, select, body, button, table, .recentArticles ul li a .date
bold: strong, h5, #nav li.current, .commentlist cite, .commentlist cite a, #sidebar ul .cat, .recentArticles ul li a
line-height:
1.231: body
normal: select, input, button, textarea, table
100%: pre, code, kbd, samp, tt
26px: h2
/* ************************************************************************* */
/* TEXT */
/* ************************************************************************* */
letter-spacing:
-1: h2
text-align:
left: caption, th, #page, .skip, .txt_l, #wp-calendar #prev a, .txtL, .data .txtL td, .data .txtL th
center: .narrowcolumn .postmetadata, #headerimg .description, #wp-calendar caption, .widecolumn .smallattachment, .widecolumn .attachment, #footer p, .txt_c, .entry form, .nocomments, #wp-calendar td, .txtC, .data .txtC td, .data .txtC th, .data thead th
right: blockquote cite, .txt_r, .searchform, #wp-calendar #next a, .txtR, .data .txtR td, .data .txtR th
justify: .commentlist
text-decoration:
none: #nav a, h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description, h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite, a, #wp-calendar a, .skip:hover, .skip:focus, .skip:active, .recentArticles ul li a
underline: a:hover, #sidebar .twtr-tweets span a:hover, #twitter_update_list span a:focus, #twitter_update_list span a:visited
text-transform:
capitalize: #wp-calendar th
uppercase: .cat a
text-indent:
-5999px: #ufo, .searchform #searchsubmit
-600em: .skip
10px: .skip:hover, .skip:focus, .skip:active
/* ************************************************************************* */
/* COLORS */
/* ************************************************************************* */
color:
#000: html, legend
#38373C: #nav li.current a, .pagetitle, #sidebar ul .cat, .no-results h2
#fff: #nav a, .skip:hover, .skip:focus, .skip:active
#38373D: body, #sidebar a:link, .wp-tag-cloud a
#e2e2e2: #footer, .data thead th
#333333: h1 a
#b85b5a: .entry p a:visited
#777: small, .nocomments, .postmetadata, blockquote, strike, .wp-caption-text
#DF2B72: a, h2, h2 a:hover, h3 a:hover, .searchform, #sidebar .twtr-tweets span a
#AE0345: a:hover, #sidebar .twtr-tweets span a:hover, #twitter_update_list span a:focus, #twitter_update_list span a:visited
#38373c: .cat a:link
#36373C: .searchform input, .recentArticles ul li a, #sidebar .twtr-tweets
transparent: .searchform #searchsubmit
#E22A72 !important: .recentArticles ul li a:hover, .recentArticles ul li a:focus
#36373C !important: .recentArticles ul li a:hover .date, .recentArticles ul li a:focus .date
#777 !important: #sidebar .twtr-tweets i a
background-color:
#FFF: html
#f2f2f2: body
#f8f8f8: .alt
#F8E6F2: .me, pre, .searchform input, #commentform input#author, #commentform input#email, #commentform input#url, #commentform textarea, .recentArticles ul li a:hover, .recentArticles ul li a:focus, #sidebar .twtr-tweets .twtr-tweet:hover, .twtr-tweets .twtr-tweet:focus
#38373c: #footer
transparent: .skip
#DF2B72: .skip:hover, .skip:focus, .skip:active
none !important: #header
#fff: .searchform input:focus, .searchform input:hover, #commentform input:hover, #commentform input:focus, #commentform textarea:hover, #commentform textarea:focus, #wp-calendar td.pad:hover
none: .searchform #searchsubmit
pink: .author_comment
#eee: .data
#e2e2e2: .data tr:nth-child(odd)
#38373D: .data thead th
/* ... continue ... */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment