/* Client:  Dune Hypnotherapy
** Date:    December 2005
** Author:  Moustique Design http://www.moustique.net/
 */
 
 /*=================================================================================
--------------------------------------------------- Layout Divs ----------*/
#wrapper {
width:750px;
margin-left:auto;
margin-right:auto;
}
 
#wrapper:after {/*to contain floated children*/
content:" ";
display:block;
clear:both;
visibility:hidden;
}
 
#contentWrapper {
width:746px;
padding:0;
clear:left;
float:left;
border-right:2px solid #DCDCBA;
border-left:2px solid #DCDCBA;
}


#leftContentText { /*500px in total*/
width:460px;
float:left;
padding: 70px 20px 20px 20px;
border:0;
margin:0;
}

#cd_ContentText { 
width:600px;
float:left;
padding: 70px 20px 0px 20px;
border:0;
margin:0;
}

#rightContentImages { /*240px in total*/
width:190px;
float:right;
padding: 100px 30px 20px 20px;
margin:0;
}

#rightContentImages * { text-align:center;}
 
#moustiqueDesignNote {
clear:both;
float:right;
padding:10px 0;}

  /*------- Menu ------*/
#nav {
padding: 0;
margin: 0;
list-style: none;
background-color:#DCDCBA;
color:#000;
width:100%;
float:left; /*needed to contain floated children. 
The children when contained will give the nav its height.
If it has height, then the background colour will show.*/
}


#nav li { /* all list items in the nav bar */
float: left;
position: relative; /*so that we can use this
as a reference point for positioning the child submenu.*/
padding:0;
margin:0;
}

* html body #nav li {width:7em;} /*for Mac/IE, keeps nav links floated correctly */


#nav li a { /* formats the look of the menu items */
display:block;
margin:0;
padding: 6px 20px 0 20px;
text-decoration:none;
font-weight:bold;
color:#000;
background-color: transparent;
height:23px;
}

* html body #nav li a {/*for Mac/IE, keeps nav links formatted nicely */
margin:0;
padding:6px 5px 0 5px;
text-align:center; /*Mac/IE sets this as left by default, 
which messes up the spacing between items, so we centre it*/
}

#nav li a:hover,
#nav li a#current {/*formats main menu for hover state and current-page state*/
color: #bb2838;
background-color: #DCDCBA;
}

/*-------- SUBMENU ---------*/
#nav li ul { /* submenu background*/
display: none;
list-style:none;
}

#nav li > ul { /* to override top and left in browsers other than IE, 
which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#nav li:hover ul,
#nav li.over ul { /* positions and formats submenu background */
display: block;
background-color: #fff;
color:#000;
float:none;
position: absolute;
top: 29px;
left: 0;
padding:0;
margin:0;
}

#nav li:hover ul li a,
#nav li.over ul li a {/*formats submenu individual items */
background-color:#EFF2C3;
color:#000;
text-decoration: none;
font-weight:normal;
margin:0 0 1px 0;
padding:5px 7px;
width:120px;
height:100%;
text-align:left;/*need to override earlier Mac/IE text-centre rule on the parent*/
}

#nav li:hover ul li a:hover,
#nav li.over ul li a:hover { /*formats submenu links for hover */
color: #000;
background-color: #DCDCBA;
}

#nav li ul li a#current {/*sets the current (where the user is) submenu item to be highlighted*/
color: #bb2838;
background-color:#EFF2C3;}
/*=================================================================================
--------------------------------------------------- Tables ----------*/
table {
margin:0;
text-align:left;
}

td, th {
vertical-align:top;
}

/*=================================================================================
--------------------------------------------------- Images ----------*/
img {border:0;}

 /* =========================================================================
------------------------------------------------------------- Typography --
Thanks to Owen Briggs for his useful research on using relative units: percentages
and ems, for font sizing in CSS, written up at:
http://www.thenoodleincident.com/tutorials/typography/
I have read and modified for use here. Whatever remains of his comments is either in tact
(if I couldn't say it better myself) or modified (if they were not relevant).
*/

body {
	font-family: Verdana, Arial, Geneva, sans-serif;
	font-size: 76%;/* font sizing in ems, baby. if you want to change anything, just change this.*/
	/*funny thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers. poop.*/
	color: #000;
	background-color:#fff;
	line-height:1.3em;
	}


h1 {
	font-size: 1.3em;
	font-weight: bold;
	color: #BB2838;
	background-color:transparent;
	line-height:1.5em;
}

h2 {
	font-size: 1.2em;
	margin: 1em 0em;
	font-weight: bold;
	color:#9F8F57;
	background-color:transparent;
	}

h3 {
	font-size: 1.2em;
	font-weight: bold;
	color: #666;
	margin: 1.2em 0em 1.2em 0em;
	}
h4 {
	font-size: 1.2em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}

ol, ul, li {
font-size: 1.0em;
line-height: 1.0em;
margin-top: 0.2em;
margin-bottom: 0.1em;
}

li {
line-height: 1.4em;
margin-top: 0.7em;
margin-bottom: 0.7em;
}


#leftContentText li {
margin: 0;
list-style-position:inside;
}

.li_3 {
font-size: 75%;
}


input, select, textarea {
font-size: 0.9em;
line-height: 1.3em;
}

input.submit {font-weight:bold;}
input.email {color:#666; text-align:center; background-color:transparent;}

strong {font-weight: bold;}

em {font-style:italic;}

hr {border:1px dotted #333;color:#fff;margin:10px 0px; 	background-color:transparent;}
  /*=================================================================================
--------------------------------------------------- Links ----------*/
a:link, a:visited, a:active {
color:#B0B093;
background-color:transparent;
font-weight:bold;
}

a:hover {
color:#000;
background-color:transparent;
font-weight:bold;
}

#moustiqueDesignNote a {font-weight:normal; font-size:0.9em;}

#moustiqueDesignNote a:link,
#moustiqueDesignNote a:visited,
#moustiqueDesignNote a:active {
color:#DCDCBA;
background-color:transparent;
}

#moustiqueDesignNote a:hover {color:#666; background-color:transparent;}

  /*=================================================================================
--------------------------------------------------- Classes ----------*/
.floatright { float:right;}
.floatleft {float:left;}
.centre {margin-left:auto; margin-right: auto;}

dl {margin:0;}
dt {margin:2em 0 0 0; font-weight:bold;}
dd {margin:1em 0 0 0;}