
/* Global reset
-----------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;	}

body {
	line-height: 1; }

ul, ol	{
	margin-left: 2em;
}
	
table {
	border-collapse: separate; 
	border-spacing: 0;  /* tables still need 'cellspacing="0"' in the markup */
}

caption, th, td {
	font-weight: normal;
}

body {
	font-family: Helvetica, Tahoma, Arial, "Trebuchet MS", Verdana, sans-serif;
	font-size: 12px; /* 62.5%  1em = 10px \ 1.1em = 11px \ 1.2em = 12px */
	background: #83cfff url(../images/bgr-page.png) repeat-x top left;
	color: #000;
}


/* Headings and paragraphs
-----------------------------------------------------------------------------------------------*/

p  {
	padding: 0 0 15px;
	line-height: 1.3;
	font-family: Helvetica, Tahoma, Arial, "Trebuchet MS", Verdana, sans-serif;
	font-weight: normal;
	font-size: 1em;
	margin: 0;
}

h1, h2, h3, h4, h5	{
	margin: 0 0 15px 0;
	padding: 0;
	font-family: Helvetica, Tahoma, Arial, "Trebuchet MS", Verdana, sans-serif;
	font-weight: bold;
	line-height: normal;
}


/* Forms
-----------------------------------------------------------------------------------------------*/	

form	{
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 12px;
}

input, textarea, select	{
	padding: 2px;
	color: #000;
	font-size: 12px;
	font-family: Helvetica, Tahoma, Arial, "Trebuchet MS", Verdana, sans-serif;
	float: left;
	margin-bottom: 8px;
	width: 290px;
}

input.donatebutton	{
	width: auto;
}

textarea	{
	width: 400px;
}

label	{
	float: left;
	text-align: right;
	font-size: 12px;
	font-family: Helvetica, Tahoma, Arial, "Trebuchet MS", Verdana, sans-serif;
	margin-right: 8px;
	padding-top: 6px;
	width: 150px;
}

input.submit	{
	width: auto;
	padding: 2px 15px;
	margin: 0 0 0 158px;
	font-weight: bold;
}

form br	{
	clear: left;
}

legend	{
	display: none;
}

fieldset	{
	border: none;
	position: relative;
	margin: 0;
}

.captcha	{
	float: left;
	padding-top: 6px;
	width: auto;
	font-size: 12px;
}

	.captcha img	{
		padding: 6px 0 2px 0;
	}
	
	.captcha input	{
		width: 132px;
	}
	
/* Links
-----------------------------------------------------------------------------------------------*/	

a,
a:active,
a:visited {
	color: #1b83c1;
	font-weight: bold;
	cursor: pointer;
	text-decoration: underline;
}

a:hover	{
	text-decoration: none;
}


/* Miscellaneous
-----------------------------------------------------------------------------------------------*/	

hr {display: none;}
strong {font-weight: bold;}
em {font-style: italic;}
abbr, acronym {
	border-bottom: 1px dotted #999; 
	cursor: help;
}
.left	{
	float: left;
}
.right	{
	float: right;
}
			
			
/* Layout
-----------------------------------------------------------------------------------------------*/

#wrapper	{
	width: 960px;
	margin: 0 auto;
	position: relative;
	background: url(../images/bgr-header.png) no-repeat top left;
}

#wrapper2	{
	width: 960px;
	margin: 0 auto;
	position: relative;
}

	a#logo	{
		display: block;
		margin: 0 auto;
		width: 411px;
		height: 95px;
		background: url(../images/cartoonity-logo.png) no-repeat top left;
	}
	
		a#logo span	{
			display: none;
		}

	#ui-wrapper	{
		margin-top: -10px;
	}
		
		#ui-main	{
			background: url(../images/bgr-ui.png) repeat-y top left;
		}
		
		
/* UI Header
-----------------------------------------------------------------------------------------------*/		
		
#ui-header	{
	width: 960px;
	height: 65px;
	background: url(../images/bgr-ui-header.png) no-repeat top left;
	position: relative;
}

	.date	{
		position: absolute;
		width: 110px;
		text-align: center;
		top: 13px;
		left: 430px;
		font-size: 11px;
		color: #666;
		letter-spacing: 1px;
		padding: 0;
	}
	
	.login,
	.logout	{
		width: 215px;
		height: 33px;
		position: absolute;
		right: 40px;
		top: 22px;
		background: url(../images/bgr-login.png) no-repeat top left;
	}
	
	.logout	{
		width: 341px;
		background: url(../images/bgr-logout.png) no-repeat top left;
	}
	
		.login ul,
		.logout ul	{
			margin: 0;
			list-style: none;
		}
	
		.login a span,
		.logout a span	{
			display: none;
		}
		
		.loginlink	{
			display: block;
			width: 44px;
			height: 11px;
			background: url(../images/link-login.png) no-repeat top left;
			margin-top: 11px;
			margin-left: 14px;
			float: left;
		}
		
		.signuplink	{
			display: block;
			width: 100px;
			height: 11px;
			background: url(../images/link-signup.png) no-repeat top left;
			margin-top: 11px;
			margin-left: 41px;
			float: left;
		}

		.logoutlink	{
			display: block;
			width: 58px;
			height: 11px;
			background: url(../images/link-logout.png) no-repeat top left;
			margin-top: 11px;
			margin-left: 38px;
			float: left;
		}
		
		.youraccountlink	{
			display: block;
			width: 119px;
			height: 11px;
			background: url(../images/link-youraccount.png) no-repeat top left;
			margin-top: 11px;
			margin-left: 16px;
			float: left;
		}
		
		.yourprofilelink	{
			display: block;
			width: 91px;
			height: 11px;
			background: url(../images/link-yourprofile.png) no-repeat top left;
			margin-top: 11px;
			margin-left: 9px;
			float: left;
		}
	

