Template:Team:UW/CSS

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
 
<style type="text/css">
<style type="text/css">
-
 
-
#contentSub, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
 
-
 
.firstHeading {                                                    /* Gets rid of the default iGEM picture*/
.firstHeading {                                                    /* Gets rid of the default iGEM picture*/
     height:2px;
     height:2px;
     visibility:hidden;
     visibility:hidden;
}
}
-
 
+
#catlinks {
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
    display: none;
 +
}
 +
#content {
     border-left-width:0px;
     border-left-width:0px;
     border-right-width:0px;
     border-right-width:0px;
     padding: 0px 5px 0px 5px;
     padding: 0px 5px 0px 5px;
-
     width:965px;    
+
     width:965px;                                                   /* Content width*/
}
}
-
 
+
#menubar {  
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
    background-color: #FFFFFF;                             /* left menu bar color*/
-
width: 100%;
+
-
height: 100%;
+
-
background-color: transparent;
+
}
}
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
#menubar ul li a {  
-
border: 0 none;
+
    color: #545353; }                                            /* menu text color*/
-
height: 14px;
+
    .right-menu li a {
-
z-index: 100;
+
    color: red;
-
top: 0;
+
    background-color: #FFFFFF;                             /* right menu bar color*/
-
position: fixed;
+
-
width: 975px;
+
-
left: 50%;
+
-
margin-left: -487px;
+
-
        background-color: transparent;  
+
}
}
-
 
+
#p-logo { height 1px; overflow:hidden; display: none;
-
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
-
        background-color:transparent;
+
-
        height: 14px;
+
-
display: block;
+
-
z-index: 10;
+
-
position: fixed;
+
-
width:100%;
+
-
top: 0;
+
}
}
-
 
+
#top-section {      
-
#menubar a:link, #menubar a:visited  { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
        background-position: center center;
-
         color:#FFF;
+
        background-repeat: no-repeat;
-
text-decoration: none;  
+
         background-color: #FFFFFF;                         /* top header background color*/
-
background-color: transparent;
+
        border-width:0px;
 +
        height:10px;                       /* top header height (determines how low content will start to appear)*/
}
}
-
 
+
#siteSub {
-
#menubar a:active, #menubar a:hover
+
display:none;
-
{
+
-
        color:#FFF;
+
-
text-decoration: underline;
+
-
        background-color:transparent;
+
}
}
-
* {
+
#search-controls {                                                /* gets rid of the search bar (it was ugly) */
-
margin: 0;
+
display:none;
-
padding: 0;
+
margin-top:0px;
-
 
+
-
-webkit-font-smoothing: antialiased;
+
-
-webkit-box-sizing: border-box;
+
-
-moz-box-sizing: border-box;
+
-
box-sizing: border-box;
+
}
}
-
 
+
#contentSub {
-
::selection {
+
display:none;
-
background: #F79042;
+
-
color: #fff;
+
}
}
-
.slide-out-div {
+
/*Now to set heading and body fonts*/
-
          padding: 20px;
+
body {  
-
          background-image:url(../img_bu14/popopenbkgd_bu14.png);
+
background:#4B0082;
-
  background-repeat:repeat;
+
background-image: url("https://static.igem.org/mediawiki/2012/1/1b/Gradientback.jpg");
-
  z-index:30;
+
background-position: center;
-
  text-align:left;
+
background-repeat: repeat-y;
-
      }
+
}               
-
 
