/*-------------------------------------------------
Global Style Sheet for Kalahari Kats

version: 0.1
last modified: yyyy.mm.dd by Erica G
author: Erica G
email: egad.coding@gmail.com
website: https://github.com/EricaG13
-------------------------------------------------*/


/*-------------------------------------------------

TABLE OF CONTENTS

- Reset Defaults
- Fonts
- Section Positioning
- Margins, Padding, and Other Spacing
- Borders and Other Decoration

-------------------------------------------------*/


/**** Skip to Main Content Link ****/
#skiptomain{
  position: absolute;
  top: -60px;
  left: 0px;
  padding: 8px;
  z-index: 999;
  color: #FFFFFF;
  background: transparent;
  border: 2px solid #FFFFFF;
  border-width: 0 2px 2px 0;
}
#skiptomain:focus{
  position: absolute;
  top: 0px;
  left: 0px;
  background: #EE0000;
  outline: 0;
  -webkit-transition: top .1s ease-in, background .4s linear;
  transition: top .1s ease-in, background .4s linear;
}


/* ************** Reset Defaults *************** */

* {
	margin: 0;
	border: 0;
	max-width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
*[not:ol,ul,li]{
	padding: 0;
}


/* ******************* Fonts ******************* */

@font-face { 
	font-family: "Artbrush";
	src: url("fonts/artbrush-webfont.eot");
	src: url("fonts/artbrush-webfont.eot?#iefix") format("embedded-opentype"),
	     url("fonts/artbrush-webfont.woff") format("woff"),
	     url("fonts/artbrush-webfont.ttf") format("truetype"),
	     url("fonts/artbrush-webfont.svg#webfont") format("svg");
}

* {
	line-height: 1.25em;
	font-family: -apple-system,BlinkMacSystemFont,
		"Segoe UI",Roboto,"Helvetica Neue",Arial,
		sans-serif,"Apple Color Emoji",
		"Segoe UI Emoji","Segoe UI Symbol";
	font-size: 12pt;
}

h1,h2,h3,h4,h5,h6 {
	font-family: Gabriola, Verdana, Tahoma;
	font-weight: bold;
}
h1 {
	font-size: 30pt;
}
h2 {
	font-size: 26pt;
}
h3 {
	font-size: 22pt;
}
h4, h5, h6 {
	font-size: 16pt;
}

#banner>#alphakat-info *,#banner>#alphakat-info {
	font-size: 10pt;
}
#banner>#alphakat-info>h2 {
	font-size: 16pt;
}
#banner>#weather, #banner>#weather * {
	font-size: 10pt;
	text-align: right;
}
#banner>h1 {
	line-height: 0.9em;
	font-size: 44pt;
	font-size: 8vw;
	font-family: "Artbrush";
	text-align: center;
}
@media screen and (min-width: 1000px) {
  #banner>h1 {
     font-size: 60pt;
  }
}

#nav * {
	font-size: 12pt;
	font-weight: bold;
}

#sidebar h2 {
	font-size: 22pt;
}

/* ************ Section Positioning ************ */



body {
	max-width: 1000px;
	margin: 0 auto;
}

#banner {
	position: relative;
	padding: 21.5% 0 0;
	overflow: hidden;
}
#banner>#alphakat-info {
	position: absolute;
	max-height: 100%;
	top: 50%; left: 0;
	transform: translate(0,-50%);
	overflow: hidden;
}
#banner>h1 {
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translate(-50%,0);
	z-index: 9
}
#banner>#weather {
	position: absolute;
	top: 0;
	right: 0;
}

#nav>ul {
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
	text-align:center;
	list-style-type: none;
}
#nav>ul>li {
	display: table-cell;
	vertical-align: middle;
}
@media screen and (max-width: 842px) {
	#nav>ul>li#chitter{
		width: 104px;
	}
}
#nav a {
	text-decoration: none;
}



/* **** Margins, Padding, and Other Spacing **** */

body {
	margin: 26px auto;
}

#banner #alphakat-info {
	padding: 8px;
}
#banner>#weather {
	padding: 8px;
}

#nav {
	padding: 8px 0;
}

#content {
	margin: 13px 0 0;
}
#main,#sidebar,#footer {
	padding: 13px;
}
#footer {
	text-align: center;
}

p {
	margin: 1em 0;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0.25em 0;
}


/* ******* Borders and Other Decorations ******* */

#banner #alphakat-info {
	border-radius: 0 8px 8px 0;
}
#banner>#weather {
	border-radius: 0 0 0 8px;
}

#head {
	border: 1px solid;
}

#content {
	border-top: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
}
#footer {
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
}