@import url("reset.css");
@import url("/fonts/Gothic-Ultra-OT/stylesheet.css");

/*
@import url(https://fonts.googleapis.com/css?family=Enriqueta:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Gentium+Basic:400,400italic,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Alegreya:400,400italic,700,700italic&subset=latin,latin-ext);

// Best:
@import url(https://fonts.googleapis.com/css?family=Neuton:400,400italic,700&subset=latin-ext,latin);
*/

/*
 * Main content:
 */

html {
    /* always want scrollbar to avoid jumpiness */
    overflow-y: scroll;

    /* This elimiates flicker on IE: */
    filter: expression(document.execCommand("BackgroundImageCache", false, true) );
}

body, th, td {

    font-family: Times, "Times New Roman", Georgia, serif;
    /* font-family: Georgia, "Times New Roman", "Times", serif; */
}

body {
    background-color: #EEEBE9;  /* tan 1 */
    background: url('/images/circuits-back.jpg');
    background-repeat: repeat-both;
}

body.help {
    background: none;
    background-color: #FFF;
}

hr {
	width: 100%;
	background-color: #cccccc;
	border: 0px;
	height: 1px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'GothicUltraOTRegular', Garamond, Times, "Times New Roman", Georgia, serif;
}

h1 {
	padding: 0;
	margin: 0;
	font-size: 3em;
	font-weight: normal;
    text-shadow: 0 0.1ex .05em #AAA;
}

h2 {
	padding-bottom: 0;
	margin-bottom: 0;
	font-size: 2em;
	font-weight: normal;
}

h1.title {
    display: block;
    padding: 0;
    margin: 0;
/*  margin-top: -4px; */
/*  font-style: italic;*/
/*  font-size: 24pt; */
    font-size: 3em;
}

h2.supertitle {
    display: block;
    padding: 0;
    margin: 0;
    margin-bottom: 0.25ex;
    font-size: 1.5em;
    color: #444;
/*  font-size: 13pt;*/
/*  font-style: italic;*/
}

h2.subtitle {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 2em;
    color: #000;
/*  font-size: 13pt;*/
/*  font-style: italic;*/
}

p {
    margin-top: 2ex;
    margin-bottom: 2ex;
    line-height: 125%;
}
sub, sup {
    font-size: .9em;
}
sup {
    bottom: .8ex;
}

ul,
ol {
    margin-left: 3em;
    list-style: square;
}

ul li ,
ol li {
    margin-top: 2ex;
    margin-bottom: 2ex;
    line-height: 125%;
}

blockquote {
    margin-left: 3em;
    margin-top: 2ex;
    margin-bottom: 2ex;
    line-height: 125%;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

tt {
    font-family: Courier, proportional, sans-serif;
}



/*
 * Tables used purely for layout:
 */

table.layout {
	vertical-align: top;
    border-collapse: collapse;
}

table.layout tr,
table.layout td {

}

table.layout img {
    border: 0;
}

table.layout a {
    border: 0;
}



/*
 * My notes
 */

#ceiling, #ceiling td {
    background-color: #FFF;
}

.headernote {
    font-size: 1em;
    text-align: left;
    margin: 12px 0 8px 0;
}

.headernote a,
.headernote a:visited,
.headernote sup {
    font-weight: bold;
    color: #903;
}

.footernote {
    margin-right: 300px;
    font-size: 1.5em;
    text-align: center;
    padding: 2ex 2em;
    margin-top: 4ex;
    margin-bottom: 4ex;
}

.handwritten {
    font-family: 'Shadows Into Light Two', cursive;
    font-weight: 400;
}



/*
 * Anchors:
 */

