/*
for your eyes only
*/

body,html {
	font-size: 12px; 
	font-family: monospace;
	/* font-family: Verdana, Geneva, sans-serif; */
	
	background: url(../images/bg.gif);
	margin:0;
	padding:0;
}

#container {
	width: 100%;
	margin: 0 auto;
}

#header {
	font-size: 12px;
	color: #fff;
	height: 50px;
	text-align: center;
	margin: 20px auto;
}

#header a:link { font-weight: bold; font-size: 20px; }

#nav {
	font-weight: bold;
	font-size: 20px;
}


.heading,
.footing {
	width: 50px;
	margin: 0 auto;
	padding: 3px;
	text-align: center;
	background-color: #fff; 
	border-radius: 10px;
	-webkit-border-radius: 10px;
}

.heading { position: relative; top: 30px; z-index: 5; }
	
.footing { position: relative; bottom: 10px; }
.footing span,
.heading span { position: relative; left: 50%; text-align: center; }


h1 {
	text-align: center;
	font-size: 3em;
	font-weight: bold;
	margin: 0 1em;
	padding: 0;
}


.white { color: #fff; }

#welcome,
#work,
#contact {
	position: relative;
	padding: 20px;
	height: 365px;
}


#welcome {
	margin-top: 20px;
	background: #fff url(../images/aboutbg.png) repeat-x top;
}

	.welcome.footing {
		background-color: #E0F3F7; }

#contact {
	margin-top: 0px;
	background: #fff url(../images/contactbg.png) repeat top;
}

#work { 
	height: auto;
	padding: 0;
	
	/* background: url(../images/workbg.png) repeat-x center top; */
}

#port {
	/* width: 1000px; */
	position: relative;
	left: 0;
	right: 0;
	
	height: 0px;
	border-top: 4px solid #43A7BB;
	border-bottom: 4px solid #43A7BB;
	
	display: none;

}


	.left { 
		position: absolute;
		left: 0;
		background: url(../images/wgradl.png) repeat-y right;
		
		height: 750px;
		
		z-index: 2;
		opacity: 0;
	}
	
	.right {
		position: absolute;
		right: 0;
		z-index: 1;
		background: url(../images/wgradr.png) repeat-y left;
		height: 750px;
		opacity: 0;
	}

	.scroller {
/*
		float: left;
		position: relative;
*/
		position: absolute;
		
		left: 0;
		right: 0;
		height: 100%;
		
		width: 100%;
		overflow: auto;
		
		
	}
	
	.items {
		
		width:20000em;
		position:absolute;
		display: table;
	
		
	}
	
		.i {
			float: left;
			/* width: 550px; */
			height: 750px;
		}
		

		
		.loading {
			background: url(../images/ajax_bg.gif) no-repeat center center;
		}
		
		.items .i img {
			float: left;			
		}
		
		.border {
			border: 10px solid #43A7BB;
		}
				
		
		.p {
			float: left;
			height: 750px;
		}
	

.section .c {
	width: 600px;
	margin: 0 auto;
	padding: 0px; }


.leftside, .rightside {
	width: 120px;
	height: 470px;
}

.rightside { float: right; }
.leftside { float: left; }

#welcome .leftside { background: url(../images/brackleft.png) no-repeat; }
#welcome .rightside { background: url(../images/brackright.png) no-repeat; }

.prev { float: right; background: url(../images/colleft.png); }
.next { float: left; background: url(../images/colright.png); }

.prev, .next {
	/* float: left; */
	/* position: absolute; */
	margin-top: 340px;
	width: 96px; height: 94px; 
	background-repeat: no-repeat;
	background-position: bottom;
	cursor: pointer;
	display: none;
}

.prev { margin-right:  50px; }
.next { margin-left: 50px; }

.prev:hover { background-position: top; }
.next:hover { background-position: top; }

#work .c { 
	width: 950px;
		margin: 0 auto;
		padding: 0; }

.work {		
	margin: 0 auto;
	width: 600px;	
	border: 10px solid #ccc;
}

#work .c img { border: 0px solid white; display: block; margin: 0 auto; }

.c { overflow: hidden; }

/*
welcome
-------------------------------*/
#header a {
	font-size: 40px;
	text-decoration: none; 
	color: #fff;
}


/*
nav
-------------------------------*/
.nav { 
	float:right;
    position:relative;
    left:-50%;
    text-align:left; }

 ul { list-style: none; position: relative; left: 45%;  }

 li {
	background-color: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 10px 15px;
	margin: 5px;
	float: left;
	position:relative;
	cursor: pointer;
	font-size: 20px;
}

	li.loading {
		background: url(../images/ajax_nav.gif) no-repeat center center;
	}

 li a {
	color: #000;
	text-decoration: none;	
	white-space:nowrap;
	margin: 0;	
}

	li.active {
		font-weight: bold;		
	}

 li:hover,li.active { background-color: #5C735A; color: #fff; border: 1px solid #fff; padding: 9px 14px; }

/*
keep looking [notes css]
-------------------------------
c = catianer
n = navibar


--- */


/*
input
-------------------------------*/

input, textarea {
	font-family: monospace;
	font-size: .9em;
	margin: 3px 0; 
}

	.placeholder {
		color: #aaa;
	}

textarea { padding: 3px; resize: none; }

.button {
	border: 1px #999 solid;
	background-color: #fff;
		border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 3px;
}

.button:hover {
	background-color: #B4CEAC;
}

#message {
	font-size: 11px;
	background-color: #5C735A;
	color: #fff;
	width: 350px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 30px auto;
	padding: 10px 5px;	
	display: none;
}

/*
Links
-------------------------------*/

.detail a:link { padding: 0; }
.detail a:visited { padding: 0; }
.detail a:hover { padding: 0;; }
.detail a:active { padding: 0; }


		   
#n a:visited { color: #000; text-decoration: none; background: none; padding: 0px; }
#n a:hover { color: #000000; text-decoration: none; background: none; padding: 0px; }
#n a:active { color: #000000; text-decoration: none; background: none; padding: 0px; }