#nav {
	padding: 0 1%;
	margin: 0 -1%;
	width: 100%;
	float: left;
	background: #121830;
	/* background-image: url("/hacks/brkout/brkout-edit-2-2.png"); */
}

#nav ul {
	margin: 0;
	padding: 0;
	text-align: center;
	/* clear: left; */
	list-style-type: none;
}

#nav ul li {
	font-size: 0.833em;
	width: 6em;           /* set to 5em on small displays */
	float: left;
	margin-left: 0;
}

#nav ul li a {
	display: block;
	padding-top: 0.25em;
	height: 1.55em;
	text-decoration: none;
	text-transform: lowercase;
	color: #fff;
	font-weight: normal;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	-webkit-transition-property: background-color;
	transition-property: background-color;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
#nav li.selected a {
	color: #fff;
	background: #000;
/*	border-left: 1px solid #ace;
	border-right: 1px solid #ace; */
	border-left: 1px solid #579;
	border-right: 1px solid #579;
}

pre, tt { 
    font-family: "Andale Mono", "DejaVu Sans Mono", "Courier New";
    /*, monospace */    /* Setting monospace as fallback on iPad makes the font
                           ridiculously small.  Not on iPhone 4, so certainly bug */
}
tt { font-size: 0.95em; letter-spacing: -1px; }
pre { font-size: 0.875em;
      line-height: 1.25; 
      border-left: 1px solid #ace;
      margin-left: -1em; padding-left: 1em;
      text-rendering: optimizeSpeed;    /* otherwise, glyphs are merged */
}
/* Wrap PRE so it doesn't overflow.  Wrap is suited mainly to code. */
pre {
overflow: auto;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#nav ul li a:hover {
	background: #357;
	border-bottom: none;
/*	border-left: 3px solid #ace;
	border-right: 3px solid #ace; */
	-webkit-transition-duration: 0;  /* override a */
	-o-transition-duration: 0;
	-moz-transition-duration: 0;
	transition-duration: 0;
}

#header {
	clear: both;
}
#stylesel {
	float: right;
	width: 30%;
	padding: 0;
	margin: 0;
}
#stylesel ul {
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;
}
#stylesel li {
	display: block;
	float: left;
	padding: 0 0.5em;
	margin: 0;
	border-right: 1px solid #ace;
}

#content {
	clear: both;
	position: relative;
}
#main {
	margin: 0;
	padding: 1.5em 0;
        width: 70%;
}
#main1 {      /* single-column main */
        margin: 0;
	padding: 1.5em 0;
}

#sub {
	/* border-left: 1px dotted #ace; */
	position: absolute;
	right: 0;
	top: 4.25em;
	width: 25%;
	font-size: 0.85em;
        line-height: 1.4;
	padding-left: 1em;
	padding-bottom: 1em;
}