a 	      { text-decoration: none; }
a:link    { color: #AA0018; }
/*a:visited { color: #99777F; }*/
/*a:visited { color: #775F65; }*/
/*a:visited { color: #AA6677; }*/
a:visited { color: #66000A; }
a:active  { color: #ee0033; }
a:hover   {
    color: #cc0022;
    text-shadow: 0 0 0.2em #FAB; /*, 0 0 0.2em #FAB;*/
    text-decoration: underline;
}

a.subtle          { color: #000; text-decoration: none; }
a.subtle:link     { color: #000; }
a.subtle:visited  { color: #000; }
a.subtle:active   { color: #666; }
a.subtle:hover    {
    color: #cc0022;
    text-shadow: 0 0 0.2em #FAB; /*, 0 0 0.2em #FAB;*/
}


a.pdf {
	background-image: url(/images/link-acrobat.png);
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 19px;    /* px because driven by background image */
}
a.media {
	background-image: url(/images/link-media.png);
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 13px;    /* px because driven by background image */
}
a.mailto {
	background-image: url(/images/link-mailto.png);
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 13px;    /* px because driven by background image */
}

a.help          { color: inherit;
		  text-decoration: none;
		  cursor: help;
		}
a.help:link     { color: inherit; }
a.help:visited  { color: inherit; }
a.help:active   { color: #666; }
a.help:hover    {
    color: #cc0022;
    text-shadow: 0 0 0.2em #FAB; /*, 0 0 0.2em #FAB;*/
}

span.url {
	font-style: italic;
	color: #666;
}




/*
 * Standard page elements
 */

div.signature {
	margin-top: 12ex;
	text-align: left;
	font-style: italic;
	color: #999;
}

span.sig  {
    color: #660011;
    font-size: 125%;
}

#bodytable {
    background-color: #FFF;
    background-image: url("/images/left.png");
    background-position: 0px 0px;
    background-repeat: repeat-y;
    padding-top: 5px;

    margin: 0 auto;
    width: 960px !important;

    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 0px 20px 5px;
     -khtml-box-shadow: rgba(0,0,0,0.2) 0px 0px 20px 5px;
       -moz-box-shadow: rgba(0,0,0,0.2) 0px 0px 20px 5px;
        -ms-box-shadow: rgba(0,0,0,0.2) 0px 0px 20px 5px;
         -o-box-shadow: rgba(0,0,0,0.2) 0px 0px 20px 5px;
            box-shadow: rgba(0,0,0,0.2) 0px 0px 20px 5px;

}

#toprow td {
    background-image: url("/images/top-full.png");
    background-repeat: no-repeat;
}

#topleftcorner {

}

#topcircuits {
   	vertical-align: top;
    height: 93px;
}

#bodyrow {
	vertical-align: top;
	margin-top: 0;
	padding-top: 0;
}

#left {
    width: 74px;
    height: 100%;
    background-image: url(/images/left.png);
	background-repeat: repeat-y;
	background-position: 0px 0px;
}




/*
 * Left-side case menu
 */

#casemenutitle-cell {
    background: url(/images/casemenu-head-sep.png);
    margin: 0;
    padding: 0;

    height: 141px;
    width: 153px;
    overflow: hidden;
}

#casemenutitle-cell-content {
    height: 141px;
    width: 144px;
    overflow: hidden;
}

#casemenutitle-box {
    margin: 0;
    padding: 0;
    border: 0;

    display: table;
    width: 105px;
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;

    margin-left: 30px;
    margin-top: 51px;
}

#casemenutitle {
    margin: 0;
    padding: 0;
    border: 0;

 /* margin-left: 20px; width: 123px; */
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

/* Inside lower pendulum */
#casemenutitle h2 {
    font-family: Times, "Times New Roman", Georgia, serif;
/*	font-size: 11pt; **/
	font-size: 1em;
    color: #DDD;
    width: 100%;
    text-align: center;
    font-weight: bold;
 /*  font-variant: small-caps;*/
}

#casemenutitle h2 .prelude {
    font-weight: normal;
    font-size: 90%;
    display: none;
}

#casemenutitle h2 a {
    color: #DDD;
    text-decoration: none;
}


#casemenu-cell {
/*    background: url(/images/left.png);*/
}

#casemenu {
/*
    margin:0; margin-left:51px;
    width:63px;
*/
    margin:0;
    margin-left:41px;
    width:83px;
    background-color: #000;
    padding-top: 0px;
    padding-bottom: 30px;

/*
    height: 135px;
    overflow: scroll;
*/
}

#casemenu-title a ,
#casemenu       a {
    display: block;
    font-weight: bold;
    font-family: Garamond, Times, "Times New Roman", Georgia, serif;
    text-align: center;

    color: #FFF;

    text-decoration: none;
    padding: 3px 0px;
    border: none;
}

#casemenu-title a:link,
#casemenu       a:link {
    background: url(/images/casemenuitem.png);
    color: #FFF;
}

/**
 * can't change background image on "visited" due to history-sniffing
 * exploit!
 */
#casemenu-title a:visited,
#casemenu       a:visited {
/*  background: url(/images/casemenuitem-visited.png); */
    color: #999;
    text-shadow: none;
}

#casemenu-title a:hover,
#casemenu-title a:active,
#casemenu       a:hover ,
#casemenu       a:active {
    color: #FFF;
    background: url(/images/casemenuitem-hover.png);
    text-shadow: 0 0 0.2em #F46, 0 0 0.2em #FFF;
}

#casemenu a.linkhere {
    background: url(/images/casemenuitem-here.png);
    color: #999;
}

#casemenu a.linkhere:hover {
    background: url(/images/casemenuitem-here.png);
    text-shadow: none;
    color: #999;
}

#casemenutitle h2 a:hover {
    color: #fff;
    text-shadow: 0 0 0.5em #F46, 0 0 0.25em #F6A, 0 0 0.25em #FFF;
}

#casemenu a {
    position: relative;
}

/*
#casemenu a .popout {
    display: none;
    background: #000;
    height: 0px;
    color: #000;

  -webkit-transform: scaleX(0.0);
	-moz-transform: scaleX(0.0);
	-ms-transform: scaleX(0.0);
	-o-transform: scaleX(0.0);
	transform: scaleX(0.0);

    -webkit-transition: height 0.5s linear;
     -khtml-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;




}
*/

