/**
 *
 * CSS by Damian Wielgosik. All rights reserved.
 * http://ferrante.pl
 *
 * Last Updated: 2nd May, 2010
 *
 **/

/**
 *
 * CSS reset. Support for selected HTML5 tags.
 *
 **/

body, p, div, h1, h2, h3, h4, h5, h6, input, textarea, img, blockquote, dl, dt, dd, fieldset, legend, ol, ul, li, pre, code {
    padding: 0;
    margin: 0;
    border: 0;
    vertical-align: baseline;
}

header, footer, section, article, nav, aside {
    display: block;
}

address, cite, q, dfn {
  font-style: normal;
}

a, ins, del {
  text-decoration: none
}

q, blockquote {
	quotes: none;
}

q:after, q:before,
blockquote:after, blockquote:before {
	content: "";
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select, button, textarea {
    color: #282828;
    font: normal 13px 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
}


/**
 *
 * Globals
 *
 **/

body {
    background: #F4F9FB url(../images/website-header-bgr.png) top center repeat-x;
	color: #333;
    font: normal 13px 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
}

/*br {
	display: none;
}*/

a {
    text-decoration: none;
    color: #7EBB1F;
}

a:hover {
    background-color: #7EBB1F;
    color: #fff;
}

a:visited {
	color: #7EBB22;
}

a:visited:hover {
	background: #7EBB22;
	color: #fff;
}

p {
	font-size: 14px;
	line-height: 24px;
	text-align: left;
}

article:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

textarea, input[type="text"], input[type="search"] {
	background: #fff;
}


/**
 *
 * Support for image replacement.
 *
 **/

.image-header span {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	background-repeat: no-repeat;
}

.image-header {
	overflow: hidden;
	position: relative;
}

/**
 *
 * Posts categories info.
 *
 **/

.ferrante > .category {
	margin: auto;
	width: 960px;
	font-size: 11px;
	text-transform: uppercase;
	color: #889192;
	margin-bottom: 20px;
}

.ferrante > .category img {
	vertical-align: middle;
}

.ferrante > .category a {
	margin-right: 8px;
}

.ferrante > .category a:hover {
	background: none;
}

/**
 *
 * Wrapper.
 *
 **/

.ferrante > article,
.ferrante > header,
.ferrante > footer,
.ferrante > aside > .site-footer-content,
.article-comments,
.pagebar,
.add-comment {
	width: 960px;
	margin: auto;
}

/**
 *
 * Website header.
 *
 **/

.ferrante > header {
    margin-bottom: 70px;
}

.ferrante  > header > h1 {
    width: 300px;
    height: 80px;
}

.ferrante > header > h1 a:hover {
	background: none;
}

.ferrante  > header > h1 {
	margin-top: -2px;
}


/**
 *
 * Website top navigation and search form.
 *
 **/

#main-navigation {
	background: #3E3E3E;
	height: 29px;
	margin: -21px 0 0 518px;
	padding: 7px 0 0;
	width: 485px;
}

.ferrante nav {
    float: left;
    width: 236px;
	background: #3E3E3E;
	height: 30px;
	margin-top:-2px;
	padding-left: 25px;
}

.ferrante nav > ul li {
    float: left;
    margin-right: 20px;
    margin-top: 4px;
	list-style: none;
}

.ferrante nav > ul li a {
    display: block;
    line-height: 20px;
    font-size: 12px;
    height: 20px;
    color: #fff;
}

.ferrante nav > ul li a:visited:hover,
.ferrante nav > ul li a:hover {
   text-decoration: none;
   background: none;
}

.ferrante nav > ul li a:after {
    content: "";
    height: 20px;
    display: block;
    margin-top: -20px;
    position: absolute;
}


/**
 *
 * Website menu items:
 * - Blog
 * - Vademecum
 * - About
 *
 **/

/**
 *
 * Blog
 *
 **/

nav > ul li:nth-child(1) a,
nav > ul li:nth-child(1) a:after {
    width: 41px;
}

nav > ul li:nth-child(1) a:after {
    background: url(../images/menu-blog.gif) no-repeat;
}

