Team:Newcastle/CSS/main design

From 2013.igem.org

Revision as of 18:40, 2 October 2013 by MLaw (Talk | contribs)

/** 

*
* COLOURS
*
* RED:  #E51837
* BLUE: #00467F
*
*/

/** 

*
* Overwriting WIKI-standard style
*
*/

/** 

*
* Custom stuff
*
*/

body{ 

   margin:0px 0px 8px;
   background:url("BareCillus_Background_wiki.png") fixed;

font-family:"Helvetica"; }

p{ text-indent:15px; 

   font-size:15px;
   padding:5px;
   text-align:left;
   margin:1px 5px 0px;

line-height:1.2em; }

a{ 

   text-decoration:none;
   color:#00467F;

}

ul { margin:.3em 0 0 3em; }

  1. page_content { 
       width:729px;

}

a:visited{ 

   color:#00467F;

}

h1, h2, h3, h4, h5{ 

   color:black;
   background:none;
   font-weight:bold;
   margin:10px;
   padding:5px;
   border:0px;
   font-family:"Helvetica";
   line-height:1.1em;

}

h1{ 

   text-align:center;
   font-size:50px;
   color:black;

}

  1. bodyContent h1{

margin-bottom:5px; }

h2{ 

   font-size:40px;

}

h3{ 

   font-size:32px;

}

h1 .editsection, h2 .editsection, h3 .editsection, h4 .editsection{ display:none; }

h4{ 

   font-size:20px;

}

hr{ width:50%; border-top: 2px solid #E51837; /*border-right: 5px solid white; border-left: 5px solid white; border-bottom:white;*/ margin:0px auto 10px; height:0px; }

hr.blue_bg{ border-right: 5px solid #00467F; border-left: 5px solid #00467F; border-bottom:#00467F; }

hr.blue{ width:50%; border-top: 3px solid #00467F; border-right: 4px solid #E51837; border-left: 4px solid #E51837; border-bottom:#E51837; }

ol ol{ list-style-type:lower-roman; }

div.syntaxhighlighter{ width:735px !important; }

code, .gutter{ font-size:15px; }

  1. top-section{ 
   /*display:none;*/

}

h1.firstHeading{ 

   display:none;

}

  1. title_bar{

width:940px; z-index:9999; margin-bottom:10px; }

  1. title_bar img{

max-width:940px; }

.menu{ 

   clear:both;
   width:980px;
   position:relative;
   left:-10px;
   background-color:#00467F;

-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); 

   z-index:501;

}

.menu:before, .menu:after{ 

   content:" ";
   border-top:10px solid #0563af;
   position:absolute;
   top:35px;

}

.menu:before{ 

   border-left:10px solid transparent;
   left:0px;

}

.menu:after{ 

   border-right:10px solid transparent;
   right:0px;

}

.top_menu { 

   list-style-type:none;
   display:inline-block;
   margin:0px 15px;
   padding:0px;

}

.top_menu li{ 

   display:inline;
   margin:0px;
   float:left;
   position:relative;

}

.top_menu li a{ 

   color:white;
   text-decoration:none;
   display:block;
   padding:5px 10px;
   margin:0px;
   font:20px bold Cambria,sans-serif;
   background-color:#00467F;
   height:25px;

}

.top_menu li a:hover{ 

   background-color: #ffffff;
   color:#00467F;

}

.top_menu ul { 

   float:left;
   list-style-type:none;
   margin:-5px 5px 0px;
   padding:0px;
   position:absolute;
   display:none;

z-index:999; }

.top_menu ul li{ 

   margin:0px;
   display:inline-block;
   float:left;
   clear:left;
   width:150px;

z-index:9999; }

.top_menu ul li a{ 

   color:white;
   text-decoration:none;
   display:block;
   padding:5px 15px;
   margin:0px;
   font:12px bold Cambria,sans-serif;
   background-color: #00467F;
   height:auto;

}

.top_menu ul li a:hover{ 

   background-color:#ffffff;
   color:#00467F;

}

.page_title h1{/* 

   margin:-20px;
   position:relative;
   top:-30px;
   text-align:center;
   font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;
   color:black;*/

}

.col_1{ 

   width:235px;
   display:inline;
   float:left;

}

/** 

*
* RSS Feed stuff
*
*/
  1. rss_feed h4{ 
   color:white;
   text-align:center;

}

  1. rss_feed_tooltip{ 
   display:none;

}

  1. rss_feed,
  2. rss_feed_cover{ 
   width:150px;
   height:100%;
   position:fixed;
   top:0px;

}

  1. rss_feed{ 
   background-color: #E51837;
   box-shadow:0px 0px 20px 5px #D0D0D0;
   z-index:-2;
   cursor:pointer;
   color:white;

}

  1. rss_feed_cover{ 
   background-color: white;
   z-index: -1;

}

  1. rss_feed #title{ 
   position:absolute;
   height:100%;
   left:-63px;
   padding-top:330px;

}

  1. rss_feed #title h2{ 
   transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   font-size:20px;

color:white; 

   padding:0px;
   margin:0px;
   position:relative;
   left:30px;

}


  1. rss_feed #rss_content{ 
   padding:0px 5px 0px 30px;

}

