Team:UC Chile/css/prueba.css

From 2013.igem.org

(Difference between revisions)
(Created page with "body{ background-image:url('Img/Fondo.jpg'); overflow:scroll; text-decoration:none; text-align: center; font-size:16px; font-family: Calibri, Candara,...")
Line 1: Line 1:
body{
body{
-
     background-image:url('Img/Fondo.jpg');
+
     background-image:url('Imagenes/Fondo.jpg');
     overflow:scroll;
     overflow:scroll;
     text-decoration:none;
     text-decoration:none;
-
     text-align: center;  
+
     text-align: center;
     font-size:16px;
     font-size:16px;
-
     font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
+
     font-family: Calibri;
     }     
     }     
/*
/*
################################################################################
################################################################################
-
###################### First Div (Menu and Image)#######################################
+
###################### Header Div (Menu and Image)#######################################
################################################################################         
################################################################################         
*/
*/
-
#first{
+
#Header{
     width:1000px;     
     width:1000px;     
 +
    height:330px;
 +
    margin-left:auto;
 +
    margin-right:auto;
     margin-top: 20px;
     margin-top: 20px;
-
margin-bottom: 20px;
+
    margin-bottom: 20px;
-
     border-width: 2px;
+
     display:block;
-
border-style: dashed;
+
     position:relative;     
-
     border-color: #000000;     
+
-
    display:inline-block;
+
}
}
-
#first > img
+
#Header > img
{   
{   
-
     max-width:100%;
+
     position:absolute;
-
     max-height:100%;
+
     left:-35px;
 +
    top:-36px;
     margin:auto;
     margin:auto;
 +
   
}  
}  
-
 
-
#first ul.Menu{
 
-
    background-color:#000000;
 
-
    margin:0px;
 
-
    padding:0px;
 
-
    width:1000px;
 
-
    padding-bottom:5px;
 
-
    padding-top:5px;
 
-
}
 
-
 
-
#first a{
 
-
    color:#ffffff;
 
-
    text-decoration:none;
 
-
    font-weight:bold;
 
-
    margin: 0px;
 
-
    display: block;
 
-
    width: 100%; 
 
-
}
 
-
 
-
/*Cada uno de los items del menu (horizontal)*/
 
-
#first ul.Menu li.aux {
 
-
    width:150px;
 
-
    position:relative;
 
-
    background-color:#000000;
 
-
    display:inline-block;
 
-
    color:#ffffff;
 
-
    font-weight:bold;
 
-
    /*font-size:16px;*/
 
-
    margin:0px;
 
-
    padding:0px;
 
-
    border-width:2px;
 
-
    border-color:#ffffff;
 
-
    border-top-left-radius:10px;
 
-
    border-top-right-radius:10px;
 
-
    padding-top:10px; 
 
-
    /*font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;*/
 
-
}
 
-
 
-
#first li.sep{
 
-
    display:inline-block;
 
-
    color:#ffffff;
 
-
    padding-top:10px;
 
-
    font-weight:bold;
 
-
}
 
-
 
-
/*Lista que aparece al estar sobre el menu*/
 
-
#first ul.Sub_Menu{
 
-
    background-color:#ffffff;
 
-
    text-align:left;
 
-
    position:absolute;
 
-
    visibility:hidden;
 
-
    padding:0px;
 
-
    margin:0px;
 
-
    left:-2px;
 
-
    list-style-type:none;
 
-
    border-width:2px;
 
-
border-style:solid;
 
-
    border-color:#000000;
 
-
    border-bottom-left-radius:10px;
 
-
    border-bottom-right-radius:10px;   
 
-
    width:150px;
 
-
    z-index:2;
 
-
}
 
-
 
-
#first ul.Sub_Menu li:last-child{
 
-
    border-bottom-left-radius:10px;
 
-
    border-bottom-right-radius:10px;
 
-
}
 
-
/*Texto dentro del sub menu*/
 
-
#first ul.Sub_Menu a{
 
-
    color:#000000;
 
-
}
 
-
 
-
#first ul.Sub_Menu li{
 
-
    padding-left:10px;
 
-
}
 
-
 
-
 
/*
/*
Line 115: Line 40:
*/
*/
-
#second{
+
#Container{
     width:1000px;
     width:1000px;
-
     overflow:hidden;
+
     overflow:none;
-
     margin-top: 20px;
