@charset "UTF-8";
/* CSS Document */

body { 
	background-image: url('images/bg.jpg');
	background-repeat: repeat;
	background-attachment: fixed;
	padding: 0;
	margin: 0;
	font-family: "museo-sans-1","museo-sans-2", Arial, sans-serif;
	font-size: 11px;
	line-height: 16px;
	font-weight: 300;
	color: #cccccc; 
}
#content {
	width: 850px;
	margin: auto;
	float: none;
}
img { 
	border: 0px
}
a {
	cursor: pointer;
	text-decoration: none;
	color: #cc99cc;
	outline: none;
}
a:hover {
	color: #cccccc;	
}
#download a {
	color: #cccccc;
}
#download a:hover {
	color: #cc99cc;
}
ul {
	display: inline;
	position: relative;
	left: -45px;
}	
li {
	display: inline;
	margin-right: 10px;
}
.color {
	color: #cc99cc;
}	
.divider {
	color: #cccccc;
	font-size: 10px;
	margin-left: 12px;
}
.divider2 {
	color: #cc99cc;
	font-size: 10px;
	margin: 0 6px 0 6px;
}
.divider3 {
	color: #cccccc;
	font-size: 10px;
}
#me, #category {
	height: 42px;
	position: relative;
}
#menu1 {
	padding: 12px 25px 18px 25px;
	position: absolute; 
	top: 0; 
	left: 0;
}
#menu2 {
	padding: 15px 25px;
	position:absolute; 
	top: 0; 
	left: 0;
}
.button {
	text-align: right;
	padding-right: 20px;
	position: absolute; 
	top: 0; 
	right: 0;
}
#aboutMenu, #workMenu {
	letter-spacing: 2px;
}

/*ABOUT*/
#about {
	background-image: url('images/bg.png');
	background-repeat: repeat-y;
	margin-bottom: 5px;
	z-index: 100;
}
#intro {
	padding: 5px 40px 10px 35px;
	font-size: 16px;
	line-height: 25px;
	width: 770px;
}
#hello1 {
	line-height: 38px;
	font-size: 32px;
	line-height: 40px;
	margin-bottom: 15px;
	font-weight: 700;
	font-family: "museo-slab-1","museo-slab-2", Arial, sans-serif;
}
#hello2 a {
	text-decoration: none;
	color: #cccccc;
	border-bottom: 1px dotted;
}
#hello2 a:hover {
	text-decoration: none;
	color: #cc99cc;
	border-bottom: 1px dotted;
}
#more {
	font-size: 12px;
	text-align: right;
	padding-right: 25px;
	height: 32px;
}
#intro_more {
	padding: 18px 29px 0 29px;
	height: 460px;
}
#intro_more .big {
	font-size: 15px;
	line-height: 20px;
	font-weight: 300;
	font-family: "museo-slab-1","museo-slab-2", Arial, sans-serif;
	color: #cc99cc;
	background-image: url('images/box_bg.png');
	background-repeat: repeat;
	margin-bottom: 8px;
}
#intro_more .small {
	font-size: 11px;
	line-height: 16px;
	font-weight: 300;
	font-family: "museo-sans-1","museo-sans-2", Arial, sans-serif;
	color: #cccccc;	
}
.expand img, .collapse img {
	margin: 8px 0px;
}

/*WORK*/
#work {
	background-image: url('images/bg.png');
	background-repeat: repeat-y;
}
.thumb img {
	margin: 10px 0 0 0
}

/*WORK_THUMB*/
#workThumb {
	padding-left: 25px;
	margin: 10px 0 30px 0;
	height: 825px;
	position: relative;
}
#workThumb img {
	margin: 0 13px 13px 0;
}
#workThumb div {
	cursor: pointer;
}
.thumbnail {
	float: left;
	position: relative;
	color: #ffffff;
}
.thumbnail_h {
	position: absolute; 
	top: 0px;
	width: 218px;
	height: 150px;
	padding: 20px;
	background: url(images/thumbnails/thumb_hover.png);
	visibility: hidden;
	font-size: 20px;
	line-height: 26px;
	font-family: "museo-slab-1","museo-slab-2", Arial, sans-serif;
	font-weight: 700;
	color: #cc99cc;	
}
.thumbnail_h_subt {
	margin-top: 8px;
	font-family: "museo-sans-1","museo-sans-2", Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;	
	font-weight: 300;
	color: #cccccc;
}

/*WORK_DETAIL*/
.selectedCat {
	background-color: #330033;
}
#menu1 li, #menu2 li  {
	cursor: pointer;
}
.header {
	font-size: 8px;
	letter-spacing: 1px;
	color: #cc99cc;
}
#workDetail {
	padding: 0 19px 20px 19px;
}
#title {
	border-top: #330033 solid 1px;
	border-bottom: #330033 solid 1px;
	padding: 15px 12px;
	vertical-align: middle;
}
#maint {
	font-size: 20px;
	font-family: "museo-slab-1","museo-slab-2", Arial, sans-serif;
	font-weight: 700;
	color: #cc99cc;	
}
#subt {
	margin-top: 10px;
	font-size: 13px;
	line-height: 18px;		
}
#challenge {
	float: left;
	width: 375px;
	padding: 10px 0 0 12px;
	margin-bottom: 25px;
}
#solution {
	padding-top: 10px;
	width: 375px;
	padding-left: 420px;
	margin-bottom: 25px;
}
.chal_content, .sol_content, .q_content, .proc_content {
	margin-top: 5px;
}
.question {
	margin-top: 14px;
}
#images {
	margin: 15px 12px 20px 12px;
}
#images img, #video_src {
	float: left;
	margin-right: 18px;
	margin-bottom: 10px;
	padding: 5px 0;
}
.img_desc {
	margin-bottom: 5px;
	color: #cccccc;
}
#desc {
	margin: 20px 5px 5px 5px;
	background: #663366;
	line-height: 14px;
}
.desc_content {
	padding: 0; 
	margin-top: 5px;
}
#role{
	float: left;
	border-right: #330033 dotted 1px;
	padding: 8px 10px 10px 10px;
	width: 258px;
}
#duration, #course, #team{
	float: left;
	border-right: #330033 dotted 1px;
	padding: 8px 10px 10px 10px;
	width: 110px;
}
#download{
	float: left;
	padding: 8px 10px 10px 10px;
	width: 110px;
}

/*FOOTER*/
#footer { 
	background-image: url('images/bg.png');
	background-repeat: repeat-y;	
	width: 800px;
	height: 15px;
	color: #cc99cc;
	margin-top: 30px;
	padding: 25px;
}