#casemenu a .popout,
#casemenu a:hover .popout {
    display: block;

    background: url('/images/casemenuitem-help.png');
    background-color: #000;
    background-repeat: no-repeat;
	background-position: center right;

    color: #CCC;
    text-shadow: none;
    font-weight: bold;
    top: -3px;
    left: 83px;
    position: absolute;
    text-align: left;
    padding: 2px 1em;
    z-index: 1;

    border-top: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    border-right: 3px solid #ccc;

    overflow: hidden;

/*
    -webkit-transition: width 0.25s ease-out;
     -khtml-transition: width 0.25s ease-out;
       -moz-transition: width 0.25s ease-out;
        -ms-transition: width 0.25s ease-out;
         -o-transition: width 0.25s ease-out;
            transition: width 0.25s ease-out;
*/
}

#casemenu a .popout {
    width: 0px;
    height: 0px;
    opacity: 0;
    display: none;  /* must remove this is doing transitions! */
}

#casemenu a:hover .popout {
    width: 300px;
    height: 16px;
    opacity: 1.0;
}




#sidebar {
	margin: 0;
	padding: 0;
	width: 186px;
	display: table-cell;
	vertical-align: top;
}


#content {
	display: table-cell;
	padding-top: 1ex;
    position: relative;  /* for special-note positioning */
}

#contenttext {
	margin: 0;
	padding: 0;
	padding-top: 2ex;
/*	padding-left: 0.5em;*/
}

#content div.intro {

}

#content div.intro p {
	margin-top: 0;
	width: 300px;
}

#titles {
    width: 100%;
	text-align: left;
	padding-top: 14px;
	margin: 0 0 0 0;
}



/*
 * Editorial footnotes:
 */

div.footnotes {
    /* 30em but must accomodate images at right; ideal width = 440px; */

    border-top: 1px dotted #999;
	margin-top: 12ex;
	font-size: 0.9em;
    margin-bottom: 0;
}

div.footnotes ul {
    margin-left: 3em;
    margin-right: 0;
}

div.footnote {
	margin-top: 2ex;
}

sup.footnote {

}

div.footnote sup.footnote {

}

div.footnote:target {

}

a.footnoteref:target sup {

}


a.footnoteref,
a.footnoteref:hover sup,
a.footnoteref:active sup {
    text-decoration: none;
}

div.footerTags span.footerTagsPrompt {
    cursor: help;
/*  border-bottom: 1px dotted #CCC;*/
}

div.footerTags {
    margin-top:18ex;
    margin-bottom:-14ex;
	font-size: 0.8em;
}

div.footerTags span.footerTagList {
    opacity: 0;
    -webkit-transition: opacity 0.4s linear;
     -khtml-transition: opacity 0.4s linear;
       -moz-transition: opacity 0.4s linear;
        -ms-transition: opacity 0.4s linear;
         -o-transition: opacity 0.4s linear;
            transition: opacity 0.4s linear;
}

div.footerTags:hover span.footerTagList {
    opacity: 1.0;
    -webkit-transition: opacity 0.4s linear;
     -khtml-transition: opacity 0.4s linear;
       -moz-transition: opacity 0.4s linear;
        -ms-transition: opacity 0.4s linear;
         -o-transition: opacity 0.4s linear;
            transition: opacity 0.4s linear;
}





/*
 * Attributions and copyright:
 */

#copyright {
    /* 30em but must accomodate images at right; ideal width = 440px; */
    width: 440px;
    width: 55%;  /* 440px/824px */

    border-top: 1px dotted #999;
    padding-top: 1ex;
	margin-top: 18ex;
	text-align: left;
	color: #666;
	font-size: 0.8em;
        clear: both;   /* images */
        padding-bottom: 2ex;  /* little visual whitespace for clarity */
}

#copyright p {
    padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}

#copyright a 	     { text-decoration: none; }
#copyright a:link    { color: #944; }
#copyright a:visited { color: #944; }
#copyright a:active  { color: #944; }
#copyright a:hover   {
    color: #cc0022;
    text-shadow: 0 0 0.2em #FAB; /*, 0 0 0.2em #FAB;*/
    text-decoration: underline;
}

#copyright div.translations {
	margin-bottom: 3ex;
}

#copyright p.translated-by {
	color: #000;
	margin-bottom: 0ex;
}

#copyright p.variation {
	margin-top: 0ex;
	margin-bottom: 3ex;
}

#copyright .credits {
	margin-top: 3ex;
}

#copyright .star {
	font-size: 3em;
    font-family: 'GothicUltraOTRegular', Garamond, Times, "Times New Roman", Georgia, serif;
    float: left;
    padding-right: 2px;

/*
    padding-top: 4px;
    margin-left: -0.5em;
*/
}





/* top menu and children */

#topmenu {
    width: 100%;
    text-align: left;
    margin: 0;
    margin-top: .5ex;
    padding-bottom: 2ex;
    position: relative;
    opacity: 0.5;   /* subdued until :hover */

    color: #808080;
    line-height: 200%;

    min-height: 28px;
}

#topmenu:hover {
    opacity: 1.0;   /* not subdued */
}

