Team:CU-Boulder/include/style.css

From 2014.igem.org

Revision as of 01:41, 10 May 2014 by Emory (Talk | contribs)

/* Minimal header: removes the search bar and header image and readjusts font colours in the menus.

Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code! Check out their wikis at: https://2011.igem.org/Team:Brown-Stanford https://2012.igem.org/Team:Lethbridge

  • /

.ignoredstyle {}

body.mediawiki {background: rgb(238,238,238); /* Old browsers */ background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */}

.header {text-align:center; padding-right:16px; padding-bottom:5px;}

h4 {font-size:100%;}

.dropdown-menu .sub-menu { 

   left: 100%;
   position: absolute;
   top: 0;
   visibility: hidden;
   margin-top: -1px;

}

.dropdown-menu li:hover .sub-menu { 

   visibility: visible;
   display: block;

}

.navbar .sub-menu:before { 

   border-bottom: 7px solid transparent;
   border-left: none;
   border-right: 7px solid rgba(0, 0, 0, 0.2);
   border-top: 7px solid transparent;
   left: -7px;
   top: 10px;

} .navbar .sub-menu:after { 

   border-top: 6px solid transparent;
   border-left: none;
   border-right: 6px solid #fff;
   border-bottom: 6px solid transparent;
   left: 10px;
   top: 11px;
   left: -6px;

}

.dropdown-toggle {height:20px;}

  1. pdf { 
   width: 950px;
   height: 1200px;
   margin: 2em auto;

}

  1. pdf object { 
  display: block;
  border: solid 1px #666;

}

dl dt a {padding-right:1em;}

  1. headerimage img{-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3); margin: auto; display: block}

.image img{-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3); box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

