/* - - - - - - - - - - - - - - - - - - - - -

Title : Portfolo V2
Author : Tony Yoo
URL : http://www.tonyyoo.com

Description : Default stylesheet

Created : 09/01/06
Modified : 09/06/06

- - - - - - - - - - - - - - - - - - - - - */

/* ----- CSS ----- */

body {
	margin: 0;
	padding: 0;
	line-height: 1.3em;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: small;
	color: #50697b;
	background: #d9e6ed url(../images/bodyBG.jpg) repeat-x top left;
}



/* ----- header ----- */

#header {
	position: relative;
	margin: 0 auto;
	width: 618px;
	height: 133px;
	background: transparent url(../images/header.jpg) no-repeat top left;
}
	#header h1{
		margin: 0;
		padding: 0;
	}
		#header h1 a {
			position: absolute;
			top: 20px;
			left: 30px;
			display: block;
			width: 220px;
			height: 70px;
			text-indent: -9000px;
		}
	#header ul {
		width: 308px;
		height: 34px;
		padding-left: 274px;
		margin-top: 92px;
		float: left;
		list-style: none;
	}
		#header ul li {
			text-indent: -9999px;
			display: inline;
			margin: 0;
			padding: 0; 
		}
			#header ul li a {
				color: #afad92;
				text-decoration: none;
				float: left;
				background: transparent url(../images/mainNav.gif) no-repeat;
			}
			#header li#work a {
				width: 104px;
				height: 34px;
			}
			#header li#links a {
				width: 104px;
				height: 34px;
			}
			#header li#contact a {
				width: 100px;
				height: 34px;
			}
		
			#header li#links a:link, #header li#links a:visited {
				background-position:-104px 0px;
			}
			#header li#contact a:link, #header li#contact a:visited {
				background-position:-208px 0px;
			}

			#header li#work a:hover, #header li#work a:focus {
				background-position:-0px -34px;
			}
			#header li#links a:hover, #header li#links a:focus {
				background-position:-104px -34px;
			}
			#header li#contact a:hover, #header li#contact a:focus {
				background-position:-208px -34px;
			}
			
			/*----- MAIN NAVIGATION ACTIVE STATE -----*/

			.workPage #header li#work a {
				background-position: 0px -34px;
			}
			.linksPage #header li#links a {
				background-position: -104px -34px;
			}

#leftShadow, #rightShadow {
	position: absolute;
	top: 0px;
	width: 9px;
	height: 454px;
}
	#leftShadow {
		left: 0px;
		background: transparent url(../images/containerDropShadow.gif) repeat-x top left;
	}
	#rightShadow {
		right: 0px;
		background: transparent url(../images/containerDropShadow.gif) repeat-x top right;
	}

/* ----- container ----- */

