/* 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 a{

text-decoration: underline;

}



.post a:hover{

text-decoration: none;

}



.post-title{

font-size: 1.5em;

font-weight: normal;

text-align: left;

margin-bottom: .8em;

}



.post-title a{

text-decoration: none;

}



.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;

}