Difference between revisions of "Team:Central Calgary/css/central igem.css"

Line 2: Line 2:
  
 
/*Make sure to update on launch*/
 
/*Make sure to update on launch*/
 +
@font-face{
 +
font-family: RobotoThin;
 +
src: url('RobotoThin.ttf');
 +
font-stretch: thin;
 +
}
  
−
/*Remove all default margins of the browser*/
+
@font-face{
−
*
+
font-family: RobotoRegular;
−
margin: 0;
+
src: url('Roboto-Regular.ttf');  
−
padding: 0;
+
}
 +
 +
@font-face{
 +
font-family: RobotoLight;
 +
src: url('Roboto-Light.ttf');
 +
}
  
 +
/*Remove all default margins of the browser*/
 +
* {
 +
 +
margin: 0;
 +
padding: 0;
 
}
 
}
  
−
hr { display: block; height: 1px;
+
 
−
    border: 0; border-top: 1px solid white;
+
−
    margin: 1px 0; padding: 0; }
+
  
 
body {
 
body {
 
     background-color: #F2FAFF;
 
     background-color: #F2FAFF;
 +
    background-size: 100%
 
}
 
}
  
−
#hr {
+
/*-----------Header stuff------------*/
−
color: white;
+
/*********Empty header that is swapped with the following 2 headers**********/
−
}
+
  
−
/* Header text styling */
+
/* Header text styling
−
#header {
+
.header {
−
background: #FF9B19;
+
background: #FFCA19;
−
height: 173px;
+
height: 220px;
 
position: relative;
 
position: relative;
 
}
 
}
−
/* Parent that gholds the header text */
+
*/
 +
/*Header that sticks to the top when scrolled*/
 +
.headerSticky-scroll {
 +
position:fixed;
 +
width: 100%;
 +
height: 70px;
 +
    background: #FFAF46;
 +
z-index: 5;
 +
box-shadow: 0px 0px 10px #888888;
 +
whitespace: nowrap;
 +
}
 +
 
 +
#center {
 +
  width: 70%;
 +
  background: #eee;
 +
  margin: 10px auto;
 +
  position: relative;
 +
  text-align:center;
 +
}
 +
 
 +
/* Parent container that holds the header text */
 
#menuText {
 
#menuText {
−
position: absolute;
+
position: fixed;
−
bottom: 8px;
+
top: 15px;  
−
left: 156px;
+
left: 12px;
 
font-family: "RobotoThin";
 
font-family: "RobotoThin";
 +
color: #ffffff
 
}
 
}
  
−
/*Div for the image */
+
#homeText {
−
#menuImage {
+
position: fixed;
−
padding: 0px 1.5%;
+
 
 
}
 
}
  
−
 
+
.parentMenu {
−
h1 {
+
position: absolute;
−
font-family: "RobotoThin"; /*CHANGE SOON! */
+
left: 200px;
−
font-size: 60px;
+
width: 710px;
−
color: white;
+
top: -8px;
−
margin: 5px 17%;
+
−
font-style: normal;
+
 
}
 
}
  
−
h2 {
+
.nav {
−
font-family: "RobotoThin"; /*CHANGE SOON! */
+
  background-color: #FF900;
−
font-size: 24px;
+
  /*border: 1px solid #FFFFFF;*/
−
margin: 5px 15%;
+
  border-radius: 5px;
−
color: white;  
+
  box-shadow: 0 2px 2px -1px #888888);
 +
  color: #FFFFFF;
 +
  display: inline-block;
 +
  margin: 2px 22px 8px 22px;
 +
  overflow: hidden;
 +
  width: 90%;
 +
 
 +
 
 
}
 
}
  
−
/* The Menu bar stuff: */
+
.nav ul {
−
ul {
+
color: #FFFFFF;
−
    list-style-type: none;
+
 
     margin: 0;
 
     margin: 0;
−
     padding: 5px;
+
     padding: 0;
−
overflow: hidden;
+
 
 
}
 
}
  
−
li {
+
.nav ul li {
−
    float: left;
+
      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;
 +
      }
  
−
a:link, a:visited {
+
.nav > ul > li > a {
−
    display: block;
+
        color: #FFFFFF;
−
    width: 50%;
+
        display: block;
−
    font-weight: light;
+
        line-height: 56px;
−
    color: #FFFFFF;
+
        padding: 0 24px;
−
    text-align: center;
+
        text-decoration: none;
−
    padding: 5px 15px;
+
      }
−
text-decoration: none;
+
  
 +
.nav > ul > li:hover {
 +
          background-color: #FF9B19
 
}
 
}
  
−
a:hover
+
.nav > ul > li:hover > a {
−
{
+
          color: #FFFFFF;
−
text-decoration: underline;
+
 
}
 
}
  
−
/*social */
+
.nav > ul > li:hover > a > .caret {
−
#social {
+
          border-top-color: #FF9B19;
−
position: absolute;
+
}
−
    bottom: 5px;
+
−
    left: 85%;
+
.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;
 
}
 
}
  
−
/*footer*/
+
.nav > ul > li:hover > div {
−
.footer {
+
          display: block;
−
font-family: "RobotoRegular";
+
          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;
 +
}
 +
 
 +
 
 +
/*Row 1 of the social icons*/
 +
.icon {
 +
display: inline-block;
 +
padding: 15px 2px;
 +
margin-left: 23px;
 +
opacity: 0.7;
 +
filter: alpha(opacity=70); /* for IE*/
 +
}
 +
 
 +
.icon:hover {
 +
padding: 15px 2px;
 +
margin-left: 23px;
 +
opacity: 2;
 +
}
 +
 
 +
 
 +
/*footer--------------------------------------------------------*/
 +
#footerTop {
 +
font-family: "RobotoThin";
 +
font-style: italic;
 +
text-align: center;
 
color: white;
 
color: white;
−
width: 100%;
 
 
position: relative;
 
position: relative;
 
margin: 0px;
 
margin: 0px;
−
height: 275px;
+
height: 55px;
−
background: #61617C;
+
 +
background: #7EC9FE;
 
display: block;
 
display: block;
 +
box-shadow: 0px 0px 10px #888888;
 +
width: 100%;
 +
display: table;
  
−
}
 
−
 
−
#footerMap {
 
−
font-family: "Roboto"
 
−
font-color: white;
 
−
margin-left: 20px;
 
−
width: 300px;
 
−
text-align: center;
 
−
 
−
 
 
}
 
}
  
 
#footerText {
 
#footerText {
−
font-family: "RobotoRegular"
+
display: table-cell;
−
position: relative;
+
 
text-align: center;
 
text-align: center;
−
padding-top: 10px;
+
vertical-align: middle;
−
 
+
font-size: 30;
−
+
 
}
 
}

Revision as of 03:21, 2 August 2015

@charset "utf-8";

/*Make sure to update on launch*/ @font-face{ font-family: RobotoThin; src: url('RobotoThin.ttf'); font-stretch: thin; }

@font-face{ font-family: RobotoRegular; src: url('Roboto-Regular.ttf'); }

@font-face{ font-family: RobotoLight; src: url('Roboto-Light.ttf'); }

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

  • /

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

   background: #FFAF46;

z-index: 5; box-shadow: 0px 0px 10px #888888; whitespace: nowrap; }

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

}

/* Parent container that holds the header text */

  1. menuText {

position: fixed; top: 15px; left: 12px; font-family: "RobotoThin"; color: #ffffff }

  1. homeText {

position: fixed;

}

.parentMenu { position: absolute; left: 200px; width: 710px; top: -8px; }

.nav { 

	  background-color: #FF900;

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


}

.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: #FF9B19

}

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


/*Row 1 of the social icons*/ .icon { display: inline-block; padding: 15px 2px; margin-left: 23px; opacity: 0.7; filter: alpha(opacity=70); /* for IE*/ }

.icon:hover { padding: 15px 2px; margin-left: 23px; opacity: 2; }


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

  1. footerTop {

font-family: "RobotoThin"; font-style: italic; text-align: center; color: white; position: relative; margin: 0px; height: 55px;

background: #7EC9FE; display: block; box-shadow: 0px 0px 10px #888888; width: 100%; display: table;

}

  1. footerText {

display: table-cell; text-align: center; vertical-align: middle; font-size: 30; }