/* @group Core Elements */

html {
	height: 100%;
	margin-bottom: 1px;
}

body,td {
	line-height: 135%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

body {
	margin: 0;
	padding: 0;
			
}

body.f-smaller {
	font-size: 10px;
}

body,
body.f-default {
	font-size: 12px;
}

body.f-larger {
	font-size: 15px;
}

p {
  /* setup some more readable paragraph spacing */
  margin-top: 10px;
  margin-bottom: 15px;
}

/* CF: Updated to match the nicer DokuWiki formatting for headings. */
h1, h2, h3, h4, h5 {
    color: #000000;
    font-size: 100%;
    font-weight: normal;
    margin: 0 0 1em 0;
    padding: 0.5em 0 0 0;
    border-bottom: 1px solid #bbbbbb;
    line-height: normal;
}

h1 { font-size: 160%; font-weight: bold; }
h2 { font-size: 150%; }
h3 { font-size: 140%; font-weight: bold; border-bottom: none; }
h4 { font-size: 120%; font-weight: bold; border-bottom: none; }
h5 { font-size: 100%; font-weight: bold; border-bottom: none; }

/* CF: The logo ("Cafu Engine") with its subtitle is at the same time the topmost heading. */
div#masthead h1 { text-align: center; width: 768px; font-size: 100%; font-weight: normal; border: 0 none; margin: 0; padding: 3px 0 0; color: #333333; }

/* CF: Without this, the caption is underlined in the RokSlideShow module... */
div#slideshow h2 { border: none; }


body {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* @end */

/* @group Joomla Elements */

.small,
.modifydate,
.createdate,
div.mosimage_caption {
	font-size: 95%;
}

.componentheading {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 170%;
	line-height: 100%;
	padding: 0;
	margin: 20px 0 20px 0;
}

#mainframe td.contentheading,
.contentheading {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 150%;
	padding-left: 10px;
	width: 100%;
	height: 30px;
	line-height: 30px;
}

#mainframe td.buttonheading,
#mainframe .contentpaneopen td.buttonheading {
	padding: 7px 3px 0;
}

#mainframe td.column_separator {
	padding-left: 15px;
}

td.componentheading {
	padding-bottom: 15px;
}

#mainframe td.sectiontableheader {
	font-weight: bold;
	padding: 4px 2px;
}

#mainframe td.sidebar.left {
	background: url(../images/left-shadow.png) 100% 0 repeat-y;
}

#mainframe td.sidebar.right {
	background: url(../images/right-shadow.png) 0 0 repeat-y;
}

.sectiontableentry1,
.sectiontableentry2 {
	text-align: left;
	padding: 2px 0;
}

.contentpane,
.contentpaneopen {
	width: 100%;
}

#mainframe .contentpaneopen td {
	padding: 0 10px;
}

/* @end */

/* @group Structure */

#frame-4 {
	padding: 0 36px;
}

#masthead {
	height: 111px;
	position: relative;
}

/* CF: Changed values to meet the dimensions of my logo. */
#logo {
	width: 296px;
	height: 68px;
	margin-top: 14px;
	margin-left: 20px;
}

div#mod-banner {
	top: 0px;
	right: 172px;
	position: absolute;
	width: 415px;
	height: 76px;
	overflow: hidden;

	border-color: #999999;
	border-style: solid;
	border-width: 0 1px 1px;
	border-radius: 0 0 8px 8px;
}

div#mod-top {
	top: 10px;
	right: 10px;
	width: 138px;
	height: 90px;
	overflow: hidden;
	position: absolute;
}

div#mod-top .top-padding {
	padding-left:  15px;
}

#pathway {
	height: 30px;
	padding: 0 32px;
	overflow: hidden;
}

.mainbody-padding {
	min-height: 530px;
	padding: 17px 41px 13px 42px;
}

.component-padding {
	padding-bottom: 8px;
}

.body-padding {
	margin-top: 8px;
	padding-right: 8px;
}

#footer-padding {
	padding: 15px 34px;
}

/* CF: I updated this to better suit my needs (contains the copyright statement). */
#rocket-3 {
    font-size: 11px;
    font-weight: bold;
	height: 87px;
    padding-top: 3px;
	text-align: center;
}

