/* GENERAL FORMATTING */

*{
/*this is not violence, ok?*/
padding: 0;
margin: 0;
}

html{
background-color: #fff;
color: #4d4d4d;
}

body{
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", "Trebuchet MS", Verdana, "Bitstream Vera Sans", sans-serif;
color: #4d4d4d;
}

body{
font-size: 85%;
}

h1,h2,h3,h4,h5,h6{
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", Verdana, "Bitstream Vera Sans", sans-serif;
margin: .5em 0;
}

/*I hate this, you know, but...*/
h1{font-size: 4em;}
h2{font-size: 1.8em;}
h3{font-size: 1.7em;}
h4{font-size: 1.6em;}
h5{font-size: 1.5em;}
h6{font-size: 1.4em;}

p,ul,ol,blockquote,pre,dl{
margin: 1em 0;
}

p{
line-height: 1.9em;
}
li{
line-height: 1.4em;
}
li>p{
margin-bottom: 0;
}

ul,ol{
margin-left: 3em;
}

blockquote,pre{
background: #effaea url(green-mind/green-quotes.png) 10px 10px no-repeat;
color: #222;
padding: .1em 1em;
}

blockquote blockquote,
blockquote pre{
background-color: #f7fdf5;
color: inherit;
}

/*make dl as list module*/
dl.list{
margin-left: 3em;
}

dl.list dt{
display: list-item;
}

dl.list dd{
border: 0;
}

pre{
padding-top: 1em;
padding-bottom: 1em;
min-width: 5em;
overflow: auto;
}

pre em,
pre strong{
font-style: normal;
color: #030;
background-color: transparent;
}

pre,code,samp,kbd,var{
font-family: "Lucida Console", "Andale Mono", "monotype.com", "Bitstream Vera Sans Mono", "courier new", courier, monospace;
font-size: 1em;
}

code,samp,kbd,var{
line-height: 1em;
}

pre, pre code, pre samp, pre kbd{
line-height: 1.4em;
}

code,kbd,samp,.filename,.foldername{
background-color: #effaea;
color: inherit;
}

blockquote p code,
blockquote p kbd{
background-color: #fff;
color: inherit;
}

var,
var.filename,
var.foldername{
background-color: #ffd;
color: inherit;
font-style: normal;
}

pre code,
pre kbd{
background-color: transparent;
color: inherit;
}

dt{
font-weight: bold;
margin-top: 1.5em;
}

dd{
padding: .1em 1em;
margin-left: 1em;
background: transparent url(green-mind/green-quotes-corner.png) no-repeat;
color: #333;
border-top: 1px solid #fff;
}

abbr{
border-bottom: 0;
}

abbr[title]{
border-bottom: 1px dotted #666;
}

table{
border-collapse: collapse;
font-size: 100%;
margin: auto;
background-color: #effaea;
color: inherit;
}

blockquote table{
background-color: #f7fdf5;
color: inherit;
}

caption{
font-weight: bold;
padding-bottom: .5em;
text-align: center;
margin: auto;
width: 100%;
}

thead,th{
border: 1px solid #fff;
background-color: #d3f1c5;
color: #333;
font-weight: bold;
}

thead th{
text-align: center;
}

tbody{ /*this invokes a bug in Opera*/
background: transparent url(green-mind/green-quotes.png) 10px 10px no-repeat;
color: inherit;
}

tbody th{
text-align: left;
}

thead+tbody th,
thead+tbody th *{
background-color: transparent;
color: #333;
}

tfoot{
background: transparent url(green-mind/green-bottom.png) left bottom no-repeat;
color: inherit;
}

blockquote tfoot{
background-image: url(green-mind/green-bottom-bottom.png);
}

td{
border: 1px solid #fff;
}

td,th{
padding: .2em .5em;
}

del *{
text-decoration: line-through;
}

/*green, green links... (LoVe HAte)*/
a{
text-decoration: none;
}

a:link{
color: #3c790a;
background-color: transparent;
}

a:visited{
color: #458e0b;
background-color: transparent;
}

a:hover{
color: #360;
background-color: transparent;
text-decoration: underline;
}

a:focus,
a:active{
color: #6c0;
background-color: transparent;
}

/*i think the below way is more logical*/
a:link img{
border: 2px solid #d3f1c5;
line-height: 0;
}

a:visited img,
a:hover img,
a:focus img,
a:active img{
border-color: #fff;
}

