body
{
	background:	#04a;
	color:		#000;
	padding:	50px;
	margin:		0px;
}

body,
p,
h1,
h2,
h3
{
	font-family:	georgia;
	font-size:	12pt;
}

h1,
h2
{
	font-size:	16pt;
	font-weight:	bold;
}

h3
{
	font-weight:	bold;
	margin: 0px;
	padding: 0px;
}

a
{
	color:		#04a;
}

a:hover, a:visited, a:active
{
	color:		#000;
}

a img
{
	border:		none;
	text-decoration: none;
}


.alignleft 
{
	float: left;
}

.alignright 
{
	float: right;
}

div.iphone
{
	width:		200px;
	xheight:		370px;
	padding:	67px 20px 61px 20px;
	background:	url("images/iphone.png") no-repeat;
}


div.iphone .ScreenShot
{
	margin:		0px;
	display:	block;
}




/* set the image to use and establish the lower-right position */ 
.SpeechBubble, 
.SpeechBubble .Body, 
.SpeechBubble .Header, 
.SpeechBubble .Header h1, 
.SpeechBubble .Header h2,
.SideBar li, /* a widget */
.SideBar li .missingbody,
.SideBar li *, /* first element to replace .missingbody */
.SideBar li .widgettitle,
.SideBar li .widgettitle .missinghx
{
	background: transparent url("images/speechbubble_left.png") no-repeat bottom right;
	padding: 0px;
	margin: 0px;
}

.debug .SideBar li * /* first element to replace .missingbody */
{
	background: green;
	padding: 4px;
	margin: 4px;
}


.SideBar li li, /* undo speechbubble changes to lists inside a widget */
.SideBar li * * /* 1+nth elements after .missingbody */
{
	padding: 0px;
	margin: 0px;
	background: none;
}

/* undo speechbubble changes to lists inside a widget */
.debug .SideBar li li,
.debug .SideBar li * * /* 1+nth elements after .missingbody */
{
	padding: 4px;
	margin: 4px;
	background: red;
}

/* widget styling */
.SideBar li li
{
	padding: 0px;
	margin: 0px;
}

/* widget styling */
.SideBar ul
{
	padding: 0px;
	margin: 0px;
}	

.SpeechBubble_Top .SpeechBubble, 
.SpeechBubble_Top .SpeechBubble .Body, 
.SpeechBubble_Top .SpeechBubble .Header, 
.SpeechBubble_Top .SpeechBubble .Header h1, 
.SpeechBubble_Top .SpeechBubble .Header h2
{
	background-image: url("images/speechbubble_top.png");
}


.SideBar li,
.SpeechBubble
{
	padding-right:	10px; /* the gap on the right edge of the image (not content padding) */ 
	overflow: hidden;
}


/* undo changes to lists inside a widget */
.SideBar li li
{
	padding: 0px;
	overflow: visible;
}



.SideBar li .widgettitle,
.SpeechBubble .Header 
{
	background-position:	top right; 
	margin-right:		-10px; /* pull the right image over on top of border */
	padding-right:		35px; /* right-image-gap + right-inside padding */ 
}


/* set the top-left image */ 
.SpeechBubble .Header h1,
.SpeechBubble .Header h2,
.SideBar li .widgettitle .missinghx
{
	background-position:	top left; 
	margin:			0; /* reset main site styles*/ 
	padding:		10px 0px 0px 35px; /* padding-left = image gap + interior padding ... no padding-right */ 
	xheight:		auto !important; 
	height:		1%; /* IE Holly Hack */ 
	text-align:		center;
}

/* set the lower-left corner image */ 
.SpeechBubble .Body,
.SideBar li .missingbody,
.SideBar li * /* first element to replace .missingbody */
{
	background-position: bottom left; 
	margin-right:	15px;	/* interior-padding right */ 
	padding:	10px 10px 30px 45px; /* mirror .cssbox_head right/left */ 
}

/* for the side bar, move the "bottom" of the image down a bit */
.SideBar li * /* first element to replace .missingbody */
{
	margin-bottom:	-8px;
}

