"

From 2012.igem.org

<style> /*division defination!*/

1. divscontainer

{ width:1000px; height:auto; position:relative;

       top:-130px; 

}

1. divthehead

{ width:960px; height:240px; margin-left:0; margin-right:0; color: #FFF; }

1. divthebuttons

{ width:960px; height:25px; margin-left:0; margin-right:0; }

1. divthecontent

{ width:960px; height:700px; margin-left:0; margin-right:0; position:relative; background-color:#FFF;

}

#divtheoverview { width:900px; height:100px; margin-left:5px; margin-right:5px; }

#divthepic { width:400px; height:450px; float:left; margin-left:20px; position:relative; }

#divthedescription { width:500px; height:450px; float:right; margin-right:20px; }

#divthesmallpic { width:200px; height:100px; float:right; margin-right:5px; top:-50px; position:relative; }

1. divthecontent2

{ width:960px; height:500px; margin-left:0; margin-right:0; position:relative; background-color:#FFF; } #divthepic2 { width:400px; height:450px; float:right; margin-right:20px; position:relative; }

#divthedescription2 { width:500px; height:450px; float:left; margin-left:20px; }

1. divthelowbanner

{ width:960px; height:50px; margin:auto; bottom:150px; }

1. divthefooter

{ width:960px; height:100px; margin:auto; bottom:100px; }

body { background-image: url(); background-repeat: repeat-x; background-color: #FFF; }

/*Whatever it takes to get ride of the wiki header and wiki footer! Also, note that all changes made in this part, you would have to hard refresh the browser to make visualized (or using IE cored browser) so no need gets frustrated if it does not work*/ /*delete the double slash to make a certain command functional*/

1. top-section

{ //display:none !important; border-left:0px !important; border-right:0px !important; border-bottom:0px !important; } /*this one above destroys the editing panel and everything else as header IF you set the diaplay none as functional. Your call...*/ /*on the condition that you deleted the whole panel, I bet you want it back. then insert the following code about menubar*/

1. top-section menubar

{ display:inline !important; }

1. p-logo

{ display:none !important; } /*this one above destroys the iGEM Logo*/

1. top

{ display:none !important; } .firstHeading { display:none !important; } /*this one destorys the big h1 of the domain's name*/

/* now that you realize that the formatting of the page becomes weird for a bit... but that is alright, that is because we override a couple original css, but not them all, so the reminants get a little bit of... less of restriant. What we can do is that, still, let the readers ignore them*/ /* I can keep lowering the importance of div#content by overriding it and... make it nonsense and does not give restraints to its children elements, that means... mine stuffs*/

1. content

{

       margin:auto; !important;

width: 1200px !important; position: relative!important; padding: 0px !important; background: none !important; border-left: 0px !important; border-right: 0px !important; } /*okay!now you are about get what you want: kill the original rules... but you see, right there the footer was flowing upward now. That is because we did not define a height for the div#content. From now on you might want to do something different to mine. Either choose override the footer like what I am going to do, or depends on your content, give a proper value under the div#content to define its height. The second option keeps the original footer which looks kind of cool as well*/

1. footer-box

{ display: none !important; }

1. footer

{ display: none !important; }

1. f-list

{ display: none !important; } /*no mercy ya see, kill 'em all*/ /*no that you see there is what you want, you successfully override them all! (or at least I hope you do... contact ycai27@wisc.edu if it does not work...) the very next step you can do is to move up your content to occupy the original space belongs to the iGEM wiki. To do this, go back to your divscontainer, which is in a sense is your own globalWrapper. Decorate it with a property called top and give a value to it such as top:-200px so that your stuffs all move upwards, Play with it and see which value suits best for your site!*/ /*oh, btw, if you realize that the menubar, either div#menubar.right-menu.nopoint or the left one, whose name you can find in view code function of most major browsers. they can be Over your picture, like... poking out, so you want to change the position of it. simply go ahead and define a css towards it.*/

1. search-controls

{ display:none !important; }

1. catlinks

{

       display: none !important;

} /*now that I am done, are you done?*/ /*starts the class definition here*/ .classtheoverview {

       font-size: 18px;

color: #000000; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .classtheinlinecontent { font-size:15px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .classtheinlinecontentHyperlink { font-size:15px; color:rgb(183, 1, 1); font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } /*end of inline text class defination*/ /*** navigation menus ***/ .main-menu { width: 100%; background: transparent url(../images/nav_bg.jpg) repeat-x; color: #333; position: relative; z-index: 50000; box-shadow: 0 3px 4px rgba(60, 60, 60, 0.3); -moz-box-shadow: 0 3px 4px rgba(60, 60, 60, 0.3); -webkit-box-shadow: 0 3px 4px rgba(60, 60, 60, 0.3); }

.main-menu > li { display: inline-block; vertical-align: top; font-size: 0.8125em; line-height: 25px; background: transparent url(../images/nav_button_border.gif) no-repeat right; height: 25px; /*min-width: 120px;*/ position: relative; }

.main-menu > li a {padding-left: 0;}

.main-menu h2 { height: 100%;

 width: 100%;

}

.main-menu h2 > a { display: block; height: 100%; padding: 0 15px; text-align: center; color: #b70101; background-color: transparent; position: relative; line-height: 24px; } .main-menu .current h2 > a {color: #333;}

.main-menu h2 > a:hover { text-decoration: none; }

.main-menu > li:hover, .main-menu > a:focus, .main-menu > a:hover, .main-menu > a:active, .main-menu .current { background-color: #e7d9c1; text-decoration: none; }

.main-menu > #n_search:hover { background-color: transparent; }

.current a { color: #333; }

/*** submenus ***/

.main-menu > li:hover > ul, .main-menu > .sfHover > ul { position: absolute; left: -1px; top: 25px; /* match top ul list item height */ z-index: 99; }

.submenu { padding: 10px 0; background-color: #e7d9c1; opacity: .95; border-color: #AB907D; border-width: 1px; border-style: none none solid solid; box-shadow: 3px 3px 4px rgba(60, 60, 60, 0.4); -moz-box-shadow: 3px 3px 4px rgba(60, 60, 60, 0.4); -webkit-box-shadow: 3px 3px 4px rgba(60, 60, 60, 0.4); width: 200px; }

.submenu > li { margin-left: 7px; margin-right: 4px; margin-bottom: .75em; display: block; line-height: 1.2; background-color: transparent; }

.submenu > li > a:link { margin-left: 7px; margin-right: 4px; text-align: left; font-size: 1.5em; color:#b70101; text-transform: none; }

.submenu > li > a:hover, .submenu > li > a:focus { color: #b70101; background-color: #d0bd9a; text-decoration: none; }

/*** additional superfish rules (adapted from superfish.css) ***/ .main-menu, .main-menu * { margin: 0; padding: 0; list-style: none; } .main-menu { line-height: 1.0; } .main-menu .submenu { position: absolute; top: -999em; width: 20em; /* left offset of submenus need to match (see below) */ } .main-menu .submenu li { max-width: 90%; } .main-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .main-menu li { position: relative; } .main-menu a { display: block; position: relative; } .main-menu li:hover .submenu, .main-menu li.sfHover .submenu { left: 0; top: 25px; /* match top ul list item height */ padding-top: 10px; z-index: 99; } ul.main-menu li:hover li .submenu, ul.main-menu li.sfHover li .submenu { top: -999em; }

ul.main-menu li li:hover .submenu, ul.main-menu li li.sfHover .submenu { left: 20em; /* match ul width */ top: 0; } ul.main-menu li li:hover li .submenu, ul.main-menu li li.sfHover li .submenu { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*modification. giving width to each column*/

1. n_team

{width:150px;}

1. n_project

{width:150px;}

1. n_note

{width:150px;}

1. n_part

{width:150px;}

1. n_safety

{width:150px;}

1. n_modeling

{width:150px;} /** end of decoration for the menubar, retrieved from UW Home page**/

</style>