Difference between revisions of "Team:Central Calgary/Template:CentraliGEM/CSS"

 
(40 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
@font-face{
 
@font-face{
 
font-family: RobotoThin;  
 
font-family: RobotoThin;  
−
src: url('RobotoThin.ttf');
+
src: url('https://static.igem.org/mediawiki/2015/3/3a/RobotoThin.ttf');
 
font-stretch: thin;
 
font-stretch: thin;
 
}
 
}
 
 
−
@font-face{
 
−
font-family: BebasNeue;
 
−
src: url('BebasNeue.otf');
 
−
}
 
  
 
@font-face{
 
@font-face{
 
font-family: RobotoRegular;  
 
font-family: RobotoRegular;  
−
src: url('Roboto-Regular.ttf');  
+
src: url('https://static.igem.org/mediawiki/2015/1/1e/Roboto-Regular.ttf');  
 
}
 
}
 
 
 
@font-face{
 
@font-face{
 
font-family: RobotoLight;
 
font-family: RobotoLight;
−
src: url('Roboto-Light.ttf');
+
src: url('https://static.igem.org/mediawiki/2015/f/f6/Roboto-Light.ttf');
 
}
 
}
  
 
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
−
     display:none;}
+
     display:none;
 +
}
 +
 
  
 
h1 {
 
h1 {
 
font-family: "RobotoLight";
 
font-family: "RobotoLight";
 
font-size: 24px;
 
font-size: 24px;
 +
        color: #FFFFFF;
 
}
 
}
 
/*Remove all default margins of the browser*/
 
/*Remove all default margins of the browser*/
Line 36: Line 35:
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 +
}
 +
 +
 +
html, body, content {
 +
 +
 +
 +
margin:0;
 +
 +
padding:0;
 +
 +
 +
 
}
 
}
  
Line 42: Line 54:
 
     background-color: #F2FAFF;
 
     background-color: #F2FAFF;
 
     background-size: 100%
 
     background-size: 100%
 +
    min-width: 1395px;
 
}
 
}
  
−
/*-----------Header stuff------------*/
+
#top_menu_under{
−
/*********Empty header that is swapped with the following 2 headers**********/
+
display:none;
−
 
+
−
/* Header text styling
+
−
.header {
+
−
background: #FFCA19;
+
−
height: 220px;
+
−
position: relative;
+
 
}
 
}
−
*//*(url(https://static.igem.org/mediawiki/2015/7/77/Central-menubar.jpg);
+
 
−
background-position: left bottom;
+
−
background-repeat: no-repeat;
+
 
/*Header that sticks to the top when scrolled*/
 
/*Header that sticks to the top when scrolled*/
 
.headerSticky-scroll {
 
.headerSticky-scroll {
−
position:fixed;
+
        position: fixed;
−
width: 100%;
+
        left: 0;
−
height: 70px;
+
        top: 0;
−
    background: #333333;
+
        width: 100%;
 +
height: 80px;
 +
        width: 100%;
 +
        background: #333333 repeat;
 
z-index: 2;
 
z-index: 2;
−
whitespace: nowrap;
 
 
}
 
}
  
Line 73: Line 80:
 
   text-align: center;
 
   text-align: center;
 
}
 
}
 +
 +
.parentMenu {
 +
position: fixed;
 +
width: 710px;
 +
top: 12px;
 +
margin-left: 25%;
 +
margin-right: 30%;
 +
font-weight: 300;
 +
    font-family: "RobotoLight";
 +
    font-weight: 100;
 +
    vertical-align: middle;
 +
}
 +
  
 
/* Parent container that holds the header text */
 
/* Parent container that holds the header text */
Line 78: Line 98:
 
position: absolute;
 
position: absolute;
 
font-size: 30;
 
font-size: 30;
−
top: 5px;
+
top:18px;
−
left: 12px;
+
left: 4%;
 
font-family: "RobotoLight";
 
font-family: "RobotoLight";
 
color: #ffffff;
 
color: #ffffff;
Line 90: Line 110:
 
font-family: "RobotoLight";
 
font-family: "RobotoLight";
 
font-size: 36px;
 
font-size: 36px;
 +
 
vertical-align: central;
 
vertical-align: central;
−
padding-bottom: 30px;
 
 
display: table-cell;
 
display: table-cell;
 
vertical-align: middle;
 
vertical-align: middle;
Line 98: Line 118:
 
#name {
 
#name {
 
position: fixed;
 
position: fixed;
−
    margin-left: 80px;
+
        margin-left: 80px;