/* as we have to have a negative margin at the bottom, we put a margin at the top so that we have a gap */
.SideBar li
{
	margin-bottom: 10px;
}

/* undo * usage */
.SideBar li * * /* 1+nth elements after .missingbody */
{
	margin-right:	0px;
	margin-bottom:	0px; /* undo -8 */
	padding:	0px;

}

.SpeechBubble .Body p
{
	padding:	0px;
	/* gr: keep margins to paragraphs for main posts */
}


/* as a bit of an exception to the proper speech buubbles, we make the "background" of the bubble start at top left to get the top correct
the header (widgettitle) then overwrites the right hand side. We lose the BOTTOM RIGHT curves from this as is normal functionality */
.SideBar li
{
	background-position:	top left; 
}

.SideBar li .widgettitle
{
	margin-right:	-22px; /* pull the right image over on top of border */
	margin-left:	40px;
	text-align:	center;
	padding:	10px 18px 0px 0px; /* padding-left is to compensate for the box being over to the right (cos of right margin) so text is properly centered */ 
	height:		28px;
}



.SpeechBubble_Top .SpeechBubble .Header h1, 
.SpeechBubble_Top .SpeechBubble .Header h2
{
	padding-top:	30px;
	padding-left:	20px;
}

.SpeechBubble_Top .SpeechBubble .Body
{
	padding-left:	25px;
	padding-right:	0px;
}



#Tootle
{
	margin:		20px 0px 0px 35px;
	display:	block;
	height:		54px;
	background:	url("images/tootle.png") no-repeat;
}

#Tootle span
{
	display:	none;
}



#page
{
	margin:		0px auto 0px auto;
	width:		1000px;
}

.TopColumn_Left
{
	float:		left;
	width:		320px;
}

.TopColumn_Middle
{
	width:		380px;
	float:		left;
}

.TopColumn_Right
{
	float:		right;
	width:		200px;
}

.Column_Left, #sidebarleft
{
	float:		left;
	width:		320px;
}

.Column_Middle, #content
{
	width:		480px;
	float:		left;
}

.Column_Right, #sidebar
{
	float:		right;
	width:		200px;
}


.SpeechBubble .Body p.AppStoreBadge
{
	padding:	0px;
	margin:		10px 0px 0px -5px;
}


form
{
	margin:		0px;
	padding:	0px;
}

form input,
form textarea
{
	font-family:	georgia;
	font-size:	10pt;
	border:		solid 1px #04a;
	margin:		10px 0px 0px 0px;
	padding:	4px;
}

.FullWidth
{
	width:		95%;
}

.HideMeFromRobots
{
	display:	none;
}

hr
{
	clear:	both;
	color: #04a;
	width:	0px;
	height:	0px;
	margin: 0px;
	padding: 0px;
}

.ContentPost
{
	margin-bottom: 30px;
}

.PostHeader
{
	color:	#fff;
}

.PostHeader
{
	margin-left: 35px;
}

.PostHeader img
{
	vertical-align: middle;
	text-decoration:	none;
	margin-right:	5px;
}

.PostHeader a
{
	color:	#fff;
	text-decoration: none;
}

.PostHeader a span
{
	text-decoration: underline;
}


.postmetadata
{
	margin-top: 20px;
	padding: 10px 10px 0px 10px;
}

.SharePost, .TweetsAboutPost
{
	margin: 0px;
	padding: 10px 10px 0px 10px;
	border-style: solid none none none;
	border-color: #ccc;
	border-width: 1px;
}

.TweetsAboutPost
{
	margin-top: 10px;
}

.postmetadata ul, 
.postmetadata li
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.postmetadata li img
{
	margin-right: 4px;
}

ul.DevImages
{
	list-style-type:	none;
}

ul.DevImages li
{
	padding:	0px;
	float:		left;
	margin:		2px;
}


#footer
{
	width:		430px; /* max width of the speech bubble graphic */
	margin:		0px auto 0px auto; /* center */
}
	
#footer p, .PostNavigation
{
	font-size:	8pt;
	margin:		0px 0px 10px 0px;
	padding:	0px;
}

#footer .Header h2,
.PostNavigation.Header h2
{
	height:	5px;
}