/* UI Promos
-----------------------------------------------------------------------------------------------*/

#ui-promos	{
	width: 934px;
	margin: 0 auto;
	background: #444 url(../images/bgr-homepage-promos.png) no-repeat top left;
	color: #ddd;
	padding: 0;
}

	#ui-promos h3	{
		color: #fff;
		font-size: 20px;
		letter-spacing: -1px;
		background: url(../images/bgr-promo-h3.png) repeat-x bottom left;
		padding-bottom: 18px;
		padding-top: 15px;
		margin-bottom: 15px;
	}
	
		#ui-promos .first h3 span	{
			background: url(../images/bgr-promo-h3-first.png) no-repeat top left;
			padding-bottom: 20px;
			padding-top: 10px;
			padding-left: 52px;
		}
		
		#ui-promos .second h3 span	{
			background: url(../images/bgr-promo-h3-second.png) no-repeat top left;
			padding-bottom: 20px;
			padding-top: 4px;
			padding-left: 48px;
		}
		
		#ui-promos .third h3 span	{
			background: url(../images/bgr-promo-h3-third.png) no-repeat top left;
			padding-bottom: 20px;
			padding-top: 6px;
			padding-left: 51px;
		}

	#ui-promos .box	{
		float: left;
	}
	
		#ui-promos .box ul.featuredlinked	{
			list-style: none;
			margin: 0;
			padding: 0;
			background: url(../images/bgr-featured-list.gif) repeat-x top left;
		}
		
			#ui-promos .box ul.featuredlinked li	{
				background: url(../images/bgr-featured-list.gif) repeat-x bottom left;
			}
			
				#ui-promos .box ul.featuredlinked a	{
					display: block;
					padding: 8px 5px 8px 10px;
					background: url(../images/bullet-featured-list.gif) no-repeat 0 9px;
					font-size: 11px;
					text-decoration: none;
					text-transform: uppercase;
				}
				
					#ui-promos .box a:hover	{
						color: #fff;
					}
	
		#ui-promos .third img	{
			max-width: 60px;
			max-height: 60px;
			border-right: 1px solid #464646;
			border-bottom: 1px solid #464646;
		}
	
		#ui-promos .first	{
			width: 260px;
			padding-left: 30px;
			padding-right: 57px;
		}
		
		#ui-promos .second	{
			width: 246px;
			padding-right: 56px;
		}
		
		#ui-promos .third	{
			width: 260px;
			padding-right: 25px;
		}
		
		#ui-promos .box a	{
			font-size: 13px;
		}
		
		#ui-promos .box h4,
		#ui-promos .box h4 a	{
			font-size: 15px;
		}
		
			#ui-promos .box .left	{
				width: 78px;
			}
			
			#ui-promos .box .right	{
				width: 182px;
			}
			
		
/* UI Homepage Message
-----------------------------------------------------------------------------------------------*/

#ui-thisweek	{
	width: 934px;
	height: 380px;
	margin: 0 auto;
	background: #fff url(../images/bgr-homepage-thisweek.png) repeat-x top left;
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid #d9d9d9;
	color: #000;
	padding: 0;
	position: relative;
}

	#ui-thisweek .frame	{
		position: absolute;
		top: 20px;
		left: 37px;
		width: 261px;
		height: 342px;
		background: url(../images/bgr-homepage-thisweek-frame.png) no-repeat top left;
	}
	
		#ui-thisweek .frame img	{
			width: 240px;
			height: 320px;
			padding-top: 10px;
			padding-left: 10px;
		}
		
	#ui-thisweek .content	{
		position: absolute;
		top: 20px;
		left: 337px;
		width: 569px;
	}
	
		#ui-thisweek .content h1	{
			font-size: 40px;
			letter-spacing: -1px;
			margin-top: 10px;
			margin-bottom: 5px;
		}
		
		#ui-thisweek .content h2	{
			font-size: 26px;
			font-weight: normal;
			letter-spacing: -1px;
			color: #666;
			line-height: 1.35em;
			width: 560px;
		}
		
		#ui-thisweek .collaborate	{
			width: 561px;
			height: 101px;
			background: url(../images/bgr-homepage-collaborate.png) no-repeat top left;
			margin-top: 20px;
		}
		
			#ui-thisweek .collaborate h3	{
				font-size: 26px;
				margin: 0;
				padding-left: 133px;
				padding-top: 22px;
				letter-spacing: -1px;
				width: 380px;
				text-align: center;
			}
			
			#ui-thisweek .collaborate h4	{
				font-size: 18px;
				color: #444;
				padding-left: 133px;
				width: 380px;
				text-align: center;
			}

