@font-face { font-family: 'bauhaub'; src: url('images/bauhaub.woff')}  
* {margin: 0}

html { height: 100%;}

body{ height: 100%; background:#FFF; margin: 0; padding: 0; font-size: 12pt !important; font-family: tahoma, verdana, "times new roman", times, sans-serif; color: black;}

div#outer { border-style: none; border-width: 0px; min-height:100%; width: 100%; height: auto !important ; margin: 0 auto -3.6em}  
div#banner { background-color: #fff; text-align: center }
#logo { width: 100%; max-width: 1400px; border: none:}

nav { background-color: #38575E; box-sizing: border-box; border-top: 2px solid #000; border-bottom: 2px solid #000; height: 3.6em ; padding: 0.5em 2em; line-height: 2em; position: relative}

nav > h1, #menu-icon {display: none}

div#main { padding: 0; vertical-align: top; position: relative; border: 0px solid transparent; border-collapse: collapse}
#row:after { content: "  "; display: table; clear: both; }
#left_column {  float: left; width: 60%; padding: 0em 1em 1em 2em; box-sizing: border-box; border: 0px solid red; }
#right_column { float: left; width: 35%; margin-left: 5%; padding: 0em 2em 1em 1em; box-sizing: border-box; border: 0px solid red; }
#base { position: relative;  width: 100%; padding: 0em 2em 1em 2em; box-sizing: border-box; border: 0px solid green;}

footer, #push {height: 3.6em; clear: both; }  footer { background-color: #38575E; box-sizing: border-box; border-top: 2px solid #000; border-bottom: 2px solid transparent; padding: 0em 2em; line-height: 3.1em; display: -webkit-flex; display: flex; justfy-content: space-between }

table { border-style: none; border-width: 0px; border-collapse: collapse;}
td {padding: 0px}

ul#headermenu { list-style-type: none; margin:0; padding:0; display: -webkit-flex; display: flex; justify-content: space-between;}
ul#headermenu > li.item {float:left; margin-right: 0.5em;}
ul#headermenu > li.sep::before { content: url('images/diamond_16.png'); vertical-align: middle; }
	
ul#footermenu { list-style-type: none; margin:0; padding:0; }
ul#footermenu > li {float:left; margin-right: 1em}
ul#footermenu > li+li:before { content: url('images/diamond_16.png'); vertical-align: middle; margin-right: 1em}
ul#footermenu > li:last-child {margin-right: 3em}

a {outline: 0; font-weight: bold; color: #009}  a:link, a:visited, a:hover, a:active { text-decoration:none; border-bottom: solid 1px transparent; }
a:hover, a:active, a:hover, a:active { border-bottom: solid 1px }
a.imgnolinkstyle {border: none}

nav a:link, nav a:visited, nav a:hover, nav a:active { color: #CCDEE2; border-bottom: 1px solid transparent; font-variant: small-caps}
footer a:link, footer a:visited, footer a:hover, footer a:active { color: #CCDEE2; border-bottom: solid 1px transparent; font-variant: small-caps}
nav a:hover, nav a:active, footer a:hover, footer a:active { border-bottom: solid 1px}
nav a.imgnolinkstyle, footer a.imgnolinkstyle {border: none}

h1,h2,h3 { margin: 1em 0em 0.5em 0em; font-family: 'bauhaub', serif; color: #000; text-shadow: 1px 1px 4px #aaa; border: 0px solid red}
h2 { margin: 1em 0 0.5em 0}
h3 { margin: 1em 0 0 0}
h4 { margin-top: 0.5em collapse; margin-bottom: -0.8em}
h1 { border: solid #38575E; border-width: 2px 10px 2px 10px; text-align:center; padding: 2px}  
p { margin: 1em 0 0 0; border: 0px solid green; margin-collapse: collapse}

ul.bsohbullet { list-style-type: none; margin: 1em 0 0 0; padding:0;  border: 0px solid blue} 
ul.bsohbullet > li {margin-top: 1em; background: url('images/bsoh_bullet.png') no-repeat left top; padding-left: 40px; min-height: 32px} 
ul.bsohbullet > li:first-child { margin-top: 0}
ul.bsohbullet > li > ul {list-style-type: disc; }
ul.bsohbullet > li > ul > li {background: none; padding-left: 0.2em; margin-left: -0.5em}

div.boxout, div.box {margin-top: 2em; margin-bottom: 1em; padding: 1em; border: solid black; border-width: 1px 2px 2px 1px}
div.box {border-width: 1px; border-color: #ccc}
div.boxsmallimg { max-width: 450px }
.boxout img, .box img { max-width: 100%}

div.quote { display: -webkit-flex; display: flex; justify-content: space-between;}
span.qql { font-size: 400%; color: #38575E ; font-family: 'bauhaub'; margin-right: 0.1em; margin-top: -0.2em}
span.qqr { font-size: 400%; color: #38575E ; font-family: 'bauhaub'; margin-left: 0.1em; margin-top: -0.2em}
div.attrib { text-align: right; font-style:italic; }

div.question {margin-bottom: 0.5em; font-weight:bold}
div.answer {} 
span.q {font-weight: bold; color: #001882; font-size: 150%}
span.a {font-weight: bold; color: #466C21; font-size: 150%}

div.promonotice { font-weight: bold; color: #466C21; }
span.promonotice { color: #466C21; }

.buy { color: #001882 }   .sell{ color: #E92C35 }  .or  { color: #6D6E71 }  .hold {color: #466C21 }

.highlight {font-weight: bold; color: #CC0000 }  
hr{ color: #241BBD; height: 1px; border: none; }

small {font-size: 80%; }
.explanation {color: #888}

img.embedright { float:right; margin: 0 0 1em 1em}

ul.extrawidespaced li, ol.extrawidespaced li {margin-top: 2em; margin-bottom: 2em}  ul.widespaced li, ol.widespaced li {margin-top: 1em; margin-bottom: 1em}  ul.slightspaced li, ol.slightspaced li {margin-top: 0.3em; margin-bottom: 0.3em}  ul.nospaced li, ol.nospaced li {margin-top: 0em; margin-bottom: 0em}  
.alignl {text-align:left}
.alignr {text-align:right}
.floatl {float:left}
.floatr {float:right}

div.purchase2 {max-width: 100%; display: inline-block}
div.purchase {margin: 2em 0; width: 100%}
.purchase table { width: 100%;  border: 1px solid #888; }
.purchase table td { padding: 1em 0.5em; min-width: 50%; max-width:50%}

footer .socialbtn {margin-right: 1.5em}
footer .socialbtn:last-child {margin-right: 0.6em}
#footer_socialcontact { display :none }
#footer_left {flex-grow:1; -webkit-flex-grow:1; white-space:nowrap; }  #footer_right { flex-grow:0; text-align:right; }

#strapline { color: #fff; font-weight: bold; flex-grow:1; -webkit-flex-grow:1; text-align:center}

#pswp_parent { height: 700px; width: 100%;}
#pswp__caption__center {font-size: 110%; min-width: 50%; text-align:center;}

@media only screen and (max-device-width: 780px) {		nav, footer {width: 100%; padding-left: 1em; padding-right: 1em}

	#menu-icon { display:inline-block; float: right; position: relative; width: 40px; height: 40px; background: url(images/menu-icon.png) center; border: none; margin-top: -5px}
	nav > h1 {display:inline-block; float:left; margin: 0em 0em; color: #fff;}
	nav > ul#headermenu { display: none; position: absolute; padding: 0; background: #38575E; border: 4px solid #000; right: 2em; top: 1em; min-width: 11em; border-radius: 20px 0 20px 20px; z-index: 10000} 
	nav:hover >  ul#headermenu { display:block}
	#headermenu li.item { text-align: center; width: 100%; padding: 0.6em 0em; margin-right: 0px ;text-transform: uppercase}
	#headermenu li.item a:link {border: none}
	#headermenu li.sep+li.item {border-top: 2px solid #000}
	#headermenu li.sep::before { content: none; display: none} 
	
	h1#pagetitle_main, ul#footermenu, .mobilehide { display: none}

	footer .socialbtn {margin-right: 0.8em}
	#footer_socialcontact { display: inline; margin-right: 1em; }

		#main { text-align: justify}
	#main li {text-align: left}
	img {max-width: 100%}
	h1,h2,h3,h4 { border: none; padding: none} 
	
		#pswp_parent {height: 600px; width: 100%; margin-left: -1em; margin-collapse:collapse}
	#pswp__caption__center {font-size: inherit}
}

@media only screen and (max-device-width: 640px) {
		row:after { content: none;}
	#left_column, #right_column, #base  { float: none; width: inherit; padding: 0; margin: 1em;  box-sizing: border-box }
	
		#pswp_parent {height: 400px; width: 100%; margin-left: -1em; margin-top:-1em; margin-bottom: -1em; margin-collapse:collapse}
	
		div#strapline {display: none}
}