Difference between revisions of "Team:Central Calgary/header-footer.css"

 
(97 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
* {
 
* {
−
margin:0px 0px 0px 0px;
+
margin:0;
−
padding:0px 0px 0px 0px;
+
padding:0 0 0 0;
 +
        border: 0px solid transparent;
  
 
}
 
}
 +
 +
body {
 +
    margin: 0;
 +
    padding: 0;
 +
}
  
−
h10
 
−
{
 
−
}
 
  
 
#header {
 
#header {
Line 15: Line 18:
 
position:fixed;
 
position:fixed;
 
top:18px;
 
top:18px;
−
left:0px;
+
left:0;
 +
right:0;
 
height:100px;
 
height:100px;
 
margin-bottom:100px;
 
margin-bottom:100px;
Line 23: Line 27:
  
 
#logo {
 
#logo {
−
position:absolute;
+
position:absolute;  
−
        top:0px;
+
 
width:75px;
 
width:75px;
 
width:4vw;
 
width:4vw;
Line 35: Line 38:
 
z-index:100;
 
z-index:100;
 
position:absolute;
 
position:absolute;
−
        top:1.3vw;
+
top:25px;
 +
top:1.3vw;
 
left:100px;
 
left:100px;
−
left:5vw;
+
left:5.2vw;
 
font-family:Ubuntu;
 
font-family:Ubuntu;
 
font-size:64px;
 
font-size:64px;
 
font-size:3.33vw;
 
font-size:3.33vw;
 
color:rgba(0,0,0,1.00);
 
color:rgba(0,0,0,1.00);
−
        border-bottom: 0px;
+
/*-webkit-transform: skew(-30deg, 0deg);
 +
    transform: skew(-30deg, 0deg);*/
 +
 
}
 
}
  
Line 54: Line 60:
 
right:0;
 
right:0;
 
z-index:0;
 
z-index:0;
−
height:50px;
+
height:100px;
 
height:5vw;
 
height:5vw;
 
width:608px;
 
width:608px;
Line 66: Line 72:
 
 
 
 
−
}
 
−
 
−
#footer {
 
−
z-index:100;
 
−
position:fixed;
 
−
bottom:0;
 
−
left:0;
 
−
right:0;
 
−
height:50px;
 
−
height:2.5vw;
 
−
width:100%;
 
−
background-color:rgba(255,255,255,1.0);
 
−
box-shadow: -1px -5px 5px #000000;
 
−
 
 
}
 
}
  
Line 203: Line 195:
 
 
 
 
 +
}
 +
 +
#footerBar {
 +
z-index:100;
 +
position:fixed;
 +
bottom:0;
 +
left:0;
 +
height:50px;
 +
height:2.5vw;
 +
width:100vw;
 +
background-color:rgba(255,255,255,1.0);
 +
box-shadow: -1px -5px 5px #000000;
 +
}
 +
 +
#next
 +
{
 +
position:fixed;
 +
right:2px;
 +
bottom:0px;
 +
    color: #000000;
 +
    display: inline-block;
 +
    font: 24px Ubuntu;
 +
font: 1.25vw Ubuntu;
 +
    overflow: hidden;
 +
    text-decoration: none;
 +
    width: auto;
 +
z-index:100;
 +
 +
}
 +
 +
#next a {
 +
text-decoration:none;
 +
font-family:Ubuntu;
 +
color: #000000;
 +
font-size: 24px;
 +
font-size:1.25vw;
 +
 +
 +
}
 +
 +
 +
#back {
 +
position:fixed;
 +
left:2px;
 +
bottom:0px;
 +
    color: #000000;
 +
    display: inline-block;
 +
    font: 24px Ubuntu;
 +
font: 1.25vw Ubuntu;
 +
    overflow: hidden;
 +
    text-decoration: none;
 +
    width: auto;
 +
z-index:100;
 +
}
 +
 +
#back a {
 +
text-decoration:none;
 +
font-family:Ubuntu;
 +
color: #000000;
 +
font-size: 24px;
 +
font-size:1.25vw;
 +
}
 +
 +
#next { padding: 0.5em 1.5em }
 +
#back { padding: 0.5em 1.5em }
 +
 +
