.clear:after{content:'.';display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.clear{display:inline-block;} /* \*/ .clear{display:block;} /* */

html,body { height: inherit; margin: 0; }
html { background: transparent; }
body { background: #EED; color: #333; font-size: 12px; line-height: 1.5; }

.container { width: 75em; margin: 0 auto; position: relative; }
#twitter { margin-left: 0; }
#phpdoc { margin-right: 0; }

body { margin-top: 0; }
#name { position: relative; float: left; display: block; padding: 1.25em 2em; margin: 1em 0 1em 0; line-height: 1; background: #333; color: #FFF; font-weight: bold; }
#name span { color: #666; }
span.nipblack { position: absolute; bottom: -8px; left: 2em; border-top-color: #333; }

h1 { clear: both; font-size: 3em; font-weight: normal; margin: 0; line-height: 1; color: #998; background: transparent; }
.clear { clear: both; }
.note { color: #AA9; }
h1 sup { color: #AA9; font-size: 0.5em; top: -0.25em; position: relative; }
h1 sup, .note sup { font-family: "Times New Roman", Georgia, serif; }

a:link { text-decoration: none; color: #2288CC; }
a:visited { text-decoration: none; color: #226688; }
a:hover { color: #CC2288; }
a:active { color: #88CC22; }

#footer { margin: 1em 0; color: #998; }
.widget { position: relative; width: 17em; margin: 0.5em 0.5em; padding: 0.5em; background: #FFF; }
.left { float: left; }

.widget h2 {
	position: relative; margin: 0; padding: 0 0 0 10px; 
	font-size: 1em; line-height: 2.4em; font-weight: bold;
	background: #EEE no-repeat 0 0; color: #666; margin-bottom: 10px;
	border-radius: 1px;
}

.nipple {
	width: 0; height: 0; z-index: 2;
	border: 8px solid transparent;
	border-top-color: #EEE;
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-width: 16px;
}

.widget ul { margin: 0; height: 30em; padding-right: 15px; }
.widget li { clear: both; list-style: none; padding: 0.5em 0; margin: 0.5em 0; border-bottom: 0.1em dotted #EEE; }
.widget li.init { border-bottom: none; color: #666 !important; }
.widget .nipple { position: absolute; left: 1.33em; top: 2.9em; }
.widget p { margin: 0; }

/* Twitter Widget */
#twitter { color: #888; }
#twitter h2 { color: #FFF; background: #4CE url(img/twitter.png) no-repeat 10px 50%; padding-left: 32px; }
#twitter .nipple { border-top-color: #4CE; }
#twitter .meta { margin: 0.5em 0; }
#twitter .meta .user { font-weight: bold; }
#twitter .meta .avatar { float: left; margin-right: 5px; }
#twitter .meta .avatar img { width: 18px; height: 18px; }
#twitter .meta .time { color: #CCC; }

/* Delicious Widget */
#delicious { color: #CCC; }
#delicious .domain { color: #999; }
#delicious h2 { color: #FFF; background: #A8A8A8 url(img/delicious.png) no-repeat 10px 50%; padding-left: 32px; }
#delicious .nipple { border-top-color: #A8A8A8; }
#delicious .favicon { float: left; margin-right: 4px; width: 16px; height: 16px; }
#delicious p { margin-left: 20px; }
/* */

/* Blog Widget */
#blog { color: #CCC; }
#blog h2 { color: #FFF; background: #D56 url(img/blog.png) no-repeat 10px 50%; padding-left: 32px; }
#blog .nipple { border-top-color: #D56; }
#blog .time {  }
/* */

#phpdoc { color: #CCC; }
#phpdoc h2 { color: #FFF; background: #4D5182 url(img/php.png) no-repeat 10px 50%; padding-left: 32px; }
#phpdoc .nipple { border-top-color: #4D5182; }
#phpdoc .log { color: #999; }


/* Scroll Pane Plugin */
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; width: 200px; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right:5px; top:0; margin-left:5px; height: 100%; background: #FFF; }
.jScrollPaneDrag { position: absolute; background: #EED; cursor: pointer; overflow: hidden; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }
a.jScrollArrowUp { /*background-color: #666;*/ display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 9px; }
a.jScrollArrowUp:hover { /*background-color: #f60;*/ }
a.jScrollArrowDown { /*background-color: #666;*/ display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 9px; }
a.jScrollArrowDown:hover { /*background-color: #f60;*/ }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ }

/* Round corners and shadows */
.widget, #name { -moz-box-shadow: 0px 0px 10px #CCA; -webkit-box-shadow: 0px 0px 10px #CCA; -moz-border-radius: 4px; }
.jScrollPaneDrag { -moz-border-radius: 4px; -moz-box-shadow: inset 1px 1px 1px #DDB; }
.widget h2 { -moz-box-shadow: 0 1px 1px #EED; -webkit-box-shadow: 0 1px 1px #EED; -moz-border-radius: 2px;  }
#twitter h2   { -moz-box-shadow: 0 1px 0 #3BD; }
#delicious h2 { -moz-box-shadow: 0 1px 0 #999; }
#blog h2      { -moz-box-shadow: 0 1px 0 #C45; }
#phpdoc h2    { -moz-box-shadow: 0 1px 0 #3D4172; }