@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);



/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com -- remove font:inherint if using bold or italic tags from database*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,

img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,

caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,

section,summary,time,mark,audio,video{ border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0 }

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block }

body{ line-height:1 }

ol,ul{ list-style:none }

blockquote,q{ quotes:none }

blockquote:before,blockquote:after,q:before,q:after{ content:none }

table{ border-collapse:collapse;border-spacing:0 }



/* anchor tag global */

a:link, a:visited, a:active, a:selected a:focus { border: none; outline: none; }



::selection{ color:#9F6; }

::-moz-selection{ color:#9F6; } 



html, body {

	background-color: rgb(235,235,235);

}



.wrapper {

	display:block;

	position:realtive;

	

	min-height: 100%;

	height: auto !important;

	height: 100%;

	margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */

}

.p-footer, .p-footer-push {

	height: 60px; /* .push must be the same height as .footer */

}



.p-footer, .p-footer-push{

	position:absolute;

	bottom:0;

	display:block;

	width:100%;

}

 

.p-footer{

	background:#333 url(../images/black_paper.jpg) repeat 0 0;

}





hr, hr.custom {  

	border: 0; height: 1px; 

	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0),  rgba(62, 62, 62,0.75), rgba(0,0,0,0)); 

	background-image: -moz-linear-gradient(left, rgba(0,0,0,0),  rgba(62, 62, 62,0.75), rgba(0,0,0,0)); 

	background-image: -ms-linear-gradient(left, rgba(0,0,0,0),   rgba(62, 62, 62,0.75), rgba(0,0,0,0)); 

	background-image: -o-linear-gradient(left, rgba(0,0,0,0),  rgba(62, 62, 62,0.75), rgba(0,0,0,0));  

	-webkit-box-shadow: 2px 2px 9px rgba(23, 23, 23, 0.19);

	-moz-box-shadow:    2px 2px 9px rgba(23, 23, 23, 0.19);

	box-shadow:         2px 2px 9px rgba(23, 23, 23, 0.19);

}





div.hide{ display:none; }



div.show{ display:block; }



#pfolio-section-heading{

	position:fixed;

	left:0;

	width:100%;

	line-height:35px;

	font-size:1.9em;

	font-family: 'Lato','Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-weight:900;

	text-shadow: 0px 0px 8px rgba(125, 125, 125, .6);

	-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.76);

	-moz-box-shadow:    0px 0px 6px rgba(50, 50, 50, 0.76);

	box-shadow:         0px 0px 10px rgba(10, 10, 10, 0.76);

	color:rgb(165,165,165);

	background: rgb(150, 150, 150);

	background: -moz-linear-gradient(58deg, rgb(150, 150, 150) 0%, rgb(62, 62, 62) 44%);

	background: -webkit-linear-gradient(58deg, rgb(150, 150, 150) 0%, rgb(62, 62, 62) 44%);

	background: -o-linear-gradient(58deg, rgb(150, 150, 150) 0%, rgb(62, 62, 62) 44%);

	background: -ms-linear-gradient(58deg, rgb(150, 150, 150) 0%, rgb(62, 62, 62) 44%);

	background: linear-gradient(148deg, rgb(150, 150, 150,) 0%, rgba(62, 62, 62, .66) 44%);

	height:60px;

	z-index:60;

}



#pfolio-section-heading div{ margin-left: 15%; margin-top:10px;}



#pfolio-section-heading span{ font-weight:300; }



.clear-header{ height:80px; width:100%; }



#pfolio-wrapper{ width:80%; margin:0 auto; margin-left:15%;}



