/* ----------------------------------------------------
                IMPORTANT NOTICE!  
 		COPYRIGHT (C) KHAIRUDIN LEE 2005. 
ALL APPLICABLE RIGHTS RESERVED UNLESS OTHERWISE STATED.
		PLEASE FORWARD ANY QUERIES TO: 
			  khairudinlee@gmail.com
			  
			 last modified: 1 Jan 2006
----------------------------------------------------- */


/* -------------------
   .a sticky footer 
------------------- */
html {
	height: 91%;
}
body {
	height: 100%;
}
div#wrapper {
	position: relative;
	min-height: 100%;
}
div#footer {
	position: relative;
	margin: -4.7em auto 0 auto;
}


/* -------------------------
   .b nice tooltip titles 
------------------------- */
#nicetitlecontainer {
	border: 0.3em solid #ddd;
	color:#da3963;
	background-color: #fff;
}
div.nicetitle {
	left: 0;
	padding: 0.4em 0.6em;
	position: absolute;
	top: 0;
	text-align:left;
	/* width: 25em; */
	z-index: 100;
	width: auto;
	height: auto;
}	
div.nicetitle p {
	font-size: 1.1em;
	font-weight: normal;
	font-family: Arial, "Trebuchet MS", sans-serif;
}
div.nicetitle p.destination {
	margin-top: -0.35em;
	font-size: 0.9em;
	font-weight: normal;
	font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
	text-align: left;
	color: #67b767;
	background-color: inherit;
}

/* -------------------------
   .c journal gravatars 
------------------------- */

.gravatar { float:right; }


/* -------------------------
   .d lightbox js
------------------------- */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../_images/lb-prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../_images/lb-nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 3.0em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


/* -----------------
   1. DEFAULT STYLES
----------------- */
* {
	margin: 0;
	padding: 0;
	font-family: Arial, "Trebuchet MS", "Lucida Grande", sans-serif;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}
body {
	font-size: 62.5%;
	line-height: 1.8em; /* tiny = line-height: 1.55em; 1.7em; */
	text-align: center;
	color: #777;
	background: #fff url(../_images/topbg.jpg) repeat-x left top;
}
.hide, hr {
	display: none
}
img, fieldset {
   border: 0;
   text-decoration: none;
}
p, dl, ul, ol, input, textarea {
	font-size: 1.1em; /* tiny = font-size: 1.05em, normal = font-size: 1.1em; */
}
ul, ol, li {
	list-style: none;
}
h1, h2, h3, h4, h5, h6, dt strong {
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, "Lucida Grande", sans-serif;
	text-transform: uppercase;
	color: #a1a1a1;
	background-color: inherit;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1.0em;
}
dt strong {
	font-size: 0.9em; /* parent 1.1em */
	color: #777;
	background-color: inherit;
} 
acronym, dfn, abbr {
   border-bottom: 1px dashed #ccc;
   cursor: help;
}



/* ------------------
   2. LINKS STYLES 
------------------ */

/*--- general ---*/
a:link,
p#page-location a:link {
	color: #67b767;
	background-color: inherit;
}
a:visited,
p#page-location a:visited {
	color: #67b767;
	background-color: inherit;
}
a:hover,a:focus,a:active,
p#page-location a:hover, p#page-location a:focus, p#page-location a:active {
	color: #fff;
	background-color: #da3963;
}
img a:hover, img a:focus, img a:active
{ background: none !important; }


/*--- menu ---*/
div#media a, div#photo a, div#info a,
div#journal-subnavi li a {
	display: block;
	width: 8.7em;
}

/*--- at page ---*/
li#website a, li#print a, li#graphic a, li#motion a,
li#mono a, li#colour a, li#series a, li#bridal a,
li#home a, li#about a, li#journal a, li#contact a {
	color: #da3963;
	background-color:#f1f1f1;
}

/*--- journal ---*/
h2.post-title a, div#journal-article h3 a, p.poster-title a {
	font-weight: bold;
	font-size: 1.0em;
	font-family: "Trebuchet MS", Verdana, Arial, "Lucida Grande", sans-serif;
}
div.post-article p em a:link {
	font-style: italic;
	color: #67b767;
	background-color: inherit;
}
div.post-article p em a:visited {
	font-style: italic;
	color: #67b767;
	background-color: inherit;
}
div.post-article p em a:hover,div.post-article p em a:focus,div.post-article p em a:active {
	font-style: italic;
	color: #fff;
	background-color: #da3963;
}


/* -------------------
   2. LAYOUT STYLES
------------------- */

