@charset 'utf-8';
@import url(reset.css);
@import url(grid.css);
@import url(fonts/Charis-SIL/stylesheet.css);
@import url(typography-colors.css);
@import url(lightbox.css);

/* ----------------------------------------------------- All browsers */



/* !basics ########################################################## */
 
html {}
body {text-align:center; min-height:100%; background:#faf9f0 url(img/bg-body.png) 50% top repeat-x;}
body > pre b {width:300px; display: block; font-size: 12px;} /*textpattern warnings */

.wrapper {position:relative; width:980px; min-height:100%; margin:0 auto; text-align:left;}
div.wrapper a#skip {position:absolute; width:1px; height:1px; overflow:hidden; top:-9999px;} 
div.wrapper a#skip:focus, div.wrapper a#skip:active {width:100%; height:auto; display:block; top:0; padding:10px 0; text-align:center; background:#000; }


/* !main outer elements ################################################ */

.branding {position:relative; width:280px; line-height:90px; margin-left:10px;}
nav.main {position:absolute; top:0px; right:90px;}
.content_main {width:620px; margin:128px 0 0 340px; padding:0 0 300px; text-align:left;}
footer.content_sub {position:relative; margin-top:-300px; background:url(img/bg-footer_shadow.png) repeat-x, url(img/bg-footer2.png);}


/* !main inner elements ################################################ */

/* !header =================== */

.branding p {position:absolute; top:-9999px;}
.branding span {position:absolute; left:-71px; top:-16px; display:block; width:40px; height:40px; text-indent:-9999px; background:transparent url(img/icons.png) -25px -383px no-repeat; -webkit-transition: background-position .3s ease;}


/* !navigations =================== */

/* !language nav ---------- */
.nav_lang {position:absolute; top:1px; right:20px;}
.l10n_lang_list li {display:inline;height:60px; line-height:94px;}
.l10n_lang_list li.l10n_current {display:none;}

/* !main nav ---------- */
nav.main h2, nav.main h3 {position: absolute; top:-9999px;}
nav.main ul {float:right; width:auto;}
nav.main li {float:left; width:auto; height:60px; line-height:94px; padding:0 10px;}
nav.main ul li:first-child {position:absolute; top:-9999px;}
nav.main li a {height:60px;}
nav.main li a:hover {}
nav.main li a:active {position: relative; bottom: -1px;}
nav.main li.active {border:1px solid #ccc; border-top:none; border-bottom:none;}
nav.main li.active a {}

/* !page nav ---------- */
.paging {margin:40px auto 0; width:600px;}
#home .paging {}	
.paging li {padding:10px 0; color:#666; line-height:60px;}
.paging li:first-child {float: right; width:230px; text-align:left;}	
.paging li:nth-child(2) {float: left;width:230px; text-align:right;}

.paging li:last-child a {display:block; width:60px; height:60px; margin:0 auto; text-indent:-9999px; background:url(img/icons.png) left -580px no-repeat; opacity:.7;}
.paging li:last-child a:hover {border:none;opacity:1;-webkit-transition:opacity .3s ease-in-out;}

/* !search =================== */
#search {position:relative; bottom:360px; left:20px; width:230px;}

.search-wrapper {position:relative; width:100%; padding-bottom:10px; overflow:hidden;}
#q {position:relative; width:188px; padding:7px 40px 7px 2px; border:1px solid rgba(0,0,0,.2); border-left:none;; border-right:none; -webkit-border-radius: 2px; color:rgba(0,0,0,.4); background:none;}	
.search-wrapper:hover #q {color:rgba(0,0,0,.8)}
.search-wrapper:focus {z-index:20;}
.search-wrapper input[type="submit"] {position:absolute; right:0; top:5px; width:35px; border:none; background:url(img/icons.png) -48px 5px no-repeat; z-index:21; text-indent:-9999px;opacity:.3;-webkit-transition:opacity 0.3s ease-in-out;}
.search-wrapper:hover input[type="submit"] {opacity:.5;}
.search-wrapper input[type="submit"]:hover {opacity:1;}


/* !footer =================== */

.content_sub .sub_inner {width:960px; height:100%; margin:0 auto 20px; text-align:left;}
.sub_inner > section {display:table-cell; border-collapse:collapse; width:310px; padding:0 10px;} 
#twitter h3 {position:absolute; left:0; top:59px; width:100%; height:1px; border-bottom:1px dashed rgba(0,0,0,.18);}


/* !about ---------- */
.contact-links {margin:0 0 0 10px; padding:1px 0 0;}
.contact-links li {list-style-type:none; margin:3px 0 0 3px; padding-left:30px;}
.contact-links li:nth-child(1) {background:url(img/icons.png) 1px -757px no-repeat;}
.contact-links li:nth-child(2) {background:url(img/icons.png) left -190px no-repeat;}
.contact-links li:nth-child(3) {background:url(img/icons.png) 1px -273px no-repeat;}

ul.portfolio {position:relative; height:60px; margin-bottom:20px;}
.portfolio li {position:absolute; top:0; width:84px; padding:4px 4px 0px; float:left; margin:0; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;  background:rgba(0,0,0,.1); -webkit-transition:all .5s ease;}
.portfolio li:hover {width:160px; height:auto; margin:-20px 0 0 -40px; padding:6px 6px 34px; background:rgba(50,70,80,.80); z-index:10;}
.portfolio li:nth-of-type(1) {left:0px;}
.portfolio li:nth-of-type(2) {left:102px;}
.portfolio li:nth-of-type(3) {left:204px;}

.portfolio li img {position:relative; width:84px; height:55.8px;-webkit-transition-property: width, height; -webkit-transition-duration: .5s, .5s;-webkit-transition-timing-function: ease, ease; -webkit-transition-delay: 0, 0;}
.portfolio li:hover img {width:160px; height:106px;}
.portfolio li h3 {position:absolute; bottom:0px; left:-62px; width:0px; height:0px; opacity:0; text-align:center; line-height:30px;color:#fff;}
.portfolio li:hover h3 {width:300px; height:30px; opacity:1;-webkit-transition:opacity .2s ease; -webkit-transition-delay:.4s; z-index:11; font-weight:normal;}
.portfolio li h3 a {color:#fff;display:none;}
.portfolio li:hover h3 a {display:inline;}
.portfolio li p {margin:0;}


/* !elsewhere ---------- */
#twitter {margin-top:25px; padding:2px 5px 4px; border:1px solid rgba(255,255,255,.18); border-left:none; border-right:none; border-top-color:rgba(0,0,0,.08); -webkit-border-radius:6px; -moz-border-radius:6px;border-radius:6px; background:rgba(50,70,80,.15);}
.stalk-links {margin:-1px 0 0 10px; padding:0 0 0;}
.stalk-links li {list-style-type:none; margin:3px 0 0 3px; padding-left:30px; background:url(img/icons.png) 2px -81px no-repeat;}
.stalk-links li:first-child {margin-top:0px; padding-top:13px;}
.stalk-links li:nth-child(2) {background-position:2px -232px}
.stalk-links li:nth-child(3) {background-position:2px -149px}
.stalk-links li:nth-child(4) {background-position:2px -838px}
.stalk-links li:nth-child(5) {background-position:2px -798px}

/* !blogroll ---------- */
.blogroll ul {float:left; width: 120px; padding-left:20px}
.blogroll ul:nth-type-of(1) {margin-right:20px;}
.blogroll li {color:rgba(230,230,220,1); list-style-type:square;}
.blogroll ul.de li:nth-child(-n+4) {margin-left:-20px; padding-left:20px; list-style-type:none; background:url(img/li_flag2.png) 3px 50% no-repeat;}

/* !copyright ---------- */
.copyright {width:100%; height:60px; border-top:1px solid rgba(0,0,0,.1);}


/* !border view port ---------- */
#viewportborder{margin:0;}
#viewporttop {position:absolute; top:0px; left:0; right:0; display:block; height:5px; border-bottom:1px dashed rgba(0,0,0,.3); background:rgba(0,0,0,.0); z-index:500;}




/* !content area ############################# */

/* !All pages =================== */

/* !images ---------- */
.img, .imgleft {padding:8px; background:rgba(0,0,0,.05); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.imgleft {float:left; margin-right:20px;}
.leftcol {margin-left:-320px; margin-right:0;}
a:hover .img {background:rgba(0,0,0,.1)}
.left {float: left; margin-right: 20px;}
.about_img {float:left; width:140px; height:140px; margin:-30px 0 0 -243px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); border-left:6px solid rgba(0,0,0,.05); border-bottom:6px solid rgba(0,0,0,.05); -moz-box-shadow:inset 0 0 10px #333;}

.art_list p > img {margin-top:5px;}

#article40 .img,
#article41 .img {background:rgba(0,0,0,.1)}
#article40 a:hover .img,
#article41 a:hover .img {background:rgba(0,0,0,.15)}


/* !Homepage =================== */

.art_list li {margin:0 0 49px; padding-bottom: 10px;}
.art_list li:last-child {border-bottom:none;}
.art_list article {}

.art_list footer {position:relative; height:30px; padding:1px; border-top: 1px dashed #aaa; border-bottom: 1px solid #bbb; text-align:center;}
.art_list footer .date {float:left;letter-spacing:0.1em; line-height:30px;}
.art_list footer .comcount {position:absolute; left:50%; margin-left:-20px; width:39px;}
.art_list footer .comcount a {display:block; width:39px; height:44px; margin:-2px 0 -10px; line-height:38px; background: transparent url(img/bubble.png) left top no-repeat;}
.art_list footer .comcount a:hover {border:none; text-decoration:underline;}
.art_list footer .readmore {float: right;margin-right:5px;line-height:30px;}

.art_list .articles img  {float:left; margin:-40px 0 0 -250px; width:160px; height:160px; -webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px;}
.art_list .articles img:hover {}

header p.category_link {float:left; display:block; width:160px; height:160px; margin:-40px 0 0 -250px;-webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; -webkit-background-clip:content-box;-webkit-background-origin:content-box; text-indent:-9999px;}
.category_link a {display:block; width:100%; height:100%;-webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; background:rgba(0,0,0,.05) url(img/big_icons.png) 10px 10px no-repeat;-webkit-background-clip:padding-box; text-indent:-9999px; text-decoration:none; text-align:center;}
.category_link a:hover {border:none; background-color:rgba(180,70,30,.7); -webkit-transition:background-color .4s ease; -moz-transition:background-color .4s ease; text-indent:0;}
.category_link a span {position:relative; top:150px; width:140px; margin:0 auto; padding:5px 10px;border:1px solid rgba(255,255,255,.2); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;-webkit-transition:all .3s ease-in-out; opacity:0; background:rgba(0,0,0,.95);}
.category_link a:hover span {top:130px; opacity:1;}


/* !posts, articles ---------- */
.articles .category_link a,
.posts .category_link a {background-position:-130px 10px;}
.articles .category_link a:hover, 
.posts .category_link a:hover {background-position:-130px -130px;}

/* !photos ---------- */
.photos .category_link a {background-position:-270px 10px;}
.photos .category_link a:hover {border:none; background-position:-270px -130px;}
.photos a.cutted-img:hover {border:none;text-decoration:none;}
.photos a.cutted-img:after {position:relative; height:10px; top:-20px; content:url(img/zickzack.png);}

/* !quotes ---------- */
.quotes .comcount,
.quotes .readmore {display:none;}
.quotes .category_link {margin-top:-5px;}
.quotes .category_link a:hover {border:none; background-position:10px -130px;}

/* !links ---------- */
.links .category_link a {background-position:-410px 10px;}
.links .category_link a:hover {border:none; background-position:-410px -130px;}





/* !Article Single Page =================== */

article .meta {float:left; display:block; width:160px; height:160px; margin:-40px 0 0 -250px; -webkit-border-radius:80px; -moz-border-radius:80px; background:rgba(180,70,30,.5); text-align:center;}
article .meta:hover {background:rgba(180,70,30,.6);-webkit-transition:background .3s ease;}
article .meta ul {margin:25px auto 0; width:100px;}
article .meta li {list-style:none;}
article .meta li:first-child span:first-child {font-size:36px; font-weight:bold; letter-spacing:-1px; padding:0 2px 0 10px;}
article .meta li:first-child span:nth-child(2) {color:rgba(0,0,0,.5);}
article .meta li.de span:nth-child(2) {font-size:30px;}
article .meta li:first-child span:nth-of-type(3) {font-size:12px;text-transform:uppercase;letter-spacing:0.2em;}
article .meta li:nth-child(1) {padding-bottom:5px; border-bottom:2px solid rgba(0,0,0,.2);}
article .meta li:nth-child(2) {margin-top:5px;}
article .meta li:nth-child(2) a, 
article .meta li:nth-child(3) a {color:#faf9f0; font-size:14px; letter-spacing:normal; font-style:italic;}
article .meta li:nth-child(3) span {position:relative; top:30px; left:-60px; display:block; width: 200px; padding:5px 10px; border:1px solid rgba(255,255,255,.2); -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .3s ease-in-out; opacity:0; background:rgba(0,0,0,.95);color:#faf9f0; z-index:20;}
article .meta li:nth-child(3):hover span {top:10px; opacity:1;}



/* !Comment Form ---------- */
.comments-wrapper {margin-top:40px;}
.comment_form {margin-top:10px; height:350px;}
.comment_form li {float:left; width:300px; height:65px;}
.comment_form li:first-child {height:220px; margin-right:20px;}
.comment_form li.forget {height:40px;}
.comment_form li.prev_sub {width:300px;margin-top:20px;}
.comment_form label {display:block;}
.forget label {display:inline; height:21px; line-height:21px;}
.comment_form input, .comment_form textarea {width:285px; padding:7px; border:1px solid rgba(255,255,255,1); border-left:none; border-right:none; border-top-color:rgba(0,0,0,.1); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:rgba(0,0,0,.05);}
.forget input {float:none; width:auto; padding:0; border:none; background:none;}
#comments-help {padding-top:2px;}
	
	.prev_sub input {width:110px; color:#faf9f0; border:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:rgba(0,0,0,.7);}
	.prev_sub input:hover { background:#333; color:#fff;}
	.prev_sub input:active {background:#111;}
	.prev_sub input.disabled {color:rgba(0,0,0,.3); background:rgba(0,0,0,.1); border-color:#888;}
	.prev_sub input.disabled:hover, .prev_sub input.disabled:active {color:rgba(0,0,0,.3); cursor:default;}
	.prev_sub span {display:inline-block; width:76px; text-align:center;}
	.prev_sub .button:last-child {float:right;}
	
.comment_form textarea {width:285px; height:200px;}	
.comment_form input[type="text"]:hover, .comment_form textarea:hover {background:rgba(255,255,255, .6);}
.comment_form input:focus, .comment_form textarea:focus { -webkit-box-shadow: 0 0 4px #999; background:rgba(255,255,255, .6);}

/* !comments ---------- */

.gravatar {float:left; margin:2px 20px 5px 0; -webkit-border-radius:2px;}
.comments {list-style-type:decimal; margin-left:-10px;}
.comments li {margin:21px 0 50px; min-height:80px;}
.comments article {padding-left:10px;}
.comments header {height:30px; line-height:30px;margin:0 0 6px -40px; padding-left:40px; border-bottom:1px solid rgba(0,0,0,.2);}

.comments .c-me header {border-bottom:3px double rgba(0,0,0,.3);}

#cpreview {padding-top:20px;}


/* !contact page =================== */

.zemContactForm {padding:12px 0 20px;}	
.zemContactForm legend {display:none;}
.zemContactForm label {float:left; width:100px; overflow:hidden;}	
.zemContactForm input, 
.zemContactForm textarea {display:block; width:358px; margin:-25px 0 0 80px; padding:10px; border:1px solid #aaa; background:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
.zemContactForm input.zemSubmit {width: 380px; font-size:14px; margin-top:-5px; background:rgba(0,0,0,.7); color: #faf9f0; border:none;}
.zemContactForm input.zemSubmit:hover { background: #333; color:#fff;}
.zemContactForm input.zemSubmit:active {background:#000;}
.zemContactForm input[type="text"]:hover, 
.zemContactForm textarea:hover {border:1px solid #999; background:rgba(255,255,255, .6);}
.zemContactForm input:focus, 
.zemContactForm textarea:focus { -webkit-box-shadow: 0 0 4px #999; background:rgba(255,255,255, .6);}

/*for Firefox*/
.zemContactForm input[type="hidden"] {display:none;}