#container {
	position: relative;
	margin:  0 auto;
	width: 618px;
	font-size: 98%;
	background: #aac0cd url(../images/containerBG.gif) repeat-y top left;
}
	#container .gutter {
		position: relative;
		margin: 0 11px;
		padding: 27px 18px 18px 18px;

		background: transparent url(../images/containerGradient.gif) repeat-x top left;
	}
	
	/* ----- intro ----- */
	
	#container #intro {
		position: relative;
		width: 560px;
		height: 259px;
		color: #3b505e;
		background: transparent url(../images/introBG.jpg) no-repeat top left;
	}
		#container #intro h2, #container #intro p {
			position: relative;
			width: 240px;
		}
		#container #intro h2 {
			top: 47px;
			left: 297px;
			font-weight: normal;
			font-size: 170%;
		}
		#container #intro p {
			top: 43px;
			left: 299px;
			font-size: 110%;
		}
		#container #intro a {
			position: absolute;
			width: 155px;
			display: block;
			line-height: 29px;
			color: #badfe7;

		}
		#container #intro a:hover {
			color: #87eaff;
		}
			#container #intro a#downloadPortfolio {
				top: 167px;
				left: 418px;
			}
			#container #intro a#downloadResume {
				top: 200px;
				left: 418px;
			}
	
	/* ---- work ----- */
			
	#container dl {
		position: relative;
		margin-top: 28px;
		color: #50697b;
		background: #d7e9f3 url(../images/workBG.gif) repeat-y top left;
	}
		#container dl dt {
			position: relative;
			height: 41px;
			line-height: 41px;
			background: #c5e7f9 url(../images/workTitleBG.gif) no-repeat top left;
		}
			#container dl dt span {
				padding-left: 37px;
				font-size: 140%;
				color: #63727a;
			}
			#container dl dt a {
				position: absolute;
				top: 0;
				right: 15px;
				padding-right: 16px;
				color: #879eab;
				background: transparent url(../images/topArrow.gif) no-repeat center right;
			}
			#container dl dt a:hover {
				color: #45535c;
			}

		#container dl dd {
			position: relative;
			width: 100%;
			float: left;
		}
		#container dl dd ul {
			padding: 10px 0 13px 15px;
			float: left;
			width: 204px;
		}
			#container dl dd ul li {
				padding: 11px 0 5px 0;
				border-bottom: 1px solid #a8c3ce;
			}
			#container dl dd ul li.viewBtn {
				padding: 0;
				border: none;
			}
				#container dl dd li strong {
					color: #394f5f;
				}
				#container dl dd li a {
					margin-top: 15px;
					display: block;
					padding-left: 24px;
					width: 110px;
					line-height: 25px;
					font-size: 95%;
					color: #466b7f;
					background: transparent url(../images/viewBtn.gif) no-repeat center left;
				}
				#container dl dd li a:hover {
					color: #fff;
					background-image: url(../images/viewBtnHover.gif);
				}	
		#container dl dd a.thumb { 
			margin: 10px 11px 11px 0;
			float: right;
		}
		
		#container dl dd.desc {
			margin: 0;
			float: none;
			clear: both;
			background: #c4dce9 url(../images/descBG.gif) repeat-y top center;
		}
			#container dl dd.desc div {
				margin-left: 1px;
				width: 558px;
				background: transparent url(../images/descLine.gif) repeat-x top left;
			}
			#container dl dd.desc div p {
				margin: 0;
				padding: 20px 18px 25px 18px;
				background: transparent url(../images/descLine.gif) repeat-x bottom left;
			}
			/* 
			Hack for IE 6 and below 
			-> get rid of padding and put margin.
			-> get rid of the thin bottom border 
			*/
			* html #container dl dd.desc div p {
				padding: 0;
				margin: 20px 18px 25px 18px;
				background: none;
			}
				#container dl dd.desc div p a {
					display: inline;
					margin: 0;
					padding: 0;
					line-height: normal;
					background: none;
				}
				#container dl dd.desc div p a:hover {
					background: none;
				}
		#container dl dd.desc a {
			cursor: pointer;
			display: block;
			padding-left: 50px;
			line-height: 30px;
			color: #698290;
			background: #d0e0e9 url(../images/viewDescBtn.gif) no-repeat top left;
		}
		
		#container dl dd.desc a:hover {
			color: #45535c;
			background: #d0e0e9 url(../images/viewDescBtn.gif) no-repeat bottom left;
		}
	
	/* ----- contact ----- */
	
	#container #contactWrapper {
		position: relative;
		margin-top: 35px;
		width: 100%;
		float: left;
		background: #d7e9f3 url(../images/contactBG.gif) repeat-y top left;
	}
		#container #contactWrapper #contactInfo {
			float: left;
			width: 228px;
			height: 350px;
			background: transparent url(../images/contactInfoDropShadow.gif) no-repeat top right;
		}

			#container #contactWrapper #contactInfo h2 {
				padding-top: 34px;
				padding-left: 14px;
				font-size: 140%;
				color: #394f5f;
				background: transparent url(../images/contactInfoTop.gif) no-repeat top left;
			}
			#container #contactWrapper #contactInfo h3, #container #contactWrapper #contactInfo p {
				margin-left: 16px;
			}
			#container #contactWrapper #contactInfo h3 {
				padding-top: 27px;
				margin-right: 23px;
				margin-top: 8px;
				margin-bottom: 3px;
				font-size: 110%;
				color: #26353d;
				border-top: 1px solid #c6d7e1;
			}
			#container #contactWrapper #contactInfo p {
				margin-bottom: 10px;
				margin-top: 0;
			}
			#container #contactWrapper #contactInfo a {
				font-weight: bold;
				color: #5bb3dd;
			}
			
		#container #contactWrapper #contactForm {
			position: relative;
			width: 332px;	
			float: right;
			background: transparent url(../images/contactFormTop.gif) repeat-x top left;
		}
			#container #contactWrapper #contactForm a {
				position: relative;
				display: block;
				text-indent: -9000px;
				left: 295px;
				top: 12px;
				width: 26px;
				height: 19px;
				background: url(../images/contactTopBtn.gif) no-repeat top right;
			}
		#container #contactWrapper form {
			float: left;
			padding: 22px 17px 3px 10px;
		}
		/* 
		Hack for IE 6 and below 
		-> add more padding below the form
		*/
		* html #container #contactWrapper form {
			padding: 36px 17px 14px 10px;
		}
			#container #contactWrapper form .btn {
				float: left;
			}
			#container #contactWrapper form #formStatus {
				margin-top: 7px;
				float: right;
				width: 210px;
			}
				#container #contactWrapper form #formStatus p {
					padding-left: 19px;
					margin-top: 0;
				}
				#container #contactWrapper form #formStatus .error {
					color: red;
					background: transparent url(../images/errorIcon.gif) no-repeat center left;
				}
				#container #contactWrapper form #formStatus .success {
					background: transparent url(../images/successIcon.gif) no-repeat center left;
				}


	/* ----- footer ----- */
	
	#container #footer {
		height: 65px;
		font-size: 98%;
		color: #b9ccd8;
		background: #6f8592 url(../images/footer.jpg) no-repeat bottom left;
	}
		#container #footer p {
			padding-top: 20px;
			padding-left: 29px;
		}
		#container #footer a {
			color: #8bd3ff;
		}



