/* Generic styles */
.InfopageHeading { font-size: 14pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: black; font-weight: bold; line-height: 80%;}
.bodytext { font-size: 11pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: black;}
.WDIDWbodytextsmall {font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: black; line-height: 140% }
.sectionbodytext { font-size: 12pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: black }
.bodytextbold { font-size: 11pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; color: black }
.bodytextwhite { font-size: 11pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: white;}
.TopicHeadingWhite { font-size: 16pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: white; text-align: center;}
.TopicHeading{ font-size: 16pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: black; text-align: center;}
.bodytextRed { font-size: 12pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; color: red;}

.bodytextsmall {font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; line-height: 110%; color: black; }
.bodytextsmall A:link{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
.bodytextsmall A:visited{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
.bodytextsmall A:active{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
.bodytextsmall A:hover{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}

.bodytextwhitesmall {font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; font-style: normal; line-height: 110%; color: #FFFFFF; }
.bodytextwhitesmall A:link{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: underline;}
.bodytextwhitesmall A:visited{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: underline;}
.bodytextwhitesmall A:active{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: underline;}
.bodytextwhitesmall A:hover{font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: underline;}

.WDYTbodytext {font-size: 10pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: black; line-height: 18px}
.WDYTbodytextsmall {font-size: 8pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: black; line-height: 130%}
.WDYTbodytextsmall A:link{font-size: 8pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
.WDYTbodytextsmall A:visited{font-size: 8pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
.WDYTbodytextsmall A:active{font-size: 8pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
.WDYTbodytextsmall A:hover{font-size: 8pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: #554593; text-decoration: underline;}
#content{position: absolute; z-index: 11; height: 373px; top: 0px; left: auto; width: auto;}

A:link {color: #554593; text-decoration: underline }
A:visited {color: #554593; text-decoration: underline}
A:active {color: #554593; text-decoration: underline}
A:hover {color: #554593; text-decoration: underline}

#menu{position: absolute; left: 0px; top: 0px; width: 805px; height: 44px; z-index: 200;}
#menuBG{position: absolute; left: 0px; top: 0px; width: 100%; min-width: 700px; height: 44px; z-index: 0; overflow: hidden; overflow-clip: rect(0, auto, 44px, 0); }
.menuTopic{font-size: 8pt; font-family: 'Comic Sans MS',Arial, Helvetica, sans-serif; color: rgb(255,255,255); font-weight: bold; line-height: 100%}

#goMenu{position: absolute; left: 566px; top: 338px; width: 122px; height: 35px; z-index: 200;}
/*-------------------------------- Section and topic page styles ----------------------------------*/
#left{position: absolute; left: 0px; top: 44px; width: 58px; height: 329px; z-index: 0;}
#starHeading{position: absolute; left: 58px; top: 44px; width: 210px; height: 113px; z-index: 0;}
#understar{position: absolute; left: 58px; top: 157px; width: 115px; height: 13px; z-index: 0;}

#contentrht{position: absolute; left: 173px; top: 157px; width: 95px; height: 179px; z-index: 0;}
#bottom{position: absolute; left: 58px; top: 336px; width: 671px; height: 37px; z-index: 0;}
#scrollheadingGraphic{position: absolute; left: 268px; top: 44px; width: 461px; height: 55px; z-index: 0;}
#scrollHeadingText{position: absolute; left: 268px; top: 50px; width: 440px; height: 55px; z-index: 1;}
#contenttop{position: absolute; left: 268px; top: 99px; width: 461px; height: 40px; z-index: 0;}
#right{position: absolute; left: 729px; top: 44px; width: 76px; height: 329px; z-index: 0;}

/* Specific to section.cfm */
#sectionintrotext{position: absolute; left: 268px; top: 139px; width: 461px; height: 197px; z-index: 1;}
#sectionIntroTextBG{position: absolute; left: 268px; top: 139px; width: 461px; height: 197px; z-index: 0; clip: rect(0,461px,197px,0)}

/* Specific to topic.cfm */
#infooverlaytext{position: absolute; left: 58px; top: 170px; width: 115px; height: 166px; z-index: 1;}
#infooverlaytextBG{position: absolute; left: 58px; top: 170px; width: 115px; height: 166px; z-index: 0; clip: rect(0,115px,166px,0)}

/*-------------- End section and topic styles ----------------*/

/*---------------------------- WHATS HAPPENING TO ME ---------------------------------*/
#menuWHTM{position: absolute; left: 0px; top: 0px; width: 822px; height: 44px; z-index: 200;}

/* ------------------------------ LOOKING AFTER MYSELF --------------------------------- */
#menuLAID{position: absolute; left: 0px; top: 0px; width: 805px; height: 44px; z-index: 200;}

/* ------------------------------------- ABOUT SEX ------------------------------------------*/
#menuASID{position: absolute; left: 0px; top: 0px; width: 805px; height: 44px; z-index: 200;}

/*------------------------------- PARENTS AND TEACHERS ---------------------------------*/
#menuPT{position: absolute; left: 0px; top: 0px; width: 805px; height: 44px; z-index: 200;}

/* ------------------------------------- MAKING BABIES -------------------------------------*/
#menuMB{position: absolute; left: 0px; top: 0px; width: 805px; height: 44px; z-index: 200}

/*---------------------------- SITE FOOTER STYLES -----------------------------*/
#footer{position: absolute; left: 0px; top: 373px; height: 48px; z-index: 10}
#footerLeft{position: absolute; width: 300px; left: 0px; height: 48px; top: 373px; z-index: 5; visibility: visible;}
#footerRight{position: absolute; width: 300px; left: 791px; height: 48px; top: 373px; z-index: 5; visibility: visible;}

#conveyer{position: absolute; height: 48px; width: 239px; left: 0px; top: 0px; z-index: 10;}
#zigzag{position: absolute; height: 48px; width: 50px; left: 239px; top: 0px; z-index: 10;}
#pipe{position: absolute; height: 48px; width: 54px; left: 289px; top: 0px; z-index: 10;}
#zigzag2{position: absolute; height: 48px; width: 102px; left: 343px; top: 0px; z-index: 10;}
#burner{position: absolute; height: 48px; width: 43px; left: 445px; top: 0px; z-index: 10;}
#noFacts{position: absolute; height: 48px; width: 346px; left: 488px; top: 0px; z-index: 10;}
#amazingFacts{position: absolute; height: 48px; width: 297px; left: 488px; top: 0px; z-index: 10;}
#dots{position: absolute; height: 48px; width: 49px; left: 785px; top: 0px; z-index: 10;}

#footerSound{position: absolute; height: 48px; width: 20px; left: 810px; top: 2px; z-index: 10;}

/* Styles for the hormone popups that are accessed through the footer */

.testhormonetop{position: absolute; left: 0px; top: 0px; width: 300px; height: 52px; z-index: 2000}
.testhormonemiddle{position: absolute; left: 0px; top: 52px; width: 300px; height: 191px; z-index: 2000}
.testhormonebottom{position: absolute; left: 0px; top: 243px; width: 230px; height: 57px; z-index: 2000}
.testhormoneclose{position: absolute; left: 230px; top: 243px; width: 70px; height: 57px; z-index: 2000}

.oesthormonetop{position: absolute; left: 0px; top: 0px; width: 300px; height: 62px; z-index: 2000}
.oesthormonemiddle{position: absolute; left: 0px; top: 62px; width: 300px; height: 180px; z-index: 2000}
.oesthormonebottom{position: absolute; left: 0px; top: 242px; width: 230px; height: 58px; z-index: 2000}
.oesthormoneclose{position: absolute; left: 232px; top: 242px; width: 68px; height: 58px; z-index: 2000}

.pherhormonetop{position: absolute; left: 0px; top: 0px; width: 300px; height: 62px; z-index: 2000}
.pherhormonemiddle{position: absolute; left: 0px; top: 62px; width: 300px; height: 180px; z-index: 2000}
.pherhormonebottom{position: absolute; left: 0px; top: 242px; width: 230px; height: 58px; z-index: 2000}
.pherhormoneclose{position: absolute; left: 230px; top: 242px; width: 70px; height: 58px; z-index: 2000}

.pheromone{position: absolute; left: 110px; top: 73px; width: 300px; height: 300px; visibility: hidden; z-index: 2000}
.testosterone{position: absolute; left: 180px; top: 73px; width: 300px; height: 300px; visibility: hidden; z-index: 2000}
.oestrogen{position: absolute; left: 350px; top: 73px; width: 300px; height: 300px; visibility: hidden; z-index: 2000;}

.amazingFact{position: absolute; left: 150px; top: 70px; width: 294px; height: 272px; visibility: hidden; z-index: 2001}
.amazingText{position: absolute; left: 310px; top: 100px; width: 115px; height: 150px; visibility: hidden; z-index: 2002;}