/* ================================
    CSS STYLES FOR DEFAULTS
   ================================

=============== snips ============= */

/* generic" styles */
body {
  margin: 0;
  padding: 0;
  border: 0;/* This removes the border around the viewport in old versions of IE */
  background: #FFFFFF;
  font-family:  Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.4;
}

#page-container {
  width: 100%;
}

/* ------ drop down menus ------*/

.dropbtn {
  background-color:#27A2D7;
  color: white;
    padding: 0.6em 0.6em 0.6em  0.2em ;

  font-size: 125%;
  border: none;
    font-weight: bold;

}

.dropdown {
  position: relative;
  display: inline-block;
  font-weight: bold;
     border: 2px solid #FFAA3E;

}

.dropdown-content {
  font-weight: bold;
  color:#1D4575;
  display: none;
    position: absolute;
  background-color: #FEEAC7;
  white-space: nowrap;
  padding: 0 0.5em 0 0.5em;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  font-size: 125%;
  color:#1D4575;
  text-decoration: none;
    padding: 0.2em 1em 0.2em 0.2em ;
  display: block;

}

.dropdown-content a:hover {
	background-color: #FFAA3E;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn 
{
	background-color: #FEEAC7;
	color:#1D4575;
}

/* ------ BTS web look/feel  ------*/

.mobileLinkText {
     	font-size: 125%;
    	font-weight: bold;
}
.mobileLinkTextNormal {
     	font-size: 125%;
}


div.ToPageTop   {
	  font-weight: bold;
	 font-size: 100%;
	 background-color: #FEEAC7;
	 display: inline-block;
 	 position: relative;
 	left: 33%;
 	padding: 0.2em 0.4em 0.2em 0.2em ;
 	margin:  0.5em 0 0 0;
}

div.ToPageTop a:hover {
	background-color: #FFAA3E;
}

.ToPageTopOnFooter a:hover {
	background-color: #FFAA3E;
}


div.ToPageTopOnFooter   {
	padding: 0.2em 0.2em 0.2em 0.2em ;
	margin: 0.5em 0 0 0.2em ;
        font-weight: bold;
 	 font-size: 100%;
	 background-color: #FEEAC7;
	 float: left;

}

div.ProductPgBlock   {
	 max-width: 40em;
}


.prodInfoPageLink   {
	font-weight: bold;
	color: #1D4575;
	 background-color: #FEEAC7;
  display: inline-block;
	overflow:hidden;

	border: 1px solid #000000;
	padding: 0.4em 0.6em 0.4em 0.4em  ;
}
.prodInfoPageLink a:hover {
	background-color: #FFAA3E;
}



.linkSpaceMobile {
     	  line-height: 175%;

}


/* Defaults*/
a {
	text-decoration: none;
}

a img {
	border: 0;
	max-width:100%;
}

p {
	margin: 1em 0 0 0;
}


blockquote{
background-color:#E1F0F9 ;
padding: 0.5em   ;
margin: 0.5em 0.5em 0 0.5em   ;
border: 1px solid #000000;
}

.blink {
   text-decoration:blink;
     font-weight: bold;
     color: red;
}



.padded-1em {
	padding: 1em;
	}



a:link {
  text-decoration: none;
color: blue;
}


a:visited {
  text-decoration: none;
color: DarkSlateBlue;


}

a:hover {
  color: #40A2D6;
  text-decoration: none;
  
}

a:active {
  text-decoration: none;
  color: #F00;
}

div.blackTheme a:link {
  text-decoration: none;
color: aqua;
}


div.blackTheme a:visited {
  text-decoration: none;
color: LightPink;
}

div.blackTheme a:hover {
  color: DeepSkyBlue;
  text-decoration: none;
}

/* ------ Product page: nav links row at top  ------*/

.prodInfoHeadText {
  	color: #285FA3;
  	font-size: 150%;
	font-weight: bold;
	font-style: italic;
 	vertical-align: top;
 	padding: 0.1em 0.4em 0.1em 0.2em;
	display: inline-block;
 }
 
 .prodInfoHeadText:hover   {
 	color:#285FA3;
 	background-color: #FFAA3E; 
 
 }


.prodInfoHead   {
color: #1D4575;

}

div.prodInfoHeadDiv {
  float: left;
padding: 0.2em 0.2em 0.2em 0.2em;
margin-right: 0.3em ;

border: 1px solid #000000;
background-image: url(ContainerBar_bgnd.png);
  background-repeat: repeat ;
}





.sectionTitle {
  font-weight: bold;
}


h1, h2, h3, h4, h5, dt, h6 {
  clear: both;
color: #1D4575;
}

h1 {
  	font-weight: bold;
	color: #1D4575    ;
	background: #FFF; 
	border-bottom: 3px solid #FFAA3E;
	font-size: 150%;
}

div.blackTheme h1 {
	color: #fff    ;
	background: #000; 
 }

h2 {
 	font-weight: bold;
	color: #1D4575    ;
	background: #FFF; 
	border-bottom: 1px solid #1D4575;
	  font-size: 125%;
  	font-weight: bold;

}

div.blackTheme h2 {
	color: #fff    ;
	background: #000; 
 }

h3 {
  font-weight: bold;
    padding: 0.5em 0 0.2em;

}

h4 {
  font-weight: bold;
}

h5, dt {
  font-weight: bold;
  margin-bottom: 0.1em;
}

h6 {
  font-weight: bold;
  margin: 0 0 1em 0;
  border-bottom: 1px solid #B4B4DE;
}

span.HeadSection {
color:  #1D4575;
 font-size: 115%;
  font-weight: bold;
}

input {
	font-size: 100%;
}

pre {
 	font-family: "courier new", courier, monospace;
   	 white-space: pre-wrap;       /* Since CSS 2.1 */
}

ul.noBullet {
  list-style-type: none;
}


.col1 h1 {
	font-size: 150%;
	color: #1D4575    ;
	background: #FFF; 
	border-bottom: 3px solid #FFAA3E;
	  padding: 0.4em 0 0 0;
}


.col1 h2 {
	color: #1D4575    ;
	background: #FFF; 
	border-bottom: 1px solid #1D4575;
}

/* colmask = Set attrs for content panes Lft, Mid, Rht */

.Shoutout {
	font-size: 125%;
	color: #1D4575    ;
	font-weight: bold;
    	font-style: italic;
}

div.col1  {
   line-height: 1.5em;
   padding: 0 1em 0 1em;
}
div.floatLeft {
  float: left;
}


/* --------- BTS logo pane -------- */

#header-pane {
  background: #A2E5E5;
    width: 100%;
  padding: 0.2em 0 0 0 ;

 }