/** 

*
* Social Media Display
*
*/
  1. social_media{

vertical-align:left; margin:15px 10px -17px; }

  1. social_media .social_logo{ 
   float:left;

}

  1. social_media img{

height:50px; 

   float:right;
   margin:2px;

}

  1. social_media .box{

text-align:center; float:left; width:305px; 

   margin:0px 1px;
   padding:3px;

vertical-align:middle; }

  1. social_media .box p,
  2. social_media .box a{ 
   text-indent:0px;
   font-size:12px;
   color:white;

text-align:center; 

   /*display: none !important;*/

}

  1. social_media .fb{ 
   background-color:#6E0610;

}

  1. social_media .twitter{ 
   background-color:#6E0610;
   width:306px;

}

  1. social_media .youtube{ 
   background-color:#6E0610;

}


/** 

* 
* Image display
* 
*/
  1. image_display{

margin-top:-40px; }

  1. image_display h2,
  2. image_display h3,
  3. image_display h4{

/*color:white;*/ margin:10px 2px 0px; text-align:center; }

  1. image_display h3{

text-align:center; }

.image_box{ overflow:hidden; }

.image_box:hover{ 

   cursor:pointer;

}

.display_image{ 

   height:100%;
   width:100%;
   overflow:hidden;

}

.under_text{ 

   padding:5px;
   display:none;
   color:black;

overflow:hidden; 

   text-align:center;

}

.under_text img{ 

  max-width:400px;

}

.under_text img.small{ 

  max-width:275px;

}

.under_text .spacer_l{ float:left; clear:left; }

.under_text .spacer_r{ float:right; clear:right; }

.slice img{ width:400px; }

.under_text h3{ 

   margin:10px 2px 0px;
   padding:0px 5px;

}

.display_image h2{ 

   font-weight:normal;

}

  1. image_display .cliches .cliche_1,
  2. image_display .cliches .cliche_2,
  3. image_display .cliches .cliche_3{ 
   width:140px;
   height:140px;
   float:left;
   background-color:#DADBD5;
   margin:1px;
   padding:2px;

}

.cliches .under_text{ 

   height:100%;
   width:100%;
   vertical-align:middle;
   text-align:center;
   padding:0px;

}

.cliches p{ 

   text-indent:0px;
   padding:0px;
   margin:0px;
   height:100%;
   width:100%;
   text-align:center;

}

.cliches img{ 

   width:140px;

}

.slice_text{ position:absolute; z-index:3; width:100%; }

.left{ 

   float:left;

}

.proj_box{ 

   width:249px;
   height:249px;
   float:left;
   margin:1px;
   cursor:pointer;

}

.title{ 

   margin-top:10px;
   height:46px;
   padding:20px;

}

.title img{ 

   width:462px;

}

.proj_box img{ 

   width:249px;

}

.top_left{ 

   background-color:#FDDC99;

}

.top_right{ 

   background-color:#8EDADA;

}

.bottom_left{ 

   background-color:#BFE2AC;

}

.bottom_right{ 

   background-color:#FABA9E;

}

.project_description{ 

   background-color:#b8dbef;
   width:436px;
   margin-left:1px;

}

