home *** CD-ROM | disk | FTP | other *** search
/ PC World 2005 September / PCW08_DVD.ISO / _bin / __styles.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2005-07-13  |  11.3 KB  |  545 lines
  1. @charset "iso-8859-7";
  2. /* CSS Document */
  3.  
  4. /* Reset stylesheet */
  5. * { margin: 0; padding: 0; }
  6. ul, ol { margin:20px 0; }
  7. li { margin-left: 40px; }
  8. img { border: 0; }
  9. a { text-decoration: none; }
  10.  
  11. body {
  12.     margin: 0; padding: 0;
  13.     font-family: Verdana, Arial, Sans-Serif;
  14.     background-color: #fff;
  15.     color: #333;
  16.     }
  17.  
  18. h1, h2, h3, h4, h5, h6 {
  19.     margin: 0; padding: 0;
  20.     font-family: "Trebuchet MS", "Century Gothic", "Arial Black", Arial;
  21.     font-weight: normal;
  22.     text-transform: uppercase;
  23.     }
  24.     
  25. a {
  26.     color: #900;
  27.     }
  28.     
  29. a:hover {
  30.     color: #555;
  31.     }
  32.  
  33. /* Header
  34. -------------------------------------------------- */
  35. #header {
  36.     height: 85px;
  37.     background: #ccc url(images/_interface/header_bg.jpg) no-repeat scroll left top;
  38.     border-bottom: 0px solid #000;
  39.     }
  40.  
  41. #banner-ad {
  42.     visibility: hidden;
  43.     }
  44.     
  45. #active-banner-ad {
  46.     visibility:true;    
  47. }
  48.     
  49. /* Navigation
  50. -------------------------------------------------- */
  51. #nav ul {
  52.     margin: 0; padding: 0;
  53.     list-style-type: none;
  54.     height: 25px;
  55.     border-bottom: 2px solid #900;
  56.     }
  57.     
  58. #nav li {
  59.     margin: 0; padding: 0;
  60.     display: inline;
  61.     }
  62.     
  63. #nav li a {
  64.     display: block;
  65.     float: left;
  66.     padding: 4px 0 5px;
  67.     width: 100%;
  68.     font-family: Arial, Helvetica, sans-serif;
  69.     font-size: 14px;
  70.     font-weight: bold;
  71.     text-align: center;
  72.     letter-spacing: -1px;
  73.     color: #fff;
  74.     background: url(images/_interface/nav_bg.jpg) repeat-x scroll 0 -1px;
  75.     }
  76.     
  77. #nav li#full a {width: 140px; background-position: -2px -1px;}
  78. #nav li#collections a {width: 100px;}
  79. #nav li#digitech a {width: 170px;}
  80. #nav li#linux a {width: 110px;}
  81. #nav li#tutorials a {width: 90px;}
  82. #nav li#pcwfiles a {width: 95px;}
  83. #nav li#escape a {width: 85px;}
  84.  
  85. #nav li a:hover {
  86.     color: #333;
  87.     background: url(images/_interface/nav_bg_hover.jpg) repeat-x scroll 0 -1px;
  88.     }
  89.  
  90. #nav li a#active {
  91.     background: url(images/_interface/nav_bg_active.jpg) repeat-x scroll 0 -1px;
  92.     }
  93.     
  94. #nav li#full a#active {background-position: -2px -1px;}
  95.  
  96. /* Intro
  97. -------------------------------------------------- */
  98. #intro {
  99.     margin: 0; padding: 10px 120px 10px 20px;
  100.     height: 110px;
  101.     background-color: #000;
  102.     border-bottom: 5px solid #777;
  103.     position: relative;
  104.     voice-family: "\"}\""; 
  105.       voice-family:inherit;
  106.     height: 90px;
  107.     }
  108.  
  109. #intro h1 {
  110.     margin: 5px 0 2px;
  111.       font-size: 40px;
  112.     font-weight: bold;
  113.     color: #fff;
  114.     text-transform: none;
  115.     }    
  116.  
  117. #intro h2 {
  118.     margin: 5px 0 2px;
  119.     font-size: 18px;
  120.     font-weight: bold;
  121.     color: #fff;
  122.     }
  123.     
  124. #intro a {
  125.     color:#FF0000
  126.     }
  127.     
  128. #intro a:hover {
  129.     color:#ccc
  130.     }
  131.  
  132.  
  133. #intro h3 {
  134.     margin: 5px 0 2px;
  135.       font-size: 18px;
  136.     font-weight: bold;
  137.     color:#FFFFFF;
  138.     text-transform: none;
  139.     }
  140.  
  141.  
  142.     
  143. #intro p {
  144.     font-size: 12px;
  145.     line-height: 1.5em;
  146.     color: #fff;
  147.     }
  148.     
  149. #intro .sticker {
  150.     position: absolute;
  151.     top: 16px; right: 40px;
  152.     }
  153.     
  154. #intro .icon {
  155.     position: absolute;
  156.     top: 10px;
  157.     right: 25px;
  158.     }
  159.     
  160. #pgDisclaimer #intro     {background: #000 url(images/_interface/header_backgrounds/index_bg.jpg) no-repeat scroll -20px 10px;}
  161. #pgFull #intro         {background: #000 url(images/_interface/header_backgrounds/full_bg.jpg) no-repeat scroll 0 5px;}
  162. #pgTrials #intro         {background: #000 url(images/_interface/header_backgrounds/full_bg.jpg) no-repeat scroll 0 5px;}
  163. #pgCollection #intro     {background: #000 url(images/_interface/header_backgrounds/collection_bg.jpg) no-repeat scroll 0 5px;}
  164. #pgToolbox #intro         {background: #000 url(images/_interface/header_backgrounds/toolbox_bg.jpg) no-repeat scroll 0 5px;}
  165. #pgDrivers #intro         {background: #000 url(images/_interface/header_backgrounds/drivers_bg.jpg) no-repeat scroll 0 5px;}
  166. #pgDigitech #intro         {background: #000 url(images/_interface/header_backgrounds/digitech_bg.jpg) no-repeat scroll 10px -15px;}
  167. #pgLinux #intro         {background: #000 url(images/_interface/header_backgrounds/linux_bg.jpg) no-repeat scroll 0 5px;}
  168. #pgTutorials #intro     {background: #000 url(images/_interface/header_backgrounds/tutorial_bg.jpg) no-repeat scroll 0 5px;}
  169. #pgPCWFiles #intro         {background: #000 url(images/_interface/header_backgrounds/pcwfiles_bg.jpg) no-repeat scroll 0 5px;}
  170. #pgEscape #intro        {background: #000 url(images/_interface/header_backgrounds/escape_bg.jpg) no-repeat scroll 0 5px;}
  171.     
  172. /* Content
  173. -------------------------------------------------- */
  174. #content {
  175.     height: 369px;
  176.     overflow: auto;
  177.     }
  178.  
  179. /* Description
  180. -------------------------------------------------- */
  181. #description {
  182.     float: left;
  183.     width: 565px;
  184.     padding: 15px 25px 20px 20px;
  185.     voice-family: "\"}\""; 
  186.       voice-family:inherit;
  187.     width: 520px;
  188.     }
  189.     
  190. #pgTutorials #description {
  191.     padding: 0;
  192.     width: auto;
  193.     }
  194.  
  195. #description h4 {
  196.     font-size: 16px;
  197.     font-weight: bold;
  198.     }
  199.     
  200. #pgDigitech #description h4 {
  201.     margin: 10px 0 10px;
  202.     }
  203.     
  204. #description p {
  205.     font-size: 12px;
  206.     line-height: 1.8em;
  207.     margin-bottom: 1.0em;
  208.     }
  209.     
  210. #description p.link {
  211.     margin: 10px 15px 20px 0;
  212.     text-align: right;
  213.     }
  214.  
  215. .screen-main {
  216.     margin-bottom: 10px;
  217.     padding: 5px;
  218.     border: 1px solid #ccc;
  219.     }
  220.     
  221. #description .boxshot {
  222.     float: left;
  223.     margin-right: 15px;
  224.     }
  225.     
  226. /* Special Paragraphs */
  227. #upgrade, #registration, #important, #url {
  228.     margin-top: 20px;
  229.     padding-left: 27px;
  230.     }
  231.     
  232. #upgrade { background: url(images/_interface/inline_icons/up.jpg) no-repeat scroll 0 3px; }
  233. #registration { background: url(images/_interface/inline_icons/reg.jpg) no-repeat scroll 0 3px; }
  234. #important { margin: 10px 10px; background: url(images/_interface/inline_icons/imp.jpg) no-repeat scroll 0 0; }
  235. #url { margin: 10px 10px; padding: 5px 27px; background: url(images/_interface/inline_icons/url.jpg) no-repeat scroll 0 3px; }
  236.  
  237. /* Lists
  238. -------------------------------------------------- */
  239. #toplink {
  240.     position: absolute;
  241.     top: 10px; left: 2px;
  242.     voice-family: "\"}\""; 
  243.       voice-family:inherit;
  244.     top: 235px; left: 2px;
  245.     }
  246.     
  247. .category {
  248.     margin-bottom: 40px;
  249.     padding-bottom: 10px;
  250.     background: url(images/_interface/category_footer.gif) no-repeat scroll left bottom;
  251.     }
  252.     
  253. .category h3 {
  254.     font-size: 16px;
  255.     font-weight: bold;
  256.     padding: 9px 10px 5px;
  257.     border-bottom: 2px solid #aaa;
  258.     background: url(images/_interface/category_header.gif) no-repeat scroll left top;
  259.     } * html #content h3 {height: 1px;}
  260.  
  261. dl {
  262.     padding: 10px 15px 15px 10px;
  263.     border-bottom: 1px dashed #ccc;
  264.     } * html dl {height: 1px;}
  265.     
  266. #pgTutorials dl {
  267.     padding: 10px 20px 15px 20px;
  268.     }
  269.     
  270. dl:after {
  271.     content: "."; 
  272.     display: block; 
  273.     height: 0; 
  274.     clear: both; 
  275.     visibility: hidden;
  276.     }
  277.         
  278. dl.alt {
  279.     background-color: #eee;
  280.     }
  281.  
  282. dl.first {
  283.     border-top: 3px solid #ccc;
  284.     }
  285.     
  286. dt {
  287.     float: left;
  288.     font-family: "Trebuchet MS", "Century Gothic", "Arial Black", Arial;
  289.     font-size: 14px;
  290.     font-weight: bold;
  291.     text-transform: uppercase;
  292.     }
  293.     
  294. #pgTrials dt {
  295.     float: none;
  296.     margin: 2px 0 7px;
  297.     }
  298.     
  299. dt span {
  300.     font-size: 11px;
  301.     font-weight: normal;
  302.     }
  303.     
  304. dd {
  305.     font-size: 11px;
  306.     line-height: 18px;
  307.     } 
  308.  
  309. dd.info {
  310.     margin: 2px 0 4px;
  311.     text-align: right;
  312.     font-style: italic;
  313.     color: #999;
  314.     }
  315.     
  316. dd img {
  317.     padding: 5px;
  318.     border: 1px solid #ccc;
  319.     background-color: #fff;
  320.     }
  321.  
  322. dd.screen-left img {
  323.     float: left;
  324.     margin: 5px 10px 0 0; 
  325.     }
  326.     
  327. dd.screen-right img {
  328.     float: right;
  329.     margin: 5px 0 0 10px;
  330.     }
  331.     
  332. dd.desc {
  333.     margin-top: 10px;
  334.     }
  335.     
  336. #pgTutorials dd.desc p {
  337.     font-size: 11px;
  338.     }
  339.     
  340. dd.link {
  341.     margin: 15px 0px 5px 0;
  342.     text-align: right;
  343.     }
  344.     
  345. #pgTutorials dd.link img {
  346.     background-color: #fff;
  347.     border: 0;
  348.     }
  349.     
  350. #pgTutorials dl.alt dd.link img {
  351.     background-color: #eee;
  352.     }
  353.     
  354. /* Sidebar
  355. -------------------------------------------------- */
  356. #sidebar {
  357.     width: 200px;
  358.     float: right;
  359.     padding: 50px 10px 10px;
  360.     voice-family: "\"}\""; 
  361.      voice-family:inherit;
  362.     width: 180px;
  363.     }
  364.     
  365. #sidebar h3 {
  366.     font-size: 14px;
  367.     background-color: #555;
  368.     margin: 0 -10px 0 -19px; padding: 5px 20px;
  369.     color: #fff;
  370.     font-weight: bold;
  371.     }
  372.     
  373. #sidebar ul {
  374.     margin: 0; padding: 0;
  375.     border-left: 2px solid #ccc;
  376.     }
  377.     
  378. #sidebar li {
  379.     list-style: none;
  380.     margin: 10px 0; padding-left: 10px;
  381.     font-size: 11px;
  382.     }
  383.     
  384. .iso-link, .pdf-link {
  385.     padding: 10px 0 0;
  386.     }
  387.     
  388. .iso-link p, .pdf-link p {
  389.     font-size: 11px;
  390.     text-align: center;
  391.     }
  392.     
  393. .iso-link img , .pdf-link img {
  394.     padding: 20px 0;
  395.     }
  396.     
  397. .iso-link p span, .pdf-link p span {
  398.     display: block;
  399.     font-weight: bold;
  400.     }
  401.     
  402. .iso-link .footnote, .pdf-link .footnote {
  403.     font-size: 8px;
  404.     margin-top: 135px;
  405.     }
  406.     
  407. .iso-link .footnote a, .pdf-link .footnote a {
  408.     display: block;
  409.     }
  410.  
  411. /* Footer
  412. -------------------------------------------------- */
  413. #footer {
  414.     clear: both;
  415.     border-top: 1px solid #ccc;
  416.     font-size: 10px;
  417.     }
  418.     
  419. #footer p {
  420.     margin-bottom: 0.5em;
  421.     }
  422.  
  423. /* Index Page
  424. -------------------------------------------------- */
  425. #pgIndex #intro { padding: 0 7px 0 0; }
  426. #index-img { float: left; margin-right: 10px; }
  427. #pgIndex #intro h2 { font-size: 18px; }
  428. #pgIndex #intro h2 span { display: block; text-align: right; font-size: 14px; margin-top: -25px; }
  429. #pgIndex #intro h2 span strong { font-size: 40px; }
  430. #pgIndex #intro { border: 0; }
  431.  
  432. #pgIndex p {
  433.     font-size: 10px;
  434.     margin-bottom: 10px;
  435.     line-height: 1.5em;
  436.     }
  437.  
  438. #collection-col {
  439.     position: absolute;
  440.     top: 339px; left: 0;
  441.     width: 250px; height: 257px;
  442.     padding: 0 10px;
  443.     background: url(images/_interface/index_backgrounds/collection_bg.jpg) no-repeat scroll right bottom;
  444.     voice-family: "\"}\""; 
  445.       voice-family:inherit;
  446.     width: 230px; top: 342px;
  447.     }
  448.     
  449. #digitech-col {
  450.     position: absolute;
  451.     top: 339px; left: 250px;
  452.     width: 250px; height: 257px;
  453.     border-left: 1px solid #ccc;
  454.     padding: 0 10px;
  455.     voice-family: "\"}\""; 
  456.       voice-family:inherit;
  457.     width: 230px; top: 342px;
  458.     }
  459.  
  460. #digitech-col img {
  461.     margin: -5px -10px 0;
  462.     border-top: 1px solid #fff
  463.     }
  464.     
  465. #escape-col {
  466.     position: absolute;
  467.     top: 339px; left: 500px;
  468.     width: 290px; height: 257px;
  469.     border-left: 1px solid #ccc;
  470.     padding: 0 10px;
  471.     background: url(images/_interface/index_backgrounds/escape_bg.jpg) no-repeat scroll bottom right;
  472.     voice-family: "\"}\""; 
  473.       voice-family:inherit;
  474.     width: 269px; top: 342px;
  475.     }
  476.     
  477. #escape-col ul {
  478.     margin-top: 5px;
  479.     font-size: 10px;
  480.     }
  481.     
  482. #escape-col li {
  483.     margin-left: 20px;
  484.     }
  485.     
  486. #pgIndex h3 {
  487.     font-size: 16px;
  488.     background-color: #555;
  489.     margin: 0 -10px 5px; padding: 5px 10px;
  490.     font-weight: bold;
  491.     }
  492.     
  493. #pgIndex h3 a { color: #fff; } 
  494. #pgIndex h3 a:hover { color: #ccc; }
  495. #pgIndex h4 { font-size: 14px; font-weight: bold; }
  496. #pgIndex .summary { padding-left: 25px;    margin-top: 10px; }
  497.  
  498. /* Collection Icons */
  499. #pgIndex .design { background: url(images/index/design_icon.jpg) no-repeat scroll left top; }
  500. #pgIndex .desktop { background: url(images/index/desktop_icon.jpg) no-repeat scroll left top; }
  501.  
  502. /* Full Pages
  503. -------------------------------------------------- */
  504. #pgFull #intro {
  505.     padding: 10px 200px 10px 20px;
  506.     text-align: justify;
  507.     }
  508.     
  509. #pgPCWFiles #intro {
  510.     padding: 10px 160px 10px 20px;
  511.     }
  512.     
  513. #pgDisclaimer #intro {
  514.     height: 25px;
  515.     }
  516.     
  517. #pgDisclaimer .icon {
  518.     top: -75px; right: 10px;
  519.     }
  520.     
  521. #pgDisclaimer #content {
  522.     height: 412px;
  523.     }
  524.     
  525. #pgDisclaimer #sidebar {
  526.     padding: 90px 10px 10px;
  527.     }
  528.     
  529. #pgDisclaimer #description p {
  530.     font-size: 11px;
  531.     line-height: 2em;
  532.     margin-bottom: 1.0em;
  533.     }
  534.     
  535. #pgDisclaimer #important {
  536.     margin: 20px 0 0 0;
  537.     padding-left: 25px;
  538.     background: url(images/_interface/inline_icons/imp.jpg) no-repeat scroll 0 3px; }
  539.     }
  540.     
  541.     
  542.     
  543.     
  544.     
  545.