Team:Calgary/static/basicpagedesktop.css

From 2012.igem.org

(Difference between revisions)
 
(27 intermediate revisions not shown)
Line 7: Line 7:
position: relative;
position: relative;
top: -45px;
top: -45px;
 +
z-index: 999;
}
}
Line 87: Line 88:
}
}
#nav li ul li ul{
#nav li ul li ul{
-
margin-top: -35px;
+
margin-top: -32px;
position: absolute;
position: absolute;
}
}
Line 122: Line 123:
/***Logo styling***/
/***Logo styling***/
#logo{
#logo{
-
position: relative;
+
position: absolute;
-
top: -145px;
+
top: 10px;
right: 20px;
right: 20px;
float: right;
float: right;
Line 135: Line 136:
h1{
h1{
font-size: 2.3em;
font-size: 2.3em;
 +
line-height: 1em;
}
}
h2{
h2{
font-size: 1.8em;
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{
#bodycontainer p{
-
font-size: 1.1em;
+
font-size: 1.2em;
}
}
#pagetitle{
#pagetitle{
Line 147: Line 161:
padding-left: 10px;
padding-left: 10px;
}
}
-
#bodycontainer h2, #bodycontainer p{
+
#bodycontainer h2{
margin-left: 10px;
margin-left: 10px;
margin-right: 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{
#sidebar{
position: absolute;
position: absolute;
-
width: 220px;
+
width: 210px;
-
background: #333333;
+
z-index: 0;
z-index: 0;
}
}
 +
/*
 +
#sidebarimg{
 +
width: 214px;
 +
height: 144px;
 +
background: #43bbff;
 +
margin: 5px 0px;
 +
border: 3px solid #333333;
 +
}
 +
*/
 +
 +
#sidebar #list{
 +
background: #333333;
 +
}
#sidebar h2{
#sidebar h2{
color: white;
color: white;
padding: 20px 15px 0px 15px;
padding: 20px 15px 0px 15px;
-
width: 100%;
+
font-size: 2.0em;
}
}
#sidebar ul{
#sidebar ul{
Line 166: Line 205:
margin: 0px 15px;
margin: 0px 15px;
}
}
-
#sidebar > ul{
+
#sidebar #list > ul{
-
margin-bottom: 20px;
+
padding-bottom: 20px;
}
}
#sidebar a{
#sidebar a{
Line 195: Line 234:
     text-align: center;
     text-align: center;
     overflow: hidden;
     overflow: hidden;
 +
background: transparent;
}
}
div.thumb div a img {
div.thumb div a img {
-
     border: 1px solid #333;
+
     border: none;
}
}
div.thumb div div.thumbcaption {
div.thumb div div.thumbcaption {
-
     border: 1px solid #333;
+
     border: none;
     text-align: left;
     text-align: left;
     line-height: 1.4em;
     line-height: 1.4em;
Line 226: Line 266:
     border-width: .5em 1.4em .8em 0;
     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;
 +
}
 +
 +
/*blues: current page, all rollover links in nav, all sidebar hovers and dropdown menus*/
 +
#proj_o header #projectlink, #proj_o #sidebar #list a:hover, #proj_o #nav li a:hover, #proj_o #nav li a.drop:hover::after,
 +
#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;
 +
}
 +
 +
/*greens: current page, all rollover links in nav, all sidebar hovers, and dropdown menus*/
 +
#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;
 +
}
 +
 +
/*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"