Team:Calgary/static/basicpagedesktop.css

From 2012.igem.org

(Difference between revisions)
(Created page with "/*** 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 ...")
 
(76 intermediate revisions not shown)
Line 1: Line 1:
-
/***
+
/*======
-
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
+
Desktop Styling
 +
======*/
-
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code!
+
/***Nav styling***/
-
Check out their wikis at:
+
header{
-
https://2011.igem.org/Team:Brown-Stanford
+
position: relative;
-
https://2012.igem.org/Team:Lethbridge
+
top: -45px;
-
***/
+
z-index: 999;
 +
}
-
#content h1.firstHeading {
+
#nav-wrap{
-
visibility:hidden;
+
height: 0px;
 +
margin-top: -45px;
}
}
-
#p-logo {
+
 
-
display: none;
+
#nav, #nav ul{
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
width: 965px;
 +
height: 100%;
 +
display: table;
 +
 +
}
}
-
#searchform {
+
-
    display: none;
+
/*To be moved to JQ block*/
 +
#menu-icon{
 +
display: none;
}
}
-
.left-menu {
+
/*menu*/
-
background-color: #555;
+
#nav li{
 +
height: auto;
 +
padding: 0;
 +
list-style: none;
 +
float: left;
 +
width: auto;
 +
margin: 0;
 +
background: #333333;
 +
position: relative;
 +
}
 +
#nav > li a{
 +
padding: 0 15px;
 +
}
 +
#nav > li{
 +
background: transparent;
 +
}
 +
/*submenu*/
 +
#nav li ul {
 +
position: absolute;
 +
width: 200px;
 +
display: none;
}
}
-
.left-menu a {
+
#nav li:hover ul {
-
    color: #fff;
+
display: block;
 +
}
 +
/*sub-submenu*/
 +
#nav li ul ul{
 +
margin-left: 230px;
 +
margin-top: -15px;
}
}
-
 
+
#nav li:hover ul ul{
-
div#top-section{ /*the div containing the entire top bar*/
+
display: none;
-
height: 20px;
+
}
-
margin-bottom: 0px !important;
+
#nav li:hover ul, #nav li li:hover ul{
-
border: none;
+
display: block;
}
}
-
 
+
#nav a{
-
 
+
display: block;
-
#content{
+
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
-
margin-top: 0px;
+
color: white;
}
}
-
 
+
#nav li a{
-
#search-controls {
+
line-height: 1.4em; /*centers the text vertically*/
-
overflow:hidden;
+
font-size: 2em;
-
display:none;
+
}
-
background: none;
+
#nav ul li > a{
 +
width: 200px;
 +
}
 +
/*color change after rollover*/
 +
#nav li a:hover, #nav li li a.drop:hover::after{
 +
display: block;
 +
text-decoration: none;
 +
color: #43bbff;
 +
}
 +
#nav li ul li ul{
 +
margin-top: -32px;
position: absolute;
position: absolute;
-
top: 170px;
+
}
-
right: 40px;
+
/*submenu and sub-submenu*/
-
}  
+
#nav li ul li ul li a, #nav li ul li a{
 +
font-size: 1.8em;
 +
}
 +
#nav li li a.drop:after{
 +
content: '>';
 +
padding-left: 20px;
 +
color: #BBB;
 +
display: inline;
 +
float: right;
 +
}
 +
/***End nav styling***/
-
div#header {
+
/***Headerimage***/
-
width: 975px;
+
#headerimage{
-
text-align: left;
+
width: 968px;
-
margin-left: auto;
+
position: relative;
-
margin-right: auto;
+
margin-left: 0px;
-
margin-bottom: 0px !important;
+
margin-bottom: 10px;
-
}  
+
top: 0px;
 +
}
 +
#css-full{
 +
display: none;
 +
}
 +
#css-mobi{
 +
display: block;
 +
top: 0px;
 +
}
-
#menubar {
+
/***Logo styling***/
 +
#logo{
position: absolute;
position: absolute;
-
background: none;
+
top: 10px;
-
color: black;
+
right: 20px;
 +