.triangle	{
	position: absolute;
	top: -1px;
	left: -3px;
	width: 90px;
	height: 90px;
	z-index: 100;
}


	#ui-thisweek .triangle	{
		background: url(../images/triangle-this-week.png) no-repeat top left;
		width: 300px;
		height: 363px;
	}
	
	#ui-lastweek .triangle	{
		background: url(../images/triangle-last-week.png) no-repeat top left;
	}
	
	#ui-thisweek .triangle a	{
		display: block;
		width: 300px;
		height: 363px;
	}
	
	#ui-thisweek .triangle a span,
	#ui-lastweek .triangle p,
	#ui-comic-wrapper .triangle p	{
		display: none;
	}


/* UI Homepage Last Week & Comics Archives
-----------------------------------------------------------------------------------------------*/

#ui-lastweek	{
	width: 934px;
	height: 175px;
	margin: 0 auto;
	background: #fff url(../images/bgr-homepage-lastweek.png) repeat-x top left;
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid #d9d9d9;
	color: #000;
	padding: 0;
	position: relative;
}

	#ui-lastweek .content	{
		position: absolute;
		top: 20px;
		left: 97px;
		width: 226px;
		height: 150px;
		color: #000;
	}
	
		#ui-lastweek .content h3	{
			font-size: 18px;
			margin-bottom: 5px;
		}
		
		#ui-content .container-archives h2	{
			margin-bottom: 5px;
		}
		
			#ui-content .container-archives h2 span	{
				font-weight: normal;
			}
		
		#ui-lastweek .content p,
		#ui-lastweek .content li	{
			font-size: 13px;
		}
		
		#ui-content .container-archives	{
			background: #F6F6F6;
			-moz-border-radius-bottomleft: 10px;
			-moz-border-radius-bottomright: 10px;
			-webkit-border-bottom-left-radius: 10px;
			-webkit-border-bottom-right-radius: 10px;
			padding: 0 35px 0 35px;
			margin-bottom: 10px;
		}
		
			#ui-content .container-archives .content-archives	{
				padding-bottom: 25px;
				/*border-bottom: 4px solid #e1e1e1;*/
			}
		
		#ui-lastweek .content p,
		#ui-content .container-archives p	{
			padding-bottom: 10px;
		}
		
			#ui-content .container-archives p span	{
				padding: 0 2px;
			}
		
		#ui-lastweek .content ul	{
			margin: 0;
			list-style: none;
		}
		
			#ui-lastweek .content li	{
				background: url(../images/list-bullet.png) no-repeat 0 2px;
				padding-left: 15px;
				margin-bottom: 5px;
			}

	#ui-lastweek .frames,
	.ui-comicarchive .frames	{
		position: absolute;
		top: 20px;
		left: 333px;
		width: 565px;
		height: 137px;
		background: url(../images/bgr-homepage-lastweek-frame.png) no-repeat top left;
	}
	
	#ui-content .container-archives .frames	{
		width: 565px;
		height: 137px;
		/*background: url(../images/bgr-archives-frame.png) no-repeat top left;*/
		background: url(../images/bgr-homepage-lastweek-frame.png) no-repeat top left;
	}
	
		#ui-lastweek .frames img,
		#ui-content .container-archives .frames img	{
			float: left;
			width: 439px;
			height: 126px;
			padding-top: 5px;
			padding-left: 5px;
		}
		
		#ui-lastweek .frames ul,
		#ui-content .container-archives .frames ul	{
			float: right;
			margin: 0;
			list-style: none;
			width: 110px;
			padding-left: 10px;
			padding-top: 14px;
		}
		
			#ui-lastweek .frames li,
			#ui-content .container-archives .frames li	{
				font-size: 11px;
				margin-bottom: 4px;
			}
			
				#ui-lastweek .frames li.last,
				#ui-content .container-archives .frames li.last	{
					margin: 0;
				}
				
				#ui-lastweek .frames li a,
				#ui-content .container-archives .frames li a	{
					text-decoration: none;
					color: #666;
					display: block;
					width: 82px; /* 110px without padding */
					height: 24px;
					line-height: 24px;
					padding-left: 28px;
					font-weight: normal;
				}
				
					#ui-lastweek .frames li a:hover,
					#ui-content .container-archives .frames li a:hover	{
						color: #1b83c1;
					}
					
				#ui-lastweek .frames li.enlargecomic a,
				#ui-content .container-archives .frames li.enlargecomic a	{
					background: url(../images/icon-enlargecomic.png) no-repeat 7px 5px;
				}
				
				#ui-lastweek .frames li.rssfeed a,
				#ui-content .container-archives .frames li.rssfeed a	{
					background: url(../images/icon-rssfeed.png) no-repeat 6px 5px;
				}
				
				#ui-lastweek .frames li.tweetthis a,
				#ui-content .container-archives .frames li.tweetthis a	{
					background: url(../images/icon-tweetthis.png) no-repeat 6px 5px;
				}
				
				#ui-content .container-archives .frames li.comment a	{
					background: url(../images/icon-comment.png) no-repeat 6px 4px;
				}
				
				#ui-lastweek .frames li.viewprevious a	{
					background: url(../images/icon-viewprevious.png) no-repeat 9px 6px;
				}

	