/*--- DIV "TOP" ---*/
div#top {
	margin: 17px auto 0 auto;
	width: 66.0em;
	height: 3.4em;
	color: inherit;
	background: #fff url(../_images/topgradient.png) repeat-x left top;
}

/*--- DIV "HEADER" ---*/
div#header {
	margin: 0 auto;
	width: 60.0em;
}
dl, div#navigation-menu {
	margin: 0 auto 4.0em auto;	
	text-align: left;
}
/*--- =namecard ---*/
dl {
	float: left;
	color: inherit;
	background: #fff url(../_images/logo.png) no-repeat left center;
}
dt {
	margin-left: 10.0em;
}
dd {
	margin-left: 10.0em;
	padding: 0.4em 0;
}
/*--- =navigation ---*/
div#navigation-menu {
	float: right;
}
div#media, div#photo, div#info {
	width: 9.5em;
	float: left;
}
div#media ul, div#photo ul, div#info ul {
	list-style: none;
}
div#media li, div#photo li, div#info li {
	padding: 0.4em 0;
	text-indent: 0.3em;
}

/*--- DIV "ATTENTION" ---*/
div#page-attention {
	margin: 0 auto;
	width: 60.0em;
	text-align: left;
	clear: both;
	color: #b5b5b5;
	background-color: inherit;
}
div#page-location, div#page-note, div#journal-search {
	margin: 0 auto 4.0em auto;
	width: 28.5em;
}
/*--- =location ---*/
div#page-location {
	float: left;
}
div#page-location p strong {
	text-decoration: underline;
}
span.arrow_bold {
	font-weight: bold;
	font-size: 1.2em;
}
/*--- =note ---*/
div#page-note {
	float: right;
}
/*--- =search ---*/
div#journal-search {
	float: right;
	text-align: right;
}

/*--- DIV "CONTENT" (portfolio, about, accessibility & disclaimer) ---*/
div#content {
	margin: 0 auto;
	width: 60.0em;
	text-align: justify;
	clear: both;
}
div#content p {
	margin-bottom: 1.4em;
}
div#column1, div#column2 {
	padding-bottom: 4.0em;
	width: 28.5em;
}
div#column1 em, div#column2 em {
	font-style: italic;
}
div#column1 {
	float: left;
}
div#column1 img a {
	background: none;
}
div#column2 {
	float: right;
}
div#column1 ol, div#column2 ol, div#column1 ul, div#column2 ul {
	margin: 0.5em 0 1.0em 2.0em;
}
div#column1 li, div#column2 li {
	padding: 0.2em 0 0.2em 2.0em;
	color: #b5b5b5;
	background:#fff url(../_images/icon_bullet.png) no-repeat left center;
}

/*--- home ---*/
div.welcome {
	margin: 0;
	padding: 0;
	height: 35.0em;
	color: inherit;
	background: transparent url(../_images/home.png) no-repeat right top;
}
p#welcome-to, p.welcome-note {
	margin-bottom: 1.0em;
}
p.welcome-note {
	width: 18.5em; /* 28.5em is for longer column */
}

/*--- about ---*/
div#column1 li#pdf {
	color: inherit;
	background: #fff url(../_images/icon_pdf.png) no-repeat left center;
}
div#column1 li#doc {
	color: inherit;
	background: #fff url(../_images/icon_doc.png) no-repeat left center;
}

/*--- journal ---*/
div#journal-article, div#journal-subnavi {
	padding-bottom: 4.0em;
	font-size: inherit;
}
div#journal-article {
	width: 45.0em;
	float: left;
}
div#journal-subnavi {
	width: 9.5em;
	text-align: left;
	float: right;
}
div#journal-subnavi ul {
	margin: 0.5em 0 2.0em 0;
}
div#journal-subnavi li {
	margin: 0.6em 0;
	text-indent: 0.3em;
}
a span.article-count {
	color: #c5c5c5;
	background-color: inherit;	
}
span.prev-page {
	float: left;
}
span.next-page {
	float: right;
}


/*--- journal post content ---*/
div.post-article {
	margin-bottom: 5.0em;
	padding-bottom: 0.1em;
	clear: both;
	color: inherit;
	background: #fff url(../_images/divider.png) repeat-x left bottom;
}
div.post-article p em {
	font-style: italic;
}
div.post-article p strong {
	font-weight: bold;
}
blockquote {
	margin-left: 1.0em;
	padding: 1.0em 4.0em 0 5.0em;
	color: #aaa;
	background: #fff url(../_images/quote.png) no-repeat left top;
}
div.post-article ol, div.post-article ul {
	margin: 0.5em 0 1.0em 2.0em;
}
div.post-article li {
	padding: 0.2em 0 0.2em 2.0em;
	color: inherit;
	background:#fff url(../_images/icon_bullet.png) no-repeat left center;
}
p.post-date, p.post-comments, p.post-footer {
	color: #b5b5b5;
	background-color: inherit;
}
p.post-date {
	font-size: 1.0em;
	margin-top: -0.4em;
}
p.post-excerpts {
	font-size: 1.0em;
	margin-top: -0.7em;
}
p.post-comments {
	font-size: 1.0em;
	margin-top: 3.0em;
}


