/*\
	- LAYOUT
	- COMMON
	- HEADER
	  * StyleSheetSwitcher MENU
	- CONTENT
	- BOTTOMLINKS
	- FOOTER
	- EXTRA
	  * DISPLAY BLOCK
	  * CLEAR FIX
	  * BOXES RIGHT
	  * SEARCH FORM
	  * ALERT
	  * LIST
	  * IMAGE SHOWOFF
	  * SUPERFISH CUSTOM
	  * GOOD/BAD
      * TABS
      * TWITTER
	  * OPTIONS
	  * CHANGELOG
\*/


/************************\
   	LAYOUT
\************************/
html {
	font-size:			100%;  /* IE 5 & 6 size bug */
}

body {
	background:			#EEE url("../img/hotcoals/bg-body.png") repeat-x left top;
	color:				#4A4A4A;
	font-family:		"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:			1em;  /* => 16px */
	margin:				0;
	padding:			0;
}

#body {
	font-size:			0.7em;  /* => 11px */
	margin:				0 auto;
	width:				980px;
}


/************************\
   	COMMON
\************************/
h1 {
	font-size:			2.36em;
	font-weight:		bold;
	margin:				0.67em 0;
}
h2 {
	font-size:			2em;
	font-weight:		bold;
	letter-spacing:		-1px;
	margin:				0.83em 0;
}
h3 {
	font-size:			1.5em;
	font-weight:		bold;
	letter-spacing:		-1px;
	margin:				1.17em 0;
}
h4 {
	font-size:			1.17em;
	font-weight:		bold;
	letter-spacing:		-1px;
	margin:				1.5em 0;
}
h5 {
	font-size:			0.83em;
	font-weight:		bold;
	margin:				2em 0;
}
h6 {
	font-size:			0.67em;
	font-weight:		bold;
	margin:				2.36em 0;
}

h1, h1 a,
h2, h2 a,
h3, h3 a,
h4, h4 a,
h5, h5 a,
h6, h6 a {
	color:				#1F1F1F;
	text-decoration:	none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	text-decoration:	underline;
}

a {
	color:				#7A3737;
}

p {
	margin:				0 0 20px 0;
	padding:			0;
}

hr {
	background:			#EEE;
	border:				none;
	clear:				both;
	height:				1px;
	margin:				20px 0;
}

q {
	quotes:				'"' '"' "'" "'";
}

img {
	border:				none;
}

* > input, 
textarea {
	font-size:			1em;
	height:				12px;
	padding:			5px;
}
textarea {
	height:				90px;
	width:				420px;
}
input:not([type=checkbox]) {  /* bug with checkbox border in Opera */
	border:				1px solid #EEEEE9;
}
input[type=password]{
	background:			url("../img/hotcoals/bg-pass.gif");
}
input[type=file] {  /* input file doesn't have paddings */
	height:				24px;
}
input[type=submit], 
input[type=button], 
button {
	background:			url("../img/hotcoals/bg-input-submit.png") no-repeat left top;
	border:				none;
	color:				#FFF;
	height:				24px;
	width:				auto;
}


/************************\
   	HEADER
\************************/	
#header {
	height:				140px;
	padding:			0;
	position:			relative;
	margin:				0 auto;
	width:				980px;
}

#header a {
	color:				#FFF;
	margin:				0 20px 0 0;
	text-decoration:	none;
}
#header a:hover {
	color:				#F4DEC7;
}

#header #title {
	float:				left;
	font-size:			2em;
	margin:				70px 10px 0 0;
	padding:			0;
}
#header #title a{
    color:				#FFF;
    text-decoration:	none;
}

#header #description {
	color:				#F4DEC7;
	float:				left;
	font-size:			1.1em;
	font-weight:		normal;
	letter-spacing:		normal;
	margin:				80px 0 0 0;
	padding:			0;
}

#header #citaat {
	bottom:				15px;
	color:				#4A4A4A;
	font-size:			1em;
	font-style:			italic;
	font-weight:		normal;
	margin:				0;
	padding:			0;
	position:			absolute;
	right:				0;
	text-align:			right;
}

#fastMenu {
	left:				0;
	line-height:		40px;
	position:			absolute;
	top:				0;
}

