/* Theme Name: Canyon Theme URI: http://designcanyon.com/canyon/ Author: Steve Kamn Author URI: http://designcanyon.com/ Description: An elegant, versatile and magazine style theme with easy customization options. It features a modern design, post excerpts with thumbnails, header, background, fixed-width, widget-ready and threaded comments. Canyon theme also comes with custom Menus support and other cool features. Tested with major browsers - Mozilla Firefox, Internet Explorer, Opera, Safari and Chrome. Check Canyon Official Page in case you need directions. Version: 0.1 Tags: light, white, two-columns, right-sidebar, fixed-width, custom-background, custom-header, custom-menu, featured-images, sticky-post, theme-options, translation-ready, threaded-comments License: GNU General Public License v2.0 License URI: license.txt License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Canyon Table of Contents * * =Reset, =Body, =Skeleton * =Paragraph, =Headings, =Text Elements, =Blockquote, =Links * =List, =Table, =Form, =Search Form Widget, =Images, =General Classes, =Sidebar * =Type Post, =Entry Meta, =Loop Meta, =Paging * =Menu Primary * ------------------------ */ /** |------------------------ | =Reset default browser CSS. http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) |------------------------ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /** |------------------------ | =Body |------------------------ */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; color: #000; background: #333333; } /** |------------------------ | =Skeleton |------------------------ */ .container_main { width: 980px; background-color: #FFF; margin: 0 auto; padding: 20px 0; } #content, #sidebar { margin-top: 20px; margin-bottom: 20px; } #sidebar-inside { padding-left: 19px; padding-bottom: 40px; border-left: solid 1px #eee; } #footer { font-size: 11px; padding: 20px 0 0 0; border-top: solid 1px #eee; } #loop-meta { border-bottom: solid 1px #eee; padding-top: 30px; padding-bottom: 30px; margin-bottom: 20px; } /** |------------------------ | =Paragraph |------------------------ */ p { margin: 0 0 18px 0; } p:last-child { margin-bottom: 0; } p img { margin: 0; } /** |------------------------ | =Headings |------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", Times, serif; color: #333; clear: both; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 22px; line-height: 28px; margin-bottom: 8px; } h2 { font-size: 18px; line-height: 18px; margin-bottom: 18px; } h3 { font-size: 16px; line-height: 16px; margin-bottom: 20px; } h4 { font-size: 14px; line-height: 14px; margin-bottom: 22px; } h5 { font-size: 12px; line-height: 12px; margin-bottom: 24px; } h6 { font-size: 11px; line-height: 11px; margin-bottom: 25px; } /** |------------------------ | =Text Elements |------------------------ */ strong { font-weight: bold; } cite, em, i { font-style: italic; } small { font-size: 80%; } pre { background: #f8f8f8; color: #808080; padding: 15px 30px; overflow: auto; border: 1px solid #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: 20px; } code, kbd { color: #000; } abbr, acronym, dfn { border-bottom: 1px dotted #666; cursor: help; } address { display: block; margin: 0 0 20px 0; } ins { background: #f0f0f0; text-decoration: none; } sup, sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } /** |------------------------ | =Blockquote |------------------------ */ blockquote { font-size: 14px; line-height: 22px; padding-left: 30px; margin-bottom: 20px; margin-top: 20px; background: transparent url(images/quote.png) no-repeat top left; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote cite { color: #555; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; display: block; text-align: right; } blockquote cite a { display: block; margin: 10px 0 0 0; } /** |------------------------ | =Links |------------------------ */ a, a:visited { color: #707070; text-decoration: none; } a:hover, a:focus { color: #CB001C; } a img { border: none; } a:focus, a:hover, a:active { outline: none; } p a, p a:visited { line-height: inherit; } #footer a, #footer a:visited { color: #CB001C; text-decoration: none; } #footer a:hover { text-decoration: underline; } /** |------------------------ | =List |------------------------ */ ul, ol { margin: 0 0 18px 30px; } ul { list-style: square; } ul ul { list-style: circle; } ul ul ul { list-style: disc; } ol { list-style: decimal; } ol ol { list-style: upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; font-size: 98%; } li { /*line-height: 18px; margin-bottom: 12px;*/ } li p { /*line-height: 18px;*/ } dl { margin-bottom: 18px; } dt { font-weight: bold; } dd { margin-bottom: 18px; } /** |------------------------ | =Table |------------------------ */ table { width: 95%; margin: 0 auto 20px auto; border-collapse: collapse; } caption { font-weight: bold; margin: 0 0 5px 0; } thead, th { color: #FFF; background-color: #000; text-align: left; text-shadow: 0 1px 0 #1b1b1b; } tbody, td { background-color: #f8f8f8; } td, th { padding: 5px; border: 1px #eee solid; } /** |------------------------ | =Form |------------------------ */ input[type=text], input[type=submit], textarea { font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /** |------------------------ | =Search Form Widget |------------------------ */ .searchform { width: 278px; background: #f8f8f8; padding: 2px 0; margin: 0; overflow: auto; border: solid 1px #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .searchform .assistive-text { display: none; } .searchform input#s { width: 244px; border: 0; padding: 6px 0 6px 6px; background: #f8f8f8; color: #666; text-shadow: 0 1px 0 #fff; margin: 0; vertical-align: middle; } .searchform input#searchsubmit { width: 20px; height: 20px; background: url(images/zoom.png) no-repeat; border: 0; cursor: pointer; text-indent: -9999px; vertical-align: middle; } /** |------------------------ | =Images |------------------------ */ p img { padding: 6px; background: #fff; max-width: 100%; overflow: hidden; border: 1px solid #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img { max-width: 98%; height: auto; } img.alignleft { display: inline; float: left; margin: 20px 20px 20px 0; } img.alignright { display: inline; float: right; margin: 20px 0 20px 20px; } img.aligncenter, img.centered { display: block; margin: 20px auto 20px auto; clear: both; } img.alignnone { display: inline; margin: 20px 0; } .wp-caption { padding: 10px 5px; margin-bottom: 20px; background: #fff; border: 1px solid #d8d9d6; max-width: 98%; overflow: hidden; border: 1px solid #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .wp-caption img { display: block; margin: 0 auto; max-width: 98%; } .wp-caption .wp-caption-text { margin: 12px 12px 0 12px; font-style: italic; } .entry-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /** |------------------------ | =Gallery |------------------------ */ #content .gallery { margin: 0 auto 20px auto; } #content dl.gallery-item { margin: 0; } #content .gallery a img { border: none; } #content dl.gallery-item img { padding: 5px; margin-bottom: 10px; background: #fff; max-width: 100%; border: 1px solid #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #content .gallery-caption { margin: 0 0 10px 0; font-style: italic; } #content .gallery br+br { display:none; } #content .gallery .gallery-item { float:left; text-align:center; } #content .gallery-columns-2 .gallery-item { width: 46%; padding-right: 3%; } #content .gallery-columns-2 .gallery-item img { width: 100%; height: auto; } #content .gallery-columns-3 .gallery-item { width: 30%; padding-right: 3%; } #content .gallery-columns-3 .gallery-item img { width: 100%; height: auto; } #content .gallery-columns-4 .gallery-item { width: 21%; padding-right: 3%; } #content .gallery-columns-4 .gallery-item img { width: 100%; height: auto; } #content .gallery-columns-5 .gallery-item { width: 16%; padding-right: 3%; } #content .gallery-columns-5 .gallery-item img { width: 100%; height: auto; } /** |------------------------ | =General Classes |------------------------ */ .alignleft { display: inline; float: left; margin-right: 20px; } .alignright { display: inline; float: right; margin-left: 20px; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .sticky { } /** |------------------------ | =Sidebar |------------------------ */ #sidebar ul, #sidebar ol { margin: 0; padding: 0; list-style: none; } #sidebar ul li, #sidebar ol li { margin: -2px 0 8px 0; padding: 0 0 6px 28px; border-bottom: 1px dotted #eee; background: url(images/arrow-right.png) no-repeat 0 2px; } #sidebar ul ul li, #sidebar ol ol li { margin: 0; padding-bottom: 0; border-bottom: none; } #sidebar .widget-wrap { width: 280px; margin: 0 0 40px 0; padding: 0; } #sidebar .widget-title { font-size: 16px; line-height: 16px; margin-bottom: 16px; } #sidebar .widget_calendar .widget-title { display: none; } /** |------------------------ | =Type Post |------------------------ */ .entry-title { margin: 0 0 6px 0; padding: 0 0 10px 0; border-bottom: solid 1px #eee; } .entry-title-page { margin: 0 0 14px 0; } .entry-title a, .entry-title a:visited { color: #333; } .entry-title a:hover { color: #CB001C; } /** |------------------------ | =Entry Meta |------------------------ */ .entry-meta { font-size: 11px; margin: 0 0 14px 0; padding: 0 0 6px 0; border-bottom: solid 1px #eee; } .entry-meta-sep { color: #707070; margin: 0 5px; } .entry-meta-bottom { font-size: 11px; margin: 0 0 40px 0; } .entry-meta-featured { color: #CB001C; } /** |------------------------ | =Loop Meta |------------------------ */ .loop-meta-title { font-family: Arial, Helvetica, sans-serif; text-align: center; margin: 0; padding: 0; } .loop-meta-description { color: #707070; font-size: 11px; text-align: center; margin: 5px 0 0 0; } /** |------------------------ | =Entry Featured Image |------------------------ */ .entry-featured-image { margin: 0 0 10px 0; } .entry-image { max-width: 100%; overflow: hidden; border: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /** |------------------------ | =Entry More Link |------------------------ */ a.more-link:link, a.more-link:visited { display: block; color: #CB001C; font-style: italic; } a.more-link:hover { text-decoration: underline; } /** |------------------------ | =Author |------------------------ */ #author-info { font-size: 11px; margin: 0 0 40px 0; padding: 20px 0; border-top: solid 1px #eee; border-bottom: solid 1px #eee; } #author-avatar-inside { border-right: solid 1px #eee } #author-description h3 { margin: 0 0 8px 0; } #author-description p { margin: 0 0 4px 0; } /** |------------------------ | =Paging |------------------------ */ /* =Nav Commmon Styles ------------------------ */ #loop-nav-numeric, #loop-nav-next-prev, #loop-nav-singlular-post, #comments-nav-below { clear: both; } #loop-nav-numeric .assistive-text, #loop-nav-next-prev .assistive-text, #loop-nav-singlular-post .assistive-text, #comments-nav-below .assistive-text, .page-link .assistive-text { display: none; } #loop-nav-next-prev .loop-nav-next, #loop-nav-singlular-post .loop-nav-next, #comments-nav-below .loop-nav-next { text-align: right; } /* =Nav Comments Below ------------------------ */ #comments-nav-below { margin: 0 0 40px 0; } /* =Nav Numeric ------------------------ */ .nav-numeric a, .nav-numeric a:visited, .nav-numeric span { border-right: 1px solid #eee; padding: 0 6px 0 0; margin: 0 4px 0 0; } .nav-numeric span.current { font-weight: bold; } /* =Nav Numeric Page Links ------------------------ */ .page-link { margin: 0 0 20px 0; } .page-link span { border-right: 1px solid #eee; padding: 0 6px 0 0; margin: 0 4px 0 0; font-weight: bold; } .page-link a span { font-weight: normal; } /** |------------------------ | =Post Comments |------------------------ */ #comments { margin: 0 0 40px 0; } .page #comments { border-bottom: none; } .commentlist { list-style: none; margin: 0 auto; } .commentlist .children { list-style: none; margin: 15px auto 0 auto; } .commentlist li.comment, .commentlist li.pingback { color: #808080; background: #f8f8f8; margin: 0 0 20px 0; padding: 15px; overflow: hidden; border: 1px solid #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .commentlist li.odd { background: #fff; } .commentlist li.bypostauthor { border-bottom: 2px solid #000000; } .commentlist li.pingback p { margin: 0; } .commentlist .comment-author { position: relative; height: 75px; padding: 0 0 0 100px; } .commentlist .avatar { position: absolute; top: 0px; left: 0px; border: 1px solid #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 5px; } .commentlist .fn { display: block; margin: 0 0 5px 0; } .commentlist .edit-link { display: block; margin: 5px 0 0 0; } .commentlist .comment-awaiting-moderation { display: block; margin: 5px 0 0 0; } .nopassword, .nocomments { color: #aaa; text-align: center; } /** |------------------------ | =Footer Canyon Project |------------------------ */ .canyon-project { text-align: right; } /** |------------------------ | =Post Comments Form |------------------------ */ #respond { position: relative; color: #808080; margin: 0 0 20px 0; overflow: hidden; } .commentlist #respond { margin: 15px 0; padding: 25px 0; width: auto; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; } #respond p { margin: 0; } #reply-title { margin: 0 0 10px 0; } #cancel-comment-reply-link { color: #CB001C; display: block; font-size: 10px; font-weight: normal; line-height: 2.2em; letter-spacing: 0.05em; position: absolute; right: 1.625em; text-decoration: none; text-transform: uppercase; top: 1.1em; } #cancel-comment-reply-link:focus, #cancel-comment-reply-link:active, #cancel-comment-reply-link:hover { color: #CB001C; } #respond .comment-notes, #respond .logged-in-as { margin: 0 0 20px ; } #respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment { position: relative; } #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label { position: absolute; left: 79%; } #respond .comment-form-comment label { text-indent: -9999px; } #respond .required { color: #bd3500; } #respond .comment-form-author .required, #respond .comment-form-email .required { color: #bd3500; position: absolute; left: 86%; } #respond input[type=text] { display: block; width: 75%; height: 24px; margin: 0 0 20px 0; } #respond textarea { resize: vertical; width: 95%; } #respond input[type="text"], #respond textarea { background: #fff; border: 1px solid #d2d2d2; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 5px; text-indent: 5px; } #respond input#submit { font-size: 14px; margin: 20px 0 0 0; padding: 6px 12px; color: #dcdcdc; text-decoration: none; background-color: #1a1a1a; border: 1px solid #1a1a1a; border-radius: 2px; moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px; outline: none; } #respond input#submit:hover, #respond input#submit:active { cursor: pointer; border: 1px solid #CB001C; background-color: #CB001C; } #respond .logged-in-as a:hover, #respond #cancel-comment-reply-link:hover { text-decoration: underline; } .form-allowed-tags { display: none; } /** |------------------------ | =Menu Primary |------------------------ */ .menu1 { position: relative; z-index: 9999; background-color: #eeeeee; padding: 1px 0 0 0; } .menu1-data { background-color: #000; } .menu1 ul, .menu1 ul * { margin: 0; padding: 0; list-style: none; } .menu1 ul { margin-bottom: 0; line-height: 1.0; } .menu1 ul ul { position: absolute; top: -999em; width: 10em; } .menu1 ul ul li { width:100%; } .menu1 ul li:hover { visibility: inherit; } .menu1 ul li { float: left; position: relative; word-wrap: break-word; } .menu1 ul li li { background: none; } .menu1 ul li:hover ul, .menu1 ul li.sfHover ul { left: 0px; top: 52px; z-index: 200; } .menu1 ul li:hover li ul, .menu1 ul li.sfHover li ul { top: -999em; } .menu1 ul li li:hover ul, .menu1 ul li li.sfHover ul { left: 10em; top: 0px; } .menu1 ul li li:hover li ul, .menu1 ul li li.sfHover li ul { top: -999em; } .menu1 ul li li li:hover ul, .menu1 ul li li li.sfHover ul { left: 10em; top: 0px; } /** Top Level Anchors */ .menu1 ul a, .menu1 ul a:visited { display: block; font-size: 12px; position: relative; padding: 20px 0 20px 16px; text-decoration: none; color: #dcdcdc; /*background-color: #FFF;*/ } /** Nested Anchors */ .menu1 ul ul.sub-menu a, .menu1 ul ul.sub-menu a:visited, .menu1 ul ul.children a, .menu1 ul ul.children a:visited { font-size: 12px; padding: 12px 12px 12px 16px; border-bottom: solid #1b1b1b 1px; } .menu1 ul li { } .menu1 ul li li { background-color: #1b1b1b; opacity: 0.9; } /** Global Anchors Hover */ .menu1 ul li:hover, .menu1 ul li.sfHover, .menu1 ul a:focus, .menu1 ul a:hover, .menu1 ul a:active { color: #FFF; } /** Nested Anchors Hover */ .menu1 ul ul.sub-menu li:hover, .menu1 ul ul.sub-menu li.sfHover, .menu1 ul ul.sub-menu a:focus, .menu1 ul ul.sub-menu a:hover, .menu1 ul ul.sub-menu a:active, .menu1 ul ul.children li:hover, .menu1 ul ul.children li.sfHover, .menu1 ul ul.children a:focus, .menu1 ul ul.children a:hover, .menu1 ul ul.children a:active { /*background: #0f0d0e;*/ background: #1b1b1b; opacity: 1; } /** Menu Indicator */ .menu1 ul .sf-sub-indicator { display: inline-block; width: 7px; height: 12px; margin: 0 0 0 8px; text-indent: -9999px; background: url(images/menu-indicator-down.png) no-repeat; /*border: solid 1px red;*/ } .menu1 ul ul .sf-sub-indicator { position: absolute; width: 7px; height: 15px; top: 8px; right: 15px; text-indent: -9999px; background: url(images/menu-indicator-right.png) no-repeat; /*border: solid 1px red;*/ }