/* Mary Ann Fernandes www.fernandesmedia.com 2007 Vertical Navigation*/

/* some browsers put in their own margins and padding or borders, this makes sure everything is 0'd out */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	margin: 0;
	padding: 0;
	text-align: left;
	color:#0000CC;
}

#maincontainer {
	width: 670px; /*Width of main container*/
	margin: 50px auto; /*Center container on page*/
}

#navmaincontainer{
	width: 670px; /*Width of main container*/
	margin: 50px auto; /*Center container on page*/
	text-align:left;
	background:#32989A url(assets/frame.jpg) repeat-y center top;
	}
	
#contentwrapper {
float: left;
width: 670px;
background:#32989A url(assets/frame.jpg) repeat-y center top;
margin-top: -3px;
}
  
#NavContentWrapper {
margin-left: 175px;
}

#contentcolumn {
margin-right: 43px;
}

#contenttext {
margin-left: 200px;
width: 425px;
}

.Navcontainer {
/* add <div class="container"> before each header and a </div> after each paragraph to clear. */
width:98%;
float: right;
margin-right: 40px;
}

.pictures{
margin: 20px;
margin-left: 60px;}

.rightimage{
float: right;
margin: 0 0 40px 10px;
width: 244px;
}

.righttext{
float: right;
margin: 0 0 10px 10px;
width: 150px;
}

.rightpic{
float: right;
margin: 10px 5px 5px 5px;
width: 190px;
}

#leftcol #nav {
border-bottom: 1px solid #000000;
}

/* This is another failsafe to make sure browsers aren't adding their own padding or margins.  "ul" is what holds the list elements */
	#leftcol #nav  ul{
	padding: 0;
	margin: 0;
	background-color:#339A99;
}

/* li is "list item element.  navigation defaults to vertical w/ bullets, by adding display: inline; I make it horizontal w/out bullets */
		#leftcol #nav ul {
	margin: 0;
	padding: 0;
	background-color: transparent;
	list-style-type: none;
	border: 1px dashed #7E887F;
}
			#leftcol #nav  ul li a{
			color: #FFFFFF;
			background-color: #B9C7BB;
			border-bottom: 1px dashed #7E887F;
			display: block;
			padding: 4px 0 4px 4px;
			text-decoration: none; 
			height: 1%;
			font-style: italic;
} 

/* hover is when mouse goes over background, color will change to this */
			#leftcol #nav  ul li a:hover, #leftcol #nav  ul li a:focus{
			background-color: #339A99;
			/* The next 3 lines are just to make it look like your depressing a button when you hover */
			border-right: 1px dashed #ffffff;
			border-bottom: dashed #ffffff;
			color: #ffffff;
}

#leftcol{
/* make the padding the same as the h1 padding so they will start aligned */
  margin-top: 20px;
  margin-left: 12px;
	/* float is neccessary to have content sit beside it */
  float: left;
  width: 130px;
  color: #FFFFFF;
  background: #EBFDED center;
  }
  
#footer{
	height: 105px;
	width: 670px;
	padding: 0;/*float: left; - haven't seen a need for this yet*/
	background-image: url(menu/footer.gif);
	clear: both;
}
#footer li{
display: inline;/*gets rid of bullets*/
}

.picture {
    float: right;
	width: 68px; height: 47px;
	margin-top: 10px;
	margin-right: 50px;
	}
   div.picture span {
      display:block;
  	  }
	 	 div.picture a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
		background-image: url(menu/pictures.gif);}
	     div.picture a:hover {
	background-image: url(menu/pictures_roll.gif);}
	
	#footertext {/*this is for the bottom footertext*/
	color: #CCCCCC;
	font-size: 12px;
	text-align: center;
	padding-top: 5px;
	margin-left: 45px;
	line-height: 1.2em;
}
/* li is "list item element.  navigation defaults to vertical w/ bullets, by adding display: inline; I make it horizontal w/out bullets */
	#footertext ul {
	list-style-type: none;
	border: 1px 	background-color: #4D5079;#ffffff;
}
			#footertext  ul li a{
			color: #ABC2CD;
		
} 