.pfolio-row{ width:850px; height:400px; border:0px solid #CCC; margin:0 auto;}





.pfolio-block{ 

	position:relative;

	display:block; 

	width:340px; 

	height:250px; 

	float:left;

	margin:10px 10px; 

	font-family: 'Lato','Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size:.84em;

	font-weight:900;

	color:rgb(84,84,84);

	border:0px solid #9F0;

	background: rgba(150, 150, 150, .12);

	 border-radius: 5px;

	 cursor:pointer;

	

}



.pfolio-block:hover{ 

	background: rgba(255, 255, 255, .62); 

	-webkit-box-shadow: 2px 2px 3px rgba(23, 23, 23, 0.19);

	-moz-box-shadow:    2px 2px 3px rgba(23, 23, 23, 0.19);

	box-shadow:         0px 0px 11px rgba(63, 63, 63, 0.49);

}



.block-img-wrapper{ 

	display:block; width:340px; height:160px; overflow:hidden; padding-top:7px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	margin:0 auto;

	margin-bottom:10px;

}



img.block-img{ 

	display: block; border:none; outline:none; width:90%; margin-left: auto; margin-right: auto; 

	-webkit-box-shadow: 2px 2px 5px rgba(23, 23, 23, 0.99);

	-moz-box-shadow:    2px 2px 5px rgba(23, 23, 23, 0.99);

	box-shadow:         2px 2px 5px rgba(23, 23, 23, 0.99);

}



.block-title{ margin:10px 0px; padding:0px 15px; text-shadow: 0px 0px 9px rgba(85, 85, 85, 0.6); }



.block-content{ font-weight:300; font-size:.95em; padding:0px 15px;}



.block-anchor{ position:absolute; bottom:12px; right:5px; font-weight:300; font-size:1.03em; color:rgba(85, 85, 85, 0.78); text-decoration:none; }

.block-anchor:hover{ text-decoration:underline; }



.preview-link{ position:absolute; bottom:0; left:0; width:100%; height:100px; background-color:rgba(55,55,55,0.80); border-radius: 5px;}



#pfolio-project-wrapper{ width:100%; margin:0 auto; margin-bottom:60px; }





#pfolio-detail{ 

	position:relative;

	display:block;

	width:850px; 

	height:600px; 

	border:0px solid #000; 

	margin:0 auto;

	margin-top:10px;

	font-family: 'Lato','Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size:1em;

	font-weight:900;

	color:rgb(64,64,64);

	background: rgba(150, 150, 150, .23);

	-webkit-box-shadow: 2px 2px 3px rgba(23, 23, 23, 0.19);

	-moz-box-shadow:    2px 2px 3px rgba(23, 23, 23, 0.19);

	box-shadow:         2px 2px 3px rgba(23, 23, 23, 0.19);

	border-radius: 5px; 

	overflow:hidden;

}







.detail-img-wrapper{ 

	display:block; width:750px; height:400px; padding-top:7px;

	margin:0 auto;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	border:0px solid #9F0;

	overflow:hidden; float:left;

	cursor:pointer;

}



img.detail-img{ 

	display: block; border:none; outline:none; width:92%; margin-left: auto; margin-right: auto; 

	-webkit-box-shadow: 2px 2px 5px rgba(23, 23, 23, 0.99);

	-moz-box-shadow:    2px 2px 5px rgba(23, 23, 23, 0.99);

	box-shadow:         2px 2px 5px rgba(23, 23, 23, 0.99);

}



.detail-container{ width:95%; height:210px; margin-bottom:10px; border:0px solid #9F0; margin:0 auto; padding:5px 10px 0px 0px;}



.detail-title{ margin:10px 0px 5px;; padding:5px 5px 0px; text-shadow: 0px 0px 9px rgba(85, 85, 85, 0.6); font-size:.84em;}



.detail-content{ font-weight:300; font-size:.90em; padding:0px 15px;}



.detail-anchor{ position:absolute; top:12px; right:5px; font-weight:300; font-size:.93em; color:rgba(85, 85, 85, 0.65); text-decoration:none; }

.detail-anchor:hover{ text-decoration:underline; }



#detail-anchor-slide-left, #detail-anchor-slide-right{ position:absolute; top:350px;  font-weight:300; font-size:1.93em; color:rgba(85, 85, 85, 0.65); text-decoration:none; cursor:pointer; }



#detail-anchor-slide-left{left:10px;}

#detail-anchor-slide-right{right:10px;}



.detail-anchor:hover{ text-decoration:underline; }



#slideCounter{ position:absolute; bottom:380px; right:80px; font-weight:300; font-size:.80em; }



/*===========================================================

Easy Slider

===========================================================*/

#imgslider, #imgslider li.sliderli{ 

	/* 

		define width and height of container element and list item (slide)

		list items must be the same size as the slider area

	*/ 

	width:750px;

    height:400px;

	/*height:575px;*/ /*Removed for dynamic height - specify height of inital displayed item on parent div (#formAccountWrapper)*/

	overflow:hidden; 

	margin:0 auto;

	margin-top:0px;

	margin-left:50px;

	border:0px solid #F00;

}



#imgslider ul.sliderul, #imgslider li.sliderli{ margin:0; padding:0; list-style:none; }



#imgslider .imgholder { 

	display:block; width:750px; height:370px; padding-top:7px;

	margin:0 auto;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	border:0px solid #9F0;

	overflow:hidden; float:left;

 }