Team:USTC-Software/header

From 2011.igem.org

(Difference between revisions)
 
Line 19: Line 19:
font-size: 12px;
font-size: 12px;
color: #555a4a;
color: #555a4a;
-
    background: #a0c73f;
+
        background: #a0c73f;
}
}
Line 25: Line 25:
a:active, a:hover { color: #0683ab; text-decoration: underline; }
a:active, a:hover { color: #0683ab; text-decoration: underline; }
-
 
+
img { margin: 0px; padding: 0px; border: none; }
-
img { margin: auto; padding: 0px; border: none; display:block;}
+
-
 
+
#header_wrapper {
#header_wrapper {
Line 59: Line 57:
font-size:24px;
font-size:24px;
}
}
-
 
#site_title h1 a {
#site_title h1 a {
Line 86: Line 83:
/* end of site title */
/* end of site title */
-
/* ---------- Navigation ---------- */
+
/* navigation */
ul  {
ul  {
Line 128: Line 125:
     color:#a5a5a5;
     color:#a5a5a5;
     text-decoration:none;
     text-decoration:none;
-
background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg);
+
    background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg);
-
background-position: top left;
+
    background-position: top left;;
}
}
#nav a:hover {
#nav a:hover {
     color:#fff;
     color:#fff;
-
background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg);
+
    background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg);
-
background-position: bottom left;
+
    background-position: bottom left;
}
}
Line 141: Line 138:
     float:left;
     float:left;
     position:relative;
     position:relative;
-
 
}
}
Line 149: Line 145:
     top:3.8em;
     top:3.8em;
     display:none;
     display:none;
-
z-index: 1;
+
    z-index: 1;
}
}
Line 155: Line 151:
     width:9em;
     width:9em;
     float:left;
     float:left;
-
background-color: #2e2e2e;
+
    background-color: #2e2e2e;
-
background-image: none !important;
+
    background-image: none !important;
}
}
Line 165: Line 161:
#nav ul ul{
#nav ul ul{
top:auto;
top:auto;
-
}
+
}
#nav li ul ul {
#nav li ul ul {
     left:12em;
     left:12em;
     margin:0px 0 0 10px;
     margin:0px 0 0 10px;
-
    }
+
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
     display:none;
     display:none;
-
    }
+
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
     display:block;
     display:block;
-
    }
+
}
 +
 
 +
/*end of navigation*/
 +
 
 +
/* search */
 +
#header #search_box {
 +
        position:absolute;
 +
width: 333px;
 +
height: 53px;
 +
bottom: 54px;
 +
right:  16px;
 +
background: url(https://static.igem.org/mediawiki/2011/1/15/USTC_Software_search.png)
 +
}
 +
 
 +
#search_box form {
 +
width: 280px;
 +
height: 27px;
 +
margin: 0;
 +
padding: 25px 0 0 0;
 +
}
 +
 
 +
#searchfield {
 +
height: 17px;
 +
width: 270px;
 +
padding: 4px 5px 6px 5px;
 +
color: #fff;
 +
font-size: 12px;
 +
font-variant: normal;
 +
line-height: normal;
 +
background: none;
 +
border: none;
 +
}
 +
 
 +
/* end of search */
 +
 
 +
/*clock_box*/
 +
#header #clock_box {
 +
position: absolute;
 +
width: 320px;
 +
height: 21px;
 +
bottom: 85px;
 +
right: 26px;
 +
}
 +
 
 +
#clock_box form {
 +
width: 280px;
 +
height: 27px;
 +
margin: 0;
 +
padding: 25px 0 0 0;
 +
}
-
/*end of nav*/
+
/* end of clock_box*/
/* content_wrapper */
/* content_wrapper */
#content {
#content {
-
        background-color:#a0c73f;
+
background-color:#a0c73f;
-
        width:auto;
