/* CSS INFORMATION
	- Project: VCard Template Vento
	- Author: lmtheme
	- Last Update: 27/10/2012
*/

/* general
================================================== */
body{
	font-family:'Droid Sans', Helvetica, sans-serif;
	background-color:#e9e9e9;
	background-attachment:fixed;
	background-image:url('../images/bg/bg3.jpg');
	overflow:hidden;
}
button:active, button:focus {outline:0;}
img:active, img:focus {outline:0;}
:active, :focus {outline:0;}

.clear{
	clear:both;
}
.hidden{
	display:none;
}
.left{
	float:left;
	margin-right:10px;
}
.right{
	float:right;
	margin-left:10px;
}
img{
	vertical-align:middle;
}
strong{
	font-weight:bold;
}
h1,h2,h3,h4,h5,h6{
	font-family:'Lato', Helvetica, sans-serif;
	color:#333333;
	margin-bottom:10px;
	font-weight:300;
}
h1{
	font-size:24px;
	line-height:27px;
}
h2 {
	font-size: 22px;
	line-height:25px;
}
h3 {
	font-size: 20px;
	line-height:23px;
}
h4 {
	font-size: 17px;
	line-height:20px;
}
h5 {
	font-size: 15px;
	line-height:18px;
}
h6 {
	font-size: 14px;
	line-height:17px;
}
p{
	font-size:13px;
	line-height:20px;
	color:#666666;	
}
a:link, a:visited{
}
a:hover{
}
hr{
	height:1px;
	border:none;
	background:none;
	padding:0px;
	/*margin:500px 0px;*/
}

/* button
================================================== */
a.button{
	cursor:pointer;
    font-family:'Lato', Helvetica, sans-serif;
	font-size: 14px;
	font-weight:normal;
	text-decoration:none;
	color: #ffffff;
	margin-top:15px;
}
a.button:hover{
    background: #333;
}

/* portrait
================================================== */
.tframe_1{
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	width:200px;
	height:200px;
}

/* general content
================================================== */
.area{
	margin-bottom:60px;
}
.ribbon{
	top:-70px;
    position:absolute;
	z-index:11000;
}
.areaContent{
	width: 800px;
	background-image:url('../images/bg-content.jpg');
	border-top:10px solid #eaeaea;
	border-bottom:10px solid #eaeaea;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}

/* home
================================================== */
#my_name {
    margin-bottom: 80px;
    margin-top: 80px;
    text-align: center;
}
#my_name h1 {
    background-image: url("../images/logo.png");
    background-position: center center;
    background-repeat: no-repeat;
    color: #333333;
    font-family: 'Lato',Helvetica,sans-serif;
    font-size: 50px;
    font-weight: 100;
    height: 220px;
    line-height: 50px;
    text-indent: -2222em;
}
h1 .jobTitle {
    font-size:21px;
	text-decoration:none;
    color:#333333;
	font-weight:200;
    text-transform: none;
	font-family: 'Lato', sans-serif;
}

/* about
================================================== */
.portrait{
	width:200px;
	height:200px;
	float:left;
	margin:0px 0px 30px 40px;
}
.generalInfo{
	width: 480px;
	float:left;
	margin:0px 0px 30px 30px;
}
.skillsInfo{
	width:150px;
	margin:0;
	position:relative;
	float:left;
	margin:0px 0px 0px 30px;
} 
.employment, .education{
	padding:0px 30px 0px 40px;
}
.detailsCol {
}
.detailsCol h3 {
    font-size: 14px;
    margin-bottom: 4px;
}
.employment_ul h3{
    background-image: url(../images/case.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:20px;
}
.education_ul h3{
    background-image: url(../images/bookmark.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:20px;
}
.detailsCol ul {
    font-size: 12px;
}
.detailsCol ul li {
    display: block;
    margin: 0 20px 10px 0px;
}
.detailsCol span {
    display: block;
    margin-left:20px;
}
.detailsCol span.date {
    color: #999999;
    margin-top: 4px;
}
.skillCol { 
    width:154px; 
}
#skill { 
	list-style:none; 
	padding-top:20px;
}
#skill li { 
	margin-bottom:30px; 
	background:#f7f7f7;
	height:5px; 
	border-radius:5px; 
	border:2px solid #888; 
}
#skill li em { 
	position:relative; 
	top:-22px;
	margin-bottom:3px;
	font-size:13px;
	color:#666666;
}
.expand { 
	height:3px;  
	background:#d0d0d0; 
	position:absolute;
	margin-top:1px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
}
.html5       { width:70%;}
.css3        { width:40%;}
.jquery      { width:50%;}
.photoshop   { width:80%;}
.dreamweaver { width:100%;}

