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

Revision as of 01:51, 7 September 2015 (view source) Jared (Talk | contribs) ← Older edit		Latest revision as of 03:07, 10 September 2015 (view source) Jared (Talk | contribs)
(30 intermediate revisions by the same user not shown)
Line 4:		Line 4:
	margin:0;		margin:0;
	padding:0 0 0 0;		padding:0 0 0 0;
−	border: 0px solid transparent;	+	border: 0px solid transparent;
		+
	}		}
		+
		+	body {
		+	margin: 0;
		+	padding: 0;
		+	}
		+
	#header {		#header {
Line 31:		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;
−	top:18px;
	font-family:Ubuntu;		font-family:Ubuntu;
	font-size:64px;		font-size:64px;
Line 189:		Line 197:
	}		}
−	#footer {	+	#footerBar {
	z-index:100;		z-index:100;
	position:fixed;		position:fixed;
Line 203:		Line 211:
	#next		#next
	{		{
−	position:absolute;	+	position:fixed;
	right:2px;		right:2px;
	bottom:0px;		bottom:0px;
Line 209:		Line 217:
	display: inline-block;		display: inline-block;
	font: 24px Ubuntu;		font: 24px Ubuntu;
		+	font: 1.25vw Ubuntu;
	overflow: hidden;		overflow: hidden;
	text-decoration: none;		text-decoration: none;
Line 221:		Line 230:
	color: #000000;		color: #000000;
	font-size: 24px;		font-size: 24px;
−	font-size:1.25vw;	+	font-size:1.25vw;
Line 228:		Line 237:
	#back {		#back {
−	position:absolute;	+	position:fixed;
	left:2px;		left:2px;
	bottom:0px;		bottom:0px;
Line 234:		Line 243:
	display: inline-block;		display: inline-block;
	font: 24px Ubuntu;		font: 24px Ubuntu;
		+	font: 1.25vw Ubuntu;
	overflow: hidden;		overflow: hidden;
	text-decoration: none;		text-decoration: none;
Line 246:		Line 256:
	font-size: 24px;		font-size: 24px;
	font-size:1.25vw;		font-size:1.25vw;
−
	}		}
Line 256:		Line 265:
	#next:before, #next:after {		#next:before, #next:after {
	background: #000000;		background: #000000;
−	border-radius: 0.25em;	+	border-radius: 0.02em;
	content: "";		content: "";
	display: block;		display: block;
−	height: 0.5em;	+	height: 0.4em;
	position: absolute;		position: absolute;
	right: 0px;		right: 0px;
Line 268:		Line 277:
	#back:before, #back:after {		#back:before, #back:after {
	background: #000000;		background: #000000;
−	border-radius: 0.25em;	+	border-radius: 0.02em;
	content: "";		content: "";
	display: block;		display: block;
−	height: 0.5em;	+	height: 0.4em;
	position: absolute;		position: absolute;
	left: 0px;		left: 0px;
Line 305:		Line 314:
	.navBar {		.navBar {
−	background-color: rgba(0,0,0,1);	+	background-color: rgba(0,0,0,0);
	height:50px;		height:50px;
−	height:2.5vw;	+	height:2.7vw;
−	position:fixed;	+
	z-index:10;		z-index:10;
−	top:-100px;	+	margin: 0;
−		+	position:fixed;
		+	top:100px;
	}		}
Line 317:		Line 326:
	position:absolute;		position:absolute;
	left:50%;		left:50%;
−	list-style-type: none;
−	margin: 0;
−	padding: 0;
−	margin-left:-50px;
	list-style: none;		list-style: none;
	width:100px;		width:100px;
		+	width:5.21vw;
	height:50px;		height:50px;
	height:2.7vw;		height:2.7vw;
		+	display:inline-block;
		+	float:left;
		+	list-style-type: none;
		+	margin: 0;
		+	padding: 0;
		+	margin-left:-50px;
		+	margin-left:-2.6vw;
	}		}
Line 330:		Line 343:
	position:absolute;		position:absolute;
	left:50%;		left:50%;
−	list-style-type: none;
−	margin: 0;
−	padding: 0;
−	margin-left:-100px;
	list-style: none;		list-style: none;
	width:200px;		width:200px;
		+	width:10.42vw;
	height:50px;		height:50px;
−	height:2.7vw;	+	height:-2.7vw;
		+	display:inline-block;
		+	float:left;
		+	list-style-type: none;
		+	margin: 0;
		+	padding: 0;
		+	margin-left:-100px;
		+	margin-left:-5.21vw;
	}		}
Line 343:		Line 360:
	position:absolute;		position:absolute;
	left:50%;		left:50%;
−	list-style-type: none;
−	margin: 0;
−	padding: 0;
−	margin-left:-350px;
	list-style: none;		list-style: none;
	width:700px;		width:700px;
		+	width:36.46vw;
	height:50px;		height:50px;
	height:2.7vw;		height:2.7vw;
		+	display:inline-block;
		+	float:left;
		+	list-style-type: none;
		+	margin: 0;
		+	padding: 0;
		+	margin-left:-350px;
		+	margin-left:-18.23vw;
	}		}
Line 364:		Line 385:
	.footerButton {		.footerButton {
−	display:inline;	+	display: inline;
		+	width:100px;
		+	width:5.20vw;
	float:left;		float:left;
−	width:100px;	+	margin:0;
	height:50px;		height:50px;
		+	height:2.5vw;
	}		}
Line 379:		Line 403:
	background:rgba(0,0,0,0.00);		background:rgba(0,0,0,0.00);
	font-size: 16px;		font-size: 16px;
−	display:block;	+	font-size:0.84vw;
−	padding: 0;	+	display: inline-block;
−	margin:0;	+	padding:0;
		+	margin:0;
		+	float: left;
	text-decoration: none;		text-decoration: none;
	border-left:rgba(112,112,112,0.1);		border-left:rgba(112,112,112,0.1);
Line 392:		Line 418:
	height:2.7vw;		height:2.7vw;
	width:100px;		width:100px;
		+	width:5.2vw;
	}		}

---

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