Team:UC Chile/css/prueba.css

From 2013.igem.org

(Difference between revisions)

Revision as of 02:36, 26 September 2013

body{

   background-image:url('https://static.igem.org/mediawiki/2013/3/36/Team_UC_Chile_ALL_Fondo.jpg');
   width:1000px;
   padding-left:180px;
   overflow:scroll;
   text-decoration:none;
   text-align: center;
   font-size:16px;
   font-family: Calibri;
   }

/*

1. 1. 1. 1. Header Div (Menu and Image)#######################################

/

Header{

   width:1000px;    
   height:330px;
   margin-left:auto;
   margin-right:auto;
   margin-top: 20px;
   margin-bottom: 20px;
   display:block;
   position:relative;

}

Header > img

{

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

}

/*

1. 1. 1. 1. Second Div (Containers)#######################################

/

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;

}

Container h1,h2,h3,h4,h5,h6,h7{

   margin-left:15px;

}

brainstorming > li{

   list-style-type:circle;

}

Container .gray_box{

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

Container .abstract{

   margin:3%;
   padding:2%;
   line-height:120%;
   text-align:justify;
   font-size:15px;

}

Container .centered{

   display:block;
   text-align:center;
   margin:auto;

}

Container .float_img > img{

   float:left;

}

/*

1. 1. 1. 1. End of Second Div #######################################

/

/*

1. 1. 1. 1. Photo Gallery ###########################################

/

photogallery{

   margin:10px;

}

photogallery li > img{

   height:250px;
   width:250px;
   margin:15px;
   border:2px solid #000000;

}

photogallery >li{

   display:inline-block;
   background-color:#cccccc;
   list-style-type: none;
   border-radius:10px;

}

photogallery >li:hover{

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

}

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;

}

I1{

   position:relative;
   top:15%;
   left:15%;
   width:70%;
   height:70%;
   text-align:center;

}

I1 img{

   width:100%;
   height:100%;

}

I1 .Img{

   position:absolute;
   right:0px;
   top:0px;
   z-index:2;

}

I1 .Close{

   position:absolute;
   right:-15px;
   top:-15px;
   height:30px;
   width:30px;
   z-index:1503;

}

I1 .Prev{

   position:absolute;
   left:0px;
   top:45%;
   height:50px;
   width:50px;
   z-index:1503;

}

I1 .Next{

   position:absolute;
   right:0px;
   top:45%;
   height:50px;
   width:50px;
   z-index:1503;

}

/*

1. 1. 1. 1. End of Photo Gallery #######################################

/

/*

1. 1. 1. 1. Clases for Calendar Items #######################################

/

Calendar{

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

Month-div{

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

Month-header{

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

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; }

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; }

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

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

Week-div .days{display:none;}

Week-div .calendar_span{

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

Week-div .calendar_span:hover{

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

Week-div .day{

height:35px; width:30px; }

Week-div .week_resume{

width:120px; }

Week-div .invalid{

background-color:#7e7e7e; }

Text-div{

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

Text-div .title{

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

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

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

Text-div li{

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

Text-div .red{

color:#980000; }

Text-div .blue{

color:#000098; }

Text-div img{

display:block; }

Calendar span.back, #Calendar span.next{

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

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

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

.notdisp{

   display:none;

}

.disp{

   display:block;

} /*

1. 1. 1. 1. End of Calendar Items ##########################################

/

/*

1. 1. 1. 1. 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; }

/*

1. 1. 1. 1. End of Image Menu ######################################

/

/*

1. 1. 1. 1. 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:270px; height:270px; 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; line-height:120%; 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 ----------------------------------*/

/*

1. 1. 1. 1. End of Interactive Menu ################################

/

/*

1. 1. 1. 1. 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; }

/*

1. 1. 1. 1. End of DropDown Info ###################################

/

/* Wiki Hacks - START */ /* Author: Pieter van Boheemen */ /* Team: TU Delft */

globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: auto; height:100%;}
bodyContent {background-color:transparent; border: none; padding:0; margin:0; width:100%; height:100%;}
top-section {display: block;position:fixed; height:0px; width:100%;z-index:999;}
p-logo {display: none;}

footer { border: none; width: 100%; margin: 0 auto; padding: 0;}

/*To hide*/

catlinks{display:none;} /* separator between page content and footer-box */

.firstHeading{display:none;} /* page name on top of page*/ .visualClear{display:none;} /* empty div above of content*/

search-controls {display: block;}

/*To change*/

footer-box {display: block;border: none;}
f-list a { font-size: 11px;}

.printfooter { display: none; }

search-controls { display:none; }

h3#siteSub { display: none;}

contentSub {display: none;}

p:first-child { display: none;}

/*New styles*/

igem-logo{

margin: 5px 5px 5px 5px; width:130px; height:105px; position:fixed; top:0px; left:0px; z-index:100000; }

igem-logo:hover .left-menu li{

color: white; background-color: #83cfcb; }

menubar {

display:inline-block; width:130px; margin: 5px 5px 5px 5px; position:fixed; }

menubar ul{

margin: 0px 0px 0px 0px; }

menubar li{

display:block; position:relative; }

menubar a{

display:block; background-color: transparent; text-transform:uppercase; text-decoration:none; text-align:left; } .left-menu#menubar li{ width:140px; padding-left:10px; position:relative; top:28px; border-radius:10px; }

.left-menu#menubar li:last-child{ text-transform:uppercase; position:absolute; background-color:#8ec63f; top:-5px; } .left-menu:hover li{ color: white; background-color: #83cfcb; } .left-menu:hover{ color: white; background-color: transparent; } .left-menu#menubar{ top:115px; } .right-menu#menubar{ top:10px; right:20px; } .right-menu#menubar li{ width:140px; background-color:#8A8486; border-radius:10px; text-align:left; padding-left:10px; } .right-menu#menubar a{ text-transform:uppercase; background-color: transparent; }

content{

overflow:hidden; }

aux-center, #aux-right, #aux-left{

display:inline-block; }

aux-right,#aux-left{

width:150px; height:1000px; background-color:#ffffff; vertical-align:top; }

/* Wiki Hacks - END */