/* CSS Document */

/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*------------------generic styles-------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/


body, #all, #wrapper h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, blockquote, form, input {
margin: 0px;
padding: 0px;
font-family:Geneva, Arial, Helvetica, sans-serif;
line-height: 1.6em;
color:#93c79f;
}

body {
width: 800px;
margin: 0 auto;
xpadding: 70px;
font-size: 16px;
background-color: #acd8b1;
}


.all {
position: relative;
margin-top: 120px;
width: 800px;
height: 450px;
background: url(img/white_bg.gif) no-repeat top left;
}

.all #wrapper {
position: relative;
top: -55px;
left: 60px;
height: 400px;

}

.all #wrapper .copy_area {
float: left;
width: 300px;
margin-top: 50px;
clear: both;				
}

.all #wrapper .copy_area h2 {
font-size:1em;
}

.all #wrapper .copy_area p {
position: relative;
top: 50px;
width: 245px;
margin-top: 15px;
font-size: 0.8em;
text-align: center;
}

#wrapper div.copy_area p a:link,
#wrapper div.copy_area p a:visited {
text-decoration: none;
color:#70aa7d;
}

#wrapper div.copy_area p a:hover,
#wrapper div.copy_area p a:active {
text-decoration: underline;
color:#70aa7d;
}

li {
list-style: none;
font-size: 0.9em;
}

a {
margin:0;
padding: 0;
text-decoration: none;
color:#70aa7d;
}

a:hover {
text-decoration: underline;
}

.all #wrapper img.main {
float: left;
position: relative;
top: 45px;
left: 0;
}


/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------navigation styles-------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/


.all #wrapper #topsection #nav {

}

.all #wrapper #topsection #nav li {
float: left;
position: relative;
top: 5px;
padding: 0 20px;
}

.all #wrapper #topsection #nav li a {
float: left;
height: 30px;
display: block;
text-decoration: none;
text-indent: -5000px;
}

.all #wrapper #topsection #nav li#home a:link,
.all #wrapper #topsection #nav li#home a:visited {
width: 98px;
background: url(img/buttons_v2.gif) no-repeat 0 0;
}

.all #wrapper #topsection #nav li#home a:hover,
.all #wrapper #topsection #nav li#home a:active {
background: url(img/buttons_v2.gif) no-repeat 0 -30px;
}

.all #wrapper #topsection #nav li.current_home a {
width: 98px;
background: url(img/buttons_v2.gif) no-repeat 0 -30px;
}

.all #wrapper #topsection #nav li#portfolio a:link,
.all #wrapper #topsection #nav li#portfolio a:visited {
width:148px;
background: url(img/buttons_v2.gif) no-repeat -104px 0;
}

.all #wrapper #topsection #nav li#portfolio a:hover,
.all #wrapper #topsection #nav li#portfolio a:active {
background: url(img/buttons_v2.gif) no-repeat -104px -30px;
}

.all #wrapper #topsection #nav li.current_portfolio a {
width: 148px;
background: url(img/buttons_v2.gif) no-repeat -104px -30px;
}

.all #wrapper #topsection #nav li#contact a:link,
.all #wrapper #topsection #nav li#contact a:visited {
width:131px;
background: url(img/buttons_v2.gif) no-repeat -257px 0;
}

.all #wrapper #topsection #nav li#contact a:hover,
.all #wrapper #topsection #nav li#contact a:active {
background: url(img/buttons_v2.gif) no-repeat -257px -30px;
}

.all #wrapper #topsection #nav li.current_contact a {
width: 131px;
background: url(img/buttons_v2.gif) no-repeat -257px -30px;
}

.all #wrapper #topsection #nav li#links a:link,
.all #wrapper #topsection #nav li#links a:visited {
width:80px;
background: url(img/buttons_v2.gif) no-repeat -394px 0;
}

.all #wrapper #topsection #nav li#links a:hover,
.all #wrapper #topsection #nav li#links a:active {
background: url(img/buttons_v2.gif) no-repeat -394px -30px;
}


.all #wrapper #topsection #nav li.current_links a {
width: 80px;
background: url(img/buttons_v2.gif) no-repeat -394px -30px;
}







	
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*------------------index page styles-------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/


.all #wrapper h1 {
float: right;
font-size: 2.8em;
}

.all #wrapper h1 a {
position: relative;
top: -20px;
left: -200px;
margin: 0;
padding: 0;
text-decoration: none;
color: #ffffff;
}

.all #wrapper #topsection {
position: relative;
top: 10px;
width: 700px;
clear: both;
}





/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*--------------styles for work page-----------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/






.all #wrapper #container .demo {
position: relative;
top: 40px;
left: 5px;
width: 570px;

