API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 3rd, 2011
119
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 21.38 KB | None | 0 0
raw download clone embed print report
  1. /*------------------------------------*\
  2.     CONTENTS
  3. \*------------------------------------*/
  4. /*
  5. WRAPPER
  6. BUTTON
  7. BUTTON LABEL
  8. BUTTON ICON
  9. ICONS
  10. DROPDOWN MENU
  11. */
  12.  
  13.  
  14. /*------------------------------------*\
  15.     $WRAPPER
  16. \*------------------------------------*/
  17. .buttons {/* Style as you wish (toolbar) */}
  18.  
  19. /* The Magnificent CLEARFIX */
  20. .buttons:before, .buttons:after {
  21.   content: "\0020"; display: block; height: 0; visibility: hidden; 
  22. }
  23. .buttons:after { clear: both; }
  24. .buttons { zoom: 1; }
  25. /* ------------------------ */
  26.  
  27.  
  28. /*------------------------------------*\
  29.     $BUTTON
  30. \*------------------------------------*/
  31. button,
  32. .button {
  33.     text-decoration: none;
  34.     text-shadow: 0 1px 0 #fff;
  35.    
  36.     font: bold 11px Helvetica, Arial, sans-serif;
  37.     color: #444;
  38.     line-height: 11px;
  39.     height: 12px;
  40.    
  41.     display: inline-block;
  42.     float: left;
  43.    
  44.     margin: 5px;
  45.     padding: 5px 6px 4px 6px;
  46.    
  47.     background: #F3F3F3;
  48.     border: solid 1px #D9D9D9;
  49.    
  50.     border-radius: 2px;
  51.     -webkit-border-radius: 2px;
  52.     -moz-border-radius: 2px;
  53.    
  54.     -webkit-transition: border-color .20s;
  55.     -moz-transition: border-color .20s;
  56.     -o-transition: border-color .20s;
  57.     transition: border-color .20s;
  58. }
  59. button {
  60.     height: 29px !important;
  61.     cursor: pointer;
  62. }
  63.  
  64. button.left,
  65. .button.left {
  66.     margin: 5px 0 5px 5px;
  67.    
  68.     border-top-right-radius: 0;
  69.     -webkit-border-top-right-radius: 0;
  70.     -moz-border-radius-topright: 0;
  71.    
  72.     border-bottom-right-radius: 0;
  73.     -webkit-border-bottom-right-radius: 0;
  74.     -moz-border-radius-bottomright: 0;
  75. }
  76. button.middle,
  77. .button.middle {
  78.     margin: 5px 0;
  79.    
  80.     border-left-color: #F4F4F4;
  81.    
  82.     border-radius: 0;
  83.     -webkit-border-radius: 0;
  84.     -moz-border-radius: 0;
  85. }
  86. button.right,
  87. .button.right {
  88.     margin: 5px 5px 5px 0;
  89.    
  90.     border-left-color: #F4F4F4;
  91.    
  92.     border-top-left-radius: 0;
  93.     -webkit-border-top-left-radius: 0;
  94.     -moz-border-radius-topleft: 0;
  95.    
  96.     border-bottom-left-radius: 0;
  97.     -webkit-border-bottom-left-radius: 0;
  98.     -moz-border-radius-bottomleft: 0;
  99. }
  100.  
  101. button:hover,
  102. .button:hover {
  103.     background: #F4F4F4;
  104.         border-color: #C0C0C0;
  105.         color: #333;
  106. }
  107.  
  108. button:active,
  109. .button:active {
  110.     border-color: #4D90FE;
  111.     color: #4D90FE;
  112.    
  113.     -moz-box-shadow:inset 0 0 10px #D4D4D4;
  114.     -webkit-box-shadow:inset 0 0 10px #D4D4D4;
  115.     box-shadow:inset 0 0 10px #D4D4D4;
  116. }
  117.  
  118. button.on,
  119. .button.on {
  120.     border-color: #BBB;
  121.    
  122.     -moz-box-shadow:inset 0 0 10px #D4D4D4;
  123.     -webkit-box-shadow:inset 0 0 10px #D4D4D4;
  124.     box-shadow:inset 0 0 10px #D4D4D4;
  125. }
  126. button.on:hover,
  127. .button.on:hover {
  128.     border-color: #BBB;
  129.    
  130.     -moz-box-shadow:inset 0 0 10px #D4D4D4;
  131.     -webkit-box-shadow:inset 0 0 10px #D4D4D4;
  132.     box-shadow:inset 0 0 10px #D4D4D4;
  133. }
  134. button.on:active,
  135. .button.on:active {
  136.     border-color: #4D90FE;
  137. }
  138.  
  139. button.action,
  140. .button.action {
  141.     border: 1px solid #D8D8D8 !important;
  142.    
  143.     background: #F2F2F2;
  144.     background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
  145.     background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
  146.     background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1);
  147.     background: -o-linear-gradient(top, #F5F5F5, #F1F1F1);
  148.    
  149.     -webkit-transition: border .20s;
  150.     -moz-transition: border .20s;
  151.     -o-transition: border .20s;
  152.     transition: border .20s;
  153. }
  154. button.action:hover,
  155. .button.action:hover {
  156.     border: 1px solid #C6C6C6 !important;
  157.    
  158.     background: #F3F3F3;
  159.     background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1);
  160.     background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);
  161.     background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1);
  162.     background: -o-linear-gradient(top, #F8F8F8, #F1F1F1);
  163. }
  164. button.blue,
  165. .button.blue {
  166.     border: 1px solid #3079ED !important;
  167.    
  168.     background: #4B8DF8;
  169.     background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
  170.     background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
  171.     background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
  172.     background: -o-linear-gradient(top, #4C8FFD, #4787ED);
  173.    
  174.     -webkit-transition: border .20s;
  175.     -moz-transition: border .20s;
  176.     -o-transition: border .20s;
  177.     transition: border .20s;
  178. }
  179. button.blue:hover,
  180. .button.blue:hover {
  181.     border: 1px solid #2F5BB7 !important;
  182.    
  183.     background: #3F83F1;
  184.     background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
  185.     background: -moz-linear-gradient(top, #4D90FE, #357AE8);
  186.     background: -ms-linear-gradient(top, #4D90FE, #357AE8);
  187.     background: -o-linear-gradient(top, #4D90FE, #357AE8);
  188. }
  189. button.green,
  190. .button.green {
  191.     border: 1px solid #29691D !important;
  192.    
  193.     background: #3A8E00;
  194.     background: -webkit-linear-gradient(top, #3C9300, #398A00);
  195.     background: -moz-linear-gradient(top, #3C9300, #398A00);
  196.     background: -ms-linear-gradient(top, #3C9300, #398A00);
  197.     background: -o-linear-gradient(top, #3C9300, #398A00);
  198.    
  199.     -webkit-transition: border .20s;
  200.     -moz-transition: border .20s;
  201.     -o-transition: border .20s;
  202.     transition: border .20s;
  203. }
  204. button.green:hover,
  205. .button.green:hover {
  206.     border: 1px solid #2D6200 !important;
  207.    
  208.     background: #3F83F1;
  209.     background: -webkit-linear-gradient(top, #3C9300, #368200);
  210.     background: -moz-linear-gradient(top, #3C9300, #368200);
  211.     background: -ms-linear-gradient(top, #3C9300, #368200);
  212.     background: -o-linear-gradient(top, #3C9300, #368200);
  213. }
  214. button.red,
  215. .button.red {
  216.     border: 1px solid #D14836 !important;
  217.    
  218.     background: #D64937;
  219.     background: -webkit-linear-gradient(top, #DC4A38, #D14836);
  220.     background: -moz-linear-gradient(top, #DC4A38, #D14836);
  221.     background: -ms-linear-gradient(top, #DC4A38, #D14836);
  222.     background: -o-linear-gradient(top, #DC4A38, #D14836);
  223.    
  224.     -webkit-transition: border .20s;
  225.     -moz-transition: border .20s;
  226.     -o-transition: border .20s;
  227.     transition: border .20s;
  228. }
  229. button.red:hover,
  230. .button.red:hover {
  231.     border: 1px solid #B0281A !important;
  232.    
  233.     background: #D14130;
  234.     background: -webkit-linear-gradient(top, #DC4A38, #C53727);
  235.     background: -moz-linear-gradient(top, #DC4A38, #C53727);
  236.     background: -ms-linear-gradient(top, #DC4A38, #C53727);
  237.     background: -o-linear-gradient(top, #DC4A38, #C53727);
  238. }
  239.  
  240. button.action:hover,
  241. .button.action:hover {
  242.     -moz-box-shadow: 0 1px 0px #DDD;
  243.     -webkit-box-shadow: 0 1px 0px #DDD;
  244.     box-shadow:iset 0 1px 0px #DDD;
  245. }
  246. button.action:active,
  247. .button.action:active {
  248.     -moz-box-shadow: none !important;
  249.     -webkit-box-shadow: none !important;
  250.     box-shadow: none !important;
  251.     border-color: #C6C6C6 !important;
  252. }
  253. button.blue:active,
  254. .button.blue:active {
  255.     border-color: #2F5BB7 !important;
  256. }
  257. button.green:active,
  258. .button.green:active {
  259.     border-color: #2D6200 !important;
  260. }
  261. button.red:active,
  262. .button.red:active {
  263.     border-color: #B0281A !important;
  264. }
  265.  
  266.  
  267.  
  268. /*------------------------------------*\
  269.     $BUTTON LABEL
  270. \*------------------------------------*/
  271. .ddm span.label,
  272. button span.label,
  273. .button span.label {
  274.     display: inline-block;
  275.     float: left;
  276.     line-height: 17px;
  277.     height: 18px;
  278.     padding: 0 1px;
  279.     overflow: hidden;
  280.     color: #444;
  281.    
  282.     -webkit-transition: color .20s;
  283.     -moz-transition: color .20s;
  284.     -o-transition: color .20s;
  285.     transition: color .20s;
  286. }
  287. button span.label {
  288.     line-height: 15px !important;
  289. }
  290. .ddm:active span.label,
  291. button:active span.label,
  292. .button:active span.label {
  293.     color: #4D90FE;
  294. }
  295.  
  296. button:hover .label,
  297. .button:hover .label {
  298.     color: #333;
  299. }
  300. button:hover .label.red,
  301. .button:hover .label.red {
  302.     color: #DB4A37;
  303. }
  304. button:hover .label.blue,
  305. .button:hover .label.blue {
  306.     color: #7090C8;
  307. }
  308. button:hover .label.green,
  309. .button:hover .label.green {
  310.     color: #42B449;
  311. }
  312. button:hover .label.yellow,
  313. .button:hover .label.yellow {
  314.     color: #F7CB38;
  315. }
  316.  
  317. button.blue .label,
  318. .button.blue .label {
  319.     color: #FFF !important;
  320.     text-shadow: 0 1px 0 #2F5BB7 !important;
  321. }
  322. button.green .label,
  323. .button.green .label {
  324.     color: #FFF !important;
  325.     text-shadow: 0 1px 0 #2D6200 !important;
  326. }
  327. button.red .label,
  328. .button.red .label {
  329.     color: #FFF !important;
  330.     text-shadow: 0 1px 0 #B0281A !important;
  331. }
  332. button.action .label,
  333. .button.action .label {
  334.     padding: 0 17px !important;
  335. }
  336.  
  337. button.action:active .label,
  338. .button.action:active .label {
  339.     color: #333 !important;
  340. }
  341.  
  342. button.blue:active .label,
  343. button.green:active .label,
  344. button.red:active .label,
  345. .button.blue:active .label,
  346. .button.green:active .label,
  347. .button.red:active .label {
  348.     color: #FFF !important;
  349. }
  350.  
  351.  
  352.  
  353. /*------------------------------------*\
  354.     $BUTTON ICON
  355. \*------------------------------------*/
  356. .ddm span.icon,
  357. button span.icon,
  358. .button span.icon {
  359.     background-image: url(../images/google+-ui-sprite-gray.png);
  360.    
  361.     display: inline-block;
  362.     margin: 0 7px;
  363.     float: left;
  364.    
  365.     line-height: 18px;
  366.     height: 18px;
  367.     width: 18px;
  368.     max-width: 18px;
  369.    
  370.     overflow: hidden;
  371.     text-indent: -9999px;
  372.    
  373.     background-repeat: no-repeat;
  374.    
  375.     -webkit-transition: background-image 0.20s linear;
  376.     -moz-transition: background-image 0.20s linear;
  377.     -o-transition: background-image 0.20s linear;
  378.     transition: background-image 0.20s linear;
  379. }
  380. .ddm:hover span.icon,
  381. button:hover span.icon,
  382. .button:hover span.icon {
  383.     background-image: url(../images/google+-ui-sprite-colour.png);
  384. }
  385.  
  386.  
  387.  
  388. /*------------------------------------*\
  389.     $ICONS
  390. \*------------------------------------*/
  391.  
  392. /* Sprite Row 1 */
  393. span.icon1 {background-position: -0px -0px;}
  394. span.icon2 {background-position: -18px -0px;}
  395. span.icon3 {background-position: -36px -0px;}
  396. span.icon4 {background-position: -54px -0px;}
  397. span.icon5 {background-position: -72px -0px;}
  398. span.icon6 {background-position: -90px -0px;}
  399. span.icon7 {background-position: -108px -0px;}
  400. span.icon8 {background-position: -126px -0px;}
  401. span.icon9 {background-position: -144px -0px;}
  402. span.icon10 {background-position: -162px -0px;}
  403. span.icon11 {background-position: -180px -0px;}
  404. span.icon12 {background-position: -198px -0px;}
  405. span.icon13 {background-position: -216px -0px;}
  406. span.icon14 {background-position: -234px -0px;}
  407. span.icon15 {background-position: -252px -0px;}
  408. span.icon16 {background-position: -270px -0px;}
  409. span.icon17 {background-position: -288px -0px;}
  410. span.icon18 {background-position: -306px -0px;}
  411. span.icon19 {background-position: -324px -0px;}
  412. span.icon20 {background-position: -342px -0px;}
  413.  
  414. /* Sprite Row 2 */
  415. span.icon21 {background-position: -0px -18px;}
  416. span.icon22 {background-position: -18px -18px;}
  417. span.icon23 {background-position: -36px -18px;}
  418. span.icon24 {background-position: -54px -18px;}
  419. span.icon25 {background-position: -72px -18px;}
  420. span.icon26 {background-position: -90px -18px;}
  421. span.icon27 {background-position: -108px -18px;}
  422. span.icon28 {background-position: -126px -18px;}
  423. span.icon29 {background-position: -144px -18px;}
  424. span.icon30 {background-position: -162px -18px;}
  425. span.icon31 {background-position: -180px -18px;}
  426. span.icon32 {background-position: -198px -18px;}
  427. span.icon33 {background-position: -216px -18px;}
  428. span.icon34 {background-position: -234px -18px;}
  429. span.icon35 {background-position: -252px -18px;}
  430. span.icon36 {background-position: -270px -18px;}
  431. span.icon37 {background-position: -288px -18px;}
  432. span.icon38 {background-position: -306px -18px;}
  433. span.icon39 {background-position: -324px -18px;}
  434. span.icon40 {background-position: -342px -18px;}
  435.  
  436. /* Sprite Row 3 */
  437. span.icon41 {background-position: -0px -36px;}
  438. span.icon42 {background-position: -18px -36px;}
  439. span.icon43 {background-position: -36px -36px;}
  440. span.icon44 {background-position: -54px -36px;}
  441. span.icon45 {background-position: -72px -36px;}
  442. span.icon46 {background-position: -90px -36px;}
  443. span.icon47 {background-position: -108px -36px;}
  444. span.icon48 {background-position: -126px -36px;}
  445. span.icon49 {background-position: -144px -36px;}
  446. span.icon50 {background-position: -162px -36px;}
  447. span.icon51 {background-position: -180px -36px;}
  448. span.icon52 {background-position: -198px -36px;}
  449. span.icon53 {background-position: -216px -36px;}
  450. span.icon54 {background-position: -234px -36px;}
  451. span.icon55 {background-position: -252px -36px;}
  452. span.icon56 {background-position: -270px -36px;}
  453. span.icon57 {background-position: -288px -36px;}
  454. span.icon58 {background-position: -306px -36px;}
  455. span.icon59 {background-position: -324px -36px;}
  456. span.icon60 {background-position: -342px -36px;}
  457.  
  458. /* Sprite Row 4 */
  459. span.icon61 {background-position: -0px -54px;}
  460. span.icon62 {background-position: -18px -54px;}
  461. span.icon63 {background-position: -36px -54px;}
  462. span.icon64 {background-position: -54px -54px;}
  463. span.icon65 {background-position: -72px -54px;}
  464. span.icon66 {background-position: -90px -54px;}
  465. span.icon67 {background-position: -108px -54px;}
  466. span.icon68 {background-position: -126px -54px;}
  467. span.icon69 {background-position: -144px -54px;}
  468. span.icon70 {background-position: -162px -54px;}
  469. span.icon71 {background-position: -180px -54px;}
  470. span.icon72 {background-position: -198px -54px;}
  471. span.icon73 {background-position: -216px -54px;}
  472. span.icon74 {background-position: -234px -54px;}
  473. span.icon75 {background-position: -252px -54px;}
  474. span.icon76 {background-position: -270px -54px;}
  475. span.icon77 {background-position: -288px -54px;}
  476. span.icon78 {background-position: -306px -54px;}
  477. span.icon79 {background-position: -324px -54px;}
  478. span.icon80 {background-position: -342px -54px;}
  479.  
  480. /* Sprite Row 5 */
  481. span.icon81 {background-position: -0px -72px;}
  482. span.icon82 {background-position: -18px -72px;}
  483. span.icon83 {background-position: -36px -72px;}
  484. span.icon84 {background-position: -54px -72px;}
  485. span.icon85 {background-position: -72px -72px;}
  486. span.icon86 {background-position: -90px -72px;}
  487. span.icon87 {background-position: -108px -72px;}
  488. span.icon88 {background-position: -126px -72px;}
  489. span.icon89 {background-position: -144px -72px;}
  490. span.icon90 {background-position: -162px -72px;}
  491. span.icon91 {background-position: -180px -72px;}
  492. span.icon92 {background-position: -198px -72px;}
  493. span.icon93 {background-position: -216px -72px;}
  494. span.icon94 {background-position: -234px -72px;}
  495. span.icon95 {background-position: -252px -72px;}
  496. span.icon96 {background-position: -270px -72px;}
  497. span.icon97 {background-position: -288px -72px;}
  498. span.icon98 {background-position: -306px -72px;}
  499. span.icon99 {background-position: -324px -72px;}
  500. span.icon100 {background-position: -342px -72px;}
  501.  
  502. /* Sprite Row 6 */
  503. span.icon101 {background-position: -0px -90px;}
  504. span.icon102 {background-position: -18px -90px;}
  505. span.icon103 {background-position: -36px -90px;}
  506. span.icon104 {background-position: -54px -90px;}
  507. span.icon105 {background-position: -72px -90px;}
  508. span.icon106 {background-position: -90px -90px;}
  509. span.icon107 {background-position: -108px -90px;}
  510. span.icon108 {background-position: -126px -90px;}
  511. span.icon109 {background-position: -144px -90px;}
  512. span.icon110 {background-position: -162px -90px;}
  513. span.icon111 {background-position: -180px -90px;}
  514. span.icon112 {background-position: -198px -90px;}
  515. span.icon113 {background-position: -216px -90px;}
  516. span.icon114 {background-position: -234px -90px;}
  517. span.icon115 {background-position: -252px -90px;}
  518. span.icon116 {background-position: -270px -90px;}
  519. span.icon117 {background-position: -288px -90px;}
  520. span.icon118 {background-position: -306px -90px;}
  521. span.icon119 {background-position: -324px -90px;}
  522. span.icon120 {background-position: -342px -90px;}
  523.  
  524. /* Sprite Row 7 */
  525. span.icon121 {background-position: -0px -108px;}
  526. span.icon122 {background-position: -18px -108px;}
  527. span.icon123 {background-position: -36px -108px;}
  528. span.icon124 {background-position: -54px -108px;}
  529. span.icon125 {background-position: -72px -108px;}
  530. span.icon126 {background-position: -90px -108px;}
  531. span.icon127 {background-position: -108px -108px;}
  532. span.icon128 {background-position: -126px -108px;}
  533. span.icon129 {background-position: -144px -108px;}
  534. span.icon130 {background-position: -162px -108px;}
  535. span.icon131 {background-position: -180px -108px;}
  536. span.icon132 {background-position: -198px -108px;}
  537. span.icon133 {background-position: -216px -108px;}
  538. span.icon134 {background-position: -234px -108px;}
  539. span.icon135 {background-position: -252px -108px;}
  540. span.icon136 {background-position: -270px -108px;}
  541. span.icon137 {background-position: -288px -108px;}
  542. span.icon138 {background-position: -306px -108px;}
  543. span.icon139 {background-position: -324px -108px;}
  544. span.icon140 {background-position: -342px -108px;}
  545.  
  546. /* Sprite Row 8 */
  547. span.icon141 {background-position: -0px -126px;}
  548. span.icon142 {background-position: -18px -126px;}
  549. span.icon143 {background-position: -36px -126px;}
  550. span.icon144 {background-position: -54px -126px;}
  551. span.icon145 {background-position: -72px -126px;}
  552. span.icon146 {background-position: -90px -126px;}
  553. span.icon147 {background-position: -108px -126px;}
  554. span.icon148 {background-position: -126px -126px;}
  555. span.icon149 {background-position: -144px -126px;}
  556. span.icon150 {background-position: -162px -126px;}
  557. span.icon151 {background-position: -180px -126px;}
  558. span.icon152 {background-position: -198px -126px;}
  559. span.icon153 {background-position: -216px -126px;}
  560. span.icon154 {background-position: -234px -126px;}
  561. span.icon155 {background-position: -252px -126px;}
  562. span.icon156 {background-position: -270px -126px;}
  563. span.icon157 {background-position: -288px -126px;}
  564. span.icon158 {background-position: -306px -126px;}
  565. span.icon159 {background-position: -324px -126px;}
  566. span.icon160 {background-position: -342px -126px;}
  567.  
  568. /* Sprite Row 9 */
  569. span.icon161 {background-position: -0px -144px;}
  570. span.icon162 {background-position: -18px -144px;}
  571. span.icon163 {background-position: -36px -144px;}
  572. span.icon164 {background-position: -54px -144px;}
  573. span.icon165 {background-position: -72px -144px;}
  574. span.icon166 {background-position: -90px -144px;}
  575. span.icon167 {background-position: -108px -144px;}
  576. span.icon168 {background-position: -126px -144px;}
  577. span.icon169 {background-position: -144px -144px;}
  578. span.icon170 {background-position: -162px -144px;}
  579. span.icon171 {background-position: -180px -144px;}
  580. span.icon172 {background-position: -198px -144px;}
  581. span.icon173 {background-position: -216px -144px;}
  582. span.icon174 {background-position: -234px -144px;}
  583. span.icon175 {background-position: -252px -144px;}
  584. span.icon176 {background-position: -270px -144px;}
  585. span.icon177 {background-position: -288px -144px;}
  586. span.icon178 {background-position: -306px -144px;}
  587. span.icon179 {background-position: -324px -144px;}
  588. span.icon180 {background-position: -342px -144px;}
  589.  
  590. /* Sprite Row 10 */
  591. span.icon181 {background-position: -0px -162px;}
  592. span.icon182 {background-position: -18px -162px;}
  593. span.icon183 {background-position: -36px -162px;}
  594. span.icon184 {background-position: -54px -162px;}
  595. span.icon185 {background-position: -72px -162px;}
  596. span.icon186 {background-position: -90px -162px;}
  597. span.icon187 {background-position: -108px -162px;}
  598. span.icon188 {background-position: -126px -162px;}
  599. span.icon189 {background-position: -144px -162px;}
  600. span.icon190 {background-position: -162px -162px;}
  601. span.icon191 {background-position: -180px -162px;}
  602. span.icon192 {background-position: -198px -162px;}
  603. span.icon193 {background-position: -216px -162px;}
  604. span.icon194 {background-position: -234px -162px;}
  605. span.icon195 {background-position: -252px -162px;}
  606. span.icon196 {background-position: -270px -162px;}
  607. span.icon197 {background-position: -288px -162px;}
  608. span.icon198 {background-position: -306px -162px;}
  609. span.icon199 {background-position: -324px -162px;}
  610. span.icon200 {background-position: -342px -162px;}
  611.  
  612.  
  613.  
  614. /*------------------------------------*\
  615.     $DROPDOWN MENU
  616. \*------------------------------------*/
  617. div.dropdown {
  618.     float: left;
  619.     position: relative;
  620. }
  621.  
  622. div.dropdown span.toggle {
  623.     width: 19px;
  624.     height: 16px;
  625.    
  626.     margin-left: 7px;
  627.     margin-top: 1px;
  628.     margin-right: 2px;
  629.     padding-left: 8px;
  630.    
  631.     float: right;
  632.    
  633.     background: url(../images/toggle.png) top right no-repeat;
  634.     border-left: 1px solid #D9D9D9;
  635.    
  636.     -webkit-transition: border-color .20s;
  637.     -moz-transition: border .20s;
  638.     -o-transition: border-color .20s;
  639.     transition: border-color .20s;
  640. }
  641. div.dropdown span.toggle.active {
  642.     background: url(../images/toggle.png) bottom right no-repeat;
  643. }
  644. div.dropdown
  645. button:hover span.toggle,
  646. .button:hover span.toggle {
  647.     border-color: #C0C0C0;
  648. }
  649.  
  650. div.dropdown-slider {
  651.     display: none;
  652.    
  653.     overflow: hidden;
  654.    
  655.     margin: 0 7px 5px 7px;
  656.     position: absolute;
  657.     top: 34px;
  658.     right: 0;
  659.    
  660.     background: #F2F2F2;
  661.    
  662.     border-right: solid 1px #D9D9D9;
  663.     border-bottom: solid 1px #D9D9D9;
  664.     border-left: solid 1px #D9D9D9;
  665.    
  666.     -webkit-border-bottom-right-radius: 2px;
  667.     -webkit-border-bottom-left-radius: 2px;
  668.     -moz-border-radius-bottomright: 2px;
  669.     -moz-border-radius-bottomleft: 2px;
  670.     border-bottom-right-radius: 2px;
  671.     border-bottom-left-radius: 2px;
  672.    
  673.     -webkit-transition: border-color .20s;
  674.     -moz-transition: border .20s;
  675.     -o-transition: border-color .20s;
  676.     transition: border-color .20s;
  677. }
  678. .left div.dropdown-slider {
  679.     margin: 0 1px 5px 7px;
  680. }
  681. .middle div.dropdown-slider {
  682.     margin: 0 1px 5px 1px;
  683. }
  684. .right div.dropdown-slider {
  685.     margin: 0 7px 5px 1px;
  686. }
  687. div.dropdown-slider .ddm {
  688.     display: block;
  689.     background: #F2F2F2;
  690.     color: #585858;
  691.    
  692.     text-decoration: none;
  693.     text-shadow: 0 1px 0 #fff;
  694.     font: bold 11px Helvetica, Arial, sans-serif;
  695.     line-height: 18px;
  696.     height: 18px;
  697.    
  698.     margin: 0;
  699.     padding: 5px 6px 4px 6px;
  700.     width: 100%;
  701.     float: left;
  702.    
  703.     border-top: 1px solid #FFF;
  704.     border-bottom: 1px solid #D9D9D9;
  705. }
  706. div.dropdown-slider .ddm:hover {
  707.     background: #F4F4F4;
  708.     border-bottom-color: #C0C0C0;
  709. }
  710. div.dropdown-slider .ddm:active {
  711.     border-bottom-color: #4D90FE;
  712.     color: #4D90FE;
  713.    
  714.     -moz-box-shadow:inset 0 0 10px #D4D4D4;
  715.     -webkit-box-shadow:inset 0 0 10px #D4D4D4;
  716.     box-shadow:inset 0 0 10px #D4D4D4;
  717. }
  718. div.dropdown-slider .ddm:last-child {
  719.     border-bottom: none;
  720. }
  721.  
  722.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!