a:link, a:visited, a:active { text-decoration: none; }
a:link { color: #ace; }
a:visited { color: #579; }
a:hover { color: #ace; border-bottom: 1px solid #ace; }

body {
	margin: 0; padding: 0;
	margin-top: 0.5em;
	margin-bottom: 1em;
	margin-left: 1%;
	margin-right: 1%;
	color: #fff; 
	font-size: 100%; 
	font-family: "news gothic mt","Helvetica Neue","Helvetica","Verdana", sans-serif;
	background: #000;
	text-rendering: optimizeLegibility;
	line-height: 1.5;

	/* http://www.quirksmode.org/blog/archives/2012/11/hyphenation_wor.html */
	/* This can look a little odd, so disabled for now.  Recommend disabling
	 * on tt and pre always. */
	/*
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	*/
}
div.language { display: none; }
#navskip { display: none; }

/*
body { margin-top: 1em; margin-left: 10%; 
       color: #fff; font-size: smaller; font-family: "Verdana", sans-serif; 
	   background:#000 url("/navbg.gif") repeat-y;
}
*/

/* style alt text in case a sighted user has images turned off */
img {
    font-size: 0.8em;
    color: #ddc;
    font-style: italic;
}

.section {
	clear: both;
	margin: 0;
	margin-bottom: 1em;
	padding: 0;
	border: 1px solid #ace;
	background-color: #121830;
	/* float: left; */  /* enable floating to shrink table to fit contents */
}
.section + .section {
    margin-top: 2em;
}
.section table {
	padding: 0 1em;
	line-height: 1.5;
	font-size: 100%;
	border-collapse: collapse;
	width: 100%;
	margin-right: 1px;  /* I don't know why, but the table extends past the div without this. */
	border-top: 1px solid #ace;
	border-left: none;
}
.section table a {
	/* color: #c7c; */
	color: #ace;
}
.section table a:hover {
/*	text-decoration: underline; */
}

.section table ul {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0;
}
.section table ul li {
	float: left;
	width: 5em;
}
.section tr {
	width: 100%;
}
.section tr.one td {
/*	background-color: #112; */
}
.section table td {
	border-left: 1px solid #ace;
	vertical-align: top;
	padding: 0.5em;
}
.section td.date {
	padding-right: 0.5em;
	padding-left: 0.5em;
	width: 6em;  /* Mozilla prefers 5em, but IE5 prefers 6 (??) */
}
.section td.prog, .section td.article {
	padding-right: 1em;
	min-width: 6em;        /* Can be increased on normal screen size. */
	border-left: none;
}
.section td.date { 
        border-left: none;
        border-right: 1px solid #ace;
}
.section td.desc {
    width: 75%; /* ? */
}
.section table td.dld {
	width: 11em;
	/* color: #ace; */
}
.section h3 {
	background-color: #357;
	padding: 0.25em 0.33em;
	margin: 0;
	/* margin-bottom: 1em; */
	/* border-bottom: 1px solid #ace;  */
	font-size: 1.5em;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #357;
	color: #fff;
	background-image: url("/hacks/dc/oceano-hdr.jpg");
}
/*
.section#miscellany h3,
.section#historical h3 {
	background-image: none;
}
*/
.section#apps h3 {
	background-image: url("/hacks/dc/brkout-hdr.png");
	font-size: 175%;
}
.section#demos h3 {
	background-image: url("/hacks/dc/serpent-hdr.jpg");
	font-size: 175%;
}
.section#patches h3 {
	background-image: url("/hacks/dc/oceano-hdr.jpg");
	font-size: 175%;
}
.section#miscellany td.date,
.section#historical td.date {
	display: none;
}

.section h3 a {
	color: #fff;
        text-decoration: none;
}

.section p {
	margin: 0pt;
	padding: 0.7em 0.5em;
	border-top: 1px solid #ace;
}

.appenclosure {
	margin-left: 5%; width: 95%; padding-top: 1em;
	margin-bottom: 1em;
	float: left;
        clear: both;
}


.hiliteapp {
	float: left; margin-right: 1em; width: 45%; overflow: hidden;
}
.hiliteapp img {
	border: none;
}
/*.hiliteapp p a {
	border-bottom: 1px dotted;
}
.hiliteapp p a:hover {
	text-decoration: none;
}*/
.raquo {
	color: #ff2;
}

/* Fix tables with width 100% in IE 5.0, by wrapping in this div */
div.ietablebug {
	width: 100%;
}

div.call {
	float: left;
}