/** Links in top menu are not red until you hover */
#topmenu       a    { text-decoration: none; }
#topmenu       a  ,
#topmenu       a:link ,
#topmenu       a:visited  {
    color: #000;
}
#topmenu       a:hover {
    color: #cc0022;
    text-shadow: 0 0 0.2em #FAB; /*, 0 0 0.2em #FAB; */
}

/** Disabled links at top are greyed out */
#topmenu .nolink {
    opacity: 0.5;
}


.menu-group {
    text-wrap: none;
}


/** Long text menu */
#textmenu {
    display: block;
    float: left;
    font-size: 0.8em;
}

/** Short/icon menu */
#tinymenu {
    font-size: 1.25em;
    display: none;
}

#tinymenu .menu-group {
    padding-right: 4%;
}

#tinymenu .menu-group a,
#tinymenu .menu-group .nolink {
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
}












#langmenu {
    color: #CCC;
    float: right;
    padding: 0;
    margin: 0;
    margin-right: 30px;
}

span.bar {
    color: #ccc;
    padding-left: 1px;
    padding-right: 1px;
}

span.barshort {
    padding-left: .2em;
    padding-right: .2em;
}

span.barlong {
    width: 4em;
    display: inline-block;
}

span.spaceshort {
    padding-left: .15em;
    padding-right: .15em;
}

span.spacelong {
    width: 2em;
    display: inline-block;
}




table.case-info {
    opacity: .5;
    position: absolute;
    top: 110px;
    left: 676px;
    border-left: 1px dotted #999;
    padding-top: 2ex;
    padding-bottom: 2ex;
}

table.case-info th,
table.case-info td {
    font-size: 90%;
    padding: .5ex .5em .5ex 0;
}

table.case-info th {
    padding-left: 1em;
    font-style: italic;
}

table.case-info td {
    margin-bottom: 1ex;
    width: 20em;
}

table.case-info:hover {
    opacity: 1.0;
}

div.case-geekiness {
    float: right;
    text-align: right;
/*    margin-right: 330px;*/
    margin-right: 33px;

    color: #999;
    font-style: italic;
    opacity: 1.0;
}

div.case-geekiness:hover {
    opacity: 1.0;
}





/*
 * RSS link in text menu:
 */

/* normal */
#topmenu span.tiny-rss {
	background-image: url(/images/rss-black.png);
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 16px;    /* px because driven by background image */
}

#topmenu span.tiny-rssr {
	background-image: url(/images/rss-black.png);
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 16px;    /* px because driven by background image */
}

/* active */
#topmenu a:hover span.tiny-rss,
#topmenu a:hover span.tiny-rssr {
	background-image: url(/images/rss-red.png);
}




/*
 * Koans:
 */

div.sorry {
    font-style: italic;
}


div.misc,
div.story {
    /* 30em but must accomodate images at right; ideal width = 440px; */
    width: 440px;
    width: 55%;  /* 440px/824px */
/*  font-size: 110%; if using Neuton */
}


