tag instead. 3. Always test against IE5.5/6.0. */ img, .pngfix { behavior: url(/pngfix/iepngfix.htc) } /* ------------- BIRDS-EYE VIEW OF GLOBAL STRUCTURE DIV AND CLASSES ----------------- The sites use global structure of DIV and CLASS tags, using absolute and relative sizing and positioning as needed. If you must have page-specific size, use a local CSS on the page itself. Define the tag in the header under the comment marked "PAGE-SPECIFIC CSS". MAIN STRUCTURE OVERVIEW #wrapper #container #header #main #template_header #left_column .left_box .left_image .left_panel #right_column .right_box .right_image .right_panel #footer */ /* ----------------------- WRAPPERS, CONTAINER ----------------------- */ a:focus{ outline:none; } #wrapper { background:url(http://piclens.com/site/images/bg-gray-green.gif) repeat-x; margin:0px auto; text-align:center; } #wrapper_previews { background:#fff; margin:0px auto; text-align:center; } #wrapper_homepage { background:url(/images/bg-home.gif) repeat-x; margin:0px auto; text-align:center; } #wrapper_company { background:url(/images/bg-charcoal.gif) repeat-x; margin:0px auto; text-align:center; } #container { position: relative; width: 950px; margin:0 auto; text-align:left; } /* The table.centering tag Adjust space between bar and top of page. Templates use a table to center body consistently across browsers. This hack is needed since the IE5.5/6.0 PNG-24 hack used on this site alters the positioning of elements, including the background image in the wrapper. */ table.centering{ position: relative; margin: 0 auto; min-width:920px; margin-top:-4px; /* Needed to adjust for table and border IE adds */ } table.navbar{ border-collapse: collapse; text-align: center; position: relative; margin: 0 auto; } /* ----------------------- HEADER, MAIN SECTION, FOLDS, COLUMNS ----------------------- */ #header { padding-top: 23px; /* Positions the navbar */ padding-bottom:11px; } .navigation-header-spacer { margin-bottom: 24px; } .header-content-spacer { margin-bottom: 32px; } #main { padding: 0px; width:920px; text-align:left; font-family: verdana, gulim; font-size: 12px; font-weight: 500; line-height: 1.4; } #single_column { width: 804px; vertical-align: top; height: auto; margin-top: 18px; margin-bottom: 0px; padding: 0px 20px 0px 35px; } #left_column { width: 545px; float: left; vertical-align: top; height: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 35px; } #right_column { position:relative; width: 285px; float: right; vertical-align: top; margin-top: 0px; margin-bottom: 0px; padding: 0px 20px 0px 0px; } /* ----------------------- THEME TEMPLATE HEADER FOR MAIN SECTION ----------------------- This header is in the DIV ID "Main" on all pages other than the homepage of the respective templates: piclens, previews, company, homepages. It contains the header image plus other formatting. */ #template_header { width:100%; margin-top: 25px; margin-bottom: 45px; margin-left:8px; padding: 0px 27px; } #template_header_img { padding: 0px 0px; } #template_title { padding-top: 5px; padding-left: 0px; margin-bottom: 0px; } #template_title_spacer { /* Fix IE vertical alignment. Pulls the main body up to compensate for right panel negative margins pushes up. */ margin-bottom: -20px } #net_takeaway_header { /* adjust left margin of overlay text on homepges */ margin-left:34px; } /* ----------------------- BELOW-FOLD ELEMENTS ----------------------- */ .single_box { /* Almost all sections/snippets single column templates are encased by this box. */ width: 800px; vertical-align: top; horizontal-align: left; margin-top: 18px; margin-bottom: 18px; padding: 0px; } .left_box { /* Almost all sections/snippets in left column are encased by this box. */ width: 545px; vertical-align: top; margin-top: 18px; margin-bottom: 18px; padding: 0px; } .left_image { /* Used only when image is a standalone, NOT floating right or left of text */ vertical-align: top; height: auto; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 4px 0px 4px 0px; z-index: 800; } .left_panel { width: 100%; vertical-align: top; height: auto; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; } .right_box { /* Almost all sections/snippets in left column are encased by this box. */ width: 259px; vertical-align: top; height: auto; margin-top: 8px; margin-bottom: 24px; padding: 0px; } .right_image { /* Used only when image is a standalone, NOT floating right or left of text */ width: 259px; vertical-align: top; height: auto; margin-top: 16px; margin-bottom: 16px; padding: 0px; z-index: 800; } /* ----------------------- PANEL ----------------------- */ .right_panel { /* Sets relative vertical position of right panel and its contents for homepages*/ position:relative; width: 259px; vertical-align: top; height: auto; margin-left: 0; margin-top: 30px; margin-bottom: 20px; padding: 0px; z-index: 500; } .right_panel_template { /* Sets relative vertical position of right panel and its contents for other pages than homepages */ position:relative; width: 259px; vertical-align: top; height: auto; margin-left: 0; margin-top: 85px; margin-bottom: 20px; padding: 0px; z-index: 500; } #right_panel_top { /* Positions panel graphics relative to text panel_specs */ position:relative; width: 259px; vertical-align: top; height: auto; margin-left: 0; margin-top: -162px; margin-bottom: 0px; padding: 0px; z-index: 500; } #panel_specs { /* Provides styles for text on panel */ position: relative; width:259px; font-size: 10px; font-weight: 600; color: #b9b9b9; z-index: 1000; } .panel { color:#bcd0d9; } .panel_image { margin-top:0px; margin-left: 25px; /* Positions the image and therefore text of panel specs */ z-index: 1000; } .panel_text_lg { margin-top:0px; margin-bottom:6px; font-size: 12px; color: #fff; font-weight: 800; } .panel_text_sm { margin-top:0px; font-size: 10px; font-weight: 500; } #previews .panel_text_sm { margin-top:0px; font-size: 10px; font-weight: 500; color:#bcd0d9; } /* ACCENT BOX used for advertisement in right column such as that for Enable PicLens */ .accentbox_wrapper { text-align: left; width: 261px; overflow: visible; } .accentbox_top { background-image: url(/images/enable_accentbox_top.jpg); overflow: visible; background-repeat: no-repeat; height: 11px; } .accentbox_content { background-image: url(/images/enable_accentbox_fill.jpg); background-repeat: repeat-y; color: #242424; } .accentbox_bottom { margin: 0 auto; background-image: url(/images/enable_accentbox_bottom.jpg); overflow: visible; background-repeat: no-repeat; background-position: bottom; height: auto; padding-top: 7px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } /* -------- HACK TO REMOVE VERTICAL SPACE BETWEEN DIV AND IMG ----*/ .space_remover { margin-top: -4px; } /* ---------------- PICLENS RIGHTBOX STYLES ----------------------- The rightbar is used on PicLens.com pages for the Support and Bugs sections, as well as the Welcome Pages. */ #rightbox-wrapper { width: 257px; height: 200px; margin:0px; padding-left:0px; } #rightbox-head { height: 34px; bottom-margin:0px; text-align: left; } #rightbox_pl-body { background:url(/images/rightbox_pl-gradient.gif) no-repeat; } .rightbox-body-txt { padding: 10px 20px; font-family:Verdana, gulim; font-size: 12px; line-height: 15px; color: #bcd0d9; z-index:3000; } .rightbox-body-title{ font-size: 13px; font-family: Verdana, gulim; font-weight:600; line-height: 17px; padding-bottom:6px; color: #bcd0d9; z-index:3000; } #rightbox-bottomcap { margin-top: -10px; } /* ----------------------- FEATURES TABLE ----------------------- */ p.table_header_minortxt { font-size: 11px; font-weight: 600; } /* ----- piclens ----- */ table.p-features_table { font-size: 12px; color: #c9d4dc; border: 1px solid #546A74; border-collapse: collapse; padding:3px; } td.p-column_1 { text-align:left; } td.p-column_2 { text-align:center; } td.p-column_3 { text-align:center; } td.p-column_4 { text-align:center; } tr.p-table_header { font-weight: 600; font-size: 14px; background-color:#265273; border: thin #334b58; } tr.p-odd { background-color:#223239; border: 1px solid #546A74; } tr.p-even { background-color:#223b4a; border: 1px solid #546A74; } /* ----- cooliris previews (cp) ----- */ table.cp-features_table { font-size: 12px; color: #4f6171; border: 1px solid #546A74; border-collapse: collapse; padding:3px; } td.cp-column_1 { text-align:left; } td.cp-column_2 { text-align:center; } td.cp-column_3 { text-align:center; } td.cp-column_4 { text-align:center; } td.cp-column_5 { text-align:center; } tr.cp-table_header { font-weight: 600; font-size: 14px; background-color:#7a9dbb; border: thin #334b58; color:#fff; } tr.cp-odd { background-color:#fbfcfc; border: 1px solid #546A74; } tr.cp-even { background-color:#d0dce6; border: 1px solid #546A74; } /* ----------------------- NAVIGATION BAR ----------------------- Clear Float, Bullets and Margin. Then List Horizonally with no gap */ #navbar {display:block; position: height:62px;margin-left: auto; margin-right: auto;} #navbar ul {margin:0; padding:0; list-style-type:none;} #navbar li {float:left; margin:0; padding: 0;} #panelbar {display:block;width:259px;margin-top:-5px;margin-bottom:0px;padding:0;margin-left: auto; margin-right: auto;} #panelbar ul {margin:0; padding:0; list-style-type:none;} #panelbar li {margin-top:-5px;margin-bottom:0px;padding:0;} /* ----------------------- BODY ----------------------- */ body { margin: 0; /* NOTE: font styling for main body is driven by the DIV ID "main", not "body" */ text-align: center; min-width: 1024px; } p { margin-top:16px; margin-bottom:16px; } ul { margin-top:18px; margin-bottom:18px; } ol { margin-top:18px; margin-bottom:18px; } li { margin-top:9px; margin-bottom:9px; } h1 { font: 24px verdana; font-weight: 400; line-height: 1.1; margin-bottom: 6px; } h2 { font: 18px verdana; font-weight: 400; line-height: 1.1; margin-bottom: 6px; } h3 { font: 18px verdana; font-weight: 400; line-height: 1.1; margin-bottom: 6px; } h4 { font: 13px verdana; font-weight: 600; line-height: 1.3; margin-bottom: 3px; } .fineprint { margin: 6 16 16 16; font-size: 10px; } /* ----- homepage ----- */ #homepage { color: #68828e; background-image: url(/images/bg-home-tile.gif); background-repeat: repeat; } #homepage h1 { color: #537790; } #homepage h2 { color: #537790; font-size:18px; margin-bottom:6px; font-weight:400; } #homepage h3 { color: #537790; font-size:13px; font-weight:600; margin-top:0px; } #hompage h4 { color: #537790; } .homepage_text { font-size:13px; font-weight:400; } /* ----- company (support pages) ----- */ #company { color: #cddee6; background-image: url(/images/bg-charcoal-tile.gif); background-repeat: repeat; } #company h1 { color: #f3f3f3; } #company h2 { color: #f3f3f3; font-size:18px; margin-bottom:6px; font-weight:400; } #company h3 { color: #f3f3f3; font-size:18px; font-weight:600; margin-top:0px; } #company h4 { color: #f3f3f3; } .homepage_text { font-size:13px; font-weight:400; } /* ----- piclens ----- */ #piclens { color: #bcd0d9; background-image: url(/images/bg-tile.gif); background-repeat: repeat; } #piclens h1{ color: #fff; } #piclens h2{ color: #fff; } #piclens h3{ color: #fff; } #piclens h4{ color: #ffffff; } /* ----- previews ----- */ #previews { color: #587E98; background:#fff; /* Previews background does not have tile */ font-weight:500; } #previews h1 { color: #537790; } #previews h2 { color: #537790; } #previews h3 { color: #537790; } #previews h4 { color: #537790; } /*---- previews ---*/ #previews a:link { color:#3C8CF9; text-decoration:none; } #previews a:visited { color:#3C8CF9; text-decoration:none; } #previews a:hover { color:#3C8CF9; text-decoration:underline; } /* ----------------------- LINKS ----------------------- */ a:link { color:#59cbfe; text-decoration:none; } a:visited { color:#59cbfe; text-decoration:none; } a:hover { color:#59cbfe; text-decoration:underline; } /* ----------------------- FOOTER ----------------------- */ /*See template-specific color codes below */ #footer_container { clear: both; padding-top: 40px; text-align:center; margin-left: auto; margin-right: auto; } #footer_image { margin-top: 0px; margin-bottom: -50px; text-align:center; margin-left: auto; margin-right: auto; } #footer { font-size: 18px; font-weight: 600; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 25px; padding: 0; text-align: center; } #footer_links { font-family: verdana, gulim; font-size:13px; margin:0px; padding:0; } #footer_legal { font: 10px verdana; margin-top:5px; } #footer a:link { text-decoration:none; } #footer a:visited { text-decoration:none; } #footer a:hover { text-decoration:underline; } /* ----- piclens ----- */ #footer.piclens { color: #5d727b; } #footer.piclens a:link { color: #bcd0d9; } #footer.piclens a:visited { color: #bcd0d9; } #footer.piclens a:hover { color: #bcd0d9; } #footer_legal.piclens { color: #687c84; } /* ----- previews ----- */ #footer.previews { color: #5d727b; } #footer.previews a:link { color: #5d727b; } #footer.previews a:visited { color: #bcd0d9; } #footer.previews a:hover { color: #bcd0d9; } #footer_legal.previews { color: #687c84; } iframe{ border:none; }