/* Major page divisions */
/* body
 * → #canvas
 *   → #header
 *     → #configure
 *     → #info
 *   → #main
 *     → #deck
 *     → #controls
 */

body {
	font-family: "Lucida Grande", "Calibri", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
	font-size: 9pt;
	line-height: 12pt;
	color: #A0735C;
	background-color: #ffeed0;
	padding: 0px;
}

#canvas {
	width: 26.67em;
	margin-left: auto;
	margin-right: auto;
/*	background-color: yellow;*/
}

#header {
	position: relative;
	margin-top: 8.333em;
	margin-bottom: 1.707em;
/*	background-color: lightblue;*/
}

#main {
	position: relative;
/*	background-color: lightblue;*/
}


/* Header */

h1 {
	font-size: 106.67%;
	text-align: center;
	font-weight: normal;
/*	margin-top: 2em;*/
/*	margin-bottom: .4em;*/
/*	line-height: 1;*/
	color: #884433;
/*	margin-top: 7.8125em;*/
/*	margin-bottom: 1.6em;*/
/*	background-color: pink;*/
}

h1 span[lang="ar"] {
	padding-right: .8em;
}

h1 span[lang="en"] {
	padding-left: .8em;
	border-left: solid .1em #A0735C;
}

h2 {
	color: #884433;
}



/* Configuration box */

#configure { /* collapsed */
	font-size: 86.67%;
	position: absolute;
/*	background-color: lightgreen;*/
	top: -.25em;
	right: 0px;
	width: 2.5em;
	height: 1.95em;
	overflow: visible;
	z-index: 4;
	line-height: 1.333;
	
/*	background-color: pink;*/
/*	border: solid 1px yellow;*/
/*	margin: -1px;*/
	
	
	-webkit-transition-property: width, height, right;
	-webkit-transition-duration: .25s, .25s, .25s;
}

#configure.expanded {
/*	z-index: 5;*/
	height: 30em;
	width: 40em;
	right: -4.615em;
}

#configure .frame { /* collapsed */
	position: absolute;
	top: 2.3em;
	width: 0px;
	height: 0px;
/*	left: 0em;*/
	right: 0;
	background-color: #FFFCEC;
	border: solid .1em #A0735C;
	overflow: hidden;
	opacity: 0;
	
	-webkit-transition-property: width, height, opacity, right;
	-webkit-transition-duration: .25s, .25s, .25s, .25s;
	-webkit-box-shadow: 0px .2em 1.2em rgba(0, 0, 0, 0.5);
}

#configure.expanded .frame {
	opacity: 1.0;
	width: 38em;
	height: 27em;
	right: 0.9em;
/*	right: -1em;*/
}

#configure .frame .count {
	font-size: 80%;
	position: absolute;
	top: 1em;
	right: 1em;
}

#configure .frame dl {
	position: absolute;
	right: -3.715em;
	width: 35em;
	height: 24em;
	padding: 1.5em;
	margin: 0px;
	
	-webkit-transition-property: right;
	-webkit-transition-duration: .25s;
}

#configure.expanded .frame dl {
	right: 0px;
}


/* Configuration box reusable styles */

#configure dl dt.left {
	clear: left;
	float: left;
	text-align: right;
	width: 7.5em;
/*	background-color: lightgreen;*/
}

#configure dl dd.right {
	margin-left: 8em;
/*	background-color: orange;*/
}

#configure dl dt,
#configure dl dd {
	margin-top: 2em;
}


/* Configure button */

#configbtn {
	font-size: 125%;
	display: block;
	position: absolute;
/*	height: 2em;
	width: 2em;
*/	
/*	line-height: 1em;*/
	top: 0px;
	right: 0px;
/*	background-color: yellow;*/
	color: #D6B392;
	width: 2.5em;
	text-align: center;
	height: 1.75em;
	border: 0px;
	margin: .1em;
/*	z-index: 6;*/
	font-weight: bold;
	text-decoration: none;
	
	right: 0px;
	
	-webkit-transition-property: right;
	-webkit-transition-duration: .25s;
}

.expanded #configbtn {
	right: 3.692em;
/*	-webkit-transition-property: right;*/
/*	-webkit-transition-duration: 2s;*/
}

#configbtn.over,
#configure.expanded #configbtn {
	margin: 0px;
	border: solid .1em #A0735C;
	color: #A0735C;
	background-color: #F5E3C6;
}

#configbtn span {
	display: inline-block;
/*	background-color: pink;*/
}

#configbtn * {
	border-bottom: 0px;	/* ??? (Firefox) */
}

#configbtn .gear {
	font-size: 140%;
	line-height: .8em;
	vertical-align: bottom;
	margin-right: .15em;
/*	background-color: blue;*/
}

#configbtn .gear img {
	width: .85em;
	border: none;
}

#configbtn .gear span {
	display: none;
}

#configbtn .arrow {
	font-size: 90%;
/*	line-height: .5em;*/
	vertical-align: bottom;
/*	background-color: red;*/
	margin-right: -.25em;
}


/* Info */

/* #info
 * → #badge
 * → #welcome (.far, .near) .flipped?
 *   → #letter
 *   → #browsers
 */