input{
vertical-align: middle;
font-size: 1em;
font-family: inherit;
}

/* ADDITIONAL FORMATTING */

.person{
font-weight: bold;
color: #444;
background-color: transparent;
font-style: normal;
}

/*Conversations, dialogs & chats*/

dl.conversation{
background: #effaea url(green-mind/green-quotes.png) 10px 10px no-repeat;
color: inherit;
padding: 1em;
}

dl.conversation dt.person{
float: left;
clear: left;
width: auto;
padding-right: .5em;
}

dl.conversation dt.person:after{
content: " :";
}

dl.conversation dd{
border: 0;
margin-left: 4em;
padding-left: .5em;
background: transparent none;
}

/*Other languages - only Malay, for now*/

:lang(ms){
font-style: italic;
}

:lang(ms):after,
:lang(ms):before{
/*most generated content created are not in other languages. hehe..*/
font-style: normal;
}

[title]:lang(ms),
.pinyin[title]{
border-bottom: 1px dotted #ccc;
margin-bottom: -1px;
}
[title]:lang(ms):hover,
.pinyin[title]:hover{
border-bottom-style: solid;
}

/*For Pinyin..., something special*/
.pinyin{
font-style: italic;
}

.remark{
background-color: transparent;
color: #60bf2d;
}

.update,
.note,
.example,
.important{
display: block;
padding: .1em 1em;
margin: 1em 0;
background: #effaea url(green-mind/green-bottom.png) left bottom no-repeat;
color: inherit;
}

.update>*:first-child:before,
.note>*:first-child:before,
.example>*:first-child:before{
font-weight: bold;
color: #3c790a;
background-color: transparent;
}

.update>*:first-child:before{
content: "Update:";
}
/*Gosh, I think of everything...*/
.update+.update>*:first-child:before{
content: "Another Update:";
}
.update+.update+.update>*:first-child:before{
content: "Yet Another Update:";
}

.note>*:first-child:before{
content: "Note:";
}

.example>*:first-child:before{
content: "Example:";
}

.important>*:first-child:before{
content: "Important:";
font-weight: bold;
color: #f00;
background-color: transparent
}

.important.note>*:first-child:before{
content: "Important Note:";
font-weight: bold;
color: #f00;
background-color: transparent
}

/*Inserted update*/
ins.update,
del.update{
text-decoration: none;
color: inherit;
background: #effaea url(green-mind/green-quotes.png) 10px 10px no-repeat;
}
del.update{
color: #aaa;
}

ins.update[datetime]:after,
del.update[datetime]:after{
content: attr(datetime);
color: #333;
background: transparent url(green-mind/green-bottom.png) left bottom no-repeat;
display: block;
text-align: right;
margin: 0 -1em -.1em;
padding: .1em .25em;
border-top: 1px solid #fff;
}

ins.update .ins-cite,
del.update .del-cite{
float: right;
width: auto;
margin-left: 1em;
}

/*Expressive strongness*/
strong.stronger{
font-size: 1.2em;
}
strong.very-strong{
font-size: 1.4em;
}

/*keyboard commands*/
.command{
padding: 0 .25em;
}

abbr{
font-variant: small-caps;
}

/* PRESENTATIONAL PROPERTIES */

body{
background: transparent url(green-mind/green-corner.png) right bottom no-repeat fixed;
}

#header{
background: #fff url(green-mind/green-bar.png) 0 380px repeat-x;
color: inherit;
height: 580px;
margin: 0 auto;
}

h1{
font-weight: normal;
text-align: right;
margin: 0;
background: transparent url(green-mind/green-head.jpg) no-repeat;
color: inherit;
height: 580px;
min-width: 380px;
max-width: 30em;
position: relative;
}

h1 a{
position: absolute;
top: 300px;
right: 10%;
/*\*/
top: auto;
bottom: 205px;
/**/
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:focus,
h1 a:active{
color: #3c790a;
background-color: transparent;
text-decoration: none;
}

/*site description*/
.description{
background: #6c3 url(green-mind/green-head.jpg) 0 -380px no-repeat; /*useful when images disabled*/
color: #fff;
font-weight: bold;
text-align: right;
padding: .5em 10%;
margin: -200px 0 0;
position: relative;
z-index: 2;
max-width: 90em;
}

#search{
color: inherit;
background: #d9f2cc url(green-mind/green-white-curves.png) bottom left no-repeat;
position: absolute;
margin-top: -20px;
right: 0;
text-align: right;
padding: 8px 12px;
font-size: .95em;
}