+
width:auto;
}
}
Line 198: Line 243:
#content_wrapper h1 {
#content_wrapper h1 {
color: #3a5909;
color: #3a5909;
-
font-size: 24px;
+
font-size:24px;
padding: 0 0 60px 20px;
padding: 0 0 60px 20px;
background: url(https://static.igem.org/mediawiki/2011/4/4d/USTC_Software_header_bg.png) no-repeat bottom left;
background: url(https://static.igem.org/mediawiki/2011/4/4d/USTC_Software_header_bg.png) no-repeat bottom left;
-
}
 
-
 
-
#content_wrapper h2 {
 
-
color: #000;
 
-
font-size:18px;
 
}
}
#content_wrapper p {
#content_wrapper p {
font-family: Verdana, Arial;
font-family: Verdana, Arial;
-
font-size: 14px;
+
font-size:14px;
-
}
+
-
 
+
-
#intro p {
+
-
font-family: Verdana, Arial;
+
-
font-size: 12px;
+
}
}
Line 223: Line 258:
margin: 0 auto;
margin: 0 auto;
background: url(https://static.igem.org/mediawiki/2011/a/a5/USTC_Software_content_bottom.jpg) no-repeat;
background: url(https://static.igem.org/mediawiki/2011/a/a5/USTC_Software_content_bottom.jpg) no-repeat;
-
    background-color: #a0c73f;
+
        background-color: #a0c73f;
}
}
Line 236: Line 271:
text-align: center;
text-align: center;
color: #333333;
color: #333333;
-
    background-color: #a0c73f;
+
        background-color: #a0c73f;
}
}
Line 292: Line 327:
}
}
/* end of footer*/
/* end of footer*/
-
.ul_p{
+
 
-
font-family: Verdana, Arial;
+
/* content */
 +
 
 +
.content_section {
 +
clear: both;
 +
width: 100%;
 +
}
 +
 
 +
.intro_box {
 +
float: left;
 +
width: 282px;
 +
padding-bottom: 10px;
 +
border-bottom: 1px dotted #666;
 +
margin-bottom: 20px;
 +
}
 +
 
 +
.fl_image {
 +
float: left;
 +
margin: 3px 15px 5px 0;
 +
}
 +
 
 +
#content .product_box p {
 +
padding: 0;
 +
margin: 0 0 5px 0;
 +
}
 +
 
 +
#content .product_box a {
 +
color: #000000;
 +
font-weight: bold;
 +
}
 +
 
 +
#content .em_text {
 +
color: #537c11;
 +
}
 +
 
 +
.inro {
 +
color: #C30;
font-size: 14px;
font-size: 14px;
 +
font-weight: bold;
}
}
 +
 +
.intro_box h3 {
 +
background: #63a103;
 +
padding: 3px 10px;
 +
margin: 0 0 10px 0;
 +
color: #ffffff;
 +
font-size: 12px;
 +
}
 +
 +
.intro_box img {
 +
width: 272px;
 +
height: 168px;
 +
border: 5px solid #e6e0ce;
 +
        margin-bottom: 10px;
 +
}
 +
 +
.button_01 a {
 +
display: block;
 +
width: 102px;
 +
height: 23px;
 +
padding: 7px 0 0 0;
 +
background: url(./images/USTC_Software_button.png)  no-repeat;
 +
color: #333;
 +
font-size: 12px;
 +
font-weight: bold;
 +
text-align: center;
 +
text-decoration: none;
 +
}
 +
 +
.button_01 a:hover {
 +
color: #fff;
 +
        background:url(./images/USTC_Software_button_hover.png) no-repeat;
 +
}
 +
 +
.button_01 a {
 +
display: block;
 +
width: 102px;
 +
height: 23px;
 +
padding: 7px 0 0 0;
 +
background: url(https://static.igem.org/mediawiki/2011/0/0e/USTC_Software_button.png)  no-repeat;
 +
color: #333;
 +
font-size: 12px;
 +
font-weight: bold;
 +
text-align: center;
 +
text-decoration: none;
 +
}
 +
 +
.button_01 a:hover {
 +
color: #fff;
 +
        background:url(https://static.igem.org/mediawiki/2011/c/c1/USTC_Software_button_hover.png) no-repeat;
 +
}
 +
 +
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  } /**/  /*This is important!*/
 +
.cleaner_h30 { clear: both; width:100%; height: 30px; }/**/
 +
.cleaner_h40 { clear: both; width:100%; height: 40px; }/**/
 +
.margin_r10 { margin-right: 24px; }/**/
 +
 +
.float_l { float: left; }/**/
 +
.float_r { float:  right; }/**/
 +
 +
/*--Window & Text Table--*/
 +
table#rotator_news {
 +
pading-bottom: 10px;
 +
}
 +
 +