/* UI Interior Calls to Action
-----------------------------------------------------------------------------------------------*/

#ui-calls	{
	width: 934px;
	height: 117px;
	margin: 0 auto;
}

		body#normal #ui-calls	{
			width: 250px;
			height: auto;
			margin: 5px 0 0;
		}

	#ui-calls ul	{
		margin: 0;
		list-style: none;
	}
	
		#ui-calls li	{
			float: left;
			margin: 0;
			padding: 0;
		}
		
				body#normal #ui-content #ui-calls li	{
					float: none;
					margin: 0;
				}
		
			#ui-calls li.first a,
			#ui-calls li.last a	{
				width: 155px;
			}
			
					body#normal #ui-calls li.first a,
					body#normal #ui-calls li.last a	{
						height: 60px;
					}
			
			#ui-calls li a	{
				display: block;
				width: 156px;
				height: 117px;
			}
			
					body#normal #ui-calls li a	{
						display: block;
						width: 215px;
						height: 59px;
					}
			
				#ui-calls li a span	{
					display: none;
				}
			
				#ui-calls li.createyouraccount a	{
					background: url(../images/call-createyouraccount.png) no-repeat top left;
				}
				
				#ui-calls li.accessyouraccount a	{
					background: url(../images/call-accessyouraccount.png) no-repeat top left;
				}
				
				#ui-calls li.viewpreviouscomics a	{
					background: url(../images/call-viewpreviouscomics.png) no-repeat top left;
				}
				
				#ui-calls li.jointheconversation a	{
					background: url(../images/call-jointheconversation.png) no-repeat top left;
				}
				
				#ui-calls li.supportourcommunity a	{
					background: url(../images/call-supportourcommunity.png) no-repeat top left;
				}
				
				#ui-calls li.subscribetorssfeeds a	{
					background: url(../images/call-subscribetorssfeeds.png) no-repeat top left;
				}
				
				#ui-calls li.tellafriend a	{
					background: url(../images/call-tellafriend.png) no-repeat top left;
				}
				
						body#normal #ui-calls li.createyouraccount a	{
							background: url(../images/call-createyouraccount.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.accessyouraccount a	{
							background: url(../images/call-accessyouraccount.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.collaborateoncomic a	{
							background: url(../images/call-collaborateoncomic.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.viewpreviouscomics a	{
							background: url(../images/call-viewpreviouscomics.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.jointheconversation a	{
							background: url(../images/call-jointheconversation.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.supportourcommunity a	{
							background: url(../images/call-supportourcommunity.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.subscribetorssfeeds a	{
							background: url(../images/call-subscribetorssfeeds.jpg) no-repeat top left;
						}
						
						body#normal #ui-calls li.tellafriend a	{
							background: url(../images/call-tellafriend.jpg) no-repeat top left;
						}
				
					#ui-calls li a:hover,
					body#normal #ui-calls li a:hover	{
						background-position: bottom left;
					}
					
					
/* UI Social Bookmarking
-----------------------------------------------------------------------------------------------*/

#ui-social	{
	width: 934px;
	height: 88px;
	margin: 0 auto;
	position: relative;
	background: url(../images/bgr-social-bookmarking.jpg) no-repeat top left;
	border-top: 1px solid #f5f5f5;
}

	#ui-social h2	{
		position: absolute;
		width: 165px;
		height: 27px;
		top: -1px;
		left: 385px;
		background: url(../images/share-with-friends.png) no-repeat top left;
	}
	
		#ui-social h2 span	{
			display: none;
		}
		
	#ui-social ul	{
		margin: 0;
		list-style: none;
		position: absolute;
		top: 40px;
		left: 27px;
	}
	
		#ui-social li	{
			float: left;
			width: 37px;
			height: 37px;
			margin-right: 14px;
		}
		
			#ui-social li.last	{
				margin-right: 0;
			}
			
			#ui-social li a	{
				display: block;
				width: 37px;
				height: 37px;
				background: url(../images/social-bookmarks.png) no-repeat top left;
			}
			
				#ui-social li a span	{
					display: none;
				}
				
			#ui-social li.sb-delicious a	{
				background-position: 0 top;
			}
			
				#ui-social li.sb-delicious a:hover	{
					background-position: 0 bottom;
				}
			
			#ui-social li.sb-digg a	{
				background-position: -51px top;
			}
			
				#ui-social li.sb-digg a:hover	{
					background-position: -51px bottom;
				}
			
			#ui-social li.sb-facebook a	{
				background-position: -103px top;
			}
			
				#ui-social li.sb-facebook a:hover	{
					background-position: -103px bottom;
				}
			
			#ui-social li.sb-friendfeed a	{
				background-position: -155px top;
			}
			
				#ui-social li.sb-friendfeed a:hover	{
					background-position: -155px bottom;
				}
			
			#ui-social li.sb-friendster a	{
				background-position: -207px top;
			}
			
				#ui-social li.sb-friendster a:hover	{
					background-position: -207px bottom;
				}
			
			#ui-social li.sb-google a	{
				background-position: -258px top;
			}
			
				#ui-social li.sb-google a:hover	{
					background-position: -258px bottom;
				}
			
			#ui-social li.sb-reddit a	{
				background-position: -310px top;
			}
			
				#ui-social li.sb-reddit a:hover	{
					background-position: -310px bottom;
				}
			
			#ui-social li.sb-stumbleupon a	{
				background-position: -361px top;
			}
			
				#ui-social li.sb-stumbleupon a:hover	{
					background-position: -361px bottom;
				}
			
			#ui-social li.sb-technorati a	{
				background-position: -413px top;
			}
			
				#ui-social li.sb-technorati a:hover	{
					background-position: -413px bottom;
				}
			
			#ui-social li.sb-twitter a	{
				background-position: -464px top;
			}
			
				#ui-social li.sb-twitter a:hover	{
					background-position: -464px bottom;
				}
			
			#ui-social li.sb-yahoo a	{
				background-position: -516px top;
			}
			
				#ui-social li.sb-yahoo a:hover	{
					background-position: -516px bottom;
				}
			
			#ui-social li.sb-blogger a	{
				background-position: -567px top;
			}
			
				#ui-social li.sb-blogger a:hover	{
					background-position: -567px bottom;
				}
				
		#ui-social #social-bookmarks-description	{
			width: 251px;
			height: 41px;
			margin-top: 39px;
			margin-left: 657px;
			background: url(../images/social-bookmarks-text.png) no-repeat top left;
		}
		
			#ui-social #social-bookmarks-description p	{
				color: #666;
				font-size: 13px;
				height: 38px;
				line-height: 40px;
				padding-left: 43px;
				background: url(../images/social-bookmarks-bullet.png) no-repeat 18px 12px;
			}
			
			#ui-social #social-bookmarks-description #div1,
			#ui-social #social-bookmarks-description #div2,
			#ui-social #social-bookmarks-description #div3,
			#ui-social #social-bookmarks-description #div4,
			#ui-social #social-bookmarks-description #div5,
			#ui-social #social-bookmarks-description #div6,
			#ui-social #social-bookmarks-description #div7,
			#ui-social #social-bookmarks-description #div8,
			#ui-social #social-bookmarks-description #div9,
			#ui-social #social-bookmarks-description #div10,
			#ui-social #social-bookmarks-description #div11,
			#ui-social #social-bookmarks-description #div12	{
				visibility: hidden;
				position: absolute;
				top: 39px;
				left: 655px;
			}
			
