Team:Buenos Aires/css/style color.css
From 2013.igem.org
(76 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
+ | /* | ||
.swing { | .swing { | ||
width:175px; | width:175px; | ||
Line 26: | Line 27: | ||
opacity:0.9; | opacity:0.9; | ||
} | } | ||
- | + | */ | |
/*.swing:hover{*/ | /*.swing:hover{*/ | ||
/* -moz-transform:rotate(360deg);*/ | /* -moz-transform:rotate(360deg);*/ | ||
Line 48: | Line 49: | ||
padding-left:10px; | padding-left:10px; | ||
padding-right:10px; | padding-right:10px; | ||
- | width: | + | width:90%; |
margin-left:25px; | margin-left:25px; | ||
margin-right:25px; | margin-right:25px; | ||
overflow:hidden; | overflow:hidden; | ||
font-size: 16px; | font-size: 16px; | ||
+ | color:#000; | ||
} | } | ||
- | #external | + | #external h1{ |
- | color:# | + | line-height:130%; |
+ | color: #003399; | ||
} | } | ||
+ | |||
+ | #external ul li{ | ||
+ | color:#000; | ||
+ | |||
+ | } | ||
+ | |||
#contenedor{ | #contenedor{ | ||
Line 63: | Line 72: | ||
position:relative; | position:relative; | ||
height:100%; | height:100%; | ||
- | width:1024px; | + | width:95%; |
+ | min-width: 1024px; | ||
margin-left:auto; | margin-left:auto; | ||
margin-right:auto; | margin-right:auto; | ||
Line 83: | Line 93: | ||
width:100%; | width:100%; | ||
height:100%; | height:100%; | ||
- | opacity:0. | + | opacity:0.9; |
display:none; | display:none; | ||
z-index:-1; | z-index:-1; | ||
Line 92: | Line 102: | ||
top:10px; | top:10px; | ||
right:10px; | right:10px; | ||
- | background: | + | background:url("https://static.igem.org/mediawiki/2013/2/20/BsAs-Loader.gif") no-repeat center center; |
- | width: | + | width:65px; |
- | height: | + | height:105px; |
-moz-border-radius:10px; | -moz-border-radius:10px; | ||
-webkit-border-radius:10px; | -webkit-border-radius:10px; | ||
border-radius:10px 10px 10px 10px; | border-radius:10px 10px 10px 10px; | ||
z-index:999; | z-index:999; | ||
- | opacity:0. | + | opacity:0.8; |
display:none; | display:none; | ||
+ | text-align: center; | ||
+ | text-decoration: bold; | ||
+ | color:#000; | ||
} | } | ||
Line 108: | Line 121: | ||
position:absolute; | position:absolute; | ||
top:50%; | top:50%; | ||
- | left: | + | left:600px; |
- | background:# | + | background:#FFF url("https://static.igem.org/mediawiki/2013/2/20/BsAs-Loader.gif") no-repeat center center; |
- | width: | + | width:65px; |
- | height: | + | height:105px; |
- | + | ||
- | + | ||
- | + | ||
z-index:999; | z-index:999; | ||
- | opacity: | + | opacity:1; |
display:none; | display:none; | ||
+ | text-align: center; | ||
+ | text-decoration: bold; | ||
} | } | ||
Line 127: | Line 139: | ||
font-size:16px; | font-size:16px; | ||
text-transform:none; | text-transform:none; | ||
- | border: | + | border:2px solid #333; |
text-indent:20px; | text-indent:20px; | ||
top:120px; | top:120px; | ||
- | left: | + | left:275px; |
- | + | border-radius:25px; | |
+ | |||
//min-height:400px; | //min-height:400px; | ||
overflow:auto; | overflow:auto; | ||
Line 137: | Line 150: | ||
z-index:999; | z-index:999; | ||
display:none; | display:none; | ||
- | height: | + | height: 80%; |
} | } | ||
.texto H1{color:#000;} | .texto H1{color:#000;} | ||
.texto H2{color:#000;} | .texto H2{color:#000;} | ||
.texto a{color:#000;} | .texto a{color:#000;} | ||
+ | |||
+ | font-size:18px; | ||
+ | color: #003399; | ||
+ | text-align:right;} | ||
+ | |||
+ | .texto ul{color:#000;} | ||
+ | .texto ul li{color:#000;} | ||
+ | .texto ul li:before{content: ". "; color:#000;} | ||
+ | |||
+ | |||
+ | |||
+ | .texto ol{color:#000;} | ||
+ | .texto ol li{color:#000;} | ||
+ | .texto ol li:before{content: "- "; color:#000;} | ||
+ | |||
H2{color:#FFF;} | H2{color:#FFF;} | ||
Line 150: | Line 178: | ||
text-align:center; | text-align:center; | ||
} | } | ||
+ | |||
+ | H2{ | ||
+ | font-size:24px; | ||
+ | text-decoration:none; | ||
+ | line-height:200%; | ||
+ | } | ||
+ | |||
+ | H3{ | ||
+ | font-size:22px; | ||
+ | font-weight:bold; | ||
+ | line-height:200%; | ||
+ | } | ||
+ | |||
+ | H4{ | ||
+ | font-weight:bold; | ||
+ | line-height:200%; | ||
+ | } | ||
+ | |||
+ | H5{ | ||
+ | font-weight:bold; | ||
+ | line-height:200%; | ||
+ | } | ||
+ | |||
.ac_content{ | .ac_content{ | ||
position:absolute; | position:absolute; | ||
Line 157: | Line 208: | ||
left:0px; | left:0px; | ||
margin-top:-65px; | margin-top:-65px; | ||
- | |||
- | |||
} | } | ||
/*Donde dice "Igem- BUenos Aires"*/ | /*Donde dice "Igem- BUenos Aires"*/ | ||
.ac_content h1{ | .ac_content h1{ | ||
- | background:# | + | background:#003399; |
display:block; | display:block; | ||
float:left; | float:left; | ||
Line 175: | Line 224: | ||
margin-right:1px; | margin-right:1px; | ||
border: solid black; | border: solid black; | ||
+ | border-radius:25px; | ||
box-shadow:5px 5px 5px 5px #7B7B7B; | box-shadow:5px 5px 5px 5px #7B7B7B; | ||
color:#FFF; | color:#FFF; | ||
+ | opacity: 0.9; | ||
} | } | ||
Line 187: | Line 238: | ||
} | } | ||
.ac_menu{ | .ac_menu{ | ||
- | background:# | + | background:#003399; |
float:left; | float:left; | ||
position:relative; | position:relative; | ||
Line 193: | Line 244: | ||
margin-left:5px; | margin-left:5px; | ||
width:0px; | width:0px; | ||
- | opacity: | + | opacity:0.9; |
border:solid black; | border:solid black; | ||
+ | border-radius:25px; | ||
box-shadow:1px 5px 5px 5px #7B7B7B; | box-shadow:1px 5px 5px 5px #7B7B7B; | ||
} | } | ||
.ac_menu > ul{ | .ac_menu > ul{ | ||
float:left; | float:left; | ||
+ | margin-left: 30px; | ||
} | } | ||
.ac_menu > ul > li{ | .ac_menu > ul > li{ | ||
Line 222: | Line 275: | ||
/*Submenos con los links*/ | /*Submenos con los links*/ | ||
.ac_subitem{ | .ac_subitem{ | ||
- | width: | + | width:260px; |
height:0px; /* animate to 400px */ | height:0px; /* animate to 400px */ | ||
margin-top:200px; /* animate to -200px */ | margin-top:200px; /* animate to -200px */ | ||
Line 229: | Line 282: | ||
overflow:auto; | overflow:auto; | ||
left:0px; | left:0px; | ||
+ | opacity: 0.9; | ||
+ | border-radius:25px; | ||
Line 235: | Line 290: | ||
/*Color anterior: color: #FFF; con fondo ffa */ | /*Color anterior: color: #FFF; con fondo ffa */ | ||
color: #FFF; | color: #FFF; | ||
- | background:# | + | background:#003399; |
} | } | ||
.ac_subitem h2{ | .ac_subitem h2{ | ||
Line 241: | Line 296: | ||
color:#FFF; | color:#FFF; | ||
padding: 40px 0px 0px 40px; | padding: 40px 0px 0px 40px; | ||
+ | |||
+ | |||
/* text-shadow:0px 0px 1px #FFF;*/ | /* text-shadow:0px 0px 1px #FFF;*/ | ||
} | } | ||
Line 248: | Line 305: | ||
.ac_subitem ul li{ | .ac_subitem ul li{ | ||
margin:10px 0px; | margin:10px 0px; | ||
+ | padding:5px; | ||
} | } | ||
Line 255: | Line 313: | ||
display:block; | display:block; | ||
height:20px; | height:20px; | ||
- | width:80px; | + | /*width:80px;*/ |
padding:0px 0px; | padding:0px 0px; | ||
text-align:left; | text-align:left; | ||
Line 285: | Line 343: | ||
span.ac_close{ | span.ac_close{ | ||
float:right; | float:right; | ||
- | margin: | + | margin:10px; |
width:11px; | width:11px; | ||
height:12px; | height:12px; |
Latest revision as of 14:54, 28 October 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');
/*
.swing {
width:175px;
height:155px;
right:1%;
bottom:50px;
position:absolute;
background: url("") no-repeat center center;
background-size: 175px 155px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
z-index:999; opacity:0.9; }
*/
/*.swing:hover{*/ /* -moz-transform:rotate(360deg);*/ /* -webkit-transform:rotate(360deg);*/ /* -o-transform:rotate(360deg);*/ /* -ms-transform:rotate(360deg);*/ /*}*/
body{
background-color:#eee;
color:#FFF;
font-family: 'PT Sans Narrow', Arial, sans-serif;
text-transform:uppercase;
}
- external{
position:absolute; padding-top:40px; padding-left:10px; padding-right:10px; width:90%; margin-left:25px; margin-right:25px; overflow:hidden; font-size: 16px; color:#000; }
- external h1{
line-height:130%; color: #003399; }
- external ul li{
color:#000;
}
- contenedor{
position:relative;
height:100%; width:95%; min-width: 1024px; margin-left:auto; margin-right:auto; background: transparent; }
/*TODOS LOS LINKS*/
a{
color:#FFF;
text-decoration:none;
}
img.ac_bgimage{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
opacity:0.9;
display:none;
z-index:-1;
}
.ac_loading{ position:absolute; top:10px; right:10px; background:url("") no-repeat center center; width:65px; height:105px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px 10px 10px 10px; z-index:999; opacity:0.8; display:none; text-align: center;
text-decoration: bold; color:#000;
}
.text_loading{ position:absolute; top:50%; left:600px; background:#FFF url("") no-repeat center center; width:65px; height:105px; z-index:999; opacity:1; display:none;
text-align: center; text-decoration: bold;
}
.texto{ background:#FFF; color:#000; position:absolute; text-align:justify; font-size:16px; text-transform:none; border:2px solid #333; text-indent:20px; top:120px;
left:275px;
border-radius:25px;
//min-height:400px; overflow:auto; opacity:1; z-index:999; display:none;
height: 80%;
} .texto H1{color:#000;} .texto H2{color:#000;} .texto a{color:#000;}
font-size:18px; color: #003399; text-align:right;}
.texto ul{color:#000;} .texto ul li{color:#000;} .texto ul li:before{content: ". "; color:#000;}
.texto ol{color:#000;} .texto ol li{color:#000;} .texto ol li:before{content: "- "; color:#000;}
H2{color:#FFF;}
H1{
font-size:35px; text-align:center; }
H2{
font-size:24px;
text-decoration:none; line-height:200%; }
H3{ font-size:22px; font-weight:bold; line-height:200%; }
H4{
font-weight:bold;
line-height:200%; }
H5{ font-weight:bold; line-height:200%; }
.ac_content{ position:absolute; height:90px; width:100%; top:80px; left:0px; margin-top:-65px;
}
/*Donde dice "Igem- BUenos Aires"*/ .ac_content h1{ background:#003399; display:block; float:left; width:90px; height:50px; padding:20px; font-size:36px; font-weight:bold; line-height:20px; margin-right:1px; border: solid black; border-radius:25px; box-shadow:5px 5px 5px 5px #7B7B7B; color:#FFF; opacity: 0.9; }
/*Buenos Aires*/ .ac_content h1 span{ display:block; font-weight:normal; font-size:14px;
} .ac_menu{ background:#003399; float:left; position:relative; height:90px; margin-left:5px; width:0px; opacity:0.9; border:solid black; border-radius:25px; box-shadow:1px 5px 5px 5px #7B7B7B; } .ac_menu > ul{ float:left; margin-left: 30px; } .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 #FFF;*/ }
/*Submenos con los links*/ .ac_subitem{ width:260px; height:0px; /* animate to 400px */ margin-top:200px; /* animate to -200px */ position:absolute; z-index:99; overflow:auto; left:0px; opacity: 0.9; border-radius:25px;
/* Colores y backgound*/ /*Color anterior: color: #FFF; con fondo ffa */ color: #FFF; background:#003399; } .ac_subitem h2{ font-size:22px; color:#FFF; padding: 40px 0px 0px 40px;
/* text-shadow:0px 0px 1px #FFF;*/
}
.ac_subitem ul{
padding:0px 40px;
}
.ac_subitem ul li{
margin:10px 0px;
padding:5px;
}
.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 #FFF; */ text-transform:none; }
.ac_subitem ul li a:hover{ opacity:0.7; }
.ac_subitem ul li a:active{ color: #86A; }
.ac_subitem ul li:first-child{ font-size:15px; text-transform:none; border-bottom:2px dotted #FEA; padding-bottom:15px; margin-bottom:15px; color: #FFF; }
/* Cruz para cerrar, no está cargado el gráfico */ span.ac_close{ float:right; margin:10px; width:11px; height:12px; cursor:pointer; background:#000; opacity:0.7; } span.ac_close:hover{ opacity:1.0; }