/* This css file is used by all files in ice and sky folders except deadend(index.html). It is also used by seaindex.html */

body { background-color: teal; color: black; font-family: Verdana, sans-serif; } 

.adcode, .adright { margin: 1em 0; text-align: center; background-color: white; }

header, footer { display: block; background-color: #fff7df; text-align: center; 
padding: 1em 2% 1em 2%; }
header { border-bottom: thick solid teal; }
footer { border-top: thick solid teal; }

.lefty { float: left; margin: 1em; height: 2em; width: auto; }
.righty { float: right; margin: 1em; height: 2em; width: auto; }
.arrow { font-size: 1.5em; }

span.minus { color: red; vertical-align: 0.5em; font-style: italic; 
font-size: 1em; font-weight: bold;}
span.m40 { color: blue; font-size: 2em; font-weight: bold; }
span.info { color: #006600; font-size: 1em; font-weight: bold; }

header a:link, header a:visited { text-decoration: none; padding: 1em; }
header a:hover, header a:active { border: thin solid red;  }

footer a:link, footer a:visited { padding: 1em; }
footer a:hover, footer a:active { border: thin solid red; }

.breadcrumb a { padding: 0.5em; }
.breadcrumb a:hover, .breadcrumb a:active { background-color: #f3fff3; border: thin solid red; }

.main { display: block; padding: 1em 5% 2em 5%; background-color: white; }
.main li { margin-bottom: 1em; } 

h1, .byme { text-align: center; } 
h1 { color: #804000; margin-bottom: 0em; }
.byme { color: navy; margin-top: 0em; margin-bottom: 2em; }
hr { border: medium solid #ff9000; margin: 2em 0;}
h3 { margin-top: 2em; } /* exponents.html, romanintro.html */

.forcolumns { display: block; }
.forcolumns p { text-indent: 2em; } 

/* latin.html, sky index.html, countingintro.html*/
dt { display: inline-block; padding: 0.7em 0; background-color: #ffffdf; font-size: 120%; }
dt a:hover, dt a:active { border: thin solid red; padding: 0.7em 0; }
dd { margin-bottom: 1em; }

/* dracula.html, linuxfonts.html, temperature.html, alphabetintro.html, exponents.html, powersanswer.html */
table { border-collapse: collapse;  margin: 2em 2em 2em 0; }           
th, td { border: medium solid blue; padding: 1em; text-align: center; }
th { background-color: #ffffcc; }
td { background-color: white; }
caption { padding: 0.5em; font-size: 120%; font-weight: bold; color: purple; background-color: white; }
.tablefit { overflow-x: auto; } /* dracula.html */

em { color: red; } /* photozoom.html, weatherday.html, frozentruck.html */

strong { font-weight: normal; font-size: 150%; } /* latin.html, screensize.html, exponents.html, powersanswer.html */

/* squares.html, cubes.html */
span.shorter { font-size: 70%; color: maroon; }

/*alphabetintro.html, squares.html, cubes.html */
.tall { font-size: 2em; text-align: center; }

/* exponents.html, powers.html, poweranswer.html */
.grow { font-size: 1.5em; }  

.rn2an { color: #993300; margin: 1em 0 1em 0; }   /* romanintro.html */
.listnavy { color: navy; margin: 1em 0 1em 0; }   /* romanintro.html */

.kelvin { color: #006600; }
.celsius { color: navy; }  /* alphabetcountdec.html */
.fahrenheit { color: maroon; }
.thinline { border: thin solid #ff9000; margin: 0.5em 0; }

.basenum { font-family: Courier, monospace; font-size: 1.5em; text-align: left; margin-left: 5%; }

.upper { vertical-align: super; font-size: 0.6em; } /* for exponents */
.lower { vertical-align: sub; font-size: 0.6em; } /* for subscripts */

/* alphabetintro.html, squares.html, cube.html */
.note { color: black; background: #e7ffe7; padding: 1em; }  


.longword { word-wrap: break-word; }  /* privacy.html */
.centre { text-align: center; }

.bannerpic { text-align: center; margin: 0 4px; }
.bannerpic img { width: 100%; height: auto; }
.bannerpic figcaption { background-color: #f3fff3; padding: 1em; border: medium solid #804000; }

@media screen and ( min-width: 790px )	{
    header, footer {  padding: 1em 3em 1em 3em; border: thick solid #804000; }
	span.m40 { font-size: 3em; }
	.main, nav { border-left: thick solid #006600; border-right: thick solid #006600; }
	.lefty { margin-right: 2em; height: 4em; width: auto;}
	.righty { margin-left: 2em; height: 4em; width: auto;}
	header a:link, header a:visited { padding: 2em 1em 1em 1em;}
	footer a:link, footer a:visited { padding: 1em; }
	.thinline { display: none; }
}
	
@media screen and ( min-width: 1000px )	{
	body { padding: 0.5em; }
	.adright { float: right; margin-left: 2em; width: 350px; } 
	.forcolumns { -moz-column-width: 26em; -webkit-column-width: 26em; column-width: 26em;
	-moz-column-gap: 5em; -webkit-column-gap: 5em; column-gap: 5em;
	-moz-column-rule: medium dotted #a06000; -webkit-column-rule: medium dashed #a06000;
	column-rule: medium dashed #a06000; }
	.first { margin-top: 0em; } 
}	

@media print {
	body { background-color: white; font-size: 10pt; }
	header, footer { border: medium double #006600; }
	table { page-break-inside: avoid; }
	.thinline { display: none; }
}