CSS styling only works in chrome - html

Question

I am trying to teach myself web-design and am just starting to get the hang of the basics. I just finished the content of my practice web site for an imaginary restaurant, and was feeling pretty proud of it because it works perfectly in google chrome, but when I checked how it looked in IE and firefox it seems that the CSS styling isn't registering at all.
Here is the code for the home page. The site contains images and links to other pages as well, but my real concern is just getting the CSS to apply correctly across all browsers.
/* Created on : Mar 23, 2015, 3:16:56 PM
Author : Dan
*/
*{
margin:0;
padding: 0;
}
header, nav, aside, article, footer, section {
display: block;
}
figure{
position: relative;
vertical-align: middle;
}
figcaption{
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
padding: .5%;
font-family: 'Smokum', Georgia, Serif;
color: #952706;
font-size: 6em;
text-shadow: 2px 2px black;
}
body{
text-align: center;
background-image: url("Frontier_images/wood084.jpg");
}
body article{
text-align: left;
}
header{
display: inline-block;
overflow:hidden;
margin:0 auto;
border:none;
max-height: 99%;
max-width: 99%;
background-color: rgba(250,240,230,.0);
}
nav{
margin:0 auto;
height: 100%;
min-height: 20px;
background-color: burlywood;
border:solid 2px #4c2e16;
border-radius: 20px;
padding: 1%;
}
nav a{
display: block;
margin:0 auto;
height: auto;
width: 14.28%;
float: left;
text-decoration: none;
outline: none;
text-align: center;
font-family: 'Bitter', serif;
font-size: 1.3em;
font-weight: bold;
color: darkred;
}
nav a:hover{
text-decoration: none;
font-family: 'Bitter', serif;
font-style: italic;
font-weight:bold;
color: firebrick;
}
#mininav{
bottom: 0;
left: 0;
position: fixed;
margin:0 auto;
height:2%;
width: 40%;
background-color: firebrick;
padding: 1%;
}
#mininav a{
display: block;
margin:0 auto;
height: auto;
width: 19%;
float: left;
text-decoration: none;
outline: none;
text-align: center;
font-family: sans-serif;
font-size: .75em;
color: white;
font-weight: bold;
}
article a{
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: darkred;
}
article a:hover{
font-style: italic;
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: firebrick;
}
article a:visited{
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: purple;
}
div * p {
text-indent: 5%;
}
#wrapper{
width: 80%;
margin:0 auto;
background-color: firebrick;
color: burlywood;
box-shadow:-8px 8px 10px -1px black;
padding: 2%;
overflow: hidden;
}
#spillwrapper{
width: 80%;
margin:0 auto;
background-color: firebrick;
color: burlywood;
box-shadow:-8px 8px 10px -1px black;
padding: 2%;
overflow: visible;
}
h1{
font-size: 3em;
font-family: 'Smokum', Georgia, Serif;
text-decoration: none;
margin-bottom: .5em;
margin-top: .5em;
}
a h1{
font-size: 3em;
text-decoration: none;
color: black;
font-family: 'Smokum', Georgia, Serif;
margin-bottom: 0;
}
.menudrop{
list-style-type: none;
padding: 0;
margin-top: 1em;
}
.menudropitem{
padding: 0 1%;
width: 150%;
background-color: rgba( 178,34,34,.7);
font-size: 3em;
text-decoration: none;
color: black;
font-family: 'Smokum', Georgia, Serif;
}
ul{
list-style-position: inside;
}
hr{
color: firebrick;
margin-top:2em;
margin-bottom: 2em;
border-top: dotted 1px;
}
.column1{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230, .7);
color: black;
font-size: 1.1em;
width: 60%;
float: left;
margin-top: 2%;
border-radius: 10px;
}
.column2{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230,.7);
color: black;
font-size: 1.2em;
width: 33%;
margin-top: 2%;
float: right;
border-radius: 10px;
}
.center{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230, .7);
color: black;
font-size: 1em;
font-family: georgia, serif, arial;
width: 60%;
margin: 0 auto;
margin-top: 2%;
border-radius: 10px;
}
footer{
margin: 0 auto;
padding: .5em;
font-weight: bold;
background: white;
background: rgba(255,255,255,.2);
color: darkred;
font-family: sans-serif;
font-size: .8em;
font-style: italic;
height: 100%;
width: 50%;
border-radius: 10px;
text-align: center;
}
table.thumbs{
margin-left: auto;
margin-right: auto;
}
table.thumbs td{
position: relative;
padding: 0 2px;
}
table.thumbs img.small{
width: 100px;
height:100px;
}
/* Large images in left two columns */
table.thumbs img.left {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
visibility: hidden;
}
/* Large images in right two columns */
table.thumbs img.right {
position: absolute;
top: 50%;
right: 50%;
z-index: 10;
visibility: hidden;
}
/* Hover on any table cell */
table.thumbs td:hover img.left,
table.thumbs td:hover img.right,
table.thumbs td:hover img.bottomright,
table.thumbs td:hover img.bottomleft{
visibility: visible;
}
#imgleft{
width: 100%;
height: 33%;
margin-bottom: 6px;
}
#imgleft img{
margin-right: 6px;
}
#imgleft p{
text-indent: 5%;
margin-right: 45%;
}
#imgright{
width: 100%;
height: 33%;
float: right;
text-align: right;
margin-bottom: 6px;
}
#imgright img{
margin-left: 6px;
}
#imgright p{
text-indent: 5%;
margin-left: 50%;
}
#imgleft2{
width: 100%;
height: 33%;
margin-bottom: 6px;
float: left;
}
#imgleft2 img{
margin-right: 6px;
}
#imgleft2 p{
text-indent: 5%;
margin-right: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frontier</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="frontierstyle.css" rel="stylesheet" type="css/text">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Smokum' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<figure>
<img src="Frontier_images/eggskillet.jpg" alt="Egg Skillet">
<figcaption>Frontier</figcaption>
</figure>
</header>
<nav>
Menu
Events
Gallery
Our Family
FAQ
Contact Us
Directions
</nav>
<div id="wrapper">
<article>
<h1>
Hours:
</h1>
<h2>
Mon- Closed<br>
Tues thru Sat- 6am until 1pm<br>
Sun- 8am until 3pm
</h2>
</article>
<section class=column1>
<h1>
Frontier's Concept
</h1>
<p>
Frontier is the first franchise developed by former President of the U.S. Theodore Roosevelt.
Teddy, as he is known to his friends and family, always had a dream of creating
a breakfast house that captured the look and feel of a specific time and place that was
very dear to him.</p>
<p>
Frontier is the realization of that dream. Tucked away in the heart of the pocono mountains,
our establishment seeks to give our guests not only a delicious breakfast, but a completely immersive
experience as well.</p>
<br>
<img src=Frontier_images/cabinflag.jpg>
</p>
</section>
<section class=column2>
<h1>
Accolades
</h1>
<p>
"Killer food, great atmosphere and the friendliest chef."
~City Weekly
</p><br>
<p>
"This might be the quintessential Northern PA restaurant.
The antique log cabin radiates mountain hospitality and the beauty and
bounty of the Poconos are apparent on each plate."
~Happenings Magazine
</p><br>
<p>
"10 Best Restaurants in PA: Local Food and Fine Dining"
~The Culture Trip
</p><br>
</section>
</div>
<footer>
<p>
Frontier Restaurant. All Rights Reserved.
</p>
</footer>
</body>
</html>