+
h1
-
a:link {
+
{
-
color: #F79042;
+
color:#4B0082;
-
text-decoration: none;
+
text-align:left;
 +
font-family:"Trebuchet";
 +
font-size:25px;
 +
line-height:100%;
 +
border-bottom: none;
 +
padding:0px 0px 0px 0px; 
 +
margin: 0px 0px 0px 0px;
}
}
-
a:visited {
+
h2
-
text-decoration: none;
+
{
-
color: #F79042;
+
color:#262626;
 +
text-align:left;
 +
font-family:"Trebuchet";
 +
font-size:20px;
 +
line-height: 100%;
 +
border-bottom: none;
 +
padding:0px 0px 0px 0px; 
 +
margin: 0px 0px 0px 0x;
}
}
-
a:hover {
+
h3
-
text-decoration: underline;
+
{
 +
color:#262626;
 +
text-align:left;
 +
font-family:"Trebuchet";
 +
font-size:17px;
 +
line-height: 100%;
 +
border-bottom: none; 
 +
padding:0px 0px 0px 0px; 
 +
margin: 0px 0px 0px 0x;
}
}
-
a:active {
+
p
-
text-decoration: none;
+
{
 +
color:#262626;
 +
text-align: justify;
 +
font-family:"Arial";
 +
font-size:14px;
 +
line-height:100%
 +
border-bottom: none;  
 +
padding:0px 0px 0px 0px; 
 +
margin: 0px 0px 0px 0x;
 +
border:0px
}
}
-
 
-
.title{
 
-
position:absolute;
 
-
top:38px;
 
-
left:83px;
 
-
z-index:2;
 
-
}
 
-
 
body {
body {
-
color: #353535;
+
color:#808080;
-
font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif;
+
line-height: 1;
-
text-align:center;
+
font-family:"Arial";
 +
font-size:11px;
}
}
-
h0{
+
.whitebox {
-
color:#FFF;
+
  -moz-box-shadow:  0px 0px 0px #ccc;
-
font-size:40px;
+
  -webkit-box-shadow:  0px 0px 0px #ccc;
-
font-weight:700;
+
  box-shadow:  0px 0px 15px #ccc;
-
        text-decoration:none;
+
  background-color: #FFFFFF;
 +
  -moz-border-radius: 1px;
 +
  border-radius: 15px;
 +
  margin-top: 20px;
 +
  padding-top: 20px;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
  padding-bottom: 20px;
 +
  margin-left: 15px;
 +
  margin-right: 25px;
}
}
-
 
+
.thumbnail
-
header1{
+
{
-
font-size:28px;
+
margin-bottom:0px;
-
font-weight:700;
+
padding-bottom:0px;
-
text-transform:uppercase;
+
position:relative;
-
        text-decoration:none;
+
}
}
-
header2{
+
#igemuwmenu, #igemuwmenu ul {
-
font-size:18px;
+
margin: 0;
-
color:#FFF;
+
padding: 0;
-
font-weight:700;
+
list-style: none;
-
text-transform:uppercase;
+
}
-
text-align:left;
+
-
        text-decoration:none;
+
#igemuwmenu {
-
}
+
width: 820px;
 +
margin: 10px auto;
 +
border: 1px solid #222;
 +
background-color: #111;
 +
background-image: -moz-linear-gradient(#444, #111);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 +
background-image: -webkit-linear-gradient(#444, #111);
 +
background-image: -o-linear-gradient(#444, #111);
 +
background-image: -ms-linear-gradient(#444, #111);
 +
background-image: linear-gradient(#444, #111);
 +
-moz-border-radius: 6px;
 +
-webkit-border-radius: 6px;
 +
border-radius: 6px;
 +
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
                display: inline-block;
 +
                white-space: nowrap;
 +
}
 +
 +
#igemuwmenu:before,
 +
#igemuwmenu:after {
 +
content: "";
 +
display: table;
 +
}
 +
 +
#igemuwmenu:after {
 +
clear: both;
 +
}
 +
 +
#igemuwmenu {
 +
zoom:1;
 +
}
 +
 +
#igemuwmenu li {
 +
border-right: 1px solid #222;
 +
-moz-box-shadow: 1px 0 0 #444;
 +
-webkit-box-shadow: 1px 0 0 #444;
 +
box-shadow: 1px 0 0 #444;
 +
position: relative;
 +
                display: inline-block;
 +
                white-space: nowrap;
 +
}
 +
 +
#igemuwmenu a {
 +