/**
 *
 * Vademecum.
 *
 **/

nav > ul li:nth-child(2) a,
nav > ul li:nth-child(2) a:after {
    width: 57px;
}

nav > ul li:nth-child(2) a:after {
    background: url(../images/menu-nauka.gif) no-repeat;
}

/**
 *
 * About.
 *
 **/
nav > ul li:nth-child(3) a,
nav > ul li:nth-child(3) a:after {
    width: 71px;
}

nav > ul li:nth-child(3) a:after {
    background: url(../images/menu-o-mnie.gif) no-repeat;
}

nav > ul li a:hover:after,
nav > ul li.active a:after {
    background-position: 0 -36px;
}

/**
 *
 * Search form.
 *
 **/

#main-navigation > form {
    width: 209px;
    padding: 6px 0 0 6px;
    float: left;
    background: #add366;
    margin-top: 2px;
    height: 32px;
}

#main-navigation > form label { 
    display: none;
}

#main-navigation > form input[type="search"] {
    width: 166px;
    height: 24px;
    float: left;
    font-size: 17px;
    padding-left: 5px;
    margin-right: 9px;
    margin-top: 2px;
    
}

#main-navigation > form input[type="image"] {
    margin-top: -6px;
	float: left;
}

/**
 *
 * Article section:
 * - header
 * - footer
 * - article content (.article-content)
 *
 **/


.ferrante > article {
	margin-bottom: 10px;
}

/**
 *
 * Article header.
 *
 **/

.ferrante > article > header,
.ferrante > article > .article-content {
    width: 870px;
    float: right;
}

.ferrante > article > header {
    margin-bottom: 5px;
}

.ferrante > article > header > h1,
.ferrante > article > header > h2 {
    font-size: 18px; 
    line-height: 22px;
}

.ferrante > article > header > ul > li {
    background: url(../images/category-icon-light.gif) no-repeat scroll 2px 8px transparent;
    float: left;
    margin-right: 15px;
    padding-left: 25px;
    padding-top: 5px;
	list-style: none;
}

.ferrante > article > header > ul > li > a {
    color: #A7A9A8;
    font-size: 11px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: normal;
}

.ferrante > article > header > ul > li > a:hover {
    background: #A7A9A8;
    color: #fff;
}

/**
 *
 * Article footer.
 *
 **/

.ferrante > article > footer {
    width: 100px;
    margin-right: 20px;
}

.ferrante > article > footer > time,
.ferrante > article > footer > a.comments-number {
    font-size: 11px;
    line-height: 13px;
    text-indent: 25px;
    margin-bottom: 5px;
    padding: 4px;
    width: 62px; 
    display: inline-block;
}

.ferrante > article > footer > time {
    background-image: url(../images/date-icon.gif);
	background-position: 7px 4px;
	background-repeat: no-repeat;
	background-color: #7EBB1F;
    color: #fff;
}

.ferrante > article > footer > a.comments-number {
    background: url(../images/comments-icon.gif) 4px 2px no-repeat;
    color: #1F1F1F;
    font-weight: normal;
}

/**
 *
 * Article content.
 *
 **/

.ferrante > article > .article-content a {
	font-weight: bold;
}

.ferrante > article > .article-content > blockquote,
.article-comments .comment-content blockquote,
.ferrante > article > .article-content > p {
    width: 680px;
}

.ferrante > article > .article-content > p {
	margin-bottom: 20px;
}

.single > article > .article-content > p:first-child {
    font-weight: bold;
}

.ferrante > article > .article-content > blockquote,
.comment-content > blockquote {
    background: #fff url(../images/quote-icon.gif) 20px 20px no-repeat;
    border: 1px solid #D1D1D2;
    color: #515252;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
}

.ferrante article blockquote > p {
    width: 600px;
    margin-left: 70px;
    padding: 17px 5px 5px 5px;
}

/**
 *
 * Code snippets. Works both for posts and comments.
 *
 **/

