@font-face{
font-family: "Latin-Mono-Regular";
src: url('fonts/lmmono10-regular.otf'),
url('fonts/lmmono10-regular.otf'); /* IE */
}

@font-face{
font-family: "Latin-Mono-Italic";
src: url('fonts/lmmono10-italic.otf'),
url('fonts/lmmono10-italic.otf'); /* IE */
}

@font-face{
font-family: "Roberta";
src: url('fonts/roberta.ttf'),
url('fonts/roberta.ttf'); /* IE */
}

/*use line-height*/
.font{
        line-height: 1px; 
        letter-spacing: 1px;
}

@viewport
{
    width: device-width ;
    zoom: 1.0 ;
} 

body
{
    margin: 20px auto;
    font-size: 16px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    background-color:#000;
    color: #f5f5f5;
    font-family: "Latin-Mono-Regular";
}

h1{
    margin:1px 0;
    color:#FCD612;
    font-size: 100px;
    font-family: 'Roberta';
    font-style: none;
}

h2{
    margin:1px 0;
    color:#FCD612;
    font-size: 25px;
    font-family: "Latin-Mono-Regular";
    font-style: none;
}

h3{
    margin:1px 0;
    font-size: 25px;
    font-family: "Latin-Mono-Regular";
    font-style: none;
}
h4{
    margin:1px 0;
    font-size: 18px;
    font-family: "Latin-Mono-Italic";
    font-style: none;
}

a{
    color:#FFF;
}

#container
{
    margin: 0px auto;
    width: 90%;
    text-align: center;
    vertical-align: middle;
}

#bag
{
    margin: 0px auto;
    position:fixed;
    bottom:0;
    width:100%;
    background:#222;
}

#insidebag
{
    margin: 10px auto;
    font-size: 16px;
    width:100%;
}

table, tbody, tr, td
{
    width: 100%;
}

input, select
{
    padding: 4px;
    color: #ff0000;
    background-color: #111;
    font-size: 18px;
    border: 0px;
    width: 100%;
}

button
{
    margin:10px;
    padding: 4px;
    font-size: 18px;
    color: #ff0000;
    background-color: #222;
    width: 90%;
}

img
{
    max-width: 450px;
    width: 90%;
    height:auto;
}