padding: 12px 20px;
 +
color: #999;
 +
text-transform: uppercase;
 +
font: bold 11.4px Arial, Helvetica;
 +
text-decoration: none;
 +
text-shadow: 0 1px 0 #000;
 +
                display: inline-block;
 +
                white-block: nowrap;
 +
}
 +
       
 +
    #igemuwmenu li:hover > a {
 +
color: #fafafa;
 +
}
 +
 +
*html #igemuwmenu li a:hover { /* IE6 only */
 +
color: #fafafa;
 +
}
 +
 +
#igemuwmenu ul {
 +
margin: 20px 0 0 0;
 +
_margin: 0; /*IE6 only*/
 +
opacity: 0;
 +
visibility: hidden;
 +
position: absolute;
 +
top: 38px;
 +
left: 0;
 +
z-index: 1;   
 +
background: #444;
 +
background: -moz-linear-gradient(#444, #111);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 +
background: -webkit-linear-gradient(#444, #111);   
 +
background: -o-linear-gradient(#444, #111);
 +
background: -ms-linear-gradient(#444, #111);
 +
background: linear-gradient(#444, #111);
 +
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 +
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
border-radius: 3px;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-ms-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
transition: all .2s ease-in-out; 
 +
}
-
header3{
+
#igemuwmenu li:hover > ul {
-
font-size:20px;
+
opacity: 1;
-
color:#000;
+
visibility: visible;
-
font-weight:700;
+
margin: 0;
-
text-align:left;
+
}
-
        text-decoration:none;
+
-
}
+
#igemuwmenu ul ul {
 +
top: 0;
 +
left: 150px;
 +
margin: 0 0 0 20px;
 +
_margin: 0; /*IE6 only*/
 +
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
}
 +
 +
#igemuwmenu ul li {
 +
float: none;
 +
display: block;
 +
border: 0;
 +
_line-height: 0; /*IE6 only*/
 +
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
}
 +
#igemuwmenu ul li.active {
 +
float: none;
 +
display: block;
 +
border: 0;
 +
_line-height: 0; /*IE6 only*/
 +
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
}
-
maincontent{
+
-
font-size:14px;
+
#igemuwmenu ul li:last-child { 
-
font-weight:200;
+
-moz-box-shadow: none;
-
text-align:justify;
+
-webkit-box-shadow: none;
-
}
+
box-shadow: none;   
 +
}
 +
 +
#igemuwmenu ul a {   
 +
padding: 10px;
 +
width: 130px;
 +
_height: 10px; /*IE6 only*/
 +
display: block;
 +
white-space: nowrap;
 +
float: none;
 +
text-transform: none;
 +
}
 +
     
 +
        #igemuwmenu ul a.selected {   
 +
padding: 10px;
 +
width: 130px;
 +
_height: 10px; /*IE6 only*/
 +
display: block;
 +
white-space: nowrap;
 +
float: none;
 +
text-transform: none;
 +
}
 +
 +
#igemuwmenu ul a:hover {
 +
background-color: #785D84;
 +
background-image: -moz-linear-gradient(#B6A0BA,  #785D84);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#B6A0BA), to(#785D84));
 +
background-image: -webkit-linear-gradient(#B6A0BA, #785D84);
 +
background-image: -o-linear-gradient(#B6A0BA, #785D84);
 +
background-image: -ms-linear-gradient(#B6A0BA, #785D84);
 +
background-image: linear-gradient(#B6A0BA, #785D84);
 +
}
-
capt{
+
#igemuwmenu ul li:first-child > a {
-
font-size:12px;
+
-moz-border-radius: 3px 3px 0 0;
-
        color:#5E5F5F;
+
-webkit-border-radius: 3px 3px 0 0;
-
font-weight:150;
+
border-radius: 3px 3px 0 0;
-
text-align:justify;
+
}
-
        line-height:110%
+
-
}
+
#igemuwmenu ul li:first-child > a:after {
 +
content: '';
 +
position: absolute;
 +
left: 40px;
 +
top: -6px;
 +
border-left: 6px solid transparent;
 +
border-right: 6px solid transparent;
 +
border-bottom: 6px solid #444;
 +
}
 +
 +
#igemuwmenu ul ul li:first-child a:after {
 +
left: -6px;
 +
top: 50%;
 +
margin-top: -6px;
 +
border-left: 0;
 +
border-bottom: 6px solid transparent;
 +
border-top: 6px solid transparent;
 +
border-right: 6px solid #3b3b3b;
 +
}
 +
 +
#igemuwmenu ul li:first-child a:hover:after {
 +
border-bottom-color: #B6A0BA;  
 +
}
 +
 +
