@import url('reset.css');
@import url('960grid.css');




/* GENERAL STYLES */




* {
	margin:0;
	padding:0;
}

	/*
	Sets styles for the whole template, you may want to change the font 
	and if you add or remove sections, you have to change the value of the
	width (each section has 960px but you'd better give it more space, 
	in the template we have 8 sections, that means 7680px, I've added 960px
	for better displaying.
	*/
body {
	font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;
	color:#2B2B2B;
	margin: 0;
	padding: 0;
	overflow: hidden;
	width:10000px;
}
img {
	border:none; 
	margin:0;
	padding:0;
}
	/*
	The wrapper is the container of each section, when you add a section, you
	will need to add this class 
	*/
#wrapper {
	margin:0;
	padding:0;
}




/* HEADER */




	/*
	Here are all styles for the menu.
	This menu has a fixed position (bugs are fixed for IE6 and IE7).
	*/
	

#top {
	width:100%;
	height:150px;
	background:url(../images/background/top.png);
	margin:0;
	padding:0;
	position:fixed;
}
	
#menu {
	background:none;
	height:40px;
	width:560px;
	margin:18px 0;
	padding-left:40px;
	position:fixed;
	list-style:none;
	float:left;
	z-index:99999;
}
#menu span {
	display: none;
}

#menu li, #menu a {
	height:40px;
	cursor:pointer;
	display:block;

}
#menu li {
	list-style:none;
}

	#home {
		width: 83px;
		float:left;
		background:url("../images/menu.png") 0px 0px no-repeat;
	}
	#about_me {
		width: 115px;
		float:left;
		background:url("../images/menu.png") -83px 0px no-repeat;
	}
	#portfolio {
		width: 103px;
		float:left;
		background:url("../images/menu.png") -198px 0px no-repeat;
	}
	#contact {
		width: 59px;
		float:left;
		background:url("../images/menu.png") -301px 0px no-repeat;
	}
	
	#home a:hover, #home a.active {
		width: 83px;
		background:url("../images/menu.png") 0px -40px no-repeat;
	}
	#about_me a:hover, #about_me a.active {
		width: 115px;
		background:url("../images/menu.png") -83px -40px no-repeat;
	}
	#portfolio a:hover, #portfolio a.active {
		width: 103px;
		background:url("../images/menu.png") -198px -40px no-repeat;
	}
	#contact a:hover, #contact a.active {
		width: 59px;
		background:url("../images/menu.png") -301px -40px no-repeat;
	}





/* IMAGES STYLES */




	/*
	Thumbnails are the styles applied to the small thumnbails (see the "about me" section)
	*/
.thumbnail {
	width:260px;
	height:70px;
	padding:0;
	margin:0 0 25px 0;
}

	.thumbnail li {
		float:left;
		display:block;
	}
	
.thumb {
	margin-right:25px;
}

	/*
	The next style is applied to the pictures within the "portfolio" section 
	*/
.portfolio820 {
	height:75px;
	width:102px;
	margin-bottom:12px;
	margin-right: 10px;
}

	/*
	Styles for the arrows displayed at the bottom of each section
	*/
.arrow {
	position:absolute;
	bottom:0;
	left:20px;
}
.previous a, .next a {
	display:block;
	width:22px;
	font-size:60px;
	color:#2B2B2B;
	bottom:0;
}

	.previous {
		float:left;
	}
	
	.next {
		float:right;
	}
	
		.previous a:hover, .next a:hover {
			color:#75a653;
			text-decoration:none;
		}




/* TYPOGRAPHY */




p, h1, h2, h3, h4, h5, h6 {
	margin-bottom:15px; /* Gives some space between paragraphs */
	padding:0;
	color:#555555;
}

p {	/* Default font for paragraphs */
	font-size:11px;
	line-height:16px; /* Gives space in the text */
	padding:0;
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1 {
	font-weight:bold;
	font-size:28px;
	color:#2B2B2B;
	margin-bottom:30px;
	line-height:36px;
}

h2 {
	font-weight:bold;
	font-size:18px;
	color:#2B2B2B;
	margin-bottom:15px;
	text-transform:uppercase;
}
.center {
	text-align:center;
}
#box {
	width: 100%;
	height: 350px;
	display: table;
}
#position {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}



.black {
	font-weight:bold;
}
.colored {
	color:#75a653;
}
a {
	color:#75a653;
	text-decoration:none;
}

	a:hover {
		text-decoration:underline;
	}
	

	/* 
	"error" and "send" are the styles of the messages displayed when the user sends
	a message through the contact form
	*/
.error {
	font-size:11px;
	color:#ED4340;
}

.sent {
	font-size:11px;
	color:#75A133;
}

.list {
	font-size: 11px;
	color:#75a653;
	list-style-image: url("../images/icons/bullet_green.jpg");
	font-weight:bold;
	line-height:18px;
	margin:0 0 15px 15px;
}

	.list li {
		text-indent: 0px;
	}
	
.right {
	text-align:right;
}




/* CONTACT FORM */




	/*
	Styles for the contact from labels
	*/
	
.form label {
	font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight:bold;
	padding:0;
	margin:0;
}

.form ul li {
	list-style:none;
	display:inline;
}

	#name, #email, #message {
		font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;
		font-size:11px;
		width:260px;
		padding:0 3px 0 3px;
		border:none; 
		margin:5px 0 5px 0; 
	}
	
		#name, #email {
			background:transparent url(../images/form/input_field.jpg) no-repeat scroll left top; /* Background image for the fields */
			height:20px;
		}
		
		#message {
			background:transparent url(../images/form/text_area.jpg) no-repeat scroll left top; /* Background image for the text area */
			height:75px;
			overflow:auto;
		}
	
	/*
	Styles for the buttons "send" and "reset" in the contact form
	*/
	.button {
	font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;
	font-size:12px;
	background:#FFF;
	border:1px solid #CCCCCC;
	padding:3px;
	margin-right:15px;
	float:left;
	}
	
		.button:hover {
			background:#333334;
			color:#FFF;
			border:#2B2B2B solid 1px;
			padding:3px;
		}

	.message {
		display:none;
		width:260px;
		padding:5px;
	}
	.contact ul {
		list-style-type:none;
	}
		.contact li {
			list-style-type:none;
		}
			.contact li.special {
				display:none;
			}



/* SOCIAL ICONS */




	/* 
	The styles here are used for the social icons in the contact area, then
	the javascript animates on mouse hover
	*/
.iconbar {
	float: left;
	list-style: none;
	margin-bottom:20px;
	position:relative;
	width:260px;
}

	.iconbar li {
		width: 48px;
		height: 48px;
		margin-right: 20px;
		float: left;
		position: relative;
	}





/* FOOTER */




	/*
	As the menu, the footer has a fixed position, bugs are corrected for IE6 and IE7
	*/
#footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height:30px;
	padding:10px 0 0 40px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
}




/* RIGHT FADING EDGE */




	/*
	White fading effect on the right edge of the browser
	*/
#right {
	background: url(../images/background/right.png) right center repeat-y;
	z-index:99;
	}
	#right {
	position: fixed;
		top: 0; bottom: 0;
		width: 90px;
		}
		#right { right: 0; }