Created
March 30, 2012 16:08
-
-
Save aforwark/2252517 to your computer and use it in GitHub Desktop.
Rewards Widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .clearfix { | |
| *zoom: 1; | |
| } | |
| .clearfix:before, | |
| .clearfix:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| .hide-text { | |
| text-indent: 150%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .shadow-box { | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| background: #ffffff; | |
| width: auto; | |
| padding: 5px; | |
| } | |
| .font-normal { | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .font-light { | |
| font-family: "Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| body { | |
| width: 1000px; | |
| margin: 100px auto; | |
| font-family: Arial, sans-serif; | |
| position: relative; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-weight: normal; | |
| margin: 0; | |
| } | |
| ul, | |
| ol { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| a, | |
| a:visited, | |
| a:hover, | |
| a:active { | |
| text-decoration: none; | |
| } | |
| a.redeem { | |
| background: #b6c317; | |
| padding: 2px 5px; | |
| text-align: center; | |
| color: #FFF; | |
| text-transform: uppercase; | |
| text-shadow: 1px 1px #666; | |
| display: block; | |
| width: auto; | |
| margin-left: 90px; | |
| margin-top: 5px; | |
| font-size: 11px; | |
| font-weight: bold; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| } | |
| a.rewards-shop-expand { | |
| background: url('rewards-button.png') 0 0 no-repeat; | |
| width: 75px; | |
| height: 109px; | |
| position: absolute; | |
| top: -3px; | |
| left: -53px; | |
| text-indent: 150%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| display: block; | |
| } | |
| .rewards-widget-hd { | |
| margin: 0; | |
| height: 102px; | |
| overflow: hidden; | |
| *zoom: 1; | |
| background: #3a9ba3; | |
| /* Old browsers */ | |
| /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOWJhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzUyYjJiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYTliYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
| background: -moz-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); | |
| /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a9ba3), color-stop(50%, #52b2be), color-stop(100%, #3a9ba3)); | |
| /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); | |
| /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); | |
| /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); | |
| /* IE10+ */ | |
| background: linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); | |
| /* W3C */ | |
| filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3a9ba3', endColorstr='#3a9ba3', GradientType=0); | |
| /* IE6-8 */ | |
| } | |
| .rewards-widget-hd:before, | |
| .rewards-widget-hd:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .rewards-widget-hd:after { | |
| clear: both; | |
| } | |
| .rewards-widget-hd .rewards-logo { | |
| float: left; | |
| display: block; | |
| width: 248px; | |
| margin: 0 0 0 20px; | |
| } | |
| .rewards-widget-hd .rewards-logo h1 { | |
| display: block; | |
| width: 248px; | |
| height: 102px; | |
| margin: 0; | |
| text-indent: 150%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| background: url(rewards-logo.png) 0 0 no-repeat; | |
| } | |
| .rewards-widget-hd .yui3-profile .yui3-profile-content { | |
| float: left; | |
| display: block; | |
| border-left: 1px solid #99d3d6; | |
| padding: 0 20px; | |
| margin: 10px 0; | |
| height: 82px; | |
| width: 180px; | |
| color: #FFF; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .rewards-widget-hd .yui3-profile .yui3-profile-content img.gravatar { | |
| float: left; | |
| margin: 0 5px 0 0; | |
| } | |
| .rewards-widget-hd .yui3-profile .yui3-profile-content h2 { | |
| font-size: 20px; | |
| line-height: 20px; | |
| font-family: "Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| .rewards-widget-hd .yui3-carousel .yui3-carousel-content { | |
| float: left; | |
| display: block; | |
| border-left: 1px solid #99d3d6; | |
| padding: 0 10px; | |
| margin: 10px 0; | |
| height: 82px; | |
| width: 235px; | |
| color: #FFF; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .rewards-widget-hd .yui3-carousel .yui3-carousel-content h2 { | |
| font-size: 17px; | |
| line-height: 17px; | |
| text-transform: uppercase; | |
| font-family: "Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| .rewards-widget-hd .yui3-carousel .yui3-carousel-content ul { | |
| margin: 5px 0 0 0; | |
| } | |
| .rewards-widget-hd .yui3-carousel .yui3-carousel-content ul li { | |
| float: left; | |
| display: block; | |
| margin: 0 0 0 5px; | |
| } | |
| .rewards-widget-hd .yui3-prize .yui3-prize-content { | |
| float: left; | |
| display: block; | |
| border-left: 1px solid #99d3d6; | |
| padding: 0 20px; | |
| margin: 10px 0; | |
| height: 82px; | |
| width: 210px; | |
| color: #FFF; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .rewards-widget-hd .yui3-prize .yui3-prize-content img { | |
| float: left; | |
| margin: 0 5px 0 0; | |
| } | |
| .rewards-widget-hd .yui3-prize .yui3-prize-content h2 { | |
| font-size: 15px; | |
| line-height: 15px; | |
| } | |
| .rewards-widget-hd .yui3-prize .yui3-prize-content p { | |
| font-style: italic; | |
| font-family: Georgia, serif; | |
| font-size: 12px; | |
| margin: 2px 0; | |
| line-height: 15px; | |
| } | |
| .rewards-widget-hd .yui3-prize .yui3-prize-content p.credits { | |
| text-transform: uppercase; | |
| font-size: 16px; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .rewards-widget-bd { | |
| margin: 0; | |
| background: #e2e2e2; | |
| border: 1px solid #9b9ea3; | |
| border-top: none; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); | |
| *zoom: 1; | |
| height: 195px; | |
| } | |
| .rewards-widget-bd:before, | |
| .rewards-widget-bd:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .rewards-widget-bd:after { | |
| clear: both; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content { | |
| float: left; | |
| width: 320px; | |
| display: block; | |
| margin: 10px 0; | |
| padding: 0 20px; | |
| color: #3d3d3d; | |
| text-align: center; | |
| height: 175px; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content h2 { | |
| font-size: 22px; | |
| line-height: 22px; | |
| text-transform: uppercase; | |
| font-family: "Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content ul { | |
| margin: 5px auto; | |
| width: 300px; | |
| *zoom: 1; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content ul:before, | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content ul:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content ul:after { | |
| clear: both; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content ul li { | |
| float: left; | |
| margin: 0 0 0 10px; | |
| text-align: center; | |
| } | |
| .rewards-widget-bd .yui3-carousel .yui3-carousel-content ul li p { | |
| margin: 3px 0; | |
| font-size: 12px; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content { | |
| margin: 10px 0; | |
| padding: 25px 20px 0 20px; | |
| float: left; | |
| width: 340px; | |
| border-left: 1px solid #8f8f8f; | |
| position: relative; | |
| color: #3d3d3d; | |
| height: 150px; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .newest-prize { | |
| display: block; | |
| text-indent: 150%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 20px; | |
| right: 25px; | |
| background: url('newest-prize.png') 0 0 no-repeat; | |
| width: 79px; | |
| height: 77px; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box { | |
| width: 280px; | |
| *zoom: 1; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box:before, | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box:after { | |
| clear: both; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content img { | |
| float: right; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content h2 { | |
| font-size: 14px; | |
| line-height: 18px; | |
| margin-bottom: 15px; | |
| font-family: "Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content h2 strong { | |
| font-size: 16px; | |
| font-family: "Open Sans", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content p { | |
| margin: 0; | |
| padding: 0; | |
| font-size: 11px; | |
| } | |
| .rewards-widget-bd .yui3-recent-activity .yui3-recent-activity-content { | |
| margin: 10px 0; | |
| padding: 0 20px; | |
| float: left; | |
| width: 215px; | |
| height: 175px; | |
| border-left: 1px solid #8f8f8f; | |
| font-family: "Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| .rewards-widget-bd .yui3-recent-activity .yui3-recent-activity-content ul li { | |
| background: #FFF; | |
| padding: 5px 10px; | |
| margin: 5px 0; | |
| } | |
| .rewards-widget-bd .yui3-recent-activity .yui3-recent-activity-content ul li a { | |
| color: #3d3d3d; | |
| font-size: 15px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Rewards Widget</title> | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <link rel="stylesheet" type="text/css" href="rewards-widget.css" /> | |
| </head> | |
| <body> | |
| <a href="#" class="rewards-shop-expand">Rewards Shop</a> | |
| <div class="rewards-widget-hd"> | |
| <div class="rewards-logo"> | |
| <h1>SheKnows Rewards Shop</h1> | |
| </div> | |
| <div class="yui3-profile"> | |
| <div class="yui3-profile-content"> | |
| <img class="gravatar" src="http://www.placekitten.com/85/85" /> | |
| <h2>Benjamin</h2> | |
| <strong>525 Credits</strong> | |
| <a href="#" class="redeem">Redeem Your Points</a> | |
| </div> | |
| </div> | |
| <div class="yui3-carousel"> | |
| <div class="yui3-carousel-content"> | |
| <h2>Eligible For These Prizes</h2> | |
| <ul class="carousel"> | |
| <li><img src="http://www.placekitten.com/65/65" alt="Kitteh" /></li> | |
| <li><img src="http://www.placekitten.com/65/65" alt="Kitteh" /></li> | |
| <li><img src="http://www.placekitten.com/65/65" alt="Kitteh" /></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="yui3-prize"> | |
| <div class="yui3-prize-content"> | |
| <img src="http://www.placekitten.com/85/85" /> | |
| <h2>Earn 45 more credits to get:</h2> | |
| <p>Bath and Body Works vanilla sugar gift set</p> | |
| <p class="credits">570 Credits</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rewards-widget-bd"> | |
| <div class="yui3-carousel"> | |
| <div class="yui3-carousel-content"> | |
| <h2>Eligible For These Prizes</h2> | |
| <ul class="carousel"> | |
| <li class="shadow-box"> | |
| <img src="http://www.placekitten.com/65/80" /> | |
| <p>The Rebound</p> | |
| <p>200 Credits</p> | |
| </li> | |
| <li class="shadow-box"> | |
| <img src="http://www.placekitten.com/65/80" /> | |
| <p>The Rebound</p> | |
| <p>200 Credits</p> | |
| </li> | |
| <li class="shadow-box"> | |
| <img src="http://www.placekitten.com/65/80" /> | |
| <p>The Rebound</p> | |
| <p>200 Credits</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="yui3-newest-prize"> | |
| <div class="yui3-newest-prize-content"> | |
| <span class="newest-prize">Newest Prize</span> | |
| <div class="shadow-box"> | |
| <img src="http://www.placekitten.com/190/125" /> | |
| <h2>You are only <strong>45 Credits</strong> away from:</h2> | |
| <p>Juicy perfume gift set</p> | |
| <p>570 Credits</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="yui3-recent-activity"> | |
| <div class="yui3-recent-activity-content"> | |
| <ul class="carousel"> | |
| <li><a href="#">You just earned 20pts for commenting</a></li> | |
| <li><a href="#">You just earned 8pts for finding a keyword</a></li> | |
| <li><a href="#">Like us on Facebook to earn 15 points</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.5)) { | |
| box-shadow:@shadow; | |
| -webkit-box-shadow:@shadow; | |
| -moz-box-shadow:@shadow; | |
| -o-box-shadow:@shadow; | |
| } | |
| .clearfix { | |
| *zoom: 1; | |
| &:before, | |
| &:after { | |
| display: table; | |
| content: ""; | |
| } | |
| &:after { | |
| clear: both; | |
| } | |
| } | |
| .hide-text { | |
| text-indent:150%; | |
| white-space:nowrap; | |
| overflow:hidden; | |
| } | |
| .shadow-box { | |
| .box-shadow(); | |
| background:#ffffff; | |
| width:auto; | |
| padding:5px; | |
| } | |
| .font-normal { | |
| font-family:"Open Sans", Arial, sans-serif; | |
| font-weight:normal; | |
| } | |
| .font-light { | |
| font-family:"Open Sans Light", "Open Sans", Arial, sans-serif; | |
| font-weight:300; | |
| } | |
| body { | |
| width:1000px; | |
| margin:100px auto; | |
| font-family:Arial, sans-serif; | |
| position:relative; | |
| } | |
| h1, h2, h3, h4, h5, h6 { font-weight:normal; margin:0; } | |
| ul, ol { list-style: none; margin:0; padding:0; } | |
| a, a:visited, a:hover, a:active { text-decoration:none; } | |
| a.redeem { | |
| background:#b6c317; | |
| padding:2px 5px; | |
| text-align:center; | |
| color:#FFF; | |
| text-transform:uppercase; | |
| text-shadow:1px 1px #666; | |
| display:block; | |
| width:auto; | |
| margin-left:90px; | |
| margin-top:5px; | |
| font-size:11px; | |
| font-weight:bold; | |
| .box-shadow(); | |
| } | |
| a.rewards-shop-expand { | |
| background:url('rewards-button.png') 0 0 no-repeat; | |
| width:75px; | |
| height:109px; | |
| position:absolute; | |
| top:-3px; | |
| left:-53px; | |
| .hide-text; | |
| display:block; | |
| } | |
| .rewards-widget-hd { | |
| margin:0; | |
| height:102px; | |
| overflow:hidden; | |
| .clearfix; | |
| background: #3a9ba3; /* Old browsers */ | |
| /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOWJhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzUyYjJiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYTliYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
| background: -moz-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a9ba3), color-stop(50%,#52b2be), color-stop(100%,#3a9ba3)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* IE10+ */ | |
| background: linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9ba3', endColorstr='#3a9ba3',GradientType=0 ); /* IE6-8 */ | |
| .rewards-logo { | |
| float:left; | |
| display:block; | |
| width:248px; | |
| margin:0 0 0 20px; | |
| h1 { | |
| display:block; | |
| width:248px; | |
| height:102px; | |
| margin:0; | |
| .hide-text; | |
| background:url(rewards-logo.png) 0 0 no-repeat; | |
| } | |
| } | |
| .yui3-profile .yui3-profile-content { | |
| float:left; | |
| display:block; | |
| border-left:1px solid #99d3d6; | |
| padding:0 20px; | |
| margin:10px 0; | |
| height:82px; | |
| width:180px; | |
| color:#FFF; | |
| .font-normal; | |
| img.gravatar { float:left; margin:0 5px 0 0; } | |
| h2 { | |
| font-size:20px; | |
| line-height:20px; | |
| .font-light; | |
| } | |
| } | |
| .yui3-carousel .yui3-carousel-content { | |
| float:left; | |
| display:block; | |
| border-left:1px solid #99d3d6; | |
| padding:0 10px; | |
| margin:10px 0; | |
| height:82px; | |
| width:235px; | |
| color:#FFF; | |
| .font-normal; | |
| h2 { | |
| font-size:17px; | |
| line-height:17px; | |
| text-transform:uppercase; | |
| .font-light; | |
| } | |
| ul { | |
| margin:5px 0 0 0; | |
| li { | |
| float:left; | |
| display:block; | |
| margin:0 0 0 5px; | |
| } | |
| } | |
| } | |
| .yui3-prize .yui3-prize-content { | |
| float:left; | |
| display:block; | |
| border-left:1px solid #99d3d6; | |
| padding:0 20px; | |
| margin:10px 0; | |
| height:82px; | |
| width:210px; | |
| color:#FFF; | |
| .font-normal; | |
| img { float:left; margin:0 5px 0 0; } | |
| h2 { | |
| font-size:15px; | |
| line-height:15px; | |
| } | |
| p { | |
| font-style:italic; | |
| font-family:Georgia, serif; | |
| font-size:12px; | |
| margin:2px 0; | |
| line-height:15px; | |
| &.credits { text-transform:uppercase; font-size:16px; .font-normal; font-style:normal; } | |
| } | |
| } | |
| } | |
| .rewards-widget-bd { | |
| margin:0; | |
| background:#e2e2e2; | |
| border:1px solid #9b9ea3; | |
| border-top:none; | |
| .box-shadow(); | |
| .clearfix; | |
| height:195px; | |
| .yui3-carousel .yui3-carousel-content { | |
| float:left; | |
| width:320px; | |
| display:block; | |
| margin:10px 0; | |
| padding:0 20px; | |
| color:#3d3d3d; | |
| text-align:center; | |
| height:175px; | |
| .font-normal; | |
| h2 { | |
| font-size:22px; | |
| line-height:22px; | |
| text-transform:uppercase; | |
| .font-light; | |
| } | |
| ul { | |
| margin:5px auto; | |
| width:300px; | |
| .clearfix; | |
| li { | |
| float:left; | |
| margin:0 0 0 10px; | |
| text-align:center; | |
| p { | |
| margin:3px 0; | |
| font-size:12px; | |
| } | |
| } | |
| } | |
| } | |
| .yui3-newest-prize .yui3-newest-prize-content { | |
| margin:10px 0; | |
| padding:25px 20px 0 20px; | |
| float:left; | |
| width:340px; | |
| border-left:1px solid #8f8f8f; | |
| position:relative; | |
| color:#3d3d3d; | |
| height:150px; | |
| .font-normal; | |
| .newest-prize { | |
| display:block; | |
| .hide-text(); | |
| position:absolute; | |
| top:20px; | |
| right:25px; | |
| background:url('newest-prize.png') 0 0 no-repeat; | |
| width:79px; | |
| height:77px; | |
| } | |
| .shadow-box { width:280px; .clearfix; } | |
| img { float:right; } | |
| h2 { | |
| font-size:14px; | |
| line-height:18px; | |
| margin-bottom:15px; | |
| .font-light; | |
| strong { font-size:16px; .font-normal; } | |
| } | |
| p { | |
| margin:0; | |
| padding:0; | |
| font-size:11px; | |
| } | |
| } | |
| .yui3-recent-activity .yui3-recent-activity-content { | |
| margin:10px 0; | |
| padding:0 20px; | |
| float:left; | |
| width:215px; | |
| height:175px; | |
| border-left:1px solid #8f8f8f; | |
| .font-light; | |
| ul li { | |
| background:#FFF; | |
| padding:5px 10px; | |
| margin:5px 0; | |
| a { | |
| color:#3d3d3d; | |
| font-size:15px; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment