/*this is the christmas style sheet */

/*NOTE:  need to fix nav links  -- htm to html when pointing to cc*/

/*GLOBAL ################################### */

/*Reference note:  you can add thousands of symbols (math dingbats emojis lots more)to doc text using hex (&#x) dec(&#) or std&&.  symbols include a variety of arrows.  but if you try to style them
they can really screw up line spacing.  examples:   span.ar {color:red; font-size: 18px; font-weight:bold; }   <span class="ar"> &#x21D0;</span> 
w3schools has a complete list, https://www.w3schools.com/charsets/ref_html_symbols.asp follow the links on the page, examples:
	9665	25C1	 	WHITE LEFT-POINTING TRIANGLE
	9664	25C0	 	BLACK LEFT-POINTING TRIANGLE
	9654	25B6	 	BLACK RIGHT-POINTING TRIANGLE
	9655	25B7	 	WHITE RIGHT-POINTING TRIANGLE
	128521	1F609	 	WINKING FACE
	128540	1F61C	 	FACE WITH STUCK-OUT TONGUE AND WINKING EYE*  by and large creates too many problems to make them useful/

@font-face {
    font-family: 'storybook';
    src: url('../storybook-webfont.woff2') format('woff2'),
         url('../storybook-webfont.woff') format('woff'), url('../storybook.ttf');
    font-weight: normal;
    font-style: normal;}

/*style the site nav links in xmas colors*/
a:link { color: white; font-weight: bold; text-decoration:none; font-family: tahoma; border: medium none;}
a:visited {background-color: null; color: #CCCCCC; text-decoration:none;font-family: tahoma; }
/*a:hover img {opacity: 0.4; background-color: white;} difficult to control and looks lousy with the pix*/
a:hover {border: none; color: white; background-color:green;  text-decoration:none;font-family: tahoma; }
a:active {border: 2px solid  #008800; background-color:green; text-decoration:none;font-family: tahoma; box-shadow: 0px 0px 10px white;}
a:focus {}
a.pb:hover {border: none;  background-color:transparent;}
a.pb:active {border: none;  background-color:transparent;}
	

body {background-image: url('new%20abc%20graphics/sst_holly3b.jpg');
	text-align: center; color: black; font-family: "Comic Sans MS"; font-size: 12pt; margin: auto;}

div {margin: auto;}
div.main   { background-color: yellow; width: 500px; margin: auto; padding: 0px; box-shadow: 1px 1px 1px black; }  /*  doesn't show cause padding makes div.letter bigger*/
div.letter  {color:black; background-color: white; width: 400px; margin: auto; padding: 50px;}  /*  LETTER ###########################*/
div.report {padding: 50px; background-color: #880000; color: #FFFFCC; width: 475px; margin: auto;}  /*  REPORT  #################################*/

/*style h in xmas colors*/
h1 {text-align: center; font-size: 36pt; color: #FF0000; font-family: storybook;
	 text-shadow: -1px 0 white, 0 1px white, 1px 0 black, 0 -1px black,5px 5px 5px white; width: auto; border: none; }
h2 {text-align: center; font-size: 24pt; color: #FF0000; font-family: storybook;}
h3 {text-align: center; font-size: 16pt; color: #FF0000; font-family: storybook;}

img {border:0; display: block; margin :auto; width: auto; height:auto;} /*display:block is important to center images*/
img.pb {border:0px; display:inline}
img:hover {box-shadow: none;}
img.std {box-shadow: none;}  /*to style line properly due to other img commands*/

/*img:active {}
img:focus {}*/
	
p.biglink {font-size: 12pt; color: yellow;} /*only used to style vbars between site nav links*/
p.smalllink {font-size: 8pt; color: yellow;}
p.pixlink  {font-size: 12pt; color: yellow;}  /*looks the same as .biglink, don't know why it's here*/
p.psrlc {padding:20px; font-size:12px; font-family:Tahoma; font-weight:bold;}
p.pxl {text-align:left; padding:0px 20px;}  /*set paragraph alignment for the pix comments*/
p.pxr {text-align:right;padding:0px 20px;}
p.pxc {text-align:center;padding:0px 20px;}	
p.hed  {text-align:center;padding:10px;}


span.tri {
	background-color:#663300;color: white;font-weight:bold; font-size:24px; }/*sets the colors for the pix comment pointer triangles, nice idea-too many problems*/

table {background-color: white; border: 0px; width: 800px; text-align: center; font-size: 12pt; margin:auto; padding: 0px;}  /*could probably remove these 2*/
td {font-size: 12px;padding : 0px; color: white; font-weight: 600; border: 1px white solid ;
}

   table.trip {
	margin: auto;
	border: thin white solid ;
	width: auto; background: none;}  /*triptych widths are usually 126 223 126px */
	
td.trip {padding: 0px;}

table#contact {background-color: gray; border: 1px solid black; width: 500px; text-align: center; color: black; font-size: 16pt; font-weight: bold;} /*  CONTACT_US.HTML ######################*/
	
table.pix   {
	
	background-image: url('../graphics/stone1s.jpg');
	border-collapse: collapse;
	border:1px white solid;
	width: 960px;
	color: white;
	font-family: arial;
	font-weight:bold;
	font-size: 10pt;
	text-align:center;
	margin: 50px auto 50px auto;}  /*  sets the spacing between tables?  PICTURE PAGES ########################*/
th.pix {color:white; font-size:24px; font-family:storybook;}
td.psrlc {
	
	width: 320px;
	height: 240px;
	text-align:center;} /*why not td.pix? td.pixc  .pixr  .pixl  to align them left right etc again.  use arrow symbol to point at pix--would need to do this with p tag*/