/* @group Global style */

/* @group Self Clear */

section, .group, .wrapper {   /* IE fix */
  *min-height: 1px;
  _height: 1%;
}
section:after, .group:after, .wrapper:after {
  content: '...';
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

/* @end */

/* @group Buttons Set */
.button {
  height: 2em;
  background-color: white;
  color: black;
  line-height: 2em;
  text-decoration: none;
  text-shadow: 0.2em 0.2em 0.2em rgba(255,255,255,0.5);
  padding: 0 1.5em;
  display: inline-block;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 -1em 2em rgba(0,0,0,0.5);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 -1em 2em rgba(0,0,0,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 -1em 2em rgba(0,0,0,0.5);
  -webkit-border-radius: 1em;  
  -moz-border-radius: 1em;
  border-radius: 1em;
}
.button:hover {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 -1em 2em rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 -1em 2em rgba(0,0,0,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 -1em 2em rgba(0,0,0,0.4);
}
.button:active {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 1.5em 3em rgba(0,0,0,0.6);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
  			inset 0 1.5em 3em rgba(0,0,0,0.6);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3), 
			inset 0 1.5em 3em rgba(0,0,0,0.6);
}

/* @group Color Schemes */

.button.red {
  background-color: crimson;
  color: white;
  text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
.button.yellow {
  background-color: #e2df12;

  color: white;
  text-shadow: 1px 1px 1px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 -1em 2em rgba(234,134,38,0.9);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 -1em 2em rgba(234,134,38,0.9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 -1em 2em rgba(234,134,38,0.9);
}
.button.yellow:hover {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 -1em 2em rgba(234,134,38,0.7);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 -1em 2em rgba(234,134,38,0.7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 -1em 2em rgba(234,134,38,0.7);
}
.button.yellow:active {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 1.5em 3em rgba(234,134,38,0.9);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 1.5em 3em rgba(234,134,38,0.9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6),
  			inset 0 1px 2px rgba(255,255,255,0.3),
  			inset 0 1.5em 3em rgba(234,134,38,0.9);
}
.button.disabled {
  background-color: gray;
  color: #ccc;
  text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.3);
}
.button.disabled:before {
  content: 'Sorry, temporarily not available.';
  background: #dca100;
  color: #fff;
  border: 0.2em solid;
  -webkit-border-radius: 0.7em;
  -moz-border-radius: 0.7em;
  border-radius: 0.7em;
  padding: 0 0.5em;  
  display: none;
  position: absolute;
  top: -2em;
  left: -1em;
}
.button.disabled:hover:before {
  opacity: 0.85;
  display: block;
}
:lang(zh) .button.disabled:before {
  content: '抱歉，暫時無法使用。';
}

/* @end */
/*
.button:after {
  vertical-align: text-top;
  padding-left: 0.5em;
}
*/

/* @end */

/* @group Typography */

@font-face {
  font-family: Junction;
  src: url('../fonts/Junction.otf');
}
@font-face {
  font-family: HiraginoSansGBTest;
  src: local('HiraginoSansGB-W3');
  -moz-font-feature-settings: "cpct=1";
  -webkit-font-feature-settings: "cpct=1";
  font-feature-settings: "cpct=1";
}

body { 
  font: 16px/1.5 "Lucida Grande", Helvetica, Arial, HiraginoSansGBTest, HiraKakuPro-W3, "Hiragino Kaku Gothic Pro", STHeitiTC-Light, "黑體-繁", "LiHei Pro", "儷黑 Pro", "Droid Sans Fallback", 微軟正黑體, "Arial Unicode MS", SimHei, sans-serif;
}

#pageHeader hgroup, #footerPromo a {
  font-family: Junction, "Lucida Sans", Helvetica, Arial, HiraKakuPro-W3, "Hiragino Kaku Gothic Pro", STHeitiTC-Light, "黑體-繁", "LiHei Pro", "儷黑 Pro", "Droid Sans Fallback", 微軟正黑體, "Arial Unicode MS", SimHei, sans-serif;
/*  text-rendering: optimizeLegibility; */
  -webkit-font-smoothing: subpixel-antialiased;
}

h1, h2, h3, h4, h5, h6, strong, em {
  color: #111;
}

h3 {
  font-size: 120%;
  line-height: 1.25;
  margin-bottom: 1.25em;
}

p {
  margin-bottom: 1.5em;
}

a {
  color: #0c4fc0;
  -webkit-transition: color 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out;
}
a:hover {
  color: #009ffe;
}

small {
  font-size: 85%;
}

code, kbd {
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.2);
  padding: 0.2em 0.5em;
  box-shadow: 1px 1px 1px rgba(255,255,255,.5);
  font-family: monospace;
}

ul,ol {
  padding-left: 2.5em;
  margin-bottom: 1.5em;
}

dl dt {
  margin-top: 1.5em;
}
dl dt:first-child {
  margin-top: 0;
}
dl dd {
  margin-left: 2em;
}

/* @end */

body {
  background: #dedede;
  color: #444;
}

article, aside, footer, header, hgroup, nav, section {
  display: block;
}

ul { list-style: disc; }
ol { list-style: decimal; }

ul.linkRoll {
  padding: 0 !important;
}
ul.linkRoll li {
  float: left; 
  list-style: none;
}
ul.linkRoll li:before {
  content: '|';
  padding: 0 1em;
}
ul.linkRoll li:first-child:before {
  content: '';
  padding: 0;
}
ul.linkRoll li.inactive a {
  color: gray;
  text-decoration: none;
}
ul.linkRoll li.inactive a:hover {
  text-decoration: underline;
}

/* @end */

#container {
  width: 1000px !important;
  position: relative;
}

nav#localeSwitch {
  height: 1.5em;
  padding-top: 1em;
  padding-right: 0.7em;
}
nav#localeSwitch ul {
  font-size: 85%;
  margin-bottom: 0;
  float: right;
}
nav#localeSwitch h4 {
  display: none;
}

#container .paperWrapper {
  width: 998px;
  background: white;
  border: 1px solid rgba(0,0,0,.25);
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);  
  -webkit-border-top-left-radius: 1em;
  -webkit-border-top-right-radius: 1em;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}
#container .paperWrapper .grid_16 {
  padding: 0 20px;
}

#pageHeader {
  height: 275px;
  background: url('../images/bkgSiteHeader.jpg') center center no-repeat;
  margin-bottom: 2em;
  -webkit-border-top-left-radius: 1em;
  -webkit-border-top-right-radius: 1em;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}
#pageHeader hgroup {
  text-shadow: 0 3px 3px rgba(0,0,0,.75);
}
#pageHeader h1 {
  color: white;
  font-size: 400%;
  line-height: 1;
  margin-top: 1.8em;
  margin-bottom: 0.2em;
}
#pageHeader h2 {
  color: white;
  font-size: 140%;
  font-weight: normal;
  text-indent: 0.1em;
}

#powered {
  width: 15em;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-border-top-left-radius: 1em;
  -moz-border-radius-topleft: 1em;
  border-top-left-radius: 1em;
}
#powered a {
  background: orange;
  color: white;
  color: rgba(255,255,255,.9);
  text-align: center;
  text-decoration: none;
  line-height: 2;
  display: block;
  -webkit-transform: rotate(-25deg) translateX(-3em);
  -moz-transform: rotate(-25deg) translateX(-3em);
  -o-transform: rotate(-25deg) translateX(-3em);
  -ms-transform: rotate(-25deg) translateX(-3em);
  transform: rotate(-25deg) translateX(-3em);
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.3),
  					  inset 0 -0.2em 0.5em rgba(0,0,0,0.2);
  -moz-box-shadow: 0 3px 5px rgba(0,0,0,.3),
  					  inset 0 -0.2em 0.5em rgba(0,0,0,0.2);
  box-shadow: 0 3px 5px rgba(0,0,0,.3),
  					  inset 0 -0.2em 0.5em rgba(0,0,0,0.2);
}

aside#headerPromo {
  width: 240px;
  background-color: #a2bee4;
  background-color: rgba(255,255,255,.6);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,.05)) );
  background-image: -moz-linear-gradient(0% 100% 90deg, rgba(0,0,0,0), rgba(0,0,0,.05) 50%, rgba(0,0,0,0) );
  padding: 1.25em;
  position: absolute;
  top: 4em; /* top: 6em; */
  right: 90px;
  border: 1px solid rgba(255,255,255,.7);
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}
aside#headerPromo h4 {
  color: rgba(0,0,0,.9);
}
aside#headerPromo small {
  display: block;
  margin-bottom: 0.76em;
}

section article p {
  font-size: 85%;
}
section#features img,
section#preference img {
  -webkit-border-radius: 0.5em;
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.75);
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,.75);
  box-shadow: 0 0 3px 1px rgba(0,0,0,.75);
}

/* @group New/Update Badge */

section .new:after,
section .updated:after {
  content: 'New';
  background: orange;
  color: white;
  font-size: 72.25%;
  margin-left: 0.3em;
  margin-top: 0.3em;
  padding: 0.2em 0.5em;
  -webkit-border-radius: 0.5em;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  -moz-border-radius: 0.5em;
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  border-radius: 0.5em;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  position: absolute;
}
:lang(zh) section .new:after {
  content: '全新';
}
section .updated:after {
  content: 'Updated';
  background: crimson;
  color: white;
}
:lang(zh) section .updated:after {
  content: '更新';
}

/* @end */

#whatis img {
  display: block;
  margin: 0 auto 1.5em;
  text-align: center;
}

#features header {
  font-size: 110%;
  margin-bottom: 2em;
}
#features article img {
  width: 220px;
  height: 160px;
}
#features article.alpha {
  clear: left;
}

#features, #preference, #moreDetails {
  margin-top: 2em;
  padding-top: 2em !important;
  padding-bottom: 2em !important;
  border-top: 1px solid rgba(0,0,0,.2);
}

#preference {
  font-size: 85%;
  position: relative;
}
#preference img {
  display: block;
  margin: 3em auto 1.5em;
}
#preference article {
  width: 160px;
  float: left;
  position: relative;
  z-index: 300;
}
#preference article#service,
#preference article#toolbar {
  text-align: right;
  position: absolute;
  top: 3em;
  left: 50px;
}
#preference article#toolbar {
  top: 11.5em;
}
#preference article#customBitly {
  top: 8em;
  left: 40px;
}
#preference canvas#relationship_link {
  position: absolute;
  top: 5em;
  left: 20px;
  z-index: 200;
}


#moreDetails ul, #moreDetails dl, #moreDetails p {
  font-size: 85%;
}
#moreDetails article small {
  display: block;
}

#moreDetails #updateLog, #moreDetails #notes {
  margin-top: 1.5em;
}
#moreDetails #updateLog {
  clear: both;
}
#moreDetails #updateLog dl {
  margin-bottom: 1.5em;
}

#footerPromo {
  clear: both;
}
#footerPromo a {
  background-color: #80a7d7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.35)) );
  background-image: -moz-linear-gradient(0% 100% 90deg, rgba(0,0,0,0.35),  rgba(0,0,0,0) );
  box-shadow: inset 0 -3.5em 5em -2em rgba(0,0,0,.35);
  color: white;
  text-shadow: 0 -1px 1px rgba(0,0,0,.5);
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 1em 0;
}
#footerPromo a img {
  vertical-align: top;
}

footer {
  font-size: 85%;
  margin: 1.5em 0.7em;
}
footer > * {
  line-height: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
  margin-bottom: 0;
}

/* Social Plugins */

div#socialPlugins {
  height: 1.5em;
  position: absolute;
  top: 0.9em;
  left: 0.7em;
}
div#socialPlugins iframe#facebookLikeButton {
  background: #dedede;
  width: 450px;
  height: 100%;
  border: none;
  overflow: hidden;
}

/* Release notes */

section#releaseNotes {
  padding-bottom: 2em !important;
}
section#releaseNotes nav {
  margin-bottom: 1.5em;
}