/***************************************/ /* Global Classes */ /***************************************/ @charset "utf-8"; :focus {-moz-outline-style: none;} body {margin: 0px; padding: 0px; text-align: center; background: #fff;} form {margin: 0px; padding: 0px;} p {margin: 0px; padding: 0px; margin-top: 10px; margin-bottom: 12px;} a { position:relative !important;} h1 {margin: 0px; padding: 0px;} h1 span {display: none;} h2 {font: 15px/19px Arial, Helvetica, sans-serif; color: #696969; margin-top: 2px; margin-bottom: 20px; width: 530px;} h3 {font: bold italic 12px/15px Arial, Helvetica, sans-serif; color: #e45900; margin-top: 20px; margin-bottom: 20px;} h4 {font: bold italic 12px/15px Arial, Helvetica, sans-serif; color: #21a3dc; margin-top: 10px; margin-bottom: 10px;} h6 {font: bold 12px/15px Arial, Helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px;} /***************************************/ /* IE6 Hacks */ /***************************************/ * html #body {margin-right: 15px;} /* IE6 hack */ * html #body ul.bub li a:hover {text-decoration: underline;} /* IE6 hack */ * html #body ul.bub li a:hover p {text-decoration: none;} /* IE6 hack */ * html #body ul.bub ul {margin-top: 46px;} /* IE6 hack */ * html #body #ul-how {margin-top: 480px;} /* IE6 hack */ * html #body p.IEa {width: 380px;} /* IE6 hack */ * html #body p.IEb {width: 300px;} /* IE6 hack */ * html #body ul.long3 li a:hover {text-decoration: underline;} /* IE6 hack */ * html #body ul.long3 li a:hover p {text-decoration: none;} /* IE6 hack */ * html #body ul.long li a:hover {text-decoration: underline;} /* IE6 hack */ * html #body ul.long li a:hover p {text-decoration: none;} /* IE6 hack */ * html #body ul.long ul {margin-top: 46px;} /* IE6 hack */ * html #body #ul-how {margin-top: 480px;} /* IE6 hack */ * html #body ul.long2 li a:hover {text-decoration: underline;} /* IE6 hack */ * html #body ul.long2 li a:hover p {text-decoration: none;} /* IE6 hack */ * html #side {margin-left: 20px;} /* IE6 hack */ * html #foot {height: 130px;} /* IE6 hack */ /***************************************/ /* Global Container Classes */ /***************************************/ #container {position: relative; width: 980px; margin-left: auto; margin-right: auto;} #main {position: relative; width: 100%; text-align: left;} #head {position: relative; width: 100%; height: 120px;} #loginError {position: absolute; top: 80px; left: -220px; width: 180px; color: red; line-height: 18px;} #intro {margin-top: -10px; margin-bottom: -14px; background: #fff;} #flash_div {position:relative; top: 20px; left: 40px; width:840px;height:435px;} #flashcontent{display:none;} #popLogo {position: relative; top: 0px; left: 0px; width: 153px; height: 70px; margin-bottom: 30px;} #popLogo span {display: none;} #popLogo h1 {width: 153px; height: 70px; background: url(img/logo.gif) no-repeat;} #popDerm {position: absolute; top: 30px; left: 624px; width: 130px; height: 60px;} #popDerm span {display: none;} #popDerm h1 {width: 140px; height: 70px; background: url(img/foot-bg.gif) no-repeat;} #content { float:left; position: relative; width: 899px; height: 442px; background:url(../images/si_bg_flash.gif) 0 0 no-repeat; margin-bottom: -15px; margin-left: 45px;_margin-left: 25px;} #product_image { float:left; position: relative; width:350px; height:335px; margin:0; padding:0; top:50px;} #error_box { float:left; position: relative; width:413px; height:172px; margin: 54px 0 0 0; padding:0; background:url(../images/si_bg_erro.gif) 0 0 no-repeat;} #error_box_title { float:right; position: relative; width:390px; height:25px; margin:40px 0 0 0; padding:0; font: bold 16px arial, Tahoma, sans-serif; color: #666; } #error_box_line { float:right; position: relative; width:352px; height:30px; background:url(../images/si_line_error_pag.gif) 0 0 no-repeat; margin:0 37px 0 0; _margin:0 20px 0 0; padding:0;} #error_button { float:left; position: relative; width:40px; height:44px; border:1px solid orange; margin:0 0 0 20px; _margin:0 0 0 9px; padding:0; } #error_link { float:left; position: relative; width:50px; height:20px; margin:0; padding:0; margin: 14px 0 0 0; border:1px solid red;} #error_link a { text-decoration:none; font: bold 16px arial, Tahoma, sans-serif; color: #21a3dc;} /***************************************/ /* Body Container Classes */ /***************************************/ #body {float: right; margin-right: 30px; width: 680px; font: 12px/15px Arial, Helvetica, sans-serif; color: #6a737b;} #body h1 {margin-bottom: 10px;} /*#body p {width: 650px;}*/ #body p a {color: #666; text-decoration: none; line-height: 1em;} #body .b {color: #1ba3dd;} #body h2.b {font-weight: bold; color: #21a3dc; margin: 0px;} #body h2.g {font-weight: bold; color: #6a737b; margin: 0px;} #body a.bb {color: #21a3dc; text-decoration: none;} #body a.bb b {font-size: 15px;} #body a.bb:hover {text-decoration: underline;} #body a.gb {color: #6a737b; text-decoration: none;} #body a.gb b {color: #21a3dc; font-size: 15px;} #body a.gb:hover {color: #21a3dc; text-decoration: underline;} #body ul.bub {position: relative; top: 0px; left: 0px; margin: 0px; margin-top: 30px; padding: 0px; padding-top: 15px; background: url(img/body-ul-top.jpg) no-repeat top center;} #body ul.bub li {position: relative; top: 0px; left: 0px; width: 680px; height: 100px; margin: 0px; padding: 0px; display: block; list-style: none; background: url(img/body-li.jpg);} #body ul.bub li img {position: absolute; top: 13px; left: 32px; width: 100px; height: 70px; border: 0px;} #body ul.bub li h2 {position: relative; top: 5px; left: 152px; width: 460px; margin: 0px; padding: 0px; font: bold 14px/28px Arial, Helvetica, sans-serif; color: #1ba3dd;} #body ul.bub li p {position: relative; top: 3px; left: 152px; width: 460px; margin: 0px; padding: 0px; height: 50px;} #body ul.bub li b {color: #1ba3dd; font-size: 15px;} #body ul.bub li a {text-decoration: none; cursor: pointer;} #body ul.bub li a p {color: #6a737b;} #body ul.bub li a:hover h2 {text-decoration: underline;} #body ul.bub ul {position: relative; top: 0px; left: 0px; width: 680px; height: 80px; background: url(img/body-ul-bot.jpg) no-repeat; margin: 0px; padding: 0px;} #body ul.bub ul.alt {background: url(img/body-ul-bot2.jpg) no-repeat;} #body ul.bub ul a {position: absolute; top: 18px; left: 290px; display: block; width: 370px; height: 35px;} #body ul.bub ul a span {display: none;} #body div.rcbox-greywhite p {width: 580px; margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 15px;} #body div.rcbox-greywhite h2 {font-weight: bold; color: #21a3dc; margin: 0px;} #body div.rcbox-greywhite div.faqcol {position: relative; float: left; width: 250px; margin-right: 25px; margin-top: 15px; color: #21a3dc; line-height: 20px; overflow: hidden;} #body div.rcbox-bw p {width: 580px; margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 15px;} #body div.rcbox-bw h2 {font-weight: bold; color: #21a3dc; margin-bottom: 0px;} /***************************************/ /* Top Nav Container Classes */ /***************************************/ #searchForm {float: right; width: 200px; height: 30px;} #searchForm a {float: right; width: 60px; height: 30px; background: url(img/search.gif) no-repeat 0px 0px;} #searchForm a:hover {background: url(img/search.gif) no-repeat 0px -30px;} #searchForm a span {display: none;} #searchText {float: right; width: 136px; height: 12px; margin-top: 8px; border: 1px solid #ccc; font: 10px/10px Verdana, sans-serif; color: #333; text-indent: 3px;} #topnav {float: right; width: 300px; height: 30px; background: url(img/topnav-bg.gif) no-repeat;} #tn {position: relative; top: 0px; left: 0px; width: 300px; height: 25px; margin: 0px; padding: 0px;} #tn li {position: absolute; margin: 0px; padding: 0px; list-style: none; font: 12px/25px sans-serif;} #tn li, #tn a {display: block; text-decoration: none; cursor: pointer;} #nu {background: url(img/topnav-nu.gif); left: 4px; top: 0px; width: 70px; height: 25px;} #nu a:hover {background: url(img/topnav-nu.gif) 0 -25px no-repeat;} #li {background: url(img/topnav-li.gif); left: 74px; top: 0px; width: 55px; height: 25px;} #li a:hover {background: url(img/topnav-li.gif) 0 -25px no-repeat;} #lo {background: url(img/topnav-lo.gif); left: 74px; top: 0px; width: 55px; height: 25px;} #lo a:hover {background: url(img/topnav-lo.gif) 0 -25px no-repeat;} #cs {background: url(img/topnav-cs.gif); left: 157px; top: 0px; width: 120px; height: 25px;} #cs a:hover {background: url(img/topnav-cs.gif) 0 -25px no-repeat;} #topnav a span {display: none;} #display {float: right; height: 30px; padding-right: 12px; font: bold 10px/24px Verdana, Tahoma, sans-serif; color: #21a3dc; background: #ccc url(img/topnav-bgName.gif);} #welcome {float: right; width: 80px; height: 30px; background: url(img/topnav-welcome.gif) no-repeat;} #welcome span {display: none;} #logo {margin: 0px; padding: 0px; clear: right; position: absolute; top: 30px; left: 50px; width: 153px; height: 70px;} .logo span {display: none;} #logo h1 {width: 153px; height: 70px; background: url(img/logo.gif) no-repeat;} #logo h1 a {display: block; width: 153px; height: 70px;} #nav {position: absolute; top: 66px; left: 255px; width: 540px; height: 20px; margin: 0px; padding: 0px;} #nav li {position: absolute; top: 0px; height: 20px; margin: 0px; padding: 0px; list-style: none;} #nav li, #nav a {display: block; text-decoration: none; font: 20px/20px sans-serif; overflow: hidden;} #nav li a span {display: none;} #nav1 {background: url(img/nav-home.gif); left: 0px; width: 64px;} #nav1 a:hover {background: url(img/nav-home.gif) 0 -20px;} #nav1 a.x {background: url(img/nav-home.gif) 0 -20px;} #nav2 {background: url(img/nav-skinEvaluation.gif); left: 67px; width: 144px;} #nav2 a:hover {background: url(img/nav-skinEvaluation.gif) 0 -20px;} #nav2 a.x {background: url(img/nav-skinEvaluation.gif) 0 -20px;} #nav3 {background: url(img/nav-whySkinId.gif); left: 188px; width: 117px;} #nav3 a:hover {background: url(img/nav-whySkinId.gif) 0 -20px;} #nav3 a.x {background: url(img/nav-whySkinId.gif) 0 -20px;} #nav4 {background: url(img/nav-learnAboutAcne.gif); left: 303px; width: 136px;} #nav4 a:hover {background: url(img/nav-learnAboutAcne.gif) 0 -20px;} #nav4 a.x {background: url(img/nav-learnAboutAcne.gif) 0 -20px;} #nav5 {background: url(img/nav-mySkinId.gif); left: 439px; width: 101px;} #nav5 a:hover {background: url(img/nav-mySkinId.gif) 0 -20px;} #nav5 a.x {background: url(img/nav-mySkinId.gif) 0 -20px;} /***************************************/ /* Left Navigation */ /***************************************/ #side {float: left; margin-left: 40px; width: 180px;} #subnav {position: relative; top: 0px; left: 0px; width: 180px; margin: 0px; padding: 0px; padding-bottom: 10px; text-indent: 10px; background: url(img/subnav-bot.gif) no-repeat bottom center;} #subnav li {position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; display: block; list-style: none; font: bold 12px/25px Arial, Helvetica, sans-serif;} #subnav a {display: block; text-decoration: none; width: 180px; height: 25px; color: #6a737b; background: url(img/subnav-bg.gif); overflow: hidden;} #subnav a:hover {background: url(img/subnav-bg.gif) 0 -25px; color: #fff;} #subnav li .x {background: url(img/subnav-bg.gif) 0 -25px; color: #fff;} #subtop a {background: url(img/subnav-top.gif); width: 180px; height: 35px; color: #fff; line-height: 30px;} #subtop a:hover {background: url(img/subnav-top.gif) 0 -35px;} #subtop a.x {background: url(img/subnav-top.gif) 0 -35px;} #subnav.purple a {background: url(img/subnav-bg-purple.gif);} #subnav.purple a:hover {background: url(img/subnav-bg-purple.gif) 0 -25px; color: #fff;} #subnav.purple li .x {background: url(img/subnav-bg-purple.gif) 0 -25px; color: #fff;} .purple #subtop {background: url(img/subnav-top.gif); width: 180px; height: 35px; color: #fff; line-height: 30px;} #subnav li.subsub a {background: url(img/subnav-bg-blue.gif); color: #fff;} #subnav li.subsub a:hover {background: url(img/subnav-bg-blue.gif) 0 -25px; color: #fff;} #subnav li.subsub a.x {background: url(img/subnav-bg-blue.gif) 0 -25px; color: #fff;} .altnav {position: relative; top: 0px; left: 0px; width: 180px; margin: 0px; margin-top: 20px; padding: 0px; padding-bottom: 10px; background: url(img/subnav-bot.gif) no-repeat bottom center;} .altnav li {position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; display: block; list-style: none;} .alttop {background: url(img/subnav-top.gif); width: 180px; height: 35px; font: bold 12px/25px Arial, Helvetica, sans-serif; color: #fff; line-height: 30px; text-indent: 22px;} .altmid {background: url(img/altnav-bg.gif); width: 180px; text-indent: 0px; font: 12px/20px Arial, Helvetica, sans-serif; color: #6a737b;} .mypic {position: relative; top: 0px; margin-top: 13px; left: 25px; width: 130px; height: 100px; border: 0px;} #myname, #myprod {position: relative; top: 0px; left: 25px; width: 150px;} #myprod {height: 25px;} #prof-name, #prod1, #prod2, #prod3 {color: #21a3dc; font-weight: bold;} .mytip {position: relative; top: 0px; left: 5px; width: 170px; height: 175px; border: 0px;} /***************************************/ /* Footer Container Classes */ /***************************************/ #foot {clear: both; position: relative; top: 30px; width: 100%; height: 100px;} #foot h2 {position: absolute; top: 20px; left: 50px; width: 700px; height: 72px; background: url(img/foot-bg.gif) no-repeat; margin: 0px; padding: 0px;} #foot h2 span {display: none;} #stf {position: absolute; top: 39px; left: 810px; width: 125px; height: 20px; background: url(img/foot-sendToFriend.gif) 0 0 no-repeat; display: block; text-decoration: none} #stf:hover {background: url(img/foot-sendToFriend.gif) 0 -20px no-repeat;} #stf span {display: none;} #botnav {position: absolute; top: 20px; left: 30px; width: 380px; margin: 0px; padding: 0px; height: 20px;} #botnavfg {font: 11px Arial;color:#808080;} #botnavfg li {position: relative; top:75px; left: -70px; margin:0 20px 0 0; padding: 0px; list-style: none; font: 11px Arial; display: inline;} #botnavfg a:link {color: #808080; text-decoration: none;} #botnavfg a:visited {color: #808080; text-decoration: none;} #botnavfg a:active {color: #808080; text-decoration: none;} #botnavfg a:hover {color: #21A3DC; text-decoration: underline;} .ico_facebook {vertical-align:text-top;} .ico_youtube {vertical-align:text-top;} #botnavg li {position: relative; top:65px; left: -70px; margin:0 20px 0 0; padding: 0px; list-style: none; font: 11px Arial; display: inline;} #botnavg a:link {color: #808080; text-decoration: none;} #botnavg a:visited {color: #808080; text-decoration: none;} #botnavg a:active {color: #808080; text-decoration: none;} #botnavg a:hover {color: #21A3DC; text-decoration: underline;} #botnavfoot {position: absolute; top: 140px; left: 150px; width: 550px; margin: 0px; padding: 0px; height: 20px; text-align: center; font: 10px Arial; color:#808080;} .foot_gray {font-size: 11px;} a.foot_gray:link {color: #808080; text-decoration: underline;} a.foot_gray:visited {color: #808080; text-decoration: underline;} a.foot_gray:active {color: #808080; text-decoration: underline;} a.foot_gray:hover {color: #21A3DC; text-decoration: underline;} /***************************************/ /* Mootools Slimbox Container Classes */ /**************************************/ #lbOverlay { position: absolute; top:0; left: 0; width: 100%; background-color: #fff; cursor: pointer; z-index: 1000;} #lbCenter { position: absolute; left: 50%; overflow: hidden; padding: 17px; z-index: 2000; height:409px; width:678px; background:#e4e4e4;} #lbBottomContainer {display: none;} #lbBottom { display: none;} #lbClose { width: 65px; height: 22px; position: absolute; overflow: hidden; top: 21px; right: 24px;} #lbCloseLink {display: block; float: right; width: 65px; height: 22px; margin:0; padding:0;} #lbCaption { font-weight: bold;} #container-popup { height:405px; width:673px; position:relative; margin:0; padding:0; float:left; text-align:left;} #popup-left { height:400px; width:220px; position:relative; float:left; clear:both; margin:0; padding:0;} #popup-right { position:relative; float:left; height:400px; width:445px; position:relative; float:left;} #popup-right h2 { background:url(img/pop_ups/btn_close.gif) no-repeat top right; width:100%; height:45px; margin:0; padding:23px 0 5px 0;} #popup-right p { font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#4F4F4F; text-align:justify; width:418px;} #popup-right a {color: #1ba3dd; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;} #skin-btn { text-align:center; width:100%; margin:0; padding-top:12px;} .txt-blue { color:#1ba3dd; font-weight:bold;} /***************************************/ /* Flash Detection Container Classes */ /***************************************/ #flash_detection { float:right; position: relative; width:838px; height:335px; border:1px solid green; margin:70px 0 0 0; padding:0;} #flash_content { float:left; position: relative; width:439px; height:240px; margin:45px 0 0 0; padding:0; top:-80px;} #flash_detection-title { float:left; position: relative; width:439px; height:62px; margin:0; padding:0;} #flash_detection-line { float:left; position: relative; width:439px; height:11px; background:url(../images/si_line_flash.gif) 0 0 no-repeat; margin:0; padding:0;} #flash_detection-copy { float:left; position: relative; font: 12px/18px arial, Tahoma, sans-serif; color: #666; width:439px; height:79px; margin:0; padding:0;} #flash_detection-button { float:left; position: relative; width:439px; height:42px; margin:0; padding:0;} #flash_detection-disclamer { float:left; position: relative; width:439px; height:43px;} #flash_detection { float:right; position: relative; width:838px; height:335px; border:1px solid green; margin:70px 0 0 0; padding:0;} #product_image2 { float:left; position: relative; width:350px; height:335px; margin:0; padding:0;} /***************************************/ /* Form Classes */ /***************************************/ .row {clear: both; width: 420px; display: block; height: 45px; overflow: hidden;} .tdl {float: left; width: 160px; margin-top: 5px;} .tdr {float: right; width: 260px;} .tdr input {width: 235px; margin-top: 7px;} #userText {width: 234px;} .submit {position: relative; margin-left: 159px; width: 85px; height: 25px; display: block;} a.submit:link, a.submit:visited {background: url(img/but-submit.gif) 0px 0px no-repeat;} a.submit:hover {background: url(img/but-submit.gif) 0px -25px no-repeat;} .submitQuestion {position: relative; margin-left: 159px; width: 67px; height: 25px; display: block;} a.submitQuestion:link, a.submit:visited {background: url(img/but-submitQuestion.gif) 0px 0px no-repeat;} a.submitQuestion:hover {background: url(img/but-submitQuestion.gif) 0px -25px no-repeat;} /* Oval Form Inputs */ .oval_input1 { padding:6px 0px 0px 4px; margin: 0px 0px 0px 0px; border: 0; font-size:11px;background:url(../images/bg_input_generic.gif) no-repeat left top;width:210px;height:28px;} .oval_input2 { padding:0px 0px 20px 4px; margin: 0px 0px 0px 0px; border: 0; font-size:11px;background:url(../images/bg_input_big.gif) no-repeat left top; width:265px; height:28px;} .oval_input3 { padding:6px 0px 0px 4px; margin: 0px 0px 0px 0px; border: 0; font-size:11px;background:url(../images/bg_input_zip.gif) no-repeat left top; width:124px; height:28px; } .oval_input4 { padding:6px 0px 0px 4px; margin: 0px 0px 0px 0px; border: 0; font-size:11px;background:url(../images/bg_input_dob.gif) no-repeat left top; width:94px; height:28px; } .oval_input5 { padding:6px 0px 0px 4px; margin: 0px 0px 0px 0px; border: 0; font-size:11px;background:url(../images/bg_input_gender.gif) no-repeat left top; width:139px; height:28px; } /***************************************/ /* Login */ /***************************************/ #loginForm {position: relative; top: 0px; left: 0px; width: 630px; height: 415px; background: url(img/body-form-login.jpg) no-repeat; padding-left: 50px; padding-top: 35px;} #fieldError {position: absolute; top: 39px; left: 210px; width: 400px; height: 40px; font-weight: bold; color: red;} #loginForm input {width: 150px;} a.login {position: relative; margin-left: 189px; margin-top: 20px; width: 85px; height: 25px; display: block;} a.login:link, a.login:visited {background: url(img/but-login.gif) 0px 0px no-repeat;} a.login:hover {background: url(img/but-login.gif) 0px -25px no-repeat;} /***************************************/ /* Public Login */ /***************************************/ .imgwidthc {position: relative; top: -10px; left: 160px; margin-bottom: -40px; width: 249px; height: 35px; } .imgwidthd {position: relative; top: -10px; left: 160px; margin-bottom: -60px; width: 145px; height: 35px; } .imgwidthe {position: relative; left: 155px; width: 437px; height: 30px; } .imgwidthf {position: relative; left: 155px; width: 338px; height: 30px; } .imgwidthg {position: relative; left: 155px; width: 328px; height: 30px; } .imgwidthgi {position: relative; left: 155px; width: 249px; height: 30px; } .imgwidthh {position: relative; top: 0px; left: 430px; margin-bottom: 0px; width: 156px; height: 24px; } .imgwidthi {position: relative; top: 0px; left: 320px; margin-bottom: 0px; width: 263px; height: 24px; } .imgwidthj {position: relative; top: 0px; left: 370px; margin-bottom: 0px; width: 207px; height: 22px; } .fp {font-size: 11px;} a.fp:link {color: #7b7b7b; text-decoration: underline;} a.fp:visited {color: #7b7b7b; text-decoration: underline;} a.fp:active {color: #7b7b7b; text-decoration: underline;} a.fp:hover {color: #8e437c; text-decoration: underline;} .login {width: 143px; height: 30px; background: url(img/hd-login.gif);} .login-public {width: 306px; height: 30px; background: url(img/hd-login-public.gif);} .error {font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #ff3300; text-decoration: none; background-image: url(../images/dot.gif); background-color: #ffff99; background-repeat: no-repeat; background-position: left top; padding-left: 12px;} .errorHead {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #ff3300; text-decoration: none; background-image: url(../images/exclamation.gif); background-color: #ffff99; background-repeat: no-repeat; background-position: left top; padding-left: 12px;} .SigninBackground { background-image: url(../images/signin_background2.gif); background-repeat: no-repeat; background-position: left top; height: 105px; width: 510px; } /***************************************/ /* Forgot Password */ /***************************************/ p.forgot {position: relative; top: -5px; left: -25px; color: #666666; font-weight: bold; font-size: 10px;} a.forgot:link {color: #7b7b7b; text-decoration:none;} a.forgot:visited {color: #7b7b7b; text-decoration:none;} a.forgot:active {color: #7b7b7b; text-decoration:none;} a.forgot:hover {color: #8e437c; text-decoration:none;} h2.category {color: #666666; font-weight: bold; width:auto;} /***************************************/ /* Site Map */ /***************************************/ .sitemap {width: 237px; height: 30px; background: url(img/hd-sitemap.gif);} .sitemaph {font-size: 12px; font-family:Arial, Helvetica, sans-serif;} a.sitemaph:link {color: #7b7b7b; text-decoration:none;} a.sitemaph:visited {color: #7b7b7b; text-decoration:none;} a.sitemaph:active {color: #7b7b7b; text-decoration:none;} a.sitemaph:hover {color: #8e437c; text-decoration:underline;} /***************************************/ /* Plain Content */ /***************************************/ .plain-txt {width: 850px; font: 13px Arial, Helvetica, sans-serif; color: #545454;} .plain-txt a {color: #21a3dc; text-decoration: none;} .plain-txt a:hover {color: #21a3dc; text-decoration: underline;} /***************************************/ /* Gray Overlays */ /***************************************/ .rcbox-greywhite-top {position: relative; width: 680px; height: 45px; background: url(img/rcbox-greywhite-top.gif);} .rcbox-greywhite {position: relative; width: 580px; padding-left: 50px; padding-right: 50px; padding-top: 10px; background: url(img/rcbox-greywhite-bg.gif)} .rcbox-greywhite-bot {position: relative; width: 680px; height: 45px; background: url(img/rcbox-greywhite-bot.gif);} /***************************************/ /* Blue Overlays */ /***************************************/ .rcbox-bw-top {position: relative; top: 5px; width: 680px; height: 45px; background: url(img/rcbox-bluewhite-top.gif);} .rcbox-bw {position: relative; width: 580px; padding-left: 50px; padding-right: 50px; padding-top: 5px; background: url(img/rcbox-bluewhite-bg.gif)} .rcbox-bw-br {position: relative; width: 680px; height: 55px; background: url(img/rcbox-bluewhite-br.gif);} .rcbox-bw-bot {position: relative; width: 680px; height: 45px; background: url(img/rcbox-bluewhite-bot.gif);} /***************************************/ /* Print & Email Buttons */ /***************************************/ .buttons {position: absolute; top: 0px; right: 30px; width: 141px; height: 20px;} .print {position: absolute; top: 0px; left: 0px; width: 70px; height: 20px;} a.print:link, a.print:visited {background: url(img/but-print.gif) 0px 0px no-repeat;} a.print:hover {background: url(img/but-print.gif) 0px -20px no-repeat;} /***************************************/ /* CTA & Callouts */ /***************************************/ .callout {margin-top: 30px; width: 170px; padding-left: 10px; height: 240px; display: block; background: #ccc; text-decoration: none; font: 12px/15px Arial, Helvetica, sans-serif;} .co-evaluation {margin-top: 30px; margin-bottom: 30px; width: 183px; height: 128px; display: block; background: url(img/callout-evaluation.jpg); text-decoration: none;} .co-evaluation span {display: none;} .co-friend {margin-top: -12px; width: 180px; height: 280px; display: block; background: url(img/callout-friend.jpg); text-decoration: none;} .co-friend span {display: none;} .callout {margin-top: 30px; width: 170px; padding-left: 10px; height: 240px; display: block; background: #ccc; text-decoration: none; font: 12px/15px Arial, Helvetica, sans-serif;} .co-eval {margin-top: 30px; margin-bottom: 30px; width: 183px; height: 128px; display: block; background: url(img/callout-eval.jpg); text-decoration: none;} .co-eval span {display: none;} .co-evaluation {margin-top: 30px; margin-bottom: 30px; width: 183px; height: 128px; display: block; background: url(img/callout-evaluation.jpg); text-decoration: none;} .co-evaluation span {display: none;} .co-wisidb {margin-top: 30px; width: 180px; height: 280px; display: block; background: url(img/callout-wisidb.jpg); text-decoration: none;} .co-wisidb span {display: none;} .co-stories {margin-top: 30px; width: 180px; height: 240px; display: block; background: url(img/callout-stories.jpg); text-decoration: none;} .co-stories span {display: none;} .co-testimonial {margin-top: 30px; margin-bottom: 30px; width: 182px; height: 240px; display: block; background: url(img/callout-testimonial.jpg); text-decoration: none;} .co-testimonial span {display: none;} /***************************************/ /* Custom Page Level Classes Begin */ /***************************************/ /***************************************/ /* Login Page */ /***************************************/ .login {width: 143px; height: 30px; background: url(img/hd-login.gif);} .login span {display: none;} .login-public {width: 306px; height: 30px; background: url(img/hd-login-public.gif);} .login-public span {display: none;} #loginForm {position: relative; top: 0px; left: 0px; width: 630px; height: 415px; background: url(img/body-form-login.jpg) no-repeat; padding-left: 50px; padding-top: 35px;} #fieldError {position: absolute; top: 39px; left: 210px; width: 400px; height: 40px; font-weight: bold; color: red;} #loginForm input {width: 150px;} #loginError {position: absolute; top: 80px; left: -220px; width: 180px; color: red; line-height: 18px;} a.login {position: relative; margin-left: 189px; margin-top: 20px; width: 85px; height: 25px; display: block;} a.login:link, a.login:visited {background: url(img/but-login.gif) 0px 0px no-repeat;} a.login:hover {background: url(img/but-login.gif) 0px -25px no-repeat;} #loginF input {width: 85px; height: 23px;} a.loginF {position: relative; margin-left: 189px; margin-top: 20px; width: 85px; height: 23px; display: block;} a.loginF:link, a.loginF:visited {background: url(img/but-login.gif) 0px 0px no-repeat;} a.loginF:hover {background: url(img/but-login-o.gif) 0px -25px no-repeat;} ul.loginpublic li {position: relative; top: 0px; left: 140px;} /***************************************/ /* Why Skin iD & Why skin iD is better */ /***************************************/ .about-why {margin: 0px; padding: 0px; width: 290px; height: 30px; background: url(img/hd-about-why.gif);} .about-why span {display: none;} #why_content {background:url(img/cli_bg_content.gif) no-repeat; width:681px; height:470px; margin:0; padding:0;} #why_content ul.bub {position: relative; top: 0px; left: 0px; margin: 0px; margin-top:0px; padding: 0px; padding-top: 15px; background: url(img/cli_bg_content.gif) no-repeat top center; height:455px; width:681px;} #why_content ul.bub li {position: relative; top: 0px; left: 0px; width: 670px; height: 100px; margin: 6px 0 6px 0; padding: 0; display: block; list-style: none; background: url(img/whyBetter-li.gif) no-repeat top center;} #why_content ul.bub li img {position: absolute; top: 2px; left: 20px; width: 123px; height: 93px; border:0px;} #why_content ul.bub li span img {position: absolute; top: 60px; left: 610px; margin:0 45px 0 0; padding:0; width: 29px; height: 29px; border:0;} #why_content ul.bub li h2 {position: relative; top: 5px; left: 168px; width: 460px; margin: 0px; padding: 0px; font: bold 14px/28px Arial, Helvetica, sans-serif; color: #1ba3dd;} #why_content ul.bub li p {position: relative; top: 3px; left: 168px; width: 460px; margin: 0px; padding: 0px; height: 50px;} #why_content ul.bub li b {color: #1ba3dd; font-size: 11px; font-family:Arial, Helvetica, sans-serif} .co-about {margin-top: 30px; width: 180px; height: 280px; display: block; background: url(img/callout-about.jpg); text-decoration: none;} .co-about span {display: none;} #banner {margin:0; padding:0; position: relative; top:0px; left:0px;} /***************************************/ /* How skinid Works */ /***************************************/ .about-how {margin: 0px; padding: 0px; width: 376px; height: 30px; background: url(img/hd-about-how.gif);} .about-how span {display: none;} /***************************************/ /* why skinid - Story */ /***************************************/ .about-story {margin: 0px; padding: 0px; width: 301px; height: 30px; background: url(img/hd-about-story.gif);} .about-story span {display: none;} /***************************************/ /* Why Skin iD - Success Stories */ /***************************************/ .about-success {margin: 0px; padding: 0px; width: 429px; height: 30px; background: url(img/head-about-success.gif);} .about-success span {display: none;} .rcbox-grey-top {position: relative; top: 7px; width: 680px; height: 15px; background: url(img/rcbox-grey-top.gif);} .rcbox-grey {position: relative; width: 620px; padding-left: 30px; padding-right: 30px; background: #f8f8f8;} #body div.rcbox-grey p {width: 620px; margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 15px;} .rcbox-grey-bot {position: relative; width: 680px; height: 15px; background: url(img/rcbox-grey-bot.gif);} .rcboxbox-grey-top {position: relative; width: 620px; height: 28px; background: url(img/rcboxbox-grey-top.gif); font: bold 11px/28px Arial, Helvetica, sans-serif; text-indent: 25px; color: #fff;} .rcboxbox-grey {position: relative; width: 620px; background: #fff;} .rcboxbox-grey-bot {position: relative; margin-top: -1px; width: 620px; height: 15px; background: url(img/rcboxbox-grey-bot.gif);} .pages {clear: both; text-align: right;} .pages b {color: #333;} .pages a {color: #21a3dc; line-height: 18px; text-decoration: none;} .pages a:hover {color: #21a3dc; text-decoration: underline;} .pages a b {font-size: 15px; color: #21a3dc;} /***************************************/ /* Why Skin iD - Clinical Proof */ /***************************************/ .why-clinical-proof {margin: 0px; padding: 0px; width: 383px; height: 23px; background: url(img/hd-science.gif);} .why-clinical-proof span {display: none;} /***************************************/ /* Send to a Friend*/ /***************************************/ .friend {width: 227px; height: 30px; background: url(img/head-friend.gif);} .friend span {display: none;} /***************************************/ /* New User Registration*/ /***************************************/ .newuser-confirm {width: 530px; height: 30px; background: url(img/head-newuser-confirm.gif);} #regError {background-color:#FFFFCF; border: 1px #666666 solid; padding:15px;} #regError ul {list-style-type: disc; color:#B52736; line-height:0.0em;} .regerror {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #B52736; text-decoration: none; padding-left: 12px;} .reg-errorHead {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #B52736; text-decoration: none; background-image: url(../images/exclamation.gif); background-repeat: no-repeat; padding-left: 12px;} .regField {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #535353;} .regFieldError {color: #CC3333;} /***************************************/ /* Contact us*/ /***************************************/ .contact {width: 347px; height: 30px; background: url(img/hd-contact.gif);} .contact span {display: none;} .contact-email {width: 350px; height: 30px; background: url(img/hd-contact-email.gif);} .contact-email span {display: none;} .contact-confirm {width: 330px; height: 30px; background: url(img/hd-contact-confirm.gif);} .contact-confirm span {display: none;} .contact-mail {width: 293px; height: 30px; background: url(img/hd-contact-mail.gif);} .contact-mail span {display: none;} /***************************************/ /* Why Skin iD - Member Benefits */ /***************************************/ .why-benefits {margin: 0px; padding: 0px; width: 412px; height: 30px; background: url(img/hd-about-benefits.gif);} .why-benefits span {display: none;} /***************************************/ /* Why Skin iD - Tv */ /***************************************/ .why-skinid-tv {margin: 0px; padding: 0px; width: 174px; height: 23px; background: url(img/hd-skin-tv.gif);} .why-skinid-tv span {display: none;} #banner-skintv {float:right; width:100%; height:100px;} /***************************************/ /* Why Skin iD - FAQ */ /***************************************/ .why-faqs {margin: 0px; padding: 0px; width: 530px; height: 30px; background: url(img/head-about-faqs.gif);} .why-faqs span {display: none;} .rcbox-greywhite-top {position: relative; width: 680px; height: 45px; background: url(img/rcbox-greywhite-top.gif);} .rcbox-greywhite {position: relative; width: 580px; padding-left: 50px; padding-right: 50px; padding-top: 10px; background: url(img/rcbox-greywhite-bg.gif)} #body div.rcbox-greywhite p {width: 580px; margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 15px;} #body div.rcbox-greywhite h2 {font-weight: bold; color: #21a3dc; margin: 0px;} #body div.rcbox-greywhite div.faqcol {position: relative; float: left; width: 250px; margin-right: 25px; margin-top: 15px; color: #21a3dc; line-height: 20px; overflow: hidden;} .rcbox-greywhite-bot {position: relative; width: 680px; height: 45px; background: url(img/rcbox-greywhite-bot.gif);} .faqcol a {color: #21a3dc; text-decoration: none;} .faqcol a b {font-size: 15px;} .faqcol a:hover {text-decoration: underline;} h2 span.current {color: #21a3dc;} .expanded {background: url(img/faqs-a.gif) 0px 0px no-repeat;} .collapse {background: url(img/faqs-q.gif) 0px 0px no-repeat;} #body p.job {background: url(img/faqs-q.gif) 0px 0px no-repeat; margin: 0px; padding: 0px;} #body p a {color: #666; text-decoration: none; line-height: 20px;} #body p.job a:link {color: #666; text-decoration: none;} #body p.job a:visited {color: #666; text-decoration: none;} #body p.job a:active {color: #666; text-decoration: none;} #body p.job a:hover {color: #666; text-decoration: none;} /***************************************/ /* Learn about Acne */ /***************************************/ .learn {width: 530px; height: 30px; background: url(img/head-learn.gif);} .learn span {display: none;} .co-learn {margin-top: 30px; width: 180px; height: 280px; display: block; background: url(img/callout-learn.jpg); text-decoration: none;} .co-learn span {display: none;} .co-learn-personilized {margin-top: 30px; width: 182px; height: 180px; display: block; background: url(img/callout-learnpersonalized.jpg); text-decoration: none;} .co-learn-personilized span {display: none;} /***************************************/ /* Whats is Acne */ /***************************************/ .learn-whats {width: 176px; height: 30px; background: url(img/hd-learn-whats.gif);} .learn-whats span {display: none;} /***************************************/ /* Causes of Acne */ /***************************************/ .learn-causes {width: 372px; height: 30px; background: url(img/hd-learn-causes.gif);} .learn-causes span {display: none;} /***************************************/ /* Treament of Acne */ /***************************************/ .learn-treatment {width: 441px; height: 30px; background: url(img/hd-learn-treatment.gif);} .learn-treatment span {display: none;} /***************************************/ /* Expert Articles */ /***************************************/ .learn-articles {width: 391px; height: 30px; background: url(img/hd-learn-articles.gif);} .learn-articles span {display: none;} .learn-articles-1 {width: 289px; height: 70px; background: url(img/head-learn-article-1.gif);} .learn-articles-1 span {display: none;} /***************************************/ /* Expert Bios */ /***************************************/ .learn-bios {width: 425px; height: 30px; background: url(img/hd-learn-bios.gif);} .learn-bios-expert {width: 592px; height: 30px; background: url(img/hd-learn-expert.gif);} .learn-bios span {display: none;} #body ul.long3 li img {position: absolute; top: 0px; left: 32px; width: 144px; height: 144px; border: 0px;} #body ul.long3 li h2 {position: absolute; top: 25px; left: 210px; width: 400px; margin: 0px; padding: 0px; font: bold 14px/28px Arial, Helvetica, sans-serif; color: #1ba3dd;} #body ul.long3 li p {position: relative; top: -10px; left: 120px; width: 400px; margin: 0px; padding: 0px;} #body ul.long3 li a {position: absolute; top: 135px; left: 210px; color: #21a3dc; text-decoration: none; cursor: pointer;} #body ul.long3 li a p {color: #6a737b;} #body ul.long3 li a:hover h2 {text-decoration: underline;} /***************************************/ /* My Skin iD*/ /***************************************/ #myskin {position: relative; top: 0px; left: 0px; width: 680px; height: 420px; background: url(img/myskin-bg.gif);} #myskin h1 {text-indent: 25px; padding-top: 23px; color: #21a3dc;} #pydrui {position: absolute; top: 65px; left: 245px; width: 250px; height: 15px; background: url(img/myskin-printRegimen.gif); display: block; text-decoration: none} #pydrui:hover {background: url(img/myskin-printRegimen.gif) 0 -15px no-repeat;} #pydrui span {display: none;} #pr1 {position: absolute; top: 85px; left: 16px;} #pr2 {position: absolute; top: 85px; left: 179px;} #pr3 {position: absolute; top: 85px; left: 342px;} #pr1 img, #myskin #pr2 img, #myskin #pr3 img {width: 162px; height: 245px; border: 0px;} #sd1 {position: absolute; top: 274px; left: 75px;} #sd2 {position: absolute; top: 274px; left: 175px;} #sd3 {position: absolute; top: 274px; left: 275px;} #sd1, #myskin #sd2, #myskin #sd3 {font: 10px/15px Arial, Helvetica, sans-serif; color: #21a3dc; width: 65px; text-align: center; text-decoration: none;} #sd1 b, #myskin #sd2 b, #myskin #sd3 b {font-size: 14px;} #sd1:hover, #myskin #sd2:hover, #myskin #sd3:hover {text-decoration: underline;} .srd {position: absolute; top: 320px; left: 190px; width: 140px; height: 20px; display: block;} a.srd:link, a.srd:visited {background: url(img/but-seeRegimenDetail.gif) 0px 0px no-repeat;} #regetop, #regebot {position: absolute; left: 515px; width: 140px; height: 125px; font: 11px/17px Arial, Helvetica, sans-serif; color: #666;} #regetop {top: 120px;} #regebot {top: 274px;} #regetop img, #regebot img {float: left;} #regetop a, #regebot a {color: #21a3dc; text-decoration: none;} #regetop a b, #regebot a b {font-size: 14px;} #regetop a:hover, #regebot a:hover {text-decoration: underline;} #moreinfo {position: absolute; top: 100px; left: 0px; width: 140px; height: 125px; display: block; } #moreinfo img, #moreinfo img {float: right; width: 80px; height: 20px;} #myskin-box2 {position: relative; top: 0px; margin-top: 20px; left: 0px; width: 680px; height: 340px; background: url(img/myskin-box2.gif);} #myskin-box2 h2 {font: bold 12px/29px Arial, Helvetica, sans-serif; color: #fff; text-indent: 25px; margin: 0px; padding: 0px;} #expart, #deknbo {position: absolute; top: 100px; left: 35px; width: 275px; height: 160px;} #deknbo {left: 370px;} #expart a {line-height: 24px;} #deknbo a {line-height: 23px;} #expart a, #deknbo a {color: #6a737b; text-decoration: none;} #expart a b, #deknbo a b {color: #21a3dc; font-size: 15px;} #expart a:hover, #deknbo a:hover {color: #21a3dc; text-decoration: underline;} .sq {position: absolute; top: 130px; left: 140px; width: 135px; height: 25px; display: block;} a.sq:link, a.sq:visited {background: url(img/but-submitQuestion.gif) 0px 0px no-repeat;} a.sq:hover {background: url(img/but-submitQuestion.gif) 0px -25px no-repeat;} .noimg {width: 580px; height: 150px; padding-top: 20px; padding-left: 20px; padding-right: 20px;} #body div.noimg h2, #body div.noimg p {width: 580px;} #submitQuestion {padding-left: 21px; padding-right: 29px; width: 550px;} .sqrow {clear: both; width: 550px; padding-top: 15px;} .sqrow div {float: left; width: 250px; margin-right: 15px;} a.sq {position: absolute; top: 451px; left: 516px; width: 85px; height: 25px; display: block;} a.sq:link, a.sq:visited {background: url(img/but-submitBlue.gif) 0px 0px no-repeat;} a.sq:hover {background: url(img/but-submitBlue.gif) 0px -25px no-repeat;} #body ul.long li img {position: absolute; top: 0px; left: 32px; width: 166px; height: 145px; border: 0px;} #body ul.long li h2 {position: relative; top: 15px; left: 120px; width: 400px; margin: 0px; padding: 0px; font: bold 14px/28px Arial, Helvetica, sans-serif; color: #996699;} #body ul.long li p {position: relative; top: -10px; left: 120px; width: 400px; margin: 0px; padding: 0px;} #body ul.long li b {color: #1ba3dd; font-size: 15px;} #body ul.long li a {text-decoration: none; cursor: pointer;} #body ul.long li a p {color: #6a737b;} #body ul.long li a:hover h2 {text-decoration: underline;} #body ul.long ul a {position: absolute; top: 18px; left: 290px; display: block; width: 370px; height: 35px;} #body ul.long ul a span {display: none;} /*myskinid landing page*/ .TextFields { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #666666; text-decoration: none; margin-top: 2px;} .CommentFields { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #666666; text-decoration: none; margin-top: 2px; width:420px; height:200px;} .error { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #ff3300; text-decoration: none; background-image: url(../../images/red_arrowup.gif); background-repeat: no-repeat; background-position: left top; padding-left: 12px;} /***************************************/ /* Derm Knowledge Board*/ /***************************************/ .myskin-derm-boards {width: 530px; height: 30px; background: url(img/head-myskin-derm-boards.gif);} .myskin-derm-submit {width: 530px; height: 30px; background: url(img/head-myskin-derm-submit.gif);} #body p.topic {background: url(img/faqs-q.gif) 0px 0px no-repeat; margin: 0px; padding: 0px;} #body p.topic a:link {color: #666; text-decoration: none;} #body p.topic a:visited {color: #666; text-decoration: none;} #body p.topic a:active {color: #666; text-decoration: none;} #body p.topic a:hover {color: #666; text-decoration: none;} .rcbox-whiteongrey {position: relative; top: 0px; margin-top: 7px; left: 0px; width: 430px; height: 155px; background: url(img/rcbox-whiteongrey.gif); padding-top: 15px; padding-left: 160px; padding-right: 30px;} #body div.rcbox-whiteongrey h2, #body div.rcbox-whiteongrey p {width: 430px;} #body div.rcbox-grey div.kbcol {position: relative; float: left; width: 250px; margin-right: 25px; margin-top: 15px; line-height: 20px; overflow: hidden; color: #6a737b;} #kb-post-img {position: absolute; top: 18px; left: 15px; width: 130px; height: 100px; border: 0px;} #body ul.long2 li img {position: absolute; top: 35px; left: 32px; width: 130px; height: 100px; border: 0px;} #body ul.long2 li h2 {position: absolute; top: 25px; left: 210px; width: 400px; margin: 0px; padding: 0px; font: bold 14px/28px Arial, Helvetica, sans-serif; color: #1ba3dd;} #body ul.long2 li p {position: relative; top: -10px; left: 120px; width: 400px; margin: 0px; padding: 0px;} #body ul.long2 li a {position: absolute; top: 135px; left: 210px; color: #21a3dc; text-decoration: none; cursor: pointer;} #body ul.long2 li a p {color: #6a737b;} #body ul.long2 li a:hover h2 {text-decoration: underline;} .myskin-derm {width: 234px; height: 30px; background: url(img/hd-myskin-derm.gif);} .myskin-derm-topic {width: 251px; height: 36px; background:url(img/hd-myskin-derm-topic.gif);} .myskin-derm-spacer {width: 550px; height: 13px; background:url(img/spacer-dotted-lines);} /***************************************/ /* Personal Acne Care Landing pa folder*/ /***************************************/ .footer { margin: 0px; text-align: center; color:#808080; font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding:0px } a.footer, a.footer:link, a.footer:visited { margin: 0px; padding:0px 20px 0px 0px; font-weight: bold; color:#808080; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } /***************************************/ /* Custom Page Level Classes End */ /***************************************/ /***************************************/ /* Misc Classes */ /***************************************/ .nowrap {white-space:nowrap;} .fine {font: italic 10px/15px Arial, Helvetica, sans-serif;} b.jnj {color: #f0c;} p.jnj {color: #f0c; font-weight: bold;} .obi {font: bold italic 12px Arial, Helvetica, sans-serif; color: #e45900;} .claim {padding-left: 10px; font-style: italic; color: #21a3dc; line-height: 22px;} ul.bul li {margin-top: 7px; margin-bottom: 7px;} .heading-txt {width: 850px; font: 13px Arial, Helvetica, sans-serif; font-weight:bold; color:#1ba3dd;} .sml-txt {width: 850px; font: 10px Arial, Helvetica, sans-serif; color: #545454;} .sml-blu-txt {width: 850px; font: 10px Arial, Helvetica, sans-serif; color: #21a3dc;} .email {position: absolute; top: 0px; left: 71px; width: 70px; height: 20px;} a.email:link, a.email:visited {background: url(img/but-email.gif) 0px 0px no-repeat;} a.email:hover {background: url(img/but-email.gif) 0px -20px no-repeat;} .privacy {width: 170px; height: 30px; background: url(img/head-privacy.gif);} .privacy span {display: none;} .terms {width: 175px; height: 30px; background: url(img/head-terms.gif);} .terms span {display: none;} .legal {width: 160px; height: 30px; background: url(img/head-legal.gif);} .legal span {display: none;} .guidelines {width: 600px; height: 42px; background: url(img/head-guidelines.gif);} .guidelines span {display: none;} .cw {font-weight: bold; font-size: 12px;} a.cw:link {color: #6a737b; text-decoration: none;} a.cw:visited {color: #6a737b; text-decoration: none;} a.cw:active {color: #6a737b; text-decoration: none;} a.cw:hover {color: #21a3dc; text-decoration: underline;} .Tellus-Background { background-image: url(../images/tellus_background.jpg); background-repeat: no-repeat; background-position: left top; height: 615px; width: 658px; margin:0px; } .Small-Text{ font: 10px Arial, Helvetica, sans-serif; color: #545454;} .Normal-Text { font: 12px Arial, Helvetica, sans-serif; color: #545454;} /* STANDARD LINKS COLORS SO YOU DON'T NEED TO APPLY A CLASS*/ a:link { color: #21a3dc; text-decoration: none; } a:visited { color: #21a3dc; text-decoration: none; } a:hover { color: #21a3dc; text-decoration: underline; } #RightColumn { width: 420px; padding:0px 0px 0px 0px; position: relative; left: 0px; top: 0px; } .LeavingBackground { position:absolute; background: url(../images/leavingsite_popup2.gif) no-repeat left top; height: 133px; width: 237px; z-index:100; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal; color: #3b5998; padding:0px; vertical-align: top; text-align:left; } .LeavingBackground p{width:200px; margin:0px 10px 10px 10px; padding:0px; text-align:center;} .memcancel {width: 300px; height: 30px; background: url(img/manage_mem.gif);}