/* StyleSheetSwitcher MENU */
#sssMenu {
	position:			absolute;
	right:				0;
	top:				0;
}
#sssMenu .sssContent {
	background-color:	#1F1F1F;
	border-left:		1px solid #4A4A4A;
	border-right:		1px solid #4A4A4A;
}
#sssMenu .sssButton {
	background:			#7B1616 url("../img/hotcoals/bg-menu.png") repeat-x left top;
	clear:				both;
	color:				#FFF;
	cursor:				pointer;
	font-weight:		bold;
	line-height:		26px;
	text-align:			center;
}
#sssMenu .sssButton:hover {
	background:			#7B1616 url("../img/hotcoals/bg-menu-hover.png") repeat-x left top;
}
#sssMenu ul {
	margin:				0px;
	padding:			10px;
}
#sssMenu li {
	color:				#FFF;
	list-style:			circle;
	margin-left:		20px;
}
#sssMenu .current {
	border-bottom:		1px dotted #FFF;
}

#countDown span {
	display:block;
}


/************************\
   	CONTENT
\************************/
#content {
	background:			#FFF url("../img/hotcoals/bg-content.png") repeat-y left top;
	z-index:			1;
}
	
#contentTop {
	background:			#FFF url("../img/hotcoals/bg-content-top.png") repeat-y left top;
	height:				20px;
	margin:				30px 0 0 0;
}

#contentCenter {
	background:			#FFF url("../img/hotcoals/bg-content-center.gif") repeat-y 645px 0;
	margin:				20px 40px 30px 40px;
	min-height:			130px;
}
#contentCentrum {  /* no right background */
	margin:				20px 40px 30px 40px;
	min-height:			130px;
	text-align:			center;
}

#contentLeft {
	float:				left;
	width:				640px;
}

#contentRight {
	float:				right;
	width:				250px;
}

#contentBottom {
	background:			#FFF url("../img/hotcoals/bg-content-bottom.png") repeat-y left top;
	height:				20px;
}


/************************\
   	BOTTOMLINKS
\************************/
#bottomLinks{
	font-size:			0.8em;
	margin:				0 auto;
	width:				980px;
}
#bottomLinks ul{
	float:				right;
	list-style:			none;
	margin:				10px 13px !important;
	margin:				10px;
	padding:			0;
	width:				300px;
}
#bottomLinks li.first{
	border-bottom:		1px solid #BDBDBD;
	border-top:			0 none;
	padding-top:		1px;
}
#bottomLinks li{
	background:			transparent url("../img/hotcoals/bg-list-item.png") no-repeat scroll 5px center;
	border-bottom:		1px solid #BDBDBD;
	border-top:			1px solid #FFF;
	float:				left;
	padding:			0;
	width:				300px;
	z-index:			1;
}
#bottomLinks li.last{
	border-bottom:		0 none;
	border-top:			1px solid #FFF;
	padding-bottom:		1px;
}
#bottomLinks li a{
	float:				left;
	padding:			5px 0 5px 25px;
	position:			relative;
	text-decoration:	none;
	width:				275px;
	z-index:			3;
}
#bottomLinks li a.bottomLinkHovered {
	color:				#FFF;
}
#bottomLinks span#hoverSlider3{
	background:			transparent url("../img/hotcoals/bg-menu-hover.png") repeat scroll left top;
	border:				1px solid #4A4A4A;
	left:				0;
	position:			absolute;
	width:				0;
	z-index:			2;
}


/************************\
   	FOOTER
\************************/
#footer {
	margin-top:-40px;
}
#footer p {
	margin:				0;
}

#footer-wrap {
	clear:				both;
	font-size:			0.5em;
	line-height:		22px;
	padding:			0 0 10px 0;
	position:			relative;
	text-align:			center;
}

#totop {
	right:				10px;
	top:				0;
	position:			absolute;
}

#smiley{
	color:				#101010;
	font-size:			23px;
	left:				0;
	position:			absolute;
	top:				0;
}
#smiley:hover{
	color:				#FFFF00;
}


/************************\
   	EXTRA
\************************/
/** DISPLAY BLOCK **/
ul.displayBlock{
	padding:			0;
}
ul.displayBlock li{
	display:			inline-block;
	vertical-align:		top;
}


/** CLEAR FIX **/
.clearfix {
    display:			inline-block;
}
.clearfix:after {
    content:			" ";
    clear:				both;
    display:			block;
    height:				0;
    line-height:		0;
    visibility:			hidden;
}
html[xmlns] .clearfix {
    display:			block;
}
* html .clearfix {
    height:				1%;
}


/** BOXES RIGHT **/
.boxRight {
	border-bottom:		1px solid #EEEEE9;
	margin:				0 0 30px 30px;
	padding:			0 0 10px 0;
}
.boxRight .boxRightImage {
	float:				right;
}
.boxRight h3 {
	color:				#1F1F1F;
	font-size:			1.45em;
	font-weight:		normal;
	margin:				0 0 20px 0;
}
.boxRight ul {
	list-style:			none;
	margin:				0 0 20px 0;
	padding:			0;
}
.boxRight li {
	background:			url("../img/hotcoals/bg-list-item.png") no-repeat left top;
	margin:				10px 0 10px 20px;
	padding:			0 0 0 20px;
}
.boxRight li li {
	margin-left:		5px;
}

