When I load my web page, I am getting above error along with
Started GET "/assets/application.css" for 127.0.0.1 at 2012-03-05 10:07:42 +0530
Error compiling asset application.css:
NoMethodError: undefined method `[]' for nil:NilClass
(in /Users/ritvvijparrikh/Projects/tr/app/assets/stylesheets/tr/sprites.css.scss)
Served asset /application.css - 500 Internal Server Error
My file sprites.css.scss was not changed for long time. But then I recently upgraded to Rails 3.2.2
My sprites.css.scss file is
/* Public Area Sprites */
.public_sprites {
background: asset-url('public_area.jpg', image) no-repeat top left;
}
.sprite-aws{ background-position: 0 0; width: 159px; height: 58px; display: inline-block }
.sprite-gr{ background-position: 0 -108px; width: 111px; height: 91px; display: inline-block }
.sprite-hn{ background-position: 0 -249px; width: 111px; height: 91px; display: inline-block }
.sprite-i1{ background-position: 0 -390px; width: 28px; height: 30px; display: inline-block }
.sprite-i2{ background-position: 0 -470px; width: 28px; height: 30px; display: inline-block }
.sprite-i3{ background-position: 0 -550px; width: 28px; height: 28px; display: inline-block }
.sprite-i4{ background-position: 0 -628px; width: 28px; height: 28px; display: inline-block }
.sprite-kb{ background-position: 0 -706px; width: 112px; height: 92px; display: inline-block }
.sprite-nb{ background-position: 0 -848px; width: 111px; height: 91px; display: inline-block }
.sprite-pk{ background-position: 0 -989px; width: 111px; height: 91px; display: inline-block }
.sprite-postmark{ background-position: 0 -1130px; width: 171px; height: 35px; display: inline-block }
.sprite-rd{ background-position: 0 -1215px; width: 111px; height: 91px; display: inline-block }
.sprite-rp{ background-position: 0 -1356px; width: 111px; height: 91px; display: inline-block }
.sprite-sb{ background-position: 0 -1497px; width: 111px; height: 91px; display: inline-block }
.sprite-seal{ background-position: 0 -1638px; width: 119px; height: 45px; display: inline-block }
.sprite-slider1{ background-position: 0 -1733px; width: 500px; height: 320px; display: inline-block }
.sprite-slider2{ background-position: -550px 0; width: 500px; height: 320px; display: inline-block }
.sprite-slider3{ background-position: -550px -370px; width: 500px; height: 320px; display: inline-block }
.sprite-sr{ background-position: -550px -740px; width: 112px; height: 92px; display: inline-block }
.sprite-track_big{ background-position: -550px -882px; width: 415px; height: 304px; display: inline-block }
.sprite-trustlaw{ background-position: -550px -1236px; width: 216px; height: 72px; display: inline-block }
.sprite-unknown{ background-position: -550px -1358px; width: 74px; height: 74px; display: inline-block }
.sprite-vm{ background-position: -550px -1482px; width: 111px; height: 91px; display: inline-block }
/* Contact Sprites */
.contact_sprites {
background: asset-url('contact.png', image) no-repeat top left;
}
.sprite-email{ background-position: 0 0; width: 17px; height: 17px; display: inline-block }
.sprite-facebook{ background-position: 0 -67px; width: 17px; height: 17px; display: inline-block }
.sprite-linkedin{ background-position: 0 -134px; width: 17px; height: 17px; display: inline-block }
.sprite-mobile{ background-position: 0 -201px; width: 17px; height: 17px; display: inline-block }
.sprite-phone1{ background-position: 0 -268px; width: 17px; height: 17px; display: inline-block }
.sprite-phone2{ background-position: 0 -335px; width: 16px; height: 13px; display: inline-block }
.sprite-skype{ background-position: 0 -398px; width: 17px; height: 17px; display: inline-block }
.sprite-twitter{ background-position: 0 -465px; width: 17px; height: 17px; display: inline-block }
.sprite-website{ background-position: 0 -532px; width: 17px; height: 17px; display: inline-block }
.sprite-youtube{ background-position: 0 -599px; width: 17px; height: 17px; display: inline-block }
/* Login Area Sprites */
.login_sprites {
background: asset-url('login_area.png', image) no-repeat top left;
}
.sprite-calendar_39x39{ background-position: 0 0; width: 39px; height: 39px; display: inline-block }
.sprite-deletex{ background-position: 0 -89px; width: 17px; height: 17px; display: inline-block }
.sprite-off{ background-position: 0 -156px; width: 95px; height: 27px; display: inline-block }
.sprite-on{ background-position: 0 -233px; width: 94px; height: 27px; display: inline-block }
.sprite-status_gray{ background-position: 0 -310px; width: 12px; height: 13px; display: inline-block }
.sprite-status_green{ background-position: 0 -373px; width: 12px; height: 13px; display: inline-block }
.sprite-status_red{ background-position: 0 -436px; width: 12px; height: 12px; display: inline-block }
.sprite-status_yellow{ background-position: 0 -498px; width: 12px; height: 13px; display: inline-block }
I was having the same problem. I solved the problem following the configurations described on this post:
http://blog.55minutes.com/2012/01/getting-compass-to-work-with-rails-31-and-32/
In my case, the problem was I didn't rename application.css to application.scss.
Related
I read several places that its a CSS issue but I can't figure out how to fix it.
When a user types information into the website, it does not display any text but the cursor moves as if text was typed.
CSS file
*:focus,
*:hover,
*:active {
outline: none;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
color: #6a6f8c;
background: #fafafa;
font: 600 16px/18px 'Open Sans', sans-serif;
height: auto;
}
*,
:after,
:before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
a {
color: inherit;
text-decoration: none
}
.login-wrap {
width: 100%;
margin: auto;
max-width: 525px;
min-height: 1070px;
position: relative;
background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
background-size: cover;
}
.login-html {
width: 100%;
height: 100%;
position: absolute;
padding: 90px 70px 50px 70px;
background: rgba(40, 57, 101, .9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
text-transform: uppercase;
}
.login-html .tab {
font-size: 22px;
margin-right: 15px;
padding-bottom: 5px;
margin: 0 15px 10px 0;
display: inline-block;
border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked+.tab,
.login-html .sign-up:checked+.tab {
color: #fff;
border-color: #1161ee;
}
.login-form {
min-height: 345px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.login-form .group {
margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
width: 100%;
color: #fff;
display: block;
}
.login-form .group .input,
.login-form .group .button {
border: none;
padding: 15px 20px;
border-radius: 25px;
background: rgba(255, 255, 255, .1);
}
.login-form .group input[data-type="password"] {
text-security: circle;
-webkit-text-security: circle;
}
.login-form .group .label {
color: #aaa;
font-size: 12px;
}
.login-form .group .button {
background: #1161ee;
}
.login-form .group label .icon {
width: 15px;
height: 15px;
border-radius: 2px;
position: relative;
display: inline-block;
background: rgba(255, 255, 255, .1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
content: '';
width: 10px;
height: 2px;
background: #fff;
position: absolute;
-webkit-transition: all .2s ease-in-out 0s;
transition: all .2s ease-in-out 0s;
}
.login-form .group label .icon:before {
left: 3px;
width: 5px;
bottom: 6px;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
top: 6px;
right: 0;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group .check:checked+label {
color: #fff;
}
.login-form .group .check:checked+label .icon {
background: #1161ee;
}
.login-form .group .check:checked+label .icon:before {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked+label .icon:after {
-webkit-transform: scale(1) rotate(-45deg);
transform: scale(1) rotate(-45deg);
}
.login-html .sign-in:checked+.tab+.sign-up+.tab+.login-form .sign-in-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.login-html .sign-up:checked+.tab+.login-form .sign-up-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.hr {
height: 2px;
margin: 60px 0 50px 0;
background: rgba(255, 255, 255, .2);
}
.foot-lnk {
text-align: center;
}
.fullwidth {
width: 100%;
}
.fulheight {
height: 100%;
}
.main {
background: #fafafa;
padding: 15px;
}
.btn__grp button:last-child {
margin-right: 15px;
}
.blank_input_hack {
height: 0;
width: 0;
opacity: 0;
}
.input option {
color: black;
}
#promoForm {
max-width: 600px;
margin: 0 auto;
}
/*.tooltip.ng-scope.ng-isolate-scope.top.fade.in{
word-break: break-word;
}*/
.color-box>div {
display: inline-block;
margin-bottom: 15px;
}
.color-box>div:not(:last-child) {
margin-right: 3px;
}
.color-box>div label {
margin: 0;
padding: 3px;
border: solid 1px #979797;
}
.btn.pull-right {
margin-right: 10px;
}
#user {
text-transform: lowercase;
}
input,
textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
table tr th {
background: #337ab7;
color: white;
text-align: left;
vertical-align: center;
}
The website is https://braindrain.developmentserver.me
I think I have found the solution. Nice tip if you didn't know this, you can plug your iPhone into a Mac via usb and use the web inspector remotely. I found that you have a div before the username input form with the class blank_input_hack. Once I removed this, then the input works flawlessly, styled and all. Not sure why this was there in the first place, but there you go! Hope this helps!
I'm trying to use Stellar.js as multiple backgrounds inside of single element such as content. Anything that I've tried not working at all..
Default output look like this:
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url(images/1.png);
}
.autumn {
background-image: url(images/2.png);
}
.winter {
background-image: url(images/3.png);
}
.spring {
background-image: url(images/4.png);
}
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
But I want it to be something like that
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
}
<div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>
I'm quite new to this and need some help. Maybe it just couldn't work as I want?
Here's the code. I can't figure out how to make the image be horizontally centered inside the div. Thanks in advance!
.first {
height: 100%;
}
.first img{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
}
.first {
height: 100%;
text-align: center;
}
.first img{
width: 100px;
height: 100px;
position: relative;
display: inline-block; // this line is only required if your img is not already using display: inline-block
}
I can't seem to get the header and footer to span across a mobile device such as iPhone, and the footer won't stick to the bottom. I've tried a meta code such as this:
My CSS mobile:
#charset "utf-8";
#logo {
left: 5%;
}
#navMenu {
position: relative;
left: 5%;
}
#content {
position: relative;
width: 95%;
height: 600px;
left: 2px;
right: 2px;
}
#footer {
position: fixed;
bottom: 0;
z-index: 5;
}
I've added this to the HTML meta:
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 maximum-scale=1.0,
Here is my desktop CSS incase something may override my mobile:
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 1;
box-shadow: 0px 0px 0px 1px rgba(82, 82, 82, 0.2);
background-color: rgba(234,234,234,1);
}
#navMenu {
position: absolute;
left: 55%;
top: 55px;
width: 325px;
height: 39px;
z-index: 3;
}
#logo {
position: absolute;
left: 20%;
top: 95px;
width: 300px;
height: 85px;
z-index: 1;
}
#pageLocation {
position: absolute;
right: 20%;
top: 240px;
width: 69px;
height: 25px;
z-index: 5;
color: rgba(50,153,204,0.1);
}
#content {
position: absolute;
right: 20%;
top: 270px;
height: 600px;
width: 60%;
padding: 10px;
margin-bottom: 50px;
z-index: 2;
border-bottom-color: rgba(50,153,204,0.2);
border-bottom-width: thin;
border-bottom-style: solid;
border-radius: 5px;
background-color: rgba(204,204,204,.1);
border-right-width: thin;
border-right-style: solid;
border-right-color: rgba(204,204,204,0.2);
border-left-width: thin;
border-left-style: solid;
border-left-color: rgba(50,153,204,0.2);
box-shadow: 0px .5px .5px .5px #333;
}
#footer {
position: absolute;
alignment: center;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 2px;
box-shadow: 0px 0px 3px 0px #333;
background-color: rgba(204,204,204,.7);
}
I've tried sticky footer techniques with no luck. I've gotten the footer with this method to stick to the bottom, but it just overlaps content when I scroll back up. Please help, this is very frustrating to get a simple iPhone/android capable footer that sits at the bottom of the page.
I'm trying out some webkit transitions on a site and have come across a problem on iOS devices. I have six images being given a random rotation every second. The transition works fine for five out of the six images but for some reason when using the iPad or the iPhone the sixth image disappears during the transition.
You can view the example HERE.
CSS:
.b1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.b2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.m1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.m2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.s1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
position: relative;
top: 6px;
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.s2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
position: relative;
top: 7px;
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
Javascript:
var ranNum;
function randomFromTo(from, to){
ranNum = Math.floor(Math.random() * (to - from + 1) + from);
ranNum = ranNum + "deg";
return ranNum;
}
setInterval(function newNum(){
document.getElementById("needle_b1").style.webkitTransform = "rotate("+randomFromTo(0,293)+")";
document.getElementById("needle_b2").style.webkitTransform = "rotate("+randomFromTo(0,285)+")";
document.getElementById("needle_m1").style.webkitTransform = "rotate("+randomFromTo(0,314)+")";
document.getElementById("needle_m2").style.webkitTransform = "rotate("+randomFromTo(0,223)+")";
document.getElementById("needle_s1").style.webkitTransform = "rotate("+randomFromTo(0,130)+")";
document.getElementById("needle_s2").style.webkitTransform = "rotate("+randomFromTo(0,95)+")";
}, 2000);
I originally thought it was a memory issue but removing the transition from all but that one image doesn't make a difference. Any ideas for why this is would be happening?
Your z-index values are starting from -2. In my experience Webkit doesn't mind that you use negative values, but it seems Mobile Webkit does.
If you put a border on .b1_needle you will notice it appears below .bigOne, despite having a z-index of 100.
Start your z-indexes from 0 and then go up.
Copy and paste this CSS to verify:
#media screen and (orientation:portrait)
{
.container {
background: url(../images/back_port.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 768px;
height: 1004px;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.bigOne {
position: absolute;
right: 29px;
top: 21px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.bigTwo {
position: absolute;
right: 29px;
bottom: 21px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.midOne {
position: absolute;
right: 502px;
top: 243px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.midTwo {
position: absolute;
right: 502px;
bottom: 243px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.smallOne {
position: absolute;
top: 50px;
right: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.smallTwo {
position: absolute;
bottom: 50px;
right: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.statusBox {
position: absolute;
left: 273px;
top: 373px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
width: 150px;
height: 237px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.iconBox {
position: absolute;
left: 465px;
top: 463px;
width: 264px;
height: 58px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
}
#media screen and (orientation:landscape)
{
.container {
background: url(../images/back_land.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 1024px;
height: 748px;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.bigOne {
position: absolute;
left: 21px;
top: 29px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.bigTwo {
position: absolute;
right: 21px;
top: 29px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.midOne {
position: absolute;
left: 243px;
top: 482px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.midTwo {
position: absolute;
right: 243px;
top: 482px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.smallOne {
position: absolute;
left: 50px;
top: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.smallTwo {
position: absolute;
right: 50px;
top: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.statusBox {
position: absolute;
left: 428px;
top: 99px;
background-color: #000;
border: 10px solid #999;
-webkit-border-radius: 8px;
width: 150px;
height: 237px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.iconBox {
position: absolute;
left: 370px;
top: 380px;
width: 264px;
height: 58px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
}
.statusData{
width: 126px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.statusLogo{
background: url(../images/mccaLogo.png);
height: 87px;
width: 100%;
}
.digitalTxt{
font-family: 'Digital7Mono';
font-size: 32px;
color: #fff;
width: auto;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
.statusDate{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.statusTime{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.statusLoc{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.b1_notch {
width: 100%;
height: 100%;
background: url(../images/b1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.b1_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.b2_notch {
width: 100%;
height: 100%;
background: url(../images/b2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.b2_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.m1_notch {
width: 100%;
height: 100%;
background: url(../images/m1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.m1_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.m2_notch {
width: 100%;
height: 100%;
background: url(../images/m2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.m2_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.s1_notch {
width: 100%;
height: 100%;
background: url(../images/s1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.s1_needle {
width: 100%;
height: 100%;
z-index: 1;
position: relative;
top: 6px;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.s2_notch {
width: 100%;
height: 100%;
background: url(../images/s2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.s2_needle {
width: 100%;
height: 100%;
z-index: 2;
position: relative;
top: 7px;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}