/* Medium sized devices */
@media only screen and (max-width: 600px) {
   #Container, #Layout {
      width:580px;
      float: none;
   }

   /* The header gets narrower but taller, to accommodate search under the titles.
   */
   #Header {
      height:160px;  
   }
   #Header #part1{
      background-image: none;
      background-color: #2B385A;
      width:560px;
   } 
   
   #Header #part2{
      width:580px;
      height: 170px;
      background-color: #2B385A;
      border-right: 20px solid #445E99;
      border-bottom-right-radius: 40px;
   } 
   
   /* Part 3 was only cosmetic */
   #Header #part3 {display:none;}
   /* Move the search form over the the left under the header */
   #Header #part4 {
      position: absolute;
      top:10px;
      left: 350px;
      background-image: none;
      background-color: #2B385A;
      width:140px;
   }
   #Header #part2 h1 {
      font-size:20px;
   } 
   #Header #part2 h2 {
      width:300px;
      font-size: 18px;
   }
   #SearchForm_SearchForm {
     position: relative;
   }
   #SearchForm_SearchForm input {
        font-size: 1.2em;
   }
   #SearchForm_SearchForm legend {
      margin: 0;
   }
   div#logo {
      top: 50px;
      right:60px;
   }
   div#contact {
      position: absolute;
      top: 100px;
      font-size:1.7em;
      width: 190px;
   }   
   
   #Navigation {
     	width: 340px; 
    	height: 250px;
      float: none;
   	border-right: 10px solid #445E99;
   	border-left: 10px solid #445E99;
   	border-bottom: 10px solid #445E99;
   	border-bottom-left-radius: 20px;
   	border-bottom-right-radius: 20px;
      margin: 0 auto;
      padding: 10px 0 0 30px;
     
   }
   #Navigation ul { 
      font-size: 1.4em;
      line-height:70%;
      margin: 0;
   }
   #Navigation ul li a {
      margin: 5px 0 0 0;  
   }
      
   div#project_page, div#project_content {
      width: 540px;
   }
   div.page_top {
      width: 540px;  
   }
   
   #Footer {
      background-color: #539755;
      background-image: none;
      height: 7em;
      padding: 10px 30px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   

 
}  /* End 600px */

@media only screen and (max-width: 320px) {
   #Container, #Layout {
      width:320px;
      float: none;
   }

   /* The header gets narrower but taller, to accommodate search under the titles.
   */
   #Header {
      height:160px;  
      font-size:0.8em;
   }
   #Header #part1{
      background-image: none;
      background-color: #2B385A;
      width:240px;
   } 
   
   #Header #part2{
      width:320px;
      height: 170px;
      background-color: #2B385A;
      border-left: 10px solid #445E99;
      border-bottom-left-radius: 20px;
      border-right: 10px solid #445E99;
      border-bottom-right-radius: 20px;
      border-bottom: 10px solid #445E99;
   } 
   
   /* Part 3 was only cosmetic */
   #Header #part3 {display:none;}
   /* Move the search form over the the left under the header */
   #Header #part4 {
      xxdisplay: none;
      position: absolute;
      top:10px;
      left: 180px;
      background-image: none;
      background-color: #2B385A;
      width:120px;
   }


   #Header #part2 h1 {
      font-size:20px;
   } 
   #Header #part2 h2 {
      width:200px;
      font-size: 18px;
      padding: 30px 0 0 20px;
   }
	#SearchForm_SearchForm .middleColumn {
		width: 104px;
   }
   #SearchForm_SearchForm .middleColumn input.text {
			width: 100px;
   }
   #SearchForm_SearchForm {
     position: relative;
     width: 100px;

   }
	#SearchForm_SearchForm #SearchForm_SearchForm_action_results {
		float: right;
	}
	#SearchForm_SearchForm input {
        font-size: 1.2em;
   }
   #SearchForm_SearchForm legend {
      margin: 0;
   }
   div#logo {
      display:none;
      /* don't bother, we're lacking space */
   }
   div#contact {
      position: absolute;
      top: 130px;
      font-size:1.7em;
      width: 190px;
   }   
   
   #Navigation {
     	width: 230px; 
    	height: 230px;
      float: none;
   	border-right: 10px solid #445E99;
   	border-left: 10px solid #445E99;
   	border-bottom: 10px solid #445E99;
   	border-bottom-left-radius: 20px;
   	border-bottom-right-radius: 20px;
      margin: 0 auto;
      padding: 10px 0 0 0px;
     
   }
   #Navigation ul { 
      font-size: 1.2em;
      line-height:70%;
      margin: 0;
   }
   #Navigation ul li a {
      margin: 5px 0 0 0;  
   }
      
   div#project_page, div#project_content {
      width: 320px;
   }
   div.page_top {
      width: 320px;  
   }
   
   #Footer {
      background-color: #539755;
      background-image: none;
      height: 7em;
      padding: 10px 30px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }


 
}