@charset "utf-8";

/*
	HTML
***************************************************/

* {
	padding: 0;
	margin: 0;
	}

body {
	background: #ffffff url(images/fons_top_2.jpg) top repeat-x;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-family: "ITC Avant Garde Gothic", "AvantGarde Bk BT", "AvantGarGotItcTEE", "AvantGarde Md BT", "AvantGarGotItcTEEDem", "Century Gothic", Verdana;
	color: #000000;
	line-height: 20px;
	}

h1, h2, h3, h4, h5, h6 {
	}
	


/*
	Main layers
***************************************************/

#base, #menu, #bottom, #top_options, #section {
	width: 900px;
	/*width: 900px;*/ /* Resolució 1024 */
	margin: 0 auto;
	}

#base {
	margin-top: -19px;
	padding-top: 19px;
	}
	
#cont_bottom {
	background: #efefef url(images/bottom_senefa.png) bottom repeat-x;
	border-top: 1px solid #bfbfbf;
	color: #666666;
	padding: 10px 0;
	}

#bottom {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	overflow: hidden;
	}
	
	#bottom  .bottom_column {
		float: left;
		padding: 14px 0px 16px;
		width: 258px;
		}
	
	#bottom  .bottom_column p a {
		color: #666666;
		text-decoration: underline;
		}
	
	#bottom  .bottom_column li a {
		color: #666666;
		text-decoration: none;
		display: block;
		padding-top: 4px;
		padding-bottom: 2px;
		}
	
	.bottom_column li {
		list-style: none;
		border-bottom: 1px solid #cccccc;
		}
	
	.bottom_column li:hover {
		border-bottom-color: #666666;
		}
	
	.bottom_column h5 {
		font-weight: bold;
		font-size: 14px;
		padding-bottom: 5px;
		}
	
	.bottom_column p {
		margin-bottom: 20px;
		}

.copyright {
	width: 900px;
	margin: 0 auto;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
#top_options {
	overflow: hidden;
	}

#top_options, #top_options a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	}

.go_content_arrow {
	border: none;
	margin-right: 4px;
	}

#right_options {
	float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	text-transform: lowercase;
	}
	
	#right_options a {
		color: #ffffff;
		}

#to-top {
	background: url(images/arrow_to_top.png) center no-repeat;
	position: fixed;
	top: 50%;
	right: 0px;
	height: 40px;
	width: 40px;
	cursor: pointer;
	}

#cont_section {
	background: #ffffff;
	}


/*
	Home layers
***************************************************/

#cont_home_pic {
	position: absolute;
	bottom: -20px;
	left: 0px;
	width: 283px;
	height: 309px;
	z-index: 2;
	}

	#cont_home_pic img {
		width: 283px;
		height: 309px;
		}

#home_pic_shadow {
	display: none;
	background: url(images/home_pic_shadow.png) no-repeat;
	width: 530px;
	height: 331px;
	position: absolute;
	bottom: -40px;
	left: -38px;
	z-index: 1;
	}

#presentation {
	position: relative;
	height: 260px;
	margin-top: 47px;
	margin-bottom: 45px;
	}
	
	#presentation h2 {
		font-size: 44px;
		color: #ffffff;
		padding-top: 74px;
		margin-bottom: 48px;
		margin-left: 305px;
		}
	
	#presentation h4 {
		font-size: 20px;
		color: #9c9c9c;
		line-height: 24px;
		margin-bottom: 23px;
		margin-left: 305px;
		}
	
	#presentation h1 {
		font-size: 35px;
		color: #900000;
		margin-left: 305px;
		}
	