+
     margin-top: 30px;
-
margin-bottom: 20px;
+
    margin-bottom: 20px;
-
display:inline-block;
+
    padding-top:25px;
 +
    padding-bottom:25px;
 +
    display:block;
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
    background-color:#ffffff;
}
}
-
#header{
+
#Container h1,h2,h3,h4,h5,h6,h7{
-
     list-style-type:none;
+
     margin-left:15px;
-
    text-align: left;
+
-
    padding-left:0px;
+
-
    margin:0px;
+
-
    background:none;
+
}
}
-
#header > li{
+
#brainstorming > li{
-
     display:inline-block;
+
     list-style-type:circle;
-
    color:#000000;
+
-
    border-top-left-radius:10px;
+
-
    border-top-right-radius:10px;
+
-
    padding:10px;
+
-
    padding-bottom:5px;
+
-
    margin:0px;
+
-
    font-weight:bold;
+
-
    position:relative;
+
-
    bottom:-2;
+
-
    cursor: pointer;
+
}
}
-
#header a{
+
#Container .gray_box{
-
    color:#000000;
+
display:inline-block;
-
    text-decoration:none;
+
background-color:#8A8486;
-
    font-weight:bold;
+
border-radius:15px;
-
    margin: 0px;
+
margin:3%;
-
    /*font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;*/   
+
padding:2%;
}
}
-
#second .Disp1{
+
#Container .abstract{
-
     background-color:#ffffff;
+
     margin:3%;
-
     border-top:2px dashed #000000;
+
     padding:2%;
-
     border-left:2px dashed #000000;
+
     text-align:justify;
-
     border-right:2px dashed #000000;
+
     font-size:15px;
-
    border-bottom:2px solid #ffffff;
+
-
    z-index:1
+
-
   
+
}
}
-
#second .Disp2{
+
 
-
     background-color:#cccccc;
+
#Container .centered{
-
     border:0px;  
+
     display:block;
 +
    text-align:center;
 +
     margin:auto;
}
}
-
#second .float_img > img{
+
#Container .float_img > img{
     float:left;
     float:left;
}
}
-
#second .container{
 
-
    background-color:#ffffff;
 
-
    border-top:2px dashed #000000;
 
-
    border-bottom:2px dashed #000000;
 
-
    border-left:2px dashed #000000;
 
-
    border-right:2px dashed #000000;
 
-
    padding:0px;
 
-
    position:relative;
 
-
    bottom:0;
 
-
    text-align: left;
 
-
    background-image:url("Img/Container.jpg");
 
-
    background-repeat:no-repeat;
 
-
    background-position:center bottom;
 
-
}
 
-
#second .subcont > div{
+
/*
-
    margin:20px;
+
################################################################################
-
    display:inline-block;
+
###################### End of Second Div #######################################
-
}
+
################################################################################       
-
 
+
*/
-
#brainstorming > li{
+
-
    list-style-type:circle;
+
-
}
+
 +
/*
 +
################################################################################
 +
###################### Photo Gallery ###########################################
 +
################################################################################       
 +
*/
#photogallery{
#photogallery{
     margin:10px;
     margin:10px;
 +
   
}
}
#photogallery li > img{
#photogallery li > img{
Line 228: Line 132:
     padding:0px;
     padding:0px;
     background-color:rgba(204,204,204,0.4);
     background-color:rgba(204,204,204,0.4);
-
     z-index:3;
+
     z-index:1500;
     text-align:center;
     text-align:center;
     visibility:hidden;
     visibility:hidden;
Line 259: Line 163:
     height:30px;
     height:30px;
     width:30px;
     width:30px;
-
     z-index:3;
+
     z-index:1503;
}
}
Line 268: Line 172:
     height:50px;
     height:50px;
     width:50px;
     width:50px;
-
     z-index:3;
+
     z-index:1503;
}
}
Line 277: Line 181:
     height:50px;
     height:50px;
     width:50px;
     width:50px;
-
     z-index:3;
+
     z-index:1503;
}
}
/*
/*
################################################################################
################################################################################
-
###################### End of Second Div #######################################
+
###################### End of Photo Gallery #######################################
################################################################################         
################################################################################         
*/
*/
Line 288: Line 192:
/*
/*
################################################################################
################################################################################
-
###################### Banner ##################################################
+
############# Clases for Calendar Items #######################################
-
################################################################################       
+
-
*/
+
-
#banner{
+
-
    width:1000px;
