/*
         This CSS stylesheet is based on the Grey stylesheet and is used for the Folklife skin.
	The Grey CSS stylesheet that is used for the default Nucleus skin.
	Here's how the pages are built up:

	(Note: the format outlined below is NOT mandatory. If you want your site to use another structure, edit skins and templates, and define your own stylesheet. The default skins and templates only serves as an example of how a site running Nucleus can look.)

	MAIN PAGE

	---------
	body
         div#wrapper
	  div.contents
	    banner: (site title)
	      h3 (item title)
	        div.itembody (item text)
	          span.iteminfo (time / author / editlink / amount of comments)
	div.menu
	    h1 (navigation, hidden link)
	      h2 (menu titles)
	
	DETAILED PAGE

	-------------

	body
	  div.contents
	    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.logo
	  div.menu	
	    h1 (navigation, hidden link)
	      h2 (menu titles)

	OTHER PAGES

	-----------

	other pages are similar, having a .contents and a .menu part
*/


/*

	The body definitions define how the page should globally look:
	- a medium verdana, arial or font from the sans-serif family
	- brown text on a tan background
*/

body {   font-family: verdana, arial, sans-serif;
	font-size: small;	
	background-color: #f0d8b6;
	color: #993333;}

h1, h2, h3, h4 { 
	font-family: Georgia, serif; 
	text-align: center}

         
/* 
	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):
	.contents: contains the main contents of the page.
	.menu: sidebar with menu
	.logo: logo to be displayed above the sidebar
*/

/*definitions applying to the outer wrapper*/

#wrapper {width: 95%;
	 left: 5%;
          min-width: 720px;
          border: 0;}
           
/* definitions applying to the top banner */

.banner {height: 144px;
         background-image: url(images/bgtile.png);
         overflow: hidden;
         border: 0;}
         
/*definitions applying to the title*/
.title {position: absolute;
	left: 21%;
         top: 45px;
	color: #dc143c;
	background-color: transparent;
         border: 0; 
         font-family: Times, "Times New Roman", serif; 
         font-weight: bolder; 
         font-size: 75px;}
         
/* definitions applying to the main section */

.contents {
	position: absolute; 
         top:160px; 
         left: 21%; 
         margin-top: 1%; 
         padding: 1%; 
         width: 53%; 
         height: 65%; 
         border: 0;
}

a:link{color: #993333;
     background-color: transparent;
     font-weight: bold;
     font-style: normal;
     text-decoration: underline}

a:visited{color: #888888;
     background-color: transparent;
     font-weight: bold;
     font-style: normal;
     text-decoration: underline}

a:hover{color: #f0d8b6;
     background-color: #993333;
     font-weight: bold;
     font-style: normal;
     text-decoration: underline}


/*definitions applying to the left and right columns*/

.left {
	position: absolute; 
         top:153px; 
         margin: 2%; 
         margin-left: 2%; 
         padding: 2%; 
         width: 13%; 
         border: 0;	
	}

.right {
	position: absolute; 
         top:153px; 
         left: 75%; 
         margin: 2%; 
         padding: 2%; 
         width: 15%; 
         border: 0;
         }

a.nav, a.nav:link, a.nav:visited {
	display:block; 
         width:95px; 
         height:23px; 
         background:#dc143c; 
         border:1px solid; 
         border-color: #663333; 
         margin-top:2px; 
         margin-right:2px; 
         text-align:center; 
         text-decoration:none; 
         font-family:verdana, arial, sans-serif; 
         font-size:10px; 
         color:#f0d8b6;
         line-height:22px; 
         overflow:hidden;}  

a.nav:hover {
	color:#dc143c; 
	background:#ffcc77;} 

a.nav:active {
	color:#dc143c; 
         background:#c00;}

a.nav2, a.nav2:link, a.nav2:visited {
	display:block; 
         width:90px; 
         height:23px; 
         background:#dc143c; 
         border:1px solid #000; 
         margin-top:2px; 
         margin-right:2px; 
         text-align:center; 
         text-decoration:none; 
         font-family:verdana, arial, sans-serif; 
         font-size:10px; 
         color:#f0d8b6;
         line-height:22px; 
         overflow:hidden;} 
 
a.nav2:hover {
	color:#dc143c; 
         background:#ffcc99;}
         
a.nav2:active {
	color:#dc143c; 
         background:#c00;}

/* 
	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
	anchors in the iteminfo (.iteminfo a) are not underlined and bold
*/

/* 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: gray;
}
.iteminfo a {
	font-weight: bolder;
	color: #555;
	text-decoration: none;
}
/*
	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: gray;
}
/*
	Some rules that apply to contents generated using the markup buttons 
	"add left box" and "add right box"
	both boxes have slightly larger text, and take a maximum of 20% of 
	the width of the contents.
*/
.leftbox, .rightbox {
	margin: 3px;
	padding: 3px;
	font-size: larger;
	width: 20%;
}
.leftbox {
	float: left;
	border-right: 2px solid #ccc;	
}
.rightbox {
	float: right;
	border-left: 2px solid #ccc;	
}
/*
	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) have a yellow background
*/
img {
	border: none;
}
.skip {
	display: none;
}
ul.nobullets {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}
.highlight {
	background-color: yellow;
}