Template:Lyon-INSA/homeCss

<html>

<SCRIPT LANGUAGE="JavaScript">
// CHARGEMENT DES IMAGES AVANT LE RESTE
i1 = new Image;
i1.src = "https://static.igem.org/mediawiki/2012/0/07/The_lit_B.png";
i2 = new Image;
i2.src = "https://static.igem.org/mediawiki/2012/0/0f/Menu_T%26T.png";

i3 = new Image;
i3.src = "https://static.igem.org/mediawiki/2012/3/35/Menu_project.png";
i4 = new Image;
i4.src = "https://static.igem.org/mediawiki/2012/8/8b/Menu_result.png";
i5 = new Image;
i5.src = "https://static.igem.org/mediawiki/2012/a/aa/Menu_collabo.png";
i6 = new Image;
i6.src = "https://static.igem.org/mediawiki/2012/9/9e/Menu_HP.png";
i7 = new Image;
i7.src = "https://static.igem.org/mediawiki/2012/e/e5/OurtownB.png";
i8 = new Image;
i8.src = "https://static.igem.org/mediawiki/2012/b/ba/V_and_P_B.png";
i9 = new Image;
i9.src = "https://static.igem.org/mediawiki/2012/2/2b/Attributions_B.png";
i10 = new Image;
i10.src = "https://static.igem.org/mediawiki/2012/d/d4/Description_B.png";
i11 = new Image;
i11.src = "https://static.igem.org/mediawiki/2012/b/b7/Modeling_B.png";
i12 = new Image;
i12.src = "https://static.igem.org/mediawiki/2012/5/5c/Safety_B.png";
i13 = new Image;
i13.src = "https://static.igem.org/mediawiki/2012/a/a1/Notebook_B.png";
i14 = new Image;
i14.src = "https://static.igem.org/mediawiki/2012/f/f9/Protocols_B.png";
i15 = new Image;
i15.src = "https://static.igem.org/mediawiki/2012/6/61/Results_B.png";
i16 = new Image;
i16.src = "https://static.igem.org/mediawiki/2012/a/ad/Data_page_B.png";
i17 = new Image;
i17.src = "https://static.igem.org/mediawiki/2012/a/aa/Achievements_B.png";
i18 = new Image;
i18.src = "https://static.igem.org/mediawiki/2012/2/22/Menu_LAB.png";
i19 = new Image;
i19.src = "https://static.igem.org/mediawiki/2012/8/8b/Menu_result.png";
i20 = new Image;
i20.src = "https://static.igem.org/mediawiki/2012/f/fe/Sponsors_B.png";
i21 = new Image;
i21.src = "https://static.igem.org/mediawiki/2012/3/3b/Collabo_between_B.png";
i22 = new Image;
i22.src = "https://static.igem.org/mediawiki/2012/e/e8/Contact_us_B.png";
i23 = new Image;
i23.src = "https://static.igem.org/mediawiki/2012/7/7f/Context_B.png";
i24 = new Image;
i24.src = "https://static.igem.org/mediawiki/2012/8/8f/State_of_B.png";
i25 = new Image;
i25.src = "https://static.igem.org/mediawiki/2012/f/fc/REACH_B.png";
i26 = new Image;
i26.src = "https://static.igem.org/mediawiki/2012/7/73/Applic_B.png";
i27 = new Image;
i27.src = "https://static.igem.org/mediawiki/2012/e/e8/Contact_us_B.png";
i28 = new Image;
i28.src = "https://static.igem.org/mediawiki/2012/1/12/Humanprac_B.png";




</SCRIPT>

<style>
#content a:link {color:#33ccff;}      /* unvisited link */
#content a:visited {color:#66ff99;}  /* visited link */
#content a:hover {color:#9966ff;}  /* mouse over link */
#content a:active {color:#ffffff;}  /* selected link */

#pageContent{
margin-top:-60px;
}

._pt{
   cursor:pointer;
}
 
