/*
-------------------------------------------------------------------------------------------------
Theme Name:   Professional vCard
Theme URI:    http://labs.markdijkstra.eu/professional-vcard/index.html
Description:  vCard template.
Version:      Version 1
Style:        Light / right navigation
Author:       Mark Dijkstra
Author URI:   http://www.markdijkstra.eu
Updated:      --/--/----
Copyright:    (c) 2010 Mark Dijkstra
-------------------------------------------------------------------------------------------------

All rights reserved.

*/

@import url("tipsy.css");/* tooltip */
@import url("prettyPhoto.css");/* lightbox */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

html{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#6b6b6b;
	line-height:20px;
	background:#e7e7e7 url(../images/silhouette.png) no-repeat top left;	
}
body{
}
input, 
textarea{
	outline:none;/* preventing the chrome and safari nasty yellow border */
	border:1px solid #ccc;
	background:#FFF;
}
a:focus{
	outline:none;
}
a, 
a:visited, 
a:active{
	color:#6b6b6b;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
/* this will be added by javascript
.corners{
	 -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
}
.corners-r{
	 -moz-border-radius-topright: 5px;
	 -moz-border-radius-bottomright: 5px;
     -webkit-border-top-right-radius: 5px;
	 -webkit-border-bottom-right-radius: 5px;
}
*/
/*
------------------------------------------------------------------------
WRAPPER - Content wrap CSS style.
------------------------------------------------------------------------
*/

div#wrapper{
	margin-top:525px; 
	margin-left:275px;
	width:620px;
	position:relative;
}

/*
------------------------------------------------------------------------
Card - Card content wrap CSS style.
------------------------------------------------------------------------
*/

div#card{
	width:560px;
	height:255px;
	float:left;
	background:#fff;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	position:relative;
	margin-left:29px;
	overflow:hidden;
	z-index:2;
}
div#card-in{
	width:508px;
	height:242px;
	background:#f8f8f8;
	border:1px solid #e8e8e8;
	margin:5px 10px 0px 10px;
	padding-right:30px;
}
ul#menu{
	width:20px;
	list-style-type:none;
	border-top:1px solid #e8e8e8;
	border-left:1px solid #e8e8e8;
	border-bottom:1px solid #e8e8e8;
	position:absolute;
	right:10px;
	top:52px;
	background:#fff;
	padding:10px 1px 0 8px;
}
ul#menu li{
	list-style-type:none;
	width:18px;
	height:18px;
	padding-bottom:5px;
	margin-bottom:4px;
}
ul#menu li.hr{
	list-style-type:none;
	border-bottom:1px solid #e8e8e8;
}
ul#menu li a img{
	width:19px;
	height:19px;
	border:none;
	background:#fff!important;/* IE fade to bug */
}
ul#menu li a{
	float:left;
	width:19px;
	height:19px;
}
div#content{
	width:508px;
	height:242px;
	float:left;	
}
div.tip-logo{
	width:196px;
	height:196px;
	float:left;
	margin:36px 0 0 142px;
	overflow:hidden;
	position:relative;
}
div.tip-logo a,
div.tip-logo a:visited,
div.tip-logo a:active{
	width:196px;
	height:196px;
	float:left;
}
div.tip-logo img#logo-bg{
	position:absolute;
	top:-300px;
	left:0px;
	border:none;
}
div.tip-logo img#logo-frame{
	position:absolute;
	top:0px;
	left:0px;
	border:none;
	z-index:1;
	overflow:hidden;
}

/* boxes/pages */

div.box{
	width:478px;
	height:222px;
	float:left;
	margin:10px 15px 10px 15px;
	position:relative;
	background:#f8f8f8;
}
div.box h2{
	width:100%;
	float:left;
	font-size:18px;
	font-weight:bold;
	color:#6b6b6b;
	margin-bottom:13px;
}
div.box p img.avatar{
	width:60px;
	height:60px;
	margin:3px 10px 5px 0;
	float:left;
	padding:3px;
	border:1px solid #eee;
	background:#FFF;
}
div.box p{
	width:100%;
	float:left;
	text-align:justify;
}
div.box ul{
	width:100%;
	list-style-type:none;
}
div.box ul li{
	float:left;
}