#next { text-align: right }
 +
 +
#next:before, #next:after {
 +
    background: #000000;
 +
    border-radius: 0.02em;
 +
    content: "";
 +
    display: block;
 +
    height: 0.4em;
 +
    position: absolute;
 +
    right: 0px;
 +
    top: 50%;
 +
    width: 1em;
 +
}
 +
 +
#back:before, #back:after {
 +
    background: #000000;
 +
    border-radius: 0.02em;
 +
    content: "";
 +
    display: block;
 +
    height: 0.4em;
 +
    position: absolute;
 +
    left: 0px;
 +
    top: 50%;
 +
    width: 1em;
 +
}
 +
 +
#back:before, #back:after { left: 0 }
 +
 +
#next:before, #back:before {
 +
    -moz-transform: rotate(45deg);
 +
    -ms-transform: rotate(45deg);
 +
    -o-transform: rotate(45deg);
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 +
}
 +
 +
#next:after, #back:after {
 +
    -moz-transform: rotate(-45deg);
 +
    -ms-transform: rotate(-45deg);
 +
    -o-transform: rotate(-45deg);
 +
    -webkit-transform: rotate(-45deg);
 +
    transform: rotate(-45deg);
 +
}
 +
 +
#back:after, #next:before { margin-top: -.36em }
 +
 +
#next:hover, #next:focus { color: #c00 }
 +
#back:hover, #back:focus { color: #c00 }
 +
 +
#next:hover:before, #next:hover:after, #next:focus:before, #next:focus:after { background: #c00000 }
 +
#back:hover:before, #back:hover:after, #back:focus:before, #back:focus:after { background: #c00000 }
 +
 +
.navBar {
 +
background-color: rgba(0,0,0,0);
 +
height:50px;
 +
height:2.7vw;
 +
z-index:10;
 +
margin: 0;
 +
position:fixed;
 +
top:100px;
 +
}
 +
 +
#home {
 +
position:absolute;
 +
left:50%;
 +
list-style: none;
 +
width:100px;
 +
width:5.21vw;
 +
height:50px;
 +
height:2.7vw;
 +
display:inline-block;
 +
float:left;
 +
list-style-type: none;
 +
    margin: 0;
 +
    padding: 0;
 +
margin-left:-50px;
 +
margin-left:-2.6vw;
 +
}
 +
 +
#team {
 +
position:absolute;
 +
left:50%;
 +
list-style: none;
 +
width:200px;
 +
width:10.42vw;
 +
height:50px;
 +
height:-2.7vw;
 +
display:inline-block;
 +
float:left;
 +
list-style-type: none;
 +
    margin: 0;
 +
    padding: 0;
 +
margin-left:-100px;
 +
margin-left:-5.21vw;
 +
}
 +
 +
#project {
 +
position:absolute;
 +
left:50%;
 +
list-style: none;
 +
width:700px;
 +
width:36.46vw;
 +
height:50px;
 +
height:2.7vw;
 +
display:inline-block;
 +
float:left;
 +
list-style-type: none;
 +
    margin: 0;
 +
    padding: 0;
 +
margin-left:-350px;
 +
margin-left:-18.23vw;
 +
}
 +
 +
.disableFooter{
 +
z-index:0;
 +
opacity:0;
 +
}
 +
 +
.activeFooter {
 +
z-index:1;
 +
opacity:1;
 +
}
 +
 +
.footerButton {
 +
display: inline;
 +
width:100px;
 +
width:5.20vw;
 +
float:left;
 +
margin:0;
 +
height:50px;
 +
height:2.5vw;
 +
}
 +
 +
.footerButton a {
 +
text-align:center;
 +
vertical-align:bottom;
 +
line-height:50px;
 +
line-height:2.7vw;
 +
font-family:Ubuntu;
 +
color: #000000;
 +
background:rgba(0,0,0,0.00);
 +
font-size: 16px;
 +
font-size:0.84vw;
 +
display: inline-block;
 +
padding:0;
 +
margin:0;
 +
float: left;
 +
text-decoration: none;
 +
border-left:rgba(112,112,112,0.1);
 +
border-right:rgba(112,112,112,0.1);
 +
border-bottom:rgba(0,0,0,0.00);
 +
border-top:rgba(0,0,0,0.00);
 +
border-width:1px;
 +
border-style: solid;
 +
height:50px;
 +
height:2.7vw;
 +
width:100px;
 +
width:5.2vw;
 +
}
 +
 +
