/* CSS Document */

/* The body controls default font/size for the site, it applies to everything unless specifically specified within it's own ID or Class,
The top dark orange horizontal bar is applied here as well. If you want more of a top margin, then set margin-top: somethingpx; */
body
{
	padding-right: 0px;
	padding-left: 0px;
	background-image: url(images/topHTile2.jpg);
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FDEACB;
}

/* This controls all link normal, unless specified within specific ID or Class */
body a:link
{
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}

/* This controls all link hovers and visited, unless specified within specific ID or Class if you want the visited to have different effects, then break this into two sections instead of one, so you would have a section for a:hover, and one for a:visited*/
body a:hover, a:visited
{
	font-weight: bold;
	color: #E98F03;
	text-decoration: none;
}

#container
{
width: 1025px;
}

#banner
{
float: left;
clear: both;
height: 162px;
width: 1012px;
}

#leftColumn
{
	float: left;
	padding-bottom: 36px;
	padding-left: 37px;
	width: 231px;
	background-color: #fdeacb;
}

/* This is a Class (you can reuse as many times as needed) which contains each "Main Category" in the left menu, there is a orange dashed border applied to the bottom to create the divider */
.leftMenuSections
{
	margin-top: -5px;
	margin-bottom: 2px;
	padding-bottom: 5px;
	width: 100%;
	padding-top: 5px;
	border-bottom: #e98f03 1.25px dotted; font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;
	
}

/* This also is a class, and is similar the the class above, only is more for just text without a List, this is applied to the Visiting Us Section */
.leftMenuSectionsPlain
{
	padding-right: 0px;
	padding-left: 0px;
	font-size: 14px;
	padding-bottom: 0px;
	padding-top: 8px;
	width: 100%;
}

/* This is for unordered lists, for the left menu */
.leftMenuSectionsPlain UL
{
	padding-left: 15px;
	margin: 0px;
	font-size: 14px;
	font-weight: bold;
	color: #666666;
}

/* If you want your list items to have the dots, set that particular list item to have this class, look at html file to see what I mean*/
.leftMenuSectionsPlain li.Dots
{
	padding-right: 0px;
	padding-left: 0px;
	font-weight: bold;
	font-size: 10pt;
	list-style-image: url(images/bullet.jpg);
	padding-bottom: 0px;
	margin: 0px;
	color: #666666;
	line-height: 16px;
	padding-top: 0px;
}

/* This is for unordered lists, for the left menu for other class */
.leftMenuSections UL
{
	padding-left: 15px;
	margin: 0px;
	list-style: none;
	list-style-type:none;
}

/* This is for your first LI in your list, i.e. About Us, Teeth & Health, etc. */
.leftMenuSections li.Header
{
	padding-right: 0px;
	padding-left: 0px;
	margin-bottom: -6px;
	padding-bottom: 0px;
	margin-left: -17px;
	padding-top: 0px;
	list-style-type: none;
}

/* If you want your list items to have the dots, set that particular list item to have this class, look at html file to see what I mean*/
.leftMenuSections li.Dots
{
	padding-right: 0px;
	padding-left: 0px;
	font-weight: bold;
	font-size: 10pt;
	list-style-image: url(images/bullet.jpg);
	padding-bottom: 0px;
	margin: 0px;
	color: #666666;
	line-height: 16px;
	padding-top: 0px;
}

/* This is for the Extra Images or text area, it's a class so you can add in as many as you wish directly below each other */
.leftExtra
{
padding-top: 10px;
width: 228px;
margin-top: 20px;
font-size: 14px;
}


/* This is the Main Right Container Div, holds both columns of information */
#mainRightCol
{
	float: left;
	margin-left: 10px;
	border-left: #e98f03 2px solid;
	width: 725px;
	margin-bottom: 25px;
}

#content
{
	padding-left: 32px;
	width: 660px;
	font-size: 12px;
	color: #666666;
	font-weight: normal;
}

/* This is the Left Main Div inside of the Main Right Container */
#rightColLeft
{
	float: left;
	clear: both;
	font-size: 12px;
	width: 290px;
	color: #666666;
	text-align: justify;
}

#rightColLeft_insidepage
{
	float: left;
	clear: both;
	font-size: 12px;
	width: 300px;
	border-left: #e98f03 2px solid;
	color: #666666;
	padding-left: 32px;
}

