Biomod/2011/IITM/AcidArtists: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
(Undo revision 604268 by Nikhil Srinivasan (Talk))
 
(154 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<center>
[[Image:Iitm-acidartists-banner.jpg|800px]]
</center>
<html>
<html>
<head>
<head>
<style type="text/css">
<style>
<!--
/*
#bodyContent{text-align:center;}
*/


html
ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
{
ul.polaroids li { display: inline; }
overflow: -moz-scrollbars-vertical !important;
ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
resize: none;
ul.polaroids img { display: block; width: 220px; margin-bottom: 12px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
background-color: #f5f6f7;
}


#top-section {
#content{
height: 20px;
color:#111;
border-left: none;
background:none;
border-right: none;
border:none;
}
}
 
.portlet .pBody {
#siteSub {
border:none;
display:none;
background:none;
z-index:-1;
}
}
.portlet a{color:#white;}
.pBody a{color:#white;}


#search-controls {
#footer{background:none; border:none;}
display:none;
#footer li{color:#333;;}
}
#footer li a {color:#333;;}


.firstHeading {
display:none;
}


#search-controls {
margin-top:0px;
}


#footer-box {
h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
display:none;
}


body
#menu ul{list-style:none;}
{
#menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px; cursor:pointer}
background-color: #f5f6f7;
}


#contentSub {
#content_container{width:1%;height:10px; background:#333; position:absolute; top:260px; display:none; left:495%; opacity:0.8;
display:none;
border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; border:1px #AAA solid;
}
}
#close_container{position:absolute;left:98.5%;top:5px;,cursor:pointer;}


#siteSub {
.contents{float:none; position:absolute; width:89%; text-align:justify; top:280px; display:none; height:316px; overflow:auto; padding:16px;}
display:none;
}
 
#search-controls {
display:none;
}


.firstHeading {
.slide_show_pic{
display:none;
position:absolute;
top:-40px; left:160px;
display:none; height:400px;
}
}


#search-controls {
/*stack*/
margin-top:0px;
}


#footer-box {
.stack { position: fixed; bottom: 60px; right: 60px; } 
display:none;
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; left:20px;} 
}
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } 
.stack ul li { position: absolute; } 
.stack ul li img { border: 0; } 
.stack ul li span { display: none; } 
.stack .openStack li span { 
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif; 
    display:block; 
    height: 14px; 
    position:absolute; 
    top: 17px; 
    right:60px; 
    line-height: 14px; 
    border: 0; 
    background-color:#000; 
    padding: 3px 10px; 
    border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    color: #fcfcfc; 
    text-align: center; 
    text-shadow: #000 1px 1px 1px; 
    opacity: .85; 
    filter: alpha(opacity = 85); 
}


#top-section {
.stack img{width:50px;}
height: 20px;
 
border-left: none;
/* IE Fixes */ 
border-right: none;
.stack { _position: absolute; } 
}
.stack ul { _z-index:-1; _top:-15px; } 
.stack ul li { *right:5px; }


.left-menu {
/*stack close*/
margin-top:-12px;
}


.right-menu {
#sidebar_bg{
margin-top:-12px;
width:150px;
background:#000;
opacity:0.6;
height:830px;
display:block;
position:absolute;
left:-156px; top:-50px;
z-index:-100;
}
}


.left-menu ul {
.picture{width:200px;}
border: none;
}


#menubar li a {
ul.polaroids a:after {
color:#8C8984;
content: attr(title);
        background-color:transparent;
}
}


#menubar ul {
    /* By default, we tilt all our images -2 degrees */
color:transparent;
    ul.polaroids a {
        background-color:transparent;
    -webkit-transform: rotate(-2deg);
}
    -moz-transform: rotate(-2deg);
    }
   
    /* Rotate all even images 2 degrees */
    ul.polaroids li:nth-child(even) a {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    }
   
    /* Don't rotate every third image, but offset its position */
    ul.polaroids li:nth-child(3n) a {
    -webkit-transform: none;
    -moz-transform: none;
    position: relative;
    top: -5px;
    }
   
    /* Rotate every fifth image by 5 degrees and offset it */
    ul.polaroids li:nth-child(5n) a {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    position: relative;
    right: 5px;
    }
   
    /* Keep default rotate for every eighth, but offset it */
    ul.polaroids li:nth-child(8n) a {
    position: relative;
    top: 8px;
    right: 5px;
    }
   
    /* Keep default rotate for every eleventh, but offset it */
    ul.polaroids li:nth-child(11n) a {
    position: relative;
    top: 3px;
    left: -5px;
    }


#menubar {
    /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
background-color:transparent;
    ul.polaroids img:hover {
font-size:85%;
    -webkit-transform: scale(1.25);
line-height:1em;
    -moz-transform: scale(1.25);
position:absolute;
    position: relative;
top:10px;
    z-index: 5;
white-space:nowrap;
    }
width:50%;
z-index:5;
height:20px;
overflow:hidden


.stuff_contents{
position:fixed;
top:8%; left:13%;
display:none;
width:80%;
color:white;
z-index:101;
}
}


.left-menu {
</style>
left:0;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script>
padding-left: 0px;
<script>
}
.right-menu  {
right:0;
     
}


.firstHeading { display:none; }
jQuery(function () { 
}
    // Stack initialize 
    var openspeed = 300; 
    var closespeed = 300; 
    $('.stack>img').toggle(function(){ 
        //reverse above 
        var $el=$(this); 
        $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); 
        $el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed); 
        $el.animate({paddingTop: '35'}); 
    },function(){ 
        var vertical = 0; 
        var horizontal = 0; 
        var $el=$(this); 
        $el.next().children().each(function(){ 
            $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); 
            vertical = vertical + 55; 
            horizontal = (horizontal+.75)*2; 
        }); 
        $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') 
          .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); 
        $el.animate({paddingTop: '0'}); 
    });
 
    // Stacks additional animation 
    $('.stack li a').hover(function(){ 
        $("img",this).animate({width: '56px'}, 100);
        $("span",this).animate({marginRight: '30px'}); 
    },function(){ 
        $("img",this).animate({width: '50px'}, 100); 
        $("span",this).animate({marginRight: '0'}); 
    }); 
}); 


#menubar{
function open_menu(){
color: #transparent;
var openspeed = 300; 
    var closespeed = 300;
var vertical = 0; 
        var horizontal = 0; 
        var $el=$('.stack>img'); 
        $el.next().children().each(function(){ 
            $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); 
            vertical = vertical + 75; 
            horizontal = (horizontal+.75)*2; 
        }); 
        $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') 
          .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); 
        $el.animate({paddingTop: '0'});
}
}


#menubar.right-menu {
jQuery(document).ready(function(){
margin-top:-12px;
var name;
}
$(".picture").click(function(){
name="#"+$(this).attr("title");
$("#data_container").fadeIn();
$(name).fadeIn();
});


.right-menu ul {
$("#close_dialog").click(function(){
border: none;
$("#data_container").fadeOut();
}
$(name).fadeOut();
});


#menubar{
});
top:15px;
z-index:25;


}
</script>
</head>


#menubar {
<body onload="open_menu()">
background-color:f5f6f7;
font-size:85%;
line-height:1em;
position:absolute;
top:10px;
white-space:nowrap;
width:50%;
z-index:5;
height:20px;
overflow:hidden


}
<img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/>
<br/><br/>


img[src*="/wiki/skins/common/images/wiki.png"]{
    width:0;
    height:60px;
    padding-right:975px;
    background:#transparent;
}


#p-logo a{
<div class="stack"> 
color:#transparent;
<img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack"> 
}
<ul id="stack"> 
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Sponsors"><span>Sponsors</span><img class="picture" src="http://openwetware.org/images/5/51/Dollar_iitm.png" title="sponsors"/></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Reference_papers"><span>Reference_Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li> 
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Team"><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li> 
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Project"><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li> 
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/DNA_Nanotech"><span>Introduction</span><img src="http://openwetware.org/images/a/ad/DNA_origami_iitm.png" alt="Introduction"></a></li> 
</ul> 
</div> 




#catlinks {
height: 0px;
overflow: hidden;
display: none;
border:  }
}
#Table_01 {
position:absolute;
left:30px;
top:-55px;
width:1000px;
height:85px;
}
#bar-normal-01-norm {
position:absolute;
left:0px;
top:0px;
width:119px;
height:85px;
}


#bar-normal-02-norm {
position:absolute;
left:119px;
top:0px;
width:108px;
height:85px;
}