div.misc p.break,
div.story p.break {
    text-indent: 0;
    text-align: center;
    margin: 1ex auto;
    color: #fff;
    font-size: 0%;
    height: 32px;
    width: 228px;
    background-image: url(/images/hrule.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

div.misc blockquote,
div.story blockquote {
    margin-left: 4em;
    margin-top: 2ex;
    margin-bottom: 2ex;
    line-height: 125%;
}

div.misc pre,
div.story pre {
    font-family: Courier, proportional, sans-serif;
/*    font-size: 10pt; **/
    font-size: 90%;
    margin-left: 2em;
}

div.misc h2,
div.story h2 {
    margin: 0;
    padding: 0;
    padding-top:2ex;
    font-size: 2em;
}

div.misc h2 {
    margin-top: 3ex;
    padding-top: 1ex;
    border-top: 1px dotted #AAA;
}

div.misc h3 {
    margin-top: 3ex;
    font-size: 1.1em;
    font-family: 'Quintessential', cursive;
    line-height: 110%;
    font-weight: bold;
}




div.story img ,
div.story img.picture {
    border: 0;
    margin: 0;
    padding: 0;
    background: #FFF;  /* bypass FF bug with black lines under images */
}

div.story img.break {
    display: block;
    border: 0;
    padding: 0;
    margin: 1ex auto;
}

div.story img.picture {
    padding: 10px;
}



div.story .tbc {
    color: #999;
    text-align: right;
    font-style: italic;
    margin-top: 8ex;
}

div.story .cf {
    color: #999;
    text-align: right;
    font-style: italic;
    margin-bottom: 8ex;
}



div.story .illus-centered,
div.story .illus-right {
    background: #FFF;
    margin: 0px;
    padding: 0px;
    border: 0;
}

div.story .illus-centered {
    margin: 0 auto;
}

div.story .illus-right {
    float: right;
    margin-right: -330px;
    padding-left: 10px;
}



div.story .about {
    font-style: italic;
    padding-left: 4em;
    color: #666;
}









/*
 * section headings and menu
 */

a.up          { color: #000; text-decoration: none; }
a.up:link     { color: #000; }
a.up:visited  { color: #000; }
a.up:active   { color: #666; }
a.up:hover    {
    color: #cc0022;
    text-shadow: 0 0 0.2em #FAB; /*, 0 0 0.2em #FAB;*/
}

#sectionmenu-wrapper {
    float: right;
    right: 0;
    width: 230px;
    padding-right: 0em;
    padding-top: 2ex;
    padding-bottom: 2ex;
}

#sectionmenu {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0.5ex;
    padding-bottom: 0.5ex;

    border-left: 1px dotted #CCC;

    font-weight: normal;
    font-size: 1em;
    background-color: white;

    font-family: 'Quintessential', cursive;  line-height: 110%;

/* REJECTED font-family: 'Shadows Into Light', cursive;  line-height: 100%; */
/* REJECTED font-family: 'Julee', cursive;  line-height: 125%; */
/* REJECTED font-family: 'Shadows Into Light Two', cursive;  line-height: 100%; */
/* REJECTED font-family: 'Aladin', cursive;  line-height: 100%;*/
/* REJECTED font-family: 'Fondamento', cursive;  line-height: 100%;*/

}

#sectionmenu.sticky {
    float: none;
    right: auto;
    position: fixed;
    top: 20px;
    z-index: 6;
}

#sectionmenu a.menuitem {
    display: block;
    color: #333;
    text-decoration: none;
    padding: .75ex 0;
}

#sectionmenu a.menuitem:hover,
#sectionmenu a.menuitem:active {
    color: #000;
    text-shadow: 0 0 0.1em #000, 0 0 0.2em #CCC;
}




/*
 * special-note
 */

.special-note {
    border: 0;
    margin: 0;
    padding; 0;


    font-size: 90%;

    width: 180px;

    position: absolute;
    top: 100px;
    right: 30px;
/*    z-index: 100;*/

    opacity: 0.8;

    -webkit-box-shadow: rgba(255,255,255,1.0) 0px 0px 20px 10px;
     -khtml-box-shadow: rgba(255,255,255,1.0) 0px 0px 20px 10px;
       -moz-box-shadow: rgba(255,255,255,1.0) 0px 0px 20px 10px;
        -ms-box-shadow: rgba(255,255,255,1.0) 0px 0px 20px 10px;
         -o-box-shadow: rgba(255,255,255,1.0) 0px 0px 20px 10px;
            box-shadow: rgba(255,255,255,1.0) 0px 0px 20px 10px;

}

.special-note .date {
    font-weight: bold;
}

.special-note-top {
    height: 10px;
    background-color: #000;
}

.special-note-mid {
    background-color: #EEEBE9;  /* tan 1 */
    padding: 1ex 1em 1ex 1em;
}

.special-note-bot {
    height: 10px;
    background-color: #000;
}

.special-note:hover {
    opacity: 1.0;

    -webkit-transition: opacity 0.5s linear;
     -khtml-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
        -ms-transition: opacity 0.5s linear;
         -o-transition: opacity 0.5s linear;
            transition: opacity 0.5s linear;

}






#tcc-case-title-box {
	vertical-align: top;
    padding-top: 23px;
    padding-left: 595px;
    width: 280px;
    height: 60px;
}

#tcc-case-title-box img {

}


div.notice {
    position: absolute;
    top: 0px;
    right: 0;
    background-color: white;
    border: 1px solid #CCC;
    padding: 2ex 1em;
    font-size: 85%;
    color: black;
    width: 15em;
    height: 52px;
    text-align: left;
    font-family: Times, Times New Roman, serif;
    box-shadow: -5px 5px 10px #000;

}

table.toc tr {
    height: 3.5ex;
}

