@charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, p {
margin: 0px;
padding: 0px;
}

body {
background-image: url(images/body_bg.gif);
background-repeat: repeat; 
font-size: 1.01em;
font-family: Verdena, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

#container {
margin: 15px auto;
overflow: hidden;
width: 750px;
height: auto;
background-color: #FFFFFF;
}

.johnpix {
width: 109px;
float: left;
display: inline;
}

#main {
width: 641px;
height: auto;
float: left;
display: inline;
background-color: #FFFFFF;
overflow: hidden;
}

#footer {
background-color: #03022E;
color: #FFFFFF;
width: 750px;
height: 80px;
clear: both;
}

.footer {
font-size: .8em;
color: #FFFFFF;
text-align: center;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

.copyright {
font-size: .8em;
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px;
padding: 0px;
}

.disclaimer {
font-size: .8em;
color: #CCCCCC;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
margin: 0px 0px 10px;
padding: 0px;
}

#subhead {
background-image: url(images/subhead_bg.png);
background-repeat: repeat-x;
margin-right: 7px;
height: 21px;
}

.subhead {
color: #666666;
font-size: .9em;
font-weight: bold;
padding: 2px 0px 2px 2px;
}

#topnav ul {
padding: 0px 0px 5px;
margin: 0;
color: #8B0504;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
font-size: .75em;
font-weight:bold;
height: 14px;
}

#topnav ul li { 
display: inline; 
color: #8B0504;
}

#topnav ul li a {
padding: 0px 8px 0px 0px;
color: #8B0504;
text-decoration: none;
float: left;
}

#topnav ul li a:hover {
color: #333333;
}

/*----------------------------Navigation-------------------------------*/
#nav{
	list-style:none;
	font-weight:bold;
	padding: 0px 0px 5px;
	margin: 0;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#nav li{
	float:left;
	margin-right:12px;
	position:relative;
	
}
#nav a{
	display:block;
	padding: 5px;
	color:#8B0504;
	text-decoration:none;
	font-size: .75em;
	font-weight:bold;
	height: 14px;
}
#nav a:hover{
	color:#FFF;
	background:#8B0504;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	background:#8B0504; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	border: #FFF 1px solid;
	
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#8B0504;
	color: #FFF;
	text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#363B8C;
}

/**End of Navigation**/

.blue {
color: #333333;
}

#content {
width: 632px;
height: auto;
border-top: #C1C1C1 1px solid;
border-left: #C1C1C1 1px solid;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
margin: 5px 0px 10px 0px;
overflow: hidden;
}

#content_left {
width: 442px;
float: left;
display: inline;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #C1C1C1 1px solid;
border-bottom: #C1C1C1 1px solid;
margin: 4px 2px 4px 4px;
min-height: 525px;
}

#cl_insideleft {
width: 221px;
float: left;
display: inline;
clear: both;
}

#cl_insideright {
width: 221px;
float: left;
display: inline;
}

#content_right {
width: 174px;
float: left;
display: inline;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #C1C1C1 1px solid;
border-bottom: #C1C1C1 1px solid;
margin: 4px 4px 4px 2px;
}

#inside_right {
width: 164px;
border: #C1C1C1 1px solid;
margin: 4px;
}

h1 {
background-image: url(images/contenthead.png);
background-repeat:no-repeat;
padding: 3px 0px 8px 17px;
font-size: 1.1em;
margin: 7px 2px 0px 2px;
color: #666666;
}

h3 {
background-image: url(images/contenthead.png);
padding: 7px 0px 8px 13px;
font-size: .75em;
margin: 0px 2px 0px 2px;
color: #666666;
}

.text {
color: #333333;
font-weight: bold;
font-size: .75em;
padding: 0px 0px 0px 5px;
}

.pagetext {
color: #333333;
font-weight: bold;
font-size: .75em;
padding: 0px 5px 0px 5px;
margin-bottom: 10px;
}


.boardcertified {
color: #333333;
font-weight: bold;
font-size: .75em;
padding: 0px 0px 13px 5px;
}

.office {
padding: 0px 10px 0px 3px;
}

.office1 {
margin: 0px 10px 0px 3px;
border: #000000 1px solid;
}

.office2 {
margin: 10px 10px 10px 3px;
border: #000000 1px solid;
}