/* ----- links page ----- */
body.linksPage #container #protolize {
	position: relative;
	margin-bottom: 28px;
	width: 560px;
	height: 200px;
	background: transparent url(../images/protolize.jpg) no-repeat top left;
}
	body.linksPage #container #protolize h2 a {
		width: 300px;
		height: 80px;
		display: block;
		text-indent: -9000px;
	}
	body.linksPage #container #protolize p {
		position: absolute;
		top: 100px;
		left: 30px;
		width: 275px;
		color: #fff;
	}
	body.linksPage #container #protolize p a {
		margin-top: 7px;
		display: block;
		color: #b2e4f0;
	}

body.linksPage #container dl {
	margin-top: 0px;
	margin-bottom: -1px;
}
body.linksPage #container dl.first {
	margin-top: 10px;
}
body.linksPage #container dl dd {
	float: none;
	border-bottom: 1px solid #8bafc5;
}	
body.linksPage #container dl dd ul {
	height: 100%;
	float: none;
	padding: 0;
	margin:21px 11px 27px 11px;
}
body.linksPage #container dl dd ul li {
	margin: 0;
	padding: 0;
	border: none;
}
body.linksPage #container dl dd ul li a {
	margin: 0;
	padding: 0;
	color: inherit;
	background: #e2ecf1 url(../images/linksBox.gif) no-repeat top left;
	display: block;
	width: 538px;
}
body.linksPage #container dl dd ul li a:hover {
	background: #e2ecf1 url(../images/linksBoxHover.gif) no-repeat top left;
}
body.linksPage #container dl dd ul li a:hover strong{
	color: #293d4b;
}
body.linksPage #container dl dd ul li a:hover span{
	color: #293d4b;
	background: #e2ecf1 url(../images/linksBoxHover.gif) no-repeat bottom left;
}

body.linksPage #container dl dd ul li a strong {
	margin-left: 16px;
	padding: 8px 0 0 12px;
	color: #476274;
	display: block;
	background: transparent url(../images/blueBullet.gif) no-repeat 0px 17px;
}
body.linksPage #container dl dd ul li a.hot strong {
	background: transparent url(../images/redBullet.gif) no-repeat 0px 17px;
}
body.linksPage #container dl dd ul li a span {
	margin-top: 0;
	margin-bottom: -1px;
	padding: 0 15px 10px 28px;
	display: block;
	color: #50697b;
	line-height: 1.3em;
	background: #e2ecf1 url(../images/linksBox.gif) no-repeat bottom left;
}
/* 
Hack for IE 6 and below 
-> get rid of negative margin
*/
* html body.linksPage #container dl dd ul li a span {
	margin-bottom: 0px;
}
	
		
		

/* ----- HTML ----- */
h1, h2 {
	margin:  0;
	padding:  0;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
dl, dt, dd {
	margin: 0;
	padding: 0;
}
a {
	outline: none;
}
a:link, a:visited {
	color: #618191;
	text-decoration: none;
}
a:hover, a:active {
	color: #45535c;
}
img {
	border: none;
}


/* ----- form ----- */
input, textarea {
	font-size: 110%;
	padding: 4px;
	border: none;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
label {
	font-weight: bold;
	color: #394f5f;
}
textarea {
	height: 130px;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
.txt {
	width: 296px;
	color: #517990;
	border: none;
	background: #abcadb;
}
.inputHighlighted{  /* Highlighting style */
	width: 296px;
	color: #fff;
  	background-color:#6f8b9b;
}

/* ---- class -----*/
.clear {
	clear: both;
}