#quick_navigation {
	padding-top: 28px;
	height: 301px;
	}
	
	#quick_navigation > div {
		float: left;
		width: 243px;
		/*width: 240px Resolució 1024 */
		height: 271px;
		padding: 20px;
		}
		
		#quick_navigation h3 a, #quick_navigation h3 {
			color: #ffffff;
			text-decoration: none;
			text-transform: lowercase;
			}
			
		#quick_navigation p a, #quick_navigation p {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			text-transform: lowercase;
			text-decoration: none;
			line-height: 46px;
			}
		
		#quick_navigation #first_quick p a {
			color: #d8abab;
			}
		
		#quick_navigation #third_quick p {
			color: #cccccc;
			}
						
			#quick_navigation p.shape1 {
				font-size: 20px; /* 26px en 1024 */
				margin-left: 25px;
				}
			
			#quick_navigation p.shape2 {
				font-size: 22px; /* 34px en 1024 */
				margin-left: 50px;
				}				
			
			#quick_navigation p.shape3 {
				font-size: 30px; /* 29px en 1024 */
				margin-left: 4px;
				}
			
			#quick_navigation p.shape4 {
				font-size: 24px; /* 26px en 1024 */
				margin-left: 35px;
				}
			
		#quick_navigation p a:hover {
			color: #ffffff !important;
			}
	
	#first_quick {
		margin-right: 22px; /* 30px en 1024 */
		background: #990000;
		}
	
	#second_quick {
		margin-right: 22px; /* 30px en 1024 */
		background: #f19900;
		}
	
	#third_quick {
		background: #990000;
		}
		
	#quick_navigation div h3 {
		padding-bottom: 30px;
		padding-top: 8px;
		font-size: 36px;
		}
	
#quick_navigation .post {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 28px;
	list-style-image: url(images/list_style_post_home.png);
	list-style-position: outside;
	list-style-type: disc;
	margin: 10px 0px 10px 16px;
	}

#first_quick .post {
	list-style-image: url(images/list_style_work_home.png);
	text-transform: lowercase;
	}

#third_quick .post {
	list-style-image: url(images/list_style_work_home.png);
	}
	
	#quick_navigation .post a {
		color: #ffffff;
		text-decoration: none;
		padding-bottom: 1px;
		}

	#quick_navigation .post a:hover {
		border-bottom: 1px solid #ffffff;
		}

#cont_menu {
	/*background: #efefef;
	border-top: 1px solid #bfbfbf;*/
	margin-top: 50px;
	}

#menu {
	overflow: hidden;
	padding: 28px 0px;
	text-transform:lowercase;
	}
	
	#menu div {
		float: left;
		width: 258px; /* 250px en 1024 */
		padding: 31px 11px;
		}
		
	#menu div a {
		font-family: "ITC Avant Garde Gothic", "AvantGarde Bk BT", "AvantGarGotItcTEE", "AvantGarde Md BT", "AvantGarGotItcTEEDem", "Century Gothic", Verdana;
		text-decoration: none;
		line-height: 40px;
		}
		
	#menu div a:hover {
		text-decoration: underline;
		}
		
	.home_menu {
		border-left: 2px solid #900000;
		}
		
		.home_menu h4 {
			padding-bottom: 35px;
			font-size: 36px;
			}
		
		.home_menu a {
			font-size: 24px;
			}	
	
	#profesional_menu {
		border-color: #900000;
		margin-right: 24px;
		color: #900000;
		}
		
		#profesional_menu a {
			color: #900000;
			}
	
	#personal_menu {
		border-color: #f19900;
		margin-right: 24px;
		color: #f19900;
		}
		
		#personal_menu a {
			color: #f19900;
			}
	
	#friends_menu {
		border-color: #666666;
		color: #666666;
		}
		
		#friends_menu a {
			color: #666666;
			}
	
	


/*
	Sections
***************************************************/

#section {
	padding-top: 14px;
	width: 900px;
	}


#arrow_left, #arrow_right {
	width: 30px;
	height: 74px; /* As #project_nav */
	cursor: pointer;
	}

#arrow_left {
	float: left;
	background: url(images/arrow_project_nav_left.gif) center no-repeat;
	}

