/* --- Frontpage --- */

/* Banner */
.frontpage .front-banner{ margin: 0 0 10px 0; padding: 0; }
.frontpage .front-banner a{ display: block; }
.frontpage .front-banner a img{ margin: 0; padding: 0; display: block; border-width: 0; }

/* Elements */
.frontpage .elements{ }
.frontpage .elements .element{ margin-bottom: 10px !important; height: 280px; overflow: hidden; cursor: pointer; }
.frontpage .elements .element .slider{ height: 250px; width: 135px; margin: 0; padding: 140px 20px 15px 20px; }
.frontpage .elements .element .slider h3{ margin: 0; padding: 0; font-size: 4em; color: #c7c4bf; }
.frontpage .elements .element .slider p{ margin: 0; padding: 0; font-size: 1.4em; line-height: 1.2em; color: #ffffff; }
.frontpage .elements .element .slider h3 span{ display: none; }

.frontpage .elements .fire{ background: url(images/elements/front_fire_bg.png) no-repeat; }
.frontpage .elements .water{ background: url(images/elements/front_water_bg.png) no-repeat; }
.frontpage .elements .earth{ background: url(images/elements/front_earth_bg.png) no-repeat; }
.frontpage .elements .ice{ background: url(images/elements/front_ice_bg.png) no-repeat; }
.frontpage .elements .fire .slider{ background: url(images/elements/front_fire_trans.png) no-repeat 0 135px; }
.frontpage .elements .water .slider{ background: url(images/elements/front_water_trans.png) no-repeat 0 135px; }
.frontpage .elements .earth .slider{ background: url(images/elements/front_earth_trans.png) no-repeat 0 135px; }
.frontpage .elements .ice .slider{ background: url(images/elements/front_ice_trans.png) no-repeat 0 135px; }

.frontpage .elements .fire .slider h3{ margin: 0 0 0 -20px; background: url(images/elements/fire.png) no-repeat; width: 175px; height: 59px; }
.frontpage .elements .water .slider h3{ margin: 0 0 0 -20px; background: url(images/elements/water.png) no-repeat; width: 175px; height: 59px; }
.frontpage .elements .earth .slider h3{ margin: 0 0 0 -20px; background: url(images/elements/earth.png) no-repeat; width: 175px; height: 59px; }
.frontpage .elements .ice .slider h3{ margin: 0 0 0 -20px; background: url(images/elements/ice.png) no-repeat; width: 175px; height: 59px; }


#s3slider { 
   width: 730px; /* important to be same as image width */ 
   height: 400px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 730px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 15px 13px;
   width: 704px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.s3sliderImage span{ text-transform: uppercase; font-size: 16px; color: #fff; }
.s3sliderImage span strong{ text-transform: none; font-size: 20px; font-weight: bold; }