/* ======== Colors & Backgrounds ==========*/

#header { background: url(bees.jpg) no-repeat 0 -5px; }

#navi {
	background: #f0f0e8/*#e8e8e8*/;
	border-color: #ccb;
	}

#primenavi {
	background: #f8f8ee/*#eee*/;
	border-right: 1px solid #ddc;
	}

#primenavi li.current {
	background: #fff;
	color: #b83;
	}

#primenavi a.current {
	color: #b83;
	}

#primenavi a:hover { background: #fff; }
#content a { color: #c62; }
#content a:visited { color: #950; }


/* ======== Content ======== */

#maincolumn {
	width: 100%;
	padding: 30px 0 0 0;
	}

#dynTitle {
	color: #555;
	font-size: 15px;
	text-align: right;
	border-right: 25px solid rgb(239,226,186);
	}

#hint {
	margin: 0px 25px 20px 0;
	font-size: 12px;
	text-align:right;
	}

p {
	margin-top: 0;
	margin-bottom: 6px;
	}

#css h2 {
	margin: 30px 25px 14px 30px;
	font-size: 15px;
	font-weight: normal;
	color: #333;
	/*background: rgb(239,226,186);*/
	padding: 10px 0 0 6px;
	border-top: 2px dashed #ddc;
	}

#css p {
	margin: 12px 51px 0 56px;
	font-size: 12px;
	}

#css p.meta {
	color: #666;
	font-size: 11px;
	margin: 20px 51px 0 76px;
	border-top: 1px solid #ddc;
	border-left: 1px solid #ddc;
	padding: 3px 6px;
	}

em {
	color: #b83;
	/*font-weight: normal;*/
	font-style: normal;
	}

p.remark {
	margin: 2em 3em;
	width: 30em;
	color: #777;
	}

p.remark em {
	font-weight: bold;
	color: #c94;
	}

p.remark strong {
	font-weight: normal;
	font-style: italic;
	}

/* ========== Dictionary =========== */

#dict {
	position: relative;
	margin: 30px 25px 0 25px;
	height: 43em;
	font: 11px Lucida Grande, Verdana, sans serif;
	}

dl, dd, dt {
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
	}

#sections, #props, #details {
	float: left;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-top: 1px solid;
	border-color: #666;
	height: 43em;
	}

#sections {
	border-left: 1px solid #666;
	/* We need to spare 3px to make IE display our absolute positioned note box*/
	width: 121px;/* =122-1 */
	}

#props {
	width: 126px; /* =127-1*/
	}

#dict h2 {
	margin: 0 0 5px 0;
	font-weight: bold;
	font-size: 11px;
	background: #888;
	color: #fff;
	padding: 3px 5px;
	}

#instructions {
	padding: 1em 2.5em;
	}

#instructions p {
	font-style: italic;
	}

#instructions li {
	margin-bottom: 7px;
	}

#content #details #instructions a {
	cursor: text;
	}

.footnote {
	text-align: right;
	margin: .5em 35px 0 0;
	font: 10px Andale Mono, monospace;
	color:#999;
	}

/* ========== Sections =========== */

#sections {
	background: rgb(230, 237, 247);
	}

#sections dt {
	margin: 2px 0 4px 0;
	font-weight: bold;
	font-size: 10px;
	color: #92999e;
	text-align: center;
}

#sections dt.plus  {
	margin-top: 10px;
	border-top: 1px solid #ddd;
	padding-top: 4px;
}

#sections dd {
	padding: 2px 6px 3px 6px;
}


#sections #instr_dd {
	margin-top: 2em;
	}

#sections #instr_dd a {
	margin-top: 2em;
	color: #777;
	}

/* ========== Properties ========== */

#props {
	background: #fffaee /*rgb(242, 248, 255)*/;
	}

#props h3 {
	margin: 10px 0 7px 0;
	font-weight: bold;
	font-size: 11px;
	color: #887 /*rgb(131, 144, 163)*/;
	text-align: center;
	}

#props dt {
	padding: 2px 0 3px 8px;
	font-weight: bold;
	}

#props dd {
	padding: 2px 0 3px 18px;
	}

#props dl span {
	display: none;
	}


/* ========== Selection / Hover ========== */

#sections .selected, #sections .selected:hover {
	color: #fff;
	background: rgb(154, 172, 197);
	}

#sections dd:hover, #sections .nofocus {
	background: rgb(195, 209, 226);
	}

