firstRun.css

/*
 * This file is part of Adblock Plus <http://adblockplus.org/>,
 * Copyright (C) 2006-2013 Eyeo GmbH
 *
 * Adblock Plus is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Adblock Plus is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
 */

@font-face {
  font-family: 'CreteRound';
  font-style: normal;
  src: url(fonts/CreteRound-Regular.otf);
  src: local ('Ø'),
  /*local ('Ø') forces using no local font called CreteRound*/
  url(fonts/CreteRound-Regular.otf) format('otf');
}

@font-face {
  font-family: 'CreteRound';
  font-style: italic;
  src: url(fonts/CreteRound-Italic.otf);
  src: local ('Ø'),
  /*local ('Ø') forces using no local font called CreteRound*/
  url(fonts/CreteRound-Italic.otf) format('otf');
}

body
{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 140%;
  color: #7f776b;
  background-color: #f8f6f2;
  background-image: url(background-main.png);
  margin: 0;
  padding: 0;
}

a, a:link, a:visited
{
  color: #5a84b3;
  text-decoration: underline;
}

a:hover
{
  text-decoration: none;
}

button
{
  cursor: pointer;
}

ul
{
  margin: 0;
  padding: 0;
}

li
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

header
{
  background-image: url(background.png);
  background-repeat: repeat-x;
  width: 100%;
  padding: 40px 0 0 0;
}

header h1
{
  font-size: 24px;
  font-weight: normal;
  color: #57ab5b;
  text-align: center;
  margin: 21px auto;
  padding: 16px 0 14px 0;
  border: 1px #57ab5b;
  border-style: dashed none;
  /* border parallel fix - 957px is the value
   * closest to 960px(page width) which makes
   * the dashed border parallel
   */
  max-width: 957px;
}

h1,h2,h3
{
 font-family: CreteRound, Helvetica, Arial, sans-serif;
}

h2
{
  font-size: 26px;
  font-weight: lighter;
  color: #968d81;
  line-height: 28px;
  text-align: center;
  margin: 0;
  padding: 0;
}

h3
{
  font-size: 22px;
  color: #7F776B;
  font-weight: normal;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 24px;
}

h4
{
  font-size: 15px;
  color: #7f776b;
  font-weight: normal;
  text-align: center;
  margin: 0;
  padding: 0;
}

section
{
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 760px;
  background-image: url(background.png);
  padding: 40px 100px;
}

section > p
{
  margin: 15px 0 0 0;
}

#logo
{
  margin: 0 auto;
  height: 100px;
  width: 99px;
  display: block;
  background-image: url(abp-icon-big.png);
  background-repeat: no-repeat;
}

#can-do-more
{
  max-width: 960px;
  padding: 40px 0px 0px 0px;
}

#can-do-more > h2
{
  margin: 0 100px;
}

.fade
{
  opacity: 0;
}

.hide
{
  display: none;
}

#can-do-more-overview
{
  opacity: 1;
  max-height: 10000px;
  max-width: 760px;
  margin: 30px 100px 0 100px;
  font-size: 0px;
  /* hides appearing spacings because of
   * using display: inline-block*/
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
}

#can-do-more.expanded > #can-do-more-overview, #can-do-more.expanded > #can-do-more-overview li, #can-do-more.expanded > #can-do-more-overview div, #can-do-more.expanded > #can-do-more-overview h4
{
  opacity: 0;
  max-height: 0px;
  width: 0;
  margin: 0;
  padding: 0;
  transition: none;
  -webkit-transition: none;
}

#can-do-more-overview > li:hover
{
  background-image: url("background-main.png");
  text-decoration: none;
}

#can-do-more-overview > li
{
  width: 230px;
  height: 115px;
  display: inline-block;
  border-right: 1px dashed #c7c6c2;
  padding: 20px 10px 0 10px;
  vertical-align: top;
  text-decoration: underline;
  -webkit-backface-visibility: hidden;
  /* hides the 1px movement chrome bug
   * which appears while transition.
   */
}

#can-do-more-overview > li > div
{
  width: 59px;
  height: 59px;
  display: block;
  margin: 0 auto;
}

#can-do-more-overview > li > h4
{
  margin: 15px 0 0 0;
}

#can-do-more #feature-first
{
  border-left: 1px dashed #c7c6c2;
}

.feature-malware-image
{
  background-image: url(features/malware.png);
  background-repeat: no-repeat;
}

