@charset "utf-8";

/*
   Style Template Sheet for www.PsychicChamber.com 
   Bio template page for readers 
  
   Filename: biostyles.css
*/


/* HTML and Body styles */

html {
   background-image: url(../images/plaindarkbackground.jpg);
   background-repeat: round;
   font-family: Helvetica, sans-serif;
}


#logoimg  {
   display: inline;
}

/* Header styles */


/* Navigation list styles */

body > header > nav > ul > li {
   list-style-type: none;
   font-family: Papyrus, serif;
   font-size: 1.7em; 
   display: inline;
   line-height: 1.2em;
   padding: 10px 10px;
}

body > header > nav > ul > li > a {
   color: #0d19ad; /* Blue */
   background-color: #ecaa20; /* Yellow-gold */
   width: 100%;
   text-decoration: none;
   font-weight: bold;             
}


/* Transition Styles on Navigation */

nav#topLinks a  {
   color: #0d19ad;
   font-size: 1em;
   letter-spacing: 0em;
}
              

nav#topLinks a:hover  {
   color: #7a17de;
   font-size: 1.1em;
   letter-spacing: 0.1em; 
   transition: color .3s ease-in 0.1s,
               font-size 2s ease,
               letter-spacing 2s ease-out,
               text-shadow 1s cubic-bezier(0.6,0,0.8,0.5);
}
 
/* Audio and Video Player Styles */

audio, video  {
   box-shadow: #de9b17 8px 8px 15px;
   display: block;
   margin: 10px auto;
   width: 50%; 
} 



/* Track Styles in Video Player */





/* Figure Styles */



/* Article Styles */



/* Table Styles */





/* Footer Styles */

footer  {
   color: #ecaa20; /* Yellow-gold */
   font-family: Helvetica, serif;
   font-size: .9em; 
   text-align: center;
   margin-top: 30px;
   position: relative;
   width: 100%; 
}

 



/* ===============================
   Mobile Styles: 
   ===============================
*/

@media only screen and (max-width: 320px)  {

   ul  {
      display: none;
   }



/* =============================================
   Tablet and Desktop Styles: 
   =============================================
*/

/* =========================
   Mobile Styles: 0 to 320px 
   =========================
*/
@media only screen and (max-width: 320px)  {

   ul  {
      display: none;
   }
  
   #navicon:hover+ul, nav#topLinks ul:hover  {
   display: block;
   }
}

/* ============================================
   Tablet and Desktop Styles: 321px and greater 
   ============================================
*/
@media only screen and (min-width: 321px)  {
 
   #wrapper  {
      width: 80%;
      max-width: 419px;
      margin: auto;
   }

   .logo_container img {
      width: 20%;
      margin: auto;
   }
 
   #navicon  {
      display: none; 
   }
}