/* This stylesheet is used to style the public-facing components of the plugin. */ html, body { min-height: 100% !important; height: auto !important; } .spu-box, .spu-box *{ box-sizing: border-box; } .spu-bg{ position: fixed; width: 100%; height: 100%; background: #000; top: 0; left: 0; display: none; z-index: 99999; } .spu-box:before, .spu-box:after { content:""; display:table; } .spu-box:after { clear:both; } /* Triggers "haslayout" for IE6/7 */ .spu-box { zoom:1; } .spu-box { position:fixed; z-index: 999999; -moz-box-shadow: 0 0 10px 1px #666; -webkit-box-shadow: 0 0 10px 1px #666; box-shadow: 0 0 10px 1px #666; padding: 25px; margin: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; max-width: 100%; } .spu-box.spu-centered{ margin: 0; } /** Some basic css for box content**/ .spu-box h1{ margin: 1.414285714rem 0; font-size: 1.4em; } .spu-box h2{ margin: 1.414285714rem 0; font-size: 1.2em; } .spu-box h3{ margin: 1.414285714rem 0; font-size: 1.0em; } .spu-box p{ margin: 0 0 1.414285714rem; } .spu-box img{ max-width: 100%; height: auto; } /** end basic style**/ .spu-box.spu-top-left{ top: 0; left: 0; bottom: auto; right: auto; } .spu-box.spu-top-right{ top: 0; right: 0; bottom: auto; left: auto; } .spu-box.spu-bottom-left{ bottom: 0; left: 0; top: auto; right: auto; } .spu-box.spu-bottom-right{ bottom: 0; right: 0; top: auto; left: auto; } .spu-content > *:first-child { margin-top: 0; padding-top: 0; } .spu-content > *:last-child { margin-bottom:0; padding-bottom:0; } .spu-close{ position:absolute; right:8px; top:5px; padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; font-size: 30px; line-height: 1; text-shadow: 0 1px 0 #fff; opacity: .3; filter: alpha(opacity=30); color: #000; } p.spu-powered { position: absolute; bottom: -55px; width: 100%; text-align: center; color: #fff; left: 0px; } p.spu-powered a{ color: #ccc; text-decoration: underline; } .spu-close:hover, .spu-close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .6; filter: alpha(opacity=60); } .spu-shortcode { float: left; line-height: normal !important; } .spu-facebook-page{ text-align: center; display: block; } .spu-shortcode iframe{ max-width: 1200px; } .spu_shortcodes{ zoom: 1; } .spu-content .wysija-msg li{ list-style: none; } .spu_shortcodes:before, .spu_shortcodes:after { content: ""; display: table; } .spu_shortcodes:after { clear: both; } @font-face { font-family: 'spufont'; src:url('../fonts/spufont.eot?sze5my'); src:url('../fonts/spufont.eot?#iefixsze5my') format('embedded-opentype'), url('../fonts/spufont.woff?sze5my') format('woff'), url('../fonts/spufont.ttf?sze5my') format('truetype'), url('../fonts/spufont.svg?sze5my#spufont') format('svg'); font-weight: normal; font-style: normal; } [class^="spu-icon-"], [class*=" spu-icon-"] { font-family: 'spufont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .spu-icon-envelope:before { content: "\f003"; } .spu-icon-check:before { content: "\f00c"; } .spu-icon-close:before { content: "\f00d"; } .spu-icon-eye:before { content: "\f06e"; } .spu-icon-gears:before { content: "\f085"; } .spu-icon-angle-up:before { content: "\f106"; } .spu-icon-angle-down:before { content: "\f107"; } .spu-icon-spinner:before { content: "\f110"; } .spu-spinner { -webkit-animation: spu-rotate 1s infinite linear; -moz-animation: spu-rotate 1s infinite linear; -o-animation: spu-rotate 1s infinite linear; margin: 5px; display: none; } @keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-webkit-keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-moz-keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-o-keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 620px) { .spu-box.taller-than-viewport { left: 0 !important; top: 100px !important; position: absolute !important; } .spu-box{ margin: 0; } }