/* hover is when mouse goes over background, color will change to this */
			#footertext  ul li a:hover, #login  ul li a:focus{
			background-color: #4D5079;
			color: #ffffff;
}
.website{ font-size: 9px; padding-top: 5px;} 


/* Font Properties */
p {
	line-height: 1.2em;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #0000CC;
}

br {
	line-height: 1.5em;
}
td {
	line-height: 1.4em;
}
a {
	font-style: normal;
	font-weight: bold;
}
#plinkdescription {
	color: #000000;
}
h1 {
	font-size: 16px;
	font-weight: bold;
	border-left-width: 20px;
	border-left-style: solid;
	border-left-color: #009999;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 10px;
	margin-top: 20px;
	padding-left: 7px;
}
h2 {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: auto;
	height: 0px;
	margin: 5px;
	padding: 1px;
	border: thin solid #009999;
	color: #0000CC;
	background-position: center center;
	text-align: center;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
h4 {
	line-height: 1.2em;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #0000CC;
}
ul {
margin-left: 20px;
}
.tile {
	background-repeat: repeat-y;
	background-position: top;
}

#navmenu{
	height: 105px;
	padding: 0;/*float: left; - haven't seen a need for this yet*/
	background-image: url(menu/menu_back.gif);
}

#navmenu li{
display: inline;/*gets rid of bullets*/
}

div.home {
    float: left;
	width: 123px; height: 105px;
	}
   div.home span {
      display:block;
  	  }
	 	 div.home a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/home.gif);
   	   	 }
		 div.home a:link {
		 background: url(menu/home.gif);
   	     }
	     div.home a:hover {
		 background: url(menu/home_roll.gif);
   	     }
	     div.home a:focus {
		 background: url(menu/home_roll.gif);
         }

div.homeselect {
    float: left;
	width: 123px; height: 105px;
	}
   div.homeselect span {
      display:block;
  	  }
	 	 div.homeselect a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/home_sel.gif);
		 }	

div.hypnobirth {
    float: left;
	width: 209px; height: 105px;
	}
   div.hypnobirth span {
      display:block;
  	  }
	 	 div.hypnobirth a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/hypnobirth.gif);
   	   	 }
		 div.hypnobirth a:link {
		 background: url(menu/hypnobirth.gif);
   	     }
	     div.hypnobirth a:hover {
		 background: url(menu/hypnobirth_roll.gif);
   	     }
	     div.hypnobirth a:focus {
		 background: url(menu/hypnobirth_roll.gif);
         }

div.hypnobirthselect {
    float: left;
	width: 209px; height: 105px;
	}
   div.hypnobirthselect span {
      display:block;
  	  }
	 	 div.hypnobirthselect a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/hypnobirth_sel.gif);
		 }	

div.doula {
    float: left;
	width: 144px; height: 105px;
	}
   div.doula span {
      display:block;
  	  }
	 	 div.doula a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/doula.gif);
   	   	 }
		 div.doula a:link {
		 background: url(menu/doula.gif);
   	     }
	     div.doula a:hover {
		 background: url(menu/doula_roll.gif);
   	     }
	     div.doula a:focus {
		 background: url(menu/doula_roll.gif);
         }

div.doulaselect {
    float: left;
	width: 144px; height: 105px;
	}
   div.doulaselect span {
      display:block;
  	  }
	 	 div.doulaselect a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/doula_sel.gif);
		 }	
		 
div.resources {
    float: left;
	width: 194px; height: 105px;
	}
   div.resources span {
      display:block;
  	  }
	 	 div.resources a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/resources.gif);
   	   	 }
		 div.resources a:link {
		 background: url(menu/resources.gif);
   	     }
	     div.resources a:hover {
		 background: url(menu/resources_roll.gif);
   	     }
	     div.resources a:focus {
		 background: url(menu/resources_roll.gif);
         }

div.resourcesselect {
    float: left;
	width: 194px; height: 105px;
	}
   div.resourcesselect span {
      display:block;
  	  }
	 	 div.resourcesselect a {
	display: block;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url(menu/resources_sel.gif);
		 }	
		 
		 
		 
.clearfix {display: inline-block;}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/
* html #contentwrapper {
  margin-right: -7px;
  }
* html .Navcontainer {
  margin-right: 20px;
  }
  * html #leftcol {
  margin-left: 7px;
  }