table.toc tr:hover td.toc-tag-head ,
table.toc tr:hover td.toc-caselist ,
table.toc tr:hover td.toc-len ,
table.toc tr:hover td.toc-num ,
table.toc tr:hover td.toc-name ,
table.toc tr:hover td.toc-lang,
table.toc tr:hover td.toc-date {

    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(252,232,232,100) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */

    background: -moz-linear-gradient(   top, rgba(255,255,255,0) 0%,rgba(252,232,232,100) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(     top, rgba(255,255,255,0) 0%,rgba(252,232,232,100) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(    top, rgba(255,255,255,0) 0%,rgba(252,232,232,100) 50%,rgba(255,255,255,0) 100%); /* IE 10++ */

    background: -linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(252,232,232,100) 50%,rgba(255,255,255,0) 100%); /* W3C */
}

table.toc {
    margin: 0 auto;
    padding: 0;
}

table.toc td {
/*    vertical-align: top;*/
    vertical-align: middle;
/*    font-size: .9em;*/
    padding-top: .75ex;
    padding-bottom: 1.5ex;
    text-align: left;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

table.toc td.toc-num {
    text-align: right;
    padding-right: 0.25em;
    width: 1em;
    color: #333;
}

table.toc td.toc-name {
    text-align: left;
    padding-right: 2em;
}

table.toc td.toc-illus {
    padding-top: 6px;
}

table.toc td.toc-illus img {
/*    padding: 0 0.5em;*/
}

table.toc td.toc-geek {
/*    padding-top: 1px;*/
}

table.toc td.toc-geek img {
    padding: 0 0.5em;
}

table.toc td.toc-len {
    text-align: right;
    color: #333;
    padding-bottom: 1.25ex;
}

table.toc td.toc-langs {
    font-size: 85%;
    color: #808080;
    padding-bottom: 1.25ex;
}

table.toc td.toc-lang {
    font-size: 85%;
    color: #808080;
    padding-bottom: 1.25ex;
    text-align: center;
}

table.toc td.toc-date {
    font-size: 85%;
    color: #333;
    padding-left: 1em;
    padding-bottom: 1.25ex;
    white-space: nowrap;
}

table.toc td.toc-tag-head {
    min-width: 10em;
}

table.toc td.toc-caselist {
    padding-left: 1em;
    font-size: 90%;
}

div.book {
    margin: 0 auto;
    margin-top: 4ex;
    width: 75%;
}

div.book p {
    font-size: 90%;
}



.captioned {
    font-size: 90%;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.captioned .caption {
    text-align: center;
    width: 90%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}





/* Talks */

div.talk {
    max-width: 35em;
}

div.talk p {
    margin: 0;
    margin-top: 3ex;
    line-height: 125%;
    max-width: 30em;
}

div.talk blockquote {
    margin-left: 3em;
}

div.talk img {
    max-width: 100% !important;
}

div.talk img.slide {
    margin-top: 8ex;
    border: 1px solid #eee;

    -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 25px 5px;
     -khtml-box-shadow: rgba(0,0,0,0.1) 0px 0px 25px 5px;
       -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 25px 5px;
        -ms-box-shadow: rgba(0,0,0,0.1) 0px 0px 25px 5px;
         -o-box-shadow: rgba(0,0,0,0.1) 0px 0px 25px 5px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 25px 5px;

}

div.talk img.title {
    margin-top: 0;
}

div.talk img.break {
    display: block;
    border: 0;
    padding: 0;
    margin: 0 auto;
    margin-top: 2ex;
}




table.about-translators {
    margin-left: 2em;
}

table.about-translators th {
    vertical-align: top;
    width: 2em;
    text-align: center;
    font-size: 1.5em;
    padding-right: 8px;
    padding-top: 0.25ex;
    margin-top: 2ex;
    font-style: italic;
}

table.about-translators td {
    vertical-align: top;
    margin: 0;
    padding: 0;
    padding-top: 1.1ex;
    padding-bottom: 2ex;
}



/*
 * Popups:
 */

.popup {
   position:absolute;
   left:0;
   top:0;

   background-color: white;
   z-index: 2;
   border: 1px solid #999;
/*   font-size: 11pt; **/
   text-shadow: none;

    -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
     -khtml-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
       -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
        -ms-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
         -o-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
}

.popupNoteButton {
    border: 1px outset #eee;
    background-color: #f7f7f7;
    position:relative;
    padding: 1px 1px;
    cursor: pointer;
}

.popupNote {
   position:absolute;
   left:0;
   top: 2.5ex;
   width: 30em;

   padding: 1ex 1em;
   background-color: white;
   z-index: 2;
   border: 1px solid #999;
/*   font-size: 11pt; **/
   text-shadow: none;

    -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
     -khtml-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
       -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
        -ms-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
         -o-box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 12px 5px;
}


.popupNoteButton .popupNote {
    display: none;
}

.popupNoteButton:hover .popupNote {
    display: block;
}



/*
 * Translation popup menu:
 */

.trans-menu-button {
    margin: 0;
    padding: 0;
    border: 0;
}

.trans-menu-button span.tiny-trans {
    background-image: url(/images/translate.png);
	background-position: center right;
	background-repeat: no-repeat;

    display: block;
    width: 32px;
    height: 32px;
}
.trans-menu-button:hover span.tiny-trans {
    background-image: url(/images/translate-red.png);
}



/** reset */
#topmenu .trans a:link,
#topmenu .trans a:visited {
    opacity: 1.0;
    text-shadow: none;

}
#topmenu .trans a.nolink {
    opacity: 1.0;
}



.trans {
    top: 30px;   /* 32 px with 2px slop */
    color: black;
    line-height: 110%;
    padding: 2px 4px;
}

#caseLangMenu {
    width: 404px;
    left: -380px;
 /* account for (14px box shadow / 2), and 2px slop */
}

#miscLangMenu {
    width: 244px;
    left: -220px;  /* account for (14px box shadow / 2) */
}

.multi {
/*    border-top: 3px double #902;*/
    text-decoration: overline;
}




.trans {
    display: table;
}

.trans a {
    display: table-row;
    width: 100%;
    vertical-align: middle;
    height: 4ex;
}

.trans a  .trans-lang {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 2.5ex;

    margin: 1px;
    padding: 1ex 0.5em;

    font-size: 133%;
    width: 1.5em;
    background-color: #000;
    color:            #DDD;
    text-shadow: 0 0 1px #999;

    font-size: 160%;
    text-transform: lowercase;
    font-style: italic;

    border: 0;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
}

