Team:UNITN-Trento/CSS/Main
From 2013.igem.org
@import url(http://fonts.googleapis.com/css?family=Boogaloo); @import url(http://fonts.googleapis.com/css?family=Cabin); @import url(http://fonts.googleapis.com/css?family=Kameron); @import url(http://fonts.googleapis.com/css?family=Marck+Script); @import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300italic); @import url(http://fonts.googleapis.com/css?family=PT+Sans);
/*Hides WIKI default template*/ html,body { padding: 0; margin: 0; overflow: auto; background: none; }
- contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#mw-panel,#mw-head,#footer,#mw-page-base,#mw-head-base {
display: none; }
- content {
display: none; }
- tn-main-wrap-wrap {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; z-index: 2; overflow: auto; }
- tn-main-wrap {
margin: 0; padding: 0; width: 100%; /*min-width: 1280px;*/ font-size: 16px; background-color: rgba(31, 68, 87, 0.9); }
- top-section {
position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; width: 100%; margin: 0; padding: 0; border: none; background: white; z-index: 1; display: none; }
/*To hide button for debug mode*/ .tn-hidden { display: none; }
/*Top menus (left/right)*/
- menubar {
background: none !important; }
- menubar ul li {
color: white !important; }
- menubar:hover {
display: block; position: absolute; color: white; }
- menubar:hover ul li {
color: white; }
.right-menu li a, .left-menu li a { display: inline-block; padding: 2px 5px; background: none; color: white !important; text-decoration: none; font-variant: small-caps; text-align: center; }
.right-menu li a:hover, .left-menu li a:hover { background-color: white; border-radius: 5px; color: black !important; text-decoration: underline; }
.left-menu > ul > li[style='color:white;cursor:default'] { display: none !important; }
/*BOX CSS*/ .tn-box { display: inline-block; text-align: justify; border: 5px double; padding: 0 1em; margin: 0.5em auto; font-size: 0.9em; }
.tn-box.box-w-1 { width: 10%; }
.tn-box.box-w-2 { width: 20%; }
.tn-box.box-w-3 { width: 30%; }
.tn-box.box-w-4 { width: 40%; }
.tn-box.box-w-5 { width: 50%; }
.tn-box.box-w-6 { width: 60%; }
.tn-box.box-w-7 { width: 70%; }
.tn-box.box-w-8 { width: 80%; }
.tn-box.box-w-9 { width: 90%; }
.tn-box.box-c-1 { border-color: #bf1b39; }
.tn-box.box-c-2 { border-color: #038c7e; }
/*************/ /*JMSLIDESHOW*/ /*************/
.jms-slideshow {
position: relative; width: 80%; max-width: 1400px; min-width: 640px; margin: 20px auto; height: 460px;
}
.jms-wrapper {
width: auto; min-width: 600px; height: 440px; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; border: 10px solid #fff; border: 10px solid rgba(255, 255, 255, 0.9); outline: none; transition: background-color 1s linear;
}
/*base colors*/
.jms-wrapper.color-1 {
background-color: #E3D8FF; background-color: rgba(227, 216, 268, 1);
} .jms-wrapper.color-2 {
background-color: #EBBBBC; background-color: rgba(235, 187, 188, 1);
} .jms-wrapper.color-3 {
background-color: #EED9C0; background-color: rgba(238, 217, 192, 1);
} .jms-wrapper.color-4 {
background-color: #DFEBB1; background-color: rgba(223, 235, 177, 1);
} .jms-wrapper.color-5{
background-color: #C1E6E5; background-color: rgba(193, 230, 229, 1);
}
/*steps*/
.step {
width: 900px; height: 420px; display: block; transition: opacity 1s;
} .step:not(.active) {
opacity: 0;
}
.jms-content{
margin: 0px 370px 0px 20px; position: relative; clear: both;
}
/*links*/
a.jms-link{
color: #fff; text-transform: uppercase; background: linear-gradient(top, #969696 0%,#727272 100%); padding: 8px 15px; display: inline-block; font-size: 16px; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border: 1px solid #444; border-radius: 4px; opacity: 1; margin-top: 40px; clear: both; transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0; margin-top: 80px;
}
/*dots*/
.jms-dots{
width: 100%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; user-select: none;
}
.jms-dots > span{
display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #777; margin: 3px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span span {
width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: transparent;
}
.jms-dots span.jms-dots-current span {
width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #ffffff;
}
/*arrows*/
.jms-arrows{
user-select: none;
} .jms-arrows span{
position: absolute; top: 50%; margin-top: -40px; height: 80px; width: 30px; cursor: pointer; z-index: 2000; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); border-radius: 3px;
} .jms-arrows span.jms-arrows-prev{
background: #fff url() no-repeat 50% 50%; left: -10px;
} .jms-arrows span.jms-arrows-next{
background: #fff url() no-repeat 50% 50%; right: -10px;
}
ul {
list-style-type:0!important; list-style-image:none!important;
}