@font-face {
    font-family: 'BlackoakStdRegular';
    src: url('../fonts/blackoakstd-webfont.eot');
    src: url('../fonts/blackoakstd-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/blackoakstd-webfont.ttf') format('truetype'),
    url('../fonts/blackoakstd-webfont.svg#BlackoakStdRegular') format('svg'),
    url('../fonts/blackoakstd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TF2Regular';
    src: url('../fonts/tf2-webfont.eot');
    src: url('../fonts/tf2-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tf2-webfont.ttf') format('truetype'),
    url('../fonts/tf2-webfont.svg#TF2Regular') format('svg'),
    url('../fonts/tf2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TF2BuildTF2Build';
    src: url('../fonts/tf2build-webfont.eot');
    src: url('../fonts/tf2build-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tf2build-webfont.ttf') format('truetype'),
    url('../fonts/tf2build-webfont.svg#TF2BuildTF2Build') format('svg'),
    url('../fonts/tf2build-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TF2Secondary';
    src: url('../fonts/tf2secondary-webfont.eot');
    src: url('../fonts/tf2secondary-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tf2secondary-webfont.ttf') format('truetype'),
    url('../fonts/tf2secondary-webfont.svg#TF2Secondary') format('svg'),
    url('../fonts/tf2secondary-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background:#44433f url("../images/repeat_bg.jpg") top center repeat-y;
    font: 16px 'TF2Secondary';
    color:#dcdcd5;
    margin:0;
}

h1,h2,h3,h4,h5 {
    margin:0;
}

h2 {
    font:35px/40px 'TF2BuildTF2Build';
    color:#eaebe3;
}

h3 {
    font-size:17px;
    color:#d5d4cd;
    opacity:0.2;
}

h4 {
    font:30px/36px 'TF2Secondary';
}

h5 {
    font:24px/24px 'TF2Secondary';
}

header {
    background:url("../images/mp_croissant.png") top left no-repeat;
    height:670px;
}

header h1 {
    position:relative;
    text-indent:-9999px;
    background:url("../images/header.png") top left no-repeat;
    width:944px;
    height:96px;
    left:-25px;
    margin:0;
}

header #casualties {
    position:relative;
    display:inline-block;
    margin-top:240px;
    width:375px;
}

header #casualties p {
    margin:0;
}

ul#ticker {
    padding:0;
}

ul#ticker li {
    display:inline-block;
    float:left;
    margin-right:3px;
    list-style:none;
}

header #back_home {
    font-family:helvetica,arial,sans-serif;
    position:absolute;
    top:250px;
    left:50px;
    background:#fbe3ae;
    -webkit-box-shadow:0 0 5px #000;
    -moz-box-shadow:0 0 5px #000;
    box-shadow:0 0 5px #000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

header #back_home a {
    font-weight:normal;
    padding:8px;
    color:#5b5146;
    font-size:16px;
    letter-spacing:-1px;
    line-height:1.5;
    text-decoration: none;
}

header #back_home:hover {
    background:#edede6;
}

header #classes {
    position:absolute;
    background:url("../images/classes.png") top left no-repeat;
    width:474px;
    height:447px;
    float:right;
    top:215px;
    right:-25px;
}

#outline {
    background:#121013;
    position:relative;
    width:890px;
    margin:0 auto;
}

.wrapper {
    display:inline-block;
    width:810px;
    padding:0 40px;
}

section#stats {
    position:relative;
    width:890px;
    margin:50px 0 50px 0;
}

.player {
    position:relative;
    display:inline-block;
    clear:both;
    width:100%;
    margin:20px 0 20px 0;
}

span.points {
    color:#f6e49b;
}

.kills_hour {
    position:absolute;
    float:right;
    right:0;
    top:5px;
    text-align:right;
}

.plus {
    color:#b7d5ee;
}

.minus {
    color:#c74c46;
}

.kills_hour span.kills {
    font-size:30px;
}

.player img {
    float:left;
    width:48px;
    padding:4px;
    margin: 0 10px 10px 0;
    box-shadow: 0 0 2px #969686;
    border-radius: 5px;
}