#header-pane {
    background-image: url(BlueBurstHearder.png);
    background-size: contain;
    background-repeat: repeat-x ;
    background-color: #CBE8F5;
 }
 
div.WebsiteHomeNavRow   {
	width:100%;
	background-image: url(BlueBurstHearder.png);
	background-size: contain;
	background-repeat: repeat-x ;
	background-color: #CBE8F5;
}


.header-logo {
  display: inline;
  padding: 0 1em 0 3em ;
 }

.header-title {
  display: inline;

 }
 

#google_translate_element {
  color: #1D4575    ;
      font-weight: bold;
 }


#footer {
  width: 100%;
  clear: both;
  background: #ffffff;
         	background: #C0DEF0;
  background-size:100% 100%;
  display: table;
}

#footer-left {
	float: left;
	display: inline;
	padding: 1em;
}


#footer-right  {
	float: right;
	display: inline;
	padding: 1em 0.5em 0 0;
}

#footer-middle  {
		float: left;
 	 display: inline;
  	padding: 1em;

  	position: relative;
 	left: 33%;
}
.column33Pct {
	float: left;
 	width: 33%;

}
.column66Pct {
	float: left;
	 width: 66%;

}

.colFltLeftWithPad {
	float: left;
 	padding: 0 1em 0 0;
        display: inline-block;
}


.search {
  display: inline;
  	position: relative;
 }

.GTranslation {
	float: right;
  	display: inline;
 	 padding: 0em 1em 1em 1em ;
	color: #fff;
	font-size: 100%;

 }



.section-title   {
	font-weight: bold;
	color: #1D4575;
	font-size: 90%;
	padding: 1em 1em 1em 1em;   
	border: 1px solid #000000;
        text-align: center;
	margin: 0 0 0.5em 0;  
        background-image: url(ContainerBar_bgnd.png);
	background-repeat: repeat ;
}



img {
	margin: 0 0.5em 0em 0.5em;
	border: 0;
	max-width:100%;

}

img.illus-left {
	float: left;
        padding: 0.5em 0.5em 0.5em 0;	
	border: 0;
}


img.illus-right {
	float: right;
	padding: 0.5em 0 0.5em 0.5em;	
	border: 0;
	
}


img.illus-middle {
	display: block;
	margin: 1em auto 0;
	
}

img.WhiteBorder {

	align:inline;
	border: 1px solid #fff;
}
img.BlackBorder {

	align:inline;
	border: 1px solid #000;
}