+
-
    text-align: center;
+
-
    margin-top: 20px;
+
-
margin-bottom: 20px;
+
-
background-color:#ffffff;
+
-
    border-top:2px dashed #000000;
+
-
    border-bottom:2px dashed #000000;
+
-
    border-left:2px dashed #000000;
+
-
    border-right:2px dashed #000000;
+
-
background-image:url("Img/Banner.jpg");
+
-
    background-repeat:no-repeat;
+
-
    background-position:center bottom;
+
-
    display:inline-block;
+
-
}
+
-
#banner ul{
+
-
    padding:0px;
+
-
    margin:0px;
+
-
    border:0px;
+
-
    list-style-type:none;
+
-
}
+
-
#banner li{
+
-
    padding:25px;
+
-
    display:inline-block;   
+
-
    position:relative;
+
-
    border:0px;
+
-
   
+
-
}
+
-
#banner img{
+
-
    margin:0px;
+
-
    border:0px;
+
-
}
+
-
/*
+
-
################################################################################
+
-
###################### End of Banner ###########################################
+
################################################################################
################################################################################
*/
*/
-
 
-
/*
 
-
################################################################################
 
-
#############  Clases for Calendar Items #######################################
 
-
################################################################################
 
-
*/
 
#Calendar{
#Calendar{
display:inline-block;
display:inline-block;
Line 347: Line 208:
display:block;
display:block;
background-color:#218f9c;
background-color:#218f9c;
-
 
border-radius:10px;
border-radius:10px;
width:700px;
width:700px;
Line 483: Line 343:
     display:block;
     display:block;
}
}
 +
/*
 +
################################################################################
 +
#############  End of Calendar Items  ##########################################
 +
################################################################################
 +
*/
 +
 +
/*
 +
################################################################################
 +
####################### Image Menu  ############################################
 +
################################################################################
 +
*/
 +
 +
.in_the_flow{
 +
visibility:visible;
 +
display:inline-block;
 +
}
 +
 +
.off_the_flow{
 +
visibility:hidden;
 +
display:none;
 +
}
 +
 +
.transparente{
 +
opacity:0;
 +
filter:alpha(opacity=0);
 +
-ms-filter:alpha(opacity=0);
 +
}
 +
 +
.opaco{
 +
opacity:1;
 +
filter:alpha(opacity=100);
 +
-ms-filter:alpha(opacity=100);
 +
}
 +
 +
.opaco_2{
 +
opacity:0.65;
 +
filter:alpha(opacity=65);
 +
-ms-filter:alpha(opacity=65);
 +
}
 +
 +
#Container .abstract{
 +
    margin:3%;
 +
    padding:2%;
 +
    text-align:justify;
 +
    font-size:15px;
 +
}
 +
 +
.foto_Team{
 +
position:relative;
 +
float:left;
 +
margin:15px;
 +
}
 +
 +
#Container .imgMenu{
 +
    margin:3%;
 +
    padding:2%;
 +
    display:block;
 +
    text-align:center;
 +
}
 +
 +
#Container .imgContainer{
 +
display:inline-block;
 +
position:relative;
 +
}
 +
 +
#Container .imgMenu_img {
 +
position:absolute;
 +
z-index:1;
 +
}
 +
 +
#Container .imgMenu_img_bottom{
 +
position:relative;
 +
z-index:0;
 +
}
 +
 +
/*.imgMenu_img_top{
 +
position:relative;
 +
z-index:2;
 +
}*/
 +
 +
.imgMenu_text{
 +
display:inline-block;
 +
position:relative;
 +
padding-left:15px;
 +
margin-left:15px;
 +
width:685px;
 +
white-space:wrap;
 +
}
 +
.imgMenu_text > table, td, th{
 +
vertical-align:top;
 +
}
 +
 +
.col1{
 +
white-space:nowrap;
 +
}
 +
 +
.imgMenu_cont{
 +
width:1000px;
 +
}
 +
 +
 +
/*
 +
################################################################################
 +
####################### End of Image Menu ######################################
 +
################################################################################
 +
*/
 +
 +
 +
/*
 +
################################################################################
 +
####################### Interactive Menu #######################################
 +
################################################################################
 +
*/
 +
 +
/*----------------------    Rotaciones  -------------------------------------*/
 +
 +
