/* text inside these marks are comments */

/*
	This is the CSS stylesheet that is used for the Boxes Nucleus skin.
	It is based on the "4th try" "three colums" design at The Noodle
	Incident. See URL: 
	http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
	and others for many details on getting styles to look the same in
	the different browsers.
	
	Here's how the pages are built up:

	MAIN PAGE
	---------

	body
	  div.contents (the middle column)
	    h1 (site title)
	      h2 (date header)
	        h3 (item title)
	          div.itembody (item text)
	          span.iteminfo (time / author / editlink / amount of comments)
	  div.menu (the left bar)
	    h1 (navigation, hidden link)
	      h2 (menu titles)
	  div.right (the right bar)
	      h2 (menu titles)
	
	DETAILED PAGE
	-------------
	body
	  div.contents (the middle column)
	    h1 (site title)
	      h2 (item title)
	        div.itembody (item text)
	        div.iteminfo (item info)
	      h2 (comments)
	        h3 (commentor name)
  	          div.commentbody
	      h2 (add comment)
	  div.menu (the left bar)
	    h1 (navigation, hidden link)
	      h2 (menu titles)
	  div.right (the right bar)
	      h2 (menu titles)

	OTHER PAGES
	-----------
	
	other pages are similar, having .contents a .menu and a .right part
*/
 


/*
	This style sheet uses purple colors. Web "safe" codes, from
	light to dark, are #c9f #96c #609. Also used is white: #fff.
	 */


/*
	This set of style sheets uses Radek's CSS Style Switcher plug in.
	The following are form styles specific to the plug in. 
*/



.formbutton{background-color:#BFBFBF;border:1px solid #A9A9A9;color:#353535}
.formbutton:hover{background-color:#FFDA00;border:1px solid #000000;color:#000000}
.formfield{background-color:#F4F4F4;border:1px solid #9F9F9F;border-bottom:1px solid #FAFAFA;color:#4A4A4A;margin:1px}
.formfield:focus{background-color:#FFFFFF;border:1px solid #000000}



/*
	The body definitions define how the page should globally look:
	- a smaller verdana, arial or font from the sans-serif family
	- lighter text on a darker background
	- a top margin code fudge for different browsers
*/


/* definitions applying to the page body */
body {
	margin: 20px 0px 0px 0px; /* n6.01win n6mac won't recognize top 
							margin for middle box, so it goes here */
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #fff;
	font-size: small;
	background-color: #609;
	}

/* 
	The definitions below determine how the page looks.
	
	There are 3 main div-elements, which are all positioned absolute
	(relative to the upper left corner of the screen); each includes
	some code fudging for different browsers:
	
	.contents: contains the main contents of the page - the middle
	.menu: left bar for navigation menu
	.right: right bar for...other stuff

*/


/* definitions applying to the middle contents block */
.contents {
	margin: 0px 250px 20px 250px; /* n6.01win n6mac won't recognize 
					top margin for middle box, so it goes in body */
	padding: 10px;
	border: 5px solid #c9f;
	background: #96c;
	}

/* definitions applying to the left menu bar */
.menu {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #c9f;
	background: #96c;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 180px;
	}
html>body #menu {
	width: 180px; /* ie5win fudge ends */
	}

/* definitions applying to the right bar */
.right {
	position: absolute;
	top: 0px;
	right: 0px; /* Opera5.02 will show a space at right when there 
				is no scroll bar */
	margin: 20px;
	padding: 10px;
	border: 5px solid #c9f;
	background: #96c;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 180px;
	}
html>body #right {
	width: 180px; /* ie5win fudge ends */
	}


/*
	Definitions for headers in the menu (.menu h2), right bar (.right h2),
	page titles (h1) and dateheads (.contents h2):
*/


/* definitions applying to page titles, for example, the blog title */
h1 {
	text-align: center;
	border: 5px solid #c9f;
	background: #609;
	padding: 5px; 
	margin-bottom: 5px;
	}

/* definitions applying to the headers in the two side bars */
.menu h2 {
	font-size: small;
	color: #fff;
	}

.right h2 {
	font-size: small;
	color: #fff;
	}

/* definitions applying to the date header */
.contents h2 {
	color: #609;
	padding: 5px; 
	font-size: large;
	margin-bottom: 5px;
	}

/* 
	Definitions for the item listings like they are done on the main
	page and in archives
	- h3.item is the title of an item (<h3 class="item">)
	- .itembody is the item contents
	- .iteminfo contains the time of posting and the name of the author, 
	   and the amount of comments
*/


/* item title */
h3.item {
	font-size: medium;
	margin: 0px;
	margin-top: 10px;
	}

.itembody {	
	margin-top: 5px;	
	margin-bottom: 5px;
	}

.iteminfo {	
	font-size: x-small;
	color: #609;
	}



/* There are two sets of anchor definitions; both sets define only the 
   anchor and the hover rule.
    - general anchors (will appear in each of the three layout boxes,
	  .menu, .contents, and .right) are larger
	- anchors in the iteminfo (.iteminfo a) are smaller, to match with 
	  rules for .iteminfo
*/


a {
	font-weight: bolder;
	color: #609;
	text-decoration: none;
	}

a:hover {
	font-weight: bolder;
	color: #609;
	text-decoration: underline;
	}

.iteminfo a {
	font-weight: bolder;
	color: #609;
	text-decoration: none;
	}

.iteminfo a:hover {
	font-weight: bolder;
	color: #609;
	text-decoration: underline;
	}


/*
	Definitions of how comments listings look like on item pages
	- h3.comment contains the name of the comment author
	- .commentbody contains the text from the comment
	- .commentinfo contains the time of commenting
*/

/* comment title */
h3.comment {
	font-size: medium;
	margin-bottom: 10px;
	}

.commentbody {
	text-align: justify;
	}

.commentinfo {	
	font-size: x-small;
	color: #609;
	}


/*
	Some rules that apply to contents generated using the markup buttons 
	"add left box" and "add right box."
	
	Both boxes have slightly larger text with a serif font-family, and 
	take a maximum of 20% of the width of the contents.
	
	This is very nice for text (a brief quote) Suggest you throw in a
	     <div class="leftbox">left box</div>
	to see how it looks. This definition is not always practical for 
	images.  You might want to take out the "width: 20%" if you'll be
	using these boxes for graphics of different sizes.
	
*/

.leftbox, .rightbox {
	margin: 3px;
	padding: 3px;
	font-family: serif;
	font-size: larger;
	font-weight: bolder;
	color: #c9f;
	width: 20%;
	}

.leftbox {
	float: left;
	border-right: 2px solid #c9f;	
	}

.rightbox {
	float: right;
	border-left: 2px solid #c9f;	
	}


/*
	Some general rules:
	- images never have a border (even when they are inside a hyperlink)
	- elements having class="skip" are not shown
	- item lists using <ul class="nobullets"> have no list-item bullets
	- highlighted text (in search results) will stand out
*/

img {
	border: none;
	}

.skip {
	display: none;
	}

ul.nobullets {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
	}

.highlight {
	background-color: #fff;
	color: #609;
	}