#search label{
margin-right: 5px;
font-weight: bold;
/*font-size: .95em;*/
}

#search input[type="text"]{
width: 10em;
padding: 1px;
}

#search input[type="submit"]{
padding: 1px 5px;
}

#content{
margin: 50px auto 0;
max-width: 70em;
padding: 3em 0;
}

#blog{
float: left;
width: 70%;
position: relative;
}

.date{
font-size: .9em;
color: #060;
background-color: transparent;
margin-left: 1em;
margin-top: 0;
}

.post{
margin: 0 5em 4em 2em;
padding-bottom: 30px;
color: inherit;
background: transparent url(green-mind/green-line.png) center bottom no-repeat;
}

.post-title{
font-size: 1.5em;
font-weight: normal;
text-align: left;
margin-bottom: .8em;
}

.post-title a:hover{
text-decoration: none;
color: #040;
background-color: transparent;
}

.view-post{
font-size: .95em;
margin: -.5em 0 0 1em;
background: transparent url(green-mind/green-arrow.png) left 55% no-repeat;
color: inherit;
}

.view-post a{
padding-left: 12px;
}

.post-foot{
font-size: .9em;
text-align: right;
color: #6c0;
background-color: transparent;
clear: right;
margin: 1em -1em 2em 0;
}

.artwork,
.photo,
.screenshot,
.figure,
.illustration{
padding: 10px 10px 15px;
float: right;
clear: right;
width: auto;
text-align: center;
margin-bottom: 5px;
background: #effaea url(green-mind/green-bottom.png) left bottom no-repeat;
color: inherit;
}

#blog .artwork,
#blog .photo,
#blog .screenshot,
#blog .figure,
#blog .illustration{
margin-left: 15px;
}

.artwork img,
.photo img,
.screenshot img,
.figure img,
.illustration img{
color: #040;
background-color: #fff;
line-height: 1em;
vertical-align: bottom;
margin: auto;
}

#blog li:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility:hidden;
line-height: 0;
}

/* this is ugly, i know */
#blog .artwork+* li:after,
#blog .artwork+*+* li:after
#blog .photo+* li:after,
#blog .photo+*+* li:after,
#blog .screenshot+* li:after,
#blog .screenshot+*+* li:after,
#blog .figure+* li:after,
#blog .figure+*+* li:after,
#blog .illustration+* li:after,
#blog .illustration+*+* li:after{
/*content: none;*/
clear: none;
}

#snav{
/*font-size: 85%;* IE renders the text slightly larger than Firefox*/
font-size: 84.5%; /* IE renders the text similar to Firefox */
margin-left: 70%;
}

#snav div{
margin: 0 2em 3em 1em;
}
#snav div div{
margin: 0;
}

#snav h2{
font-size: 1.1em;
letter-spacing: .1em;
text-transform: uppercase;
background: transparent url(green-mind/green-leaves.png) left center no-repeat;
color: #666;
line-height: 20px;
min-height: 20px;
padding-left: 35px;
position: relative;
left: -15px;
margin-bottom: 1.5em;
}

#snav h3{
font-size: 1.1em;
padding: .3em .7em;
background: #effaea url(green-mind/green-bottom.png) left bottom no-repeat;
color: inherit;
}

#snav p{
margin-top: 0;
line-height: 1.7em;
}

#snav li{
line-height: 1.3em;
}

#snav ul{
margin-top: 0;
margin-left: 1.5em;
list-style-image: url(green-mind/green-bullet.png);
}

.snav-foot{
background: #effaea url(green-mind/green-bottom.png) left bottom no-repeat;
color: #222;
padding: .5em .75em 1em;
text-align: right;
font-size: 90%;
}

#snav a img{
border: 0; /*for the stupid buttons*/
}

.back-to-top{
color: #040;
background: #d9f2cc url(green-mind/green-white-curves.png) no-repeat;
clear: both;
font-weight: bold;
padding: 8px 12px;
font-size: .95em;
float: right;
width: 26em;
}

.back-to-top a{
display: block;
background-image: url(green-mind/green-arrow-top.png);
background-repeat: no-repeat;
background-position: left 60%;
padding-left: 14px;
}

#footer{
clear: both;
text-align: center;
padding: 50px 10px 35px;
color: #fff;
background: #6c3 url(green-mind/green-bar.png) left bottom repeat-x;
margin-bottom: 3em;
}