.office3 {
margin: 10px 10px 10px 3px;
}

.scales {
padding: 0px 10px 0px 3px;
}

.contactus {
background-image: url(images/subhead_bg.png);
background-repeat: repeat-x;
color: #666666;
font-size: .8em;
font-weight: bold;
padding: 2px 0px 2px 2px;
}

#content a {
color: #8B0504;
}

#content a:hover {
color: #333333;
}

.practicelist {
margin: 0px;
padding: 0px;
color: #8B0504;
}

.practicelist li {
padding: 0px 0px 0px 0px;
font-size: .75em;
font-weight: bold;
margin:  0px 2px 0px 20px;
text-decoration: none;
list-style-image: url(images/li_box.png);
}

.practicelist li a {
text-decoration: none;
list-style-image: url(images/li_box.png);
}

.contactlist {
margin: 0px 0px 5px 2px;
padding: 0px;
}

.contactlist li {
list-style-image: none;
text-decoration: none;
font-size: .75em;
font-weight: bold;
list-style: none;
}

.contactlist li a {
text-decoration: none;
list-style-image: none;
list-style: none;
}

.btn {
background-image: url(images/button_bg.png);
background-repeat: repeat-x;
border: #C1C1C1 3px double;
padding: 2px 0px 2px 0px;
margin: 5px;
width: 60px;
clear: both;
font-weight: bold;
font-size: .75em;
text-align: center;
}

.btn a {
text-decoration: none;
}

.page_header {
font-size: 1.4em;
color: #8B0548;
margin: 5px 5px 10px 15px;
}

.main_text {
font-size: 1.01em;
color: #000033;
margin: 5px 7px 7px 15px;
}

.main_text a {
color: #8B0548;
text-decoration: underline;
}

.slide {
color: #F00;	
}

.view {
color: #093;	
}


/**Collapse & View**/
.tran1 { -o-transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s; transition: all 1s;}
#qa { padding: .5ex; margin: .5em; width: 90%; }
#qa:hover {}
#qa .question { display: inline; vertical-align: middle; }

.hide, .show  { display: none;  font-size: 80%; vertical-align: middle; }

@media all and (min-width:1px) { .hide, .show  { display: inline; } }

a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }

#menu { opacity: 1; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }

@media print {
.hide, .show  { display: none; }
#nav { position: static; border: none; width: auto; }
#menu { width: auto; }
}

/**Collapse & View 2**/
.tran2 { -o-transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s; transition: all 1s;}
#qa1 { padding: .5ex; margin: .5em; width: 90%; }
#qa1:hover {}
#qa1 .question { display: inline; vertical-align: middle; }

.hide, .show  { display: none;  font-size: 80%; vertical-align: middle; }

@media all and (min-width:1px) { .hide, .show  { display: inline; } }

a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }

#menu1 { opacity: 1; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu1 { opacity: 0; height: 0em; }

@media print {
.hide, .show  { display: none; }
#nav { position: static; border: none; width: auto; }
#menu1 { width: auto; }
}
/**End**/





ol {
	list-style:none;	
}

.contactform {
margin: 0px;
padding: 0px 0px 0px 5px;
color: #8B0504;
font-weight: bold;
font-size: .75em;	
line-height: 1.01em;
}

.offices {
margin: 5px 0px 7px 0px;
padding: 0px 0px 0px 5px;
color: #8B0504;
font-weight: bold;
font-size: 1.1em;
text-decoration: underline;	
}

.question {
background-image: url(images/contenthead.png);
background-repeat: no-repeat;
padding: 7px 0px 0px 13px;
font-size: .9em;
margin: 0px 2px 5px 10px;
color: #666666;

}

.para1 {
font-size: .9em;
color: #666666;
margin: 0px;
}

.para2 {
font-size: .9em;
color: #666666;
}

.para3 {
font-size: .9em;
color: #666666;
}

.paratext {
color: #fc5107;
font-weight: bold;
font-size: .75em;
padding: 0px 5px 0px 5px;
margin: 0px 0px 10px 15px;

}

input.button {
  color: #fff; background: #8B0504;
  font-size: .7em;
  font-weight:bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: solid 1px #fc5107;
  margin: 0px;
  padding: 1px 5px;
}