jQuery Sliding Image Gallery v2 - Ayuda Div Section Html5 - Foro CCTW

juanmatias · 25 Jul 2012, 08:00 · Solicitar retirada

Recientemente compre este plugin que me pareció atractivo para utilizar.

Pero no se como hacer para darle a la etiqueta de HTML5 que contiene el jQuery Sliding Image Gallery v2 que se llama <section id="principal" </section>
que es de 830x480. Quiero darle un margin-top: 40px; y ajustarlo al section. No me doy cuenta cual es la clase que hace eso.

Mi Página: http://acceso-directo.net23.net

Link Oficial: http://www.codegrape.com/item/jquery-sliding-image-gallery-v2/1383/…

Mil y un Gracias.

Aca se las dejo es un poco extensa

/*** To change the font,visit FontSquirell: http://www.fontsquirrel.com/fontface ***/

@font-face{

font-family:"BebasNeueRegular";
src:url("../fonts/BebasNeue-webfont.eot");
src:url("../fonts/BebasNeue-webfont.eot?#iefix")
format("eot"),url("../fonts/BebasNeue-webfont.woff")
format("woff"),url("../fonts/BebasNeue-webfont.ttf")
format("truetype"),url("../fonts/BebasNeue-webfont.svg#webfontfuvdSzbb")
format("svg");
font-weight:normal;
font-style:normal
}

.sliding-image-gallery-v2-wrapper{
position:relative;
overflow:hidden
}

.sliding-image-gallery-v2{
position:relative;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
background-color:#000;
width:200px;
height:480px;
overflow:hidden

}

.sliding-image-gallery-v2 a{
color:#00CCFF;
text-decoration:none;
outline:none
}

.sliding-image-gallery-v2 a:hover{
color:#CD0000;
text-decoration:none
}

.sliding-image-gallery-v2 .screen{
position:relative;
top:0;
left:250px;
width:430px;
height:40px;
overflow:hidden
}

.sliding-image-gallery-v2 .items{
position:absolute;
top:0;
left:0;
width:300px;
height:530px;
overflow:hidden;
z-index:10
}

.sliding-image-gallery-v2 .items-left{
border-right:1px solid #181818
}

.sliding-image-gallery-v2 .items-right{
border-left:1px solid #181818
}

.sliding-image-gallery-v2 .items ul{
list-style:none;
position:absolute;
top:0;
left:0;
height:999999px;
margin:0;
padding:0;
overflow:hidden
}

.sliding-image-gallery-v2 .items li{
position:relative;
display:block;
clear:both;
margin:0;
padding:0;
overflow:hidden;
cursor:pointer
}

.sliding-image-gallery-v2 .items li a{
display:none
}

/*** Buttons ***/