#MENU .d{
 +
height:50px;
 +
width:84px;
 +
left:-44px;
 +
top:-25px;
 +
position:absolute;
 +
background-color:#555555;
 +
cursor:pointer;
 +
}
 +
#MENU .d2{
 +
transform:rotate(60deg);
 +
-ms-transform:rotate(60deg);
 +
-webkit-transform:rotate(60deg);
 +
-o-transform:rotate(60deg);
 +
}
 +
#MENU .d3{
 +
transform:rotate(-60deg);
 +
-ms-transform:rotate(-60deg);
 +
-webkit-transform:rotate(-60deg);
 +
-o-transform:rotate(-60deg);
 +
}
 +
 +
/*-------------------  Fin  -  Rotaciones  ---------------------------------*/
 +
 +
#MENU .visible {
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
#MENU .oculto {
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  -webkit-transition: visibility 0s 0s;
 +
  -moz-transition: visibility 0s 0s;
 +
  -o-transition: visibility 0s 0s;
 +
  transition: visibility 0s 0s;
 +
}
 +
 +
#MENU{
 +
width:270px;
 +
height:270px;
 +
position:absolute;
 +
left:52px;
 +
bottom:-110px;
 +
z-index:1000;
 +
}
 +
 +
#MENU > img{
 +
position:absolute;
 +
z-index:-1;
 +
}
 +
 +
#MENU .new_menu
 +
{
 +
width:270;
 +
height:270;
 +
position:relative;
 +
display:inline-block;
 +
-webkit-transition: -webkit-transform 1s;
 +
-moz-transition: -moz-transform 1s;
 +
-o-transition: -o-transform 1s;
 +
transition: transform 1s,-ms-transform 1s;
 +
}
 +
 +
 +
#MENU .text{
 +
height:40px;
 +
width:88px;
 +
left:-44px;
 +
top:-25px;
 +
padding-top:10px;
 +
vertical-align:middle;
 +
display:inline-block;
 +
position:absolute;
 +
font-family:arial;
 +
text-align:center;
 +
color:#ffffff;
 +
font-size:13px;
 +
font-weight:bolder;
 +
text-decoration:none;
 +
cursor:pointer;
 +
-webkit-transition: -webkit-transform 1s;
 +
-moz-transition: -moz-transform 1s;
 +
-o-transition: -o-transform 1s;
 +
transition: transform 1s, ms-transform 1s;
 +
}
 +
 +
#MENU .hexa{
 +
position:absolute;
 +
display:inline-block;
 +
-webkit-transition: -webkit-transform 1s, -webkit-appearance 1s;
 +
-moz-transition: -moz-transform 1s, -moz-animation 1s;
 +
-o-transition: -o-transform 1s, -o-animation 1s;
 +
transition: transform 1s, ms-transform 1s;
 +
}
 +
 +
 +
#MENU .hexa > .rec{
 +
background-color:#83cfcb;
 +
border-left: 2px solid #8ec63f;
 +
border-right: 2px solid #8ec63f;
 +
}
 +
 +
#MENU .sele > .rec{
 +
background-color:#8ec63f;
 +
border-left: 2px solid #83cfcb;
 +
border-right: 2px solid #83cfcb;
 +
}
 +
 +
#MENU .h7 > .rec{
 +
background-color:#ffffff;
 +
}
 +
 +
#MENU .h7 > .text{
 +
color:#000000;
 +
}
 +
 +
 +
#MENU ul.sub{
 +
width:675px;
 +
height:50px;
 +
position:absolute;
 +
text-align:left;
 +
/*background-color:#6d6e72;*/
 +
left:-275px;
 +
top:-25px;
 +
list-style-type:none;
 +
padding-left:350px;
 +
margin: 0px;
 +
z-index:-30;
 +
-webkit-transform-origin:275px 25px;
 +
-moz-transform-origin:275px 25px;
 +
-o-transform-origin:275px 25px;
 +
transform-origin:275px 25px;
 +
-webkit-transition: visibility 0s 1s;
 +
-moz-transition: visibility 0s 1s;
 +
-o-transition: visibility 0s 1s;
 +
transition: visibility 0s 1s;
 +
}
 +
 +
