Team:Central Calgary/Template:CentraliGEM/CSS

@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('2015.igem.org/wiki/images/f/f6/Roboto-Light.ttf'); }

contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {

   display:none;}

content {

   display:none;

}

h1 { font-family: "RobotoLight"; font-size: 24px; } /*Remove all default margins of the browser*/

{

margin: 0; padding: 0; }

body {

   background-color: #F2FAFF;
   background-size: 100%

}

/*-----------Header stuff------------*/ /*********Empty header that is swapped with the following 2 headers**********/

/* Header text styling .header { background: #FFCA19; height: 220px; position: relative; }

//*(url();

background-position: left bottom; background-repeat: no-repeat; /*Header that sticks to the top when scrolled*/ .headerSticky-scroll { position:fixed; width: 100%; height: 70px;

   background: #333333;

z-index: 2; whitespace: nowrap; }

center {

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

}

/* Parent container that holds the header text */

menuText {

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

}

homeText {

position: relative; font-family: "RobotoLight"; font-size: 36px; vertical-align: central; padding-bottom: 30px; display: table-cell; vertical-align: middle; }

name {

position: fixed;

   margin-left: 80px;

margin-top: 10px; 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 {

	  background-color: #1256DC

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

}

.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);

}

socialParent {

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

/*Row 1 of the social icons*/

/*BODY SHAIZA--*/

bodyContent {

position: relative; z-index: 1; }

homeonetext {

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

homeoneline {

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

}

homeoneimage {

position: absolute;

}

hometwotext {

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

hometwoline {

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

}

hometwoimage {

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

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

}

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

}

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

}

homethreetext {

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

homethreeline {

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

}

homethreeimage {

position: absolute;

}

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--------------------------------------------------------*/

footer {

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

}

map {

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

}

footerWords {

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

footerLine {

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

footerTop {

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

}

footerText {

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