.ferrante article .code-snippet {
    background: #D6D6D6 url(../images/code-snippet-icon.gif) 20px 30px no-repeat;
    border: 1px solid #9C9C9C;
    width: 650px;
    padding: 30px 0 20px 20px;
    margin-bottom: 20px;
    display: block;
	clear: left;
	position: relative;
	overflow: auto;
}

.ferrante article .code-snippet ol li {
    background: #E5E5E5 url(../images/code-snippet-lines-bgr.gif) 0 -5px repeat-y;
    color: #000;
    font-weight: bold;
    margin-bottom: 1px;
    font-family: Courier new, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 20px;
    list-style-type: decimal-leading-zero;
    list-style-position: inside;
    list-style-image: none;
	margin-left: 45px;
	width: 580px;
}

.ferrante article .code-snippet ol li code {
	background: none;
}

.ferrante article .code-snippet pre code {
	min-width: 560px;
	width: auto !important;
}

.ferrante article .code-snippet code {
    display: inline-block;
    width: 570px;
    font-family: "Monaco", Courier new, Arial, Helvetica, sans-serif;
    color: #1f1f1f;
    font-size: 13px;
    font-weight: normal;
	background: #E5E5E5;
}

.ferrante article .code-snippet pre code {
	margin-left: 45px;
	padding: 10px;
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    article > ol.code li code {text-indent: -25px; }
}

.ferrante article .code-switcher {
	background-color: #9C9C9C;
	color: #fff;
	height: 20px;
	line-height: 18px;
	position: absolute;
	text-align: center;
	top: 0;
	right: 0;
	display: block;
	min-width: 100px;
	font-weight: bold;
	outline: none;
}

/**
 *
 * Posts decoration elements.
 * - .i - post notes
 * - .f - post highlights
 * - article.older - older articles on index
 *
 **/

.ferrante > article .i {
    background-color: #FBF1AB;
    border: 1px solid #ECD42B;
    width: 162px;
    padding: 4px;
    overflow: hidden;
    float: right;
    display: block;
    font-size: 11px;
    line-height: 22px;
    clear: right;
    margin-top: 10px;
}

.ferrante > article .i sup {
    float:left;
    font-size:30px;
    padding-bottom:1px;
    padding-right:1px;
    vertical-align: bottom;
    margin-right: 5px;
    text-align: center;
    width: 30px;
}

.ferrante > article .i sup:target {
    background: #FBEA71;
}

.ferrante > article .f {
    padding: 2px;
    background-color: #F3FAAC;
    border-bottom: 1px solid #B8A500;
    border-right: 1px solid #E6E491;
    font-family: Courier new, Arial, Helvetica, sans-serif;
    font-style: italic;
}

.ferrante > .older > footer > time {
    background-color: #D2D2D2;
    color: #616161;
}

.ferrante > article ul {
	margin-bottom: 20px;
}

.ferrante > article ul li {
	list-style: square;
	margin-bottom: 10px;
	line-height: 20px;
	font-size: 14px;
}

/**
 *
 * Article comments.
 *
 **/

.article-comments {
    margin-top: 20px;
}

.article-comments > header h3 {
    width: 182px;
    height: 43px;
    margin: 40px 0 30px 90px;
}

.article-comments > header h3 span {
    background: url(../images/comments-header.gif) no-repeat;
}

.article-comments .no-comments {
    border: none; 
    margin: 40px auto; 
    margin-bottom: 60px;
    width: 200px;
}

/**
 *
 * Single comment declaration.
 *
 **/

.article-comments > article {
    border-top: 1px solid #d3d3d3;
    overflow: hidden;
    margin-bottom: 20px;
}

.article-comments > article header {
    display: block;
    background-color: #d3d3d3;
    width: 72px;
    height: 40px;
    overflow: hidden;
    text-align: right;
    font-size: 36px;
    text-indent: 0.6em;
    float: left;
}

.article-comments > article header a {
    color: #fff;
    position: relative;
    top: 5px;
    left: 1px;
}

/**
 *
 * Article comment's content.
 *
 **/

.article-comments > article > .comment-content {
    margin: 20px 20px 0 20px;
    float: left;
    width: 680px;
}