/*--Main Image Rotator Container--*/
 +
.main_view {
 +
float: left;
 +
position: relative;
 +
/*border: 0px solid #fff;*/
 +
width: 650px;
 +
}
 +
/*--Image Rotator Window/Masking Styles--*/
 +
.window {
 +
height:400px;
 +
width: 650px;
 +
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 +
position: relative;
 +
}
 +
.image_reel {
 +
position: absolute;
 +
top: 0; left: 0;
 +
}
 +
.image_reel img {float: left;}
 +
 +
/*--Paging Styles--*/
 +
.paging {
 +
position: absolute;
 +
bottom: 0px; right: -15px;
 +
width: 400px; height:47px; /*--Increase this width when adding more numbers in paging--*/
 +
z-index: 100; /*--Assures the paging stays on the top layer--*/
 +
text-align: center;
 +
line-height: 110px;
 +
display: none; /*--Hidden by default, will be later shown with jQuery--*/
 +
}
 +
.paging a {
 +
padding: 5px;
 +
text-decoration: none;
 +
color: #000;
 +
}
 +
.paging a.active {
 +
font-weight: bold;
 +
/*background: #cdcdcd;*/
 +
border: 1px solid #cdcdcd;
 +
-moz-border-radius: 3px;
 +
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
.paging a:hover {font-weight: bold;}
 +
/*end of Window & Text Table*/
</style>
</style>
 +
<!-- Javascript-->
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
//Set Default State of each portfolio piece
 +
$(".paging").show();
 +
$(".paging a:first").addClass("active");
 +
 +
//Get size of images, how many there are, then determin the size of the image reel.
 +
var imageWidth = $(".window").width();
 +
var imageSum = $(".image_reel img").size();
 +
var imageReelWidth = imageWidth * imageSum;
 +
 +
//Adjust the image reel to its new size
 +
$(".image_reel").css({'width' : imageReelWidth});
 +
 +
//Paging + Slider Function
 +
rotate = function(){
 +
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
 +
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
 +
 +
$(".paging a").removeClass('active'); //Remove all active class
 +
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 +
 +
//Slider Animation
 +
$(".image_reel").animate({
 +
left: -image_reelPosition
 +
}, 500 );
 +
 +
};
 +
 +
//Rotation + Timing Event
 +
rotateSwitch = function(){
 +
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
 +
$active = $('.paging a.active').next();
 +
if ( $active.length === 0) { //If paging reaches the end...
 +
$active = $('.paging a:first'); //go back to first
 +
}
 +
rotate(); //Trigger the paging and slider function
 +
}, 4000); //Timer speed in milliseconds
 +
};
 +
 +
rotateSwitch(); //Run function on launch
 +
 +
//On Hover
 +
$(".image_reel a").hover(function() {
 +
clearInterval(play); //Stop the rotation
 +
}, function() {
 +
rotateSwitch(); //Resume rotation
 +
});
 +
 +
//On Click
 +
$(".paging a").click(function() {
 +
$active = $(this); //Activate the clicked paging
 +
//Reset Timer
 +
clearInterval(play); //Stop the rotation
 +
rotate(); //Trigger rotation immediately
 +
rotateSwitch(); // Resume rotation
 +
return false; //Prevent browser jump to link anchor
 +
});
 +
 +
});
 +
</script>
 +
 +
<!--clock.js-->
 +
<script language="javascript" type="text/javascript">
 +
function clearText(field)
 +
{
 +
    if (field.defaultValue == field.value) field.value = '';
 +
    else if (field.value == '') field.value = field.defaultValue;
 +
}
 +
 +
 +
