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('https://static.igem.org/mediawiki/2015/f/f6/Roboto-Light.ttf'); }
- 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;
}
- 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; }
- 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 */
- menuText {
position: absolute; font-size: 30; top:18px; left: 4%; font-family: "RobotoLight"; color: #ffffff; margin-bottom: 20;
}
- homeText {
position: relative; font-family: "RobotoLight"; font-size: 36px;
vertical-align: central; display: table-cell; vertical-align: middle; }
- 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);
}
- 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: 400px; text-align: justify; }
- homeoneline {
color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;
}
- homeoneimage {
position: absolute;
}
- hometwotext {
position: absolute; display: block; width: 800px; margin-left: 100px; text-align: justify; }
- hometwoline {
color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;
}
- hometwoimage {
position: absolute; margin-right: 80; margin-left: 69%; }
- 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: 400px; text-align: justify; }
- homethreeline {
color: #FFFFFF; width:800px; 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; }