/* tg screen style */
@import 'webfonts.css';
@import 'mathfonts.css';
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html {height:100%; margin:0; padding:0; min-width:360px; background:#eee linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)) fixed;}
body {
	max-width:calc(1800px - 8vw); min-height:calc(100% - 100px); margin:0 auto; padding:0 4vw 100px;
	background:#fff; color:#333; font:400 1em/1.7 merriweather,serif;
}

/*** sans-serif font */
#header, .author, .abstract, .toc, #papers-down, .m-note, .i-note, .goto, figure, aside, table.data, caption, table.mat, #repop, h2, h3, h4, h5 {font-family:opensans,sans-serif;}

h1 {margin:2em 0 0.25em; font-size:2.5em; font-weight:600; color:#444; line-height:normal;}
h2, h3, h4, h5 {color:#600; line-height:normal; font-weight:400;}
h2 {margin:1.25em -4vw 0.5em; padding:4px 4vw; border:solid #ddd; border-width:1px 0; background:#f5f5f5; font-size:1.7em; clear:both;}
h3, h4, h5 {margin:1em 0 0.25em;}  
h3 {font-size:1.5em;}
h4 {font-size:1.3em;}
h5 {font-size:1.1em;}
body>p b:first-child, body>ul li b:first-child {color:#600; font-weight:600; font-family:opensans,sans-serif;}

h2+h3, h3+h4, h4+h5, h3+p, h4+p, h5+p, h3+ul, h4+ul, h5+ul {margin-top:0;}

h2:target, h3:target, h4:target, table:target caption {background:#ffc;}
p:target  {background-image: linear-gradient(to bottom, rgba(255,255,204,1), rgba(255,255,204,0) 50%);}
figure:target {background-image: linear-gradient(to top, rgba(255,255,204,1), rgba(255,255,204,0) 33%);}

thead {display:table-header-group;}

/*** auto numbering */
body {counter-reset: h2;}
h2:not(.no-num) {counter-reset: h3; counter-increment: h2;}
h3:not(.no-num) {counter-reset: h4; counter-increment: h3;}
h4:not(.no-num) {counter-reset: h5; counter-increment: h4;}
h5:not(.no-num) {                   counter-increment: h5;}
h2:not(.no-num)::before {content: counter(h2) ". ";}
h3:not(.no-num)::before {content: counter(h2) "." counter(h3) " ";}
h4:not(.no-num)::before {content: counter(h2) "." counter(h3) "." counter(h4) " ";}
h5:not(.no-num)::before {content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";}

p {margin:0.75em 0;}
b {font-weight:700;}
em {font-style:italic;}
img {border-style:none;}

sup, sub {vertical-align:baseline; position:relative;}
sup {top:-0.4em;} sub {top:0.4em;}

blockquote {margin:1em calc(20px + 2vw);}
ul, ol {margin-left:0; padding-left:calc(20px + 2vw);}
li {margin-bottom:0.25em;}
ol.alpha > li {list-style-type:lower-alpha;}
ol.upper-alpha > li {list-style-type:upper-alpha;}
ol.roman > li {list-style-type:lower-roman;}
.plain li {list-style-type:none;}
abbr {cursor:help;}

a {text-decoration:underline; transition: color 1s;}
a:link {color:#00e;} a:visited {color:#309;} a:active, a:hover, a:focus {color:red;}
a.tgRef {font-style:italic;}

aside {margin:1em 0; padding:2vw; background:#fff; background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.05)); border:solid 1px #999; border-radius:2px; font-size:0.9em;}
aside *:first-child {margin-top:0;}
aside *:last-child {margin-bottom:0;}
.m-note, .i-note {min-height:40px; margin:2em 0; padding:14px 10px 14px 80px; border:solid 1px #ddd; font-size:0.85em;}
.m-note {background:#f5f5f5 url(img/book_pen.png) no-repeat 10px 50%;}
.i-note {position:relative; background:#f5f5f5 url(img/tg_in.png) no-repeat 20px 50%;}
.i-login {display:block; position:absolute; width:75px; left:0; top:0; bottom:0;} /* a element */

img[src$="arrow.svg"] {width:auto; height:1.1em; vertical-align:middle;}
.ss3 {font-size:3em !important;}
.clr {clear:both;}
.fad {color:#666;}
.lft {text-align:left;}
.ctr {text-align:center;}
.rt {text-align:right;}
.nbsp {white-space:nowrap;}
.xwrap {max-width:100%; overflow-x:auto;}

#header {
	margin:0 -4vw; padding:0;
	border:solid #ddd; border-width:0 0 1px;
	background:#f5f5f5;
	}

#header p {margin:0; padding:10px 4vw; line-height:1.25;}
#header #location {color:white; background:#600 url(img/tg_book2.gif) no-repeat 10% 40%; font-weight:600; font-size:0.95em;}
#header #rev {font-weight:400; font-size:0.85em;}
#location a {text-decoration:none;}
#location a:link, #location a:visited {color:white;}
#location a:active, #location a:hover {color:red; text-decoration:underline;}

p.author {margin-bottom:3em; font-size:0.95em;}
.abstract, .toc, #papers-down, .goto {font-size:0.85em;}
.abstract {line-height:1.4;}
.abstract {margin:0 0 20px 4vw;}
.toc {margin:1em 0 1em 4vw; padding:0; line-height:2;}
*[class~=toc] a:hover {color:#600; background:#ff9;}
ul.toc li {list-style-type:none; margin-bottom:0;}


/*** in-depth papers */
#papers-down {margin:0 0 40px 25px;}
p.goto {margin:0 0 10px 20px;}
#papers-down, p.goto {
	width:275px; max-width:100%; padding:10px; float:right; clear:right;
	border:solid 1px #ddd; border-radius:2px; background:#f5f5f5;
	}
#papers-down:before, p.goto:before {
	content:"In-depth papers"; display:block; margin:-10px -10px 10px -10px; padding:8px 10px;
	background:#ddd; color:#600; font-weight:600;
	}
#papers-down ul {margin:0 0 0 20px; padding:0;}
#papers-down ul li {margin:0; padding:0.25em 0; list-style-type:circle;}
#papers-down a, p.goto a {text-decoration:none; font-weight:400;}
#papers-down:hover a, p.goto:hover a {text-decoration:underline;}


/*** figures */
figure {margin:30px 0; text-align:center; line-height:normal;}
figure img, figure object {max-width:100%; height:auto;}
figure img {display:inline-block; margin:0 10px 10px 0; vertical-align:top;}
figure img.photo {border:solid 1px black;}
figcaption {margin:0.5em auto; max-width:calc(480px + 25vw);}
figcaption .fNote {margin:0.5em auto; font-size:0.85em;}

figure table {margin:0 auto;}
table.img-holder {margin:10px auto; border-collapse:collapse; border:none;}
table.img-holder td {padding:5px 10px; border:solid 1px #666;}
table.img-holder td.txt {background:#f5f5f5; text-align:left; vertical-align:middle;}
table.img-holder td.fill {padding:0;}
table.img-holder img, table.img-holder video {display:block; margin:0 auto;}
a[href*=".hires."] {display:inline-block; position:relative;}
a[href*=".hires."]:after {content:url(img/11large.png); position:absolute; right:20px; bottom:10px;}

/*** movies */
.movie {background-image:url(img/video.png); background-repeat:no-repeat; background-position:50% 50%;}
.movie video, .movie object {display:block; max-width:100%; margin:0 auto; height:auto;}
a.btn_15 {display:inline-block; width:200px; margin:0.5em ; padding:6px 12px; background:#ccc; color:#006; text-align:center; text-decoration:none; line-height:2em; font-size:1.2em;}
a.btn_15:hover {color:#006; background:#c6c6c6; transition:background,1s;}

/*** data tables */
table.data {display:table; margin:1em auto; border-collapse:collapse; border:solid 1px #000; line-height:1.25;}
table.data caption {margin:1em auto; text-align:center;}
table.data caption b {color:#600; font-weight:600;}
table.data td, table.data th {padding:6px; border:solid 1px #999; font-size:0.9em;}
table.data td.pad0 {padding:0;}
table.data td.ind {padding-left:2em;}
table.data th {font-weight:bold;}
table.data th, table.data tr.unit td {background:#ddd; box-shadow:inset 0 0 33px #ccc;}
table.data tr.unit td {text-align:center;}

table.data .hi {background:#f5f5f5; font-weight:600;}
table.data .shd {background:#f5f5f5;}
table.data .lo {font-style:italic;}
*.tdTop td, *.tdTop th {vertical-align:top;} /* top align */
*.tdLeft td, *.tdLeft th {text-align:left ! important;} /* left align */
tr.uline td {border-bottom-width:2px;} /* underline */
tr.oline td {border-top-width:2px;} /* overline */
table.data .red {color:#900}
table.data .blue {color:#009}

table.data .tNote {padding:2px 1em; background:#f5f5f5; text-align:left ! important; font-size:0.85em; line-height:1.33;}
table.data ul {margin:0 0 0 0.5em; padding:0 0 0 0.5em;}

/* centering */
.s1 td:first-child, .s2 td:first-child, .s2 td:first-child+td,
.c1 td, .c2 td+td, .c3 td:not(:nth-child(-n+2)), .c4 td:not(:nth-child(-n+3)),
.e1 td:last-child, .e2 td:nth-last-child(-n+2), .e3 td:nth-last-child(-n+3), .e4 td:nth-last-child(-n+4), .e5 td:nth-last-child(-n+5), .e6 td:nth-last-child(-n+6), .e7 td:nth-last-child(-n+7) {text-align:center;}
.t1 td:last-child, .t2 td:nth-last-child(-n+2) {text-align:left;}

/* width */
.w100 {width:100%;} .w90 {width:90%;} .w80 {width:80%;} .w70 {width:70%;} .w60 {width:60%;} .w50 {width:50%;}

/*** right-floating tables */
table.mat {
	float:right; width:240px; margin:0 0 10px 10px;
	border-collapse:collapse; border:solid 1px #000;
	font-size:0.8em; line-height:1.3em;
}
table.mat th, table.mat td {padding:4px; vertical-align:top; text-align:left;}
table.mat th {background:#ccc; font-weight:bold;}
table.mat td {background:#f5f5f5;}


/*** equations */
math {display:block; text-align:left;}
p.eq1, .eqf {font-family:Cambria,XITS,serif;}
p.eq1 {
	display:grid; grid-template-columns:auto auto; column-gap:2vw; grid-auto-rows:auto; align-items:center; 
	margin:1em 4vw; font-size:1.12em; font-style:italic; overflow-x:auto; /* mobile scroll */
}
p.eq1 span.p {grid-column:1; margin:5px 0;} /* MS Egde + FF Mac */
p.eq1 span.n {grid-column:2; text-align:right; margin-left:20px; font-weight:normal;}
p.eq1 span.info {margin-left:4em; font-size:0.9em; font-weight:normal;}
p.eqn {margin-left:4vw; text-indent:-4vw; font-size:0.9em;} /* note after */


/*** calculators */
div.cFrame {border:solid 1px #aaa;}
div.cFrame p {margin:10px 15px; line-height:normal; font-family:opensans,sans-serif;}
div.cFrame p.cLink {margin:0; padding:4px; vertical-align:middle; background:#ccc; text-align:right;}
div.cFrame p.cLink img {vertical-align:middle;}


/*** notes */
textarea#tgnotes {
	width:100%; min-height:75vh; resize:vertical; border:none;
	font:normal 1em/1.4 consolas,"courier new",monospace;
}
footer input[type=submit] {
	padding:6px 2em; background-color:#ffd; border:solid 1px #ccc; 
	font:600 1em opensans,sans-serif; color:#444; cursor:pointer;
}
footer {position:fixed; left:0;	bottom:0; right:0;}
#foot {
	display:grid; align-items:center; grid-template-columns:1fr 3fr; column-gap:2vw; grid-auto-rows:auto;
	margin:0 auto; max-width:1440px; height:40px; 
        background-color:#eee; padding:20px 4vw; border-top:solid 2px #ccc;
}
p#save_msg {margin:0; padding:0; font:400 0.9em opensans,sans-serif;}


/*** references */
div.references {overflow-x:auto;}
div.references p {margin:0.4em 0; padding-left:33px; text-indent:-33px; font-size:0.9em; line-height:1.33;}
cite {color:#666; font-size:0.9em; font-style:normal; vertical-align:top;}
caption cite {vertical-align:text-top;}
cite a {text-decoration:none; vertical-align:top;}
cite a:link, cite a:visited {color:#666;}
cite a:active, cite a:hover {color:#f00; text-decoration:underline;}


#repop {
   position:fixed; top:45px; left:15px; width:300px; border:solid 1px #999; border-radius:2px;
   padding:10px 15px; background:#fff; box-shadow:2px 2px 9px #999; font-size:0.8em; line-height:1.6; overflow:hidden;
}
#repop h1 {margin:-10px -15px 0; padding:7px 15px; background:#ddd; border-radius:2px 2px 0 0; font-size:14px;}
#repop h1 a {color:#600; text-decoration:none;}
#repop h1 span {float:right;}
#repop h1:hover, #repop h1:hover a {color:#00a; cursor:pointer;}
/* eof */