#footer *{
margin: 0;
}

#footer a:link,
#footer a:visited{
color: #fff;
background-color: transparent;
text-decoration: underline;
}
#footer a:hover{
color: #d0efc1;
background-color: transparent;
}
#footer a:focus,
#footer a:active{
color: #3d780a;
background-color: transparent;
}

address{
font-style: normal;
font-weight: bold;
}

address a,
.entry .date{
white-space: nowrap;
}

.breadcrumb{
color: #666;
background-color: transparent;
text-align: right;
padding-right: 1em;
}

/*skip link*/
.skip{
display: inline;
}

.skip a{
background-color: #d9f2cc;
color: #3c790a;
text-align: center;
font-weight: bold;
position: absolute;
overflow: hidden;
width: 0;
height: 0;
top: 485px;
right: 10%;
}

.skip a:hover{
background-color: #effaea;
color: inherit;
}

.skip a:focus,
.skip a:active{
width: auto;
height: auto;
overflow: visible;
padding: .4em .6em;
}

/* People */

#snav > #people ul{
margin-left: 0;
}

#snav #people ul li{
display: table;
}

#snav #people .snav-foot:before{
display: block;
border-bottom: 1px solid #fff;
padding: .2em .5em;
margin: 0 -.5em;
text-align: left;
/*content: url(icons/friend.png) " Friend | " url(icons/acquaintance.png) " Acquaintance or Contact | " url(icons/haventmet.png) " Neither former nor latter, yet";*/
content: url(icons/friend.png) " Friend \A " url(icons/acquaintance.png) " Acquaintance or Contact \A " url(icons/haventmet.png) " Neither former nor latter, yet";
/*white-space: pre;*/
line-height: 1em;
}

#people li a[href]{
display: block;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
margin-bottom: 2px;
min-height: 16px;
line-height: 16px;
}

#people li a[href]{
background-image: url(icons/haventmet.png);
}

#people li a[href][rel~="acquaintance"],
#people li a[href][rel~="contact"]{
background-image: url(icons/acquaintance.png);
}

#people li a[href][rel~="friend"]{
background-image: url(icons/friend.png);
}

#people li a[href][rel~="met"]:after{
content: "met!";
color: #f30;
background-color: transparent;
font-size: 90%
}

/* Junks */

#junks ul{
margin-left: 0;
list-style-type: none;
}

#junks li{
display: inline;
}

*>#junks li{
display: table;
}

#junks li a{
display: block;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
margin-bottom: 2px;
/*height: 16px;*/
min-height: 16px;
line-height: 16px;
}

#powered-blogger{
background-image: url(icons/blogger.png);
}

#creative-commons{
background-image: url(icons/cc.png);
}

#weblog-feed{
background-image: url(icons/blogfeed.png);
}

#talkr{
background-image: url(icons/talkr.png);
}

#bloglines{
background-image: url(icons/bloglines.png);
}

#blogmap{
background-image: url(icons/blogmap.png);
}

#weblog-geourl{
background-image: url(icons/geourl.png);
}

#weblog-multimap{
background-image: url(icons/multimap.png);
}

#listed-blogshares{
background-image: url(icons/blogshares.png);
}

#technorati-cosmos{
background-image: url(icons/technorati.png);
}

#valid-xhtml,
#valid-css{
background-image: url(icons/w3c.png);
}

#mybloggermap{
background-image: url(icons/mybloggermap.png);
}

#penang-bloggers{
background-image: url(icons/pgbloggers.png);
}

#petaling-street{
background-image: url(icons/pps.png);
}

#css-reboot{
background-image: url(icons/cssreboot.png);
}

#wayback-machine{
background-image: url(icons/waybackmachine.png);
}

#spread-firefox{
background-image: url(icons/firefox.png);
}

#reinvigorate-das{
background-image: url(icons/das.png);
}

/* Adsense? */

#snav #adsense{
padding-top: 1em;
text-align: center;
}

#adsense-object{
width: 160px;
height: 600px;
margin-right: -1em;
border: 0;
}

/* UI widgets */

.ui-widget{
padding: 1px 4px;
white-space: nowrap;
background-color: ThreeDLightShadow;
color: ThreeDDarkShadow;
margin-top: -1px;
margin-bottom: -1px;
font-size: 85%;
font-family: inherit; /*IE treat inherit as nothing! Stupid IE...*/
}

