body{ font-family: 'HelveticaNeueW01-65Medi', Helvetica, Arial, sans-serif; color:#3f4851; font-size:12px; line-height:16px; } .clearfix{ clear:both; } /* mobile first */ #content{ border:1px solid #dddddd; position: relative; } #header{ position:relative; background: url(../img/header_bg_mobile.gif) no-repeat top; padding-top:13px; } #header h1{ position:absolute; background: url(../img/title_mobile.png) no-repeat top left; width:143px; height:67px; left:24px; top:35px; } #header h2{ display:none; } #header #logo{ position:absolute; background: url(../img/logo_mobile.png) no-repeat top left; width:64px; height:30px; left:24px; top:113px; cursor:pointer;} #header h1 span, #header #logo span{ display:none; } #header p{ padding:24px; font-size:16px; line-height:20px; } #heroimage{ height: 149px; background: no-repeat top; cursor:pointer; } .hivbasics #heroimage{ background-image:url(../img/hero_hivbasics_mobile.png); } .testing #heroimage{ background-image:url(../img/hero_testing_mobile.png); } .condomuse #heroimage{ background-image:url(../img/hero_condomuse_mobile.png); } .pep #heroimage{ background-image:url(../img/hero_pep_mobile.png); } .posneg #heroimage{ background-image:url(../img/hero_posneg_mobile.png); } .whatsstatus #heroimage{ background-image:url(../img/hero_whatsstatus_mobile.png); } .topsbottoms #heroimage{ background-image:url(../img/hero_topsbottoms_mobile.png); } .withdrawal #heroimage{ background-image:url(../img/hero_withdrawal_mobile.png); } .viralload #heroimage{ background-image:url(../img/hero_viralload_mobile.png); } .contacts #heroimage{ background-image:url(../img/hero_contacts_mobile.png); } #thumbnails{ background:#dcdedb; padding:24px 0; } #thumbnails li{ width:50%; float:left; background:url(../img/thumbnail_bg_mobile.png) no-repeat top; margin-bottom:20px; } #thumbnails li:hover{ background-image:url(../img/thumbnail_bg_mobile_on.png); } #thumbnails li a{ display:block; color:#b0b5af; font-size:14px; text-transform: uppercase; width:131px; height:40px; margin:0 auto; padding:175px 0 0 0; background: no-repeat 50% 10px; } #thumbnails a:link, #thumbnails a:visited{ text-decoration:none; } #thumbnails .hivbasics a{ background-image:url(../img/thumb_hivbasics_mobile.jpg); } #thumbnails .testing a{ background-image:url(../img/thumb_testing_mobile.jpg); } #thumbnails .condomuse a{ background-image:url(../img/thumb_condomuse_mobile.jpg); } #thumbnails .pep a{ background-image:url(../img/thumb_pep_mobile.jpg); } #thumbnails .posneg a{ background-image:url(../img/thumb_posneg_mobile.jpg); } #thumbnails .whatsstatus a{ background-image:url(../img/thumb_whatsstatus_mobile.jpg); } #thumbnails .topsbottoms a{ background-image:url(../img/thumb_topsbottoms_mobile.jpg); } #thumbnails .withdrawal a{ background-image:url(../img/thumb_withdrawal_mobile.jpg); } #thumbnails .viralload a{ background-image:url(../img/thumb_viralload_mobile.jpg); } #thumbnails .contacts a{ background-image:url(../img/thumb_contacts_mobile.jpg); } h2, h3{ font-family: 'HelveticaNeueW01-75Bold', Helvetica, Arial, sans-serif; color: #b1b6b0; text-transform:uppercase; margin-bottom:24px; font-size:20px; } h2{ font-size:26px; line-height:26px; } h3{ font-size:16px; margin:15px 0 11px 0; } hr{ width:60px; border:none; border-top:1px solid #b1b6b0; margin:21px 0; padding:0; } .callout{ display:none; } #copy{ margin:25px; position:relative; min-height:300px; } #copy p{ margin-bottom:18px; } #copy ul{ margin-left:15px; padding-left:25px; list-style:disc; margin-bottom:18px;} #copy ul li{ margin-bottom:5px; } #copy a:link, #copy a:visited{ color: #e41e2b;} #navigation{ position:relative; border-top:4px solid #3f484d; min-height:37px; text-transform:uppercase; } #navigation .expander{ position:absolute; right:0; color:#fff; width:139px; height:33px; background:url(../img/mobile_navbutton_bg.gif) no-repeat top left; display:inline-block; line-height:33px; text-align: center; font-size: 13px; } #navigation .expander:link, #navigation .expander:visited{ text-decoration:none; } #navigation ul{ display:none; background:url(../img/mobile_nav_background.gif) no-repeat bottom left #3f484d; padding:24px 0 10px 33px; font-size:14px; } #navigation ul li{ margin-bottom:12px; } #navigation ul li a:link, #navigation ul li a:visited{ text-decoration:none; color:#fff; } #navigation ul ul{ background:none; padding-bottom:0; } .mobilenav{ width:80px; height:24px; background:no-repeat top left; display:inline-block; } .mobilenav.back{ background-image: url('../img/button_back.gif'); } .mobilenav.next{ background-image: url('../img/button_next.gif'); margin-left:12px; } .mobilenav span{ display:none; } #footer{ margin:25px; } #footer li{ border-bottom:1px solid #d8dad7; padding:19px 0; } #footer li > a:link, #footer li > a:visited, #footer li > p{ color: #b1b6b0; text-transform:uppercase; text-decoration:none; } #footer li ul{ margin-top:17px; } #footer li li{ border:none; padding:0; } #footer li li a:link, #footer li li a:visited{ color: #3f4851; text-transform:none; } #footer li.browse li{ width:50%; float:left; } #footer li.social li{ margin-bottom:10px;} /* extra setting for thumbnails */ @media screen and (min-width: 550px){ #thumbnails li{ width:33%; } } /* tablets */ @media screen and (min-width: 780px){ body{ padding:14px; } #header{ background: url(../img/header_bg_small.gif) no-repeat top; } #header h1{ background-image: url(../img/title_small.png); width:172px; height:104px; left:31px; top:54px; } #header h2{ display:inherit; position:absolute; bottom:0; right:4%; color:#fff; font-size:71px; letter-spacing:-3px; line-height:54px; text-align:right; -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; margin-bottom:15px; } #header #logo{ background-image: url(../img/logo_small.png); width:114px; height:53px; left:auto; top:58px; right:30px; } #header p{ position:absolute; left:30px; top:182px; color:#fff; padding:0; width:280px; } .home #heroimage{ height: 427px; } .hivbasics.home #heroimage{ background-image:url(../img/hero_hivbasics_smallhome.png); } .testing.home #heroimage{ background-image:url(../img/hero_testing_smallhome.png); } .condomuse.home #heroimage{ background-image:url(../img/hero_condomuse_smallhome.png); } .pep.home #heroimage{ background-image:url(../img/hero_pep_smallhome.png); } .posneg.home #heroimage{ background-image:url(../img/hero_posneg_smallhome.png); } .whatsstatus.home #heroimage{ background-image:url(../img/hero_whatsstatus_smallhome.png); } .topsbottoms.home #heroimage{ background-image:url(../img/hero_topsbottoms_smallhome.png); } .withdrawal.home #heroimage{ background-image:url(../img/hero_withdrawal_smallhome.png); } .viralload.home #heroimage{ background-image:url(../img/hero_viralload_smallhome.png); } .contacts.home #heroimage{ background-image:url(../img/hero_contacts_smallhome.png); } #heroimage{ height: 283px; } .hivbasics #heroimage{ background-image:url(../img/hero_hivbasics_small.png); } .testing #heroimage{ background-image:url(../img/hero_testing_small.png); } .condomuse #heroimage{ background-image:url(../img/hero_condomuse_small.png); } .pep #heroimage{ background-image:url(../img/hero_pep_small.png); } .posneg #heroimage{ background-image:url(../img/hero_posneg_small.png); } .whatsstatus #heroimage{ background-image:url(../img/hero_whatsstatus_small.png); } .topsbottoms #heroimage{ background-image:url(../img/hero_topsbottoms_small.png); } .withdrawal #heroimage{ background-image:url(../img/hero_withdrawal_small.png); } .viralload #heroimage{ background-image:url(../img/hero_viralload_small.png); } .contacts #heroimage{ background-image:url(../img/hero_contacts_small.png); } #thumbnails{ background:#fff; } #thumbnails li{ width:25%; } #navigation{ border-top:none; min-height:0; } #navigation .expander{ display:none; } #navigation ul{ display:inherit; position:absolute; left:0; width:170px; background:none; padding:51px 0 0 33px; font-size:12px; } #navigation ul li a:link, #navigation ul li a:visited{ color:#3f4851; } #navigation li.on a:link, #navigation li.on a:visited{ color:#b0b5af; } #navigation ul ul{ position:relative; padding:0; margin:5px 0 0 17px; background:none; } #navigation ul ul li{ margin-bottom:5px; } #navigation li.on li a:link, #navigation li.on li a:visited{ color:#3f4851; } #navigation li li.on a:link, #navigation li li.on a:visited{ color:#b0b5af; } .callout{ display:inherit; font-family: 'HelveticaNeueW01-75Bold', Helvetica, Arial, sans-serif; text-align:right; width:24%; font-size:28px; line-height:32px; text-transform: uppercase; color: #cfd4ce; position:absolute; right:55px; top:341px; } .callout span{ color:#9d9d9d;} .callout sub{ text-transform: none; } #copy{ margin:50px 0 0 27%; width:37%; padding-bottom:50px; } .mobilenav{ display:none; } #footer{ margin:0; padding:33px 0; border-top: 1px solid #b0b7af;} #footer > ul > li{ border:none; border-right:1px solid #d8dad7; float:left; padding:0 2%; min-height:120px; } #footer li li{ float:none; } #footer li.home{ width:5%; } #footer li.browse{ width:45%; } #footer li.info{ width:23%; } #footer li.browse li{ float:left; } #footer li.social{ width:7%; border-right: none; } } /* desktops 1000+ */ @media screen and (min-width: 1000px){ #content{ max-width:1141px; margin:0 auto;} #header{ background: url(../img/header_bg_large.gif) no-repeat top; } #header h1{ background-image: url(../img/title_large.png); width:232px; height:143px; left:57px; top:64px; } #header h2{ font-size:80px; line-height:62px; margin-bottom:20px; } #header #logo{ background-image: url(../img/logo_large.png); width:124px; height:58px; top:55px; right:77px; } #header p{ position:absolute; left:57px; top:237px; color:#fff; padding:0; width:310px; } .home #heroimage{ height: 550px; } .hivbasics.home #heroimage{ background-image:url(../img/hero_hivbasics_largehome.png); } .testing.home #heroimage{ background-image:url(../img/hero_testing_largehome.png); } .condomuse.home #heroimage{ background-image:url(../img/hero_condomuse_largehome.png); } .pep.home #heroimage{ background-image:url(../img/hero_pep_largehome.png); } .posneg.home #heroimage{ background-image:url(../img/hero_posneg_largehome.png); } .whatsstatus.home #heroimage{ background-image:url(../img/hero_whatsstatus_largehome.png); } .topsbottoms.home #heroimage{ background-image:url(../img/hero_topsbottoms_largehome.png); } .withdrawal.home #heroimage{ background-image:url(../img/hero_withdrawal_largehome.png); } .viralload.home #heroimage{ background-image:url(../img/hero_viralload_largehome.png); } .contacts.home #heroimage{ background-image:url(../img/hero_contacts_largehome.png); } #heroimage{ height: 367px; } .hivbasics #heroimage{ background-image:url(../img/hero_hivbasics_large.png); } .testing #heroimage{ background-image:url(../img/hero_testing_large.png); } .condomuse #heroimage{ background-image:url(../img/hero_condomuse_large.png); } .pep #heroimage{ background-image:url(../img/hero_pep_large.png); } .posneg #heroimage{ background-image:url(../img/hero_posneg_large.png); } .whatsstatus #heroimage{ background-image:url(../img/hero_whatsstatus_large.png); } .topsbottoms #heroimage{ background-image:url(../img/hero_topsbottoms_large.png); } .withdrawal #heroimage{ background-image:url(../img/hero_withdrawal_large.png); } .viralload #heroimage{ background-image:url(../img/hero_viralload_large.png); } .contacts #heroimage{ background-image:url(../img/hero_contacts_large.png); } #thumbnails ul{ max-width:975px; margin:0 auto; } #thumbnails li{ width:20%; } .callout{ top:427px; } #footer li.browse li{ width:33%; } }