.trans a  .trans-about {
    display: table-cell;
    width: 100%;
    vertical-align: middle;

    margin: 0;
    padding: 0.75ex 0.5em;
    white-space: nowrap;
}

.trans a.nolink .trans-lang  {
    background-color: #999;
    color: #EEE;
}

.trans a.nolink .trans-about  {
    color: #808080;
}


/** hovering over a disabled menu item does not highlight by default  */
         .trans a.nolink:hover ,
#topmenu .trans a.nolink:hover {
    text-shadow: none;
    color: #000;
}

/** hovering over a menu item makes the "icon" bright */
.trans a.nolink:hover .trans-lang {
    color: #EEE;
    background-color: #999;
    text-shadow: none;
}

.trans a:hover        .trans-lang {
    text-shadow: 0 0 0.5em #FAB /*, 0 0 0.25em #FFF */;
    color: #FFF;
    background-color: #66000A;
}



/* align it */

.trans {
    text-align: right;
}
.trans a {
    text-align: right;
}

.trans a        span.trans-about ,
.trans a.nolink span.trans-about {
    text-align: right;
}



.trans-menu-button .popup,
.trans-menu-button .trans {
    display: none;
}

.trans-menu-button:hover .popup,
.trans-menu-button:hover .trans {
    display: block;
}

pre.inlinefile {
    font-family: Courier;
    font-size: 0.8em;
    margin-left: 2.5em;
    border: 1px solid #ccc;
    background-color: #F7F7F7;
    padding: 1ex 1em;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}


div.message {
    margin: 0 auto;
    padding: 2ex 2em;
    font-size: 0.9em;
    background-color: #fff;
    position: relative;

    margin: 0 auto;
    width: 50em;
}

div.misc pre,
pre.code {
    font-family: Courier, proportional, sans-serif;
    font-size: 90%;
    margin-left: 2em;
}

div.misc .illus {
    background: #FFF;
    margin: 0px;
    margin-top: 2ex;
    padding: 0px;
    border: 0;
}



/* Compact case number link, as on the tag/name index pages: */
.ccn {
    padding: 2px 4px;
    min-width: 2em;
    display: inline-block;
    text-align: center;
}

.ccn:hover {
    text-decoration: underline;
}


/*
 * Responsive: 960 px and below.
 *
 * Below this point, we don't have a background field.
 * Lose the left navigator since it's not essential,
 * and simplify the top header accordingly.
 */

@media screen and (max-width: 960px) {

/*
    div.story { background-color: #FFE; }
*/

    div.story .illus-centered {
        max-width: 100%; !important
        width: 100%; !important
        margin: 0 auto;
    }

    div.story .illus-right {
        max-width: 75%; !important
        width: 75%; !important
        margin: 0 auto;

        margin-right: -220px;
    }


    div.testflag {
        display: none;
        }

	html {
		background-color: #fff;
		background-image: none;
        width: 100%;
		margin: 0;
		padding: 0;
        border: 0;
	}

	body {
		background-color: #fff;
		background-image: none;
		background-image: none;
		padding: 0;
        margin: 0;
        width: 100%;
        border: 0;
/*		font-size: 11pt; **/
    }

    #bodytable {
        background-image: none;
		padding: 0;
		margin: 0;
        width: 100% !important;
        -webkit-box-shadow: none;
        -khtml-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
    }

    #titles {
	    text-align: left;
	    margin: 0;
        width: 100%;
    }

	#sidebar {
	    display: none;
    }

    #content {
        padding-left: 3%;
        padding-right: 1%;
    }

    #contenttext {
		padding: 0;
		margin: 0;
        width: 100%;
    }

    #left {
        display: none;
    }

    #toprow {
        width: 100%;
    }

    #toprow td {
        width: 100%;
        background-image: url("/images/top.png");
        background-repeat: repeat-x;
        background-position: 190px -20px;
        overflow: hidden;
        height: 75px;
    }

    #tcc-case-title-box {
        margin: 5px 0 0 0;
        padding: 0;
    }

    #content div.intro p {
	    margin-top: 0;
	    width: 100%;
    }


	html {
        background-image: url("/images/top.png");
        background-repeat: repeat-x;
        background-position: 190px -20px;
    }


    div.story,
    div.talk,
    div.editorial,
    div.footnotes,
    div#copyright,
    div.footerTags {
        max-width: 30em;
        width: 95%;
    }

    div.story      *,
    div.editorial *,
    div.talk      * {
        max-width: 100%;
    }



    pre {
        font-size: 75% !important;
    }


    #ceiling {
        border-bottom: 9px solid #CCC;
    }

    #ceiling-left { display: none; }

    .headernote {
        margin-left: 24px;
        padding-bottom: 12px;

    }


    div.talk img {
        max-width: 100%; !important
    }

    div.talk img.slide {
        width: 100%; !important
    }


}


/*
 * Responsive: 740 px and below
 *
 * Below this point, we don't have room for right-hand-side
 * matter, and the menu bar is getting too crowded.
 *
 * - Collapse the section navigators,
 * - Switch to a compact top menu.
 */

