/* Main stylesheet for Southeast Family Chiropractic -- August 2008 */

body  {
	min-width: 970px;
	font: small Verdana, Arial, Helvetica, sans-serif;
	background: #006699;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
h1, h2, h3, h4, h5 {
	font-family: Arial, Helvetica, sans-serif;
	color: #3D7FAF; /* light blue */
	margin-top: 1.5em;
	margin-bottom: -0.5em;
}
h1 {
	font-size: 160%;
}
h2 {
	font-size: 140%;
}
h3 {
	font-size: 130%;
}
h4 {
	font-size: 120%;
}
h5 {
	font-size: 110%;
}
p {
	margin: 1em 0;
	padding: 0;
}

/* Tips for this Hybrid layout
1. Since the side columns em-based sizing is based on the user's default font size, you will want to be sure that background graphics in the columns take that into account. Built correctly, this is more accessible for those that need larger font sizes, since the width of the columns remains proportionate. If this is undesirable with your design, simply change the width to a pixel size and be sure to change the margins on the #mainContent div accordingly.
2. Since the sizing of side columns in this layout are based on the 100% font size in the body element, if you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the column widths will downsize proportionately. You may want to increase their widths, and the size of the #mainContent div's side margins, to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
4. The #container div is not necessary for this layout at the 100% width. You may want to use it to create faux columns or limit the width of the layout.
5. It is not neccessary to have the 100% width on the #container div since, by nature, a div takes up 100% of the available space. It is here so that if you want to decrease the size of the overall container - perhaps leaving a bit of margin on each side - this will already be available for adjustment.
*/
.thrColHybHdr #container { 
	background: #FFFFFF;
	width: 97%;
	margin: 1% auto;  /*the auto margins (in conjunction with a width) center the page if needed */
	text-align: left; /* this overrides the text-align: center on the body element. */
	border: 4px white outset;
}  
.thrColHybHdr #header { 
	background: #FFFFFF url(../images/dark-blue-gradient.png) repeat-y;
	/* padding: 0 10px;   this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColHybHdr #header .southeast-family-chiropractic-logo { 
	float: left;
	margin-top: 12px;
	margin-left: 7px;
}
.thrColHybHdr #header .southeast-family-chiropractic-photos { 
	float: right;
	margin-top: 0px;
	margin-right: 0px;
}

/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width. 
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColHybHdr #sidebar1 p" rule.
*/
.thrColHybHdr #sidebar1 {
	float: left; 
	width: 17em; /* since this element is floated, a width must be given, change the #maincontent left margin to match */
	/*padding: 1px 0; /* top and bottom padding create visual space within this div */
}
.thrColHybHdr #sidebar1 .date { /* "Today's Date" in sidebar1 */
	font: Arial, Helvetica, sans-serif;
	font-size: 0.85em; /* must define the font size for IE, otherwise it makes the text too big and overflows the box */
	line-height: 1.3; /* spacing between the lines */
	color: #999999; /* medium gray */
	text-align: center;
}
.thrColHybHdr #sidebar1 .navigationLinks h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #0D3775; /* dark blue */
	margin-left: 1em;
	padding-bottom: 0.2em;
}
.thrColHybHdr #sidebar1 .navigationLinks ul { /* used for the 1st level (main) navigation links */
	list-style: none;
	margin-left: 2.5em;
	padding-left: 0;
}
.thrColHybHdr #sidebar1 .navigationLinks ol { /* used for the 2nd level (indented) navigation links -- to eliminate IE bug of putting two dotted lines at bottom of 2nd level list */
	list-style: none;
	margin-left: 4em;
	padding-left: 0;
	margin-top: -0.9em;
	
}
.thrColHybHdr #sidebar1 .navigationLinks li {
	font-size: small;
	border-bottom: 1px dotted #6A9FC3; /* very light blue */
	margin-bottom: 0.3em;
}
.thrColHybHdr #sidebar1 .navigationLinks a:link {
	text-decoration: none;
	color: #3D7FAF; /* light blue */
	background-color: transparent;
}
.thrColHybHdr #sidebar1 .navigationLinks a:visited {
	text-decoration: none;
	color: #CC00CC; /* purple */
	background-color: transparent;
}
.thrColHybHdr #sidebar1 .navigationLinks a:hover {
	font-style: italic;
	color: #0000FF; /* medium blue - for nav links */
	background-color: transparent;
}
/* Sidebar 2 */
.thrColHybHdr #sidebar2 {
	float: right; 
	width: 18em; /* since this element is floated, a width must be given, change the #maincontent right margin to match */
	background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
	/*padding: 20px 0 0 0;  top and bottom padding create visual space within this div */
}
.thrColHybHdr #sidebar2 div {
	background: #FFFFCC; color: #000000; /* color of box background; color of text inside content area of box */
	padding: 0 1em; /* left padding to move the headline text to the right */
	margin-top: 1.6em; /* separates the boxes by adding space above the top of each box */
	margin-left: 0; /* allows to be flush against the right side of the center Content area */
	margin-right: 2em; /* distance from right border of main Container */
	margin-bottom: 2em; /* separates the boxes by adding space below the bottom of each box */
	border: 1px solid; /* border size of boxes */
	border-color: #3D7FAF; /* border color of boxes - light blue */
}
.thrColHybHdr #sidebar2 div h4 {
	margin: 0 -1em; /* moves the headline background to the left and right box edges. This must be the same "em" number (but minus) as "padding" in #sidebar2 div */
	padding: 0.4em 0.8em; /* for the headline background, the space above, and the space below the headline text */
	background: #3D7FAF; color: #FFFFFF; /* to make all the h4 headlines the same background color; and same text color - light blue, white */
	font-size: small; /* must define the font size for IE, otherwise it makes the text too big and overflows the box */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* overrides the default family of Arial */
	margin-bottom: -0.8em; /* this moves the paragraph following the headline upward in the box to reduce the gap. Margin-bottom works with all IE browsers */
}

