.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

h1, h2, h3, h4, h5, h6, p, a, li, span, div, input, textarea { color: #626262; }
p, a, li, span, div, input, textarea { font-weight: 400; }
h1, h2 {	color: #eaeaea; }
h1 { font-size: 60px; margin-top: -3px; margin-bottom: 10px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; margin-bottom: 15px; font-weight: 500; }
h4 { font-size: 14px; margin-bottom: 5px; font-weight: 500; }
p { font-size: 13px; margin-bottom: 10px; }
ul { margin: 12px 0px 15px 30px; }
ul li { margin-bottom: 7px; font-size: 12px; }
.button { font-size: 13px; text-decoration: none; display: block; float: left; background-color: #252525; text-align: center; padding: 8px 0; width: 100%; color: #eaeaea; }
p a { outline: 0; text-decoration: none; font-weight: bold; }
blockquote { color: #808080; font-style: italic; margin: 12px; margin-left: 24px; padding-left: 12px; border-left: 3px solid #a5a5a5; }

.scroll-on { height: 202px; overflow: hidden; position: relative;}
.scroll-bg, .scroll-fg {	 position: absolute; right: 0px; top: 0px; width: 6px; }
.scroll-bg { height: 100%; background-color: #dadada; }
.scroll-fg { background-color: #a5a5a5; }

html, body { height: 100%; }

#main { width: 600px; height: 420px; margin: auto; position: relative; 
	top: 70px; }
#innerShadow { position:absolute; width:100%; height:100%; background-image: url('../img/background-shadow.png'); background-size: 100% 100%;}
#shadow { position: absolute; bottom: -31px; left: -11px; }

header { position: relative; top: 130px; margin: 0px 12px 0px 12px; }
header a { text-decoration: none; }
#hs { float: right; text-align: right; margin-top: 10px; margin-right: 18px; }
nav { float: right; position: relative; margin:0px; height: 110px; width: 105px; }
nav #bg { width: 0%; height: 100%; background-color: #eaeaea; }
#menu-pixels { float:right; height: 110px; overflow:hidden; width: 0px; }
nav ul { position: absolute; top: 0px; left: 0px; margin: 0px; }
nav ul li { margin-bottom: 1px; }
nav ul li a { color: #eaeaea; font-size: 12px; height: 20px; width: 93px; padding-left: 11px; padding-top: 6.75px; display: block;
	background: -moz-linear-gradient(-45deg,  rgba(234,234,234,0.25) 0%, rgba(234,234,234,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(234,234,234,0.25)), color-stop(100%,rgba(234,234,234,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(234,234,234,0.25) 0%,rgba(234,234,234,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(234,234,234,0.25) 0%,rgba(234,234,234,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(234,234,234,0.25) 0%,rgba(234,234,234,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(234,234,234,0.25) 0%,rgba(234,234,234,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40eaeaea', endColorstr='#00eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
nav ul li a:hover { 
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
article { background-color: #eaeaea; position: absolute; top: 121px; left: 12px; width: 576px; height: 0px; overflow:hidden; }

.last {	margin-right: 24px; }
.full { width: 528px; margin: 24px; }
.one-third, .two-third , .half{ display: inline-block; margin: 35px 0px 24px 24px; float: left; }
.half { width: 264px; }
.one-third {	width: 168px; }
.two-third {	width: 336px; } 

.image-slider { text-align: center; position: relative; height: 214px; }
.image-slider .images { position: absolute; left: 50%; }
.image-slider .images img {  max-width: 168px; max-height: 198px; position: relative; left: -50%; }
.image-slider .slider-buttons { position: absolute; top: 205px; left: 50%; display: inline-block; margin: 0; }
.image-slider .slider-buttons li { float: left; position: relative; left:-50%; width: 9px; height: 9px; background: #cfcfcf; margin: 0px 2px; }
.image-slider .slider-buttons li span {	display:none; }

.resumeH3 { clear: both; }
.post .date { float: left; width: 27%; text-align: right; margin: 3px 12px 6px 0; }
.post .text { float: left; width: 69%;  margin: 3px 0 6px 0; }
.post .text p { color: #888888; font-size: 12px; }
.post h4 { margin-bottom: 6px; }

.skill { width: 96%; background-color: #ccc; font-family: 'Droid Sans',sans-serif; font-size:13px; height: 15px; padding: 5px 3px 3px 5px; overflow: hidden; position: relative; margin-bottom: 5px; border-radius: 7px;cursor:pointer; }
.skill .fg { height: 100%; width: 0%; background: #cccccc; position: absolute; top: 0px; left: 0px; z-index: 0;
	border-radius: 7px; 
}
.skill h4 { position: absolute; z-index: 1; color: #555; left: 4px; top: 4px;}
.skill span { display: none; }

.portfolio { margin: 0px; }
.portfolio li { float: left; width: 100%; margin: 0px; padding: 0px; position: relative; margin-bottom: 6px; background: #e1e1e1; }
.portfolio li div { position: relative; float: right; width: 65%; overflow: hidden; }
.portfolio li .title { margin: 12px; top: 0px; }
.portfolio li .text { display: none; }
.portfolio li .description { position:relative; left: 12px; }
.portfolio li a {margin: 0px; padding: 0px; }
.portfolio li a img { float: left; max-width: 35%; margin: 0px; padding: 0px;}

.buttons { position: absolute; top: 0px; right: 0px; } 
.buttons a { display: block; width: 27px; height: 27px; background-color: #444444; }
#port-close { background-image: url("../img/close.png"); background-repeat: no-repeat; background-position: 6px 6.5px; }
#port-full-size { background-image: url("../img/full-size.png"); background-repeat: no-repeat; background-position: 5px 6px; }
#port-next { position: absolute; background-image: url("../img/arrow-right.png"); background-repeat: no-repeat; background-position: 7.5px 4px; }
#port-prev { position: absolute; background-image: url("../img/arrow-left.png"); background-repeat: no-repeat; background-position: 7.5px 4px; }

#portfolio-item-full { width: 100%; height: 100%; background: #1e1e1e; position: absolute; top: 0px; text-align: center; display: none; overflow: hidden; 
	-khtml-opacity:.50; 
	-moz-opacity:.50; 
	-ms-filter:"alpha(opacity=50)";
	filter:alpha(opacity=50); 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
	opacity:.50; }
#portfolio-item-full .theImg { position: relative; max-width: 600px; max-height: 320px;  }
#portfolio-item-full .scroll-on { margin: 10px; }
#portfolio-item-full .scroll-bg { background: #444; }
#portfolio-item-full .scroll-fg { background: #aaa; }
#portfolio-item-full p { position: relative;	color: #777; font-size: 12px; text-align: center;}
#portfolio-item-full h3 {  position: relative; font-size: 14px; margin: 8px; color: #ebebeb; }

form { position: relative; }
form input { width: 172px; height: 17px; padding: 2px; float: left; margin-top: 0px; margin-top: 6px; }
form input, form textarea { font-size: 12px; background: #f1f1f1; border: 1px solid #666; }
form textarea { width: 258px; padding:2px; height: 80px; margin-bottom: 0px;}
form a { text-decoration: none; position: absolute; right: 0px; display: block; float: right; width: 78px; height: 34px; background-color: #cccccc; text-align: center; padding-top: 16px; color: #232A3C; font-weight:bold; border:1px solid #cccccc; margin-top: 6px; }

.personal-info li { position: relative; font-size: 13px; margin-left: 30px; margin-top: 33px; }
.personal-info p { margin-bottom: 6px; }
.personal-info #email { position: absolute; left: -49.5px; top: -5px;  }
.personal-info #phone { position: absolute; left: -52px; top: -6px;  }
.personal-info #adress { position: absolute; left: -52px; top: 12px;  }

footer { position: absolute; bottom: 12px; left: 12px; }
footer ul { margin: 0px; }
footer ul li { display: inline; margin: 0px; }
footer ul li a { float: left; width: 32px; height: 32px; margin-right: 5px; }

/*custom css*/
.image img {
    max-height: 198px;
    max-width: 168px;
    position: relative;
}

.message {
	padding: 0 0 10px 0;
	/*color: #85B200;*/
}
.active{background: none repeat scroll 0 0 #4E5B7D; color:#fff;}
.skill:hover{background: none repeat scroll 0 0 #4E5B7D; color:#fff;}

.active .fg{
    /*background: none repeat scroll 0 0 #4E5B7D;*/
	background:none transparent;
    border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 0;
}
.skill .fg:hover{
    /*background: none repeat scroll 0 0 #4E5B7D;*/
	background:none transparent;
    border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 0;
}

.post .full_text { float: left; width: 100%;  margin: 3px 0 6px 0; }
.post .full_text p { font-size:15px;}
.post .full_text h4 { font-size:16px;}
#pages h3 { font-size:20px;}