Team:Imperial College/Templates/Banner

From 2013.igem.org

Revision as of 13:25, 13 August 2013 by Meredityman (Talk | contribs)

@charset 'UTF-8'; #footer-box{ border:none; } #catlinks { border:none; background: #ffffff; } #top-section { /*reserved*/ width: 975px; height: 20px; background-color: #ffffff; border: none; } #sponsor-logo{ display: block; background-color: #ffffff; margin-left:auto; margin-right:auto; width:20%; margin: 15px; text-align:center } #p-logo { /*reserved*/ display: none;} #search-controls { /*reserved*/ display: none;} .right-menu li a, .right-menu li a:hover { /*reserved*/ color: #3c6b27; background-color: transparent; } .firstHeading { /*reserved*/ display: none;} #imperiallogo { /*reserved*/ position: relative; text-align:center; z-index:-1; } #iGEMLogo { position:absolute; top:15px; left:15px; z-index:3; } #ImperialLogo { position:absolute; top:20px; left:790px; } #nav-vert{ position: relative; float:left; width: 210px; } #maincontent{ position:relative; float:right; width: 700px; margin: 0 auto; background: #ffffff; } #fb-wrapper{ position:relative; display: block; padding: 0; margin: 20px 20px 20px 20px; width: 205px; height: 265px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-top: 1px dotted #d9d9d9; border-left: 1px dotted #d9d9d9; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } #ourfooter{ position:relative; display:block; background-color:#fff; width: 975px; float:right; border-top: 1px dotted #d9d9d9; border-bottom: 1px dotted #d9d9d9; } body { /*reserved*/ background-color:#DDDDDD; } #menucontainer { /*?*/ overflow:visible; position:relative; z-index:3; } #content { /*reserved*/ position: relative; width: 975px; margin: 0 auto; padding-top:1px; padding-left:0px; padding-right:0px; padding-bottom:30px; background: #ffffff; color: black; border: 1px solid #d9d9d9; line-height: 1.5em; z-index: 2; } #contentSub { margin: 0 0 0 0; } #bodyContent{ height: 1000px; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { /*reserved*/ margin-bottom: 0; } a {color:#93B825;} a:link {color:#93B825;} a:visited {color:#728F1D;} a:hover {color:#93B825;} a:active {color:#93B825;} a[name]:hover {text-decoration:none;} a.sitemap:link,a.sitemap:visited {color:#000000;font-decoration:none;} a.sitemap:hover,a.sitemap:active {color:#000000;font-decoration:underline;} h1 { font-family: tahoma,sans-serif; font-variant:small-caps; color: #000000; background: #ffffff; font-size: 2.2em; margin: 0 0 0 0; padding: 20px 20px 12px 20px; border-bottom: none; } h2 { font-family: tahoma,sans-serif; color: #000000; background: #ffffff; font-size: 1.7em; margin: 0 0 0 0; padding: 18px 20px 7px 20px; border-bottom: none; } h3 { font-family: tahoma,sans-serif; font-variant:small-caps color: #000000; background: #ffffff; font-weight: bold; font-size: 1.4em; margin: 0 0 0 0; padding: 16px 20px 2px 20px; border-bottom: none; } h4 { font-family: tahoma,sans-serif; color: #000000; background: #ffffff; font-weight: bold; font-size: 1.1em; margin: 0 0 0 0; padding: 13.5px 20px 1px 20px; border-bottom: none; } p { font-family: tahoma,sans-serif; color: #000000; background: #ffffff; font-weight: normal; font-size: 1em; line-height: 1.7em; text-align: justify; margin: 0 0 0 0; padding: 5px 20px 0px 20px; } .border { border:1px solid #B2B2B2; z-index:101; } .borderMagnify { border:1px solid #B2B2B2; z-index:101; margin-left:-9px; margin-right:9px; } .imgbox { margin:20px; padding:10px; border:1px solid black; text-align:center; } .vidbox { margin:20px; padding:10px; border:1px solid black; text-align:center; } .newouterbox { background-color:#FF944D;border:1px solid #CCCCCC;margin:20px;padding-bottom:0px; } .newinnerbox { border:1px solid #CCCCCC;margin:10px 20px 20px 20px;padding-top:0px;padding-bottom:13px;background-color:#ffffff; } .newtext { text-align:center;background-color:#FF944D;color:#000000; } ul.a { margin: 0 0 0 40px; list-style-image: none; list-style-type:disc; font-family: arial,sans-serif; color: #000000; background: #ffffff; font-weight: normal; font-size: 1em; line-height: 1.7em; text-align: justify; padding: 5px 20px 0px 20px; } ol.a { margin: 0 0 0 30px; list-style-position:inside; font-family: arial,sans-serif; color: #000000; background: #ffffff; font-weight: normal; font-size: 1em; line-height: 1.7em; text-align: justify; padding: 5px 20px 0px 20px; } iframe { padding: 10px 20px 10px 20px; } #BackToTop { position:fixed; bottom:0; right:0; } #Sitemap { position:fixed; bottom:0; left:0; } /* Navigation pane ***********************************************************/ #cssmenu > ul { list-style: none; margin: 0; vertical-align: baseline; line-height: 1; } /* The container */ #cssmenu > ul { margin: 10px 20px 10px 20px; display: block; position: relative; width: 210px; } /* The list elements which contain the links */ #cssmenu > ul li { display: block; position: relative; margin: 0; padding: 0; width: 100%; } /* General link styling */ #cssmenu > ul li a { /* Layout */ display: block; position: relative; margin: 0; border-top: 1px dotted #fff; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-left: 1px dotted #d9d9d9; padding: 11px 20px; /* Typography */ font-family: Helvetica, Arial, sans-serif; color: #000000; text-decoration: none; text-transform: uppercase; text-shadow: 0 1px 0 #fff; font-size: 13px; font-weight: 300; /* Background & effects */ background: #ffffff; } /* Rounded corners for the first link of the menu/submenus */ #cssmenu > ul li:first-child > a { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } /* Rounded corners for the last link of the menu/submenus */ #cssmenu > ul li:last-child > a { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } /* The hover state of the menu/submenu links */ #cssmenu > ul li a:hover, #cssmenu > ul li:hover > a { color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); background: #30f264; background: -webkit-linear-gradient(#30f264, #0ee147); background: -moz-linear-gradient(#30f264, #0ee147); background: linear-gradient(#30f264, #0ee147); border-color: transparent; } /* The arrow indicating a submenu */ #cssmenu > ul .has-sub > a::after { content: ''; position: absolute; top: 16px; right: 10px; width: 0px; height: 0px; /* Creating the arrow using borders */ border: 4px solid transparent; border-left: 4px solid #e4433c; } /* The same arrow, but with a darker color, to create the shadow effect */ #cssmenu > ul .has-sub > a::before { content: ''; position: absolute; top: 17px; right: 10px; width: 0px; height: 0px; /* Creating the arrow using borders */ border: 4px solid transparent; border-left: 4px solid #fff; } /* Changing the color of the arrow on hover */ #cssmenu > ul li > a:hover::after, #cssmenu > ul li:hover > a::after { border-left: 4px solid #fff; } #cssmenu > ul li > a:hover::before, #cssmenu > ul li:hover > a::before { border-left: 4px solid rgba(0, 0, 0, 0.25); } /* THE SUBMENUS */ #cssmenu > ul ul { position: absolute; left: 90%; top: -9999px; padding-left: 5px; opacity: 0; width: 150px; /* The fade effect, created using an opacity transition */ -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } #cssmenu > ul ul li a { font-size: 12px; } /* Showing the submenu when the user is hovering the parent link */ #cssmenu > ul li:hover > ul { top: 0px; opacity: 1; z-index: 1; } /**************************************************************/