#foo:after {
	background: -moz-element(#foo); 
	background: -ms-element(#foo);
	background: -o-element(#foo);
	background: -webkit-element(#foo);
	background: element(#foo);
}
ul
{
list-style-image:none;
list-style-type:circle;
} 

.reflect {
	position: relative;
}

.introduction
{
    font-size:16px; 
}

.reflect:after {
    content:"";
    position: absolute;
    top:100%;
    right:0;
    bottom:-100%;
    left:0;
    z-index: -1;
    opacity: .4;
    mask: -moz-linear-gradient(90deg, #000, #fff);
    -moz-transform:translateY(10px) scaleY(-1);
    -ms-transform:translateY(10px) scaleY(-1);
    -o-transform:translateY(10px) scaleY(-1);
    -webkit-transform:translateY(10px) scaleY(-1);
    transform:translateY(10px) scaleY(-1);
}

#top-section {
   border:none;
}
#enterWebsite{
   position:absolute;
   top:150px;
   font-size:30px;
   right:100px;
   color:#201685;
}
#footer-box {
   border:none;
   border-top:1px solid #aaa;
   background-color:#eff3f6;

}
.wrapper{
  height:0px;
  overflow:hidden;
  margin:20px;
}

._ib{
 display:inline-block;
}
h1{
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Casco_galo.svg/150px-Casco_galo.svg.png') no-repeat;
background-position:-150px -150px;
text-shadow: 0.1em 0.1em 0.05em #333;
}
h2{
text-shadow: 0.1em 0.1em 0.05em #333;
  background:url('https://static.igem.org/mediawiki/2012/6/6d/1345647237_hand-point-270.png') no-repeat;
  background-position:20px 13px;
  cursor:pointer;
  text-align:center;
}


.firstHeading
{
  display:none;
}

#catlinks
{
   display:none;
}

body
{
   background-color:#eff3f6;
}


#content
{
   background-color:#262626;
   color:#ccd3db;
   border:none;
   width:1000px;
   padding:0px;  
   padding-bottom:5px;
   margin-top:150px;
   border-radius:10px;
-moz-box-shadow: inset 0 0 25px 25px #111111;
-webkit-box-shadow: inset 0 0 25px 25px #111111;
box-shadow: inset 0 0 25px 25px #111111;
}

#footer-box {
width:990px;
margin-bottom:20px;
}

#top-section{
width:1000px;
}
h3
{
   font-weight:bold;
   color:#cccccc;
   font-size:16px;
   text-shadow:2px 2px 2px #333333;
}

h1
{
   color:#eee;
   margin:20px;
}

h2
{
   color:#eee;
margin:20px;
}

html{

}

#menu
{
  width:1000px;
  display:inline-block;
 margin-left:40px;
}

.contenuTexte
{
   text-align:justify;
   font-size:15px; 
}

.petitSsTitre
{
   margin:20px;
   font-weight:bold;
   color:#777777;
   font-size:14px;
text-shadow:2px 2px 2px #333333;

}


#p-logo img{
    width: 1178px;
    left: -130px;
    position: absolute;
}

table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
    border: 1px solid black;
}

#menuK{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:18px;
	width:180px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:180px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#ca0008;
}
#search-controls{
   right:-150px;
}
#tt1:hover{
background:url('https://static.igem.org/mediawiki/2012/0/07/The_lit_B.png');
}
#tt2:hover{
background:url('https://static.igem.org/mediawiki/2012/e/e5/OurtownB.png');
}
#tt3:hover{
background:url('https://static.igem.org/mediawiki/2012/b/ba/V_and_P_B.png');
}
#tt4:hover{
background:url('https://static.igem.org/mediawiki/2012/2/2b/Attributions_B.png');
}
#pro1:hover{
background:url('https://static.igem.org/mediawiki/2012/d/d4/Description_B.png');
}
#pro2:hover{
background:url('https://static.igem.org/mediawiki/2012/b/b7/Modeling_B.png');
}
#pro3:hover{
background:url('https://static.igem.org/mediawiki/2012/5/5c/Safety_B.png');
}
#lab1:hover{
background:url('https://static.igem.org/mediawiki/2012/a/a1/Notebook_B.png');
}
#lab2:hover{
background:url('https://static.igem.org/mediawiki/2012/f/f9/Protocols_B.png');
}
#res1:hover{
background:url('https://static.igem.org/mediawiki/2012/6/61/Results_B.png');
}
#res2:hover{
background:url('https://static.igem.org/mediawiki/2012/a/ad/Data_page_B.png');
}
#res3:hover{
background:url('https://static.igem.org/mediawiki/2012/a/aa/Achievements_B.png');
}
#col1:hover{
background:url('https://static.igem.org/mediawiki/2012/f/fe/Sponsors_B.png');
}
#col2:hover{
background:url('https://static.igem.org/mediawiki/2012/3/3b/Collabo_between_B.png');
}
#col3:hover{
background:url('https://static.igem.org/mediawiki/2012/e/e8/Contact_us_B.png');
}
#hum1:hover{
background:url('https://static.igem.org/mediawiki/2012/7/7f/Context_B.png');
}
#hum2:hover{
background:url('https://static.igem.org/mediawiki/2012/8/8f/State_of_B.png');
}
#hum3:hover{
background:url('https://static.igem.org/mediawiki/2012/f/fc/REACH_B.png');
}
#hum4:hover{
background:url('https://static.igem.org/mediawiki/2012/0/0c/Our_sol_B.png');
}
#hum5:hover{
background:url('https://static.igem.org/mediawiki/2012/7/73/Applic_B.png');
}
#hum6:hover{
background:url('https://static.igem.org/mediawiki/2012/1/12/Humanprac_B.png');
}

