html { }
body { min-width:1000px; font: normal 14px 'helveticaneuecyrroman'; }
/* Default */
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clear { clear: both; }
.clear_l { clear:left; }
.clear_r { clear:right; }
.fl_l { float:left;}
.fl_r { float:right; width:57px; height:57px}
.relative { position: relative;}
.hidden { display:none; }
.block { display:block; }
.inline { display:inline; }
.inline-b { display: inline-block; *display: inline; *zoom:1;}
.full { width:100%; }
.one-second { width:50%; }
.one-third { width:33,3333%; }
.quarter { width:25%; }
.one-fifth { width:20%;}
textarea:focus,
input:focus{
border-color: rgba(82, 168, 236, 0.8)!important;
border-color: #52a8ec\0/!important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
/* Typography */
@font-face {
font-family: 'helveticaneuecyrroman';
src: url('../fonts/helveticaneuecyr-roman-webfont.eot');
src: url('../fonts/helveticaneuecyr-roman-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/helveticaneuecyr-roman-webfont.woff') format('woff'),
url('../fonts/helveticaneuecyr-roman-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'helveticaneuecyrbold';
src: url('../fonts/helveticaneuecyr-bold-webfont.eot');
src: url('../fonts/helveticaneuecyr-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/helveticaneuecyr-bold-webfont.woff') format('woff'),
url('../fonts/helveticaneuecyr-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1 { font: normal 25px Arial; color:#000; }
h2 { font: normal 21px Arial; color:#000; }
h3 { font: normal 18px Arial; color:#000; }
a { color:#000; text-decoration:none; }
p { font: normal 15px Arial; color:#000; }
::selection{
background:#87d1f3;
color:#fff;
}
-webkit-::selection{
background:#87d1f3;
color:#fff;
}
::-moz-selection{
background:#87d1f3;
color:#fff;
}
/* Styles */
/* btns */
.btn_type1 {
padding:13px 65px 13px;
display: inline-block;
border:0;
background: url(../img/bg/btn_type1.png) left top repeat-x;
border-radius: 12px;
font-size:28px;
font-family: 'helveticaneuecyrbold';
color:#fff;
text-shadow:2px 2px rgba(0,0,0,0.3);
border-left:1px solid #9a1908;
border-right:1px solid #9a1908;
box-shadow: 0px 3px 0px rgba(0,0,0,0.1);
box-size:border-box;
cursor: pointer;
}
.btn_type1:hover {
background-position: left -59px;
}
.btn_type1:active {
background-position: left -118px;
}
.add_to_favorites {
position: absolute;
left:50%;
margin-left:-430px;
top:0px;
z-index:10;
width: 95px;
height: 156px;
background: transparent url(../img/pics/add_to_favorites.png) left top no-repeat;
/*-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;*/
}
.add_to_favorites:hover {
background-position: -96px top;
}
/*
.add_to_favorites:hover {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}*/
.middle {
padding-top:10px;
margin:0px 170px;
}
.brand {
width: 358px;
height: 108px;
margin:10px auto;
/*-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;*/
}
/*.brand:hover {
-webkit-animation: rotatein 1s ease-in-out;
}
*/
.brand img {
display: block;
cursor: pointer;
margin: 0 auto;
}
.odoTicker {
height:28px;
overflow:hidden;
position:relative;
}
.odoTicker .odoNumber {
height:305px;
width:19px;
position:relative;
background-image:url(http://electriceasel.com/t4c/numbers.gif);
float:left;
overflow:hidden;
margin:0 1px;
}
@-webkit-keyframes rotatein {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes rotateout {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(-360deg); }
}
.main_nav {
margin-top:20px;
padding-top:17px;
background:url(../img/bg/shadow1.png) center top no-repeat;
}
.main_nav { text-align: center; }
.main_nav li {
display: inline-block;
*display:inline;
*zoom:1;
text-align: left;
margin:0px 15px;
margin-bottom:10px;
cursor: pointer;
}
.main_nav li a{
font:normal 16px 'helveticaneuecyrbold';
color:#959595;
display: block;
*zoom:1;
}
.main_nav .current a {
color:#252525;
}
.main_nav ul li:hover a {
color:#252525;
}
@-webkit-keyframes tada {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.7) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
}
@-moz-keyframes tada {
0% {
-moz-transform:scale(1)
}
10%,20% {
-moz-transform:scale(0.7) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-moz-transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
-moz-transform:scale(1.1) rotate(-3deg)
}
100% {
-moz-transform:scale(1) rotate(0)
}
}
@-o-keyframes tada {
0% {
-o-transform:scale(1)
}
10%,20% {
-o-transform:scale(0.7) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-o-transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
-o-transform:scale(1.1) rotate(-3deg)
}
100% {
-o-transform:scale(1) rotate(0)
}
}
@keyframes tada {
0% {
transform:scale(1)
}
10%, 20% {
transform:scale(0.7) rotate(-3deg)
}
30%, 50%, 70%, 90% {
transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
transform:scale(1.1) rotate(-3deg)
}
100% {
transform:scale(1) rotate(0)
}
}
.barcode-box {
position: relative;
margin:35px auto 0px;
width:460px;
box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .27);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.barcode-box .bg_middle {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: url(../img/bg/bg_middle.png) left 25px repeat-y;
}
.barcode-box .bg_top {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
background: url(../img/bg/bg_top.png) left top no-repeat;
}
.barcode-box .bg_bottom {
background: url(../img/bg/bg_bottom.png) left bottom no-repeat;
position: relative;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
min-height: 606px;
}
.barcode-wrap {
position: relative;
margin:0px 40px;
}
.barcode-box .qr_layer_wrap {
position: absolute;
left:50%;
margin-left:-100px;
bottom:-214px;
width:200px;
height: 220px;
text-align: center;
overflow: hidden;
display: none;
}
.qr_layer:after {
content:'';
position:absolute;
top:0px;
left:8px;
right:7px;
z-index:100;
height:40px;
background: url(../img/bg/qr_shadow.png) center top no-repeat;
}
.barcode-box .o_visible {
overflow: visible;
}
.barcode-box .qr_layer {
position: relative;
top:-177px;
background: url(../img/bg/qr_layer.png) left bottom no-repeat;
z-index:10;
height: 100%;
}
.skew {
-moz-transform:skewy(7deg);
-webkit-transform:skewy(7deg);
-o-transform:skewy(7deg);
transform:skewy(7deg);
}
.qr_layer > div{
position: absolute;
top:0px;
margin-top:12px;
width:143px;
max-height:143px;
left:50%;
margin-left:-72px;
display: table;
}
.qr_layer > div > div {
display: table-cell;
vertical-align: middle;
width: 100%;
text-align: center;
position: relative;
}
.barcode-box header {
font:normal 28px 'helveticaneuecyrbold';
text-align: center;
color:#fff;
padding-top:44px;
text-shadow:1px 1px 0px rgba(0,0,0,0.25);
}
.row,
.row_select {
position: relative;
margin-top:31px;
}
.row_select {
margin-top:31px;
}
.tooltip {
position: relative;
width:200px;
font-size:14px;
line-height: 23px;
z-index:-1;
}
.tooltip_arrow_LT {
position: absolute;
left:-10px;
top:-60px;
width: 116px;
height:60px;
background: url(../img/bg/tooltip_arrow_LT.png) left top no-repeat;
}
.tooltip_arrow_RB {
position: absolute;
left:60px;
bottom:-130px;
width:116px;
height: 120px;
background: url(../img/bg/tooltip_arrow_RB.png) left top no-repeat;
}
.tooltip {
position: absolute;
right:-300px;
top:80px;
}
.row input[type="text"],
.row_select input[type="text"]{
cursor: pointer;
}
.row input,
.row textarea,
.row_select input
{
border:none;
background: url(../img/bg/trans1.png);
white-space: normal;
border-radius:11px;
height:44px;
width: 100%;
display: block;
font:normal 24px 'helveticaneuecyrroman';
padding-left:24px;
padding-right:24px;
/*color:#ff7939;*/
color: #fff;
-webkit--moz-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow: auto;
box-shadow:
inset 0px 0px 13px rgba(0,0,0,0.15),
0px 2px 0px rgba(255,255,255,0.23);
cursor: pointer;
}
.row textarea { padding-top:11px; height:90px; line-height: 21px; resize:none;}
#feedback .active,
.row .active,
.row_select .active {
background: #fff!important;
/*color:#c2c2c2;*/
color:#252525;
}
.row_select input[type="text"]:hover,
.row input[type="text"]:hover,
.row textarea:hover {
background: url(../img/bg/trans2.png);
}
.row_select .btn_select {
background-position:left -12px;
position: absolute;
right:21px;
top:14px;
height:13px;
cursor: pointer;
}
.row_select.active .btn_select {
background-position:left 0px;
}
.row_select .drop{
display: none;
position: absolute;
z-index:12;
top:90%;
left:10px;
right:10px;
overflow:auto;
max-height:280px;
background: #fff url(../img/bg/shadow2.png) left 2px repeat-x;
padding-top:15px;
border-top:1px solid #e9e9e9;
box-shadow: 0px 27px 39px rgba(0,0,0,0.25);
}
.row_select .drop li {
padding:6px 22px;
padding-top:5px;
font:normal 14px 'helveticaneuecyrroman';
color:#252525;
cursor: pointer;
margin-top:4px;
}
.row_select .drop li:hover,
.row_select .drop .active {
background: #ffff9e!important;
}
.btn_select {
width:16px;
height: 25px;
background: url(../img/bg/btn_select.png) left top no-repeat;
}
.options .hidden {
display: none;
}
.more_options {
padding-top:25px;
padding-left:25px;
}
.more_options span {
display: inline-block;
cursor: pointer;
padding-left:35px;
padding-top:5px;
padding-bottom:4px;
background: url(../img/bg/gear.png) left top no-repeat;
font-size:14px;
font-family: 'helveticaneuecyrbold';
color:#990000;
text-shadow:1px 1px 0px rgba(255,121,57, 0.9);
}
.more_options span:hover {
background-position: left -45px;
color:#7d1c11;
}
.center { text-align: center;}
.barcode-box form button {
margin:53px 0px;
}
.label {
cursor: pointer;
position: relative;
padding-left:33px;
padding-top:2px;
font-size:14px;
color:#fff;
text-shadow:1px 1px rgba(0,0,0,0.25);
}
.labelc {
cursor: pointer;
position: relative;
padding-left:33px;
padding-top:2px;
font-size:14px;
color:#fff;
text-shadow:1px 1px rgba(0,0,0,0.25);
}
.colorpicker {
padding-top:0px;
}
.colorpicker p {
color: #fff;
padding-bottom: 5px;
}
.colorpicker .minicolors {
margin-bottom: 5px;
}
.label .color-box {
width: 20px;
height: 20px;
border:1px solid #ff7939;
position: absolute;
left:0px;
top:0px;
}
.label .radio_button {
width: 20px;
height: 22px;
position: absolute;
left:0px;
top:0px;
background:url(../img/bg/radio_button.png) left top no-repeat;
}
.label.checked .radio_button{
background-position: left -31px;
}
.labelc .checkbox {
width: 20px;
height: 22px;
position: absolute;
left:0px;
top:0px;
background:url(../img/bg/checkbox.png) left top no-repeat;
}
.labelc.checked .checkbox{
background-position: left -31px;
}
.options .label {
margin-bottom:18px;
}
.options header {
font-size:18px;
text-align: left;
padding-top:0px;
margin-bottom:13px;
}
.options {
margin-left:-28px;
}
.options section.sect1 {
margin-top:35px;
margin-left:52px;
float:left;
}
.options section {
margin-top:35px;
margin-left:20px;
float:left;
}
.options section:last-child {
margin-bottom:0px;
}
.black { background: #000;}
.white { background: #fff;}
.barcode_intro {
margin-top:210px;
position: relative;
display: none;
height: 180px;
}
.barcode_intro .container {
position: relative;
}
.barcode_intro .tooltip {
position: absolute;
top:-86px;
left:0px;
opacity: 0;
}
.barcode_intro .wrap {
overflow: hidden;
}
.barcode_intro header {
display: none;
font-size:32px;
color:#252525;
margin-bottom:26px;
}
.barcode_intro header strong {
font-family: 'helveticaneuecyrbold';
}
.barcode_intro .barcode_format { text-align: center;}
.barcode_intro .barcode_format a {
display: inline-block;
position: relative;
width:100px;
/*height:115px;*/
height:115px;
/*left:10000px;*/
opacity: 0;
margin:0px 13px;
}
.barcode_intro .barcode_format .eps {
background: url(../img/bg/eps.png) left top no-repeat;
}
.barcode_intro .barcode_format .png {
background: url(../img/bg/png.png) left top no-repeat;
}
.barcode_intro .barcode_format .pdf {
background: url(../img/bg/pdf.png) left top no-repeat;
}
.barcode_intro .barcode_format .svg {
background: url(../img/bg/svg.png) left top no-repeat;
}
.ui-effects-wrapper { display: inline-block!important;}
.share-box {
margin: 0 auto;
margin-top:45px;
}
.previewbox {
border: none;
padding: 10px;
line-height: 16px;
width: 540px;
margin: 0 auto;
}
.addthis_toolbox {
border: none;
margin: 0 auto;
padding: 0;
width: 400px;
}
.yi {
background: #fff url(../img/bg/obg-bg.jpg) center 5px no-repeat;
padding-top:0px;
height: 188px;
margin-top: 50px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.yi:hover {
background: #fff url(../img/bg/obg-bg.jpg) center top no-repeat;
}
.yi .wrap{height: 128px;}
.y-line {height: 60px; background-color: #fece30; width: 100%;}
.y-line .container {background: #fece30 url(../img/bg/yi-txt.gif) left 8px no-repeat; height: 60px; position: relative;}
.yi-button {width: 128px; height: 51px; background: #1997d2 url(../img/bg/yi-button.png) 0 0 no-repeat; position: absolute; z-index: 100; top: 6px; right: 140px;}
.yi-button:hover {background: #1997d2 url(../img/bg/yi-button.png) 0 -51px no-repeat}
.opener {
background: #000 url(../img/bg/opener.jpg) center top no-repeat;
padding-top:0px;
}
.opener .wrap {
background: transparent url(../img/bg/yi-border.png) center top repeat-x;
min-height:718px;
}
.opener section h2 {
color:#fff;
margin-top:55px;
font:normal 32px 'helveticaneuecyrbold';
line-height: 32px;
}
.opener section p {
font-size:13px;
color:#636363;
line-height: 20px;
margin-top:10px;
}
.opener .s1 {
width:48%;
}
.opener .s2 {
width: 49%;
margin-top: 0px;
}
.opener .clearfix {
position: relative;
}
.feed-back {
margin-top:70px;
}
.feed-back section {
width:352px;
margin:0px auto;
}
.feed-back section header {
font-size:32px;
position: relative;
right:20px;
color:#252525;
}
.feed-back section header strong {
font-family: 'helveticaneuecyrbold';
font-weight: normal;
}
.feed-back div {
margin-top:14px;
}
.feed-back div input[type="text"],
.feed-back div textarea {
position:relative;
right:20px;
background: #fafafa;
border:1px solid #d3d3d3;
width: 100%;
font-size:24px;
/*color:#d7d7d7;*/
color:#252525;
border-radius:12px;
padding:9px 20px 8px;
box-shadow: inset 0px 0px 13px rgba(0,0,0,0.15);
font-family: 'helveticaneuecyrroman';
resize:none;
white-space: normal;
}
.feed-back div input[type="text"]:focus,
.feed-back div textarea:focus{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.fbmess {
width: 352px;
margin:0 auto;
margin-top: 15px;
text-align: center;
}
.scroll_top {
position: fixed;
bottom:30px;
cursor: pointer;
right:20px;
display: none;
}
.feed-back div textarea { height:90px;}
.footer {
margin-top:30px;
margin-bottom:30px;
text-align: center;
background: transparent url(../img/bg/worldmap.png) center top no-repeat;
}
.footer .info {
color: #808080;
font-size:11px;
line-height: 15px;
width: 630px;
display: block;
margin: 0 auto;
}
.footer a {
color: #808080;
}
.alltime {
color: #f8694d;
font-size: 120px;
font-weight: 800;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.tat {
padding-top:50px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 28px;
font-weight: 200;
}
.atd {
padding-bottom:70px;
padding-top: 10px;
}
.donate_wrap {
/*display: none;*/
}
.donate {
width: 630px;
margin: 0 auto;
}
.donate p {
color: #808080;
font-size: 13px;
line-height: 20px;
}
/* Media */
.container { width:970px; margin-left:auto; margin-right:auto; }
/*
@media (max-width: 979px) {
.container { width: 724px; }
.add_to_favorites { left:20px; margin:0px;}
.row .tooltip,
.row_select .tooltip { display: none ;}
.barcode_intro .tooltip { display: none;}
.middle { margin:0px;}
.footer .info { width: 45%;}
}
@media (min-width: 768px) and (max-width: 979px){
.container { width: 724px; }
}
@media (max-width: 767px) {
.container { width:auto; padding:0px 20px;}
.add_to_favorites { display: none;}
.scroll_top { display: none!important;}
.brand img { display:block; max-width: 100%;}
.barcode-box { width:430px; }
.barcode-box header { font-size:22px;}
.row input, .row textarea { font-size:18px;}
.opener section h2 { margin-top:20px;}
.opener .s1 { width: auto;}
.opener .s2 { width: auto;}
.feed-back section header { right:0px;}
.feed-back div input[type="text"], .feed-back div textarea {
box-sizing:border-box;
right:0px;
}
.footer .info { width: 75%;}
.footer .share {
clear: both;
margin-right:0px;
margin-top:20px;
}
}
@media (max-width: 480px) {
.barcode-box { width:auto;}
.barcode-box header { font-size:19px;}
.row input[type="text"],
.row textarea,
.row_select input[type="text"]{ font-size:15px; height:44px; padding-left:15px;}
}
*/
input::-webkit-input-placeholder { color: #ff7939; }
input:-moz-placeholder { color: #ff7939; }
input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder { color:transparent; }
input:focus::-moz-placeholder,textarea:focus::-moz-placeholder { color:transparent; }
textarea::-webkit-input-placeholder { color: #ff7939; }
textarea:-moz-placeholder { color: #ff7939; }
.feed-back div input::-webkit-input-placeholder { color: #d7d7d7; }
.feed-back div input:-moz-placeholder { color: #d7d7d7; }
.feed-back div input:focus::-webkit-input-placeholder,.feed-back div textarea:focus::-webkit-input-placeholder { color:transparent; }
.feed-back div input:focus::-moz-placeholder,.feed-back div textarea:focus::-moz-placeholder { color:transparent; }
.feed-back div textarea::-webkit-input-placeholder { color: #d7d7d7; }
.feed-back div textarea:-moz-placeholder { color: #d7d7d7; }