.sliding-image-gallery-v2 .items .button{
position:relative;
display:block;
clear:both;
overflow:hidden;
background:#5e626b;
background:-moz-linear-gradient(top,#4c4f54,#292c31);
background:-webkit-gradient(linear,left top,left bottom,from(#4c4f54),to(#292c31));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c4f54',EndColorStr='#292c31')";
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c4f54',EndColorStr='#292c31');
border-bottom:1px solid #181818;
-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.2) inset;-o-box-shadow:0 1px 0 0 rgba(255,255,255,0.2) inset;
box-shadow:0 1px 0 0 rgba(255,255,255,0.2) inset
}

.sliding-image-gallery-v2 .items .button img{
display:block;
float:left;
border:3px solid #efefef;
border-radius:3px;
margin:0px 5px 0px 10px;
-webkit-box-shadow:0 2px 3px 0px rgba(0,0,0,0.8);
-moz-box-shadow:0 2px 3px 0px rgba(0,0,0,0.8);
box-shadow:0 2px 3px 0px rgba(0,0,0,0.8)
}

.sliding-image-gallery-v2 .items .button p{
display:block;
float:left;
margin:0px 5px 0px 8px;
overflow:hidden;
color:#999;
-moz-text-shadow:0px 1px rgba(0,0,0,0.4);
text-shadow:0px 1px rgba(0,0,0,0.4)
}

.sliding-image-gallery-v2 .items .button p span.title{
display:block;
clear:both;
font-family:Arial,Geneva,sans-serif;
font-size:13px;
font-weight:bold;
color:#CCC
}

/*** Button Hover ***/

.sliding-image-gallery-v2 .items .over{
background:#EEE;
background:-moz-linear-gradient(top,#222428,#2d2f32);
background:-webkit-gradient(linear,left top,left bottom,from(#222428),to(#2d2f32));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#222428',EndColorStr='#2d2f32')";
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#222428',EndColorStr='#2d2f32');
border-bottom:1px solid #1b1c1e;
-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.1) inset;-o-box-shadow:0 1px 0 0 rgba(255,255,255,0.1) inset;
box-shadow:0 1px 0 0 rgba(255,255,255,0.1) inset

}

.sliding-image-gallery-v2 .items .over img{
border:3px solid #fff;
-webkit-box-shadow:0 2px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow:0 2px 3px 0px rgba(0,0,0,0.3);
box-shadow:0 2px 3px 0px rgba(0,0,0,0.3)
}

.sliding-image-gallery-v2 .items .over p{
color:#bec1c3
}

.sliding-image-gallery-v2 .items .over p span.title{
color:#EEE
}

/*** Button Selected ***/

.sliding-image-gallery-v2 .items .selected{
background:#1a7ec1;
background:-moz-linear-gradient(top,#39A6FF,#036093);
background:-webkit-gradient(linear,left top,left bottom,from(#39A6FF),to(#036093));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#39A6FF',EndColorStr='#036093')";
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#39A6FF',EndColorStr='#036093');
border-bottom:1px solid #043b5a;
-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.4) inset;-o-box-shadow:0 1px 0 0 rgba(255,255,255,0.4) inset;
box-shadow:0 1px 0 0 rgba(255,255,255,0.4) inset
}

.sliding-image-gallery-v2 .items .selected img{
border:3px solid #fff;
-webkit-box-shadow:0 2px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow:0 2px 3px 0px rgba(0,0,0,0.3);
box-shadow:0 2px 3px 0px rgba(0,0,0,0.3)
}

.sliding-image-gallery-v2 .items .selected p{
color:#CCC
}

.sliding-image-gallery-v2 .items .selected p span.title{
color:#FFF
}

/*** Image ***/

.sliding-image-gallery-v2 .main-img{
display:none;
position:absolute;
top:0;
left:0;
z-index:0;
border:0
}

/*** Content ***/

.sliding-image-gallery-v2 .content{
position:absolute;
-moz-opacity:0;
filter:alpha(opacity=0);
opacity:0
}

.sliding-image-gallery-v2 .textbox{
position:absolute;
z-index:4;
overflow:hidden;
top:0;
left:0
}

.sliding-image-gallery-v2 .textbox a.bg-url{
display:block;
clear:both;
position:absolute;
top:0;
left:0;
background-color:rgba(0,0,0,0)
}

.sliding-image-gallery-v2 .textbox span.border{
display:block;
position:absolute;
top:-1px;
width:100%;
height:1px;
background-color:#FFF;
-moz-opacity:0.3;
filter:alpha(opacity=0.3);
opacity:0.3
}

.sliding-image-gallery-v2 .textbox span.border-black{
background-color:#000;
-moz-opacity:1;
filter:alpha(opacity=1);
opacity:1
}

.sliding-image-gallery-v2 .textbox span.bg{
display:block;
position:absolute;
padding:10 15px;
width:100%;
height:100%;
background-color:#000
}

.sliding-image-gallery-v2 .textbox span.bg-opacity{
-moz-opacity:0.6;
filter:alpha(opacity=0.6);
opacity:0.6
}

.sliding-image-gallery-v2 .textbox span.text{
display:block;
z-index:3;
position:relative;
font-family:"BebasNeueRegular"
}

.sliding-image-gallery-v2 .textbox span.title,.sliding-image-gallery-v2 .textbox .title{
font-size:30px;color:#FFF
}

.sliding-image-gallery-v2 .textbox span.field,.sliding-image-gallery-v2 .textbox .field{
display:block;
clear:both;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:18px
}

.sliding-image-gallery-v2 .textbox p.margin{
margin:0 0 18px
}

.sliding-image-gallery-v2 .textbox iframe{
border:0
}

/*** Content Button ***/

.sliding-image-gallery-v2 a{
display:inline-block;
background-color:#444444;
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#444444),color-stop(100%,#000000));
background-image:-webkit-linear-gradient(#444444,#000000);
background-image:-moz-linear-gradient(#444444,#000000);
background-image:-o-linear-gradient(#444444,#000000);
background-image:linear-gradient(#444444,#000000);
-moz-background-clip:padding;
-webkit-background-clip:padding;-o-background-clip:padding-box;-ms-background-clip:padding-box;
-khtml-background-clip:padding-box;
background-clip:padding-box;
-moz-border-radius:4px;
-webkit-border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
-moz-box-shadow:0 1px 0 0 #666 inset;
-webkit-box-shadow:0 1px 0 0 #666 inset;-o-box-shadow:0 1px 0 0 #666 inset;
box-shadow:0 1px 0 0 #666 inset;
color:#fff;
cursor:pointer;
font:12 Arial,Tahoma,sans-serif;
font-weight:bold;
margin:0;
padding:6px 15px;
text-align:left;-moz-text-shadow:0px 1px #000;
text-shadow:0px 1px #000;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;-o-transition-duration:0.6s;
transition-duration:0.6s
}

.sliding-image-gallery-v2 a:hover,.sliding-image-gallery-v2 a:focus{
background-color:#666666;
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#666666),color-stop(100%,#222222));
background-image:-webkit-linear-gradient(#666666,#222222);
background-image:-moz-linear-gradient(#666666,#222222);
background-image:-o-linear-gradient(#666666,#222222);
background-image:linear-gradient(#666666,#222222);
-moz-background-clip:padding;
-webkit-background-clip:padding;-o-background-clip:padding-box;-ms-background-clip:padding-box;
-khtml-background-clip:padding-box;
background-clip:padding-boxmoz-box-shadow:0 1px 0 0 #999 inset;
-webkit-box-shadow:0 1px 0 0 #999 inset;-o-box-shadow:0 1px 0 0 #999 inset;
box-shadow:0 1px 0 0 #999 inset;
text-decoration:none;
color:#fff;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;-o-transition-duration:0.6s;
transition-duration:0.6s
}

/*** Timer ***/

.sliding-image-gallery-v2 .timer{
position:absolute;
top:0;
left:0;
height:4px;
background-color:#fff;
-moz-opacity:.5;
filter:alpha(opacity=50);
opacity:.5;
z-index:5;
visibility:hidden;
font-size:0
}

/*** Preloader ***/

.sliding-image-gallery-v2 .preloader{
position:absolute;
top:50%;
left:50%;
width:66px;
height:26px;
margin-left:-33px;
margin-top:-13px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background:#fff url(../imgs/index/jquery-sliding-image-gallery-v2/bg/preloader.gif) no-repeat center center;
z-index:7;
display:none
}

/*** Wrapper Bg ***/

.sliding-image-gallery-v2-wrapper div.wrapper-bg{
position:absolute;
z-index:3
}

/*** Border ***/

.sliding-image-gallery-v2-wrapper div.border{
position:absolute;
z-index:2
}

/*** Shadow1 ***/

.sliding-image-gallery-v2-wrapper .shadow1{
position:absolute;
height:30px;
z-index:1
}

.sliding-image-gallery-v2-wrapper .shadow1 .left{
display:block;
float:left;
height:30px;
background:url(../imgs/index/jquery-sliding-image-gallery-v2/nav/shadow1-left.png) no-repeat right bottom
}

.sliding-image-gallery-v2-wrapper .shadow1 .right{
display:block;
float:left;
height:30px;
background:url(../imgs/index/jquery-sliding-image-gallery-v2/nav/shadow1-right.png) no-repeat left bottom
}

/*** Shadow2 ***/

.sliding-image-gallery-v2-wrapper .shadow2{
position:absolute;
height:82px;
z-index:1
}

.sliding-image-gallery-v2-wrapper .shadow2 .left{
display:block;
float:left;
width:100px;
height:42px;
background:url(../imgs/index/jquery-sliding-image-gallery-v2/nav/shadow2-left.png) no-repeat left bottom
}

.sliding-image-gallery-v2-wrapper .shadow2 .middle{
display:block;
float:left;
width:auto;
height:42px;
background:url(../imgs/index/jquery-sliding-image-gallery-v2/nav/shadow2-middle.png) repeat-x left bottom
}

.sliding-image-gallery-v2-wrapper .shadow2 .right{
display:block;
float:left;
width:100px;
height:42px;
background:url(../imgs/index/jquery-sliding-image-gallery-v2/nav/shadow2-right.png) no-repeat left bottom
}

/*** Shadow3 ***/

.sliding-image-gallery-v2-wrapper .shadow3{
position:absolute;
height:36px;
z-index:1;
background:url(../imgs/index/jquery-sliding-image-gallery-v2/nav/shadow3.png) no-repeat center bottom

}

/*** ScrollBar ***/

.sliding-image-gallery-v2 #scrollbar{
position:relative;
width:4px;
height:100%;
overflow:hidden;
visibility:hidden

}

.sliding-image-gallery-v2 #knob{
position:absolute;
top:0;
left:0;
width:4px;
background-color:#CCC;
-moz-opacity:.75;
filter:alpha(opacity=75);
opacity:.75;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px

}

.sliding-image-gallery-v2 .btn-pane{
position:absolute;
top:0;
left:0;
width:100%;
height:
24px;
z-index:2;
visibility:hidden

}

.sliding-image-gallery-v2 #up-btn,.sliding-image-gallery-v2 #down-btn{
position:absolute;
top:0;
left:50%;
width:60px;
height:24px;
margin-left:-30px;
background:#DDD url(../imgs/index/jquery-sliding-image-gallery-v2/bg/dropdown.png) no-repeat;
background:rgba(221,221,221,0.7) url(../imgs/index/jquery-sliding-image-gallery-v2/bg/dropdown.png) no-repeat
}

.sliding-image-gallery-v2 #up-btn{
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;-webkit-border-radius-bottomleft:3px;-webkit-border-radius-bottomright:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
background-position:center 0
}

.sliding-image-gallery-v2 #down-btn{
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
-webkit-border-radius-topleft:3px;
-webkit-border-radius-topright:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
background-position:center -24px
}

/*** Effect ***/

.sliding-image-gallery-v2 .block,.sliding-image-gallery-v2 .vpiece,.sliding-image-gallery-v2 .hpiece{
position:absolute;
z-index:2
}

.sliding-image-gallery-v2 .strip{
display:block;
position:absolute;
top:0;
left:0;
z-index:0;
overflow:hidden
}

.sliding-image-gallery-v2 .content-box{
display:none;
position:absolute;
top:0;left:0;
overflow:hidden
}

/*** Clear Fix ***/

.sliding-image-gallery-v2 .items .button:after,.sliding-image-gallery-v2 .btn-pane:after{
content:".";
visibility:hidden;
display:block;
clear:both;
height:0;
font-size:0
}