</style>
<script>
$(document).ready(function(){

$("#p-logo").find("img").attr("src","https://static.igem.org/mediawiki/2012/c/c6/Banni%C3%A8re.png");
});
</script>

<body>   
   <div id="menuBloc" style="height:80px;background-color:transparent;width:100%;position:relative;top:-80px;left:-28px">
      <div id="teamtown" class="_pt menuprinc" style="background-color:transparent;position:relative;width:190px;height:80px;right:-50px">
      </div>
      <div id="project" class="_pt menuprinc" style="background-color:transparent;position:relative;width:130px;height:80px;right:-242px;top:-80px">
      </div>
      <div id="lab" class="_pt menuprinc" style="background-color:transparent;position:relative;width:80px;height:80px;right:-374px;top:-160px">
      </div>
      <div id="result" class="_pt menuprinc" style="background-color:transparent;position:relative;width:120px;height:80px;right:-456px;top:-240px">
      </div>
      <div id="human" class="_pt menuprinc" style="background-color:transparent;position:relative;width:230px;height:80px;right:-578px;top:-320px">
      </div>    
      <div id="collaboration" class="_pt menuprinc" style="background-color:transparent;position:relative;width:200px;height:80px;right:-810px;top:-400px">
      </div>
   </div>

   <div id="divtt" class="sousMenu" style="width:1021px;height:101px;position:relative;right:80px;background:url('https://static.igem.org/mediawiki/2012/0/0f/Menu_T%26T.png');top:-50px;display:none;">  
<div id="tt1" class="_pt"  onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/Team';" style="height:95px;width:302px;position:relative;top:-5px;right:-40px">
</div>    
<div id="tt2" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/town';" style="height:95px;width:193px;position:relative;top:-100px;right:-335px">
</div>    
<div id="tt3" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/videos';" style="height:95px;width:281px;position:relative;top:-195px;right:-520px">
</div>    
<div id="tt4" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/Attributions';" style="height:95px;width:193px;position:relative;top:-290px;right:-810px">
</div>    

   </div>
   <div id="divproject" class="sousMenu" style="width:639px;height:101px;position:relative;right:80px;background:url('https://static.igem.org/mediawiki/2012/3/35/Menu_project.png');top:-50px;display:none;">  
<div id="pro1" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/project';" style="height:95px;width:193px;position:relative;top:-5px;right:-95px">
</div>    
<div id="pro2" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/modelling';" style="height:95px;width:193px;position:relative;top:-100px;right:-285px">
</div>    
<div id="pro3" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/safety';" style="height:95px;width:145px;position:relative;top:-195px;right:-465px">
</div>    
   </div>
   <div id="divlab" class="sousMenu" style="width:537px;height:101px;position:relative;right:80px;background:url('https://static.igem.org/mediawiki/2012/2/22/Menu_LAB.png');top:-50px;display:none;">   
<div id="lab1" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/notebook';" style="height:95px;width:193px;position:relative;top:-5px;right:-95px">
</div>    
<div id="lab2" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/protocol';" style="height:95px;width:193px;position:relative;top:-100px;right:-295px">
</div>     
   </div>
   <div id="divresult" class="sousMenu" style="width:702px;height:101px;position:relative;right:80px;background:url('https://static.igem.org/mediawiki/2012/8/8b/Menu_result.png');top:-50px;display:none;"> 

<div id="res1" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/results';" style="height:95px;width:145px;position:relative;top:-5px;right:-95px">
</div>    
<div id="res2" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/datapage';" style="height:95px;width:193px;position:relative;top:-100px;right:-230px">
</div>    
<div id="res3" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/Achievements';" style="height:95px;width:208px;position:relative;top:-195px;right:-430px">
</div>    
     
   </div>
   <div id="divcollabo" class="sousMenu" style="width:876px;height:101px;position:relative;right:80px;background:url('https://static.igem.org/mediawiki/2012/a/aa/Menu_collabo.png');top:-50px;display:none;">     