float: right;
}
}
-
.left-menu, .right-menu{
+
#logo img{
 +
width: 260px;
 +
}
 +
 +
/***Body styling***/
 +
h1{
 +
font-size: 2.3em;
 +
line-height: 1em;
 +
}
 +
h2{
 +
font-size: 1.8em;
 +
line-height: 1.2em;
 +
}
 +
h3{
 +
font-size: 1.6em;
 +
margin: 0px 15px;
 +
font-weight: bold;
 +
}
 +
h4{
 +
font-size: 1.4em;
 +
color: #333333;
 +
margin: 0px 20px;
 +
font-weight: bold;
 +
}
 +
#bodycontainer p{
 +
font-size: 1.2em;
 +
}
 +
#pagetitle{
 +
border-bottom: 2px solid black;
 +
padding-bottom: 10px;
 +
padding-left: 10px;
 +
}
 +
#bodycontainer h2{
 +
margin-left: 10px;
 +
margin-right: 10px;
 +
}
 +
#bodycontainer p{
 +
margin-left: 20px;
 +
margin-right: 10px;
 +
}
 +
#bodycontainer{
 +
margin-left: 220px;
 +
}
 +
#bodycontainer ul{
 +
margin-left: 5.0em;
 +
}
 +
#bodycontainer li{
 +
font-family: Georgia, Serif;
 +
}
 +
#sidebar{
position: absolute;
position: absolute;
-
background: none;
+
width: 210px;
-
color: white;
+
z-index: 0;
}
}
 +
/*
 +
#sidebarimg{
 +
width: 214px;
 +
height: 144px;
 +
background: #43bbff;
 +
margin: 5px 0px;
 +
border: 3px solid #333333;
 +
}
 +
*/
-
.left-menu li, .right-menu li a {
+
#sidebar #list{
-
color: #FFF !important;
+
background: #333333;
 +
}
 +
#sidebar h2{
 +
color: white;
 +
padding: 20px 15px 0px 15px;
 +
font-size: 2.0em;
 +
}
 +
#sidebar ul{
 +
list-style: none;
 +
margin: 0px 15px;
 +
}
 +
#sidebar #list > ul{
 +
padding-bottom: 20px;
 +
}
 +
#sidebar a{
 +
color: white;
 +
font-family: Georgia, Serif;
 +
font-size: 1.4em;
 +
display: block;
 +
line-height: 1.4em;
 +
}
 +
#sidebar a:hover{
 +
text-decoration: none;
 +
color: #43BBFF;
 +
}
 +
 
 +
 
 +
/* thumbnails */
 +
div.thumb {
 +
    margin-bottom: .5em;
 +
    border-style: solid;
 +
    border-color: transparent;
 +
    width: auto;
 +
}
 +
div.thumb div {
 +
    border: 0px;
 +
    padding: 3px !important;
 +
    font-size: 94%;
 +
    text-align: center;
 +
    overflow: hidden;
 +
background: transparent;
 +
}
 +
div.thumb div a img {
 +
    border: none;
 +
}
 +
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;
}
}
 +
/*colouring*/
 +
/*oranges: current page and all sidebar rollovers*/
 +
#home header #homelink, #home #sidebar #list a:hover, #home #nav li a:hover, #home #nav li a.drop:hover::after,
 +
#team header #teamlink, #team #sidebar #list a:hover, #team #nav li a:hover, #team #nav li a.drop:hover::after,
 +
#proj_hp header #projectlink, #proj_hp #sidebar #list a:hover, #proj_hp #nav li a:hover, #proj_hp #nav li a.drop:hover::after,
 +
#parts header #partslink, #parts #sidebar #list a:hover, #parts #nav li a:hover, #parts #nav li a.drop:hover::after,
 +
#notebook header #notebooklink, #notebook #sidebar #list a:hover, #notebook #nav li a:hover, #notebook #nav li a.drop:hover::after,
 +
#outreach header #outreachlink, #outreach #sidebar #list a:hover, #outreach #nav li a:hover, #outreach #nav li a.drop:hover::after,
 +