#igemuwmenu ul ul li:first-child a:hover:after {
 +
border-right-color: #0299d3;  
 +
border-bottom-color: transparent;
 +
}
 +
 +
#igemuwmenu ul li:last-child > a {
 +
-moz-border-radius: 0 0 3px 3px;
 +
-webkit-border-radius: 0 0 3px 3px;
 +
border-radius: 0 0 3px 3px;
 +
}
 +
 +
/* Mobile */
 +
#igemuwmenu-trigger {
 +
display: none;
 +
}
-
sidenav{
+
@media screen and (max-width: 600px) {
-
color:#FFF;
+
-
font-weight:700;
+
-
}
+
-
#logo {
+
/* nav-wrap */
-
position: absolute;
+
#igemuwmenu-wrap {
-
left: 80px;
+
position: relative;
-
top: 40px;
+
}
-
z-index: 2;
+
-
margin-left: -17px;
+
-
}
+
-
.header{
+
#igemuwmenu-wrap * {
-
background-color:#353535;
+
-moz-box-sizing: border-box;
-
position:fixed;
+
-webkit-box-sizing: border-box;
-
height:125px;
+
box-sizing: border-box;
-
top:0px;
+
}
-
width:100%;
+
-
z-index:30;
+
-
}
+
-
.igemlogo
+
-
{
+
-
position:fixed;
+
-
right:5px;
+
-
z-index:30;
+
-
}
+
 +
/* menu icon */
 +
#igemuwmenu-trigger {
 +
display: block; /* show menu icon */
 +
height: 40px;
 +
line-height: 40px;
 +
cursor: pointer;
 +
padding: 0 0 0 35px;
 +
border: 1px solid #222;
 +
color: #fafafa;
 +
font-weight: bold;
 +
background-color: #111;
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
 +
-moz-border-radius: 6px;
 +
-webkit-border-radius: 6px;
 +
border-radius: 6px;
 +
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
}
 +
 +
/* main nav */
 +
#igemuwmenu {
 +
margin: 0; padding: 10px;
 +
position: absolute;
 +
top: 40px;
 +
width: 100%;
 +
z-index: 1;
 +
background-color: #444;
 +
display: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
-
#tracking_nav
+
#igemuwmenu:after {
-
{
+
content: '';
-
margin: 0px 0px 0px 950px;
+
position: absolute;
-
position: fixed;
+
left: 25px;
-
color:#bababa;
+
top: -8px;
-
border: 1px solid #3d3f3c;
+
border-left: 8px solid transparent;
-
background:#3d3f3c;
+
border-right: 8px solid transparent;
-
font-size: 16pt;
+
border-bottom: 8px solid #444;
-
padding: 5px;
+
}
-
line-height: 120%;
+
-
}
+
-
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
+
#igemuwmenu ul {
-
#tracking_nav a:hover {background:#bababa;}
+
position: static;
 +
visibility: visible;
 +
opacity: 1;
 +
margin: 0;
 +