.feature-social-image
{
  background-image: url(features/social.png);
  background-repeat: no-repeat;
}

.feature-tracking-image
{
  background-image: url(features/tracking.png);
  background-repeat: no-repeat;
}

#can-do-more-expanded
{
  opacity: 0;
  max-height: 0;
}

#can-do-more.expanded > #can-do-more-expanded
{
  opacity: 1;
  max-height: 10000px;
  margin: 30px 100px 0 100px;
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}

#features, .feature:not([hidden]), .feature-image, .feature-description, .feature-description, .feature-description-textblock, .feature-description-textblock > span, .feature-image
{
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  transition: none;
  -webkit-transition: none;
}


#can-do-more.expanded #features,#can-do-more.expanded .feature:not([hidden]),#can-do-more.expanded .feature-image,#can-do-more.expanded .feature-description,#can-do-more.expanded .feature-description,#can-do-more.expanded .feature-description-textblock,#can-do-more.expanded .feature-description-textblock > span,#can-do-more.expanded .feature-image
{
  width: auto;
  height: auto;
  margin: auto;
  padding: auto;
  transition-property: all;
  -webkit-transition-property: all;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
}

#can-do-more.expanded #features
{
  border-spacing: 10px;
  margin: 0px;
  padding: 0px;
}

#can-do-more.expanded .feature:not([hidden])
{
  display: block;
  list-style-type: none;
  padding: 30px 0;
  padding-bottom: 20px;
  border-top: 1px dashed #c0bebb;
}

#can-do-more.expanded .feature-image, #can-do-more.expanded .feature-description
{
  display: inline-block;
  *display: inline; /* IE6 inline-block fix */
  *zoom: 1;
  vertical-align: top;
}

#can-do-more.expanded .feature-description
{
  margin: 0px 0px 0 20px;
  width: 625px;
  max-width: 85%;
}

#can-do-more.expanded .feature-description-textblock
{
  width: 480px;
  max-width: 100%;
  margin: 0 40px 0 0;
  display: inline-block;
}

#can-do-more.expanded .feature-description-textblock > span
{
  margin: 15px 0 0 0;
}

#can-do-more.expanded .feature-image
{
  width: 59px;
  height: 59px;
  margin: 8px 0 10px 20px;
}

