Template:Team:Marburg/Template:HeaderMenu

From 2014.igem.org

(Difference between revisions)
 
(38 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
 
<script>
<script>
-
/*
 
-
  SlidesJS 3.0.4 http://slidesjs.com
 
-
  (c) 2013 by Nathan Searles http://nathansearles.com
 
-
  Updated: June 26th, 2013
 
-
  Apache License: http://www.apache.org/licenses/LICENSE-2.0
 
-
*/
 
-
(function(){(function(e,t,n){var r,i,s;s="slidesjs";i={width:940,height:528,start:1,navigation:{active:!0,effect:"slide"},pagination:{active:!0,effect:"slide"},play:{active:!1,effect:"slide",interval:5e3,auto:!1,swap:!0,pauseOnHover:!1,restartDelay:2500},effect:{slide:{speed:500},fade:{speed:300,crossfade:!0}},callback:{loaded:function(){},start:function(){},complete:function(){}}};r=function(){function t(t,n){this.element=t;this.options=e.extend(!0,{},i,n);this._defaults=i;this._name=s;this.init()}return t}();r.prototype.init=function(){var n,r,i,s,o,u,a=this;n=e(this.element);this.data=e.data(this);e.data(this,"animating",!1);e.data(this,"total",n.children().not(".slidesjs-navigation",n).length);e.data(this,"current",this.options.start-1);e.data(this,"vendorPrefix",this._getVendorPrefix());if(typeof TouchEvent!="undefined"){e.data(this,"touch",!0);this.options.effect.slide.speed=this.options.effect.slide.speed/2}n.css({overflow:"hidden"});n.slidesContainer=n.children().not(".slidesjs-navigation",n).wrapAll("<div class='slidesjs-container'>",n).parent().css({overflow:"hidden",position:"relative"});e(".slidesjs-container",n).wrapInner("<div class='slidesjs-control'>",n).children();e(".slidesjs-control",n).css({position:"relative",left:0});e(".slidesjs-control",n).children().addClass("slidesjs-slide").css({position:"absolute",top:0,left:0,width:"100%",zIndex:0,display:"none",webkitBackfaceVisibility:"hidden"});e.each(e(".slidesjs-control",n).children(),function(t){var n;n=e(this);return n.attr("slidesjs-index",t)});if(this.data.touch){e(".slidesjs-control",n).on("touchstart",function(e){return a._touchstart(e)});e(".slidesjs-control",n).on("touchmove",function(e){return a._touchmove(e)});e(".slidesjs-control",n).on("touchend",function(e){return a._touchend(e)})}n.fadeIn(0);this.update();this.data.touch&&this._setuptouch();e(".slidesjs-control",n).children(":eq("+this.data.current+")").eq(0).fadeIn(0,function(){return e(this).css({zIndex:10})});if(this.options.navigation.active){o=e("<a>",{"class":"slidesjs-previous slidesjs-navigation",href:"#",title:"Previous",text:"Previous"}).appendTo(n);r=e("<a>",{"class":"slidesjs-next slidesjs-navigation",href:"#",title:"Next",text:"Next"}).appendTo(n)}e(".slidesjs-next",n).click(function(e){e.preventDefault();a.stop(!0);return a.next(a.options.navigation.effect)});e(".slidesjs-previous",n).click(function(e){e.preventDefault();a.stop(!0);return a.previous(a.options.navigation.effect)});if(this.options.play.active){s=e("<a>",{"class":"slidesjs-play slidesjs-navigation",href:"#",title:"Play",text:"Play"}).appendTo(n);u=e("<a>",{"class":"slidesjs-stop slidesjs-navigation",href:"#",title:"Stop",text:"Stop"}).appendTo(n);s.click(function(e){e.preventDefault();return a.play(!0)});u.click(function(e){e.preventDefault();return a.stop(!0)});this.options.play.swap&&u.css({display:"none"})}if(this.options.pagination.active){i=e("<ul>",{"class":"slidesjs-pagination"}).appendTo(n);e.each(new Array(this.data.total),function(t){var n,r;n=e("<li>",{"class":"slidesjs-pagination-item"}).appendTo(i);r=e("<a>",{href:"#","data-slidesjs-item":t,html:t+1}).appendTo(n);return r.click(function(t){t.preventDefault();a.stop(!0);return a.goto(e(t.currentTarget).attr("data-slidesjs-item")*1+1)})})}e(t).bind("resize",function(){return a.update()});this._setActive();this.options.play.auto&&this.play();return this.options.callback.loaded(this.options.start)};r.prototype._setActive=function(t){var n,r;n=e(this.element);this.data=e.data(this);r=t>-1?t:this.data.current;e(".active",n).removeClass("active");return e(".slidesjs-pagination li:eq("+r+") a",n).addClass("active")};r.prototype.update=function(){var t,n,r;t=e(this.element);this.data=e.data(this);e(".slidesjs-control",t).children(":not(:eq("+this.data.current+"))").css({display:"none",left:0,zIndex:0});r=t.width();n=this.options.height/this.options.width*r;this.options.width=r;this.options.height=n;return e(".slidesjs-control, .slidesjs-container",t).css({width:r,height:n})};r.prototype.next=function(t){var n;n=e(this.element);this.data=e.data(this);e.data(this,"direction","next");t===void 0&&(t=this.options.navigation.effect);return t==="fade"?this._fade():this._slide()};r.prototype.previous=function(t){var n;n=e(this.element);this.data=e.data(this);e.data(this,"direction","previous");t===void 0&&(t=this.options.navigation.effect);return t==="fade"?this._fade():this._slide()};r.prototype.goto=function(t){var n,r;n=e(this.element);this.data=e.data(this);r===void 0&&(r=this.options.pagination.effect);t>this.data.total?t=this.data.total:t<1&&(t=1);if(typeof t=="number")return r==="fade"?this._fade(t):this._slide(t);if(typeof t=="string"){if(t==="first")return r==="fade"?this._fade(0):this._slide(0);if(t==="last")return r==="fade"?this._fade(this.data.total):this._slide(this.data.total)}};r.prototype._setuptouch=function(){var t,n,r,i;t=e(this.element);this.data=e.data(this);i=e(".slidesjs-control",t);n=this.data.current+1;r=this.data.current-1;r<0&&(r=this.data.total-1);n>this.data.total-1&&(n=0);i.children(":eq("+n+")").css({display:"block",left:this.options.width});return i.children(":eq("+r+")").css({display:"block",left:-this.options.width})};r.prototype._touchstart=function(t){var n,r;n=e(this.element);this.data=e.data(this);r=t.originalEvent.touches[0];this._setuptouch();e.data(this,"touchtimer",Number(new Date));e.data(this,"touchstartx",r.pageX);e.data(this,"touchstarty",r.pageY);return t.stopPropagation()};r.prototype._touchend=function(t){var n,r,i,s,o,u,a,f=this;n=e(this.element);this.data=e.data(this);u=t.originalEvent.touches[0];s=e(".slidesjs-control",n);if(s.position().left>this.options.width*.5||s.position().left>this.options.width*.1&&Number(new Date)-this.data.touchtimer<250){e.data(this,"direction","previous");this._slide()}else if(s.position().left<-(this.options.width*.5)||s.position().left<-(this.options.width*.1)&&Number(new Date)-this.data.touchtimer<250){e.data(this,"direction","next");this._slide()}else{i=this.data.vendorPrefix;a=i+"Transform";r=i+"TransitionDuration";o=i+"TransitionTimingFunction";s[0].style[a]="translateX(0px)";s[0].style[r]=this.options.effect.slide.speed*.85+"ms"}s.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){i=f.data.vendorPrefix;a=i+"Transform";r=i+"TransitionDuration";o=i+"TransitionTimingFunction";s[0].style[a]="";s[0].style[r]="";return s[0].style[o]=""});return t.stopPropagation()};r.prototype._touchmove=function(t){var n,r,i,s,o;n=e(this.element);this.data=e.data(this);s=t.originalEvent.touches[0];r=this.data.vendorPrefix;i=e(".slidesjs-control",n);o=r+"Transform";e.data(this,"scrolling",Math.abs(s.pageX-this.data.touchstartx)<Math.abs(s.pageY-this.data.touchstarty));if(!this.data.animating&&!this.data.scrolling){t.preventDefault();this._setuptouch();i[0].style[o]="translateX("+(s.pageX-this.data.touchstartx)+"px)"}return t.stopPropagation()};r.prototype.play=function(t){var n,r,i,s=this;n=e(this.element);this.data=e.data(this);if(!this.data.playInterval){if(t){r=this.data.current;this.data.direction="next";this.options.play.effect==="fade"?this._fade():this._slide()}e.data(this,"playInterval",setInterval(function(){r=s.data.current;s.data.direction="next";return s.options.play.effect==="fade"?s._fade():s._slide()},this.options.play.interval));i=e(".slidesjs-container",n);if(this.options.play.pauseOnHover){i.unbind();i.bind("mouseenter",function(){return s.stop()});i.bind("mouseleave",function(){return s.options.play.restartDelay?e.data(s,"restartDelay",setTimeout(function(){return s.play(!0)},s.options.play.restartDelay)):s.play()})}e.data(this,"playing",!0);e(".slidesjs-play",n).addClass("slidesjs-playing");if(this.options.play.swap){e(".slidesjs-play",n).hide();return e(".slidesjs-stop",n).show()}}};r.prototype.stop=function(t){var n;n=e(this.element);this.data=e.data(this);clearInterval(this.data.playInterval);this.options.play.pauseOnHover&&t&&e(".slidesjs-container",n).unbind();e.data(this,"playInterval",null);e.data(this,"playing",!1);e(".slidesjs-play",n).removeClass("slidesjs-playing");if(this.options.play.swap){e(".slidesjs-stop",n).hide();return e(".slidesjs-play",n).show()}};r.prototype._slide=function(t){var n,r,i,s,o,u,a,f,l,c,h=this;n=e(this.element);this.data=e.data(this);if(!this.data.animating&&t!==this.data.current+1){e.data(this,"animating",!0);r=this.data.current;if(t>-1){t-=1;c=t>r?1:-1;i=t>r?-this.options.width:this.options.width;o=t}else{c=this.data.direction==="next"?1:-1;i=this.data.direction==="next"?-this.options.width:this.options.width;o=r+c}o===-1&&(o=this.data.total-1);o===this.data.total&&(o=0);this._setActive(o);a=e(".slidesjs-control",n);t>-1&&a.children(":not(:eq("+r+"))").css({display:"none",left:0,zIndex:0});a.children(":eq("+o+")").css({display:"block",left:c*this.options.width,zIndex:10});this.options.callback.start(r+1);if(this.data.vendorPrefix){u=this.data.vendorPrefix;l=u+"Transform";s=u+"TransitionDuration";f=u+"TransitionTimingFunction";a[0].style[l]="translateX("+i+"px)";a[0].style[s]=this.options.effect.slide.speed+"ms";return a.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){a[0].style[l]="";a[0].style[s]="";a.children(":eq("+o+")").css({left:0});a.children(":eq("+r+")").css({display:"none",left:0,zIndex:0});e.data(h,"current",o);e.data(h,"animating",!1);a.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");a.children(":not(:eq("+o+"))").css({display:"none",left:0,zIndex:0});h.data.touch&&h._setuptouch();return h.options.callback.complete(o+1)})}return a.stop().animate({left:i},this.options.effect.slide.speed,function(){a.css({left:0});a.children(":eq("+o+")").css({left:0});return a.children(":eq("+r+")").css({display:"none",left:0,zIndex:0},e.data(h,"current",o),e.data(h,"animating",!1),h.options.callback.complete(o+1))})}};r.prototype._fade=function(t){var n,r,i,s,o,u=this;n=e(this.element);this.data=e.data(this);if(!this.data.animating&&t!==this.data.current+1){e.data(this,"animating",!0);r=this.data.current;if(t){t-=1;o=t>r?1:-1;i=t}else{o=this.data.direction==="next"?1:-1;i=r+o}i===-1&&(i=this.data.total-1);i===this.data.total&&(i=0);this._setActive(i);s=e(".slidesjs-control",n);s.children(":eq("+i+")").css({display:"none",left:0,zIndex:10});this.options.callback.start(r+1);if(this.options.effect.fade.crossfade){s.children(":eq("+this.data.current+")").stop().fadeOut(this.options.effect.fade.speed);return s.children(":eq("+i+")").stop().fadeIn(this.options.effect.fade.speed,function(){s.children(":eq("+i+")").css({zIndex:0});e.data(u,"animating",!1);e.data(u,"current",i);return u.options.callback.complete(i+1)})}return s.children(":eq("+r+")").stop().fadeOut(this.options.effect.fade.speed,function(){s.children(":eq("+i+")").stop().fadeIn(u.options.effect.fade.speed,function(){return s.children(":eq("+i+")").css({zIndex:10})});e.data(u,"animating",!1);e.data(u,"current",i);return u.options.callback.complete(i+1)})}};r.prototype._getVendorPrefix=function(){var e,t,r,i,s;e=n.body||n.documentElement;r=e.style;i="transition";s=["Moz","Webkit","Khtml","O","ms"];i=i.charAt(0).toUpperCase()+i.substr(1);t=0;while(t<s.length){if(typeof r[s[t]+i]=="string")return s[t];t++}return!1};return e.fn[s]=function(t){return this.each(function(){if(!e.data(this,"plugin_"+s))return e.data(this,"plugin_"+s,new r(this,t))})}})(jQuery,window,document)}).call(this);
 
-
 
-
 
-
 
$(window).load(function(){
$(window).load(function(){
-
 
-
    $(function() {
 
-
      $('#slides').slidesjs({
 
-
        width: 940,
 
-
        height: 528,
 
-
        navigation: false
 
-
      });
 
-
    });
 
-
 
/* test for @media-query support */
/* test for @media-query support */
$('body').append($('<div id="test-media-query">').css({visibility: 'hidden', position: 'absolute'}));
$('body').append($('<div id="test-media-query">').css({visibility: 'hidden', position: 'absolute'}));
Line 34: Line 14:
/* if (!mediaQuery) {
/* if (!mediaQuery) {
$(window).on("resize", function () {
$(window).on("resize", function () {
-
widthDoc = $(window).width();
+
widthDoc = $(window).width();
 +
if (!$('link[href="responsive-single/size880.css"]').length && widthDoc<=1024){$("<link>").appendTo($('head')).attr({type:'text/css',rel:'stylesheet',href:'https://2014.igem.org/Template:Team:Marburg/Template:Header:ResponsiveCSS?action=render'});}
 +
if (widthDoc>1024) {$('link[href="https://2014.igem.org/Template:Team:Marburg/Template:Header:ResponsiveCSS?action=render"]').remove();}
 +
}).resize();
 +
} */
 +
});
 +
</script>
 +
<style>
 +
.tts {
 +
    float: right;
 +
    position: relative;
 +
    bottom: 25px;
 +
}
 +
#toc, .toc {
 +
    display: none;
 +
}
-
if (!$('link[href="responsive-single/size880.css"]').length && widthDoc<=1024){$("<link>").appendTo($('head')).attr({type:'text/css',rel:'stylesheet',href:'https://2014.igem.org/Template:Team:Marburg/Template:Header:ResponsiveCSS?action=render'});}
+
#container2 {  margin: auto; width: 100%; } 
 +
#left2 {
 +
  background: url('https://static.igem.org/mediawiki/2014/4/45/Mr_team_rolle_1.png') repeat-y left top;
 +
}
 +
#left_inner2 { float: left; width: 10%; } 
 +
#right2 { float: right; width: 80%;
 +
  background: url('https://static.igem.org/mediawiki/2014/7/71/Mr_team_rolle_2.png') repeat-y right top;
 +
 +
#right_inner2 { float: right; width: 10%; } 
 +
#content2 { float: left; width: 75%;}  
 +
.clr { clear: both; }
-
if (widthDoc>1024) {$('link[href="https://2014.igem.org/Template:Team:Marburg/Template:Header:ResponsiveCSS?action=render"]').remove();}
+
#slider2_container {
 +
position: relative;
 +
width: 600px;
 +
height: 300px;
 +
margin: 0px auto;
 +
border: 10px solid #FFF;
 +
box-shadow: 2px 7px 5px #888;
 +
top:-35px;
 +
}
 +
#submenu {
 +
background: #d2d9df;
 +
width: 260px;
 +
padding-left: 20px;
 +
margin: 0;
 +
margin-right: 50px;
 +
margin-bottom: 30px;
 +
line-height: 13pt;
 +
list-style-type: circle;
 +
list-style-image: none;
 +
border: 1px solid #999;
 +
float: left;
 +
margin-top: 17px;
 +
box-shadow: 2px 2px 5px #aaa;
 +
background: rgb(255,255,255); /* Old browsers */
 +
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
 +
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 +
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
 +
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
 +
}
 +
#submenu li a {
 +
  color: #444;
 +
  font-size: 14pt;
 +
  font-family: Calibri, Verdana;
 +
}
 +
#submenu li a:hover {
 +
  color: #00;
 +
}
 +
#submenu li.current {
 +
  font-weight: bold;
 +
}
 +
#submenu li:hover {
 +
  background: #d8d8d8;
 +
}
 +
