/* copy this, paste into the backup doc in Dreamweaver,
edit it there, copy and paste back into here. */

/* Global Properties */

/* the black bar under the header */
/* composed of 3 pieces, I have no idea why the top setting needs to
be different to make them line up in safari and firefox
there are browser specific tweaks to this for IE in the conditional.css file */
/* single piece */
/*
#header-extra-div-1{
width:100%;
height:29px;
background:url(http://www.karma-lab.com/images/nav_back.gif) repeat-x top;
position:relative;
top:90px;
}
*/

#header-extra-div-1{
width:70px;
height:29px;
background:url(http://www.karma-lab.com/images/nav_rs_wiki.gif) no-repeat top;
position:relative;
top:87px;
float:right;
}
#header-extra-div-2{
width:846px;
height:29px;
background:url(http://www.karma-lab.com/images/nav_back.gif) repeat-x top;
position:relative;
top:87px;
float:right;
}
#header-extra-div-3{
width:70px;
height:29px;
background:url(http://www.karma-lab.com/images/nav_ls_wiki.gif) no-repeat top;
position:absolute;
top:109px; /*111px;*/ /* in order to not interfere with search box on ie6 */
}

body {
	font-size: 80%;
	font-family: Tahoma, Arial, Helvetica;
	/*background-color: #8b93a2;*/ /*#8f93a3;*/ /* page background, which will show through underneath the gradient pict when it runs out */
	background-color: #393d4b; /* page background, which will show through underneath the gradient pict when it runs out */
}

.line {
	width:228px;
	height:1px;
    background:url(http://www.karma-lab.com/images/wiki-line.gif) repeat-x top;
	margin-left:7px;  /* hack for IE 6 */
	
	margin-top:10px;
	margin-bottom:10px;
}

.line-sidebar-top {
	width:228px;
	height:1px;
    background:url(http://www.karma-lab.com/images/wiki-line.gif) repeat-x top;
	margin-left:7px; 
	margin-top:23px; /*10px;*/	
	margin-bottom:10px;
}


/*to achieve transparent pngs in IE6 **/
/* doesn't work on wikidot.com
img {
	behavior: url(http://www.karma-lab.com/CSS/iepngfix.htc);
}
*/

/* provide a gradient pict background */
#container-wrap {
	background:url(http://www.karma-lab.com/images/bg_gradient.gif) repeat-x top; 
	width:100%;
	padding-top:15px;
}

/* limit the width of the entire page */
#container{
	max-width: 986px;
	width: 986px;	/* hack for IE 6 */
	margin: auto;	/* float it in the center of the window */
		/* the ridged outline */
	/*border:2px ridge #757b8f;
	padding-top:15px;
	padding-left:15px;
	padding-right:15px;*/
		/* in order to not have short pages end before the 800 px gradient,
		we set a min-height of 800px for the container, and hack it for IE6 */
	min-height:800px;
  	height:auto !important;	/* hack for IE 6 */
  	height:800px;
}

/* make links have no underline, then underline on hover */
/* make links have no underline, then underline on hover */
a:link  {text-decoration: none; color: #0061a6; }	/* old color was 003366 */
a:visited   {text-decoration: none; color: #0061a6; }
a:active  {text-decoration: none; color: #0061a6; }
a:hover {
    text-decoration: underline; 
    background-color: transparent;
    color: #a3003a;
}
/* make links to pages that don't exist highlighted with red text */
a.newpage{color: #933;}

/* The main title at the head of each page */
#page-title{
	color: #111122;
	font-size: 200%;
	line-height: 120%;
	padding-bottom: 10px;
}
/* The top menu bar - it will now be transparent */
#top-bar {
  font-size: 100%;
  text-align: center;
  padding: 0;
  margin:0;
  color: #d7d9e0;
  left: 0; right:0;
  
  height: 21px;
  max-height: 21px;
  
  white-space: nowrap;
  line-height: 22px; /* controls height/spacing of items in drop down menus */
  width: 980px;	/* for IE 6 */
  position: relative;
  top:83px;
  left:0px;
  z-index:100;
}


/* Controls the top - right - bottom - left padding of
       the menu headings in the top-bar. the left offset controls the position. */
#top-bar ul{
	/*padding: 0px 20px 0px 287px;*/
	padding: 0px 0px 0px 287px;
	float: left;
}
#top-bar li { margin: 0; padding-left:8px; padding-right:8px;}
#top-bar li a { /*padding-left:8px; padding-right:8px;*/ padding:0px; }
/* Remove fixed-width from top menu (why was it there in the first place?!?)
    This allows larger entries to stay on a single row which is much more readable. */
#top-bar li ul { width: auto; }
/*#top-bar li ul li a { width: auto;}*/ /* except this fucks up in IE 6 - menus won't stay open*/
#top-bar li ul li a { width: 215px; padding-left:8px; padding-right:8px;} 

/* links in the top bar - transparent background, underline on hover */
#top-bar  a{
	color: #d7d9e0;
	text-decoration: none;
}
#top-bar a:hover{
	background:none;
	text-decoration:underline;
}
/* links in the dropped down menu */
#top-bar li ul li a {
	color: #d7d9e0;
	text-decoration: none;
	/*background-color:#515563;*/
	background:url(http://www.karma-lab.com/images/menubar-gradient.gif) repeat-x top;

}
#top-bar li ul li a:hover {
	color:#000000;
	text-decoration:none;
	background:none;
	background-color:#b2b6c4;
	/*background:url(http://www.karma-lab.com/images/menubar-gradient.gif) repeat-x top; */
}