.sub > li {
 +
position:relative;
 +
display:inline-block;
 +
background-color:#8ec63f;
 +
border: 2px solid #83cfcb;
 +
vertical-align:top;
 +
padding-top:4px;
 +
padding-bottom:2px;
 +
top:5px;
 +
margin-left:10px;
 +
height:30px;
 +
width:140px;
 +
font-family:arial;
 +
text-align:center;
 +
color:#ffffff;
 +
font-size:12px;
 +
font-weight:bolder;
 +
text-decoration:none;
 +
cursor:pointer;
 +
-webkit-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
}
 +
 +
.sub > li > a{
 +
left:0px;
 +
top:0px;
 +
position:absolute;
 +
width:100%;
 +
height:100%;
 +
padding:0px;
 +
margin:0px;
 +
}
 +
 +
.sub > li:hover{
 +
background-color:#aaaaff;
 +
}
 +
 +
 +
/*---------------------    Posiciones  --------------------------------------*/
 +
/* Hexagono 1 */
 +
.h1{
 +
top:135px;
 +
left:47px;
 +
}
 +
/* Hexagono 2 */
 +
.h2{
 +
top:58px;
 +
left:91px;
 +
}
 +
/* Hexagono 3 */
 +
.h3{
 +
top:58px;
 +
left:179px;
 +
}
 +
/* Hexagono 4 */
 +
.h4{
 +
top:135px;
 +
left:223px;
 +
}
 +
/* Hexagono 5 */
 +
.h5{
 +
top:212px;
 +
left:179px;
 +
}
 +
/* Hexagono 6 */
 +
.h6{
 +
top:212px;
 +
left:91px;
 +
}
 +
/* Hexagono 7 */
 +
.h7{
 +
top:135px;
 +
left:135px;
 +
}
 +
 +
/*Positions of sub items*/
 +
.pos1{
 +
-webkit-transition: opacity 0.25s linear 1s;
 +
-moz-transition: opacity 0.25s linear 1s;
 +
-o-transition: opacity 0.25s linear 1s;
 +
transition: opacity 0.25s linear 1s;
 +
}
 +
.pos2{
 +
-webkit-transition: opacity 0.25s linear 1.2s;
 +
-moz-transition: opacity 0.25s linear 1.2s;
 +
-o-transition: opacity 0.25s linear 1.2s;
 +
transition: opacity 0.25s linear 1.2s;
 +
}
 +
.pos3{
 +
-webkit-transition: opacity 0.25s linear 1.4s;
 +
-moz-transition: opacity 0.25s linear 1.4s;
 +
-o-transition: opacity 0.25s linear 1.4s;
 +
transition: opacity 0.25s linear 1.4s;
 +
}
 +
.pos4{
 +
-webkit-transition: opacity 0.25s linear 1.6s;
 +
-moz-transition: opacity 0.25s linear 1.6s;
 +
-o-transition: opacity 0.25s linear 1.6s;
 +
transition: opacity 0.25s linear 1.6s;
 +
}
 +
.pos5{
 +
-webkit-transition: opacity 0.25s linear 1.8s;
 +
-moz-transition: opacity 0.25s linear 1.8s;
 +
-o-transition: opacity 0.25s linear 1.8s;
 +
transition: opacity 0.25s linear 1.8s;
 +
}
 +
 +
/*----------------------  End-Posiciones  ----------------------------------*/
 +
 +
/*
 +
################################################################################
 +
####################### End of Interactive Menu ################################
 +
################################################################################
 +
*/
 +
 +
/*
 +
################################################################################
 +
####################### DropDown Info ##########################################
 +
################################################################################
 +
*/
 +
.DropDown_info{
 +
display:inline-block;
 +
border:1px black solid;
 +
border-radius:10px;
 +
background-color:#eeeeee;
 +
margin-left:4.5%;
 +
margin-right:4.5%;
 +
width:90%;
 +
}
 +
.DropDown_info_head:hover{
 +
background-color:#0CF7F7;
 +
}
 +
.DropDown_info_head{
 +
border-radius:10px;
 +
position:relative;
 +
display:inline-block;
 +
cursor: pointer;
 +
width:100%;
 +
}
 +
.DropDown_info_text{
 +
display:inline-block;
 +
margin:10px;
 +
}
 +
 +
.DropDown_info_down, .DropDown_info_up{
 +
position:absolute;
 +
width:10px;
 +
right:10px;
 +
top:10px;
 +
}
 +
 +
/*
 +
################################################################################
 +
####################### End of DropDown Info ###################################
 +
################################################################################
 +
*/

