styles.css

@font-face {
	font-family: 'BebasNeue';
	src: url('fonts/BebasNeue-webfont.eot'); /* IE9 Compat Modes */
	src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('fonts/BebasNeue-webfont.woff') format('woff'), /* Modern Browsers */
	     url('fonts/BebasNeue-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
	     /*url('fonts/BebasNeue-webfont.svg#svgFontName') format('svg');*/ /* Legacy iOS */
	}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Regular-webfont.eot'); /* IE9 Compat Modes */
	src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('fonts/Roboto-Regular-webfont.woff') format('woff'), /* Modern Browsers */
	     url('fonts/Roboto-Regular-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
	     /*url('fonts/Roboto-Regular-webfont.svg#svgFontName') format('svg');*/ /* Legacy iOS */
	}



body {
    background-image: url('img/bg1.png');
    background-repeat: repeat;
    font-family: BebasNeue;
    font-size: 18px;
    letter-spacing: 2px;
}

a {
    cursor: pointer;
}

h1 {
    letter-spacing: 8px;
    line-height: 90%;
}

.panel-default > .panel-heading {
    background-color: white;

}

    .panel-default > .panel-heading > .panel-title > a {
        font-size: 18px;
    }

.panel {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.barArea {
    background-color: rgba(66,139,202,.25);
    width: 100%;
    height: 8px;
}

.bar {
    background-color: rgba(66,139,202,1);
    height: 8px;
    width: 0%;
}

.playerArea {
    margin-bottom: 12px;
    margin-bottom: 12px;
}
.regularText {
    font-family: Roboto;
    font-size: 14px;
    letter-spacing: 0px;
}
.mainDiv{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    padding-right:12px;
    padding-left:12px;
}