/* bx Slider - general
================================================== */
.bx-wrapper{
	padding:20px;
}

/* bx Slider - portfolio
================================================== */
.portfolioPanel{
	width:210px;
	padding:10px;
	padding-right:30px;
	padding-bottom:0px;
}
.portfolioContent{
	width:210px;
	height:170px;
	padding-bottom:30px;	
}
.portfolioImage{
	background-image:url('../images/black-tile.png');
	width:210px;
	height:160px;
	padding:5px;
	margin:10px;
}
.portfolioText{
	position:relative;
	margin-top:-145px;
	padding-left:10px;
	color:#FFFFFF;
}
.portfolioText h4{
	margin-bottom:6px;
	color:#FFFFFF;
}
.portfolioText p{
	margin-bottom:6px;
	color:#FFFFFF;
}
.overlay{
	position:absolute;
	width:210px;
	height:160px;
	margin:15px;
	background-color:#333333;
	opacity:0.9;
}
.lens{
	margin-left:170px;
	margin-top:120px;
}

/* contact
================================================== */
.contactInfo{
	width:340px;
	float:left;
	margin:40px 0px 40px 40px;
}
.contactInfo h4{
	margin-bottom:12px;
}
.contactInfo p{
	margin-top:12px;
}
.contactInfo .scroll-pane{
	height: 120px;
}
.contactIcon{
	margin-right:10px;
}
.social_icons{
	margin-top:30px;
}
.social li{
	display:inline;
	margin-left:5px;
}
.sub {
    color: #BBBBBB;
    font-size: 16px;
    font-weight: normal;
}
.contactNoIcon{
	color: #999999;
}

/* contact form
================================================== */
.contactForm{
    width:345px;
	float:left;
	margin:40px 0px 40px 30px;
}
/*CSS for Error notification*/
.notification_error{
    border: 1px solid #f1dfc5;
    height: auto;color: #ca5702;
    padding: 10px;
    margin: 10px auto;
    text-align:left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom:10px;}
 
/*CSS for Successfully sent notification*/
.notification_ok{
    border: 1px #cbcf8e solid;
    height: auto;padding: 10px;
    margin:0 auto;
    background: #f5f9fd;
    text-align: center;-moz-border-radius:
    5px;margin-bottom:10px;}
  
  /*CSS for textarea (Name and email)*/
textarea{
    width:336px;margin: 10px auto;
    padding: 5px;
    border: 1px solid #cccccc;
    color: #333333;
    font: 13px 'Droid Sans', Helvetica, sans-serif;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing : content-box;
    box-sizing : content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;}
 
/*CSS for textbox (Message)*/
.textbox {
    width:336px;height:25px;
    margin: 10px auto;
    padding: 5px;
    border: 1px solid #cccccc;
    color: #333333;
    font: 13px 'Droid Sans', Helvetica, sans-serif;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing : content-box;
    box-sizing : content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6);
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;}

.textbox2 {height:110px;}
 
/*CSS for submit button*/
.button {
	cursor: pointer;
	font-family:'Lato', Helvetica, sans-serif;
	display:block;
	padding:5px 20px;
	font-size:14px;
	border:1px solid #C8C8C8;
	color:#FFFFFF;
	text-align:center;
	background:#999999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
} 
.button:hover{
    background: #333;
}


/*=====================================================================================*/

/*overriten*/

.jspVerticalBar {
    right: 5px;
}
.jspDrag {
    background: none repeat scroll 0 0 #666666;
    left: -3px;
    width: 8px;
}