background: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
-
ul#nav {
+
#igemuwmenu ul ul {
-
width:90%;
+
margin: 0 0 0 20px !important;
-
top:100px;
+
-moz-box-shadow: none;
-
left:60px;
+
-webkit-box-shadow: none;
-
position:fixed;
+
box-shadow: none;
-
z-index:30;
+
}
-
}
+
-
#nav li {
+
#igemuwmenu li {
-
color: #FFF;
+
position: static;
-
background-color:none;
+
display: block;
-
margin: 0 15px 0 0;
+
float: none;
-
float: left;
+
border: 0;
-
position: relative;
+
margin: 5px;
-
list-style: none;
+
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
-
}
+
#igemuwmenu ul li{
-
#nav li:last-child { margin:0; }
+
margin-left: 20px;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
-
/* main level link */
+
#igemuwmenu a{
-
#nav a {
+
display: block;
-
font-family:bree-web, Bree, sans-serif;
+
float: none;
-
font-size:10pt;
+
padding: 0;
-
font-weight:600;
+
color: #999;
-
line-height:210%;
+
}
-
color: inherit;
+
-
text-decoration: none;
+
-
display: block;
+
-
padding: 0 0 0 5px;
+
-
margin: 0;
+
-
}
+
-
ul#nav > li > a {
+
#igemuwmenu a:hover{
-
line-height:10px;
+
color: #fafafa;
-
border-left:solid 3px #bbb;
+
}
-
padding:0 0 0 15px;
+
-
}
+
-
#nav a:hover {
+
#igemuwmenu ul a{
-
/*background-color: #870203;
+
padding: 0;
-
color: #ffffff;*/
+
width: auto;
-
}
+
}
-
/* main level link hover */
+
#igemuwmenu ul a:hover{
-
#nav .current a, #nav li:hover > a {
+
background: none;
-
color: #F79042;
+
}
-
border-color:#F79042;
+
-
}
+
-
/* sub levels link hover */
+
#igemuwmenu ul li:first-child a:after,
-
#nav ul li:hover a, #nav li:hover li a {
+
#igemuwmenu ul ul li:first-child a:after {
-
border: none;
+
border: 0;
-
background-image:url(https://static.igem.org/mediawiki/2014/3/3a/Orangemenubkgd_bu14.png);
+
}
-
background-repeat:repeat;
+
-
color:#FFF;
+
-
}
+
-
#nav ul a:hover {
+
}
-
color: #353535 !important;
+
-
/*background: #fff url() repeat-x 0 -100px !important;
+
-
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
+
-
}
+
 +
@media screen and (min-width: 600px) {
 +
#igemuwmenu {
 +
display: block !important;
 +
}
 +
}
-
/* dropdown */
+
/* iPad */
-
#nav li:hover > ul {
+
.no-transition {
-
/*display: block;*/
+
-webkit-transition: none;
-
opacity:1;
+
-moz-transition: none;
-
margin:0;
+
-ms-transition: none;
-
background-color: none;
+
-o-transition: none;
-
z-index:0;
+
transition: none;
-
}
+
opacity: 1;
 +
visibility: visible;
 +
display: none; 
 +
}
-
/* level 2 list */
+
#igemuwmenu li:hover > .no-transition {
-
#nav ul {
+
display: block;
-
/*display: none;*/
+
}
-
opacity:0;
+
-
margin: 20px 0 0 0;
+
-
padding: 7px 0 0 0;
+
-
width: 205px;
+
-
position: absolute;
+
-
left: 0;
+
-
z-index:-1;
+
-
}
+
</style>
-
#nav ul li {
+
-
float: none;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
#nav ul a {
 
-
font-weight: normal;
 
-
/*text-shadow: 0 1px 0 #fff;*/
 
-
}
 
-
/* clearfix */
 
-
#nav:after {
 
-
content: ".";
 
-
display: block;
 
-
clear: both;
 
-
visibility: hidden;
 
-
line-height: 0;
 
-
height: 0;
 
-
}
 
-
#nav {
 
-
display: inline-block;
 
-
}
 
-
html[xmlns] #nav {
 
-
display: block;
 
-
}
 
-
 
-
* html #nav {
 
-
height: 1%;
 