.shadow-bottom {box-shadow: 6px 6px 10px #888888;padding-bottom: 1em; margin-bottom: 1em; background:white;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} .shadow {box-shadow: 6px 6px 10px #888888;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} .shadow-bottom p {margin:1em;} .shadow-bottom td {padding:0.5em;}

.image {display:block; margin:auto; text-align:center;}

  1. headerimage div {width: 950px; height:298px;}
  1. headerimage {width:950px;}

.btn-toolbar {margin-top:10px; text-align:center;}

body { 

   font-family: Calibri, Verdana, sans-serif;
   color: black;
   margin: 0;
   padding: 0;
   background-color: #fff;

}

.visualClear { 

   clear: both;

}

/* The top section contains the banner, the search box, and the left and right menus */

  1. top-section { 
   position: relative;
   height: 98px;
   width: 975px;
   margin-left: 10px;
   margin: 0 auto 0 auto;
   border-left: 1px solid #444444;
   border-right: 1px solid #444444;
   border-bottom: 1px solid #444444;

}

  1. p-logo { 
   position: absolute;
   z-index: 1;
   height: 107px;
   width: 975px;

}

  1. p-logo h5 { 
   display: none;

}

  1. p-logo a,
  2. p-logo a:hover { 
   text-decoration: none;

}

  1. search-controls { 
   position: absolute;
   top:   20px;
   right: 15px;
   width: 150px;
   height: 40px;
   background-color: transparent;
   text-align: center;
   z-index: 3;

} input.searchButton { 

   margin: 1px 5px 0 10px;
   font-size: 100%;
   background: none;
   border: none;
   color: #AAAAFF;
   font-weight: bold;

} input.searchButton:hover { 

   color: white;

}

  1. searchInput { 
   width: 10.9em;
   margin: 0;
   font-size: 95%;

}

  1. searchGoButton { 
   margin-right: 0px;
   margin-left: 35px;

}

  1. menubar { 
   position: absolute;
   white-space: nowrap;
   top: -6px;
   width: 400px;
   z-index: 5;
   font-family: sans-serif;
   font-size: 95%;
   line-height: 1em;

}

.left-menu, .left-menu a { 

   left: 0px;
   text-align: left;
   color:transparent;
   text-transform: lowercase;

}

.left-menu:hover { 

   color: white;
   background-color: #555555

} .right-menu, .right-menu a { 

   right: 0px;
   text-align: right;
   color: white;

}

  1. menubar ul { 
   color: #555555;
   list-style: none;

}

  1. menubar li { 
   display: inline;
   position: relative;
   cursor: pointer;
   padding-left: 0px;
   padding-right: 0px;

} .left-menu li a { 

   padding: 0px 10px 0px 0px;

}


.left-menu:hover a { 

   color: white;

}

.right-menu li a { 

   padding: 0px 15px 0px 0px;
   color: white;
   background-color: #606060;

} .right-menu li a:hover { 

   color: #aaaaff;
   text-decoration: underline;

}

/* footer */

  1. footer-box { 
   margin-left:  10px;
       margin-top:8em;
   width: 965px;
   padding: 5px;
   background-color: white;

margin: 0 auto; }

  1. footer { 
   color: #000000;
   text-align: center;
   font-size: 90%;;

}

  1. footer li { 
   display: inline;
   margin: 0 1.3em;

}

/* Sponsors box */

  1. sponsor-box { 
   height: 49px;
   width: 975px;
  1. margin-left: 10px;

margin: 0 auto; 

   border-left: 1px solid #444444;
   border-right: 1px solid #444444;
   border-bottom: 1px solid #444444;
   background-color: white;
   font-family: 'verdana' 'arial' sans-serif;
   font-size: 11pt;
   line-height: 1.2em;
   z-index: 5;

}

  1. f-poweredbyico { 
   float: right;

}

  1. f-copyrightico { 
   float: left;

}

/* Pulldown menu boxes */

.hidden { visibility: hidden; } .visible { visibility: visible; }


.menubox { 

   position: absolute;
   top: 20px;
   left: 0px;
   border: 1px solid #A4A4A4;
   background-color: #E0E0E0;
   width: 200px;
       height: 200px;
   z-index: 20;

}

.bridge1 { 

   position: absolute;
   top: 18px;
   left: 1px;
   width: 59px;
       height: 4px;
   background-color: #d8d8d8;
   z-index: 25;

}


.shadow1 { 

   position: absolute;
   top: 23px;
   left: 3px;
   width: 202px;
       height: 202px;
   background-color: #202020;
   border-right: 1px solid #454545;
   border-bottom: 1px solid #454545;
   z-index: 18;
   opacity: 0.6

} .shadow2 { 

   position: absolute;
   top: 25px;
   left: 5px;
   width: 202px;
       height: 202px;
   border-right: 1px solid #606060;
   border-bottom: 1px solid #606060;
   background-color: #303030;
   opacity: 0.4;
   z-index: 16;

} .shadow3 { 

   position: absolute;
   top: 27px;
   left: 7px;
   width: 202px;
       height: 202px;
   border-right: 1px solid #666666;
   border-bottom: 1px solid #666666;
   background-color: #000000;
   opacity: 0.2;
   z-index: 13;

}

/* IGEM RIGHT SIDEBAR STYLING */

  1. right-sidebar { 
   position: absolute;
   right: 0px;
   width: 190px;
   border-left: 3px solid gray;
   font-size: 95%;
   line-height: 90%;

} .right-box { 

   width: 180px;
   padding: 4px 5px 5px 5px;
   margin-top: 10px;
   border: 1px solid #444444;
   border-left: none;

}

.right-box:first-child { 

   margin-top: 0px;

}

.right-heading { 

   font-size: 125%;
   font-weight: bold;
   padding: 0.5em 0 0;
   line-height:100%;

} .right-box ul { 

   line-height: 90%;

} .right-box li { 

   color: #666666;     /* The items are grayed until they have links */

}

/***************************************************************************************************** 

* The content div contains all of the contents of the page - provided by mediawiki
****************************************************************************************************/
  1. content { 
   position: relative;
   width:  965px;
  1. margin-left: 10px;

margin: 0 auto; 

   padding: 5px 5px 5px 5px;
   color: black;
   border-left: 1px solid #444444;
   border-right: 1px solid #444444;
   line-height: 1.5em;
   z-index: 2;

}

  1. column-one { 
   padding-top: 107px;
   position: absolute;
   right: 4px;
   padding: 100px 20px 0 0;

} /* the left column width is specified in class .portlet */


  1. siteSub { 
   display: none;

}

  1. contentSub { 
   font-size: 84%;
   line-height: 1.2em;
   margin: 0 0 1.4em 1em;
   color: #7d7d7d;
   width: auto;

} span.subpages { 

   display: block;

}

/* user notification thing */ .usermessage { 

   background-color: #ffce7b;
   border: 1px solid #ffa500;
   color: black;
   font-weight: bold;
   margin: 2em 0 1em;
   padding: .5em 1em;
   vertical-align: middle;

}

  1. siteNotice { 
   text-align: center;
   font-size: 95%;
   padding: 0 .9em;

}

  1. siteNotice p { 
   margin: 0;
   padding: 0;

} .error { 

   color: red;
   font-size: larger;

}

  1. catlinks { 
   border: 1px solid #aaa;
   background-color: #f9f9f9;
   padding: 5px;
   margin-top: 1em;
   clear: both;

} /* currently unused, intended to be used by a metadata box in the bottom-right corner of the content area */ .documentDescription { 

   /* The summary text describing the document */
   font-weight: bold;
   display: block;
   margin: 1em 0;
   line-height: 1.5em;

} .documentByLine { 

   text-align: right;
   font-size: 90%;
   clear: both;
   font-weight: normal;
   color: #76797c;

}

/* emulate center */ .center { 

   width: 100%;
   text-align: center;

}

  • .center * { 
   margin-left: auto;
   margin-right: auto;

} /* small for tables and similar */ .small, .small * { 

   font-size: 94%;

} table.small { 

   font-size: 100%;

}

/* images */ div.floatright, table.floatright { 

   clear: right;
   float: right;
   position: relative;
   margin: 0 0 .5em .5em;
   border: 0;

/* 

   border: .5em solid white;
   border-width: .5em 0 .8em 1.4em;
  • /

} div.floatright p { font-style: italic; } div.floatleft, table.floatleft { 

   float: left;
   position: relative;
   margin: 0 .5em .5em 0;
   border: 0;

/* 

   margin: .3em .5em .5em 0;
   border: .5em solid white;
   border-width: .5em 1.4em .8em 0;
  • /

} div.floatleft p { font-style: italic; } /* thumbnails */ div.thumb { 

   margin-bottom: .5em;
   border-style: solid;
   border-color: white;
   width: auto;

} div.thumb div { 

   border: 1px solid #ccc;
   padding: 3px !important;
   background-color: #f9f9f9;
   font-size: 94%;
   text-align: center;
   overflow: hidden;

} div.thumb div a img { 

   border: 1px solid #ccc;

} div.thumb div div.thumbcaption { 

   border: none;
   text-align: left;
   line-height: 1.4em;
   padding: .3em 0 .1em 0;

} div.magnify { 

   float: right;
   border: none !important;
   background: none !important;

} div.magnify a, div.magnify img { 

   display: block;
   border: none !important;
   background: none !important;

} div.tright { 

   clear: right;
   float: right;
   border-width: .5em 0 .8em 1.4em;

} div.tleft { 

   float: left;
   margin-right: .5em;
   border-width: .5em 1.4em .8em 0;

}

.hiddenStructure { 

   display: none;

} img.tex { 

   vertical-align: middle;

} span.texhtml { 

   font-family: serif;

}

/*

    • classes for special content elements like town boxes
    • intended to be referenced directly from the wiki src
  • /

/*

    • User styles
  • /

/* table standards */ table.rimage { 

   float: right;
   position: relative;
   margin-left: 1em;
   margin-bottom: 1em;
   text-align: center;

} .toccolours { 

   border: 1px solid #aaa;
   background-color: #f9f9f9;
   padding: 5px;
   font-size: 95%;

} div.townBox { 

   position: relative;
   float: right;
   background: white;
   margin-left: 1em;
   border: 1px solid gray;
   padding: .3em;
   width: 200px;
   overflow: hidden;
   clear: right;

} div.townBox dl { 

   padding: 0;
   margin: 0 0 .3em;
   font-size: 96%;

} div.townBox dl dt { 

   background: none;
   margin: .4em 0 0;

} div.townBox dl dd { 

   margin: .1em 0 0 1.1em;
   background-color: #f3f3f3;

}

/*

    • edit views etc
  • /

.special li { 

   line-height: 1.4em;
   margin: 0;
   padding: 0;

}

/* Page history styling */ /* the auto-generated edit comments */ .autocomment { 

   color: gray;

}

  1. pagehistory span.user { 
   margin-left: 1.4em;
   margin-right: .4em;

}

  1. pagehistory span.minor { 
   font-weight: bold;

}

  1. pagehistory li { 
   border: 1px solid white;

}

  1. pagehistory li.selected { 
   background-color: #f9f9f9;
   border: 1px dashed #aaa;

}

/*

    • Diff rendering
  • /

table.diff, td.diff-otitle, td.diff-ntitle { 

   background-color: white;

} td.diff-addedline { 

   background: #cfc;
   font-size: smaller;

} td.diff-deletedline { 

   background: #ffa;
   font-size: smaller;

} td.diff-context { 

   background: #eee;
   font-size: smaller;

} span.diffchange { 

   color: red;
   font-weight: bold;

}

/*

    • keep the whitespace in front of the ^=, hides rule from konqueror
    • this is css3, the validator doesn't like it when validating as css2
  • /
  1. bodyContent a[href ^="http://"],
  2. bodyContent a[href ^="gopher://"] {

/* background: url(external.png) center right no-repeat; rdr */ /* padding-right: 13px; rdr */ }

  1. bodyContent a[href ^="https://"],

.link-https { 

   background: url(lock_icon.gif) center right no-repeat;
   padding-right: 16px;

}

  1. bodyContent a[href ^="mailto:"],

.link-mailto { 

   background: url(mail_icon.gif) center right no-repeat;
   padding-right: 18px;

}

  1. bodyContent a[href ^="news://"] { 
   background: url(news_icon.png) center right no-repeat;
   padding-right: 18px;

}

  1. bodyContent a[href ^="ftp://"],

.link-ftp { 

   background: url(file_icon.gif) center right no-repeat;
   padding-right: 18px;

}

  1. bodyContent a[href ^="irc://"],

.link-irc { 

   background: url(discussionitem_icon.gif) center right no-repeat;
   padding-right: 18px;

} /* disable interwiki styling */

  1. bodyContent a.extiw,
  2. bodyContent a.extiw:active { 
   color: #36b;
   background: none;
   padding: 0;

} /* this can be used in the content area to switch off special external link styling */

  1. bodyContent .plainlinks a { 
   background: none !important;
   padding: 0;

}

/* the icon in front of the user name, single quotes in bg url to hide it from iemac */ li#pt-userpage, li#pt-anonuserpage, li#pt-login { 

   padding-left: 20px;
   text-transform: none;

}


