Template:Team:ITESM-CEM/CSS
From 2014.igem.org
(Difference between revisions)
(110 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{CSS/Main}} | ||
+ | |||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
Line 4: | Line 6: | ||
.firstHeading {display:none;} | .firstHeading {display:none;} | ||
+ | |||
+ | #top-section { | ||
+ | height: 20px; | ||
+ | position: fixed; | ||
+ | top: -15px; | ||
+ | transition: top 0.2s, ease-out; | ||
+ | } | ||
+ | |||
+ | #top-section:hover { | ||
+ | top: 3px; | ||
+ | } | ||
+ | |||
+ | /* unvisited link */ | ||
+ | a:link { | ||
+ | color: #444; | ||
+ | } | ||
+ | |||
+ | /* visited link */ | ||
+ | a:visited { | ||
+ | color: #4f4f4f; | ||
+ | } | ||
+ | |||
+ | /* mouse over link */ | ||
+ | a:hover { | ||
+ | color: #4f4f4f; | ||
+ | } | ||
+ | |||
+ | /* selected link */ | ||
+ | a:active { | ||
+ | color: #4f4f4f; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | overflow-y:auto; | ||
+ | overflow-x:hidden; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
p { | p { | ||
- | font-family: 'Exo', sans-serif; | + | /*font-family: 'Exo', sans-serif;*/ |
- | font-size: | + | font-family: 'Open Sans', sans-serif; |
+ | font-size: 15px; | ||
font-weight: 400; | font-weight: 400; | ||
+ | letter-spacing: 10px | ||
color: #222; | color: #222; | ||
text-indent: 10; | text-indent: 10; | ||
white-space: inherit; | white-space: inherit; | ||
vertical-align: top; | vertical-align: top; | ||
- | position: | + | position: relative; |
width: 50%; | width: 50%; | ||
font-style: normal; | font-style: normal; | ||
Line 22: | Line 64: | ||
padding-bottom: 0px; | padding-bottom: 0px; | ||
padding-left: 25px; | padding-left: 25px; | ||
- | |||
border-top-style: none; | border-top-style: none; | ||
border-right-style: none; | border-right-style: none; | ||
Line 29: | Line 70: | ||
text-align: left; | text-align: left; | ||
} | } | ||
- | + | ||
- | font-family: | + | pie { |
- | font-size: | + | font-family: 'Open Sans', sans-serif; |
- | font-weight: | + | font-size: 12px; |
+ | font-weight: 400; | ||
+ | letter-spacing: 10px | ||
color: #222; | color: #222; | ||
- | + | text-indent: 10; | |
- | position: | + | vertical-align: top; |
+ | position: relative; | ||
+ | width: 30%; | ||
+ | text-align: left; | ||
} | } | ||
- | + | ||
- | font-family: Exo; | + | ul { |
- | font- | + | /*font-family: 'Exo', sans-serif;*/ |
- | + | font-family: 'Open Sans', sans-serif; | |
- | + | ||
padding-left: 25px; | padding-left: 25px; | ||
- | + | list-style-image: none; | |
- | + | ||
- | + | ||
} | } | ||
+ | |||
h1 { | h1 { | ||
font-family: Exo; | font-family: Exo; | ||
Line 53: | Line 97: | ||
color: #FFF; | color: #FFF; | ||
margin-left: 22px; | margin-left: 22px; | ||
+ | margin-top: 0px; | ||
font-style: normal; | font-style: normal; | ||
letter-spacing: -1pt; | letter-spacing: -1pt; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
- | position: | + | position: relative; |
} | } | ||
h1n { | h1n { | ||
Line 68: | Line 113: | ||
position: static; | position: static; | ||
} | } | ||
+ | |||
+ | sub { | ||
+ | font-family: Exo; | ||
+ | font-size: 18px; | ||
+ | color: #444; | ||
+ | font-weight: 600; | ||
+ | margin-right: 25px; | ||
+ | position: relative; | ||
+ | left: -20px; | ||
+ | top: -18px; | ||
+ | } | ||
+ | |||
+ | |||
+ | sub2 { | ||
+ | font-family: Exo; | ||
+ | font-size: 16px; | ||
+ | color: #FFF; | ||
+ | font-weight: 600; | ||
+ | margin-right: 25px; | ||
+ | position: relative; | ||
+ | left: -20px; | ||
+ | top: -15px; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-family: 'Exo', sans-serif; | ||
+ | font-size: 20px; | ||
+ | font-weight: 600; | ||
+ | color: #222; | ||
+ | padding-left: 25px; | ||
+ | position: static; | ||
+ | border-top-style: none; | ||
+ | border-right-style: none; | ||
+ | border-bottom-style: none; | ||
+ | border-left-style: none; | ||
+ | } | ||
+ | |||
h3 { | h3 { | ||
font-family: Exo; | font-family: Exo; | ||
Line 79: | Line 161: | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
} | } | ||
+ | |||
+ | h4 { | ||
+ | font-family: 'Exo', sans-serif; | ||
+ | font-size: 16px; | ||
+ | font-weight: 600; | ||
+ | color: #333; | ||
+ | padding-left: 25px; | ||
+ | position: static; | ||
+ | border-top-style: none; | ||
+ | border-right-style: none; | ||
+ | border-bottom-style: none; | ||
+ | border-left-style: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | gotop { | ||
+ | font-family: Exo; | ||
+ | font-size: 12px; | ||
+ | color: #222; | ||
+ | font-weight: 400; | ||
+ | padding-left: 25px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .header { | ||
+ | position: fixed; | ||
+ | top: 0px; | ||
+ | right: 0px; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | .headerSocial { | ||
+ | position: fixed; | ||
+ | top: 80px; | ||
+ | right: 0px; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
.footer { | .footer { | ||
position: fixed; | position: fixed; | ||
- | bottom: 0 | + | bottom: -0px; |
+ | |||
+ | -webkit-transition: bottom 0.2s; ease-out; | ||
+ | -moz-transition: bottom 0.2s; ease-out; | ||
+ | -ms-transition: bottom 0.2s; ease-out; | ||
+ | -o-transition: bottom 0.2s; ease-out; | ||
+ | transition: bottom 0.2s; ease-out; | ||
} | } | ||
+ | .footer:hover { | ||
+ | position: fixed; | ||
+ | bottom: 10px; | ||
+ | z-index:2; | ||
+ | } | ||
.PLASMENU { | .PLASMENU { | ||
position: fixed; | position: fixed; | ||
Line 91: | Line 222: | ||
right: -200px; | right: -200px; | ||
-webkit-transform: rotate(190deg); | -webkit-transform: rotate(190deg); | ||
+ | transform: rotate(190deg); | ||
-webkit-transition: bottom 0.2s, right 0.2s, -webkit-transform 1s; ease-out; | -webkit-transition: bottom 0.2s, right 0.2s, -webkit-transform 1s; ease-out; | ||
- | -moz-transition: bottom 0.2s, right 0.2s, - | + | -moz-transition: bottom 0.2s, right 0.2s, -moz-transform 1s; ease-out; |
- | -ms-transition: bottom 0.2s, right 0.2s, - | + | -ms-transition: bottom 0.2s, right 0.2s, -ms-transform 1s; ease-out; |
- | -o-transition: bottom 0.2s, right 0.2s, - | + | -o-transition: bottom 0.2s, right 0.2s, -o-transform 1s; ease-out; |
- | transition: bottom 0.2s, right 0.2s, | + | transition: bottom 0.2s, right 0.2s, transform 1s; ease-out; |
/*transition-delay: 0.1s;*/ | /*transition-delay: 0.1s;*/ | ||
+ | z-index:2; | ||
} | } | ||
Line 106: | Line 239: | ||
right: -5%;*/ | right: -5%;*/ | ||
-webkit-transform: rotate(0deg); | -webkit-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
} | } | ||
- | + | #ContenidoSecciones { | |
- | + | padding-bottom: 100px; | |
- | + | background: transparent; | |
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | padding- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | background | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | .centeredImage |
- | + | { | |
- | + | text-align:center; | |
- | + | margin-top:0px; | |
- | + | margin-bottom:0px; | |
- | + | padding:0px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | text-align:center; | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 00:35, 14 October 2014