#bar-normal-03-norm {
<div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div>
position:absolute;
left:227px;
top:0px;
width:110px;
height:85px;
}


#bar-normal-04-norm {
<iframe width="800" height="450" src="http://www.youtube.com/embed/ZnnSuNb9A14?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>
position:absolute;
left:337px;
top:0px;
width:109px;
height:85px;
}


#bar-normal-05-norm {
position:absolute;
left:446px;
top:0px;
width:108px;
height:85px;
}


#bar-normal-06-norm {
</body>
position:absolute;
left:554px;
top:0px;
width:109px;
height:85px;
}
 
#bar-normal-07-norm {
position:absolute;
left:663px;
top:0px;
width:109px;
height:85px;
}
 
#bar-normal-08-norm {
position:absolute;
left:772px;
top:0px;
width:108px;
height:85px;
}
 
#bar-normal-09-norm {
position:absolute;
left:880px;
top:0px;
width:120px;
height:85px;
}
 
#content{
background-color: #f5f6f7;
padding-top:65px;
width:1000px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
font-smooth:always;
border-style: none solid solid solid;
border-width:0px;
margin-top: 0px;
}
 
.shadow {
  -moz-box-shadow:  0px 0px 15px #ccc;
  -webkit-box-shadow:  0px 0px 15px #ccc;
  box-shadow:  0px 0px 15px #ccc;
}
 
.whitebox {
  -moz-box-shadow:  0px 0px 15px #ccc;
  -webkit-box-shadow:  0px 0px 15px #ccc;
  box-shadow:  0px 0px 15px #ccc;
  background-color: #FFFFFF;
  -moz-border-radius: 15px;
  border-radius: 15px;
  margin-top: 20px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin-left: 15px;
  margin-right: 25px;
}
 
.whitebox2 {
  -moz-box-shadow:  0px 0px 5px #444;
  -webkit-box-shadow:  0px 0px 5px #444;
  box-shadow:  0px 0px 5px #444;
  background-color: #f1f2f3;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-top: 0px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  align:center;
}
 
.monthtable {
  text-align:center;
  background-color:#f1f2f3;
}
 
 
h1,h3,h5{
color: #C22227;
background: none;
font-weight: normal;
margin: 0;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: none;   
}
h2, h4, h6{
color: #484848;
background: none;
font-weight: normal;
margin: 0;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: none;   
}
 
 
 
-->
</style>
</head>
</html>
</html>

Latest revision as of 19:41, 25 May 2012

<html> <head> <style> /*

  1. bodyContent{text-align:center;}
  • /

ul.polaroids { width: 970px; margin: 0 0 18px -30px; } ul.polaroids li { display: inline; } ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } ul.polaroids img { display: block; width: 220px; margin-bottom: 12px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }

  1. content{

color:#111; background:none; border:none; } .portlet .pBody { border:none; background:none; z-index:-1; } .portlet a{color:#white;} .pBody a{color:#white;}

  1. footer{background:none; border:none;}
  2. footer li{color:#333;;}
  3. footer li a {color:#333;;}


h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;}

  1. menu ul{list-style:none;}
  2. menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px; cursor:pointer}
  1. content_container{width:1%;height:10px; background:#333; position:absolute; top:260px; display:none; left:495%; opacity:0.8;

border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; border:1px #AAA solid; }

  1. close_container{position:absolute;left:98.5%;top:5px;,cursor:pointer;}

.contents{float:none; position:absolute; width:89%; text-align:justify; top:280px; display:none; height:316px; overflow:auto; padding:16px;}

.slide_show_pic{ position:absolute; top:-40px; left:160px; display:none; height:400px; }

/*stack*/

.stack { position: fixed; bottom: 60px; right: 60px; } .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; left:20px;} .stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span { 

   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  
   display:block;  
   height: 14px;  
   position:absolute;  
   top: 17px;  
   right:60px;  
   line-height: 14px;  
   border: 0;  
   background-color:#000;  
   padding: 3px 10px;  
   border-radius: 10px;  
   -webkit-border-radius: 10px;  
   -moz-border-radius: 10px;  
   color: #fcfcfc;  
   text-align: center;  
   text-shadow: #000 1px 1px 1px;  
   opacity: .85;  
   filter: alpha(opacity = 85);

}