/* hide from incapable browsers */ head:first-child+body #footer li { white-space: nowrap; }


/* js pref toc */

  1. preftoc { 
   float: left;
   margin: 1em;
   width: 13em;

}

  1. preftoc li { 
   border: 1px solid white;

}

  1. preftoc li.selected { 
   background-color: #f9f9f9;
   border: 1px dashed #aaa;

}

  1. preftoc a,
  2. preftoc a:active { 
   display: block;
   color: #0014a6;

}

  1. prefcontrol { 
   clear: both;
   float: left;
   margin-top: 1em;

} div.prefsectiontip { 

   font-size: 95%;
   margin-top: 1em;

} fieldset.operaprefsection { 

   margin-left: 15em;

}

/*

    • IE/Mac fixes, hope to find a validating way to move this
    • to a separate stylesheet. This would work but doesn't validate:
    • @import("IEMacFixes.css");
  • /

/* tabs: border on the a, not the div */

  • > html #p-cactions li { border: none; }
  • > html #p-cactions li a { 
   border: 1px solid #aaa;
   border-bottom: none;

}

/* * > html #p-cactions li.selected a { border-color: #00bd23; } */ /* footer icons need a fixed width */

  • > html #f-poweredbyico,

/* * > html #f-copyrightico { width: 88px; } */

  • > html #bodyContent,
  • > html #bodyContent pre { 
   overflow-x: auto;
   width: 100%;
   padding-bottom: 25px;

}

