@font-face {
    font-family: 'FranklinGothicDemiRegular';
    src: url('fradm.eot');
    src: url('fradm.eot') format('embedded-opentype'),
         url('fradm.woff') format('woff'),
         url('fradm.ttf') format('truetype'),
         url('fradm.svg#FranklinGothicDemiRegular') format('svg');
}
@font-face {
    font-family: 'FranklinGothicBookRegular';
    src: url('frabk.eot');
    src: url('frabk.eot') format('embedded-opentype'),
         url('frabk.woff') format('woff'),
         url('frabk.ttf') format('truetype'),
         url('frabk.svg#FranklinGothicBookRegular') format('svg');
}

@font-face {
    font-family: 'lyonregular';
    src: url('ufonts.com_lyon-regular-webfont.eot');
    src: url('ufonts.com_lyon-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ufonts.com_lyon-regular-webfont.woff') format('woff'),
         url('ufonts.com_lyon-regular-webfont.ttf') format('truetype'),
         url('ufonts.com_lyon-regular-webfont.svg#lyonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
background-color:black;
color:white;
   font-family: 'lyonregular';
width:100%;
background-image:url('/images/wood.jpg');
background-repeat:repeat;
   }

body {
position:relative;

margin: 0 auto;
}

#top {
width:650px;
margin: 0 auto;
text-align:center;
font-size:25px;
margin-top:50px;
}
#top span {
font-size:60px;
    font-family: 'FranklinGothicBookRegular';

}

#top span span {
   font-family: 'lyonregular';
}

#middle {
font-family: 'FranklinGothicBookRegular';
width:600px;
text-align:center;
margin: 0 auto;
font-size:25px;
margin-top:10%;
font-size:40px;
}

ul {
list-style-type:none;
float:left;
}

#bottom {
width:715px;
margin: 0 auto;
bottom: 25;
position:relative;
   font-family: 'lyonregular';
margin-top:15%

}