Team:Central Calgary/header-footer.css

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