img#rocket {
	width: 149px;
	height: 39px;
	border: 0;
	margin: 0 auto;
}

#mainframe .sections .left,
#mainframe .sections .right {
	background: none;
}

/* @end */

/* @group Table Control */

#mainframe {
	width: 100%;
	border-collapse: collapse;
	padding: 0;
}

table.sections {
	width: 100%;
	border-collapse: collapse;
}

#mainframe td,
.sections td {
	padding: 0;
}

td.w24 {
	width: 25%;
}

td.w33 {
	width: 33%;
}

td.w49 {
	width: 50%;
}

td.w99 {
	width: 100%;
}

td.spacer img {
	width: 10px;
}

#mainframe tr {
	vertical-align: top;
}

/* @end */

/* @group Modules */

.module,
.module-hilite1,
.module-hilite2,
.module-hilite3,
.module-hilite4 {
	margin-top: 9px;	
}

.module h3,
.module-hilite1 h3,
.module-hilite2 h3,
.module-hilite3 h3,
.module-hilite4 h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 135%;
	line-height: 24px;
	font-weight: normal;
	padding: 0 0 0 5px;     /* CF: Reduced from 25px to 5px in order to waste less space after "flame" icon was removed. */
	margin: 0 0 10px 0;
}

.module div div div,
.module-hilite1 div div div,
.module-hilite2 div div div,
.module-hilite3 div div div,
.module-hilite4 div div div {
	padding: 18px;
}

.module div div div div,
.module-hilite1 div div div div,
.module-hilite2 div div div div,
.module-hilite3 div div div div,
.module-hilite4 div div div div,
.left .module div div div div,
.left .module-hilite1 div div div div,
.left .module-hilite2 div div div div,
.left .module-hilite3 div div div div,
.left .module-hilite4 div div div div,
.right .module div div div div,
.right .module-hilite1 div div div div,
.right .module-hilite2 div div div div,
.right .module-hilite3 div div div div,
.right .module-hilite4 div div div div{
	background: none;
	padding: 0;
}

#footer-1 .module h3 {
	padding-left: 0;
	background: none;
}

#footer-1 .module div div div {
	padding: 0px 18px;
}


/* section table overrides */
.sections .left .module-hilite1 div div,
.sections .left .module-hilite2 div div,
.sections .left .module-hilite3 div div,
.sections .left .module-hilite4 div div,
.sections .right .module-hilite1 div div,
.sections .right .module-hilite2 div div,
.sections .right .module-hilite3 div div,
.sections .right .module-hilite4 div div {
	background: none;
}

/* @end */

/* @group Horizontal Menu */

#horiz-menu {
	height: 26px;
}

#horiz-menu ul.menu {
	padding-left: 15px;
}

#horiz-menu ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 0px;
}

#horiz-menu li {
	background: none;
	display: block;
	float: left;
	margin: 0;
	margin-right: 10px;
	padding: 0;
}

#horiz-menu li span {
	display: block;
	float: left;
}

#horiz-menu a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	display: block;
	float: left;
	height: 26px;
	line-height: 26px;
	padding: 0 15px;
	font-weight: normal;
	font-size: 110%;
}

#horiz-menu li.parent li a,
#horiz-menu li.parent li.parent li a,
#horiz-menu li.parent li.parent li.parent li a {
	background: none;
}

#horiz-menu li li a {
	font-size: 100%;
}

#horiz-menu a:hover {
	text-decoration: none;
}

#horiz-menu li:hover,
#horiz-menu li.sfHover {
	background: none;	
}

/* @end */

/* @group Sub Menu */

#mainframe ul.menuside {
	margin: 0;
	padding: 0;
}

#mainframe ul.menuside li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mainframe ul.menuside li.active a {
	font-weight: bold;
}

#mainframe ul.menuside li.active li a {
	font-weight: normal;
}

#mainframe ul.menuside a {
	display: block;
	padding: 5px 0 5px 25px;
	margin-bottom: 1px;	
}

#mainframe ul.menuside ul {
	margin: 0;
	padding-left: 20px;
}

#mainframe ul.menuside ul a {
	background-image: none;
	padding-left: 5px;
}

