Team:UNITN-Trento/CSS/Default
From 2013.igem.org
(Difference between revisions)
(34 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/*HEADER IN APPOSITE SUBS/TEMPLATE*/ | /*HEADER IN APPOSITE SUBS/TEMPLATE*/ | ||
Line 18: | Line 6: | ||
#tn-central-container { | #tn-central-container { | ||
- | + | display: block; | |
- | + | width: 100%; | |
- | + | min-height: 600px; | |
- | + | margin: 0 auto; | |
- | + | padding: 1.5em 0; | |
- | + | background-color: #dadada; | |
+ | background-image: url(https://static.igem.org/mediawiki/2013/a/aa/Tn-2013-mainbg-Wood_pattern.png);a | ||
+ | background-size: 100% auto !important; | ||
- | + | box-shadow: 0 0 8px ; | |
- | + | ||
- | + | font-family: 'Cabin', sans-serif; | |
} | } | ||
#tn-content-wrap { | #tn-content-wrap { | ||
- | + | display: static; | |
- | + | max-width: 1200px; | |
- | + | min-height: 600px; | |
- | + | margin: 0 auto; | |
- | + | margin-top: 6em; | |
- | + | padding: 1px; | |
- | + | padding-top: 0; | |
} | } | ||
#tn-content { | #tn-content { | ||
- | + | display: static; | |
- | + | margin: 0 auto; | |
- | + | ||
- | + | max-width: 1200px; | |
- | + | height: 100%; | |
- | + | ||
+ | padding: 1em; | ||
+ | padding-top: 0; | ||
} | } | ||
- | /* | + | /*Style content-class*/ |
- | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet { | |
- | + | font-family: "Cabin", sans-serif; | |
- | + | font-size: 16px; | |
+ | } | ||
- | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-title { | |
- | + | display: block; | |
- | + | ||
+ | padding-top: 0; | ||
+ | |||
+ | border: none; | ||
+ | |||
+ | font-family: 'Boogaloo', cursive; | ||
+ | font-size: 2.5em; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-subtitle { | ||
+ | display: block; | ||
+ | |||
+ | margin-top: 1.5em; | ||
+ | margin-bottom: 0.5em; | ||
+ | |||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | font-size: 1.2em; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-sub-subtitle:before { | ||
+ | content: "\00BB\ "; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-sub-subtitle { | ||
+ | display: block; | ||
+ | |||
+ | margin-top: 1.5em; | ||
+ | margin-bottom: 0.5em; | ||
+ | |||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | font-size: 1em; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #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: #323232; | ||
+ | } | ||
+ | |||
+ | #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-quote { | ||
+ | display: block; | ||
+ | |||
+ | margin-top: 0.5em; | ||
+ | margin-bottom: 1em; | ||
+ | |||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | font-size: 1.2em; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect { | ||
+ | display: block; | ||
+ | |||
+ | margin: 0.4em 0; | ||
+ | |||
+ | font-family: "Open Sans Condensed", cursive; | ||
+ | font-size: 1.8em; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-ref { | ||
+ | font-family: "Kameron", cursive; | ||
+ | font-size: 0.8em; | ||
+ | } | ||
+ | |||
+ | #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 { | ||
+ | display: block; | ||
+ | |||
+ | margin: 0 auto; | ||
+ | |||
+ | color: #323232; | ||
+ | font-family: "Open Sans Condensed", sans-serif; | ||
+ | font-size: 2em; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:hover { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-quote-link a:link, | ||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-quote-link a:visited { | ||
+ | display: block; | ||
+ | |||
+ | margin-top: 0.5em; | ||
+ | margin-bottom: 1em; | ||
+ | |||
+ | color: #323232; | ||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | font-size: 1.2em; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-quote-link a:hover { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-caption { | ||
+ | display: block; | ||
+ | |||
+ | margin: 0 auto; | ||
+ | margin-bottom: 1em; | ||
+ | padding: 0.5em; | ||
+ | width: 80%; | ||
+ | |||
+ | font-size: 0.9em; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-caption.center { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet p { | ||
+ | line-height: 1.2em; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > img { | ||
+ | display: block; | ||
+ | |||
+ | margin: 1em auto; | ||
+ | width: 800px; | ||
+ | |||
+ | border: 3px solid white; | ||
+ | box-shadow: 2px 2px 4px #323232; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet img.no-border { | ||
+ | border: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet img.no-bottom { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet img.no-top { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet ul { | ||
+ | list-style: disc; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > table { | ||
+ | margin: 1em auto; | ||
+ | max-width: 800px; | ||
+ | |||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > table.no-bottom { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > table td, | ||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > table th { | ||
+ | padding: 0.2em; | ||
+ | |||
+ | width: 50%; | ||
+ | |||
+ | border: 1px dotted black; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > table .right { | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet > table .center { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /*HoverTag*/ | ||
+ | |||
+ | .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; | ||
} | } | ||
/*FOOTER IN APPOSITE SUBS/TEMPLATE*/ | /*FOOTER IN APPOSITE SUBS/TEMPLATE*/ | ||
+ | |||
+ | @media(max-width: 900px) { | ||
+ | #tn-content-wrap { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | max-width: 800px; | ||
+ | } | ||
+ | |||
+ | #tn-content { | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | max-width: 700px; | ||
+ | } | ||
+ | } |
Latest revision as of 14:10, 15 October 2013
/*HEADER IN APPOSITE SUBS/TEMPLATE*/
/*******************/ /*CENTRAL CONTAINER*/ /*******************/
- tn-central-container {
display: block;
width: 100%; min-height: 600px;
margin: 0 auto; padding: 1.5em 0;
background-color: #dadada; background-image: url(https://static.igem.org/mediawiki/2013/a/aa/Tn-2013-mainbg-Wood_pattern.png);a background-size: 100% auto !important;
box-shadow: 0 0 8px ; font-family: 'Cabin', sans-serif;
}
- tn-content-wrap {
display: static;
max-width: 1200px; min-height: 600px;
margin: 0 auto; margin-top: 6em; padding: 1px; padding-top: 0;
}
- tn-content {
display: static;
margin: 0 auto;
max-width: 1200px; height: 100%; padding: 1em; padding-top: 0;
}
/*Style content-class*/
- tn-central-container #tn-content-wrap #tn-content .container .sheet {
font-family: "Cabin", sans-serif; font-size: 16px;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-title {
display: block;
padding-top: 0;
border: none;
font-family: 'Boogaloo', cursive; font-size: 2.5em;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-subtitle {
display: block;
margin-top: 1.5em; margin-bottom: 0.5em;
font-family: 'Open Sans Condensed', sans-serif; font-size: 1.2em; font-weight: bold;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-sub-subtitle:before {
content: "\00BB\ ";
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-sub-subtitle {
display: block;
margin-top: 1.5em; margin-bottom: 0.5em;
font-family: 'Open Sans Condensed', sans-serif; font-size: 1em; font-weight: bold;
}
- 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: #323232;
}
- 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-quote {
display: block;
margin-top: 0.5em; margin-bottom: 1em;
font-family: 'Open Sans Condensed', sans-serif; font-size: 1.2em; font-style: italic;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect {
display: block; margin: 0.4em 0; font-family: "Open Sans Condensed", cursive; font-size: 1.8em; text-align: center;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-ref {
font-family: "Kameron", cursive; font-size: 0.8em;
}
- 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 {
display: block; margin: 0 auto; color: #323232; font-family: "Open Sans Condensed", sans-serif; font-size: 2em; text-align: center;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:hover {
color: black;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-quote-link a:link,
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-quote-link a:visited {
display: block;
margin-top: 0.5em; margin-bottom: 1em;
color: #323232; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.2em; font-style: italic;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-quote-link a:hover {
color: black;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-caption {
display: block;
margin: 0 auto; margin-bottom: 1em; padding: 0.5em; width: 80%; font-size: 0.9em;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet-caption.center {
text-align: center;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet p {
line-height: 1.2em;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet > img {
display: block;
margin: 1em auto; width: 800px; border: 3px solid white; box-shadow: 2px 2px 4px #323232;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet img.no-border {
border: none; box-shadow: none;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet img.no-bottom {
margin-bottom: 0;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet img.no-top {
margin-top: 0;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet ul {
list-style: disc;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet > table {
margin: 1em auto; max-width: 800px;
background-color: transparent;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet > table.no-bottom {
margin-bottom: 0;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet > table td,
- tn-central-container #tn-content-wrap #tn-content .container .sheet > table th {
padding: 0.2em; width: 50%; border: 1px dotted black;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet > table .right {
text-align: right;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet > table .center {
text-align: center;
}
/*HoverTag*/
.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;
}
/*FOOTER IN APPOSITE SUBS/TEMPLATE*/
@media(max-width: 900px) {
#tn-content-wrap { margin: 0; padding: 0; max-width: 800px; }
#tn-content { margin: 0 auto; padding: 0; max-width: 700px; }
}