Template:Hariramn

From OpenWetWare
Jump to: navigation, search

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>RS17 | Free CSS Template by RamblingSoul</title> <link rel="stylesheet" href="http://openwetware.org/images/c/ce/Default.txt" type="text/css" media="screen" /> <link rel="stylesheet" href="http://openwetware.org/images/6/68/Nivo-slider.txt" type="text/css" media="screen" /> <!--<link rel ="stylesheet" href="openwetware.org/images/5/5c/Stylers17.txt" type="text/css" media="screen" /> --> <style type="text/css">

  • {padding:0; margin:0;}

body {background: ffffff; /*url(images/bodybg.jpg) fixed repeat; */font: 12px Verdana, Geneva, sans-serif; color:#999;}

  1. wrap {width:965px; margin:auto;}
  2. nav {

background:url(images/topbar.png) no-repeat; width:970px; position:fixed; top:0; left:50%; height:125px; margin:0 0 0 -485px; z-index:99; } ul {list-style:none;}

  1. header {background:url(images/header.jpg) no-repeat; height:425px;}
  2. topbar {background: ffffff; /*url(images/headerbar.jpg) repeat-x; height:40px;*/}
  3. content {background: ffffff; /*url(images/pagebg.jpg) repeat-y;*/}
  4. sitename {display:block; float:left; font:bold 34px "Helvetica", Arial, Helvetica, sans-serif; color:#75b2dd; text-shadow: #000 1px 1px 1px; padding:3px 3px 0 15px;}
  5. sitename a {text-decoration:none; color:#85c2e3;}
  6. sitename a:active, #sitename a:visited {text-decoration:none; color:#75b2dd;}
  7. sitename a:hover {color:#fff;}
  8. sitename span {color:#FF3!important; font-size:36px!important;}
  9. sitename a span {color:#FF3!important;}

.clear {clear:both;}

  1. left {width:646px; float:left; padding:8px;}
  2. sidebar {width:280px; padding:17px 8px 8px 8px; float:right;}
  3. left p {line-height:16px; margin-bottom:18px;}

h2 {color: #75b2dd; /*Columbia blue*/ font:bold 26px "Trebuchet MS", Arial, Helvetica, sans-serif; text-shadow:#000 1px 1px 1px; display:block; margin-bottom:10px;} h3 {color: #999; font:bold 22px "Trebuchet MS", Arial, Helvetica, sans-serif; text-shadow:#000 1px 1px 1px; display:block; margin-bottom:10px;} h4 {color: #ccc; font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif; text-shadow:#000 1px 1px 1px; display:block; margin-bottom:10px;} a { color:#85c2e3; text-decoration:none;} a:visited,active {color:#85c2e3; text-decoration:none;} h2 a {color:#85c2e3; text-decoration:none;} h2 a:active, h2 a:visited {color:#85c2e3; text-decoration:none;} h2 a:hover {color:#fff;}

  1. header h2#desc {display:block; padding:52px 10px 0 15px; font-size:18px!important; text-shadow:#1a68ae 1px 1px 1px!important;}
  2. menu {display:block; list-style:none; float:right; width:600px; font:bold 12px "Helvetica", Arial, Helvetica, sans-serif;}
  3. menu li {display:inline;}
  4. menu li a {display:block; float:right; padding:15px 15px 0 15px; text-decoration:none; color:#85c2e3; text-shadow:#000 1px 1px 1px;}
  5. menu li a:visited, #menu li a:active {text-decoration:none; color:#85c2e3; text-shadow:#000 1px 1px 1px;}
  6. menu li a:hover {color:#fff; text-decoration: underline;}
  7. menu li.active a{color:#fff;}

/*#menu li a span {text-decoration: underline;!important;}*/ .post { padding:8px; margin-bottom:10px;} .columns {padding:8px;} .columnleft {float:left; width:49%;} .columnright {float:right; width:49%;} .col {float:left; width:31%; margin-right:12px; margin-bottom:15px;} .col p {margin-bottom:10px!important;} .txtbutton a{display:block; background:url(images/learnmore.jpg) no-repeat!important; height:19px; width:90px; text-align:center; font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ccc!important; text-shadow:#000 1px 1px 1px; text-decoration:none; padding:2px 0 0 0!important;} .txtbutton a:visited, .txtbutton a:active {display:block; background:url(images/learnmore.jpg) no-repeat!important; height:19px; width:90px; text-align:center; font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ccc!important; text-shadow:#000 1px 1px 1px; text-decoration:none; padding:2px 0 0 0!important;} .txtbutton a:hover {background:url(images/learnmore-hover.jpg) no-repeat!important; color:#fff!important;}

  1. bottombar {

background:#000;width:970px; position:fixed; bottom:0; left:50%; height:25px; margin:0 0 0 -485px; z-index:998; }

.categories li {display:block; height:28px; font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;} .categories li a {display:block; background:url(images/catgory1.jpg) no-repeat; width:254px; height:22px; padding:4px 10px 0 10px; text-shadow: #000 1px 1px 1px; color:#555;} .categories li a:visited, .categories li a:active {color:#555;} .categories li a:hover {background:url(images/catgory2.jpg) no-repeat; color:#fff;}

  1. sidebar ul {margin-bottom:10px;}

.block { width:274px; margin-bottom:10px;} .blocktop{background: #ffffff /*url(images/darkbox1.jpg) no-repeat; height:6px;*/} .blockmid {padding:8px; background: #ffffff/*url(images/darkbox2.jpg) repeat-y;*/} /*.blockfooter {background:url(images/darkbox3.jpg) no-repeat; height:6px;}*/ p.ads {display:block;} img, a img {border:none;} p.ads img {display:block; float:left; margin:2px;} .breadcrumb {display:block; width:630px; float:left; padding:12px 0 0 10px;} .breadcrumb li { display:inline; font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-shadow: #000 1px 1px 1px;}

  1. searchbar{margin-left:665px; padding:6px 0 0 0;}
  2. searchbar div { float:left; margin-right:5px;}
  3. searchbar input {color:#fff;}
  4. searchbar .keyword {display:block; background: transparent url(images/searchfield.jpg) no-repeat; width:185px; height:27px; padding:5px 5px 0 5px; border:none; float:left; color:#fff;}
  5. sidebar .posts {padding:5px;}
  6. sidebar .posts li {display:block; padding:5px 0 5px 0;}
  7. sidebar .posts li span {font:11px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#444; display:block;}
  8. sidebar .posts li a {display:block; border-bottom: dashed 1px #9EC5DA;}
  9. footerlinks {background:url(images/bottombar.jpg) repeat-x; height:41px;}
  10. bottom {background:#000; padding:15px;}

.alignleft {float:left;} .alignright {float:right;} .post .articleimg {padding:8px; background:#111; border:solid 1px #000;} img.alignleft { margin:0 15px 0 0;} img.alignright {margin:0 0 0 15px;} .post a {background:#171612; text-shadow:#000 1px 1px 1px; } .post a:hover {background:#000; color:#fff;}

  1. footernav {display:block; padding:12px 0 0 10px;}
  2. footernav li { display:inline; font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-shadow: #000 1px 1px 1px; padding:0 10px 0 0;}

.credit {font:11px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#444; display:block; padding:5px 0 5px 0;} h1 a, h2 a, h3 a, h4 a {background:none!important;}

  1. comments {padding:10px; background: #171612;}
  2. comments h2 {background:#000; padding:10px; font-size:18px!important;}
  3. comments .entry {padding:10px; background:#11100D; margin-bottom:10px;}
  4. comments .entry p {display:block; margin-bottom:8px!important;}
  5. comments .entry .avt {float:left; width:55px; margin-right:10px;}

.avt img {background:#000; padding:5px;}

  1. comments .entry .con, #comments .entry .name, #comments .entry .date { margin-left:70px;}
  2. comments .entry .con blockquote {font:italic 14px Georgia, "Times New Roman", Times, serif; color:#666; padding-left:15px!important; border-left: solid 5px #333!important; margin:0!important;}

h3#respond {color: #FC6;} .comments-form {background:#000; padding:10px;} .formid, .formuri, .formemail {padding:3px; height:25px; background:#171612; border:solid 1px #1C1B17; width:250px; color:#999; font-size:16px; } .comments-form label {padding-left:15px;} .comments-form textarea {padding:3px; background:#171612; border:solid 1px #1C1B17; color:#999; font-size:16px; } .postheader {margin-bottom:18px;} .postheader .postdetails {font-size:11px; color:#555;} .post blockquote {display:block; margin-left:10px; padding:5px 5px 5px 40px; border-left: solid 5px #333; font:14px italic Georgia, "Times New Roman", Times, serif; background:url(images/quote.jpg) 5px 0 no-repeat; margin-bottom:18px;} cite {display:block; color:#aaa; font-weight:bold;} .post blockquote p {margin-bottom:0!important;} blockquote.alignleft {width:200px;} blockquote.alignright {width:200px;} .post ul, .post ol {margin-bottom:18px;} .post ul li {display:block; padding:3px; line-height:16px; background:url(images/bullet.gif) 5px 5px no-repeat; padding-left:20px; margin-bottom:10px;} .post ol { margin-left:25px;} .post ol li { padding:3px; line-height:16px; margin-bottom:10px;} .post code {display:block; white-space:pre; background:#171612; padding:5px; margin-bottom:18px; font:12px "Courier New", Courier, monospace; border: solid 1px #312F29;}

.tags {padding:8px; background:#171612; margin-bottom:18px;}

.authorinfo {padding:8px; border-top: dashed 1px #333; border-bottom: dashed 1px #333; margin-bottom:18px;} .authorinfo img {float:left; margin-right:15px;} .postinfo {font-size:11px; font-weight:bold; display: block; margin-bottom:18px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} .postbottom { border-bottom:dashed 1px #000; margin-bottom:18px; padding-bottom:8px;}

.wp-pagenavi {display:block; height:30px; margin-bottom:18px; text-shadow: #000 1px 1px 1px;} .wp-pagenavi span, .wp-pagenavi a {display:block; height:20px; padding:3px 8px 0 8px; text-align:center; float:left; background:#171612; margin-left:2px;}

.wp-pagenavi a:visited, .wp-pgenavi a:active {display:block; height:20px; padding:3px 8px 0 8px; text-align:center; float:left; background:#171612; margin-left:2px;} .wp-pagenavi .current, .wp-pagenavi a:hover {background:#000; color:#fff;}

</style> </head>


<body> <div id="nav"> <h1 id="sitename"><a href="#">Kinesin Kings</a></h1> <ul id="menu"> <li class="active"><a href="index.html" title="Home" accesskey="h"><span>H</span>ome</a></li> <li><a href="blog.html" title="Project Idea" accesskey="b"><span>B</span>log</a></li> <li><a href="articles.html" title="Results" accesskey="a"><span>A</span>rticles</a></li> <li><a href="contact.html" title="Team" accesskey="c"><span>C</span>ontact</a></li> <li><a href="articles.html" title="Results" accesskey="a"><span>P</span>roject</a></li>


</ul> </div> <div id="wrap"> <div id="header">

   <div class="slider-wrapper theme-default">
           <div id="slider" class="nivoSlider">
               <img src="http://openwetware.org/images/5/5c/Stylers17.txt" data-thumb="images/toystory.jpg" alt="" data-transition ="slideInLeft" />
               <a href="http://dev7studios.com"><img src="http://openwetware.org/images/5/5c/Stylers17.txt" data-thumb="images/up.jpg" alt="" data-transition ="slideInLeft" title="This is an example of a caption" /></a>
               <img src="http://openwetware.org/wiki/Image:20120613_1_1um_photobleached_1day.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
               <img src="http://openwetware.org/wiki/Image:Toystory.jpg" data-thumb="images/nemo.jpg" alt="" data-transition ="slideInLeft" title="#htmlcaption" />

<img src="http://openwetware.org/wiki/Image:Up.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />

           </div>
           <div id="htmlcaption" class="nivo-html-caption">
               <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
           </div>
   </div>

</div> <!--<div id="topbar"> <ul class="breadcrumb"> <li>You Are Here &raquo;</li> <li>YourSiteName.com &raquo; <a href="index.html">Home</a>&raquo;</li>


</ul> <div id="searchbar"> <form action="#" method="get"> <div> <input name="keyword" type="text" class="keyword" value="test test test" />

</div> <div> <input type="image" src="images/searchbutton.jpg" name="search" /> </div> </form> </div> </div> --> <div id="content"> <div id="left"> <div class="post"> <h2><a href="#">Magic Microtubule Forest</a></h2> <p>Black &amp; Blue CSS Website Template is released under the CCL. It is free to download, modify and/or use as you wish, as long as you retain the link back to RamblingSoul.com in the template/website. Permissions beyond the scope of this license may be available at Hess Lab.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis ipsum in nisl viverra quis tristique enim congue. Cras ipsum nibh, suscipit a vulputate vel, rutrum id justo. Etiam luctus ullamcorper justo nec sagittis. Maecenas at metus enim, vel imperdiet purus. Nulla ac consectetur urna. Nulla risus mi, sollicitudin et suscipit sit amet, feugiat id purus. Morbi ut neque vel tellus aliquam tempor ut a dui. Nulla facilisi. Vivamus malesuada lectus hendrerit arcu elementum commodo. Donec gravida orci libero, quis ultricies augue. Nullam faucibus mattis enim, in facilisis quam dignissim at. </p>

<div class="clear"></div> </div> <!-- <div class="columns"> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg3.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div>

<div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg2.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div>

<div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg1.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div>

<div class="clear"></div> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg2.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg1.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg1.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div> <div class="clear"></div> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg3.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#" title="Learn More">Learn More</a></span> </div> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg2.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div> <div class="col"> <h3>Nulla Nulla Quam</h3> <img src="images/simg1.jpg" width="185" height="100" alt="image" /> <p>Nulla nulla quam, sagittis ac placerat sed, ultrices vel arcu. Phasellus faucibus lacus non eros fringilla quis consequat ante aliquet. Sed tempus est a mi iaculis eget pretium massa commodo. Etiam tempor diam vitae nunc aliquam quis pulvinar est placerat. </p> <span class="txtbutton"><a href="#">Learn More</a></span> </div> --> <div class="clear"></div> </div>


 </div>
 <!-- <div id="sidebar">
 

<h2>Categories</h2> <ul class="categories"> <li><a href="#">Computers</a></li> <li><a href="#">Health &amp; Beauty</a></li>

<li><a href="#">Apple / Macintosh</a></li> <li><a href="#">Microsoft</a></li> <li><a href="#">World News </a></li> <li><a href="#">Movies &amp; Entertainment</a></li> <li><a href="#">Music</a></li> <li><a href="#">Education</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Typography</a></li>


</ul> <div class="block"> <div class="blocktop"></div> <div class="blockmid">

<p class="ads"> <a href="#"><img src="images/ad1.jpg" width="125" height="125" alt="ad" /></a> <a href="#"><img src="images/ad2.jpg" width="125" height="125" alt="ad" /></a> <a href="#"><img src="images/ad4.jpg" width="125" height="125" alt="ad" /></a> <a href="#"><img src="images/ad2.jpg" width="125" height="125" alt="ad" /></a> </p> <div class="clear"></div> </div> --> <div class="blockfooter"></div> </div> <div class="block"> <div class="blocktop"></div> <div class="blockmid"> <!--<h2>Latest Articles</h2> <ul class="posts"> <li><a href="#">Lorem Ipsum Dolar Sit Amet</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Nullam Nulla Quam, Sagittis</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Ultrices Vel Arcu Phasellus</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Phasellus Faucibus Lacus Non Eros</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Sed Tempus Est A Mi Iaculis</a> <span>12/12/2009 | 12 Comments</span> </li>

<li><a href="#">Lorem Ipsum Dolar Sit Amet</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Nullam Nulla Quam, Sagittis</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Ultrices Vel Arcu Phasellus</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Phasellus Faucibus Lacus Non Eros</a> <span>12/12/2009 | 12 Comments</span> </li> <li><a href="#">Sed Tempus Est A Mi Iaculis</a> <span>12/12/2009 | 12 Comments</span> </li> </ul> --> <div class="clear"></div> </div> <div class="blockfooter"></div> </div>

 </div>
 <div class="clear"></div>

</div> <div id="footerlinks">

<ul id="footernav"> <li><a href="#">Home</a> &raquo;</li> <li><a href="#">Blog</a> &raquo;</li> <li><a href="#">Articles</a> &raquo;</li> <li><a href="#">Contact</a> &raquo;</li>

</ul> </div> <div id="bottom">


 <p>Copyright Information Goes Here | 2009 - 2010 | Your Website Name</p>

<!-- Removing this link back to Ramblingsoul.com will be violation of the Creative Commons Attribution 3.0 Unported License, under which this template is released for download --> <a href="http://ramblingsoul.com" title="Download High Quality CSS Layouts">CSS Layout</a> by RamblingSoul.com <!-- Copyright - Ramblingsoul.com -->

</div> </div>

</body> </html>