.menu,.menu-item{
background-color: Menu;
color: MenuText;
border: 1px solid ThreeDShadow;
margin-top: -2px;
margin-bottom: -2px;
}

.button{
background-color: ButtonFace;
color: ButtonText;
border-color: ButtonFace;
border-width: 2px;
border-style: groove outset outset groove;
margin-top: -3px;
margin-bottom: -3px;
}

.tab{
border-color: ThreeDFace;
border-width: 2px 2px 0 2px;
border-style: groove outset none groove;
margin-top: -3px;
}

/* Some trickery to make floated images smarter */

.standalone,
.gallery .standalone{
float: none;
clear: none;
overflow: auto; /*for images that are too wide for the content container - DOESN'T WORK in OPERA 8!*/
}
#blog .standalone{
margin-left: 0 !important;
}

/* Blockquote citations */

blockquote[cite]:after{
content: "Source: " attr(cite);
color: #333;
background: transparent url(green-mind/green-bottom.png) left bottom no-repeat;
display: block;
text-align: right;
line-height: 1.5em;
margin: 0 -1em -.1em;
padding: .1em .25em;
border-top: 1px solid #fff;
}

blockquote blockquote[cite]:after{
background-image: url(green-mind/green-bottom-bottom.png);
color: inherit;
border-top-color: #effaea;
}

.blockquote-cite{
display: block;
color: #333;
background: transparent url(green-mind/green-bottom.png) left bottom no-repeat;
text-align: right;
margin: 0 -1em -.1em;
line-height: 1.5em;
padding: .1em .25em;
border-top: 1px solid #fff;
font-style: normal;
white-space: nowrap;
overflow: hidden;
}

blockquote blockquote .blockquote-cite{
background-image: url(green-mind/green-bottom-bottom.png);
color: inherit;
border-top-color: #effaea;
}

/*Fancy Tooltips*/

.fancytooltip{
font-size: .85em;
position: absolute;
left: 0;
top: 0;
width: auto;
height: auto;
z-index: 20;
text-align: left;
color: #fff;
background: transparent url(green-mind/green-tooltip-corner.png) left bottom no-repeat;
}

*>.fancytooltip{
background-image: url(green-mind/green-tooltip-corner-alpha.png);
}

.fancytooltip div{
background-color: #6c3;
color: inherit;
padding: .5em .5em 0;
margin-bottom: 22px;
}

*>.fancytooltip div{
background: transparent url(green-mind/green-tooltip-alpha.png);
color: inherit;
}

.fancytooltip p{
margin: .1em 0 0;
line-height: 1.1em;
}

.fancytooltip .titletext{
font-weight: bold;
}

.fancytooltip .destination{
overflow: hidden;
}

*>.fancytooltip .destination {
margin-top: -4px;
position: relative;
bottom: -6px;
}

.fancytooltip p span.accesskey {
color: #eee;
background-color: transparent;
}

/*Gallery*/

.gallery{
margin: 0 -5px 10px -15px;
padding: .1px;
display: block;
}

.gallery li{
float: left;
width: auto;
/*max-width: 100%;
overflow: auto;*/
list-style-type: none;
clear: none;
}

#blog .gallery li{
margin-left: 5px;
margin-bottom: 5px;
}

.gallery:after{
content: ".";
display: block;
height: 0;
line-height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
font-size: 0;
}

.gallery+*{
clear: both;
}

/*Converse*/

#tagboard{
display: block;
border: 0;
margin: auto;
width: 100%;
height: 48em;
max-width: 28em;
}

/*tags*/

.post .tags{
font-size: 84.5%; /* Why 84.5%? See above */
position: relative;
margin: -1em 1em 1em;
color: #666;
background: transparent url(green-mind/green-bullet.png) left .3em no-repeat;
padding-left: 3.6em;
text-indent: -2.5em;
}

.post .tags a{
color: #51a60d;
background-color: transparent;
}

#linkroll .tags{
display: block;
color: #999;
background-color: transparent;
padding-left: 2.5em;
text-indent: -2.5em;
line-height: 1.2em;
}

#linkroll .tags a{
color: #6c0;
background-color: transparent;
}

/*Post Foot stuff*/

a.post-cosmos{
color: #380;
background: transparent url(icons/cosmos.png) left 60% no-repeat;
padding-left: 14px;
min-height: 10px;
}

a.post-cosmos:hover{
color: #060;
background-color: inherit;
text-decoration: none;
}