1. /* common */
  2.  
  3. * {
  4.         padding: 0;
  5.         margin: 0;
  6.         font-family: 'Trebuchet MS', Helvetica, sans-serif;
  7.         font-size: 1em;
  8. }
  9. body {
  10.         font-size: 62.50%;
  11.         background: #fff url('../images/backgrounds/body.png') repeat-x 0 0;
  12.         position: relative;
  13. }
  14. img {
  15.         outline: none;
  16.         border: 0;
  17. }
  18. ul {
  19.         list-style-type: none;
  20. }
  21. a {
  22.         color: #358693;
  23.         text-decoration: none;
  24. }
  25. a:hover {
  26.         color: #4c4c4c;
  27. }
  28. .clr {
  29.         clear: both;
  30. }
  31.  
  32. /* header */
  33.  
  34. #header {
  35.         width: 100%;
  36.         height: 259px;
  37.         background: transparent url('../images/backgrounds/header.png') no-repeat 50% 0;
  38.         z-index: 1000;
  39.         overflow: visible;
  40. }
  41. #header .inner {
  42.         width: 994px;
  43.         margin: 0 auto;
  44.         height: 259px;
  45.         overflow: visible;
  46.         background: transparent url('../images/backgrounds/header.png') no-repeat -103px 0;
  47. }
  48.  
  49. /* logo and search */
  50.  
  51. a#logo {
  52.         float: left;
  53.         display: block;
  54.         text-indent: -5000px;
  55.         width: 206px;
  56.         height: 164px;
  57.         margin-top: 25px;
  58.         background: transparent url('../images/logo.png') no-repeat 0 0;
  59. }
  60.  
  61. form#search {
  62.         float: right;
  63.         margin-top: 125px;
  64. }
  65. form#search p {
  66.         text-align: right;
  67.         font-size: 1.3em;
  68.         color: #fff;
  69. }
  70. form#search p input {
  71.         color: #4c4c4c;
  72.         width: 193px;
  73.         height: 18px;
  74.         padding: 7px 5px 7px 5px;
  75.         border: 2px solid #345962;
  76. }
  77. form#search p label {
  78.         font-family: Georgia, serif;
  79.         text-transform: uppercase;
  80.         padding-right: 3px;
  81.         line-height: 1.5em;
  82. }
  83.  
  84. /* navigation */
  85.        
  86. #navigation {
  87.         clear: both;
  88.         padding: 0 44px 0 45px;
  89.         width: 905px;
  90. }
  91. #navigation ul {
  92.         width: 905px;
  93.         padding: 28px 0 0 0;
  94. }
  95. #navigation li {
  96.         width: 179px;
  97.         height: 26px;
  98.         padding: 8px 0 0 0;
  99.         float: left;
  100.         text-align: center;
  101.         border-left: 2px solid #e2f2c7;
  102.         position: relative;
  103. }
  104. #navigation li.first {
  105.         border: 0;
  106. }
  107. #navigation li a {
  108.         display: block;
  109.         position: absolute;
  110.         top: 8px;
  111.         left: 0;
  112.         width: 179px;
  113.         height: 26px;
  114.         z-index: 1000;
  115.         font-size: 1.7em;
  116.         font-weight: bold;
  117.         font-family: Georgia, serif;
  118.         color: #231f20;
  119.         text-transform: uppercase;
  120. }
  121. #navigation li a:hover {
  122.         color: #398997;
  123. }
  124. #navigation li.active b {
  125.         display: block;
  126.         position: absolute;
  127.         background: transparent url('../images/backgrounds/active.png') no-repeat 0 0;
  128.         width: 217px;
  129.         height: 86px;
  130.         top: -9px;
  131.         left: -20px;
  132.         z-index: 0;
  133. }
  134.        
  135. /* site */
  136.  
  137. #site {
  138.         margin: 0 auto;
  139.         width: 946px;
  140.         padding: 0 24px;
  141.         background: transparent url('../images/backgrounds/shadow.png') repeat-y 24px 0;
  142.         z-index: -1;
  143. }
  144. #site p {
  145.         font-size: 1.4em;
  146.         line-height: 1.3em;
  147.         color: #4c4c4c;
  148.         padding-bottom: 9px;
  149. }
  150. #site ul li {
  151.         font-size: 1.4em;
  152.         line-height: 1.3em;
  153.         color: #4c4c4c;
  154. }
  155. #site a.more {
  156.         font-weight: bold;
  157. }
  158.  
  159. #shadow {
  160.         padding-top: 57px;
  161.         background: transparent url('../images/backgrounds/top_shadow.png') repeat-x 0 0;
  162.         margin: 0 0 0 20px;
  163.         width: 904px;
  164. }
  165.  
  166. #wrapper {
  167.         margin: 0 21px 0 21px;
  168.         width: 904px;
  169.         background: transparent url('../images/backgrounds/dotted.gif') repeat-y 0 0;
  170.         padding-top: 10px;
  171. }
  172.  
  173. /* main */
  174.  
  175. #main {
  176.         width: 557px;
  177.         float: left;
  178. }
  179. #main h2 {
  180.         font-size: 1.8em;
  181.         color: #358693;
  182.         font-family: Georgia, serif;
  183.         text-transform: uppercase;
  184.         width: 430px;
  185.         margin: 0 auto 7px auto;
  186. }
  187. #main p {
  188.         width: 430px;
  189.         margin-left: auto;
  190.         margin-right: auto;
  191. }
  192. #main_image {
  193.         display: block;
  194.         margin-bottom: 12px;
  195. }
  196.  
  197. #date {
  198.         position: absolute;
  199.         width: 156px;
  200.         height: 43px;
  201.         background: transparent url('../images/backgrounds/bubble.gif') no-repeat 0 0;
  202.         top: -40px;
  203.         left: 361px;
  204.         text-align: center;
  205.         padding-top: 18px;
  206. }
  207. #date strong {
  208.         font-size: 1.7em;
  209.         line-height: 1em;
  210.         font-family: Georgia, serif;
  211.         text-transform: uppercase;
  212.         color: #4c4c4c;
  213. }
  214.  
  215. /* box1 */
  216.                
  217. .box1_top {
  218.         margin: 0 auto;
  219.         width: 507px;
  220.         height: 30px;
  221.         background: transparent url('../images/backgrounds/box1_top.png') no-repeat 0 0;
  222. }
  223. .box1 {
  224.         position: relative;
  225.         margin: 0 auto;
  226.         width: 433px;
  227.         background: transparent url('../images/backgrounds/box1_middle.png') repeat-y 0 0;
  228.         padding: 4px 37px 0 37px;
  229. }
  230. .box1_bottom {
  231.         margin: 0 auto 25px auto;
  232.         width: 507px;
  233.         height: 30px;
  234.         background: transparent url('../images/backgrounds/box1_bottom.png') no-repeat 0 0;
  235. }
  236.  
  237. /* sidebar */
  238.  
  239. #sidebar {
  240.         width: 347px;
  241.         float: right;
  242. }
  243. #sidebar h3 {
  244.         font-size: 1.7em;
  245.         line-height: 1em;
  246.         font-family: Georgia, serif;
  247.         font-weight: bold;
  248.         text-transform: uppercase;
  249.         color: #4c4c4c;
  250. }
  251. #sidebar .top {
  252.         border-top: 0;
  253.         margin-top: 0;
  254. }
  255.  
  256. /* box2 */
  257.                
  258. .box2 h3 {
  259.         width: 237px;
  260.         height: 27px;
  261.         background: transparent url('../images/backgrounds/box2_top.png') no-repeat 0 0;
  262.         padding: 26px 35px 0 35px;
  263. }
  264. .box2 {
  265.         width: 307px;
  266.         background: transparent url('../images/backgrounds/box2_middle.png') repeat-y 0 100%;
  267.         margin: 23px 23px 0 17px;
  268. }
  269. .box2_bottom {
  270.         width: 307px;
  271.         height: 30px;
  272.         background: transparent url('../images/backgrounds/box2_bottom.png') no-repeat 0 0;
  273.         margin: 0 23px 17px 17px;
  274. }
  275. .box2 ul {
  276.         margin: 15px 29px 0 29px;
  277. }
  278. .box2 ul li {
  279.         border-top: 1px dashed #bebebe;
  280.         padding: 9px 10px 8px 10px;
  281. }
  282. .box2 ul li a {
  283.         color: #636363;
  284. }
  285. .box2 ul li a span {
  286.         color: #358693;
  287. }
  288. .box2 ul li a:hover {
  289.         color: #358693;
  290. }
  291.  
  292. /* sign up form */
  293.                
  294. form#signup {
  295.         text-align: right;
  296.         padding-right: 41px;
  297. }
  298. form#signup p {
  299.         text-align: right;
  300.         color: #404040;
  301. }
  302. form#signup p input {
  303.         color: #4c4c4c;
  304.         width: 227px;
  305.         height: 20px;
  306.         padding: 11px 5px 12px 5px;
  307.         border: 1px solid #918f90;
  308. }
  309. form#signup p label {
  310.         font-family: Georgia, serif;
  311.         text-transform: uppercase;
  312.         font-weight: bold;
  313.         padding-right: 3px;
  314.         font-size: .85em;
  315.         line-height: 1.7em;
  316. }
  317.  
  318. /* footer */
  319.  
  320. #footer {
  321.         clear: both;
  322.         padding-top: 50px;
  323. }
  324. #footer p {
  325.         color: #999;
  326.         font-size: 1.2em;
  327.         border-top: 1px dashed #acacac;
  328.         text-align: center;
  329.         padding: 30px 0;
  330.         margin: 0 60px 0 80px;
  331. }