#sponsors header #sponsorslink, #sponsors #sidebar #list a:hover, #sponsors #nav li a:hover, #sponsors #nav li a.drop:hover::after{
 +
color: #F6A82D;
 +
}
 +
/*oranges: sidebar border*/
 +
#home #sidebar #list,
 +
#team #sidebar #list,
 +
#proj_hp #sidebar #list,
 +
#parts #sidebar #list,
 +
#notebook #sidebar #list,
 +
#outreach #sidebar #list,
 +
#sponsors #sidebar #list{
 +
border-left: 10px solid #F6A82D;
 +
}
 +
/*oranges: links*/
 +
#team #bodycontainer a,
 +
#proj_hp #bodycontainer a,
 +
#parts #bodycontainer a,
 +
#notebook #bodycontainer a,
 +
#outreach #bodycontainer a,
 +
#sponsors #bodycontainer a{
 +
color: #FF7A00;
 +
}
 +
#team #bodycontainer a:visited,
 +
#proj_hp #bodycontainer a:visited,
 +
#parts #bodycontainer a:visited,
 +
#notebook #bodycontainer a:visited,
 +
#outreach #bodycontainer a:visited,
 +
#sponsors #bodycontainer a:visited{
 +
color: #C40;
 +
}
-
.left-menu ul li, .right-menu ul li a{
+
/*blues: current page, all rollover links in nav, all sidebar hovers and dropdown menus*/
-
background: none;
+
#proj_o header #projectlink, #proj_o #sidebar #list a:hover, #proj_o #nav li a:hover, #proj_o #nav li a.drop:hover::after,
-
color: white;
+
#note_o header #notebooklink, #note_o #sidebar #list a:hover, #note_o #nav li a:hover, #note_o #nav li a.drop:hover::after{
 +
color: #43BBFF;
 +
}
 +
/*blues: sidebar border*/
 +
#proj_o #sidebar #list,
 +
#note_o #sidebar #list{
 +
border-left: 10px solid #43BBFF;
 +
}
 +
/*blues: links*/
 +
#proj_o #bodycontainer a,
 +
#note_o #bodycontainer a{
 +
color: #1088CC;
 +
}
 +
#proj_o #bodycontainer a:visited,
 +
#note_o #bodycontainer a:visited{
 +
color: #05B;
}
}
-
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
+
/*greens: current page, all rollover links in nav, all sidebar hovers, and dropdown menus*/
-
    color: white !important;
+
#proj_f header #projectlink, #proj_f #sidebar #list a:hover, #proj_f #nav li a:hover, #proj_f #nav li a.drop:hover::after,
 +
#note_f header #notebooklink, #note_f #sidebar #list a:hover, #note_f #nav li a:hover, #note_f #nav li a.drop:hover::after{
 +
color: #58CD45;
 +
}
 +
/*greens: sidebar border*/
 +
#proj_f #sidebar #list,
 +
#note_f #sidebar #list{
 +
border-left: 10px solid #58CD45;
 +
}
 +
/*greens: links*/
 +
#proj_f #bodycontainer a,
 +
#proj_f #bodycontainer a{
 +
color: #159900;
 +
}
 +
/*greens: links*/
 +
#proj_f #bodycontainer a:visited,
 +
#proj_f #bodycontainer a:visited{
 +
color: #06660B;
}
}
-
/***End minimal header***/
+
/*hub page CSS*/
 +
a.hublink{
 +
text-decoration: none;
 +
margin-left: 15px;
 +
margin-right: 15px;
 +
}
 +
div.hubbox{
 +
margin-left: 15px;
 +
}
 +
div.hubbox img{
 +
float: left;
 +
padding: 15px;
 +
}
 +
div.hubbox h2{
 +
color: white;
 +
padding: 15px 15px 0px 15px;
 +
font-size: 2.0em;
 +
margin-left: 120px !important;
 +
}
 +
div.hubbox p{
 +
color: white;
 +
padding: 0px 15px 15px 15px;
 +
margin-left: 120px !important;
 +
}
 +
div.hubbox b{
 +
font-size: 1.1em;
 +
}

Latest revision as of 03:15, 4 October 2012

/*====== Desktop Styling ======*/

