Difference between revisions of "Team:Central Calgary/header-footer.css"
(114 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
* { | * { | ||
− | margin: | + | margin:0; |
− | padding:0px | + | padding:0 0 0 0; |
− | + | border: 0px solid transparent; | |
− | |||
− | |||
} | } | ||
+ | |||
+ | body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
#header { | #header { | ||
position:fixed; | position:fixed; | ||
− | top: | + | top:18px; |
− | left: | + | left:0; |
+ | right:0; | ||
height:100px; | height:100px; | ||
margin-bottom:100px; | margin-bottom:100px; | ||
Line 22: | Line 27: | ||
#logo { | #logo { | ||
− | position:absolute | + | position:absolute; |
− | + | ||
width:75px; | width:75px; | ||
width:4vw; | width:4vw; | ||
Line 34: | Line 38: | ||
z-index:100; | z-index:100; | ||
position:absolute; | position:absolute; | ||
− | + | top:25px; | |
+ | top:1.3vw; | ||
left:100px; | left:100px; | ||
left:5.2vw; | left:5.2vw; | ||
Line 41: | Line 46: | ||
font-size:3.33vw; | font-size:3.33vw; | ||
color:rgba(0,0,0,1.00); | color:rgba(0,0,0,1.00); | ||
− | + | /*-webkit-transform: skew(-30deg, 0deg); | |
+ | transform: skew(-30deg, 0deg);*/ | ||
+ | |||
} | } | ||
Line 65: | Line 72: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 202: | 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;
}
- header {
position:fixed; top:18px; left:0; right:0; height:100px; margin-bottom:100px; width:100%; z-index:100; }
- logo {
position:absolute; width:75px; width:4vw; height:75px; height:4vw; z-index:100; }
- 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);*/
}
- 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;
}
- 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;
}
- 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; }