/* work */

div.box .project{
	width:68px;
	height:68px;
	margin:3px 14px 10px 0;
	float:left;
	border:none;
	background:#f8f8f8;
}
div.box .project-last{
	width:68px;
	height:68px;
	margin:4px 0px 10px 0px;
	float:left;
	border:none;
	background:#f8f8f8;
}
div#slider-in{
	overflow:hidden;
}
div#slider-in{
	width:478px;
	height:154px;
	float:left;
}
div#work-nav{
	width:50px;
	height:23px;
	float:left;
	background:url(../images/nav-bg.png) no-repeat;
	margin:12px 0 0 211px;
	padding:2px 3px 0 3px;
}
div#work-nav a#prev{
	width:20px;
	height:20px;
	float:left;
	background:url(../images/prev-btn.png) no-repeat;
}
div#work-nav a#prev:hover{
	background:url(../images/prev-btn-hover.png) no-repeat;
}
div#work-nav a#next{
	width:20px;
	height:20px;
	float:right;
	background:url(../images/next-btn.png) no-repeat;
}
div#work-nav a#next:hover{
	background:url(../images/next-btn-hover.png) no-repeat;
}

/* Social */

a.social-box-left{
	width:226px;
	height:38px;
	float:left;
	margin:3px 20px 5px 0;
	color:#666;
	border:1px solid #e5e5e5;
	background:#fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
a.social-box-right{
	width:226px;
	height:38px;
	float:left;
	margin:3px 0 5px 0;
	color:#666;
	border:1px solid #e5e5e5;
	background:#fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
a.social-box-left img,
a.social-box-right img{
	width:32px;
	height:32px;
	float:left;
	margin:4px 10px 0px 4px;
	border:none;
}
a.social-box-left strong,
a.social-box-right strong{
	width:170px;
	height:17px;
	float:left;
	margin:0 0 0px 0;
	color:#333;
	font-size:14px;
	font-weight:bold;
}
a.social-box-left:hover,
a.social-box-right:hover{
	text-decoration:none;
	background:#eee;
	border:1px solid #e5e5e5;
	cursor:pointer;
}

/* Contact */

div#left{
	width:238px;
	height:183px;
	float:left;
}
div#right{
	width:219px;
	height:180px;
	float:left;
	padding-left:20px;
	margin-top:3px;
	border-left:1px dotted #ccc;
}
div#right input{
	width:214px;
	height:20px;
	float:left;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:2px 0 0 4px;
	margin-bottom:5px;
}
div#right textarea{
	width:214px;
	height:92px;
	float:left;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:2px 0 0 4px;
	margin-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
div#right input#submit{
	width:60px;
	height:24px;
	float:right;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:0px 0 2px 0px;
	cursor:pointer;
	color:#666;
}
div#right input#submit:hover{
	color:#333;
	border:1px solid #999;
}

/* copyright */

div#copyright{
	width:200px;
	height:21px;
	background:#FFF;
	border:1px solid #ccc;
	position:absolute;
	right:30px;
	top:220px;
	padding:2px 0px 0 0;
	font-size:11px;
}
div#copyright p{
	width:170px;
	float:left;
	margin-left:10px;
}
div#copyright img{
	width:10px;
	height:10px;
	margin:5px 3px 0 5px;
	float:right;
	cursor:pointer;
}

/* background, top and bottom card */

div#top{
	width:562px;
	height:6px;
	background:url(../images/card-top.jpg) no-repeat;
	margin:0 0 0 29px;
	float:left;
}
div#bottom{
	width:562px;
	height:6px;
	background:url(../images/card-bottom.jpg) no-repeat;
	margin:0 0 0 29px;
	float:left;
}

/*
------------------------------------------------------------------------
LIVE VALIDATION - Live Validation CSS style.
------------------------------------------------------------------------
*/

.LV_validation_message{
    font-weight:bold;
	float:right;
	padding-right:130px;
}
.LV_valid {
    color:#00CC00;
}
span.LV_invalid {
   display:none;
} 
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
}  
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active,
select.LV_invalid_field:active,
select.LV_invalid_field:hover  {
     border:1px solid #ff8b8b;
}