/* more IE fixes */ /* float/negative margin brokenness */

  • html #footer {margin-top: 0;}
  • html #column-content { 
   display: inline;
   margin-bottom: 0;

}

  • html div.editsection { font-size: smaller; }
  1. pagehistory li.selected { position: relative; }

/* Mac IE 5.0 fix; floated content turns invisible */

  • > html #column-content { 
   float: none;

}

  • > html #column-one { 
   position: absolute;
   left: 0;
   top: 0;

}

  • > html #footer { 
   margin-left: 13.2em;

} .redirectText { 

   font-size: 150%;
   margin: 5px;

}

.printfooter { 

   display: none;

}

.not-patrolled { 

   background-color: #ffa;

} div.patrollink { 

   font-size: 75%;
   text-align: right;

} span.newpage, span.minor, span.searchmatch { 

   font-weight: bold;

} span.unpatrolled { 

   font-weight: bold;
   color: red;

}

span.searchmatch { 

   color: red;

} .sharedUploadNotice { 

   font-style: italic;

}

span.updatedmarker { 

   color: black;
   background-color: #0f0;

} span.newpageletter { 

   font-weight: bold;
   color: black;
   background-color: yellow;

} span.minoreditletter { 

   color: black;
   background-color: #c5ffe6;

}

table.gallery { 

   border: 1px solid #ccc;
   margin: 2px;
   padding: 2px;
   background-color: white;

}

