/**
* Dark blue: #226999
* Mustard: #FFD400
* red carrot: #DD3900
*/

body{
	background:url(images/clouds_back.jpg) repeat-x 40% 0%;
	font-family:arial, sans-serif;
	font-size:93%;
	
}
a{
	color:#226999;
	text-decoration:none;
}
a:hover{
	color:#225777;
}
pre, code{
	width:500px;
	overflow:auto;
	font-family:"courier new",courier,fixed-width;
	background:#efeeff;
	border:1px solid #226999;
	padding:10px;
	color:#333;
	font-size:88%;
}
#body{
	background:url(images/clouds_fore.gif) repeat-x 60% 0%;
	z-index:1;
	text-align:center;
}

#navbar{
	position:absolute; top:0; left:0;
	z-index:2;
	width:100%;
}
#header{
	margin-top:24px;
	height:110px;
	display:block;
	width:100%;
	float:none;
}
#header span, #header a{
	float:right;
	width:770px;
	overflow:hidden;
	/* Padding image replacement */
	height:95px;
	padding-top:0px;
	text-indent:-9999px;
	/* Text indent image replacement */
	height:95px;
	padding-top:0px;
	text-indent:-9999px;
	background:url(images/lo-fi_glass.png) no-repeat right;
	display:block;
	margin:12px 20px 0 0;
}
* html #header span, * html #header a{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lo-fi.net/blog-toys/images/lo-fi_glass.png');
/*
images/lo-fi_glass.png');	
*/
	background:transparent;
}

#master-container{
	width:100%;
}
#super-content-container{
	width:100%;
	/*position:relative;*/
	text-align:right;
	clear:both;
}
#secondary-column{
	clear:both;
	position:absolute; top:0px; right:769px; /* 1px overlap with the super-content */
	top:134px;
	width:500px;
	background:url(images/rainbow.gif)  no-repeat right 0px ;
	overflow: hidden;
}
#secondary-column-content{
	background:url(images/stack.jpg)  no-repeat right 120px ;
	display:block;
	height:400px;
}

#super-content{
	background:#FFF url(images/shoulder.gif) no-repeat 0px 0px;
	margin:0 0 0 auto;
	display:block;
	width:770px;
	text-align:left;
	padding:0 0 00px 0px;
}

* html #super-content{
	padding:0 0 00px 0px;
}


/**
* Make the column appear on the right
*/
#content-container{
	width:770px;
	float:right;
	background:url(images/stripes_narrow.gif) 70px 0px no-repeat ;
	background-repeat:repeat-x;
	position:relative;
	/*
	If I want the content to appear under the shoulder
	I think I need to increase the width
	and make the background no-repeat and extra long.
	*/
}
#content{
	float:left; width:535px;
	padding:40px 0 200px 10px;
	background:url(images/shoulder.gif) no-repeat 0px 0px;
}
#sub-content{
	width:100%;
}
#column{
	width: 200px;
	float: right;
	padding:40px 10px;
}
#super-content h2{
	margin-top:0;
}

#footer{
	height:150px;
	background:url(images/ruler-stitch.jpg) center 40px no-repeat;
	width:80%;
	margin:0 auto;
	left:10%;
	color:#DD3900;
}
#footer .left{
	position:absolute;
	top:0px; left:-50px;
	background:url(images/ball1.gif) no-repeat;
	width:120px; height:120px;
}
#footer .right{
	position:absolute;
	top:10px; right:-40px;
	background:url(images/smileyball.gif) top right no-repeat;
	width:120px; height:120px;
}
#footer #footer-content{
	width:100%;
	padding-top:100px;
}


/**
* Not a column in this layout
#secondary-column{
	clear:both;
	width:780px;
	margin-top:100px;
	float:right;
	text-align:left;
}
*/

/*
* Positioning and design done, 
* Formatting 
*/
#content{
}
#content p{
	font-family:arial,helvetica,sans-serif;
	line-height:1.5em;
	color:#777;
}
#content .post-footer{

}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5{
	font-family:georgia, times, "times new roman", serif;
	margin:0; padding:0;
	font-weight:normal;
}
#content h1,
#content h2{
	color:#226999;
	font-size:2em; 
	margin:0 0 .5em 0;
}

#column{
	font-size:.9em;
	line-height:1.5em;
	color:#777;
}