html * {
   margin: 0;
   padding: 0;
   color: #FFF1E6;
}
p { padding: 0 0 1em 0; }
section, aside { display: block; }


body { 
   /* font: 100%/1.6 Helvetica, Arial, sans-serif; */
   /* font-family: 100%/1.6 "Delius", "Helvetica Neue",Helvetica,Arial,sans-serif; */
   font: 100%/1.6 "Delius", "Helvetica Neue",Helvetica,Arial,sans-serif;
   background: #12171B;
   font-size: .875em;
}

a.first:link   { color:#FFFB00;  }
a.first:visited{ color:#FFFB00;  }
a.first:hover  { color:#3D9EFF; background:#00008B; text-decoration:underline overline; }

a.second:link    { color:#0011D0; text-decoration: none; }
a.second:visited { color:#0011D0; }
a.second:hover   { color:#8B0000; background:#00CDCD; text-decoration: underline; }

a.third:link    { color:#008B8B; background-color: #001D1D; text-decoration:underline;  }
a.third:visited { color:#008B8B; background-color: #001D1D;  }
a.third:hover   { color:#00D098; text-decoration:overline; }

.aTitle {
   BORDER-BOTTOM: #4DA23D 2px dotted;
}


.aDoubleTxtShadow {
   text-shadow: 1px 1px 1px blue, 3px 3px 5px #00AFAF;
   zoom: 1; //for IE
	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#fff);
}
.aTxtGlow {
   text-shadow: 2px 0px 20px rgba(167,211,255,0.9); /*  with the rgba() you can also set its opacity using the alpha value. */
}
.aTxtGlow2 {
   text-shadow: 0px 0px 10px #00006D; //with the rgba() you can also set its opacity using the alpha value. 
}
.txtShadow { text-shadow: 2px 2px 2px #99CCFF; 
   /*  <x-offset> <y-offset> <blur-radius> <color>;   */
}
h2 {
   color:#BEDEFF;  /* 2675C4 */
   text-shadow: 1px 1px 1px #F8FFBE, 1px 1px 9px cyan;  /* aDoubleTxtShadow */
}  
h3 {
   color:#2675C4;
   text-shadow: 1px 1px 1px #F8FFBE, 1px 1px 9px cyan;
} 

#aBlueBkgrnd {
   background: #9ac6f4; /* Old browsers --- Bkgd #00003D #12171B */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjOWFjNmY0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDMlIiBzdG9wLWNvbG9yPSIjNDE4MWMwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzNjY5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
   background: -moz-linear-gradient(-45deg,  #9ac6f4 1%, #4181c0 43%, #336699 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#9ac6f4), color-stop(43%,#4181c0), color-stop(100%,#336699)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(-45deg,  #9ac6f4 1%,#4181c0 43%,#336699 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(-45deg,  #9ac6f4 1%,#4181c0 43%,#336699 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(-45deg,  #9ac6f4 1%,#4181c0 43%,#336699 100%); /* IE10+ */
   background: linear-gradient(135deg,  #9ac6f4 1%,#4181c0 43%,#336699 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ac6f4', endColorstr='#336699',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

.glow {
   margin: auto;
   background-color: #1f5afe;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
-webkit-box-shadow: 0px 0px 15px 1px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 1px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 1px rgba(255, 255, 190, .75); 
}

.picture {
   max-width: 98%;
}
.outerFrame { background-color: #7A5F3D; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px; }
.innerFrame { border: 4px inset #DEB887; }

/* ============================================================== */
/* === LOGO ===================================================== */
/* ============================================================== */
#logo{
   margin: 5px;  border: 0px dashed green;
   float: left;
   width: 45px;
   height: 45px;              /* cubedimensional.gif */
   background: url(../images/cube1b3-sml.png) no-repeat left;
   display: block;
}

/* ============================================================== */
/* === NAVIGATION =============================================== */
/* === nav ============ */
.nav {
   margin: 5px 0;  border: 1px dashed white;
}
.nav ul {
   margin: 0;
   padding: 0;
}
.nav li {
   margin: 1px 5px 4px 0;
   padding: 0;
   list-style: none;
   display: inline-block;
   *display:inline; /* ie7 */
}
.nav a {
   padding: 3px 12px;
   text-decoration: none;
   color: #999;
   line-height: 100%;
}
.nav a:hover {
   color: #ADD8E6; text-decoration: underline overline;  background: #007FFF;
}

.nav .current a {
   background: #336699;
   color: #fff;
   border-radius: 5px; text-decoration: none;
}
.nav .current a:hover {
   
   color: #770000;
   border-radius: 5px; text-decoration: none;
}

/* === right nav ====== */
.nav.right ul {
   text-align: right;
}


/* -- A REGULAR LIST IN DIV ================================================================ --*/ 
.aRegList {
   padding: 0 0 1em 0; 
   padding: 1em; 
   border: 2px solid #7A5F3D; 
   border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;  
   background: rgba(0,0,0,.75);
}
#regularList ul {
   padding-left:15px;
   margin-left: 10px;
   list-style-position:outside;
}
#regularList li {
   
   padding-left:5px;
   margin-left: 5px;
   list-style-position:inside;
}



/* -- Top Status Bar ======================================================================= --*/
body:before { 
   /* content: "Less than 320 - small cellphone";    This line is the only thing that changes. */
   display: block;                                /* This line and below is - default - global */
   width: 100%;
   height: 0px;
   background: rgba(0,0,0,.7);
   color: #fff;
   line-height: 0px;
   padding: 0 2em;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   font-weight: bold;                             /* This line and above is - default - global */
}

#container {
   padding: 1em;
   background: rgba(190,93,61,.3);   /* - rgba(189,76,31,.3); - */
   color: #fff;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

header,
footer {
   margin: 0 0 1em 0;
   padding: 1em;                    /*  */
   background: rgba(0,0,0,.75);
   z-index: 100;
   border: 6px double #7A5F3D; 
   
   border-radius: 12px;
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;     
}

div[role="main"] section {
   margin: 0 0 1em 0;
   padding: 1em;
   background: rgba(0,0,0,.75);
   
   border: 6px double #7A5F3D; 
   border-radius: 20px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;     
}

div[role="main"] aside p {
   margin: 0 0 1em 0;
   padding: 1em;
   background: rgba(0,0,0,.75);
   
   border: 2px solid #7A5F3D; 
   border-radius: 12px;
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;     
}

/* ================================================================================================== */
/* Media Queries ---------------------------========================================================= */

/* iPhone, etc portrait --background: pink;----------------------- > 320 -- */
@media only screen and (min-width: 320px) {
   // could diff bkgrnd yellow/red/blue =================
   body { background: #12171B;  background-image: url(../images/backgrounds/noisy_net.png); }
   body:before { 
      /* //content: "Between 320 and 480 - iPhone, etc PORTRAIT"; */
   }
   
   #picture2 {
      /* //max-width: 96%;  max-height: 100%;  -- Syntax: background-size: length|percentage|cover|contain; */
      background-image: url(../images2/banner/3D-Apophysis-bkgrd880x100-1ac.jpg); background-size: auto 108px; background-repeat: no-repeat; background-position: 50% 50%;
   }

}

/* iPhone, etc landscape ------------------------ > 480 -- */
@media only screen and (min-width: 480px) {
   // could diff bkgrnd yellow/red/blue =================151A1F
   body { background: #12171B;  background-image: url(../images/backgrounds/noisy_net.png);  }
   body:before { 
      /* //content: "Between 480 and 768 - iPhone, etc landscape"; */
   }
   #picture2 {
      /* //max-width: 96%;  max-height: 100%;  -- Syntax: background-size: length|percentage|cover|contain; */
      background-image: url(../images2/banner/3D-Apophysis-bkgrd880x100-1ac.jpg); background-size: auto 108px; background-repeat: no-repeat; background-position: 50% 50%;
   }

}



/* iPad, tablets etc portrait --background: blue;----------------- > 768 -- */
@media only screen and (min-width: 768px) {
   // could diff bkgrnd yellow/red/blue =================
   body { 
       background: #12171B;  background-image: url(../images/backgrounds/noisy_net.png); 
      font-size: 1em;
   }
   
   body:before { 
      /* //content: "Between 768 and 900 - iPad, tablets etc PORTRAIT"; */
   }

   #container { padding: 2em; }
   
   #picture2 {
      /* //max-width: 96%;  max-height: 100%;  -- Syntax: background-size: length|percentage|cover|contain; */
      background-image: url(../images2/banner/3D-Apophysis-bkgrd880x100-1ac.jpg); background-size:contain; background-repeat: no-repeat; background-position: 50% 50%;
   }
   
   header,
   footer,
   div[role="main"] section { padding: 2em; }
   
   div[role="main"] {
      overflow: auto;
      background: none;
   }
   
   div[role="main"] section {
      float: left;
      width: 65%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 2em;
   }

   div[role="main"] aside {
      float: left;
      width: 35%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0 0 0 2em;
   }
   
 
}

/* Laptops, Desktops, etc ---------------------- > 1024 -- */
@media only screen and (min-width: 1024px) {
   // could diff bkgrnd yellow/red/blue =================
   body { background: #12171B;  background-image: url(../images/backgrounds/noisy_net.png);  }
   body:before { 
      /* //content: "Between 1024 and 1200 - Laptops, Desktops, etc";  */
   }

   #container {
      
      max-width: 1024px;
      margin: 0 auto;
   
   }
   #picture2 {
      /* //max-width: 96%;  max-height: 100%;  -- Syntax: background-size: length|percentage|cover|contain; */
      background-image: url(../images2/banner/3D-Apophysis-bkgrd880x100-1ac.jpg); background-size:contain; background-repeat: no-repeat; background-position: 50% 50%;
   }

}

/* Laptops, Desktops ---------------- Greater than 1200 -- */
@media only screen and (min-width: 1200px) {
   // could diff bkgrnd yellow/red/blue =================
   body { background: #12171B;  background-image: url(../images/backgrounds/noisy_net.png); }
   body:before { 
      /* //content: "Greater than 1200 - Laptops, Desktops, etc";  */
   }
   #picture2 {
      /* //max-width: 96%;  max-height: 100%;  -- Syntax: background-size: length|percentage|cover|contain; */
      background-image: url(../images2/banner/3D-Apophysis-bkgrd880x100-1ac.jpg); background-size:contain; background-repeat: no-repeat; background-position: 50% 50%;
   }

}


/* ================================================================ */
/* = nav BUTTONS ==== ===================== */
@media screen and (max-width: 655px) {   
      .nav {
         position: relative;
         min-height: 40px;
      }  
      .nav ul {
         width: 180px;
         padding: 5px 0;
         position: absolute;
         top: 0;
         left: 0;
         border: solid 1px #aaa;
         background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
         border-radius: 5px;
         box-shadow: 0 1px 2px rgba(0,0,0,.3);
      }
      .nav li {
         display: none; /* hide all <li> items */
         margin: 0;
      }
      .nav .current {
         display: block; /* show only current <li> item */
      }
      .nav a {
         display: block;
         padding: 5px 5px 5px 32px;
         text-align: left;
      }
      .nav .current a {
         background: none;
         color: #666;
      }

      /* = on nav hover === */
      .nav ul:hover {
         background-image: none;
      }
      .nav ul:hover li {
         display: block;
         margin: 0 0 5px;
         
      }
      .nav ul:hover .current {
         background: url(images/icon-check.png) no-repeat 10px 7px;
      }

      /* = right nav ====== */
      .nav.right ul {
         left: auto;
         right: 0;
      }

      /* = center nav ===== */
      .nav.center ul {
         left: 50%;
         margin-left: -90px;
      }
}
/* = nav BUTTONS ==== ===================== */



/* ========= class="figure" ========= */
code { color:#FF69B4; font-family: Courier New, Courier, Monospace; }


/* ================================================================ */
/* ===========================
   ====== Contact Form ======= 
   =========================== */

input, textarea {
   padding: 10px;
   border: 1px solid #E7F20F;
   width: 60%;
   color: #999999;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
   -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;      
}

textarea {
   width: 90%;
   height: 150px;
   max-width: 99%;
   line-height: 18px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
   border-color: 1px solid #C9C9C9;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;   
}

.form label {
   margin-left: 10px;
   color: #999999;
}

/* ===========================
   ====== Submit Button ====== 
   =========================== */

.submit input {
   width: 100px; 
   height: 40px;
   background-color: #3C59B0; 
   color: #14FFAD;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;      
}

.button {
   border-top: 1px solid #ffff00;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 10.5px 21px;
   -webkit-border-radius: 21px;
   -moz-border-radius: 21px;
   border-radius: 21px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
}
.button:hover {
   border-top: 1px solid #ffff00;
   background: #14debc;
   text-shadow: 0px 0px 7px #B0FF00;
   color: #003D3D;
   cursor: pointer;
}
.button:active {
   border-top: 1px solid #ffff00;
   background: #1b435e;
}