.article-comments > article > .comment-content p {
    margin-bottom: 20px;
}


/**
 *
 * Article comment's footer.
 *
 **/

.article-comments > article > footer {
    width: 168px;
    float: right;
    background-color: #D3D3D3;
    min-height: 40px;
}

.article-comments > article > footer > time,
.article-comments > article > footer .author {
	font-size: 11px;
}

.article-comments > article > footer .author {
	margin-left: 20px;
	display: block;
}

.article-comments > article > footer .author,
.article-comments > article > footer .author a {
	color: #1F1F1F;
	font-weight: bold;
	line-height: 19px;
}
.article-comments > article > footer a {
	border-bottom: 1px dotted;
}

.article-comments > article > footer a:hover {
	border-bottom: 1px solid;
	background: none;
}

.article-comments > article > footer > time {
    background: url(../images/date-icon.gif) 5px 5px no-repeat;
    color: #616161;
    font-weight: normal;
	display: block;
	padding-left: 20px;
	line-height: 18px;
}

/**
 *
 * Special class means a comment belongs to the blog author.
 *
 **/

.article-comments > article.owner {
    border-top: 1px solid #7EBB1F;
}

.article-comments > article.owner > header, 
.article-comments > article.owner > footer {
    background-color: #7EBB1F; 
}

.article-comments > article.owner > footer,
.article-comments > article.owner > footer a,
.article-comments > article.owner > footer time {
    color: #fff;
}


/**
 *
 * Add comment form.
 *
 **/

.add-comment {
	padding-left: 180px;
}

.add-comment h3 {
    height: 43px;
    margin-bottom: 30px;
    width: 246px;
}

.add-comment h3 span {
    background-image: url(../images/add-comment-header.gif);
    background-repeat: no-repeat;
}

.add-comment fieldset dl {
    float: left;
    width: 300px;
}

.add-comment fieldset dl dt {
    display: none;
    padding-left: 5px;
}

.add-comment fieldset dl:nth-child(2) {
    margin-left: 25px;
    width: 545px;
}

.add-comment fieldset dl:first-child dd:before {
    position: absolute;
    margin-top: 8px;
    height: 14px;
    margin-left: 8px;
	overflow: hidden;
	width: 60px;
}   

.add-comment fieldset dl dd:after {
    display: block;
    content: "";
    width: 105px;
    height: 25px;
    margin: -34px 0 0 1px;
    position: absolute;
}

.add-comment fieldset input[type="image"] {
	float: right;
	margin-right: 3px;
}

.add-comment fieldset dl dd input[type="text"],
.add-comment fieldset dl dd textarea {
    border: 1px solid #D0D0D1;
    border-bottom: 3px solid #D0F0F8;
    border-right: 2px solid #CEF0F8;
    width: 327px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #1F1F1F;
}
.add-comment fieldset dl dd input[type="text"] {
    height: 25px;
    padding: 2px 0 0 101px;
    width: 186px;
}

.add-comment fieldset dl:first-child dd.e-mail input {
    padding-left: 70px;
    width: 217px;
}

.add-comment fieldset dl:first-child  dd:nth-child(1) input {
    padding-left: 73px;
    width: 214px;
}

.add-comment fieldset > dl:first-child dt:nth-child(5) + dd:before {
    content: "strona www";
}

.add-comment fieldset > dl:first-child  dt:nth-child(5) + dd:after {
    background: url(../images/add-comment-website.gif) 5px 8px no-repeat;
}

.add-comment fieldset > dl:first-child  dt:nth-child(1) + dd:before {
    content: "autor";
}

.add-comment fieldset > dl:first-child  dt:nth-child(1) + dd:after {
    background: url(../images/add-comment-nickname.gif) 5px 8px no-repeat;
    width: 90px;
}

.add-comment fieldset dl:first-child  dt:nth-child(3) + dd:before {
    content: "mail";
}

.add-comment fieldset dl:first-child  dt:nth-child(3) + dd:after {
    background: url(../images/add-comment-mail.gif) 5px 8px no-repeat;
    width: 90px;
}