−
margin-top: 10px;
+
        padding-top: 18px;
 +
        margin-bottom: 18px;
 
text-align:justify;
 
text-align:justify;
  
 
}
 
}
  
−
.parentMenu {
+
 
−
position: fixed;
+
−
width: 710px;
+
−
top: 8px;
+
−
margin-left: 25%;
+
−
margin-right: 30%;
+
−
font-weight: 300;
+
−
    font-family: "RobotoLight";
+
−
    font-weight: 100;
+
−
    vertical-align: middle;
+
−
}
+
  
 
.nav {
 
.nav {
Line 123: Line 134:
 
  color: #FFFFFF;
 
  color: #FFFFFF;
 
  display: inline-block;
 
  display: inline-block;
−
  margin: 2px 22px 8px 22px;
+
  margin: 2px 30px 8px 30px;
 
  overflow: hidden;
 
  overflow: hidden;
 
  width:100%;  
 
  width:100%;  
 
  align: center;
 
  align: center;
 +
          z-index: 1;
  
  
Line 244: Line 256:
 
display: block;
 
display: block;
 
width: 800px;
 
width: 800px;
−
margin-left: 500px;
+
margin-left: 400px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
Line 250: Line 262:
 
#homeoneline {
 
#homeoneline {
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
width:800px;
 
margin-top: 4px;
 
margin-top: 4px;
 
margin-bottom: 8px;
 
margin-bottom: 8px;
Line 264: Line 277:
 
display: block;
 
display: block;
 
width: 800px;
 
width: 800px;
−
margin-left: 150px;
+
margin-left: 100px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
Line 270: Line 283:
 
#hometwoline {
 
#hometwoline {
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
width:800px;
 
margin-top: 4px;
 
margin-top: 4px;
 
margin-bottom: 8px;
 
margin-bottom: 8px;
Line 278: Line 292:
 
position: absolute;
 
position: absolute;
 
margin-right: 80;
 
margin-right: 80;
−
margin-left: 67%;
+
margin-left: 69%;
 
}
 
}
  
Line 329: Line 343:
 
display: block;
 
display: block;
 
width: 800px;
 
width: 800px;
−
margin-left: 500px;
+
margin-left: 400px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
Line 335: Line 349:
 
#homethreeline {
 
#homethreeline {
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
width:800px;
 
margin-top: 4px;
 
margin-top: 4px;
 
margin-bottom: 8px;
 
margin-bottom: 8px;

Latest revision as of 22:48, 27 August 2015

@charset "utf-8";


/*Make sure to update on launch*/

@font-face{ font-family: RobotoThin; src: url('https://static.igem.org/mediawiki/2015/3/3a/RobotoThin.ttf'); font-stretch: thin; }


@font-face{ font-family: RobotoRegular; src: url('https://static.igem.org/mediawiki/2015/1/1e/Roboto-Regular.ttf'); }

@font-face{ font-family: RobotoLight; src: url('https://static.igem.org/mediawiki/2015/f/f6/Roboto-Light.ttf'); }

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;

}


h1 { font-family: "RobotoLight"; font-size: 24px; 

       color: #FFFFFF;

} /*Remove all default margins of the browser*/

  • {

margin: 0; padding: 0; }


html, body, content {


margin:0;

padding:0;


}


body { 

   background-color: #F2FAFF;
   background-size: 100%
   min-width: 1395px;

}

  1. top_menu_under{

display:none; }

/*Header that sticks to the top when scrolled*/ .headerSticky-scroll { 

       position: fixed;
       left: 0;
       top: 0;
       width: 100%;

height: 80px; 

       width: 100%;
       background: #333333 repeat;

z-index: 2; }

  1. center {
 width: 70%;
 background: #eee;
 margin: 10px auto;
 position: relative;
 text-align: center;

}

.parentMenu { position: fixed; width: 710px; top: 12px; margin-left: 25%; margin-right: 30%; font-weight: 300; 

   font-family: "RobotoLight";
   font-weight: 100;
   vertical-align: middle;

}


/* Parent container that holds the header text */

  1. menuText {

position: absolute; font-size: 30; top:18px; left: 4%; font-family: "RobotoLight"; color: #ffffff; margin-bottom: 20;

}

  1. homeText {

position: relative; font-family: "RobotoLight"; font-size: 36px;

vertical-align: central; display: table-cell; vertical-align: middle; }

  1. name {

position: fixed; 

       margin-left: 80px;
       padding-top: 18px;
       margin-bottom: 18px;

text-align:justify;

}


.nav { 

	  background-color: #1256DC

/*border: 1px solid #FFFFFF;*/ border-radius: 5px; box-shadow: 0 0px 8px 10px #888888); color: #FFFFFF; display: inline-block; margin: 2px 30px 8px 30px; overflow: hidden; width:100%; align: center; 

         z-index: 1;


}

.nav ul { color: #FFFFFF 

   margin: 0;
   padding: 0;

}

.nav ul li { 

     display: inline-block;
     list-style-type: none;
       -webkit-transition: all 0.2s;
       -moz-transition: all 0.2s;
       -ms-transition: all 0.2s;
       -o-transition: all 0.2s;
       transition: all 0.2s;

}

.nav > ul > li > a > .caret { 

       border-top: 4px solid #FFFFFF;
       border-right: 4px solid transparent;
       border-left: 4px solid transparent;
       content: "";
       display: inline-block;
       height: 0;
       width: 0;
       vertical-align: middle;
 
       -webkit-transition: color 0.1s linear;
         -moz-transition: color 0.1s linear;
       -o-transition: color 0.1s linear;
         transition: color 0.1s linear; 
     }

.nav > ul > li > a { 

       color: #FFFFFF;
       display: block;
       line-height: 56px;
       padding: 0 24px;
       text-decoration: none;
     }

.nav > ul > li:hover { 

         background-color:

}

.nav > ul > li:hover > a { 

         color: #FFFFFF;

}

.nav > ul > li:hover > a > .caret { 

         border-top-color: #FF9B19;

}

.nav > ul > li > div { 

       background-color: #FF9B19;
       border-top: 0;
       border-radius: 0 0 4px 4px;
       box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
       display: none;
       margin: 0;
       opacity: 0;
       position: absolute;
       width: 165px;
       visibility: hidden;
 
       -webkit-transiton: opacity 0.2s;
       -moz-transition: opacity 0.2s;
       -ms-transition: opacity 0.2s;
       -o-transition: opacity 0.2s;
       -transition: opacity 0.2s;

}

.nav > ul > li:hover > div { 

         display: block;
         opacity: 1;
         visibility: visible;

}

.nav > ul > li > div ul > li { 

           display: block;

}

.nav > ul > li > div ul > li > a { 

             color: #fff;
             display: block;
             padding: 12px 24px;
             text-decoration: none;

}

.nav > ul > li > div ul > li:hover > a { 

             background-color: rgba( 255, 255, 255, 0.1);

}


  1. socialParent {

position: fixed; display: inline-block; margin-left: 10%; }


/*Row 1 of the social icons*/

/*BODY SHAIZA--*/

  1. bodyContent {

position: relative; z-index: 1; }

  1. homeonetext {

position: absolute; display: block; width: 800px; margin-left: 400px; text-align: justify; }

  1. homeoneline {

color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;

}

  1. homeoneimage {

position: absolute;

}

  1. hometwotext {

position: absolute; display: block; width: 800px; margin-left: 100px; text-align: justify; }

  1. hometwoline {

color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;

}

  1. hometwoimage {

position: absolute; margin-right: 80; margin-left: 69%; }

  1. homeOne {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #7F7F79; color: #ffffff; font-family: "RobotoLight";

}


  1. homeTwo {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #4C4C49; color: #ffffff; font-family: "RobotoLight";

}

  1. homeThree {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #8A7B65; color: #ffffff; font-family: "RobotoLight";

}


  1. homethreetext {

position: absolute; display: block; width: 800px; margin-left: 400px; text-align: justify; }

  1. homethreeline {

color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;

}

  1. homethreeimage {

position: absolute;

}

  1. homeFour {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #687F7D; color: #ffffff; font-family: "RobotoLight";

}

/*footer--------------------------------------------------------*/

  1. footer {

position: absolute; display: block; width: 100%; background: #333333; height: 450px; font-weight: bold;

}

  1. map {

position: absolute; margin-top: 118px; margin-left: 30px; box-shadow: 8px 8px 50px #000000;

}

  1. footerWords {

position: relative; width: 805px; margin-left: 35%; margin-top: 150px; font-family: "RobotoThin"; text-align: justify; color: white; font-size: 20px; }

  1. footerLine {

width: 805px; color: #FFFFFF; margin-top: 4px; margin-bottom: 8px; }

  1. footerTop {

position: absolute; background: #333333; box-shadow: 0px 5px 10px #000000; width: 100%; margin-bottom: 1000px; z-index: 2;


}

  1. footerText {

font-family: "RobotoLight"; margin-top: 1%; text-align: center; color: white; }