html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
	background-image:url('img/bg.png');
}

@font-face {
    font-family: Franchise;
    src: url('img/Franchise.ttf'); 
	 
    }


#bannerHolder{width:100%;background-color:#22313F;}
#banner{width:800px;height:100px;margin:auto;
font-size:80px;color:#fff;font-family:Franchise,Arial;}
#promo{text-align:center;padding-top:5px;padding-bottom:5px; margin-bottom:30px;}
#promox{min-height:100px;text-align:center;padding-top:5px;background-color:#336E7B;margin-bottom:30px;}
#banner img{float:left;}

#bannerRight{float:right;font-size:25px;margin-top:20px;color:#fff !important;margin-right:5px;}



h1 {
	margin: 0;
	padding: 0;
}


#page-container {

	width: 850px;
	margin: auto;
	
}

#main-nav {
	 
	height: 50px;
	clear: both;
width: 700px;
	margin: auto;
	
}

#header {
	background: #333333;
	height: 150px;
}

#titlebar{
	margin-left:auto;
margin-right:auto;
width: 1000px;
	height: 70px;
}

#titlebar1 {
 
	background-image:url('title.png');
	height: 70px;
	width: 800px;
	background-repeat:no-repeat;
	float:left;
}


.element{
	height: 35px;
	margin: 1;
	font-size:24px;
	color:#333333;
	font-family: 'Open Sans', sans-serif;
	 
}


.element2{
	
	margin: 1;
	font-size:17px;
	color:#333333;
	font-family: 'Open Sans', sans-serif;
	 
}


#sidebar-a {
	float: right;
	width: 125px;
	background: darkgreen;
}
#content {
	background-color:#fff;
	margin-right: 100px;
	margin-left: 100px;
	position:absolute; width:650px; 
	padding:8px;
	padding-bottom:40px;
}

#footer {
	
	 text-align:center;
	height: 66px;
	width: 700px;
	margin: auto;
}
#titlebar2 {
 
	background-image:url('title2.png');
	height: 70px;
	width: 200px;
	background-repeat:no-repeat;
	position:relative;
	float:right;
	
}

#indexButang{padding:5px;border:1px solid grey;margin-left:10px;cursor:pointer;position:relative;width:150px;text-align:center;}


#backlink{display:none;}

@media screen  and (max-width:800px){

#banner{width:100%;height:auto;}}


@media screen and (min-width:700px) {
#content {height: 450px; overflow:auto;} 
#page-container {height: 450px;}

}

@media screen and (max-width:1000px) {
#titlebar2 { display: none; } 
#titlebar1 { width:90%; background-size:contain;}
#titlebar { width: 100%;}
}

@media screen and (max-width:850px) {
#page-container {width:100%;}
#content {width:90%;position:relative;margin-right: 5%;margin-left: 5%;}
}


@media screen and (max-width:700px) {
#page-container {width:100%;}
#main-nav {width:100%;}
#footer {width:100%;}
#content {margin:auto;}
#bannerRight{display:none;}
}

@media screen and (max-width:550px) {
 #promox{min-height:60px;}
	#banner{font-size:50px;}

#banner img{width:50px;height:50px;}
}

@media screen and (max-width:450px) {
.element{	font-size:16px;}
 
}