#mainframe ul.menuside a:hover {
	background-position: 5px -20px;
}

#mainframe ul.menuside li ul {
	float:none;
	left:0;
	position:absolute;
	width: 177px;
	z-index: 5;
}

/* @end */

/* @group Mainmenu */

a.mainlevel {
	padding: 5px 0 5px 25px;	
	display:  block;
	margin-bottom: 1px;
}

a#active_menu.mainlevel {
	font-weight: bold;
}

a.mainlevel:hover {
	background-position: 5px -20px;
}

a.sublevel {
	line-height: 20px;
}

/* @end */

/* @group Content Styles */

/* @group Top Module */

div#mod-top ul {
	padding: 0;
	margin: 0
}

div#mod-top li {
	float:  left;
	width: 100%;
	margin-bottom: 3px;
	margin: 0;
	padding: 0;
	padding-left: 15px;
	list-style: none;
}

div#mod-top a.mainlevel {
	background: none;
	display: inline;
	padding: 0;
	margin: 0;
}

/* @end */


/* @group Readon */

.readon {
	display: block;
	float: left;
	clear: both;
	line-height: 30px;
	width: 101px;
	text-align: center;
	margin-top: 15px;
}

.module .readon,
.module-hilite1 .readon,
.module-hilite2 .readon,
.module-hilite3 .readon,
.module-hilite4 .readon {
	float: none;
	clear: both;
	padding-left: 22px;
	line-height: 18px;
	width: auto;
	text-align: left;
}

#footer-1 .readon {
	background: none;
	padding-left: 0;
}

/* @end */

/* @group Pathway */
span.pathway {
	display: block;
	line-height: 35px;
	height: 30px;
	font-weight: normal;
	margin-bottom: 15px;
	padding-left: 0px;
}

span.pathway img {
	float: left;
	width: 10px;
	height: 10px;
	
}

span.pathway a {
	float: left;
	padding: 0 20px 0 0;
}

/* @end */

/* @group Typography */

ul.number,
ul.flame-1,
ul.flame-2,
ul.flame-3,
ul.arrow-1,
ul.arrow-2,
ul.arrow-3,
ul.arrow-4,
ul.arrow-5,
ul.arrow-6,
ul.triangle-1,
ul.triangle-2,
ul.triangle-3,
ul.triangle-4,
ul.triangle-5,
ul.triangle-6,
ul.bullet-1,
ul.bullet-2,
ul.bullet-3,
ul.bullet-4,
ul.bullet-5,
ul.bullet-6 {
	padding-left: 20px;
	margin-left: 0;
}

/* CF: The ">" means that li must be an immediate child (not a grandchild) of ul for this style to take */
/*     effect. Without this, nested lists can behave unexpectedly as inner lists are affected as well.  */
ul.number > li,
ul.flame-1 > li,
ul.flame-2 > li,
ul.flame-3 > li,
ul.arrow-1 > li,
ul.arrow-2 > li,
ul.arrow-3 > li,
ul.arrow-4 > li,
ul.arrow-5 > li,
ul.arrow-6 > li
{
	list-style: none;
	margin-left: 0;
	margin-bottom: 5px;     /* CF: Reduced from 10px to 5px for less spacing between list elements. */
	padding-left: 28px;
}

/* CF: The ">" means that li must be an immediate child (not a grandchild) of ul for this style to take */
/*     effect. Without this, nested lists can behave unexpectedly as inner lists are affected as well.  */
ul.triangle-1 > li,
ul.triangle-2 > li,
ul.triangle-3 > li,
ul.triangle-4 > li,
ul.triangle-5 > li,
ul.triangle-6 > li,
ul.bullet-1 > li, 
ul.bullet-2 > li, 
ul.bullet-3 > li,
ul.bullet-4 > li, 
ul.bullet-5 > li, 
ul.bullet-6 > li
{
	list-style: none;
	margin-left: 0;
	margin-top: 3px;        /* CF: Just as needed for the Developers page. */
	margin-bottom: 3px;     /* CF: Reduced from 10px to 3px for less spacing between list elements. */
	padding-left: 22px;
}

pre {
	padding: 10px;
}

