Team:Aberdeen Scotland/css

From 2010.igem.org

(Difference between revisions)

Revision as of 09:49, 12 August 2010

html

{ height: 100%;}

{ margin: 0;

 padding: 0;}

body

{ font: .78em 'arial', sans-serif;

 background: #fff;

 color: #6E6E6E;}

.left

{ float: left;

 width: auto;

 margin-right: 10px;}

.right

{ float: right;

 width: auto;

 margin-left: 10px;}

.center

{ display: block;

 text-align: center;

 margin: 20px auto;}

blockquote

{ margin: 20px 100px;

 padding: 10px 20px 20px 20px;

 border: 1px solid #E5E5DB;

 background: #FFF;}

main, #logo, #menubar, #site_content, #footer

{ margin-left: auto;

 margin-right: auto;}

header

{ background: #4D4D4D url(back.png);

 height: 200px;

 margin:;}

h1

{ text-align: left;

 font: small-caps; 'times new roman', sans-serif;

 color: #6E6E6E;}

site_content

{ width: 825px;

 overflow: hidden;

 margin: 0 auto 0 auto;

 padding: 25px 25px;}

.sidebar

{ float: right;

 width: 150px;

 padding: 0 0px 0 30px;}

.sidebar ul

{ width: 178px;

 padding: 4px 0 0 0;

 margin: 4px 0 30px 0;}

.sidebar li

{ list-style: none;

 padding: 0 0 7px 0; }

.sidebar li a, .sidebar li a:hover

{ padding: 0 0 0 25px;

 display: block;

 background: transparent url(link.png) no-repeat left center;}

.sidebar li a.selected

{ color: #444;}

content

{ text-align: left;

 width: 583px;

 padding: 0 20px 0 0px;}

footer

{ width: 100%;

 font-family: 'lucida sans unicode', sans-serif;

 height: 33px;

 padding: 20px 0 4px 0;

 margin-bottom: 20px;

 text-align: center;

 background: #3B3B3B;

 color: #A8AA94;

 border-top: 1px solid #FFF;

 text-transform: uppercase;

 letter-spacing: 0.1em;}

.separator

{ width: 100%;

 height: 0;

 border-top: 1px solid #D9D5CF;

 border-bottom: 1px solid #FFF;

 margin: 0 0 20px 0;}

@@ Line 1: / Line 1: @@
-<html>
+html
-<style type="text/css">
-/* change the igem style to fit my design */
+{ height: 100%;}
-#content {background: url(https://static.igem.org/mediawiki/2009/e/ee/Bg_body_centre.gif) top left repeat-x #A0C8DA; border: 0px;}
-#content h1.firstHeading {display: none;}
-/* layout */
-* {font-size: 100%; margin: 0; padding: 0;}
-body {position: relative; background: url(https://static.igem.org/mediawiki/2009/0/0e/Bg_body_edge.gif) top left repeat-x #A0C8DA;}
-#pagewrapper {display: block; width: 950px; background: url(https://static.igem.org/mediawiki/2009/3/37/Bg_main_wide.gif) top repeat-y; text-align: left; margin: 0 auto; font: 90% Verdana, Arial, Helvetica, sans-serif;  }
-#titleheader {display:block;background: url(https://static.igem.org/mediawiki/2009/f/f7/Bg_header2.GIF); }
-#subtitle { 0px 50% no-repeat; padding: 7px 0px 12px 21px; color:#fff;}
-h3.toptitle {font: Tahoma, Verdana, Arial, sans-serif; color: #fff; letter-spacing: -1px;}
-h1.maintitle {font: 2.2em Tahoma, Verdana, Arial, sans-serif; color: #fff; letter-spacing: -1px;}
-h3.maintitle {font: 2.2em Tahoma, Verdana, Arial, sans-serif; color: #fff; letter-spacing: -1px;}
-h1.maintitle a, h1 a:link, h1 a:visited, h1 a:hover {color: #fff; text-decoration: none;}
-h3.maintitle a, h3 a:link, h3 a:visited, h3 a:hover {color: #fff; text-decoration: none;}
-.commentbar {color: #CADFED; margin: 5px 0px 0px 0px;}
-.commentbar a, a:visited {color: white; text-decoration: none;}
-#mainnavigation {margin: 0px 7px 0px 7px; padding: 20px 20px 9px 20px;}
-#mainpic {height:350px; border-top: 3px solid gray;border-bottom: 3px solid gray;margin: 0px 8px 10px 8px;}
-#pagetitlewrapper {border-top: 3px solid gray; height: 75px; position :relative; padding: 10px 0px 5px 20px; top:260px; background: url(https://static.igem.org/mediawiki/2009/a/a1/Transparent.jpg)}
-.wide { width: 890px; background-color:#E4E9EE; color: #000000; padding: 10px; border: 1px solid #AAAAAA;  padding: 10px; margin: 0px 10px 10px 17px; float:left; display: inline;}
+*
-.wide img {border: 0px solid #AAAAAA;}
-.wide p {margin: 10px 0 5px 0; }
-.wide h2 {font-weight: bold;}
+{ margin: 0;
-table.nav {width:100%; margin:0; cellpadding:5px; cellspacing:0; border:1px; bordercolor:#AAAAAA; font color:#000000; background:#E4E9EE;}
+  padding: 0;}
-table.parameter {width:90%; display: block; margin-left: auto; margin-right: auto; cellpadding:0px; cellspacing:0; border:0px; bordercolor:#AAAAAA; font color:#000000; align:center; background:#E4E9EE; }
-table.parameter td { padding:5px; }
-table.hill {width:60%; display: block; float:right; cellpadding:0px; cellspacing:0; border:0px; bordercolor:#AAAAAA; font color:#000000; align:center; background:#E4E9EE; }
-table.hill td { padding:5px;}
-img.floatleft {float: left; margin: 4px; clear:both;}
+body
-.leftcolumn {float: left; margin: 0px 10px 10px 17px; width: 150px; display: inline;}
+{ font: .78em 'arial', sans-serif;
-.rightcolumn {float: right; margin: 0px 10px 10px 17px; width: 550px; display: inline;}
-.space {clear:both; }
+  background: #fff;
+  color: #6E6E6E;}
-.left { width: 650px; background-color:#E4E9EE; color: #555555; padding: 10px; border: 1px solid #AAAAAA;  padding: 10px; margin: 0px 10px 10px 17px; float:left; display: inline;}
-.left img {border: 0px solid #AAAAAA; }
-.left p {margin: 10px 0 5px 0; }
-.left h2 {font-weight: bold;}
+.left
-.right { width: 200px; background-color: #FFFFFF; color: #555555; padding: 10px; border: 1px solid #AAAAAA; margin: 0px 17px 10px 0px; float:right; display:inline;}
+{ float: left;
-.right img {border: 0px solid #AAAAAA; }
-.right p {margin: 10px 0 5px 0; }
-.right h2 {font-weight: bold;}
+  width: auto;
-div.thumbnail {padding: 10px; border: solid #AAAAAA 1px; width: 152px; background-color: #fff}
+  margin-right: 10px;}
-/* typography */
-.description {color: #CADFED; margin: 0 37px 0px 37px;}
+.right
-.title h2 {font: 1.05em Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 9px 24px 12px 24px;}
-.title h3 {font: 1.05em Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 9px 24px 12px 24px;}
-.title small {float: right; padding: 14px 24px 0 0; color: #67939B;}
-#pagetitle {}
-#pagesubtitle {color: #CADFED;}
-#maintitle {font: 2.0em Tahoma, Verdana, Arial, sans-serif; margin: 4px 0 0 0;}
+{ float: right;
-/* links */
+  width: auto;
-a:link, a:visited {text-decoration: none; color:#003399;}
-a:hover {color: #D76519;}
+  margin-left: 10px;}
+.center
+{ display: block;
+  text-align: center;
+  margin: 20px auto;}
+blockquote
+{ margin: 20px 100px;
+  padding: 10px 20px 20px 20px;
+  border: 1px solid #E5E5DB;
-/*======================== MENU STYLE =========================*/
+  background: #FFF;}
-.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
-	position:relative;
-	border:0;
-	margin:0;
-	padding:0;
-	width:90%;
-	height:35px;/* 36px masthead height + 18px button height + 1px lower border*/
-	min-width:560px;
-}
-* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
-	position:relative;  /* we can simulate a minimum width by creating a large */
-	float:left;          /* border in this first div, then placing our content */
-	height: 1px;          /* into a second nested div (see 2nd nested div next */
-	border-left:560px solid #fff;    /* CSS box-model borders are a fixed size */
-}
-* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
+#main, #logo, #menubar, #site_content, #footer
-	position:relative;
-	margin-left:-560px;
-	height: 1px;
-}
+{ margin-left: auto;
+  margin-right: auto;}
- /*========================= TOP OF THE MENU CASCADE =========================*/
-.menu {
-	position:relative;        /* establish a menu-relative positioning context */
-	float:left;                                     /* play nicely with others */
-	margin:0;
-	padding:0;
-	border:0;
-	height:30px;                                  /* the menu's overall height */
-	width:100%;         /* we always want our menu to fill the available space */
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size:14px;         /* this (and also below) sets the menu's font size */
-	border-bottom:0;        /* give us a black border underneath */
-}
-.menu img {
+#header
-	vertical-align: top;      /* prevent images from being pushed down by text */
-}
-.menu ul {
+{ background: #4D4D4D url(back.png);
-	list-style: none;
-	padding:0;
-	margin:0;
-	border:0;
-	list-style-type:none;          /* we don't want to view the list as a list */
-	line-height:2em;           /* globally set the menu's item spacing. note */
-}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
-.menu li {
+  height: 200px;
-	float:left;    /* this creates the side-by-side array of top-level buttons */
-	position:relative;    /* create local positioning contexts for each button */
-	margin:0;
-	list-style: none;
-}
-.menu ul li table {
+  margin:;}
-	margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
-	m\argin:0;               /* re-zero the table margins for everyone but IE5 */
-	border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
-	font-size:12px;        /* this sets the base font size for our entire menu */
-	list-style: none;
-}
-.drop {
-	display:block;
-	padding:0px .5em;	       /* this sets the l/r margins for our menu item */
-	margin:0;
-	text-align:right;   /* this right alignment goes with the float:left below */
-	cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
-	cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
-}
-.drop span {        /* this simultaneously left and right aligns the text and */
+h1
-	float:left;       /* the >> in the drop-down menus which link to sub-menus */
-}
-.rightmenu {
+{ text-align: left;
-	position:relative;  /* establish a local positioning context for YAH label */
-	float:right;                  /* and right-align it at the top of our page */
-}
+  font: small-caps; 'times new roman', sans-serif;
-/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
+  color: #6E6E6E;}
-.menu ul li ul {
-	display:none;                  /* initially hide the entire list hierarchy */
-	padding:1px;                               /* this is our box border width */
-	list-style: none;
-}
-.menu ul li a,
-.menu ul li a:visited {                    /* unselected top-level menu items */
-	display:block;
-	float:left;
-	text-decoration:none;
-	height:30px;
-	width:9em;
-	list-style: none;
-}
+#site_content
-.menu ul li:hover a,
+{ width: 825px;
-.menu ul li a:hover {                        /* selected top-level menu items */
-}
-/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
+  overflow: hidden;
-.menu ul li:hover ul,
+  margin: 0 auto 0 auto;
-.menu ul li a:hover ul {                           /* 2nd level drop-down box */
-	display:block;
-	position:absolute;
-	margin:0;
-	top:22px;              /* place us just up underneath the top-level images */
-	left:8px;       /* left-align our drop-down to the previous button border */
-	height:auto;      /* the drop-down height will be determiend by line count */
-	width:14em;
-	color:black;                        /* this sets the unselected-text color */
-	background:#ffffff;         /* this sets our menu's effective "border" color */
-	font-size:12px;         /* this (and also below) sets the menu's font size */
-	list-style: none;
-}
-.menu ul li:hover ul.leftbutton,
+  padding: 25px 25px;}
-.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
-	left:0px;
-}
-.menu ul li:hover ul.skinny,
-.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
-	width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
-}
-.menu ul.rightmenu li:hover ul,
-.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
-	left:auto;
-	right:0;         /* nudge the right menu right to line up under the border */
-}
-* html .menu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
+.sidebar
-	right:-1px;
-}
-.menu ul li:hover ul li a,
+{ float: right;
-.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
-	border:0;
-	margin:0;
-	padding:0;
-	height:auto;
-	color:#ffffff;               /* this sets the unselected drop-down text color */
-	background:#7fa4d8;       /* this sets the drop-down menu background color */
-	width:14em;
-}
-.menu ul li:hover ul li:hover a,
+  width: 150px;
-.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
-	color:black;
-	background:white;
-}
-.menu ul li:hover ul.skinny li a,
+  padding: 0 0px 0 30px;}
-.menu ul li a:hover ul.skinny li a,
-.menu ul li:hover ul.skinny li a:hover,
-.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
-	width:8.08333em;
-}
-/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
-.menu ul li:hover ul li ul,
-.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
-	visibility:hidden;
-}
-.menu ul li:hover ul li:hover ul,
-.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
-	visibility:visible;
-	position:absolute;
-	margin-top:-1px;	      /* bring the top edge of the 3rd level menu up one */
-	top:0;
-	left:14em;
-	width:14em;
-}
+.sidebar ul
-.menu ul li:hover ul li:hover ul li a,
+{ width: 178px;
-.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
-	width:14em;
-	background:#7fa4d8;
-        color:#ffffff;
-}
-.menu ul li:hover ul li:hover ul li a:hover,
+  padding: 4px 0 0 0;
-.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
-	width:14em;
-	background:white;
-        color:#000000;
-}
-#text {           		/* the Mac's standard Safari browser will not see this code */
+  margin: 4px 0 30px 0;}
-	height:1.215em;#        /* ...  but every other browser will and should */
-} 				/* Safari barfs on the illegal pound sign (#) after the rule's property val */
-a.menu {
-  color: white;
-  width: 12em;
-}
-li.toclevel-1 .toclevel-2 {
+.sidebar li
-  margin-bottom:0em;
-}
+{ list-style: none;
-table {
+   padding: 0 0 7px 0; }
-   font-color: #ffffff;
-}
-a.menu {
-  color: #ffffff;
-  width: 12em;
-}
+.sidebar li a, .sidebar li a:hover
+{ padding: 0 0 0 25px;
+  display: block;
+  background: transparent url(link.png) no-repeat left center;}
-/* footer */
-#wikifooter {clear: both; display: block; width: 950px; background: url(https://static.igem.org/mediawiki/2009/8/8d/Bg_footer.gif) bottom no-repeat; border-bottom: 20px solid #A0C8DA; text-align: center;}
-* html #footer {margin-top: 18px;}
-#wikifooter-top {display: block; width: 950px; height: 15px; background: url(https://static.igem.org/mediawiki/2009/5/58/Bg_footer-top.gif) top no-repeat;}
-#wikifooter p {color: #808080; padding: 0px 37px 20px 37px;}
-#wikifooter a, #wikifooter a:visited {color: #808080;}
-</style>
+.sidebar li a.selected
-</html>
+{ color: #444;}
+#content
+{ text-align: left;
+  width: 583px;
+  padding: 0 20px 0 0px;}
+#footer
+{ width: 100%;
+  font-family: 'lucida sans unicode', sans-serif;
+  height: 33px;
+  padding: 20px 0 4px 0;
+  margin-bottom: 20px;
+  text-align: center;
+  background: #3B3B3B;
+  color: #A8AA94;
+  border-top: 1px solid #FFF;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;}
+.separator
+{ width: 100%;
+  height: 0;
+  border-top: 1px solid #D9D5CF;
+  border-bottom: 1px solid #FFF;
+  margin: 0 0 20px 0;}