.boxRight li a:hover {
	text-decoration:	none;
}


/** SEARCH FORM **/
.searchForm input[type=text] {
	color:				#808080;
	float:				left;
	width:				60%;
}
.searchForm input[type=submit] {
	float:				right;
	width:				30%;
}


/** ALERT **/
.alert {
	background:			#FFFAD2 url("../img/alert.png") no-repeat 10px 50%;
	border:				1px dotted #CCC;
	padding:			10px 10px 10px 40px;
}


/** LIST **/
dl {
	margin:				5px auto 10px;
	padding:			0;
	width:				95%;
}
dt, dd {
	border:				solid #DFDFDF;
	border-width:		1px 0 0 0;
	display:			block;
	margin:				0 3px;
	padding:			2px 3px;
}
dt {
	float:				left;
	overflow:			hidden;
	white-space:		nowrap;
	width:				170px;
}
dt:first-child, dt:first-child+dd {
	border-top-width:	0;
}


/** IMAGE SHOWOFF **/
.img-showoff {
	background:			url("../img/hotcoals/img-showoff_bottom.png") no-repeat left bottom;
	color:				#FFF;
	font-size:			0.9em;
	font-weight:		bold;
	margin:				6px 4px;
	padding:			0 0 8px 0;
	text-align:			justify;
}
.left .img-showoff,
.img-showoff .left {
	background-position: right bottom;
}
.img-showoff a {
	color:				#FFF;
}
.img-showoff p {
	line-height:		normal;
	margin:				0;
	padding:			5px 0 0 0;
}
.img-showoff .header {
	background:			url("../img/hotcoals/img-showoff_top.png") no-repeat left top;
	font-size:			1.4em;
	height:				22px;
	padding:			5px 10px 0 10px;
	text-align:			center;
}
li .img-showoff .header {
	width:				180px;
}
.img-showoff .image {
	background:			#EEE;
	border:				1px solid #2A2A2A;
	cursor:				-moz-zoom-in;
	display:			block;
	text-align:			center;
}
li .img-showoff .image {
	border:				none;
}
.img-showoff .image img {
	background:			#EEE;
	padding:			9px;
	vertical-align:		bottom;
}
li .img-showoff .image img {
	border:				1px solid #2A2A2A;
	height:				180px;
	width:				180px;
}
.img-showoff a.image:hover,
.img-showoff a.image:hover img {
	background:			#E6E6E6;
}
.img-showoff .description {
	background-color:	#2A2A2A;
	padding:			0 10px;
}
li .img-showoff .description {
	width:				180px;
}



/** SUPERFISH CUSTOM **/
#mainMenu {
	margin:				0 auto;
	width:				980px;
	z-index:			2;
}

.sfMenu {
	height:				40px;
	list-style:			none;
	margin:				0;
	padding:			0;
	position:			relative;
}

.sfMenu ul {
	list-style:			none;
	margin:				0;
	padding:			0;
}

.sfMenu li {
	float:				left;
}

.sfMenu a, 
.sfMenu a:visited  {  /* visited pseudo selector so IE6 applies text colour */
	color:				#FFF;
	font-weight:		bold;
	line-height:		40px;
	padding:			0 20px;
	text-decoration:	none;
}
.sfMenu li li,
.sfMenu li li li {
	background:			#1F1F1F;
	border-left:		1px solid #2A2A2A;
	border-right:		1px solid #2A2A2A;
}
.sfMenu li.hover, 
.sfMenu li:hover, 
.sfMenu a.hover, 
.sfMenu a:hover, 
.sfMenu a:focus {
	background:			url("../img/hotcoals/bg-menu-hover.png") repeat-x left top;
	color:				#FFF;
}
.sfMenu a:active, 
.sfMenu li.current {
	background:			url("../img/hotcoals/bg-menu-current.png") repeat-x left top;
	color:				#FFF;
}
.sfMenu li li a {
	border-bottom:		1px solid #2A2A2A;
	font-weight:		normal !important;
	line-height:		30px !important;
	padding:			0 20px;
}
.sfMenu li li.sf-breadcrumb {
	background:			#671010;
}
.sfMenu li li.hover, 
.sfMenu li li:hover, 
.sfMenu li li a.hover, 
.sfMenu li li a:hover, 
.sfMenu li li a:active, 
.sfMenu li li a:focus {
	background:			#7B1616;
	color:				#FFF;
}

#mainMenu ul ul ul li:first-child > a {
	border-top:			1px solid #2A2A2A;
}
#mainMenu > ul > li > ul > li > ul {  /* fix for 1px to low offset */
	top:				-1px;
}

