﻿@charset "utf-8";
/*
Theme Name: Julian K.
Theme URI: http://www.juliank.eu/
Description: The fresh theme for Green Bulgaria's Site.
Version: 1.0
Author: Julian Kuntorov
Author URI: http://www.juliank.eu/
Tags: red, white, fixed-width

 /* 
/* The CSS, XHTML and design is released under Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 Bulgaria:
/* http://creativecommons.org/licenses/by-nc-nd/2.5/bg/
/* This is the main stylesheet of the juliank.eu site.
/* Copyright (c) Julian Kuntorov. All rights are reserved.
/* Don't steal, be inspired!
 */

/* Main */
body {margin: 0px; border-top: 2px #f33 solid; color: #333; background-color: #fff; font-family: Helvetica, Arial, sans-serif; background-image: url(images/bottom.png); background-repeat: repeat-x; background-position: bottom;}
#container {width: 800px; margin-left: auto; margin-right: auto;}

/* Header */
h1 {margin-top: 0px; margin-left: 25px; float: left; position: absolute; top: 2px; -webkit-transition-property: opacity; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease-out;}
h1 img {border: none;}
h1:hover {opacity: 0.85; -webkit-opacity: 0.7;}
#nav {float: right; margin-top: 0px; position: absolute; top: -8px; margin-left: 180px;}
#nav ul {list-style: none; height: auto;}
#nav ul li {display: inline; text-transform: uppercase; font-size: 12px; font-weight: bold;}
#nav ul li a {background-color: none; background-image: none; padding: 10px; text-decoration: none; color: #999; -webkit-transition-property: color; -webkit-transition-duration: 750ms; -webkit-transition-timing-function: ease-in;}
#nav ul li a:hover {background-color: #f33; color: #fff; padding-bottom: 10px; /*border-bottom: 1px solid #e11;*/ background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 51, 51, 1)), to(rgba(238, 17, 17, 1))); -webkit-transition-property: none;}
#nav ul .selected {background-color: none; border-bottom: 2px solid #eee; margin-top: 2px; padding-bottom: 5px; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0)), to(rgba(222, 222, 222, 0.3)));}
#nav ul #rss1 {padding: 8px; background-color: #f90; top: 10px; left: 420px; position: absolute; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 153, 0, 1)), to(rgba(255, 102, 0, 1))); }
#nav ul #rss1 img {margin-top: 0px; border: none; background-color: none;}
#nav ul #rss1 a{top: 4px; position: relative; padding: 0px;}
#nav ul #rss1 a:hover{background-color: #f33; color: none; border-bottom: none; padding: 0px; margin: 0px;}
#nav ul #rss1:hover {background-color: #f33; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 51, 51, 1)), to(rgba(238, 17, 17, 1))); border-bottom: 1px solid #e11;}
#nav ul #rss2 {visibility: hidden;}

/* Content */
#content {margin-top: 150px; margin-left: 225px; width: 425px; min-height: 330px;}
.article {margin-bottom: 40px;}
h2 {font-size: 18px; font-weight: normal; line-height: 30px;}
h2 a {color: #333; text-decoration: none; border-bottom: none;}
h2 a:hover {color: #f33;  -webkit-transition-property: color; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: ease-in-out;}
h3 {font-size: 15px; font-weight: bold; margin: 5px 0px 10px 0px;}
h3 a {color: #333; text-decoration: none;}
h3 a:hover {color: #f33;  -webkit-transition-property: color; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: ease-in-out;}
.article p, .page p {font-size: 14px; line-height: 24px;}
.message p, .panel p {font-size: 13px; line-height: 22px;}
.article p a, .page p a, .message p a, .panel p a {color: #666; text-decoration: none; border-bottom: #999 dotted 1px;}
.article p a:hover, .page p a:hover, .message p a:hover, .panel p a:hover {color: #333; border-bottom: #999 dotted 1px;}
.article img {margin: 10px 0px 10px -25px; border: none; -webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 95%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));} 
.article object {margin: 5px 0px 5px -25px; border: none;}
.article em,  .message em {font-style: italic;}
.article ol,ul,dl {font-size: 14px; line-height: 24px;}
.article ol a,.article ul a, .article dl a {color: #666; text-decoration: none; border-bottom: #999 dotted 1px;}
.article ol a:hover,.article ul a:hover, .article dl a:hover {color: #333; border-bottom: #999 dotted 1px;}
.article pre,code {font-size: 13px; font-family: monospace; color: #333; background-color: #eeeeee; margin: 10px 0px 10px 5px; padding: 5px 5px 5px 10px; display: block;}
.article blockquote {background-image: url(images/blockquote.png); background-position: top left; background-repeat: no-repeat; padding: 0px 0px 0px 36px; text-indent: 0px; min-height: 25px; margin-left: 0px;}
.readmore {font-size: 13px; font-weight: bold; margin-left: 2px; line-height: 22px; color: #333;}
.readmore a {color: #333; text-decoration: none; border-bottom: #ddd dotted 1px;}
.readmore a:hover {border-bottom: #999 dotted 1px;}
.svejo {float: right; padding: 0px 0px 0px 5px;}
.tbl {float: right; padding: 0px 0px 0px 5px; margin-top: 30px; margin-right: -110px;}
h4 {font-size: 11px; color: #999; font-weight: normal; margin-bottom: 15px; mangin-top: 0px; line-height: 18px;}
h4 a {color: #666; text-decoration: none; border-bottom: #999 dotted 1px;}
h4 a:hover {color: #333;}
.ampersand {font-family: 'Palatino Linotype', 'Palatino', 'Times New Roman', Geogria, serif; font-size: 16px;}
.pagenav {font-size: 12px; color: #999; padding: 10px 10px 15px 10px; text-align: center; border-top: 1px solid #ddd;}
.pagenav a {color: #999; text-decoration: none; border: none;}
.pagenav a:hover {color: #666; cursor: pointer;}

/* Comments */
#comments {padding: 10px 0px 15px 0px; border-top: 1px solid #ddd;}
ol.comments {list-style: none; padding-left: 0px;}
.comment {font-size: 12px; line-height: 20px; display: table-row;}
.avatar {display: table-cell;}
.avatar img {width: 48px; height: 48px; vertical-align: top; border: 2px solid #eee; -webkit-border-radius: 2px;}
.avatar a img {width: 48px; height: 48px; vertical-align: top; border: 2px solid #eee; -webkit-border-radius: 2px;}
.avatar img:hover {border: 2px solid #ddd;}
.comment-text {display: table-cell; vertical-align: top; padding-left: 10px;}
.comment-text p a {color: #666; text-decoration: none; border-bottom: #999 dotted 1px;}
.comment-text p a:hover {color: #333; border-bottom: #999 dotted 1px;}
.comment-author {font-style: italic; margin: 0px 0px -10px 0px;}
.comment-author a {text-decoration: none; color: #333; font-weight: bold; border-bottom: 1px dotted #eee;}
.comment-author a:hover {border-bottom: 1px dotted #666;}
.comment-time {color: #999; margin: -5px 0px 15px 0px; font-size: 11px;}
.comment-time a {text-decoration: none; color: #666; border-bottom: 1px dotted #eee;}
.comment-time a:hover {border-bottom: 1px dotted #666;}
ol.comments li.author {padding: 10px; background-color: #fafafa; border-top: 1px #eee solid; border-bottom: 1px #eee solid; margin-bottom: 10px;}

        
/* Commenting */
#commenting {padding: 10px 0px 15px 0px; border-top: 1px solid #ddd;}
.form-row {margin: 10px 10px 10px 5px;}
.form-row input {height: 15px; padding: 5px; border: #ddd solid 1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #444; background-color: #fff; background-image: -webkit-gradient(linear, 0% 85%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(235, 235, 235, 1))); outline: none;}
.form-row label, .form-area label {font-size: 12px; padding-left: 10px;}
.form-area textarea {margin-top: 10px; padding: 10px; border: #ddd solid 1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #444; background-color: #fff; background-image: -webkit-gradient(linear, 0% 95%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(235, 235, 235, 1))); outline: none;}
.form-area input {background-color: #f33; border: 1px solid #d33; padding: 10px; margin: 10px; color: #fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 51, 51, 1)), to(rgba(242, 0, 0, 1))); font-weight: bold; outline: none;}
.form-area input:active {background-color: #e33; background-image:none;}

/* Archive */
ul.archives {list-style: none; padding-left: 0px; border-top: 1px dotted #ddd;}
ul.archives li {border-bottom: 1px dotted #ddd; padding: 5px;}
ul.archives li:hover {background-color: #fafafa; -webkit-transition-property: background-color; -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out;}
ul.archives a {color: #333; text-decoration: none; border-bottom: none;}
ul.archives a:hover {border-bottom: #999 dotted 1px;}
ul.archives a.archivetitle {font-weight: bold;}

/* Filter */
#filter {width: 800px; height: 360px; margin-bottom: 0px; overflow: hidden; display: table;}
#filter-container {display: table-row; margin-left: auto; margin-right: auto;}
#posts {margin-left: 0px; width: 220px; display: table-cell; margin-bottom: 0px;}
#cats {margin-left: 220px; width: 220px; display: table-cell; margin-bottom: 0px;}
#search {margin-left: 440px; width: 220px; display: table-cell; margin-bottom: 0px;}
.navlist {list-style: none; margin-left: 0px; font-size: 13px; margin-top: 0px; padding: 20px 0px 0px 25px;}
.smalltitle {color: #fff; font-size: 11px; text-transform: uppercase; font-weight: bold; padding: 5px; border-bottom: 2px solid #666;}
.navlist a {text-decoration: none; color: #fff; display: block; width: 230px; border-bottom: 1px dotted #444; padding: 5px 5px 5px 10px; line-height: 20px;}
.navlist a:active {background-color: #444;}
.navlist a:visited {color: #fff;}
.navlist a:hover {background-color: #222; border-bottom: 1px dotted #555; background: rgba(0,0,0,0.3); -webkit-transition-property: background, border-bottom; -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out;}
.navlist-more {font-size: 12px;font-weight: bold; padding: 0px;}
.navlist li img {margin-right: 5px; margin-top: 0px; margin-bottom: -4px; border: none;}
.search-container {margin: 10px;}
.search-container p {margin: 0px; padding: 0px; display: table-row;}
.search {width: 180px; height: 15px; padding: 7px 10px 6px 10px; margin: 2px 0px -5px 0px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-image: -webkit-gradient(linear, 0% 75%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(211, 211, 211, 1))); font-family: Helvetica, Arial, sans-serif; font-style: italic; font-size: 13px; color: #444; display: table-cell; z-index: 50; outline: none;}
.search-button {display: block; text-indent: -9999px; background-image: url(images/search.png); background-repeat: no-repeat; width: 16px; height: 16px; margin: 0px 0px -5px -25px; background-color: #fff; border: none; display: table-cell; z-index: 100;}
.search-button:active {border: 1px #fff dotted;}
.project-showcase {font-size: 11px; line-height: 16px;}
.project-showcase a:hover {background-color: #222; border-bottom: 1px dotted #666; background: rgba(0,0,0,0.3); -webkit-transition-property: background, border-bottom; -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out;}
.project-showcase img {padding: 5px 5px 8px 2px; border: none; width: 220px; height: 120px;}

/* Footer */
#footer {margin: 0px; padding: 20px 10px 0px 20px; height: 80px; color: #eee; width: 100%; bottom: 0px;}
h6 {font-size: 11px; line-height: 19px; font-weight: normal; width: 650px; margin: 0px; padding-top: 5px;}
h6 a {color: #fff; border-bottom: 1px #666 dotted; text-decoration: none; }
h6 a:hover {border-bottom: 1px dotted #ddd;} 
#topbutton {float: right; margin: -50px 20px 10px 10px; opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out; cursor: pointer; padding-top: 5px;}
#topbutton img {border: none;}
#topbutton:hover {opacity: 1;}