#arrow_right {
	float: right;
	background: url(images/arrow_project_nav_right.gif) center no-repeat;
	}
	
.disabled_arrow_left {
	cursor: default !important;
	background: url(images/arrow_project_nav_left_dis.gif) center no-repeat !important;
	}
	
.disabled_arrow_right {
	cursor: default !important;
	background: url(images/arrow_project_nav_right_dis.gif) center no-repeat !important;
	}

#project_nav {
	width: 900px; /* As #base */
	height: 90px;
	margin: 0 auto;
	}
	
	#project_nav .project {
		float: left;
		width: 145px;
		padding: 0 30px; /* 36px base as 900px */
		text-align: center;
		}
	
	#project_nav .project img {
		width: 155px; /* 209px base as 900px */
		height: 70px; /* 171px base as 900px */
		margin: 0px 0;
		border: none;
		}
	
	#project_nav .project:hover img {
		border: none;
		}
	
	#project_nav .project .year {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #a0a0a0;
		}
	
	#project_nav .project .name {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: normal;
		color: #900000;
		text-decoration: none;
		text-transform: lowercase;
		}

	#project_nav .project:hover .name {
		text-decoration: underline;
		}

#projects_wrapper {
	position: relative;
	width: 808px;
	height: 70px;
	overflow: hidden;
	}

#projects_cont {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 90px;
	}

#portfolio_profile {
	/*background: url(images/bg_project_profile.jpg) top repeat-x;*/
	margin-top: 26px;
	overflow: hidden;
	}
	
#profile_cont {
	/*background: url(images/loader.gif) top center no-repeat;*/
	min-height: 430px;
	padding-bottom: 46px;
	}

	#portfolio_profile .padding {
		padding-top: 20px;
		}	
		
	#portfolio_profile div.name {
		margin-bottom: 35px;
		text-transform: lowercase;
		}
		
	#portfolio_profile div.name a {
		font-family: "ITC Avant Garde Gothic", "AvantGarde Bk BT", "AvantGarGotItcTEE", "AvantGarde Md BT", "AvantGarGotItcTEEDem", "Century Gothic", Verdana;
		font-weight: bold;
		color: #900000;
		font-size: 40px;
		text-decoration: none;
		}
		
	#portfolio_profile div.name a:hover {
		text-decoration: underline;
		}
		
	#portfolio_profile div.name .ico_open_blank {
		width: 25px;
		height: 25px;
		margin-left: 10px;
		margin-bottom: -3px;
		vertical-align: top;
		}
		
	#portfolio_profile #tags {
		}
		
	#portfolio_profile #info {
		overflow: hidden;
		}
	
	#portfolio_profile #tags {
		list-style: none;
		line-height: 40px;
		}
		
	#portfolio_profile #tags li {
		padding: 8px 0;
		}
		
	#portfolio_profile #tags a {
		padding: 8px 43px 8px 0px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 31px;
		color: #808080;
		text-decoration: none;
		text-transform: lowercase;
		}
	
	#portfolio_profile hr {
		width: 400px;
		margin: 20px auto 28px;
		height: 0px;
		border: none;
		border-top: 1px solid #dfdfdf;
		}
		
	#portfolio_profile #tags a:hover {
		text-decoration: underline;
		}
	
	#portfolio_profile #info {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #666666;
		}
	
	#portfolio_profile #info p {
		margin: 16px 0;
		line-height: 17px;
		}
	
	#portfolio_profile #thumbs {
		float: left;
		width: 290px;
		text-align: right;
		}
	
	#portfolio_profile #thumbs img {
		border: 2px solid #999999;
		margin-right: 20px;
		margin-bottom: 16px;
		}
	
	#portfolio_profile #thumbs img:hover {
		border: 2px solid #900000;
		}
	
	#portfolio_profile #description {
		text-align: justify;
		float: right;
		width: 586px;
		margin-top: -20px;
		}
	
