/*****************************************************************************/
/* website.css                                                               */
/*                                                                           */
/* Useful websites:                                                          */
/* HTML Color Values:  http://www.w3schools.com/html/html_colorvalues.asp    */
/* CSS Reference:  http://www.w3schools.com/cssref/default.asp               */
/* CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp          */
/* CSS Tricks:  http://css-tricks.com/                                       */
/*                                                                           */
/* Date     Description                                          Name        */
/* -------- --------------------------------------------------   ----------- */
/* 20140825 Initial coding.                                      Rodney      */
/* 20160414 Updated to use new formats.                          Rodney      */
/*****************************************************************************/

/*****************************************************************************/
/*                             Customized Elements                           */
/*****************************************************************************/

body
{
  /***************************************************************************/
  /* font-size:  Sets the size of a font.                                    */
  /* CSS Syntax:                                                             */
  /*   font-size:medium|xx-small|x-small|small|large|x-large|xx-large|       */
  /*             smaller|larger|length|initial|inherit;                      */
  /* Property Values:                                                        */
  /*   medium:   [default] Sets the font-size to a medium size.              */
  /*   xx-small: Sets the font-size to an xx-small size.                     */
  /*   x-small:  Sets the font-size to an extra small size.                  */
  /*   small:    Sets the font-size to a small size.                         */
  /*   large:    Sets the font-size to a large size.                         */
  /*   x-large:  Sets the font-size to an extra large size.                  */
  /*   xx-large: Sets the font-size to an xx-large size.                     */
  /*   smaller:  Sets the font-size to a smaller size than the parent        */
  /*             element.                                                    */
  /*   larger:   Sets the font-size to a larger size than the parent         */
  /*             element.                                                    */
  /*   length:   Sets the font-size to a fixed size in px, cm, etc.          */
  /*   %:        Sets the font-size to a percent of  the parent element's    */
  /*             font size.                                                  */
  /*   initial:  Sets this property to its default value.                    */
  /*   inherit:  Inherits this property from its parent element.             */
  /* See http://www.w3schools.com/cssref/pr_font_font-size.asp for more      */
  /* information.                                                            */
  /***************************************************************************/
  font-size: 16px
}
/*****************************************************************************/
/* Commented out by Reo on 6/28/2025.  By commenting this out, the <a href>  */
/* will be displayed as a link with an underline.                            */
/*****************************************************************************/
/*footer a                                                                   */
/*{                                                                          */
/*  text-decoration: none;                                                   */
/*}                                                                          */
h1 
{
  font-size: 80px;
  color: #555555;
}
h2 
{
  font-size: 40px;
  color: #555555;
}
.top {
    height: 68px;
    padding-top: 20px;
    line-height: 50px;
    overflow: hidden;
    font-size: 17px;
    font-weight:bold;
}
.w3-topnav {
    padding: 0 10px;
}
.w3-topnav a {
    float: left;
    letter-spacing: 4px;
    font-size: 17px;
    line-height: 71px;
}
.w3-topnav a:hover {
    background-color: white;
    color: #8AC007;
}
.topnavlinks {
    width: auto;
    float: right;
}
a.topnav-localicons {
    font-size: 20px !important;
}
a.topnav-icons {
    font-size: 20px;
}
#menubtn {
    float: left;
    font-size: 16px;
}
.w3-sidenav {
    position: absolute;
    display: none;
}
.w3-sidenav a {
    padding: 0 20px;
    color: #555555;
}
.w3-sidenav h2 {
    font-size: 20px;
    padding-left: 20px;
    color: #000000;
}
.w3-dropnav {
    display: none;
    padding-bottom: 40px;
}
.w3-dropnav h3 {
    padding-top: 20px;
}
.w3-dropnav .w3-col {
    height: 260px;
}
.w3-closebtn {
    padding: 10px 20px !important;
    position: absolute;
    right: 0;
}
#nav_menu-xs {
    background-color: #f1f1f1;
    padding: 30px;
    text-align: center;
}
#nav_menu-xs a {
    color: #000000;
    margin: 10px;
    display: block;
    font-size: 16px;
    letter-spacing: 4px;
    color: inherit;
    text-decoration: none;
}
#sectionxs_thetech,
#sectionxs_references,
#sectionxs_examples {
  background-color: #ffffff;
}
#sectionxs_thetech .w3-closebtn,
#sectionxs_references .w3-closebtn,
#sectionxs_examples .w3-closebtn 
{
  display: none;
}
#sectionxs_thetech a,
#sectionxs_references a,
#sectionxs_examples a 
{
  letter-spacing: normal;
}
#nav_translate,
#nav_search 
{
  display: none;
}
#nav_translate a 
{
  display: inline;
}
#googleSearch {
    color: #000000;
}
.searchdiv 
{
    max-width: 400px;
    margin: auto;
    text-align: left;
    font-size: 16px;
}
div.cse .gsc-control-cse,
div.gsc-control-cse {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
}
td.gsc-search-button input.gsc-search-button {
    background-color: #555555;
}
input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button {
    box-sizing: content-box;
    line-height: normal;
}
.gsc-tabsArea div {
    overflow: visible;
}
.gsst_a .gscb_a {
    margin-top: 3px;
}
.section {
    padding: 50px;
}
.section p {
    color: #555555;
    font-size: 30px;
    margin: 0 0 10px !important;
}
.w3-code {
    padding: 12px 16px;
    border-left: 4px solid #8AC007 !important;
}
.sectionbtn {
    background-color: #555555;
    margin: 10px 5px 5px 5px;
}
.section.onethird p {
    font-size: 20px;
}
.section.onethird .w3-card-2 {
    padding: 15px 10px;
    height: 260px;
}
.about 
{
    text-align: center;
    margin: 20px auto auto auto;
    font-size: 14px;
    letter-spacing: 4px;
    word-spacing: 10px;
    color: #555555;
}
#popupframe 
{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #000000;
    opacity: 0.5;
    z-index: 999;
}
#popupDIV {
    position: fixed;
    height: 40%;
    width: 40%;
    min-width: 310px;
    min-height: 250px;
    top: 30%;
    left: 30%;
    background-color: #ffffff;
    z-index: 9999;
}
/****************************************************************************/
/* @font-face                                                               */
/* Example:                                                                 */
/* @font-face                                                               */
/* {                                                                        */
/*   font-family: myFirstFont;                                              */
/*   src: url(sansation_light.woff);                                        */
/* }                                                                        */
/* With the @font-face rule, web designers no longer have to use one of     */
/* the "web-safe" fonts.  In the new @font-face rule you must first define  */
/* a name for the font (e.g. myFirstFont), and then point to the font file. */
/* Note: Use lowercase letters for the font URL.  Uppercase letters can     */
/* give unexpected results in IE!                                           */
/* To use the font for an HTML element, refer to the name of the font       */
/* (myFirstFont) through the font-family property:                          */
/* div                                                                      */
/* {                                                                        */
/*   font-family: myFirstFont;                                              */
/* }                                                                        */
/****************************************************************************/
@font-face 
{
  font-family: 'fontawesome';
  src: url('../fonts/fontawesome.eot?14663396');
  src: url('../fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'), url('../fonts/fontawesome.woff?14663396') format('woff'), url('../fonts/fontawesome.ttf?14663396') format('truetype'), url('../fonts/fontawesome.svg?14663396#fontawesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa 
{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.fa-2x 
{
  font-size: 2em;
}
.fa-home:before 
{
  content: '\e800';
}
.fa-globe:before
{
  content: '\e801';
}
.fa-search:before 
{
  content: '\e802';
}
.fa-thumbs-o-up:before 
{
  content: '\e803';
}
.fa-left-open:before 
{
  content: '\e804';
}
.fa-right-open:before 
{
  content: '\e805';
}
.fa-facebook-square:before 
{
  content: '\e806';
}
.fa-google-plus-square:before 
{
  content: '\e807';
}
.fa-twitter-square:before 
{
  content: '\e808';
}
.fa-caret-down:before 
{
  content: '\e809';
}
.fa-caret-up:before 
{
  content: '\e80a';
}
/*****************************************************************************/
/* The @media Rule                                                           */
/* The @media rule allows different style rules for different media in the   */
/* same style sheet.                                                         */
/*                                                                           */
/* The style in the example below tells the browser to display a 14 pixels   */
/* Verdana font on the screen. But if the page is printed, it will be in a   */
/* 10 pixels Times font. Notice that the font-weight is set to bold, both on */
/* screen and on paper:                                                      */
/* @media screen                                                             */
/*   {                                                                       */
/*   p.test {font-family:verdana,sans-serif;font-size:14px;}                 */
/*   }                                                                       */
/* @media print                                                              */
/*   {                                                                       */
/*   p.test {font-family:times,serif;font-size:10px;}                        */
/*   }                                                                       */
/* @media screen,print                                                       */
/*   {                                                                       */
/*   p.test {font-weight:bold;}                                              */
/*   }                                                                       */
/* Possible media Types                                                      */
/*   all: Used for all media type devices                                    */
/*   aural: Used for speech and sound synthesizers                           */
/*   Braille: Used for Braille tactile feedback devices                      */
/*   embossed: Used for paged Braille printers                               */
/*   hand-held: Used for small or hand-held devices                          */
/*   print: Used for printers                                                */
/*   projection: Used for projected presentations, like slides               */
/*   screen: Used for computer screens                                       */
/*   tty: Used for media using a fixed-pitch character grid, like            */
/*        teletypes and terminals                                            */
/*   tv: Used for television-type devices                                    */
/*****************************************************************************/
@media only screen and (min-width: 1190px) 
{
  #main 
  {
    margin-left: 230px;
  }
  #sidemenu 
  {
    width: 230px;
    display: block;
  }
}
@media only screen and (min-width: 992px) 
{
    .about 
    {
        text-align: right;
        margin: auto;
    }
    .css-hide-when-large 
    {
        display: none;
    }
}
@media only screen and (max-width: 991px) 
{
    .topsection 
    {
        text-align: center;
    }
    .topsection img,
    .topsection div {
        float: none;
        margin: auto;
    }
    .top {
        height: 100px;
    }
    .top img {
        display: block;
        margin: auto;
    }
    .toptext {
        width: 100%;
        text-align: center;
    }
    .css-hide-when-small {
        display: none;
    }
}
@media screen and (max-width: 768px) 
{
  h1 
  {
    font-size: 50px;
  }
    .section p {
        font-size: 18px;
    }
    .sectionexample {
        display: none !important;
    }
    .section {
        padding: 0 0 30px 0;
    }
    .onethird {
        padding: 30px;
    }
    #navbtn_thetech,
    #navbtn_reference
    {
      display: none !important;
    }
    #menubtn 
    {
        background-repeat: repeat-x !important;
        /*To test for devices less than 768px*/
    }
    .w3-sidenav {
        display: none !important;
    }
    #main {
        margin-left: 0% !important;
    }
}
@media screen and (min-width: 769px) 
{
  #nav_menu-xs 
  {
    display: none !important;
  }
}
@media screen and (max-width: 600px) 
{
  .top 
  {
    font-size: 10px;
    letter-spacing: 2px;
  }
  .w3-dropnav .w3-col 
  {
    height: auto;
  }
}

.w3-theme 
{
  color: #fff !important;
  background-color: #2196F3 !important;
}
/*****************************************************************************/
/* The following style is needed for the image previewer.                    */
/*****************************************************************************/
#preview
{
  background: #333;
  border: 1px solid #ccc;
  color: #fff;
  display: none;
  padding: 5px;
  position: absolute;
}