-
}
 
 +
<a href="http://www.washington.edu/"><img src='https://static.igem.org/mediawiki/2012/2/25/UW_W-Logo_smallRGB.jpg' align="left" width= "57" style="padding-top: 12px; padding-left: 5px;"/></a>
 +
<a href="https://2013.igem.org/Main_Page"><img src='https://static.igem.org/mediawiki/igem.org/c/c8/IGEM_desat.png' align="right" width= "70"/></a>
 +
<style type="text/css">
 +
#content {z-index:4;}
 +
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
 +
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}
 +
.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
 +
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
 +
</style>
 +
<nav id="igemuwmenu-wrap">   
-
.headerdivider{
+
<ul id="igemuwmenu">
-
        background-image:url(https://static.igem.org/mediawiki/2014/1/15/Headerdivider_bu14.png);
+
-
position:absolute;
+
-
top:120px;
+
-
height:15px;
+
-
width:100%;
+
-
z-index:10;
+
-
}
+
-
.plasmid{
+
<li><a href="https://2013.igem.org/Team:Washington">Home</a>
-
        background-color:transparent;
+
<ul>
-
position: relative;
+
<li><a href="https://2013.igem.org/Team:Washington">UW 2013</a></li>
-
background-repeat:no-repeat;
+
<li><a href="https://2012.igem.org/Team:Washington">UW 2012</a></li>
-
margin-left:auto;
+
<li><a href="https://2011.igem.org/Team:Washington">UW 2011</a></li>
-
margin-right:auto;
+
<li><a href="https://2010.igem.org/Team:Washington">UW 2010</a></li>
-
width:400px;
+
<li><a href="https://2009.igem.org/Team:Washington">UW 2009</a></li>
-
height:500px;
+
<li><a href="https://2008.igem.org/Team:University_of_Washington">UW 2008</a></li>
-
        top: calc(50% - 300px);
+
<li><a href="https://2013.igem.org/Main_Page">iGEM Homepage</a></li>
-
z-index:10;
+
</ul>
-
}
+
</li>
-
.banner {
+
<!--
-
        background-image:url(https://static.igem.org/mediawiki/2014/0/03/Boston1_bu14.jpg);
+
<li>
-
        background-size:cover;
+
<a </a> main menu on plastic degradation
-
position: absolute;
+
<ul>
-
top:100px;
+
-
width: 100%;
+
-
height:100%;
+
-
overflow: auto;
+
-
font-size: 18px;
+
-
text-align: center;
+
-
color: rgba(255,255,255,.6);
+
-
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
+
-
box-shadow: 0 1px 2px rgba(0,0,0,.25);
+
for the drop down of plastic degradation
-
+
format <li><a href="https://2012.igem.org/Team:Washington/Plastics#Background">Background</a></li>
-
+
-
}
+
-
+
-
.wrap {
+
-
margin: 0 auto;
+
-
width: 960px;
+
-
}
+
-
.anchor{
 
-
position:absolute;
 
-
top:calc(100% - 125px);
 
-
}
 
-
.topanchor{
+
</ul>
-
position:absolute;
+
</li>
-
top:calc(0% - 125px);
+
-->
-
}
+
-
.lower{
 
-
background-image:url(https://static.igem.org/mediawiki/2014/d/d7/Gradient_bu14.png);
 
-
background-color:#FFF;
 
-
text-align:center;
 
-
background-repeat:repeat-x;
 
-
width:100%;
 
-
position:absolute;
 
-
top:100%;
 
-
z-index:10;
 
-
}
 
-
.content{
 
-
text-align:left;
 
-
width:100%;
 
-
position:relative;
 
-
z-index:10;
 
-
}
 
-
.text{
 
-
width:75%;
 
-
margin-left:auto;
 
-
margin-right:auto;
 
-
}
 
-
.content1{
 
-
background-image:url(../img_bu14/whitebkgd_bu14.png);
 
-
background-repeat:repeat;
 
 +
<li>
 +
<a href="https://2013.igem.org/Team:Washington/LightSensing">Light Sensing Experiments</a>
 +
<ul>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Background">Background</a></li>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Systems">Our Systems</a></li>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Methods">Methods</a></li>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Results">Results</a></li>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Future">Future Plans</a></li>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Parts">Parts Submitted</a></li>
 +
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Sources">Scientific Sources</a></li>
 +
</ul>
 +
</li>
-
.sponsors{
 
-
background-color:#FFF;
 
-
position:relative;
 
-
text-align:center;
 
-
bottom:0px;
 
-
z-index:10;
 
-
}
 
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
+
<li>
-
.wrap {
+
<a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE">e.colight</a>
-
width: 90%;
+
<ul>
-
}
+
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Background">Background</a></li>
-
#logo {
+
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Features">Features</a></li>
-
left: 50px;
+
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Experiments">Experiments</a></li>
-
top: 30px;
+
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Sources">Sources</a></li>
-
}
+
</ul>
 +
</li>
-
.banner header1, .banner header2 {
+
<li>
-
font-size: 24px;
+
<a href="https://2013.igem.org/Team:Washington/Outreach">Outreach</a>
-
line-height: 30px;
+
-
}
+
-
.banner ul li {
+
-
height: 240px;
+
-
}
+
-
.banner .inner {
+
-
padding-top: 100px;
+
-
padding-bottom: 50px;
+
-
}
+
-
.banner p {
+
-
font-size: 15px;
+
-
width: 80%;
+
-
margin: 0 auto;
+
-
}
+
-
pre {
+
-
overflow: auto;
+
-
}
+
-
.features li {
+
-
width: 100%;
+
-
margin-left: 10px;
+
-
margin-bottom: 30px;
+
-
}
+
-
.how li {
+
-
width: 90%;
+
-
}
+
-
.how pre {
+
-
position: static;
+
-
width: 100%;
+
-
}
+
-
}
+
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+
</li>
-
.features li:before {
+
 
-
background: url('img/icons@2x.png');
+
<li>
-
background-size: 100%;
+
<a href="https://2013.igem.org/Team:Washington/Protocols">Protocols</a>
-
}
+
</li>
 +
 
 +
<li>
 +
<a href="https://2013.igem.org/Team:Washington/MoreLinks">Safety</a>
 +
</li>
 +
 
 +
<li style="border-right:0; box-shadow:0px 0 0;">
 +
<a href="https://2013.igem.org/Team:Washington/Funding">Our Team</a>
 +
</li>
 +
 
 +
</li>
 +
                                                                                               
 +
</ul>
 +
</nav>
 +
 
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 +
<script type="text/javascript">
 +
    $(function() {
 +
if ($.browser.msie && $.browser.version.substr(0,1)<7)
 +
{
 +
$('li').has('ul').mouseover(function(){
 +
$(this).children('ul').css('visibility','visible');
 +
}).mouseout(function(){
 +
$(this).children('ul').css('visibility','hidden');
 +
})
}
}
 +
/* Mobile */
 +
$('#igemuwmenu-wrap').prepend('<div id="igemuwmenu-trigger">igemuwmenu</div>');
 +
$("#igemuwmenu-trigger").on("click", function(){
 +
$("#menu").slideToggle();
 +
});
-
</style>
+
// iPad
 +
var isiPad = navigator.userAgent.match(/iPad/i) != null;
 +
if (isiPad) $('#igemuwmenu ul').addClass('no-transition');     
 +
    });
 +
// selection
 +
 
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
        $("#content").find("a[href='"+location.href+"']").each(function(){
 +
        $(this).find("a").addClass("selected")
 +
        })
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
 
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-26265208-1']);
 +
  _gaq.push(['_trackPageview']);
 +
 
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 
 +
</script>
</html>
</html>

Revision as of 03:32, 25 September 2014

Retrieved from "http://2014.igem.org/Template:Team:UW/CSS"