Template:CM css

From 2010.igem.org

(Difference between revisions)
(New page: <html> <head> <style type="text/css"> - →----------------------------------------------------------------------------------------------------------------: /* ---------->>> global settings...)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
 +
<script type="text/javascript" src="http://jquery.com/demo/thickbox/thickbox-code/thickbox.js"></script>
 +
<link rel="stylesheet" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" type="text/css" media="screen" />
 +
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
<script> google.load("jquery", "1.4.2"); </script>
 +
<script language="javascript" src="jquery.dimensions.js"></script>
 +
<script type="text/javascript">
 +
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
 +
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
 +
</script>
 +
<script type="text/javascript">
 +
$('#rightMenu a')
 +
.css( {backgroundPosition: "0 0"} )
 +
.mouseover(function(){
 +
$(this).stop().animate(
 +
{backgroundPosition:"(0 -250px)"},
 +
{duration:500})
 +
})
 +
.mouseout(function(){
 +
$(this).stop().animate(
 +
{backgroundPosition:"(0 0)"},
 +
{duration:500})
 +
})
 +
</script>
 +
 +
<style type="text/css">
<style type="text/css">
 +
.toggler { width: 500px; height: 200px; position: relative;}
 +
#button { padding: .5em 1em; text-decoration: none; }
 +
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
 +
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 +
</style>
 +
 +
<script type="text/javascript">
 +
$(function() {
 +
$("#button").toggle(
 +
function() {
 +
$("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
 +
},
 +
function() {
 +
$("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000);
 +
}
 +
);
 +
});
 +
</script>
 +
<style>
 +
 +
#header {
 +
position: relative;
 +
left: 5px;
 +
text-align: left;
 +
margin: 0px;
 +
width: 955px;
 +
}
 +
 +
#header a {
 +
color: white;
 +
}
 +
 +
#content {
 +
font-family: Osaka, verdana, Sans-Serif;
 +
}
 +
 +
.mainContent {
 +
width: 943px;
 +
position: absolute;
 +
padding:5px;
 +
top: 160px;
 +
font-size: 14px;
 +
margin:5px;
 +
}
 +
 +
#baby {
 +
padding: 5px;
 +
border-bottom: 1px solid white;
 +
font-family: "Lucida Console", Monaco, monospace;
 +
font-size: medium;
 +
}
 +
 +
#bodybaby {
 +
padding: 5px;
 +
border-bottom: 3px solid black;
 +
font-family: "Lucida Console", Monaco, monospace;
 +
font-size: medium;
 +
}
 +
 +
.sidep {
 +
display: inline;
 +
background-color: #boc4de;
 +
width: 170px;
 +
float: right;
 +
font-size: x-small;
 +
border: 1px solid #b0c4de;
 +
}
 +
 +
#unique {
 +
margin: 5px 21px !important;
 +
border: none !important;
 +
background-color: white;
 +
}
 +
 +
#freedom {
 +
width: 105px;
 +
position: relative;
 +
left: -20px;
 +
top: 2px;
 +
display: block;
 +
list-style: none;
 +
text-align: left;
 +
color: white !important;
 +
background-color: #c9c9db;
 +
font-family: "Lucida Console", Monaco, monospace;
 +
font-size: 16px;
 +
}
 +
#freedom li a {
 +
text-align: left;
 +
padding-left: 7px;
 +
}
 +
 +
#freedom li a:hover {
 +
  background-color: #b2b2cc;
 +
}
 +
#freedom li a.selected {
 +
position: relative;
 +
left: 10px;
 +
color: black;
 +
}
 +
 +
.tabContainer {
 +
position: relative;
 +
top: 0px;
 +
left: 4px;
 +
height: 23px;
 +
width: 99%;
 +
}
 +
.tabContainer p {
 +
  text-align:left;
 +
top: 1px;
 +
}
 +
 +
input.searchButton {
 +
background:none repeat scroll 0 0 transparent;
 +
border:medium none;
 +
color:#000066;
 +
font-size:100%;
 +
font-weight:bold;
 +
margin:1px 10px 0;
 +
}
 +
 +
#search-controls {
 +
display: block;
 +
background: none;
 +
position: absolute;
 +
top: -100px;
 +
left: -50px;}
 +
 +
.left-menu {
 +
width: 300px;
 +
margin-top: -75px;
 +
border: none; }
 +
 +
.left-menu ul {
 +
border: none; }
 +
 +
#searchform {
 +
background: none;
 +
display: block;
 +
float: right;}
 +
 +
#menubar.right-menu {
 +
width: 300px;
 +
display: block;
 +
float: left;
 +
margin-top: -75px;
 +
border: none; }
 +
 +
.right-menu ul {
 +
border: none; }
 +
 +
#top-section {
 +
height: 0px;
 +
margin-top: -5px;
 +
margin-bottom: 0 !important;
 +
margin-left: auto;
 +
padding:0;
 +
border: none;}
 +
 +
#p-logo {
 +
height: 0px;
 +
overflow: hidden;
 +
display: none;
 +
border:  }
 +
 +
#footer {
 +
border: none;
 +
width: 900px;
 +
margin: 0;
 +
padding: 0; }
 +
 +
.firstHeading {
 +
display: none; }
 +
 +
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
 +
.code code { display: block; padding: 3px; margin-bottom: 0; }
 +
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
 +
.indent1 { padding-left: 1em; }
 +
.indent2 { padding-left: 2em; }
 +
  </style>
 +
 +
 +
/* ----------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
Line 165: Line 378:
_margin-bottom:1px;
_margin-bottom:1px;
}
}
 +
 +
 +
 +
/* MIT ChemE Menu */
 +
 +
#navwrapper {
 +
position: absolute;
 +
width: 955px;
 +
}
 +
 +
