SHARE
TWEET

CSS Sample

josh401 Feb 12th, 2016 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('http://fonts.googleapis.com/css?family=Montserrat');
  2.  
  3. /* Basic reset */
  4. * {
  5.     margin: 0; padding: 0;
  6. }
  7.  
  8. html {
  9.     background: url("img/main_background.jpg") repeat-x scroll 0 0 #1671a0;
  10. }
  11.  
  12. body {
  13.     font-family: montserrat, arial, verdana;
  14. }
  15. #body_container {
  16.     width: 1034px;
  17.     margin: 50px auto;
  18.     text-align: center;
  19. }
  20. .section_container {
  21.     background: white;
  22.     border: 0 none;
  23.     border-radius: 3px;
  24.     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  25.     padding: 20px 30px;
  26. }
  27. .clickable_page_link {
  28.     cursor: pointer;
  29. }
  30. .expandme img:hover, .collapseme:hover {
  31.     cursor: pointer;
  32. }
  33. .product_profile_summary {
  34.     padding: 10px;
  35.     border: 1px solid #CCC;
  36.     max-width: 80%;
  37.     margin: 0 auto;
  38.     margin-bottom: 20px;
  39.     -moz-border-radius: 10px;
  40.     -webkit-border-radius: 10px;
  41.     border-radius: 10px;
  42. }
  43.  
  44. /* Header image and logout button */
  45. .header_area {
  46.     width: 1034px;
  47.     margin: 50px auto 20px auto;
  48.     position: relative;
  49. }
  50. #logout_button, .gisr_admin_button {
  51.     padding: 3px 10px;
  52.     border: 1px solid #ccc;
  53.     border-radius: 3px;
  54.     margin: 5px 0px;
  55.     box-sizing: border-box;
  56.     font-family: montserrat;
  57.     color: #2C3E50;
  58.     font-size: 13px;
  59.     background-color:rgb(252,255,232);
  60. }
  61. #logout_button:hover, .user_button:hover {
  62.     cursor: pointer;
  63.     background: #C63 !important;
  64.     color: #FFF;
  65. }
  66. .gisr_admin_button:hover {
  67.     cursor: pointer;
  68.     background: #093 !important;
  69.     color: #FFF;
  70. }
  71.  
  72. .logout {
  73.     margin-bottom: 10px;
  74.     color: #FFF;
  75. }
  76.  
  77. /* Forgot password */
  78. #forgot_pass_link:hover {
  79.     color: #33F;
  80.     cursor: pointer;
  81. }
  82.  
  83. /* Buttons */
  84. .action-button-return-to-login {
  85.     width: 140px;
  86.     background: #27AE60;
  87.     font-weight: bold;
  88.     color: white;
  89.     border: 0 none;
  90.     border-radius: 1px;
  91.     cursor: pointer;
  92.     padding: 10px 5px;
  93.     margin: 10px 5px;
  94. }
  95. .action-button-return-to-login:hover, .action-button-return-to-login:focus {
  96.     box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
  97. }
  98.  
  99. .button_blue {
  100.   background: #3498db;
  101.   background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  102.   background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  103.   background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  104.   background-image: -o-linear-gradient(top, #3498db, #2980b9);
  105.   background-image: linear-gradient(to bottom, #3498db, #2980b9);
  106.   -webkit-border-radius: 5;
  107.   -moz-border-radius: 5;
  108.   border-radius: 5px;
  109.   font-family: Arial;
  110.   color: #ffffff;
  111.   font-size: 16px;
  112.   padding: 5px 10px 5px 10px;
  113.   text-decoration: none;
  114. }
  115.  
  116. .button_blue:hover {
  117.   background: #3cb0fd;
  118.   background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  119.   background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  120.   background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  121.   background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  122.   background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  123.   text-decoration: none;
  124.   cursor: pointer;
  125. }
  126.  
  127. /* Jquery tabs */
  128. .ui-tabs .ui-tabs-nav li a {font-size:14px !important;}
  129. .ui-widget {font-size:14px !important;}
  130.  
  131. /* Search table styles */
  132. #myresults, #myresults td,#myresults th,#myresults-sticky th { border: 1px solid #bfbfbf; }
  133. #myresults th,#header-fixed  th,.tablesorter-headerRow {background: #808080 none repeat scroll 0 0; border: 1px solid #bfbfbf;   color: #fff; text-align: center; font-weight: bold; }
  134. #myresults tr:nth-child(even) {background: #f2f2f2 none repeat scroll 0 0;}
  135. #header-fixed {
  136.     position: fixed;
  137.     top: 0px; display:none;
  138.     background-color:white;
  139.     z-index:999;
  140.     width: 987px !important;
  141.     border: 1px solid #bfbfbf;
  142.     padding: 2px 7px;
  143. }
  144. #myresults tbody {
  145.   overflow-y: scroll;
  146.   max-height: 300px;
  147.   height: 300px;
  148. }
  149. #myresults tr {
  150.     height: auto;
  151. }
  152. .tablesorter-header-inner{
  153.     text-align: center;
  154. }
  155.  
  156. /* Admin users table */
  157. #gisr_admin_users td {
  158.     padding:3px 20px 3px 0px;
  159. }
  160. #gisr_admin_users th {
  161.     padding:3px 20px 3px 0px;
  162. }
  163.  
  164. /* Edit user table */
  165. #edit_user_table {
  166.     width: 100%;
  167. }
  168. #edit_user_table tbody {
  169.     display: block;
  170. }
  171. #edit_user_table_div, #edit_prod_lookup_div {
  172.     border:1px solid #CCC;
  173.     border-radius: 10px;
  174.     padding:20px;
  175.     -moz-box-shadow:    inset 0 0 5px #666;
  176.     -webkit-box-shadow: inset 0 0 5px #666;
  177.     box-shadow:         inset 0 0 5px #666;
  178. }
  179.  
  180. /* Time Picker */
  181. .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
  182. .ui-timepicker-div dl { text-align: left; }
  183. .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
  184. .ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
  185. .ui-timepicker-div td { font-size: 90%; }
  186. .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
  187. .ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
  188.  
  189. .ui-timepicker-rtl{ direction: rtl; }
  190. .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
  191. .ui-timepicker-rtl dl dt{ float: right; clear: right; }
  192. .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
  193.  
  194. /* Shortened version style */
  195. .ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
  196. .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
  197. .ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
  198. .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
  199. .ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
  200. .ui-timepicker-div.ui-timepicker-oneLine dl dd,
  201. .ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
  202. .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
  203. .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
  204. .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
  205. .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
  206. .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
  207. .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
  208.  
  209. /* Tipped */
  210. .tpd-content {
  211.     font-size: 14px !important;
  212. }
  213.  
  214. /* Form styles */
  215. #msform {
  216.     width: 1034px;
  217.     margin: 20px auto;
  218.     text-align: center;
  219.     position: relative;
  220. }
  221. #msform fieldset {
  222.     background: white;
  223.     border: 0 none;
  224.     border-radius: 3px;
  225.     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  226.     padding: 20px 30px;
  227.  
  228.     box-sizing: border-box;
  229.     width: 100%;
  230.     margin: 0 auto;
  231.  
  232.     /* Stacking fieldsets above each other */
  233.     position: absolute;
  234. }
  235. /* Hide all except first fieldset */
  236. #msform fieldset:not(:first-of-type) {
  237.     display: none;
  238. }
  239. /* Inputs */
  240. #msform input[type="text"], #msform input[type="password"], #msform textarea, #msform select {
  241.     padding: 15px;
  242.     border: 1px solid #ccc;
  243.     border-radius: 3px;
  244.     margin-bottom: 10px;
  245.     width: 100%;
  246.     box-sizing: border-box;
  247.     font-family: montserrat;
  248.     color: #2C3E50;
  249.     font-size: 13px;
  250.     background-color:rgb(252,255,232);
  251. }
  252. #msform select {
  253.     padding: 5px;
  254. }
  255. /* Buttons */
  256. #msform .action-button {
  257.     width: 100px;
  258.     background: #27AE60;
  259.     font-weight: bold;
  260.     font-size: 13px;
  261.     color: white;
  262.     border: 0 none;
  263.     border-radius: 1px;
  264.     cursor: pointer;
  265.     padding: 10px 5px;
  266.     margin: 10px 5px;
  267.     text-shadow: none;
  268. }
  269. #msform .action-button:hover, #msform .action-button:focus {
  270.     box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
  271. }
  272. /* Headings */
  273. .fs-title {
  274.     font-size: 15px;
  275.     text-transform: uppercase;
  276.     color: #2C3E50;
  277.     margin-bottom: 10px;
  278. }
  279. .fs-subtitle {
  280.     font-weight: normal;
  281.     font-size: 13px;
  282.     color: #666;
  283.     margin-bottom: 20px;
  284. }
  285. /* Progressbar */
  286. #progressbar {
  287.     margin-bottom: 30px;
  288.     overflow: hidden;
  289.     /*CSS counters to number the steps*/
  290.     counter-reset: step;
  291. }
  292. #progressbar li {
  293.     list-style-type: none;
  294.     color: white;
  295.     text-transform: uppercase;
  296.     font-size: 9px;
  297.     width: 10%;
  298.     float: left;
  299.     position: relative;
  300. }
  301. #progressbar li:before {
  302.     content: counter(step);
  303.     counter-increment: step;
  304.     width: 20px;
  305.     line-height: 20px;
  306.     display: block;
  307.     font-size: 10px;
  308.     color: #333;
  309.     background: white;
  310.     border-radius: 3px;
  311.     margin: 0 auto 5px auto;
  312. }
  313. /* Progressbar connectors */
  314. #progressbar li:after {
  315.     content: '';
  316.     width: 100%;
  317.     height: 2px;
  318.     background: white;
  319.     position: absolute;
  320.     left: -50%;
  321.     top: 9px;
  322.     z-index: -1; /* Put it behind the numbers */
  323. }
  324. #progressbar li:first-child:after {
  325.     /* Connector not needed before the first step */
  326.     content: none;
  327. }
  328. /* Marking active/completed steps green */
  329. /* The number of the step and the connector before it = green */
  330. #progressbar li.active:before,  #progressbar li.active:after{
  331.     background: #27AE60;
  332.     color: white;
  333. }
  334.  
  335. .checkbox, .radio {
  336.     display: block;
  337.     margin-bottom: 10px;
  338.     margin-top: 10px;
  339.     position: relative;
  340. }
  341.  
  342. .checkbox label, .radio label {
  343.     cursor: pointer;
  344.     font-weight: 400;
  345.     margin-bottom: 0;
  346.     min-height: 20px;
  347.     padding-left: 20px;
  348. }
  349. label {
  350.     display: inline-block;
  351.     font-weight: 700;
  352.     margin-bottom: 5px;
  353.     max-width: 100%;
  354. }
  355. .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
  356.     margin-left: -20px;
  357.     position: absolute;
  358. }
  359. input[type="checkbox"], input[type="radio"] {
  360.     line-height: normal;
  361.     margin: 4px 0 0;
  362.     width:20px !important;
  363. }
  364. .form-group{
  365.     text-align: left;
  366.     width:90%;
  367.     float:left;
  368. }
  369. .caption{
  370.     width:15%;float: left;
  371. }
  372. .field_div{
  373.     width:65%; float: left;
  374. }
  375.  
  376. /* Survey form table */
  377. .survey_form_table {
  378.     width:100%;
  379.     display:table;
  380. }
  381. .survey_form_table tr {
  382.     display:table-row;
  383. }
  384. .survey_form_table > tbody > tr > td {
  385.     text-align:left;
  386.     display:table-cell;
  387.     width:4%;
  388. }
  389. .survey_form_table td:nth-child(2) {
  390.     text-align:left;
  391.     display:table-cell;
  392.     width:13%;
  393. }
  394. .survey_form_table td:nth-child(3) {
  395.     text-align:left;
  396.     display:table-cell;
  397.     padding-left:3%;
  398.     width:60%;
  399. }
  400. .survey_form_table td:nth-child(4) {
  401.     text-align:left;
  402.     display:table-cell;
  403.     padding-left:1%;
  404.     padding-right:1%;
  405.     width:10%;
  406. }
  407. .approve_form_item_change, .reject_form_item_change {
  408.     padding: 2px 10px;
  409.     width: 100%;
  410. }
  411. .approve_form_item_change:hover {
  412.     cursor:pointer;
  413.     background-color:#390;
  414.     color:#FFF;
  415. }
  416. .reject_form_item_change:hover {
  417.     cursor:pointer;
  418.     background-color:#C00;
  419.     color:#FFF;
  420. }
  421.  
  422. /* Boxes */
  423. .boxes {
  424.     float: left;
  425.     margin-left: 10px;
  426. }
  427.  
  428. .boxes .item { margin: 0 14px 14px 0; }
  429. .boxes .rightmost { margin-right: 0; }
  430. .boxes .item,
  431. .boxes .box {
  432.     position: relative;
  433.     float: left;
  434. }
  435.  
  436. .boxes .box {
  437.     float: left;
  438.     position: relative;
  439.     overflow: hidden;
  440.  
  441.     background: #f7f7f7;
  442.     cursor: pointer;
  443.     font-style: italic;
  444.     font-family: Georgia, Times, "Times New Roman", serif;
  445.     font-size: 12px;
  446.     color: #444;
  447.     text-shadow: 0 1px 0 rgba(255,255,255,1);
  448.     text-align: center;
  449.     -moz-user-select: none;
  450.     user-select: none;
  451. }
  452. .labeled .box { margin-bottom: 8px; }
  453.  
  454. .boxes .label {
  455.     float: left;
  456.     clear: both;
  457.     width: 100%;
  458.     text-align: center;
  459. }
  460. .boxes .label span {
  461.     padding: 0px 8px;
  462.     border-radius: 10px;
  463.     font-size: 10px;
  464.     line-height: 18px;
  465.     text-transform: uppercase;
  466.     color: #efefef;
  467.     text-shadow: 0 1px 1px rgba(0,0,0,.6);
  468.     background: #737374;
  469.     background-image:         linear-gradient(to bottom, #8d8d8d, #737374); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
  470.     border: 1px solid #828283;
  471.     min-width: 40px;
  472.     display: inline-block;
  473. }
  474.  
  475. .boxes .box .overlay {
  476.     -moz-box-sizing: border-box;
  477.     -webkit-box-sizing: border-box;
  478.     box-sizing: border-box;
  479.     border: 1px solid rgba(0,0,0,.1);
  480.     position: absolute;
  481.     top: 0;
  482.     left: 0;
  483.     width: 100%;
  484.     height: 100%;
  485. }
  486.  
  487.  
  488. /* Positions */
  489. .box .position {
  490.     position: absolute;
  491.     top: 0;
  492.     left: 0;
  493.     width: 50%;
  494.     height: 50%;
  495.     background: #cbcbcb;
  496. }
  497.  
  498. /* Top/bottom */
  499. .box .topleft,
  500. .box .top,
  501. .box .topright,
  502. .box .bottomleft,
  503. .box .bottom,
  504. .box .bottomright { height: 6px; }
  505.  
  506. .box .topright,
  507. .box .bottomright { left: auto; right: 0; }
  508. .box .top,
  509. .box .bottom { left: 50%; margin-left: -22.5px; }
  510.  
  511. .box .bottomleft,
  512. .box .bottom,
  513. .box .bottomright { top: auto; bottom: 0; }
  514.  
  515. /* Left/right */
  516. .box .lefttop,
  517. .box .left,
  518. .box .leftbottom,
  519. .box .righttop,
  520. .box .right,
  521. .box .rightbottom { width: 6px; }
  522.  
  523. .box .leftbottom,
  524. .box .rightbottom { top: auto; bottom: 0; }
  525. .box .left,
  526. .box .right { top: 50%; margin-top: -15px; }
  527.  
  528. .box .righttop,
  529. .box .right,
  530. .box .rightbottom { left: auto; right: 0; }
  531.  
  532. /* Squares */
  533. .position i {
  534.     width: 6px;
  535.     height: 6px;
  536.     position: absolute;
  537.     background: #ff6100; /*#4f38ff; */
  538.     top: 0;
  539.     left: 0;
  540. }
  541.  
  542. .box .top i,
  543. .box .right i,
  544. .box .bottom i,
  545. .box .left i {
  546.     top: 50%;
  547.     left: 50%;
  548.     margin-top: -3px;
  549.     margin-left: -3px;
  550. }
  551.  
  552. .box .topright i,
  553. .box .bottomright i {
  554.     left: auto; right: 0;
  555. }
  556. .box .leftbottom i,
  557. .box .rightbottom i {
  558.     top: auto; bottom: 0;
  559. }
  560.  
  561.            
  562. /* Hide the file input using opacity (admin_panel_login.php) */
  563. #firm_logo {
  564.     position: absolute;
  565.     margin-left: 70px;
  566.     filter: alpha(opacity=0);
  567.     opacity: 0;
  568. }
  569. label.fileupload {
  570.     background: #27ae5f;
  571.     text-align: center;
  572.     color: #FFF;
  573.     padding:10px 20px;
  574. }
  575. label.fileupload:hover {
  576.     background: #3399ff !important;
  577.     cursor: pointer;
  578. }
  579.  
  580. .delete_logo:before {
  581.     content: url('../img/black_x.png');
  582.     margin-right: 5px;
  583. }
  584. .delete_logo:hover {
  585.     color: red;
  586.     cursor: pointer;
  587. }
  588. .delete_logo:hover:before {
  589.     content: url('../img/red_x.png');
  590. }
  591.  
  592.  
  593.  
  594. div.pagination, div.pagination_dash {
  595.     padding: 3px;
  596.     margin: 3px;
  597.     margin-bottom: 20px;
  598.     text-align:center;
  599. }
  600.  
  601. div.pagination a, div.pagination_dash a {
  602.     border: 1px solid #dedfde;
  603.     margin-right:3px;
  604.     padding:2px 6px;
  605.  
  606.     background-position:bottom;
  607.     text-decoration: none;
  608.  
  609.     color: #0061de;    
  610. }
  611. div.pagination a:hover, div.pagination_dash a:hover, div.meneame a:active {
  612.     border: 1px solid #000;
  613.     background-image:none;
  614.     background-color:#0061de;
  615.     color: #fff;
  616. }
  617. div.pagination span.current, div.pagination_dash span.current {
  618.     margin-right:3px;
  619.     padding:2px 6px;
  620.    
  621.     font-weight: bold;
  622.     color: #ff0084;
  623. }
  624. div.pagination span.disabled, div.pagination_dash span.disabled {
  625.     margin-right:3px;
  626.     padding:2px 6px;
  627.  
  628.     color: #adaaad;
  629. }
  630. .revision_history_item {
  631.     border: 1px solid #CCC;
  632.     border-radius: 10px;
  633.     background-color: #F2F2F2;
  634.     padding: 10px;
  635.     margin-bottom: 20px;
  636. }
  637. #date_changed_title {
  638.     text-align: center;
  639.     margin: 10px auto 10px auto;
  640. }
  641. #revision_dates {
  642.     text-align: center;
  643.     margin-bottom: 20px;
  644. }
  645. .dash_stats_active {
  646.     color: #09C;
  647. }
  648.  
  649.  
  650. .form-group-registration-page .caption {
  651.     width: 25%;
  652. }
  653.  
  654. /* Scroll to Top */
  655. .scroll_to_top:hover {
  656.     text-decoration: none;
  657.     color: #2d9ed8 !important;
  658. }
  659. .scroll_to_top:before {
  660.     width: 12px;
  661.     height: 12px;
  662.     display: inline-block;
  663.     margin-right: 5px;
  664.     margin-top: 5px;
  665.     content: url('../img/up_arrow_gray.png');
  666. }
  667. .scroll_to_top:hover:before {
  668.     content: url('../img/up_arrow_blue.png');
  669. }
  670.  
  671. /* ADVANCED SEARCH PAGE */
  672. #query_count {
  673.     padding: 0px 50px;
  674.     font-size: 16px;
  675.     font-weight: bold;
  676.     text-align: center;
  677. }
  678. #advanced_search_results {
  679.     padding: 0px 50px;
  680. }
  681. .adv_search_block {
  682.     border-bottom: 1px solid #CCC;
  683.     padding: 10px 0px;
  684.     margin-bottom: 20px;
  685. }
  686. .adv_search_div_logo {
  687.     float: left;
  688.     width: 160px;
  689.     margin-right: 50px;
  690.     margin-bottom: 20px;
  691. }
  692. .adv_search_div_info {
  693.     float: left;
  694. }
  695. .adv_search_item_more {
  696.     float: right;
  697. }
  698.  
  699. .adv_search_item_firm_logo {
  700.     width: 150px;
  701.     height: 100px;
  702. }
  703. .adv_search_item_firm_name {
  704.     font-weight: bold;
  705.     font-size: 18px;
  706.     margin-bottom: 10px;
  707. }
  708.  
  709. .adv_search_item_prod_details {
  710.     float: left;
  711. }
  712. .adv_search_item_prod_buttons {
  713.     float: right;
  714. }
  715.  
  716. .adv_search_item_product_name {
  717.     font-weight: bold;
  718.     font-size: 18px;
  719.     margin-bottom: 10px;
  720. }
  721. .adv_search_item_product_research_org {
  722.     margin-bottom: 10px;
  723. }
  724. .source_notes {
  725.     overflow: hidden;
  726. }
  727. .source_notes_anchor {
  728.     float: right;
  729. }
  730. .source_notes_anchor:hover {
  731.     cursor: pointer;
  732. }
  733.  
  734. #product_sidebar_display table .alt.first:hover {
  735.     cursor: pointer;
  736. }
  737. #company_sidebar_display table .alt.first:hover {
  738.     cursor: pointer;
  739. }
  740.  
  741.  
  742. /* Compare items sticky div */
  743. #items_to_compare.stick {
  744.     position: fixed;
  745.     top: 0;
  746.     z-index: 10000;
  747.     border: 1px solid #CCC;
  748.     border-radius: 5px;
  749.     background-color: #FFF;
  750.     width: 71%;
  751.    
  752.     -webkit-box-shadow: 0px 0px 3px 3px rgba(206, 241, 252, 1);
  753.     -moz-box-shadow: 0px 0px 3px 3px rgba(206, 241, 252, 1);
  754.     box-shadow: 0px 0px 3px 3px rgba(206, 241, 252, 1);
  755. }
  756.  
  757. /* Items to compare (sticky div) */
  758. #items_to_compare {
  759.     border: 1px solid #CCC;
  760.     border-radius: 3px;
  761.     margin: 0px 50px;
  762.     padding: 10px;
  763. }
  764. #compare_button_main {
  765.     padding: 2px 10px;
  766.     margin-left: 20px;
  767. }
  768. #compare_button_arrow {
  769.     width: 16px;
  770.     height: 16px;
  771.     background-image: url('../img/gray_arrow.png');
  772.     display: inline-block;
  773. }
  774. .compare_item_remove_icon {
  775.     background-image: url('../img/black_x.png');
  776.     margin-right: 5px;
  777.     width: 10px;
  778.     height: 10px;
  779.     display: inline-block;
  780. }
  781. .compare_item_remove_icon:hover {
  782.     background-image: url('../img/red_x.png');
  783.     cursor: pointer;
  784. }
  785. .select_to_compare:hover {
  786.     cursor: pointer;
  787. }
  788.  
  789. #sticky_panel_hide {
  790.     font-size: 14px;
  791.     font-weight: bold;
  792.     display: none;
  793. }
  794. #sticky_panel_hide:hover {
  795.     cursor: pointer;
  796.     color: #2d9ed8;
  797. }
  798. #sticky_panel_hide span:before {
  799.     width: 12px;
  800.     height: 12px;
  801.     display: inline-block;
  802.     margin-right: 5px;
  803.     content: url('../img/minus_gray.png');
  804. }
  805. #sticky_panel_hide span:hover:before {
  806.     content: url('../img/minus_blue.png');
  807. }
  808.  
  809.  
  810. #sticky_show_panel {
  811.   display: none;
  812.   top: 0;
  813.   margin-left: 5px;
  814.   position: fixed;
  815.   font-size: 14px;
  816.   font-weight: bold;
  817.   background-color:#FFF;
  818.   padding: 5px 10px;
  819.  
  820.   -webkit-box-shadow: 0px 0px 3px 3px rgba(206, 241, 252, 1);
  821.   -moz-box-shadow: 0px 0px 3px 3px rgba(206, 241, 252, 1);
  822.   box-shadow: 0px 0px 3px 3px rgba(206, 241, 252, 1);
  823. }
  824. #sticky_show_panel:hover {
  825.     cursor: pointer;
  826.     color: #2d9ed8;
  827. }
  828. #sticky_show_panel span:before {
  829.     width: 12px;
  830.     height: 12px;
  831.     display: inline-block;
  832.     margin-right: 5px;
  833.     content: url('../img/plus_gray.png');
  834. }
  835. #sticky_show_panel span:hover:before {
  836.     content: url('../img/plus_blue.png');
  837. }
  838.  
  839. #highlight_diffs_div {
  840.     font-size: 14px;
  841.     font-weight: bold;
  842. }
  843. #highlight_diffs_div span:hover {
  844.     cursor: pointer;
  845.     color: #2d9ed8;
  846. }
  847. #highlight_diffs_div span:before {
  848.     width: 12px;
  849.     height: 12px;
  850.     display: inline-block;
  851.     margin-right: 5px;
  852.     content: url('../img/highlight_gray.png');
  853. }
  854. #highlight_diffs_div span:hover:before {
  855.     content: url('../img/highlight_yellow.png');
  856. }
  857. #highlight_diffs_div span.active {
  858.     cursor: pointer;
  859.     color: #2d9ed8;
  860. }
  861. #highlight_diffs_div span.active:before {
  862.     width: 12px;
  863.     height: 12px;
  864.     display: inline-block;
  865.     margin-right: 5px;
  866.     content: url('../img/highlight_yellow.png');
  867. }
  868. #highlight_diffs_div span.active:hover:before {
  869.     content: url('../img/highlight_gray.png');
  870. }
  871.  
  872. .active_hl {
  873.     background: #FFFEE2 !important;
  874. }
  875.  
  876. .adv_compare_tooltip {
  877.     display: inline-block;
  878.     margin-left: 10px;
  879. }
  880.  
  881. /* Compare results table */
  882. table.compare_results_table {
  883.     width: 100%;
  884.     table-layout: fixed;
  885. }
  886. table.compare_results_table tr {
  887.     display: table-row;
  888. }
  889. table.compare_results_table tr td, table.compare_results_table tr th {
  890.     /* word-wrap: break-word; */
  891. }
  892. table.compare_results_table tr td:first-child, table.compare_results_table tr th:first-child {
  893.     text-align: right;
  894.     font-weight: bold;
  895.     border-bottom: none !important;
  896. }
  897. table.compare_results_table tbody td, table.compare_results_table thead th {
  898.     width: 20%;
  899.     max-width: 20%;
  900.     padding: 10px;
  901.     border-right: 1px solid #eee;
  902.     border-bottom: 1px solid #eee !important;
  903.     word-wrap: break-word;
  904. }
  905. .compare_item_title {
  906.     font-size: 18px;
  907.     font-weight: bold;
  908.     text-align: center;
  909.     padding-bottom: 20px !important;
  910. }
  911. .filler_header {
  912.     background-color:#F4F4F4;
  913.     font-weight:bold;
  914.     font-size: 16px;
  915.     text-align: center;
  916. }
  917. .filler_td {
  918.     padding-top: 20px !important;
  919.     border-left: none !important;
  920.     border-right: none !important;
  921. }
  922.  
  923. #back_to_search a:before {
  924.     width: 12px;
  925.     height: 12px;
  926.     display: inline-block;
  927.     margin-right: 5px;
  928.     content: url('../img/left_arrow_light.png');
  929. }
  930. #back_to_search a:hover:before {
  931.     content: url('../img/left_arrow_dark.png');
  932. }
  933.  
  934. .odd_row {
  935.     background-color:#F9FCFF;
  936. }
  937. .even_row {
  938.     background-color:#F2F9FF;
  939. }
  940.    
  941.  
  942. /* Bookmarks */
  943. #bm_adv_search_div, #bm_prod_compare_div, #bm_comp_compare_div, #bm_comp_div, #bm_prod_div {
  944.     font-size: 14px;
  945. }
  946. #bm_adv_search_div:hover, #bm_prod_compare_div span:hover, #bm_comp_compare_div span:hover, #bm_comp_div:hover, #bm_prod_div:hover {
  947.     cursor: pointer;
  948.     color: #2d9ed8;
  949. }
  950. #bm_adv_search_div:before, #bm_prod_compare_div span:before, #bm_comp_compare_div span:before, #bm_comp_div:before, #bm_prod_div:before {
  951.     width: 12px;
  952.     height: 12px;
  953.     display: inline-block;
  954.     margin-right: 5px;
  955.     content: url('../img/black_heart.png');
  956. }
  957. #bm_adv_search_div:hover:before, #bm_prod_compare_div span:hover:before, #bm_comp_compare_div span:hover:before, #bm_comp_div:hover:before, #bm_prod_div:hover:before {
  958.     content: url('../img/red_heart.png');
  959. }
  960.  
  961.  
  962. .remove_bm_comp, .remove_bm_prod, .remove_bm_comp_compare, .remove_bm_prod_compare, .remove_adv_search {
  963.     float: right;
  964. }
  965. .remove_bm_comp:hover, .remove_bm_prod:hover, .remove_bm_comp_compare:hover, .remove_bm_prod_compare:hover, .remove_adv_search:hover {
  966.     color: red;
  967. }
  968.  
  969. #remove_prod_bm, #remove_comp_bm, .remove_prod_bm_compare, .remove_comp_bm_compare, #remove_adv_search_bm {
  970.     color: #2d9ed8;
  971.     font-size: 14px;
  972. }
  973. #remove_prod_bm:hover, #remove_comp_bm:hover, .remove_prod_bm_compare:hover, .remove_comp_bm_compare:hover, #remove_adv_search_bm:hover {
  974.     color: red;
  975.     cursor: pointer;
  976. }
  977. #remove_prod_bm:before, #remove_comp_bm:before, .remove_prod_bm_compare:before, .remove_comp_bm_compare:before, #remove_adv_search_bm:before {
  978.     width: 12px;
  979.     height: 12px;
  980.     display: inline-block;
  981.     margin-right: 5px;
  982.     content: url('../img/red_heart.png');
  983. }
  984. #remove_prod_bm:hover:before, #remove_comp_bm:hover:before, .remove_prod_bm_compare:hover:before, .remove_comp_bm_compare:hover:before, #remove_adv_search_bm:hover:before {
  985.     content: url('../img/black_heart.png');
  986. }
  987.  
  988. .member_bm_item:hover {
  989.     color: #2d9ed8;
  990.     cursor: pointer;
  991. }
  992.  
  993. /* Dashboard items */
  994. .dashboard_item {
  995.     text-decoration: none;
  996. }
  997. .dashboard_item:hover {
  998.     cursor: pointer;
  999.     color: #2d9ed8 !important;
  1000. }
  1001.  
  1002. /* Data Fields */
  1003. #add_edit_comp_toggle, #add_edit_prod_toggle, #comp_profile_toggle, #prod_profile_toggle {
  1004.     margin-bottom: 20px;
  1005. }
  1006. #add_edit_comp_toggle:hover, #add_edit_prod_toggle:hover, #comp_profile_toggle:hover, #prod_profile_toggle:hover {
  1007.     text-decoration: underline;
  1008.     cursor: pointer;
  1009.     color: #2d9ed8;
  1010. }
  1011.  
  1012.  
  1013. /*********************************************************
  1014. // Product Family Lookup Tab
  1015. *********************************************************/
  1016. .remove_product_from_family_list {
  1017.     color: #2d9ed8;
  1018. }
  1019. .remove_product_from_family_list:hover {
  1020.     color: red;
  1021.     text-decoration: underline;
  1022.     cursor: pointer;
  1023. }
  1024.  
  1025. /* Add product to family */
  1026. .add_product_to_family {
  1027.     color: #2d9ed8;
  1028. }
  1029. .add_product_to_family:hover {
  1030.     color: green;
  1031.     text-decoration: underline;
  1032.     cursor: pointer;
  1033. }
  1034.  
  1035. /*********************************************************
  1036. // Data Fields Tab
  1037. *********************************************************/
  1038. .data_fields_active {
  1039.     color: #2d9ed8;
  1040.     text-decoration: underline;
  1041.     cursor: pointer;
  1042. }
  1043.  
  1044. /*********************************************************
  1045. // Misc Tab
  1046. *********************************************************/
  1047. .remove_comp_pdf, .remove_prod_pdf {
  1048.     margin-top: 5px;
  1049. }
  1050. .remove_comp_pdf:before, .remove_prod_pdf:before {
  1051.     content: url('../img/black_x.png');
  1052.     margin-right: 5px;
  1053. }
  1054. .remove_comp_pdf:hover, .remove_prod_pdf:hover {
  1055.     color: red;
  1056.     cursor: pointer;
  1057. }
  1058. .remove_comp_pdf:hover:before, .remove_prod_pdf:hover:before {
  1059.     content: url('../img/red_x.png');
  1060.     margin-right: 5px;
  1061. }
  1062.  
  1063. #comp_id_name_chart:hover, #prod_id_name_chart:hover, #prod_fam_id_name_chart:hover, .reference_active {
  1064.     color: #2d9ed8;
  1065.     text-decoration: underline;
  1066.     cursor: pointer;
  1067. }
RAW Paste Data
Top