/** 

*
* Pop up box style
*
*/
  1. pop_up{ 
   display:none;
   z-index:502;
   position:relative;

}

  1. pop_up_underlay{

height:100%; width:100%; background-color:black; position:fixed; 

   left:0px;

margin:0px; 

   top:0px;

opacity:0.8; 

   text-align:center;
   cursor:pointer;

}

  1. pop_up_display{

height:75%; width:85%; max-width:860px; background-color:white; border-top:10px solid #0563af; border-left:10px solid #0563af; border-right:10px solid #00467F; border-bottom:10px solid #00467F; 

   margin: 5% 35px 0px;
   position:fixed;
   padding:5px;
   top:0px;

}

  1. pop_up_content{ 
   height:100%;
   width:96%;
   overflow-y:auto;

}

  1. pop_up_close{ 
   position:relative;
   z-index:99;
   color:grey;
   font-family:Calibri;
   float:right;
   margin:-3px 5px 6px;
   cursor:pointer;
   font-size:25px;

}

/** 

*
* Preformatted Stuff
*
**/

.side_menu{ 

   float:right;
   width:250px;
   font-family:Cambria;
   border-left:5px solid #E51837;
   margin-right:5px;
   margin-bottom:auto;

}

/** 

*
* Wiki Specific Stuff
* (Overwriting the styles that already exist)
*
**/
  1. content{ 
   position: relative;
   width: 960px;
   margin: 0px auto;
   padding: 5px 0px;
   background: white;
   color: black;
   border:none;
   line-height: 1.5em;
   background-color:white;
   box-shadow:0px 0px 20px 5px #D0D0D0;
   padding-bottom:10px;

}

/* #content will nest if multiple templates are used, bad practise but something you have to cope with, 

   the following overrides certain stylistic features so nested #content divs aren't obvious */
  1. content #content{ 
   margin: 0px;
   padding: 0px;
   background: transparent;
   padding-bottom:0px;
   box-shadow:none;

}

  1. top-section { 
   position: relative;
   width: 960px;
   margin: 0 auto 0 auto;
   border:0px;
   height:0px;

}

  1. p-logo{ 
   display:none;

}

  1. search-controls{ 
   display:none;

}

  1. mw-content-text{

}

  1. toc,

.toc{ 

   float:right;
   position:relative;
   width:200px;
   border:none;
   border-left:5px solid #E51837;
   margin:0px 0px 0px 10px;
   background-color:#00467F;
   padding:0px;

}

  1. toc tbody{ 
   vertical-align:top;

}

  1. toc h2,

.toc h2{ display:block; 

   font:20px bold Cambria,sans-serif;
   color:white;

}

.toctoggle{ 

   display:none;

}

  1. toc h2,

.toc ul{ 

   list-style-type:none;
   padding-left:0px;

}

  1. tod ul li,

.tod ul li{ 

   display:block;
   margin:0px;

}

  1. toc li a,

.toc li a{ 

   padding:5px 5px;
   text-decoration:none;
   background-color:#00467F;
   display:block;
   color:white;
   font:15px bold "Quando","Georgia",serif;
   width:200px;

}

  1. toc li a:hover,

.toc li a:hover,

  1. toc li a.active,

.toc li a.active{ 

   background-color:white;
   color:#00467F;

}

  1. toc ul li ul,

.toc ul li ul{ 

   /*display:none;*/
   margin:0px;

}

.tocnumber{ display:none; }

.toclevel-3, .toclevel-4{ 

   display:none;

}

h2 .editsection{ 

   font:17px "Quando","Georgia",serif;

}

h3 .editsection{ 

   font:14px "Quando","Georgia",serif;

}

h4 .editsection{ 

   font:12px "Quando","Georgia",serif;

}

.page_section img{ max-width:700px; }

/** 

*
* DATA TABLES
*
*/

table.data{ margin:5px auto 15px; border:2px solid #00467F; border-collapse:collapse; border-spacing:0px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); }

table.data tr.odd{ background-color:#3399CC; }

table.data tr.even{ background-color:#0563af; }

table.data td, table.data th{ border-top:2px dashed #00467F; padding:2px 5px; }

table.data tr.odd:hover, table.data tr.even:hover{ background-color:#00467F; pointer:cursor; }

table.data td a{ color:white; }

table.data td a:hover{ text-decoration:none; color:#E51837; }

table.data td{ color:white; }

table.game th, table.game td{ border-right:1px solid #00467F; }

table.game td{ width:100px; text-align:center; }

table.Feedback td.text{ width:350px; }

table.Feedback td.data{ width:50px; }

div.floatleft{ margin:0px; padding:10px; }

  1. logos{

text-align:center; padding:0px; clear:both; }

Retrieved from "http://2013.igem.org/Team:Newcastle/CSS/main_design"