body {background-color:white;#6058D0; font-family:trebuchet ms;}


img {border:0}

 #topbar  {
 height:10px;
 background-color: #C1A3FF; 
 font-family:trebuchet ms; color:black; font-weight:bold;
 padding:5 10 20 10;
 }
 
@media screen and (min-width:200px) and (max-width:423px) 

  {
 #topbar  {margin-left:-8px; margin-right:-8px; margin-top:-8px;
 height:10px;
 background-color: #C1A3FF; 
 font-family:trebuchet ms; color:black; font-weight:bold; font-size:90%;
 padding:5 10 15 10;
  }
 
 .names {visibility:hidden}
}

   .pic-resize {width:300px}

  @media screen    and  (min-width:850px) 		
 {
 .pic-resize {width:250px}
 }
 
  @media screen and (min-width:610px)  and  (max-width:849px) 		
 {
 .pic-resize {width:220px}
 }

 
   @media screen    and  (max-width:609px) 		
 {
 .pic-resize {width:200px}
 }
 

.boxcolor {background-color:#B3E9C8;  border: solid 3px #366D4D;}
.footer {font-size:80%}   
@media screen and (min-width: 700px) 
{
body {  background-image: url('images/lav.png')}
}

@media screen and (min-width: 800px) 
{

 .header { display: block;    margin-left: auto;    margin-right: auto; min-width:400px; max-width:500px }     
  
 #outercontainer {display: block;  margin:0 auto;  max-width:1020px; min-height:1300px; background-color:white;  } 
 .footer { display: block; margin-top:-20px;   margin-left: auto;    margin-right: auto;  max-width:1020px; background-color:white;  }
 
 #services ul{display:block; margin-left:10px }
 



.box {float:left; width:29%;   margin:10px}

 
#navcontainer ul
{ 
list-style-type: none;
    margin-left: auto;
    margin-right: auto;
     width: 500px;

}

 #navcontainer ul li { display: inline;   }
 
 .button-img {padding-right:10px; }
 
}

 @media screen and (min-width: 601px) and (max-width: 799px)
{


 #services ul{float;left;  margin-left:-25px; }
.box {float:left; width:45%;   height:400px;   margin:10px}
 
 #outercontainer {display: block;  margin:0 auto;  max-width:800px; min-height:1300px; background-color:white;  } 

 .header { display: block;    margin-left: auto;    margin-right: auto; min-width:400px; max-width:400px }     
 
 .footer { display: block;  margin-top:-20px;   margin-left: auto;    margin-right: auto; min-width:601px; max-width:799px; background-color:white;  }     
  
#navcontainer ul
{ 
list-style-type: none;
    margin-left: auto;
    margin-right: auto;
     width: 500px;

}

 #navcontainer ul li { display: inline;  }
 
 .button-img {padding-right:10px}
 
}
@media screen and (min-width: 551px) and (max-width: 600px)
{


 #services ul{float;left;  margin-left:-25px; }
.box {float:left; width:45%;   height:400px;   margin:10px}
 
 #outercontainer {display: block;  margin:0 auto;  max-width:600px; min-height:1300px; background-color:white;  } 

 .header { display: block;    margin-left: auto;    margin-right: auto; min-width:400px; max-width:400px }     
 
 .footer { display: block; margin-top:-20px;    margin-left: auto;    margin-right: auto; min-width:551px; max-width:600px; background-color:white;  }     
 
 
#navcontainer ul
{ 
list-style-type: none;
    margin-left: auto;
    margin-right: auto;
     width: 500px;

}

 #navcontainer ul li { display: inline;  }
 
 .button-img {width:100px; padding-right:10px}
 
}

@media screen and (min-width:482px) and (max-width: 550px) {
body {font-family:trebuchet ms; }
 #outercontainer {display: block;  margin:0 auto;  max-width:600px; min-height:1000px; background-color:white; }
 #services ul{float;left;  margin-left:-25px; }
 
 
   .box {float:left; width:90%;     margin:10px }
   
 
 .header { display: block;    margin-left: auto;    margin-right: auto; min-width:400px; max-width:400px }     
 
 .footer { display: block;  margin-top:-20px;   margin-left: auto;    margin-right: auto; min-width:400px; max-width:550px;background-color:white;   }     
 
 
   .menu {list-style-type: none;  } 
  
  
 
#navcontainer ul
{ 
list-style-type: none;
    margin-left: auto;
    margin-right: auto;
     width: 500px;

}
#navcontainer ul li { display: inline; xmargin-left:-10px; xpadding-right:20px }
 
.button{   padding-right:20px;  }
 
.button-img {width:85px}

 }

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

body {font-family:trebuchet ms}
#outercontainer {  min-height:1000px; background-color:white}

#navcontainer ul
{ 
list-style-type: none;
      margin-left: auto;
    margin-right: auto;
 
     width: 200px;

}


 


.header { display: block;    margin-left: auto;    margin-right: auto; min-width:320px; max-width:400px }        
   .menu {list-style-type: none;  } 
   #services ul{float;left;  margin-left:-25px; }
   .box {float:left; width:90%;    margin:10px  }
   
	#navcontainer ul {list-style-type: none;}
	#navcontainer ul li { display: inline;  margin-left:-10px; padding-right:20px }
 
	.button{   padding-right:10px;  }
 
	.button-img {width:80px}
	   .header {     display: block;    width:100%;  }    
 .footer {display:block; width:100%}

 }

 .center{ margin:auto;}
 
 .center{display:block;   margin-left: auto;    margin-right: auto;}

h2 {font-family:lustria; font-size: 110% }

.JS {font-family: "Josefin Slab", palatino;}
h2.JS {font-family: "Josefin Slab", palatino; font-size: 110% }
h3.JS {font-family: "Josefin Slab", palatino; font-size: 100% }
h2.center, h3.center {text-align:center; padding-top:20px }



  ul {list-style-type: none;}
 
 .interior {padding:15px; font-size:90%}
 
 
 
 /* left and right columns (for pics in right col) */
 @media screen    and  (min-width:944px) and  (max-width:2000px) 		
 {
 
 #rightcol {width:20%;  min-width:300px;  padding:0;   margin-right:10px;
			float:right; box-sizing:border-box; 
			}
					
 #leftcol { width:65%; padding-top:40px; padding-left:20px; float:left; box-sizing:border-box;  }
 
}

@media screen and (min-width:859px) and (max-width:943px) 
 
{ 
   
 #xrightcol {width:20%; min-width:300px;   padding:0;   margin-right:10px;
			float:right; box-sizing:border-box; 
			}
					
 #xleftcol { width:60%; padding-top:40px; padding-left:20px; float:left; box-sizing:border-box;  }
 

 
 #rightcol {padding: 0; width:35%; min-width:250px;
			float:right; box-sizing:border-box;}
					
 #leftcol {  width:60%;  float:left; box-sizing:border-box; }
 
  } 
 
 
@media screen and (min-width:680px) and (max-width:858px)  
{ 
   
 #rightcol { width:30%; min-width:250px; padding: 0;
			float:right; box-sizing:border-box;}
					
 #leftcol {  width:60%;  float:left; box-sizing:border-box; }
 
  } 
  
  
 
  
@media screen    and  (max-width:679px) 		
/* smallest screens, both boxes are full width  */
 {
  #rightcol { float;none; padding:0; margin:0; width:200px; margin-left:auto; margin-right: auto;    box-sizing:border-box;
    }
					
 #leftcol { width:100%; float;none; padding:0;   box-sizing:border-box; }
 
  }