1. /* clear all */
  2.  
  3. * {
  4.         margin: 0;
  5.         padding: 0;
  6.         font-family: "MyriadPro", Arial, Freesans, sans-serif;
  7.         font-size: 1em;
  8. }
  9.  
  10. /* elements */
  11.  
  12. body {
  13.         color: #000;
  14. }
  15.  
  16. a {
  17.         outline: none;
  18. }
  19.  
  20. /* layers */
  21.  
  22. #site {
  23.         width: 993px;
  24.         min-width: 993px;
  25.         margin: 0 auto;
  26.         border-left: 1px solid #ccc;
  27.         border-right: 1px solid #ccc;
  28.         border-bottom: 1px solid #ccc;
  29.         border-top: 0;
  30.         padding: 0 0 40px 0;
  31. }
  32.         #header {
  33.                 color: #fff;
  34.                 height: 128px;
  35.                 background: transparent url("images/header.png") no-repeat center top;
  36.         }
  37.                 #header h1 {
  38.                         width: 140px;
  39.                         height: 128px;
  40.                         float: right;
  41.                 }
  42.                         #header h1 a {
  43.                                 display: block;
  44.                                 width: 140px;
  45.                                 height: 128px;
  46.                                 text-indent: -5000px;
  47.                                 outline: none;
  48.                                 background: transparent url("images/logo.gif") no-repeat center center;
  49.                         }                      
  50.                 #profile_header {
  51.                         float: left;
  52.                         height: 128px;
  53.                 }
  54.                         #profile_header #profile_photo {
  55.                                 padding: 66px 14px 4px 22px;
  56.                                 float: left;
  57.                                 background: transparent url("images/header_photo_back.gif") no-repeat 20px 64px;
  58.                         }
  59.                         #profile_header #profile_navigation {
  60.                                 float: left;
  61.                                 width: 360px;
  62.                         }
  63.                                 #profile_header #name {
  64.                                         font-size: 36px;
  65.                                         height: 109px;
  66.                                         position: relative;
  67.                                 }
  68.                                         #profile_header #name_inner {
  69.                                                 position: absolute;
  70.                                                 bottom: 0;
  71.                                                 white-space: nowrap
  72.                                         }
  73.                                         #profile_header #name .name {
  74.                                                 font-weight: normal;
  75.                                                 padding-left: 2px;
  76.                                         }
  77.                                         #profile_header #name .surname {
  78.                                                 font-weight: bold;
  79.                                                 padding-left: 6px;
  80.                                         }
  81.                                         #profile_header #stars {
  82.                                                 display: inline;
  83.                                                 width: 100px;
  84.                                         }
  85.                                                 #profile_header #stars img {
  86.                                                         display: inline;
  87.                                                         margin: 0 1px;
  88.                                                 }
  89.                                 #profile_header ul li {
  90.                                         float: left;
  91.                                         list-style-type: none;
  92.                                         margin-right: 2px;
  93.                                 }
  94.                                         #profile_header ul li a {
  95.                                                 display: block;
  96.                                                 width: 84px;
  97.                                                 height: 20px;
  98.                                                 text-indent: -5000px;
  99.                                                 outline: none;
  100.                                         }
  101.                                                 #ha_profile  { background: transparent url("images/menu.gif") no-repeat -680px 0px; }
  102.                                                 #ha_friends  { background: transparent url("images/menu.gif") no-repeat -765px 0px; }
  103.                                                 #ha_networks { background: transparent url("images/menu.gif") no-repeat -850px 0px; }
  104.                                                 #ha_mail     { background: transparent url("images/menu.gif") no-repeat -935px 0px; }
  105.                                
  106.                                                 #ha_profile:hover  { background: transparent url("images/menu.gif") no-repeat 0px 0px; }
  107.                                                 #ha_friends:hover  { background: transparent url("images/menu.gif") no-repeat -85px 0px; }
  108.                                                 #ha_networks:hover { background: transparent url("images/menu.gif") no-repeat -170px 0px; }
  109.                                                 #ha_mail:hover     { background: transparent url("images/menu.gif") no-repeat -255px 0px; }
  110.                                                
  111.                         #profile_details {
  112.                                 float: left;
  113.                                 margin: 12px 0 0 20px;
  114.                                 width: 210px;
  115.                         }
  116.                         #profile_header table {
  117.                                 font-size: .75em;
  118.                                 line-height: .9em;
  119.                                 width: 210px;
  120.                         }
  121.                                 #profile_header table th {
  122.                                         text-align: left;      
  123.                                         width: 50px;
  124.                                         padding: 2px;
  125.                                 }
  126.                                 #profile_header table td {
  127.                                         text-align: left;      
  128.                                         width: 150px;
  129.                                         padding: 2px;
  130.                                 }
  131. #contents {
  132.         background: #fff url("images/grey_icons_background.png") no-repeat left top;
  133. }
  134.         #big_profile_photo {
  135.                 width: 256px;
  136.                 height: 315px;
  137.                 float: left;
  138.         }
  139.                 #big_profile_photo_overlay {
  140.                         width: 206px;
  141.                         height: 24px;
  142.                         background: transparent url("images/change_hp_photo_back.gif") no-repeat 38px bottom;
  143.                         padding: 291px 0 0 50px;
  144.                 }
  145.                         #big_profile_photo_overlay a {
  146.                                 display: block;
  147.                                 color: #fff;
  148.                                 font-size: .8em;
  149.                                 text-decoration: none;
  150.                         }
  151.                 #big_profile_menu {
  152.                         margin: 0 0 0 280px;
  153.                         padding: 15px 0 0 0;
  154.                         height: 55px;
  155.                 }
  156.                         #big_profile_menu li {
  157.                                 float: left;
  158.                                 list-style-type: none;
  159.                                 margin-right: 15px;
  160.                         }
  161.                                 #big_profile_menu li a {
  162.                                         display: block;
  163.                                         width: 70px;
  164.                                         height: 55px;
  165.                                         text-indent: -5000px;
  166.                                         outline: none;
  167.                                 }
  168.                                         #a_debate               { background: transparent url("images/icons.gif") no-repeat 0px 0px; }
  169.                                         #a_scraps               { background: transparent url("images/icons.gif") no-repeat -70px 0px; }
  170.                                         #a_bookmark             { background: transparent url("images/icons.gif") no-repeat -140px 0px; }
  171.                                         #a_block                { background: transparent url("images/icons.gif") no-repeat -210px 0px; }
  172.                                         #a_images               { background: transparent url("images/icons.gif") no-repeat -280px 0px; }
  173.                                         #a_show_love    { background: transparent url("images/icons.gif") no-repeat -350px 0px; }
  174.         #search {
  175.                 margin: 4px 0 4px 264px;
  176.                 width: 700px;
  177.         }
  178.                 #search a {
  179.                         font-size: .8em;
  180.                         color: #999;
  181.                         text-decoration: none;
  182.                 }
  183.                 #search form {
  184.                         display: inline;
  185.                         color: #00B0D8;
  186.                         font-size: .8em;
  187.                         vertical-align: middle;
  188.                 }
  189.                         #search form p {
  190.                                 display: inline;
  191.                         }      
  192.                 #search form #form_q {
  193.                         width: 200px;
  194.                         height: 16px;
  195.                         border-top: 1px solid #000;
  196.                         border-left: 1px solid #000;
  197.                         border-right: 1px solid #ccc;
  198.                         border-bottom: 1px solid #ccc;
  199.                         font-size: .8em;
  200.                         color: #808184;
  201.                         padding: 2px 18px 0 5px;
  202.                         margin-left: 10px;
  203.                         margin-right: 10px;
  204.                         vertical-align: middle;
  205.                         background: transparent url("images/search_box.png") no-repeat center right;
  206.                 }
  207.                 #search form button {
  208.                         width: 85px;
  209.                         height: 20px;
  210.                         background: transparent url("images/search.png") no-repeat bottom right;
  211.                         text-indent: -5000px;
  212.                         border: 0;
  213.                         cursor: pointer;
  214.                         margin-left: 10px;
  215.                         vertical-align: middle;
  216.                 }
  217.                
  218.         .scrollbox {
  219.                 float: left;
  220.                 margin: 0 0 10px 2px;
  221.                 height: 215px;
  222.                 display: inline;
  223.         }
  224.                 .scrollbox_header {
  225.                         width: 100%;
  226.                         overflow: auto;
  227.                         background: transparent url("images/scroll_box_header_red.png") repeat-x left top;
  228.                 }
  229.                 .scrollbox_header h3 {
  230.                         color: #fff;
  231.                         padding: 6px 10px;
  232.                         font-size: .8em;
  233.                         font-weight: normal;
  234.                         background: transparent url("images/scroll_box_header_blue.png") no-repeat left top;
  235.                         float: left;
  236.                         height: 16px;
  237.                 }
  238.                 .scrollbox_header a {
  239.                         display: block;
  240.                         width: 28px;
  241.                         height: 28px;
  242.                         background: transparent url("images/show_all.png") no-repeat right top;
  243.                         float: right;
  244.                         outline: none;
  245.                         text-indent: -5000px;
  246.                 }
  247.                 .scrollbox_inner {
  248.                         border-top: 0;
  249.                         border-left: 1px solid #ccc;
  250.                         border-right: 1px solid #ccc;
  251.                         border-bottom: 1px solid #ccc;
  252.                         height: 170px;
  253.                         overflow: auto;
  254.                 }
  255.                         .scrollbox_inner_menu {
  256.                                 background: #e7e8e9;
  257.                                 padding: 2px 0;
  258.                                 color: #00B0D8;
  259.                                 font-size: .8em;
  260.                                 width: 100%;
  261.                                 overflow: auto;
  262.                         }
  263.                                 .inner_menu_links {
  264.                                         float: left;
  265.                                         margin-left: 10px
  266.                                 }
  267.                                 .scrollbox_inner_menu a {
  268.                                         color: #00B0D8;
  269.                                         text-decoration: none;
  270.                                         outline: none;
  271.                                         font-weight: normal;
  272.                                 }
  273.                                         .scrollbox_inner_menu .menu {
  274.                                                 float: left;
  275.                                                 padding-left: 9px;
  276.                                                 font-weight: bold;
  277.                                         }
  278.                                         .scrollbox_inner_menu .see_all {
  279.                                                 float: right;
  280.                                                 padding-right: 2px;
  281.                                         }
  282.        
  283.         #scrollbox_new_messages {
  284.                 width: 232px;
  285.                 height: 170px;
  286.         }
  287.         #scrollbox_new_friends {
  288.                 width: 477px;
  289.         }
  290.         #scrollbox_album {
  291.                 width: 450px;
  292.                 margin-left: 40px;
  293.         }
  294.         #scrollbox_books {
  295.                 width: 239px;
  296.         }
  297.         #scrollbox_movies {
  298.                 width: 236px;
  299.         }
  300.        
  301.         #scrollbox_new_messages .scrollbox_inner {
  302.                 padding-top: 10px;
  303.                 height: 160px;
  304.         }
  305.         .messages {
  306.                 padding: 5px 10px;
  307.                 width: 190px;
  308.                 border-bottom: 1px solid #BFBFBF;
  309.         }
  310.                 .messages .sender {
  311.                         color: #4d4d4d;
  312.                         font-size: 1em;
  313.                         line-height: .9em;
  314.                         font-weight: bold;
  315.                         padding-bottom: 2px;
  316.                 }
  317.                 .messages .message {
  318.                         color: #000;
  319.                         font-size: .8em;
  320.                         line-height: .9em;
  321.                         padding-bottom: 2px;
  322.                 }
  323.                 .messages a {
  324.                         display: block;
  325.                         float: right;
  326.                         color: #00B0D8;
  327.                         text-decoration: none;
  328.                         font-size: .8em;
  329.                 }
  330.                 .messages .date {
  331.                         color: #000;
  332.                         font-size: .6em;
  333.                 }
  334.         .friends {
  335.                 width: 84px;
  336.                 text-align: center;
  337.                 float: left;
  338.                 margin: 15px 0 10px 6px;
  339.         }
  340.                 .friends .friend {
  341.                         color: #4d4d4d;
  342.                         font-size: .8em;
  343.                         font-weight: bold;
  344.                 }
  345.                 .friends .date {
  346.                         color: #000;
  347.                         font-size: .6em;
  348.                 }
  349.         .books {
  350.                 width: 84px;
  351.                 text-align: center;
  352.                 float: left;
  353.                 margin: 15px 0 10px 6px;
  354.         }
  355.                 .books .book {
  356.                         color: #4d4d4d;
  357.                         font-size: .8em;
  358.                         font-weight: bold;
  359.                 }
  360.                 .books .date {
  361.                         color: #000;
  362.                         font-size: .6em;
  363.                 }
  364.                
  365. .clear {
  366.         clear: both;
  367. }