function  Clock()
 +
 +
{  var today = new Date();
 +
    var day;
 +
    if(today.getDay()==0)  day="Sunday"
 +
    if(today.getDay()==1)  day="Monday"
 +
    if(today.getDay()==2)  day="Tuesday"
 +
    if(today.getDay()==3)  day="Wednesday"
 +
    if(today.getDay()==4)  day="Thursday"
 +
    if(today.getDay()==5)  day="Friday"
 +
    if(today.getDay()==6)  day="Saturday"
 +
var sec = today.getSeconds()+1;
 +
var date =day +", "
 +
+ today.getFullYear() + "-" + (today.getMonth()+1) + "-" + today.getDate()+
 +
" " + today.getHours()+":"+today.getMinutes()+":"+sec;
 +
document.getElementById("clock").innerHTML  = date; 
 +
}
 +
</script>
 +
<!-- Javascript-->
</head>
</head>
Line 310: Line 584:
             <h1><img src="https://static.igem.org/mediawiki/2011/b/b8/USTC_Software_iGEM_logo.jpg" alt="iGEM" width="173" height="150" /> </br> </br> USTC-Software </h1>
             <h1><img src="https://static.igem.org/mediawiki/2011/b/b8/USTC_Software_iGEM_logo.jpg" alt="iGEM" width="173" height="150" /> </br> </br> USTC-Software </h1>
         </div>
         </div>
-
       
 
<!-- navigation -->
<!-- navigation -->
<ul id="nav">
<ul id="nav">
<li><a href="https://2011.igem.org/Team:USTC-Software">Home</a></li>
<li><a href="https://2011.igem.org/Team:USTC-Software">Home</a></li>
 +
   
     <li><a href="https://2011.igem.org/Team:USTC-Software/project">Project</a>
     <li><a href="https://2011.igem.org/Team:USTC-Software/project">Project</a>
<ul>
<ul>
Line 356: Line 630:
</li>   
</li>   
-
<li><a href="https://2011.igem.org/Team:USTC-Software/download">Download</a></li>
+
<li><a class="last" href="https://2011.igem.org/Team:USTC-Software/download">Download</a></li>
              
              
</ul>
</ul>
<!-- // end of navigation -->
<!-- // end of navigation -->
              
              
-
      <div class="cleaner"></div>
+
         
 +
  <div id="search_box">
 +
 
 +
  <form action="http://www.google.com.hk/cse" id="cse-search-box" method="get" target="_blank" >
 +
    <input type="text" value="SEARCH..." name="q" size="10" id="searchfield" title="searchfield" onFocus="clearText(this)" onBlur="clearText(this)" />
 +
    <input type="hidden" name="cx" value="012577055908532603606:zpok5ilqnda" />
 +
    <input type="hidden" name="cof" value="FORID:10" />
 +
    <input type="hidden" name="ie" value="UTF-8" />
 +
    <input type="submit" name="sa" value="I'm Feeling Lucky" />
 +
      </form>
 +
 
 +
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 +
 
 +
<script type="text/javascript">
 +
  google.load('search', '1', {language : 'en', style : google.loader.themes.GREENSKY});
 +
  google.setOnLoadCallback(function() {
 +
    var customSearchControl = new google.search.CustomSearchControl('012577055908532603606:zpok5ilqnda');
 +
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
 +
    customSearchControl.draw('cse');
 +
  }, true);
 +
</script>
 +
 
 +
  </div> 
 +
 +
 
 +
 
 +
      <div id="clock_box">     
 +
        <script type=text/javascript>
 +
              document.write('<font  id="clock" color="#000000"> </font>');setInterval('Clock()',1000);</script>
 +
      </div>
 +
 
 +
 
 +
    <div class="cleaner"></div>
     </div> <!-- end of header -->
     </div> <!-- end of header -->

Latest revision as of 01:39, 27 October 2011


Team:USTC-Software - 2011.igem.org

Retrieved from "http://2011.igem.org/Team:USTC-Software/header"