Team:UNITN-Trento/CSS/Project/Fruit ripening
From 2013.igem.org
(Difference between revisions)
(53 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | #tn-content .container { | |
- | + | background-image: url(https://static.igem.org/mediawiki/2013/b/bf/Tn-2013_Onda-fruitripening.png); | |
+ | background-color: rgb(245, 90, 0); | ||
+ | } | ||
+ | .tn-msg { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
- | + | font-family: "Kameron", cursive; | |
- | + | font-size: 0.8em; | |
- | font-family: " | + | |
- | + | ||
- | font-size: | + | |
- | + | ||
text-align: center; | text-align: center; | ||
} | } | ||
Line 16: | Line 15: | ||
.jms-slideshow { | .jms-slideshow { | ||
- | + | width: 80%; | |
+ | height: 500px; | ||
+ | |||
margin: 2em auto !important; | margin: 2em auto !important; | ||
+ | margin-top: 0 !important; | ||
+ | |||
+ | font-family: arial; | ||
+ | font-size: 16px; | ||
+ | |||
+ | background-color: rgba(255, 255, 255, 0.4); | ||
+ | /*background-image: url(https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-mainbg-Wood_pattern_2.jpg);*/ | ||
+ | border: 3px solid rgb(105, 18, 28); | ||
+ | border-radius: 1em; | ||
+ | box-shadow: none !important; | ||
} | } | ||
- | |||
.jms-wrapper { | .jms-wrapper { | ||
width: 100%; | width: 100%; | ||
Line 28: | Line 38: | ||
font-size: 16px; | font-size: 16px; | ||
- | background-image: url(https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-mainbg-Wood_pattern_2.jpg); | + | background-color: transparent; |
+ | /*background-image: url(https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-mainbg-Wood_pattern_2.jpg);*/ | ||
border: 0; | border: 0; | ||
border-radius: 1em; | border-radius: 1em; | ||
- | box-shadow: | + | box-shadow: none !important; |
} | } | ||
.step { | .step { | ||
- | width: | + | width: 900px; |
- | height: | + | height: 600px; |
margin:auto; | margin:auto; | ||
text-align: center; | text-align: center; | ||
- | opacity: 1 !important; | + | /*opacity: 1 !important;*/ |
+ | z-index: 0; | ||
+ | display: none; | ||
} | } | ||
- | .step | + | .step.active { |
+ | z-index: 5; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .step > p { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: -1.3em; | ||
width: 100%; | width: 100%; | ||
+ | margin: 0 !important; | ||
+ | padding: 0 !important; | ||
+ | |||
+ | font-size: 2.5em; | ||
+ | font-family: "Boogaloo"; | ||
+ | } | ||
+ | |||
+ | .step table { | ||
+ | position: relative; | ||
+ | top: -1.5em; | ||
+ | width: 100% !important; | ||
height: 100%; | height: 100%; | ||
background-color: transparent; | background-color: transparent; | ||
color: black; | color: black; | ||
+ | font-size: 1.2em; | ||
text-align: justify; | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .step table tr td:nth-child(1) { | ||
+ | width: 300px; | ||
} | } | ||
Line 53: | Line 90: | ||
margin-left: 2em; | margin-left: 2em; | ||
max-width: 500px; | max-width: 500px; | ||
- | max-height: | + | max-height: 550px; |
} | } | ||
Line 62: | Line 99: | ||
font-weight: bold; | font-weight: bold; | ||
text-align: left; | text-align: left; | ||
- | text-shadow: 0 0 | + | border-bottom: 3px solid black; |
- | + | } | |
+ | |||
+ | .jms-slideshow .jms-dots { | ||
+ | position: relative; | ||
+ | bottom: 1.5em; | ||
+ | } | ||
+ | |||
+ | /*Navigation arrows*/ | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-2 { | ||
+ | position: relative; | ||
+ | |||
+ | margin: -1em 0 1em 0; | ||
+ | padding: 0.5em; | ||
+ | |||
+ | background-color: rgba(255,255,255,.6); | ||
+ | |||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-prev, | ||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-next { | ||
+ | position: absolute; | ||
+ | bottom: 0.8em; | ||
+ | |||
+ | width: 174px; | ||
+ | |||
+ | border: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | .container .sheet-2 .tn-arr-prev { | ||
+ | left: 2em; | ||
+ | } | ||
+ | |||
+ | .container .sheet-2 .tn-arr-next { | ||
+ | right: 2em; | ||
+ | } | ||
+ | |||
+ | /*Tour*/ | ||
+ | |||
+ | #tn-central-container { | ||
+ | position: relative; | ||
+ | box-shadow: none; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #tn-header-wrap #tn-header #tn-menu { | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | right: 10px; | ||
+ | |||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour img { | ||
+ | height: 200px; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour span { | ||
+ | position: absolute; | ||
+ | bottom: 0.5em; | ||
+ | left: 0; | ||
+ | |||
+ | color: black; | ||
+ | font-family: "Boogaloo", cursive; | ||
+ | font-size: 1.5em; | ||
+ | text-shadow: 0 0 4px white; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour:hover span { | ||
+ | color: rgb(245, 90, 0); | ||
+ | } | ||
+ | |||
+ | @media(max-width:1500px) { | ||
+ | #tn-central-container { | ||
+ | padding-bottom: 200px; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet a:visited { | ||
+ | color:rgb(245, 90, 0); | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet a:hover { | ||
+ | color:black; | ||
} | } | ||
- | . | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:visited { |
- | + | color:rgb(245, 90, 0); | |
} | } | ||
- | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:hover { | |
- | + | color:black; | |
} | } |
Latest revision as of 12:31, 29 September 2013
- tn-content .container {
background-image: url(); background-color: rgb(245, 90, 0);
}
.tn-msg {
margin-bottom: 0;
font-family: "Kameron", cursive; font-size: 0.8em; text-align: center;
}
/*jmslideshow*/
.jms-slideshow {
width: 80%; height: 500px;
margin: 2em auto !important; margin-top: 0 !important;
font-family: arial; font-size: 16px;
background-color: rgba(255, 255, 255, 0.4); /*background-image: url(https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-mainbg-Wood_pattern_2.jpg);*/ border: 3px solid rgb(105, 18, 28); border-radius: 1em; box-shadow: none !important;
}
.jms-wrapper {
width: 100%; height: 500px;
font-family: arial; font-size: 16px;
background-color: transparent; /*background-image: url(https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-mainbg-Wood_pattern_2.jpg);*/ border: 0; border-radius: 1em; box-shadow: none !important;
}
.step {
width: 900px; height: 600px; margin:auto; text-align: center; /*opacity: 1 !important;*/ z-index: 0; display: none;
}
.step.active {
z-index: 5; display: block;
}
.step > p {
display: block; position: absolute; top: -1.3em; width: 100%; margin: 0 !important; padding: 0 !important;
font-size: 2.5em; font-family: "Boogaloo";
}
.step table {
position: relative; top: -1.5em; width: 100% !important; height: 100%; background-color: transparent; color: black; font-size: 1.2em; text-align: justify;
}
.step table tr td:nth-child(1) {
width: 300px;
}
.step table img {
margin-left: 2em; max-width: 500px; max-height: 550px;
}
.step table .title {
display: block; margin-bottom: 5px; font-size: 1.3em; font-weight: bold; text-align: left; border-bottom: 3px solid black;
}
.jms-slideshow .jms-dots {
position: relative; bottom: 1.5em;
}
/*Navigation arrows*/
- tn-central-container #tn-content-wrap #tn-content .container .sheet-2 {
position: relative; margin: -1em 0 1em 0; padding: 0.5em; background-color: rgba(255,255,255,.6); text-align: center;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-prev,
- tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-next {
position: absolute; bottom: 0.8em;
width: 174px; border: none; box-shadow: none;
}
.container .sheet-2 .tn-arr-prev {
left: 2em;
}
.container .sheet-2 .tn-arr-next {
right: 2em;
}
/*Tour*/
- tn-central-container {
position: relative; box-shadow: none; z-index: 0;
}
- tn-header-wrap #tn-header #tn-menu {
z-index: 5;
}
- tn-sp-tour {
position: absolute; bottom: 0; right: 10px; width: 200px;
}
- tn-sp-tour img {
height: 200px;
}
- tn-sp-tour span {
position: absolute; bottom: 0.5em; left: 0; color: black; font-family: "Boogaloo", cursive; font-size: 1.5em; text-shadow: 0 0 4px white;
}
- tn-sp-tour:hover span {
color: rgb(245, 90, 0);
}
@media(max-width:1500px) {
#tn-central-container { padding-bottom: 200px; }
- tn-central-container #tn-content-wrap #tn-content .container .sheet a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet a:visited {
color:rgb(245, 90, 0); }
- tn-central-container #tn-content-wrap #tn-content .container .sheet a:hover {
color:black; }
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:visited {
color:rgb(245, 90, 0); }
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:hover {
color:black; }