html {
	margin:0 auto;
	padding:0;
	font-size: 13px;
	font-family:'PTSansRegular', Arial, Helvetica, sans-serif;
	color:#575757;
}

#portfolio_area
{
	float:left;
	padding-bottom:30px;
	width:875px;
}

#portfolio_controls
{
	float:left;
    width: 870px;
	margin-top:25px;	
	height:33px;
	overflow:hidden;
}

/* ********************************* Project filter styling *********************************** */

#filters
{
	float:left;
}

ul#filter, ul#filter li
{
	margin:0;
	padding:0;
}

ul#filter li
{
	list-style: none;
	margin:-19px 8px 0 0;
	float:left;	
}

ul#filter a
{
	color: #fff;
	text-decoration: none;
	font-size:11px;
	text-transform:uppercase;
	padding:4px 9px 2px;
	background:#a3a09a;
	color:#fff;

	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;	
	
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;
	
	
	display:block;
}

ul#filter li.current a, ul#filter a:hover
{
	background:#e42323;
	box-shadow: 1px 1px 0 0 #fad3d3;
	-moz-box-shadow: 1px 1px 0 0 #fad3d3;
	-webkit-box-shadow: 1px 1px 0 0 #fad3d3;
}

/* ********************************* Pagination styling  *********************************** */

.paginate
{
	float:right;
	margin:10px 0 0;
}

.paginate ul, .paginate li
{
	margin:30px 0 0;
	padding:0;
}

.paginate li
{
	color:#fff;
	font-size:11px;
	list-style: none;
	margin:0 5px 0 0;
	background:#a3a09a;	
	padding:4px 7px 2px;
	display:inline;
	cursor:pointer;
	
	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;	
	
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;
}

.paginate li:hover, .paginate li.curPage
{
	background:#e42323;
	box-shadow: 1px 1px 0 0 #fad3d3;
	-moz-box-shadow: 1px 1px 0 0 #fad3d3;
	-webkit-box-shadow: 1px 1px 0 0 #fad3d3;	
}


/* ********************************* Projects listing styling *********************************** */
ul#portfolio
{
	list-style: none;
	margin: 30px 0 0;
	padding:0;
	float:left;
	min-height:300px;
}

ul#portfolio li
{
    float: left;
    margin: 1px 1px 0 0;
    min-height: 148px;
    width: 217px;
}

.portfolio
{
    height: 148px;
    overflow: hidden;
	position:relative;
	background:#ccc;
	cursor:pointer;
}

.proj_img img
{
	border:0 none;
}

.portfolio .brief
{
	visibility:hidden;
	position:relative;
	background:#fff;
	width:217px;
	font-size:12px;
	border-top:1px solid #eee;
	background:#fcfcfc url("../images/project_bg.jpg") repeat-x bottom;
}

.brief span {
	color:#e42323;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}

.brief div {
	padding: 15px;
	line-height:18px;
}

.brief div h4{
    border-bottom: 1px solid #BABABA;
    color: #E42323;
    font-size: 14px;
    margin-bottom: 7px;
    padding-bottom: 7px;
}

.brief div.links
{
	position:absolute;
	top:0;
	left:0;
	padding:0;
	height:148px;
	width:217px;
	overflow:hidden;
}

.portfolio .brief a
{
	display:block;
	height:148px;
	width:217px;
	float:left;
	text-indent:-9999px;
}

.brief div.item_type
{
	right:10px;
	position:absolute;
	height:16px;
	width:16px;
	padding:0;
	bottom:-30px;	
	cursor:default;
}


.brief div.item_type.gallery
{
	background: url("../images/project_gallery_icon.gif") no-repeat;	
}

.brief div.item_type.slide
{
	background: url("../images/project_slide_icon.gif") no-repeat;	
}

.brief div.item_type.image
{
	background:url("../images/project_image_icon.gif") no-repeat;	
}


.brief div.item_type.video
{
	background:url("../images/project_video_icon.gif") no-repeat;	
}





/* ********************************* Project details styling *********************************** */
#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
	overflow:auto;
    z-index: 999999;
    
    /* Specify the width of your pageslide here */
    width: 100%;
    
	background:url("../images/project_det_bg.png");

}

#project_container
{
	width:100%;
}

#project_det_area
{
	width:727px;
	margin:25px auto;
	position:relative;
}

#close_project_det_pane
{
	font-weight:normal;
	font-family:'PTSansBold', Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#a3a09a;
	position:absolute;
	top:18px;
	right:10px;
}

#close_project_det_pane a
{
	color:#a3a09a;
	text-decoration:none;
}