/* --------- Two Up 2 column Two Up formatting twoUpCol twoUpRow */
.column {
  float: left;
  width: 47%;
  margin: 0.5em 0 0 0.5em ;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* --------- float 2 divs side by side */
.float-left50Pct {
	float: left;
		display: inline;

	padding-left: 1em;
	width:45%
}


.float-right50Pct {
	float: right;
	display: inline;
	padding-right: 1em;
	width:45%
}

.floatLeft {  /* --------- works for imgs ------- */
	float: left;
}

/* --------- float 3 divs equally spaced */
.float-left {
	float: left;
	display: inline;
	padding-left: 1em;
}


.float-right {
	float: right;
	display: inline;
	padding-right: 1em;
}


.float-middle {
	float: left;
  	display: inline;
  	position: relative;
	left: 33%;

}

.padRight2em {
	padding-right: 2em;
}


p.float-right {
	float: right;
	display: inline;
	padding-right: 1em;
}

.marginTop {
	margin-top: 0.1em;
	display: inline-block;

}
 
.clearing-div {
  clear: both;
}
.AppName
{
        font-style: italic;
}
.ProperNoun
{
        font-style: normal;
}

.control
{
        font-style: italic;
        color: DarkSlateGray     ;
}
div.blackTheme .control
{
        font-style: italic;
      color: CornflowerBlue  ;
}

.figure_caption
{
      font-weight: bold;
      color: DarkSlateGray     ;
      padding: 0.75em   0.75em 0.75em 0.75em;      
}
div.blackTheme .figure_caption
{
      font-weight: bold;
      color: CornflowerBlue  ;
      padding: 0.75em   0.75em 0.75em 0.75em;      
}

.figure_caption_dark_bgnd
{
      font-weight: bold;
      color: Silver      ;
      padding: 0.75em   0.75em 0.75em 0.75em;
}

.width25Pct 
{
        width: 25%;
}

.width50Pct 
{
        width: 50%;
}
.width75Pct 
{
        width: 75%;
}

div.figure-left {
  float: left;
  width: auto;
  padding: 0.75em   0.75em 0.75em 0;
  margin: 0.75em   1.75em 0.75em 0;
  text-align: center;
}

div.figure-right {
  float: right;
  width: auto;
  margin: 0.75em  0 0.75em 0.75em;
  padding: 0.75em   0 0.75em 1.75em;
  text-align: center;
}

div.25percent{
  display: inline;
    width: 24%;
}

div.50percent{
  display: inline;
    width: 49%;
}

div.75percent{
  display: inline;
    width: 74%;
}



.li-title {
  font-weight: bold;
}


table {
	margin: 1em 0 0 0;
	font-size: 1em;
}

table.forLayout {
	margin: 0 0 0 0;
	font-size: 1em;
}

th,td {
	padding: 0.5em;
}
table thead th {
	background: #E1F0F9;
}
 .td-sect-text {
   color: #000;
   background: #E1F0F9;
  font-weight: bold;
   padding: 0.5em 2em;
  }

.xlarge {
  font-size: 185%;
}

.larger {
  font-size: larger;
}

.large {
  font-size: 140%;
}

.normal {
  font-size: 100%;
}

.medsmall {
  font-size: 75%;
}

.small {
  font-size: 50%;
}

.smaller {
  font-size: smaller;
}

.xsmall {
  font-size: 30%;
}

.strikethru
{
 text-decoration: line-through;
 }

.monospace
{
    font-family:  Lucida Console,  monospace;
}



.WebRing
{
      font-size: 75%;
}

.highlightedQuote
{
    COLOR: darkblue;
    BACKGROUND: #FEEAC7;
    BORDER: black 1px solid;
    padding: 1em;
    text-align: center;

}


#Google-search
{
    BACKGROUND: #FFF;

}


.black-bgnd {
   	BACKGROUND: #000;
	COLOR:  #FFF;
}

.white-text {
	COLOR: #FFF;
}
.attention
{
    COLOR: red;

    font-weight: bold;

}
.accent
{
	 color: teal   ;
     font-weight: bold;

 }

 .siteTextColor {
   	color: #1D4575;
  }

.red-text {
 	COLOR: #F00;
 }
  
.white {
	COLOR: #FFF;
}
  
.red {
  	COLOR: #F00;
  }

.blueviolet {
 	COLOR: #8A2BE2;
 }
 .magenta {
 	COLOR: #FF00FF;
 }
.ltpurple {
  	COLOR: #7771DE;
  }

.slateblue {
   	COLOR: #6A5ACD;
   }


.hauntedWeb {
   	BACKGROUND: #000;
	COLOR:  #87CEEB;
	padding: 1em;
}
.blackTheme {
   	BACKGROUND: #000;
	COLOR:  #87CEEB;
	padding: 1em;
}



.hauntedWebAd {
   	BACKGROUND: #000;
	COLOR:  #598AD9;
	padding: 1em;
	display: block;
	width: 41%;
	float: right;
	margin: 1em 0 1em 1em ;
}


img.illus-margLft200 {
	display: inline;
	margin: 1em 1em 1em 1em;
	
}


a.black-bgnd:link {
  text-decoration: none;
  color: Silver ;
}


a.black-bgnd:visited {
  text-decoration: none;
  color: LightSlateGray   ;
}



a.black-bgnd:hover {
  text-decoration: none;
  color: #fff;
}

/* ------ ClickForMore img  styles (more info or larger img)*/

ClickForMore {
    position: relative;
    width: 50%;
}

ClickForMore:hover img {
  opacity: 0.5;
}
ClickForMore:hover .CFMTextBox {
  opacity: 1;
}

.CFMText {
  background-color: #FFAA3E;
  color: black;
  font-size: 125%;
  padding: 1em 2em;
}

.CFMTextBox {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -50%)
}