/* Banner */
/* Put a logo image in the top header */
#header{
    height: 132px;
}
#header h1 a span{
    display:none;
}
#header h2{
    display:none;
}

#header h1 a,#header h1 a:hover{
    display: block;
    margin: 0; padding:0;
    background-image: url(http://www.karma-lab.com/images/klw-logo.jpg);
	background-repeat:no-repeat;
    height: 107px;
    width: 100%;
    position: absolute;
    top: 0px; left: 0px;
}


/* this is the User's name */
#header #login-status, #login-status a {
	color: #003366;
	font-weight:bold;
}
/* move it into the sidebar */
#header #login-status{
	float: left;
    position:absolute;
    left: 18px;
    top: 147px;
			/* took this out 8/22/2013 - it was what was causing the little arrow to appear underneath my name instead of to the right */
	/*width:230px;*/	/* for some reason, this determines where the account options popup shows up when dropped down  */

}

/* this is the account options popup menu in the dropped down state. */
#account-options a, #account-options{
	font-weight: normal;
	color: #d7d9e0;
	background-color:#515563;
}
a#account-topbutton{	/* the little button to the side */
	color: #d7d9e0;
	background-color:#515563;	/* of the little down arrow */
}
/* the popup menu in the hovering state */
#account-options a:hover, #account-options li ul li a:hover {
	color: #d7d9e0;
	background-color:#b2b6c4;
	color: #d7d9e0;
	background-color:#b2b6c4;
	text-decoration:none;
}
/* this controls the position of the popup menu */
#account-options{
	margin-top:0px;
	position:absolute;
	left:23px;
}
/* this is the "search this wiki" box */
/* put it in the sidebar */

#search-top-box{
    float: left;
    position:absolute;
    left: 16px;
    top: 171px;
	width:230px;
}


