1. /* common */
  2.  
  3. * {
  4.         padding: 0;
  5.         margin: 0;
  6.         font-family: Arial, Helvetica, sans-serif;
  7.         font-size: 1em;
  8. }
  9. html {
  10.         height: 100%;
  11. }
  12. body {
  13.         height: 100%;
  14.         font-size: 62.50%;
  15.         background: #F6EDD3;
  16. }
  17. img {
  18.         outline: none;
  19.         border: 0;
  20. }
  21. ul {
  22.         list-style-type: none;
  23. }
  24. a {
  25.         color: #58595B;
  26.         text-decoration: none;
  27. }
  28. a:hover {
  29.         color: #23408B;
  30. }
  31.  
  32. /* wrapper & shadow */
  33.  
  34. #wrapper
  35.         { width: 100%; min-width: 950px; background: transparent url("../images/backgrounds/background.jpg") repeat 0 0; height: 100%; display: table; }
  36. #shadow
  37.         { width: 950px; min-width: 950px; margin: 0 auto; background: transparent url("../images/backgrounds/shadow.png") repeat-y 50% 0; height: 100%; display: table; }
  38. #w1,#s1
  39.         { display: table-row; height: 100%; }  
  40. #w2,#s2
  41.         { display: table-cell; vertical-align: top; height: 100%; }
  42.        
  43. /* header */
  44.  
  45. #header {
  46.         margin: 0 auto;
  47.         width: 790px;
  48.         height: 105px;
  49.         background: transparent url("../images/backgrounds/header.png") no-repeat 0 14px;
  50.         color: #58595b;
  51. }
  52. #header a {
  53.         color: #58595b;
  54. }
  55.  
  56. /* main navigation */
  57.        
  58. #mainNavigation {
  59.         float: left;
  60.         display: block;
  61.         width: 612px;
  62.         height: 40px;
  63.         margin-top: 30px;
  64.         text-indent: -5000px;
  65. }
  66. #mainNavigation li {
  67.         float: left;
  68. }
  69. #mainNavigation li a {
  70.         display: block;
  71. }
  72. #mainNavigation li a#writelife {
  73.         width: 246px;
  74.         height: 40px;
  75. }
  76. #mainNavigation li a#teenwriters {
  77.         width: 183px;
  78.         height: 40px;
  79. }
  80. #mainNavigation li a#youngwriters {
  81.         width: 183px;
  82.         height: 40px;
  83. }
  84.  
  85. /* language */
  86.  
  87. #language {
  88.         float: right;
  89.         padding: 34px 10px 0 0;
  90.         text-align: right;
  91.         width: 160px;
  92. }
  93. #language p {
  94.         font-size: .9em;
  95.         font-style: italic;
  96.         margin: 0 8px 5px 8px;
  97.         text-align: right;
  98. }
  99.  
  100. /* navigation, bookmark and search */
  101.  
  102. #headerBar {
  103.         padding: 7px 14px 0 0;
  104.         float: right;
  105. }
  106. #navigation {
  107.         float: left;
  108.         padding-top: 5px;
  109. }
  110. #navigation li {
  111.         display: inline;
  112.         padding: 1px 9px 1px 5px;
  113.         background: transparent url('../images/backgrounds/dot.png') repeat-y 100% 0;
  114. }
  115. #navigation li a {
  116.         font-size: .9em;
  117.         text-transform: uppercase;
  118. }
  119. #navigation li a:hover {
  120.         color: #23408B;
  121. }
  122.  
  123. #bookmark {
  124.         float: left;
  125.         padding: 1px 0 0 0;
  126.         margin: 1px 10px;
  127. }
  128.  
  129. #search {
  130.         float: left;
  131. }
  132. #search input {
  133.         float: left;
  134.         width: 115px;
  135.         height: 12px;
  136.         padding: 4px 5px;
  137.         border: 1px solid #828283;
  138. }
  139. #search button {
  140.         float: left;
  141.         text-indent: -5000px;
  142.         width: 22px;
  143.         height: 22px;
  144.         margin-left: 6px;
  145.         background: transparent url('../images/buttons/go.png') no-repeat 0 0;
  146.         border: 0;
  147.         cursor: pointer;
  148. }
  149.  
  150. /* site */
  151.  
  152. #site {
  153.         width: 790px;
  154.         margin: 0 auto;
  155.         overflow: visible;
  156. }
  157.  
  158. #box {
  159.         width: 758px;
  160.         padding: 0 15px 7px 17px;
  161.         background: transparent url('../images/backgrounds/box.png') no-repeat 0 100%;
  162. }
  163.  
  164. .container {
  165.         overflow: auto;
  166. }
  167.  
  168. #box .container {
  169.         width: 755px;
  170. }
  171.  
  172. #mainImage {
  173.         float: left;
  174.         font-size: 0;
  175.         line-height: 0;
  176. }
  177.  
  178. #signIn {
  179.         float: right;
  180.         width: 225px;
  181.         height: 148px;
  182.         background: transparent url('../images/backgrounds/memberSignIn.png') no-repeat 0 0;
  183.         text-indent: -5000px;
  184. }
  185. #signIn h2 {
  186.         margin: 0 auto;
  187.         color: #58585a;
  188.         font-size: 1.5em;
  189.         margin-top: 25px;
  190.         width: 140px;
  191. }
  192. #signIn p {
  193.         margin: 20px 0 22px 0;
  194. }
  195. #signIn p a {
  196.         margin: 0 auto;
  197.         display: block;
  198.         width: 160px;
  199.         height: 28px;
  200. }
  201.  
  202.         /* ***** homepage ***** */
  203.  
  204. #wal {
  205.         float: left;
  206.         width: 295px;
  207.         padding: 0 28px 0 12px;
  208.         margin: 10px 0 0 0;
  209. }
  210. #wal p {
  211.         font-size: 1.1em;
  212.         line-height: 1.6em;
  213. }
  214. #wal a.more {
  215.         padding-left: 18px;
  216.         background: transparent url('../images/icons/bullet.gif') no-repeat 8px 3px;
  217.         color: #faa61a;
  218.         font-size: .8em;
  219.         font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  220.         font-weight: bold;
  221.         text-transform: uppercase;
  222. }
  223. h2#writeAboutLife {
  224.         text-indent: -5000px;
  225.         width: 212px;
  226.         height: 17px;
  227.         background: transparent url('../images/text/writeAboutLife.png') no-repeat 0 0;
  228.         margin-bottom: 10px;
  229. }
  230.  
  231. #iwl {
  232.         float: left;
  233.         width: 170px;
  234.         margin: 10px 0 0 0;
  235.         padding: 0 0 0 11px;
  236.         background: transparent url('../images/backgrounds/dot.png') repeat-y 0 0;
  237. }
  238. #iwl li a {
  239.         display: block;
  240.         width: 145px;
  241.         height: 15px;
  242.         padding: 4px 0 0 25px;
  243.         margin-bottom: 2px;
  244.         background: #f8f0d4 url('../images/icons/bullet.gif') no-repeat 12px 7px;
  245.         font-size: .9em;
  246.         font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  247.         font-weight: bold;
  248.         text-transform: uppercase;
  249.         color: #58595B;
  250. }
  251. #iwl li a:hover {
  252.         background-color: #dfdbc1;
  253. }
  254. h2#insideWriteLife {
  255.         text-indent: -5000px;
  256.         width: 157px;
  257.         height: 15px;
  258.         background: transparent url('../images/text/insideWriteLife.png') no-repeat 0 0;
  259.         margin-bottom: 6px;
  260. }
  261.  
  262. #hotp {
  263.         float: right;
  264.         display: block;
  265.         width: 192px;
  266.         height: 121px;
  267.         margin-top: 11px;
  268.         padding: 5px 10px 0 22px;
  269.         background: transparent url('../images/backgrounds/hotOfThePress.png') no-repeat 0 0;
  270. }
  271. #hotp img {
  272.         float: left;
  273.         margin-right: 18px;
  274. }
  275. #hotp #bookTitle {
  276.         display: block;
  277.         color: #faa61a;
  278.         font-size: 1.2em;
  279.         font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  280.         font-weight: bold;
  281.         margin: 8px 0 5px 0;
  282.         text-transform: uppercase;
  283. }
  284. #hotp .bookInfo {
  285.         display: block;
  286.         color: #231f20;
  287.         font-weight: bold;
  288.         margin-bottom: 5px;
  289. }
  290.  
  291. #bigLinks {
  292.         padding: 5px 0 5px 5px;
  293.         overflow: auto;
  294.         width: 785px;
  295. }
  296. #bigLinks li {
  297.         float: left;
  298. }
  299. #bigLinks li a {
  300.         display: block;
  301.         text-indent: -5000px;
  302.         float: left;
  303. }
  304. #bigLinks li a#blWrite {
  305.         width: 170px;
  306.         height: 134px;
  307.         background: transparent url('../images/backgrounds/write.png') no-repeat 0 0;
  308.         margin: 0 11px 0 0;
  309.         display: inline;
  310. }
  311. #bigLinks li a#blShare {
  312.         width: 170px;
  313.         height: 134px;
  314.         background: transparent url('../images/backgrounds/share.png') no-repeat 0 0;
  315.         margin-right: 11px;
  316.         display: inline;
  317. }
  318. #bigLinks li a#blShop {
  319.         width: 170px;
  320.         height: 134px;
  321.         background: transparent url('../images/backgrounds/shop.png') no-repeat 0 0;
  322.         margin-right: 14px;
  323.         display: inline;
  324. }
  325. #bigLinks li a#bl2go {
  326.         width: 231px;
  327.         height: 134px;
  328.         background: transparent url('../images/backgrounds/writeLifeToGo.png') no-repeat 0 0;
  329. }
  330.  
  331. /* ***** subpage ***** */
  332.  
  333. #box2 {
  334.         width: 761px;
  335.         padding: 0 5px 7px 9px;
  336.         margin-left: 6px;
  337.         background-color: #fff;
  338.         border-left: 1px solid #e9e3d2;
  339.         border-right: 1px solid #e9e3d2;
  340.         border-bottom: 1px solid #e9e3d2;
  341.         overflow: auto;
  342. }
  343.  
  344. /* subpage sidebar */
  345.  
  346. #sidebar {
  347.         float: left;
  348.         width: 163px;
  349.         margin-right: 25px;
  350. }
  351.  
  352. #sidebar #subImage {
  353.         font-size: 0;
  354.         line-height: 0;
  355. }
  356.  
  357. #sidebar #subNavigation {
  358.         margin: 7px 0;
  359.         background: transparent url('../images/backgrounds/dot1.png') repeat-x 0 0;
  360. }
  361. #sidebar #subNavigation li {
  362.         padding: 6px 0;
  363.         background: transparent url('../images/backgrounds/dot1.png') repeat-x 0 100%;
  364. }
  365. #sidebar #subNavigation a {
  366.         font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  367.         font-weight: bold;
  368.         font-size: .9em;
  369.         text-transform: uppercase;
  370. }
  371.  
  372. #links a {
  373.         display: block;
  374.         width: 163px;
  375.         height: 19px;
  376.         margin-bottom: 3px;
  377.         text-indent: -5000px;
  378.         outline: none;
  379. }
  380. #links #lWr { background: transparent url('../images/buttons/wss.png') no-repeat 0 0; }
  381. #links #lSc { background: transparent url('../images/buttons/wss.png') no-repeat 0 -38px; }
  382. #links #lSm { background: transparent url('../images/buttons/wss.png') no-repeat 0 -76px; }
  383.  
  384. #links .liopen #lWr { background: transparent url('../images/buttons/wss.png') no-repeat 0 -19px; }
  385. #links .liopen #lSc { background: transparent url('../images/buttons/wss.png') no-repeat 0 -57px; }
  386. #links .liopen #lSm { background: transparent url('../images/buttons/wss.png') no-repeat 0 -95px; }
  387.  
  388. #links ul {
  389.         display: none;
  390. }
  391. #links ul li a {
  392.         display: block;
  393.         width: 143px;
  394.         height: 15px;
  395.         padding: 4px 0 0 20px;
  396.         margin-bottom: 2px;
  397.         background: #f8f0d4;
  398.         font-size: .9em;
  399.         font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  400.         font-weight: bold;
  401.         text-transform: uppercase;
  402.         text-indent: 0;
  403.         color: #58595B;
  404. }
  405. #links ul li a:hover {
  406.         background: #e1dac3;
  407. }
  408. /* subpage main */
  409.  
  410. .main {
  411.         float: left;
  412.         width: 560px;
  413. }
  414.  
  415. /* subpage top navigation */
  416.  
  417. #subTopNavigation {
  418.         width: 568px;
  419.         height: 15px;
  420.         background-color: #f8f0d4;
  421.         padding-top: 3px;
  422. }
  423. #subTopNavigation li.stn {
  424.         display: block;
  425.         float: left;
  426.         height: 15px;
  427.         position: relative;
  428. }
  429. #subTopNavigation li.stn a {
  430.         display: block;
  431.         float: left;
  432.         padding: 0 0 0 25px;
  433.         background: #f8f0d4 url('../images/icons/bullet.gif') no-repeat 12px 4px;
  434.         font-size: 1em;
  435.         font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
  436.         font-weight: bold;
  437.         text-transform: uppercase;
  438. }
  439.  
  440. #subTopNavigation li.stn ul {
  441.         display: none;
  442.         border-top: 2px solid #fff;
  443.         position: absolute;
  444.         top: 15px;
  445.         left: 15px;
  446.         padding-bottom: 14px;
  447.         background: transparent url("../images/backgrounds/navBottom.gif") no-repeat left bottom;
  448. }
  449.  
  450. #subTopNavigation li.stn ul li a {
  451.         float: none;
  452.         display: block;
  453.         padding: 2px 3px 0 10px;
  454.         width: 100px;
  455.         height: 14px;
  456.         border-bottom: 2px solid #fff;
  457.         text-transform: none;
  458.         background: #f8f0d4;
  459.         font-weight: normal;
  460.         color: #58595b;
  461. }
  462. #subTopNavigation li.stn ul li a:hover {
  463.         background: #e1dac3;
  464. }
  465. #subTopNavigation li.hover ul {
  466.         display: block;
  467. }
  468.  
  469. /* subpage content */
  470.  
  471. .content {
  472.         width: 390px;
  473.         padding: 30px 0 110px 0;
  474. }
  475. h2#ourStory {
  476.         text-indent: -5000px;
  477.         width: 118px;
  478.         height: 21px;
  479.         background: transparent url('../images/text/ourStory.png') no-repeat 0 0;
  480.         margin-bottom: 10px;
  481. }
  482. .content p {
  483.         font-size: 1.1em;
  484.         line-height: 1.6em;
  485.         margin-bottom: 20px;
  486. }
  487.  
  488. /* footer */
  489.  
  490. #footer {
  491.         margin: 0 auto 50px auto;
  492.         width: 726px;
  493.         padding: 0 26px;
  494.         height: 29px;
  495.         padding-top: 4px;
  496.         background: transparent url('../images/backgrounds/footer.png') no-repeat 0 0;
  497.         color: #fff;
  498. }
  499. #footer a {
  500.         color: #fff;
  501. }
  502. #footer a:hover {
  503.         color: #23408B;
  504. }
  505. #footer #footerNav {
  506.         float: left;
  507.         font-weight: bold;
  508.         font-size: .8em;
  509.         line-height: 1.6em;
  510.         text-transform: uppercase;
  511.         background: transparent url('../images/backgrounds/footerBorder.png') repeat-x 0 51%;
  512. }
  513. #footer #footerNav p.nav2 {
  514.         display: inline;
  515.         padding-top: 1px;
  516. }
  517. #footer #footerNav a {
  518.         padding: 0 3px;
  519. }
  520. #footer #siteInfo {
  521.         float: right;
  522.         text-align: right;
  523.         font-size: .9em;
  524.         line-height: 1.4em;
  525. }
  526.  
  527. /* ***** ***** young writers ***** ***** */
  528.  
  529. #yw a {
  530.         color: #662d91;
  531. }
  532.  
  533. /* young writers - wrapper & shadow */
  534.  
  535. #yw #wrapper
  536.         { background-image: url("../images/backgrounds/yw_background.jpg"); }
  537. #yw #shadow
  538.         { background-image: url("../images/backgrounds/yw_shadow.png"); }
  539.        
  540. /* young writers - header */
  541.  
  542. #yw #header {
  543.         height: 131px;
  544.         background-image: url("../images/backgrounds/yw_header.png");
  545. }
  546.  
  547. /* young writers - navigation, bookmark and search */
  548.  
  549. #yw #navigation li a {
  550.         color: #57585b;
  551. }
  552.  
  553. #yw #search button {
  554.         background-image: url('../images/buttons/yw_go.png');
  555. }
  556.  
  557. /* young writers - site */
  558.  
  559. #yw #site {
  560.         position: relative;
  561.         padding-bottom: 6px;
  562. }
  563.  
  564. #yw #box {
  565.         background-image: url('../images/backgrounds/yw_box.png');
  566. }
  567.  
  568. #yw #signIn {
  569.         width: 210px;
  570.         height: 117px;
  571.         background-image: url('../images/backgrounds/yw_memberSignIn.png');
  572.         padding-top: 23px;
  573.         margin: 13px 3px 0 0;
  574. }
  575.  
  576. #yw #signIn h2 {
  577.         margin-top: 0 !important;
  578. }
  579. #yw #signIn p {
  580.         margin: 0 0 18px 0;
  581. }
  582. #yw #signIn p a {
  583.         width: 145px;
  584.         height: 25px;
  585. }
  586.  
  587.         /* ***** young writers - homepage ***** */
  588.  
  589. #yw #wal {
  590.         float: none;
  591.         clear: both;
  592.         width: 460px;
  593.         padding: 10px 291px 18px 4px;
  594.         margin: 0;
  595. }
  596. #yw #wal p {
  597.         color: #231f20;
  598. }
  599. #yw #wal a.more {
  600.         background: transparent url('../images/icons/yw_bullet.gif') no-repeat 8px 2px;
  601.         color: #662d91;
  602. }
  603. #yw #wal a.more:hover {
  604.         color: #72b84c;
  605. }
  606. #yw #wal h2 {
  607.         height: auto;
  608.         color: #662d91;
  609.         font-size: 2em;
  610.         text-indent: 0;
  611.         background-image: none;
  612.         margin-bottom: 3px;
  613. }
  614.  
  615. #yw #hiw {
  616.         width: 158px;
  617.         height: 159px;
  618.         position: absolute;
  619.         bottom: 21px;
  620.         left: 10px;
  621.         background: transparent url('../images/backgrounds/yw_howItWorks.png') no-repeat 0 0;
  622.         text-indent: -5000px;
  623. }
  624.  
  625. #yw #hotp {
  626.         float: none;
  627.         width: 166px;
  628.         height: 88px;
  629.         margin: 10px 0 17px 184px;
  630.         padding: 35px 30px 0 52px;
  631.         background-image: url('../images/backgrounds/yw_hotOfThePress.png');
  632. }
  633. #yw #hotp img {
  634.         margin-right: 14px;
  635. }
  636. #yw #hotp #bookTitle {
  637.         color: #231f20;
  638.         font-size: 1.1em;
  639.         margin-top: 4px;
  640. }
  641. #yw #hotp .bookInfo {
  642.         font-size: .9em;
  643. }
  644.  
  645. #yw #wci {
  646.         position: absolute;
  647.         width: 537px;
  648.         height: 141px;
  649.         background: transparent url('../images/backgrounds/yw_wci1.png') no-repeat 0 0;
  650.         top: -6px;
  651.         left: 16px;
  652.         padding: 25px 0 0 9px;
  653. }
  654. #yw #wci li a {
  655.         float: left;
  656.         display: block;
  657.         width: 167px;
  658.         height: 131px;
  659.         margin: 0 11px 0 0;
  660.         text-indent: -5000px;
  661. }
  662.  
  663. #yw #ideas {
  664.         width: 341px;
  665.         height: 220px;
  666.         position: absolute;
  667.         bottom: 17px;
  668.         right: 7px;
  669.         background: transparent url('../images/backgrounds/yw_ideas.png') no-repeat 0 0;
  670.         text-indent: -5000px;
  671. }
  672.  
  673. /* ***** young writers - subpage ***** */
  674.  
  675. #yw #box2 {
  676.         width: 750px;
  677.         padding: 0 20px 7px 5px;
  678.         margin-left: 6px;
  679.         background-color: #c2d8a8;
  680.         overflow: auto;
  681. }
  682.  
  683. /* young writers - subpage sidebar */
  684.  
  685. #yw #wci2 {
  686.         position: absolute;
  687.         width: 163px;
  688.         height: 391px;
  689.         background: transparent url('../images/backgrounds/yw_wci2.png') no-repeat 0 0;
  690.         top: 8px;
  691.         left: -2px;
  692.         padding: 5px 0 0 20px;
  693. }
  694. #yw #wci2 li a {
  695.         display: block;
  696.         width: 160px;
  697.         height: 122px;
  698.         margin: 0 0 10px 0;
  699.         text-indent: -5000px;
  700. }
  701.  
  702. /* young writers - subpage main */
  703.  
  704. #yw .main {
  705.         float: right;
  706.         width: 548px;
  707.         padding: 10px 8px 7px 0;
  708. }
  709.  
  710. /* young writers - subpage top navigation */
  711.  
  712. #yw #subTopNavigation {
  713.         width: 303px;
  714.         height: 29px;
  715.         text-indent: -5000px;
  716.         background-color: #c2d8a8;
  717.         position: absolute;
  718.         top: -25px;
  719.         right: 35px;
  720.         padding: 0;
  721. }
  722. #yw #subTopNavigation li {
  723.         display: block;
  724.         float: left;
  725.         margin-left: 10px;
  726. }
  727. #yw #subTopNavigation li a {
  728.         display: block;
  729. }
  730. #yw #subTopNavigation li a#yw_stn_home {
  731.         width: 54px;
  732.         height: 26px;
  733.         background: transparent url('../images/buttons/yw_home.png') no-repeat 0 0;
  734. }
  735. #yw #subTopNavigation li a#yw_stn_hiw {
  736.         width: 219px;
  737.         height: 29px;
  738.         background: transparent url('../images/buttons/yw_howItWorks.png') no-repeat 0 0;
  739. }
  740.  
  741. /* young writers - subpage content */
  742.  
  743. #yw .content {
  744.         width: 471px;
  745.         height: 350px;
  746.         background: transparent url('../images/backgrounds/yw_subpageBox.png') no-repeat 0 0;  
  747.         padding: 23px 36px 17px 41px;
  748. }
  749. #yw .content h2#yw_characterGenerator {
  750.         text-indent: -5000px;
  751.         width: 386px;
  752.         height: 63px;
  753.         background: transparent url('../images/text/yw_characterGenerator.png') no-repeat 0 0;
  754.         margin-bottom: 12px;
  755. }
  756. #yw .content p {
  757.         font-size: 1.2em;
  758.         line-height: 1.4em;
  759.         margin-bottom: 13px;
  760. }
  761.  
  762. /* young writers - footer */
  763.  
  764. #yw #footer {
  765.         height: 29px;
  766.         padding-top: 5px;
  767.         background-image: url('../images/backgrounds/yw_footer.png');
  768.         color: #143d8d;
  769. }
  770. #yw #footer a {
  771.         color: #143d8d;
  772. }
  773. #yw #footer a:hover {
  774.         color: #57585b;
  775. }
  776. #yw #footer #footerNav {
  777.         background-image: url('../images/backgrounds/yw_footerBorder.png');
  778. }
  779.  
  780. /* ***** ***** teen writers ***** ***** */
  781.  
  782. /* teen writers - wrapper & shadow */
  783.  
  784. #tw #shadow {
  785.         background: transparent url("../images/backgrounds/tw_shadow.png") repeat-y 50% 0;
  786. }
  787. #tw #w1 {  
  788.         background: transparent url('../images/backgrounds/tw_colours.png') repeat-y 50% 0;
  789. }      
  790. #tw #s1 {
  791.         background: transparent url('../images/backgrounds/tw_flourish.png') repeat-y 50% 0;
  792. }
  793.        
  794. /* teen writers - header */
  795.  
  796. #tw #header {
  797.         height: 101px;
  798.         background-image: url("../images/backgrounds/tw_header.png");
  799.         position: relative;
  800.         overflow: visible;
  801. }
  802. #tw #headerBottom {
  803.         width: 54px;
  804.         height: 10px;
  805.         background: transparent url('../images/backgrounds/tw_headerBottom.png') no-repeat 0 0;
  806.         position: absolute;
  807.         top: 101px;
  808.         left: 16px;
  809. }
  810.  
  811. /* teen writers - site */
  812.  
  813. #tw #box {
  814.         padding-top: 4px;
  815. }
  816.  
  817. #tw #signIn {
  818.         background-image: url('../images/backgrounds/tw_memberSignIn.png');
  819. }
  820. #tw #signIn h2 {
  821.         margin: 5px auto 33px auto;
  822.         width: 160px;
  823. }
  824. #tw #signIn p {
  825.         margin: 22px 0 0 0;
  826. }
  827.  
  828.         /* ***** teen writers - homepage ***** */
  829.  
  830. #tw #wal {
  831.         width: 312px;
  832.         padding: 0 11px 0 12px;
  833. }
  834.  
  835. #tw h2#writeAboutLife {
  836.         width: 201px;
  837.         height: 20px;
  838.         background-image: url('../images/text/tw_writeAboutLife.png');
  839.         margin-bottom: 10px;
  840. }
  841.  
  842. #tw #hiw {
  843.         text-indent: -5000px;
  844.         float: left;
  845.         display: block;
  846.         width: 171px;
  847.         height: 123px;
  848.         margin: 10px 0 0 15px;
  849.         background: transparent url('../images/backgrounds/tw_howItWorks.png') repeat-y 0 0;
  850. }
  851.  
  852. #tw #hotp {
  853.         background: transparent url('../images/backgrounds/tw_hotOfThePress.png') no-repeat 0 0;
  854. }
  855.  
  856. #tw #bigLinks li a#blWrite {
  857.         background-image: url('../images/backgrounds/tw_write.png');
  858. }
  859. #tw #bigLinks li a#blShare {
  860.         background-image: url('../images/backgrounds/tw_share.png');
  861. }
  862. #tw #bigLinks li a#blCreate {
  863.         width: 170px;
  864.         height: 134px;
  865.         background: transparent url('../images/backgrounds/tw_create.png') no-repeat 0 0;
  866.         margin-right: 12px;
  867.         display: inline;
  868. }
  869. #tw #bigLinks li a#blGenerate {
  870.         width: 232px;
  871.         height: 134px;
  872.         background: transparent url('../images/backgrounds/tw_generate.png') no-repeat 0 0;
  873. }
  874.  
  875. /* ***** teen writers - subpage ***** */
  876.  
  877. #tw #box2 {
  878.         margin-left: 6px;
  879.         padding-top: 4px;
  880. }
  881.  
  882. /* teen writers - subpage sidebar */
  883.  
  884. #tw #links {
  885.         padding-top: 10px;
  886. }
  887.  
  888. #tw #links #lWr { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 0; }
  889. #tw #links #lSc { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -38px; }
  890. #tw #links #lCc { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -76px; }
  891. #tw #links #lIg { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -114px; }
  892.  
  893. #tw #links .liopen #lWr { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -19px; }
  894. #tw #links .liopen #lSc { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -57px; }
  895. #tw #links .liopen #lCc { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -95px; }
  896. #tw #links .liopen #lIg { background: transparent url('../images/buttons/tw_wss.png') no-repeat 0 -133px; }
  897.  
  898. /* teen writers - subpage content */
  899.  
  900. h2#writingInformation {
  901.         text-indent: -5000px;
  902.         width: 228px;
  903.         height: 24px;
  904.         background: transparent url('../images/text/tw_writingInformation.png') no-repeat 0 0;
  905.         margin-bottom: 18px;
  906. }
  907.  
  908. /* teen writers - footer */
  909.  
  910. #tw #footer {
  911.         height: 28px;
  912.         background-image: url('../images/backgrounds/tw_footer.png');
  913. }