@charset "UTF-8";
/* 
	CSS Document for Agus Wijaya
	Copyright (c) 2010 Bellamy Budiman (Neuro-Designs). All rights reserved.
*/

@import url("_styles_reset.css");
@import url("colorbox.css");
@import url("selectbox.css");

/* IE Warning */
#IEWarning {
	width: 100%;
	background: #f00;
	clear: both;
	padding: 10px 0px;
	font-family: arial, helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: normal;
	color: #fff;
	text-align: center;
	}
	
	#IEWarning a:link, #IEWarning a:visited{
		font-weight: bold;
		color: #fff;
		}
		
		#IEWarning a:hover {
			color: #fff;
			text-decoration: underline;
			}

/* General Settings */
html, body {
	height:100%;
	margin: 0;
	padding: 0;
	}

#vertical{
	float: left;
	height:50%;
	margin-top:-355px;/* half vertical height*/
}
		
body {
	background: #f1f1f2;
	font: 10px/20px helvetica neue, helvetica, arial, sans-serif;
	font-size: 62.5%;
	color: #666;
	}

	body#pgHome {
		background: #fff;
		min-height: 680px;
		}
		
	body#popup {
		background: #fff;
		width: 580px;
		margin: 20px 0px 0px 0px;
		}
		
img {
	vertical-align: middle;
	}
	
a:link, a:visited {
	color: #666;
	text-decoration: none;
	}
	
	a:hover {
	color: #34cdfd;		
		}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	}

h2 {
	font-size: 1.8em;
	}
	
h3 {
	margin-bottom: 10px;	
	font-size: 1.4em;
	}
	
h4 {
	font-size: 1.2em;
	}
	
p {
	margin-bottom: 10px;
	font-size: 1.2em;
	}
	
strong {
	font-weight: bold;
	}
	
em, cite {
	font-style: italic;
	}
	
small {
	font-size: 0.9em;
	}

sup {
	font-size: 0.7em;
	position: relative;
	top: -0.6em;
	}

sub {
	font-size: 0.7em;
	position: relative;
	bottom: -0.6em;
	}
		
/* Additional Classes */

.nomargin {
	margin: 0px;
	}

.nopadding {
	padding: 0px;
	}

.hidden {
	visibility: hidden;
	}
	
.divider {
	clear: both;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #ccc;
	font-size: 1px;
	line-height: 1px;
	}
	
/* Layout Settings */

#wrapper {
	width: 629px;
	margin: 0px auto;
	}

	#pgHome #wrapper {
		width: 505px;
		margin: 0px auto;
		padding-top: 60px; 
		overflow: auto;
		clear:both;
		height: 710px;
		}

h1 {
	width: 176px;
	height: 56px;
	}
	
	h1 a {
		display: block;
		width: 176px;
		height: 56px;
		background: url("../images/logo.png") 0 0 no-repeat;
		margin: 0px;
		text-align: left;
		text-indent: -80000em;
		text-decoration: none;
		}

#header {
	width: 609px;
	background: #fff;
	margin: 12px auto;
	padding: 0px;
	clear: both;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 15px #ccc;
	-moz-box-shadow: 0px 0px 15px #ccc;
	}
	
	#header #dotWrapper {
		width: 599px;
		height: 100px;
		border-top: 2px dotted #eaeaea;
		border-bottom: 2px dotted #eaeaea;
		overflow: hidden;
		margin: 5px;
		}
		
		#header h1 {
			float: left;
			padding: 20px 0px 0px 10px;
			margin: 0px;
			}
			
		#header #menu {
			width: 200px;
			height: 90px;
			float: right;
			font-size: 11px;
			line-height: 1.5em;
			text-align: right;
			padding: 25px 10px 0px 0px;
			}

			#header #menu a:link, #header #menu a:visited {
				color: #aaa;
				font-weight: normal;
				}
				
				#pgDesign #header #menu a#linkDesign:link, #pgDesign #header #menu a#linkDesign:visited,
				#pgIllustration #header #menu a#linkIllustration:link, #pgIllustration #header #menu a#linkIllustration:visited,
				#pgAbout #header #menu a#linkAbout:link, #pgAbout #header #menu a#linkAbout:visited
				{
					color: #4df7ff;
					}
					
				#header #menu a:hover {
					color: #4df7ff;
					}
		
			#pgHome #menu {
				width: 400px;
				font-size: 12px;
				margin: 30px auto;
				text-align: center;
				color: #999;
				}
		
				#pgHome #menu a:link, #pgHome #menu a:visited {
					color: #999;
					font-weight: normal;
					}
					
					#pgHome #menu a:hover {
						color: #4df7ff;
						}

			#pgHome #menualt {
			  position: absolute;
			  top: 599px;
			  left: 282px;
				width: 100px;
				font-size: 11px;
				color: #999;
				
				}
				
				#pgHome #menualt li { margin: 0; padding: 0; height: auto; line-height: 1.2; }
		
				#pgHome #menualt a:link, #pgHome #menualt a:visited {
					color: #999;
					font-weight: normal;
					}
					
					#pgHome #menualt a:hover {
						color: #4df7ff;
						}

