Code: Select all
/****************************************** reset ******************************************/
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, font, 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, input, textarea
{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;font-size:12px;font-weight:normal;line-height:normal;}
b,strong {font-weight:bold;}
i {font-style:italic;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse;border-spacing:0;}
a, span {vertical-align:baseline;}
header, nav, section, article, aside, footer {display:block;}
/****************************************** general styles ******************************************/
html, body {width:100%;height:100%;}
body {font:normal 12px "Century Gothic", Arial, Helvetica, sans-serif; color:#999999; font-weight: normal;}
/* p {padding:20px 0 0 0;color:#999;} */
a {color:#2f2e2e;text-decoration:none;}
a:hover {text-decoration:none; color:#8a8989;}
h1 { color: #2F2E2E;
font-family: 'Century Gothic',sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
padding:15px 20px 0 0;
text-transform: uppercase;}
/* h1 span {float:right;padding:3px 0 0 0;font-size:12px;font-weight:normal; color: #2F2E2E;text-transform:none;} */
h2,
h3,
h4 {padding:20px 0 0 0;font-size:14px;font-weight:bold;color:#000;text-transform:uppercase; font-family: 'Century Gothic',sans-serif;}
.orange {color: #f86907;}
/****************************************** layout ******************************************/
#wrapper1 {
min-width:1200px;
min-height:100%;
}
#wrapper2 {
height:100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
/****************************************** hook home ******************************************/
/* tmnivoslider.tpl */
#tmnivoslider {
width:700px;
height:150px;
}
#slider {
float: left;
margin-left: 242px;
margin-top: 0;
margin-bottom: 201px;
width:700px;
height:150px;
overflow: hidden;
-webkit-animation: myfirst 27s infinite; /* Chrome, Safari, Opera */
-moz-animation: myfirst 27s infinite; /* Mozila */
animation: myfirst 27s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
16% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/kerastase.jpg) no-repeat;}
32% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/Moroccan.jpg) no-repeat;}
48% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/ghd.jpg) no-repeat;}
64% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/american.jpg) no-repeat;}
80% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/opi.jpg) no-repeat;}
100% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
}
@-moz-keyframes myfirst { /* Mozila */
0% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
16% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/kerastase.jpg) no-repeat;}
32% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/Moroccan.jpg) no-repeat;}
48% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/ghd.jpg) no-repeat;}
64% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/american.jpg) no-repeat;}
80% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/opi.jpg) no-repeat;}
100% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
16% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/kerastase.jpg) no-repeat;}
32% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/Moroccan.jpg) no-repeat;}
48% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/ghd.jpg) no-repeat;}
64% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/american.jpg) no-repeat;}
80% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/opi.jpg) no-repeat;}
100% {background: url(http://esplashstore.com/modules/tmnivoslider/slides/ebaySlides/salons.jpg) no-repeat;}
}
/****************************************** Header ******************************************************************/
/************************************* Tm Brand - line ************************************************************/
#tmbrand {
display: block;
background: #ffffff;
width: 100%;
height: 100px;
margin: -7px 0 -90px 0;
padding: 0 10px 21px 0;
overflow: hidden;
}
#tmbrand ul {
float:left;
background: #ffffff;
display: inline-block;
width: 3000px;
padding: 0;
margin-top: -80px;
-webkit-animation: brandRoll 10s infinite; /* Chrome, Safari, Opera */
-moz-animation: brandRoll 10s infinite; /* Mozila */
animation: brandRoll 10s infinite;
}
#tmbrand ul li img {
float: left;
padding: 0 7px 0 7px;
margin: 100px 5px 110px 0px;
color: #ffffff;
-webkit-transition: all ease-in-out 0.2s;
-moz-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
}
#tmbrand ul li img:hover
{
color: #0f0f0f;
transform: scale(1.5);
}
/* Chrome, Safari, Opera */
@-webkit-keyframes brandRoll {
0% { margin-left: 0;}
99% { margin-left: -1500px;}
100% { margin-left: 0;}
}
/* Mozila */
@-moz-keyframes brandRoll {
0% { margin-left: 0;}
99% { margin-left: -1500px;}
100% { margin-left: 0;}
}
@keyframes brandRoll {
0% { margin-left: 0;}
99% { margin-left: -1500px;}
100% { margin-left: 0;}
}
Please pinpoint the exact problem of this, because it is diving me crazy...
p.s. I hope it is my mistake on the code and I can't see it all that time..