#topnav {
 +
height: 85px;
 +
overflow: hidden;
 +
}
 +
 +
#topnav li {
 +
list-style: none;
 +
float: left;
 +
}
 +
 +
#topnav li a {
 +
display: block;
 +
width: 182px;
 +
height: 85px;
 +
margin-right: 2px;
 +
background-color: #2e2e2e;
 +
font-size: 0.83em;
 +
line-height: 1.25em;
 +
color: #fff;
 +
}
 +
 +
#topnav li a.last {
 +
margin-right: 0px;
 +
}
 +
 +
#topnav li.over ul,
 +
#topnav li:hover ul,
 +
body.about #topnav li.about ul,
 +
body.people #topnav li.people ul,
 +
body.academics #topnav li.academics ul,
 +
body.research #topnav li.research ul,
 +
body.news #topnav li.news ul {
 +
display: block;
 +
}
 +
 +
body.about #topnav li.about ul,
 +
body.people #topnav li.people ul,
 +
body.academics #topnav li.academics ul,
 +
body.research #topnav li.research ul,
 +
body.news #topnav li.news ul {
 +
z-index: 1;
 +
}
 +
 +
#topnav li.over ul,
 +
#topnav li:hover ul {
 +
z-index: 100;
 +
}
 +
 +
#topnav li ul {
 +
display: none;
 +
clear: both;
 +
position: absolute;
 +
top: 85px;
 +
left: 0px;
 +
width: 950px;
 +
overflow: hidden;
 +
}
 +
 +
#topnav li li {
 +
float: none;
 +
display: block;
 +
}
 +
 +
#topnav li a:hover,
 +
#topnav li a:active {
 +
text-decoration: none;
 +
}
 +
 +
#topnav li li {
 +
display: block;
 +
float: left;
 +
padding-top: 11px;
 +
padding-bottom: 9px;
 +
}
 +
 +
#topnav li li a {
 +
margin: 0;
 +
padding: 0 8px;
 +
background-color: transparent;
 +
height: auto;
 +
width: auto;
 +
font-weight: normal;
 +
line-height: 0.83em;
 +
background: url('images/bg-topnav-sub.gif') no-repeat top right;
 +
}
 +
 +
#topnav li li.last a {
 +
background-image: none;
 +
padding-right: 0px;
 +
}
 +
 +
