/* --------------------------- COLORS --------------------------- Grays --------- #D9D9D9 - 15% gray - only used on dark bg's #999999 - 40% gray - used on the bg of the breadcrumb and as the visited link color #666666 - 60% gray - used on white bg's for a different dark gray than the bg color #41464B - Dark Gray - used as the background color and for most headlines Greens --------- #A9D3C2 - Light Green - this is used on the dark background #97B7AB - Medium Green - this is used on either background when a different green is needed #5D776D - Dark Green - this is used for h2's in lists on the white bg. never used on dark bg Link Blues ------------ #5AA1E2 - Light Blue - this is used for all hover states of any link on a dark background #0066FF - Bright Blue - this is used for all hover states of any link on white backgrounds + the breadcrumb */ /*_________________________________________________________________________________ GENERAL LAYOUT AND COLUMN LAYOUT ===================================================================================*/ body { color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.5px; background-color: #41464B; } #page_margins { width: auto; min-width: 1002px; max-width: 1280px; margin: 0 auto; padding: 0px; } #page { padding: 0px 4px; } #main { margin: 0px; border-bottom: 2px solid #97b7ab; } #col1, #col3 { background-color: #41464b; } #col2 { background-color: #fff; } #col1_content { padding: 6px; } #col2_content { padding: 6px; } #col3_content { padding: 5px 5px 0px 5px; } /*_________________________________________________________________________________ HEADER LAYOUT ===================================================================================*/ #header { height: 80px; margin: 0px; position: relative; color: #fff; background-color: #41464B; } #header h1.siteName { width: 232px; height: 80px; margin: 0px 3px; padding: 0px; border: none; position: relative; float: left; font-size: 1px; line-height: 5px; background: url("http://media.skininc.com/designimages/si_logo_08.gif") no-repeat top left; } #header h1.siteName a { width: 232px; height: 80px; margin: 0px; padding: 0px; border: none; position: absolute; top: 0px; left: 0px; text-decoration: none; background: transparent; } #header h1.siteName a:hover { border: none; background: transparent url("http://media.skininc.com/designimages/si_logo_08_hover.gif") no-repeat top left; } #header h1.siteName a span { display: block; text-indent: -9999px; border: none; } /* this is to cover the upper right hand drop shadow */ #header img#dropShadowCorner { width: 4px; height: 4px; margin: 0px; border: 0px none; position: absolute; top: -4px; right: -4px; } /* this is for accessibility, and does not have to be replaced with an image*/ #header p.tagLine { width: 4px; height: 4px; margin: 0px; padding: 0px; position: absolute; top: 39px; left: 226px; float: left; font-size: 4px; line-height: 4px; } #header p.tagLine span { display: block; text-indent: -9999px; } /* search box and button */ #header input.text { width: 300px; margin: 0px; padding: 3px; border: 2px solid #999; position: absolute; top: 27px; left: 378px; float: left; color: #000; font-size: 13px; } #header input:focus { border-color: #a9d3c2; } #header input.submit { padding: 3px; position: absolute; top: 27px; left: 700px; } /*this is the div for the current issue cover and description */ #magazineItems { width: 252px; height: 80px; position: relative; overflow: visible; float: right; color: #fff; background: transparent; } #magazineItems #magazineItemsText { width: 113px; height: 70px; padding: 5px; overflow: hidden; float: left; font-family: Arial, Helvetica, sans-serif; text-align: right; } #magazineItems #magazineItemsText a:link { color: #fff; } #magazineItems #magazineItemsText a:visited { color: #fff; } #magazineItems #magazineItemsText a:hover { color: #5AA1E2; } #magazineItems #magazineItemsText p { margin: 0px 0px 5px 0px; display: block; color: #fff; font-weight: bold; font-size: 14px; } #magazineItems #magazineItemsText ul { margin: 0px; } #magazineItems #magazineItemsText ul li { margin: 0px 0px 5px 0px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; } /* this breaks is ie6 and has a patch to fix it in the patches.css file */ #magazineItems #magazineItemsImage { width: 115px; height: 154px; padding: 6px 8px 7px 6px; overflow: hidden; float: left; background: transparent url("http://media.skininc.com/designimages/si_cur_cover_bg.gif") no-repeat right 3px; } #magazineItems #magazineItemsImage a img, #magazineItems #magazineItemsImage a { width: 115px; height: 154px; border: none; } /* --- BREADCRUMB styles ---------------------------- */ p.breadcrumb { height: 25px; margin: 0px; padding: 0px 10px; clear: both; color: #41464B; font-size: 13px; line-height: 25px; text-decoration: none; } p.breadcrumb a:link { color: #41464B; } p.breadcrumb a:visited { color: #41464B; } p.breadcrumb a:hover { color: #fff; } p.breadcrumb span.page { color: #fff; } /*_________________________________________________________________________________ FOOTER LAYOUT ===================================================================================*/ div#footer { margin: 0px 0px 0px -4px; padding: 0px; position: relative; clear: both; color: #fff; text-align: center; background: #41464B url("http://media.skininc.com/designimages/si_footer_bg.gif") no-repeat left bottom; } div#innerFooter { height: 80px; margin: 0px -4px 0px 0px; padding: 0px; z-index: 20; background: url("http://media.skininc.com/designimages/si_footer_inner_bg.gif") no-repeat right bottom; } div#footer p { margin: 0px; padding: 15px 0px 0px 0px; color: #fff; font-size: 11px; line-height: 13px; } div#footer p a:link { color: #fff; } div#footer p a:hover { color: #5AA1E2; } div#footer p#reportBug { margin: 0px; padding: 6px 10px; position: absolute; top: 20px; left: 4px; font-weight: bold; font-size: 9px; line-height: 11px; text-transform: uppercase; text-align: right; background-color: #999; } div#footer p#reportBug a:link, div#footer p#reportBug a:visited { color: #41464b; } div#footer p#reportBug a:hover { color: #06f; } /*_________________________________________________________________________________ BASIC STYLES ===================================================================================*/ p { margin: .5em 0 1em 0; font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 13px; line-height: 17.5px; } p a:link { color: #5D776D; } p a:hover { color: #06F; } div#col1_content p, div#col3_content p { margin-top: 0px; color: #fff; } div#col1_content p a:link, div#col3_content p a:link { color: #A9D3C2; } div#col1_content p a:hover, div#col3_content p a:hover { color: #5AA1E2; } h1 { margin: 0 0 10px 0; color: #41464B; font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; line-height: 24px; } h1 a:link, h1 a:visited { color: #41464B; } h1 a:hover { color: #06f; } div#col2_content h1 { font-size: 29px; line-height: 33px; } h2 { margin: 0 0 10px 0; color: #41464B; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; line-height: 20px; } h2 a:link { color: #41464B; } h2 a:hover { color: #06F; } div#col1_content h2, div#col3_content h2 { margin-bottom: 0px; } h3 { margin: 0px 0px 10px 0px; color: #5d776d; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; line-height: 15px; } h3 a:link { color: #5d776d; } h3 a:hover { color: #06f; } h4 { margin: 0px 0px 5px 0px; color: #666; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; text-transform: uppercase; } h5 { margin: 0px 0px 10px 0px; color: #5D776D; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; line-height: 16px; } /* Author Names */ h6 { margin: 0px 0px 10px 0px; color: #666; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; line-height: 15px; } /* from issue or posted date */ h6 a:link { color: #666; } h6 a:hover { color: #06f; } h1.listTitle a { margin: 0px; padding-left: 5px; color: #06f; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px; line-height: 11px; text-decoration: none; } h1.listTitle a img { width: 12px; height: 12px; margin-right: 5px; } h1.listTitle a:hover:after { content: "Sign up for this RSS Feed"; } body#homepage h1.listTitle a:hover:after { content: ""; } div#col1_content h1, div#col3_content h1, div#col1_content h1 a:link, div#col3_content h1 a:link { color: #fff; } div#col1_content h2, div#col3_content h2, div#col1_content h2 a:link, div#col3_content h2 a:link { color: #A9D3C2; } div#col1_content h3, div#col1_content h3 a:link, div#col3_content h3, div#col3_content h3 a:link { color: #97B7AB } div#col1_content h1 a:hover, div#col3_content h1 a:hover, div#col1_content h2 a:hover, div#col3_content h2 a:hover, div#col1_content h3 a:hover, div#col3_content h3 a:hover { color: #5AA1E2; } div#col1_content h4, div#col3_content h4 { margin-bottom: 0px; color: #999; } div#col1_content h5, div#col3_content h5 { color: #97B7AB; } sub, sup { font-size: 10px; line-height: 8px; margin-left: 1px; position: relative; } sub { vertical-align: sub; top: -2px; } sup { vertical-align: super; top: 2px; } h1 sub, h1 sup { font-size: 13px; line-height: 11px; } h2 sub, h2 sup { font-size: 12px; line-height: 10px; } /*------ Lists: ul ol dl --------------------*/ ul, ol { margin: 1em 0; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.35em; } div#col1_content ul, div#col1_content ol { margin-top: 0px; } div#col2_content ul { list-style: disc outside; } li { margin: 0 0 .5em 25px; } ol.references { list-style: decimal outside; font-size: 11.5px; margin-top: 0px; } ol, ol.num { list-style-type: decimal; } ol.numTwoDigits { list-style-type: decimal-leading-zero; } ol.roman, ol.romanLower { list-style-type: lower-roman; } ol.romanUpper { list-style-type: upper-roman; } ol.alpha, ol.alphaLower { list-style-type: lower-alpha; } ol.alphaUpper { list-style-type: upper-alpha; } ul.square { list-style-type: square; } ul.circle { list-style-type: circle; } div#col1_content li { margin: 0px 0px 5px 0px; color: #fff; font-size: 13px; } div#col1_content li a:link { color: #fff; } div#col1_content li a:hover { color: #5AA1E2; } div#col2_content dl { margin-top: -5px; } div#col2_content dl dt { margin-top: 10px; } div#col2_content dl dd { padding-left: 10px; } /*_________________________________________________________________________________ UTILITY STYLES ===================================================================================*/ span.from { color: #73787d; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; } span.footnote { margin: 3px 0px 8px; padding-top: 3px; display: block; color: #666; font-size: 11px; line-height: 13px; } span.label { color: #666; } .weak, .oneOf { color: #666; font-weight: normal; font-size: .85em; line-height: 1.25em; } h1 span.weak, h1 span.oneOf { font-size: .7em; } .attn { color: #900; font-weight: bold; } .listTitle { margin-bottom: 3px; } .cursor { cursor: pointer; } .floatright { margin: 0px 0px 10px 10px; float: right; } .floatleft { margin: 0px 10px 10px 0px; float: left; } .clearleft { clear: left; } .clearright { clear: right; } a.button { padding: 3px 10px; border: 1px solid #000; display: inline-block; color: #000; font-weight: bold; text-decoration: none; cursor: pointer; background-color: #97b7ab; } a.button:hover, a.button:focus { text-decoration: underline; border-color: #5d776d; } a.button:active { border: 1px solid #999; background-color: #5d776d; } /*_________________________________________________________________________________ GENERIC FORM STYLES ===================================================================================*/ input.submit { padding: 2px 3px; border: 1px solid #000; color: #000; font-weight: bold; font-size: 13px; cursor: pointer; background-color: #97b7ab; } input.submit:hover, input.submit:focus { text-decoration: underline; cursor: pointer; border-color: #5d776d; } input.submit:active { border: 1px solid #999; background-color: #5d776d; } p.thanks_message { margin: 0px 0px 10px; padding: 5px; border: 1px solid #41464b; color: #41464b; font-weight: bold; font-size: 13.5px; text-align: center; background-color: #ff8; } p.requiredNotice { color: #666; font-size: 12px; } p.error_message { margin: 0px 0px 5px 0px; border-top: 2px solid #900; border-bottom: 2px solid #900; color: #900; font-weight: bold; font-size: 14px; line-height: 22px; text-align: center; } input.error { border: 2px solid #900 !important; } #main p.error_feedback { color: #900; } .validation-advice { margin-bottom: 10px; float: none; clear: left; color: #900; font-size: 13px; line-height: 15px; } body#VocalPointSurvey form div div.validation-advice { text-indent: 160px; } body#Newsletter-RSS div#info div.validation-advice { text-indent: 160px; } body#MergeInfo div#mergeInfo div.validation-advice { text-indent: 160px; } div#page_margins div#page div#main textarea.validation-failed, div#page_margins div#page div#main input.validation-failed { border-color: #900; margin-bottom: 2px; } /*_________________________________________________________________________________ GENERIC TABLE STYLES ===================================================================================*/ table { margin: 5px 0px 10px 0px; color: #000; width: 100%; border-collapse: collapse; } table th, table td { padding: 3px 5px; border: 1px solid #41464b; font-family: Arial, Helvetica, sans-serif; text-align: left; } table th { font-weight: bold; vertical-align: bottom; font-size: 13px; line-height: 15px; background-color: #5D776D; } table tfoot th { vertical-align: top; background-color: transparent; } table td { vertical-align: middle; font-size: 12px; line-height: 14px; background-color: #fff; } /*_________________________________________________________________________________ AD STYLES ===================================================================================*/ div#leaderboardAd { min-width: 1002px; max-width: 1280px; height: 92px; margin: 0px auto; padding: 3px 0px 8px; text-align: center; background: #41464B url("http://media.skininc.com/designimages/si_leaderboard_bg.gif") no-repeat left bottom; } div#leaderboardAd div#leaderboardAdLabel { width: 730px; height: 92px; margin: 0px auto; padding: 0px 0px 0px 10px; display: inline-block; overflow: hidden; text-align: center; background: url("http://media.allured.com/images/advertisment_7x60_v_white.gif") 0px 50% no-repeat; } div#leaderboardAd div#leaderboardAdLabel div.adBackground { width: 728px; height: 90px; display: inline-block; } div.ad { margin: 4px 0px 10px 0px; padding: 13px 0 0 0; border-top: 1px solid #999; background: url("http://media.allured.com/images/advertisment_7x60_h_white.gif") 50% 3px no-repeat; } div.adBackground { border: 1px solid #333; background-color: #FFF; overflow: hidden; margin: 0px; padding: 0px; } div.sponsoredLogo { width: 230px; text-align: center; background-color: #fff; padding: 10px; border: 1px solid #000; margin: 10px 0px; } /*____________________________________________________________________________________________________________ MAIN STYLES: LIST/DETAIL/GATEWAY PAGES ==============================================================================================================*/ /*_________________________________________________________________________________ TERTIARY NAV STYLES ===================================================================================*/ div#col1_content div.tertiary_nav { margin-bottom: 10px; border-bottom: 1px dotted #999; } div#col1_content div.tertiary_nav h1 { margin-bottom: 2px; } div#col1_content div.tertiary_nav ul { margin-bottom: 6px; padding: 12px 0px 10px 7px; border-bottom: 1px dotted #999; background: url("http://media.skininc.com/designimages/si_tertiary_structure.gif") no-repeat 4px bottom; } div#col1_content div.tertiary_nav ul li { padding-left: 13px; font-family: "Times New Roman", Times, serif; font-size: 15px; background: url("http://media.skininc.com/designimages/si_tertiary_child.gif") no-repeat left 50%; } div#col1_content div.tertiary_nav ul li a:visited { color: #fff; } div#col1_content div.tertiary_nav ul li a:hover { color: #5AA1E2; } div#col1_content div.tertiary_nav ul li.curr_page { color: #A9D3C2; font-weight: bold; } div#col1_content div.tertiary_nav ul li.curr_page a:link, div#col1_content div.tertiary_nav ul li.curr_page a:visited { color: #A9D3C2; } div#col1_content div.tertiary_nav ul li.curr_page a:hover { color: #5AA1E2; } /*_________________________________________________________________________________ LIST STYLES ===================================================================================*/ div.itemDeck { padding: 10px 0px 10px 6px; border-bottom: 1px solid #97B7AB; overflow: hidden; clear: left; } div.itemDesc { padding-left: 50px; } div#main div.itemList div.itemDeck h2 { margin: 0 0 4px 0; } div.itemDeck h2 a:link { color: #5D776D; } div.itemDeck h2 a:hover { color: #06f; } div#col1_content div.itemDeck h2, div#col1_content div.itemDeck h2 a:link, div#col3_content div.itemDeck h2, div#col3_content div.itemDeck h2 a:link { color: #A9D3C2; } div#col1_content div.itemDeck h2 a:hover, div#col3_content div.itemDeck h2 a:hover {color: #5AA1E2;} div.itemDeck h5 { margin: 0px 0px 4px 0px; font-size: 12px; } div.itemDeck p { margin: 0px; } div.itemDeck img { margin: 3px 6px 0px 0px; border: 1px solid #999; float: left; } /* --- DATE STAMP styles ----------- */ div.itemDate { width: 42px; height: 50px; margin: 0px; padding: 0px 0px; float: left; text-align: center; background: url("http://media.skininc.com/designimages/si_datestamp.gif") no-repeat top left; } div.itemDate div.itemDateMonth, div.itemDate div.itemDateDay, div.itemDate div.itemDateYear { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; text-transform: uppercase; } div.itemDate div.itemDateMonth { color: #fff; font-size: 12px; line-height: 16px; } div.itemDate div.itemDateDay { color: #000; font-size: 22px; line-height: 22px; } div.itemDate div.itemDateYear { color: #666; font-size: 10px; line-height: 10px; } /* --- Exceptions to list styles - sponsored, paid etc. ----------- */ div.itemDeck.last { margin-bottom: 0px; border-bottom: none; } div.itemList div.video.gallery { min-height: 68px; background: url("http://media.skininc.com/designimages/video_and_photo_icon.png") no-repeat 8px 66px; } div.itemList div.gallery { min-height: 68px; background: url("http://media.skininc.com/designimages/photo_gallery_icon.png") no-repeat 18px 66px; } div.itemList div.video { min-height: 65px; background: url("http://media.skininc.com/designimages/video_icon.png") no-repeat 19px 66px; } div.itemList div.sponsored { padding-top: 6px; background-color: #d9d9d9; } div.itemList div.sponsored h4 { margin-bottom: 6px; color: #41464b; } /* --- Product list styles ----------- */ /*product lists are a bit different because they don't have date stamps, just the image and title and category list*/ div#col1_content div.itemList.product div.itemDesc, div#col3_content div.itemList.product div.itemDesc { padding-left: 81px; } /*75px of img width plus 6px padding*/ div#col1_content div.itemList.product div.itemDesc img, div#col3_content div.itemList.product div.itemDesc img { float: left; margin: 0px 6px 10px -81px; } div#col1_content div.itemList.product div.itemDesc h2, div#col3_content div.itemList.product div.itemDesc h2 { margin-bottom: 10px; } /*_________________________________________________________________________________ MOST POPULAR STYLES ===================================================================================*/ div#mostReadList div.mostReadItem { margin: 0px; padding: 3px 0px 0px 0px; border-top: 1px solid #666; clear: both; } div#mostReadList div.mostReadItem.first { padding-top: 6px; border-top: none; } div#mostReadList p.mostReadCount { width: 34px; height: 27px; margin: 3px 6px 6px 0px; display: inline; float: left; color: #fff; font-size: 14px; line-height: 18px; text-align: center; background: url("http://media.skininc.com/designimages/si_most_views_bg.gif") no-repeat top left; } div#mostReadList p.mostReadNum { width: 24px; margin: 3px 6px 6px 0px; display: inline; float: left; color: #fff; font-size: 14px; line-height: 14px; text-align: right; } div#mostReadList p.mostReadLink { margin: 0px 0px 6px 0px; padding: 0px 0px 0px 30px; } div#mostReadList p.mostReadLink a:link { color: #a9d3c2;} div#mostReadList p.mostReadLink a:hover { color: #5aa1e2;} /*_________________________________________________________________________________ ARTICLE DETAIL PAGE STYLES ===================================================================================*/ div#buttons { width: 210px; margin: -6px 0px 6px -6px; padding: 3px 0px 4px 6px; border-bottom: 1px solid #999; } div#buttons a { font-size: 10px; line-height: 12px; } div#buttons a:link { color: #41464b; } div#buttons a:hover { color: #06f; } div#buttons a.emailThis { margin-right: 10px; padding: 0px 0px 0px 18px; background: url("http://media.skininc.com/designimages/email_icon.gif") no-repeat left bottom; } div#buttons a.printThis { padding: 0px 0px 0px 18px; background: url("http://media.skininc.com/designimages/print_icon.gif") no-repeat left bottom; } /* --- ARTICLE ADD-ONS -------------------------------------------- */ div#articleExtras { width: 214px; margin: 0px 0px 10px 10px; border-color: #41464b; border-style: solid; border-width: 0px 2px 2px 2px; float: right; } div#articleExtras div { margin: 0px; padding: 6px; border-top: 2px solid #41464B; } /* applies to both div#image and any div.addOn */ div#articleExtras div#articleImage { text-align: center; } /*for captions to appear below the img and centered*/ div#articleExtras div#articleImage img { border: 1px solid #41464B; } div#articleExtras div#articleImage p { margin: 6px 0px 0px 0px; font-size: 11px; line-height: 15.5px; } /* this is the caption for the main image */ div#articleExtras div h2 { margin: 0px; padding: 0px; } div#articleExtras div#gallery h2.gallery { padding-left: 25px; background: url("http://media.skininc.com/designimages/photo_gallery_icon.png") no-repeat 0% 50%; } div#articleExtras div#video h2.video { padding-left: 20px; background: url("http://media.skininc.com/designimages/video_icon.png") no-repeat 0px 4px; } div#articleExtras div.addOn ul { margin: 0px 0px 5px 0px; list-style-type: none; } div#articleExtras div.addOn li { margin: .5em 0px 0px 0px; color: #5D776D; line-height: 1.25em; } div#articleExtras div.addOn li a:link { color: #5D776D; } div#articleExtras div.addOn li a:hover { color: #06f; } /* ------- Sponsored Article Styles ----------- */ div.disclaimer { margin: 0px -6px 10px; padding: 5px 0px; background-color: #a9d3c2; } div.disclaimer p { margin: 0px; padding: 0px; color: #41464b; font-weight: bold; font-size: 11px; line-height: 11px; text-align: center; text-transform: uppercase; } div#disclaimer { margin: 10px 0px 0px; padding: 10px 0px 0px; border-top: 2px solid #41464b; clear: both; } div#disclaimer p { color: #666; } div#col3_content div#sponsorInfo { width: auto; padding: 5px; border: 1px solid #000; overflow: hidden; float: none; text-align: center; background-color: #fff; } div#col3_content div#sponsorInfo h2 { margin-bottom: 10px; color: #000; line-height: 18px; text-align: center; } div#col3_content div#sponsorInfo img { max-width: 240px; margin-bottom: 0px; } div#col3_content div#sponsorInfo h3 { width: 100%; margin: 10px 0px 2px; padding-top: 5px; border-top: 1px solid #000; display: inline-block; color: #41464b; text-align: left; } div#col3_content div#sponsorInfo p { margin: 5px 0px; color: #000; text-align: left; } div#col3_content div#sponsorInfo p a:link { color: #5d776d; } div#col3_content div#sponsorInfo p a:visited { color: #999; } div#col3_content div#sponsorInfo p a:hover { color: #06f; } /* --- PAGINATION styles ------------------------------------------- */ div#pagination { padding: 5px; clear: right; text-align: center; } div#pagination span { padding: 2px 5px; border: 1px solid #999; color: #999; font-size: 11px; line-height: 11px; text-decoration: none; background-color: #fff; } /* this is the style for a disabled button, ie previous on page 1 */ div#pagination a span { border: 1px solid #41464B; color: #41464B; text-decoration: none; } /*this is for the majority of the page #'s */ div#pagination a { text-decoration: none; } /*without this it adds an underline below the box which looks really weird*/ div#pagination a:hover span { color: #5AA1E2; text-decoration: underline; background-color: #41464B; } div#pagination span.curr_page { border: 1px solid #41464B; color: #fff; font-weight: bold; background-color: #41464B; } /* --- AUTHOR BIOS / NEWSLETTER SIGNUP AD styles --------------------------------- */ div#authorBio, div#nlSignupAd { margin: 20px 10px; padding: 10px 10px 1px; border-bottom: 1px solid #999; border-top: 1px solid #999; overflow: hidden; clear: both; -moz-box-shadow: 0px 0px 7px rgba(0,0,0,.3); -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,.3); box-shadow: 0px 0px 7px rgba(0,0,0,.3); } div#headshot, div#product { width: 120px; margin: 0px 0px 7px 10px; padding: 5px; border: 1px solid #666; float: right; } div#authorBio div#product p, div#authorBio div#headshot p { margin: 6px 0 0; font-size: 11px; line-height: 15.5px; text-align: center; } div#product h3 { text-align: center; } /* - not sure if we ended up using this or not - */ div#nlSignupAd { width: 385px; margin: 20px auto; text-align: center; } div#nlSignupAd p { font-weight: bold; } /* --- RELATED Content styles: should use some of the generic styles --------------- */ div#related { margin: 6px 0px; padding: 6px 6px 0px 6px; border: 2px solid #97b7ab; clear: both; } div#related div#contentItems h2 { margin: 0px; } div#related div#contentItems ul { margin: 6px 0px 0px; list-style: none; } div#related div#contentItems ul li { margin: 0px 0px 10px 0px; color: #666; font-style: italic; font-size: 11px; line-height: 15px; } div#related div#contentItems ul li a { color: #5d776d; font-style: normal; font-size: 13px; } div#related div#contentItems ul li a:visited { color: #999; } div#related div#contentItems ul li a:hover { color: #06f; } div#related div#categoryListWrapper { margin: 0px -6px; padding: 6px; border-top: 2px solid #97b7ab; } div#related div#categoryListWrapper p#categoryList { margin: 0px; color: #41464b; font-weight: bold; } div#related div#categoryListWrapper p#categoryList a { font-weight: normal; } /*____________________________________________________________________________________________________________ PAGE-SPECIFIC STYLES ==============================================================================================================*/ /*_________________________________________________________________________________ HOMEPAGE ===================================================================================*/ body#homepage div#main h1 { margin-bottom: 5px; font-size: 27px; line-height: 30px; } body#homepage #col1_content h1 { padding-top: 10px; border-top: 1px dotted #999;} body#homepage #col3_content { padding: 6px 6px 0px 6px;} body#homepage #col3_content div.itemList.product { margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px dotted #999; } body#homepage #col3_content div#recentSurvey { padding: 6px 4px 0px; border-top: 1px dotted #999; } body#homepage #col3_content div#recentSurvey h1 { margin-bottom: 10px; } body#homepage #col3_content div#recentSurvey h1 a:link, body#homepage #col3_content div#recentSurvey h1 a:visited { color: #fff; } body#homepage #col3_content div#recentSurvey h1 a:hover { color: #5aa1e2; } body#homepage #col3_content div#recentSurvey p { margin: 6px 0px 10px; } /* --- CAROUSEL styles ---------------------------- */ div#carousel { width: 354px; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px dotted #999; overflow: hidden; } div#stage { width: 352px; height: 218px; border: 1px solid #000; overflow: hidden; } div#stage div.wrapper { width: 352px; height: 218px; position: relative; top: 0px; left: 0px; overflow: hidden; } div#carousel div.slide { width: 352px; height: 218px; border: 1px solid #000; position: absolute; top: -1px; left: -1px; overflow: hidden; z-index: 20; background-color: #fff; } div#carousel div.topSlide { z-index: 500; } div#carousel div.btmSlide { z-index: 490; } div#carousel div.slide div.thumbnail { width: 200px; position: absolute; top: 0px; left: 0px; } div#carousel div.slide div.thumbnail a { display: block; } div#carousel div.slide div.copy { width: 152px; height: 220px; padding: 10px 0px; position: absolute; top: -10px; left: 200px; overflow: hidden; background-color: #fff; -moz-box-shadow: -5px 0px 7px #fff; -webkit-box-shadow: -5px 0px 7px #fff; box-shadow: -5px 0px 7px #fff; } div#carousel div.slide div.copy a { display: block; text-decoration: none; color: #5d776d; } div#carousel div.slide div.copy a:visited { color: #999; } div#carousel div.slide div.copy h2 { margin: 0px; } div#carousel div.slide div.copy h2 a { padding: 10px 10px 4px; } div#carousel div.slide div.copy p { margin: 0px; } div#carousel div.slide div.copy p a { min-height: 175px; padding: 3px 10px 10px; } div#carousel div.slide:hover div.copy a, div#carousel div.slide div.copy:hover a, div#carousel div.slide div.copy h2 a:hover, div#carousel div.slide div.copy p a:hover { color: #06f; text-decoration: underline; } /* --- CAROUSEL Controls ---------- */ div#carousel div#controls { height: 30px; border: 1px solid #000; border-top: 0px none; display: none; position: relative; z-index: 502; background-color: #97b7ab; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.4) inset; box-shadow: 0px 0px 3px rgba(0,0,0,.4) inset; -moz-border-radius: 0px 0px 7px 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px; border-radius: 0px 0px 7px 7px; } div#controls p { margin: 0px; padding: 0px; cursor: pointer; } div#controls p span { display: block; } div#controls p.jumpTo { width: 25px; height: 24px; border-style: solid; border-color: #97b7ab; border-width: 0px 1px 1px; position: absolute; top: 0px; z-index: 30; text-align: center; text-shadow: 0px 1px 3px rgba(0,0,0,.2); background-color: #a9d3c2; -moz-border-radius: 0px 0px 4px 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-radius: 0px 0px 4px 4px; } div#controls p.jumpTo span { width: 25px; height: 24px; margin: 0px; padding: 0px; display: block; float: none; color: #41464b; font-weight: normal; font-size: 15px; line-height: 24px; text-decoration: none; background-color: transparent; -moz-border-radius: 0px 0px 4px 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-radius: 0px 0px 4px 4px; } div#controls p.jumpTo span:hover { color: #fff; background-color: #5d776d; } div#controls p.current { height: 26px; border-color: #fff; top: -2px; z-index: 510; text-shadow: 1px 1px 1px rgba(0,0,0,.35); background-color: #fff; -moz-box-shadow: 0px 2px 2px #000; -webkit-box-shadow: 0px 2px 2px #000; box-shadow: 0px 2px 2px #000; } div#controls p.current span { height: 26px; color: #41464b; font-weight: bold; line-height: 28px; } div#controls p.current span:hover { color: #41464b; background-color: transparent; } div#controls p#jumpButton1 { left: 204px; } div#controls p#jumpButton2 { left: 233px; } div#controls p#jumpButton3 { left: 262px; } div#controls p#jumpButton4 { left: 291px; } div#controls p#jumpButton5 { left: 320px; } div#controls p.skip, div#controls p.pp { width: 20px; height: 20px; position: absolute; top: 5px; background-position: 0px 0px; background-repeat: no-repeat; } /*div#controls p.skip a, div#controls p.pp a { width: 20px; height: 20px; position: relative; display: block; color: #000; text-decoration: none; }*/ div#controls p.skip span, div#controls p.pp span { padding: 1px 4px 0px; border-style: solid; border-color: #000; border-width: 1px 1px 0px; position: relative; top: -15px; display: none; z-index: 520; color: #000; font-size: 10px; line-height: 14px; text-transform: uppercase; background-color: #97b7ab; -moz-box-shadow: 0px -1px 1px rgba(0,0,0,.6); -webkit-box-shadow: 0px -1px 1px rgba(0,0,0,.6); box-shadow: 0px -1px 1px rgba(0,0,0,.6); } div#controls p#previous { left: 62px; background-image: url("http://media.skininc.com/designimages/si_cPrev.gif"); } div#controls p#previous span { left: -9px; } div#controls p#play { left: 89px; z-index: 511; background-image: url("http://media.skininc.com/designimages/si_cPlay.gif"); } div#controls p#play span { left: -7px; } div#controls p#pause { left: 89px; z-index: 512; background-image: url("http://media.skininc.com/designimages/si_cPause.gif"); } div#controls p#pause span { left: -12px; } div#controls p#next { left: 116px; background-image: url("http://media.skininc.com/designimages/si_cNext.gif"); } div#controls p#next span { left: -8px; } /* end of carousel styles */ /*_________________________________________________________________________________ VOCAL POINT Survey page: body#VocalPointSurvey ===================================================================================*/ body#VocalPointSurvey div#col1 ul li a:link { color: #a9d3c2; } body#VocalPointSurvey div#col1 ul li a:hover { color: #5aa1e2; } body#VocalPointSurvey div#col1 form { margin-top: 10px; padding-top: 6px; border-top: 1px dotted #999; } body#VocalPointSurvey div#col1 form h1 { padding-top: 6px; border-top: 1px dotted #999; } body#VocalPointSurvey div#col1 form textarea#question { width: 224px; margin-bottom: 6px; padding: 3px; border: 2px solid #999; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } body#VocalPointSurvey div#col2 form { padding-right: 265px; } body#VocalPointSurvey div#col2 form textarea#question { width: 375px; padding: 3px; border: 2px solid #999; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } body#VocalPointSurvey div#contactInfo { width: 420px; } body#VocalPointSurvey div#contactInfo label { width: 140px; padding: 5px 10px; float: left; clear: left; font-weight: bold; font-size: 13px; text-align: right; } body#VocalPointSurvey div#contactInfo input#first, body#VocalPointSurvey div#contactInfo input#last, body#VocalPointSurvey div#contactInfo input#email, body#VocalPointSurvey div#contactInfo input#company, body#VocalPointSurvey div#contactInfo input#title, body#VocalPointSurvey div#contactInfo input#addy1, body#VocalPointSurvey div#contactInfo input#addy2, body#VocalPointSurvey div#contactInfo input#city, body#VocalPointSurvey div#contactInfo input#state, body#VocalPointSurvey div#contactInfo input#country, body#VocalPointSurvey div#contactInfo input#zip { width: 225px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; position: static; float: left; clear: none; color: #000; font-size: 13px; } body#VocalPointSurvey div#contactInfo input#vpSubmit { margin: 0px; position: relative; left: 160px; float: left; clear: both; } div#sponsorInfo { width: 238px; padding: 6px; border: 2px solid #97b7ab; float: right; } div#sponsorInfo h4 { text-align: center; } div#sponsorInfo img { margin-bottom: 10px; } div#sponsorInfo p { margin-bottom: 0px; } body#VocalPointSurvey dl { width: 450px; } body#VocalPointSurvey dl dt { clear: left; font-size: 13px; } body#VocalPointSurvey dl dt img { margin: 0px 6px 6px 0px; float: left; } body#VocalPointSurvey dl dt.winner img { margin-bottom: -2px; border: 2px solid #97b7ab; } body#VocalPointSurvey dl dt.winner span { width: 88px; margin: 0px 6px 6px 0px; padding: 5px 6px; border: 2px solid #97b7ab; display: inline-block; float: left; clear: left; color: #41464b; font-weight: bold; font-size: 12px; line-height: 14px; } body#VocalPointSurvey dl dd { margin: 2px 0px 15px 20px; clear: left; color: #666; font-size: 12px; } /*_________________________________________________________________________________ BUYER'S GUUIDE ===================================================================================*/ body#directory { background-color: #41464b; } body#directory p#logoutLink { margin: 0px; position: absolute; top: 10px; right: 14px; } body#directory p#logoutLink a:link, body#directory p#logoutLink a:visited { color: #a9d3c2; } body#directory p#logoutLink a:hover { color: #5aa1e2; } /*_________________________________________________________________________________ EVENTS GATEWAY ===================================================================================*/ body#Events div#eventNews, body#Events div#nextWebinar, body#Events div#ourEvents { margin: 0px -6px; padding: 6px; border-top: 2px solid #41464B; } /*_________________________________________________________________________________ EVENTS - CALENDAR OF EVENTS: body#Events-CalendarofEvents ===================================================================================*/ table.sortableTable tr.featuredEventSlug { background-color: #a9d3c2; } table.sortableTable tr.featuredEventSlug h4 { margin-bottom: 0px; } /*_________________________________________________________________________________ SORTABLE TABLES - used in Calendar of events and ContinuingEducation ===================================================================================*/ table.sortableTable { margin-top: 0px; } table.sortableTable td { padding: 6px; border-style: solid; border-color: #41464b; border-width: 0px; vertical-align: baseline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; } /* ------- table header-width styles --------- */ table.sortableTable thead th#calName { width: auto; } table.sortableTable thead th#calType { width: 100px; } table.sortableTable thead th#calLocation { width: 151px; } table.sortableTable thead th#calDate { width: 102px; text-align: center; } /* ------- table header styles --------- */ table.sortableTable thead th { padding: 0px; border-width: 1px; border-style: solid; border-color: #41464b; color: #d9d9d9; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; line-height: 14px; background-color: #5d776d; } table.sortableTable thead th a { width: 100%; padding: 7px 0px; display: block; text-indent: 7px; } table.sortableTable thead th a:link, table.sortableTable thead th a:visited { color: #d9d9d9; } table.sortableTable thead th a:hover { color: #5aa1e2; } table.sortableTable thead th#calDate a { text-indent: 0px; } table.sortableTable thead th.ascending a span { width: 15px; height: 12px; position: absolute; background: url("http://media.skininc.com/designimages/si_sort_arrow_up.gif") no-repeat right 60%; } table.sortableTable thead th.descending a span { width: 15px; height: 12px; position: absolute; background: url("http://media.skininc.com/designimages/si_sort_arrow_down.gif") no-repeat right 60%; } /* since date is the only centered header, and the span is not counted towards this, we must move it all over by half the width of the sorted arrow */ table.sortableTable tr.header td#calDate.ascending a, table.sortableTable tr.header td#calDate.descending a { text-indent: -7px; } /* ------- table event:row1 styles --------- */ table.sortableTable tr.eventListingLine1 td { padding-top: 10px; } table.sortableTable tr.eventListingLine1 td.eventTitle { color: #5d776d; font-weight: bold; } table.sortableTable tr.eventListingLine1 td.eventTitle a:link, table.sortableTable tr.eventListingLine1 td.eventTitle a:visited { color:#5d776d; } table.sortableTable tr.eventListingLine1 td.eventTitle a:hover { color: #06f; } table.sortableTable tr.eventListingLine1 td.eventType { margin: 0px; color: #666; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; text-transform: uppercase; } table.sortableTable tr.eventListingLine1 td.eventDate { font-weight: bold; text-align: center; } /* ------- table event:row2 styles --------- */ table.sortableTable tr.eventListingLine2 td { padding-bottom: 10px; border-bottom-width: 2px; } table.sortableTable tr.eventListingLine2 td.eventDescription { padding-left: 16px; } table.sortableTable tr.alluredEvent td { background-color: #e8eeec; } /* highlighting allured events */ /*_________________________________________________________________________________ EVENTS - WEBINARS ===================================================================================*/ body#Events-Webinars div#col2_content img.webinarBranding { margin: 0px 0px 10px 10px; border: none; float: right; } div#webinarAction { margin: 10px 0px; padding: 6px 0px; border-style: solid; border-color: #97b7ab; border-width: 1px 0px; clear: both; color: #5d776d; font-weight: bold; text-align: center; } div#webinarAction a.register { font-size: 16px; } body#Events-Webinars div#sponsorInfo { margin: 5px 0px 10px 10px; clear: right; } body#Events-Webinars div#col2_content div.first { border-top: 0px none; } body#Events-Webinars div.speaker { margin: 0px; padding: 6px 0px; border-top: 1px solid #97b7ab; clear: left; } body#Events-Webinars div.speaker img { margin: 0px 10px 0px 0px; float: left; } /*_________________________________________________________________________________ EDUCATION GATEWAY ===================================================================================*/ body#Education div#licensingNews, body#Education div#lastWebinar { margin: 0px -6px; padding: 6px; border-top: 2px solid #41464B; } /*body#Education div#blogHighlights { margin: 0px -6px; padding: 6px; border-top: 2px solid #41464B; } body#Education div#blogHighlights h2 { clear: left; } body#Education div#blogHighlights div { width: 215px; margin: 0px 0px 10px 10px; padding: 6px 0px; border: 2px solid #41464b; overflow: visible; float: right; } body#Education div#blogHighlights div h4 { padding: 0px 6px; } body#Education div#blogHighlights div h2 { padding: 6px 6px 0px 6px; border-top: 1px solid #41464b; } body#Education div#blogHighlights div h6 { padding: 0px 6px; margin-bottom: 6px; } body#Education div#blogHighlights div p { margin: 6px; } body#Education div#blogHighlights div.blogAvatars { width: 73px; margin: 0px 15px 0px 0px; padding: 0px; border: none; float: left; text-align: center; }*/ /*_________________________________________________________________________________ EDUCATION - ASSOCIATIONS ===================================================================================*/ div.assnListing { padding-top: 6px; border-top: 1px solid #97B7AB; } div.assnListing p { padding-left: 15px; } /*_________________________________________________________________________________ ADD EVENT FROM STYLES: body#Education-ContinuingEducation-AddEvent ===================================================================================*/ form#addEvent { width: 450px; overflow: hidden; } form#addEvent label { width: 140px; padding: 5px 10px; float: left; clear: left; font-weight: bold; font-size: 13px; text-align: right; } form#addEvent label.disabled { color: #999; } form#addEvent input.checkbox { position: relative; left: 160px; display: block; clear: left; } form#addEvent label.checkboxLabel { width: 215px; margin: -15px 0px 10px 0px; padding: 0px; position: relative; left: 180px; display: block; float: none; clear: none; text-align: left; } span.requiredField { margin-right: 2px; color: #900; font-size: 14px; } form#addEvent input.text { width: 225px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; position: static; float: left; clear: none; color: #000; font-size: 13px; } form#addEvent textarea { width: 225px; max-width: 250px; height: 100px; max-height: 150px; margin: 0px 10px 10px 0px; padding: 4px 3px; border: 2px solid #999; display: block; float: left; font-family: Lucida Grande, Arial, Helvetica, sans-serif; font-size: 12px; } form#addEvent p.helpText { display: block; clear: both; color: #666; font-size: 12px; padding-left: 160px; position: relative; top: -6px; margin: 0px 0px 5px; } form#addEvent input.submit { margin: 0px; position: relative; left: 160px; float: left; clear: both; } form#addEvent div#eventStart, form#addEvent div#eventEnd { margin: 0px 0px 10px 0px; display: block; overflow: hidden; clear: left; } form#addEvent div#eventStart { margin-top: 10px; } form#addEvent div#eventStart label, form#addEvent div#eventEnd label { padding: 0px 10px; } form#addEvent div#eventStart select, form#addEvent div#eventEnd select { margin: 0px 3px 0px 0px; } /* honeypot */ body#Education-ContinuingEducation-AddEvent form#addEvent label#subjectLabel, body#Education-ContinuingEducation-AddEvent form#addEvent input#subject { display: none !important; } /*_________________________________________________________________________________ MAGAZINE GATEWAY AND SITE SECTION ===================================================================================*/ div#col1_content div#subItems p a:link { color: #fff; } div#col1_content div#subItems p a:visited { color: #fff; } div#col1_content div#subItems p a:hover { color: #5aa1e2; } div#col1_content div#subItems ul li a:visited { color: #fff; } div#col1_content div#subItems ul li a:hover { color: #5aa1e2; } div#recentIssues ul li.issue { margin: 0px; color: #A9D3C2; font-weight: bold; font-size: 16px; } /*this should be the same as an h2 link on a reversed bg*/ div#recentIssues ul li.issue a:link { color: #A9D3C2; } div#recentIssues ul li.issue a:hover { color: #5AA1E2; } div#recentIssues ul li.blurbs { margin-bottom: 15px; line-height: 1.25em; } div#col1_content div#subItems, div#col1_content div#recentIssues, div#col1_content div#suggestArticle { margin-bottom: 6px; padding: 10px 0px; border-style: dotted; border-color: #999; } div#col1_content div#subItems { padding-top: 0px; border-bottom-width: 1px; } div#recentIssues { border-top-width: 1px; } div#recentIssues p { margin: 0px; } /*the 'view more issues' p is getting too much space at the bottom*/ body#Magazine div#magazineInfo { margin-bottom: 10px; } body#Magazine div#currentIssue { margin: 0px -6px; padding: 6px 6px 0px 6px; border-top: 2px solid #41464B; } body#Magazine div#currentIssue h1 a:visited {color: #41464b; } body#Magazine div#currentIssue h1 a:hover {color: #06f; } body#Magazine div#currentIssue a.currentIssueCover { width: 115px; height: 169px; margin: 0px 0px 4px 10px; float: right; background: url("http://media.skininc.com/designimages/si_view_toc_text.gif") no-repeat 10% 100px; } body#Magazine div#currentIssue a.currentIssueCover:hover { background-position: 50% 100%; } body#Magazine div#comingSoon { margin: 0px -6px; padding: 6px; border-top: 2px solid #41464B; } body#Magazine div#comingSoon div { width: 215px; margin-left: -1px; padding: 0 10px; border-left: 1px solid #41464B; float: left; } body#Magazine div#comingSoon div.nextIssue { margin: 0px; padding: 0px 6px 0px 0px; border-left: none; border-right: 1px solid #41464b; } div#pastIssues div img, body#Magazine div#comingSoon div img { width: 115px; margin: 0px 6px 0px 0px; float: left; } div#pastIssues div.issueYear div h2, body#Magazine div#comingSoon div h2 { margin: 0px; padding: 0px; line-height: 20px; } div#pastIssues div p, body#Magazine div#comingSoon div p { margin: 7px 0px 2px 0px; padding: 0px; color: #666; font-size: 11px; line-height: 11px; } body#Magazine div#comingSoon h2.subOffer { margin: 10px 0px; display: block; clear: both; } /* --- Advertisers Index body#Magazine-AdvertisersIndex ------------- */ /*body#Magazine-AdvertisersIndex div.alphaAnchors { margin-bottom: 10px; } body#Magazine-AdvertisersIndex div.alphaAnchors span { margin-right: 2px; padding: 1px 3px; border: 1px solid #999; color: #999; font-size: 11px; line-height: 11px; text-decoration: none; background-color: #fff; } body#Magazine-AdvertisersIndex div.alphaAnchors a { text-decoration: none; } body#Magazine-AdvertisersIndex div.alphaAnchors a span { border: 1px solid #41464b; color: #41464b; text-decoration: none; } body#Magazine-AdvertisersIndex div.alphaAnchors a:visited { color: #41464b; } body#Magazine-AdvertisersIndex div.alphaAnchors a:hover span { color: #5aa1e2; text-decoration: underline; background-color: #41464b; } body#Magazine-AdvertisersIndex div.contactEntry p { margin: 0px; padding-left: 15px; text-indent: -15px; } body#Magazine-AdvertisersIndex div.contactEntry p.backToTop { width: 115px; margin: 0px 10px; padding: 0px; float: right; font-size: 10px; line-height: 18px; text-align: right; text-indent: 0px; } body#Magazine-AdvertisersIndex div.contactEntry p.backToTop a { margin: 0px; padding: 0px 18px 0px 0px; background: url("http://media.skininc.com/designimages/si_sort_arrow_up.gif") no-repeat right 60%; } body#Magazine-AdvertisersIndex div.contactEntry p.backToTop a:hover { background: url("http://media.skininc.com/designimages/si_sort_arrow_up_hover.gif") no-repeat right 60%; }*/ /*_________________________________________________________________________________ MAGAZINE CLASSIFIEDS ===================================================================================*/ div.classified { margin: 0px; padding: 10px 0px; border-bottom: 1px solid #97b7ab; } div.classified img, div.classified p { margin: 0px 0px 0px 15px; padding: 0px; } body#Magazine-ClassifiedAds div.first { border-top: 1px solid #97b7ab; } body#Magazine-ClassifiedAds div.last { border-bottom: none; } body#Magazine-ClassifiedAds div#marketplace { margin: 6px -6px 0px -6px; padding: 6px 6px 0px 6px; border-top: 2px solid #41464b; } body#Magazine-ClassifiedAds div#marketplace div.first { border-top: none; } body#Magazine-ClassifiedAds div#marketplace p { margin: 0px; } body#Magazine-ClassifiedAds div#marketplace h2 { margin-top: 10px; } /*_________________________________________________________________________________ MAGAZINE PAST ISSUES ===================================================================================*/ div#pastIssues p.jumpMenu { margin: 6px 0px; color: #41464B; font-size: 14px; } div#pastIssues p.jumpMenu a:link { color: #41464B; } div#pastIssues p.jumpMenu a:hover { color: #06F; } div#pastIssues div.issueYear { width: 720px; margin: -1px 0px 0px; padding: 6px 0px 10px; border-top: 1px solid #97b7ab; border-bottom: 1px solid #97b7ab; overflow: hidden; clear: left; } div#pastIssues div.issueYear h2 { margin: 0px; line-height: 16px; } div#pastIssues div.issueYear div { width: 232px; height: 154px; margin: 10px 6px 0px 0px; border: 2px solid #fff; float: left; background: url("http://media.allured.com/designimages/cover_art_bg.gif") no-repeat top left; } div#pastIssues div.issueYear div:hover { border-color: #d9d9d9; } div#pastIssues div.issueYear div.issue3, div#pastIssues div.issueYear div.issue6, div#pastIssues div.issueYear div.issue9, div#pastIssues div.issueYear div.issue12 { margin-right: 0px; } div#pastIssues div.issueYear div.issue4, div#pastIssues div.issueYear div.issue7, div#pastIssues div.issueYear div.issue10 { clear: left; } /*_________________________________________________________________________________ MAGAZINE TOC STYLES ===================================================================================*/ div.issueNavigation { width: 200px; margin-bottom: 5px; overflow: hidden; float: right; } div.issueNavigation p.prevIssue { margin: 0px; float: left; text-transform: uppercase; } div.issueNavigation p.nextIssue { margin: 0px; float: right; text-transform: uppercase; } div#TOC h2 { margin: 15px 0px 6px 0px; padding-top: 6px; border-top: 1px solid #97b7ab;} div#TOC div#issueExtras #webExclusives h3, div#TOC h3.articleTitle { margin: 10px 0px 0px 0px; padding: 0px 0px 0px 15px; border-width: 0px; color: #5D776D; font-weight: normal; font-size: 13px; line-height: 16px; } div#TOC div#issueExtras #webExclusives h3 a:link, div#TOC h3.articleTitle a:link { color: #5D776D; } div#TOC div#issueExtras #webExclusives h3 a:hover, div#TOC h3.articleTitle a:hover { color: #06F; } div#TOC h5 { margin: 0px; padding: 0px 0px 0px 15px; border: none; color: #666; font-style: italic; font-size: 11px; } div#TOC div#issueExtras { width: 206px; margin: 0px 0px 10px 10px; float: right; clear: right; background-color: #fff; } div#TOC div#issueExtras img { width: 200px; height: 268px; margin: 0px 0px 10px 0px; padding: 0px; float: right; } div#TOC div#issueExtras #webExclusives { width: 198px; margin-bottom: 6px; border: 1px solid #41464b; float: right; background-color: #fff; } div#TOC div#issueExtras #webExclusives h2 { margin: 0px; padding: 0px; border: none; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; line-height: 26px; text-align: center; background-color: #41464b; } div#TOC div#issueExtras #webExclusives h3 { margin: 10px 0px; padding: 0px 6px; } /*_________________________________________________________________________________ ADVERTISING STYLES ===================================================================================*/ body#Advertising div#col2 img { margin: 0px 0px 10px 10px; padding: 0px; float: right; clear: right; } body#Advertising div#col2 h2 { } body#Advertising div#col2 div#mediakit { width: 182px; margin: 0px 0px 10px 10px; padding: 6px; border: 2px solid #d9d9d9; float: right; text-align: center; } body#Advertising div#col2 div#mediakit img { margin: 0px; border: 1px solid #999; float: none; clear: none; text-decoration: none; } body#Advertising div#col2 div#mediakit span { font-size: 11px; } /*_________________________________________________________________________________ CONTACT US STYLES ===================================================================================*/ body#ContactUs div#col2_content h2 { margin: 6px -6px 0px -6px; padding: 6px 6px 0px 6px; border-top: 2px solid #41464b; clear: both; } div.contactEntry { margin: 0px 0px 10px 0px; padding-top: 6px; border-top: 1px solid #97b7ab; overflow: hidden; clear: both; } body#ContactUs div.first { border-top: none; } body#ContactUs div.contactEntry p.contactInfo { width: 220px; margin: 0px 10px; float: left; clear: both; } body#ContactUs div.contactEntry p.contactExtras { width: 210px; margin: 0px; float: left; color: #666; } body#Feedback #col2_content form p.thanks_message, body#ContactUs #col1_content form p.thanks_message { margin: 5px 0px 8px; } body#Feedback div#col2_content form div#feedbackForm label, body#ContactUs #col1_content form div#feedbackForm label { display: block; color: #fff; font-weight: bold; font-size: 13px; } body#Feedback div#col2_content form div#feedbackForm label { color: #41464b; } body#Feedback div#col2_content form div#feedbackForm input, body#ContactUs #col1_content form div#feedbackForm input { width: 200px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; display: block; color: #000; font-family: Lucida Grande, Arial, sans-serif; font-size: 13px; } body#Feedback div#col2_content form div#feedbackForm input#emailAddy, body#ContactUs #col1_content form div#feedbackForm input#emailAddy { margin-bottom: 0px; } body#Feedback div#col2_content form, body#ContactUs div#col1_content form { margin-bottom: 10px; } body#ContactUs #col1_content form div#feedbackForm input:focus { border-color: #a9d3c2; } body#Feedback div#col2_content form p, body#ContactUs #col1_content form p { margin: 5px 0px;} body#Feedback div#col2_content form div#feedbackForm, body#ContactUs #col1_content form div#feedbackForm { margin-top: 10px; } body#Feedback div#col2_content form div#feedbackForm p, body#ContactUs #col1_content form div#feedbackForm p { margin: 0px 0px 10px 0px; font-size: 11px; } body#Feedback div#col2_content form textarea, body#ContactUs #col1_content form textarea { width: 240px; max-width: 240px; max-height: 300px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; color: #000; font-family: Lucida Grande, Arial, sans-serif; font-size: 13px; } body#Feedback #col2_content form textarea:focus, body#ContactUs #col1_content form textarea:focus { border-color: #a9d3c2; } body#Feedback div#col2_content form input#feedbackSubmit, body#ContactUs #col1_content form input#feedbackSubmit { width: 70px; margin: 0px; display: block; } /*_________________________________________________________________________________ HUBERT LAM SCHOLARSHIP ===================================================================================*/ form#HLMScholarshipApp h2 { margin: 10px 0px -5px; padding-top: 7px; border-top: 2px solid #666; } form#HLMScholarshipApp h3 { margin-top: 12px; padding-top: 5px; font-size: 14px; line-height: 16px; } form#HLMScholarshipApp label { width: 250px; padding: 0px 0px 2px 0px; display: block; clear: left; font-size: 13px; } form#HLMScholarshipApp input.text { width: 200px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; display: block; color: #000; font-family: Lucida Grande, Arial, sans-serif; font-size: 13px; } form#HLMScholarshipApp select { margin-bottom: 10px; display: block; } form#HLMScholarshipApp textarea { width: 420px; max-width: 420px; max-height: 150px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; color: #000; font-family: Lucida Grande, Arial, sans-serif; font-size: 13px; } form#HLMScholarshipApp textarea#essay { height: 200px; max-height: 300px; } form#HLMScholarshipApp fieldset { margin-bottom: 15px; padding: 5px 8px; border: 1px solid #5d776d; } form#HLMScholarshipApp fieldset legend { padding: 0px 3px; display: inline; color: #5d776d; } body#HLMS p#licenseNote, body#HLMS p#essayLimit { margin: -5px 0px 10px; color: #666; font-size: 11.5px; } form#HLMScholarshipApp p { margin: 5px 0px; } /*_________________________________________________________________________________ MERGE MAGAZINE SIGNUP ===================================================================================*/ body#MergeInfo div#col2_content form div#mergeInfo label { width: 140px; padding: 5px 10px; float: left; clear: left; font-weight: bold; font-size: 13px; text-align: right; } body#MergeInfo div#col2_content form div#mergeInfo input { width: 225px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; display: block; float: left; color: #000; font-size: 13px; } body#MergeInfo div#col2_content form p { margin: 5px 0px; clear: both; } body#MergeInfo div#col2_content form div#mergeInfo { width: 410px; margin-top: 10px; } body#MergeInfo div#col2_content form div#mergeInfo p { margin: 0px 0px 10px 0px; font-size: 11px; } body#MergeInfo div#col2_content form textarea { width: 385px; margin-bottom: 6px; padding: 3px; border: 2px solid #999; float: left; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } body#MergeInfo div#col2_content form input#mergeSubmit { margin: 0px; position: relative; left: 335px; display: block; float: none; clear: both; } /* --- Merge Advertising: body#Merge ------------------------------------------------ */ body#Merge #mergeMediaKit { width: 150px; margin: 0px 0px 10px 10px; padding: 6px; border: 2px solid #d9d9d9; float: right; text-align: center; } body#Merge #mergeMediaKit p { margin: 6px 0px 0px; font-size: 11px; } body#Merge img#mergeLogo { margin: 0px 10px 10px 0px; } /*_________________________________________________________________________________ BOOKSTORE STYLES ===================================================================================*/ div#featured { margin: 10px -6px 0px; padding: 10px 6px 0px; border-top: 2px solid #41464b; clear: both; } div.book { margin-top: 15px; border-bottom: 1px solid #97B7AB; overflow: hidden; clear: both; } div.book p { margin-bottom: 8px; } div.book img { margin: 0px 6px 7px 0px; float: left; } div.orderLink { padding-top: 10px; text-align: center; } div.orderLink p { margin: 0px 0px 5px; } /*_________________________________________________________________________________ FAQ STYLES ===================================================================================*/ body#FAQ dl { margin: 0px 0px 15px 0px; padding: 0px; } body#FAQ dl dt { margin: 0px 0 10px 0; color: #41464B; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; line-height: 20px; } body#FAQ dl dd { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 35px; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.5px; } /*_________________________________________________________________________________ SITEMAP STYLES ===================================================================================*/ body#Sitemap #col2_content h2 a:link { color: #41464b; } body#Sitemap #col2_content h2 a:visited { color: #41464b; } body#Sitemap #col2_content h2 a:hover { color: #06f; } body#Sitemap div.mapColumn { float: left; margin-right: 10px; width: 230px; } body#Sitemap div.mapColumn ul { list-style-type: none; margin: 0px 0px 15px 0px; } /* all of the uls */ body#Sitemap div.mapColumn h2 { margin-bottom: 6px; } /*primary nav */ body#Sitemap div.mapColumn h2 a img { height: 12px; width: 12px; margin-left: 5px; } /* rss logo after all h2's */ body#Sitemap div.mapColumn ul li { font-weight: bold; margin: 0px 0px 2px 0px; } /*secondary nav */ body#Sitemap div.mapColumn ul ul li { font-weight: normal; margin: 0px 0px 2px 0px; } /*tertiary nav */ body#Sitemap div.mapColumn ul ul { margin: 0px 0px 0px 15px; } /*_________________________________________________________________________________ NEWSLETTER / RSS STYLES: body#Newsletter-RSS ===================================================================================*/ body#Newsletter-RSS #col3_content { padding: 6px; } body#Newsletter-RSS #col3_content ul li { margin-left: 0px; } body#Newsletter-RSS #col1_content ul#pastNewsletters li span { color: #d9d9d9; font-size: 11px; } body#Newsletter-RSS #col3_content ul li a:link { color: #fff; } body#Newsletter-RSS #col3_content ul li a:visited { color: #fff; } body#Newsletter-RSS #col3_content ul li a:hover { color: #5aa1e2; } body#Newsletter-RSS #col3_content p { color: #fff; } body#Newsletter-RSS #col3_content p a:link { color: #a9d3c2; } body#Newsletter-RSS #col3_content p a:visited { color: #999; } body#Newsletter-RSS #col3_content p a:hover { color: #5aa1e2; } body#Newsletter-RSS div#info { width: 420px; overflow: hidden; } body#Newsletter-RSS div#col2 form input.checkbox { display: none; } body#Newsletter-RSS div#info label { width: 140px; padding: 5px 10px; float: left; clear: left; font-weight: bold; font-size: 13px; text-align: right; } body#Newsletter-RSS div#info input#email, body#Newsletter-RSS div#info input#firstname, body#Newsletter-RSS div#info input#lastname, body#Newsletter-RSS div#info input#company, body#Newsletter-RSS div#info input#title, body#Newsletter-RSS div#info input#city, body#Newsletter-RSS div#info input#state, body#Newsletter-RSS div#info input#country { width: 225px; margin-bottom: 10px; padding: 3px; border: 2px solid #999; position: static; float: left; clear: none; color: #000; font-size: 13px; } body#Newsletter-RSS div#info input#nlSubmit { margin: 0px; position: relative; left: 160px; float: left; clear: left; } /*_________________________________________________________________________________ OUR SERP - google site search results page ===================================================================================*/ body#Search div#col2_content iframe { width: 100%; } /*_________________________________________________________________________________ DEV STUFF ===================================================================================*/ div#devHeader { width: 540px; border-width: 0px 1px 1px; border-style: solid; border-color: #000; position: fixed; top: 0px; left: 10px; display: block; z-index: 1000; text-align: center; background-color: #9cf; background-color: rgba(153,204,255,.95); -moz-border-radius: 0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.8); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.8); } div#devHeader p#devDivClose { margin: 0px; position: absolute; top: 4px; right: 10px; font-size: 12px; } div#devHeader p#devDivClose a:link, div#devHeader p#devDivClose a:visited { color: #027; } div#devHeader p#devDivClose a:hover { color: #900; } div#devHeader h1 { width: 300px; margin: 0px; float: left; color: #027; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; text-align: left; text-indent: 20px; text-shadow: 1px 1px 1px rgba(0,0,0,.3); } body#splash div#devHeader h1 { height: auto; background: none; } div#devHeader p#toggleText { margin: 0px; height: 24px; float: left; font-size: 12px; line-height: 24px; text-align: left; } div#devHeader p#toggleText a#toggleLink { width: 100px; padding-left: 15px; display: block; color: #027; background-position: 0 7px; background-repeat: no-repeat; background-image: url("http://media.allured.com/designimages/expand_icon.gif"); } div#devHeader p#toggleText a#toggleLink:hover { color: #06f; } div#devHeader p#toggleText.expanded a#toggleLink { background-image: url("http://media.allured.com/designimages/collapse_icon.gif"); } div#devHeader div#collapse { width: 500px; margin: 0px auto; padding: 5px 0px 7px; border-top: 1px solid #000; display: none; clear: both; text-align: left; } div#devHeader div#collapse div { width: 230px; padding: 5px; display: inline-block; overflow: hidden; vertical-align: top; background-color: #6af; -moz-box-shadow: 2px 2px 3px rgba(0,0,0,.8); -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.8); -moz-border-radius: 5px; -webkit-border-radius: 5px; } div#devHeader div#collapse div:first-child { margin-right: 10px; } div#devHeader div#collapse div h2 { color: #000; letter-spacing: 1px; } div#devHeader div#collapse div ul { margin-bottom: 0px; } div#devHeader div#collapse div ul li { margin: 0px 0px 4px 15px; } div#devHeader div#collapse div ul li span { color: #555; font-size: 10.5px; } div#devHeader div#collapse p { margin: 7px 0px 0px; padding-top: 5px; border-top: 1px solid #000; display: block; color: #000; text-shadow: 0px 0px 2px rgba(0,0,0,.2); } div#devHeader div#collapse p a { color: #027; } div#devHeader div#collapse p a:hover { color: #06f; } /* -------- debugging Styles -------- */ h1.debug { color: #900; font-size: 12px; } body#AdTest div#col1_content { padding: 0px 5px; } code { font-family:"Courier New", Courier, monospace; color: #160; font-weight: bold; } /*_________________________________________________________________________________ LINK STYLES ===================================================================================*/ a:link { color: #5D776D; text-decoration: underline; } a:visited { color: #999; } a:hover, a:focus { color: #0066FF; } div#col1_content a:hover, div#col3_content a:hover, div#col1_content a:focus, div#col3_content a:focus { color: #5AA1E2; } a img { border: none; }