a span.two{
	color: #34cdfd;
	cursor: pointer;
	}	

#contents {
	width: 609px;
	margin: 0px auto;
	}

	#contents #featured {
		width: 609px;
		}
		
		#contents #featured a {
			margin-bottom: 0px;
			text-indent: -80000em;
			}
		
	#contents .col1 {
		width: 195px;
		margin-right: 12px;
		float: left;
		}
		
	#contents .col2 {
		width: 402px;
		margin-right: 12px;
		float: left;
		}
	
	#contents .col3 {
		width: 609px;
		}
	
	#contents .end {
		margin-right: 0px;
		}

/* Home Slideshow Settings */

#slideshow {
	width: 505px;
	height: 505px;
	background: #fff;
	margin: 0px auto;
	margin-top: 0px;
	}

#slideshow2 {
	width: 426px;
	height: 426px;
	background: #fff;
	margin: 0px auto;
	margin-top: 0px;
	}

#slideshow img {
	width: 505px;
	height: 505px;
}

/* About Page Settings */

#column {
	width: 402px;
	float: left;
	}
	
#sidebar {
	width: 195px;
	float: right;
	}
	
	a.aboutButton {
		display: block;
		text-indent: -80000em;
		margin-bottom: 12px;
		-webkit-box-shadow: 0px 0px 15px #ccc;
		-moz-box-shadow: 0px 0px 15px #ccc;
		overflow:hidden;
		}

	a#btnExcerpt:link, a#btnExcerpt:visited {
		width: 402px;
		height: 402px;
		background: url("../images/btn_excerpt.jpg") top no-repeat;
		}
		
	a#btnBlurb:link, a#btnBlurb:visited {
		width: 402px;
		height: 94px;
		background: url("../images/btn_blurb.jpg") top no-repeat;
		}
		
	a#btnContact:link, a#btnContact:visited {
		width: 195px;
		height: 300px;
		background: url("../images/btn_contact.png") top no-repeat;
		}
		
	a#btnResume:link, a#btnResume:visited {
		width: 195px;
		height: 92px;
		background: url("../images/btn_resume.jpg") top no-repeat;
		}
		
	a#btnBlog:link, a#btnBlog:visited {
		width: 195px;
		height: 195px;
		background: url("../images/btn_blog.jpg") top no-repeat;
		}
		
		a#btnExcerpt:hover, 
		a#btnBlurb:hover,
		a#btnContact:hover,
		a#btnResume:hover,
		a#btnBlog:hover {
			background-position: bottom;
			}


.defaultModule {
	padding: 5px;
	background: #fff;
	margin-bottom: 12px;
	-webkit-box-shadow: 0px 0px 15px #ccc;
	-moz-box-shadow: 0px 0px 15px #ccc;	
	}

.yellowRollover:hover {
	background: #ffff45;
	}

/* Portfolio Settings */

.categorySelector, .archiveSelector {
	padding: 7px 7px 0px 7px;
	color: #666;
	font-family: baskerville, times new roman, serif;
	font-size: 1.4em;
	font-style: italic;
	text-align: right;
	text-transform: uppercase;
	position: relative;
	}
		
	.archiveSelector {
		padding-bottom: 7px;
		}
		
	.archiveSelector a {
		font-weight: normal;
		color: #666;
		}
		
		.archiveSelector a span {
			font-style: normal;
			color: #4df7ff;
			}