/* UI Interior Comic
-----------------------------------------------------------------------------------------------*/

#ui-comic-wrapper	{
	width: 1043px;
	margin: 0 auto;
	position: relative;
}

	#ui-comic-wrapper .triangle	{
		background: url(../images/triangle-this-week.png) no-repeat top left;
		top: 0;
		left: 10px;
	}

	#ui-comic-wrapper .top	{
		width: 1043px;
		height: 15px;
		background: url(../images/bgr-comic-top.png) no-repeat top left;
	}
	
	#ui-comic-wrapper .bottom	{
		width: 1043px;
		height: 15px;
		background: url(../images/bgr-comic-bottom.png) no-repeat top left;
	}
	
	#ui-comic	{
		width: 1043px;
		background: url(../images/bgr-comic.png) repeat-y top left;
	}
		
		#ui-comic #content	{
			width: 1017px;
			height: 452px;
			margin: 0 auto;
			background: url(../images/bgr-comic-inside.jpg) no-repeat top left;
		}
		
			#comic-name	{
				height: 70px;
			}
			
				#comic-name h1	{
					float: left;
					width: 621px; /* 669px without padding */
					font-size: 28px;
					color: #000;
					letter-spacing: -1px;
					margin-top: 14px;
					margin-left: 48px;
				}
				
				#comic-name .download-links	{
					float: right;
					width: 342px;
					height: 40px;
					background: url(../images/bgr-download-links.png) no-repeat top left;
					margin-top: 11px;
					position: relative;
				}
				
					#comic-name .download-links ul	{
						margin: 0;
						list-style: none;
					}
				
					#comic-name .download-links a	{
						display: block;
						position: absolute;
					}
					
						#comic-name .download-links a:hover	{
							background-position: bottom left;
						}
					
						#comic-name .download-links a span	{
							display: none;
						}
				
					#comic-name .downloadpersona	{
						width: 131px;
						height: 32px;
						top: 4px;
						left: 5px;
						background: url(../images/button-downloadpersona.png) no-repeat top left;
					}
					
					#comic-name .downloadcharacterlibrary	{
						width: 184px;
						height: 32px;
						top: 4px;
						left: 143px;
						background: url(../images/button-downloadcharacterlib.png) no-repeat top left;
					}
					
			#comic-strip	{
				width: 974px; /* 984px without padding */
				height: 375px;
				background: url(../images/bgr-comic-strip.png) no-repeat top left;
				margin-left: 17px;
				padding-left: 10px;
			}
			
				#comic-strip .frame	{
					float: left;
					width: 240px;
					height: 374px;
					margin-right: 1px;
					position: relative;
				}
				
				#comic-strip .active	{
					background: url(../images/bgr-frame-active.png) no-repeat top left;
				}
					
						#comic-strip .past .image,
						#comic-strip .future image,
						#comic-strip .frame #slideshow	{
							position: absolute;
							top: 10px;
							left: 0;
							z-index: 101;
						}
				
					#comic-strip .frame h3	{
						font-size: 10px;
						font-weight: normal;
						color: #fff;
						margin: 0;
						z-index: 104;
						position: absolute;
						top: 1px;
						left: 0;
					}
					
						#comic-strip .frame h3 span	{
							padding: 2px 6px;
						}
					
						#comic-strip .past h3 span	{
							background: url(../images/day-past.png);
						}
						
						#comic-strip .active h3 span	{
							background: url(../images/day-active.png);
						}
						
						#comic-strip .future h3 span	{
							background: url(../images/day-future.png);
						}
						
					#comic-strip .scrollup	{
						display: block;
						width: 240px;
						height: 18px;
						position: absolute;
						z-index: 102;
						top: 10px;
						left: 0;
						background: url(../images/frame-arrows.png) no-repeat 0 0;
					}
					
						#comic-strip .scrollup:hover	{
							background: url(../images/frame-arrows.png) no-repeat 0 -36px;
						}
					
					#comic-strip .scrolldown	{
						display: block;
						width: 240px;
						height: 18px;
						position: absolute;
						z-index: 103;
						top: 312px;
						left: 0;
						background: url(../images/frame-arrows.png) no-repeat 0 -18px;
					}
					
						#comic-strip .scrolldown:hover	{
							background: url(../images/frame-arrows.png) no-repeat 0 -54px;
						}
					
						#comic-strip .scrollup span,
						#comic-strip .scrolldown span	{
							display: none;
						}
						
					#comic-strip .downloadartwork	{
						display: block;
						width: 128px;
						height: 32px;
						position: absolute;
						top: 337px;
						left: 104px;
						background: url(../images/button-downloadartwork.png) no-repeat top left;
					}
					
					#comic-strip .uploadartwork	{
						display: block;
						width: 111px;
						height: 29px;
						position: absolute;
						top: 338px;
						left: 120px;
						background: url(../images/button-uploadartwork.png) no-repeat top left;
					}
					
						#comic-strip .downloadartwork:hover,
						#comic-strip .uploadartwork:hover	{
							background-position: bottom left;
						}
					
						#comic-strip .downloadartwork span,
						#comic-strip .uploadartwork span	{
							display: none;
						}
						
					#comic-strip .framelink	{
						position: absolute;
						top: 347px;
						left: 10px;
						width: 89px;
						font-size: 11px;
						white-space: nowrap;
						overflow: hidden;
					}
					
					#comic-strip .frame ul	{
						margin: 0;
						list-style: none;
					}
					
					#comic-strip .framevote,
					#comic-strip .framevotesuccess,
					#comic-strip .framevoted	{
						position: absolute;
						width: 240px;
						height: 284px;
						top: 28px;
						left: 0;
						z-index: 105;
					}
					
						#comic-strip .framevoted:hover	{
							background: url(../images/framevoted.png) no-repeat 51px 112px;
						}

						#comic-strip .framevotesuccess:hover	{
							background: url(../images/frmaevotesucess.png) no-repeat 51px 112px;
						}

						
					
						#comic-strip .framevote ul	{
							margin-top: 112px;
							margin-left: 37px;
						}
						
							#comic-strip .framevote li	{
								margin-bottom: 7px;
							}
					
						#comic-strip .frameup	{
							display: none;
							width: 173px;
							height: 60px;
							background: url(../images/frameup.png) no-repeat top left;
						}
						
						#comic-strip .framedown	{
							display: none;
							width: 173px;
							height: 35px;
							background: url(../images/framedown.png) no-repeat top left;
						}

						#comic-strip .framedownflag	{
							display: none;
							width: 173px;
							height: 35px;
							background: url(../images/framedownflag.png) no-repeat top left;
						}
						
							#comic-strip .framevote:hover a	{
								display: block;
							}
							
							#comic-strip .framevote a:hover	{
								background-position: bottom left;
							}
						
							#comic-strip .frameup span,
							#comic-strip .framedown span,
							#comic-strip .framedownflag span {
								display: none;
							}
				