.footerButton a:hover {
 +
background: #7BC781;
 +
}
 +
 +
.inactivePage a
 +
{
 +
border-top: 0px solid transparent;
 +
 +
}
 +
 +
.activePage a {
 +
border-top: 2px solid red;
 
}
 
}

Latest revision as of 03:07, 10 September 2015

@charset "utf-8";

  • {

margin:0; padding:0 0 0 0; 

       border: 0px solid transparent;

}

body { 

   margin: 0;	
   padding: 0;

}


  1. header {

position:fixed; top:18px; left:0; right:0; height:100px; margin-bottom:100px; width:100%; z-index:100; }

  1. logo {

position:absolute; width:75px; width:4vw; height:75px; height:4vw; z-index:100; }

  1. homeText {

z-index:100; position:absolute; top:25px; top:1.3vw; left:100px; left:5.2vw; font-family:Ubuntu; font-size:64px; font-size:3.33vw; color:rgba(0,0,0,1.00); /*-webkit-transform: skew(-30deg, 0deg); 

   transform: skew(-30deg, 0deg);*/

}


  1. headerLeft {

position:fixed; top:18px; left:-40px; right:0; z-index:0; height:100px; height:5vw; width:608px; width:63vw; background-color:rgba(255, 255, 255,1.00); 

 	-webkit-transform: skew(-30deg, 0deg); 
   transform: skew(-30deg, 0deg);

box-shadow: -1px 5px 5px #000000; border-right: 2px solid #000000;


}

  1. headerMenu {

overflow:visible; list-style-type:none; margin:0; padding:0; padding-right:4vw; z-index:1001;

}

.headerMenuItem { overflow:visible; display:inline; top:0px; float:right;

}

a.menuItem {

overflow:visible; display:block; width:5vw; color: #000000; text-decoration:none; padding-top:20px; padding-top:1vw; padding-bottom:4px; padding-right:10px; padding-right:.52vw; padding-left:10px; padding-left:.52vw;

border-left-width:2px; border-left-color:#000000; border-left-style:solid; border-bottom:1px; border-bottom-style:solid; border-right-style:solid; border-right-color:#000000; border-right-width:1px;

font-family:Ubuntu; font-size:14px; font-size:0.8vw; box-shadow: -1px 5px 5px #000000; background-color:rgba(255, 255, 255,1.0);


-webkit-transform: skew(-30deg, 0deg); 

   transform: skew(-30deg, 0deg);

-webkit-backface-visibility: hidden;

-webkit-transition: all 0.3s ease-out; 

   -moz-transition: all 0.3s ease-out;  
   -o-transition: all 0.3s ease-out;  
   transition: all 0.3s ease-out;


}

a.menuItem:hover { /*background-color:rgba(0,184,251,1.00);*/

background-color:rgba(97,252,41,1.00); padding-top:30px; padding-top:1.5vw;


}

a.currentLink { overflow:visible; display:block; width:5vw; color: #000000; text-decoration:none; padding-top:20px; padding-top:1vw; padding-bottom:4px; padding-right:10px; padding-right:.52vw; padding-left:10px; padding-left:.52vw;

border-left-width:2px; border-left-color:#000000; border-left-style:solid; border-bottom:1px; border-bottom-style:solid; border-right-style:solid; border-right-color:#000000; border-right-width:1px;

font-family:Ubuntu; font-size:14px; font-size:0.8vw; box-shadow: -1px 5px 5px #000000; background-color:rgba(97,252,41,1.0);


-webkit-transform: skew(-30deg, 0deg); 

   transform: skew(-30deg, 0deg);

-webkit-backface-visibility: hidden;

-webkit-transition: all 0.3s ease-out; 

   -moz-transition: all 0.3s ease-out;  
   -o-transition: all 0.3s ease-out;  
   transition: all 0.3s ease-out;


}