table.gallery tr { 

   vertical-align: top;

}

table.gallery td { 

   vertical-align: top;
   background-color: #f9f9f9;
   border: solid 2px white;

}

div.gallerybox { 

   margin: 2px;
   width:  150px;

}

div.gallerybox div.thumb { 

   text-align: center;
   border: 1px solid #ccc;
   margin: 2px;

}

div.gallerytext { 

   font-size: 94%;
   padding: 2px 4px;

}

span.comment { 

   font-style: italic;

}

span.changedby { 

   font-size: 95%;

}

.previewnote { 

   text-align: center;
   color: #cc0000;

} .editExternally { 

   border: 1px solid gray;
   background-color: #ffffff;
   padding: 3px;
   margin-top: 0.5em;
   float: left;
   font-size: small;
   text-align: center;

} .editExternallyHelp { 

   font-style: italic;
   color: gray;

}

li span.deleted { 

   text-decoration: line-through;
   color: #888;
   font-style: italic;

}

.toggle { 

   margin-left: 2em;
   text-indent: -2em;

}

/* Classes for EXIF data display */ table.metadata { 

   font-size: 0.8em;
   margin-left: 0.5em;
   margin-bottom: 0.5em;

}

table.metadata caption { 

   font-weight: bold;

}

table.metadata th { 

   font-weight: normal;

}

table.metadata td { 

   padding: 0.1em;

}

table.metadata { 

   border: none;
   border-collapse: collapse;

}

table.metadata td, table.metadata th { 

   text-align: center;
   border: 1px solid #aaaaaa;
   padding-left: 0.1em;
   padding-right: 0.1em;

}

table.metadata th { 

   background-color: #f9f9f9;

}

table.metadata td { 

   background-color: #fcfcfc;

}

/* filetoc */ ul#filetoc { 

   text-align: center;
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   padding: 5px;
   font-size: 95%;
   margin-bottom: 0.5em;
   margin-left: 0;
   margin-right: 0;

}

  1. filetoc li { 
   display: inline;
   list-style-type: none;
   padding-right: 2em;

}

/* @bug 1714 */ input#wpSave, input#wpDiff { 

   margin-right: 0.33em;

}


/* Classes for article validation */

table.revisionform_default { 

   border: 1px solid #000000;

}

table.revisionform_focus { 

   border: 1px solid #000000;
   background-color:#00BBFF;

}

tr.revision_tr_default { 

   background-color:#EEEEEE;

}

tr.revision_tr_first { 

   background-color:#DDDDDD;

}

p.revision_saved { 

   color: green;
   font-weight:bold;

}

  1. mw_trackbacks { 
   border: solid 1px #bbbbff;
   background-color: #eeeeff;
   padding: 0.2em;

}


/* Allmessages table */

  1. allmessagestable th { 
   background-color: #b2b2ff;

}

  1. allmessagestable tr.orig { 
   background-color: #ffe2e2;

}

  1. allmessagestable tr.new { 
   background-color: #e2ffe2;

}

  1. allmessagestable tr.def { 
   background-color: #f0f0ff;

}

  1. p-logo { 
   display: none;

}

  1. searchform { 
   display: none;

}

.left-menu { 

   background-color: #555;

} .left-menu a { 

   color: #000;

}

div#top-section{ /*the div containing the entire top bar*/ 

   height: 20px;
   margin-bottom: 0px !important;
   border: none;

}


  1. content{ 
   margin-top: 0px;

}

  1. search-controls { 
   overflow:hidden;
   display:none;
   background: none;
   position: absolute;
   top: 170px;
   right: 40px;

}


div#header { 

   width: 975px;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px !important;

}

  1. menubar { 
   position: absolute;
   background: none;
   color: black;

}

.left-menu, .right-menu{ 

   position: absolute;
   background: none;
   color: black;

}

.left-menu li a, .right-menu li a { 

   color: #000 !important;

}


.left-menu ul li, .right-menu ul li a{ 

   background: none;
   color: #000 !important;

}

.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active { 

   color: #000 !important;

}

  1. catlinks{ 
   display:none;

}

/*important for background colours*/ .mediawiki{ 

   background: #ffffff;

}

/***End minimal header***/

/*Base styles*/

  1. content{ 
   border: none;

}

  1. content .firstHeading {display:none !important;}
Retrieved from "http://2014.igem.org/Team:CU-Boulder/include/style.css"