#info {
/*	display: none;*/
	position: relative;
	z-index: 5;
	-webkit-perspective: 600;
/*	background-color: lightblue;*/
}

#badge {
	display: none;
	opacity: 0;
	position: absolute;
	font-size: 173.33%;
/*	bottom: 0px;*/
/*	right: 0px;*/
	top: 1em;
	left: -3em;
	line-height: 1.4;
	width: 10em;
	color: white;
	background-color: red;
	-webkit-transform: rotate(-45deg);
	text-align: center;
}

#badge.visible {
	opacity: 1;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 1s;
}

#badge a,
#badge a:hover {
	color: inherit;
	text-decoration: none;
}

#welcome {
	display: none;
	
	font-size: 93.33%;
	position: absolute;
	width: 50em;
	top: -5.9em;
	left: -10.714em;
/*	border: solid .1em black;*/
/*	margin: -.1em;*/
/*	z-index: 5;*/
	height: 71em;
/*	line-height: 1.8em;*/
	line-height: 1.4;
	
	-webkit-transform-style: preserve-3d;
}

#welcome div {
	position: absolute;
	top: 0px;
/*	-webkit-transform-style: preserve-3d;*/
	-webkit-backface-visibility: hidden;
	opacity: 1.0;
	-webkit-box-shadow: 0px 1em 5em rgba(0, 0, 0, 0.5);
}

#welcome.far {
	-webkit-transform: translateZ(50em);
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 1s, 1s;
	opacity: 0;
}

#welcome.near {
	-webkit-transform: translateZ(0em);
	opacity: 1.0;
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: .5s, .5s;
}

#welcome.flipped {
	height: 82em;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-webkit-transform: rotateY(-180deg);
}

/*#welcome.minimized {
	top: -50em;
	left: -150em;
	-webkit-transform: translateZ(-150em);
	opacity: 0;
	-webkit-transition-property: -webkit-transform, opacity, top, left;
	-webkit-transition-duration: .5s, .5s, .5s, .5s;
}
*/
#welcome *[lang="ar"] {
	font-size: 120%;
	text-align: left;
}

#welcome h2 {
	font-weight: normal;
	font-size: 120%;
	line-height: 1.4;
	margin: 0px;
}

#letter {
	padding: 9.5em 8em 10em;
	margin-bottom: 7em;
	background-color: white;
	z-index: 7;
}

#welcome.flipped #letter {
	z-index: 5;
}

#letter h2 {
	font-size: 140% !important;
	line-height: .4;
}

#letter li {
	margin: .25em;
}

#letter li:before {
	content: "· ";
}

#letter a {
	text-decoration: underline;
}

#letter .closing {
	margin: 2em 0px 1em 0px;
}

#browsers {
/*	display: none;*/
	
	padding: 9em 8em 10em;
/*	margin-bottom: 7em;*/
	background-color: white;
	z-index: 6;
	-webkit-transform: rotateY(-180deg);
}

#welcome.flipped #browsers {
/*	z-index: 5;*/
}

#browsers h2 {
	line-height: 1;
	margin-top: .25em;
}

#browsers dl {
	margin: 2em 0px;
}

#browsers img {
	height: 5em;
/*	background-color: yellow;*/
}

#browsers dt {
	float: left;
	clear: left;
/*	font-size: 110%;*/
/*	font-weight: bold;*/
	width: 22em;
	height: 9em;
	padding-top: 1em;
	margin-bottom: 1em;
/*	background-color: pink;*/
}

#browsers ul {
	margin: 0px;
}

#browsers ul li {
	float: left;
	width: 6em;
/*	background-color: lightblue;*/
	text-align: center;
	margin: 0px 1em;
}

#browsers a img {
	border: none;
}

#browsers a:hover {
	text-decoration: none;
}

#browsers dd {
	margin-left: 22em;
	height: 9em;
/*	background-color: orange;*/
	margin-bottom: 1em;
	width: 12em;
	padding-top: 1em;
	text-align: center;
}

#browsers .good {
	background-color: #EEFFDD;
}

#browsers .okay {
	background-color: #FFFFCC;
}

#browsers .bad {
	background-color: #FFEEDD;
}

#browsers .good li:hover {
	background-color: #DDEECC;
}

#browsers .okay li:hover {
	background-color: #EEEEBB;
}

#browsers .bad li:hover {
	background-color: #EEDDCC;
}

#browsers .note strong {
	padding-right: .25em;
}


/* Generic site-wide styles */

*[lang="ar"] {
	font-size: 130%;
	direction: rtl;
	font-family: "Geeza Pro", "Arial", "Times New Roman";
}

.smallcaps {
	font-size: 70%;
	line-height: 1.43em;
}

.indent {
	padding-left: 1.25em;
}

.zero {
	color: red;
	font-weight: bold;
}

.zero:before {
	position: relative;
	bottom: -.25em;
	content: url(../images/caution.png);
	margin-right: .5em;
}

a {
	color: #A0735C;
	text-decoration: none;
}

a:active,
a:hover {
	color: #dd3322;
	text-decoration: underline;
}


/* letter-related */
ul {
	padding-left: 0em;
	list-style-type: none;
}

div > h2:first-child {
	margin-top: .25em;
}