.player img.ingame {
    background: rgba(170,208,117,1);
    background: -webkit-gradient(linear, left bottom, left center, from(rgba(142,176,95,1)), to(rgba(170,208,117,1)));
    background: -moz-linear-gradient(bottom, rgba(142,176,95,1), rgba(170,208,117,1));
}

.player img.online {
    background: rgba(146,181,216,1);
    background: -webkit-gradient(linear, left bottom, left center, from(rgba(107,127,163,1)), to(rgba(146,181,216,1)));
    background: -moz-linear-gradient(bottom, rgba(107,127,163,1), rgba(146,181,216,1));
}

.player img.offline, .player img {
    background: rgba(128,122,121,1);
    background: -webkit-gradient(linear, left bottom, left center, from(rgba(98,96,94,1)), to(rgba(128,122,121,1)));
    background: -moz-linear-gradient(bottom, rgba(98,96,94,1), rgba(128,122,121,1));
}

.left {
    float:left;
}

.right {
    float:right;
}

.weapon, .class {
    width:375px;
    min-height:375px;
}

.weapon {
    position:relative;
    top:-50px;
    background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(128,128,128,0.25), transparent 100%);
    background-image: -webkit-radial-gradient(center,50% 50%, rgba(128,128,128,0.25), transparent 100%);
    background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(128,128,128,0.25), transparent 100%);
    background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(128,128,128,0.25), transparent 100%);
    background-image: radial-gradient(50% 50%, 50% 50%, rgba(128,128,128,0.25), transparent 100%);
}

.weapon.rocket img {
    margin-top:77px;
}

.weapon.grenade img {
    margin-top:106px;
}

.weapon.flame img {
    margin-top:95px;
}

.weapon.minigun img {
    margin-top:68px;
}

.weapon.wrench {
    top:0;
}

.weapon.wrench img {
    margin-left:100px;
}

.class.soldier {
    background:url('../images/icn_soldier.png') top right no-repeat;
}

.class.demoman {
    background:url('../images/icn_demoman.png') top right no-repeat;
}

.class.pyro {
    background:url('../images/icn_pyro.png') top right no-repeat;
}

.class.heavy {
    background:url('../images/icn_heavy.png') top right no-repeat;
}

.class.engineer {
    background:url('../images/icn_engineer.png') top right no-repeat;
}

section#video {
    position:relative;
    z-index:2;
    left:-5px;
    background:url("../images/video_container.jpg") top left no-repeat;
    width:900px;
    height:644px;
    box-shadow: 0 0 2px #111;
}

footer {
    position:relative;
    left:-5px;
    width:902px;
    height:44px;
    background:url("../images/footer.png") top left no-repeat;
}

@media handheld, screen and (max-width: 480px), screen and (max-device-width: 480px) {
    body {
        background:url("../images/repeat_bg_mobile.jpg") 0% 50% repeat-y;
    }
    
    header {
        background:url("../images/mp_croissant_mobile.png") top left no-repeat;
        height:auto;
        overflow-x:hidden;
    }
    
    header h1 {
        position:absolute;
        left:0px;
        width:480px;
        height:160px;
        background:url("../images/header_mobile.png") 4px 0px no-repeat;
    }
    
    header #classes {
        display:none;
        position:absolute;
        background:url("../images/classes.png") top left no-repeat;
        width:474px;
        height:447px;
        float:left;
        top:10px;
        left:3px;
    }
    
    header #casualties {
        position:relative;
        display:block;
        width:375px;
        margin-top:220px;
    }
    
    #outline {
        background:none;
        width:420px;
        padding:0 30px;
    }

    .wrapper {
        width:375px;
        padding:0 22px;
    }
    
    .weapon {
        display:none;
    }
    
    .class {
        min-height:0;
        margin-bottom:20px;
    }
    
    h3 {
        margin-bottom:10px;
    }
    
    .player {
        margin:5px 0 5px 0;
    }
    
    section#stats {
        width:420px;
        margin:50px 0 20px 0;
    }
    
    section#video {
        width:440px;
        height:315px;
        background:url("../images/video_container_mobile.jpg") top left no-repeat;
        left:-10px;
        box-shadow: 0 0 5px #111;
    }
    
    footer {
        width:425px;
    }
}

@media handheld, only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    html {
        min-width:944px;
    }
}