/*-- comment preview --*/
ol.comments {
	margin-bottom: 4.0em;
}
ol.comments p {
	font-size: 1.0em;
	color: #aaa;
	background-color: inherit;
}
ol.comments li {
	margin-top: 2.0em;
	padding-bottom: 1.0em;
	color: inherit;
	background: #fff url(../_images/divider.png) repeat-x left bottom;
}
p.poster-title strong {
	font-size: 0.9em;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, "Lucida Grande", sans-serif;
}
p.poster-title em {
	line-height: 1.0em;
	font-size: 0.9em;
	color: #b5b5b5;
	background-color: inherit;	
}
p#txpCommentInputForm {
	margin-top: 5.0em;
	color: #b5b5b5;	
}
div#cpreview {
	color:inherit;
	background-color:#f5f5f5;	
}
div#cpreview p, div#cpreview p.poster-title {
	margin:1.0em 1.0em 0 1.0em;
}
div#cpreview p.poster-title {
	margin:0 1.0em 1.0em 1.0em;
}

/*-- form comments --*/
form#txpCommentInputForm fieldset {
	padding:0 0 5.0em 0;
	color:inherit;
	background: #fff url(../_images/divider.png) repeat-x left bottom;
}
form#txpCommentInputForm label {
	 font-size: 1.1em;
}
form#txpCommentInputForm legend {
	margin: 0 0 0.5em 0;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, "Lucida Grande", sans-serif;
	text-transform: uppercase;
	color: #aaa;
	background-color: inherit;
}
form#txpCommentInputForm p {
	padding:0.5em 0.5em 0.3em 0.5em;
	line-height: 1.4em;
	color:#888;
	background-color:#f9f9f9;
}
p#txpCommentInputForm {
	padding: 0.2em;
	text-indent: 1.0em;
	color:inherit;
	background: #f9f9f9 url(../_images/icon_check.png) no-repeat left center;	
}
.comment_name_input, .comment_email_input, .comment_web_input {
	margin-bottom: 0.6em;
	padding: 0.1em;
	width: 22em;
	border: 3px double #e3e3e3;
	color: #888; 
	background-color: #f9f9f9; 
}
.comment_name_input:focus, .comment_email_input:focus, .comment_web_input:focus {
	border: 3px double #bbb;
	color: #555;
	background-color: #fff; 
}

/*-- form search --*/
input.fields {
	padding: 0.1em;
	width: 13em;
	border: 1px solid #ddd; 
	color: #999; 
	background-color: #f8f8f8; 
}
input.fields:focus {
    color: #888;
    background-color: #fff;
}

/*--- form contact ---*/
#content form {
	margin: 1.5em 0 0 0;
	color: #bbb;
	background-color: inherit;
}
div#column2 fieldset {
	margin-bottom: 2.0em;
	padding-left: 1.0em;
    border-top: 1px solid #eee; 
}
legend {
	margin: 0 0 0.5em 1.0em;
	color: #b5b5b5; 
	background-color: inherit;
}
label {
	color: #888;
	background-color: inherit;
}
#form-name, #form-email, #form-url, #form-subject, textarea {
	margin-bottom: 0.6em;
	padding: 0.1em;
	width: 22em;
	border: 3px double #e3e3e3;
	color: #666; 
	background-color: #f9f9f9; 
}
#form-name:focus, #form-email:focus, #form-url:focus, #form-subject:focus, textarea:focus {
	border: 3px double #bbb;
	color: #555;
	background-color: #fff; 
}
input.button {
	font-size: 1.0em;
	cursor: pointer;
}

/*--- project pages ---*/
p.prj-description {
	line-height: 1.05em;
}
p.prj-info {
	line-height: 1.45em;
}
strong.prj-header {
	color: #b5b5b5;
	background-color: inherit;
}

/*--- DIV "FOOTER" ---*/
div#footer {
	margin: 0 auto;
	width: 60.0em;
	height: 4.7em;
	color: #b5b5b5;
	background: #fff url(../_images/footbg.jpg) repeat-x left bottom;
	clear: both;
}
div#linkages, div#textual {
	width: 28.5em;
}
div#linkages {
	text-align: left;
	float: left;
}
div#textual {
	text-align: right;
	float: right;
}