/* UI Normal Page
-----------------------------------------------------------------------------------------------*/

.ui-normalheader	{
	width: 860px;
	margin: 0 auto;
	background: #e1e2e2 url(../images/bgr-homepage-thisweek.png) repeat-x top left;
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid #e6e6e6;
	color: #000;
	padding: 15px 37px 15px 37px;
}

	.ui-normalheader h1	{
		margin: 0;
		font-size: 24px;
		letter-spacing: -1px;
	}
	
#ui-content	{
	width: 880px;
	min-height: 380px;
	margin: 0 auto;
	background: #e1e2e2 url(../images/bgr-homepage-thisweek.png) repeat-x top left;
	border-top: 1px solid #f8f8f8;
	/*border-bottom: 1px solid #e6e6e6;*/
	color: #000;
	padding: 15px 27px 15px 27px;
	position: relative;
}

	#ui-content .container	{
		background: #F6F6F6;
		-moz-border-radius-bottomleft: 10px;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		padding: 0 25px 10px 25px;
	}

	#ui-content p,
	#ui-content ul,
	#ui-content ol	{
		font-size: 13px;
	}
	
		#ui-content .container ul	{
			list-style: none;
		}
		
		#ui-content .container ul li	{
			background: url(../images/list-bullet.png) no-repeat 0 2px;
			padding-left: 15px;
		}
		
		#ui-content .container li	{
			padding-bottom: 3px;
		}
	
	#ui-content p	{
		line-height: 1.35;
	}
	
	#ui-content h2	{
		font-size: 18px;
	}
	
	#ui-content h3	{
		font-size: 15px;
	}
	
	#ui-content ul,
	#ui-content ol	{
		margin-bottom: 15px;
	}
	
		#ui-content li	{
			margin-bottom: 5px;
		}

	#ui-content .left	{
		width: 635px;
	}
	
	#ui-content .right	{
		width: 215px;
	}
	
	#ui-content img.fc-headshot	{
		float: right;
		margin-top: 2px;
		margin-left: 25px;
		margin-bottom: 15px;
		border: 3px solid #e6e6e6;
	}
	
	#ui-content .subheader 	{
		margin-bottom: 15px;
	}
		
		#ui-content .subheader h2	{
			font-size: 20px;
			margin-bottom: 5px;
		}
		
		#ui-content .subheader p	{
			font-size: 18px;
		}

	#ui-content #relatedlinks	{
		list-style: none;
		margin: 5px 0 10px 0;
		width: 585px;
		height: 40px;
		background: url(../images/bgr-relatedlinks.png) no-repeat top left;
	}
	
		#ui-content #relatedlinks li	{
			background: none;
			padding: 0;
		}
	
		#ui-content #relatedlinks li.forums	{
			float: left;
			margin-left: 5px;
			margin-right: 7px;
			margin-top: 5px;
		}
		
		#ui-content #relatedlinks li.profile	{
			float: left;
			margin-top: 5px;
		}
		
		#ui-content #relatedlinks li.archives	{
			float: right;
			margin-top: 5px;
			margin-right: 5px;
		}
	
		#ui-content #relatedlinks a	{
			position: absolute;
			display: block;
			height: 32px;
		}
		
			#ui-content #relatedlinks a span	{
				display: none;
			}
			
			#ui-content #relatedlinks li.forums,
			#ui-content #relatedlinks li.forums a	{
				width: 152px;
			}
			
			#ui-content #relatedlinks li.profile,
			#ui-content #relatedlinks li.profile a	{
				width: 150px;
			}
			
			#ui-content #relatedlinks li.archives,
			#ui-content #relatedlinks li.archives a	{
				width: 105px;
			}
			
			#ui-content #relatedlinks li.forums a	{
				background: url(../images/button-leavecomments.png) no-repeat top left;
			}
			
			#ui-content #relatedlinks li.profile a	{
				background: url(../images/button-viewprofile.png) no-repeat top left;
			}
			
			#ui-content #relatedlinks li.archives a	{
				background: url(../images/button-viewarchives.png) no-repeat top left;
			}
			
				#ui-content #relatedlinks li a:hover	{
					background-position: bottom left;
				}
		
	#ui-content #donate	{
		background: url(../images/bgr-donate.png) no-repeat top left;
		position: relative;
		width: 585px;
		height: 330px;
		list-style: none;
		margin: 0;
	}
	
		#ui-content #donate li	{
			position: absolute;
			width: 175px;
			height: 140px;
			background: none;
			padding: 0;
		}
		
			#ui-content #donate li.donation25	{
				top: 28px;
				left: 10px;
			}
			
			#ui-content #donate li.donation50	{
				top: 28px;
				left: 205px;
			}
			
			#ui-content #donate li.donation100	{
				top: 28px;
				left: 400px;
			}
			
			#ui-content #donate li.donationother	{
				top: 190px;
				left: 205px;
			}
		
		#ui-content #donate h3,
		#ui-content #donate p	{
			text-align: center;
		}
		
		#ui-content #donate h3	{
			font-size: 36px;
			letter-spacing: -1px;
			color: #1B83C1;
			margin: 0;
		}
		
		#ui-content #donate p	{
			font-size: 15px;
			color: #666;
			padding-bottom: 5px;
		}
		
			#ui-content #donate li.donation25:hover p,
			#ui-content #donate li.donation50:hover p,
			#ui-content #donate li.donation100:hover p,
			#ui-content #donate li.donationother:hover p	{
				color: #333;
			}
		
		#ui-content #donate form input	{
			margin-left: 47px;
		}
		
	#ui-content #collaborators	{
		margin: 0;
		list-style: none;
	}
	
		#ui-content #collaborators li	{
			margin: 0;
			padding: 0 0 25px 0;
		}
		
		#ui-content #collaborators h2	{
			margin-bottom: 5px;
		}
		
			#ui-content #collaborators h2 a	{
				color: #000;
				text-decoration: none;
			}
			
				#ui-content #collaborators h2 a:hover	{
					color: #1b83c1;
				}
		
		#ui-content #collaborators p	{
			padding-bottom: 10px;
		}
		
		#ui-content #collaborators img	{
			border: 2px solid #e6e6e6;
			max-width: 45px;
			max-height: 45px;
			margin-top: 2px;
		}
		
		#ui-content #collaborators .left	{
			width: 65px;
		}
		
		#ui-content #collaborators .right	{
			width: 520px;
		}		
	
	