@media screen and (max-width: 740px) {

    div.story .illus-centered {
        margin: 0 auto;
        max-width: 75%; !important
        width: 75%; !important
    }

    div.story .illus-right {
        margin: 0 auto;
        max-width: 50%; !important
        width: 50%; !important
    }

    div.story blockquote {
        margin-left: 2em;
    }


    #topmenu {
        opacity: 0.75;
    }

    #textmenu {
        display: none;
    }

    #tinymenu {
        display: block;
    }

    #langmenu {
        position: absolute;
        top: 4px;
        right: -5px;
    }

    #titles {
        padding: 0;
    }


    #sectionmenu {
        display: none;
    }

    img.break {
        max-width: 80% !important;
    }

    pre {
        word-break: break-all; /* webkit */
        word-wrap: break-word;
	    white-space: pre;
	    white-space: -moz-pre-wrap; /* fennec */
        white-space: pre-wrap;
	    white-space: pre\9; /* IE7+ */
    }

    .headernote {
        font-size: 1.1em;
    }
}



/*
 * Responsive: 480 px and below
 *
 * Smallest *sensible* break point.
 * Don't display geekiness.
 * Don't display illustrations.
 * Make top heading even smaller.
 * Make more adjustments on the translation menu,
 * and shrink the translation menu button to match
 * the rest of the top navigator.
 */

@media screen and (max-width: 480px) {


    /** Get rid of illustrations unless explicitly declared safe */
    div.story img ,
    div.story .caption,
    div.story .captioned {
        display: none;
    }


    div.story .illus-centered {
        display: none;
    }

    div.story .illus-right {
        display: none;
    }

    div.story blockquote {
        margin-left: 1.5em;
    }


/*
    img.break {
        max-width: 50% !important;
    }
*/

    .case-geekiness {
        display: none;
    }


    #toprow td {
        height: 40px;
        background-position: 190px -48px;
    }

    #tcc-case-title-box {
        display: none;
    }

    #topmenu {
        margin-top: 0px;
    }



    .trans-menu-button span.tiny-trans {
        background-image: url(/images/translate-sm.png);
        display: block;
        width: 21px;
        height: 21px;
        padding-top: 3px;
    }

    .trans-menu-button:hover span.tiny-trans {
        background-image: url(/images/translate-sm-red.png);
    }

    .trans {
        top: 18px;   /* 21 px with 3px slop */
        color: black;
     }

    .trans a  .trans-lang {
        font-size: 120%;
    }


    #ceiling,
    #ceiling td {
        border-bottom: 5px solid #CCC;
    }

    .headernote {
        font-size: 0.9em;
        font-weight: normal;
        font-family: Times, "Times New Roman", serif;
        margin-left: 10px;
        padding-right: 1em;
    }

    .headernote a,
    .headernote a:active,
    .headernote a:link,
    .headernote a:visited,
    .headernote sup {
        font-weight: normal;
    }

}




/*
 * Responsive: 400 px and below
 *
 * Smallest breakpoint, for reals.
 */

@media screen and (max-width: 400px) {


}



/*
 * Print version:
 */

@media print {

	html {
		background-color: #fff;
		background-image: none;
        width: 100%;
		margin: 0;
		padding: 0;
	}

	body {
		padding: 0;
        margin: 0;
        width: 100%;
/*		font-size: 11pt; **/
	}

    #bodytable {
		padding: 0;
		margin: 0;
        width: 100% !important;
    }

    #content {
		padding: 0;
		margin: 0;
        width: 100%;
    }

    #contenttext {
		padding: 0;
		margin: 0;
        width: 100%;
    }

    #toprow ,
	#sidebar ,
	#sidebar div {
		display: none;
	}

	table, body, th, td {
/*		font-size: 11pt; **/
        border: 0;
	}

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        font-family: Garamond, Times New Roman, serif;
        font-style: italic;
    }

	#copyright ,
        #copyright * {
		color: #999;
	}

	ul#menu {
		display: none;
	}

	#logobox {
		display: none;
	}

	#titles {
		margin-left: 0em;
	}

    #topmenu {
        display: none;
    }

    h1.title {
        font-size: 2.5em;
    }

    h2.supertitle {
        font-size: 1.25em;
    }

    h2 {
        font-size: 1.25em;
    }

    div.case-geekiness {
        display: none;
    }

    div.notice { display: none; }

    div.story {
        width: 30em;
    }

/*
    div.story p.break {
        border-bottom: 1px dotted #999;
    }
*/
    #bodytable {
        -webkit-box-shadow: none;
        -khtml-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
    }
}


div.testflag {
    position: fixed;
    top: 0px;
    left: 0;
    background-color: #fcc;
    border: 1px solid #996;
    padding: 4ex 2em;
    font-family: Arial, sans-serif, sans;
/*  font-size: 8pt;*/
    color: black;
    width: 7em;
    text-align: center;
    opacity:0.75;
    filter:alpha(opacity=75);
}

div.testflag:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}

@media print {
    div.testflag { display: none; }
    .special-note-container { display: none; }
    #sectionmenu { display: none; }

}





/* end of file */