body
{
	font-family: helvetica, arial;		
	margin: 2px;
	margin-top: 0px;
	xmargin-left: 4px;
	xmargin-right: 4px;
	background-position: center top;
	background-color: #c2d9fb;
	background-color: #E9EAED;
	background-color: #a5d6fe;
}

.lightlink 
{
color: white;
}


.lightlink:visted
{
color: white;
}

.lightlink:active 
{
color: white;
}



#buzzer
{
position: absolute;	
background-color: white;	
xdisplay: none;
}

#buzzer span
{
display: none;	
}

img
{
width: 100%;	
}


html {
 box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


#wrapper
{
text-align: center;	
xmargin-left: 3px;
xmargin-right: 3px;

}


#header
{
background-color: #24385f;
color: white;
border-width: 1px;
border-style: solid;
border-color: silver;
padding: 7px;
margin-bottom: 17px;
}

#headerMainTitle
{
text-align: left;	
font-size: 1.3em;
margin-bottom: 7px;
font-weight: bold;
}




#headerMainImageBox
{
	float: left;
	width: 100%;
}


#headerMainImage
{
margin-left: 12px;	
margin-top: 12px;
width: 33%; 
float: left;
margin-bottom: 12px;
}


#headerMainQuote
{
margin-top: 12px;	
margin-left: 12px;	
padding: 7px; 
xdisplay: inline-block; 
width: 55%;	
float: left;
xheight: 177px;
vertical-align: center;


}

#headerMainTitle
{
margin-left: 12px;	
}



#headerMainTitle2
{
text-align: left;	
font-size: 1.1em;
margin-bottom: 7px;
font-weight: bold;
margin-left: 7px;
}

#headerMainTitle3
{
text-align: center;	
font-size: 1.1em;
margin-bottom: 7px;
font-weight: bold;
margin-left: 7px;
}

#headerMainTitle3Hidden
{
display:none;
text-align: center;	
font-size: 1.1em;
margin-bottom: 7px;
font-weight: bold;
margin-left: 7px;
}



#headerSubTitle
{
text-align: left;	
font-size: 1.1em;
margin-left: 7px;
margin-top: 7px;
margin-bottom: 7px;
}

#headerMainText
{
text-align: center;	
font-size: 1em;

margin-bottom: 12px;
}

#headerListBox
{
float: left;
width: 100%;	
margin-bottom: 12px;
}


#headerList
{
margin-left: 3px;	
float: left;	
text-align: left;
margin-bottom: 7px;
}


#headerListMap
{
display: block;
float: left;
xheight: 125px;
xmargin-top: 7px;
margin-left: 2%;
margin-right: 2%;

width: 135px;

overflow: hidden;
background-color: navy;

}

#headerListMap img
{
width: 100%;	
}



#headerListPic1
{
display: none;
float: left;
xwidth: 33%;
height: 125px;
margin-left: 9px;
width: 175px;
overflow: hidden;
}

#headerListPic1 img
{
width: auto;
xposition: absolute;
height: 100%;	
left: -15px;
}

#headerListPic2
{
display: none;
float: left;
xwidth: 33%;
height: 125px;
margin-left: 9px;
width: 175px;
overflow: hidden;
}

#headerListPic2 img
{
width: auto;
height: 100%;	
}







#headerContact
{

text-align: right;
text-align: center;
font-size: 1em;	
xmargin-left: 13px;
background-color: silver;
border-style: solid;
border-width: 1px;
border-color: white;
padding: 5px;
padding-right: 17px;
padding-left: 17px;
color: black;
display: inline-block;

}

#expert
{
margin-bottom: 7px;
font-size: 1.3em;
text-align: center;
}

#descriptionText
{
font-size: 1em;
margin-bottom: 12px;
text-align: left;
xmargin-left: 12px;
xmaring-right: 12px;
padding: 7px;
}

#questions
{
text-align: center;
margin-bottom: 12px;
}



#picBox
{
display:inline-block;	
background-color: white;	
xwidth: 250px;
padding: 7px;
font-size: 1em;
margin-bottom: 7px;	
border-style: solid;
border-width: 1px;
border-color: navy;
text-align: center;
}

#picBoxPicture
{
float: left;	
width: 130px;
width: 100%;
}


	#picBoxText1
	{
		
	float: none;
	
	margin-bottom: 12px;
	
	}
	
	
	#picBoxText2
	{
		
	float: none;
	
}


#testimonial
{display:inline-block;
xfloat: left;	
text-align: left;
padding: 7px;
}

#testimonial .heading
{
font-weight: bold;	
}


.body .text
{
text-align: left;
xmargin-top: 7px;
background-color: white;
xmargin-left: 2px;
xmargin-right: 2px;
padding: 12px;
margin-bottom: 17px;
}

.body .pic
{
font-weight: bold;	
text-align: center;
background-color: white;
padding-bottom: 7px;
margin-bottom: 17px;
}

.pic img
{
margin-top: 0px;
margin-bottom: 3px;	
}



#footer
{
background-color: #adc6ef;
color: white;
border-width: 1px;
border-style: solid;
border-color: silver;
padding: 7px;
margin-bottom: 7px;	
	
}


@media only screen and (min-width: 222px) 
{
	#buzzer #b1
	{
	display: inline-block;
	}
	
	#wrapper
	{
	float: left;
	width: 100%;
	}
	
	#header
	{
	float: left;	
	width: 100%;
	}
	
	
	#expert
	{
	float: left;
	width: 100%;
	}
	
	#descriptionText
	{
	float: left;
	width: 100%;
	}

	#questions
	{
	float: left;
	width: 100%;
	}
	
	#picBoxPicture
	{
	float: left;	
	width: 40%;
	margin-right: 1%;
	
	}

	#picBoxText1
	{
	margin-top: 14px;	
	float: right;
	width: 59%;
	
	}
	
	
	#picBoxText2
	{
		
	float: right;
	width: 59%;
}
	
		
	.body
	{
	float: left;	
	}
	
	
	.bodyLeft
	{
	float: left;	
	width: 48%;
	
	margin: 1%;		
	}
	
	
	.bodyRight
	{
	float: right;	
	width: 48%;
	
	margin: 1%;
	}
	
	#footer
	{
	float: left;
	clear: both;	
	width: 100%;
	}
	
	
	
}

@media only screen and (min-width: 311px) 
{
	
	
#headerListMap
{
height: 200px;	
margin-left: 12px;
margin-right: 4px;



}

}

@media only screen and (min-width: 414px) 
{
	
#headerListMap
{
width: 300px;	
}	
	
	
#picBox
{
width: 390px;	
}	


#testimonial
{
xborder-style: solid;
width: 88%;	
}	

#headerMainTitle2
{
text-align: left;	
font-size: 1.2em;
margin-bottom: 7px;
font-weight: bold;
margin-left: 12px;
margin-left: 12px;

}

#headerMainTitle
{
text-align: left;	
font-size: 1.3em;
margin-bottom: 7px;
font-weight: bold;
}

#headerMainImage
{
width: 123px; display: inline-block;
}

#headerMainQuote
{
margin-top: 22px;	
}


#headerList
{
xdisplay: inline-block;	
xwidth: 24%;
xmargin-left: 24px;	
}


#headerListMap
{
width: 175px;	
}


#headerListPic1
{
xdisplay: block;
xwidth: 24%;
}

#headerListPic2
{}


}



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

body 
{
background-image: url(fhbr_pictures/contentBackgroundLight2Full.jpg);
}

#headerMainQuote
{
margin-top: 22px;	
width: 495px;
}


#headerMainTitle3
{
display:none;
}


#headerMainTitle3Hidden
{
display:block;
}



#headerListPic1
{
display: block;
xwidth: 24%;
width: auto;
height: auto;
}
	

#headerListPic1 img
{
height: 155px;
}

	




#buzzer #b2
{
display: inline-block;	
}	





	
#picBox



#wrapper
{
xpadding: 3px;	
}	



}	

@media only screen and (min-width: 829px) 
{
	
#picBox
{
margin-left: 12px;	
float: left;
width: 41%;	
}	
	
#testimonial
{
margin-right: 12px;	
float: right;
width: 54%;	
}	





}	


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

	#headerListPic2
{
display: block;
xwidth: 24%;
width: auto;
height: auto;
}
	

#headerListPic2 img
{
height: 155px;
}
	
}


@media only screen and (min-width: 1000px) 
{
	
#wrapper
{
	width: 960px;
	margin: auto;
	float: none;
}
}	



	