#submenu li ul li{
 +
  font-weight: normal;
 +
  line-height: 10pt;
 +
}
 +
#submenu li ul {
 +
  margin-left:15px;
 +
  list-style-type: none;
 +
list-style-image: none;
 +
}
 +
.submenu_clr { display: none; }
-
}).resize();
 
-
} */
 
-
});
 
-
</script>
 
-
<style>
 
.menu {display:block; padding:0; margin:0; height:42px; position:relative;
.menu {display:block; padding:0; margin:0; height:42px; position:relative;
-webkit-user-select: none;
-webkit-user-select: none;
Line 56: Line 113:
}
}
.menu img {position:absolute; left:0px; top:34px; z-index:100; display:none;}
.menu img {position:absolute; left:0px; top:34px; z-index:100; display:none;}
-
 
.menu.first img, .menu.second img {top:14px;}
.menu.first img, .menu.second img {top:14px;}
.menu ul {padding:0; margin:0; margin-top: 25px;  padding-top: 25px;}
.menu ul {padding:0; margin:0; margin-top: 25px;  padding-top: 25px;}
.menu ul li {display:inline-block; position:relative;background: url('https://static.igem.org/mediawiki/2014/0/0d/Mr_navigation_general.png');}
.menu ul li {display:inline-block; position:relative;background: url('https://static.igem.org/mediawiki/2014/0/0d/Mr_navigation_general.png');}
-
.menu ul li {*display:inline;}
+
.menu ul li {*display:inline; z-index: 1;}
.menu ul li a {display:block; font:normal 15pt/40px 'Muli', arial, sans-serif; color:#444; text-decoration:none; padding:0 18px; text-align:center;}
.menu ul li a {display:block; font:normal 15pt/40px 'Muli', arial, sans-serif; color:#444; text-decoration:none; padding:0 18px; text-align:center;}
.menu ul li a:hover {color:#a00;}
.menu ul li a:hover {color:#a00;}
Line 71: Line 127:
.menu ul li.current a {color:#c00; z-index:120;}
.menu ul li.current a {color:#c00; z-index:120;}
-
@media only screen and (max-width:1200px) {
+
@media only screen and (max-width:1198px) {
 +
.menu ul li.igem { display:none; }
.menu {width:235px;}
.menu {width:235px;}
.menu.center {margin:0 auto; text-align:left;}
.menu.center {margin:0 auto; text-align:left;}
Line 85: Line 142:
.menu ul li.current {display:block; z-index:10;}
.menu ul li.current {display:block; z-index:10;}
.menu:hover ul li {margin-bottom:0;}
.menu:hover ul li {margin-bottom:0;}
 +
#slider2_container { top:-0; border: none; }
 +
.submenu_clr { clear: both; }
 +
  #submenu { margin: 0 auto; float: none;}
 +
#left2, #right2 { background: transparent; }
 +
.tts { display: none; }
}
}
@media only screen and (max-device-width:1024px) and (orientation:portrait) {
@media only screen and (max-device-width:1024px) and (orientation:portrait) {
 +
.menu ul li.igem { display:none; }
.menu {width:235px;}
.menu {width:235px;}
.menu.center {margin:0 auto; text-align:left;}
.menu.center {margin:0 auto; text-align:left;}
Line 100: Line 163:
.menu ul li.current {display:block; z-index:10;}
.menu ul li.current {display:block; z-index:10;}
.menu:hover ul li {margin-bottom:0;}
.menu:hover ul li {margin-bottom:0;}
 +
#slider2_container { top:0; border: none; }
 +
.submenu_clr { clear: both; }
 +
  #submenu { margin: 0 auto; float: none; }
 +
  #left2, #right2 { background: transparent; }
 +
.tts { display: none; }
}
}
@media only screen and (max-device-width:480px) {
@media only screen and (max-device-width:480px) {
.menu {width:235px;}
.menu {width:235px;}
 +
.menu ul li.igem { display:none; }
.menu.center {margin:0 auto; text-align:left;}
.menu.center {margin:0 auto; text-align:left;}
 +
.menu.right {margin:0 0 0 auto; text-align:left;}
.menu.right {margin:0 0 0 auto; text-align:left;}
.menu img {display:block;}
.menu img {display:block;}
Line 115: Line 185:
.menu ul li.current {display:block; z-index:10;}
.menu ul li.current {display:block; z-index:10;}
.menu:hover ul li {margin-bottom:0;}
.menu:hover ul li {margin-bottom:0;}
 +
#slider2_container { top:0; border: none; }
 +
.submenu_clr { clear: both; }
 +
  #submenu { margin: 0 auto; float: none; }
 +
  #left2, #right2 { background: transparent; }
 +
.tts { display: none; }
}
}
-
 
.menu ul li.current a.a {
.menu ul li.current a.a {
Line 198: Line 272:
}
}
 +
.menu .igem img {
 +
    position: absolute;
 +
    left: 0px;
 +
    top: -25px;
 +
    z-index: 100;
 +
    display: block;
 +
}
 +
#bodyContent a[href^="https://"], .link-https {
 +
    padding: 0;
 +
background: transparent;
 +
}
-
 
+
/* ================================================================
-
 
+
This copyright notice must be untouched at all times.
-
 
+
Copyright (c) stu nicholls - cssplay.co.uk
-
    #slides {
+
All rights reserved.
-
      display: none
+
=================================================================== */
-
    }
+
.wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;}
-
 
+
.wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;  box-shadow: 2px 7px 5px #888; margin-bottom: 10px;
-
    #slides .slidesjs-navigation {
+
  border: 0;
-
      margin-top:3px;
+
  padding: 0;
-
    }
+
  margin: 0;
-
 
+
  outline:#fff solid 3px;
-
    #slides .slidesjs-previous {
+
}
-
      margin-right: 5px;
+
.wrap img {border:0;}
-
      float: left;
+
.wrap i {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:#fff; filter: alpha(opacity=40);
-
    }
+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); opacity:0.75;
-
 
