home *** CD-ROM | disk | FTP | other *** search
/ 207.233.110.77 / 207.233.110.77.tar / 207.233.110.77 / web31 / Section_35397 / Thomas_Smith / tutorial.07 / review / fabio.css < prev    next >
Cascading Style Sheet File  |  2011-05-10  |  4KB  |  94 lines
  1. /*
  2.    New Perspectives on HTML and XHTML 5th Edition
  3.    Tutorial 7
  4.    Review Assignment
  5.  
  6.    Jumbo Popcorn Style Sheet
  7.  
  8.    Filename:         fa.css
  9.    Supporting Files: bottom.png, bottomleft.png, bottomright.png, button.jpg, 
  10.                      left.png, popcorn.jpg, top.png, topleft.png, topright.png,
  11.                      right.png
  12.  
  13. */
  14.  
  15. body                   {margin: 0px; padding: 0px; font-size: 15px; 
  16.                         font-family: Arial, Helvetica, sans-serif}
  17.  
  18. #head                  {position: absolute; top: 0px; left: 0px}
  19.  
  20. #links                 {position: absolute; top: 155px; left: 130px; width: 750px}
  21.  
  22. #links ul              {list-style-type: none; padding: 0px; margin: 0px}
  23. #links li              {display: block; float: left; font-size: 14px;
  24.                         background: url(button.jpg) no-repeat center center;
  25.                         width: 100px; height: 33px; text-align: center; margin-right: 2px}
  26. #links a               {display: block; color: white; text-decoration: none; margin-top: 5px}
  27. #links a:hover         {color: black}
  28.  
  29. #pageContent          {position: absolute; top: 210px; left: 0px; width: 870px;
  30.                        background: url(popcorn.jpg) repeat-y 0px 40px}
  31.  
  32. #pageContent h1       {background-color: white;
  33.                        font-weight: bold; font-size: 28px; letter-spacing: 6px;
  34.                        margin: 0px; padding: 0px 0px 5px 10px}
  35.  
  36. #pageContent h2       {font-size: 16px; text-align: center; margin: 0px 0px 10px 0px;
  37.                        color: white; letter-spacing: 5px}
  38. #pageContent p        {font-size: 12px}
  39.  
  40.  
  41. #filmlinks            {float: left; width: 180px; margin-right: 5px}
  42. #filmlinks ul         {list-style-type: none; padding: 0px; margin: 0px; margin-left: 10px}
  43. #filmlinks ul li      {font-size: 16px; margin-top: 10px; font-weight: bold}
  44. #filmlinks ul ul li   {font-size: 12px; margin-top: 0px; font-weight: normal}
  45. #filmlinks ul ul      {margin-left: 20px}
  46. #filmlinks a          {color: black; text-decoration: none}
  47. #filmlinks a:hover    {text-decoration: underline}
  48.  
  49. #middleColumn         {float: left; width: 300px; margin-right: 10px}
  50. #rightColumn          {float: left; width: 340px}
  51.  
  52.  
  53. #bio                  {width: 300px; margin-bottom: 10px}
  54. #bio h2               {background-color: rgb(202,148,28); text-align: right}
  55. #bio img              {float: left; clear: left; margin-right: 2px}
  56. #bio p                {margin: 0px 0px 10px}
  57.  
  58. #films                {width: 340px; margin-bottom: 10px}
  59. #films h2             {background-color: black}
  60. #films p              {margin: 0px 0px 10px}
  61.  
  62.  
  63. #notes1               {width: 340px; margin-bottom: 10px}
  64. #notes1 h2            {background-color: black}
  65. #notes1 p             {margin: 0px 0px 10px}
  66.  
  67. #notes2               {width: 340px; margin-bottom: 10px}
  68. #notes2 h2            {background-color: black}
  69. #notes2 p             {margin: 0px 0px 10px}
  70.  
  71. .topLeft              {background: url(topleft.png) no-repeat top left}
  72. .topRight             {background: url(topright.png) no-repeat top right}
  73. .bottomLeft           {background: url(bottomleft.png) no-repeat bottom left}
  74. .bottomRight          {background: url(bottomright.png) no-repeat bottom right}
  75. .top                  {background: url(top.png) repeat-x top}
  76. .bottom               {background: url(bottom.png) repeat-x bottom}
  77. .left                 {background: url(left.png) repeat-y left}
  78. .right                {background: url(right.png) repeat-y right}
  79. .roundedBox           {margin: 5px}
  80. .boxContent           {padding: 16px}
  81.  
  82. #bottomlinks          {clear: left}
  83. #bottomlinks ul       {list-style-type: none; padding: 0px; margin: 0px 0px 0px 20px;
  84.                         border-top: 1px solid black}
  85. #bottomlinks li       {display: block; float: left; font-size: 10px;
  86.                        width: 110px; height: 33px; text-align: center; margin-right: 2px}
  87. #bottomlinks a        {display: block; color: black; text-decoration: none; margin-top: 5px}
  88. #bottomlinks a:hover  {color: black; text-decoration: underline}
  89.  
  90.  
  91.  
  92.  
  93.  
  94.