/* Community's Stylesheet */

/* Main Elements */
body {
	margin:0;
	color:#5A5A5A;
	font: 12px Arial, Helvetica, sans-serif;
	background: #FFFFFF url(../graphics/body_bg.gif) repeat-x top;
}
body a { color:#1B82C0; text-decoration:none }
body a:hover { color:#8DC01F; text-decoration:none }

img { border:none }

form { margin:0 }
form.reply-form { display:inline }

.float-clear { clear:both }

/* H1 Classes */
.normal {
	margin: 0 0 15px 0;
	color:#8DC01F;
	font-size:18px;
	font-weight:normal;
	letter-spacing:-1px;
	height:20px;
	padding:0 0 0 27px;
	background: url(../graphics/logo_icon.gif) no-repeat left; }
	
p { display:block; line-height:18px; text-align:justify }

.hr {
	margin: 20px 0;
	font-size: 1px;
	height: 1px;
	display:block;
	background: url(../graphics/hr.gif) repeat-x;
	clear:both;
}

/* Form Elements */
.text-box {
	font-size:16px;
	letter-spacing:-1px;
	font-weight:bold;
	color: #1B82C0;
	display:block;
	margin-bottom:10px;
	background: url(../graphics/textbox_bg.gif) repeat-x;
	padding: 4px 0 0 6px;
	width: 219px;
	height: 25px }
	.long { width: 350px !important }	

.large-text-box {
	font: 16px Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-weight:bold;
	color: #1B82C0;
	display:block;
	margin-bottom:10px;
	background: url(../graphics/large_textbox_bg.gif) repeat-x;
	padding: 10px;
	width: 520px;
	height: 90px }
	
.reply-text-box {
	font: 16px Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-weight:bold;
	color: #1B82C0;
	display:block;
	margin-bottom:10px;
	background: url(../graphics/large_textbox_bg.gif) repeat-x;
	padding: 10px;
	width: 480px;
	height: 60px;
	border-color: #A8CA61 !important }

.textbox-label { display:block; font-size:14px; letter-spacing:-1px; margin: 15px 0 6px 0 }
.textbox-sub-label { display:block; font-size:12px; margin: -4px 0 8px 0 }

.login-box { border: 1px solid #6EAF00 }
.normal-box { border: 1px solid #C3C3C3 }
.error-box { border: 1px solid #B44400 }
.error-text { color: #B44400 }

.check-box {
	position:relative;
	top: 1px }
	
.submit-button { margin-top: 10px }

/* Header */
#header-block {
	margin: 0 auto;
	width:900px;
	height:217px;
	background: url(../graphics/header_bg.gif) repeat-x;
}

	#header-block #title-nav { position:relative; width:100%; height:73px }
	
	#header-block #title-nav .left { height:73px; position:absolute; left:20px }
		#header-block #title-nav .left .logo { width:49px; height:49px; float:left; margin:13px 15px 0 0 }
		#header-block #title-nav .left h1 {
			letter-spacing:-1px;
			margin:0;
			padding: 14px 0 10px 0;
			font: bold 22px Arial, Helvetica, sans-serif;
			color: #FFFFFF;
			text-decoration: none }
		#header-block #title-nav .left h1 span {
			letter-spacing:normal;
			position:relative;
			top:-2px;
			display:block;
			font: normal 14px Arial, Helvetica, sans-serif }
		
	#header-block #title-nav .right { position:absolute; bottom:-1px; right:20px }
		#header-block #title-nav .right a {
			float:left;
			display:block;
			font: bold 14px Arial, Helvetica, sans-serif;
			letter-spacing:-1px;
			color: #7BAC2D;
			text-decoration: none;
			background: url(../graphics/header_button.gif) no-repeat;
			text-align: center;
			margin: 0px 0px 0px 10px;
			height: 26px;
			width: 98px;
			padding-top: 7px }
		#header-block #title-nav .right a:hover {
			color: #1B82C0 }
	
	#header-block #advertising-728-90 {
		clear:both; /* Clear the float from the navigation */
		position:relative;
		width:728px;
		height:90px;
		margin: 20px auto }

/* 3 Steps */
#steps-area { display:block; height:48px; width:790px; margin: 20px auto; }
ul.steps { list-style:none }

ul.steps li {
	color:#B44400;
	font-size:20px;
	letter-spacing:-1px;
	float:left;
	margin: 0 10px;
	height:30px;
	padding:5px 0 0 45px }

.step-title { padding:5px 0 0 0 !important; font-weight:bold; color: #5A5A5A !important }
.step-1 { background: url(../graphics/step_1.gif) no-repeat left; }
.step-2 { background: url(../graphics/step_2.gif) no-repeat left; }
.step-3 { background: url(../graphics/step_3.gif) no-repeat left; }

/* Main Window Elements */
#main-window {
	position:relative;
	width:900px;
	margin: 0 auto;
	padding: 0
}
#left-column { position:relative; width:278px; padding: 0 20px 0 30px; margin:0; float:left }
#right-column { position:relative; width:542px; padding: 0 30px 0 0; margin:0; float:left }

/* Join Now! */
#join-now-top {
	font-size:16px;
	font-weight:bold;
	color: #FFFFFF;
	background: url(../graphics/join_now_top.gif) no-repeat;
	position:relative;
	padding-top:30px;
	padding-left:77px;
	width: 201px;
	height: 33px;
	margin-bottom: -10px;
	top: -10px; left:-11px }
	
	/* Search Now! */
	#search-now-top {
		font-size:16px;
		font-weight:bold;
		color: #FFFFFF;
		background: url(../graphics/search_now_top.gif) no-repeat;
		position:relative;
		padding-top:30px;
		padding-left:77px;
		width: 201px;
		height: 33px;
		margin-bottom: -10px;
		top: -10px; left:-11px }
		
	/* Login Now! */
	#login-now-top {
		font-size:16px;
		font-weight:bold;
		color: #FFFFFF;
		background: url(../graphics/login_now_top.gif) no-repeat;
		position:relative;
		padding-top:30px;
		padding-left:77px;
		width: 201px;
		height: 33px;
		margin-bottom: -10px;
		top: -10px; left:-11px }
		
	/* Hello Again! */
	#hello-again-top {
		font-size:16px;
		font-weight:bold;
		color: #FFFFFF;
		background: url(../graphics/hello_again_top.gif) no-repeat;
		position:relative;
		padding-top:30px;
		padding-left:77px;
		width: 201px;
		height: 33px;
		margin-bottom: -10px;
		top: -10px; left:-11px }
		
#join-now-mid {
	color: #FFFFFF;
	width:227px;
	line-height: 18px;
	padding: 20px 20px 14px 20px;
	background: url(../graphics/join_now_mid.gif) repeat-y }
	#join-now-mid a { color: #CFF084; font-size: 15px }
	#join-now-mid a:hover { color: #FFFFFF }
	
#join-now-bottom {
	width:267px;
	height:7px;
	font-size: 1px;
	background: url(../graphics/join_now_bottom.gif) no-repeat;
	margin-bottom: 20px;
}

/* Profile Stats */
.profilestats-left { position:relative; width:227px; display:block; margin:0; padding:0 }
.profilestats-right { position:absolute; right:0; top:0 }
.profilestats-left, .profilestats-right { font-size:14px }
.profilestats-left strong, .profilestats-right strong { letter-spacing:-1px }

/* Profile */
.profile-options { font-size: 20px; letter-spacing:-1px; text-align:center; display:block }
.photo-thumbnail { margin-top:10px; padding:1px }
img.photo-thumbnail { border: 1px solid #CCCCCC }
img.photo-thumbnail-default { border: 2px solid #888888 }
.photo-thumbnail-default { margin-top:10px; padding:1px }

.view-profile-main { display:block; margin-bottom: 20px; height:70px }
.view-profile-main span { display:block; margin-top: 17px }
span.profile-photo-holder { margin: 0 15px 0 0; float:left; width:70px; height:70px }
.profile-photo { padding:1px; border: 1px solid #CCCCCC }
.display-name { font-size:18px }

.message-table { padding:8px 10px; background-color: #EDF7D7; margin-top:5px; width:100% }
.message-table .right { text-align:right }

.male { color:#0D5784 }
.female { color:#AA1690 }

/* Comments */
.reply-box, .comment-box { position:relative; padding:18px 20px 20px 20px; display:block }
.comment-box { margin-bottom:15px; background-color:#D0ED92 }
.reply-box { color: #68900E; margin-top:15px; background-color:#EFF9D8 }

.comment-box .arrow {
	position:absolute;
	top: 19px;
	left:-10px;
	background: url(../graphics/comment_arrow.gif);
	height: 20px;
	width: 10px;
}
.reply-box .arrow { 
	position:absolute;
	top: 19px;
	left:-10px;
	background: url(../graphics/reply_arrow.gif);
	height: 20px;
	width: 10px;
}

.reply-header, .comment-header { font-size: 14px; display:block; margin-bottom:10px }
.reply-header span, .comment-header span { font-weight:normal !important }

.reply-header { color: #68900E }

/* Browsing Profiles */
.browse-option-area {
	display:block;
	padding: 7px 10px;
	background: #8DC01F;
	margin-top: 20px;
	margin-bottom: 20px;
}

.browse-search-area {
	color: #FFFFFF;
	font-size: 14px;
	display:block;
	padding: 7px 10px;
	background: #83B41A;
	margin-bottom: -20px;
	margin-top: 20px;
	border-bottom: 1px solid #78A515;
}

.browse-search-area .radio {
	position:relative;
	display:inline;
	top: 2px;
}

.browse-search-area .textbox {
	font: 14px Arial, Helvetica, sans-serif;
	color: #77A415;
	border: 1px solid #77A415;
}

.browse-option-area select {
	font: 14px Arial, Helvetica, sans-serif;
	color: #77A415;
	border: 1px solid #77A415;
}

.friend { color:#B44400 }

.paginationBlock {
	clear: both;
	width: 542px;
	height: 18px;
	position: relative;
}

.paginationLeft {
	font: 8pt/14pt Arial;
	color: #45392A;
	position: absolute;
	width: 58px;
	height: 18px;
	left: 0;
	text-align: left;
}

.pageHolder {
	width:327px;
	height:18px;
	position:absolute;
	left: 104px;
}

.paginationCenter {
	font: 8pt/14pt Arial;
	color: #45392A;
	position: relative;
	width: 330px;
	text-align:center;
}

.paginationCenter span, .paginationCenter a {
	display: block;
    float: left;
    padding: 0 5px;
	width: 12px;
	height: 18px;
    margin-right: 6px;
    background: #806E59;
	color:#F3EDE7;
}

.paginationCenter span.current {
    font-weight: bold;
    background: #8DC01F;
    color: #FFFFFF;
}

.more-icon {
	position: relative;
	top: 3px;
	float:left;
	margin-right: 4px;
}

.more-icon-right {
	position: relative;
	top: 3px;
	float:left;
}

.paginationCenter a {
	background:#1B82C0;
	color:#C9E5F2;
	text-decoration: none;
}

.paginationCenter a:hover {
	background:#8DC01F;
	color:#FFFFFF;
	text-decoration: none;
}

.paginationRight {
	font: 8pt/14pt Arial;
	color: #45392A;
	position: absolute;
	width: 58px;
	height: 18px;
	right: 0;
	text-align: right;
}

/* Advertising */
.728-90 { width:728px; height:90px }

/* Footer */
#footer {
	color:#FFFFFF;
	padding: 46px 0 0 0;
	width:100%;
	height:57px;
	clear:both;
	background: url(../graphics/footer_bg.gif) repeat-x;
	text-align:center }
	
	#footer a { color:#CFF084 }
	#footer a:hover { color:#FFFFFF }
