body {background: #fff url(images/bubble-background.png) no-repeat; color: #000;
	font: 10pt 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
	margin: 0; padding: 0}
#container {position: relative; height: 100%}
#main {position: absolute; top: 0; margin: 0; padding: 0;
	width: 40em; left: 180px}
#nav {position: absolute; top: 0; left: 0; width: 180px;
	width: /**/ 160px; 
	padding: 0 20px 20px 0}
.skip, .roni, .mobad {display:none}
#footer {text-align: center; font-size: 8pt; margin-top: 2em; clear: both}
address, #footer {clear: both}
h1 {height: 130px;
	height: /**/ 95px;
	font-size: 240%; margin: 0; padding: 30px 3px 3px 180px}
h1 img {position: absolute; left: 10px; top: 0}
h2 {font-size: 180%; margin-top: 0}
h3 {font-size: 130%; border-bottom: 1pt #999 solid}

.sidebar {font: 8pt Arial, Helvetica, Sans-serif; text-align: center; margin: 3pt}
.right {float: right}
.left {float: left}
.icon {float: right; margin: 0 0 0.5em 0.5em}
h3, h4 {clear: right}

th {text-align: right}
textarea {min-width: 430px; max-width: 435px}

/* Links */
a img {border-width: 0}
a img.dl {border: 1px #fff solid}
a:hover img.dl {background: red; border: 1px red solid}
li.outlink {list-style-image: url(images/outlinkb.png)}
a.outlink:before {content: url(images/outlinkb.png)}
a.outlink, a.sh {white-space: nowrap}
a:link {color: #009}
a:visited {color: #306}
a:hover {color: #c33}
a:active {color: #f00}

.toplink {text-align: right; font-size: 8pt}
.toplink a {text-decoration: none; background: #ccc; color: #000; border: 2px solid #eee; border-color: #ddd #999 #999 #eee; padding: 0 .5em}
.toplink a:hover {background: #ddd; border-color: #eee #aaa #aaa #eee}
.toplink a:active {border-color: #999 #ddd #ddd #999}

.get {clear: left}
.get li {list-style: none}
.get li:before {content: "\00BB \0020"}

/* Feature List */
.stats li   {display: inline; margin: 0; padding: 0; list-style: none}
.stats li + li:before  {content: " \00B7  "}

/* Nav area */
ul.nb {margin: 0; padding: 0; width: 160px}

.nb li {
list-style: none; text-align: center;
font: bold 12pt "Trebuchet MS", Arial, Helvetica, Sans-serif;
margin: .7em 1em 1em .7em; white-space: nowrap; padding: 0;
border: 1px solid #ddd}

.nb a {display: block; text-decoration: none;
	background: #999 url(images/btn-grad.png) repeat-x left top;
	border: 1px solid #666}
.nb li.current {border: 1px solid #000; background: #fff}
.nb a, .nb li.current {border-width: 1px 2px 2px 1px}

.nb a:hover {background: #999 url(images/btn-grad-rev.png) repeat-x left bottom;
	border-color: #c00}
.nb a:active {background: #fff; border-width: 2px 1px 1px 2px; border-color: #c00}
/* hide above from NS4 */

/* Twitter */
#twitter_div, #sharebar {width: auto; margin: 4px; font-size: 8pt}
#sharebar {padding:3px}
#twitter_div {padding: 2px; border: 1pt #ccc solid; background: #fff; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis}
#twitter_div h4 {margin: 2px;border-bottom: 1pt #999 solid; font-size: 10pt}
#twitter_update_list {margin:2px; padding:0; }
#twitter_update_list li {margin:0; padding: 1px; list-style-type: none;border-bottom: 1pt #ccc solid}

.ad, .mobad {text-align:center; margin: 1em auto}

@media all and (max-width: 500px) {
	.skip, .mobad {display: block}
	body>.mobad {margin-top:0}
	h1{margin: 2px; padding: 0; text-align: center; height: auto}
	h1 img, .ad {display: none}
	img {max-width: 100%}
	h1:after {content: url(images/logo2-40.png); display: block; width: 40px; height: 37px; margin: auto}
	#main {position: relative; width: auto; left: 0; margin: 3px}
	#nav {position:relative; width: auto; padding: 2px}
	ul.nb {width: auto}
	.nb li {margin: 2px}
	.nb li a, .skip a {display: block; text-decoration: none; padding: 1px; width: auto}
	textarea {min-width: 5em; width: 100%}
}