/* the search button and text field itself */
#search-top-box-input {background-color:#c9cbd4; border:1px inset #ffffff; width:146px}	/* the search text field */
input[value="search"] {background-color:#c9cbd4; border:2px outset #b9bdca; }	/* the search button */
#search-top-box input.empty{color: #3e3f44;}	/*the text color in the search box by default*/
input { padding-top:0px; padding-bottom:0px; padding-left:4px; padding-right:4px;}
input.button {padding-top:0px; padding-bottom:0px; padding-left:4px; padding-right:4px;}

/* other buttons, i.e. add a new page */
input[type="submit"] {background-color:#979ba5; border:2px outset #cdd2e0;}	

/* NOTE: the width of the sidebar is dependent on the settings below but also the settings of the main-content area, they interact */

/* The entire left column (sidebar) */
/* sidebar background and border */
#content-wrap {
	background:url(http://www.karma-lab.com/images/sidebar_back_wiki.gif); 
	/*background-color: #b9bcc4;*/	
	border-top: 0ps; /*1px solid #414655;*/
	border-bottom: 1px solid #414655;
	border-right: 4px solid #0a0a0b;
	border-left: 4px solid #0a0a0b;
	/*margin-top:-1px;*/
	margin-top:6px;
	margin-bottom:-6px;
}
#side-bar {
	width: 243px !important;
	width: 240px;	/* hack for IE 6 */
	color: #d7d9e0;
	/*padding: 0.5em;*/
	padding: 0px;
	padding-top: 55px;	/* allow room for the new position of the search box and account */
	margin:0;
		/* in conjunction with the background gradient which is 800px in height,
		cause the page to never be shorter than the gradient so we can't see where it ends */
		/* since min-height doesn't work in IE 6, doing it this way achieves the same effect
		it stops the page content from being any shorter than this */
	/*height: 530px;*/	/*also make main-content the sum of this and the padding-top, i.e. 585 */
}
/* The links on the left side */
#side-bar ul{
	display: block;
	padding-left: 7px !important;
	padding-left: 9px;	/* hack for IE 6 */
	padding-bottom:6px;
	margin:0;
	list-style: none;
	width:228px;
}
#side-bar ul li{
	margin: 0;
	display:block;
}

#side-bar li a {
	margin: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right:0px;
	display: block;
	border: 1px solid;
	border-left-color: #dbdee7;
	border-top-color: #dbdee7;
	border-right-color: #8b8d93;
	border-bottom-color: #8b8d93;
	color: #1E2B31;
	text-decoration: none;
}
#side-bar li a:hover {
	background-color: #c9cbd4;
}
/* The headings on the left */
#side-bar h1 {
	font-size: 140%;
	margin: 0px;
	/*padding-left: 0.5em;*/
	margin-top: 3px;
	margin-bottom: 0px;
	padding: 0px;
}
/* Left paragraph text */
#side-bar p {
	padding: 0px;
	margin: 0px;
	margin-bottom: 3px;
	margin: 0px;
}

/* the new page box and button, fixed width for IE6 fix */
.new-page-box input.text {width: 220px;}
.new-page-box input.button {width: 224px;}

/* The entire center column (content area) */
/* this is the color and characteristics of the main body text of articles */
#main-content {
	margin-left: 243px;
	width:697px;
	/* this is to get rid of the "gray border" that happes at the top
	of some pages, such as clicking on a tag in the tag cloud */
	margin-top: -15px;	
	padding-top: 15px; 	 /* then compensate */
	/* this is to get rid of the grey border that happens at the bottom
	of every page, now that we are coloring the content area a lighter shade */
	margin-bottom: -5px;
	padding-bottom: 5px;    /* then compensate */

	background:url(http://www.karma-lab.com/images/content_back_wiki.gif); 
	border-left: 1px solid #8b91a7;
	padding-left:20px;
	padding-right:17px !important;
	padding-right:12px;	/*hack for IE 6, to keep the content area from moving to the bottom */
	color: #3e3f44;		
	line-height: 130%;  /* increases space between each line of text */
	
	/*
	min-height:445px;
	height:auto;
	*/
}
#page-content {
	min-height:445px;
	height:auto;
}
/* this happens in a few places, such as in the sandobox and recent changes page when it shows a portion of the text of the page
when the mouse goes over it, it can change color, I don't want this so this is the same as the content background */
div.pages-list-item:hover{
	background-color: transparent;
}
div.changes-list-item:hover{
	background-color: transparent;
}
/* The next two elements counteract the above line-height setting
in the tag-cloud-box, because at 130% the larger-sized tags in the
bottom row get cut-off at the bottom */