/***Nav styling***/ header{ position: relative; top: -45px; z-index: 999; }

  1. nav-wrap{

height: 0px; margin-top: -45px; }

  1. nav, #nav ul{

list-style: none; margin: 0; padding: 0; width: 965px; height: 100%; display: table;


}

/*To be moved to JQ block*/

  1. menu-icon{

display: none; }

/*menu*/

  1. nav li{

height: auto; padding: 0; list-style: none; float: left; width: auto; margin: 0; background: #333333; position: relative; } #nav > li a{ padding: 0 15px; } #nav > li{ background: transparent; }

/*submenu*/

  1. nav li ul {

position: absolute; width: 200px; display: none; } #nav li:hover ul { display: block; } /*sub-submenu*/

  1. nav li ul ul{

margin-left: 230px; margin-top: -15px; } #nav li:hover ul ul{ display: none; }

  1. nav li:hover ul, #nav li li:hover ul{

display: block; }

  1. nav a{

display: block; font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; color: white; } #nav li a{ line-height: 1.4em; /*centers the text vertically*/ font-size: 2em; } #nav ul li > a{ width: 200px; } /*color change after rollover*/ #nav li a:hover, #nav li li a.drop:hover::after{ display: block; text-decoration: none; color: #43bbff; }

  1. nav li ul li ul{

margin-top: -32px; position: absolute; } /*submenu and sub-submenu*/ #nav li ul li ul li a, #nav li ul li a{ font-size: 1.8em; }

  1. nav li li a.drop:after{

content: '>'; padding-left: 20px; color: #BBB; display: inline; float: right; }

/***End nav styling***/

/***Headerimage***/

  1. headerimage{

width: 968px; position: relative; margin-left: 0px; margin-bottom: 10px; top: 0px; }

  1. css-full{

display: none; }

  1. css-mobi{

display: block; top: 0px; }

/***Logo styling***/

  1. logo{

position: absolute; top: 10px; right: 20px; float: right; }

#logo img{ width: 260px; }

/***Body styling***/ h1{ font-size: 2.3em; line-height: 1em; } h2{ font-size: 1.8em; line-height: 1.2em; } h3{ font-size: 1.6em; margin: 0px 15px; font-weight: bold; } h4{ font-size: 1.4em; color: #333333; margin: 0px 20px; font-weight: bold; }

  1. bodycontainer p{

font-size: 1.2em; }

  1. pagetitle{

border-bottom: 2px solid black; padding-bottom: 10px; padding-left: 10px; }

  1. bodycontainer h2{

margin-left: 10px; margin-right: 10px; }

  1. bodycontainer p{

margin-left: 20px; margin-right: 10px; }

  1. bodycontainer{

margin-left: 220px; }

  1. bodycontainer ul{

margin-left: 5.0em; }

  1. bodycontainer li{

font-family: Georgia, Serif; }

  1. sidebar{

position: absolute; width: 210px; z-index: 0; } /* #sidebarimg{ width: 214px; height: 144px; background: #43bbff; margin: 5px 0px; border: 3px solid #333333; } */

#sidebar #list{ background: #333333; } #sidebar h2{ color: white; padding: 20px 15px 0px 15px; font-size: 2.0em; } #sidebar ul{ list-style: none; margin: 0px 15px; } #sidebar #list > ul{ padding-bottom: 20px; } #sidebar a{ color: white; font-family: Georgia, Serif; font-size: 1.4em; display: block; line-height: 1.4em; } #sidebar a:hover{ text-decoration: none; color: #43BBFF; }


/* thumbnails */ div.thumb { 

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

} div.thumb div { 

   border: 0px;
   padding: 3px !important;
   font-size: 94%;
   text-align: center;
   overflow: hidden;

background: transparent; } div.thumb div a img { 

   border: none;

} 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;

}

/*colouring*/ /*oranges: current page and all sidebar rollovers*/

  1. home header #homelink, #home #sidebar #list a:hover, #home #nav li a:hover, #home #nav li a.drop:hover::after,
  2. team header #teamlink, #team #sidebar #list a:hover, #team #nav li a:hover, #team #nav li a.drop:hover::after,
  3. proj_hp header #projectlink, #proj_hp #sidebar #list a:hover, #proj_hp #nav li a:hover, #proj_hp #nav li a.drop:hover::after,
  4. parts header #partslink, #parts #sidebar #list a:hover, #parts #nav li a:hover, #parts #nav li a.drop:hover::after,
  5. notebook header #notebooklink, #notebook #sidebar #list a:hover, #notebook #nav li a:hover, #notebook #nav li a.drop:hover::after,
  6. outreach header #outreachlink, #outreach #sidebar #list a:hover, #outreach #nav li a:hover, #outreach #nav li a.drop:hover::after,
  7. sponsors header #sponsorslink, #sponsors #sidebar #list a:hover, #sponsors #nav li a:hover, #sponsors #nav li a.drop:hover::after{

color: #F6A82D; } /*oranges: sidebar border*/

  1. home #sidebar #list,
  2. team #sidebar #list,
  3. proj_hp #sidebar #list,
  4. parts #sidebar #list,
  5. notebook #sidebar #list,
  6. outreach #sidebar #list,
  7. sponsors #sidebar #list{

border-left: 10px solid #F6A82D; } /*oranges: links*/

  1. team #bodycontainer a,
  2. proj_hp #bodycontainer a,
  3. parts #bodycontainer a,
  4. notebook #bodycontainer a,
  5. outreach #bodycontainer a,
  6. sponsors #bodycontainer a{

color: #FF7A00; }

  1. team #bodycontainer a:visited,
  2. proj_hp #bodycontainer a:visited,
  3. parts #bodycontainer a:visited,
  4. notebook #bodycontainer a:visited,
  5. outreach #bodycontainer a:visited,
  6. sponsors #bodycontainer a:visited{

color: #C40; }

/*blues: current page, all rollover links in nav, all sidebar hovers and dropdown menus*/

  1. proj_o header #projectlink, #proj_o #sidebar #list a:hover, #proj_o #nav li a:hover, #proj_o #nav li a.drop:hover::after,
  2. note_o header #notebooklink, #note_o #sidebar #list a:hover, #note_o #nav li a:hover, #note_o #nav li a.drop:hover::after{

color: #43BBFF; } /*blues: sidebar border*/

  1. proj_o #sidebar #list,
  2. note_o #sidebar #list{

border-left: 10px solid #43BBFF; } /*blues: links*/

  1. proj_o #bodycontainer a,
  2. note_o #bodycontainer a{

color: #1088CC; }

  1. proj_o #bodycontainer a:visited,
  2. note_o #bodycontainer a:visited{

color: #05B; }

/*greens: current page, all rollover links in nav, all sidebar hovers, and dropdown menus*/

  1. proj_f header #projectlink, #proj_f #sidebar #list a:hover, #proj_f #nav li a:hover, #proj_f #nav li a.drop:hover::after,
  2. note_f header #notebooklink, #note_f #sidebar #list a:hover, #note_f #nav li a:hover, #note_f #nav li a.drop:hover::after{

color: #58CD45; } /*greens: sidebar border*/

  1. proj_f #sidebar #list,
  2. note_f #sidebar #list{

border-left: 10px solid #58CD45; } /*greens: links*/

  1. proj_f #bodycontainer a,
  2. proj_f #bodycontainer a{

color: #159900; } /*greens: links*/

  1. proj_f #bodycontainer a:visited,
  2. proj_f #bodycontainer a:visited{

color: #06660B; }

/*hub page CSS*/ a.hublink{ text-decoration: none; margin-left: 15px; margin-right: 15px; } div.hubbox{ margin-left: 15px; } div.hubbox img{ float: left; padding: 15px; } div.hubbox h2{ color: white; padding: 15px 15px 0px 15px; font-size: 2.0em; margin-left: 120px !important; } div.hubbox p{ color: white; padding: 0px 15px 15px 15px; margin-left: 120px !important; } div.hubbox b{ font-size: 1.1em; }

Retrieved from "http://2012.igem.org/Team:Calgary/static/basicpagedesktop.css"