.sham-background-color {
background-color: #f3f3ec; }
.sham-sand {
background-color: #e9e9e9; }
.sham-grey {
background-color: #898989; }
.sham-maroon {
background-color: #9f6163; }
.sham-brown {
background-color: #935c52; }
.sham-muted-blue {
background-color: #487081; }
.sham-blue {
background-color: #569aaa; }
.sham-forest-green {
background-color: #6a724f; }
.sham-yellow {
background-color: #d6c054; }
.sham-dark-grey {
background-color: #626a6d; }
.sham-scrub-blue {
background-color: #7db1a9; }
.sham-purple {
background-color: #70535c; }
.sham-green {
background-color: #a3b57b; }
.sham-red {
background-color: #cc6666; }
/* -------------------------------------------------------------
Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets
List of CSS3 Sass Mixins File to be @imported and @included as you need
The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
ENDING css files
note: All CSS3 Properties are being supported by Safari 5
more info: http://www.findmebyip.com/litmus/#css3-properties
Mixins available:
- background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999
- background-size - arguments: Width: 100%, Height: 100%
- border-radius - arguments: Radius: 5px
- border-radius-separate - arguments: Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px
- box - arguments: Orientation: horizontal, Pack: center, Align: center
- box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
- box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
- box-sizing - arguments: Type: border-box
- columns - arguments: Count: 3, Gap: 10
- double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
- flex - arguments: Value: 1
- flip - arguments: ScaleX: -1
- font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
- opacity - arguments: Opacity: 0.5
- outline radius - arguments: Radius: 5px
- resize - arguments: Direction: both
- rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
- text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
- transform - arguments: Parameters: null
- transition - arguments: What: all, Length: 1s, Easing: ease-in-out
- triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0
------------------------------------------------------------- */
/* BACKGROUND GRADIENT */
/* BACKGROUND SIZE */
/* BORDER RADIUS */
/* BOX */
/* BOX RGBA */
/* BOX SHADOW */
/* BOX SIZING */
/* COLUMNS */
/* DOUBLE BORDERS */
/* FLEX */
/* FLIP */
/* FONT FACE */
/* OPACITY */
/* OUTLINE RADIUS */
/* RESIZE */
/* ROTATE*/
/* TEXT SHADOW */
/* TRANSFORM */
/* TRANSITION */
/* TRIPLE BORDERS */
/* ==========================================================================
Normalize.scss settings
========================================================================== */
/**
* Includes legacy browser support IE6/7
*
* Set to false if you want to drop support for IE6 and IE7
*/
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block; }
/**
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none; }
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* 3.Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove default margin.
*/
body {
margin: 0; }
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
/**
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:focus {
outline: thin dotted; }
a:active, a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/**
* Addresses font sizes and margins set differently in IE 6/7.
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold; }
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Addresses margins set differently in IE 6/7.
*/
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em; }
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap; }
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 8/9.
* 2. Improves image quality when scaled in IE 7.
*/
img {
border: 0; }
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
* 3. Corrects text not wrapping in Firefox 3.
* 4. Corrects alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
* 4. Improves appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */ }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
@media (min-width: 20em) {
body.sham .sham-single-panel, .baddabing {
margin-top: 2em;
float: none;
margin: 0 auto;
max-width: 20em;
padding-left: 0;
padding-right: 0; } }
@media (min-width: 20em) and (min-width: 60em) {
body.sham .sham-single-panel, .baddabing {
max-width: 100em; } }
@media (min-width: 20em) {
#sidebar {
float: none;
margin: 0 auto;
min-width: 20em; }
#main {
margin-top: 2em;
float: none;
margin: 0 auto;
padding-left: 0;
min-width: 20em; } }
@media (min-width: 60em) {
#sidebar {
float: left;
width: 30%;
min-width: 0;
padding-right: 1em; }
#main {
float: left;
padding-left: 1em;
width: 70%;
min-width: 0; } }
@media (min-width: 20em) {
body.sham .sham-grid-half, .bar {
margin-top: 2em;
float: none;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
min-width: 20em; } }
@media (min-width: 60em) {
body.sham .sham-grid-half, .bar {
float: left;
width: 50%;
min-width: 0; }
body.sham .sham-grid-half:first-child, .bar:first-child {
padding-right: 1em; }
body.sham .sham-grid-half:last-child, .bar:last-child {
padding-left: 1em; } }
@media (min-width: 20em) {
body.sham .sham-grid-third, .foo {
margin-top: 2em;
float: none;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
min-width: 20em; } }
@media (min-width: 60em) {
body.sham .sham-grid-third, .foo {
float: left;
width: 33.33%;
min-width: 20px; }
body.sham .sham-grid-third:nth-of-type(1), .foo:nth-of-type(1) {
clear: left;
padding-left: 0;
padding-right: 1em; }
body.sham .sham-grid-third:nth-of-type(2), .foo:nth-of-type(2) {
padding-left: 1em;
padding-right: 1em; }
body.sham .sham-grid-third:nth-of-type(3), .foo:nth-of-type(3) {
padding-left: 1em;
padding-right: 0; } }
body.sham header a, .sham-spinner-circular-fading, .sham-spinner-spokes-fading, .sham-spinner-peacock-fading, .sham-spinner-dots-fading, .sham-spinner-pinwheel-fading, .sham-spinner-spokes, .sham-spinner-pinwheel, .sham-spinner-windmill, .sham-spinner-skittles, .sham-spinner-foliage {
background-repeat: no-repeat;
background-position: center center;
-moz-animation: sham-spin infinite linear;
-moz-transform-origin: 50% 50%;
-webkit-animation: sham-spin infinite linear;
-webkit-transform-origin: 50% 50%;
-o-animation: sham-spin infinite linear;
-o-transform-origin: 50% 50%;
animation: sham-spin infinite linear;
transform-origin: 50% 50%; }
@-moz-keyframes sham-spin {
0 {
-moz-transform: rotate(0); }
100% {
-moz-transform: rotate(360deg); } }
@-webkit-keyframes sham-spin {
0% {
-webkit-transform: rotate(0); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes sham-spin {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); } }
@-o-keyframes sham-spin {
0% {
-o-transform: rotate(0); }
100% {
-o-transform: rotate(360deg); } }
body.sham {
color: #626a6d;
font-size: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 150%; }
body.sham * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; }
body.sham h1, body.sham h2, body.sham h3, body.sham h4, body.sham h5, body.sham h6 {
color: #569aaa;
font-family: "pragmatica-web", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200; }
body.sham h1 {
color: #70535c;
font-size: 350%; }
body.sham h2 {
color: #a3b57b;
font-size: 200%;
cursor: pointer; }
body.sham h2.toggle ~ div {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: opacity .5s ease-in-out; }
body.sham h2.toggle.on ~ div {
max-height: 1000em;
opacity: 1;
overflow: visible;
transition: opacity 1s ease-in-out; }
body.sham h3 {
color: #70535c;
font-size: 150%; }
body.sham hr {
*zoom: 1;
border: none;
width: 100%; }
body.sham hr:before, body.sham hr:after {
content: " ";
display: table; }
body.sham hr:after {
clear: both; }
body.sham a, body.sham a:link {
color: #569aaa; }
body.sham a:visited, body.sham a:link:visited {
color: #70535c; }
body.sham a:active, body.sham a:link:active {
color: #a3b57b; }
body.sham pre {
background-color: #eff5f7;
font-family: "share-techmono", "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
font-size: 90%;
padding: 1em; }
body.sham header {
*zoom: 1; }
body.sham header a {
color: transparent;
font: 0/0 a;
text-shadow: none;
animation-duration: 99s;
-webkit-animation-duration: 99s;
background-image: url('data:image/svg+xml;utf8, ');
background-size: contain;
display: block;
position: relative; }
body.sham header:before, body.sham header:after {
content: " ";
display: table; }
body.sham header:after {
clear: both; }
body.sham section {
*zoom: 1;
padding: 1.5em; }
body.sham section:before, body.sham section:after {
content: " ";
display: table; }
body.sham section:after {
clear: both; }
body.sham footer {
*zoom: 1;
font-size: 87.5%;
line-height: 4em;
margin-top: 2em;
padding: 4em; }
body.sham footer:before, body.sham footer:after {
content: " ";
display: table; }
body.sham footer:after {
clear: both; }
body.sham footer #id-logo {
background-image: url("data:image/svg+xml;utf8, ");
background-position: center center;
background-repeat: no-repeat;
background-size: 10em;
display: block;
height: 4em;
margin-top: 0;
opacity: .5;
transition: opacity .5s ease-in-out; }
body.sham footer #id-logo:hover {
opacity: 1; }
@media (max-width: 30em) {
body.sham footer #id-logo {
float: none; } }
body.sham p + p {
text-indent: 0;
margin-top: 1.5em; }
body.sham .sham-grid-third .inner {
padding: 1.5em; }
body.sham .sham-grid-half .inner {
padding: 1.5em; }
@media (min-width: 20em) {
body.sham header a {
background-position: center;
height: 360px;
left: 0;
top: 0;
width: 100%; }
body.sham header div:nth-of-type(2) {
background-color: rgba(255, 255, 255, 0.77);
margin-top: -150px;
position: relative;
z-index: 9999; }
body.sham header div div {
padding: 2em; } }
@media (min-width: 40em) {
body.sham header a {
background-position: center;
height: 450px;
left: 0;
top: 0;
width: 100%; }
body.sham header div:nth-of-type(2) {
background-color: rgba(255, 255, 255, 0.77);
margin-top: -150px;
position: relative;
z-index: 9999; } }
@media (min-width: 60em) {
body.sham header a {
background-position: center;
height: 600px;
left: -100px;
top: -100px;
width: 600px; }
body.sham header div:nth-of-type(2) {
background-color: transparent;
margin-top: 0; }
body.sham .wrapper {
background-color: rgba(255, 255, 255, 0.77);
position: absolute;
top: 24em; } }
.sham-spinner-circular-fading {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-spokes-fading {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-peacock-fading {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-dots-fading {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-pinwheel-fading {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-spokes {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-pinwheel {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-windmill {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-skittles {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-spinner-foliage {
animation-duration: 2s;
-webkit-animation-duration: 2s;
background-image: url("data:image/svg+xml;utf8, ");
width: 44px;
height: 44px;
margin: 0 auto; }
.sham-button-bordered-rounded {
background-color: #ef382e;
border-color: #f3655d;
border-style: solid;
border-width: 1px;
cursor: pointer;
display: inline-block;
padding: 7.77778px 25.2px;
text-shadow: 1px 1px 1px #aa150d;
-webkit-box-shadow: 0px 2px 0px 0px #f3655d inset, 0px 0px 0px 4px #e6e6e6;
-moz-box-shadow: 0px 2px 0px 0px #f3655d inset, 0px 0px 0px 4px #e6e6e6;
box-shadow: 0px 2px 0px 0px #f3655d inset, 0px 0px 0px 4px #e6e6e6;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
color: white;
font-size: 14px;
font-weight: 600;
margin-left: .3em; }
.sham-button-bordered-rounded:hover {
background-color: #f04137;
-webkit-box-shadow: 0px 0px 0px 4px #d2d2d2;
-moz-box-shadow: 0px 0px 0px 4px #d2d2d2;
box-shadow: 0px 0px 0px 4px #d2d2d2;
text-shadow: none;
border-color: #ef382e; }
.sham-button-bordered-rounded:active {
background-color: #7b0f09;
text-shadow: none; }
.sham-button-bordered {
background-color: #a3b57b;
border-color: #bac79c;
border-style: solid;
border-width: 1px;
cursor: pointer;
display: inline-block;
padding: 10px 32.4px;
text-shadow: 1px 1px 1px #708149;
-webkit-box-shadow: 0px 2px 0px 0px #bac79c inset, 0px 0px 0px 4px #e6e6e6;
-moz-box-shadow: 0px 2px 0px 0px #bac79c inset, 0px 0px 0px 4px #e6e6e6;
box-shadow: 0px 2px 0px 0px #bac79c inset, 0px 0px 0px 4px #e6e6e6;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: white;
font-size: 18px;
font-weight: 600;
margin-left: .3em; }
.sham-button-bordered:hover {
background-color: #a8b982;
-webkit-box-shadow: 0px 0px 0px 4px #d2d2d2;
-moz-box-shadow: 0px 0px 0px 4px #d2d2d2;
box-shadow: 0px 0px 0px 4px #d2d2d2;
text-shadow: none;
border-color: #a3b57b; }
.sham-button-bordered:active {
background-color: #546136;
text-shadow: none; }
.sham-button-flat {
background-color: #cc6666;
cursor: pointer;
display: inline-block;
padding: 13px 26px;
text-shadow: 1px 1px 1px #993333;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: white;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
margin-left: .3em; }
.sham-button-flat:hover {
background-color: #a3b57b;
text-shadow: none; }
.sham-button-flat:active {
background-color: #732626;
text-shadow: none; }
.sham-button-flat-roomy {
background-color: #cc6666;
cursor: pointer;
display: inline-block;
padding: 17.33333px 32.5px;
text-shadow: 1px 1px 1px #993333;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: white;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
margin-left: .3em; }
.sham-button-flat-roomy:hover {
background-color: #a3b57b;
text-shadow: none; }
.sham-button-flat-roomy:active {
background-color: #732626;
text-shadow: none; }
.sham-button-flat-compact {
background-color: #cc6666;
cursor: pointer;
display: inline-block;
padding: 8.66667px 28.6px;
text-shadow: 1px 1px 1px #993333;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: white;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
margin-left: .3em; }
.sham-button-flat-compact:hover {
background-color: #a3b57b;
text-shadow: none; }
.sham-button-flat-compact:active {
background-color: #732626;
text-shadow: none; }
.sham-button-three-d {
background: #fc780a;
border: solid 1px #f97303;
box-shadow: 0px 5px 0px 0px #d06003, 0px -1px 0px 0px #fc8623 inset, 0px 5px 2px 0px #6c3201;
color: white;
cursor: pointer;
display: inline-block;
font-size: 18px;
font-weight: bold;
/* padding : 10px 30px 10px 30px; */
padding: 11.25px 36px;
text-shadow: 0px -1px 0px #b75502;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-left: .3em; }
.sham-button-three-d:hover {
background: #f97303;
border: solid 1px #f97303;
box-shadow: 0px 5px 0px 0px #d06003, 0px -1px 0px 0px #fc8623 inset, 0px 5px 2px 0px #6c3201;
text-shadow: none; }
.sham-button-three-d:active {
-webkit-box-shadow: 0px 1px 0px 0px #6c3201, 0px -1px 0px 0px #fc780a;
-moz-box-shadow: 0px 1px 0px 0px #6c3201, 0px -1px 0px 0px #fc780a;
box-shadow: 0px 1px 0px 0px #6c3201, 0px -1px 0px 0px #fc780a;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px); }
.sham-button-three-d-square {
background: #cf504e;
border: solid 1px #cd4846;
box-shadow: 0px 5px 0px 0px #b83432, 0px -1px 0px 0px #d46462 inset, 0px 5px 2px 0px #681d1c;
color: white;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
/* padding : 10px 30px 10px 30px; */
padding: 8.75px 28px;
text-shadow: 0px -1px 0px #a42e2c;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-left: .3em; }
.sham-button-three-d-square:hover {
background: #cd4846;
border: solid 1px #cd4846;
box-shadow: 0px 5px 0px 0px #b83432, 0px -1px 0px 0px #d46462 inset, 0px 5px 2px 0px #681d1c;
text-shadow: none; }
.sham-button-three-d-square:active {
-webkit-box-shadow: 0px 1px 0px 0px #681d1c, 0px -1px 0px 0px #cf504e;
-moz-box-shadow: 0px 1px 0px 0px #681d1c, 0px -1px 0px 0px #cf504e;
box-shadow: 0px 1px 0px 0px #681d1c, 0px -1px 0px 0px #cf504e;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px); }
.sham-button-gradient {
cursor: pointer;
display: inline-block;
/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc930), color-stop(100%,#ffa403));
*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdc20e), color-stop(100%, #ffa403));
background: -moz-linear-gradient(center top, #fdc20e 0%, #ffa403 100%);
background: -ms-linear-gradient(top, #fdc20e, #ffa403);
background: -o-linear-gradient(top, #fdc20e, #ffa403);
border-color: #c57e00;
border-style: solid;
border-width: 1px;
color: white;
font-size: 16px;
font-weight: 600;
padding: 10px 25.6px;
text-shadow: 1px 1px 0px #c57e00;
-webkit-box-shadow: 1px 0 1px #ffad1d, 0.5px 1px #fee8a6 inset;
-moz-box-shadow: 1px 0 1px #ffad1d, 0.5px 1px #fee8a6 inset;
box-shadow: 1px 0 1px #ffad1d, 0.5px 1px #fee8a6 inset;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-left: .3em; }
.sham-button-gradient:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdcf41), color-stop(100%, #ffad1d));
background: -moz-linear-gradient(center top, #fdcf41 0%, #ffad1d 100%);
background: -ms-linear-gradient(top, #fdcf41, #ffad1d);
background: -o-linear-gradient(top, #fdcf41, #ffad1d);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
.sham-button-gradient:active {
-webkit-box-shadow: 1px 1px 1px 1px #f0b502 inset;
-moz-box-shadow: 1px 1px 1px 1px #f0b502 inset;
box-shadow: 1px 1px 1px 1px #f0b502 inset; }
.sham-button-gradient-grey {
cursor: pointer;
display: inline-block;
/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc930), color-stop(100%,#ffa403));
*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #d7d7d7));
background: -moz-linear-gradient(center top, #f6f6f6 0%, #d7d7d7 100%);
background: -ms-linear-gradient(top, #f6f6f6, #d7d7d7);
background: -o-linear-gradient(top, #f6f6f6, #d7d7d7);
border-color: #b8b8b8;
border-style: solid;
border-width: 1px;
color: #555555;
font-size: 13px;
font-weight: 600;
padding: 8.125px 20.8px;
text-shadow: 1px 1px 0px #b8b8b8;
-webkit-box-shadow: 1px 0 1px #e4e4e4, 0.5px 1px white inset;
-moz-box-shadow: 1px 0 1px #e4e4e4, 0.5px 1px white inset;
box-shadow: 1px 0 1px #e4e4e4, 0.5px 1px white inset;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
text-shadow: 1px 1px 0px #ffffff;
margin-left: .3em; }
.sham-button-gradient-grey:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #e4e4e4));
background: -moz-linear-gradient(center top, white 0%, #e4e4e4 100%);
background: -ms-linear-gradient(top, white, #e4e4e4);
background: -o-linear-gradient(top, white, #e4e4e4);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
.sham-button-gradient-grey:active {
-webkit-box-shadow: 1px 1px 1px 1px #e9e9e9 inset;
-moz-box-shadow: 1px 1px 1px 1px #e9e9e9 inset;
box-shadow: 1px 1px 1px 1px #e9e9e9 inset; }
.columns {
padding: 0;
*zoom: 1; }
.columns:before, .columns:after {
content: " ";
display: table; }
.columns:after {
clear: both; }
#sidebar .inner {
border: 1px dashed #bcbcbc;
margin-top: 1em;
padding: 1em;
padding-top: 0; }
#main .inner {
border: 1px dashed #bcbcbc;
margin-top: 1em;
padding: 1em;
padding-top: 0; }
.foo .inner {
border: 1px dashed #bcbcbc;
margin-top: 1em;
padding: 1em; }
.bar .inner {
border: 1px dashed #bcbcbc;
margin-top: 1em;
padding: 1em; }
.baddabing {
width: 40em; }
.baddabing .inner {
border: 1px dashed #bcbcbc;
margin-top: 1em;
padding: 1.5em; }
.popup-wrapper {
height: 300px;
width: 300px;
background-color: #e1e1e1;
position: relative;
margin: 1em;
clear: both; }
.popup-wrapper:hover .fox, .popup-wrapper:hover .bax, .popup-wrapper:hover .baz, .popup-wrapper:hover .qux {
display: block; }
.fox {
background: #ffcec1;
border: 1px solid #ff6466;
border-radius: 4px;
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07);
max-width: auto;
min-width: 300px;
padding: 12px;
position: absolute;
z-index: 9999;
bottom: auto;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
max-width: auto;
min-width: 300px;
right: 0;
top: 100%;
display: none; }
.fox:before, .fox:after {
border-style: solid;
content: " ";
position: absolute;
width: 0px; }
.fox:before, .fox:after {
border-width: 0 10px 12px 10px;
left: 0;
margin-left: auto;
margin-right: auto;
right: 0; }
.fox:before {
border-color: transparent transparent #ff6466 transparent;
top: -12px; }
.fox:after {
border-color: transparent transparent #ffcec1 transparent;
top: -11px; }
.bax {
background: #fffbdd;
border: 1px solid #eeee7e;
border-radius: 4px;
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07);
max-width: auto;
min-width: 300px;
padding: 12px;
position: absolute;
z-index: 9999;
bottom: 100%;
left: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 16px;
max-width: auto;
min-width: 300px;
right: 0;
top: auto;
display: none; }
.bax:before, .bax:after {
border-style: solid;
content: " ";
position: absolute;
width: 0px; }
.bax:before, .bax:after {
border-width: 12px 10px 0 10px;
left: 0;
margin-left: auto;
margin-right: auto;
right: 0; }
.bax:before {
border-color: #eeee7e transparent transparent transparent;
bottom: -12px; }
.bax:after {
border-color: #fffbdd transparent transparent transparent;
bottom: -11px; }
.baz {
background: black;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07);
max-width: auto;
min-width: 300px;
padding: 12px;
position: absolute;
z-index: 9999;
bottom: auto;
left: 100%;
margin-bottom: auto;
margin-left: 16px;
margin-right: auto;
max-width: auto;
min-width: 300px;
right: -100%;
top: auto;
display: none;
color: white; }
.baz:before, .baz:after {
border-style: solid;
content: " ";
position: absolute;
width: 0px; }
.baz:before, .baz:after {
border-width: 10px 12px 10px 0;
right: auto;
top: 14px; }
.baz:before {
border-color: transparent transparent transparent transparent;
left: -12px; }
.baz:after {
border-color: transparent black transparent transparent;
left: -11px; }
.qux {
background: #d0eaff;
border: 1px solid #5b83ff;
border-radius: 4px;
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07);
max-width: auto;
min-width: 300px;
padding: 12px;
position: absolute;
z-index: 9999;
bottom: auto;
left: 100%;
margin-bottom: auto;
margin-left: 16px;
margin-right: auto;
max-width: auto;
min-width: 300px;
right: -100%;
top: auto;
display: none; }
.qux:before, .qux:after {
border-style: solid;
content: " ";
position: absolute;
width: 0px; }
.qux:before, .qux:after {
border-width: 10px 12px 10px 0;
right: auto;
top: 14px; }
.qux:before {
border-color: transparent #5b83ff transparent transparent;
left: -12px; }
.qux:after {
border-color: transparent #d0eaff transparent transparent;
left: -11px; }
.my-modal {
color: #a3b57b;
font-weight: bold;
cursor: pointer;
font-size: 1.3em; }
.my-modal:active {
background-color: rgba(0, 0, 0, 0.66);
display: block;
display: block;
height: 100%;
left: 50%;
position: fixed;
position: fixed;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
color: black;
font-weight: normal;
font-size: 1em; }
.my-modal:active .inner {
background-color: white;
border: rgba(0, 0, 0, 0.5) 1px solid;
border-radius: 8px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
display: block;
left: 50%;
padding: 3em 5em !important;
position: fixed;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 999; }