.select {
	background: url("../images/select_arrow.png") right center no-repeat;
	position: absolute;
	display: block;
	right: 7px;
	width: 150px;
	margin-top: -4px;
	padding: 0px;
	padding-right: 14px;
	color: #4df7ff;
	font-style: normal;
	overflow: hidden;
	}
	
	.select:hover, .styled:hover {
		cursor: pointer;
		}
				
	.blueSquare {
		background: #a6fbff;
		display: block;
		width: 28px;
		height: 28px;
		position: absolute;
		z-index: 100;
		top: 4px;
		left: -17px;
		}

a.portfolioButton {
	display: block;
	background: transparent url("../images/bg_view.png") center no-repeat;
	-webkit-box-shadow: 0px 0px 15px #ccc;
	-moz-box-shadow: 0px 0px 15px #ccc;
	margin-bottom: 12px;
	width: 100%;
	overflow: hidden;
	}
	
a.portfolioButton:hover {
	display: block;
	background-color: #4df7ff;
	-webkit-box-shadow: 0px 0px 15px #ccc;
	-moz-box-shadow: 0px 0px 15px #ccc;
	margin-bottom: 12px;
	}
	
/*	a.portfolioButton:hover {
		background: #4df7ff url("../images/bg_view.png") center no-repeat;
		}*/
		
		a.featured:hover {
			background: #4df7ff url("../images/bg_view_featured.png") center no-repeat;
			}
	
	a.portfolioButton span.info {
		display: block;
		background: #fff;
		padding-bottom: 10px;
		}

	a.featured span.info {
		display: block;
		background: #fff;
		padding-bottom: 0px;
		}
	
		a.portfolioButton span.info span.title {
			display: block;
			color: #333;
			font-family: baskerville, times new roman, serif;
			font-weight: normal;
			font-style: italic;
			font-size: 1.8em;
			line-height: 1.2em;
			padding: 3px 5px 1px 5px;
			position: relative;
			}
			
		a.portfolioButton span.info span.description {
			display: block;
			color: #999;
			font-weight: normal;
			font-size: 1.1em;
			letter-spacing: -0.07em;
			line-height: 1.2em;
			padding: 0px 5px;
			position: relative;
			}
			
		a.portfolioButton span.info span.type {
			display: block;
			color: #ccc;
			font-weight: normal;
			font-size: 1.1em;
			padding: 0px 5px 0px 5px;
			margin-top: -2px;
			position: relative;
			}
		
		a.portfolioButton span.info:hover {
			opacity: 0;
			position: relative;
			}









/* Popup HTML Pages Settings */

body#popup #blurb #head {
	background: url("../images/about_blurb_header.jpg") no-repeat;
	width: 580px;
	height: 310px;
	display: block;
	text-indent: -80000em;
	}
	
body#popup #blurb #contents {
	width: 170px;
	float: right;
	padding-right: 30px;
	line-height: 1.5em;
	color: #888;
	}
	
	body#popup #blurb #contents a {
		color: #888;
		font-weight: normal;
		text-decoration: underline;
		}
	
		body#popup #blurb #contents a:hover {
			color: #34cdfd;
			}

body#popup #excerpt #head {
	background: url("../images/about_excerpt_header.jpg") no-repeat;
	width: 580px;
	height: 103px;
	display: block;
	text-indent: -80000em;
	}
	
body#popup #excerpt #contents {
	background: url("../images/about_excerpt_bg.jpg") left bottom no-repeat;
	width: 580px;
	height: 560px;
	padding: 0px;
	line-height: 1.5em;
	color: #888;
	}
	
	body#popup #excerpt #contents strong {
		color: #000;
		}


br.clear { clear: both; }

#wrapper { position: relative; }
#pgHome #wrapper h1 { position: absolute; top: 605px; right: 255px; width: 176px; height: 56px; margin: 0; }

	#pgHome #wrapper h1 {
		margin: -1px auto;
		height: 24px;
		width: 74px;
		}
	#pgHome #wrapper h1 a {
		background: url("../images/logohome.png") 0 0 no-repeat;
		height: 24px;
		width: 74px;
		}