/*
Title: 	yappa temp css
Updated: 	
Version: 1.0
Author: yse
*/

* {margin: 0; padding: 0;}

body { 
	font-family: "Lucida Sans Unicode","Lucida Sans",  "Lucida Console", Verdana;
	font-size: 12px;
	text-align:center;
	background: #383E43 url('../images/layout08/body.bg.jpg') repeat-x top left;
}

img { border: 0;}
hr { display:none; }

a { text-decoration:none; color: #FFFFFF;}
:focus { -moz-outline-style: none; }

#wrapper {width: 960px;margin: 0 auto;text-align:left; padding: 10px; color: #CBCCCD; }


/* main
------------------------------------------------------------- */
#h-recent {  padding: 16px 0 0 0;overflow: hidden;height: 0px !important;height /**/: 16px; /* for IE5/Win only */margin-left: 0px;  width: 153px; background: url('../images/layout08/portfolio.gif') no-repeat top left; margin-bottom: 15px;margin-top: 15px; margin-left: 25px;}


.projects { float:left; }

.project { width: 232px; height: 241px; float:left; padding: 25px 40px; font-size: 10px; position:relative;margin-right: 2px; margin-bottom: 10px;  overflow: hidden; cursor:pointer;}

.project.over, .project.active { background: url('../images/layout08/projecthover.gif') no-repeat top left; position:relative;}
	.project.active { padding-bottom: 0px; height: 266px;}	

.more { display: none; }

.more { position:relative;  background: url('../images/layout08/projectactive.gif') no-repeat top left; width: 232px; height: 35px; padding: 15px 40px 25px 40px; margin: 0 -40px; }

	.project h2 { font-size: 10px; color: #B4D3EB; font-weight:normal;}
	.project img { border: 5px solid #414448; cursor:hand;}
	.project .client { font-size: 9px;}
	.project .client strong { font-weight:normal; color: #B4D3EB;}
	
	.project .readless { display:none;}
	.project .readmore, .project .readless {  position:absolute; right: 47px; top: 195px; float:left;padding: 21px 0 0 0;overflow: hidden;height: 0px !important;height /**/: 21px; /* for IE5/Win only */margin-left: 0px;  width: 20px; background: url('../images/layout08/plus.gif') no-repeat top left; }
		.project .readless { background: url('../images/layout08/min.gif') no-repeat top left;}
		
	.project .next {display:none;}
	
	.project.active .next {  display: block; position:absolute; right: 15px; top: 100px; float:left;padding: 17px 0 0 0;overflow: hidden;height: 0px !important;height /**/: 17px; /* for IE5/Win only */margin-left: 0px;  width: 16px; background: url('../images/layout08/next.gif') no-repeat top left; }
	
	.project .prev {display:none;}
	
	.project.active .prev {  display: block; position:absolute; left: 15px; top: 100px; float:left;padding: 17px 0 0 0;overflow: hidden;height: 0px !important;height /**/: 17px; /* for IE5/Win only */margin-left: 0px;  width: 16px; background: url('../images/layout08/prev.gif') no-repeat top left; }
		
	.project a.url { color: #B4D3EB; display:block; text-align:left; margin-top: 10px; text-decoration:underline;}
	
	

/* header
------------------------------------------------------------- */
#head { background: url('../images/layout08/head.bg.jpg') no-repeat top center; width: 100%;}


#header { width: 980px; margin: 0 auto; height: 185px; margin-bottom: 20px;text-align:left; position:relative; color: #DAE7F5; }
#header a { }

#intro { width: 558px; position:absolute; left: 340px; bottom: 20px; font-size: 10px;}
#intro p { margin-left: 15px;}
#intro h1 { padding: 15px 0 0 0;overflow: hidden;height: 0px !important;height /**/: 15px; /* for IE5/Win only */margin-left: 0px;  width: 315px; background: url('../images/layout08/webfolks.gif') no-repeat top left; margin-bottom: 10px; }
#intro .readmore {  text-decoration:none; display:block; text-align:right; color: #417DBF; margin-top: 1em; }
#intro .readmore a:hover { text-decoration:underline;}
#intro .readmore a { color: #417DBF; font-weight:bold; }



#mainlogo { position:absolute; top: 121px; left: 20px;}

#header-open {display:none;}


.text { }
	.text h1 { color: #FFF; font-size: 16px;}
	.text p { margin-bottom: 1em; }
	.text ul, .text ol { margin: 2em}

/* footer
------------------------------------------------------------- */
#footer { clear:both;}
#footer a {}
#footer a:hover { }

/* forms
------------------------------------------------------------- */
form, fieldset, input,select,textarea { font-family: Verdana,arial,sans-serif;}
fieldset {border:0;}
legend {display:none;}
input, textarea {}
input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus { }