html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

#introduction {
  background: url('../i/intro-back.jpg?1319786331') repeat-x #bbd8cd;
  height: 485px;
  position: relative;
}
#introduction:after {
  content: "";
  width: 100%;
  height: 12px;
  background: url('../i/bluebar.png?1319787208') repeat-x #1c2730;
  position: absolute;
  top: 0;
}
#introduction .content {
  padding: 25px 0 0 0;
}
#introduction p {
  color: white;
  font-family: ff-netto-web-1, ff-netto-web-2;
  font-size: 21px;
  text-shadow: 0 1px 0 #8abca9;
  width: 505px;
  margin: 30px 0 0 50px;
  line-height: 1.2;
}
#introduction #clouds {
  width: 100%;
  background: url('../i/clouds.png?1319786824') repeat-x;
  height: 245px;
  position: absolute;
  bottom: 0;
  z-index: 0;
}

#sassy-model {
  background: url('../i/sassy-model.png?1319788125') no-repeat;
  width: 254px;
  height: 485px;
  position: absolute;
  top: 0px;
  left: -230px;
}

.content {
  width: 605px;
  margin: 0 auto;
  position: relative;
  color: #47453e;
  padding-bottom: 50px;
  z-index: 100;
  font-family: ff-netto-web-1, ff-netto-web-2 sans-serif;
}
.content a {
  color: #47799f;
  font-weight: bold;
@include: hover-link;
}

h1 {
  font-size: 8em;
  text-align: center;
  color: white;
  text-shadow: 0px 0px 0 #b6cebf, 0.707px 0.707px 0 #b6cebf, 1.414px 1.414px 0 #b6cebf, 2.121px 2.121px 0 #b6cebf, 2.828px 2.828px 0 #b6cebf, 3.536px 3.536px 0 #b6cebf, 4.243px 4.243px 0 #b6cebf, 4.95px 4.95px 0 #b6cebf, 5.657px 5.657px 0 #b6cebf, 6.364px 6.364px 0 #b6cebf, 7.071px 7.071px 0 #b6cebf;
}

h2 {
  font-size: 40px;
  text-align: center;
  font-family: bello-caps-1, bello-caps-2, sans-serif;
}

h3 {
  font-size: 25px;
  text-align: left;
  line-height: 1.8;
  font-weight: bold;
}

h4 {
  font-weight: bold;
  line-height: 1.5;
  font-size: 18px;
}

p {
  font-size: 18px;
  line-height: 1.7;
  margin: 18px 0;
}

pre {
  background: #e2eeea;
  line-height: 1.2;
  padding: 20px;
  margin: 27px 0;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.8;
  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
  white-space: no-wrap;
  overflow: auto;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

#introduction > p {
  font-size: 22px;
  padding-left: 20px;
}

#introduction > p:nth-of-type(2) {
  text-align: center;
  font-size: 20px;
  margin: 35px 0 18px 0;
  padding: 0;
}

.intro-buttons {
  text-align: center;
  margin: 20px 0;
  width: 600px;
}
.intro-buttons button {
  margin-top: 15px;
}