div.pages-tag-cloud-box {
    line-height: 100%;
}

div.pages-tag-cloud-box a.tag{
    line-height: 100%;
	padding-left:0px;
	padding-right:6px;
}

/* this doesn't seem to have any effect */
/* not true, it shows up on the contact page, but for some reason,
not the headers on the main article pages. Needs further research */
#main-content h1 {

	font-size: 175%;
	color: #3e3f44;
	font-family: Tahoma, Arial, Helvetica;
}
/* this are the normal section headers in the articles */
#main-content h2 {
	line-height:120%;
}
/*
#main-content h3 {
	font-family: Tahoma, Arial, Helvetica;
}
#main-content h4 {
	font-family: Tahoma, Arial, Helvetica;
}
*/

/*this adds spacing to each item of an itemized list */
#main-content li
{
	padding-top: 4px;
}
	/*controls the width of all wide tables in every page (hopefully) */
.main-table {
	width:696px;
}

/* Footer */
#footer {
	height:25px;
	background:url(http://www.karma-lab.com/images/nav_back.gif) repeat-x top;
	padding-top: 4px;
	padding-bottom: 0px;
	border-top:0px;
	border-bottom:0px;
	border-left:4px solid #0a0a0b;
	border-right:4px solid #0a0a0b;
	color: #757b8f;
	text-align: left;
}

#footer p {
	padding-right: 100px;
}
#footer a {
	color: #757b8f;
}
#footer a:hover {
	border-bottom: 0px;
}

#license-area {
	color: #757b8f;
}


#license-area a {
	color: #95a4b6;
}

.page-options-bottom a, a.action-area-close{
	color: #2e313c;
	background-color: #f1f3f8;
	text-decoration: none;
	border: 1px outset #95a4b6;
}

.tagcloud {
	background:url(http://www.karma-lab.com/images/search-back.gif) repeat top;
	padding:10px;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #e3e5ef;
	border-bottom: 1px solid #e3e5ef;
}
.tagcloud-side {
	background:url(http://www.karma-lab.com/images/search-back.gif) repeat top;
	width:212px;
	padding:8px;
	margin-left:7px !important;
	margin-left:9px;  /* hack for IE 6 */
	margin-bottom:6px;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #e3e5ef;
	border-bottom: 1px solid #e3e5ef;
}
.tagcloud-tags {
	background:url(http://www.karma-lab.com/images/search-back.gif) repeat top;
	padding:10px;
	float:right;
	width:40%;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #e3e5ef;
	border-bottom: 1px solid #e3e5ef;
}
.side-tagcloud-title{
	color:white;
	margin-left:12px;
	margin-top:-10px !important;
	margin-top:-20px;	/*hack for IE 6 */
	margin-bottom:-15px;
}
	/* stupid hack to add space after last button for IE 6*/
.list-entire-tag-cloud {
	padding-bottom:0px !important;
	padding-bottom:4px;
}

.code {
	background-color:#f8f8f8;
	border:1px solid #b9bbc4;
	line-height: 110%;
	padding-right: 5px;
	padding-left: 5px;
	
}
.memberlist-header p { margin:0px !important; }
.memberlist-header {line-height:40px; }

.list-pages-box {font-size:11px !important; }


/* Modified the following #toc-list declaration to *not*
     use "!important", because it was causing the TOC
     list to not have hierarchical indenting that reflects
     the heading levels in the article. (shannong Aug23) */

#toc-action-bar {display:none;}
#toc-list div {margin-left:20px; display:list-item; list-style:disc; }

.odate, .printuser {white-space:nowrap; } /* top 20 recent edits */

.simple-table-small-font {font-size:11px;}