﻿/* RESET */
*{ margin: 0; padding: 0;}
a img, iframe{ border: 0; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; color: #5f5f5f; font-family: Arial, Helvetica, sans-serif; }
ul, ol, dl, li, dt, dd{ list-style: none; }
form, fieldset{ border: 0; }	
input, textarea, select, button { font-size: 100%; }
select{ margin: inherit; }
table{ border-collapse: collapse; border: 0; }
td, th, caption{ font-size: 100%; font-weight: normal; text-align: left; }


body{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #090909; background: #d8d8d8 url(../images/bg_body.png) repeat-x; line-height: 1.4em; }
.wrap{ width: 974px; margin: 0 auto; }


/* Head
*******************************************/
#Head{ float: left; width: 100%; height: 98px; }
	#Head .wrap{ padding: 0 0 0 78px; width: 896px; }
	#Head h1{ float: left; margin: 27px 0 0 0; width: 367px; height: 64px; background: url(../images/logo.png); background-position: 48px; background-repeat: no-repeat; }
		#Head h1 a{ position: absolute; float: left; width: 350px; height: 64px; text-indent: -5000px; z-index: 1; }
		#Head h1 img{ position: absolute; z-index: -1; }
    #Head #right{ float:left; width: 250px; padding: 66px 0 0 300px; }
    #Head #right img{ float:left; }
    #Head #right iframe{ float:left; padding: 4px 0 0 10px;}
		
/* Helpers 
******************************************/
.clear{ font-size: 1px; height: 1px; clear: both; line-height: 1px; }
.left{ float: left; }
.right{ float: right; }
.center{ display: block; margin: 0 auto; }
.tl{ text-align: left; }
.tr{ text-align: right; }
.tc{ text-align: center; }
.tj{ text-align: justify; }
.small{ font-size: 0.8em; }
.large{ font-size: 1.2em; }
.dull{ color: #D4D4D4; }

		
		
/* Content 
*******************************************/		
a{ color: #286f9e; text-decoration: none; }
a:hover{ color: #168bd6; text-decoration: underline; }
h1.caption{ background: url(../images/bg_text_head.png) repeat-x bottom; margin: 0 -23px; padding:5px 23px 20px 23px; font-size: 21px; }
h1.caption div{ width: 405px; }
h2{ font-size: 20px; font-weight: bold; }
h3{ font-size: 18px; margin: 0 0 10px 0; }
h4{ font-size: 14px; font-weight: bold; }
p{ margin: 0 0 20px 0; }


#Content{ float:left; width:100%; }
	#Main{ float: right; width: 855px; background: #eeeeee url(../images/bg_main.png) repeat-y; }
	    #Main h2{ padding-bottom: 10px; }
		#Main .bgtop{ float: left; width: 100%; background: url(../images/bg_main_top.png) no-repeat; }
		#Main .bgbottom{ float: left; width: 825px; padding:15px 15px 25px 15px; background: url(../images/bg_main_bottom.png) no-repeat bottom; }
			#Text{ float: left; width: 573px; background: url(../images/bg_text.png) repeat-y;   background-color: #FFF}
			#Text .bgtop{ width: 100%; background: url(../images/bg_text_top.png) no-repeat; }
			#Text .bgbottom{ width: 525px; padding:24px 24px 14px 24px; background: url(../images/bg_text_bottom.png) no-repeat bottom; min-height:600px;}
			* html #Text .bgbottom{ height:600px;}	/* IE6 hack */
		#Widgets{ float: right; width: 244px; }
		
#ContentBody ul {margin: 0 0 0 30px; padding: 0;}
#ContentBody li {list-style: disc outside; margin: 2px 0 0 10px;}

a.confess{ float: right; height: 20px; padding: 15px 0 0 23px; margin: 0 0 -52px 0; overflow: hidden; color: #ef9a21; font-weight: bold; font-size: 13px; position: relative; top: -52px; background: url(../images/ico_confess.png) no-repeat; }	
	
.textmenu{ height: 29px; padding: 4px 10px 0 0; margin: 0 -23px 35px -23px; background: #7CA3BF url(../images/bg_textmenu.png) repeat-x bottom; font-size: 11px; }
	.textmenu ul{ float: right; list-style: none; margin: 0; padding: 0; }
	.textmenu li{ float: left; margin: 0 4px 0 0; height: 29px; line-height: 29px; padding: 0 0 0 14px; background: url(../images/textmenu.png) no-repeat; }
	.textmenu li a{ float: left; height: 29px; padding: 0 14px 0 0; background: url(../images/textmenu_add.png) no-repeat right; color: white; text-transform: uppercase;  }
	.textmenu li a:hover{ color: white; }
	.textmenu li.active{ background: url(../images/textmenu_active.png) no-repeat; }
	.textmenu li.active a{ background: url(../images/textmenu_active_add.png) no-repeat right; color: #7CA3BF; }
	.textmenu li.active a:hover{ color: #7CA3BF; }
	.textmenu a.right{ color: white; padding: 0 10px 0 0; line-height:25px; }
	
.textmenu-post{ height: 2px; padding: 4px 10px 0 0; margin: 0 -23px 20px -23px; background: #7CA3BF; font-size: 11px; }

.linkstyle { cursor: pointer; color: #286f9e; }
	
/* confessions */	
.confession{ margin:0 120px 25px 0;}
.singleconfession{ margin: 0 120px 10px 0; }
	.confession h2{ color: #286f9e; line-height: 1.1; }
	.singleconfession h2{ font-size: 24px; }
		.confession h2 a{ color: #286f9e;  }
	.confession .subtitle{ font-size: 12px; color: #777777; margin: 0 0 12px 0; }
.confession-side{ float: right; width: 83px; margin:0 0 25px 0; }
	.confession-side .avatar{ display: block; width: 75px; height: 75px; margin: 0 0 12px 0; padding: 4px; background: url(../images/bg_avatar.png); text-decoration: none; }
	.confession-side small{ float:left; font-size: 10px; color: #777777; margin: 0 0 0 4px; line-height: 15px; }
.metadata{ font-size:12px; color: #989a9c; line-height:14px; }
	.metadata .comment{ float: left; height: 14px; background: url(../images/ico_comment.png) no-repeat; padding: 0 0 0 20px; margin: 0 20px 0 0; }	
	.metadata .share,
	.metadata .share-over{ float: left; height: 14px; background: url(../images/ico_share.png) no-repeat; padding: 0 0 0 20px; position:relative;}	
		.metadata .share span{ position: absolute; left: -9px; top: -7px; display: none; background: url(../images/bg_share.png); width: 101px; height: 47px; padding: 8px 0 0 9px; line-height:12px;}
		.metadata .share:hover span,
		.metadata .over span{ display: block; }
		.metadata .share b{ padding:0 0 0 20px; font-weight: normal; color: #286f9e; }
		.metadata .share span div{ display: inline; cursor: pointer;}
	
.divider{ margin: 0 0 30px -23px;  }
.tags{ border-top: dashed 1px #d8d8d8; margin-top: 13px; padding: 11px 0px 0px 0px; }
    .tags span{  }
    .tags a{ color: #989a9c; text-decoration: underline; }
    
/* Comments */
.comments{ list-style: none; margin: 0; padding: 0; font-size: 12px; }
	.comments li{ background: #F0F0F0; border: solid #CECECE; border-width: 1px 0; padding: 9px 12px; margin: 0 0 10px 0; }
	.comments li.on{ background: #F8F8F8; }
		.comments li ul{ margin: 0 0 0 20px; padding: 0; }
		.comments li li{ border: 0 none; background: none; padding: 9px 0 0 0; margin: 0; }
	.comments H4{ color: #9d9d9d; padding-bottom: 4px; }
	.comments p{ margin: 0 55px 3px 0; line-height: 1.3em; }
	.comments .date{ font-size: 11px; margin: 0 0 5px 0; }
	.comments a.avatar{ float: right; width: 46px; height: 46px; padding: 2px; background: url(../images/bg_comment_avatar.png); }
	.comments hr { border-bottom: dashed 1px #CECECE; border-top: 0; border-left: 0; border-right: 0; height: 1px; margin-top: 9px; margin-bottom: 10px; }
.replybutton { float: right; cursor: pointer; width: 45px;}

/* pagination */
#Paginator{ float: left; width: 560px; padding:18px 24px 5px 10px; font-size:11px;}
	#Paginator a{ border: 1px solid #AACFE1; background: #FFF; padding:6px 10px; margin:0 4px;}
	#Paginator a.active{ background: #E9F6FF; font-weight:bold;}
	#Paginator a.wide{ padding: 6px 22px; }
	
	#Paginator span{ color: black; border: 1px solid #AACFE1; background: #FFF; padding:6px 10px; margin:0 4px;}
	#Paginator span.active{ background: #E9F6FF; font-weight:bold;}
	#Paginator span.wide{ padding: 6px 22px; }


/* widgets */		
.widget{ float: left; width: 244px; background: white url(../images/bg_widget.png) repeat-y; margin:0 0 12px 0;}
	.widget .wtop{ float: left; width: 100%; background: url(../images/bg_widget_top.png) no-repeat; }
	.widget .wbottom{ float: left; width: 204px; padding: 15px 20px 15px 20px; background: url(../images/bg_widget_bottom.png) no-repeat bottom; }

	.widget p, .widget ul{ margin: 0 0 7px 0; }
	.widget h3{ font-size: 16px; margin: 0 0 15px 0; }

	.widget input.text{ width: 179px; height: 16px; padding: 4px 10px; border: 0px none; background: url(../images/bg_w_input.png); outline: none; }

	#Searchwidget .wbottom{ width: 226px; padding: 5px 9px 12px 9px; }	
	#Searchwidget form{ display: block; width: 214px; height: 34px; padding: 10px 0 0 12px; margin: 0 0 0 0; background: url(../images/bg_w_search.png) no-repeat; vertical-align: middle; }
	#Searchwidget input.text{ float:left;  background: none; width: 160px; height: 26px; line-height:26px; color: #bbbbbb; font-weight: bold; padding: 0 0 0 5px; margin: 0; }
	#Searchwidget input.btn{ float: right; background: none; width: 29px; height: 24px; border: 0 none; cursor: pointer; }
	#Searchwidget .wbottom div{ padding: 0 11px; }
	
	.memberlist{ list-style: none; padding: 0; font-size: 12px; color: #989a9c; }
		.memberlist li{ margin: 0 0 5px 0; padding: 0 0 0 10px; line-height: 18px; }
		.memberlist img{ float:left; border: 1px solid #D9D9D9; margin: 0 7px 0 0; }
		.memberlist a{ color: #989a9c; }
		
	#LoginForm input{ color: #bbbbbb; } 
	#SignupForm input{ color: #bbbbbb; }
	#UserBox span{ color: #989a9c; font-size: 1.2em; }
	
	.signupoptional{ padding-left: 8px; font-size: 7.5pt; color:#bbbbbb; }
		
	#RandomButton{ text-decoration: none; cursor: pointer; padding: 6px 0 8px 0; display: block; }
	    #RandomButton div{ background-image: url(../images/random_confession.png); background-repeat: no-repeat; height: 44px; width: 226px; }
	    #RandomButton span{ padding: 13px 0 0 38px; display: block; }
	    
    .rememberme_wrapper{ padding-left: 2px; padding-top: 4px;font-size: 0.8em; }
    .rememberme_wrapper div{ float:left; }
    .rememberme_wrapper a{ margin-top: 4px; }
    .rememberme_label{ color: #b0b0b0; display: block; padding-left: 15px; padding-bottom: 4px; text-indent: -15px; }
    .rememberme_chk{ width: 13px; height: 13px; padding:0; margin: 0 4px 0 0; vertical-align: middle; position: relative; top: -1px; *overflow: hidden; }
    .login_submit{ padding-left: 18px; padding-top: 2px; float:left; }
	        
/* hottest confessions */
#Hottestwidget .wbottom{ padding-bottom: 0; }
.hot{ font-weight: bold; background: url(../images/bg_hot.png) no-repeat; margin: 0 0 12px 0; }		
	.hot b{ float: left; width: 100%; background: url(../images/bg_hot_tr.png) no-repeat top right; }
	.hot b b{ background: url(../images/bg_hot_bl1.png) no-repeat bottom left; }
	.hot b b b{ width: 80%; padding:12px 10% 28px 10%; background: url(../images/bg_hot_br1.png) no-repeat bottom right; }
	.right b b{ background: url(../images/bg_hot_br.png) no-repeat bottom right; }
	.right b b b{ width: 80%; padding:12px 10% 28px 10%; background: url(../images/bg_hot_bl.png) no-repeat bottom left; }

/* forms */
#rules {color: #6c6c6c; font-size: 12px; margin: 20px;}
.formtitle {padding-left: 25px; padding-bottom: 20px;}
.formbody {padding-left: 25px;}
.fieldset {padding-bottom: 20px;}
.fieldname {font-size: 14px; font-weight: bold;}
.button {padding: 5px 10px 5px 10px;}
.verificationimg {border: solid 1px #abadb3;}
.textfield {width: 300px;}
.optionaltext {color: #969696; font-size: 11px;}
.errormessage {color: Red; padding-bottom: 10px;}
.loggedinas {padding-bottom: 20px;}

/* Side bar
******************************************/
#Side{ float: left; width: 119px; padding: 87px 0 0 0; }	
	#Side h2{ font-size: 14px; font-weight: normal; text-transform: uppercase; margin: 0 0 15px 0; }
	
#Sidenav{ list-style: none; margin: 0; padding: 0; width:119px; font-size:12px; }	
	#Sidenav a{ position:absolute; display: block; padding: 0 0 0 17px; width: 118px; height: 31px; line-height: 31px; color: #4f4f4f; text-decoration: none; }
	#Sidenav li{ margin: 0; padding: 0; height:31px; position:relative;}
	#Sidenav li.active{ height: 35px; }
	#Sidenav li.active a, 
	#Sidenav a:hover{ height: 35px; line-height: 35px; margin-top: -2px; background: url(../images/bg_sidenav_active.png) no-repeat; }
	#Sidenav a:hover{ color: black; }
	
	
/* Footer
******************************************/		
#Footer{ float: right; position: relative; top: -12px; width: 808px; height: 103px; padding: 43px 0 0 47px; margin: 0; background: url(../images/bg_footer.png) no-repeat; }
#Copyright{ float: right; width: 855px; text-align:center; margin: 0 0 15px 0; font-size: 10px; color: #979797; }
	#Footer .left{ font-size: 18px; color: #979797; width: 620px; padding-top: 10px; }
	#Footer .left a{ float: left; height: 78px; padding: 9px 0 0 76px; margin: 0 20px 0 0; }
	#Footer a.newpost{  background: url(../images/ico_footer_confess.png) no-repeat; }
	#Footer a.feed{ background: url(../images/ico_footer_feed.png) no-repeat; }
	#Footer a.twitter{ background: url(../images/ico_footer_twit.png) no-repeat; }

	#Footer ul{ float:right; list-style: none; margin: 0; padding: 0; width: 107px; font-size: 11px; }	
		#Footer li{ background: url(../images/bullet_footer.png) no-repeat 0 6px; padding: 0 0 0 15px; margin: 0 0 4px 0; }

	