<div id="col1" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/sponsors';" style="height:95px;width:193px;position:relative;top:-5px;right:-55px">
</div>
<div id="col2" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/collaboration';" style="height:95px;width:405px;position:relative;top:-100px;right:-230px">
</div>
<div id="col3" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/contact';" style="height:95px;width:193px;position:relative;top:-195px;right:-615px">
</div>
   </div>
   <div id="divhuman" class="sousMenu" style="width:1076px;height:101px;position:relative;right:80px;background:url('https://static.igem.org/mediawiki/2012/9/9e/Menu_HP.png');top:-50px;display:none;">      
<div id="hum1" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/Context';" style="height:95px;width:145px;position:relative;top:-5px;right:-45px">
</div>
<div id="hum2" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/StateArt';" style="height:95px;width:227px;position:relative;top:-100px;right:-170px">
</div>
<div id="hum3" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/REACH';" style="height:95px;width:145px;position:relative;top:-195px;right:-375px">
</div>
<div id="hum4" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/BiofilmK';" style="height:95px;width:193px;position:relative;top:-290px;right:-500px">
</div>
<div id="hum5" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/microbialControl';" style="height:95px;width:193px;position:relative;top:-385px;right:-670px">
</div>
<div id="hum6" class="_pt" onclick="window.location='https://2012.igem.org/Team:Lyon-INSA/HP';" style="height:95px;width:242px;position:relative;top:-480px;right:-840px">
</div>
   </div>
</body>

<style>

.menuprinc{
   background:url('https://static.igem.org/mediawiki/2012/9/98/Fleche2.png') no-repeat;
   background-position:-50px -50px;
}

</style>

<script>
var btnClicked;

$(".menuprinc").mouseout(function(){
         
     $(".menuprinc").each(function(){
          var btn = $(this).attr('id');
          if (btn!=btnClicked)
          {
              $(this).css("background-position","-50px -50px");
          }
     });
});

$("#human").mouseover(function(){
      $("#human").css("background-position","99px 63px");
});
$("#lab").mouseover(function(){
      $("#lab").css("background-position","24px 63px");
});
$("#project").mouseover(function(){
      $("#project").css("background-position","49px 63px");
});
$("#collaboration").mouseover(function(){
      $("#collaboration").css("background-position","84px 63px");
});
$("#result").mouseover(function(){
      $("#result").css("background-position","44px 63px");
});
$("#teamtown").mouseover(function(){
      $("#teamtown").css("background-position","79px 63px");
});

  $("#teamtown").click(
            function(){       
btnClicked = $(this).attr('id');
   $(".menuprinc").css("background-position","-50px -50px");
                 $(".sousMenu").hide();
                 $("#divtt").fadeIn();
                 $("#teamtown").css("background-position","79px 63px");
               });
  $("#project").click(
            function(){
btnClicked = $(this).attr('id');
   $(".menuprinc").css("background-position","-50px -50px");
                $(".sousMenu").hide();
                 $("#divproject").fadeIn();
                     $("#project").css("background-position","49px 63px");
               });
  $("#collaboration").click(
            function(){
btnClicked = $(this).attr('id');
   $(".menuprinc").css("background-position","-50px -50px");
                $(".sousMenu").hide();
                 $("#divcollabo").fadeIn();

                 $("#collaboration").css("background-position","84px 63px");
               });
  $("#lab").click(
            function(){
btnClicked = $(this).attr('id');
   $(".menuprinc").css("background-position","-50px -50px");
                $(".sousMenu").hide();
                 $("#divlab").fadeIn();

                 $("#lab").css("background-position","24px 63px");
               });  
$("#human").click(
            function(){
btnClicked = $(this).attr('id');
   $(".menuprinc").css("background-position","-50px -50px");
                $(".sousMenu").hide();
                 $("#divhuman").fadeIn();

                 $("#human").css("background-position","99px 63px");
               });
  $("#result").click(
            function(){
btnClicked = $(this).attr('id');
   $(".menuprinc").css("background-position","-50px -50px");
                  $(".sousMenu").hide();
                 $("#divresult").fadeIn();
     
                 $("#result").css("background-position","44px 63px");
               });

</script>

</html>