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


/************************\
   	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 {
	color:				#1f1f1f;
	font-size:			2.36em;
	font-weight:		bold;
	margin:				0.67em 0;
}
h2 {
	color:				#1f1f1f;
	font-size:			2em;
	font-weight:		bold;
	letter-spacing:		-1px;
	margin:				0.83em 0;
}
h3 {
	color:				#1f1f1f;
	font-size:			1.5em;
	font-weight:		bold;
	letter-spacing:		-1px;
	margin:				1.17em 0;
}
h4 {
	color:				#1f1f1f;
	font-size:			1.17em;
	font-weight:		bold;
	letter-spacing:		-1px;
	margin:				1.5em 0;
}
h5 {
	color:				#1f1f1f;
	font-size:			0.83em;
	font-weight:		bold;
	margin:				2em 0;
}
h6 {
	color:				#1f1f1f;
	font-size:			0.67em;
	font-weight:		bold;
	margin:				2.36em 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
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, ul, ol {
	/*line-height:		22px;*/
	margin:				0 0 20px 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:				White;
    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 {
	color:				#4A4A4A;
	bottom:				15px;
	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 ul{
	padding-top:		13px;
}
#sssMenu li{
	color:				White;
	float:				right;
	list-style:			circle;
	margin-left:		20px;
}
#sssMenu .current {
	border-bottom:		1px dotted #fff;
}


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

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

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

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

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


/************************\
   	FOOTER
\************************/
#footer-wrap {
	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:				Yellow;
}


/************************\
   	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:				Gray;
	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;
	width:				170px;
	overflow:			hidden;
	white-space:		nowrap;
}
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 10px 0;
	text-align:			justify;
}
.img-showoff img {
	background:			#eee;
	border:				1px solid #2a2a2a;
	height:				180px;
	padding:			9px;
	vertical-align:		bottom;
	width:				180px;
}
.img-showoff img:hover, 
.img-showoff a:hover img {
	background:			#e6e6e6;
}
.img-showoff a {
	color:				#fff;
}
.img-showoff p {
	margin:				0;
	padding:			5px 0 0 0;
	line-height:		normal;
}
.img-showoff .header {
	background:			url("../img/hotcoals/img-showoff_top.png") no-repeat left top;
	font-size:			1.4em;
	height:				24px;
	padding:			5px 10px 0 10px;  /* 0 bottom is for IE 6; */ 
	text-align:			center;
	width:				180px;
}
.img-showoff .description {
	background-color:	#2a2a2a;
	padding:			0 10px;
	width:				180px;
}


/** SUPERFISH CUSTOM **/
#mainMenu {
	width:				980px;
	margin:				0 auto;
	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 {
	background:			#1f1f1f;
	border-left:		1px solid #2a2a2a;
	border-right:		1px solid #2a2a2a;
}
.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;
}


/** 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 #CCCCCC;
	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 #eeeeee;
}
.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 {
	position:			relative;
	float:				left;
	border-bottom-width:0 !important;
	margin:				0 0 -1px 0;
	padding:			0;
	line-height:		30px;
}
.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 {
	padding:			1em 1.4em;
	display:			block;
	border-width:		0;
	background:			none;
}
.ui-tabs .ui-tabs-hide {
	display:			none !important;
}


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