/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
*/
.thrColHybHdr #mainContent {
 	margin: 0 18em 0 17em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. Top, Right, Bottom, Left */ 
	padding: 0 2em 0 2em; /* padding here creates white space "inside the box." */
}
.thrColHybHdr #mainContentSecondaryPages { /* with right-side column removed */
 	margin: 0 0 0 17em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. Top, Right, Bottom, Left */ 
	padding: 0 2em 0 2em; /* padding here creates white space "inside the box." */
}
.thrColHybHdr #mainContent .american-chiropractic-association-logo {
	float: right;
	width: 105px;
	border: none;
	margin-top: 0.5em;
	margin-right: 8em;
	margin-bottom: 2em;
	margin-left: 3em;
}
.thrColHybHdr #mainContent h1, .thrColHybHdr #mainContentSecondaryPages h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #0D3775; /* dark blue */
	text-align: center;
	margin-top: 1.1em;
}
.thrColHybHdr #mainContent h3, .thrColHybHdr #mainContentSecondaryPages h3 {
	line-height: 1.7;
	text-align: center;
	margin-top: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #D8E8F9; /* lightest blue in the "web safe" palette */
}
.thrColHybHdr #mainContent ul, ol, .thrColHybHdr #mainContentSecondaryPages ul, ol {
	margin-top: 0.2em;
}
.thrColHybHdr #mainContent a:link, .thrColHybHdr #mainContentSecondaryPages a:link {
	text-decoration: none;
	font-weight: bold;
	color: #0033FF; /* medium blue, the so-called "link blue" */
}
.thrColHybHdr #mainContent a:visited, .thrColHybHdr #mainContentSecondaryPages a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #CC00CC; /* purple */
}
.thrColHybHdr #mainContent a:hover, .thrColHybHdr #mainContentSecondaryPages a:hover {
	text-decoration: underline;
	color: #0033FF; /* medium blue, the so-called "link blue" */
}


/* start navigation links for the Health Conditions pages */