/* Introduction Buttons */
#intro-button1 {
  font-size: 26px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  background-color: #cc3512;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5e3d), color-stop(70%, #cc3512));
  background: -webkit-linear-gradient(#ee5e3d, #cc3512 70%);
  background: -moz-linear-gradient(#ee5e3d, #cc3512 70%);
  background: -o-linear-gradient(#ee5e3d, #cc3512 70%);
  background: -ms-linear-gradient(#ee5e3d, #cc3512 70%);
  background: linear-gradient(#ee5e3d, #cc3512 70%);
  -moz-box-shadow: #f49883 0 1px 0 inset;
  -webkit-box-shadow: #f49883 0 1px 0 inset;
  -o-box-shadow: #f49883 0 1px 0 inset;
  box-shadow: #f49883 0 1px 0 inset;
  border: 1px solid #b52f10;
  color: white;
  text-shadow: #96270d 0 -1px 0;
}
#intro-button1:hover {
  background-color: #b52f10;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #ec4b25), color-stop(75%, #b52f10));
  background: -webkit-linear-gradient(#ec4b25 3%, #b52f10 75%);
  background: -moz-linear-gradient(#ec4b25 3%, #b52f10 75%);
  background: -o-linear-gradient(#ec4b25 3%, #b52f10 75%);
  background: -ms-linear-gradient(#ec4b25 3%, #b52f10 75%);
  background: linear-gradient(#ec4b25 3%, #b52f10 75%);
}
#intro-button1:active {
  -moz-box-shadow: #a72b0f 0 1px 2px inset;
  -webkit-box-shadow: #a72b0f 0 1px 2px inset;
  -o-box-shadow: #a72b0f 0 1px 2px inset;
  box-shadow: #a72b0f 0 1px 2px inset;
}

#intro-button2 {
  font-size: 26px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  background-color: #ffd71a;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffed9a), color-stop(50%, #ffd71a), color-stop(100%, #ffaa1a));
  background: -webkit-linear-gradient(#ffed9a, #ffd71a 50%, #ffaa1a);
  background: -moz-linear-gradient(#ffed9a, #ffd71a 50%, #ffaa1a);
  background: -o-linear-gradient(#ffed9a, #ffd71a 50%, #ffaa1a);
  background: -ms-linear-gradient(#ffed9a, #ffd71a 50%, #ffaa1a);
  background: linear-gradient(#ffed9a, #ffd71a 50%, #ffaa1a);
  -moz-box-shadow: #fffbe6 0 1px 0 inset;
  -webkit-box-shadow: #fffbe6 0 1px 0 inset;
  -o-box-shadow: #fffbe6 0 1px 0 inset;
  box-shadow: #fffbe6 0 1px 0 inset;
  border: 1px solid #ffa100;
  color: white;
  text-shadow: #f3c800 0 -1px 0;
}
#intro-button2:hover {
  background-color: #ffaa1a;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffeb8f), color-stop(50%, #ffaa1a), color-stop(100%, #f09700));
  background: -webkit-linear-gradient(#ffeb8f, #ffaa1a 50%, #f09700);
  background: -moz-linear-gradient(#ffeb8f, #ffaa1a 50%, #f09700);
  background: -o-linear-gradient(#ffeb8f, #ffaa1a 50%, #f09700);
  background: -ms-linear-gradient(#ffeb8f, #ffaa1a 50%, #f09700);
  background: linear-gradient(#ffeb8f, #ffaa1a 50%, #f09700);
}
#intro-button2:active {
  -moz-box-shadow: #f09700 0 1px 2px inset;
  -webkit-box-shadow: #f09700 0 1px 2px inset;
  -o-box-shadow: #f09700 0 1px 2px inset;
  box-shadow: #f09700 0 1px 2px inset;
}

#intro-button3 {
  font-size: 26px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  -khtml-border-radius: 50px;
  border-radius: 50px;
  background-color: #acbd4f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #bac86d), color-stop(51%, #acbd4f));
  background: -webkit-linear-gradient(#bac86d 50%, #acbd4f 51%);
  background: -moz-linear-gradient(#bac86d 50%, #acbd4f 51%);
  background: -o-linear-gradient(#bac86d 50%, #acbd4f 51%);
  background: -ms-linear-gradient(#bac86d 50%, #acbd4f 51%);
  background: linear-gradient(#bac86d 50%, #acbd4f 51%);
  -moz-box-shadow: #d4dda4 0 1px 0 inset;
  -webkit-box-shadow: #d4dda4 0 1px 0 inset;
  -o-box-shadow: #d4dda4 0 1px 0 inset;
  box-shadow: #d4dda4 0 1px 0 inset;
  border: 1px solid #9fb042;
  color: white;
  text-shadow: #748130 0 -1px 0;
}
#intro-button3:hover {
  background-color: #99a93f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #aebe53), color-stop(51%, #99a93f));
  background: -webkit-linear-gradient(#aebe53 50%, #99a93f 51%);
  background: -moz-linear-gradient(#aebe53 50%, #99a93f 51%);
  background: -o-linear-gradient(#aebe53 50%, #99a93f 51%);
  background: -ms-linear-gradient(#aebe53 50%, #99a93f 51%);
  background: linear-gradient(#aebe53 50%, #99a93f 51%);
}
#intro-button3:active {
  -moz-box-shadow: #95a53e 0 1px 2px inset;
  -webkit-box-shadow: #95a53e 0 1px 2px inset;
  -o-box-shadow: #95a53e 0 1px 2px inset;
  box-shadow: #95a53e 0 1px 2px inset;
}

#intro-button4 {
  font-size: 20px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background-color: #8ccdae;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8ccdae), color-stop(100%, #6fa88d));
  background: -webkit-linear-gradient(#8ccdae, #6fa88d);
  background: -moz-linear-gradient(#8ccdae, #6fa88d);
  background: -o-linear-gradient(#8ccdae, #6fa88d);
  background: -ms-linear-gradient(#8ccdae, #6fa88d);
  background: linear-gradient(#8ccdae, #6fa88d);
  -moz-box-shadow: #c1e4d4 0 1px 0 inset;
  -webkit-box-shadow: #c1e4d4 0 1px 0 inset;
  -o-box-shadow: #c1e4d4 0 1px 0 inset;
  box-shadow: #c1e4d4 0 1px 0 inset;
  border: 1px solid #5f9e80;
  color: white;
  text-shadow: #40936b 0 -1px 0;
}
#intro-button4:hover {
  background-color: #5f9e80;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ac5a1), color-stop(100%, #5f9e80));
  background: -webkit-linear-gradient(#7ac5a1, #5f9e80);
  background: -moz-linear-gradient(#7ac5a1, #5f9e80);
  background: -o-linear-gradient(#7ac5a1, #5f9e80);
  background: -ms-linear-gradient(#7ac5a1, #5f9e80);
  background: linear-gradient(#7ac5a1, #5f9e80);
}
#intro-button4:active {
  -moz-box-shadow: #5a9479 0 1px 2px inset;
  -webkit-box-shadow: #5a9479 0 1px 2px inset;
  -o-box-shadow: #5a9479 0 1px 2px inset;
  box-shadow: #5a9479 0 1px 2px inset;
}

#intro-button5 {
  font-size: 20px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  background-color: #1b84b6;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3cace2), color-stop(70%, #1b84b6));
  background: -webkit-linear-gradient(#3cace2, #1b84b6 70%);
  background: -moz-linear-gradient(#3cace2, #1b84b6 70%);
  background: -o-linear-gradient(#3cace2, #1b84b6 70%);
  background: -ms-linear-gradient(#3cace2, #1b84b6 70%);
  background: linear-gradient(#3cace2, #1b84b6 70%);
  -moz-box-shadow: #7ec8ec 0 1px 0 inset;
  -webkit-box-shadow: #7ec8ec 0 1px 0 inset;
  -o-box-shadow: #7ec8ec 0 1px 0 inset;
  box-shadow: #7ec8ec 0 1px 0 inset;
  border: 1px solid #1874a0;
  color: white;
  text-shadow: #135f83 0 -1px 0;
  -moz-box-shadow: #135d81 0 0.4em 0px, #49b2e4 0 1px 0 inset;
  -webkit-box-shadow: #135d81 0 0.4em 0px, #49b2e4 0 1px 0 inset;
  -o-box-shadow: #135d81 0 0.4em 0px, #49b2e4 0 1px 0 inset;
  box-shadow: #135d81 0 0.4em 0px, #49b2e4 0 1px 0 inset;
  border-bottom: solid 1px #1b84b6;
  position: relative;
}
#intro-button5:hover {
  background-color: #1874a0;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #25a3df), color-stop(75%, #1874a0));
  background: -webkit-linear-gradient(#25a3df 3%, #1874a0 75%);
  background: -moz-linear-gradient(#25a3df 3%, #1874a0 75%);
  background: -o-linear-gradient(#25a3df 3%, #1874a0 75%);
  background: -ms-linear-gradient(#25a3df 3%, #1874a0 75%);
  background: linear-gradient(#25a3df 3%, #1874a0 75%);
}
#intro-button5:active {
  -moz-box-shadow: #166a92 0 1px 2px inset;
  -webkit-box-shadow: #166a92 0 1px 2px inset;
  -o-box-shadow: #166a92 0 1px 2px inset;
  box-shadow: #166a92 0 1px 2px inset;
}
#intro-button5:active {
  top: 0.3em;
  -moz-box-shadow: #166a92 0 0.2em 0px;
  -webkit-box-shadow: #166a92 0 0.2em 0px;
  -o-box-shadow: #166a92 0 0.2em 0px;
  box-shadow: #166a92 0 0.2em 0px;
}

#intro-button6 {
  font-size: 20px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  -o-border-radius: 18px;
  -ms-border-radius: 18px;
  -khtml-border-radius: 18px;
  border-radius: 18px;
  background-color: #646a6c;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #787f81), color-stop(51%, #646a6c));
  background: -webkit-linear-gradient(#787f81 50%, #646a6c 51%);
  background: -moz-linear-gradient(#787f81 50%, #646a6c 51%);
  background: -o-linear-gradient(#787f81 50%, #646a6c 51%);
  background: -ms-linear-gradient(#787f81 50%, #646a6c 51%);
  background: linear-gradient(#787f81 50%, #646a6c 51%);
  -moz-box-shadow: #9fa4a6 0 1px 0 inset;
  -webkit-box-shadow: #9fa4a6 0 1px 0 inset;
  -o-box-shadow: #9fa4a6 0 1px 0 inset;
  box-shadow: #9fa4a6 0 1px 0 inset;
  border: 1px solid #585d5f;
  color: white;
  text-shadow: #383c3d 0 -1px 0;
  -moz-box-shadow: #303335 0 0.2em 0.4em inset;
  -webkit-box-shadow: #303335 0 0.2em 0.4em inset;
  -o-box-shadow: #303335 0 0.2em 0.4em inset;
  box-shadow: #303335 0 0.2em 0.4em inset;
  border: solid 1px #1f2122;
}
#intro-button6:hover {
  background-color: #535859;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #666d6f), color-stop(51%, #535859));
  background: -webkit-linear-gradient(#666d6f 50%, #535859 51%);
  background: -moz-linear-gradient(#666d6f 50%, #535859 51%);
  background: -o-linear-gradient(#666d6f 50%, #535859 51%);
  background: -ms-linear-gradient(#666d6f 50%, #535859 51%);
  background: linear-gradient(#666d6f 50%, #535859 51%);
}
#intro-button6:active {
  -moz-box-shadow: #505557 0 1px 2px inset;
  -webkit-box-shadow: #505557 0 1px 2px inset;
  -o-box-shadow: #505557 0 1px 2px inset;
  box-shadow: #505557 0 1px 2px inset;
}
#intro-button6:active {
  -moz-box-shadow: #27292a 0 0.2em 0.4em inset;
  -webkit-box-shadow: #27292a 0 0.2em 0.4em inset;
  -o-box-shadow: #27292a 0 0.2em 0.4em inset;
  box-shadow: #27292a 0 0.2em 0.4em inset;
}

.button-group {
  margin: 18px 0;
}

#getting-started, #creating-buttons {
  margin: 45px 0;
}

/* Gradient Style Buttons */
.gradient-example-button {
  font-size: 19px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}

#graident-button-simple {
  background-color: #4ba3cc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4ba3cc), color-stop(100%, #3289b2));
  background: -webkit-linear-gradient(#4ba3cc, #3289b2);
  background: -moz-linear-gradient(#4ba3cc, #3289b2);
  background: -o-linear-gradient(#4ba3cc, #3289b2);
  background: -ms-linear-gradient(#4ba3cc, #3289b2);
  background: linear-gradient(#4ba3cc, #3289b2);
  -moz-box-shadow: #87c1dd 0 1px 0 inset;
  -webkit-box-shadow: #87c1dd 0 1px 0 inset;
  -o-box-shadow: #87c1dd 0 1px 0 inset;
  box-shadow: #87c1dd 0 1px 0 inset;
  border: 1px solid #2d7a9e;
  color: white;
  text-shadow: #205872 0 -1px 0;
}
#graident-button-simple:hover {
  background-color: #2d7a9e;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3899c6), color-stop(100%, #2d7a9e));
  background: -webkit-linear-gradient(#3899c6, #2d7a9e);
  background: -moz-linear-gradient(#3899c6, #2d7a9e);
  background: -o-linear-gradient(#3899c6, #2d7a9e);
  background: -ms-linear-gradient(#3899c6, #2d7a9e);
  background: linear-gradient(#3899c6, #2d7a9e);
}
#graident-button-simple:active {
  -moz-box-shadow: #297192 0 1px 2px inset;
  -webkit-box-shadow: #297192 0 1px 2px inset;
  -o-box-shadow: #297192 0 1px 2px inset;
  box-shadow: #297192 0 1px 2px inset;
}

#graident-button-matte {
  background-color: #4ba3cc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #87c1dd), color-stop(70%, #4ba3cc));
  background: -webkit-linear-gradient(#87c1dd, #4ba3cc 70%);
  background: -moz-linear-gradient(#87c1dd, #4ba3cc 70%);
  background: -o-linear-gradient(#87c1dd, #4ba3cc 70%);
  background: -ms-linear-gradient(#87c1dd, #4ba3cc 70%);
  background: linear-gradient(#87c1dd, #4ba3cc 70%);
  -moz-box-shadow: #c2e0ee 0 1px 0 inset;
  -webkit-box-shadow: #c2e0ee 0 1px 0 inset;
  -o-box-shadow: #c2e0ee 0 1px 0 inset;
  box-shadow: #c2e0ee 0 1px 0 inset;
  border: 1px solid #3899c6;
  color: white;
  text-shadow: #3185ac 0 -1px 0;
}
#graident-button-matte:hover {
  background-color: #3899c6;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #73b7d7), color-stop(75%, #3899c6));
  background: -webkit-linear-gradient(#73b7d7 3%, #3899c6 75%);
  background: -moz-linear-gradient(#73b7d7 3%, #3899c6 75%);
  background: -o-linear-gradient(#73b7d7 3%, #3899c6 75%);
  background: -ms-linear-gradient(#73b7d7 3%, #3899c6 75%);
  background: linear-gradient(#73b7d7 3%, #3899c6 75%);
}
#graident-button-matte:active {
  -moz-box-shadow: #358fba 0 1px 2px inset;
  -webkit-box-shadow: #358fba 0 1px 2px inset;
  -o-box-shadow: #358fba 0 1px 2px inset;
  box-shadow: #358fba 0 1px 2px inset;
}

#graident-button-shiny {
  background-color: #4ba3cc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aed6e8), color-stop(50%, #4ba3cc), color-stop(100%, #3289b2));
  background: -webkit-linear-gradient(#aed6e8, #4ba3cc 50%, #3289b2);
  background: -moz-linear-gradient(#aed6e8, #4ba3cc 50%, #3289b2);
  background: -o-linear-gradient(#aed6e8, #4ba3cc 50%, #3289b2);
  background: -ms-linear-gradient(#aed6e8, #4ba3cc 50%, #3289b2);
  background: linear-gradient(#aed6e8, #4ba3cc 50%, #3289b2);
  -moz-box-shadow: #eaf4f9 0 1px 0 inset;
  -webkit-box-shadow: #eaf4f9 0 1px 0 inset;
  -o-box-shadow: #eaf4f9 0 1px 0 inset;
  box-shadow: #eaf4f9 0 1px 0 inset;
  border: 1px solid #2d7a9e;
  color: white;
  text-shadow: #348eb8 0 -1px 0;
}
#graident-button-shiny:hover {
  background-color: #3289b2;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a6d2e6), color-stop(50%, #3289b2), color-stop(100%, #297192));
  background: -webkit-linear-gradient(#a6d2e6, #3289b2 50%, #297192);
  background: -moz-linear-gradient(#a6d2e6, #3289b2 50%, #297192);
  background: -o-linear-gradient(#a6d2e6, #3289b2 50%, #297192);
  background: -ms-linear-gradient(#a6d2e6, #3289b2 50%, #297192);
  background: linear-gradient(#a6d2e6, #3289b2 50%, #297192);
}
#graident-button-shiny:active {
  -moz-box-shadow: #297192 0 1px 2px inset;
  -webkit-box-shadow: #297192 0 1px 2px inset;
  -o-box-shadow: #297192 0 1px 2px inset;
  box-shadow: #297192 0 1px 2px inset;
}

#graident-button-glass {
  background-color: #4ba3cc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #6bb3d5), color-stop(51%, #4ba3cc));
  background: -webkit-linear-gradient(#6bb3d5 50%, #4ba3cc 51%);
  background: -moz-linear-gradient(#6bb3d5 50%, #4ba3cc 51%);
  background: -o-linear-gradient(#6bb3d5 50%, #4ba3cc 51%);
  background: -ms-linear-gradient(#6bb3d5 50%, #4ba3cc 51%);
  background: linear-gradient(#6bb3d5 50%, #4ba3cc 51%);
  -moz-box-shadow: #a6d2e6 0 1px 0 inset;
  -webkit-box-shadow: #a6d2e6 0 1px 0 inset;
  -o-box-shadow: #a6d2e6 0 1px 0 inset;
  box-shadow: #a6d2e6 0 1px 0 inset;
  border: 1px solid #3899c6;
  color: white;
  text-shadow: #2a7193 0 -1px 0;
}
#graident-button-glass:hover {
  background-color: #3692be;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #4fa5cd), color-stop(51%, #3692be));
  background: -webkit-linear-gradient(#4fa5cd 50%, #3692be 51%);
  background: -moz-linear-gradient(#4fa5cd 50%, #3692be 51%);
  background: -o-linear-gradient(#4fa5cd 50%, #3692be 51%);
  background: -ms-linear-gradient(#4fa5cd 50%, #3692be 51%);
  background: linear-gradient(#4fa5cd 50%, #3692be 51%);
}
#graident-button-glass:active {
  -moz-box-shadow: #358fba 0 1px 2px inset;
  -webkit-box-shadow: #358fba 0 1px 2px inset;
  -o-box-shadow: #358fba 0 1px 2px inset;
  box-shadow: #358fba 0 1px 2px inset;
}

#graident-button-flat {
  background-color: #4ba3cc;
  background-color: #4ba3cc;
  border: 0;
  color: white;
  text-shadow: #215b76 0 -1px 0;
}
#graident-button-flat:hover {
  background-color: #3899c6;
}
#graident-button-flat:active {
  background-color: #358fba;
}

/* Text Style Buttons */
.text-style-button {
  font-size: 19px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

#textstyle-button-none {
  background-color: #cede85;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cede85), color-stop(70%, #a7bf35));
  background: -webkit-linear-gradient(#cede85, #a7bf35 70%);
  background: -moz-linear-gradient(#cede85, #a7bf35 70%);
  background: -o-linear-gradient(#cede85, #a7bf35 70%);
  background: -ms-linear-gradient(#cede85, #a7bf35 70%);
  background: linear-gradient(#cede85, #a7bf35 70%);
  -moz-box-shadow: #e6eec1 0 1px 0 inset;
  -webkit-box-shadow: #e6eec1 0 1px 0 inset;
  -o-box-shadow: #e6eec1 0 1px 0 inset;
  box-shadow: #e6eec1 0 1px 0 inset;
  border: 1px solid #96ab2f;
  color: white;
}
#textstyle-button-none:hover {
  background-color: #96ab2f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #c6d971), color-stop(75%, #96ab2f));
  background: -webkit-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -moz-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -o-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -ms-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: linear-gradient(#c6d971 3%, #96ab2f 75%);
}
#textstyle-button-none:active {
  -moz-box-shadow: #8b9f2c 0 1px 2px inset;
  -webkit-box-shadow: #8b9f2c 0 1px 2px inset;
  -o-box-shadow: #8b9f2c 0 1px 2px inset;
  box-shadow: #8b9f2c 0 1px 2px inset;
}

#textstyle-button-inset-light {
  background-color: #cede85;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cede85), color-stop(70%, #a7bf35));
  background: -webkit-linear-gradient(#cede85, #a7bf35 70%);
  background: -moz-linear-gradient(#cede85, #a7bf35 70%);
  background: -o-linear-gradient(#cede85, #a7bf35 70%);
  background: -ms-linear-gradient(#cede85, #a7bf35 70%);
  background: linear-gradient(#cede85, #a7bf35 70%);
  -moz-box-shadow: #e6eec1 0 1px 0 inset;
  -webkit-box-shadow: #e6eec1 0 1px 0 inset;
  -o-box-shadow: #e6eec1 0 1px 0 inset;
  box-shadow: #e6eec1 0 1px 0 inset;
  border: 1px solid #96ab2f;
  color: white;
  text-shadow: #839629 0 -1px 0;
}
#textstyle-button-inset-light:hover {
  background-color: #96ab2f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #c6d971), color-stop(75%, #96ab2f));
  background: -webkit-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -moz-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -o-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -ms-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: linear-gradient(#c6d971 3%, #96ab2f 75%);
}
#textstyle-button-inset-light:active {
  -moz-box-shadow: #8b9f2c 0 1px 2px inset;
  -webkit-box-shadow: #8b9f2c 0 1px 2px inset;
  -o-box-shadow: #8b9f2c 0 1px 2px inset;
  box-shadow: #8b9f2c 0 1px 2px inset;
}

#textstyle-button-inset-dark {
  background-color: #cede85;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cede85), color-stop(70%, #a7bf35));
  background: -webkit-linear-gradient(#cede85, #a7bf35 70%);
  background: -moz-linear-gradient(#cede85, #a7bf35 70%);
  background: -o-linear-gradient(#cede85, #a7bf35 70%);
  background: -ms-linear-gradient(#cede85, #a7bf35 70%);
  background: linear-gradient(#cede85, #a7bf35 70%);
  -moz-box-shadow: #e6eec1 0 1px 0 inset;
  -webkit-box-shadow: #e6eec1 0 1px 0 inset;
  -o-box-shadow: #e6eec1 0 1px 0 inset;
  box-shadow: #e6eec1 0 1px 0 inset;
  border: 1px solid #96ab2f;
  color: #333333;
  text-shadow: #cedd84 0 1px 0;
}
#textstyle-button-inset-dark:hover {
  background-color: #96ab2f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #c6d971), color-stop(75%, #96ab2f));
  background: -webkit-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -moz-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -o-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -ms-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: linear-gradient(#c6d971 3%, #96ab2f 75%);
}
#textstyle-button-inset-dark:active {
  -moz-box-shadow: #8b9f2c 0 1px 2px inset;
  -webkit-box-shadow: #8b9f2c 0 1px 2px inset;
  -o-box-shadow: #8b9f2c 0 1px 2px inset;
  box-shadow: #8b9f2c 0 1px 2px inset;
}

#textstyle-button-raised-light {
  background-color: #cede85;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cede85), color-stop(70%, #a7bf35));
  background: -webkit-linear-gradient(#cede85, #a7bf35 70%);
  background: -moz-linear-gradient(#cede85, #a7bf35 70%);
  background: -o-linear-gradient(#cede85, #a7bf35 70%);
  background: -ms-linear-gradient(#cede85, #a7bf35 70%);
  background: linear-gradient(#cede85, #a7bf35 70%);
  -moz-box-shadow: #e6eec1 0 1px 0 inset;
  -webkit-box-shadow: #e6eec1 0 1px 0 inset;
  -o-box-shadow: #e6eec1 0 1px 0 inset;
  box-shadow: #e6eec1 0 1px 0 inset;
  border: 1px solid #96ab2f;
  color: white;
  text-shadow: #839629 0 1px 0;
}
#textstyle-button-raised-light:hover {
  background-color: #96ab2f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #c6d971), color-stop(75%, #96ab2f));
  background: -webkit-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -moz-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -o-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -ms-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: linear-gradient(#c6d971 3%, #96ab2f 75%);
}
#textstyle-button-raised-light:active {
  -moz-box-shadow: #8b9f2c 0 1px 2px inset;
  -webkit-box-shadow: #8b9f2c 0 1px 2px inset;
  -o-box-shadow: #8b9f2c 0 1px 2px inset;
  box-shadow: #8b9f2c 0 1px 2px inset;
}

#textstyle-button-raised-dark {
  background-color: #cede85;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cede85), color-stop(70%, #a7bf35));
  background: -webkit-linear-gradient(#cede85, #a7bf35 70%);
  background: -moz-linear-gradient(#cede85, #a7bf35 70%);
  background: -o-linear-gradient(#cede85, #a7bf35 70%);
  background: -ms-linear-gradient(#cede85, #a7bf35 70%);
  background: linear-gradient(#cede85, #a7bf35 70%);
  -moz-box-shadow: #e6eec1 0 1px 0 inset;
  -webkit-box-shadow: #e6eec1 0 1px 0 inset;
  -o-box-shadow: #e6eec1 0 1px 0 inset;
  box-shadow: #e6eec1 0 1px 0 inset;
  border: 1px solid #96ab2f;
  color: #333333;
  text-shadow: #cedd84 0 -1px 0;
}
#textstyle-button-raised-dark:hover {
  background-color: #96ab2f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #c6d971), color-stop(75%, #96ab2f));
  background: -webkit-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -moz-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -o-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: -ms-linear-gradient(#c6d971 3%, #96ab2f 75%);
  background: linear-gradient(#c6d971 3%, #96ab2f 75%);
}
#textstyle-button-raised-dark:active {
  -moz-box-shadow: #8b9f2c 0 1px 2px inset;
  -webkit-box-shadow: #8b9f2c 0 1px 2px inset;
  -o-box-shadow: #8b9f2c 0 1px 2px inset;
  box-shadow: #8b9f2c 0 1px 2px inset;
}

.button {
  font-size: 20px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  -khtml-border-radius: 50px;
  border-radius: 50px;
}

.red {
  background-color: #e86a43;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0a087), color-stop(70%, #e86a43));
  background: -webkit-linear-gradient(#f0a087, #e86a43 70%);
  background: -moz-linear-gradient(#f0a087, #e86a43 70%);
  background: -o-linear-gradient(#f0a087, #e86a43 70%);
  background: -ms-linear-gradient(#f0a087, #e86a43 70%);
  background: linear-gradient(#f0a087, #e86a43 70%);
  -moz-box-shadow: #f9d6cb 0 1px 0 inset;
  -webkit-box-shadow: #f9d6cb 0 1px 0 inset;
  -o-box-shadow: #f9d6cb 0 1px 0 inset;
  box-shadow: #f9d6cb 0 1px 0 inset;
  border: 1px solid #e5582c;
  color: white;
  text-shadow: #d6471a 0 -1px 0;
}
.red:hover {
  background-color: #e5582c;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(3%, #ee8e70), color-stop(75%, #e5582c));
  background: -webkit-linear-gradient(#ee8e70 3%, #e5582c 75%);
  background: -moz-linear-gradient(#ee8e70 3%, #e5582c 75%);
  background: -o-linear-gradient(#ee8e70 3%, #e5582c 75%);
  background: -ms-linear-gradient(#ee8e70 3%, #e5582c 75%);
  background: linear-gradient(#ee8e70 3%, #e5582c 75%);
}
.red:active {
  -moz-box-shadow: #e44d1f 0 1px 2px inset;
  -webkit-box-shadow: #e44d1f 0 1px 2px inset;
  -o-box-shadow: #e44d1f 0 1px 2px inset;
  box-shadow: #e44d1f 0 1px 2px inset;
}

.blue {
  background-color: #4d8ccd;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d8ccd), color-stop(100%, #3372b4));
  background: -webkit-linear-gradient(#4d8ccd, #3372b4);
  background: -moz-linear-gradient(#4d8ccd, #3372b4);
  background: -o-linear-gradient(#4d8ccd, #3372b4);
  background: -ms-linear-gradient(#4d8ccd, #3372b4);
  background: linear-gradient(#4d8ccd, #3372b4);
  -moz-box-shadow: #89b3de 0 1px 0 inset;
  -webkit-box-shadow: #89b3de 0 1px 0 inset;
  -o-box-shadow: #89b3de 0 1px 0 inset;
  box-shadow: #89b3de 0 1px 0 inset;
  border: 1px solid #2d66a0;
  color: white;
  text-shadow: #214a75 0 -1px 0;
}
.blue:hover {
  background-color: #2d66a0;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #397fc7), color-stop(100%, #2d66a0));
  background: -webkit-linear-gradient(#397fc7, #2d66a0);
  background: -moz-linear-gradient(#397fc7, #2d66a0);
  background: -o-linear-gradient(#397fc7, #2d66a0);
  background: -ms-linear-gradient(#397fc7, #2d66a0);
  background: linear-gradient(#397fc7, #2d66a0);
}
.blue:active {
  -moz-box-shadow: #2a5e94 0 1px 2px inset;
  -webkit-box-shadow: #2a5e94 0 1px 2px inset;
  -o-box-shadow: #2a5e94 0 1px 2px inset;
  box-shadow: #2a5e94 0 1px 2px inset;
}

.green {
  background-color: #8cbe5f;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #a1ca7c), color-stop(51%, #8cbe5f));
  background: -webkit-linear-gradient(#a1ca7c 50%, #8cbe5f 51%);
  background: -moz-linear-gradient(#a1ca7c 50%, #8cbe5f 51%);
  background: -o-linear-gradient(#a1ca7c 50%, #8cbe5f 51%);
  background: -ms-linear-gradient(#a1ca7c 50%, #8cbe5f 51%);
  background: linear-gradient(#a1ca7c 50%, #8cbe5f 51%);
  -moz-box-shadow: #c8e0b2 0 1px 0 inset;
  -webkit-box-shadow: #c8e0b2 0 1px 0 inset;
  -o-box-shadow: #c8e0b2 0 1px 0 inset;
  box-shadow: #c8e0b2 0 1px 0 inset;
  border: 1px solid #7fb74d;
  color: white;
  text-shadow: #5f8a38 0 -1px 0;
}
.green:hover {
  background-color: #7ab148;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #8fbf63), color-stop(51%, #7ab148));
  background: -webkit-linear-gradient(#8fbf63 50%, #7ab148 51%);
  background: -moz-linear-gradient(#8fbf63 50%, #7ab148 51%);
  background: -o-linear-gradient(#8fbf63 50%, #7ab148 51%);
  background: -ms-linear-gradient(#8fbf63 50%, #7ab148 51%);
  background: linear-gradient(#8fbf63 50%, #7ab148 51%);
}
.green:active {
  -moz-box-shadow: #77ae47 0 1px 2px inset;
  -webkit-box-shadow: #77ae47 0 1px 2px inset;
  -o-box-shadow: #77ae47 0 1px 2px inset;
  box-shadow: #77ae47 0 1px 2px inset;
}

/* Additional style buttons */
#addstyle-button-push {
  position: relative;
  font-size: 19px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background-color: #ccccba;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e7df), color-stop(50%, #ccccba), color-stop(100%, #b6b69d));
  background: -webkit-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: -moz-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: -o-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: -ms-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  -moz-box-shadow: white 0 1px 0 inset;
  -webkit-box-shadow: white 0 1px 0 inset;
  -o-box-shadow: white 0 1px 0 inset;
  box-shadow: white 0 1px 0 inset;
  border: 1px solid #abab8e;
  color: white;
  text-shadow: #a1a180 0 -1px 0;
  -moz-box-shadow: #b2b297 0 0.4em 0px, #f3f3ef 0 1px 0 inset;
  -webkit-box-shadow: #b2b297 0 0.4em 0px, #f3f3ef 0 1px 0 inset;
  -o-box-shadow: #b2b297 0 0.4em 0px, #f3f3ef 0 1px 0 inset;
  box-shadow: #b2b297 0 0.4em 0px, #f3f3ef 0 1px 0 inset;
  border-bottom: solid 1px #ccccba;
}
#addstyle-button-push:hover {
  background-color: #b6b69d;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3d9), color-stop(50%, #b6b69d), color-stop(100%, #a5a585));
  background: -webkit-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: -moz-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: -o-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: -ms-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
}
#addstyle-button-push:active {
  -moz-box-shadow: #a5a585 0 1px 2px inset;
  -webkit-box-shadow: #a5a585 0 1px 2px inset;
  -o-box-shadow: #a5a585 0 1px 2px inset;
  box-shadow: #a5a585 0 1px 2px inset;
}
#addstyle-button-push:active {
  top: 0.3em;
  -moz-box-shadow: #bbbba3 0 0.2em 0px;
  -webkit-box-shadow: #bbbba3 0 0.2em 0px;
  -o-box-shadow: #bbbba3 0 0.2em 0px;
  box-shadow: #bbbba3 0 0.2em 0px;
}

#addstyle-button-inset {
  font-size: 19px;
  padding: 0.5em 1.5em;
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background-color: #ccccba;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e7df), color-stop(50%, #ccccba), color-stop(100%, #b6b69d));
  background: -webkit-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: -moz-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: -o-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: -ms-linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  background: linear-gradient(#e7e7df, #ccccba 50%, #b6b69d);
  -moz-box-shadow: white 0 1px 0 inset;
  -webkit-box-shadow: white 0 1px 0 inset;
  -o-box-shadow: white 0 1px 0 inset;
  box-shadow: white 0 1px 0 inset;
  border: 1px solid #abab8e;
  color: white;
  text-shadow: #a1a180 0 -1px 0;
  -moz-box-shadow: #bbbba3 0 0.2em 0.4em inset;
  -webkit-box-shadow: #bbbba3 0 0.2em 0.4em inset;
  -o-box-shadow: #bbbba3 0 0.2em 0.4em inset;
  box-shadow: #bbbba3 0 0.2em 0.4em inset;
  border: solid 1px #abab8e;
}
#addstyle-button-inset:hover {
  background-color: #b6b69d;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3d9), color-stop(50%, #b6b69d), color-stop(100%, #a5a585));
  background: -webkit-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: -moz-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: -o-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: -ms-linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
  background: linear-gradient(#e3e3d9, #b6b69d 50%, #a5a585);
}
#addstyle-button-inset:active {
  -moz-box-shadow: #a5a585 0 1px 2px inset;
  -webkit-box-shadow: #a5a585 0 1px 2px inset;
  -o-box-shadow: #a5a585 0 1px 2px inset;
  box-shadow: #a5a585 0 1px 2px inset;
}
#addstyle-button-inset:active {
  -moz-box-shadow: #b2b297 0 0.2em 0.4em inset;
  -webkit-box-shadow: #b2b297 0 0.2em 0.4em inset;
  -o-box-shadow: #b2b297 0 0.2em 0.4em inset;
  box-shadow: #b2b297 0 0.2em 0.4em inset;
}

#code-example {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  display: none;
}
#code-example pre {
  font-size: 12px;
  padding: 15px 10px;
  background: rgba(73, 73, 65, 0.98);
  color: #eeeeee;
}
#code-example #close-code-box {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 25px;
  right: 5px;
  background: #646459;
  color: #eeeeee;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  font-family: sans-serif;
  line-height: 1.4;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  -o-border-radius: 18px;
  -ms-border-radius: 18px;
  -khtml-border-radius: 18px;
  border-radius: 18px;
}
#code-example #close-code-box hover {
  background: #7a7a6c;
  color: white;
}

footer p {
  font-size: 14px;
}