/* UI Thickbox Content
-----------------------------------------------------------------------------------------------*/

#content-tb,
#content-error	{
	padding: 15px;
}

#content-tb h1,
#content-error h1	{
	font-size: 24px;
	letter-spacing: -1px;
}

#content-tb h2,
#content-error h2	{
	font-size: 18px;
}

	#content-tb h2 span,
	#content-error h2 span	{
		font-weight: normal;
	}

#content-tb h3,
#content-error h3	{
	font-size: 15px;
}

#content-tb p,
#content-tb ul,
#content-error p,
#content-error ul	{
	font-size: 13px;
}

#content-tb ul,
#content-error ul	{
	margin-bottom: 15px;
}

	#content-tb li,
	#content-error li	{
		margin-bottom: 5px;
	}
	
#content-tb form	{
	border: 1px solid #E2E3E3;
	background: #fff;
	padding: 1px;
}

#content-tb fieldset	{
	background: #F4F4F4;
	padding: 15px;
}

#viewallart	{
	width: 723px; /* 742px without padding */
	padding-left: 10px;
	padding-right: 9px;
	background: url(../images/bgr-comic-strip-archives.png) repeat top left;
}

#content-tb #viewallart form	{
	border: none;
	background: transparent;
	padding: 0;
}

#TB_window .comic-paginate {
	text-align: center;
}

