Create a gist now

Instantly share code, notes, and snippets.

Indented CSS
/* =============================================================================
Primary styles
========================================================================== */
/* ================ Sprites ================ */
.flag-mini{
float:left;
.image-replaces-text('layered/flags-mini.png', 27px, 27px);
}
.flag-mini.england, .flag-mini.England{
background-position: 0px 0px;
}
.flag-mini.france, .flag-mini.France{
background-position: -38px -37px;
}
.flag-mini.germany, .flag-mini.Germany{
background-position: -75px -75px;
}
.flag-mini.italy, .flag-mini.Italy{
background-position: -161px -161px;
}
.flag-mini.spain, .flag-mini.Spain{
background-position: -112px -113px;
}
.social-mini{
line-height:13px;
padding-left:15px;
.bg-image('layered/social-icons-mini.png');
}
.social-mini.twitter{
color:@twitterfontcolor;
background-position:0 0;
}
.social-mini.facebook{
color:@facebookfontcolor;
background-position:-13px -13px;
}
.social-medium{
.image-replaces-text('layered/social-icons.png', 32px, 32px);
}
.social-medium.twitter{
background-position:-32px -31px;
}
.social-medium.facebook{
background-position:0 0;
}
.social-white span{
.image-replaces-text('layered/social-icons-white.png', 32px, 32px);
}
.social-white.facebook span{
background-position:0 0;
}
.social-white.twitter span{
background-position:-30px -29px;
}
.shirt{
width:147px;
height:173px;
text-align:center;
font-weight:bold;
font-size:1.2em;
line-height:1.3em;
.bg-image('layered/team-shirts.png', no-repeat, scroll);
}
.lt-ie9 .shirt{
font-weight:normal;
}
.shirt h2{
color:inherit;
line-height:1em;
font-size:1.8em;
padding-top:50px;
margin:0;
}
.lt-ie9 .shirt h2{
font-size: 1.5em;
}
.shirt strong{
display:block;
}
.shirt.france, .shirt.italy, .shirt.spain{
color:white;
}
.shirt.england, .shirt.germany{
.text-shadow(0, 0, 3px);
}
.shirt.england{
background-position: 0px 0px;
}
.shirt.france{
background-position: -292px -344px;
}
.shirt.germany{
background-position: -439px -516px;
}
.shirt.italy{
background-position: -146px -172px;
}
.shirt.spain{
background-position: -586px -688px;
}
.shirt-medium{
.image-replaces-text('layered/team-shirts-medium.png', 75px, 88px);
}
.shirt-medium.spain{
background-position: 0px 0px;
}
.shirt-medium.england{
background-position: -287px -338px;
}
.shirt-medium.france{
background-position: -217px -255px;
}
.shirt-medium.germany{
background-position: -146px -172px;
}
.shirt-medium.italy{
background-position: -75px -88px;
}
.shirt-mini{
.image-replaces-text('layered/team-shirts-mini.png', 52px, 60px);
}
.shirt-mini.england{
background-position: -102px -122px;
}
.shirt-mini.france{
background-position: 0px 0px;
}
.shirt-mini.germany{
background-position: -153px -183px;
}
.shirt-mini.italy{
background-position: -51px -61px;
}
.shirt-mini.spain{
background-position: -205px -242px;
}
.flag-event{
.image-replaces-text('layered/flags-pointers.png', 30px, 47px);
}
.flag-event.england{
background-position: 0px 0px;
}
.flag-event.italy{
background-position: -31px 0px;
}
.flag-event.germany{
background-position: -91px 0px;
}
.flag-event.spain{
background-position: -61px 0px;
}
.flag-event.france{
background-position: -122px 0px;
}
/* ================ Misc reusable styles ================ */
/* general nice buttons*/
.button{
.inline-block;
text-transform:uppercase;
font-family:@headingfont;
color:@white;
background-color:@basefontcolor;
.box-shadow-white(0, 0, 10px, 1);
.border-radius(10px,10px,10px,10px);
padding:5px 15px;
font-size:2em;
cursor:pointer;
}
.button:hover{
color:@white;
}
.lt-ie9 .button {
font-family:@ieheadingfont;
}
/* the little ribbon thing that shows your current country's place*/
.ribbon{
padding:8px 15px;
width:75px;
height:27px;
color:white;
font-weight:bold;
font-size:1.8em;
line-height:27px;
.bg-image('ribbon.png');
}
.ribbon sup{
font-size:0.5em;
}
/* display method for the details of a square takeover*/
.activity .content{
width:140px;
font-size:0.7em;
}
.activity .flag-mini.loser-country{
position: relative;
left: 8px;
top: -35px;
}
.activity img{
border:1px solid @white;
.box-shadow(2px, 2px, 2px, 0.25);
}
.activity img.won{
position:relative;
margin-top:-10px;
}
.activity img.lost{
position:relative;
margin:-20px 0 0 -5px;
}
.activity p{
margin:10px 10px 5px 0 !important;
}
.activity strong{
font-size:1.1em;
}
.activity em{
font-style:italic;
font-family:@metafont;
.opacity(0.7);
display:block;
padding:3px 0;
}
.activity .social-mini{
font-style:italic;
font-family:@metafont;
}
strong.country-loser-name{
text-transform: capitalize;
}
.social{}
.social li{
float:left;
margin-right:5px;
}
/* ================ z-indexes: all listed together to make comparison easier ================ */
@zindexLivery:10;
@zindexYourModal: 9;
@zindexMostModals: 7;
@zindexLesserModals: 4;
header, footer{
z-index:@zindexLivery;
}
.shirtstandings li{
z-index:3;
}
.sidebar{
z-index:4;
}
.activity img.won{
z-index:2;
}
.activity img.lost{
z-index:1;
}
.activity .flag-mini.loser-country{
z-index: 1;
}
.activity .flag-mini{
position: relative;
z-index: 2;
}
#flagcontainer{
z-index:0;
}
.flag-event{
z-index:2;
}
.modal{
z-index:@zindexMostModals;
}
.modal.squareinfo{
z-index:@zindexLesserModals;
}
.modalarrow{
z-index:@zindexLesserModals;
}
.modal.yoursquare{
z-index:@zindexYourModal;
}
.modalarrow.yoursquarearrow{
z-index: @zindexYourModal;
}
.intro-overlay{
z-index: @zindexLivery - 1;
}
.activity .flag-mini.loser-country{
z-index: 0;
}
.activity .flag-mini{
position: relative;
z-index: 1;
}
.activity .flag-mini.loser-country{
z-index: 0;
}
/* ================ Header ================ */
header{
min-width:980px;
.clearfix;
position:absolute;
.bg-image('header-bg.png', repeat-x, scroll, -45px, 0px);
width:100%;
height: 72px;
}
.yahoologo, header .title, header em, header h1, header h2, header ul{
float:left;
}
.yahoologo{
.image-replaces-text("yahoo-eurosport-logos.png", 204px, 55px);
margin:5px 20px 0 30px;
}
.fr .yahoologo{
.image-replaces-text("yahoo-logo.png", 100px, 55px);
}
header .title{
width:555px;
}
header em, header h1{
line-height:67px;
letter-spacing:-1px;
}
header em{
font-family:@metafont;
font-size:0.8em;
}
header h1{
font-size:2.3em;
margin:0 20px 0 15px;
}
.lt-ie9 header h1{
font-weight:normal;
font-size: 1.6em;
letter-spacing: normal;
}
header h1 a{
color:@yahooaccentcolor !important;
.text-shadow();
}
header h2{
color:@yahooaccentcolor !important;
.text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
margin:0 8px 0 0 ;
letter-spacing:-1px;
font-size:1.4em;
}
.lt-ie9 header h2{
font-weight:normal;
font-size: 1.1em;
letter-spacing: normal;
}
.share ul, .share li, .standings ul, .standings li{
float:left;
}
.standings, .share{
line-height:44px;
}
.standings{
float:left;
margin-left: 10px;
}
.standings li{
margin-right:10px;
font-weight:bold;
}
.standings .flag-mini{
margin:9px 3px 0 0;
}
header .share{
display:none; /* enabled at > 1280 res with media queries*/
}
.share{
float:right;
}
.share li{
padding-top:10px;
margin-right:10px;
line-height:1em;
}
.twitter-share-button{
//margin-top:11px;
width:90px !important;
}
.fb-like{
width:75px !important;
overflow:hidden;
}
/* ================ Content ================ */
.contentwrapper{
padding-top:0px;
}
.sidebar{
position:fixed;
right:-35px;
top:0;
width:210px;
height:100%;
transition: right 0.5s;
-webkit-transition: right 0.5s;
-moz-transition: right 0.5s;
-o-transition: right 0.5s;
&:hover{
right: 0;
}
}
.lt-ie8 .sidebar{
.bg-image('ie7-sidebar-bg.png', repeat-y);
}
.sidebar h2{
color:@backgroundcolor;
font-size:1.5em;
padding-left:15px;
padding-top:80px;
line-height:57px;
margin:-20px 0 0 0;
.bg-image('sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
}
.lt-ie8 .sidebar h2{
.bg-image('ie7-sidebar-bg-tabbed.png', no-repeat, scroll, 0, 50px);
}
.lt-ie9 .sidebar h2{
font-weight:normal;
font-size: 1.1em;
}
.sidebar h2:before{
content:" ";
float:left;
width:12px;
height:53px;
margin-right:15px;
.bg-image('arrow-right.png', no-repeat, scroll, 0, 50%);
}
.sidebar li{
width:100%;
display:none; /* js used to change display into block mode*/
.bg-image('sidebar-bg-tabbed.png');
overflow:hidden;
padding:44px 0 0 12px;
color:@white;
}
.lt-ie8 .sidebar li{
.bg-image('ie7-sidebar-bg-tabbed.png');
}
.ie7 .sidebar li{
margin-bottom:-3px;
}
.sidebar li.empty{
display:block;
.bg-image('sidebar-bg.png', repeat-y);
height:1000px;
}
.lt-ie8 .sidebar li.empty {
.bg-image('ie7-sidebar-bg-tabbed.png');
}
.sidebar h3{
margin:0;
float:left;
color:@white;
width: 35px;
}
.sidebar .activity .content{
float:left;
margin-left:5px;
}
.sidebar.minimised {
right: -160px;
&:hover{
right: -150px;
}
h2{
padding-left: 35px;
}
h2:before{
content:" ";
float:left;
width:12px;
height:53px;
margin-right:15px;
position: relative;
left: -20px;
.bg-image('arrow-left.png', no-repeat, scroll, 0, 50%);
}
}
#flagcontainer{ /* this is only an ID to speed up any javascript that needs doing inside it. Otherwise: DO NOT USE IDS!!! */
position:relative;
overflow:hidden;
width:100%; /* width set to 100% to prevent scroll bars. Exact width calculated with JS*/
height:600px;
background-color:black;
.right-edge {
position: fixed;
right:0;
height:100%;
width: 30px;
.bg-image("right-edge.png", repeat-y)
}
}
.cell{
display:inline-block;
position: absolute;
width:@gridwidth;
height:@gridwidth;
cursor:pointer;
/*background-size: 100%;*/
&:hover{
.cell-hover-glow;
}
}
.cell.user-square{
.cell-hover-glow;
}
/* the body class below is set to signify the country the user has chosen (or is assumed to have chosen)*/
/* these default flags are for <=1024*/
.cell.spain{
.flag-bg('flags/spain-dark-1250x781.jpg');
&:hover {
.flag-bg('flags/spain-1250x781.jpg');
}
}
body.spain .cell.spain{
.flag-bg('flags/spain-1250x781.jpg');
&:hover {
.flag-bg('flags/spain-dark-1250x781.jpg');
}
}
body.spain .cell.spain.user-square{
.flag-bg('flags/spain-dark-1250x781.jpg');
}
.cell.germany{
.flag-bg('flags/germany-dark-1250x781.jpg');
&:hover {
.flag-bg('flags/germany-1250x781.jpg');
}
}
body.germany .cell.germany{
.flag-bg('flags/germany-1250x781.jpg');
&:hover {
.flag-bg('flags/germany-dark-1250x781.jpg');
}
}
body.germany .cell.germany.user-square{
.flag-bg('flags/germany-dark-1250x781.jpg');
}
.cell.england{
.flag-bg('flags/england-dark-1250x781.jpg');
&:hover {
.flag-bg('flags/england-1250x781.jpg');
}
}
body.england .cell.england{
.flag-bg('flags/england-1250x781.jpg');
&:hover {
.flag-bg('flags/england-dark-1250x781.jpg');
}
}
body.england .cell.england.user-square{
.flag-bg('flags/england-dark-1250x781.jpg');
}
.cell.italy{
.flag-bg('flags/italy-dark-1250x781.jpg');
&:hover {
.flag-bg('flags/italy-1250x781.jpg');
}
}
body.italy .cell.italy{
.flag-bg('flags/italy-1250x781.jpg');
&:hover {
.flag-bg('flags/italy-dark-1250x781.jpg');
}
}
body.italy .cell.italy.user-square{
.flag-bg('flags/italy-dark-1250x781.jpg');
}
.cell.france{
.flag-bg('flags/france-dark-1250x781.jpg');
&:hover {
.flag-bg('flags/france-1250x781.jpg');
}
}
body.france .cell.france{
.flag-bg('flags/france-1250x781.jpg');
&:hover {
.flag-bg('flags/france-dark-1250x781.jpg');
}
}
body.france .cell.france.user-square{
.flag-bg('flags/france-dark-1250x781.jpg');
}
.lt-ie9 .cell.spain{
.flag-bg('flags/spain-dark-1920x1200.jpg');
&:hover {
.flag-bg('flags/spain-1920x1200.jpg');
}
}
.lt-ie9 body.spain .cell.spain{
.flag-bg('flags/spain-1920x1200.jpg');
&:hover {
.flag-bg('flags/spain-1920x1200.jpg');
}
}
.lt-ie9 body.spain .cell.spain.user-square{
.flag-bg('flags/spain-1920x1200.jpg');
}
.lt-ie9 .cell.germany{
.flag-bg('flags/germany-dark-1920x1200.jpg');
&:hover {
.flag-bg('flags/germany-1920x1200.jpg');
}
}
.lt-ie9 body.germany .cell.germany{
.flag-bg('flags/germany-1920x1200.jpg');
&:hover {
.flag-bg('flags/germany-dark-1920x1200.jpg');
}
}
.lt-ie9 body.germany .cell.germany.user-square{
.flag-bg('flags/germany-1920x1200.jpg');
}
.lt-ie9 .cell.england{
.flag-bg('flags/england-dark-1920x1200.jpg');
&:hover {
.flag-bg('flags/england-1920x1200.jpg');
}
}
.lt-ie9 body.england .cell.england{
.flag-bg('flags/england-1920x1200.jpg');
&:hover {
.flag-bg('flags/england-dark-1920x1200.jpg');
}
}
.lt-ie9 body.england .cell.england.user-square{
.flag-bg('flags/england-1920x1200.jpg');
}
.lt-ie9 .cell.italy{
.flag-bg('flags/italy-dark-1920x1200.jpg');
&:hover {
.flag-bg('flags/italy-1920x1200.jpg');
}
}
.lt-ie9 body.italy .cell.italy{
.flag-bg('flags/italy-1920x1200.jpg');
&:hover {
.flag-bg('flags/italy-dark-1920x1200.jpg');
}
}
.lt-ie9 body.italy .cell.italy.user-square{
.flag-bg('flags/italy-1920x1200.jpg');
}
.lt-ie9 .cell.france{
.flag-bg('flags/france-dark-1920x1200.jpg');
&:hover {
.flag-bg('flags/france-1920x1200.jpg');
}
}
.lt-ie9 body.france .cell.france{
.flag-bg('flags/france-1920x1200.jpg');
&:hover {
.flag-bg('flags/france-dark-1920x1200.jpg');
}
}
.lt-ie9 body.france .cell.france.user-square{
.flag-bg('flags/france-1920x1200.jpg');
}
.cell.black{
background-image: none;
background-color: black;
}
.cell.top{
border-top: 1px solid #CCC;
height:@gridwidth - 1;
}
.cell.right{
border-right: 1px solid #CCC;
}
.cell.bottom{
border-bottom: 1px solid #CCC;
}
.cell.left{
border-left: 1px solid #CCC;
width:@gridwidth - 1;
}
.cell.flagged{
box-shadow: 0 0 10px 0 white;
}
.flag-event{
margin:10px 0 0 -7px;
opacity: 0;
position:absolute;
display:block;
}
.shirtstandings{
position:absolute;
top:0;
left:0;
width:0;
height:0;
pointer-events: none;
}
.shirtstandings .shirt{
position:absolute;
left:-200px;
pointer-events: auto;
}
.modal{
position:absolute;
display:none;
}
/* Generic screen-centered modals */
.modal.centered{
.bg-image('modal-bg.png');
position:fixed;
width:@modal-width;
height:@modal-height;
margin-top:-@modal-height / 2;
margin-left:-@modal-width / 2;
top:50%;
left:50%;
text-align:center;
}
.modal > .content{
padding:40px;
}
.modal .ribbon{
margin:0 auto;
}
.modal h1{
margin:0;
.text-shadow();
letter-spacing:-1px;
color: @yahooaccentcolor;
}
.modal h1.large{
font-size:6.5em;
margin:5px 0;
line-height:0.9em;
}
.lt-ie9 .modal h1.large{
font-weight:normal;
font-size: 4em;
}
.modal h2{
font-size: 1.2em;
margin:10px 0;
color: @yahooaccentcolor;
}
.modal p{
margin:0 0 0.7em 0;
}
/* .shirts output in several modals, be warned */
.modal .shirts{
text-align:center;
}
.modal .shirts li{
text-align:center;
.inline-block;
margin:0 15px;
}
.modal .shirts a{
font-family:@headingfont;
color:@basefontcolor;
text-transform:uppercase;
text-align: center;
margin: 0 auto;
.text-shadow();
}
.lt-ie9 .modal .shirts a{
font-family: Arial, sans-serif;
font-size: 0.7em;
}
.modal .shirts.buttons .button{
.border-radius(15px,15px,15px,15px);
.box-shadow(0, 0, 3px, 1);
.vertical-gradient(#FFFFFF,#CCCCCC);
background-color:white;
font-size:1em;
max-width: 50px;
padding:5px 13px;
&:hover{
.vertical-gradient(darken(#FFFFFF, 10%), darken(#CCCCCC, 10%);
}
}
.lt-ie9 .modal .shirts.buttons .button{
max-width: none;
font-size:0.7em;
padding-left:10px;
padding-right:10px;
}
.lt-ie9 .modal .shirts .shirt-mini{
margin:0 auto;
}
.modal .shirts.buttons li{
margin:3px;
}
.modalarrow{
position:absolute;
margin-top:-2px;
margin-left:10px;
.image-replaces-text("modal-arrows.png", 14px, 26px);
}
.modalarrow.right{
background-position:-14px 0;
margin-left:-10px;
}
/* Specific modals */
.modal.home{
@modal-width: 600px;
@modal-height: 475px;
width:@modal-width;
height:@modal-height;
margin-top:-@modal-height / 2;
margin-left:-@modal-width / 2;
.bg-image('modal-bg-home.png');
}
.modal.home .content{
padding:40px 22px;
}
.lt-ie9 .modal.home .content{
padding:60px 22px;
}
.modal.home .yahoologo{
float:none;
margin:auto;
width:204px;
}
.modal.home h1{
margin:10px 0;
color: @yahooaccentcolor;
font-size: 6em;
margin: 0.1em 0 0.1em;
line-height:1em;
//.image-replaces-text('text-flag-your-support.png', 100%, 95px, 50%);
}
.lt-ie9 .modal.home h1{
font-weight:normal;
font-size: 4em;
line-height: 1em;
padding-bottom: 20px;
}
.modal.home h2{
text-transform:none;
margin:0;
width: 500px;
margin: auto;
margin-bottom:0.3em;
font-size:2em;
line-height: 1em;
letter-spacing:-1px;
color:@basefontcolor;
}
.lt-ie9 .modal.home h2{
font-weight:bold;
font-size: 1.3em;
line-height: 1.1em;
font-family: @arial;
padding-bottom: 15px;
}
.modal.home .button{
margin:15px 0 0 0;
padding-left:90px;
font-size:2em;
border:2px solid black;
.text-shadow(1px, 1px, 0px, black);
.box-shadow-white(0, 0, 20px, 1, 10px);
.vertical-gradient(@yahooaccentcolor, #a74baf);
&:hover{
.dark-vertical-gradient(@yahooaccentcolor, #a74baf);
}
}
.modal.home .button .shirt-medium{
position:absolute;
margin:-20px 0 0 -80px;
}
.modal.home p {
margin-top: 1em;
}
.home .shirt-mini{
.opacity(0.5);
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
&:hover{
.opacity(1);
}
}
.modal.support{
}
.modal.support .encouragement{
display:none;
}
.england .modal.support .take-england{
display: none;
}
.spain .modal.support .take-spain{
display: none;
}
.france .modal.support .take-france{
display: none;
}
.italy .modal.support .take-italy{
display: none;
}
.germany .modal.support .take-germany{
display: none;
}
.modal.connect .content{
padding-left:50px;
padding-right:50px;
}
.modal.connect h1{
font-size:2.6em;
line-height:1em;
margin-bottom:0;
}
.lt-ie9 .modal.connect h1{
font-weight:normal;
font-size: 2em;
}
.modal.connect li{
padding:5px 0 5px 0;
}
.modal.connect label{
font-weight:bold;
display:block;
padding:0 0 5px 0;
}
.modal.connect label span{
font-size:0.75em;
}
.modal.connect input[type="text"],
.modal.connect textarea{
padding:5px;
border:1px solid #666;
background-color:white;
width:300px;
text-align:center;
}
.modal.connect .small label{
font-size:0.8em;
}
.modal.connect .loginbutton{
cursor: pointer;
.image-replaces-text('button-connect-with-facebook.png');
margin-left: 25px;
width: 299px;
height: 40px;
line-height:40px;
}
.it .modal.connect .loginbutton{
.image-replaces-text('fb_italian.png');
margin-left: 50px;
width: 259px;
}
.es .modal.connect .loginbutton{
.image-replaces-text('fb_spanish.png');
}
.fr .modal.connect .loginbutton{
.image-replaces-text('fb_french.png');
}
.de .modal.connect .loginbutton{
margin-left:0;
.image-replaces-text('fb_german.png');
}
/* note that modal.squareinfo matches the .yoursquare elements too, so changes must be careful*/
.modal.squareinfo{
.bg-image('modal-small-bg.png');
@modal-width: 381px;
@modal-height: 269px;
width:@modal-width;
height:@modal-height;
margin-top:-30px; /* counteracts height of shadow */
}
.modal.squareinfo.right{
margin-left:15px; /* countacts width of shadow when in right configuration*/
}
.modal.squareinfo > .content{
padding-bottom:0;
padding-left:35px;
}
.modal.squareinfo h1{
color:@secondaryfontcolor;
}
.modal.squareinfo h2{
color:@secondaryfontcolor;
margin:0;
}
.modal.squareinfo .activity{
float:left;
border-right:1px solid #CCC;
.box-shadow-white(1px, 0px, 0px, 0.5);
}
.modal.squareinfo .colset{
.clearfix;
}
.modal.squareinfo .col{
float:left;
}
.modal.squareinfo .activity{
margin-top:10px;
}
.modal.squareinfo .message{
width:154px;
padding:10px 0 0 10px;
font-size:1em;
}
.modal.squareinfo ul.socialbuttons{
.clearfix;
}
.modal.squareinfo .socialbuttons li{
float:left;
margin-right:10px;
}
.modal.squareinfo .button{
font-size:1.7em
}
.fr.lt-ie9 .modal.squareinfo .button{
font-size: 1.1em;
}
.modal.squareinfo .button.facebook{
.vertical-gradient(#3B5A9A,#273D6C);
&:hover{
.dark-vertical-gradient(#3B5A9A, #273D6C);
}
}
.modal.squareinfo .button.twitter{
.vertical-gradient(#3DC7F4,#24A2CC);
&:hover{
.dark-vertical-gradient(#3DC7F4, #24A2CC);
}
}
.modal.squareinfo .button span{
float:left;
margin:2px 5px 0 0;
}
.modal.squareinfo .take-square-mini{
display:none; //toggled based on log in state (below)
position: absolute;
bottom: 45px;
font-size: 1.2em;
text-align:center;
width:135px;
.vertical-gradient(@yahooaccentcolor, #a74baf);
&:hover{
.dark-vertical-gradient(@yahooaccentcolor, #a74baf);
}
}
.modal.squareinfo .euro-link{
display:none; //toggled based on log in state (below)
text-align:center;
font-size: 1em;
margin-top: 10px;
width:155px;
position: absolute;
bottom: 45px;
border-top:1px solid #CCC;
padding-top:10px;
.button {
font-size:1.2em;
margin: 0;
.vertical-gradient(@yahooaccentcolor, #a74baf);
&:hover{
.dark-vertical-gradient(@yahooaccentcolor, #a74baf);
}
}
a {
color: white;
}
}
.lt-ie9 .modal.squareinfo .euro-link{
font-size:0.8em;
}
.ie7 .modal.squareinfo .euro-link{
right: 20px;
}
.ie7 .modal.squareinfo.yoursquare .euro-link{
right: auto;
}
.ie7 .modal.squareinfo .euro-link{
right: 20px;
}
body.loggedout .modal.squareinfo .take-square-mini{
display:block;
}
body.loggedin .modal.squareinfo .euro-link{
display:block;
}
.modal.squareinfo.yoursquare{
.bg-image('modal-bg.png');
width:@modal-width;
height:@modal-height;
}
.modal.squareinfo.yoursquare > .content{
padding-top:30px;
}
.modal.squareinfo.yoursquare h1{
font-size: 1.5em;
}
.modal.yoursquare .colset{
margin-bottom:5px;
}
.modal.yoursquare .euro-link{
width:370px;
}
.modal.yoursquare .euro-link .button{
font-size:1.5em;
}
.modal.yoursquare .activity{
padding-top:10px;
}
.modal.yoursquare .message{
width:189px;
padding:10px;
font-size:1.1em;
}
.modal.squareinfo.yoursquare.no-loser{
.bg-image('modal-bg.png');
width:@modal-width;
}
.modal.docked {
position: fixed;
top: 40%;
left: 0;
margin: 0;
.border-radius(20px, 20px, 0, 0);
transition: all 0.5s;
height: 200px;
width: 65px;
background-color: #d5dde4;
background-image: none;
.content {
display: none;
}
.docked-content {
.clearfix;
display: block;
height:200px;
.dockbutton {
.button;
.vertical-gradient(@yahooaccentcolor, #a74baf);
display: block;
width: 180px;
height: 40px;
padding: 5px 0;
overflow:visible;
font-size: 1.8em;
letter-spacing: 1px;
// explicit line-height to override any modal specific line-heights
line-height: 1.4em;
cursor: pointer;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
zoom: 1;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
margin: 75px 0 0 -58px;
&:hover{
.dark-vertical-gradient(@yahooaccentcolor, #a74baf);
}
}
}
}
.ie .modal.docked .docked-content .dockbutton {
margin: 10px 0 0 5px;
}
.ie7 .modal.docked .docked-content .dockbutton{
margin:10px 0 0 0;
}
.lt-ie9 .modal.docked .docked-content .dockbutton{
}
.docked-content {
display: none;
}
/* Initial overlays */
.intro-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.bg-image('overlay-bg.png');
background-repeat: repeat;
h2.loading {
width: 220px;
.bg-image('spinner.gif', no-repeat, scroll, 50%);
font-size: 3em;
color: white;
position: relative;
display: block;
text-align: center;
top: 40%;
padding-top: 30px;
margin: auto;
}
ul {
padding-top: 150px;
margin: auto;
.clearfix;
width: 915px;
li {
float: left;
width: 305px;
height: 370px;
margin: 0;
//.bg-image('modal-tiny-bg.png', no-repeat);
.opacity(0);
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
text-align: center;
h2 {
padding: 120px 10px 10px;
color: white;
font-family: @arial;
text-transform: none;
}
}
li.introduced {
.opacity(1);
}
li.first {
.bg-image('intro/arrow-1.png', no-repeat);
}
li.second {
.bg-image('intro/arrow-2.png', no-repeat);
margin-top: 100px;
}
li.third {
margin-right: 0;
.bg-image('intro/arrow-3.png', no-repeat);
h2{
padding-top: 120px;
}
}
}
}
.ie7 .intro-overlay {
background: none;
}
.lt-ie9 .intro-overlay li h2{
font-size: 1.5em;
}
/* ================ Footer ================ */
footer{
position:fixed;
bottom:0;
width:100%;
.bg-image('footer-bg.png', no-repeat, scroll, 50%, 0px);
padding-top:26px;
}
footer .content{
.clearfix;
padding:10px 30px;
}
footer .euro-link{
float: left;
height: 1.6em;
h2{
margin:0;
}
a {
color: @yahooaccentcolor;
}
}
.lt-ie9 footer .euro-link{
h2 {
font-size: 1em;
}
}
footer .tellmemore{
cursor:pointer;
position:absolute;
top:30px;
left:50%;
width:100px;
text-align:left;
margin:-15px 0 0 -50px;
color:@yahooaccentcolor !important;
.text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
letter-spacing:-1px;
font-size:1.4em;
}
.lt-ie9 footer .tellmemore{
font-size: 1em;
letter-spacing: normal;
width: 120px;
left: 49%;
}
footer .tellmemore span{
float:right;
margin-top:7px;
.image-replaces-text('arrow-up-down.png', 18px, 14px);
}
footer.open .tellmemore span{
background-position:0 -16px;
}
footer .info{
.clearfix;
display:none;
}
footer .info p{
margin:0;
padding:30px 2% 30px 5%;
width:19%;
float:left;
.bg-image('footer-arrow.png', no-repeat, scroll, 0%, 50%);
}
footer .info p:first-child{
background-image:none;
padding-left:0;
}
footer .info p:last-child{
padding-right:0;
}
.copyright{
color:@lightgreyfontcolor;
font-size:0.6em;
margin: auto;
text-align: center;
margin-top: 15px;
width: 500px;
}
footer .share h2{
color:@yahooaccentcolor !important;
.text-shadow(1px, 1px, 0, rgba(255,255,255,0.5));
margin:0 15px 0 0 ;
letter-spacing:-1px;
font-size:1.4em;
line-height:1em;
float:left;
}
.lt-ie9 footer .share h2{
font-weight:normal;
font-size: 1.2em;
letter-spacing: normal;
}
footer .share ul, footer .share li{
line-height:1em;
padding:0;
}
footer .twitter-share-button{
margin:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment