/* Theme Name: OverOverUnder Author: Danny Cohen Author URI: http://dco1.com/ Version: August 27, 2013 */ @import url(http://fonts.googleapis.com/css?family=Raleway:100,400,700,800); @import url(http://fonts.googleapis.com/css?family=Merriweather:400,700,400italic,300italic,300,700italic); /* Resets and Boilerplates */ * { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6 {font-weight:normal;} a {text-decoration:none; outline: none;} a:hover, a:active { outline: 0; } a:focus { outline: thin dotted;} img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } b, strong {font-weight:bold;} figure { margin: 0; } /* FORMS */ label { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Remove inner padding and border in FF3/4: h5bp.com/l */ textarea { overflow: auto; vertical-align: top; resize: vertical;} .hide , .hidden {display:none !important; visibility: hidden;} hr.foot {border:0px;clear: both;display: block; overflow: hidden;visibility: hidden;width: 0px; margin:0;padding:0; height: 0px;} /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Site Styling */ ::-moz-selection { color:rgba(255,255,255,.8); background:#ffee0a;} ::selection { color:rgba(255,255,255,.8); background:#ffee0a;} a:link { -webkit-tap-highlight-color: #ffee0a; } html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; color:#333; margin:60px 20px 60px; -webkit-text-stroke: 1px transparent; font-family:'Merriweather', 'Palatino', 'Georgia', serif;} h1, h2, h3, h4, h5, h6 {font-family:'Raleway';} a {color:#5d908c} a:hover {color:#476f6b} .alignleft, .left {float:left} .alignright, .right {float:right;} #container, header, footer { margin:0 auto; width:960px; } header {margin-bottom:40px;} h1 {margin-bottom:20px; line-height:4em; padding:20px; background:#ffee0a; width:260px;border-radius:2px; overflow:hidden; } h1 a {border:5px white solid; background:#c2eae9; background:#ffee0a; font-weight:900; color:#f62b30; font-size:42px; padding:30px 20px; text-shadow:0px -1px 0px rgba(255,255,255,.3); display:block; width:210px; margin:0 auto; text-align:center; line-height:46px; border-radius:5px;} h1 a span {color:#700f12; display:block; font-size:64px; } h1 a:hover span { color:#fff; } h1 a:hover {background:#f62b30; color:#fff; } #container {display:table; margin-bottom:2em; background:white;} #container section {display:table-cell; float:left; background:white; position: relative;} section#sidebar { width:300px; margin-right:40px; position:relative;} section#main {z-index:10; width:620px; } article {clear:both; font-size:14px; line-height:170%; max-width:100%; margin-bottom:4em; color:#333; } .article-head {margin-bottom:1.5em;} .article-date {color:#5d908c; font-size:11px; font-weight:600; text-transform:uppercase; } .article-title {font-size:28px; line-height:30px; margin-bottom:.25em; color:#f62b30; -ms-word-wrap: break-word; word-wrap: break-word;} .article-title a {color: inherit;} .article-byline { color:#7c7c7c; font-size:11px; font-weight:600; margin-bottom:.5em; text-transform:uppercase; font-style:normal; font-family:'Raleway';} .article-byline a {color:inherit;} .article-byline:before {content:'by '; text-transform:lowercase; font-style:italic; font-family: 'Merriweather', 'Georgia', serif; color:inherit;} .original-feature-link { text-align: center; display: block; font-weight: 100; font-size:80%; } .original-feature-link span {background: #ffee0a; color: #333; padding: 6px 8px; border-radius: 3px; text-shadow: 0px 1px 0px rgba(0,0,0,.1); } .original-feature-link span:hover {background: #5d908c; color:white;} .article-thumb { max-width:100%; display:block; margin:0 auto .7em; } .article-thumb img {max-width:100%; margin-bottom:.5em; border-radius:2px;} body.single .article-thumb img {cursor: pointer;} .article-thumb figcaption {text-align:right; font-size:11px; margin-top:5px; color:#7c7c7c; font-style:italic;} .article-content a:hover, .article-foot a:hover {text-decoration: underline;} .article-content {-ms-word-wrap: break-word; word-wrap: break-word;} .article-content img, .article-content p, .article-content ul, .article-content ol, .article-content dl , .article-content iframe {margin-bottom:1em;} .article-content iframe {margin:0 auto 1em !important; display: block;} .article-content ul, .article-content ol {padding-left:20px;} .article-content p {text-align: justify;} .article-content small {font-size:90%; font-family: 'Raleway';} .article-content blockquote {border-left:3px solid #b4b4b4; padding-left:1em; font-size:120%; line-height:180%; color:#444; text-align: left;} .article-content blockquote p {text-align: left;} .article-content h4 {font-weight:bold; font-size:22px; margin-bottom:1em; margin-top:1em;} /*Figures, Captions and Images */ .article-content img, .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } .article-content .alignleft {margin:0 1em 1em 0;} .article-content .alignright {margin:0 0 1em 1em;} .article-content figure.wp-caption { border-radius:2px; overflow: hidden; margin-bottom:1em;} .article-content figure.wp-caption.alignleft, .article-content figure.wp-caption.alignright { background:#e9e9e9;} .article-content figure.wp-caption.alignnone {margin:0 auto 1em; display: block;} .article-content figure.wp-caption img {margin-bottom:0em;} .article-content img.alignnone.size-full {width: 100%;} .article-content figcaption.wp-caption-text {font-size:90%; font-size:11px; color:#7c7c7c; font-style:italic; text-align: right;} .article-content figure.wp-caption.alignleft figcaption.wp-caption-text, .article-content figure.wp-caption.alignright figcaption.wp-caption-text { padding:.5em; } .more-link {text-transform:uppercase; font-weight:700; font-size:90%; color:#f62b30;margin-top:-.5em; display: block;} .more-link span { border-bottom:2px solid; } .article-content .more-link:hover {opacity:.5; text-decoration: none;} /* .read-more:before {content:"[";} .read-more:after {content:"]";} */ article.format-standard {} article.format-standard .article-date {text-align:center; letter-spacing:5px; font-weight:900; font-size:13px; text-transform:uppercase; margin-bottom:.5em;} article.format-standard .article-title {text-align:center; letter-spacing:8px; font-weight:900; font-size:24px; text-transform:uppercase; line-height: 36px;} article.format-standard .article-title a {border-bottom:0px solid; color:inherit;} article.format-standard .article-title a:hover {color:#c52c2f;} article.format-standard .article-byline {text-align:center; letter-spacing:5px; font-weight:600; font-size:15px; display:block;} article.format-standard .article-byline a:hover {color:#535353;} article.format-standard .article-thumb img {margin:0 auto; display: block;} /*article.format-link {padding:.5em 1.5em 2em; background:transparent; font-size:13px; border:0px solid #f62b30; border-radius:2px; background: #ffee0a; } .article-source { color:#666; padding:5px 0; display:block; font-size:90%; font-weight:bold;} .article-source a {color:inherit; border-bottom:2px solid;} article.format-link .article-thumb {max-width:33%; float:left; margin-right:3%; margin-bottom: 0;} article.format-link .article-title {font-size:22px; line-height:20px;} article.format-link .article-date {float:right; padding:5px 0; font-size:90%; } .article-source, article.format-link .article-thumb,article.format-link .article-title , article.format-link .article-date, article.format-link .article-byline { color:#333; } */ article.format-link {background-size: cover; border-radius: 2px; overflow: hidden; color:white; text-shadow: 0px 0px 2px rgba(113,15,18,0.99), 0px 2px 0px rgba(113,15,18,0.75); text-align: center;} .format-link-wrapper { background: rgba(255,255,255,.6);-webkit-backface-visibility: hidden; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.5); box-shadow: inset 0 0 100px rgba(0,0,0,0.5); padding:5em 0 3em; background: -moz-linear-gradient(45deg, rgba(246,43,48,0.7) 0%, rgba(246,43,48,0.7) 1%, rgba(255,238,10,0.7) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(246,43,48,0.7)), color-stop(1%,rgba(246,43,48,0.7)), color-stop(100%,rgba(255,238,10,0.7))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(246,43,48,0.7) 0%,rgba(246,43,48,0.7) 1%,rgba(255,238,10,0.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(246,43,48,0.7) 0%,rgba(246,43,48,0.7) 1%,rgba(255,238,10,0.7) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(246,43,48,0.7) 0%,rgba(246,43,48,0.7) 1%,rgba(255,238,10,0.7) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(246,43,48,0.7) 0%,rgba(246,43,48,0.7) 1%,rgba(255,238,10,0.7) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ef62b30', endColorstr='#99ffee0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } [data-source="la-weekly"] article.format-link { text-shadow: 0px 0px 2px rgba(25,50,132,0.99), 0px 2px 0px rgba(25,50,132,0.75) } [data-source="la-weekly"] .format-link-wrapper { background: -moz-linear-gradient(45deg, rgba(246,43,48,0.7) 0%, rgba(41,89,245,0.7) 1%, rgba(255,238,10,0.7) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(246,43,48,0.7)), color-stop(1%,rgba(41,89,245,0.7)), color-stop(100%,rgba(255,238,10,0.7) ) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(246,43,48,0.7) 0%, rgba(41,89,245,0.7) 1%, rgba(255,238,10,0.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(246,43,48,0.7) 0%, rgba(41,89,245,0.7) 1%, rgba(255,238,10,0.7) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(246,43,48,0.7) 0%, rgba(41,89,245,0.7) 1%, rgba(255,238,10,0.7) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(246,43,48,0.7) 0%, rgba(41,89,245,0.7) 1%, rgba(255,238,10,0.7) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ef62b30', endColorstr='#99ffee0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } article.format-link:hover .format-link-wrapper{ opacity:.4; } article.format-link:hover .format-link-wrapper-NOTUSED { background: -moz-linear-gradient(45deg, rgba(246,43,48,0.2) 0%, rgba(246,45,48,0.2) 1%, rgba(255,238,10,0.3) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(246,43,48,0.2)), color-stop(1%,rgba(246,45,48,0.2)), color-stop(100%,rgba(255,238,10,0.3))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(246,43,48,0.2) 0%,rgba(246,45,48,0.2) 1%,rgba(255,238,10,0.3) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(246,43,48,0.2) 0%,rgba(246,45,48,0.2) 1%,rgba(255,238,10,0.3) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(246,43,48,0.2) 0%,rgba(246,45,48,0.2) 1%,rgba(255,238,10,0.3) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(246,43,48,0.2) 0%,rgba(246,45,48,0.2) 1%,rgba(255,238,10,0.3) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ef62b30', endColorstr='#99ffee0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } article.format-link .article-date {font-size:13px; margin-bottom:1em; color:#fff;} article.format-link .article-title {letter-spacing:8px; font-weight:700; font-size:28px; line-height:145%; padding:0 2em;} article.format-link .article-byline {font-size:13px;} .article-source a {color:inherit;} .article-source, article.format-link .article-thumb,article.format-link .article-title , article.format-link .article-date, article.format-link .article-byline { color:#fff; } article.format-link .article-content { font-weight:bold;padding: 1em 1em 0; font-size: 19px; line-height: 145%; color:white;} article.format-link .article-content .tags a {color:white;} article.format-gallery {padding:0; background:#f7f7f7; font-size:13px; border-radius:2px; overflow:hidden;} article.format-gallery .article-head{ padding:0em 1.5em .5em; margin-bottom: 0;} article.format-gallery .article-thumb {max-width:200%; width:620px; margin-left:-1.5em; } article.format-gallery .article-date { float:left; line-height: 12px;} article.format-gallery .article-byline { float:right; line-height: 12px; } article.format-gallery .article-title { clear:both; font-size:32px; padding-top:.5em; margin-bottom:.5em; line-height: 120%;} article.format-gallery .article-content {padding:0em 1.5em 0em; margin-bottom: 0;} article.format-gallery p {font-size:120%; line-height:160%;} article.format-gallery .tiled-gallery {width:100%; margin:2px auto 1.5em; border-radius:2px; overflow: hidden;} article.format-gallery .tiled-gallery .gallery-row {margin:0 auto; display:block;} article.format-gallery .original-feature-link {margin-bottom: 10px;} article.format-video {border-radius: 2px; overflow: hidden; background:#363333; } article.format-video iframe {display: block; } article.format-video .article-head {padding:0em 1.5em 0em; text-align: center; text-shadow: 0px 1px 0px rgba(0,0,0,.3); } article.format-video .article-title {color:white; font-weight:800; font-style: italic; font-size: 180%; padding-top:.75em; color:#ffee0a;} article.format-video .article-date , article.format-video .article-byline {display: none;} article.format-video .article-date a { color:hsl(56, 100%, 32%); } article.format-video .article-byline { color:hsl(56, 100%, 32%);} article.format-video .article-footer {display: none;} .article-footer .tags {font-family: 'Raleway'; margin-top:1em;} article.format-gallery .article-footer .tags {padding: 0em 1.5em .5em;} .article-footer .tags .genericon {padding-right:1px; text-transform: uppercase; font-size: 20px; color:#f62b30;} .article-footer .tags a {padding-left:3px; color:#f62b30;} .article-footer .tags a:hover {text-decoration: underline;} .author-card {padding:1em 0; border-top:2px solid #f62b30; border-bottom:2px solid #f62b30; padding:10px; line-height: 30px; border:3px solid #333; margin-bottom:1em; } .author-card .author-card-name {font-size: 28px; line-height: 22px; vertical-align: top; margin-bottom: .5em; font-weight: 100;} .author-card .author-card-name {text-transform: uppercase; font-size:22px; font-weight: bold; } .author-card .author-card-thumb {float:left; margin-right:1em; display: block;} .author-card .author-card-bio { font-size:15px; line-height: 22px;} /* Archive and Blog Traversal */ .post-nav {clear:both; text-align: center; width: 50%; display: table; margin: 0 auto;} .post-nav a {display:table-cell; color:#f62b30; width: 44%; padding:3%;} .post-nav a:hover {opacity: .6;} /* .post-nav a[rel="previous"] {text-align: right;} .post-nav a[rel="next"] {text-align: left;} */ .pagetitle {text-transform: uppercase; font-size:22px; font-weight: bold; text-align: center; padding:10px; line-height: 30px; border:3px solid; margin-bottom:1em; letter-spacing: 2px;} /*Page*/ body.page article {font-size:16px;} body.page .article-byline {display: none;} body.page .article-date {display: none;} body.page .article-title {font-size: 38px;line-height: 42px;} body.author .author-card { } body.author .author-card-name {text-transform: uppercase; font-size:22px; font-weight: bold; letter-spacing: 2px;} body.author .author-card-bio { font-size:15px; line-height: 22px;} #photos-by-author {color:#fff; background: #544d4d; padding:10px 0; overflow: hidden; margin-bottom: 1em; color:#333; background:transparent; } article + #posts-by-author {border-top:2px solid #333;} #photos-by-author h4 {height:100%; vertical-align: middle; line-height: 160%; font-weight: 900; text-align: center; font-size:24px; margin-bottom: .5em; word-spacing: 3px;} #photos-by-author p.attachment {display: none;} #photos-by-author .tiled-gallery {width:100%; margin:2px auto 1.5em; border-radius:2px; overflow: hidden;} /* Attachment Page */ body.attachment section#main {width:100%; margin: 0 auto;} body.attachment section#main img {width: 100%; height: auto;} body.attachment section#main article {margin-bottom: 0;} body.attachment .attachment-parent-link { font-style: italic; font-weight:700; font-size:120%;} body.attachment .article-footer {position: relative;} body.attachment .article-footer h1 {float:left; -webkit-transform: scale(.6); -moz-transform: scale(.6); margin:-5% 0 0 -6.3%; position: relative;} body.attachment .article-footer h3 { font-size: 36px;} body.attachment .article-footer h4 {font-size: 14px;} body.attachment .article-footer h3, body.attachment .article-footer h4 {float:right; text-align: right; clear: right;} /*Sidebar*/ .sidebar-box {display:block;margin-bottom:2em; font-size:15px;} .sidebar-title {font-size:18px; font-weight:bold;} #tweets .genericon-twitter {font-size:22px; padding-right:5px;} .tweet {font-size:13px; padding:1em 0;border-bottom:thin solid #bbbbbb;} .tweet:last-child {border-bottom: none;} .tweet-time {display:block; font-size:80%; margin-top:.5em; font-weight:bold; text-transform:uppercase; font-family:'Raleway'; text-align: right;} .retweet-badge {font-size:85%; font-family:'Raleway'; color:white; background:#bbbbbb; border-radius: 4px; padding:1px 3px; vertical-align: baseline; text-shadow:0px 1px 0px rgba(0,0,0,.3); border-bottom:thin solid rgba(0,0,0,.1); } #instagram .genericon-instagram {font-size:22px; padding-right:5px;} .instagramitem {width:48%;float:left;margin:1%;} .instagramitem img {max-width: 100%;} .instagramitem .date {display:none; font-size:80%; margin-top:.5em; font-weight:bold; text-transform:uppercase; font-family:'Raleway'; text-align: right;} .sidebar-box#about {position: fixed; background:rgba(255,255,255,.8); padding-bottom: 10px;} #about p {text-align: center; font-weight: bold; font-size: 18px; font-family:"Raleway";} #category-list { margin-top: 268px;} #category-list ul {list-style:none; border-radius:0px; overflow:hidden;} #category-list li {display:inline; float:left; width:50%;} #category-list a {display:block; text-align:center; padding:5px; line-height:240%; font-family:'Raleway'; font-weight:900; color:white; background:red; text-transform:uppercase; letter-spacing:1px; border:thin white solid; background:#f62b30;} #category-list a:hover , #category-list .current-menu-item a {background:#ffee0a; color:#700f12;} #top-link {text-align: center; display: table; width:300px; opacity: 0; position: fixed; margin-top: 10px; pointer-events: none;} #top-link div {text-align: center; font-size: 38px; opacity: 1; display: table-cell; vertical-align: middle;} #top-link.active {opacity:1; pointer-events: all;} /*Footer*/ footer {margin:3em auto 50px; border-top:thin solid #eeeeee; padding-top:1.5em; position:relative; bottom:0;} footer nav {} footer nav ul {text-align: center; list-style: none;} footer nav ul li {display: inline;} footer nav ul li a {font-family:'Raleway'; font-size:13px; padding:10px; text-transform: uppercase; font-weight: bold; color:#bababa;} footer nav ul li a:hover {color:#7c7c7c;} /* Forms */ form fieldset { margin: 0 0 10px 0; padding: 0 0 10px 0; } form fieldset.form-actions { margin: 0 0 0 20%; padding: 0; border: none; } form fieldset.check { padding-left: 20%; } form fieldset label { font-family:'Raleway'; float: left; width: 20%; margin: 4px 0 5px 0; font-weight: bold; } form fieldset.check label { display: inline; float: none; width: auto; font-weight: normal; } form fieldset.radio ul li label { display: inline; float: none; width: auto; font-weight: normal; } form fieldset input.form-text, form fieldset textarea { font-family:'Merriweather', 'Palatino', 'Georgia', serif; display: block; width: 50%; padding: 5px; font-size: 14px; border: 2px solid #ddd; background: #f5f5f5; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } form fieldset input.form-text:focus , form fieldset textarea:focus { border: 2px solid #ccc; background: #fff; } form fieldset textarea { height: 150px; } form fieldset select { min-width: 25%; margin: 0; } form fieldset.radio ul { margin: 5px 0 0 20%; } form fieldset.radio ul li { margin: 0 0 5px 0; } form fieldset.radio ul li:last-child { margin: 0; } form fieldset p.form-help{ margin: 5px 0 0 20%; font-size: 12px; color: #999; } form fieldset label.error { float:none; display: block; width: auto; font-weight: 500; color: #f62b30; font-size:11px; } form input[type="submit"] { font-family:'Raleway'; margin: 0; padding: 5px 10px; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; border: 2px solid #ccc; background: #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } form input[type="submit"]:hover, form input[type="submit"]:focus { border: 2px solid #bbb; background: #e5e5e5; } form input[type="submit"]:active { border: 2px solid #ccc; background: #eee; } @media screen and (max-width: 600px) { form fieldset label { display: block; float: none; width: auto; margin: 0 0 5px 0; } form fieldset.form-actions, form fieldset.check, form fieldset.radio ul, form fieldset p.form-help { margin-left: 0; padding-left: 0; } form fieldset input.form-text, form fieldset textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } /*Full Page Reading*/ #container.full-page #sidebar {opacity:0; pointer-events: none; position: absolute;} #container.full-page #main {width:100%; margin-left:0; } #container.full-page #main article {font-size:120%;} #container.full-page #main .article-title {font-size:140%;} #container.full-page #main .article-thumb {width:100% !important;} #container.full-page #main .article-thumb img {width:100%; height:auto;} /* Special Feature Page */ body.page-special-feature { background-color: #22221d; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.6)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6), rgba(0,0,0,0)); background-image: -moz-linear-gradient(top, rgba(0,0,0,.6), rgba(0,0,0,0)); background-image: -o-linear-gradient(top, rgba(0,0,0,.6), rgba(0,0,0,0)); background-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)); } body.page-special-feature section, body.page-special-feature #container, body.page-special-feature #container section, body.page-special-feature footer {background:transparent;} body.page-special-feature section {float:none; display: block; width: 100%; margin:0 auto 2em; position: relative;} body.page-special-feature section#sidebar {position: relative; width: 100%;} body.page-special-feature section#sidebar .sidebar-box {display: none;} body.page-special-feature section#sidebar .sidebar-box#about {display: block; position: relative; background: transparent; padding: 0;} body.page-special-feature section#sidebar .sidebar-box#about p {display: none;} body.page-special-feature a { color:rgba(255,255,255,.5); } body.page-special-feature h1 {background:transparent; margin:0 auto; -webkit-transform: scale(.6); -moz-transform: scale(.6); text-shadow: 0px 1px 0px rgba(0,0,0,.3); color:#f62b30; border-color:#f62b30;} body.page-special-feature h1 a {background:transparent; color:#f62b30; border-color:#f62b30;} body.page-special-feature h1 a span { color:#f62b30;} body.page-special-feature h1 a:hover, body.page-special-feature h1 a:hover span { color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.5);} body.page-special-feature section#main {margin: 0 auto; width: 100%;} body.page-special-feature article {width: 100%; font-size:120%; color:rgba(255,255,255,.8); text-shadow: 0px 1px 0px rgba(0,0,0,.3);} body.page-special-feature .article-head { text-shadow: 0px 1px 0px rgba(0,0,0,.3);} body.page-special-feature .article-thumb img {width:100%; height: auto; } body.page-special-feature article .article-date {text-align:center; letter-spacing:5px; font-weight:900; font-size:13px; text-transform:uppercase; margin-bottom:.5em;} body.page-special-feature article .article-title {text-align:center; letter-spacing:8px; font-weight:900; font-size:42px; text-transform:uppercase; line-height: 36px; margin-bottom: .5em; color:#ffee0a;} body.page-special-feature article .article-title a {border-bottom:2px solid; color:inherit;} body.page-special-feature article .article-byline {text-align:center; letter-spacing:5px; font-weight:600; font-size:15px; display:block;} body.page-special-feature article .article-thumb img {margin:0 auto; display: block;} /*Transisitons*/ .transition , #category-list a, footer nav ul li a, .more-link, article.format-link, article.format-link .format-link-wrapper { -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ -o-transition: all 0.3s ease-out; /* Opera 10.50?12.00 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ } /* Media Queries */ @media only screen and (max-width : 960px) { #container, header, footer {width: 100%; margin-left: 0; display: block;} #container section#main {width:58%;} } /* Media Queries */ @media only screen and (max-width : 850px) { body {margin-top:20px;} #container, header, footer {width: 100%; margin-left: 0; display: block;} #container section#main { margin-left: 0; width:100%; margin-top:20px; float: none; display: block;} article {font-size:120%;} .article-title {font-size:140%;} .article-thumb {width:100% !important;} .article-thumb img {width:100%; height:auto;} .article-footer .tags .genericon {font-size:26px; padding-top:2px; padding-right: 4px;} #top-link {display: none;} #container section#sidebar {width:auto; position: relative; float:none; margin:0 auto 2em; display: block; margin-left:-20px; margin-right:-20px;} #container section#sidebar #about { position: relative; padding-bottom: 0; } #about p {display: none;} #container section#sidebar #tweets, #container section#sidebar #instagram {display: none;} #container section#sidebar h1 {display:block; margin:0 auto 20px;} #container section#sidebar #category-list {display:block; width:100%; overflow-y: scroll; margin-top: 0;} #container section#sidebar #category-list ul {display: table; margin:0 auto; } #container section#sidebar #category-list li {display:table-cell; width: auto; float: none;} #container section#sidebar #category-list li a {display: block; width: auto; white-space:pre; padding-left:10px; padding-right: 10px;} } @media only screen and (max-width : 480px) { #container, header, footer { } #container section#main {} #container section#sidebar {width: 100%; margin:0 auto 20px;} #container section#sidebar h1 {display: block; margin: 0 auto; padding:10px;} #container section#sidebar #category-list {display:none; } article {font-size: 11px;} article.format-standard { font-size: 13px;} article.format-standard .article-title {font-size:15px; line-height: 28px; letter-spacing: 3px;} article.format-standard .article-date , article.format-standard .article-byline {font-size: 11px;} article.format-link .article-title {font-size:18px; font-weight:900; margin-bottom: 1em; } article.format-gallery .article-title {font-size:22px; font-weight:900;} .author-card {padding:1em 0; border-top:2px solid #f62b30; border-bottom:2px solid #f62b30; padding:10px; line-height: 30px; border:3px solid #333; margin-bottom:1em; } .author-card .author-card-name {font-size: 28px; line-height: 22px; vertical-align: top; margin-bottom: .5em; font-weight: 100;} .author-card .author-card-name {text-transform: uppercase; font-size:22px; font-weight: bold; text-align: center;} .author-card .author-card-thumb {float:none; margin:0 auto; display: block; margin-bottom:1em;} .author-card .author-card-bio { font-size:15px; line-height: 22px;} }