#TB_window .comic-paginate ul	{
	list-style: none;
	margin: 0;
}

#TB_window .comic-paginate li	{
	display: inline;
	padding: 0 8px;
}

#TB_window .comic-paginate a	{
	
}

#TB_window .comic-paginate a:hover	{
	color: #1b83c1;
}

#TB_window .comic-paginate a.comic-prev	{
	background: url(../images/arrows-prev.png) no-repeat top left;
	padding-left: 25px;
	text-align: right;
}

	#TB_window .comic-paginate a.comic-prev:hover	{
		background-position: bottom left;
	}

#TB_window .comic-paginate a.comic-next	{
	background: url(../images/arrows-next.png) no-repeat top right;
	padding-right: 25px;
}

	#TB_window .comic-paginate a.comic-next:hover	{
		background-position: bottom right;
	}


/* UI Footer
-----------------------------------------------------------------------------------------------*/

#ui-footer	{
	width: 960px;
	height: 35px;
	background: url(../images/bgr-homepage-promos-footer.png) no-repeat top left;
	position: relative;
}

body#interior #ui-footer	{
	background: url(../images/bgr-interior-promos-footer.png) no-repeat top left;
}

body#normal #ui-footer	{
	background: url(/ui/images/bgr-forums-footer.png) no-repeat top left;
}

	#ui-footer a	{
 		position: absolute;
		display: block;
		text-decoration: none;
		left: 400px;
		top: 0;
		width: 160px;
		height: 25px;
	}
	
		#ui-footer a span	{
			display: none;
		}
		

/* Page Footer
-----------------------------------------------------------------------------------------------*/
		
#footer	{
	padding-top: 10px;
	position: relative;
}	
	
	#footer a,
	#footer p,
	#footer li	{
		color: #fff;
		font-size: 11px;
		line-height: normal;
	}

	#footer p,
	#footer ul	{
		padding: 0 0 20px;
		position: absolute;
	}
	
	#footer p	{
		left: 43px;
	}
	
	#footer ul	{			
		right: 43px;
		list-style: none;
	}
	
		#footer li	{
			float: left;
		}
		
			#footer li.last a	{
				background: none;
				padding-right: 0;
			}
		
			#footer a	{
				background: url(../images/bgr-footer-divider.png) no-repeat top right;
				padding: 0 8px;
			}

		
/* Hacks
-----------------------------------------------------------------------------------------------*/

.hide {
	position: absolute;
	left: -9999px;
}

.clear {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0;
	overflow: hidden;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block; }
	
/* Hides from IE-mac \*/ 
* html .clearfix {
	height: 1%; }

.clearfix {
	display: block; }
/* End hide from IE-mac */

