/* Theme Name: Blue with Red Author URI: http://dokupienia.pl/ Theme URI: Description: Detail oriented theme with blue modern menu and some grey and red elements. Theme has got also widgetized menu and light code. Author: Dokupienia.pl Version: 1.0 Tags: blue, red, light, two-columns, fixed-width, editor-style, sticky-post License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Reset browser styles ------------------------------------------ */ * {margin: 0; padding: 0} html {min-height: 100%; padding-bottom: 1px; overflow: scroll;} body {background: #fff; color: #575757; font: 0.75em/1.5em Arial,sans-serif; } [class] {list-style: none; padding: 0} h1, h2, h3, h4, h5, h6 {font-size: 1em} dt {font-weight: 700} table {border-collapse: collapse} img {border: none; vertical-align: middle} a, a:visited {color: #0a92cb; text-decoration: none;} a:hover {color: #000; text-decoration: none;} textarea, input, select, option, optgroup, button {font: 1em "Arial", "Helvetica", sans-serif} button, [type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="reset"], label[for], select {cursor: pointer} input, select, textarea {outline: none} fieldset {overflow: hidden; border: none;} legend {display: none;} button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"]>input[type="button"]::-moz-focus-inner {padding: 0; border: none} /* Custom fonts ------------------------------------------ */ @font-face {font-family: 'TitilliumHeavy'; src: url('fonts/titilliummaps26l-webfont.eot'); src: url('fonts/titilliummaps26l-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliummaps26l-webfont.woff') format('woff'), url('fonts/titilliummaps26l-webfont.ttf') format('truetype'), url('fonts/titilliummaps26l-webfont.svg#TitilliumMaps26L999wt') format('svg'); font-weight: normal; font-style: normal;} @font-face {font-family: 'TitilliumBold'; src: url('fonts/titilliummaps26l001-webfont.eot'); src: url('fonts/titilliummaps26l001-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliummaps26l001-webfont.woff') format('woff'), url('fonts/titilliummaps26l001-webfont.ttf') format('truetype'), url('fonts/titilliummaps26l001-webfont.svg#TitilliumMaps26L750wt') format('svg'); font-weight: normal; font-style: normal; } @font-face {font-family: 'TitilliumRegular'; src: url('fonts/titilliummaps26l002-webfont.eot'); src: url('fonts/titilliummaps26l002-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliummaps26l002-webfont.woff') format('woff'), url('fonts/titilliummaps26l002-webfont.ttf') format('truetype'), url('fonts/titilliummaps26l002-webfont.svg#TitilliumMaps26L500wt') format('svg'); font-weight: normal; font-style: normal;} /* Global Styles ------------------------------------------ */ h1 {margin: 0 0 1em; color: #000; font: normal 2em TitilliumRegular,sans-serif;} h2 {margin: 1em 0 0.5em; color: #000; font: normal 1.5em TitilliumRegular,sans-serif;} h3 {margin: 1em 0; font: normal 1.333em TitilliumRegular,sans-serif;} h4 {margin: 1em 0; color: #555; font: normal 1.167em TitilliumRegular,sans-serif;} h1 a, h2 a, h3 a, h4 a, {font-family: TitilliumRegular,sans-serif;} blockquote {margin: 1.5em 0; padding: 10px 20px; border: 1px solid #bed5e1; background: #fafafa; font-style: italic;} sub, sup {line-height: 1em;} ul li, ol li {margin: 5px 20px;} dl {overflow: hidden; margin: 1em 0; } dt {float: left; clear: left; width: 150px; margin: 0 0 1em; padding: 0; font-weight: bold;} dd {width: 500px; margin: 0 0 1em 150px; } p {margin: 1em 0;} table {margin: 1em auto; border: 1px solid #d9d9d9;} table th, table th[class] {padding: 5px 10px; border: 1px solid #d9d9d9; background: #eef4f8;} table td, table td[class] {padding: 5px 10px; border: 1px solid #d9d9d9;} table tr.alternate td {background: #f8f8f8;} form, form[class] {margin: 1.5em 0; padding: 20px; border: 1px solid #bed5e1; background: #f8f8f8;;} fieldset {border: none;} legend {display: none;} label {display: block; float: left; clear: left; width: 150px; margin: 5px 0;} input, textarea, select {width: 275px; margin: 5px 0; padding: 5px; border: 1px solid #c0d2dc; background: #fff; color: #616161;} input[type="radio"], input[type="checkbox"] {width: auto; border: none;} textarea {width: 95%; max-width: 95%; height: 100px;} select option {padding: 0 5px; } span.required {padding: 0 5px; color: #d40000; font-weight: bold; font-size: 1.333em;} p.form-submit, p.form-allowed-tags {margin-left: 150px;} button, input[type="submit"] {width: auto; height: 23px; padding: 0 10px; border: 1px solid #fff; background: #c81414 url("images/button-bg.png") 0 0 repeat-x; color: #fff; font: normal 1em/23px TitilliumHeavy,sans-serif; cursor: pointer;} /* Main Layout ------------------------------------------ */ html {background: #fff;} .header {background: #e9e9e9 url("images/header.png") top repeat-x;} .header>div {overflow: hidden; width: 960px; margin: 0 auto; padding-bottom: 20px;} .header p.logo {float: left; max-width: 500px; margin: 20px 0 0; padding: 0; color: #000; font: normal 2.083em TitilliumRegular,sans-serif; } .header p.logo a {color: #000; font-family: TitilliumRegular,sans-serif; text-decoration: none;} .header p.logo img {margin: 0 15px 0 0; vertical-align: middle;} .header p.tagline {float: left; clear: left; max-width: 500px; margin: 0; color: #555; font-family: TitilliumRegular, sans-serif; font-size: 1.167em;} .header form {float: right; width: 351px; height: 25px; margin: 20px 0 0; padding: 8px 0; border: none; background: url("images/search.png") 0 0 no-repeat;} .header form fieldset {margin: 0; padding: 0;} .header form input {width: 277px; margin: 0 2px 0 15px; padding: 4px 10px; border: none; background: transparent; color: #616161; font: normal 1.25em TitilliumRegular,sans-serif; vertical-align: middle;} .header form button {overflow: hidden; width: 27px; height: 25px; margin: -1px 0 0 0; padding: 0; background: url("images/button-search.png") 0 0 no-repeat; line-height: 23px; text-indent: -500px; vertical-align: middle;} .root {background: url("images/nav-bg.png") top repeat-x;} .nav {position: relative; z-index: 100; top: -5px; width: 960px; min-height: 32px; margin: 0 auto; padding: 1px 0; background: #34a5d5 url("images/mm.png") bottom repeat-x; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);} .nav>div {margin: 0 1px; border: 1px solid #90cee7;} .nav ul.menu {margin: 0; padding: 0; list-style: none;} .nav ul.menu>li {position: relative; overflow: hidden; float: left; margin: -2px 0; padding: 0; } .nav ul.menu>li:hover {overflow: visible; z-index: 50;} .nav ul.menu>li>a {float: left; height: 35px; padding: 0 15px; background: url("images/mm-hover.png") center -50px no-repeat; color: #fff; font: normal 1.25em/35px TitilliumBold,sans-serif;} .nav ul.menu>li>a:hover, .nav ul.menu>li:hover>a, .nav ul.menu>li.current-menu-item>a, .nav ul.menu>li.current_page_item>a {background-position: center top;} .nav ul.menu>li ul {position: absolute; left: 0; top: 35px; list-style: none; width: 190px; margin: 0; background: #7dc5e4;} .nav ul.menu>li ul li {position: relative; overflow: hidden; margin: 0; padding: 0;} .nav ul.menu>li ul li:hover {overflow: visible;} .nav ul.menu>li ul li a {display: block; height: auto; padding: 6px 15px; border-bottom: 1px solid #b6dff0; color: #fff; line-height: 1.2em;} .nav ul.menu>li ul li a:hover, .nav ul.menu>li ul li:hover>a {background: #d2edf8; color: #35658f;} .nav ul.menu>li ul li ul {left: 190px; top: 0;} .content {overflow: hidden; width: 960px; margin: 0 auto; padding: 1px 0 40px;} .main {float: left; width: 640px; padding-top: 30px;} .sidebar {float: right; width: 282px; padding-top: 30px; } .footer {overflow: hidden; margin: 0 auto; padding: 18px 0 12px; background: #fff url("images/footer.png") top repeat-x; } .footer p {text-align: center;} .footer ul {text-align: center;} .footer ul li {display: inline; margin: 0; padding: 0; border-left: 1px solid #999;} .footer ul li:first-child {border-left: none;} .footer ul li a {display: inline; padding: 0 10px;} /* post styles ------------------------------------------ */ div.post, div.page {clear: both; overflow: hidden; margin: 0; padding: 15px 0; border-bottom: 1px solid #0a92cb; } div.post h2, div.page h2 {margin-top: 0; font-family: TitilliumRegular,sans-serif;} div.post h2 a, div.page h2 a {color: #000; font-family: TitilliumRegular,sans-serif;} div.post h2 a:hover, div.page h2 a:hover {color: #c81414;} div.post.sticky {padding: 15px; background: #f5f5f5;} p.post-meta {margin: -10px 0 0 -10px; padding: 0 5px; color: #8e8e8e; line-height: 22px;} h1+p.post-meta {margin-top: -20px;} p.post-meta span {padding: 3px 0 3px 30px; background: url("images/icons.png") no-repeat; color: #999; line-height: 20px;} p.post-meta span.date {background-position: 5px 0;} p.post-meta span.author {background-position: 5px -20px;} p.post-meta span.cats {background-position: 5px -40px;} p.post-meta span.comments {background-position: 5px -60px;} p.post-meta a {color: #0a92cb;} p.post-meta a:hover {color: #000; text-decoration: none;} p.tags {float: left; clear: none; margin-top: 0.5em; margin-bottom: 5px; padding: 0 10px 0 0; color: #8e8e8e; font-size: 0.917em; line-height: 22px;} p.tags span {padding: 3px 0 3px 25px; background: url("images/icons.png") 0 -80px no-repeat; color: #888;} p.tags a {color: #0a92cb;} p.tags a:hover {color: #000; text-decoration: none;} p.more {float: right; margin-top: 0.5em; padding-left: 20px; } p.more a {float: right; overflow: hidden; width: 24px; height: 20px; padding: 0; background: url("images/icons.png") 0 -100px no-repeat; text-indent: -90em;} .post img.attachment-post-thumbnail {float: left; margin: 10px 10px 10px 0;} /* sidebar ------------------------------------------ */ .widget select {width: 270px; margin: 5px 0;} .sidebar ul {list-style: none; margin: 0; padding: 0;} .widget {margin-bottom: 25px; padding: 0 15px 15px;} .widget h3 {position: relative; z-index: 5; margin: 0 -15px; padding-left: 15px; background: url("images/box-header.png") 0 0 no-repeat; color: #fff; font: normal 1.25em/28px TitilliumHeavy,sans-serif; text-shadow: #0a648a 0 0 2px;} .widget {padding-bottom: 20px; background: url("images/widget-bg.png") center bottom no-repeat;} .widget ul {margin: -1px; padding: 0;} .widget ul li {margin: 0; padding: 6px 0 6px 15px; border-top: 1px solid #d7d7d7; background: url("images/arrow-red.gif") 3px 10px no-repeat;} .widget ul li a {padding: 3px 0; color: #8e8e8e; } .widget ul li a:visited {color: #bbb;} .widget ul li a:hover {color: #008fcb;} .widget ul ul {margin-bottom: -6px; padding: 6px 0 0;} .widget ul ul li {background: url("images/arrow-blue.gif") 3px 10px no-repeat;} .widget ul ul li a {padding: 3px 0;} .widget ul ul ul li { background: url("images/arrow-gray.gif") 3px 10px no-repeat;} .widget ul ul ul li a {padding: 3px 0;} .widget li.current-cat>a, .widget li.current-menu-item>a, .widget li.current_page_item>a, .widget li.current-cat>a:visited, .widget li.current-menu-item>a:visited, .widget li.current_page_item>a:visited {color: #333; font-weight: bold;} .sidebar form {margin: 15px 0 0; padding: 0; border: none; background: none; } .sidebar form button {overflow: hidden; width: 27px; height: 24px; margin: 0; padding: 0; border: 1px solid #d40000; background: #d40000 url("images/button-search.png") top repeat-x; color: #fff; text-indent: -50em; vertical-align: middle;} .sidebar form input {width: 210px; height: 22px; margin: 0; padding: 0 5px; border: 1px solid #d9d9d9; background: #fff; color: #888; line-height: 22px; vertical-align: middle;} .main .searchform button {overflow: hidden; width: 27px; height: 24px; margin: 0; padding: 0; border: 1px solid #d40000; background: #d40000 url("images/button-search.png") center top repeat-x; color: #fff; text-indent: -50em; vertical-align: middle;} .main .searchform input {width: 300px; height: 22px; margin: 0; padding: 0 5px; border: 1px solid #d9d9d9; background: #fff; color: #888; line-height: 22px; vertical-align: middle;} /* comments ------------------------------------------ */ .comments {clear: both;} .comments h3 {color: #000;} .commentlist {margin: 1em 0;} .commentlist li {overflow: hidden; margin: 0 0 10px; padding: 10px 15px;border: 1px solid #bed5e1; background: #cee2ed;} .commentlist li.odd {background: #f5f5f5;} .commentlist li li {clear: both; margin-left: 20px;} .commentlist ul {clear: both;} .commentlist li img.avatar {float: left; margin: 0 10px 5px 0; padding: 2px; border: 1px solid #d7d7d7; background: #fff;} .commentlist li p {clear: left;} .comments li form, .comments li form[class] {background: #fff;} .reply {float: right; overflow: hidden; } .reply a {float: right; padding-left: 30px; background: url("images/icons.png") 5px -160px no-repeat;} .commentlist li img.avatar {float: left; margin: 0 10px 5px 0; padding: 2px; border: 1px solid #d7d7d7; background: #fff;} .commentlist li .comment-body ul {margin: 1em 0; list-style: disc;} .commentlist li .comment-body ol {margin: 1em 0; list-style: decimal;} .commentlist li .comment-body li {overflow: visible; margin: 0 0 0 20px; padding: 0; border: none; background: transparent;} .comment-meta, .comment-author-vcard {font-size: 0.923em;} /* misc ------------------------------------------ */ .main label {float: none;} .main #respond form label {float: left;} .clear {height: 0; margin: 0; padding: 0; clear: both; float: none; overflow: hidden; border: none;} img {margin: 0; max-width: 640px; height: auto;} embed {max-width: 640px;} .wp-caption img, .wp-caption embed {max-width: 630px;} .wp-caption {max-width: 640px;} .wp-caption, .gallery-caption {padding: 10px 5px 5px; border: 1px solid #d9d9d9; background: #f8f8f8; text-align: center;} .gallery-caption {position: static; padding-top: 5px;} .alignleft {float: left; margin: 5px 10px 5px 0; padding: 0; } .alignright {float: right; margin: 5px 0 5px 10px; padding: 0; } .aligncenter {display: block; margin: 1em auto; text-align: center;} .wp-caption-text {margin: 0.5em 0; color: #888; font-size: 0.846em;} .nocomments {clear: both;} img.size-thumbnail {margin: 5px;} a.post-edit-link {font-size: 0.5em;} .gallery {overflow: hidden; padding: 1.5em 0;} .gallery dl {text-align: center;} .gallery dl dt {float: none; width: auto;} .gallery dl dd {clear: left; width: auto; margin: 0; text-align: center;} .gallery a img, .gallery a img[class] {padding: 2px; border: 1px solid #0a92cb !important; background: transparent;} [id*="gallery"] img {border: 1px solid #0a92cb;} .gallery a:hover img[class] {padding: 2px; border: 1px solid #c81414 !important;} p.pagination {overflow: hidden;} p.pagination a {height: 22px; background: url("images/icons.png") no-repeat; font: normal 1.083em/22px "Aller",sans-serif;} p.pagination a:hover {color: #000; text-decoration: none;} p.pagination .prev a {float: left; padding: 0 0 0 25px; background-position: 0 -140px; } p.pagination .next a {float: right; padding: 0 25px 0 0; background-position: 100% -120px;} p.pages {clear: both;} p label {display: inline; margin-bottom: 0;} .main h3, .main h2 {clear: both;} p.comment-form-comment label {display: block; float: left;} .bypostauthor {position: static;}