Revision as of 17:59, 25 September 2013

body{ 

   background-image:url('Imagenes/Fondo.jpg');
   overflow:scroll;
   text-decoration:none;
   text-align: center;
   font-size:16px;
   font-family: Calibri;
   }

/*

                                            2. Header Div (Menu and Image)#######################################
  • /
  1. Header{ 
   width:1000px;    
   height:330px;
   margin-left:auto;
   margin-right:auto;
   margin-top: 20px;
   margin-bottom: 20px;
   display:block;
   position:relative;

}

  1. Header > img

{ 

   position:absolute;
   left:-35px;
   top:-36px;
   margin:auto;

}

/*

                                            2. Second Div (Containers)#######################################
  • /
  1. Container{ 
   width:1000px;
   overflow:none;
   margin-top: 30px;
   margin-bottom: 20px;
   padding-top:25px;
   padding-bottom:25px;
   display:block;
   margin-left:auto;
   margin-right:auto;
   background-color:#ffffff;

}

  1. Container h1,h2,h3,h4,h5,h6,h7{ 
   margin-left:15px;

}

  1. brainstorming > li{ 
   list-style-type:circle;

}

  1. Container .gray_box{

display:inline-block; background-color:#8A8486; border-radius:15px; margin:3%; padding:2%; }

  1. Container .abstract{ 
   margin:3%;
   padding:2%;
   text-align:justify;
   font-size:15px;

}

  1. Container .centered{ 
   display:block;
   text-align:center;
   margin:auto;

}

  1. Container .float_img > img{ 
   float:left;

}


/*

                                            2. End of Second Div #######################################
  • /

/*

                                            2. Photo Gallery ###########################################
  • /
  1. photogallery{ 
   margin:10px;

}

  1. photogallery li > img{ 
   height:250px;
   width:250px;
   margin:15px;
   border:2px solid #000000;

}

  1. photogallery >li{ 
   display:inline-block;
   background-color:#cccccc;
   list-style-type: none;
   border-radius:10px;

}

  1. photogallery >li:hover{ 
   cursor:pointer;
   background-color:#33ffff;

}

  1. V1{ 
   width:100%;
   height:100%;
   position:fixed;
   top:0px;
   right:0px;
   margin:0px;
   padding:0px;
   background-color:rgba(204,204,204,0.4);
   z-index:1500;
   text-align:center;
   visibility:hidden;

}

  1. I1{ 
   position:relative;
   top:15%;
   left:15%;
   width:70%;
   height:70%;
   text-align:center;

}

  1. I1 img{ 
   width:100%;
   height:100%;

}

  1. I1 .Img{ 
   position:absolute;
   right:0px;
   top:0px;
   z-index:2;

}

  1. I1 .Close{ 
   position:absolute;
   right:-15px;
   top:-15px;
   height:30px;
   width:30px;
   z-index:1503;

}

  1. I1 .Prev{ 
   position:absolute;
   left:0px;
   top:45%;
   height:50px;
   width:50px;
   z-index:1503;

}

  1. I1 .Next{ 
   position:absolute;
   right:0px;
   top:45%;
   height:50px;
   width:50px;
   z-index:1503;

}

/*

                                            2. End of Photo Gallery #######################################
  • /

/*

                          2. Clases for Calendar Items #######################################
  • /
  1. Calendar{

display:inline-block; text-align: center; width:956; min-height:500px; vertical-align:top; }

  1. Month-div{

position:relative; display:block; background-color:#218f9c; border-radius:10px; width:700px; height:55px; left:128px; }

  1. Month-header{

display:inline-block; width:50%; left:25%; }

  1. Month-header span.month{

display:inline-block; font-weight:bold; color:#ffffff; font-size:30px; width:200px; margin-top:10px; padding-left:15px; padding-right:15px; }

  1. Week-div{

background-color:#218f9c; display:inline-block; border-radius:10px; margin-right:20px; margin-top:20px; width:430px; min-height:300px; vertical-align:top; }

  1. Week-div .week,#Week-div .days{

display:inline-block; height:50px; vertical-align:middle; margin:5px; margin:5px; }

  1. Week-div .days{display:none;}
  1. Week-div .calendar_span{

display:inline-block; color:#ffffff; border:1px solid black; border-radius:5px; padding:5px; margin-left:10px; }

  1. Week-div .calendar_span:hover{

cursor:pointer; background-color:#33ffff; }

  1. Week-div .day{

height:35px; width:30px; }

  1. Week-div .week_resume{

width:120px; }

  1. Week-div .invalid{

background-color:#7e7e7e; }

  1. Text-div{

background-color:#218f9c; border-radius:10px; display:inline-block; margin-top:20px; width:500px; min-height:300px; vertical-align:top; }

  1. Text-div .title{

display:block; text-align:justify; font-weight:bold; font-size:20px; text-decoration:underline; margin:20px; margin-bottom:15px; }

  1. Text-div .resume,#Text-div .text{

text-align:justify; font-weight:bold; margin-top:15px; margin-left:25px; margin-right:25px; }

  1. Text-div li{

list-style-type:disc; font-size:15px; }

  1. Text-div .red{

color:#980000; }

  1. Text-div .blue{

color:#000098; }

  1. Text-div img{

display:block; }

  1. Calendar span.back, #Calendar span.next{

display:inline-block; font-weight:bold; font-size:30px; padding:10px; border-radius:5px; height:30px; }

  1. Calendar span.back:hover,#Calendar span.next:hover{

cursor:pointer; background-color:#33ffff; }

.notdisp{ 

   display:none;

}

.disp{ 

   display:block;

} /*

                          2. End of Calendar Items ##########################################
  • /

/*

                                              2. Image Menu ############################################
  • /

.in_the_flow{ visibility:visible; display:inline-block; }

.off_the_flow{ visibility:hidden; display:none; }

.transparente{ opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); }

.opaco{ opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); }

.opaco_2{ opacity:0.65; filter:alpha(opacity=65); -ms-filter:alpha(opacity=65); }

  1. Container .abstract{ 
   margin:3%;
   padding:2%;
   text-align:justify;
   font-size:15px;

}

.foto_Team{ position:relative; float:left; margin:15px; }

  1. Container .imgMenu{ 
   margin:3%;
   padding:2%;
   display:block;
   text-align:center;

}

  1. Container .imgContainer{

display:inline-block; position:relative; }

  1. Container .imgMenu_img {

position:absolute; z-index:1; }

  1. Container .imgMenu_img_bottom{

position:relative; z-index:0; }

/*.imgMenu_img_top{ position:relative; z-index:2; }*/