#mainMenu #hoverSlider {
	background:			transparent url("../img/hotcoals/bg-menu-hover.png") repeat-x scroll left top;
	height:				40px;
	left:				0;
	position:			absolute;
	width:				0;
}


/** GOOD/BAD **/
table.goodBad {
	border-collapse:	separate;
	border-spacing:		5px;
	font-size:			10px;
}
table.goodBad td, table.goodBad th {
	background-color:	#F2F3EF;
	border:				1px solid #CCC;
	font-family:		verdana, sans-serif;
	padding:			2px 4px;
	text-align:			center;
	vertical-align:		middle;
}
table.goodBad th {
	font-weight:		bold;
}
table.goodBad img.helpIcon {
	float:				right;
	margin:				-2px 0;
}


/** TABS **/
/* Component containers */
.ui-widget-content {
	border:				1px solid #EEE;
}
.ui-widget-header {
	background:			transparent url("../img/hotcoals/bg-menu.png") repeat-x scroll left top;
}
.ui-widget-header a {
	color:				#FFF;
	font-weight:		bold;
	text-decoration:	none;
}

/* Interaction states */
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color:				#FFF;
	font-weight:		bold;
	text-decoration:	none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
	background:			url("../img/hotcoals/bg-menu-hover.png") repeat-x left top;
}
.ui-state-hover a, .ui-state-hover a:hover {
	color:				#FFF;
}
.ui-state-active, .ui-widget-content .ui-state-active {
	background:			url("../img/hotcoals/bg-menu-current.png") repeat-x left top;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color:				#FFF;
}

/* Tabs */
.ui-tabs {
	padding:			2px;
}
.ui-tabs .ui-tabs-nav {
	list-style:			none;
	position:			relative;
}
.ui-tabs .ui-tabs-nav li {
	border-bottom-width:0 !important;
	float:				left;
	line-height:		30px;
	margin:				0 0 -1px 0;
	padding:			0;
	position:			relative;
	z-index:			2;
}
.ui-tabs .ui-tabs-nav li a {
	float:				left;
	padding:			0 20px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
	cursor:				text;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
	cursor:				pointer;
}
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor:	text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
	background:			none;
	border-width:		0;
	display:			block;
	padding:			1em 1.4em;
}
.ui-tabs .ui-tabs-hide {
	display:			none !important;
}

.ui-tabs #hoverSlider2 {
	background:			transparent url("../img/hotcoals/bg-menu-hover.png") repeat-x scroll left top;
	height:				30px;
	position:			absolute;
	width:				0;
	z-index:			1;
}


/** TWITTER **/
.twitter li {
	background-image:	url("../img/twitterT.png");
	margin-left:		0px;
}
.twitter li span {
	display:			block;
}
.twitter li a {
	color:				#999;
	font-style:			italic;
	text-decoration:	none;
}
.twitter li a:hover {
	text-decoration:	underline !important;
}
.twitter li span a {
	color:				#2FC2EF;
	font-style:			normal;
}
.twitter .loader {
	background:			url("../img/loading.gif") no-repeat center center;
	display:			block;
	height:				20px;
	width:				100%;
}


/** OPTIONS **/
.options {
	border-bottom:		1px solid #E6E6E6;
	margin:				0px;
	padding:			0px;
	padding-right:		1px;  /* border-left fix */
}
.options p {
	margin:				0 0 5px 0;
}
.options pre {
	margin:				5px;
	overflow:			auto;
}
.options .options {
	margin-bottom:		-1px;
}
.options .option {
	background:			#FBFBFB url("../img/hotcoals/bg-options.gif") repeat-x scroll 0 0;
	border-top:			1px solid #E6E6E6;
	border-left:		1px solid #E6E6E6;
	list-style:			none;
	width:				100%;
}
.options .separator {
	background-image:	none;
	border-left:		0 none;
}
.options .header {
	border:				0px none;
	margin:				0 5px;
	width:				100%;
}
.options .header .name {
	font-size:			150%;
	font-weight:		bold;
	vertical-align:		middle;
}
.options .header .title {
	color:				#888;
	width:				1%;
	text-align:			right;
}
.options .header .value{
	width:				25%;
}
.options .description,
.options .example,
.options .childoption {
	padding:			10px 10px 0 10px;
}
.options .description .title,
.options .example .title,
.options .childoption span.title {
	color:				#888;
	display:			block;
}


/** CHANGELOG **/
.changelog {
	font-family:		Lucida Console;
	list-style:			none;
	margin-bottom:		10px;
	padding-left:		0px;
}
.changelog ul {
	margin-bottom:		10px;
	padding-left:		30px;
}