.call h1, div.call h4 {         /* h4 is deprecated */
	color: #ff5;
	padding: 0;
	margin: 0;
        font-size: 2.0em;
	line-height: 1.25;
        font-weight: normal;
	text-transform: lowercase;
}
.call h1 a:link { color: #579; }
.call h1 a:hover { color: #579; border: none; }

.call h2, div.call h5 {         /* h5 deprecated */
	color: #ff5;
	padding: 0;
	margin: 0 0 1em 0;
        font-weight: normal;
        font-size: 0.875em;              
	line-height: 1.25;
}

div.dld ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 2em;
}

.features ul {
	list-style-type: none;
}




/* Movable type */

.powered {
	font-size: 80%;
}
.sidetitle {
	color: #ff5;
	text-transform: lowercase;
	letter-spacing: .2em;
	margin: 1em 0em 1em 0em;
}
.blog .date {
	clear: both;
	font-size: 1.25em;
	line-height: 1.25;
	font-weight: normal;
	border-bottom: 1px solid #8ac;
	margin-bottom: 0.5em;
	margin-top: 0;
}
.blog .title {
	color: #ff5;
	font-size: 1.125em;
	line-height: 1.33;
	font-weight: normal;
	margin-top: 0.6em;
}
.blog .title a {
	color: #ff5;
	border-color: #ff5;
}
.blog .posted {
	font-size: x-small;
	float: right;
}
.side #search {
	background: #000;
	color: #fff;
	padding-left: 0.7em;
	border: 1px solid #8ac;
}
.side #searchbtn {
	background: #012;
	color: #fff;
	border: 1px solid #8ac;
	padding: 0em 0.5em;
	border-top: none;
}
.side ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.side li {
        margin-bottom: 0.45em;
}
.blogbody {
	padding-left: 0.5%;
	margin-bottom: 2em;
}
.blogbody .entrybody {
	padding-left: 2%;
	font-size: 1em;
        line-height: 1.5;
}
.blogbody .footer {
/*    float: right; */
    font-size: 0.75em;
    text-align: right;
    line-height: 1.2;
    margin-bottom: 1em; /* to match paragraph */
}

#zb-href {
	display: none;
}

/* #validated {
	margin-top: 3em;
} */
#validator a img {
	border: none;
}

/* -------- ultima6 */
em.pu6e { 
  color: #f7d;
}

h4.pu6e, h4.brkout {
  color: #ff5;
}
div.mass-kludge {
  clear: both;
}

div.screenshot { 
  float: left; 
  margin-right: 1em;
  /* border: 1px solid #00007f; */
}
div.screenshot p {
  text-align: center;
}
div.screenshot img {
  border: 1px solid #40407f;
}
div.screenshot span.size {
  color: #999;
}
/*
div.screenshots { border: 1px solid #40407f; background-color: #202040; }
*/


/* ----- about */
div.leftpic {
  float: left; margin-right: 1em; margin-bottom: 0.5em;
}
div.leftpic p {
  font-size: 85%; text-align: center;
}



@media screen and (max-width: 479px) {
    /* If less than 480px, start saving real estate. */
    #nav ul li { width: 5em; } /* so 4 across fit */
    #main { width: auto; }
    #sub { 
	position: static;
	border-top: 1px dotted #579;
	width: auto;
	padding-left: 0; margin-left: 0;
    }
    #sub .sidetitle {
	padding-left: 0.5%;
    }
    #sub .side {
	padding-left: 2.5%;
    }
}

@media screen and (max-width: 600px) {
    /* Sidebar still present >=480px, so reduction in
       main column element size needs to start early. */
    pre { font-size: 0.75em; letter-spacing: -1px;
	  margin-left: -0.5em; padding-left: 0.5em;
	}
    tt { font-size: 0.875em; }
}

/* iPhone portrait and landscape -- NOT on desktop Safari */
@media only screen and (max-device-width: 480px) {
    html { -webkit-text-size-adjust: none; }  /* Otherwise landscape is weird */
}
@media screen and (max-width: 768px) {
    /* Save real estate on table pages which need extra width.  
       Currently the only page with multiple columns is
       zbigniew's scheme page. */
    #content.wide #sub {                /* cut and paste!! */
	position: static;
	border-top: 1px dotted #579;
	width: auto;
	padding-left: 0; margin-left: 0;
    }
    #content.wide #sub .sidetitle {
	padding-left: 0.5%;
    }
    #content.wide #sub .side {
	padding-left: 2.5%;
    }
    #content.wide #main { width: auto; }

    ul, ol { padding-left: 30px; }
}

/* IE6 and IE7 fixes */
#main1, div.entrybody { zoom: 1; }