daily pastebin goal
41%
SHARE
TWEET

Untitled

a guest Dec 15th, 2018 93 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* =============================================================================
  2.      Primary styles
  3.      ========================================================================== */
  4.  
  5. /*  ================ Sprites ================ */
  6.  
  7. .flag-mini{
  8.     float:left;
  9.     .image-replaces-text('layered/flags-mini.png', 27px, 27px);
  10. }
  11. .flag-mini.england, .flag-mini.England{
  12.     background-position: 0px 0px;
  13. }
  14. .flag-mini.france, .flag-mini.France{
  15.     background-position: -38px -37px;
  16. }
  17. .flag-mini.germany, .flag-mini.Germany{
  18.     background-position: -75px -75px;
  19. }
  20. .flag-mini.italy, .flag-mini.Italy{
  21.     background-position: -161px -161px;
  22. }
  23. .flag-mini.spain, .flag-mini.Spain{
  24.     background-position: -112px -113px;
  25. }
  26.  
  27. .social-mini{
  28.     line-height:13px;
  29.     padding-left:15px;
  30.     .bg-image('layered/social-icons-mini.png');
  31. }
  32. .social-mini.twitter{
  33.     color:@twitterfontcolor;
  34.     background-position:0 0;
  35. }
  36. .social-mini.facebook{
  37.     color:@facebookfontcolor;
  38.     background-position:-13px -13px;
  39. }
  40.  
  41. .social-medium{
  42.     .image-replaces-text('layered/social-icons.png', 32px, 32px);
  43. }
  44. .social-medium.twitter{
  45.     background-position:-32px -31px;
  46. }
  47. .social-medium.facebook{
  48.     background-position:0 0;
  49. }
  50.  
  51.  
  52. .social-white span{
  53.     .image-replaces-text('layered/social-icons-white.png', 32px, 32px);
  54. }
  55. .social-white.facebook span{
  56.     background-position:0 0;
  57. }
  58. .social-white.twitter span{
  59.     background-position:-30px -29px;
  60. }
  61.  
  62.  
  63. .shirt{
  64.     width:147px;
  65.     height:173px;
  66.     text-align:center;
  67.     font-weight:bold;
  68.     font-size:1.2em;
  69.     line-height:1.3em;
  70.     .bg-image('layered/team-shirts.png', no-repeat, scroll);
  71. }
  72.  
  73. .lt-ie9 .shirt{
  74.     font-weight:normal;
  75. }
  76.  
  77. .shirt h2{
  78.     color:inherit;
  79.     line-height:1em;
  80.     font-size:1.8em;
  81.     padding-top:50px;
  82.     margin:0;
  83. }
  84.  
  85. .lt-ie9 .shirt h2{
  86.     font-size: 1.5em;
  87. }
  88. .shirt strong{
  89.     display:block;
  90. }
  91. .shirt.france, .shirt.italy, .shirt.spain{
  92.     color:white;
  93. }
  94. .shirt.england, .shirt.germany{
  95.     .text-shadow(0, 0, 3px);
  96. }
  97.  
  98. .shirt.england{
  99.     background-position: 0px 0px;
  100. }
  101. .shirt.france{
  102.     background-position: -292px -344px;
  103. }
  104. .shirt.germany{
  105.     background-position: -439px -516px;
  106. }
  107. .shirt.italy{
  108.     background-position: -146px -172px;
  109. }
  110. .shirt.spain{
  111.     background-position: -586px -688px;
  112. }
  113.  
  114. .shirt-medium{
  115.     .image-replaces-text('layered/team-shirts-medium.png', 75px, 88px);
  116. }
  117. .shirt-medium.spain{
  118.     background-position: 0px 0px;
  119. }
  120. .shirt-medium.england{
  121.     background-position: -287px -338px;
  122. }
  123. .shirt-medium.france{
  124.     background-position: -217px -255px;
  125. }
  126. .shirt-medium.germany{
  127.     background-position: -146px -172px;
  128. }
  129. .shirt-medium.italy{
  130.     background-position: -75px -88px;
  131. }
  132.  
  133.  
  134. .shirt-mini{
  135.     .image-replaces-text('layered/team-shirts-mini.png', 52px, 60px);
  136. }
  137. .shirt-mini.england{
  138.     background-position: -102px -122px;
  139. }
  140. .shirt-mini.france{
  141.     background-position: 0px 0px;
  142. }
  143. .shirt-mini.germany{
  144.     background-position: -153px -183px;
  145. }
  146. .shirt-mini.italy{
  147.     background-position: -51px -61px;
  148. }
  149. .shirt-mini.spain{
  150.     background-position: -205px -242px;
  151. }
  152.  
  153. .flag-event{
  154.     .image-replaces-text('layered/flags-pointers.png', 30px, 47px);
  155. }
  156. .flag-event.england{
  157.     background-position: 0px 0px;
  158. }
  159. .flag-event.italy{
  160.     background-position: -31px 0px;
  161. }
  162. .flag-event.germany{
  163.     background-position: -91px 0px;
  164. }
  165. .flag-event.spain{
  166.     background-position: -61px 0px;
  167. }
  168. .flag-event.france{
  169.     background-position: -122px 0px;
  170. }
  171.  
  172.  
  173.  
  174.  
  175. /* ================ Misc reusable styles ================ */
  176.  
  177. /* general nice buttons*/
  178. .button{
  179.     .inline-block;
  180.     text-transform:uppercase;
  181.     font-family:@headingfont;
  182.     color:@white;
  183.     background-color:@basefontcolor;
  184.     .box-shadow-white(0, 0, 10px, 1);
  185.     .border-radius(10px,10px,10px,10px);
  186.     padding:5px 15px;
  187.     font-size:2em;
  188.     cursor:pointer;
  189. }
  190. .button:hover{
  191.     color:@white;
  192. }
  193.  
  194. .lt-ie9 .button {
  195.     font-family:@ieheadingfont;
  196. }
  197.  
  198. /* the little ribbon thing that shows your current country's place*/
  199. .ribbon{
  200.     padding:8px 15px;
  201.     width:75px;
  202.     height:27px;
  203.     color:white;
  204.     font-weight:bold;
  205.     font-size:1.8em;
  206.     line-height:27px;
  207.     .bg-image('ribbon.png');
  208. }
  209. .ribbon sup{
  210.     font-size:0.5em;
  211. }
  212.  
  213. /* display method for the details of a square takeover*/
  214. .activity .content{
  215.     width:140px;
  216.     font-size:0.7em;
  217. }
  218.  
  219. .activity .flag-mini.loser-country{
  220.     position: relative;
  221.     left: 8px;
  222.     top: -35px;
  223. }
  224.  
  225. .activity img{
  226.     border:1px solid @white;
  227.     .box-shadow(2px, 2px, 2px, 0.25);
  228. }
  229. .activity img.won{
  230.     position:relative;
  231.     margin-top:-10px;
  232. }
  233. .activity img.lost{
  234.     position:relative;
  235.     margin:-20px 0 0 -5px;
  236. }
  237.  
  238. .activity p{
  239.     margin:10px 10px 5px 0 !important;
  240. }
  241. .activity strong{
  242.     font-size:1.1em;
  243. }
  244. .activity em{
  245.     font-style:italic;
  246.     font-family:@metafont;
  247.     .opacity(0.7);
  248.     display:block;
  249.     padding:3px 0;
  250. }
  251. .activity .social-mini{
  252.     font-style:italic;
  253.     font-family:@metafont;
  254. }
  255.  
  256. strong.country-loser-name{
  257.     text-transform: capitalize;
  258. }
  259.  
  260. .social{}
  261.     .social li{
  262.         float:left;
  263.         margin-right:5px;
  264.     }
  265.  
  266. /*  ================ z-indexes: all listed together to make comparison easier ================ */
  267.  
  268. @zindexLivery:10;
  269. @zindexYourModal: 9;
  270. @zindexMostModals: 7;
  271. @zindexLesserModals: 4;
  272.  
  273. header, footer{
  274.     z-index:@zindexLivery;
  275. }
  276.  
  277. .shirtstandings li{
  278.     z-index:3;
  279. }
  280.  
  281. .sidebar{
  282.     z-index:4;
  283. }
  284.  
  285. .activity img.won{             
  286.     z-index:2;
  287. }
  288. .activity img.lost{
  289.     z-index:1;
  290. }
  291.  
  292. .activity .flag-mini.loser-country{
  293.     z-index: 1;
  294. }
  295.  
  296. .activity .flag-mini{
  297.     position: relative;
  298.     z-index: 2;
  299. }
  300.  
  301. #flagcontainer{
  302.     z-index:0;
  303. }
  304. .flag-event{
  305.     z-index:2;
  306. }
  307.  
  308. .modal{
  309.     z-index:@zindexMostModals;
  310. }
  311.  
  312. .modal.squareinfo{
  313.     z-index:@zindexLesserModals;
  314. }
  315. .modalarrow{
  316.     z-index:@zindexLesserModals;
  317. }
  318.  
  319. .modal.yoursquare{
  320.     z-index:@zindexYourModal;
  321. }
  322. .modalarrow.yoursquarearrow{
  323.     z-index: @zindexYourModal;
  324. }
  325.  
  326. .intro-overlay{
  327.     z-index: @zindexLivery - 1;
  328. }
  329.  
  330. .activity .flag-mini.loser-country{
  331.     z-index: 0;
  332. }
  333.  
  334. .activity .flag-mini{
  335.     position: relative;
  336.     z-index: 1;
  337. }
  338.  
  339. .activity .flag-mini.loser-country{
  340.     z-index: 0;
  341. }
  342.  
  343.  
  344. /* ================ Header ================ */
  345. header{
  346.     min-width:980px;
  347.     .clearfix;
  348.     position:absolute;
  349.     .bg-image('header-bg.png', repeat-x, scroll, -45px, 0px);
  350.     width:100%;
  351.     height: 72px;
  352. }
  353. .yahoologo, header .title, header em, header h1, header h2, header ul{
  354.     float:left;
  355. }
  356.  
  357. .yahoologo{
  358.     .image-replaces-text("yahoo-eurosport-logos.png", 204px, 55px);
  359.     margin:5px 20px 0 30px;
  360. }
  361.  
  362. .fr .yahoologo{
  363.     .image-replaces-text("yahoo-logo.png", 100px, 55px);
  364. }
  365. header .title{
  366.     width:555px;
  367. }
  368. header em, header h1{
  369.     line-height:67px;
  370.     letter-spacing:-1px;
  371. }
  372. header em{
  373.     font-family:@metafont;
  374.     font-size:0.8em;
  375. }
  376. header h1{
  377.     font-size:2.3em;
  378.     margin:0 20px 0 15px;
  379. }
  380.  
  381. .lt-ie9 header h1{
  382.     font-weight:normal;
  383.     font-size: 1.6em;
  384.     letter-spacing: normal;
  385. }
  386.  
  387. header h1 a{
  388.     color:@yahooaccentcolor !important;
  389.     .text-shadow();
  390. }
  391. header h2{
  392.     color:@yahooaccentcolor !important;
  393.     .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
  394.     margin:0 8px 0 0 ;
  395.     letter-spacing:-1px;
  396.     font-size:1.4em;
  397. }
  398.  
  399. .lt-ie9 header h2{
  400.     font-weight:normal;
  401.     font-size: 1.1em;
  402.     letter-spacing: normal;
  403. }
  404.  
  405. .share ul, .share li, .standings ul, .standings li{
  406.     float:left;
  407. }
  408.  
  409. .standings, .share{
  410.     line-height:44px;
  411. }
  412.  
  413. .standings{
  414.     float:left;
  415.     margin-left: 10px;
  416. }
  417. .standings li{
  418.     margin-right:10px;
  419.     font-weight:bold;
  420. }
  421. .standings .flag-mini{
  422.     margin:9px 3px 0 0;
  423. }
  424.  
  425. header .share{
  426.     display:none; /* enabled at > 1280 res with media queries*/
  427. }
  428. .share{
  429.     float:right;
  430. }
  431. .share li{
  432.     padding-top:10px;
  433.     margin-right:10px;
  434.     line-height:1em;
  435. }
  436. .twitter-share-button{
  437.     //margin-top:11px;
  438.     width:90px !important;
  439. }
  440. .fb-like{
  441.     width:75px !important;
  442.     overflow:hidden;
  443. }
  444.  
  445.  
  446. /* ================ Content ================ */
  447.  
  448. .contentwrapper{
  449.     padding-top:0px;
  450. }
  451.  
  452. .sidebar{
  453.     position:fixed;
  454.     right:-35px;
  455.     top:0;
  456.     width:210px;
  457.     height:100%;
  458.     transition: right 0.5s;
  459.     -webkit-transition: right 0.5s;
  460.     -moz-transition: right 0.5s;
  461.     -o-transition: right 0.5s;
  462.  
  463.     &:hover{
  464.         right: 0;
  465.     }
  466. }
  467.  
  468. .lt-ie8 .sidebar{
  469.     .bg-image('ie7-sidebar-bg.png', repeat-y);
  470. }
  471. .sidebar h2{
  472.     color:@backgroundcolor;
  473.     font-size:1.5em;
  474.     padding-left:15px;
  475.     padding-top:80px;
  476.     line-height:57px;
  477.     margin:-20px 0 0 0;
  478.     .bg-image('sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
  479. }
  480.  
  481. .lt-ie8 .sidebar h2{
  482.     .bg-image('ie7-sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
  483. }
  484.  
  485. .lt-ie9 .sidebar h2{
  486.     font-weight:normal;
  487.     font-size: 1.1em;
  488. }
  489. .sidebar h2:before{
  490.     content:" ";
  491.     float:left;
  492.     width:12px;
  493.     height:53px;
  494.     margin-right:15px;
  495.     .bg-image('arrow-right.png', no-repeat, scroll, 0, 50%);
  496. }
  497. .sidebar li{
  498.     width:100%;
  499.     display:none; /* js used to change display into block mode*/
  500.     .bg-image('sidebar-bg-tabbed.png');
  501.     overflow:hidden;
  502.     padding:44px 0 0 12px;
  503.     color:@white;
  504. }
  505.    
  506. .lt-ie8 .sidebar li{
  507.     .bg-image('ie7-sidebar-bg-tabbed.png');
  508. }
  509.  
  510. .ie7 .sidebar li{
  511.     margin-bottom:-3px;
  512. }
  513. .sidebar li.empty{
  514.     display:block;
  515.     .bg-image('sidebar-bg.png', repeat-y);
  516.     height:1000px;
  517. }
  518. .lt-ie8 .sidebar li.empty {
  519.     .bg-image('ie7-sidebar-bg-tabbed.png');
  520. }
  521. .sidebar h3{
  522.     margin:0;
  523.     float:left;
  524.     color:@white;
  525.     width: 35px;
  526. }
  527.  
  528. .sidebar .activity .content{
  529.     float:left;
  530.     margin-left:5px;
  531. }
  532.  
  533.  
  534.  
  535. #flagcontainer{ /* this is only an ID to speed up any javascript that needs doing inside it. Otherwise: DO NOT USE IDS!!! */
  536.     position:relative;
  537.     overflow:hidden;
  538.     width:100%; /* width set to 100% to prevent scroll bars. Exact width calculated with JS*/
  539.     height:600px;
  540.     background-color:black;
  541.  
  542.     .right-edge {
  543.         position: fixed;
  544.         right:0;
  545.         height:100%;
  546.         width: 30px;
  547.         .bg-image("right-edge.png", repeat-y)
  548.     }
  549. }
  550. .cell{
  551.     display:inline-block;
  552.     position: absolute;
  553.     width:@gridwidth;
  554.     height:@gridwidth;
  555.     cursor:pointer;
  556.     /*background-size: 100%;*/
  557.  
  558.     &:hover{
  559.         .cell-hover-glow;
  560.     }
  561. }
  562.  
  563. .cell.user-square{
  564.     .cell-hover-glow;
  565. }
  566.  
  567. /* the body class below is set to signify the country the user has chosen (or is assumed to have chosen)*/
  568.  
  569. /* these default flags are for <=1024*/
  570. .cell.spain{
  571.     .flag-bg('flags/spain-dark-1250x781.jpg');
  572.     &:hover {
  573.         .flag-bg('flags/spain-1250x781.jpg');
  574.     }
  575. }
  576.     body.spain .cell.spain{
  577.         .flag-bg('flags/spain-1250x781.jpg');
  578.         &:hover {
  579.             .flag-bg('flags/spain-dark-1250x781.jpg');
  580.         }
  581.     }
  582.     body.spain .cell.spain.user-square{
  583.         .flag-bg('flags/spain-dark-1250x781.jpg');
  584.     }
  585.  
  586. .cell.germany{
  587.     .flag-bg('flags/germany-dark-1250x781.jpg');
  588.     &:hover {
  589.         .flag-bg('flags/germany-1250x781.jpg');
  590.     }
  591. }
  592.     body.germany .cell.germany{
  593.         .flag-bg('flags/germany-1250x781.jpg');
  594.         &:hover {
  595.             .flag-bg('flags/germany-dark-1250x781.jpg');
  596.         }
  597.     }
  598.     body.germany .cell.germany.user-square{
  599.         .flag-bg('flags/germany-dark-1250x781.jpg');
  600.     }
  601.  
  602. .cell.england{
  603.     .flag-bg('flags/england-dark-1250x781.jpg');
  604.     &:hover {
  605.         .flag-bg('flags/england-1250x781.jpg');
  606.     }
  607. }
  608.     body.england .cell.england{
  609.         .flag-bg('flags/england-1250x781.jpg');
  610.         &:hover {
  611.             .flag-bg('flags/england-dark-1250x781.jpg');
  612.         }
  613.     }
  614.     body.england .cell.england.user-square{
  615.         .flag-bg('flags/england-dark-1250x781.jpg');
  616.     }
  617.  
  618. .cell.italy{
  619.     .flag-bg('flags/italy-dark-1250x781.jpg');
  620.     &:hover {
  621.         .flag-bg('flags/italy-1250x781.jpg');
  622.     }
  623. }
  624.     body.italy .cell.italy{
  625.         .flag-bg('flags/italy-1250x781.jpg');
  626.         &:hover {
  627.             .flag-bg('flags/italy-dark-1250x781.jpg');
  628.         }
  629.     }
  630.     body.italy .cell.italy.user-square{
  631.         .flag-bg('flags/italy-dark-1250x781.jpg');
  632.     }
  633.  
  634. .cell.france{
  635.     .flag-bg('flags/france-dark-1250x781.jpg');
  636.     &:hover {
  637.         .flag-bg('flags/france-1250x781.jpg');
  638.     }
  639. }
  640.     body.france .cell.france{
  641.         .flag-bg('flags/france-1250x781.jpg');
  642.         &:hover {
  643.             .flag-bg('flags/france-dark-1250x781.jpg');
  644.         }
  645.     }
  646.     body.france .cell.france.user-square{
  647.         .flag-bg('flags/france-dark-1250x781.jpg');
  648.     }
  649.  
  650.  
  651. .lt-ie9 .cell.spain{
  652.     .flag-bg('flags/spain-dark-1920x1200.jpg');
  653.     &:hover {
  654.         .flag-bg('flags/spain-1920x1200.jpg');
  655.     }
  656. }
  657.     .lt-ie9 body.spain .cell.spain{
  658.         .flag-bg('flags/spain-1920x1200.jpg');
  659.         &:hover {
  660.             .flag-bg('flags/spain-1920x1200.jpg');
  661.         }
  662.     }
  663.     .lt-ie9 body.spain .cell.spain.user-square{
  664.         .flag-bg('flags/spain-1920x1200.jpg');
  665.     }
  666.  
  667. .lt-ie9 .cell.germany{
  668.     .flag-bg('flags/germany-dark-1920x1200.jpg');
  669.     &:hover {
  670.         .flag-bg('flags/germany-1920x1200.jpg');
  671.     }
  672. }
  673. .lt-ie9 body.germany .cell.germany{
  674.     .flag-bg('flags/germany-1920x1200.jpg');
  675.     &:hover {
  676.         .flag-bg('flags/germany-dark-1920x1200.jpg');
  677.     }
  678. }
  679. .lt-ie9 body.germany .cell.germany.user-square{
  680.     .flag-bg('flags/germany-1920x1200.jpg');
  681. }
  682.  
  683. .lt-ie9 .cell.england{
  684.     .flag-bg('flags/england-dark-1920x1200.jpg');
  685.     &:hover {
  686.         .flag-bg('flags/england-1920x1200.jpg');
  687.     }
  688. }
  689. .lt-ie9 body.england .cell.england{
  690.     .flag-bg('flags/england-1920x1200.jpg');
  691.     &:hover {
  692.         .flag-bg('flags/england-dark-1920x1200.jpg');
  693.     }
  694. }
  695. .lt-ie9 body.england .cell.england.user-square{
  696.     .flag-bg('flags/england-1920x1200.jpg');
  697. }
  698.  
  699. .lt-ie9 .cell.italy{
  700.     .flag-bg('flags/italy-dark-1920x1200.jpg');
  701.     &:hover {
  702.         .flag-bg('flags/italy-1920x1200.jpg');
  703.     }
  704. }
  705. .lt-ie9 body.italy .cell.italy{
  706.     .flag-bg('flags/italy-1920x1200.jpg');
  707.     &:hover {
  708.         .flag-bg('flags/italy-dark-1920x1200.jpg');
  709.     }
  710. }
  711. .lt-ie9 body.italy .cell.italy.user-square{
  712.     .flag-bg('flags/italy-1920x1200.jpg');
  713. }
  714.  
  715. .lt-ie9 .cell.france{
  716.     .flag-bg('flags/france-dark-1920x1200.jpg');
  717.     &:hover {
  718.         .flag-bg('flags/france-1920x1200.jpg');
  719.     }
  720. }
  721. .lt-ie9 body.france .cell.france{
  722.     .flag-bg('flags/france-1920x1200.jpg');
  723.     &:hover {
  724.         .flag-bg('flags/france-dark-1920x1200.jpg');
  725.     }
  726. }
  727. .lt-ie9 body.france .cell.france.user-square{
  728.     .flag-bg('flags/france-1920x1200.jpg');
  729. }
  730.  
  731.  
  732.  
  733. .cell.black{
  734.     background-image: none;
  735.     background-color: black;
  736. }
  737.  
  738. .cell.top{
  739.     border-top: 1px solid #CCC;
  740.     height:@gridwidth - 1;
  741. }
  742. .cell.right{
  743.     border-right: 1px solid #CCC;
  744. }
  745. .cell.bottom{
  746.     border-bottom: 1px solid #CCC;
  747. }
  748. .cell.left{
  749.     border-left: 1px solid #CCC;
  750.     width:@gridwidth - 1;
  751. }
  752. .cell.flagged{
  753.     box-shadow: 0 0 10px 0 white;
  754. }
  755.  
  756. .flag-event{
  757.     margin:10px 0 0 -7px;
  758.     opacity: 0;
  759.     position:absolute;
  760.     display:block;
  761. }
  762.  
  763.  
  764. .shirtstandings{
  765.     position:absolute;
  766.     top:0;
  767.     left:0;
  768.     width:0;
  769.     height:0;
  770.     pointer-events: none;
  771. }
  772.  
  773. .shirtstandings .shirt{
  774.     position:absolute;
  775.     left:-200px;
  776.     pointer-events: auto;
  777. }
  778.  
  779. .modal{
  780.     position:absolute;
  781.     display:none;
  782. }
  783. /* Generic screen-centered modals */
  784. .modal.centered{
  785.     .bg-image('modal-bg.png');
  786.     position:fixed;
  787.     width:@modal-width;
  788.     height:@modal-height;      
  789.     margin-top:-@modal-height / 2;
  790.     margin-left:-@modal-width / 2;
  791.     top:50%;
  792.     left:50%;
  793.     text-align:center;
  794. }
  795.  
  796. .modal > .content{
  797.     padding:40px;
  798. }
  799.  
  800. .modal .ribbon{
  801.     margin:0 auto;
  802. }
  803.  
  804. .modal h1{
  805.     margin:0;
  806.     .text-shadow();
  807.     letter-spacing:-1px;
  808.     color: @yahooaccentcolor;
  809. }
  810. .modal h1.large{
  811.     font-size:6.5em;
  812.     margin:5px 0;
  813.     line-height:0.9em;
  814. }
  815.  
  816. .lt-ie9 .modal h1.large{
  817.     font-weight:normal;
  818.     font-size: 4em;
  819. }
  820.  
  821. .modal h2{
  822.     font-size: 1.2em;
  823.     margin:10px 0;
  824.     color: @yahooaccentcolor;
  825. }
  826. .modal p{
  827.     margin:0 0 0.7em 0;
  828. }
  829.  
  830. /* .shirts output in several modals, be warned */
  831. .modal .shirts{
  832.     text-align:center;
  833. }
  834. .modal .shirts li{
  835.     text-align:center;
  836.     .inline-block;
  837.     margin:0 15px;
  838. }
  839. .modal .shirts a{
  840.     font-family:@headingfont;
  841.     color:@basefontcolor;
  842.     text-transform:uppercase;
  843.     text-align: center;
  844.     margin: 0 auto;
  845.     .text-shadow();
  846. }
  847. .lt-ie9 .modal .shirts a{
  848.     font-family: Arial, sans-serif;
  849.     font-size: 0.7em;
  850. }
  851.  
  852. .modal .shirts.buttons .button{
  853.     .border-radius(15px,15px,15px,15px);
  854.     .box-shadow(0, 0, 3px, 1);
  855.     .vertical-gradient(#FFFFFF,#CCCCCC);
  856.     background-color:white;
  857.     font-size:1em;
  858.     max-width: 50px;
  859.     padding:5px 13px;
  860.    
  861.     &:hover{
  862.         .vertical-gradient(darken(#FFFFFF, 10%), darken(#CCCCCC, 10%);
  863.     }
  864. }
  865. .lt-ie9 .modal .shirts.buttons .button{
  866.     max-width: none;
  867.     font-size:0.7em;
  868.     padding-left:10px;
  869.     padding-right:10px;
  870. }
  871. .lt-ie9 .modal .shirts .shirt-mini{
  872.     margin:0 auto;
  873. }
  874.    
  875. .modal .shirts.buttons li{
  876.     margin:3px;
  877. }
  878.            
  879.  
  880. .modalarrow{
  881.     position:absolute;
  882.     margin-top:-2px;
  883.     margin-left:10px;
  884.     .image-replaces-text("modal-arrows.png", 14px, 26px);
  885. }
  886. .modalarrow.right{
  887.     background-position:-14px 0;
  888.     margin-left:-10px;
  889. }
  890.  
  891.  
  892. /* Specific modals */
  893.  
  894. .modal.home{
  895.     @modal-width: 600px;
  896.     @modal-height: 475px;
  897.  
  898.     width:@modal-width;
  899.     height:@modal-height;
  900.     margin-top:-@modal-height / 2;
  901.     margin-left:-@modal-width / 2;
  902.     .bg-image('modal-bg-home.png');
  903. }
  904. .modal.home .content{
  905.     padding:40px 22px;
  906. }
  907. .lt-ie9 .modal.home .content{
  908.     padding:60px 22px;
  909. }
  910. .modal.home .yahoologo{
  911.     float:none;
  912.     margin:auto;
  913.     width:204px;
  914. }
  915. .modal.home h1{
  916.     margin:10px 0;
  917.     color: @yahooaccentcolor;
  918.     font-size: 6em;
  919.     margin: 0.1em 0 0.1em;
  920.     line-height:1em;
  921.     //.image-replaces-text('text-flag-your-support.png', 100%, 95px, 50%);
  922. }
  923.  
  924. .lt-ie9 .modal.home h1{
  925.     font-weight:normal;
  926.     font-size: 4em;
  927.     line-height: 1em;
  928.     padding-bottom: 20px;
  929. }
  930.  
  931. .modal.home h2{
  932.     text-transform:none;
  933.     margin:0;
  934.     width: 500px;
  935.     margin: auto;
  936.     margin-bottom:0.3em;
  937.     font-size:2em;
  938.     line-height: 1em;
  939.     letter-spacing:-1px;
  940.     color:@basefontcolor;
  941. }
  942.  
  943. .lt-ie9 .modal.home h2{
  944.     font-weight:bold;
  945.     font-size: 1.3em;
  946.     line-height: 1.1em;
  947.     font-family: @arial;
  948.     padding-bottom: 15px;
  949. }
  950.  
  951. .modal.home .button{
  952.     margin:15px 0 0 0;
  953.     padding-left:90px;
  954.     font-size:2em;
  955.     border:2px solid black;
  956.     .text-shadow(1px, 1px, 0px, black);
  957.     .box-shadow-white(0, 0, 20px, 1, 10px);
  958.     .vertical-gradient(@yahooaccentcolor, #a74baf);
  959.  
  960.     &:hover{
  961.         .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  962.     }
  963. }
  964.  
  965. .modal.home .button .shirt-medium{
  966.     position:absolute;
  967.     margin:-20px 0 0 -80px;
  968. }
  969.  
  970. .modal.home p {
  971.     margin-top: 1em;
  972. }
  973.  
  974. .home .shirt-mini{
  975.     .opacity(0.5);
  976.     transition: opacity 0.3s;
  977.     -webkit-transition: opacity 0.3s;
  978.     -moz-transition: opacity 0.3s;
  979.     -o-transition: opacity 0.3s;
  980.     &:hover{
  981.         .opacity(1);
  982.     }
  983. }
  984.  
  985. .modal.support{
  986.  
  987. }
  988. .modal.support .encouragement{
  989.     display:none;
  990. }
  991. .england .modal.support .take-england{
  992.     display: none;
  993. }
  994. .spain .modal.support .take-spain{
  995.     display: none;
  996. }
  997. .france .modal.support .take-france{
  998.     display: none;
  999. }
  1000. .italy .modal.support .take-italy{
  1001.     display: none;
  1002. }
  1003. .germany .modal.support .take-germany{
  1004.     display: none;
  1005. }
  1006.  
  1007. .modal.connect .content{
  1008.     padding-left:50px;
  1009.     padding-right:50px;
  1010. }
  1011. .modal.connect h1{
  1012.     font-size:2.6em;
  1013.     line-height:1em;
  1014.     margin-bottom:0;
  1015. }
  1016. .lt-ie9 .modal.connect h1{
  1017.     font-weight:normal;
  1018.     font-size: 2em;
  1019. }
  1020. .modal.connect li{
  1021.     padding:5px 0 5px 0;
  1022. }
  1023. .modal.connect label{
  1024.     font-weight:bold;
  1025.     display:block;
  1026.     padding:0 0 5px 0;
  1027. }
  1028.     .modal.connect label span{
  1029.         font-size:0.75em;
  1030.     }
  1031. .modal.connect input[type="text"],
  1032. .modal.connect textarea{
  1033.     padding:5px;
  1034.     border:1px solid #666;
  1035.     background-color:white;
  1036.     width:300px;
  1037.     text-align:center;
  1038. }
  1039. .modal.connect .small label{
  1040.     font-size:0.8em;
  1041. }
  1042. .modal.connect .loginbutton{
  1043.     cursor: pointer;
  1044.     .image-replaces-text('button-connect-with-facebook.png');
  1045.     margin-left: 25px;
  1046.     width: 299px;
  1047.     height: 40px;
  1048.     line-height:40px;
  1049. }
  1050.  
  1051. .it .modal.connect .loginbutton{
  1052.     .image-replaces-text('fb_italian.png');
  1053.     margin-left: 50px;
  1054.     width: 259px;
  1055. }
  1056.  
  1057. .es .modal.connect .loginbutton{
  1058.     .image-replaces-text('fb_spanish.png');
  1059. }
  1060.  
  1061. .fr .modal.connect .loginbutton{
  1062.     .image-replaces-text('fb_french.png');
  1063. }
  1064.  
  1065. .de .modal.connect .loginbutton{
  1066.     margin-left:0;
  1067.     .image-replaces-text('fb_german.png');
  1068. }
  1069.  
  1070. /* note that modal.squareinfo matches the .yoursquare elements too, so changes must be careful*/
  1071. .modal.squareinfo{
  1072.     .bg-image('modal-small-bg.png');
  1073.     @modal-width: 381px;
  1074.     @modal-height: 269px;
  1075.  
  1076.     width:@modal-width;
  1077.     height:@modal-height;
  1078.  
  1079.     margin-top:-30px; /* counteracts height of shadow */
  1080. }
  1081. .modal.squareinfo.right{
  1082.     margin-left:15px; /* countacts width of shadow when in right configuration*/
  1083. }
  1084. .modal.squareinfo > .content{
  1085.     padding-bottom:0;
  1086.     padding-left:35px;
  1087. }
  1088. .modal.squareinfo h1{
  1089.     color:@secondaryfontcolor;
  1090. }
  1091. .modal.squareinfo h2{
  1092.     color:@secondaryfontcolor;
  1093.     margin:0;
  1094. }
  1095. .modal.squareinfo .activity{
  1096.     float:left;
  1097.     border-right:1px solid #CCC;
  1098.     .box-shadow-white(1px, 0px, 0px, 0.5);
  1099. }
  1100. .modal.squareinfo .colset{
  1101.     .clearfix;
  1102. }
  1103. .modal.squareinfo .col{
  1104.     float:left;
  1105. }
  1106. .modal.squareinfo .activity{
  1107.     margin-top:10px;
  1108. }
  1109. .modal.squareinfo .message{
  1110.     width:154px;
  1111.     padding:10px 0 0 10px;
  1112.     font-size:1em;
  1113. }
  1114. .modal.squareinfo ul.socialbuttons{
  1115.     .clearfix;
  1116. }
  1117. .modal.squareinfo .socialbuttons li{
  1118.     float:left;
  1119.     margin-right:10px;
  1120. }
  1121. .modal.squareinfo .button{
  1122.     font-size:1.7em
  1123. }
  1124.     .fr.lt-ie9 .modal.squareinfo .button{
  1125.         font-size: 1.1em;
  1126.     }
  1127. .modal.squareinfo .button.facebook{
  1128.     .vertical-gradient(#3B5A9A,#273D6C);
  1129.  
  1130.     &:hover{
  1131.         .dark-vertical-gradient(#3B5A9A, #273D6C);
  1132.     }
  1133. }
  1134. .modal.squareinfo .button.twitter{
  1135.     .vertical-gradient(#3DC7F4,#24A2CC);
  1136.  
  1137.     &:hover{
  1138.         .dark-vertical-gradient(#3DC7F4, #24A2CC);
  1139.     }
  1140. }
  1141. .modal.squareinfo .button span{
  1142.     float:left;
  1143.     margin:2px 5px 0 0;
  1144. }
  1145.  
  1146. .modal.squareinfo .take-square-mini{
  1147.     display:none; //toggled based on log in state (below)
  1148.     position: absolute;
  1149.     bottom: 45px;
  1150.     font-size: 1.2em;
  1151.     text-align:center;
  1152.     width:135px;
  1153.     .vertical-gradient(@yahooaccentcolor, #a74baf);
  1154.  
  1155.     &:hover{
  1156.         .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  1157.     }      
  1158. }
  1159.  
  1160. .modal.squareinfo .euro-link{
  1161.     display:none; //toggled based on log in state (below)
  1162.     text-align:center;
  1163.     font-size: 1em;
  1164.     margin-top: 10px;
  1165.     width:155px;
  1166.     position: absolute;
  1167.     bottom: 45px;
  1168.     border-top:1px solid #CCC;
  1169.     padding-top:10px;
  1170.  
  1171.     .button {
  1172.         font-size:1.2em;
  1173.         margin: 0;
  1174.         .vertical-gradient(@yahooaccentcolor, #a74baf);
  1175.  
  1176.         &:hover{
  1177.             .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  1178.         }      
  1179.     }
  1180.  
  1181.     a {
  1182.         color: white;
  1183.     }      
  1184. }
  1185. .lt-ie9 .modal.squareinfo .euro-link{
  1186.     font-size:0.8em;
  1187. }
  1188. .ie7 .modal.squareinfo .euro-link{
  1189.     right: 20px;
  1190. }
  1191. .ie7 .modal.squareinfo.yoursquare .euro-link{
  1192.     right: auto;
  1193. }
  1194. .ie7 .modal.squareinfo .euro-link{
  1195.     right: 20px;
  1196. }
  1197.  
  1198. body.loggedout .modal.squareinfo .take-square-mini{
  1199.     display:block;
  1200. }
  1201. body.loggedin .modal.squareinfo .euro-link{
  1202.     display:block;
  1203. }
  1204.  
  1205. .modal.squareinfo.yoursquare{
  1206.     .bg-image('modal-bg.png');
  1207.     width:@modal-width;
  1208.     height:@modal-height;      
  1209. }
  1210. .modal.squareinfo.yoursquare > .content{
  1211.     padding-top:30px;
  1212. }
  1213.  
  1214. .modal.squareinfo.yoursquare h1{
  1215.     font-size: 1.5em;
  1216. }
  1217.  
  1218. .modal.yoursquare .colset{ 
  1219.     margin-bottom:5px;
  1220. }
  1221. .modal.yoursquare .euro-link{
  1222.     width:370px;
  1223. }
  1224. .modal.yoursquare .euro-link .button{
  1225.     font-size:1.5em;
  1226. }
  1227. .modal.yoursquare .activity{
  1228.     padding-top:10px;
  1229. }
  1230. .modal.yoursquare .message{
  1231.     width:189px;
  1232.     padding:10px;
  1233.     font-size:1.1em;
  1234. }
  1235.  
  1236. .modal.squareinfo.yoursquare.no-loser{
  1237.     .bg-image('modal-bg.png');
  1238.     width:@modal-width;
  1239. }
  1240.  
  1241. .modal.docked {
  1242.     position: fixed;
  1243.     top: 40%;
  1244.     left: 0;
  1245.     margin: 0;
  1246.     .border-radius(20px, 20px, 0, 0);
  1247.     transition: all 0.5s;
  1248.     height: 200px;
  1249.     width: 65px;
  1250.     background-color: #d5dde4;
  1251.     background-image: none;
  1252.  
  1253.     .content {
  1254.         display: none;
  1255.     }
  1256.  
  1257.     .docked-content {
  1258.         .clearfix;
  1259.         display: block;
  1260.         height:200px;
  1261.  
  1262.         .dockbutton {
  1263.             .button;
  1264.             .vertical-gradient(@yahooaccentcolor, #a74baf);
  1265.             display: block;
  1266.             width: 180px;
  1267.             height: 40px;
  1268.             padding: 5px 0;
  1269.             overflow:visible;
  1270.             font-size: 1.8em;
  1271.             letter-spacing: 1px;
  1272.             // explicit line-height to override any modal specific line-heights
  1273.             line-height: 1.4em;
  1274.             cursor: pointer;
  1275.  
  1276.             -webkit-transform: rotate(-90deg);
  1277.             -moz-transform: rotate(-90deg);
  1278.             zoom: 1;
  1279.             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  1280.             transform: rotate(-90deg);
  1281.             margin: 75px 0 0 -58px;
  1282.  
  1283.             &:hover{
  1284.                 .dark-vertical-gradient(@yahooaccentcolor, #a74baf);
  1285.             }
  1286.         }
  1287.     }
  1288. }
  1289.  
  1290. .ie .modal.docked .docked-content .dockbutton {
  1291.     margin: 10px 0 0 5px;
  1292. }
  1293. .ie7 .modal.docked .docked-content .dockbutton{
  1294.     margin:10px 0 0 0;
  1295. }
  1296. .lt-ie9 .modal.docked .docked-content .dockbutton{
  1297.    
  1298. }
  1299.  
  1300. .docked-content {
  1301.     display: none;
  1302. }
  1303.  
  1304. /* Initial overlays */
  1305.  
  1306. .intro-overlay {
  1307.     width: 100%;
  1308.     height: 100%;
  1309.     position: absolute;
  1310.     top: 0;
  1311.     left: 0;
  1312.     .bg-image('overlay-bg.png');
  1313.     background-repeat: repeat;
  1314.  
  1315.     h2.loading {
  1316.         width: 220px;
  1317.         .bg-image('spinner.gif', no-repeat, scroll, 50%);
  1318.         font-size: 3em;
  1319.         color: white;
  1320.         position: relative;
  1321.         display: block;
  1322.         text-align: center;
  1323.         top: 40%;
  1324.         padding-top: 30px;
  1325.         margin: auto;
  1326.     }
  1327.  
  1328.     ul {
  1329.         padding-top: 150px;
  1330.         margin: auto;
  1331.         .clearfix;
  1332.         width: 915px;
  1333.  
  1334.         li {
  1335.             float: left;
  1336.             width: 305px;
  1337.             height: 370px;
  1338.             margin: 0;
  1339.             //.bg-image('modal-tiny-bg.png', no-repeat);
  1340.             .opacity(0);
  1341.             -webkit-transition: opacity 0.2s;
  1342.             -moz-transition: opacity 0.2s;
  1343.             -o-transition: opacity 0.2s;
  1344.             transition: opacity 0.2s;
  1345.             text-align: center;
  1346.  
  1347.             h2 {
  1348.                 padding: 120px 10px 10px;
  1349.                 color: white;
  1350.                 font-family: @arial;
  1351.                 text-transform: none;
  1352.             }
  1353.         }
  1354.  
  1355.         li.introduced {
  1356.             .opacity(1);
  1357.         }
  1358.  
  1359.         li.first {
  1360.             .bg-image('intro/arrow-1.png', no-repeat);
  1361.         }
  1362.  
  1363.         li.second {
  1364.             .bg-image('intro/arrow-2.png', no-repeat);
  1365.             margin-top: 100px;
  1366.         }
  1367.  
  1368.         li.third {
  1369.             margin-right: 0;
  1370.             .bg-image('intro/arrow-3.png', no-repeat);
  1371.  
  1372.             h2{
  1373.                 padding-top: 120px;
  1374.             }
  1375.         }
  1376.     }
  1377. }
  1378.  
  1379. .ie7 .intro-overlay {
  1380.     background: none;
  1381. }
  1382.  
  1383. .lt-ie9 .intro-overlay li h2{
  1384.     font-size: 1.5em;
  1385. }
  1386.  
  1387. /* ================ Footer ================ */
  1388.  
  1389. footer{
  1390.     position:fixed;
  1391.     bottom:0;
  1392.     width:100%;
  1393.     .bg-image('footer-bg.png', no-repeat, scroll, 50%, 0px);
  1394.     padding-top:26px;
  1395. }
  1396. footer .content{
  1397.     .clearfix;
  1398.     padding:10px 30px;
  1399. }
  1400.  
  1401. footer .euro-link{
  1402.     float: left;
  1403.     height: 1.6em;
  1404.     h2{
  1405.         margin:0;
  1406.     }
  1407.     a {
  1408.         color: @yahooaccentcolor;
  1409.     }
  1410. }
  1411.  
  1412. .lt-ie9 footer .euro-link{
  1413.     h2 {
  1414.         font-size: 1em;
  1415.     }
  1416. }
  1417.  
  1418. footer .tellmemore{
  1419.     cursor:pointer;
  1420.     position:absolute;
  1421.     top:30px;
  1422.     left:50%;
  1423.     width:100px;
  1424.     text-align:left;
  1425.     margin:-15px 0 0 -50px;
  1426.     color:@yahooaccentcolor !important;
  1427.     .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
  1428.     letter-spacing:-1px;
  1429.     font-size:1.4em;
  1430. }
  1431.  
  1432. .lt-ie9 footer .tellmemore{
  1433.     font-size: 1em;
  1434.     letter-spacing: normal;
  1435.     width: 120px;
  1436.     left: 49%;
  1437. }
  1438. footer .tellmemore span{
  1439.     float:right;
  1440.     margin-top:7px;
  1441.     .image-replaces-text('arrow-up-down.png', 18px, 14px);
  1442. }
  1443. footer.open .tellmemore span{
  1444.     background-position:0 -16px;
  1445. }
  1446. footer .info{
  1447.     .clearfix;
  1448.     display:none;
  1449. }
  1450.  
  1451. footer .info p{
  1452.     margin:0;
  1453.     padding:30px 2% 30px 5%;
  1454.     width:19%;
  1455.     float:left;
  1456.     .bg-image('footer-arrow.png', no-repeat, scroll, 0%, 50%);
  1457. }
  1458. footer .info p:first-child{
  1459.     background-image:none;
  1460.     padding-left:0;
  1461. }
  1462. footer .info p:last-child{
  1463.     padding-right:0;
  1464. }
  1465. .copyright{
  1466.     color:@lightgreyfontcolor;
  1467.     font-size:0.6em;
  1468.     margin: auto;
  1469.     text-align: center;
  1470.     margin-top: 15px;
  1471.     width: 500px;
  1472. }
  1473.  
  1474. footer .share h2{
  1475.     color:@yahooaccentcolor !important;
  1476.     .text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
  1477.     margin:0 15px 0 0 ;
  1478.     letter-spacing:-1px;
  1479.     font-size:1.4em;
  1480.     line-height:1em;
  1481.     float:left;
  1482. }
  1483.  
  1484. .lt-ie9 footer .share h2{
  1485.     font-weight:normal;
  1486.     font-size: 1.2em;
  1487.     letter-spacing: normal;
  1488. }
  1489. footer .share ul, footer .share li{
  1490.     line-height:1em;
  1491.     padding:0;
  1492. }
  1493. footer .twitter-share-button{
  1494.     margin:0;
  1495. }
RAW Paste Data
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
 
Top