.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks {
	text-align: center;
}
.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks ul li {
	display:inline;
}
.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks ul {
	list-style: none;
	margin-top: 2em; /* space above the nav bar to the top header - h1 */
	margin-bottom: 2em; /* space below the nav bar to the page header - h4 */
	margin-left: 0;
	padding: 0;
}
.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks li {
	font-size: small;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	border-top: 1px dotted #6A9FC3; /* very light blue */
	border-bottom: 1px dotted #6A9FC3; /* very light blue */
}
.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks a:link {
	text-decoration: none;
	padding: 0 1em; /* to add space horizontally between the initial state of the links. NOTE: also changed the "visited links" padding number to the same */
	font-weight: normal; /* to override the font weight of bold that is set for the regular links in the MainContent text */
	color: #3D7FAF; /* light blue */
	background-color: transparent;
}
.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks a:visited {
	text-decoration: none;
	font-weight: normal; /* to override the font weight of bold that is set for the regular links in the MainContent text */
	padding: 0 1em; /* to add space horizontally between the visited links */
	color: #CC00CC; /* purple */
	background-color: transparent;
}
.thrColHybHdr #mainContentSecondaryPages .healthNavigationLinks a:hover {
	font-style: italic;
	color: #0000FF; /* medium blue - for nav links */
	background-color: transparent;
}
/* end navigation links for the Health Conditions pages */


/* start navigation links for the Footer */
.thrColHybHdr #footer a:link {
	text-decoration: none;
	font-weight: normal;
	color: #0033FF; /* medium blue, the so-called "link blue" */
}
.thrColHybHdr #footer a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #CC00CC; /* purple */
}
.thrColHybHdr #footer a:hover {
	text-decoration: underline;
	color: #0033FF; /* medium blue, the so-called "link blue" */
}
/* end navigation links for the Footer */


/* Footer */
.thrColHybHdr #footer { 
	text-align: center;
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#CCCCCC;
} 
.thrColHybHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.tableofficehours { /* table for office hours using th and td to align the days and hours */
	width: 100%;
	margin-left: -0.5em;
	margin-top: 1em;
	margin-bottom: 0.5em;
}
.tableofficehours th {
	margin: 0;
	text-align: left;
}
.tableofficehours td {
	margin: 0;
	text-align: right;
}
.imagewithcaption-right {
	list-style-type: none;
}
.imagewithcaption-right li { /* floated to the RIGHT, used an LI to make it easy to add caption, and also, can do a photo gallery with images and captions using this LI class */
	float: right;
	margin-top: 0.5em;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	text-align: center; /* these 3 lines control the alignment, font, style, size, and color of the caption text */
	font: italic 1em Arial, Helvetica, sans-serif;
	color: #0D3775; /* dark blue */
}
.imagewithcaption-right img {
	display: block;
	margin-bottom: 0.5em; /* margin used to add space between the bottom of the image and the caption; padding would cause the border, if given a color, of the image to enclose this empty space below the image */
}
.imagewithcaption-left {
	list-style-type: none;
}
.imagewithcaption-left li { /* floated to the LEFT, used an LI to make it easy to add caption, and also, can do a photo gallery with images and captions using this LI class */
	float: left;
	margin-top: 0.5em;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	margin-left: -3em;
	text-align: center; /* these 3 lines control the alignment, style, size, font, and color of the caption text */
	font: italic 1em Arial, Helvetica, sans-serif;
	color: #000000;
}
.imagewithcaption-left img {
	display: block;
	margin-bottom: 0.5em; /* margin used to add space between the bottom of the image and the caption; padding would cause the border, if given a color, of the image to enclose this empty space below the image */
}
.specialoffer { /* text color for the Special Offer sentence on the various Product pages */
	color: #FF3300; /* medium orange */
}
.doublespace { /* for ordered or unordered lists */
	line-height: 2;
}
.testimonial-yellow {
margin: 0.5em 2em 1.5em 1em;
padding: 1em;
border: solid;
border-width: 2px 4px 4px 2px;
border-top-color:#CCCCCC;
border-right-color:#999999;
border-bottom-color:#999999;
border-left-color:#CCCCCC;
background-color: #FFFFCC;
}
.testimonial-blue {
margin: 0.5em 2em 1.5em 1em;
padding: 1em;
border: solid;
border-width: 2px 4px 4px 2px;
border-top-color:#CCCCCC;
border-right-color:#999999;
border-bottom-color:#999999;
border-left-color:#CCCCCC;
background-color:#CCFFFF;
}