#topnav li li a:hover,
 +
#topnav li li a:active,
 +
#topnav li li.sel a {
 +
font-weight: bold;
 +
}
 +
 +
 +
 +
/* specific styles */
 +
 +
#topnav li.about a:hover,
 +
#topnav li.about a:active,
 +
#topnav li.about ul,
 +
body.about #topnav li.about a:link,
 +
body.about #topnav li.about a:visited {
 +
background-color: #8b0000;
 +
}
 +
 +
#topnav li.about ul {
 +
width: 918px;
 +
}
 +
 +
#topnav li.people a:hover,
 +
#topnav li.people a:active,
 +
#topnav li.people ul,
 +
body.people #topnav li.people a:link,
 +
body.people #topnav li.people a:visited,
 +
body.people #sidenav .sel a:link,
 +
body.people #sidenav .sel a:visited,
 +
body.people #sidenav a:hover,
 +
body.people #sidenav a:active,
 +
body.people #sidenav li.sel li a:hover,
 +
body.people #sidenav li.sel li a:active {
 +
background-color: #e6881a;
 +
}
 +
 +
#topnav li.people ul {
 +
width: 843px;
 +
padding-left: 75px;
 +
}
 +
 +
#topnav li.academics a:hover,
 +
#topnav li.academics a:active,
 +
#topnav li.academics ul,
 +
body.academics #topnav li.academics a:link,
 +
body.academics #topnav li.academics a:visited,
 +
body.academics #sidenav li.sel a:link,
 +
body.academics #sidenav li.sel a:visited,
 +
body.academics #sidenav li.sel li a:hover,
 +
body.academics #sidenav li.sel li a:active,
 +
body.academics #sidenav li a:hover,
 +
body.academics #sidenav li a:active,
 +
body.academics #sidenav li.sel li a:hover,
 +
body.academics #sidenav li.sel li a:active {
 +
background-color: #2e2e91;
 +
}
 +
 +
#topnav li.academics ul {
 +
width: 693px;
 +
padding-left: 225px;
 +
}
 +
 +
#topnav li.research a:hover,
 +
#topnav li.research a:active,
 +
#topnav li.research ul,
 +
body.research #topnav li.research a:link,
 +
body.research #topnav li.research a:visited,
 +
body.research #sidenav li.sel a:link,
 +
body.research #sidenav li.sel a:visited,
 +
body.research #sidenav li.sel li a:hover,
 +
body.research #sidenav li.sel li a:active,
 +
body.research #sidenav li a:hover,
 +
body.research #sidenav li a:active,
 +
body.research #sidenav li.sel li a:hover,
 +
body.research #sidenav li.sel li a:active {
 +
background-color: #016b9d;
 +
}
 +
 +
#topnav li.research ul {
 +
width: 468px;
 +
padding-left: 450px;
 +
}
 +
 +
#topnav li.news a:hover,
 +
#topnav li.news a:active,
 +
#topnav li.news ul,
 +
body.news #topnav li.news a:link,
 +
body.news #topnav li.news a:visited,
 +
body.news #sidenav li.sel a:link,
 +
body.news #sidenav li.sel a:visited,
 +
body.news #sidenav li a:hover,
 +
body.news #sidenav li a:active,
 +
body.news #sidenav li.sel li a:hover,
 +
body.news #sidenav li.sel li a:active {
 +
background-color: #f08080;
 +
}
 +
 +
#topnav li.news ul {
 +
width: 868px;
 +
padding-left: 50px;
 +
}
 +
 +
 +
/* Thanks to MIT ChemE dept. Your site is lovely. */
 +
</style>
</style>
</head>
</head>
</html>
</html>

Revision as of 01:45, 12 October 2010

/* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ *{padding: 0; margin: 0;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title{ background-color:#e8e8e8; height:27px; } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent.TB_modal{ padding:15px; } #TB_ajaxContent p{ padding:5px 0px 5px 0px; } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; } /* MIT ChemE Menu */ #navwrapper { position: absolute; width: 955px; } #topnav { height: 85px; overflow: hidden; } #topnav li { list-style: none; float: left; } #topnav li a { display: block; width: 182px; height: 85px; margin-right: 2px; background-color: #2e2e2e; font-size: 0.83em; line-height: 1.25em; color: #fff; } #topnav li a.last { margin-right: 0px; } #topnav li.over ul, #topnav li:hover ul, body.about #topnav li.about ul, body.people #topnav li.people ul, body.academics #topnav li.academics ul, body.research #topnav li.research ul, body.news #topnav li.news ul { display: block; } body.about #topnav li.about ul, body.people #topnav li.people ul, body.academics #topnav li.academics ul, body.research #topnav li.research ul, body.news #topnav li.news ul { z-index: 1; } #topnav li.over ul, #topnav li:hover ul { z-index: 100; } #topnav li ul { display: none; clear: both; position: absolute; top: 85px; left: 0px; width: 950px; overflow: hidden; } #topnav li li { float: none; display: block; } #topnav li a:hover, #topnav li a:active { text-decoration: none; } #topnav li li { display: block; float: left; padding-top: 11px; padding-bottom: 9px; } #topnav li li a { margin: 0; padding: 0 8px; background-color: transparent; height: auto; width: auto; font-weight: normal; line-height: 0.83em; background: url('images/bg-topnav-sub.gif') no-repeat top right; } #topnav li li.last a { background-image: none; padding-right: 0px; } #topnav li li a:hover, #topnav li li a:active, #topnav li li.sel a { font-weight: bold; } /* specific styles */ #topnav li.about a:hover, #topnav li.about a:active, #topnav li.about ul, body.about #topnav li.about a:link, body.about #topnav li.about a:visited { background-color: #8b0000; } #topnav li.about ul { width: 918px; } #topnav li.people a:hover, #topnav li.people a:active, #topnav li.people ul, body.people #topnav li.people a:link, body.people #topnav li.people a:visited, body.people #sidenav .sel a:link, body.people #sidenav .sel a:visited, body.people #sidenav a:hover, body.people #sidenav a:active, body.people #sidenav li.sel li a:hover, body.people #sidenav li.sel li a:active { background-color: #e6881a; } #topnav li.people ul { width: 843px; padding-left: 75px; } #topnav li.academics a:hover, #topnav li.academics a:active, #topnav li.academics ul, body.academics #topnav li.academics a:link, body.academics #topnav li.academics a:visited, body.academics #sidenav li.sel a:link, body.academics #sidenav li.sel a:visited, body.academics #sidenav li.sel li a:hover, body.academics #sidenav li.sel li a:active, body.academics #sidenav li a:hover, body.academics #sidenav li a:active, body.academics #sidenav li.sel li a:hover, body.academics #sidenav li.sel li a:active { background-color: #2e2e91; } #topnav li.academics ul { width: 693px; padding-left: 225px; } #topnav li.research a:hover, #topnav li.research a:active, #topnav li.research ul, body.research #topnav li.research a:link, body.research #topnav li.research a:visited, body.research #sidenav li.sel a:link, body.research #sidenav li.sel a:visited, body.research #sidenav li.sel li a:hover, body.research #sidenav li.sel li a:active, body.research #sidenav li a:hover, body.research #sidenav li a:active, body.research #sidenav li.sel li a:hover, body.research #sidenav li.sel li a:active { background-color: #016b9d; } #topnav li.research ul { width: 468px; padding-left: 450px; } #topnav li.news a:hover, #topnav li.news a:active, #topnav li.news ul, body.news #topnav li.news a:link, body.news #topnav li.news a:visited, body.news #sidenav li.sel a:link, body.news #sidenav li.sel a:visited, body.news #sidenav li a:hover, body.news #sidenav li a:active, body.news #sidenav li.sel li a:hover, body.news #sidenav li.sel li a:active { background-color: #f08080; } #topnav li.news ul { width: 868px; padding-left: 50px; } /* Thanks to MIT ChemE dept. Your site is lovely. */

Retrieved from "http://2010.igem.org/Template:CM_css"