/* Theme Name: Against the Grain - Fall 2012 Descripxion: A theme just for Alex Thomopoulos Author: Danny Cohen Author URI: http://dco1.com/ Version: September 15, 2012 */ @import url('ss-social/ss-social.css'); @import url('http://fonts.googleapis.com/css?family=Pompiere'); @import url('http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic'); /* Resets and Boilerplates */ * { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcapxion, 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; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* 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; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ .hide {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; } #print {display: none;} /* Site Styling */ ::-moz-selection { color:rgba(255,255,255,.8); background:#88bdb6;} ::selection { color:rgba(255,255,255,.8); background:#88bdb6;} a:link { -webkit-tap-highlight-color: #88bdb6; } /*Colors*/ .darkblue { color:#416577} .lightblue { color:#abd9d4} .golden { color:#ffc336} .darkgold { color:#e49b24} body { color:#000;} body, .recipe .serving , #commentform input , #commentform textarea , .page-navigation .recipeindex a { font-family: 'Lora', 'American Typewriter' , 'Courier', 'Courier New', serif; } h1, h2, h3, h4, h5, h6 , .main_nav { font-family: 'Pompiere', cursive; } a {color:#416577;} a:hover {color:#e49b24;} .left, .alignleft {float:left;} .right, .alignright {float:right;} #container { width:1020px; margin:0 auto;} header {margin-bottom:50px;margin-top:50px;} h1 {float:left;} h1 a { height:100px; display:block; width:259px; background: url('alex.jpg') center center no-repeat; text-indent: -9999px; overflow: hidden; } header nav {float:right; width:500px;} header nav li {display:inline; float:left;} header nav a {display:block; float:left;} header #main-nav { } header #social-nav { } .main_nav {text-transform: uppercase; font-weight: 700; } .main_nav li {padding-right:60px;} .main_nav li:last-child {padding-right:0;} .main_nav a {color:#416577; font-size:17px;} .main_nav a:hover {color:#e49b24;} .social_nav { margin:30px 0 40px;} .social_nav a { font-family:'SSSocial'; font-size:31px; text-align: center; margin-left:14px; -webkit-text-stroke: 1px transparent; color:#abd9d4;} .social_nav a:hover {color:#ffc336;} .social_nav form {width:240px; position: relative; margin-right:21px;} .social_nav label {display:none; } .social_nav input[type="search"] {padding:2% 3%; display: block; color:#abd9d4; border: thin solid #abd9d4 ; background:white; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: 'American Typewriter' , serif; font-size: 14px; background: url('search.png') 7px center no-repeat; width:205px; padding-left:26px; } nav {} nav ul {} nav li {} nav a {} .featuredpost {width:240px; height:453px; display:block; float:left; margin-right:20px; background-position: top center; background-repeat: no-repeat; display:block; position:relative; border-bottom: 1px solid #ffc336; font-family: 'Pompiere', cursive; color:#000; background-size: 100% 360px;} .featuredpost:hover { background-color:#b5b6b6; border-bottom:1px solid transparent;} .featuredpost:hover .title {color:white;} .featuredpost:hover .titlewrap {background:#b5b6b6;} .featuredpost:last-child {margin-right:0;} .featuredpost .titlewrap { position:absolute; bottom:0; width:100%; height:90px; text-align: center; vertical-align: middle; display: table; background:white; } .featuredpost .title { vertical-align: middle; display: table-cell; text-align: center; padding:0 20px; text-transform: uppercase; font-size:19px;} #main { clear:both; display:table; } #content { width:760px; float:left; margin-right:20px;} h3.searchtitle { font-size:35px; color: #416577; margin-bottom:35px; } h3.archivetitle {font-size:32px; color: #416577; margin-bottom:35px; } /* posts */ .articlemeta {display: table; width:100%; position: relative; background: rgba(255,255,255,.0); font-family: 'Pompiere', cursive; font-weight: 700; font-size: 25px; color: #416577; height: 40px; margin:4px 0;} .articlemeta .ylbr {border-top:2px solid #ffc336; width:100%; display:block; position: absolute; left:0; top:13px; z-index: 1;} .articlemeta .date, .articlemeta .tags {display: table-cell; z-index:3; position: relative; vertical-align: middle;} .articlemeta .date { text-transform: uppercase; background:white; float:left; padding-right:7px; font-size:25px; font-weight:100;} .articlemeta .tags { top : -7px; } .articlemeta .tags a.allergybadge {display:block; background-color:white; float:right; width:40px; height:40px; overflow: hidden; background-repeat:no-repeat; background-position: center center; text-indent:-9999px;} a.allergybadge[rel="dairy"] { background-image:url('allergy_badges/dairy.png'); } a.allergybadge[rel="gluten"] { background-image:url('allergy_badges/gluten.png');} a.allergybadge[rel="nut"] { background-image:url('allergy_badges/nut.png'); } a.allergybadge[rel="wheat"] { background-image:url('allergy_badges/wheat.png'); } article { color: #333; font-size: 14px; line-height: 22px;} article + article { margin-top: 150px; } article .articlecontent a {color: #416577;} article .articlecontent a:hover {color: #e49b24;} article h3.title { text-transform: uppercase; font-size: 25px; color: #000000; padding-left:30px; background: url('down_blue_arrow.png') top left no-repeat;} .page article h3.title {font-size:25px; } article img, article iframe, article embed {max-width:100%; margin: 0 auto; display:block;} .articlecontent p {text-align: justify;} .articlecontent p, .articlecontent img, .articlecontent blockquote, .articlecontent ul, .articlecontent ol {margin-bottom: 17px; position: relative;} .articlecontent ul , .articlecontent ol {margin-left:30px;} .articlecontent .aligncenter { margin:0 auto 1em; text-align: center; display: block; } .articlecontent .alignleft {float:left; margin:0 1em 1em 0;} .articlecontent .alignright {float:right; margin:0 0 1em 1em;} .recipe { background:#acd9d4; background:#f1f1f1; padding:36px 36px 8px; margin-bottom:36px; border-radius: 1px; } .printrecipe {float:right; color: #416577; font-weight:bold; text-transform: uppercase; } .recipe-title { font-size: 23px; color: #416577; text-transform: uppercase; line-height: 110%; border-bottom: 2px solid; padding-bottom: 2px;} .recipe .serving { font-size:14px; line-height:240%; text-transform: lowercase;} .recipe-content ul, .recipe-content ol {margin-left:0; padding-left:15px;} .articlecontent .recipe-ingredients { list-style: none; padding-left: 0; } /* Videos */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0;/* overflow: hidden; */ margin-bottom:40px;} .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%;} .articlefooter {border-color:#abd9d4; border-style: solid; border-top-width: 2px; border-bottom-width: 2px; text-transform: uppercase; font-family: 'Pompiere', cursive; font-size:18px; padding:12px 40px;} .articlefooter .readmore {float:left;} .articlefooter .sharebox {float:right;} .articlefooter .sharebox a {color:#abd9d4; float:left; padding:0 10px;} .articlefooter .sharebox a:hover {color:#e49b24;} .articlefooter .sharebox h6 {float:right; padding-left:78px; background:url('yellow_arrow.png') left center no-repeat; font-size:18px; margin-left:22px;} /* Comments */ .fb-comments {margin:30px auto;} h3.comments_header { border-color:#abd9d4; border-style: solid; border-top-width: 2px; border-bottom-width: 2px; text-transform: uppercase; font-family: 'Pompiere', cursive; font-size:14px; padding:12px 40px; padding-left:35px; background: url('down_blue_arrow.png') 5px center no-repeat; color: #416577; text-transform: uppercase; margin-top:14px; margin-bottom:15px;} li.comment {margin-bottom:2em;} .comment-author { text-transform: uppercase; font-family: 'Pompiere', cursive } .comment_body { font-size:11px; } .comment_body p {margin-bottom:.4em;} #comments_list {list-style:none;} #comments_list ul {list-style: none;} ul.children {padding-left:30px;} a.comment-reply-link { font-size: 10pt; color: #416577; text-transform: uppercase;} .page-navigation { font-family: 'Pompiere', cursive; font-size: 12pt; color: #416577; text-transform: uppercase;} h3#reply-title { font-family: 'Pompiere', cursive; font-size: 15px; color: #416577; text-transform: uppercase;} div#respond { margin-left:20px; } #commentform p {display: table-row; width:330px; margin-bottom:35px; clear:both; } #commentform p.comment-notes {display:none;} #commentform label { width:55px; float:left; display:table-cell; font-family: 'Pompiere', cursive; font-size: 13px; color: #416577; text-transform: uppercase;} #commentform input , #commentform textarea { color:rgba( 0,0,0,.4 ); border-radius: 1px; padding:2px; } #commentform input:focus , #commentform textarea:focus { color:#416577; } #commentform input[type="text"] { display:table-cell; border-bottom:1px solid; } #commentform textarea { border:1px solid; border-radius: 1px; margin-top:30px; padding:6px; } #commentform input[type='submit'] { margin-top:12px; border:1px solid; padding:6px 20px; font-family: 'Pompiere', cursive; text-transform: uppercase; } #commentform input[type='submit']:hover { color:#416577; } #commentform p.comment-subscription-form {display: block; margin-bottom: 0px;} #commentform p.comment-subscription-form label {display:inline; float:none;} .advertisement { background: url('ads/alxtcooks-500-2.gif') center center no-repeat; margin:75px auto; width:500px; height:90px; display:block;} /* Page Navigation */ .page-navigation {border-color:#abd9d4; border-style: solid; border-top-width: 2px; border-bottom-width: 2px; font-family: 'Pompiere', cursive; font-size: 14px; color: #416577; text-transform: uppercase; padding:12px 0px; margin:50px 0; vertical-align: middle; width:100%;} .page-navigation div { display: table-cell; width:33.000%; float:left; } .page-navigation .previouslinks a { padding-left:53px; background:url('yellow_arrow.png') left center no-repeat; padding-top:3px; float:left; } .page-navigation .nextlinks a { padding-right:53px; background:url('yellow_arrow_right.png') right center no-repeat; padding-top:3px; float:right; } .page-navigation a {display:block; vertical-align: middle;} .page-navigation .recipeindex { text-align: center; padding: 3px 1px; } .page-navigation .recipeindex a { font-size: 13px; color: #416577; text-transform: uppercase; } .single .page-navigation .recipeindex a { font-size: 13px; } /* Sidebar */ #sidebar {width:240px; float:left; font-size: 14px;} .sidebar {width:240px; margin-right:0px; float:left;} .sidebar:last-child { margin-right:0px;} .sidebar ul { list-style:none; } .sidebar a {color:#000;} .widget {width:100%; margin-bottom:20px; display:block;} .widget a:hover {color: #416577;} h2.widgettitle { background-color:#abd9d4; text-transform: uppercase; padding:27px; color: white; text-align: center; font-size: 27px; font-family: 'Pompiere', cursive; margin-bottom: 20px;} #sidebar-2 {text-align: right;} .widget ul {padding:0 13px;} .widget ul li {margin-bottom:4px;} .youtubeblock img {max-width:100%;} img#wpstats {display:none !important;} /* Recipe Index */ #recipe-index {margin-top:4%;} #recipe-index .category-item {width:48%; height:180px; background-size: cover; display:block; text-align: center; background-position: center center; float:left; background-size: cover; margin-bottom:4%;} #recipe-index .category-item:nth-child(even) {margin-left:4%;} #recipe-index .category-item h4 {background:rgba(255,255,255,.5); width:100%; height:100%; vertical-align: middle; display:table; text-align: center; text-transform: uppercase; color:#333; font-size: 26px; font-weight:900; -webkit-transition: background 0.3s ease-out; /* Safari 3.2+, Chrome */ -moz-transition: background 0.3s ease-out; /* Firefox 4-15 */ -o-transition: background 0.3s ease-out; /* Opera 10.5–12.00 */ transition: background 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */ } #recipe-index .category-item:hover h4 {background:rgba(255,255,255,0); color: #416577; } #recipe-index .category-item span.title {text-align: center; vertical-align: middle; display:table-cell; opacity:1; -webkit-transition: opacity 0.3s ease-out; /* Safari 3.2+, Chrome */ -moz-transition: opacity 0.3s ease-out; /* Firefox 4-15 */ -o-transition: opacity 0.3s ease-out; /* Opera 10.5–12.00 */ transition: opacity 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */ } #recipe-index .category-item:hover span.title {opacity:0;} /* iPad [portrait + landscape] */ @media only screen and (max-width: 1119px) { #container {width:760px;} #featuredposts .featuredpost:nth-child(3) { display:none; } #content {width:500px;} #sidebar {width: 240px; } .sidebar { margin-right:0; margin-bottom:20px;} } footer {text-align:center;padding:15px; background-color:#abd9d4; font-family: 'Pompiere', cursive; color:#fff; text-transform: uppercase; }