*, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body {line-height: 1}
:focus {outline: 0;color: #0CA8E5;text-decoration:none;}
ol, ul {list-style: none}
table {border-collapse: collapse;border-spacing: 0}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
input, textarea {margin: 0;padding: 0}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
strong{font-family:inherit;font-size:inherit;color:inherit;}

/* CSS DOCUMENTATION:

* GENERAL
** HEADER
*** PORTFOLIO
**** FOOTER
***** TYPOGRAPHY
*/


/*************************************************************
* GENERAL
**************************************************************/
/*reduce the default browser font size from 16px to 10px because
we are working in em and we need a rounded measure*/
body{font-size: 62.5%;background-color:#e5e5e5;}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}
.float-left{float:left;}
.float-right{float:right;}
.hidden{visibility:hidden;}
/* advanced clearfix for fix floating elements */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.clear{clear:both;}/*basic way for clearing floats*/

#wrapper-content{
	height:auto;
	width:960px;
	margin:0 auto;
	text-align:left;
	padding:0px;
	}
/*Using font-generator from fontsquirrel you can use any font you want. Just change this font.face declaration. And use new in body element*/
@font-face {
	font-family: 'MuseoSlab-500';
	src: url('font/MuseiSlab-500.eot');
	src: local('☺'), url('font-face-museo/MuseoSlab-500.woff') format('woff'), url('font/MuseoSlab-500.ttf') format('truetype'), url('font/MuseoSlab-500#webfonteVq9mYG3') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*When you have your new generated font just need to change it here*/
body {font-family: 'MuseoSlab-500', Helvetica, Arial, sans-serif;font-size: .6em;#font-size: .7em;font-style: normal;background-color: #fff;}

/*************************************************************
* HEADER
**************************************************************/
header{position:relative;min-height:160px;padding:0px;}
h1 a{display:block;font-size:5.2em;#font-size:3em;line-height:1em; letter-spacing:-1.5px;text-decoration:none;float:left;}/*title in the head*/
h1 strong{display:block;}
div#head-content{width:820px;margin:0 auto 0 auto;padding-top:30px;}
header p{font-size:1.7em;#font-size:1.5em;line-height:1.3em;margin-top:35px;#margin-top:-20px;padding-bottom:25px;}/*text in head*/
header p small a{text-decoration:none; color:#999;}
header p small a:hover{color:#FFF;}
header ul{display:block; clear:both; width:78px;height:25px;float:right;margin:-60px 10px 0 0;}
header ul li{display:block;float:left;margin-right:1px;}
header ul li a{display:block;width:25px;height:25px;text-indent:-9999px;background:url(../images/ico-social-small.png) top left no-repeat;}
header ul li.ico-twitter a{background:url(../images/ico-social-small.png) -25px 0px no-repeat;}
header ul li.ico-mail a{background:url(../images/ico-social-small.png) -50px 0px no-repeat;}
header ul li.ico-facebook a:hover{background:url(../images/ico-social-small.png) 0px -26px no-repeat;}
header ul li.ico-twitter a:hover{background:url(../images/ico-social-small.png) -25px -26px no-repeat;}
header ul li.ico-mail a:hover{background:url(../images/ico-social-small.png) -50px -26px no-repeat;}
#logo{display:block;float:left; clear:both; height:150px; width:150px; background:url(../images/logo.png) no-repeat; padding-right:10px;}



/*************************************************************
** PORTFOLIO
**************************************************************/
section#portfolio{position:relative;height:auto;}
.board {
	left: 10px;
	margin-top: 20px;
	margin-bottom: 0px;	
	width: 100%;
	position: relative;
	border: 0px solid #ff0;
	padding-bottom:100px;
}

.thumb {
	width: 180px;
	height: 180px;
	background: #333;
	float: left;
	margin-bottom: 10px;
	position: relative;
	background-image: url(../images/wait.gif);
	background-repeat: no-repeat;
	background-position: -400px -400px;
	overflow: hidden;

} 

.thumb .close {
	display: none; 
	position: absolute;
	right: 20px;
	bottom: 20px; cursor: pointer;
	width: 19px; height: 19px;
	background-image: url('../images/close.png');
	background-repeat: no-repeat;
	background-position: 0 0;
}
.thumb .close:hover {
	background-position: 0 -19px;	
}

.thumb .close {
	display: none; 
	position: absolute;
	right: 20px;
	bottom: 20px; cursor: pointer;
	width: 19px; height: 19px;
	background-image: url('../images/close.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 9;
}
.thumb .image {
	z-index: 9;
	cursor: pointer;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 160px;
	height: 160px;
}
.thumb .image img {
	width: 180px;
}
.thumb .image .image-label {
	position: absolute;
	left: 0;
	bottom: -200px; 
	color: #fff;
	/*background-color: #111;*/
	background-image: url('../images/zoom.png');
	background-repeat: no-repeat;
	background-position: 0px 3px;
	width: 180px;
	padding-top: 10px;
	padding-bottom: 15px;
	text-align: left;
	z-index: 1;
	font-size: 12px;
	color: #ccc; 
	text-shadow: #000 2px 2px;
	padding-left: 10px;
	border: 0px solid #ccc;
}
.thumb .image .image-label span {
	/*position: absolute;
	left: 0;
	top: 50%;
	height: 13px;
	margin-top: 0px;
	text-align: center;
	width: 180px;*/
	
}
.thumb .image .selcat {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 180px; height: 180px;
	background-image: url('../images/off.png');
	display: none;
	z-index: 2;
}
	/* first image (full coverage) */
	.thumb .image-first {
		width: 180px; height: 180px; left: 0; top: 0;
	}
	.thumb .image-first img {
		width: 180px; height: 360px;
	}
	.thumb .image-first .image-label {
		left: 0px; bottom: -110px; padding-bottom: 12px; width: 160px;
	}
.thumb .image .new {
	position: absolute;
	right: -10px;
	top: -10px;
	width: 50px; height: 50px;
	background-image: url('../images/new.png');
	z-index: 3;
}
/*.thumb .image:hover {
	margin-top: -170px;
}*/

.thumb .info {
	display: none;
	position: absolute;
	bottom: 25px;
	left: 20px;
	width: 710px;
}
.thumb .info h2 {
	font-size: 17px; color: #fff; margin-bottom: 5px;
	letter-spacing: 0.3px;
}
.thumb .info a { 
	text-decoration: none;
	color:#0CA8E5;
}

.thumb .info a:hover{
		font-weight:bold;	
}

.thumb .info a.exit {
	background-image: url('../images/link.gif');
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 10px; 
}
.thumb .info .descr {
	font-size: 12px; 
	line-height: 16px;
	color:#fff;
}	
.thumb .cycle {
	display: none;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 710px;
	height: 460px;
	z-index:-5;
}

.thumb .info .prev, .thumb .info .next { 
	position: absolute;
	top: -480px; cursor: pointer;
	z-index: 9999999;
	width: 355px; height: 460px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-position: 0px -460px;

}
.thumb .info .prev { left: 0px; background-image: url('../images/prev.png'); }
.thumb .info .next { left: 355px;	background-image: url('../images/next.png'); }
.thumb .info .prev:hover, .thumb .info .next:hover {
	background-position: 0 0px;	
}
.thumb .info .prev img, .thumb .info .next img {
	display: block;
	width: 355px; height: 460px;
}
.thumb .info .teller { 
	position: absolute;
	top: 0px; right: 0px; /* 659 */
	text-align: right; width: 150px; /* width was 50 */ font-size: 11px;
	border: 0px solid #f00; color: #fff;
}


/* cat filter is fun! */

.filter {
	height: 14px;
	font-size: 12px;
	/* text-shadow: #fff 1px 1px 1px; */
	margin-top: 30px;	
	color: #fff;
	background: #333;	
	border: 0px solid #f00;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;

}
.filter span {
	color: #666;
	cursor: pointer; 
	padding-right: 10px;
}
.filter span:hover {
	color: #fff;
}
.filter span.sel_cat1 {
	color: #fff;
}

.item_url {
	display: none;	
}

/* text div */

.textdiv {
    background-image: none;
}

.textdiv .text  {
	display: none;
	color: #fff;
	margin: 0px; /* was 20 */
	height: 330px; /* was 235px */
	padding: 20px;
	color: #1f1a14; text-shadow: #e4d520 1px 1px 1px;
	background-repeat: no-repeat;
	background-position: 50px 280px;
}

.textdiv .text .content {
	width: 320px;
	position: absolute;
	right: 50px;
	top: 60px;
	text-align: left;
}	
.textdiv .text .content h1, .textdiv .text .subcontent h3 {
	font-size: 22px;
	margin-bottom: 20px;
	line-height: 27px;
	text-align: left;
}
.textdiv .text .subcontent h4  /* @network */ { font-size: 22px; margin-bottom: 10px; line-height: 27px; text-align: left;}

.textdiv .text .content p, .textdiv .text .subcontent p, .textdiv .text .subcontent ul li {
	line-height: 24px; width: 320px; text-align: left;
}
/*
.textdiv .text .content p {
	width: 335px;
} 
*/
.textdiv .text .content p a, .textdiv .text .subcontent p a, .textdiv .text .subcontent ul li a {
	color: #1f1a14;
}
.textdiv .subcontent p.ffflinks a { color: #fff; }

.textdiv .text .textmenu {
	width: 110px;
	position: absolute;
	left: 50px;
	top: 63px;
}
.textdiv .text .textmenu ul {

}
.textdiv .text .textmenu ul li {
	margin-bottom: 7px;
	padding-bottom: 7px;
	border-bottom: 1px solid #e4d520;
	height: 12px;
	cursor: pointer;
	white-space: nowrap;
}
.textdiv .text .textmenu ul li.first {
	font-size: 21px;
	height: 21px;
	font-weight: bold;
}
.textdiv .text .textmenu ul li:hover {
	text-decoration: underline;
}
.textdiv .text .subcontent {
	display: none;
	width: 320px;
	position: absolute;
	right: 50px;
	top: 60px;	
}
.textdiv .text .subcontent ul li {
	white-space: nowrap;
}
.textdiv .text .subcontent ul {
	margin-top: -3px;
}
.textdiv .text .subcontent .cybox {
	position: absolute;
	right: -12px;
	top: 55px;
}
.textdiv .text .subcontent .tweetoverlay {
	position: absolute;
	right: -50px;
	top: 100px;
}
.textdiv .close {
	background-image: url('../images/close-info.png');
	background-position: 0 0px;
	bottom: 20px;
	right: 20px;
}
.textdiv .close:hover {
	background-position: 0 -19px;
}
.textdiv .info {
	color: #1F1A14;
	bottom: -35px; /* to restore: 35px; */
	left: 50px;
	border-top: 0px solid #e4d520;
	padding-top: 8px;
	width: 450px;
	display: none;
}
.textdiv .info a { 
	color: #1F1A14; text-decoration: none;
}
.textdiv .image img.first {
	padding: 0; margin: 0;
}

/* extra stuff */

.extra, .extra-still {
	width: 180px;
	height: 180px;
	background-color: #111;
	float: left;
	margin-bottom: 10px;
	overflow: hidden;
	z-index: 5;
}
.extra .image, .extra-still .image {
	padding: 0px;
}


/* ie6 notice */

.ie6 {
	color: #006BFF; background-color: #fff; padding: 20px; font-size: 11px; line-height: 16px; position: absolute; top: 10px; left: 10px; z-index: 9;
}
.ie6 a {
	color: #0024ff;
}
.ie6 a:hover {
	color: #333;
}
.close-ie6 { color: #0024ff; background: #006BFF; padding: 5px;  }

/******************* footer *******************/
footer{position:relative;min-height:200px;background-color:#222; padding-bottom:20px; width:960; float:left; width:960px; display:none;}
footer h4{font-size:2em;letter-spacing:-1px;padding:30px 0 20px 70px;color:#fff;}
footer ul{display:block;font-size:1.4em;#font-size:1.2em;line-height:1.5em;color:#fff;letter-spacing:0px;}
footer section#footer-contact-section{width:800px;float:left; margin: auto;}
footer ul#contact-info{margin:0 0 0 70px;}
footer ul#contact-info li{line-height:19px;padding-left:0px;}
footer ul#contact-info li a{text-decoration:none;color:#666;}
footer section#footer-location-section{width:200px;float:left;margin-left:70px;}
footer section#footer-location-section h4{width:100px;#width:120px;margin-left:0px;}
footer section#footer-location-section ul{margin-left:20px;}
footer section#footer-etc-section{width:200px;float:left;}
footer section#footer-etc-section h4{width:200px;margin-left:-70px;}
footer section#footer-etc-section ul{margin-left:0px;}
footer section#footer-etc-section ul li small{display:block;#display:none;position:absolute;margin:-46px 0 0 130px;width:30px;height:30px;background:url(../images/etc-icon.png) no-repeat center center #474747;}
footer fieldset{margin:0;padding:0;border:0;}
footer label{width:250px; display:block;}
footer .txt_input{width:250px; display:block;}
footer textarea{height:80px; width:250px;}
footer input{display:block;}
footer .req{color:#f00;font-size:90%;}
footer #form_errors{color:#f00; display:none;}
footer #form_thanks{color:#000; display:none;}


/***************** junior resume *******************/
.fixed{}
.all-fixed{visibility:hidden;}
.col-1,.col-2,.col-3,.col-4,.col-5, .col-6 {float:left;}
.col-1{width:100px;}
.col-2{width:300px;}
.col-3{width:300px;}
.col-4{width:400px;}
.col-5{width:700px;}
.col-6{width:200px;}


section#jr{
	position:absolute;
	min-width:100%;
	min-height:100%;
	padding-bottom:100px;
	background:#000;
	color:#e5e5e5;
	z-index:5000;
	#left:0px;
	display:none;	
	}
section#jr div#wrapper-resume{width:960px;margin:0 auto 0 auto;padding-left:50px;}
#jr{font-size:1.5em;line-height:1.4em;#font-size:1.4em;#line-height:1.4em;color:#e5e5e5;}
#jr abbr{border:0;padding:0;}

/*personal info*/
#jr a{
	text-decoration:none;
	color:#474747;
	-moz-transition:color 0.1s ease-in-out;
    -webkit-transition:color 0.1s ease-in-out;
    -o-transition:color 0.1s ease-in-out;
	transition:color 0.1s ease-in-out;
	}
#jr a:visited{}
#jr a:hover{text-decoration:none;color:#e5e5e5;}
#jr h2{font-size:2.6em;margin:0 0 1em 0;text-transform:uppercase;margin-top:2em;letter-spacing:-1.7px;}
#jr h3.personal-tag{font-size:1em;}
#jr .contact, #jr .vcalendar, #jr .skills{padding:1em 0;overflow:hidden;}
#jr .tel, #jr span.street-address, #jr span.locality, #jr span.region, #jr span.postal-code, #jr span.country-name, #jr span.url{display:block;color:#9D9D9D;}
#jr .contact .type{display:none;}
#jr section.contact ul{list-style-type:none;padding:0;margin:0;}
#jr section.contact section section{padding:0 0 1em 0;overflow:hidden;}
#jr .contact{float:left;margin-right:210px;}

/*skills*/
#jr section.skills ul{list-style-type:none;padding:0;margin:0;color:#474747;}
#jr section.skills section{padding:.3em 0 1.5em 0;overflow:hidden;}
.tabbed{text-indent:0px;}

/*experience*/
#jr article.vcalendar{float:left;margin-right:100px;}
#jr .experience{margin:0 0 2.5em 0;overflow:hidden;}
#jr .experience .period{#font-size:.9em;color:#474747;font-style:italic;}
#jr .experience hgroup{margin:0 0 1.1em 0;}
#jr .experience hgroup h3, #jr .education hgroup h3{font-size:1.3em;line-height:1.3em;}
#jr .experience hgroup h4, #jr .education hgroup h4{font-size:0.9em;}
#jr .experience .description{padding:0 1.1em 0 0;margin-top:10px;color:#888; font-size:.8em; line-height:1.5em;}
#jr .experience .description li{list-style-type:square;}
#jr .experience .notes{color:#9D9D9D;font-style:italic;display:none;}

/*education*/
#jr .education{margin:0 0 1.1em 0;overflow:hidden;}
#jr .education .description{color:#474747;margin-top:10px;}
#jr .education .period{#font-size:.9em;color:#474747;font-style:italic;}

#jr .close-btn{position:absolute;}
#jr .close-btn a{display:block;font-size:1.2em;padding:5px;}
#jr .close-btn a:hover{color:#e5e5e5;}
#jr .c-btn-top{/*width:200px;margin:0 auto 0 auto;*/top:35px;right:17%;}
#jr .c-btn-bottom{bottom:50px;right:20%;}

/************COLOR SCHEME**************/

/*colors are agrouped for a better organization with theme schemes changes*/
h1 a{color:#666;}/*color for main title*/
h1 strong{color:#fff;}/*color for the name in main title*/
a.caption-title{color:#fff;border-bottom:1px dotted #fff;}/*color for caption in info panel on hover*/
header{background:#222; z-index:1;}
header p{color:#999;}
section#portfolio{background:#222;padding-top:10px;}
div#pagination span.arrow a:hover{color:#fff;}