/** strawberry **/
/** last updated: September 22, 2004 **/


	body {

		margin: 0 auto 0 auto;
  		background-image: url(http://www.manic.com.sg/blog/images/bg.gif); 
  		text-align: center;
  		

		}

/** defines colours of links  **/

	A 			{ color: #999966; text-decoration: none; font-weight: normal; } 
	A:link		{ color: #FF6666; text-decoration: none; } 
	A:visited	{ color: #FF6666; text-decoration: none; } 
	A:active	{ color: #FF6666; text-decoration: none;} 
	A:hover		{ color: #FF6666; text-decoration: underline;}

	

	h1, h2, h3 {
		margin: 0px;
		padding: 0px;

	}

#container {
	width: 700px;
	margin: 0 auto 0 auto;
	padding: 0 20px 20px 20px;
	/* Overrides inherited centered value from body */
	text-align: center;
	border-color: #F66;
	border-width: 0 2px 0 2px;
	border-style: none dotted none dotted;
	background-color: #FFF;
	z-index:0;

} 


/** this is the masthead  **/
/** In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such. ã webmonkey **/

	#banner {

		font-family:verdana, arial, sans-serif;
		color:#FFF;
		font-weight:normal;
  		padding: 0; 
		margin: 0 0 20px 0;
		letter-spacing: .2em;
		height: 90px;
		width: 680px; 		
		background-image: url(http://www.manic.com.sg/blog/images/header.gif);		/** change this image to change the masthead **/
		background-repeat: no-repeat;
		background-position: 0px, 0px; 				/** from left, top **/
		}

	
/** I have no idea what the next ID is for  **/

	#banner a,
        #banner a:link,
        #banner a:visited,
        #banner a:active,
        #banner a:hover {
		font-family:verdana, arial, sans-serif;
		font-size: x-large;
		color: #FFF;
		text-decoration: none;

		}


/** this one neither  **/

	.description {
		font-family:georgia, verdana, arial, sans-serif;
		color:#666666;
		font-size:11px;
		font-weight:bold;

		}	

/** this is left block **/				

	#content {
		float:left;
		width:460px;
		background:#FFF;
		border-right:1px dashed #999999;
		margin-right:15px;
		padding-bottom:20px;
		text-align: left;
		}

/** width of right column  **/	


	#links {
	position: relative;
	float: right;
	width: 220px;
	margin-right: 0;
	margin-left: 0;
	background-color: #FFF;
	padding: 0;
	z-index:9;
	overflow: hidden;
	text-align: left;
		
		}
		
		.linksText {
		font: 78% 'Lucida Grande','Lucida Sans Unicode',arial,verdana,sans-serif;
		text-align: left;
}
		
/** bottom content. This acts as a clearer. **/
		
		#bottomContent {
		width: 600px;
		clear:both;
		margin:0px;
		padding: 0px;
		}

/** margins around the entire text area  **/		

	.blog {

  		padding: 0 15px 30px 0;
  			

		}	

	
/** this one is for each block of text in the body of each post  **/

	.blogbody {

		font-family: georgia, verdana, arial, sans-serif;
		color:#333;
		font-size:11px;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
  		text-align:left;
  		/** padding-left:5px; **/
  		padding-top: 10px;
		border-bottom:1px dashed #999999;	
		}


/** learn this new way of defining link colour  **/

	.blogbody a,
	.blogbody a:link,   { font-weight: normal; text-decoration: none; color=#F66;}
	.blogbody a:visited,{ font-weight: normal; text-decoration: none; color=#F66;}
	.blogbody a:active, { font-weight: normal; text-decoration: none; color=#F66;}
	.blogbody a:hover   { font-weight: normal; text-decoration: underline; color=#F66;}
	.blogbody small 	{ font-size:10px; color:#333; line-height:18px; }


	.catbody {

		font-family: georgia, verdana, arial, sans-serif;
		color:#333;
		font-size:11px;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
  		text-align:left;
  		/** padding-left:5px; **/
  		padding-top: 10px;
		}

/** used by cgi-bin/search_templates/default.tmpl  **/

	.searchbody {

		font-family: georgia, verdana, arial, sans-serif;
		color:#333;
		font-size:11px;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
  		text-align:left;
  		/** padding-left:5px; **/
  		padding-top: 10px;
		border-top:1px dashed #999999;	
		}

	.searchbody a,
	.searchbody a:link,   { font-weight: normal; text-decoration: none; color=#F66;}
	.searchbody a:visited,{ font-weight: normal; text-decoration: none; color=#F66;}
	.searchbody a:active, { font-weight: normal; text-decoration: none; color=#F66;}
	.searchbody a:hover   { font-weight: normal; text-decoration: underline; color=#F66;}
	.searchbody small 	{ font-size:10px; color:#333; line-height:18px; }
	
/** titles for each post  **/

	.title	{ 
		font-family: georgia, verdana, arial; 
		font-size: 12px; 
		color: #FF6666; 
		font-weight:bold;
		text-transform:uppercase;	
		letter-spacing: .1em; 	

		}			

/** used in individual template to link back to home, etc  **/		

	#menu {

		font-family:georgia, verdana, arial, sans-serif;
		margin-bottom:15px;
		color:#666666;
		font-size:11px;
  		line-height:140%;
  		padding-left:10px;	
  		padding-right:10px;
  		padding-top:10px;
		}

/** this is a light purple colour  **/		

	a.menu:link     {font-weight: bold; color:#CCFFFF; text-decoration: none;}
	a.menu:visited  {font-weight: bold; color:#CCFFFF; text-decoration: none;}
	a.menu:active   {font-weight: bold; color:#CCFFFF; text-decoration: none;}
	a.menu:hover    {font-weight: bold; color:#CCCCFF; text-decoration: underline;}	

		
/** dates before each post, not dates in calendar  **/	

	.date	{ 

		font-family: verdana, arial, sans-serif; 
		font-size: 10px; 
		color: #666; 
		padding-top:15px;
		/** padding-left:10px; **/
		padding-bottom:5px;
		margin-bottom:10px;
		border-bottom:1px dashed #CCCCCC;
		font-weight:normal;
		text-align:right;
		}			

		
/** the little posted by line  **/	

	.posted	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: 10px; 
		color: #333;
		margin-bottom:15px;
		clear: both;
		}

		
/** I created this to get the typographi.ca like dashed border around the calendar.  **/	

	#calendarborder {

		font-family:verdana, arial, sans-serif;
		color:#666;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
  		padding:2px;
  		text-align:center;	
		border:1px dashed #999999;	

		}
		
/** calendar text  **/	


	.calendar {

		font-family:verdana, arial, sans-serif;
		color:#999999;
		font-size:10px;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
  		padding: 1px;
  		text-align:center;	
		}

	
/** calendar links **/	
	
	.calendar a,
	.calendar a:link,   { color=#FF6666; font-weight: normal; text-decoration: none;}
	.calendar a:visited,{ color=#FF6666; font-weight: normal; text-decoration: none;}
	.calendar a:active, { color=#FF6666; font-weight: normal; text-decoration: none;}
	.calendar a:hover   { color=#FF0066; font-weight: bold; text-decoration: none;} 

	
/** used for the month  **/	

	.calendarhead {	
		font-family:verdana, arial, sans-serif;
		color:#999999;
		font-size:10px;
		font-weight:bold;
  		background:#FFF;
  		line-height:140%;
  		padding:2px;				
		text-transform:uppercase;
		}	

/** I created the next two styles. But should use the new method.  **/	

	.side {
	font-family:verdana, arial, sans-serif;	
	color:#92A97F; 
	font-size:10px; 
	font-weight:normal; 
	line-height:140%; 
	padding: 0;
	}
	
	.side bold {font-weight:bold; }	
	
	a.side:link     { color:#80946F; text-decoration: none;}
	a.side:visited  { color:#80946F; text-decoration: none;}
	a.side:active   { color:#80946F; text-decoration: none;}
	a.side:hover    { color:#80946F; text-decoration: underline;}

			
/** Light grey strips on the right  **/	

	.sidetitle {
		font-family:verdana, arial, sans-serif;
		color:#80946F;
		font-size:10px;
		font-weight:bold;
  		background:#E9EED2;
  		line-height:140%;
  		padding:2px;
  		margin-top:10px;
  		text-align:center;
  		text-transform:uppercase;
		letter-spacing: .2em;  					
		}
		
/** drop downs for search template **/	

.drop {
	font-family:verdana, arial, sans-serif;	
	color:#333; 
	font-size:10px; 
	font-weight:normal; 
	line-height:100%; 
	padding: 0;
	}
	
	a.drop:link     { color:#666699; text-decoration: none;}
	a.drop:visited  { color:#666699; text-decoration: none;}
	a.drop:active   { color:#666699; text-decoration: none;}
	a.drop:hover    { color:#666699; text-decoration: underline;}		

	

	.syndicate {

		font-family:verdana, arial, sans-serif;

		font-size:x10px;

		font-weight:bold;		

  		line-height:140%;

  		padding:2px;

  		margin-top:10px;

  		text-align:center;

  		background:#EEE;  		

 		}	

		

	.powered {

		font-family:verdana, arial, sans-serif;

		color:#666666;

		font-size:10px;

		font-weight:bold;

		border-top:1px solid #CCC;

		border-bottom:1px solid #CCC;		

		line-height:140%;

		text-transform:uppercase; 

		padding:2px;

		margin-top:10px;

		text-align:center;

		letter-spacing: .2em  					

		}	

		

	

	.comments-body {

		font-family:georgia, verdana, arial, sans-serif;

		color:#333333;

		font-size:11px;

		font-weight:normal;

  		line-height:140%;

  		padding:10px;

  		border-bottom:1px dashed #999999;				

		}		



	.comments-post {

		font-family:verdana, arial, sans-serif;

		color:#666;

		font-size:10px;

		font-weight:normal;

  		background:#FFF;			

		}	

		

	.comments-head	{ 

		font-family: georgia, verdana, arial, sans-serif; 

		font-size: 11px; 

		color: #FF9900; 

		font-weight:bold;

		text-transform:uppercase;	

		letter-spacing: .1em; 	

		padding:5px;

		margin-top:10px;		

		}		



	.trackback-body {

		font-family:verdana, arial, sans-serif;

		color:#666;

		font-size:small;

		font-weight:normal;

  		background:#FFF;

  		line-height:140%;

  		padding:10px;			

		}		



	.trackback-url {

		font-family:verdana, arial, sans-serif;

		color:#666;

		font-size:small;

		font-weight:normal;

  		background:#FFF;

  		line-height:140%;

  		padding:10px;

  		border:1px dashed #CCC;			

		}



	.trackback-post {

		font-family:verdana, arial, sans-serif;

		color:#666;

		font-size:10px;

		font-weight:normal;

  		background:#FFF;			

		}





	#banner-commentspop {

		font-family:georgia, verdana, arial, sans-serif;

		color:#333333;

		font-size:15px;

		font-weight:bold;

		border-bottom:1px dashed #999999;

  		padding:15px; 

		}