.stack img{width:50px;}

/* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li { *right:5px; }

/*stack close*/

  1. sidebar_bg{

width:150px; background:#000; opacity:0.6; height:830px; display:block; position:absolute; left:-156px; top:-50px; z-index:-100; }

.picture{width:200px;}

ul.polaroids a:after { content: attr(title); } 

   /* By default, we tilt all our images -2 degrees */
   ul.polaroids a {
   -webkit-transform: rotate(-2deg);
   -moz-transform: rotate(-2deg);
   }
    
   /* Rotate all even images 2 degrees */
   ul.polaroids li:nth-child(even) a {
   -webkit-transform: rotate(2deg);
   -moz-transform: rotate(2deg);
   }
    
   /* Don't rotate every third image, but offset its position */
   ul.polaroids li:nth-child(3n) a {
   -webkit-transform: none;
   -moz-transform: none;
   position: relative;
   top: -5px;
   }
    
   /* Rotate every fifth image by 5 degrees and offset it */
   ul.polaroids li:nth-child(5n) a {
   -webkit-transform: rotate(5deg);
   -moz-transform: rotate(5deg);
   position: relative;
   right: 5px;
   }
    
   /* Keep default rotate for every eighth, but offset it */
   ul.polaroids li:nth-child(8n) a {
   position: relative;
   top: 8px;
   right: 5px;
   }
    
   /* Keep default rotate for every eleventh, but offset it */
   ul.polaroids li:nth-child(11n) a {
   position: relative;
   top: 3px;
   left: -5px;
   }

   /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
   ul.polaroids img:hover {
   -webkit-transform: scale(1.25);
   -moz-transform: scale(1.25);
   position: relative;
   z-index: 5;
   }

.stuff_contents{ position:fixed; top:8%; left:13%; display:none; width:80%; color:white; z-index:101; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script> <script>

jQuery(function () { 

   // Stack initialize  
   var openspeed = 300;  
   var closespeed = 300;  
   $('.stack>img').toggle(function(){  
       //reverse above  
       var $el=$(this);  
       $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);  
       $el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed);  
       $el.animate({paddingTop: '35'});  
   },function(){  
       var vertical = 0;  
       var horizontal = 0;  
       var $el=$(this);  
       $el.next().children().each(function(){  
           $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);  
           vertical = vertical + 55;  
           horizontal = (horizontal+.75)*2;  
       });  
       $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')  
          .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);  
       $el.animate({paddingTop: '0'});  
   }); 
 
   // Stacks additional animation  
   $('.stack li a').hover(function(){  
       $("img",this).animate({width: '56px'}, 100);  
       $("span",this).animate({marginRight: '30px'});  
   },function(){  
       $("img",this).animate({width: '50px'}, 100);  
       $("span",this).animate({marginRight: '0'});  
   });

});

function open_menu(){ var openspeed = 300; 

   var closespeed = 300;

var vertical = 0; 

       var horizontal = 0;  
       var $el=$('.stack>img');  
       $el.next().children().each(function(){  
           $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);  
           vertical = vertical + 75;  
           horizontal = (horizontal+.75)*2;  
       });  
       $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')  
          .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);  
       $el.animate({paddingTop: '0'});

}

jQuery(document).ready(function(){ var name; $(".picture").click(function(){ name="#"+$(this).attr("title"); $("#data_container").fadeIn(); $(name).fadeIn(); });

$("#close_dialog").click(function(){ $("#data_container").fadeOut(); $(name).fadeOut(); });

});

</script> </head>

<body onload="open_menu()">

<img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/> <br/><br/>


<div class="stack"> <img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack"> <ul id="stack"> <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Sponsors"><span>Sponsors</span><img class="picture" src="http://openwetware.org/images/5/51/Dollar_iitm.png" title="sponsors"/></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Reference_papers"><span>Reference_Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Team"><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Project"><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/DNA_Nanotech"><span>Introduction</span><img src="http://openwetware.org/images/a/ad/DNA_origami_iitm.png" alt="Introduction"></a></li> </ul> </div>



<div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div>

<iframe width="800" height="450" src="http://www.youtube.com/embed/ZnnSuNb9A14?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>


</body> </html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2011/IITM/AcidArtists&oldid=604269"