/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body {
	font: 14px Arial, Helvetica, sans-serif;
	background: #E3E3E3;
	color: #000000;
}

.style17 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; color: #999999; }
.style19 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #666666;
}
.style20 {
	font-size: 12px;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
}
.style21 {
	font-size: 10px;
	color: gray;
	font-family: Arial, Helvetica, sans-serif;
}
.style25 {color: black; font-size: 12px}
.style26 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}







.nav-wrap { position: relative; padding: 0px; margin: 20px auto; background-color: rgba(10,10,0,.45); border-top: 3px solid white; border-bottom: 3px solid white; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#example-one { margin-left: 47%; list-style: none; position: relative; width: auto; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -3px; left: 0; width: 100px; height: 3px; background: #689900
; }

#example-two { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-two li { display: inline; }
#example-two li a { position: relative; z-index: 200; color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-two li a:hover { color: white; }
#example-two #magic-line-two { position: absolute; top: 0; left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.current_page_item a, .current_page_item_two a { color: white !important; }










/* Portfolio Filter Stylesheet */

/*****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; }

/*****Basic Definitions*****/
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }

a { color: #333; }
ul, ol, dd { margin-left: 36px; }

/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
div#container { margin-left: 20%; margin-top: 20px; overflow: hidden; width: 660px; }

ul#filter {
	float: left;
	font-size: 12px;
	list-style: none;
	margin-left: 10px;
	width: 100%;
	color: #E3E3E3;
}
ul#filter li { 
	border-right: 1px solid gray;
	float: left;
	line-height: 10px;
	margin-right: 4px;
	padding-right: 4px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul#portfolio { float: left; list-style: none; margin-left: 0; width: 660px; }
ul#portfolio li { 
	border: 0px solid #dedede; 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 650px;
}
ul#portfolio a { display: block; width: 100%; text-decoration: none; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }








html { overflow-y: scroll; }

#page-wrap { width: 650px; margin: 20px;}

.project { width: 100%; margin: 0 0 10px 0; position: relative; cursor: pointer; min-height:220px; height:auto !important; height:220px;
 }

.text { padding: 10px 0 10px 410px; font: 12px  Arial, Helvetica, sans-serif}
.text span { font: bold 12px  Arial, Helvetica, sans-serif; }

.titlebar { padding: 4px 0 4px 410px; overflow: hidden; width: 280px; color: white; height: 14px}
                 
.title { width: 100%; float: left; font: bold 12px Arial, Helvetica, sans-serif; color: #FFFFFF; }
                              
.project img { position: absolute; top: 0; left: 0; }

.project { border: 0px solid #689900; }
.project .titlebar { background: #689900; }

.current { font-weight: bold; font-size: 14px; }