blockquote {
	background: url(../images/quote.png) 6px 0px no-repeat;     /* CF: Reduced y-offset from 12px to 0px. */
	font-style: italic;
	font-size: 100%;
	line-height: 150%;
	width: auto;
	padding: 8px 10px 10px 60px;    /* CF: Reduced top padding from 10px to 8px for less spacing. */
	min-height: 22px;               /* CF: 22px + (8px+10px padding) = 40px backgnd image height. */
	margin: 15px 0;
}

/* @end */

/* @group Notice Styles */

span.alert,
span.info,
span.download,
span.note {
	display: block;
	padding: 10px 10px 10px 45px;
	margin: 15px 0;	
}


/* @end */

/* @group RokSlide */

ul#rokslide-toolbar {

}

#rokslide-toolbar li.active { 
	background: #D7D7D7;
}

#rokslide-toolbar li.current { 
	background: #ebebeb;
	color: #333;
}

#rokslide-toolbar li {
	background: #ccc;
	color: #666;
}

div#frame {
	border: 5px solid #EBEBEB;
}

div#frame div.button#left { 
	background: url(../images/tabs-prev.png) 0 -20px no-repeat;
}

div#frame div.button#right { 
	background: url(../images/tabs-next.png) 0 -20px no-repeat;
}

/* @end */

.nounder {
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.clr {
	clear:both;
}

fieldset.input {
	border: 0;
}

.tool-tip {
	background: #f6f6f6;
	border: 1px solid #e6e6e6;
	padding: 4px;
}

/* @end */


/* ************************************************ */
/* Begin of custom additions by Carsten Fuchs (CF). */

/* CF: Make sure that in IE6 and IE7 the mouse cursor doesn't  */
/*     show in text-selection shape, but as the usual pointer. */
#horiz-menu a
{
    cursor: pointer;
}

/* CF: Set the border of linked images to 0 (default is 2px). */
a img
{
    border: 0;
}

/* CF: Markup for our search box. */
#cf-search
{
	background: transparent url(../images/searchbox-bg.png) no-repeat scroll 0 0;
	width: 120px;
	height: 18px;
	position: absolute;
	right: 20px;
	top: 4px;
}

#cf-search .search-input
{
	background-color: transparent;
	border: medium none;
	float: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	padding: 3px 0 0;
	height: 15px;
	width: 84px;
}

#cf-search .button-submit
{
	background: transparent url(../images/searchbox-magnifier.png) no-repeat scroll 0 0;
	border: medium none;
	cursor: pointer;
	float: left;
	width: 18px;
	height: 18px;
}

/* CF: A custom helper class for nice tables (that mimic the looks of those in the forum). */
.cf-table1
{
    background-color: #cccccc;
    margin: 10px 0 15px 0;      /* Same as for paragraphs <p>. */
}

.cf-table1 td
{
    border-left: 1px solid #ffffff;
    border-top:  1px solid #ffffff;
    padding: 8px !important;
    background-color: #f7f7f7;
}

/* CF: Without this, the arrow images are sometimes cut off at */
/*     the bottom when the list item is only one line of text. */
/* CF: The ">" means that li must be an immediate child (not a grandchild) of ul for this style to take */
/*     effect. Without this, nested lists can behave unexpectedly as inner lists are affected as well.  */
ul.arrow-1 > li,
ul.arrow-2 > li,
ul.arrow-3 > li,
ul.arrow-4 > li,
ul.arrow-5 > li,
ul.arrow-6 > li
{
	padding-bottom: 1px;
}

/* CF: This reduces the space to the top and left of the newsfeed items. */
/*     Note that the 0's must also be stated explicitly, because they    */
/*     seem to be the default in FF and Opera, but not in IE6 and IE7.   */
ul.newsfeed-hilite2
{
    margin: 0 0 5px 0;
    padding: 0 0 0 20px;
}

/* Even though comments, IE6 seems to read the next two lines when */
/* they are moved into the rule below and the XXX's aren't there.  */
/* XXXlist-style: none; */
/* XXXbackground: url(../images/style4/triangle-3.png) 6px 4px no-repeat; */
ul.newsfeed-hilite2 li
{
    margin-bottom: 6px;
}

/* End of custom additions by Carsten Fuchs (CF). */
/* ********************************************** */