clear: both;
}

.all #wrapper #container .demo ul.gallery_demo_unstyled {
position: relative;
left: 20px;
list-style:none;
width:150px;
float: left;

}

.all #wrapper #container .demo ul.gallery_demo_unstyled li {
display:block;
width:45px;
height:45px;
overflow:hidden;
float:left;
margin:0px 5px 10px 0;
background-color: #a7d5b1;
}

.all #wrapper #container .demo p.more a {
color:#599667;
text-decoration: none;
}

.all #wrapper #container .demo p.more a:hover,
.all #wrapper #container .demo p.more a:active {	
color:#599667;
text-decoration: underline;
}

img.replaced {
position: relative;
top: -10px;
}
	
.all #wrapper #container .demo #main_image {
background: url(img/main_img_bg.gif) no-repeat;
float: right;
width: 300px;
height: 300px;

}

.all #wrapper #container .demo #main_image.galleria_container {
background: url(img/main_img_bg.gif) no-repeat;
width: 300px;
height: 300px;
}

.all #wrapper #container .demo #main_image.galleria_container div.galleria_wrapper img.replaced {

xborder: 2px solid #a7d5b1; 
width: 300px;
height: 300px;
}

	
	.caption {
	display: block;
	position: relative;
	top: 0px;
	padding: 0;
	margin: 0;
	background-color: white;
	font-size: 0.9em;
	font-style:italic;
	color:#887;
	line-height: 1.6em;
	text-align: center;
	}	
		
.all #wrapper #container p.nav {
		position: absolute;
		left: 15px;
		top: 260px;
		display: block;
		clear: both;
		xbackground-color: red;
		height: 30px;
		text-align: center;
		}		
		
		
		.all #wrapper #container p.nav a.previous {
	
		background: url(img/arrow-left.gif) no-repeat 0 50%;
		padding-left: 100px;
		padding-top: 8px;
		padding-bottom: 8px;
		width: 44px;
		height: 30px;
		color: white;
		}
	
	.all #wrapper #container p.nav a.next {
		background: url(img/arrow-right.gif) no-repeat 0 50%;
		padding-left: 44px;
		padding-top: 8px;
		padding-bottom: 8px;
		width: 44px;
		height: 30px;
		color: white;
		}

x#container .demo .thumbnail_links {
height: 40px;
clear: both;
}

#container .demo .thumbnail_links p.loader
{
	position: absolute;
	top: 220px;
	left: 11px;
	clear: both;
    xoverflow: hidden;
    margin: 0;
	xpadding-top: 5px;
	font-size: 0.6em;
			text-align: center;

}	

#container p.more
{

	position: absolute;
	top: 235px;
	left: 11px;
	clear: both;
    overflow: hidden;
    margin: 0;
	padding: 0;
	font-size: 0.6em;
			text-align: center;

}

/*#container p.more a:link,
#container p.more a:visited {
background: url(img/arrow_small_back.gif) no-repeat 0 50%;
padding-left: 18px;
}*/

/*-------------related links page styles--------------------*/
#wrapper div.copy_area img.main {
position: relative;
top: 5px;
left: 5px;
float: left;
}



#wrapper div#related_links {
position: relative;
top: 110px;
float: left;
left: 40px;
width: 290px;
padding: 0;
margin:0;
}

/*-------------portfolio page styles--------------------*/



.all #wrapper .copy_area ul {
margin-top: 50px;
}
				
.all #wrapper .copy_area ul li {
text-indent: -9000px;
}

.all #wrapper .copy_area li.illustrations a:link,
.all #wrapper .copy_area li.illustrations a:visited {
background: url(img/illustrations_button.jpg) no-repeat 0 0;
width: 236px;
height: 74px;
display: block;
}
	
.all #wrapper .copy_area ul li.illustrations a:hover,
.all #wrapper .copy_area ul li.illustrations a:active {
text-indent: -9000px;
background: url(img/illustrations_button.jpg) no-repeat 0 -72px;
}

.all #wrapper .copy_area li.other a:link,
.all #wrapper .copy_area li.other a:visited {
background: url(img/other_button.jpg) no-repeat 0 0;
width: 236px;
height: 74px;
display: block;
}
	
.all #wrapper .copy_area ul li.other a:hover,
.all #wrapper .copy_area ul li.other a:active {
text-indent: -9000px;
background: url(img/other_button.jpg) no-repeat 0 -72px;
}



.all #wrapper a.moreWork {
clear: both;
position: absolute;
top: 440px;
left: 30px;
margin: 0;
padding: 0;
float: left;
}

.clearfloats {
clear: both;
}