+
-webkit-transition: all 0.6s ease-in-out;  
-
    #slides .slidesjs-next {
+
-moz-transition: all 0.6s ease-in-out;
-
      margin-right: 5px;
+
-o-transition: all 0.6s ease-in-out;
-
      float: left;
+
transition: all 0.6s ease-in-out;
-
    }
+
}
-
 
+
.wrap p {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:transparent; font-size:13pt; color:#000; padding:0; margin:0; line-height:16px;
-
    .slidesjs-pagination {
+
-webkit-transition: all 0.6s ease-in-out;
-
      margin: 6px 0 0;
+
-moz-transition: all 0.6s ease-in-out;
-
      float: right;
+
-o-transition: all 0.6s ease-in-out;
-
      list-style: none;
+
transition: all 0.6s ease-in-out;
-
    }
+
}
-
 
+
.wrap p b {display:block; font-size:22px; color:#333; text-align:center; margin:0; padding:0; line-height:30px;}
-
    .slidesjs-pagination li {
+
.wrap p span {display:block; padding:10px; line-height:20px;}
-
      float: left;
+
.wrap a:hover {direction:ltr;}
-
      margin: 0 1px;
+
.wrap a:hover i {top:0;}
-
    }
+
.wrap a:hover p {top:0;}
-
 
+
.wrap b { font-family: "Muli"; font-size: 11pt; }
-
    .slidesjs-pagination li a {
+
.clear {clear:left;}
-
      display: block;
+
</style></html>
-
      width: 13px;
+
-
      height: 0;
+
-
      padding-top: 13px;
+
-
      background-image: url(img/pagination.png);
+
-
      background-position: 0 0;
+
-
      float: left;
+
-
      overflow: hidden;
+
-
    }
+
-
 
+
-
    .slidesjs-pagination li a.active,
+
-
    .slidesjs-pagination li a:hover.active {
+
-
      background-position: 0 -13px
+
-
    }
+
-
 
+
-
    .slidesjs-pagination li a:hover {
+
-
      background-position: 0 -26px
+
-
    }
+
-
 
+
-
    #slides a:link,
+
-
    #slides a:visited {
+
-
      color: #333
+
-
    }
