Foobaru

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>-- Foobaru - Social Network Advertiser --</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-- wrapper Start Here -->

<div id="wrapper">

<!-- Header Start Here -->

<div id="header">

<div id="logo"><a href="index.html"><img src="images/foobaru_logo.gif" alt="logo" border="0" /></a></div>

<div id="header_right">

<div id="slogun"><img src="images/slogun.gif" alt="" /></div>

<div id="top_menu">
	<ul>
	<li><a href="#" class="select"><span>Home</span></a></li>
	<li><a href="#"><span>About Us</span></a></li>
	<li><a href="#"><span>Advertiser</span></a></li>
	<li><a href="#"><span>Publisher</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
	</ul>
</div>

</div>

</div>

<!-- Header End Here -->

<div id="banner"><img src="images/banner_index.jpg" alt="banner" /></div>

<!-- Cotent Start Here -->

<div id="content">

	<div id="content_left">
	<h1><img src="images/heading_adsnetwork.gif" alt="" /></h1>
	<p>Foobaru is a premier advertising network that allows advertisers to reach 
	users of social networks such as Facebook and MySpace.</p>
	<p>We allow you to target your ads to a very precise demographic. You can 
	target users by a certain age, gender, and location. </p>
	<p> </p>
	<h1><img src="images/heading_makemoney.gif" alt="" /></h1>
	<p>Foobaru is a premier advertising network that focuses on helping developers 
	monetize their Facebook and OpenSocial applications.</p>
	<p>The Foobaru targeting system matches the most interesting ads with your 
	application’s user demographics, so that you reap the highest revenue for the 
	available space.
	</p>
	</div>

	<div id="login_box">
		<form action="post">
		<label for="username">Email</label>
		<input type="text" name="username" id="username" value="" /><br />
		<label for="newpassword">Password</label>
		<input type="text" name="newpassword" id="newpassword" value="" /><br />
		<div class="forgot_password"><a href="#">Forgot your password?</a></div>
		
		<div id="login_box_btn"><input type="image" src="images/btn_login.gif" class="signup_button"  /></div>
		</form>
	
	<div id="registration">
		<p><img src="images/heading_registration.gif" alt="" /></p>
		<p>Connect yourself with the advertising and monetization 
		platform for Facebook, MySpace, Hi5, Bebo, 
		& Friendster.</p>
		<p align="right"><a href="#"><img src="images/btn_signup.gif" border="0" alt="" /></a></p>
	</div>
	
	<div class="loginbox_btm"></div>
	
	</div>
	
	</div>


<!-- Content End Here -->


<!-- Footer Start Here -->

<div id="footer">
	<p>Copyright 2007 © Foobaru Social Network Advertising<br />
	The Foobaru Name, Logo and all associated imagery is the property of Foobaru</p>
	<div class="clear"></div>
</div>

<!-- Footer End Here -->

</div>

<!-- Wrapper End Here -->

</body>
</html>

/* CSS Document */

* {
	padding:0;
	margin:0;
}
body {
	background:url(images/bg_body.gif) repeat-x left top;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#282828;
	margin:0 auto;
}
a {
	color:#08426b;
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}
h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	border-bottom:solid 1px #e5e5e5;
	font-size:16px;
	font-weight:bold;
	padding-bottom:10px;
	margin-bottom:15px;
}
h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
	color:#4d5564;
	border-bottom:solid 1px #b2b2b2;
	padding-bottom:10px;
	margin-bottom:10px;
	text-transform:uppercase;
}
h3 {
	font-size:14px;
	font-weight:bold;
	color:#5583dc;
	margin-bottom:8px;
}
h4 {
	font-size:12px;
	font-weight:bold;
	color:#5583dc;
	margin-bottom:8px;
}
p {
	margin-bottom:10px;
	line-height:18px;
}
#wrapper {
	width:900px;
	margin:0 auto;
}
/* Header CSS  */

#header {
	width:880px;
	padding:25px 0 0 20px;
	float:left;
	border-bottom:solid 10px #5271ad;
}
#logo {
	float:left;
}
#header_right {
	float:left;
	width:658px;
}
#slogun {
	float:left;
	margin-top:15px;
}
#top_menu {
	width:505px;
	height:24px;
	margin-top:20px;
	float:right;
}
#top_menu ul {
	list-style:none;
	margin:0;
	padding:0;
}
#top_menu ul li {
	float:left;
	margin:0;
	padding:0;
	display:block;
}
#top_menu ul li a {
	height:24px;
	cursor:pointer;
	vertical-align:middle;
	display:block; /*opera*/
	display:inline-block; /*ie*/
	background:url(images/topmenu_left.gif) no-repeat top left;
	float: left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#5f5f5f;
	line-height: 24px;
	padding-left:21px;
	text-decoration: none;
}
#top_menu ul li a span {
	display:block;
	display:inline-block;
	background:url(images/topmenu_right.gif) no-repeat top right;
	padding:0 20px 0 0;
	white-space:nowrap;
}
#top_menu ul li a:hover, #top_menu ul li a.select {
	color:#ffffff;
	background-position:bottom left;
}
#top_menu ul li a:hover span, #top_menu ul li a.select span {
	color:#ffffff;
	background-position: bottom right;
}
#banner {
	width:900px;
}
/* Content CSS  */

#content {
	width:850px;
	padding:20px;
	float:left;
}
#content_left {
	width:445px;
	float:left;
}
#login_box {
	float:right;
	width:380px;
	background:url(images/login_top.gif) no-repeat left top #c5d9ff;
	padding:60px 0 0 0;
}
#login_box label {
	float: left;
	width: 85px;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	display:block;
	text-align:right;
	line-height:20px;
}
#login_box input {
	height:20px;
	width:230px;
	border:solid 1px #7f9db9;
	margin:0 0 7px 10px;
	background-color:#FFFFFF !Important;
	padding-left:6px;
	color:#333333;
}
#login_box_btn input {
	width:74px;
	height:22px;
	margin:0 0 20px 98px;
	border:none;
	padding:0;
}
#login_box br {
	clear: left;
}
#login_box span {
	font-size:10px;
}
.forgot_password {
	margin:0 0 10px 98px;
}
#registration {
	background:url(images/double_line.gif) repeat-x top;
	padding:25px 15px 0 25px;
	margin:0 12px;
}
.loginbox_btm {
	background:url(images/login_btm.gif) no-repeat left top;
	width:380px;
	height:13px;
}
.step1 {
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	height:18px;
	background:url(images/step1_img.gif) no-repeat left top;
	padding-left:30px;
	margin-bottom:15px;
	font-size:14px;
	color:#5583dc;
	font-weight:bold;
	text-transform:uppercase;
}
.step2 {
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	height:18px;
	background:url(images/step2_img.gif) no-repeat left top;
	padding-left:30px;
	margin-bottom:15px;
	font-size:14px;
	color:#5583dc;
	font-weight:bold;
	text-transform:uppercase;
}
.step3 {
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	height:18px;
	background:url(images/step3_img.gif) no-repeat left top;
	padding-left:30px;
	margin-bottom:15px;
	font-size:14px;
	color:#5583dc;
	font-weight:bold;
	text-transform:uppercase;
}
.step4 {
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	height:18px;
	background:url(images/step4_img.gif) no-repeat left top;
	padding-left:30px;
	margin-bottom:15px;
	font-size:14px;
	color:#5583dc;
	font-weight:bold;
	text-transform:uppercase;
}
.shadow_box {
	width:842px;
	background:url(images/bg_tabbox.gif) repeat-y;
	margin:5px 0 20px 0;
}
.tab_inner {
	width:815px;
	margin:0 auto;
}
.tab_innerleft {
	width:212px;
	float:left;
	padding:10px 0 0 0;
}
.tab_innerleft a {
	display:block;
	width:212px;
	height:49px;
	text-align:center;
	line-height:49px;
	font-size:12px;
	color:#282828;
	font-weight:bold;
	text-decoration:none;
}
.tab_innerleft a:hover, .tab_innerleft .tab_select {
	background:url(images/tab_select.gif) no-repeat;
	width:212px;
	height:49px;
	text-align:center;
	line-height:49px;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}
.tab_innerright {
	width:603px;
	background:url(images/bgtab_innerbox.gif) repeat-y;
	float:right;
}
.tab_innerright_txt {
	width:567px;
	background:url(images/bgtab_innerbox.gif) repeat-y;
	padding:0 18px;
}
.select_countires {
	background-color:#eef4ff;
	border:solid 1px #cccccc;
	padding:15px;
}
.country_name {
	float:left;
	width:125px;
	margin-right:15px;
}
.set_budget {
	width:842px;
	margin:0 auto;
	margin:0 0 15px 0;
}
.blue_box {
	width:842px;
	background:url(images/bg_bluebox.gif) repeat-y;
	margin:5px 0 0 0;
}
.blue_boxtxt {
	padding:15px 25px;
}
.payclicks {
	width:230px;
	float:left;
	margin:20px 0 0 70px;
}
.payclicks label {
	float: left;
	width: 100px;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	display:block;
	text-align:right;
}
.payclicks input {
	height:19px;
	width:107px;
	border:solid 1px #555555;
	margin:0 0 7px 10px;
	background-color:#FFFFFF !Important;
	padding:4px 0 0 6px;
	color:#333333;
	font-size:11px;
	color:#7b7b7b;
}
.payclicks br {
	clear: left;
}
.payclicks_txt {
	width:475px;
	float:right;
}
.embose_box {
	width:842px;
	margin:0 auto;
	background:url(images/bg_embosebox.gif) repeat-y;
}
.embose_boxtxt {
	padding:10px 15px;
}
.review_ad {
	padding:10px 25px;
	border-top:solid 1px #b2b2b2;
	line-height:25px;
}
.max_bid {
	height:37px;
	background-color:#ccdaf5;
	border-top:solid 1px #bfbfbf;
	line-height:37px;
	padding:0 25px;
	font-weight:bold;
	font-size:12px;
}
.red_txt {
	color:#ed0909;
}
.banner_txt {
	padding:10px 30px;
}
.upload_banner {
	float:left;
	width:500px;
	float:left;
}
.file_dimension {
	float:right;
	width:200px;
	padding:15px;
	border:dashed 1px #000000;
	background-color:#ffffe7;
	margin:20px 0 0 0;
}
.general_form {
	padding:15px 0 0 0;
}
.general_form label {
	float: left;
	width: 150px;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	display:block;
	text-align:right;
	font-weight:bold;
}
.general_form input {
	height:19px;
	width:320px;
	border:solid 1px #555555;
	margin:0 0 15px 10px;
	background-color:#FFFFFF !Important;
	padding:4px 0 0 6px;
	color:#333333;
	font-size:11px;
	color:#7b7b7b;
}
.general_form br {
	clear: left;
}
.general_form span {
	clear:left;
	position:relative;
	left:165px;
	top:-10px;
	color:#616161;
}
.dimension_name {
	float:left;
	line-height:20px;
}
.dimension_size {
	float:right;
	line-height:20px;
}
.clear {
	clear:both;
}
.left {
	float:left;
}
.right {
	float:right
}
/* Footer CSS  */

#footer {
	float:left;
	background:url(images/bg_footer.gif) repeat-x left top;
	width:900px;
	height:52px;
	color:#5c5c5c;
}
#footer p {
	margin:10px 0 0 22px;
	color:#5c5c5c;
}