/*======================
	RESET
========================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 12px;
  font-family: Arial, Tahoma, Sans-Serif;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

body {
  line-height: 1.3;
  color: black;
  text-align:center; 
  background: #330033 url(../images/site_background.png) repeat-x;
}

ol, ul {
  list-style: none;
}

/*======================
	HEADER
========================*/
/*
The container div is what sets the width of your content and centers it in the browser. 
Each of your main divs will have a container div.
*/
.container
{
  margin:0 auto; /* Centers the div */
  width:960px; /*This is the width of your website */
  text-align:left; 
}

.content
{
  float:left;
  padding:10px;
}

/*
Notice that the width of header is set to 100%.
This is so that the background will extend to the edge of the browser.
*/
#header
{
  background:url(../images/header_background.jpg) no-repeat 50% 0; 
  float:left; 
  width: 100%; 
  height:200px; 
}

/*
The a element (which is usually an inline element) gets changed to a block element
so that it can easily be positioned. 
*/
#header-menu
{
  float:left;
  position:relative;
  top:6px;
  margin:0 0 7px 0;
  padding:0;
}

#header-menu li
{
  padding:0 6px 0 6px;
  display:inline;
  border-right:solid 1px #fff;
  list-style:none;
  vertical-align:middle;
}

/*
This removes any inherited borders
*/

#header-menu li.last
{
  border-right:0;
}

#header-menu li a
{
  font-size:12px;
  color:#fff;
  text-decoration:none;
}

/* Adds an underline when hovered or active */

#header-menu li a:hover, #header ul li.active a
{
  text-decoration:underline;
}

#header-menu #info
{
  font-size:10px;
  padding:6px;
}

#header #info
{
  font-size:10px;
  padding:6px;
}

#online-appointment
{
  float:left;
  margin:0;
  width:145px;
  height:56px;
  padding:10px 0px 10px 15px;
  position:relative;
  left:57px;
  top:145px;
}

#right_column_appointment
{
  float:left;
  margin:0;
  width:145px;
  height:56px;
  position:relative;
  left:57px;
  bottom:394px;
}

/*======================
	MAIN
========================*/
/*
The width is also set to 100% because there is a background image
that we want to go to the edge. 

Notice that height isn't set for #main, this is because it will need to expand
with the content. 

*/
#main
{
  background: #fff url(../images/main_background.png) repeat-x;
  float:left; 
  width:100%;
}

/*
All this does is add the background that makes the content appear 
to pop off the screen. 
*/
#wrapper
{
  background: url(../images/base.jpg) no-repeat 50% 0;
  float:left; 	 
  width:100%; 		
}

#right_column_content
{
  width:960px;
  min-height:515px;
  height:auto !important; /* IE 6 min-height fix */
  height:515px; /* IE 6 min-height fix */
}

#left-column h1{color:#990066; background:#FFFFFF; }

#left-column
{
  float:left;
  width:690px;
  height:550px;
}

#right-column
{
  float:left;
  width:240px;
  height:550px;
}

/*======================
	FOOTER
========================*/
/*
This adds the site bottom and makes it expand to the edge of the screen
like we did with #header and #main
*/ 
#footer
{
  background:url(../images/site_bottom.jpg) no-repeat 50% 0;
  float:left;
  width:100%;
  height:110px;
  padding-top:30px;
  font-size:12px;
  color:#fff;
}

/*
Adds a 7px margin to the bottom of the menu
*/

#footer-menu1
{
  margin:0 0 7px 0;
  padding:0;
  text-align:center;
}

#footer-menu1 li
{
  padding:0 6px 0 6px;
  display:inline;
  border-right:solid 1px #fff;
  list-style:none;
  vertical-align:middle;
}

/*
This removes any inherited borders
*/

#footer-menu1 li.last
{
  border-right:0;
}

#footer-menu1 li a
{
  font-size:12px;
  color:#fff;
  text-decoration:none;
}

/* Adds an underline when hovered or active */

#footer-menu1 li a:hover, #footer ul li.active a
{
  text-decoration:underline;
}

#footer-menu1 #info
{
  font-size:10px;
  padding:6px;
}

/*
Adds a 7px margin to the bottom of the menu
*/

#footer-menu2
{
  margin:0 0 7px 0;
  padding:0;
  text-align:center;
}

#footer-menu2 li
{
  padding:0 6px 0 6px;
  display:inline;
  border-right:solid 1px #fff;
  list-style:none;
  vertical-align:middle;
}

/*
This removes any inherited borders
*/

#footer-menu2 li.last
{
  border-right:0;
}

#footer-menu2 li a
{
  font-size:12px;
  color:#fff;
  text-decoration:none;
}

/* Adds an underline when hovered or active */

#footer-menu2 li a:hover, #footer ul li.active a
{
  text-decoration:underline;
}

#footer-menu2 #info
{
  font-size:10px;
  padding:6px;
}

#footer #info
{
  font-size:10px;
  padding:6px;
  text-align:center;
}