File: /home/mmickelson/martyknows.com/wp-content/themes/grisaille/style.css
/**
Theme Name: Grisaille
Theme URI: http://grisaille.nudge.ca/
Version: 1.5.1
Author: Nudge Design
Author URI: http://www.nudgedesign.ca
Tags: featured-images, custom-background, custom-header, custom-menu, two-columns, fixed-width, right-sidebar, gray, blue, light, sticky-post,theme-options, threaded-comments, translation-ready, editor-style
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: A classic and simple two-column design adjusted for mobile browsing. Latest post will display larger image when inserted with post thumbnail/featured image option. Twitter and Facebook links available via the theme's option page, as well as customizable menu, header image and background. It's pronounced "griz-eye".
*/
/* =======================
@font-face FONTS
======================= */
@font-face {
font-family: 'MisoRegular';
src: url('type/miso-webfont.eot');
src: url('type/miso-webfont.eot?#iefix') format('eot'),
url('type/miso-webfont.woff') format('woff'),
url('type/miso-webfont.ttf') format('truetype'),
url('type/miso-webfont.svg#webfontJN6LjXeN') format('svg');
font-weight: normal;
font-style: normal;
}
/* end-fonts */
/* Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* always force a scrollbar in non-IE */
html {
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
}
body {
line-height: 1;
font: 1em/1.4em Geneva, Verdana, sans-serif;
text-align:left;
color:#464545;
}
a {
color:#535353;
text-decoration:none;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition:color 0.2s linear;
transition:color 0.2s linear;
}
a:hover, a:active {
outline: none;
}
a:hover {
color: #F9C11A;
}
h1, h2, h3, h4, h5, h6 {font-family:MisoRegular, 'Marvel', sans-serif;}
h1 {
font-size: 3.2em;
line-height: 1em;
}
h2 {
font-size: 2.8em;
line-height: 1em;
}
h3 {
font-size: 2.4em;
line-height: 1.6em;
}
h4 {
font-size:2em;
line-height:1.4em;
}
h5 {
font-size:1.6em;
line-height:1.4em;
}
p {margin-bottom:15px;}
blockquote {
background: #FEFEFE;
font-family: MisoRegular, 'Marvel', sans-serif;
font-size: 1.4em;
line-height: 1.1em;
padding:15px;
}
blockquote p{
border-left: 3px solid #eee;
padding-left: 15px;
}
pre{
background:#fff;
border:1px solid #bbb;
padding:10px;
}
ul, ol {
padding-left: 20px;
}
#canvas {
margin:0 auto;
width:960px;
}
#header-wrap {
margin: 0 auto;
}
#header {
clear: both;
overflow: hidden;
}
/* the heading and tagline are h1 on homepage and h4 on internal */
#site-title h1 {
padding:20px 0 0 20px;
}
#site-title h1 a {
color: #334759;
font:1.75em 'Bigshot One', 'Times New roman', serif;
text-transform:uppercase;
}
/* the tagline is a span within the h1 or h4 */
#site-description {
font:1.6em Geneva, Verdana, sans-serif;
margin-bottom: 20px;
padding-left: 30px;
}
/* NAV AND SUB NAV
----------------------------*/
/* ===============
Level ONE
=============== */
#top-menu {
background: url(images/nav-top.png) repeat-x 0 0;
border-bottom: 1px solid #535353;
clear:both;
float:left;
font: 1.6em/1em MisoRegular,'Marvel', sans-serif;
padding: 14px 0 4px 15px;
position: relative;
text-transform: uppercase;
width: 945px;
z-index:2;
}
#top-menu li {
float:left;
list-style:none;
margin-right: 25px;
padding:0;
position:relative;
}
#top-menu ul li {
_top:0;
_display: inline; /*underscoreIE6 only*/
}
#top-menu li a {
display:block;
text-align:center;
}
#top-menu li a:hover {
color: #999;
text-decoration:none;
}
/* =================
Level TWO
================= */
#top-menu li ul {
display: none;
float:none;
position: absolute;
padding:0;
left: 0;
top: 100%;
width:175px;
z-index:5;
}
#top-menu li:hover > ul{
display:block;
}
#top-menu ul ul li {
background: #E6E5E6;
border: 1px solid #AEAEAE;
float: none;
line-height: 1em;
padding: 6px;
}
#top-menu ul ul li a {
display: inline-block;
padding:0;
width: 100%;
}
/* =================
Level THREE
================= */
#top-menu ul ul ul {
left: 100%;
margin:0;
top: 0;
}
/* Currently selected page nav item (and parent) if applicable */
.current_page_item a,
.current_page_parent a {
text-decoration: none;
}
.current_page_item a:hover,
.current_page_parent a:hover {
text-decoration: underline;
}
/** MAIN CONTENT
---------------------------------------- */
#primaryContent {
clear:both;
display:inline;
float: left;
margin: 30px 34px 0 0;
padding: 0;
width: 625px;
}
#primaryContent h1,
#primaryContent h2 {
margin: 10px 0 0;
padding: 0;
}
#primaryContent h1.postTitle,
#primaryContent h2.postTitle {
background:url(images/border.png) 0 0 repeat-x;
padding-top: 4px;
}
#primaryContent h1.postTitle a,
#primaryContent h2.postTitle a {
float:left;
font-size: 0.75em;
padding: 0 0 0 10px;
text-shadow: 1px 1px #FFF;
width:430px;
}
#primaryContent h1.postTitle a:hover,
#primaryContent h2.postTitle a:hover {
}
#primaryContent h3 {
}
ol#posts {
list-style: none;
margin: 0;
padding: 0;
}
.theDate, p.postMeta {
background: url("images/border.png") repeat-x 0 0;
font-size: 0.75em;
padding:10px 0 0 10px;
}
.page-title-border-bottom {
background: url("images/border.png") repeat-x 0 0;
padding-top:15px;
}
p.postMeta {
background: url("images/border.png") repeat-x 0 0;
clear: both;
padding: 0 0 5px;
}
p.postMeta small{
background: url("images/border.png") repeat-x 0 bottom;
display: block;
padding:0 0 0 10px;
}
.comments {
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: #FFF;
float: right;
margin: 10px 5px 0 0;
padding: 3px 7px;
}
p.postMeta a, .comments a {
color: #f9c11a;
}
p.postMeta a:hover, .comments a:hover {
text-decoration: underline;
}
.featured {
clear: both;
float: left;
margin-top: 40px;
position: relative;
width:615px;
}
li.type-post,
div.type-post, .type-page, .home-post, .featured {
background: #EFEEEC;
background: rgba(234, 234, 234, 0.7);
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 1px #aeaeae;
-o-box-shadow: 1px 1px #aeaeae;
-webkit-box-shadow: 1px 1px #aeaeae;
box-shadow: 1px 1px #aeaeae;
margin-bottom:30px;
padding:10px;
position:relative;
}
.home-post {
clear: both;
display: inline;
float: left;
margin: 0x 34px 0 0;
width: 615px;
}
div.post,
div.post-wrap {
font-size:14px;
margin-bottom: 20px;
}
div.post-wrap {
padding: 0 10px;
}
div.post-wrap ul,
div.post-wrap ol {
margin-bottom: 15px;
}
div.post-wrap a {
text-decoration: underline;
}
p.pages-links {
clear: both;
}
.pages-links a {
color: #F9C11A;
}
.pages-links a:hover {
color: #535353;
}
.clearfix{clear:both;}
.attachment-post-thumbnail {
text-align: left;
}
img {
background: none repeat scroll 0 0 #FFF;
border: 1px solid #E2D8BA;
height: auto;
margin: 0 5px 5px 0;
padding: 3px;
max-width: 100%;
}
img.wp-smiley{
background:none;
border:none;
margin-bottom:0;
padding:0;
}
img.attachment-following-post-thumbnails {
float:left;
margin: 0 15px 25px 0;
}
.wp-caption,
.wp-caption-text,
.gallery-caption {
color: #666666;
font-size: 90%;
line-height: 1.2em;
max-width: 100%;
text-align: center;
}
.post-link {
background: #FCFCFC;
border: 1px solid #fff;
border-width: 0 1px 1px 0;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 40px 0;
overflow: hidden;
padding: 10px;
}
.postnavigation {
margin: 0 0 20px;
text-align:center;
}
.postnavigation a {
color:#121212;
font-size: 18px;
}
.home-pagination {
float:left;
margin-top:20px;
width:615px;
}
.pagination-newer {
float:right;
}
.pagination-older {
float:left;
}
.pagination-newer a,
.pagination-older a {
background: #fcfcfc;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding:5px 10px;
}
.page-link a {
border-right: 1px solid #999;
font-size: 0.85em;
margin-right: 4px;
padding: 2px 4px;
}
li.type-post.sticky {
background: #E8E3D5;
background: rgba(232, 227, 213, 0.75);
-moz-box-shadow: 1px 1px #fff;
-o-box-shadow: 1px 1px #fff;
-webkit-box-shadow: 1px 1px #fff;
box-shadow: 1px 1px #fff;
}
div.post-wrap a.more-link,
div.post-wrap a.read_more {
background: #FFF;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-bottom:none;
color: #F9C11A;
display: inline-block;
font-size: 0.8em;
margin-top:10px;
padding: 2px 5px;
-webkit-transition: background 0.3s linear;
-moz-transition: backgroundr 0.3s linear;
-o-transition:background 0.3s linear;
transition:background 0.3s linear;
text-decoration: none;
}
div.post-wrap a:hover.more-link,
div.post-wrap a:hover.read_more{
background:#DEDCDE;
color:#fff;
-moz-box-shadow: -1px -1px #aeaeae;
-o-box-shadow: -1px -1px #aeaeae;
-webkit-box-shadow: -1px -1px #aeaeae;
box-shadow: -1px -1px #aeaeae;
}
/* TABLES,DEFINITION LISTS */
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 30px;
width: 100%;
}
th {
border-bottom: 1px solid #AAA;
padding: 10px 10px 5px;
}
td {
border-top: 1px solid #C3C3C3;
padding: 10px;
}
td a {
color: #334759;
}
dl {
padding-bottom: 15px;
}
dt {
color: #334759;
font-weight: bold;
}
dd {
margin-bottom: 15px;
}
/* ARCHIVE TITLE
------------------------*/
#primaryContent #archives h1,
#primaryContent #archives h2 {
}
/* SIDEBAR
----------------------------*/
#secondaryContent, #secondaryHome {
background: #E6E4E2;
background: rgba(216, 216, 216, 0.4);
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 1px 0 #aeaeae;
-o-box-shadow: 1px 1px 0 #aeaeae;
-webkit-box-shadow: 1px 1px 0 #aeaeae;
box-shadow: 1px 1px 0 #aeaeae;
display:inline;
float: left;
margin-top: 30px;
padding:10px 20px;
width: 260px;
}
#secondaryContent h3{
background: #f9f6f6;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px #aeaeae;
-o-box-shadow: 1px 1px #aeaeae;
-webkit-box-shadow: 1px 1px #aeaeae;
box-shadow: 1px 1px #aeaeae;
font: 2em/1.4em MisoRegular,'Marvel', sans-serif;
margin: 5px 0;
padding-left: 15px;
text-shadow: 1px 1px #FFF;
}
#secondaryContent label {margin: 5px 0;}
#secondaryContent ul{
margin: 0 0 15px 30px;
padding-left: 0;
}
#secondaryContent li{
font-size: 1em;
line-height: 1.6em;
list-style: disc outside none;
}
#secondaryContent li a {
text-shadow:1px 1px #FFF;
}
.sidebaritem {
margin-bottom:25px;
}
fieldset,
form,
label,
input,
h2#postcomment,
h2#comments {
margin-bottom:20px;
}
h2#postcomment {
margin-top: 50px;
}
label { width:100px;}
#searchform label {
float:left;
margin-bottom:10px;
}
#footer {
clear: both;
font-size: 80%;
padding-top:100px;
text-align:center;
}
#footer p {
height:60px;
position: relative;
}
.wp-logo {
margin-left: 5px;
position: absolute;
top:0;
}
.wp-logo img{
background: none;
border:none;
margin:0;
padding:0;
}
/* normally hidden but will appear when css disabled */
.skip,
.noCss {
position: absolute;
left: -9999px;
}
/*theme requirements as per http://codex.wordpress.org/CSS*/
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
margin: 0 10px 10px 0;
}
.alignright {
float: right;
margin: 0 0 10px 10px;
}
/* SOCIAL MEDIA ICONS
----------------------- */
.social-media {
float:right;
margin:10px 0;
}
a.rss {
background:transparent url(images/social-media.png) -125px 0 no-repeat;
display:block;
float:right;
text-indent:-9999px;
width: 54px;
height:50px;
}
a.rss:hover {
background-position: -125px -58px;
}
a.twitter,
a.facebook,
a.googleplus {
background:transparent url(images/social-media.png) 0px 0 no-repeat;
display:block;
float:left;
margin-right:10px;
text-indent:-9999px;
width: 54px;
height:50px;
}
a.twitter:hover {
background-position: 0px -58px;
}
a.facebook {
background-position: -62px 0;
}
a.facebook:hover {
background-position: -62px -58px ;
}
a.googleplus {
background-position: -188px 0 ;
}
a.googleplus:hover {
background-position: -188px -58px ;
}
/* 404 PAGE
---------------------*/
.error-page {
background: #EDEDED;
background:rgba(234, 234, 234, 0.7);
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 1px 0 #aeaeae;
-o-box-shadow: 1px 1px 0 #aeaeae;
-webkit-box-shadow: 1px 1px 0 #aeaeae;
box-shadow: 1px 1px 0 #aeaeae;
padding: 60px;
}
#primaryContent .error-page h2 {
border-bottom: 1px solid #535353;
margin-bottom: 20px;
padding-bottom: 20px;
text-align: center;
}
#primaryContent .error-page h2 span {
color:#f9c11a;
font-size:2.2em;
line-height: 1em;
}
.error-page p {
margin-bottom:30px;
text-align:center;
}
.error-page dl {
margin:0 auto 10px;
text-align: center;
width:350px;
}
.error-page a {
color:#f9c11a;
font-weight: bold;
}
/* Search */
#search label,
#searchform label {
display:none;
}
#searchform{
margin: 20px auto 0;
width: 260px;
}
#s {
border: 1px solid #AEAEAE;
display: inline;
float: left;
font-size: 16px;
height: 30px;
margin-bottom: 10px;
padding-left: 5px;
width: 211px;
}
#searchform #searchBtn,
#searchsubmit,
#error-search {
-moz-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius:0 10px 10px 0;
background: url("images/search.png") no-repeat 3px 3px #f9c11a;
border:none;
cursor:pointer;
height: 34px;
margin-top: 0;
padding: 5px;
text-indent: -9999px;
text-transform: capitalize;
width: 36px;
}
/* COMMENTS & COMMENT FORM
------------------------------- */
#reply-title {
line-height:2em;
}
.required {
color:#CC4D22;
}
.form-allowed-tags {
display:none;
}
.comment-notes {
font-size:12px;
margin:0 0 30px;
}
#commentlist p {
font-size: 13px;
margin: 15px 0 0 20px;
}
#commentlist {padding-left:0;}
#commentlist li.comment,
#commentlist li.trackback,
#commentlist li.pingback {
background: #EFEEEC;
background: rgba(234, 234, 234, 0.4);
border: 1px solid #D5CBB9;
border-color: #fff #ccc #ccc #fff;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
list-style:none;
padding:10px;
}
#commentlist li.trackback {
background: #fff;
}
#commentlist li.even {
background: #f9f8f2;
background: rgba(234, 234, 234, 0.8);
}
#commentlist li.byuser {
background: #A1A9B1;
background: rgba(51, 71, 89, 0.4);
}
#commentlist li.bypostauthor {
background: #fff;
}
#commentlist li.comment ul,
#commentlist li.comment ol {
margin-left:20px;
}
.says {display:none;}
.comment-form-comment label {
display:none;
}
#commentform label {
line-height: 1.7em;
padding-right: 15px;
text-align: right;
width: 6em;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label{
float: left;
}
#commentform input {
border:1px solid #D5CBB9;
height: 22px;
margin-left:50px;
}
#commentform input#url {
margin-left: 58px;
}
#comment {
background: #E6E5E6;
border:1px solid #fff;
border-color: #CCC #FFF #FFF #CCC;
width: 500px;
}
.comment-meta,
#commentlist cite {
color:#444;
font-size:14px;
}
#commentform input#submit,
a#cancel-comment-reply-link {
background: #f9c11a;
border:0 none;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
color:#FFF;
cursor:pointer;
font-size:12px;
font-weight:normal;
height:100%;
margin:10px 0 0 0;
padding:10px;
text-transform:uppercase;
}
a#cancel-comment-reply-link {
font-size: 14px;
}
#commentform input:hover#submit {
background: #E6E5E6;
}
.comments-off {
font-size: 18px;
margin-top: 15px;
}
.reply a {
color:#f9c11a;
display:block;
height:1.5em;
text-align:center;
width:75px;
}
.reply a:hover {
color:#535353;
}
.avatar {
float:left;
margin-right:20px;
}
/* CALENDAR
----------------------*/
#calendar_wrap {
background: #f9f8f2;
background: rgba(255, 255, 255, 0.4);
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 1px #aeaeae;
-o-box-shadow: 1px 1px #aeaeae;
-webkit-box-shadow: 1px 1px #aeaeae;
box-shadow: 1px 1px #aeaeae;
text-align:center;
}
#wp-calendar {
padding:3px 5px;
margin:0 auto;
}
#wp-calendar tbody td {
background: #FEFDFD;
background: rgba(255, 255, 255, 0.9);
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px #aeaeae;
-o-box-shadow: 1px 1px #aeaeae;
-webkit-box-shadow: 1px 1px #aeaeae;
box-shadow: 1px 1px #aeaeae;
padding:2px;
}
#wp-calendar tbody td.pad {
background:none;
-moz-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow:none;
}
/*
* Media queries for responsive design
* These follow after primary styles so they will successfully override.
*/
@media (max-width: 800px) {
#canvas{
padding: 10px;
width: auto;
}
#top-menu {
margin: 0 auto 20px;
width: 95%;
}
#site-title h1,
#site-description {
padding-left: 0;
text-align: center;
}
#header #site-title h1 a {
font-size: 1.3em;
}
#site-description {
margin-bottom: 10px;
padding-left: 0;
}
#primaryContent{
display: block;
float: none;
margin-right: 0;
width: auto;
}
.home-post {
display: block;
float: none;
width: auto;
}
.home-pagination {
width: 100%;
}
#secondaryContent {display:none;}
}
@media screen and (max-device-width: 480px) {
#canvas {
width: auto;
}
#header {
height: auto !important;
padding:10px;
width: auto;
}
.social-media {
display: none;
}
#header #site-title {
margin-bottom: 0;
}
#site-title h1 {
padding: 0;
}
#header #site-title h1 a{
font-size: 50px;
margin: 0;
padding: 0;
}
#site-description {
font-size: 20px;
}
#top-menu {
font-size: 1.4em;
padding: 20px 5px 5px;
}
#top-menu li {
margin:0 10px 0 0;
padding: 0;
width: auto;
}
#primaryContent{
float: none;
margin-left: 0;
padding: 5px;
width: 100%;
}
#primaryContent h1.postTitle a, #primaryContent h2.postTitle a {
width: auto;
}
li.type-post,
div.type-post,
.type-page,
.home-post,
.featured {
background: #EFEEEC;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.home-post,
.home-pagination {
float: none;
width: inherit;
}
#primaryContent h1.postTitle, #primaryContent h2.postTitle {
clear: both;
}
#primaryContent h1.postTitle a,
#primaryContent h2.postTitle a {
line-height: 1em;
width:80%;
}
img.attachment-following-post-thumbnails {
float:none;
margin: 0 auto;
}
div.post {
text-align: center;
}
div.post p {
padding: 5px 10px;
text-align: left;
}
#secondaryContent {display:none;}
img {
height: auto;
max-width: 90%;
}
#respond {
padding: 0 10px;
}
h2#comments {
font-size: 1.6em;
}
#commentform label {
float: none;
line-height: 1em;
padding-right: 0;
text-align: center;
width: inherit;
}
#comment {
width: 100%;
}
label, input {
margin-bottom: 10px;
}
#footer {
display: none;
}
}
@media screen and (max-device-width: 480px) and (orientation:landscape) {
div.post p{
font-size: 0.7em;
line-height: 1.6em;
}
a.more-link {
font-size: 1.2em;
}
}
/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; } /* Don't show links for images */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}