+
-
 
+
-
    #slides a:hover,
+
-
    #slides a:active {
+
-
      color: #9e2020
+
-
    }
+
-
 
+
-
    .navbar {
+
-
      overflow: hidden
+
-
    }
+
-
 
+
-
 
+
-
  /* SlidesJS Required: These styles are required if you'd like a responsive slideshow */
+
-
 
+
-
    #slides {
+
-
      display: none
+
-
    }
+
-
 
+
-
    .container {
+
-
      margin: 0 auto
+
-
    }
+
-
 
+
-
    /* For tablets & smart phones */
+
-
    @media (max-width: 767px) {
+
-
      body {
+
-
        padding-left: 20px;
+
-
        padding-right: 20px;
+
-
      }
+
-
      .container {
+
-
        width: auto
+
-
      }
+
-
    }
+
-
 
+
-
    /* For smartphones */
+
-
    @media (max-width: 480px) {
+
-
      .container {
+
-
        width: auto
+
-
      }
+
-
    }
+
-
 
+
-
    /* For smaller displays like laptops */
+
-
    @media (min-width: 768px) and (max-width: 979px) {
+
-
      .container {
+
-
        width: 724px
+
-
      }
+
-
    }
+
-
 
+
-
    /* For larger displays */
+
-
    @media (min-width: 1200px) {
+
-
      .container {
+
-
        width: 1170px
+
-
      }
+
-
    }
+
-
</style>
+
-
</html>
+

Latest revision as of 22:19, 17 October 2014