Template:Fatih-header

From 2012.igem.org

(Difference between revisions)
 
(64 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
 +
<script type="text/javascript" src="http://xoomla.googlecode.com/files/jquery.easing.1.3.js"></script>
 +
<script type="text/javascript" src="http://xoomla.googlecode.com/files/jquery.animate-colors-min.js"></script>
 +
<script type="text/javascript" src="http://xoomla.googlecode.com/files/jquery.skitter.min.js"></script>
 +
 +
<script>
 +
$(function(){$('.sf-menu').superfish()});
 +
$(function(){$('.box_skitter_large').skitter();});
 +
</script>
 +
<style>
<style>
Line 7: Line 18:
/* superfish.css */
/* superfish.css */
-
.sf-menu{text-transform:capitalize;font-size:0;line-height:0;float:right;padding:10px 23px 0;}
+
.sf-menu{text-transform:capitalize;font-size:0;line-height:0;float:left;padding:10px 23px 0;}
.sf-menu ul{position:absolute;top:-999em;min-width:124px;background:#232321;padding:13px 0px 10px 22px;left:0;display:none;border-radius:7px;}
.sf-menu ul{position:absolute;top:-999em;min-width:124px;background:#232321;padding:13px 0px 10px 22px;left:0;display:none;border-radius:7px;}
.sf-menu li{position:relative;}
.sf-menu li{position:relative;}
Line 15: Line 26:
.sf-menu>li>a{color:#fff;padding:12px 22px 20px;display:block;}
.sf-menu>li>a{color:#fff;padding:12px 22px 20px;display:block;}
.sf-menu>li.current>a,.sf-menu>li>a:hover,.sf-menu>li.sfHover>a{color:#636053;}
.sf-menu>li.current>a,.sf-menu>li>a:hover,.sf-menu>li.sfHover>a{color:#636053;}
-
.sf-menu li:hover ul,.sf-menu li.sfHover ul{top:55px;z-index:99;}
+
.sf-menu li:hover ul,.sf-menu li.sfHover ul{top:55px;z-index:120;}
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
.sf-menu>li.current,.sf-menu>li:hover,.sf-menu>li.sfHover{background:#f0f0f0;}
.sf-menu>li.current,.sf-menu>li:hover,.sf-menu>li.sfHover{background:#f0f0f0;}
Line 46: Line 57:
fieldset{border:none;padding:0;margin:0;}
fieldset{border:none;padding:0;margin:0;}
-
/* Contact form */
+
 
-
#contact-form{position:relative;vertical-align:top;}
+
-
#contact-form .success{position:absolute;bottom:100%;left:0;display:none;font-weight:bold;}
+
-
#contact-form label{padding:0 0 11px;display:block;position:relative;margin:0;}
+
-
#contact-form .message{padding-bottom:18px}
+
-
#contact-form textarea{height:206px;overflow:auto;resize:none;width:483px;}
+
-
#contact-form .error,#contact-form .empty{color:#f00;display:none;position:absolute;top:4px;left:395px;font-size:12px;line-height:1.2em;width:115px;}
+
-
#contact-form .message .error,#contact-form .message .empty{left:5px;top:230px;width:auto}
+
-
#contact-form .btns{text-align:right;}
+
-
/* Newsletter-form */
 
-
#newsletter-form input[type="text"]{background:#a8a8a3;border:none;border-top:1px solid #7a7a73;border-left:1px solid #7a7a73;border-radius:5px;padding:6px 13px;width:180px;margin-bottom:9px;color:#000;box-shadow:none;}
 
-
 
-
#newsletter-alt-form{position:relative;}
 
-
#newsletter-alt-form fieldset{border:none}
 
-
#newsletter-alt-form label,#newsletter-form label{display:inline-block;vertical-align:middle;position:relative;}
 
-
#newsletter-alt-form .success,#newsletter-form .success{position:absolute;bottom:100%;left:0;display:none;font-weight:bold;}
 
-
#newsletter-alt-form input[type=text]{width:215px;margin-right:12px;}
 
-
#newsletter-alt-form .error,#newsletter-alt-form .empty,#newsletter-form .error,#newsletter-form .empty{color:#f00;display:none;position:absolute;top:100%;left:0;font-size:12px;line-height:1.2em;}
 
-
#newsletter-alt-form a{vertical-align:middle;}
 
-
 
-
/* kwiks.css */
 
-
.kwicks-wrapper{overflow:hidden;background:#000;}
 
-
.kwicks{list-style:none;position:relative;margin:0;padding:0 !important;overflow:hidden;height:600px;}
 
-
.kwicks li{width:20%;height:600px;display:block;overflow:hidden;padding:0 !important;cursor:pointer;opacity:.5;background:none !important}
 
-
.kwicks li.active{opacity:1;}
 
-
.kwicks.horizontal li{margin-right:0;float:left;}
 
-
 
-
/* skin.css */
 
-
.jcarousel-skin-tango{overflow:hidden;height:85px;background:url(../images/carousel-tail.gif) 0 0 repeat-x;}
 
-
.jcarousel-skin-tango .jcarousel-container-horizontal{width:760px;padding:18px 70px 24px;margin:0 auto}
 
-
.jcarousel-list{overflow:hidden;}
 
-
.jcarousel-skin-tango li{float:left;margin-right:56px;}
 
-
.jcarousel-next-horizontal,.jcarousel-prev-horizontal{position:absolute;top:25px;width:35px;height:35px;cursor:pointer;background-repeat:no-repeat;z-index:100;background-position:11px 9px;border-radius:18px;background-color:#a8a8a3;}
 
-
.jcarousel-next-horizontal{right:0;background-image:url(../images/next.png);background-position:13px 9px;}
 
-
.jcarousel-prev-horizontal{left:0;background-image:url(../images/prev.png);}
 
/* style.css */
/* style.css */
Line 145: Line 122:
.flash-1{height:416px;width:950px;overflow:hidden;background:#fff;}
.flash-1{height:416px;width:950px;overflow:hidden;background:#fff;}
.flash{height:499px;width:1000px;margin-left:-25px;overflow:hidden;margin-top:-7px}
.flash{height:499px;width:1000px;margin-left:-25px;overflow:hidden;margin-top:-7px}
-
.icons{overflow:hidden;float:right;padding:23px 23px 10px 0;}
+
.icons{overflow:hidden;float:right;padding:15px 23px 0px 0;}
.icons li{float:left;margin:0 5px 0 0;}
.icons li{float:left;margin:0 5px 0 0;}
/********************** Content ************************/
/********************** Content ************************/
Line 287: Line 264:
dl dd span{display:inline-block;width:104px;}
dl dd span{display:inline-block;width:104px;}
dl dd a{color:#5d5d60;}
dl dd a{color:#5d5d60;}
-
 
-
/* Table styling */
 
-
table{border:2px solid #c57466;}
 
-
table thead th{color:#fff;border-bottom:3px solid #c57466;padding:17px 0;font-size:17px;line-height:1.2em;font-weight:normal;background:#ac2a0a;border-right:1px solid #fa7858;}
 
-
table tbody tr td{width:125px;text-align:center;padding:7px 0;background:#e9e9e9;border:1px solid #bfbfbf;}
 
-
table tbody tr:hover td{background:#fff;}
 
/* Information box */
/* Information box */
Line 413: Line 384:
/* reset igem wiki css */
/* reset igem wiki css */
-
#top-section { display: none; }
 
#content {width:100%; padding:0px; background: none; border: none; }
#content {width:100%; padding:0px; background: none; border: none; }
#footer-box { display: none; }
#footer-box { display: none; }
Line 420: Line 390:
#contentSub {margin: 0px; }
#contentSub {margin: 0px; }
div#bodyContent p {margin: 0px; }
div#bodyContent p {margin: 0px; }
 +
 +
#top-section {
 +
    background-color: black;
 +
    opacity: .3;
 +
    border: medium none;
 +
    height: 15px;
 +
    position: fixed;
 +
    width: 100%;
 +
    z-index: 20;
 +
    overflow: hidden;
 +
    font-size: small;
 +
}
 +
#top-section .left-menu {
 +
    padding-top: 3px;
 +
    padding-left: 50px;
 +
}
 +
#top-section .right-menu {
 +
    padding-right: 50px;
 +
    padding-top: 3px;
 +
}
 +
#top-section:hover {
 +
    opacity: .8;
 +
}
 +
 +
#p-logo {
 +
    display: none;
 +
}
 +
#search-controls {
 +
    display: none;
 +
}
 +
 +
/* skitter.css */
 +
/* =Skitter styles
 +
----------------------------------------------- */
 +
.box_skitter {position:relative;width:900px;height:400px;background:#000;}
 +
.box_skitter img { max-width:none; } /* Tip for stildv */
 +
.box_skitter ul {display:none;}
 +
.box_skitter .container_skitter {overflow:hidden;position:relative;}
 +
.box_skitter .image {overflow:hidden;}
 +
.box_skitter .image img {display:none;}
 +
 +
/* =Box clone
 +
-------------------------------------------------------------- */
 +
.box_skitter .box_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
 +
.box_skitter .box_clone img {position:absolute;top:0;left:0;z-index:20;}
 +
 +
/* =Navigation
 +
-------------------------------------------------------------- */
 +
.box_skitter .prev_button {position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/5/5a/Skitter-Prev.png") no-repeat left top;}
 +
.box_skitter .next_button {position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/b/b7/Skitter-Next.png") no-repeat left top;}
 +
 +
/* =Numbers
 +
-------------------------------------------------------------- */
 +
.box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}
 +
.box_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
 +
.box_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
 +
 +
/* =Thumbs
 +
Change width and height to customization dimension thumb
 +
-------------------------------------------------------------- */
 +
.box_skitter .container_thumbs { position:relative;overflow:hidden;height:50px; }
 +
.box_skitter .info_slide_thumb { height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:auto;top:0;left:0;padding:0 !important;opacity:1.0; }
 +
.box_skitter .info_slide_thumb .image_number { overflow:hidden;width:100px;height:50px;position:relative;margin:0 !important; padding:0 !important; -moz-border-radius:0 !important;-webkit-border-radius:0 !important;border-radius:0 !important;}
 +
.box_skitter .info_slide_thumb .image_number img { position:absolute;top:-30px;left:-30px;height:100px;}
 +
.box_skitter .box_scroll_thumbs { padding:0; }
 +
.box_skitter .box_scroll_thumbs .scroll_thumbs { position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101; cursor:pointer;border:0px solid #333; }
 +
 +
/* =Dots
 +
-------------------------------------------------------------- */
 +
.box_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
 +
.box_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
 +
.box_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
 +
 +
/* =Loading
 +
-------------------------------------------------------------- */
 +
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url("") no-repeat left top;width:32px;height:32px;}
 +
 +
/* =Label
 +
-------------------------------------------------------------- */
 +
.box_skitter .label_skitter { z-index:150;position:absolute;bottom:0px;left:0px;display:none; }
 +
.box_skitter .label_skitter { z-index:150;position:absolute;bottom:0px;left:0px;color:#fff;display:none;opacity:0.8;background:#000; }
 +
.box_skitter .label_skitter p { padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px; }
 +
.box_skitter .info_slide * { font-family:Consolas,arial,tahoma !important; }
 +
.box_skitter .progressbar { background:#000; position:absolute; top:5px;left:15px;height:5px; width: 200px; z-index:99; border-radius:20px; }
 +
 +
/* =Preview slide
 +
-------------------------------------------------------------- */
 +
.box_skitter .preview_slide { display:none; position:absolute; z-index:152; bottom:30px; left:-40px; width:100px; height:100px; background:#fff; border:1px solid #222; -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; overflow:hidden; }
 +
.box_skitter .preview_slide ul { height:100px; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0; }
 +
.box_skitter .preview_slide ul li { width:100px; height:100px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block; }
 +
.box_skitter .preview_slide ul li img { position:absolute; top:0; left:0; height:150px; width:auto; }
 +
 +
/* =Focus
 +
-------------------------------------------------------------- */
 +
#overlay_skitter { position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000; }
 +
 +
.box_skitter .focus_button {position:absolute;top:50%;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/a/ac/Focus-button.png") no-repeat left top;opacity:0;}
 +
.box_skitter .play_pause_button {position:absolute;top:50%;z-index:151;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/d/d9/Pause-button.png") no-repeat left top;opacity:0;}
 +
.box_skitter .play_pause_button.play_button {background:url("https://static.igem.org/mediawiki/2012/4/49/Skitter-Play-button.png") no-repeat left top;}
 +
 +
/* =Example for dimenions
 +
-------------------------------------------------------------- */
 +
.box_skitter_large {width:900px;height:400px;}
 +
.box_skitter_small {width:200px;height:100px;}
</style>
</style>
 +
 +
 +
<script>
 +
$(document).ready(function() {
 +
    $("#menubar a").css('background','none');
 +
    $("#top-section a").css("color", "white");
 +
    $("#menubar ul").css('background', 'black');
 +
    $(".left-menu").css('background', 'none');
 +
});
 +
</script>
 +
</head>
</head>
-
</html>
+
 
 +
<div class="bg">
 +
<div class="bg2">
 +
<!--==============================header=================================-->
 +
<header>
 +
    <div class="main">
 +
<map id="imgmap20129273659" name="imgmap20129273659"><area shape="rect" alt="" title="" coords="531,4,753,170" href="https://2012.igem.org/Main_Page" target="" /><area shape="rect" alt="" title="" coords="270,4,509,193" href="https://2012.igem.org/Team:Fatih-Medical/Project" target="" /><area shape="rect" alt="" title="" coords="6,1,237,170" href="https://2012.igem.org/Team:Fatih-Medical" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
 +
 
 +
        <img usemap="#imgmap20129273659" style="margin-left: 96px;" src="https://static.igem.org/mediawiki/2012/archive/f/f7/20120926021353!Sherlocoli_Overview_%281%29.png">
 +
 
 +
    <nav style="margin-top: -65px;">
 +
            <ul class="sf-menu">
 +
                <li><a href="https://2012.igem.org/Team:Fatih-Medical">Home</a></li>
 +
                <li><a href="https://2012.igem.org/Team:Fatih-Medical/Project">Project</a>
 +
                    <ul>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Project">Overall Project</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Sherlocoli">Sherlocoli</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/DJcoli">DJcoli</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Dracoli">Dracoli</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Project/Parts">Parts</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Future_Work">Future Work</a></li>
 +
                    </ul>
 +
                </li> 
 +
                <li><a href="https://2012.igem.org/Team:Fatih-Medical/Data_Page">Data Page</a></li>
 +
                <li><a href="#">Lab Garage</a>
 +
                    <ul>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Diary">Diary</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Gallery">Gallery</a></li>
 +
                          <li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Safety">Safety</a></li>
 +
 
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                  <a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice">Human Practice</a>
 +
                  <ul>
 +
                        <li><a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice">Overall Outreach</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice/Secret_Book">Secret Book of FM</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Fatih-Medical/Survey">Survey</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice/Collaborations">Collaborations</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li><a href="https://2012.igem.org/Team:Fatih-Medical/Team">Team</a>
 +
                </li>           
 +
            </ul>
 +
 
 +
        <ul class="icons">
 +
            <li><a class="normatip" title="Twitter" href="http://twitter.com/FatihMedical"><img src="https://static.igem.org/mediawiki/2012/d/df/Fatih-Icon1.png" alt=""></a></li>
 +
            <li><a class="normatip" title="Fecebook" href="http://www.facebook.com/FatihMedical"><img src="https://static.igem.org/mediawiki/2012/d/d8/Fatih-Icon3.png" alt=""></a></li>
 +
        </ul>
 +
 
 +
            <div class="bottom"></div>
 +
    </nav>
 +
    </div>
 +
</header>
 +
<div class="content_1">
 +
<div class="shadow"></div>
 +
    <div class="content_2">
 +
 
 +
 
 +
<!--==============================content================================-->
 +
<section id="content_fatih">
 +
    <div class="container_24">

Latest revision as of 02:01, 27 September 2012