/*NavCol stationary in portrait*/

html, body {height:100%; margin:0;}
body {font-size: 100%; background-color:#ffffe8;}
      
@media (orientation:landscape) and (max-width: 800px) {	        /* Sets baseline text size for small tablets in landscape. */
 html { font-size: 12px; }
 .DTonly { display:none }
}
@media (orientation:portrait) and (max-width: 512px) { /* Sets baseline text size for large phones. */
 html {font-size: 9.8px;}
}
@media (orientation:portrait) and (max-width: 350px) { /* Sets baseline text size for phones. */
 html {font-size: 8px;}
}

/* Sets baseline text size for large screens (MacBkPro, iPadPro). */
@media only screen and (min-width: 1400px),(min-height: 1025px){ 
html {font-size: 125%;}
}


/* Sets the main second color. Only images w 'gld' in name have color built in. Colors are for gamma 2.2 machines. Old macs will display kraft paper color.  */
.ClrBkgd {background-color:#ae9b5b;}
#main a:link, #main a:visited, #main a:hover, .clr2, .heading, #rule { color:#A28F4A; }

a {text-decoration:none;}

#paperfade {position:fixed; width: 18%; max-width:150px; height: 120%; right:0; background: linear-gradient(to right, #ffffe8, #ebe7c2)}

#MNavBar {position:fixed; top:0; left:0; width: 10.2%; height: 130%; height: 130vh; background-color: hsl(45,35%,50%);}

#MNavCol {position:fixed; top:7.4em; left:0; width: 10.2%; height: 86%; height: 86vh;}

						/* STYLES FOR COMPUTER SCREENS FIRST. */

#NavCol { width: 18%; height: 100%; position: fixed; padding-left:0; margin:0; color:#ffffe6; font: bold .94em/.87em 'Segoe UI', AvenirNext-Bold, Avenir-Black, 'roboto black', roboto-black, arial, sans-serif;  }	/* Tested on Mac. Needs testing on Android for roboto. */
#NavCol a {color:#ffe}

#Mlogo {position:relative; top:0px; left:0; width:78%; margin-left:15%; margin-bottom:3.4em}

.navItem { width:85%; margin-left:15%; height:12.2%; }

#NavBar {width: 18%; height: 115%; position: fixed; padding-left:0; background-color:#000; margin:0;}

#main {
    width: 41.8%;
    height: auto;
    position: absolute;
    right: 0;
    padding-top: 0;
    padding-left: 3.4%;
    padding-right: 5.3%;
    padding-bottom: 4%;
    z-index: 0;
}

#rule {width: 98%; height: 17px; margin:1.25em 0 .5em 0; font: 34px/17px times new roman, serif; overflow:hidden; text-align: justify}

.bcopy { 
	font: 1.12em/1.5em 'Segoe UI Semibold', Futura, Avenir-Heavy, georgia, 'Century Schoolbook L', serif;
	letter-spacing:.01em;
}        /* With 1.12em Segoe looks retro, and Futura wraps OK in portrait LO. Firefox now gets semibold without a workaround. If Futura, Segoe Semi or Avenir not avail, better to go serif (to get look of retro print document). */
.bcopy i { font-family: 'franklin gothic', Futura, Avenir-Heavy, georgia, 'Century Schoolbook L', serif; }
/* subs Franklin ital for Segoe ital on all Windows, because Chrome on Win7 makes Segoe ital bold. */

.bcopy B {
    font-family: 'Segoe UI', AvenirNext, 'Avenir Next', Avenir-Black, Arial, FreeSans, roboto, sans-serif;
}

.bcopy h1 {
    font: bold .9375em/97% 'Arial Black', 'Avenir Next', 'Nimbus Sans Black', sans-serif;
}

up {vertical-align:.7px;}        /* baseline shift for letterpress effect */


#LH-bkgd {width: 49.5%; height: 115%; position: fixed; padding-left:0; margin:0;}

.ftnote {color:hsl(45,35%,43%)}

.phoneonly, .phonebtn, .mobile, #BlkHeader, #product_m, .print { display:none; }   

                                /* STYLES FOR PORTRAIT ORIENTATION */
      
#product_m { float:left; width:19em; margin:8px 10px 2px -16.7%; }
      
#prodpic_m { background-image: url(2SV3.3gsNoPk.png); background-size: contain; background-repeat: no-repeat; height: 0; padding-top: 58%; }
      
@media all and (orientation:portrait) {
    
.comptr, .DTonly {display: none;}
    
.mobile, #product_m, #inset { display:inline }
    
#BlkHeader { display:block; position:fixed; width:100%; height:7.3em; top:0; background-color:#222;  color:#A28F4A; padding-right: 5.3%; overflow:hidden}

#hdrTriangle {position:absolute; top:0; left:0; width: 9.8%; height:101%; background-color: #ffffe8;}

#LH-bkgd {width: 7.7%}
    
#NavCol { display:none; }
    
.navItem { width:85%; margin-left:12%; height:9.5%; }

.phonebtn { display:inline-block; position:absolute; width:0; height:26px; left:50%; -webkit-transform: rotate(270deg); transform: rotate(270deg); font: bold 18px/80% 'Droid Sans', 'Avenir Black', 'Segoe UI Semibold', Arial, sans-serif; text-align: center; color:#ffffe8; padding-top:12px}
    
#main {width: 70%; top: 9em; padding-right: 12%; padding-bottom: 8%;}
    
#spectrum { position: static; float:left; right: 53%; width: 230px; margin:1em 1em 0 -19%; padding: 10px; background-color:#000; }
    
.blklink { color:#000 !important; border-bottom: 2px dotted #776; }

.up { vertical-align:1px;}

.ftnote {color:inherit}

}


#comments {padding-left:8px}
.comment {font: bold 100% 'courier new', courier; letter-spacing: -.02em; text-align:left;}

                                /* STYLES FOR PHONES (in portrait) */
@media (orientation:portrait) and (max-width: 512px) {
#NavCol { display:none; }
#product_m { width:14em; margin:7px 8px 0px -16.7%; }
p { font: 1.5em/130% Georgia, serif; text-align: justify; }
#main {width: 78%; padding-right: 7%}
.phonebtn { font: bold 14px/80% 'Droid Sans', 'Avenir Black', 'Segoe UI Semibold', Arial, sans-serif;}
.phoneonly {display:inline}
.bcopy h1 {font-size: 1.3em; color:#333}
.bcopy i { font-family: inherit; }
.bcopy img { width: 98%; }
.asterisk { visibility: hidden }
.comment {font-size: 150%}
}

@media (max-width: 320px) and (max-height: 480px) {
.NAN {display:none}
}


#LHpgBox {
    position: fixed;
    float: left;
    top: 26%;
    width: 25%;
	height: 24%;
    margin-left: 15%;
}
#LHpgBoxContent {
    background-size: contain;
	background-repeat: no-repeat;
	height: 66%;
	padding-top: 52%;
}

.caption {font: bold 0.813em/107.7% 'Segoe UI', sans-serif; text-align: right; margin: 0px 13.3% 8px 50px;}

.asterisk { font: 270%/10px arial black; vertical-align:-175%; cursor:hand; cursor:pointer; }
.footnote { display:none }


@media print {

body {background-color:#fff;}

#paperfade, #LH-bkgd, #MNavBar, .comptr, .mobile, #NavBar, #NavCol, #comments, #LHpgBox, #hdrTriangle, #Ad { display:none; }

.print { display:block }

#main { right:initial; margin-left:3.3%; width:96.5%; padding:0; column-count: 2;-moz-column-count: 2; column-gap:30px; column-fill: auto; top:3.2%; height:96.5%; }

.bcopy { font: 14px/1.3em 'Segoe UI', Avenir, georgia, 'Century Schoolbook L', serif; }
    
#BlkHeader { z-index: -1; display:block; position:absolute; height: 6%; width:26%; top:0; margin-left: -1.6%; background-color:none; padding-left: 3S%;}

}