#close_project_det_pane a span
{
	background:#a3a09a;
	color:#fff;
    margin-left: 7px;
    padding: 4px 6px 0;
	
	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;	
	
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;
}
	

#close_project_det_pane a:hover span
{
	background:#e42323;
}

#project_info
{
	position:absolute;
	top:63px;
	right:9px;
	z-index:100;
}

#project_info a
{
	background:#a3a09a url("../images/pro_det_open_icon.gif") 5px 4px no-repeat;
	color:#fff;
    margin-left: 5px;
	font-size:11px;
    padding: 4px 9px 2px 20px;	
	text-decoration:none;
	
	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;
}	

#project_info a:hover
{
	background:#e42323 url("../images/pro_det_open_icon.gif") 5px 4px no-repeat;
	box-shadow: 1px 1px 0 0 #fad3d3;
	-moz-box-shadow: 1px 1px 0 0 #fad3d3;
	-webkit-box-shadow: 1px 1px 0 0 #fad3d3;	
}	

#project_info a.open
{
	background:#a3a09a url("../images/pro_det_close_icon.gif") 5px 4px no-repeat;
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;	
}

#project_info a.open:hover
{
	background:#e42323 url("../images/pro_det_close_icon.gif") 5px 4px no-repeat;
	box-shadow: 1px 1px 0 0 #fad3d3;
	-moz-box-shadow: 1px 1px 0 0 #fad3d3;
	-webkit-box-shadow: 1px 1px 0 0 #fad3d3;	
}

#project_outer
{
	float:left;
	width:721px;
	overflow:hidden;
	position:relative;	
}

#project_inner
{
	float:left;
	width:971px;
}

#project_title 
{
	float:left;
   	padding: 12px 0 8px 5px;
    width: 715px;
	border:1px solid #d7d7d7;
	border-width:1px 0;
}

#project_title h1
{
	font-weight:normal;
	font-family:'PTSansRegular', Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#e42323;
}

#project_det_frame
{
	float:left;
	width:721px;
	height:445px;		
	padding:4px;
	margin:40px 0 0;
}

#project_det_frame ul, #project_det_frame li
{
	margin:0;
	padding:0;
	list-style:none;
}

#project_slideshow
{
	float:left;
	width:721px;
	height:409px;
}

#project_slider img
{
	border:1px solid #d7d7d7
}

#project_slideshow_nav
{
	float:left;
	width:721px;
}

#project_pager
{
	margin:10px 0 0;
	float:left;
}

#project_pager a
{
	font-size:11px;
	margin:0px 5px 0 0;
	padding:4px 7px 2px;
	background:#a3a09a;
	color:#fff;
	cursor:pointer;
	text-decoration:none;
	
	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;	
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;
}

#project_pager a:hover, #project_pager a.activeSlide
{
	background:#e42323;
	box-shadow: 1px 1px 0 0 #fad3d3;
	-moz-box-shadow: 1px 1px 0 0 #fad3d3;
	-webkit-box-shadow: 1px 1px 0 0 #fad3d3;	
}

#goto_project
{
	float:right;
	margin:10px 8px 0 0;
}


#goto_project a
{
	font-size:11px;
    padding: 4px 17px 2px 9px;	
	background:#a3a09a url("../images/goto_project_icon.gif") no-repeat 92px;
	cursor:pointer;
	color:#fff;
	text-decoration:none;

	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;	
	box-shadow: 1px 1px 0 0 #ddd;
	-moz-box-shadow: 1px 1px 0 0 #ddd;
	-webkit-box-shadow: 1px 1px 0 0 #ddd;	
}

#goto_project a:hover
{
	background:#e42323 url("../images/goto_project_icon.gif") no-repeat 92px;
	box-shadow: 1px 1px 0 0 #fad3d3;
	-moz-box-shadow: 1px 1px 0 0 #fad3d3;
	-webkit-box-shadow: 1px 1px 0 0 #fad3d3;	
}

.project_dets {
	float: left;
	margin: 45px 0 0 10px;
	width: 230px;
}

.project_dets ul
{
	margin:0;
	padding:2px 0 0 ;
	background:url("../images/dotted_hr.gif") repeat-x top;
}
	
.project_dets li {
	list-style:none;
	line-height:18px;
	padding:4px 0;
	background:url("../images/dotted_hr.gif") repeat-x bottom;
}

.project_dets li span {
 	text-transform:uppercase;
	font-size:11px;
	color:#e42323;
}

.project_dets li a {
	color:#575757;
}

.project_dets li a:hover {
	color:#e42323;
	text-decoration:none;
}

.project_dets li:last-child
{
	font-size:12px;
	line-height:18px;
	text-align:justify;
	padding:10px;
	border-bottom:1px solid #d7d7d7;
	background:none;
}