#activate-features
{
  width: 100%;
  background-image: url("background-candomore.png");
  margin: 30px 0 0 0;
  padding: 14px 0 14px 0;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

#activate-features-label
{
  display: inline-block;
  width: 86%;
  color: #fff;
  font-size: 22px;
  text-align: center;
  font-style: italic;
  font-family: CreteRound, Helvetica, Arial, sans-serif;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

#can-do-more.expanded #label-show-expanded
{
  display: none;
}

#can-do-more.expanded #label-show-overview
{
  display: block;
}

#label-show-expanded
{
  display: block;
}

#label-show-overview
{
  display: none;
}

#activate-features:hover a
{
  color: #1f6822;
  text-decoration: none;
}

#can-do-more.expanded .arrow
{
  background-image: url("arrow-up.png");
}

.arrow
{
  width: 29px;
  height: 22px;
  vertical-align: bottom;
  display: inline-block;
  background-image: url("arrow-down.png");
}

#share
{
  background-image: url(background-share.png);
  padding: 50px 100px 40px 100px;
  max-width: 760px;
  text-align: center;
  font-family: CreteRound, Helvetica, Arial, sans-serif;
}

#share h2
{
  color: #fff;
  margin: 0 0 30px 0;
}

#share h2 > a
{
  color: #fff;
}

#share h2 > a:hover
{
  color: #2e5075;
}

#share span
{
  color: #bed1e6;
  text-align: center;
  line-height: 34px;
  font-size: 22px;
  display: block;
}

#donate:hover, .share-buttons a:hover
{
  box-shadow: 0px 0px 0px 2px #8ca7c4;
  border-radius: 30px;
}

#donate-block span, #share-block span
{
  margin: 13px 20px 10px 20px;
}

#donate-block, #share-block
{
  min-width: 250px;
  display: inline-block;
  vertical-align: top;
  padding: 20px 0 0 0;
}

#donate-block
{
  border: 1px dashed #37506d;
  border-style: none dashed;
  width: 50%;
}

#share-block
{
  border-right: 1px dashed #37506d;
  width: 49%;
}

.share-buttons
{
  margin: 6px 0 0 0;
  cursor: pointer;
  vertical-align: top;
  /* because inline block creates
   * space if not captured with
   * font-size and line-height 0px
   */
  font-size: 0px;
  line-height: 0px;
}

.share-buttons > a
{
  width: 50px;
  height: 50px;
  margin: 0 8px;
  text-decoration: none;
  display: inline-block;
}

#share-general,
:root[lang^="zh-"] #share-chinese
{
  display: block;
}

:root[lang^="zh-"] #share-general,
#share-chinese
{
  display: none;
}

#share-chinese > a
{
  border-bottom: 2px solid transparent;
}

#share-chinese > a:hover
{
  box-shadow: none;
  border-radius: 0;
  border-bottom: 2px solid #8CA7C4;
}

#share-facebook
{
  background-image: url(social/facebook.png);
  background-repeat: no-repeat;
}

#share-twitter
{
  background-image: url(social/twitter.png);
  background-repeat: no-repeat;
}

#share-gplus
{
  background-image: url(social/googleplus.png);
  background-repeat: no-repeat;
}

#share-renren
{
  background-image: url(social/renren.png);
  background-repeat: no-repeat;
}

#share-weibo
{
  background-image: url(social/weibo.png);
  background-repeat: no-repeat;
}

#dataCorruptionWarning
{
  font-size: 160%;
  border: 3px dashed red;
  text-align: center;
}

#social ul
{
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

#social:hover h1
{
  opacity: 0;
}

#social ul:hover li {
  opacity: 0.3;
}

#social ul li
{
  display: inline-block;
  margin: 0px 5px;
  -webkit-transition: opacity .5s ease, bottom .3s ease;
  transition: opacity .5s ease, bottom .3s ease;
  position: relative;
  bottom: -30px;
}

#social ul li:hover
{
  opacity: 1.0;
  bottom: 0px;
}

.share-button
{
  display: inline-block;
  width: 82px;
  height: 82px;
}

#glass-pane, #share-popup
{
  visibility: hidden;
  opacity: 0;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
}

#glass-pane
{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
  z-index: 101;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

#share-popup
{
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#glass-pane.visible, #share-popup.visible
{
  visibility: visible;
  opacity: 1;
}

#share-popup.visible
{
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
}

.toggle
{
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 22px;
  margin: 32px 0px 7px 0px;
  border-radius: 9999px;
  border: 1px solid #999;
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.toggle:hover
{
  box-shadow: 0px 0px 3px 0px #968d81;
}

.toggle:active
{
  cursor: wait;
}

.toggle-on, .toggle-off
{
  min-width: 42px;
  height: 100%;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 23px;
  border-radius: 9999px;
}

.toggle-on
{
  padding: 0px 30px 0px 10px;
  color: rgba(255,255,255, 0.8);
  text-shadow: 1px 1px rgba(0,0,0,0.2);
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
  background: rgb(69,163,31);
}

.toggle-off
{
  padding: 0px 10px 0px 30px;
  color: rgba(0,0,0,0.6);
  text-shadow: 1px 1px rgba(255,255,255,0.2);
  background: #cfcfcf;
  background: -moz-linear-gradient(top,  #cfcfcf 0%, #f5f5f5 100%);
  background: -webkit-linear-gradient(top,  #cfcfcf 0%,#f5f5f5 100%);
  background: linear-gradient(to bottom,  #cfcfcf 0%,#f5f5f5 100%);
}

.toggle-blob
{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 22px;
  border-radius: 50px;
  background: #cfcfcf;
  background: -moz-linear-gradient(bottom,  #cfcfcf 0%, #f5f5f5 100%);
  background: -webkit-linear-gradient(bottom,  #cfcfcf 0%,#f5f5f5 100%);
  background: linear-gradient(to top,  #cfcfcf 0%,#f5f5f5 100%);
  box-shadow: 1px 1px 2px #888;
}

.off .toggle-on
{
  margin-top: -22px;
}

.off .toggle-blob
{
  left: 0px;
  right: auto;
}

#donate
{
  height: 21px;
  display: inline-block;
  margin: 15px 0px 2px 0px;
  font-size: 16px;
  color: #003366;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 18px;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid #FF9933;
  overflow: hidden;
  font-family: arial, sans-serif;
  background-image: url(donate.png);
  background-repeat: repeat-x;
}

footer
{
  margin: 0 auto 30px;
  max-width: 960px;
  text-align: center;
}