1. /* clear all */
  2.  
  3. * {
  4.         margin: 0;
  5.         padding: 0;
  6.         font-family: Verdana, Arial, sans-serif;
  7.         font-size: 11px;
  8. }
  9.  
  10. /* elements */
  11.  
  12. body, th, td {
  13.         background: #fff;
  14.         color: #333;
  15. }
  16. button {
  17.         padding: 0 5px;
  18. }
  19. a {
  20.         color: #249;
  21.         text-decoration: none;
  22.         border-bottom: 1px dotted #c0c0c0;
  23. }
  24. a:hover {
  25.         color: #A13F3F;
  26.         border-bottom: 1px dotted #A13F3F;
  27. }
  28. .image_replace {
  29.         text-indent: -5000px;
  30.         outline: none;
  31.         display: block;
  32.         border: 0;
  33. }
  34. .image_replace:hover {
  35.         border: 0;
  36. }
  37. p {
  38.         font-size: 11px;       
  39. }
  40. ul {
  41.         list-style-type: none;
  42. }
  43. li {
  44.         font-size: 11px;
  45. }
  46. dfn {
  47.         cursor: pointer;
  48. }
  49.  
  50. /* layers */
  51.  
  52. #site {
  53.         width: 995px;
  54.         margin: 0 auto;
  55.         overflow: auto;
  56. }
  57.  
  58. /* header */
  59.  
  60. #header {
  61.         background: #5c89cd;
  62.         overflow: auto;
  63.         width: 100%;
  64. }
  65.         #header h1 {
  66.                 color: #fff;
  67.                 font-family: Arial, Verdana, sans-serif;
  68.                 font-size: 18px;
  69.                 padding: 6px 0 8px 6px;
  70.                 float: left;
  71.         }
  72.         #header #cancel_box,#header #search_box {
  73.                 float: right;
  74.                 display: inline;
  75.                 margin: 6px 12px 6px 0;
  76.                 color: #fff;
  77.         }
  78.                 #search_box form, #search_box p {
  79.                         display: inline;
  80.                 }      
  81.                 #search_box p a {
  82.                         color: #C8DDF9;
  83.                         text-decoration: underline;
  84.                         border: 0;
  85.                 }
  86.                 #search_box p a:hover {
  87.                         color: #fff;
  88.                 }
  89.                 #search_box input {
  90.                         width: 145px;
  91.                         font-size: 12px;
  92.                         padding: 2px;
  93.                         margin: 0 5px;
  94.                         vertical-align: middle;
  95.                 }
  96.                 #search_box button {
  97.                         width: 35px;
  98.                         height: 20px;
  99.                         vertical-align: middle;
  100.                 }
  101.        
  102. /* search results */
  103.        
  104. #results {
  105.         border: 1px solid #5C89CD;
  106.         padding: 10px;
  107.         margin: 58px 0 0 0;
  108. }
  109.         #results ul {
  110.                 float: left;
  111.                 margin: 0 0 0 56px;
  112.                 display: inline;
  113.         }
  114.                 #results ul li {
  115.                         display: inline;
  116.                         float: left;
  117.                 }
  118.                         #results ul li a {
  119.                                 display: block;
  120.                                 background: #DCEAFB;
  121.                                 border: 1px solid #7E94C5;
  122.                                 border-bottom: 0;
  123.                                 color: #333;
  124.                                 font-weight: normal;
  125.                                 font-family: Arial;
  126.                                 margin: 0 10px 0 0;
  127.                                 font-size: 14px;
  128.                         /*  padding: 6px 16px; */
  129.                         /*  delete next 3 lines and uncomment padding above if you need resizable tabs */
  130.                                 width: 106px;
  131.                                 padding: 4px 0;
  132.                                 text-align: center;
  133.                         }      
  134.                         #results ul li a.active {
  135.                                 background: #5C89CD;
  136.                                 color: #fff;
  137.                                 font-weight: bold;
  138.                         }      
  139.                         /* change hover behavior of tabs above search results here */
  140.                         #results ul li a:hover {
  141.                                 background: #5C89CD;
  142.                                 color: #fff;
  143.                                 font-weight: bold;
  144.                         }      
  145.         #results .advanced {
  146.                 float: right;
  147.                 padding: 7px 6px 2px 0;
  148.         }
  149.         #results .matches {
  150.                 background: #5C89CD;
  151.                 color: #fff;
  152.                 padding: 6px 0 7px 6px;
  153.                 clear: both;
  154.         }
  155.         #results .paging {
  156.                 background: #C8DDF9;
  157.                 color: #333;
  158.                 padding: 6px 0 7px 6px;
  159.                 text-align: right;
  160.                 clear: both;
  161.         }
  162.         #results table {
  163.                 width: 100%;
  164.         }
  165.                 #results table tr.alt td {
  166.                         background: #eee;
  167.                 }
  168.                 #results table th {
  169.                         background: #ccc;
  170.                         text-align: left;
  171.                         padding: 8px 4px;
  172.                         font-size: 10px;
  173.                         white-space: nowrap;
  174.                 }
  175.                 #results table td {
  176.                         text-align: left;
  177.                         padding: 8px 12px 8px 4px;
  178.                         font-size: 11px;
  179.                         vertical-align: top;
  180.                 }
  181.                 #results table .name_nowrap {
  182.                         white-space: nowrap;
  183.                 }
  184.                 #results a.graph img {
  185.                         border: 0;
  186.                         vertical-align: middle;
  187.                 }
  188.                 #results a.send_email {
  189.                         background: transparent url("images/action_send.gif") no-repeat center top;
  190.                         width: 40px;
  191.                         height: 25px;
  192.                 }
  193.         #results .below_results {
  194.                 background: #ccc;
  195.                 height: 17px;
  196.                 margin: 0 2px 33px 2px;
  197.         }
  198.        
  199. /* photo upload */
  200.  
  201. #upload_tabs {
  202.         margin: 24px 0 0 6px;
  203.         padding: 0 0 0 2px;
  204.         width: 748px;
  205.         background: #fff url("images/tabs_bottom.gif") repeat-x left bottom;
  206.         overflow: auto;
  207. }
  208.         #upload_tabs li {
  209.                 display: inline;
  210.                 float: left;
  211.         }
  212.                 #upload_tabs li a {
  213.                         display: block;
  214.                         padding: 3px 6px 3px 6px;
  215.                         background: #E6EEF9;
  216.                         border: 1px solid #777;
  217.                         margin: 0 3px 0 0;
  218.                         font-weight: bold;
  219.                         font-size: 12px;
  220.                         color: #666;
  221.                 }
  222.                 #upload_tabs li a.active {
  223.                         background: #fff;
  224.                         border-bottom: 1px solid #fff;
  225.                         color: #000;
  226.                 }
  227.                 /* change hover behavior of tabs above photo upload here */
  228.                 #upload_tabs li a:hover {
  229.                         background: #fff;
  230.                         border-bottom: 1px solid #fff;
  231.                         color: #000;
  232.                 }
  233. #upload {
  234.         width: 748px;
  235.         border: 1px solid #777;
  236.         border-top: 0;
  237.         height: 458px;
  238.         padding: 21px 0;
  239.         clear: both;
  240.         margin: 0 0 0 6px;
  241. }      
  242.         #upload p {
  243.                 padding: 15px 103px 0 44px;
  244.                 line-height: 15px;
  245.         }
  246.         #upload form p {
  247.                 padding: 0 100px 0 45px;
  248.                 line-height: 15px;
  249.         }
  250.         #upload input {
  251.                 font-size: 12px;
  252.                 padding: 3px;
  253.         }
  254.         #upload ul {
  255.                 margin: 17px 0 24px 84px;
  256.                 list-style-type: disc;
  257.         }
  258.         #upload ul li {
  259.                 margin-bottom: 6px;
  260.         }
  261.         #upload p.note {
  262.                 background: #eee;
  263.                 margin: 20px 103px 0 45px;
  264.                 padding: 7px 7px 7px 8px;
  265.         }
  266.        
  267. /* advanced search */
  268.  
  269. #advanced_search form {
  270.         font-size: 11px;
  271. }
  272.         #advanced_search input {
  273.                 width: 200px;
  274.         }
  275.         #advanced_search select {
  276.                 width: 200px;
  277.         }
  278.         #advanced_search p.tips {
  279.                 margin: 26px 0 30px 26px;
  280.         }
  281.         #advanced_search fieldset {
  282.                 width: 215px;
  283.                 float: left;
  284.                 border: 1px solid #fff;
  285.                 border-top: 1px solid #E4E4DB;
  286.                 padding: 0 0 0 10px;
  287.                 margin: 0 25px 0 18px;
  288.         }
  289.                 #advanced_search legend {
  290.                         display: block;
  291.                         font-size: 12px;
  292.                         color: #D1702A;
  293.                         margin: 0 0 0 -2px;
  294.                         padding: 0 5px;
  295.                         letter-spacing: 0.1em;
  296.                 }
  297.                         #advanced_search label {
  298.                                 padding: 13px 0 4px 0;
  299.                                 display: block;
  300.                                 font-size: 11px;
  301.                         }
  302.                         #advanced_search input {
  303.                                 font-size: 11px;
  304.                                 color: #726E6D;
  305.                         }
  306.                         #advanced_search select {
  307.                                 font-size: 11px;
  308.                                 color: #726E6D;
  309.                         }
  310.                         #advanced_search button {
  311.                                 float: right;
  312.                                 margin: 115px 22px 0 0;
  313.                         }
  314.                        
  315. /* edit work address */
  316.  
  317. #edit_work_address form {
  318.         margin: 25px 22px;
  319. }
  320.  
  321. #edit_work_address fieldset {
  322.         width: 355px;
  323.         float: left;
  324.         border: 1px solid #fff;
  325.         border-top: 1px solid #E4E4DB;
  326.         padding: 0 0 0 5px;
  327.         margin-right: 50px;
  328. }
  329.         #edit_work_address legend {
  330.                 display: block;
  331.                 font-size: 12px;
  332.                 color: #D1702A;
  333.                 margin: 0;
  334.                 padding: 0 5px;
  335.                 letter-spacing: 0.1em;
  336.         }
  337.         #edit_work_address p {
  338.                 clear: both;
  339.         }
  340.         #edit_work_address p.explain {
  341.                 margin: 20px 10px 28px 0;
  342.                 line-height: 15px;
  343.         }
  344.         #edit_work_address dt {
  345.                 display: block;
  346.                 width: 125px;
  347.                 float: left;
  348.                 font-size: 11px;
  349.                 height: 34px;
  350.         }
  351.         #edit_work_address dd {
  352.                 display: block;
  353.                 font-size: 11px;
  354.                 color: #726E6D;
  355.                 width: 200px;
  356.                 margin-left: 128px;
  357.                 height: 34px;
  358.         }
  359.         #edit_work_address label {
  360.                 display: block;
  361.                 width: 125px;
  362.                 float: left;
  363.                 height: 34px;
  364.         }
  365.         #edit_work_address input {
  366.                 font-size: 11px;
  367.                 padding: 2px;
  368.                 color: #726E6D;
  369.                 width: 196px;
  370.         }
  371.         #edit_work_address input.small_input {
  372.                 width: 50px;
  373.         }
  374.         #edit_work_address select {
  375.                 font-size: 11px;
  376.                 color: #726E6D;
  377.                 width: 200px;
  378.         }
  379.         #edit_work_address button {
  380.                 margin: 5px 0 0 125px;
  381.                 font-size: 11px;
  382.         }
  383.        
  384. /* contents */
  385.  
  386. #contents {
  387.         overflow: auto;
  388. }
  389.         #contents .edit_link a {
  390.                 float: right;
  391.                 padding: 2px 2px 0 0;
  392.                 border: 0;
  393.                 text-decoration: underline;
  394.         }
  395.         #contents .edit_link a:hover {
  396.                 border: 0;
  397.         }
  398.         #basic_info a {
  399.                 border: 0;
  400.                 text-decoration: underline;
  401.         }
  402.         #basic_info a:hover {
  403.                 border: 0;
  404.         }
  405.         #contents h3 {
  406.                 color: #C6702A;
  407.                 font-size: 13px;
  408.                 letter-spacing: 0.1em;
  409.                 float: left;
  410.                 display: block;
  411.                 font-weight: normal;
  412.         }
  413.         #contents dt {
  414.                 padding-top: 5px;
  415.                 float: left;
  416.                 width: 90px;
  417.                 color: #84ABE1;
  418.         }
  419.         #contents dd {
  420.                 padding: 5px 0 5px 90px;
  421.                 border-bottom: 1px solid #e5edf9;
  422.                 line-height: 13px;
  423.         }
  424.         #contents dl {
  425.                 margin: 30px 0 22px 0;
  426.                 clear: both;
  427.         }
  428.                 #colleague_name {
  429.                         margin: 13px 0 0 17px;
  430.                 }
  431.                         #colleague_name h2 {
  432.                                 font-size: 14px;
  433.                                 font-weight: bold;
  434.                                 letter-spacing: 0.1em
  435.                         }
  436.                         #colleague_name p {
  437.                                 margin: 5px 0 10px 0;
  438.                         }
  439.                         #colleague_name a {
  440.                                 margin: 10px 0 10px 0;
  441.                         }      
  442.                 #colleague_details {
  443.                         width: 275px;
  444.                         float: left;
  445.                         margin: 0 0 0 16px;
  446.                         display: inline;
  447.                 }
  448.                 #basic_info {
  449.                         background: #e6eef9;
  450.                         overflow: auto;
  451.                         margin-bottom: 20px;
  452.                         display: block;
  453.                         height: 100%;
  454.                 }
  455.                         #photo_area {
  456.                                 float: left;
  457.                                 padding: 10px 5px;
  458.                         }
  459.                         #photo_area img {
  460.                                 width: 90px;
  461.                                 height: 100px;
  462.                         }
  463.                         #photo_area p {
  464.                                 padding: 2px 0 0 2px;
  465.                         }
  466.                         #info_area {
  467.                                 float: right;
  468.                                 width: 162px;
  469.                                 padding: 10px 7px 10px 0;
  470.                                 line-height: 15px;
  471.                         }
  472.                                 #info_area p a {
  473.                                         padding: 5px 0 0 0;
  474.                                 }
  475.                                 #info_area .title {
  476.                                         padding: 8px 0;
  477.                                         font-weight: bold;
  478.                                 }
  479.                                 #info_area .phone {
  480.                                         padding: 2px 0 10px 0;
  481.                                         border-bottom: 1px solid #bacfec;
  482.                                         font-weight: bold;
  483.                                         margin: 0 0 7px 0;
  484.                                 }
  485.                 #organization, #work_contact_info, #work_address, #org_chart {
  486.                         overflow: auto;
  487.                 }
  488.                 #organization {
  489.                         padding: 4px 0 0 1px;
  490.                 }
  491.                 #organization h3{
  492.                         margin-bottom: 10px;
  493.                 }
  494.                 #colleague_work {
  495.                         width: 280px;  
  496.                         float: left;
  497.                         margin: 0 0 0 39px;
  498.                 }
  499.                 #org_chart {
  500.                         width: 275px;
  501.                         float: left;
  502.                         margin: 0 0 0 49px;
  503.                 }
  504.                         #org_chart p.directions {
  505.                                 margin: 20px 0 35px 0;
  506.                         }
  507.                         #employee_boxes {
  508.                                 background: #fff url("images/vertical_line.gif") repeat-y center top;
  509.                                 float: left;
  510.                                 width: 250px;
  511.                         }
  512.                                 .employee_box {
  513.                                         border: 1px solid #BBD0EE;
  514.                                         background: #fff;
  515.                                         margin-bottom: 20px;
  516.                                         padding-right: 5px;
  517.                                         overflow: auto;
  518.                                         height:100%;
  519.                                 }
  520.                                 .employee_box_bottom {
  521.                                         padding-right: 5px;
  522.                                         border: 1px solid #BBD0EE;
  523.                                         background: #fff;
  524.                                         overflow: auto;
  525.                                         height:100%;
  526.                                 }
  527.                                         .employee_box .person, .employee_box_bottom .person {
  528.                                                 width: 175px;
  529.                                                 height: 100%;
  530.                                                 float: left;
  531.                                                 display: block;
  532.                                                 padding: 5px 0 15px 5px;                               
  533.                                         }
  534.                                         .person a {
  535.                                                 border: 0;
  536.                                         }
  537.                                         .person a:hover {
  538.                                                 text-decoration: underline;
  539.                                                 border: 0;
  540.                                         }      
  541.                                         .current_profile {
  542.                                                 background-color: #f0f6fd;
  543.                                         }
  544.                                         .current_profile .person {
  545.                                                 width: 120px;
  546.                                         }
  547.                                         .current_profile a.sponsored {
  548.                                                 float: right;
  549.                                                 text-decoration: none;
  550.                                                 width: 100px;
  551.                                                 text-align: center;
  552.                                                 margin: 10px 0 0 0;
  553.                                                 border: 0;
  554.                                         }
  555.                                         .current_profile a.sponsored:hover {
  556.                                                 text-decoration: underline;
  557.                                                 border: 0;
  558.                                         }
  559.                                         .employee_name {
  560.                                                 color: #224499;
  561.                                         }
  562.                                         .link_up {
  563.                                                 margin: 15px 5px 15px 0;
  564.                                                 padding-right: 5px;
  565.                                                 background: #fefefe url("images/icon_org_chart_supervisor_new.gif") no-repeat top right;
  566.                                                 width: 44px;
  567.                                                 height: 31px;
  568.                                                 float: right;
  569.                                         }
  570.                                         .link_down {
  571.                                                 margin: 15px 5px 15px 0;
  572.                                                 background: #fefefe url("images/icon_org_chart_reports_new.gif") no-repeat top right;
  573.                                                 width: 44px;
  574.                                                 height: 31px;
  575.                                                 float: right;
  576.                                         }
  577.  
  578.                                         p.directions {
  579.                                                 color: #888;
  580.                                                 font-size: 9px;
  581.                                                 float: left;
  582.                                                 width: 100%;
  583.                                         }
  584.