@media screen and (max-width: 640px) /*------------- For screens size 640 and smaller (iPhones, mostly) ----------- */
/* This will also detect mobile devices. */
{
    body 
    {
       background-image: none; 
       background-color: #f5f5f5;
       zoom: .5;
       clear: both;
       font-size: 1.2em;
       line-height: 1.2em;
       min-width: 350px;
       padding: 0;
    }
    
    img {
        max-width: 50px;
        }
    
   #banner 
   {     
       padding: 0px;
       display: none;
   }
   
   #banner img {display: none;}
  
   
   .myButton 
   {
       font-size: 1.4em;
       margin-bottom: 5px;
       margin-top: 15px;
   }
   
  
   
   blockquote
   {
       min-width: 200px;
   }
   
   #wrap 
   {
      position: relative;
       margin: 0;
       padding: 0;
       overflow: hidden;
       width: 100%;
    }
   
   .bodybg
       {
	        
	        
	        padding: 20px;        
            height: auto;	
            overflow: visible; 
            margin-left: auto;
	        margin-right: auto; 
	        font-size: 1.2em;
            line-height: 1.2em;
            min-width: 550px;
       }

 			#nav
			{
			    padding: 0;
				position: relative;
				top: auto;
				left: auto;
				font-size: .6em;
				z-index: 99;
				float: left;
				overflow: visible;
				height: 40px;					
				box-shadow: none;			
            }

					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: relative;
				left: 0;
				right: 0;
				width: 150px;
				z-index: 99999;
				font-size: 1.2em;
				min-width: 75px;
		    }
            

				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
					width: 150px;
				}
					#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding: 0 0.833em; /* 20 (24) */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #000000;
						}


				/* second level */

				#nav li ul
				{
					position: relative;
					padding: 1.25em; /* 20 */
					padding-top: 0;
					z-index: 9999;
					list-style: none;
					top: auto;
					margin: 0;
			    }
				
				    #nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}




    .socialLinks {width: 120px; margin-bottom: 20px; margin-left: 0px; float: left;}
    /* Setting min font size on media screen width of 640px or less. 
    Primarily for mobile devices. 
    This stops the font from getting unreadably small. */
    .columns {width: 100%;}
    .column {font-size: .8em; padding-left: 10%; }	
    .columntwo {font-size: 1.2em; }
    .columnthree {font-size: 1.2em; }
    .column h2 {font-size: 1.2em;}
    .columntwo h2 {font-size: 1.2em;}
    .columnthree h2 {font-size: 1.2em;}
    .p1 { font-size: 1.2em; padding: 0; margin: 0; width: 100%;}
     h1 {font-size: 1.2em;}
     h2 {font-size: 1.2em;}
    #subtitle{line-height: normal;}
    #footer {margin-right: 5%; margin-left: 5%; color: Black;}
    #footer a {color: Black;}
    .bodybg img {max-width: 300px; height: auto; padding: 0; margin: 0}
    #logolinks img { max-height: 40px; width: auto;}
   .imgWrapLeft img {width: 250px;}
   .imgWrapRight img {width: 250px;}
    

  }
/* --------------------------------------- End settings for 640 px ------------------ */




@media screen and (max-width: 640px) and (orientation: landscape) /* For screen flip on phones/mobile devices */
{
    body 
    {
        zoom: 1;
        overflow-x:visible;
    }
       
    #banner {display: none;}    
    .bodybg
       {
	        width: 80%;
	        min-width: 300px;
	        font-size: .8em;       
      }

   #footer {margin-right: auto; margin-left: auto; min-height: 100px;}
   nav ul li {font-size: 1em;}
   nav ul {font-size: .8em;}
   #nav {margin-top: 20px;}
   .socialLinks {width: 200px; margin-left: 0px; float: left;}
   .myButton {font-size: 1.1em;}
   .bodybg img {max-width: 200px; height: auto; padding: 0; margin: 0}
}