.add-comment fieldset dl dd textarea {
    height: 200px;
    width: 540px;
}

.add-comment fieldset .allowed-tags {
	float: left;
	color: #889192;
	font-size: 11px;
}
	
/**
 *
 * Worpress pagebar.
 *
 **/

.ferrante > .pagebar {   
    margin: 60px auto 30px auto;  
	background: none;
	padding: 0;
	float: none;
}

.ferrante > .pagebar span {
    color: #a3a3a3;
}

.ferrante > .pagebar a {
    color: #000;
    background: #F9FCFF;
    padding: 2px 8px;
    border: 1px solid #e3e3e3;
    margin-left: -1px;
    font-weight: normal;
}

.ferrante > .pagebar a:hover {
    background-color: #7EBB1F;
    color: #fff;
}

.ferrante > .pagebar .this-page {
    color: #fff;
    background-color: #7EBB1F;
    font-weight: bold;
    padding: 2px 8px;
    border: 1px solid #e3e3e3;
    margin-left: -1px;
}

.ferrante > .pagebar .break, 
.ferrante > .pagebar .inactive {
    border: none;
}

.ferrante > .pagebar .inactive {
    font-size: 13px;
    margin: 0 10px;
}

.ferrante > .pagebar .break {
    margin: 0 10px;
}


/**
 *
 * Footer-like content.
 *
 **/

.ferrante .site-footer-content {
	background: #282828;
	margin-top: 36px;
}

.ferrante .site-footer-content nav {
	position: relative;
	left: 699px;
	float: none;
	top: -13px;
}

.ferrante .site-footer-content > a {
	left:-2px;
margin-left:3px;
position:relative;
top:-270px;
}

.ferrante .site-footer-content h4 {
	height: 25px;
	margin-bottom: 10px;
}

.about,
.blogroll,
.categories {
	float: left;
}

.about {
	margin-right: 80px;
}

.about h4 {
	width: 88px;
}

.about h4 span {
	background-image: url(../images/header-about.png);
}

.about {
	width: 215px;
}

.about > h5 {
	display: inline;
	line-height: 20px;
	font-size: 12px;
}

.about > p {
	line-height: 18px;
	font-size: 13px;
	text-align: justify;
}

.about > p a:nth-child(2) > img {
	margin-top: 20px;
}

.blogroll h4 {
	width: 217px;
}

.blogroll h4 span {
	background-image: url(../images/header-blogroll.png);
}

.blogroll {
	margin-top: 25px;
	margin-left: 70px;
}

.categories h4 {
	width: 260px;
}

.categories div,
.blogroll div {
	float: left;
	width: 130px;
}

.categories h4 span {
	background-image: url(../images/header-categories.png);
}

.categories ul li,
.blogroll ul li {
	list-style: none;
}

.categories ul li a,
.blogroll ul li a{
	font-size: 11px;
}

.categories ul li a:hover,
.blogroll ul li a:hover {
	color: #282828;
	background-color: #D4D4D4
}

.categories ul li,
.blogroll ul li {
	background: url(../images/category-icon-dark.gif) 0 3px no-repeat;
	padding-left: 20px;
	margin-bottom: 5px;
	line-height: 17px
}

.blogroll ul li {
	background: url(../images/blogroll-icon-dark.gif) 0 3px no-repeat;
}

.ferrante > aside {
	background: #282828 url(../images/website-footer-bgr.png) top center no-repeat;
	width: 100%;
	clear: both;
	min-height: 400px;
	margin-top: 30px;
	padding-top: 36px;
}

.ferrante > aside a,
.ferrante > aside {
	color: #d4d4d4;
}

.ferrante > footer {
	margin-top: -146px;
	position: relative;
	top: -30px;	
}

.ferrante > footer img {
	margin-left: 570px;
	display: block;
}

.ferrante > footer p {
	font-size: 11px;
	margin-left: 630px;
	color: #575757;
	line-height: 13px;
}
.ferrante > footer > p:nth-child(2) {
	margin-top: -45px;
}