#projec_nav_cont {
	background: #f2f2f2;
	padding-top: 21px;
	height: 90px;
	border-bottom: 1px solid #dadada;
	}

.profile_loader {
	background: url(images/loader.gif) fixed
	}

.tag_title_cont {
	height: 60px;
	margin: 30px 0;
	color: #999999;
	}
		
	.tag_title_cont .tag_title, .tag_title_cont .tag_title_comp {
		float: left;
		display: inline;
		text-transform: lowercase;
		}

	.tag_title_cont .tag_title {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 40px;
		font-weight: normal;
		color: #666666;
		}
	
	.tag_title_cont .tag_title_comp {
		padding-top: 9px;
		margin-left: 12px;
		}
	
	.tag_title_cont .tag_title_comp a {
		color: #666666;
		text-decoration: none;
		}
	
	.tag_title_cont .tag_title_comp a:hover {
		text-decoration: underline;
		}
	
#contact_explanation {
	width: 335px;
	float: left;
	}
	
	#contact_explanation p {
		margin: 16px 0px;;
		font-size: 13px;
		color: #666666;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		}

#tagsprojects {
	width: 620px;
	margin: 0 -18px;
	padding-bottom: 40px;
	}
	
	#tagsprojects .project {
		float: left;
		margin: 12px 18px 10px 17px;		
		text-align: center;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #a0a0a0;
		line-height: 26px;
		}

	#tagsprojects .project:hover .name {
		text-decoration: underline;
		}
	
	#tagsprojects .project img {
		width: 161px; /* 209px base as 900px */
		height: 70px; /* 171px base as 900px */
		margin-bottom: 8px;
		border: none;
		}
	
	#tagsprojects .project:hover img {
		}
	
	#tagsprojects .project a {
		font-size: 14px;
		font-weight: bold;
		color: #900000;
		text-decoration: none;
		}
		
#tagcloud {
	margin: 35px 0px 45px;
	text-align: center;
	min-height: 260px;
	}
		
	#tagcloud a {
		margin: 0 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		text-transform: lowercase;
		text-decoration: none;
		line-height: 66px;
		color: #666666;
		}
		
	#tagcloud a:hover {
		text-decoration: underline;
		}
		
#right_tagcloud {
	background: #f2f2f2;
	float: right;
	width: 230px;
	padding: 20px;
	margin-top: 11px;
	font-size: 9px;
	text-align: right;
	}
		
	#right_tagcloud a {
		text-transform: lowercase;
		color: #777777;
		text-decoration: none
		}
		
	#right_tagcloud a:hover {
		text-decoration: underline
		}

#cont_contact-form {
	background: #f2f2f2;
	padding: 20px;
	width: 300x;
	margin-top: 34px;
	margin-left: 414px;
	}

table.form {
	border-collapse: collapse;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	}

table.form td {
	padding: 6px 0;
	}

table.form input, table.form textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 3px;
	width: 200px;
	}

table.form textarea {
	height: 220px;
	}

table.form td.field-name {
	color: #666666;
	}

table.form td.field {
	padding-left: 16px;
	}

.form .button {
	background:url(images/bt_form_bg.gif) no-repeat;
	border: none;
	width: 80px;
	height: 32px;
	text-align: left;
	}
	
.contact-form_cont {
	width:528px;
	float: right ;
	background: #eeeeee;
	padding: 30px;
	}

.contact-form_instructions {
	float: left;
	width: 283px; 
	font-size: 14px; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

	.contact-form_instructions p {
		margin-bottom: 30px;
		}




/*
	Tips
***************************************************/

.tool-tip {
	color: #fff;
	width: 147px;
	z-index: 13000;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #900000;
	padding: 8px 8px 4px;
	background: url(images/bubble.png) top left;
}
 
.tool-text {
	font-size: 11px;
	color: #666666;
	padding: 4px 8px 8px;
	background: url(images/bubble.png) bottom right;
}