"
Team:Buenos Aires/css/style.css
From 2013.igem.org
| (79 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| + | /* Style based on AnimatedContentMenu by http://tympanus.net/codrops/ */ | ||
| + | |||
| + | |||
@import url('https://2013.igem.org/Team:Buenos_Aires/css/reset.css?action=raw&ctype=text/css'); | @import url('https://2013.igem.org/Team:Buenos_Aires/css/reset.css?action=raw&ctype=text/css'); | ||
body{ | body{ | ||
| - | background:#000; | + | background-color:#000; |
color:#fff; | color:#fff; | ||
font-family: 'PT Sans Narrow', Arial, sans-serif; | font-family: 'PT Sans Narrow', Arial, sans-serif; | ||
text-transform:uppercase; | text-transform:uppercase; | ||
| + | } | ||
| + | |||
| + | #external{ | ||
| + | padding-top:10px; | ||
| + | height:100%; | ||
| + | overflow:auto; | ||
| + | |||
| + | box-shadow: 10px 10px 5px #888888; | ||
} | } | ||
| Line 13: | Line 24: | ||
height:100%; | height:100%; | ||
width:100%; | width:100%; | ||
| - | |||
| - | |||
} | } | ||
| Line 22: | Line 31: | ||
} | } | ||
| - | |||
| - | |||
| - | |||
img.ac_bgimage{ | img.ac_bgimage{ | ||
| Line 47: | Line 53: | ||
top:10px; | top:10px; | ||
right:10px; | right:10px; | ||
| - | background:#000 url("https://static.igem.org/mediawiki/2013/2/ | + | background:#000 url("https://static.igem.org/mediawiki/2013/2/20/BsAs-Loader.gif") no-repeat center center; |
width:50px; | width:50px; | ||
height:50px; | height:50px; | ||
| Line 56: | Line 62: | ||
opacity:0.7; | opacity:0.7; | ||
display:none; | display:none; | ||
| + | } | ||
| + | |||
| + | .text_loading{ | ||
| + | position:absolute; | ||
| + | top:50%; | ||
| + | left:40%; | ||
| + | background:#000 url("https://static.igem.org/mediawiki/2013/2/20/BsAs-Loader.gif") no-repeat center center; | ||
| + | width:50px; | ||
| + | height:50px; | ||
| + | -moz-border-radius:10px; | ||
| + | -webkit-border-radius:10px; | ||
| + | border-radius:10px 10px 10px 10px; | ||
| + | z-index:999; | ||
| + | opacity:0.7; | ||
| + | display:none; | ||
| + | } | ||
| + | |||
| + | |||
| + | .texto{ | ||
| + | box-shadow: 10px 10px 5px #888888; | ||
| + | background:#FFF; | ||
| + | color:#000; | ||
| + | position:fixed; | ||
| + | text-align:justify; | ||
| + | font-size:16px; | ||
| + | text-transform:none; | ||
| + | border-bottom:1px dotted #333; | ||
| + | text-indent:20px; | ||
| + | top:120px; | ||
| + | margin:auto 26% auto 130px; | ||
| + | padding-left:20px; | ||
| + | padding-right:20px; | ||
| + | padding-top:20px; | ||
| + | min-height:380px; | ||
| + | overflow:auto; | ||
| + | opacity:1; | ||
| + | z-index:999; | ||
| + | display:none; | ||
| + | max-height: 70%; | ||
| + | } | ||
| + | |||
| + | |||
| + | .texto H1{color:#000;} | ||
| + | .texto H2{color:#000;} | ||
| + | .texto a{color:#000;} | ||
| + | |||
| + | H2{color:#FFF;} | ||
| + | |||
| + | H1{ | ||
| + | color:#FFF; | ||
| + | font-size:35px; | ||
| + | text-align:center; | ||
} | } | ||
.ac_content{ | .ac_content{ | ||
| Line 61: | Line 119: | ||
height:90px; | height:90px; | ||
width:100%; | width:100%; | ||
| - | top: | + | top:80px; |
left:0px; | left:0px; | ||
margin-top:-65px; | margin-top:-65px; | ||
| + | opacity:0.8; | ||
| + | |||
} | } | ||
.ac_content h1{ | .ac_content h1{ | ||
| Line 112: | Line 172: | ||
} | } | ||
.ac_subitem{ | .ac_subitem{ | ||
| - | width: | + | width:25%; |
height:0px; /* animate to 400px */ | height:0px; /* animate to 400px */ | ||
| - | top: | + | top:320px; |
right:0px; | right:0px; | ||
margin-top:0px; /* animate to -200px */ | margin-top:0px; /* animate to -200px */ | ||
| + | right:10px; | ||
position:fixed; | position:fixed; | ||
z-index:99; | z-index:99; | ||
| Line 137: | Line 198: | ||
.ac_subitem ul li a{ | .ac_subitem ul li a{ | ||
| - | margin-top: | + | margin-top:0px; |
| - | + | ||
opacity:1; | opacity:1; | ||
display:block; | display:block; | ||
height:20px; | height:20px; | ||
| - | padding:0px 0px | + | width:80px; |
| + | padding:0px 0px; | ||
text-align:left; | text-align:left; | ||
| - | line-height: | + | line-height:16px; |
| - | + | font-size:17px; | |
| - | font-size: | + | font-weight:normal; |
| - | font-weight: | + | text-shadow:1px 1px 1px #000; |
| - | text-shadow:1px 1px 1px #000; } | + | text-transform:none; |
| + | } | ||
| + | |||
| + | .ac_subitem ul li a:hover{ | ||
| + | opacity:0.7; | ||
| + | } | ||
| + | |||
| + | .ac_subitem ul li a:active{ | ||
| + | color: #86A; | ||
| + | } | ||
| + | |||
| + | .ac_subitem ul li a:visited{ | ||
| + | color: #EEE; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
.ac_subitem ul li:first-child{ | .ac_subitem ul li:first-child{ | ||
| - | font-size: | + | font-size:15px; |
text-transform:none; | text-transform:none; | ||
border-bottom:1px dotted #333; | border-bottom:1px dotted #333; | ||
| Line 158: | Line 235: | ||
span.ac_close{ | span.ac_close{ | ||
float:right; | float:right; | ||
| - | margin: | + | margin:1%; |
width:11px; | width:11px; | ||
height:12px; | height:12px; | ||
cursor:pointer; | cursor:pointer; | ||
background:transparent url("https://static.igem.org/mediawiki/2013/b/bd/Close.png") no-repeat top left; | background:transparent url("https://static.igem.org/mediawiki/2013/b/bd/Close.png") no-repeat top left; | ||
| - | opacity:0. | + | opacity:0.7; |
} | } | ||
span.ac_close:hover{ | span.ac_close:hover{ | ||
Latest revision as of 01:28, 16 July 2013
/* Style based on AnimatedContentMenu by http://tympanus.net/codrops/ */
@import url('https://2013.igem.org/Team:Buenos_Aires/css/reset.css?action=raw&ctype=text/css');
body{ background-color:#000; color:#fff; font-family: 'PT Sans Narrow', Arial, sans-serif; text-transform:uppercase; }
- external{
padding-top:10px; height:100%; overflow:auto;
box-shadow: 10px 10px 5px #888888; }
- contenedor{
position:relative;
height:100%; width:100%; }
a{ color:#fff; text-decoration:none; }
img.ac_bgimage{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
opacity:0.8;
display:none;
}
.ac_overlay{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:transparent url("
") repeat top left;
}
.ac_loading{
position:absolute;
top:10px;
right:10px;
background:#000 url("
") no-repeat center center;
width:50px;
height:50px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px 10px 10px 10px;
z-index:999;
opacity:0.7;
display:none;
}
.text_loading{
position:absolute;
top:50%;
left:40%;
background:#000 url("") no-repeat center center;
width:50px;
height:50px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px 10px 10px 10px;
z-index:999;
opacity:0.7;
display:none;
}
.texto{
box-shadow: 10px 10px 5px #888888;
background:#FFF;
color:#000;
position:fixed;
text-align:justify;
font-size:16px;
text-transform:none;
border-bottom:1px dotted #333;
text-indent:20px;
top:120px;
margin:auto 26% auto 130px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
min-height:380px;
overflow:auto;
opacity:1;
z-index:999;
display:none;
max-height: 70%;
}
.texto H1{color:#000;}
.texto H2{color:#000;}
.texto a{color:#000;}
H2{color:#FFF;}
H1{
color:#FFF;
font-size:35px; text-align:center; } .ac_content{ position:fixed; height:90px; width:100%; top:80px; left:0px; margin-top:-65px;
opacity:0.8;
}
.ac_content h1{
background:transparent url("
") repeat top left;
display:block;
float:left;
width:90px;
height:50px;
padding:20px;
font-size:36px;
font-weight:bold;
line-height:20px;
margin-right:1px;
}
.ac_content h1 span{
display:block;
font-weight:normal;
font-size:14px;
}
.ac_menu{
background:transparent url("") repeat top left;
float:left;
position:relative;
height:90px;
width:0px;
}
.ac_menu > ul{
float:right;
}
.ac_menu > ul > li{
float:left;
position:relative;
height:90px;
overflow:hidden;
}
.ac_menu > ul > li a{
margin-top:60px;
opacity:0;
display:block;
height:90px;
padding:0px 10px;
text-align:center;
line-height:90px;
outline:none;
font-size:18px;
font-weight:bold;
text-shadow:1px 1px 1px #000;
}
.ac_subitem{
width:25%;
height:0px; /* animate to 400px */
top:320px;
right:0px;
margin-top:0px; /* animate to -200px */
right:10px;
position:fixed;
z-index:99;
overflow:hidden;
background:transparent url("") repeat top left;
}
.ac_subitem h2{
font-size:22px;
font-weight:bold;
color:#fff;
padding: 40px 0px 0px 40px;
text-shadow:0px 0px 1px #000;
}
.ac_subitem ul{
padding:0px 40px;
}
.ac_subitem ul li{
margin:10px 0px;
}
.ac_subitem ul li a{ margin-top:0px; opacity:1; display:block; height:20px; width:80px; padding:0px 0px; text-align:left; line-height:16px; font-size:17px; font-weight:normal; text-shadow:1px 1px 1px #000; text-transform:none; }
.ac_subitem ul li a:hover{ opacity:0.7; }
.ac_subitem ul li a:active{ color: #86A; }
.ac_subitem ul li a:visited{ color: #EEE; }
.ac_subitem ul li:first-child{
font-size:15px;
text-transform:none;
border-bottom:1px dotted #333;
padding-bottom:15px;
margin-bottom:15px;
}
span.ac_close{
float:right;
margin:1%;
width:11px;
height:12px;
cursor:pointer;
background:transparent url("
") no-repeat top left;
opacity:0.7;
}
span.ac_close:hover{
opacity:1.0;
}
.ac_footer{
position:absolute;
bottom:0px;
left:0px;
width:100%;
font-size:13px;
background:#000;
opacity:0.9;
height:20px;
padding-bottom:5px;
}
.ac_footer a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
float:right;
}
.footer a:hover{
color:#fff;
}
.ac_footer a span{
font-weight:bold;
}
.ac_footer a.ac_left{
float:left;
}