a.currentLink:hover { padding-top:30px; padding-top:1.5vw;


}

  1. footerBar {

z-index:100; position:fixed; bottom:0; left:0; height:50px; height:2.5vw; width:100vw; background-color:rgba(255,255,255,1.0); box-shadow: -1px -5px 5px #000000; }

  1. next

{ position:fixed; right:2px; bottom:0px; 

   color: #000000;
   display: inline-block;
   font: 24px Ubuntu;

font: 1.25vw Ubuntu; 

   overflow: hidden;
   text-decoration: none;
   width: auto;

z-index:100;

}

  1. next a {

text-decoration:none; font-family:Ubuntu; color: #000000; font-size: 24px; font-size:1.25vw;


}


  1. back {

position:fixed; left:2px; bottom:0px; 

   color: #000000;
   display: inline-block;
   font: 24px Ubuntu;

font: 1.25vw Ubuntu; 

   overflow: hidden;
   text-decoration: none;
   width: auto;

z-index:100; }

  1. back a {

text-decoration:none; font-family:Ubuntu; color: #000000; font-size: 24px; font-size:1.25vw; }

  1. next { padding: 0.5em 1.5em }
  2. back { padding: 0.5em 1.5em }
  1. next { text-align: right }
  1. next:before, #next:after {
   background: #000000;
   border-radius: 0.02em;
   content: "";
   display: block;
   height: 0.4em;
   position: absolute;
   right: 0px;
   top: 50%;
   width: 1em;

}

  1. back:before, #back:after {
   background: #000000;
   border-radius: 0.02em;
   content: "";
   display: block;
   height: 0.4em;
   position: absolute;
   left: 0px;
   top: 50%;
   width: 1em;

}

  1. back:before, #back:after { left: 0 }
  1. next:before, #back:before {
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);

}

  1. next:after, #back:after {
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);

}

  1. back:after, #next:before { margin-top: -.36em }
  1. next:hover, #next:focus { color: #c00 }
  2. back:hover, #back:focus { color: #c00 }
  1. next:hover:before, #next:hover:after, #next:focus:before, #next:focus:after { background: #c00000 }
  2. back:hover:before, #back:hover:after, #back:focus:before, #back:focus:after { background: #c00000 }

.navBar { background-color: rgba(0,0,0,0); height:50px; height:2.7vw; z-index:10; margin: 0; position:fixed; top:100px; }

  1. home {

position:absolute; left:50%; list-style: none; width:100px; width:5.21vw; height:50px; height:2.7vw; display:inline-block; float:left; list-style-type: none; 

   margin: 0;	
   padding: 0;

margin-left:-50px; margin-left:-2.6vw; }

  1. team {

position:absolute; left:50%; list-style: none; width:200px; width:10.42vw; height:50px; height:-2.7vw; display:inline-block; float:left; list-style-type: none; 

   margin: 0;	
   padding: 0;

margin-left:-100px; margin-left:-5.21vw; }

  1. project {

position:absolute; left:50%; list-style: none; width:700px; width:36.46vw; height:50px; height:2.7vw; display:inline-block; float:left; list-style-type: none; 

   margin: 0;	
   padding: 0;

margin-left:-350px; margin-left:-18.23vw; }

.disableFooter{ z-index:0; opacity:0; }

.activeFooter { z-index:1; opacity:1; }

.footerButton { display: inline; width:100px; width:5.20vw; float:left; margin:0; height:50px; height:2.5vw; }

.footerButton a { text-align:center; vertical-align:bottom; line-height:50px; line-height:2.7vw; font-family:Ubuntu; color: #000000; background:rgba(0,0,0,0.00); font-size: 16px; font-size:0.84vw; display: inline-block; padding:0; margin:0; float: left; text-decoration: none; border-left:rgba(112,112,112,0.1); border-right:rgba(112,112,112,0.1); border-bottom:rgba(0,0,0,0.00); border-top:rgba(0,0,0,0.00); border-width:1px; border-style: solid; height:50px; height:2.7vw; width:100px; width:5.2vw; }

.footerButton a:hover { background: #7BC781; }

.inactivePage a { border-top: 0px solid transparent;

}

.activePage a { border-top: 2px solid red; }