Team:UNITN-Trento/CSS/Parts
From 2013.igem.org
(21 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 0; | padding: 0; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
vertical-align: top; | vertical-align: top; | ||
} | } | ||
Line 22: | Line 9: | ||
display: inline-block; | display: inline-block; | ||
- | width: | + | width: 715px; |
margin: 0 10px 10px 10px; | margin: 0 10px 10px 10px; | ||
Line 34: | Line 21: | ||
display: block; | display: block; | ||
+ | margin-left: 10px; | ||
margin-top: 0; | margin-top: 0; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
- | width: | + | min-height: 300px; |
+ | width: 830px; | ||
- | |||
vertical-align: top; | vertical-align: top; | ||
- | background-color: | + | background-color: rgb(32,86,54); |
+ | background-image: url( https://static.igem.org/mediawiki/2013/9/91/Tn-2013-boxbg-Onda-Watermelon.png); | ||
border: 5px solid white; | border: 5px solid white; | ||
- | |||
box-shadow: 2px 2px 4px #323232; | box-shadow: 2px 2px 4px #323232; | ||
+ | color: white; | ||
} | } | ||
.tn-parts-container .content .box .label { | .tn-parts-container .content .box .label { | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 10px; |
- | right: - | + | right: -85px; |
- | height: | + | height: 100px; |
- | width: | + | width: 75px; |
+ | |||
+ | background: rgb(130, 20, 16); | ||
+ | border: 5px solid white; | ||
+ | border-left: 0; | ||
+ | border-top-right-radius: 1em; | ||
+ | border-bottom-right-radius: 1em; | ||
+ | box-shadow: 2px 2px 4px #323232; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .content .box #label1 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/9/9b/Tn-2013-parts-Eth-label.png); | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .content .box #label2 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/5/52/Tn-2013-partsMesa-label.png); | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .content .box #label3 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/0/0d/Tn-2013-parts-Blue-label.png); | ||
+ | } | ||
- | + | .tn-parts-container .content .box #label4 { | |
+ | background-image: url(https://static.igem.org/mediawiki/2013/8/8a/Tn-2013-parts-Bacillus-label.png); | ||
} | } | ||
Line 62: | Line 72: | ||
display: block; | display: block; | ||
- | margin: | + | margin: 0 13px; |
- | + | ||
+ | border-bottom: 3px solid white; | ||
font-family: "Boogaloo",sans-serif; | font-family: "Boogaloo",sans-serif; | ||
font-size: 3em; | font-size: 3em; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .content .box .title a { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .content .box .title a:hover { | ||
+ | text-decoration: none; | ||
} | } | ||
Line 86: | Line 105: | ||
.part-box td { | .part-box td { | ||
- | background-color: rgba( | + | padding: 0.4em; |
+ | background-color: rgba(100,100,100,.5); | ||
border-radius: 0.3em; | border-radius: 0.3em; | ||
vertical-align: top; | vertical-align: top; | ||
+ | color: white; | ||
+ | box-shadow: 0 0 2px rgba(250,250,250,1); | ||
} | } | ||
.part-box table .grade { | .part-box table .grade { | ||
width: 100px; | width: 100px; | ||
+ | text-align: center; | ||
+ | vertical-align: top !important; | ||
+ | } | ||
+ | |||
+ | .part-box table .grade img { | ||
+ | display: inline-block !important; | ||
+ | margin: 0 !important; | ||
+ | width: 25px; | ||
+ | vertical-align: top !important; | ||
} | } | ||
Line 98: | Line 129: | ||
width: 100px; | width: 100px; | ||
font-weight: bold; | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .part-box table .code a { | ||
+ | color: white; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .part-box table .code a:hover { | ||
+ | color: #a9a9a9; | ||
} | } | ||
Line 107: | Line 147: | ||
font-size: 0.9em; | font-size: 0.9em; | ||
text-align: justify; | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .legend { | ||
+ | width: 910px; | ||
+ | |||
+ | margin: 1em auto; | ||
+ | margin-left: 10px; | ||
+ | |||
+ | background-color: rgb(143,11,25); | ||
+ | background-image: url( https://static.igem.org/mediawiki/2013/d/de/Tn-2013-boxbg-Onda-GrapeRed.png); | ||
+ | border: 5px solid white; | ||
+ | box-shadow: 2px 2px 4px #323232; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .legend .sheet { | ||
+ | margin: 10px; | ||
+ | padding: 10px; | ||
+ | |||
+ | background-color: rgba(250,250,250,.6); | ||
+ | border-radius: 10px; | ||
+ | |||
+ | font-family: "Cabin", sans-serif; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .legend .sheet img { | ||
+ | display: inline !important; | ||
+ | height: 2em; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .legend .sheet ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | .tn-parts-container .legend .sheet ul { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | /*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; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | background-color: rgb(143,11,25); | ||
+ | background-image: url( https://static.igem.org/mediawiki/2013/d/de/Tn-2013-boxbg-Onda-GrapeRed.png); | ||
+ | } | ||
+ | |||
+ | |||
+ | .part-box table .code a { | ||
+ | color:rgb(255, 255, 102); | ||
} | } |
Latest revision as of 12:41, 29 September 2013
.tn-parts-container { width: 960px; margin: 0 auto; padding: 0; vertical-align: top; }
.tn-parts-container .content { display: inline-block;
width: 715px;
margin: 0 10px 10px 10px; margin-left: 0;
vertical-align: top; }
.tn-parts-container .content .box { position: relative; display: block;
margin-left: 10px;
margin-top: 0; margin-bottom: 30px;
min-height: 300px;
width: 830px;
vertical-align: top;
background-color: rgb(32,86,54);
background-image: url();
border: 5px solid white; box-shadow: 2px 2px 4px #323232; color: white; }
.tn-parts-container .content .box .label { position: absolute; top: 10px; right: -85px;
height: 100px; width: 75px;
background: rgb(130, 20, 16); border: 5px solid white; border-left: 0; border-top-right-radius: 1em; border-bottom-right-radius: 1em; box-shadow: 2px 2px 4px #323232;
}
.tn-parts-container .content .box #label1 {
background-image: url();
}
.tn-parts-container .content .box #label2 {
background-image: url();
}
.tn-parts-container .content .box #label3 {
background-image: url();
}
.tn-parts-container .content .box #label4 {
background-image: url();
}
.tn-parts-container .content .box .title { display: block;
margin: 0 13px;
border-bottom: 3px solid white;
font-family: "Boogaloo",sans-serif; font-size: 3em; }
.tn-parts-container .content .box .title a {
color: white;
}
.tn-parts-container .content .box .title a:hover {
text-decoration: none;
}
.tn-parts-container .content .box .part-box { /*background-color: #f0f0f0;*/ font-family: "Cabin"; }
.part-box { padding: 10px; }
.part-box table {
width: 100% !important;
margin: 0 auto !important; background: transparent; border-radius: 1em; }
.part-box td {
padding: 0.4em; background-color: rgba(100,100,100,.5); border-radius: 0.3em;
vertical-align: top; color: white; box-shadow: 0 0 2px rgba(250,250,250,1); }
.part-box table .grade { width: 100px; text-align: center; vertical-align: top !important; }
.part-box table .grade img {
display: inline-block !important; margin: 0 !important;
width: 25px; vertical-align: top !important; }
.part-box table .code { width: 100px; font-weight: bold; }
.part-box table .code a { color: white; text-decoration: none; }
.part-box table .code a:hover { color: #a9a9a9; }
.part-box table .name {
font-style: italic;
}
.part-box table .descr {
font-size: 0.9em;
text-align: justify; }
.tn-parts-container .legend {
width: 910px;
margin: 1em auto; margin-left: 10px;
background-color: rgb(143,11,25); background-image: url(); border: 5px solid white; box-shadow: 2px 2px 4px #323232;
}
.tn-parts-container .legend .sheet {
margin: 10px; padding: 10px; background-color: rgba(250,250,250,.6); border-radius: 10px; font-family: "Cabin", sans-serif; text-align: justify;
}
.tn-parts-container .legend .sheet img {
display: inline !important; height: 2em;
}
.tn-parts-container .legend .sheet ul {
list-style: none;
}
.tn-parts-container .legend .sheet ul {
margin-left: 0;
}
/*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;
}
.container { background-color: rgb(143,11,25);
background-image: url();
}
.part-box table .code a {
color:rgb(255, 255, 102);
}