.imgMenu_text{ display:inline-block; position:relative; padding-left:15px; margin-left:15px; width:685px; white-space:wrap; } .imgMenu_text > table, td, th{ vertical-align:top; }

.col1{ white-space:nowrap; }

.imgMenu_cont{ width:1000px; }


/*

                                              2. End of Image Menu ######################################
  • /


/*

                                              2. Interactive Menu #######################################
  • /

/*---------------------- Rotaciones -------------------------------------*/

  1. MENU .d{

height:50px; width:84px; left:-44px; top:-25px; position:absolute; background-color:#555555; cursor:pointer; }

  1. MENU .d2{

transform:rotate(60deg); -ms-transform:rotate(60deg); -webkit-transform:rotate(60deg); -o-transform:rotate(60deg); }

  1. MENU .d3{

transform:rotate(-60deg); -ms-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -o-transform:rotate(-60deg); }

/*------------------- Fin - Rotaciones ---------------------------------*/

  1. MENU .visible { 
 visibility: visible;
 opacity: 1;

}

  1. MENU .oculto { 
 visibility: hidden;
 opacity: 0;
 -webkit-transition: visibility 0s 0s;
 -moz-transition: visibility 0s 0s;
 -o-transition: visibility 0s 0s;
 transition: visibility 0s 0s;

}

  1. MENU{

width:270px; height:270px; position:absolute; left:52px; bottom:-110px; z-index:1000; }

  1. MENU > img{

position:absolute; z-index:-1; }

  1. MENU .new_menu

{ width:270; height:270; position:relative; display:inline-block; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s,-ms-transform 1s; }


  1. MENU .text{

height:40px; width:88px; left:-44px; top:-25px; padding-top:10px; vertical-align:middle; display:inline-block; position:absolute; font-family:arial; text-align:center; color:#ffffff; font-size:13px; font-weight:bolder; text-decoration:none; cursor:pointer; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s, ms-transform 1s; }

  1. MENU .hexa{

position:absolute; display:inline-block; -webkit-transition: -webkit-transform 1s, -webkit-appearance 1s; -moz-transition: -moz-transform 1s, -moz-animation 1s; -o-transition: -o-transform 1s, -o-animation 1s; transition: transform 1s, ms-transform 1s; }


  1. MENU .hexa > .rec{

background-color:#83cfcb; border-left: 2px solid #8ec63f; border-right: 2px solid #8ec63f; }

  1. MENU .sele > .rec{

background-color:#8ec63f; border-left: 2px solid #83cfcb; border-right: 2px solid #83cfcb; }

  1. MENU .h7 > .rec{

background-color:#ffffff; }

  1. MENU .h7 > .text{

color:#000000; }


  1. MENU ul.sub{

width:675px; height:50px; position:absolute; text-align:left; /*background-color:#6d6e72;*/ left:-275px; top:-25px; list-style-type:none; padding-left:350px; margin: 0px; z-index:-30; -webkit-transform-origin:275px 25px; -moz-transform-origin:275px 25px; -o-transform-origin:275px 25px; transform-origin:275px 25px; -webkit-transition: visibility 0s 1s; -moz-transition: visibility 0s 1s; -o-transition: visibility 0s 1s; transition: visibility 0s 1s; }

.sub > li { position:relative; display:inline-block; background-color:#8ec63f; border: 2px solid #83cfcb; vertical-align:top; padding-top:4px; padding-bottom:2px; top:5px; margin-left:10px; height:30px; width:140px; font-family:arial; text-align:center; color:#ffffff; font-size:12px; font-weight:bolder; text-decoration:none; cursor:pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.sub > li > a{ left:0px; top:0px; position:absolute; width:100%; height:100%; padding:0px; margin:0px; }

.sub > li:hover{ background-color:#aaaaff; }


/*--------------------- Posiciones --------------------------------------*/ /* Hexagono 1 */ .h1{ top:135px; left:47px; } /* Hexagono 2 */ .h2{ top:58px; left:91px; } /* Hexagono 3 */ .h3{ top:58px; left:179px; } /* Hexagono 4 */ .h4{ top:135px; left:223px; } /* Hexagono 5 */ .h5{ top:212px; left:179px; } /* Hexagono 6 */ .h6{ top:212px; left:91px; } /* Hexagono 7 */ .h7{ top:135px; left:135px; }

/*Positions of sub items*/ .pos1{ -webkit-transition: opacity 0.25s linear 1s; -moz-transition: opacity 0.25s linear 1s; -o-transition: opacity 0.25s linear 1s; transition: opacity 0.25s linear 1s; } .pos2{ -webkit-transition: opacity 0.25s linear 1.2s; -moz-transition: opacity 0.25s linear 1.2s; -o-transition: opacity 0.25s linear 1.2s; transition: opacity 0.25s linear 1.2s; } .pos3{ -webkit-transition: opacity 0.25s linear 1.4s; -moz-transition: opacity 0.25s linear 1.4s; -o-transition: opacity 0.25s linear 1.4s; transition: opacity 0.25s linear 1.4s; } .pos4{ -webkit-transition: opacity 0.25s linear 1.6s; -moz-transition: opacity 0.25s linear 1.6s; -o-transition: opacity 0.25s linear 1.6s; transition: opacity 0.25s linear 1.6s; } .pos5{ -webkit-transition: opacity 0.25s linear 1.8s; -moz-transition: opacity 0.25s linear 1.8s; -o-transition: opacity 0.25s linear 1.8s; transition: opacity 0.25s linear 1.8s; }

/*---------------------- End-Posiciones ----------------------------------*/

/*

                                              2. End of Interactive Menu ################################
  • /

/*

                                              2. DropDown Info ##########################################
  • /

.DropDown_info{ display:inline-block; border:1px black solid; border-radius:10px; background-color:#eeeeee; margin-left:4.5%; margin-right:4.5%; width:90%; } .DropDown_info_head:hover{ background-color:#0CF7F7; } .DropDown_info_head{ border-radius:10px; position:relative; display:inline-block; cursor: pointer; width:100%; } .DropDown_info_text{ display:inline-block; margin:10px; }

.DropDown_info_down, .DropDown_info_up{ position:absolute; width:10px; right:10px; top:10px; }

/*

                                              2. End of DropDown Info ###################################
  • /
Retrieved from "http://2013.igem.org/Team:UC_Chile/css/prueba.css"