Team:UNITN-Trento/CSS/Laboratory/Meetings
From 2013.igem.org
(Divided left/right based on classes) |
|||
(11 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
margin: 0 auto; | margin: 0 auto; | ||
- | height: | + | height: 1600px; |
width: 960px; | width: 960px; | ||
} | } | ||
Line 16: | Line 16: | ||
width: 15px; | width: 15px; | ||
- | background-color: | + | background-color: #2880c5; |
+ | box-shadow: 2px 2px 4px black; | ||
} | } | ||
Line 22: | Line 23: | ||
position: absolute; | position: absolute; | ||
- | padding: | + | padding: 1.5em; |
width: 400px; | width: 400px; | ||
- | background-color: | + | background-color: rgba(250,250,250,.9); |
- | border: | + | border-radius: 0.7em; |
- | + | ||
+ | font-family: "Cabin", cursive; | ||
+ | text-align: justify; | ||
} | } | ||
- | .timeline . | + | .tn-timeline .left { |
- | + | left: 0; | |
} | } | ||
- | .timeline . | + | .tn-timeline .right { |
- | + | right: 0; | |
} | } | ||
Line 44: | Line 47: | ||
.tn-timeline #box2 { | .tn-timeline #box2 { | ||
- | top: | + | top: 222px; |
} | } | ||
.tn-timeline #box3 { | .tn-timeline #box3 { | ||
- | top: | + | top: 430px; |
} | } | ||
.tn-timeline #box4 { | .tn-timeline #box4 { | ||
- | top: | + | top: 600px; |
} | } | ||
.tn-timeline #box5 { | .tn-timeline #box5 { | ||
- | top: | + | top: 760px; |
} | } | ||
.tn-timeline #box6 { | .tn-timeline #box6 { | ||
- | top: | + | top: 900px; |
+ | } | ||
+ | |||
+ | .tn-timeline #box7 { | ||
+ | top: 1200px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #box8 { | ||
+ | top: 1400px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline .left .pointer { | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | right: -24px; | ||
+ | transform:rotate(-90deg); | ||
+ | -webkit-transform:rotate(-90deg); | ||
+ | -moz-transform:rotate(-90deg); | ||
+ | } | ||
+ | |||
+ | .tn-timeline .right .pointer { | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | left: -24px; | ||
+ | transform:rotate(90deg); | ||
+ | -webkit-transform:rotate(90deg); | ||
+ | -moz-transform:rotate(90deg); | ||
+ | } | ||
+ | |||
+ | .tn-timeline .box .date { | ||
+ | display: block; | ||
+ | margin-bottom: 5px; | ||
+ | font-family: "Boogaloo", sans-serif; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | |||
+ | .tn-timeline .box.left .date { | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | .tn-timeline .photo { | ||
+ | position: absolute; | ||
+ | |||
+ | height: 200px; | ||
+ | width: 300px; | ||
+ | |||
+ | border: 3px solid white; | ||
+ | } | ||
+ | |||
+ | .tn-timeline .photo img { | ||
+ | max-height: 200px !important; | ||
+ | max-width: 300px !important; | ||
+ | } | ||
+ | |||
+ | .tn-timeline .photo.right .pointer { | ||
+ | left: -30px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline .photo.left .pointer { | ||
+ | right: -30px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo1 { | ||
+ | top: 210px; | ||
+ | left: 139px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo2 { | ||
+ | top: 1159px; | ||
+ | right: 139px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo3 { | ||
+ | top: 897px; | ||
+ | left: 139px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo4 { | ||
+ | top: 1357px; | ||
+ | left: 139px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo5 { | ||
+ | top: -1px; | ||
+ | right: 173px; | ||
+ | width: 266px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo6 { | ||
+ | top: 593px; | ||
+ | left: 240px; | ||
+ | height: 150px; | ||
+ | width: 199px; | ||
+ | } | ||
+ | |||
+ | .tn-timeline #photo6 img:nth-child(1) { | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | .tn-hoverTag { | ||
+ | position: fixed; | ||
+ | top:0; right:0; bottom:0; left:0; | ||
+ | |||
+ | text-align: center; | ||
+ | background-color: rgba(50,50,50,.9); | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | .tn-hoverTag > div { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .tn-hoverTag img { | ||
+ | margin-top: 2em; | ||
+ | height: 75%; | ||
+ | border-radius:1em; | ||
+ | } | ||
+ | |||
+ | .tn-hoverTag span { | ||
+ | display: block; | ||
+ | margin-top: 0.5em; | ||
+ | font-size: 2em; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #tn-content .container { | ||
+ | width: 960px; | ||
+ | margin: auto; | ||
+ | padding: 0; | ||
+ | |||
+ | background-color: rgb(32,86,54); | ||
+ | background-image: url( https://static.igem.org/mediawiki/2013/9/91/Tn-2013-boxbg-Onda-Watermelon.png); | ||
+ | background-position: top center; | ||
+ | background-repeat: no-repeat; | ||
+ | border: 3px solid white; | ||
+ | box-shadow: 2px 2px 4px #323232; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | |||
+ | #tn-content .container .sheet { | ||
+ | margin: 2em; | ||
+ | padding: 1em; | ||
+ | |||
+ | background: rgba(255,255,255,0.7); | ||
+ | border-radius: 1em; | ||
+ | |||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | margin-top: 2em !important; | ||
+ | } | ||
+ | |||
+ | .container .sheet .logo { | ||
+ | margin: 0 auto; | ||
+ | margin-top: 1em; | ||
+ | width: 850px; | ||
+ | overflow-x: auto; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | .container .sheet .logo img { | ||
+ | margin: 0.5em 0.3em; | ||
+ | max-height: 100px; | ||
+ | max-width: 200px; | ||
+ | |||
+ | border: 4px solid black; | ||
+ | box-shadow: 2px 2px 4px black; | ||
+ | } | ||
+ | |||
+ | /*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; | ||
} | } |
Latest revision as of 14:10, 28 September 2013
.tn-timeline {
position: relative;
margin: 0 auto;
height: 1600px; width: 960px;
}
.tn-timeline .line {
display: block; margin: 0 auto; height: 100%; width: 15px; background-color: #2880c5; box-shadow: 2px 2px 4px black;
}
.tn-timeline .box {
position: absolute;
padding: 1.5em;
width: 400px; background-color: rgba(250,250,250,.9); border-radius: 0.7em; font-family: "Cabin", cursive; text-align: justify;
}
.tn-timeline .left {
left: 0;
}
.tn-timeline .right {
right: 0;
}
.tn-timeline #box1 {
top: 0;
}
.tn-timeline #box2 {
top: 222px;
}
.tn-timeline #box3 {
top: 430px;
}
.tn-timeline #box4 {
top: 600px;
}
.tn-timeline #box5 {
top: 760px;
}
.tn-timeline #box6 {
top: 900px;
}
.tn-timeline #box7 {
top: 1200px;
}
.tn-timeline #box8 {
top: 1400px;
}
.tn-timeline .left .pointer {
position: absolute; top: 40%; right: -24px; transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);
}
.tn-timeline .right .pointer {
position: absolute; top: 40%; left: -24px; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);
}
.tn-timeline .box .date {
display: block; margin-bottom: 5px; font-family: "Boogaloo", sans-serif; font-size: 1.5em;
}
.tn-timeline .box.left .date {
text-align: right;
}
.tn-timeline .photo {
position: absolute;
height: 200px; width: 300px; border: 3px solid white;
}
.tn-timeline .photo img {
max-height: 200px !important; max-width: 300px !important;
}
.tn-timeline .photo.right .pointer {
left: -30px;
}
.tn-timeline .photo.left .pointer {
right: -30px;
}
.tn-timeline #photo1 {
top: 210px; left: 139px;
}
.tn-timeline #photo2 {
top: 1159px; right: 139px;
}
.tn-timeline #photo3 {
top: 897px; left: 139px;
}
.tn-timeline #photo4 {
top: 1357px; left: 139px;
}
.tn-timeline #photo5 {
top: -1px; right: 173px; width: 266px;
}
.tn-timeline #photo6 {
top: 593px; left: 240px; height: 150px; width: 199px;
}
.tn-timeline #photo6 img:nth-child(1) {
height: 150px;
}
.tn-hoverTag {
position: fixed; top:0; right:0; bottom:0; left:0;
text-align: center; background-color: rgba(50,50,50,.9); z-index: 5;
}
.tn-hoverTag > div {
height: 100%;
}
.tn-hoverTag img {
margin-top: 2em; height: 75%; border-radius:1em;
}
.tn-hoverTag span {
display: block; margin-top: 0.5em; font-size: 2em; color: white;
}
- tn-content .container {
width: 960px; margin: auto; padding: 0;
background-color: rgb(32,86,54); background-image: url( ); background-position: top center; background-repeat: no-repeat; border: 3px solid white; box-shadow: 2px 2px 4px #323232; text-align:justify;
}
- tn-content .container .sheet {
margin: 2em; padding: 1em;
background: rgba(255,255,255,0.7); border-radius: 1em;
text-align: justify;
}
.container {
margin-top: 2em !important;
}
.container .sheet .logo {
margin: 0 auto; margin-top: 1em; width: 850px; overflow-x: auto; white-space: nowrap;
}
.container .sheet .logo img {
margin: 0.5em 0.3em; max-height: 100px; max-width: 200px; border: 4px solid black; box-shadow: 2px 2px 4px black;
}
/*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;
}