@font-stack: 'fira sansbook' Arial, Helvetica, Courier, sans-serif;

body {
  font-family: $font-stack;
  background: black;
}

#wrapper {
  margin: auto;
  width: 1024px;
}

header .titlebar {
  background: url(image/anothercoolheader.jpg);
  top: 100%;
  width: auto;
  height: 120px;
  padding: 40px;
  margin-bottom: 10px;
}

header .title {
   position: absolute;
}

header h2 p {
  font-family: 'source sans pro';
  color: ;
  width: ;
  text-align: right;
}

.navigation {
  position: absolute;
  right: 1022px;
  top: 192px;
  margin-top: 10px;
  margin-right: 10px;
}

.navigation ul {
  list-style-type: none;
  padding: 15px;
  margin: 10px;
}

.navigation ul li {
  transition: all .5s ease;
  background-color: #7FB2F0;
  padding: 10px;
  padding-right: 25px;
  padding-left: 25px;
}

.navigation ul li a {
  transition: all .5s ease;
  font-family: $font-stack;
  text-decoration: none;
  color: black;
}

.navigation li:hover a{
  display: block;
  color: white;
  
  }

.navigation li:hover {
 display: block;
 background-color: #4E7AC7;
}

.content {
  font-family: 'Source Sans Pro', sans-serif;
  float: right;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 750px;
  padding-right: 50px;
  padding-left: 40px;
  padding-bottom: 20px;
  background-color: #FFF;
  color: ;
  opacity: .8;
}

.JohnRich {
 
}

.chat {
  background-color: hidden;
}

.twitter {
  background-color: #FFF;
  position: absolute;
  left: 1037px;
  width: 150px;
  height: 500px;
  top: 220px;
}

form {
  color: #fff;
  position: absolute;
  right: 320px;
}

form p {
 font-family: 'Quicksand', Arial, Helvetica, Courier, sans-serif;
 font-weight: 10px;
 clear: both;
}

form .space {
  margin-bottom: 40px;
}


.fixedwidth {
  color: white;
  display: inline;
  float: left;
  width: 240px;
  margin: 15px;
  
}

.contact {
position: absolute;
}

.button input {
text-align: center;
background: url('image/bigandrichgradient.jpg');
color: black;
margin-top: 20px;
padding: 5px;
padding-right: 10px;
padding-left: 10px;
position: relative;
left: 270px;
}

.button input:hover {
  background: url('image/bigandrichgradient1.jpg');
  
}

.chat {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 500px;
  height: 500px;
  padding-right: 50px;
  padding-left: 40px;
  background-color: #FFF;
 }

@font-face {
  font-family: 'fira sansbook';
  src: url("FiraSans-Book-webfont.eot");
  src: url("FiraSans-Book-webfont.eot?#iefix") format("embedded-opentype"), url("FiraSans-Book-webfont.woff2") format("woff2"), url("FiraSans-Book-webfont.woff") format("woff"), url("FiraSans-Book-webfont.ttf") format("truetype"), url("FiraSans-Book-webfont.svg#fira_sansbook") format("svg");
  font-weight: normal;
  font-style: normal;
  
	
/*# sourceMappingURL=style.css.map */

/*# sourceMappingURL=style.css.map */
}

@font-face {
    font-family: 'source sans pro';
    src: url('SourceSansPro-Regular-webfont.eot');
    src: url('SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-Regular-webfont.woff2') format('woff2'),
         url('SourceSansPro-Regular-webfont.woff') format('woff'),
         url('SourceSansPro-Regular-webfont.ttf') format('truetype'),
         url('SourceSansPro-Regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}