/*NavCol stationary in portrait*/

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

/* Sets baseline text size for large phones. */
@media (orientation:portrait) and (max-width: 512px) {  html {font-size: 9.8px;}
}

/* Sets baseline text size for small phones. */
@media (orientation:portrait) and (max-width: 350px) {  html {font-size: 8.75px;}
}

/* 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.  */
.ClrBkgd {background-color:#ae9b5b;}
#main a:link, #main a:visited, #main a:hover, .clr2, .heading, #rule { color:#A28F4A; }
#bigtriangle {border-color: #ae9b5b transparent}

a {text-decoration:none;}

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

#bigtriangle {position:fixed; top:0; left:0; width: 7.5%; height: 0; border-style: solid; border-width: 0 180px 1366px 0px;}
						/* STYLES FOR COMPUTER SCREENS FIRST. */

#NavCol { width: 18%; height: 97%; height: 97vh; 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: 100%; height: 12px; margin:1.25em 0 .7em 0; font: 2.16em/12px serif; overflow:hidden; text-align: justify}

#bcopy { 
	font: 1.12em/1.5em Futura, 'Segoe UI Semibold', 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 B {
    font-family: 'Segoe UI', AvenirNext, 'Avenir Next', Avenir-Black, Arial, FreeSans, roboto, sans-serif;
}

#bcopy h1 {
    font: bold .9375em/97% 'Arial Black', '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;}


.phoneonly, .phonebtn, .mobile, #BlkHeader, #product_m { 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) {
      
#NavCol {top:8em; height: 94%; height: 94vh; }
    
.mobile, #product_m, #inset { display:inline }

.navItem { display:inline-block; position:relative; -webkit-transform: rotate(270deg); transform: rotate(270deg); height: 14%; padding-top:39px; margin-left:15px; text-align:center; }

.phonebtn { display:inline-block; position:fixed; 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}

.comptr {display: none;}
    
#BlkHeader { display:block; position:fixed; width:100%; height:7.5em; top:0; background-color:#222;  color:#A28F4A; padding-right: 5.3%; overflow: hidden}

#hdrTriangle {position:absolute; top:0; left:0; width: 7.3%; height: 0; border-style: solid; border-width: 0 .995em 7.55em 0px; border-color: transparent transparent #ffffe8 transparent;}

#LH-bkgd {width: 7.7%}
    
#main {width: 70%; top: 9.5em; 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;}

}




                                /* 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: 76%; padding-right: 7%}
.phonebtn { width:100px; left:-31px; font: bold 16px/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; }
.asterisk { visibility: hidden }
.NAN {display:none}
}


#drawingR {
    width: 50%;
    height: 80%;
    margin: 0;
    position: fixed;
    left:12%;
    top:3%;
    background-image: url("GtrstDwg716.png");
    /* source file: GtrstDwg7.psd */
    background-repeat: no-repeat;
    background-size:auto 100%;
}
#product {
    position: fixed;
    float: left;
    top: 49%;
    width: 35%;
    margin-left: 15.5%;
    padding-right: 1%;
}
#productphoto {
    background-image: url(2SV3.3gs16.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 0;
	padding-top: 52%;
}
.ie8 #productphoto {
    background: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='2SV3.3gs2.png', sizingMethod='scale')";
}

.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 }

#phNavCol (height:100vh)