/* -------------------------------------------------------------------------- client: [British Association for Sexual and Relationship Therapy (BASRT)] version: [1.0] date: [17/10/08] website: [www.tandf.co.uk/journals] -----------------------------------------------------------------------------*/ /* Remove default styles -----------------------------------------------------------------------------*/ * { margin: 0; padding: 0; border: 0; } /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ /* http://creativecommons.org/licenses/by/2.0 */ /* This style sheet is licensed under a Creative Commons License. */ /* Purpose: undo some of the default styling of common (X)HTML browsers */ /* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */ :link, :visited { text-decoration: none; } /* no list-markers by default, since lists are used more often for semantics */ ul, ol { list-style: none; } /* avoid browser default inconsistent heading font-sizes */ /* and pre/code too */ h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; } /* remove the inconsistent (among browsers) default ul,ol padding or margin */ /* the default spacing on headings does not match nor align with normal interline spacing at all, so let's get rid of it. */ /* zero out the spacing around pre, form, body, html, p, blockquote as well */ /* form elements are oddly inconsistent, and not quite CSS emulatable. */ /* nonetheless strip their margin and padding as well */ ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; } /* whoever thought blue linked image borders were a good idea? */ a img, :link img, :visited img { border: none; } /* de-italicize address */ address { font-style: normal; } /* Styles for layout -----------------------------------------------------------------------------*/ .clear { clear: both; } .right { float: right; } .left { float: left; } /* Default links -----------------------------------------------------------------------------*/ a, a:link, a:visited { color: #2C92A5; text-decoration: underline; outline: 0; font-size: 100%; } /* these links may be 85% */ a:hover { color: #719715; text-decoration: underline; font-size: 100%; } a:active { color: #719715; text-decoration: underline; font-size: 100%; outline: 0; } /* Font specs -----------------------------------------------------------------------------*/ h1 { color: #A52CA4; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.6em; line-height: 1.2em; font-weight: bold; margin: 0; padding: 10px 0 6px 0; } h2 { color: #2C92A5; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.4em; line-height: 1.2em; font-weight: bold; margin: 0; padding: 10px 0 6px 0; } h3 { color: #333; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; line-height: 1.2em; font-weight: bold; margin: 0; padding: 0 0 6px 0; } h4 { color: #333; font-family: Verdana, Arial, sans-serif; font-size: 1.0em; font-weight: bold; line-height: 1.6em; margin: 0 0 8px 0;} p { color: #333; font-family: Arial, Verdana, sans-serif; font-size: 1.0em; line-height: 1.6em; margin: 0 0 8px 0; } /* -----------------------------------------------------------------------------*/ .pink { color: #A52CA4; } .green { color: #719715; } .uppercase { text-transform: uppercase; font-size: 0.9em; font-weight: bold; } img.pad { padding: 0 1em 0.5em 0; float: left; } img.border-grey { border: 5px solid #e1e1e1; margin: 0 1em 0.5em 0; float: left; } .pad-left { padding-left: 1em; float: left; } .splitul { width: 300px; margin-right: 50px; float: left; } .border { border-top: 1px dotted #666; margin: 5px 0 0 0; } ul.subpages { margin: 0 0 1em 0; line-height: 1.6em; } ul.subpages li { background: url(../images/general/gen_butt.gif) top left no-repeat; padding: 0 0 0 2em; } ul.gen { list-style: disc; margin: 0 0 1em 1em; padding-left: 1em; line-height: 1.6em; } ul.gen-bott { list-style: disc; margin: 0 0 0 1em; padding-left: 1em; line-height: 1.6em; } ul.nodisc { margin: 0 0 1em 0; padding-left: 1em; line-height: 1.6em; } /* -----------------------------------------------------------------------------*/ body { background-color: #fff; font: 80% Arial, Helvetica, sans-serif; color: #333; text-align: center; margin: 0; padding: 0; } /* Page structure -----------------------------------------------------------------------------*/ div#header-bg { height: 92px; background: url(../images/general/bg_header.jpg) top left repeat-x; border-bottom: 2px solid #fff; } div#header-wrapper { width: 940px; margin: 0 auto; padding: 0 10px; text-align: left; } img#logo { width: 183px; height: 92px; float: left; } h1#skip { float: left; display: none; } div#header-right { width: 270px; height: 92px; float: right; } div#searchbox { width: 250px; padding: 5px 10px; float: right; /* background: url(../images/general/searchbox_bg.gif) top right no-repeat; */ } /* div#searchbox input { margin-right: 5px; float: right; } div#searchbox p { color: #2C92A5; font-weight: bold; font-size: 12px; padding-right: 5px; float: right; } div#searchbox #search { width: 150px; height: 20px; border: 1px solid #c8c8c8; } div#searchbox #submit { width: 32px; height: 20px; border: 1px solid #c8c8c8; } */ div#font-size { width: 260px; height: 30px; float: right; text-align: right; padding: 5px; } div#font-size a { text-decoration: none; border-bottom: none; } div#font-size a img { width: 30px; height: 30px; } div#menu-bg { background: #68C5D6 url(../images/general/bg_mainnav.jpg) bottom left repeat-x; } div#menu-wrapper { width: 940px; margin: 0 auto; padding: 0; position: relative; } div#menu-underbg { height: 4px; background: url(../images/general/under_bg_mainnav.jpg) bottom left repeat-x; } div#feature-bg { background: url(../images/general/bg_page.jpg) top left repeat-x; margin-top: 10px; } div#feature-wrapper { width: 940px; margin: 0 auto; padding: 20px 10px; text-align: left; } div#sidenav-wrapper { width: 256px; float: left; } div#maincontent { width: 650px; /*margin-left: 34px;*/ float: right; } div#footer-bg { background: #eaeaea top left repeat-x; } div#footer-wrapper { width: 940px; margin: 0 auto; padding: 10px; text-align: left; } /* Main navigation -----------------------------------------------------------------------------*/ #menu { font: 1em Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #menu a { text-align: center; display: block; white-space: nowrap; margin: 0; padding: 0.5em 0.7em 0.7em 0.7em; } /* Top bar main link specs -------------------------------------------------------------------------*/ #menu a:link, #menu a:visited { color: #fff; text-decoration: none; } #menu a:hover, #menu a:active, /* Selected main link for Home, About, Media, Support, Links & Contact -------------------------------------------------------------------------*/ #homepage #menu a.home_nav, #homepage #menu a.home_nav:visited, #about_page #menu a.about_nav, #about_page #menu a.about_nav:visited, #media_page #menu a.media_nav, #media_page #menu a.media_nav:visited, #support_page #menu a.support_nav, #support_page #menu a.support_nav:visited, #links_page #menu a.links_nav, #links_page #menu a.links_nav:visited, #contact_page #menu a.contact_nav, #contact_page #menu a.contact_nav:visited, /* Selected main link for Our therapy -------------------------------------------------------------------------*/ #therapy_page #menu a.alltherapy_nav, #therapy_page #menu a.alltherapy_nav:visited, #find_page #menu a.alltherapy_nav, #find_page #menu a.alltherapy_nav:visited, #listing_page #menu a.alltherapy_nav, #listing_page #menu a.alltherapy_nav:visited, #approach_page #menu a.alltherapy_nav, #approach_page #menu a.alltherapy_nav:visited, #complain_page #menu a.alltherapy_nav, #complain_page #menu a.alltherapy_nav:visited, #ethic_page #menu a.alltherapy_nav, #ethic_page #menu a.alltherapy_nav:visited, /* Selected main link for Common problems -------------------------------------------------------------------------*/ #sexual_page #menu a.allprob_nav, #sexual_page #menu a.allprob_nav:visited, #relationship_page #menu a.allprob_nav, #relationship_page #menu a.allprob_nav:visited, #tip_page #menu a.allprob_nav, #tip_page #menu a.allprob_nav:visited, /* Selected main link for Membership -------------------------------------------------------------------------*/ #join_page #menu a.allmember_nav, #join_page #menu a.allmember_nav:visited, #member_page #menu a.allmember_nav, #member_page #menu a.allmember_nav:visited, #doc_page #menu a.allmember_nav, #doc_page #menu a.allmember_nav:visited, #event_page #menu a.allmember_nav, #event_page #menu a.allmember_nav:visited, #journal_page #menu a.allmember_nav, #journal_page #menu a.allmember_nav:visited, #course_page #menu a.allmember_nav, #course_page #menu a.allmember_nav:visited, #involve_page #menu a.allmember_nav, #involve_page #menu a.allmember_nav:visited { color: #176472; text-decoration: underline; background: #64C3D5 top left repeat; } #menu .submenu a { text-align: left; display: block; white-space: nowrap; margin: 0; padding: 0.5em; } /* Dropdown links specs -------------------------------------------------------------------------*/ #menu .submenu a:link, #menu .submenu a:visited { color: #666; text-decoration: none; background: #f7f7f7 top left repeat; } #menu .submenu a:hover, #menu .submenu a:active, /* Selected dropdown link for Our therapy pages -------------------------------------------------------------------------*/ #therapy_page #menu .submenu a.therapy_nav, #therapy_page #menu .submenu a.therapy_nav:visited, #find_page #menu .submenu a.find_nav, #find_page #menu .submenu a.find_nav:visited, #listing_page #menu .submenu a.listing_nav, #listing_page #menu .submenu a.listing_nav:visited, #approach_page #menu .submenu a.approach_nav, #approach_page #menu .submenu a.approach_nav:visited, #complain_page #menu .submenu a.complain_nav, #complain_page #menu .submenu a.complain_nav:visited, #ethic_page #menu .submenu a.ethic_nav, #ethic_page #menu .submenu a.ethic_nav:visited, /* Selected dropdown link for Common problems pages -------------------------------------------------------------------------*/ #sexual_page #menu .submenu a.sexual_nav, #sexual_page #menu .submenu a.sexual_nav:visited, #relationship_page #menu .submenu a.relationship_nav, #relationship_page #menu .submenu a.relationship_nav:visited, #tip_page #menu .submenu a.tip_nav, #tip_page #menu .submenu a.tip_nav:visited, /* Selected dropdown link for Memebership pages -------------------------------------------------------------------------*/ #join_page #menu .submenu a.join_nav, #join_page #menu .submenu a.join_nav:visited, #member_page #menu .submenu a.member_nav, #member_page #menu .submenu a.member_nav:visited, #doc_page #menu .submenu a.doc_nav, #doc_page #menu .submenu a.doc_nav:visited, #event_page #menu .submenu a.event_nav, #event_page #menu .submenu a.event_nav:visited, #journal_page #menu .submenu a.journal_nav, #journal_page #menu .submenu a.journal_nav:visited, #course_page #menu .submenu a.course_nav, #course_page #menu .submenu a.course_nav:visited, #involve_page #menu .submenu a.involve_nav, #involve_page #menu .submenu a.involve_nav:visited { color: #176472; text-decoration: underline; background: #64C3D5 top left repeat; } #menu ul { list-style: none; margin: 0; padding: 0; float: left; } #menu ul.submenu { width: 18em; border: 1px solid #c8c8c8; } #menu li { position: relative; min-height: 1px; vertical-align: bottom; } #menu ul ul { position: absolute; z-index: 500; top: 4.4em; left: 2em; display: none; margin: -2em 0 0 -2em; } div#menu li:hover { cursor: pointer; z-index: 100; } div#menu li:hover ul ul, div#menu li li:hover ul ul, div#menu li li li:hover ul ul { display: none; } div#menu li:hover ul, div#menu li li:hover ul, div#menu li li li:hover ul { display: block; } /* Side navigation -----------------------------------------------------------------------------*/ #sidenav { width: 256px; background: #2c92a5 top left repeat; padding: 10px 0; } #sidenav li { width: 236px; border-bottom: 1px dotted #fff; margin: 0 10px; } #sidenav li a { font: 1em Verdana, Arial, sans-serif ; font-weight: normal; display: block; padding: 6px 5px; } /* Side nav links specs -------------------------------------------------------------------------*/ #sidenav a:link, #sidenav a:visited { color: #fff; text-decoration: none; } #sidenav a:hover, #sidenav a:active, /* Side nav links for Our therapy pages -------------------------------------------------------------------------*/ #therapy_page #sidenav a.therapy_nav, #therapy_page #sidenav a.therapy_nav:visited, #find_page #sidenav a.find_nav, #find_page #sidenav a.find_nav:visited, #listing_page #sidenav a.listing_nav, #listing_page #sidenav a.listing_nav:visited, #approach_page #sidenav a.approach_nav, #approach_page #sidenav a.approach_nav:visited, #complain_page #sidenav a.complain_nav, #complain_page #sidenav a.complain_nav:visited, ethic_page #sidenav a.ethic_nav, #ethic_page #sidenav a.ethic_nav:visited, /* Side nav links for Common problems pages -------------------------------------------------------------------------*/ #sexual_page #sidenav a.sexual_nav, #sexual_page #sidenav a.sexual_nav:visited, #relationship_page #sidenav a.relationship_nav, #relationship_page #sidenav a.relationship_nav:visited, #tip_page #sidenav a.tip_nav, #tip_page #sidenav a.tip_nav:visited, /* Side nav links for Membership pages -------------------------------------------------------------------------*/ #join_page #sidenav a.join_nav, #join_page #sidenav a.join_nav:visited, #member_page #sidenav a.member_nav, #member_page #sidenav a.member_nav:visited, #doc_page #sidenav a.doc_nav, #doc_page #sidenav a.doc_nav:visited, #event_page #sidenav a.event_nav, #event_page #sidenav a.event_nav:visited, #journal_page #sidenav a.journal_nav, #journal_page #sidenav a.journal_nav:visited, #course_page #sidenav a.course_nav, #course_page #sidenav a.course_nav:visited, #involve_page #sidenav a.involve_nav, #involve_page #sidenav a.involve_nav:visited { color: #176472; text-decoration: underline; background: #64C3D5 top left repeat; } div#sidenav-roof { width: 236px; background: url(../images/general/submenu_roof.jpg) top left no-repeat; padding: 3px 10px; } /* Footer navigation -----------------------------------------------------------------------------*/ ul#footernav { width: 336px; float: left; } #footernav li { font-size: 0.9em; float: left; padding: 10px 20px 10px 0; } #footernav li a { font: 100% Arial, Verdana, sans-serif; font-weight: normal; color: #333; } #footernav a:link, #footernav a:visited { text-decoration: none; } #footernav a:hover, #footernav a:active, #access_page #footernav a.access_nav, #privacy_page #footernav a.privacy_nav, #sitemap_page #footernav a.sitemap_nav, #copy_page #footernav a.copy_nav, #access_page #footernav a.access_nav:visited, #privacy_page #footernav a.privacy_nav:visited, #sitemap_page #footernav a.sitemap_nav:visited, #copy_page #footernav a.copy_nav:visited { text-decoration: underline; } p.small { font-size: 0.9em; line-height: 1.1em; font-style: italic; padding: 10px 0 0 0; width: 520px; float: right; } /* Homepage -----------------------------------------------------------------------------*/ #homepage div#page { width: 940px; margin: 0 auto; padding: 5px 10px 10px 10px; text-align: left; } #homepage div#banner { width: 940px; height: 148px; margin: 5px 0 10px 0; background: url(../images/pg_home/banner.jpg) top left no-repeat; } #homepage div#page-left { width: 460px; float: left; } #homepage div#page-right { width: 460px; float: right; } #homepage div#feature-bg { margin-top: 0; } #homepage div.top-container { width: 440px; background: url(../images/pg_home/grey_container_top2.gif) top left no-repeat; padding: 5px 10px; } #homepage div.bot-container { width: 460px; height: 20px; background: url(../images/pg_home/grey_container_bottom2.gif) bottom left no-repeat; margin-top: -5px; } #homepage div#join { width: 210px; float: left; } #homepage div#donate { width: 210px; float: right; } #homepage div#join h2 a, #homepage div#join h2 a:link, #homepage div#join h2 a:visited { color: #719715; text-decoration: none; } #homepage div#donate h2 a, #homepage div#donate h2 a:link, #homepage div#donate h2 a:visited { color: #2C92A5; text-decoration: none; } #homepage div#join h2 a:hover, #homepage div#join h2 a:active, #homepage div#donate h2 a:hover, #homepage div#donate h2 a:active { color: #719715; text-decoration: underline; } ul#feature-home { display: inline; } ul#feature-home li { width: 300px; float: left; } ul#feature-home li a.white { font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.4em; font-weight: bold; color: #fff; } ul#feature-home li a.white:link, ul#feature-home li a.white:visited { text-decoration: none; } ul#feature-home li a.white:hover, ul#feature-home li a.white:active { text-decoration: underline; } .marg { margin: 0 20px; } div#feature-roof-blue { background: url(../images/pg_home/feature_roof_blue.gif) top left no-repeat; padding: 10px; } div#feature-roof-pink { background: url(../images/pg_home/feature_roof_pink.gif) top left no-repeat; padding: 10px; } div#feature-roof-green { background: url(../images/pg_home/feature_roof_green.gif) top left no-repeat; padding: 10px; } /* Submenu pages -----------------------------------------------------------------------------*/ div#hidden-text1 { width: 650px; margin-bottom: 10px; display: none; text-align: right; float: right; } div#main-text1 p { height: 30px; background: url(../images/general/graphic_arrow_green.gif) top left no-repeat; padding: 0 0 0 2.6em; } .icon { height: 30px; background: url(../images/general/graphic_arrow_pink.gif) top left no-repeat; padding: 0 0 0 2.6em; } h2.border.couple { padding-left: 2.3em; height: 30px; background: url(../images/general/graphic_couple.gif) center left no-repeat; } h2.border.hands { padding-left: 2.3em; height: 30px; background: url(../images/general/graphic_hands.gif) center left no-repeat; } .top-butt { background: url(../images/general/top_butt.gif) top left no-repeat; padding-left: 18px; } a.top-butt, a.top-butt:link, a.top-butt:visited { color: #A52CA4; text-decoration: underline; } a.top-butt:hover, a.top-butt:active { color: #719715; text-decoration: underline; } .photo-right { margin-left: 7px; } /* Main nav pages with no dropdown -----------------------------------------------------------------------------*/ div#nosidenav { height: 8px; background-color: #2c92a5; } /* Therapist database -----------------------------------------------------------------------------*/ p.therapist-list { background-color: #eaeaea; padding: 10px; } .data-header { float: left; width: 150px; } .data-spec { float: right; width: 450px; text-align: left; } .date-font { color: #2C92A5; font-family: Verdana, Arial, sans-serif; font-size: 1.0em; font-weight: bold;} div#main-text1 p.return { background: url(../images/general/graphic_arrow_pink2.gif) top left no-repeat; } h2 a.pink:link, h2 a.pink:visited { color: #A52CA4; } h2 a.pink:hover, h2 a.pink:active { color: #9bcb28; } p#unavailable { margin-left: 34px; font-weight: bold; text-align: center; } /* Misc -----------------------------------------------------------------------------*/ .normal-text { font-family: Arial, Verdana, sans-serif; font-size: 1.0em; font-weight: normal; } .small-text { font-family: Arial, Verdana, sans-serif; font-size: 0.8em; font-weight: normal; text-transform: uppercase; }