/*http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/*/

/*To start, I just want to display the categories across the top horizontally with a border between each:*/
ul#filter {
	/*float: left;*/
	font-family:  MuseoSlab500, "Lucida Grande", "Lucida Sans", "Segoe UI", Tahoma, sans-serif;
	font-size: 16px;
	list-style: none;
	/*margin-left: 10%;*/
	width: 100%;
}
ul#filter li {
	border-right: 2px solid #ccc;
	float: left;
	/*line-height: 16px;*/
	margin-right: 10px;
	padding-right: 10px;
}

/*Next, I want to remove the border from the last list item (in browsers that support it) and change the display of the links*/
/*ul#filter li:first-child { border-right: none; margin-right: 0; padding-right: 0; }*/
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #8FAFBF; text-decoration: none; }

/*I also want to make sure and differentiate the currently selected category:*/
ul#filter a:hover { text-decoration: none; color: #FFF; background-color: #40b5e6; padding: 2px 0px; }
ul#filter li.current a { color: #40b5e6; }

/*Ok, now that we have the category navigation styled, let’s focus on the actual layout of the portfolio. Let’s plan on floating 3 list items next to each other with a border around each one:*/
ul#portfolio {
	float: left;
	list-style: none;
}
ul#portfolio li {
	float: left;
}

/*Now, we just need to add some basic styling for the images and links:*/
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }