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

 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
@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');
 
−
}
 
−
 
−
 
−
 
 
body {
 
body {
 
     background-color: #F2FAFF;
 
     background-color: #F2FAFF;
Line 45: Line 24:
 
#menuText {
 
#menuText {
 
position: fixed;
 
position: fixed;
−
      width: 710px;
+
        width: 720px;
 
top: 35px;  
 
top: 35px;  
−
left: 12px;
+
left: 18px;
−
font-family: "RobotoThin";
+
 
color: #FFFFFF;
 
color: #FFFFFF;
 
}
 
}
 +
 
/*div for the header text*/
 
/*div for the header text*/
 
#headerText {
 
#headerText {
 +
        font-weight: light;
 
         font-size: 24px;
 
         font-size: 24px;
 
position: absolute;
 
position: absolute;
−
         width:140px;
+
         width:160px;
 
color: #FFFFFF;
 
color: #FFFFFF;
−
top: 0px;  
+
top: 5px;  
 
}
 
}
  
 
#parentMenu {
 
#parentMenu {
 +
        width: 700px;
 
position: absolute;
 
position: absolute;
−
left: 200px;
+
left: 140px;
 
top: -15px;
 
top: -15px;
 
}
 
}
Line 195: Line 176:
 
/*footer--------------------------------------------------------*/
 
/*footer--------------------------------------------------------*/
 
#footerTop {
 
#footerTop {
−
font-family: "RobotoThin";
+
font-family: "Roboto";
 
font-style: italic;
 
font-style: italic;
 
text-align: center;
 
text-align: center;

Latest revision as of 02:02, 3 August 2015

body { 

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

}

/*-----------Header stuff------------*/ /*Header that sticks to the top when scrolled*/


.headerSticky-scroll { position:fixed; width: 100%; height: 70px; top: 15px; left: 0px; 

       background: #FFAF46;
       background-color: #FFAF46;
       color: #FFAF46;

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

/* Parent container that holds the header text including the drop down menus */

  1. menuText {

position: fixed; 

       width: 720px;

top: 35px; left: 18px; color: #FFFFFF; }

/*div for the header text*/

  1. headerText {
       font-weight: light;
       font-size: 24px;

position: absolute; 

       width:160px;

color: #FFFFFF; top: 5px; }

  1. parentMenu {
       width: 700px;

position: absolute; left: 140px; top: -15px; }

.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: "Roboto"; 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; }