#sections dd, #props dd, #props dt {
	cursor: pointer;
	}

#sections #instr_dd.selected {
	background: rgb(230, 237, 247);
	}

#sections #instr_dd.selected a {
	color: #b83;
	font-weight: bold;
	}

#dict .selected {
	cursor: default;
	}

#props .selected, #props .selected:hover  {
	color: #000;
	background: rgb(239,226,186);
	}

#props dd:hover, #props dt:hover, #props .nofocus {
	background: rgb(250,239,207);
	}

/* ========== Details ========== */

#dict #details {
	width: 435px;
	background: #f8f8f8;
	font: 11px/1.4 Verdana, sans-serif;
	}

#dict #details h2 {
	text-align: center;
	font: 11px Lucida Grande;
	font-weight: bold;
	}

#details h3 {
	font-size: 15px;
	font-weight: bold;
	margin: 12px 10px 10px 10px;
	text-align: center;
	color: #b83;
	}

#details .desc {
	font-style: italic;
	text-align: center;
	margin: 0 40px 20px 40px;
	}

#details dt {
	text-align: right;
	border: none;
	width: 8.5em;
	height: 2em; /* enough space to let IE expand the dt box*/
	padding: 0;
	font-weight: bold;
	color: #888 /*#c96*/;
	}

#details dl {
	margin: 15px 0 0 10px;
	line-height: 1.6;
	}

#details dd {
	margin: -2em 1em 1.2em 9.4em;
	}

.l, i {
	color: #333;
	font-weight: bold;
	font-style: normal;
	}

#details .value p {
	margin: 3px 0 3px 0;
	text-align: left;
	}

#details .value p.aux {
	font-size: 10px;
	font-style: italic;
	line-height: 1.5em;
	margin-top: .5em;
	}
#details .value p.aux em {
	font-style: normal;
	color: #333;
	}

#details .value ul em {
	font-style: italic;
	color: #333;
	}

#details .value a, #instructions a {
	border: 1px dotted #f8f8f8;
	border-bottom: 1px dotted #963;
	padding: 0 2px;
	color: #963;
	cursor: pointer;
	}

#details .value a:hover {
	border: 1px dotted #884;
	color: #000;
	background: #ffd;
	}

#details .value a.stick {
	border: 1px solid #aa6;
	color: #000;
	background: #ffd;
	}

#details .value i a {
	color: #333;
	border-bottom-color: #000;
	}

#details .value em {
	color: #963;
	}

#details .supported {
	font-style: normal;
	word-spacing: .5em;
	}

#details .show_hide {
	display: inline-table;
	border: 3px double #888;
	margin-right: 1em;
	}
	
#details .show_hide td {
	border: 3px inset #888;
	}

#details p.hint {
	text-align: center;
	color: #963;
	font-size: 13px;
	margin-top: 2em;
	}

/* ===== Note ===== */

#note {
	position: absolute;
	right: 35px;
	bottom: 10px;
	border: 1px dotted #884;
	background: #ffd;
	padding: 4px 10px 10px 10px;
	width: 350px;
	line-height: 1.5em;
	font: 11px Verdana, sans-serif;
}

#note dt {
	text-align: center;
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 6px;
	color: #b83 /*#776*/;
	}

#note h4 {
	font-size: 11px;
	display: inline;
	color: #776;
	margin-right:.5em;
	}

#note p {
	margin: 4px 0 4px 0;
	font-style: italic;
	text-align: left;
	}

#note p em {
	font-style: normal;
	color: #333;
	}

#note b {
	font-weight: bold;
}

.colornames {
	line-height: 2em;
	}

.border {
	border: 2px #666;
	margin: 1em auto;
	padding: 1em;
	width: 15em;
	}

.overflow {
	width:50px;
	background: #ddd;
	color:#333;
	padding: .5em;
	border: 1px solid #444;
	float: left;
	}

td {
	vertical-align: baseline;
	}

#magic-square {
	display:inline-table;
	border-collapse:collapse;
	font-size: 9px;
	vertical-align: middle;
	background: #fff;
	}
#magic-square td {
	border:1px solid #888;
	text-align: center;
	}

#cursor {
	line-height: 2em;
	}

#cursor i {
	border: 1px solid #888;
	background: #fff;
	padding: 1px .5em 1px .5em;
	}

#store, #notes { display: none; }