/* START - These are settings for the Welcome to Horizon Dental Care text */
.Welcome {font-size: 24px; color: #52237F; }
.To {font-size: 12px; color: #52237F; }
.HorizonDentalCare {
	font-size: 18px;
	color: #52237F;
}
/* END - These are settings for the Welcome to Horizon Dental Care text */

/* START - This container holds the Image/Text for the News and Welcome New Patients Items in the left column, it's a class so you can add in as many as needed, I have a file setup for the images that you can just save out as jpgs and replace accordingly. The .blurbImage class is nested inside blurbsContainer. */
.BlurbsContainer
{

	font-size: 12px;
	width: 100%;
	color: #666666;
	vertical-align: top;
}

.BlurbImage
{
	clear: both;
	float: left;
	width: 85px;
	margin-right: 4px;
	height: 100px;
	}
	
	/* END - This container holds the Image/Text for the News and Welcome New Patients Items in the left column, it's a class so you can add in as many as needed, I have a file setup for the images that you can just save out as jpgs and replace accordingly. The .blurbImage class is nested inside blurbsContainer. */
.BlurbImageheader_insidepage
{
	clear: both;
	float: left;
	width: 300px;
	margin-right: 4px;
	height: 100px;
	}
.BlurbImage_insidepage
{
	clear: both;
	float: left;
	width: 200px;
	margin-right: 4px;
	height: 100px;
	}

/* This is the Right Main Div inside of the Main Right Container */
#rightColRight
{
	float: left;
	font-size: 12px;
	margin-left: 25px;
	width: 330px;
	color: #666666;
	text-align: justify;
}

/* This is for the Special Services Items, the actual "Special Services" header is applied as the .HorizonDentalCare Class from above */
.SpecialServices
{
	font-size: 14px;
	color: #52237F;
	font-weight: bold;
	letter-spacing: -1px;
}

/* START - This container holds the Image/Text for the Special Services Items in the RIGHT column, it's a class so you can add in as many as needed, I have a file setup for the images that you can just save out as jpgs and replace accordingly. The .blurbImageTwo class is nested inside .blurbsContainerTwo */
.BlurbsContainerTwo
{
	font-size: 12px;
	float: left;
	width: 100%;
	color: #666666;
	vertical-align: top;
}

.BlurbImageTwo
{
	clear: both;
	float: left;
	width: 34px;
	margin-right: 25px;
	margin-left: 25px;
	height: 50px;
	
}
/* END - This container holds the Image/Text for the Special Services Items in the RIGHT column, it's a class so you can add in as many as needed, I have a file setup for the images that you can just save out as jpgs and replace accordingly. The .blurbImageTwo class is nested inside .blurbsContainerTwo */

/* START - This is for anythign that has a link attached to it in the left menu */
.leftMenuSections li.Dots a:link
{
	font-weight: bold;
	font-size: 10pt;
	color: #666666;
	text-decoration: none;
}

.leftExtra a:link
{
	font-weight: bold;
	font-size: 10pt;
	color: #666666;
	text-decoration: none;
}

.leftMenuSectionsPlain a:link
{
	font-weight: bold;
	font-size: 10pt;
	color: #666666;
	text-decoration: none;
}

.leftMenuSections li.Dots a:hover, a:visited
{
	font-weight: bold;
	font-size: 10pt;
	color: #E98F03;
	text-decoration: none;
}

.leftExtra a:hover, a:visited
{
	font-weight: bold;
	font-size: 10pt;
	color: #E98F03;
	text-decoration: none;
}

.leftMenuSectionsPlain li.Dots a:hover, a:visited
{
	font-weight: bold;
	font-size: 10pt;
	color: #E98F03;
	text-decoration: none;
}
/* END - This is for anythign that has a link attached to it in the left menu */



/* START FOOTER */
/* The Container is mainly for the bottom Dark Orange Horizontal Tile */
#footerContainer
{
	clear: left;
	background-image: url(images/bottomHTile6.jpg);
	background-repeat: repeat-x;
	height: 86px;
	}

/* Footer Content has the Purple bar set as it's background, it's set to 1024 and text is centered, There is a negative top margin set because for somereason the purple bar wasn't lining up correctly, so if you change the font size/Padding to align the text in the middle vertically in the purple bar you will also need to adjust the negative margin, oddly enough the padding/margin in this case or NOT inversly related */
#footerContent
{
	background-position: center 50%;
	font-size: 18px;
	background-image: url(images/footerShape9.jpg);
	width: 1024px;
	color: #ffffff;
	background-repeat: no-repeat;
	height: 78px;
	text-align: center;
	margin: 0px;
	padding-top: 10px;
}

/* Change this to effect the phone number in the footer */
.footerPhone
{
	font-size: 23px;
}

/* Change this to effect the Text under the purple bar */
.footerCopyright
{
	font-size: 13px;
	color: #52237f;
	line-height: 25px;
	font-weight: bold;
}

/* This is for the O2 Comm. text which has a link applied to it */
.footerCopyright a:link
{
	font-size: 13px;
	font-weight: bold;
	color: #52237f;
	text-decoration: underline;
}

/* This is for the O2 Comm. text which has a link applied to it */
.footerCopyright a:hover, a:visited
{
	font-size: 13px;
	font-weight: bold;
	color: #E98F03;
	text-decoration: none;
}