/***************************************************************************************************************\
// ==Stylesheet===
// @name			style.css
// @author			Jerone CSS Productions
// @namespace		About Jeroen
// @homepage		http://jervw.freehostia.com
// @description		Common page style
// @version			v1
// @copyright		2007
// @browser			IE7, FF2, Opera9, NS9
// @include
// ==/Stylesheet==
|***************************************************************************************************************|
ToC:
- html,body,page
- Headers,
- Common,
- Content,
- Breadcrumbs,
- List,
- Overige,
- Main Menu,
- Sub Menu,
- Footer,
- Download,
- Game,
- Colums,
- Banner Rotator,
- Good/bad.
|***************************************************************************************************************|
THIS  SCRIPT  IS  PROVIDED BY THE AUTHOR `AS IS' AND ANY EXPRESS OR IMPLIED
WARRANTIES,  INCLUDING, BUT  NOT  LIMITED  TO, THE  IMPLIED  WARRANTIES  OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.  IN NO
EVENT  SHALL  THE  AUTHOR  BE  LIABLE  FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;  LOSS OF USE, DATA, OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER  CAUSED  AND  ON  ANY THEORY OF LIABILITY,
WHETHER  IN  CONTRACT, STRICT  LIABILITY, OR  TORT  (INCLUDING NEGLIGENCE OR
OTHERWISE)  ARISING  IN  ANY  WAY  OUT  OF  THE  USE OF THIS SCRIPT, EVEN IF
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\***************************************************************************************************************/

html {
	margin:				0;
	padding:			0;
}
body {
	margin:				0 auto;
	padding:			0;
	width:				90%;
	min-width:			600px;
	font-family:		sans-serif;
	color:				rgb(56,56,56);
	voice-family:		female;
	background:			url("../images/root.png") rgb(236,236,236);
}
#page {
	margin:				0;
	padding:			0;
	border-width:		0 1px;
	border-color:		rgb(144,144,144);
	border-style:		solid;
	background-color:	rgb(246,246,246);
}


/***************************************************************************************************************/
/** HEADERS **/
h1 {
	margin:				0;
	padding:			29px 20px 0 130px;
	font-family:		sans-serif;	
	font-size:			110%;
	font-weight:		normal;
	text-align:			right;
	letter-spacing:		-1px;
	color:				rgb(74,74,74);
	background:			url("../images/top.png") repeat-x;
	height:				46px;
	/*position:			relative; // anClock problem */
}
h2 {
	margin:				0;
	padding:			5px 7px;
	font-family:		sans-serif;
	font-size:			100%;
	font-weight:		normal;
	letter-spacing:		-1px;
	color:				rgb(74,74,74);
	background:			url("../images/bar.png") rgb(227,227,227) repeat-x 0px -5px;
	border-width:		1px 0;
	border-style:		solid;
	border-color:		rgb(144,144,144);
}
h2 img {
	margin:				0px;
	padding:			0px;
	vertical-align:		text-bottom;
	border:				0 none;
}
h3 {
	margin:				-1px 0 1px 0; /** IE bug --> IEstyles.css **/
	padding:			3px 9px;
	font-family:		sans-serif;
	font-size:			90%;
	font-weight:		normal;
	letter-spacing:		-1px;
	color:				rgb(74,74,74);
	background:			url("../images/center.png") rgb(246,246,246) repeat-x left bottom;
	border-width:		1px 0 0 0;
	border-style:		solid;
	border-color:		rgb(144,144,144);
}
h4 {
	margin:				0 11px;
	padding:			1px 2px;
	font-family:		sans-serif;
	font-size:			80%;
	font-weight:		bold;
	letter-spacing:		-1px;
	color:				rgb(74,74,74);
	border-width:		0 0 1px 0;
	border-style:		solid;
	border-color:		rgb(144,144,144);
}
h5 {
	margin:				0 13px;
	padding:			1px 2px;
	font-family:		sans-serif;
	font-size:			70%;
	font-weight:		normal;
	color:				rgb(74,74,74);
	text-decoration:	underline;
}
h6 {
	margin:				0 15px;
	padding:			0;
	font-family:		sans-serif;
	font-size:			7pt;
	font-weight:		normal;
	color:				rgb(74,74,74);
	font-style:			italic;
}
span.headerSpan {
	display:			inline;
	float:				right;
	width:				auto;
	font-size:			10px;
	letter-spacing:		normal;
	color:				#999999;
}


/***************************************************************************************************************/
/** COMMON **/
a {
	color:				rgb(74,74,74);
	background-color:	transparent;
}
p {
	margin:				5px 15px;
	padding:			0px;
	font-size:			70%;
}
span {
	margin:				0px;
	padding:			0px;
	font-size:			90%;
	width:				90%;
}
img {
	margin:				0px;
	padding:			0px;
	border:				0 none;
}
q {
	quotes: 			'"' '"' "'" "'";
}
code {
	margin:				0px;
	padding:			1px 4px;
	display:			inline;
	font-family:		Arial, Helvetica, sans-serif;
	background-color:	#DDD
}
del {
	text-decoration:	none;
	background:			url("../images/cross.png") center center repeat-x;
}


/***************************************************************************************************************/
/** CONTENT **/
.content {
	margin:0;
	padding:0;
}
.contentLeft {
	float:				left;
	left:				0px;
	width:				199px;
}
.contentRight {
	float:				right;
	position:			static;
	width:				199px;
}
.contenCenter {
	margin:				0px;
	margin-left:		200px;
	margin-right:		200px;
	padding:			0;
	border-width:		0 1px 0px 1px;
	border-color:		rgb(144,144,144);
	border-style:		solid;
}
#pager {
	margin:				0px;
	padding:			0px;
	clear:				both;
	font-size:			0px;
	visibility:			hidden;
	speak:				none;
	height:				0px;
}
#pager2 {
	margin:				0px;
	padding:			10px;
	clear:				both;
	text-align:			right;
	font-size:			70%;
	text-decoration:	none;
}
#pager2 a {
	text-decoration:	none;
}
#pager2 a:hover {
	text-decoration:	overline underline;
}


/***************************************************************************************************************/
/** BREADCRUMBS **/
.breadcrumb{
	font-family:		sans-serif;
	font-size:			13px;
	font-weight:		bold;
	padding:			10px;
	margin:				0;
}
.breadcrumb a{
	background:			url("../images/breadcrumb.gif") transparent no-repeat center left;
	text-decoration:	none;
	padding-left:		18px;
}
.breadcrumb a:first-child{
	background:			none;
	text-decoration:	none;
	padding-left:		0px;
}
.breadcrumb a:visited, .breadcrumb a:active{
}
.breadcrumb a:hover{
	text-decoration:	underline;
}


/***************************************************************************************************************/
/** LIST **/
dl {
	margin:				5px auto 10px;
	padding:			0;
	font-size:			70%;
	width:				95%;
}
dt, dd {
	margin:				0;
	padding:			2px 3px;
	border-width:		1px 0 0;
	border-style:		solid;
	border-color:		rgb(223,223,223);
	display:			block;
}
dt {
	min-width:			170px;
	float:				left;
}
dt:first-child, dt:first-child+dd {
	border-top-width:	0;
}
dl.withList dt {
	background:	url("../images/bullet_red.png") left center no-repeat;
	padding-left:			20px;
}

li dl {
	font-size:100%;
	margin:0 0 0 -3px;
	border-width:		1px 0 0;
	border-style:		solid;
	border-color:		rgb(223,223,223);
}



ul, ol{
	margin:				10px auto;
	padding-left:		15px;
	font-size:			70%;
	width:				90%;
}
ul {
	list-style-image:	url("../images/bullet_red.png");
}
ol {
	list-style:			decimal-leading-zero;
}
ul ul, ol ol {
	margin:				0px;
	padding-left:		20px;
	font-size:			100%;
	width:				90%;
}
ul li {
	list-style-image:	url("../images/bullet_red.png");
}
ul li li {
	list-style-image:	url("../images/bullet_black.png");
}
ul li li li{
	list-style-image:	url("../images/bullet_green.png");
}
ul li li li li {
	list-style-image:	url("../images/bullet_blue.png");
}
ul li li li li li {
	list-style-image:	url("../images/bullet_orange.png");
}
ul li li li li li li{
	list-style-image:	url("../images/bullet_purple.png");
} 
ul li li li li li li li{
	list-style-image:	url("../images/bullet_yellow.png");
} 
ul li li li li li li li li{
	list-style-image:	url("../images/bullet_pink.png");
} 
ul li li li li li li li li li{
	list-style-image:	url("../images/bullet_white.png");
} 


/***************************************************************************************************************/
/** OVERIGE **/
acronym { /** e.g. "Benelux" **/
	border-bottom:		1px dotted #000;
	cursor:				help;
	speak:				normal;
}
abbr, .initialism { /** e.g. "HTML" **/
	border-bottom:		1px dotted #000;
	cursor:				help;
	speak:				spell-out;
}
abbr, .truncation { /** e.g. "info" **/
	border-bottom:		1px dotted #000;
	cursor:				help;
	speak:				normal;
}
.verklaring { /** e.g. "Needs cookies and Javascript to work" **/
	border-bottom:		1px dotted #000;
	cursor:				help;
	speak:				normal;
}

blockquote {
	margin:				10px 15px;
	border-left:		5px solid #090909;
	border-right:		1px solid rgb(246,246,246); /** color must be background color!!! **/
	outline:			1px solid #090909; /** FF bug; rounded borders when not set a color **/ /** IE bug; outline not supported **/
	overflow:			auto; /** FF bug; not showing right outline/border when overflow **/
}
blockquote p {
	margin:				0px;
	padding:			3px 15px 3px 5px;
}
blockquote blockquote {
	border:				0 none;
	border-left:		5px solid #AC1614;
	outline:			0 none;
}
blockquote img.avatar {
	float:				right;
	padding:			5px;
	border:				0 none;
}

div.xMessage {
	margin:				10px;
	padding:			2px;
	font-size:			12px;
	overflow:			auto;  /** FF bug; not showing right outline/border when overflow **/
	border:				1px solid transparent;  /** FF bug; not showing right outline/border when overflow **/
	outline:			1px solid #CCCCCC;  /** FF bug; not showing right outline/border when overflow **/
}
div.xMessage.infoMessage,
div.xMessage.helpMessage,
div.xMessage.warnMessage,
div.xMessage.errorMessage {
	padding-left:		22px;
}
div.xMessage p {
	margin:				0px;
	padding:			0px;
	font-size:			12px;
}
div.infoMessage {
	background:			#99CCFF url("../images/info.png") no-repeat scroll 3px 2px;
}
div.helpMessage {
	background:			#90EE90 url("../images/help.png") no-repeat scroll 3px 2px;
}
div.warnMessage {
	background:			#FFFFCC url("../images/warn.png") no-repeat scroll 3px 2px;
}
div.errorMessage {
	background:			#FFDFDF url("../images/error.png") no-repeat scroll 3px 2px;
}
hr.hr25 {
	width:				25%;
}
hr.hr50 {
	width:				50%;
}
hr.hr75 {
	width:				75%;
}

.icon {
	margin:				0 0 0 5px !important;
}
#hideIcons {
	display:			none;
}

.ddImages {
/*border:				1px solid red;
*/}


/***************************************************************************************************************/
/** MAINMENU **/
.mainMenuDiv{
	width:				100%;
	float:				left;
	background:			transparent url("../images/red_back.png") top left;
}
.mainMenu{
	margin:				0px;
	padding:			0px;
	/*position:			relative; // anClock problem */
	background:			url("../images/red_back.png");
	list-style:			none;
	width:				100%;
}
.mainMenu img{
	margin:				0px;
	padding:			6px 0 0 0;
	vertical-align:		text-bottom;
	border:				0 none;
}
.mainMenu ul{
	height:				38px;
}
.mainMenu i{ /** IE7 lt bug --> IE7ltstyles.css **/
	margin:				0px;
	text-decoration:	none;
	display:			block;
	height:				28px;
	font-style:			normal;
}
.mainMenu li{
	list-style:			none;
	float:				left;
	width:				auto;
	cursor:				pointer;
	height:				38px;
}
.mainMenu li.blank {
	margin:				0px 3px;
}
.mainMenu li.blank2 {
	margin:				0px 10px;
}
.mainMenu li.right {
	float:				right;
}
.mainMenu li.right b {
	font-weight:		normal;
}
.mainMenu li a{
	padding:			0 5px 0 5px;
	float:				left;
	display:			block;
	color:				#000;
	text-decoration:	none;
	font-family:		sans-serif;
	font-size:			13px;
	font-weight:		bold;
	height:				28px;
	line-height:		28px;
	text-align:			center;
	cursor:				pointer;
}
.mainMenu li a b{
	padding:			0 13px 0 8px;
	float:				left;
	display:			block;
	height:				100%;
}
.mainMenu li a:hover{
	color:				#fff;
	background:			url("../images/red_left.png") no-repeat left top;
}
.mainMenu li a:hover i{
	color:				#fff;
	background:			url("../images/red_center.png") repeat-x top;
}
.mainMenu li a:hover b{
	color:				#fff;
	background:			url("../images/red_right.png") no-repeat right top;
}


/***************************************************************************************************************/
/** SUBMENU **/
.subMenu {
	margin-bottom:		20px;
	border:				0px none;
}
.subMenu ul {
	margin:				0px;
	padding:			0px;
	font-size:			12px;
	line-height:		1.4em;
	list-style:			none;
	width:				auto;
	border-top:			1px solid #bec9d1;
}
.subMenu ul ul {
	margin:				0 0 -1px 0;
}
.subMenu li {
	list-style:			none;
	width:				100%;
	margin:				0;
	padding:			0;
	background:			#EEFFFF;
	border-top:			1px solid #fff;
	border-bottom:		1px solid #bec9d1;
}
.subMenu li a {
	text-decoration:	none;
	display:			block;
	color:				#3f526b;
	padding:			1px 3px 1px 10px;
	cursor:				pointer;
}
.subMenu li i {
	display:			block;
	color:				#3f526b;
	padding:			1px 3px 1px 10px;
	cursor:				default;
}
.subMenu li a:hover,
.subMenu li i:hover {
	background:			#fff url("../images/smarrow.gif") left center no-repeat;
}
.subMenu li li {
	background:			#f5f7f9;
	letter-spacing:		-1px;
}
.subMenu li li a,
.subMenu li li i {
	padding-left:		20px;
}
.subMenu li li li a,
.subMenu li li li i {
	padding-left:		30px;
}
.subMenu li li li li a,
.subMenu li li li li i {
	padding-left:		40px;
}
.subMenu .current {
	font-weight:		bold;
	background:			#fff url("../images/smarrow.gif") left center no-repeat;
	letter-spacing:		0px;
}
.subMenu .subCurrent {
	background:			url("../images/smarrow_gray.gif") left center no-repeat;
}


/***************************************************************************************************************/
/** FOOTER **/
#footer {
	margin:				0;
	padding:			4px 7px 7px;
	clear:				left;
	font-size:			70%;
	font-style:			normal;
	background:			url("../images/center.png") rgb(246,246,246) repeat-x left bottom;
	border-top:			1px solid rgb(170,170,170);
}
#footer_right {
	float:				right;
}


/***************************************************************************************************************/
/** DOWNLOAD **/
.download-box{
	font-size:0.8em;
	text-align:center;
	width:199px;
	padding:0px;
}
.download-box a{
	font-weight:normal;
	color:rgb(64,69,72);
}
.download-box a:hover{
	color:#b31616;
}
a.download-link{
	display:block;
	padding:5px 0 0 0;
	margin-bottom:0.1em;
	text-decoration:none;
	color:#eeeeee;
	width:199px;
	background:url("../images/download.png") 0 0 no-repeat;
	text-align:left;
	line-height:145%;
}
a.download-link span{
	display:block;
	min-height:37px;
	padding:10px;
}
* html a.download-link span{
	height:37px;
}
a.download-link span{
	background:url("../images/download.png") 0 100% no-repeat;
}
a.download-link strong{
	font-size:18px;
	text-decoration:none;
	font-weight:bold;
	color:#eeeeee;
}
a.download-link em{
	font-style:normal;
	font-weight:normal;
	color:#eeeeee;
	letter-spacing:0;
	display:block;
	padding-top:3px;
	font-size:10px;
}
a.download-link:hover,
a.download-link:hover span,
a.download-link:hover strong{
	color:white;
	cursor:pointer;
	background-position:100% 0;
}
a.download-link:hover span{
	background-position:100% 100%;
}


/***************************************************************************************************************/
/** COLUMS **/
.columns {
	height:1%;
	margin:0 -60px 0 0;
	width:100%;
	position:relative;
}
.column {
	width: 100%;
	float:left;
	position:relative;
}
.double .column {
	width:50%;
}
.triple .column {
	width:33.3%;
}
.quatro .column {
	width:25%;
}
.column .columnContent{
	margin:0 15px;
}
.column h2 {
	color:#222;
	background:transparent;
	font-size:110%;
	line-height:150%;
	margin:1.2em 0 0.6em;
}
.column a {
	text-decoration: none;
	font-size: 100%;
}
.column a:hover {
	text-decoration: underline;
}
.column li {
border-top:1px dotted red;
padding-bottom:7px;
}
.column li li {
border:none;
border-bottom:1px dotted #CCCCCC;
}
.column li li li {
border:none;
border-bottom:1px dotted green;
}
.column ul{
border-bottom:1px dotted red;
}
.column ul ul{
margin-top:7px;
border-top:1px dotted red;
border-bottom:none;
}
.column ul ul ul{
margin-top:7px;
border-top:1px dotted #CCCCCC;
}


/***************************************************************************************************************/
/** Banner Rotator **/
.bannerR {
	margin:				5px 15px;
	padding:			0px;
}
.bannerR .bannerR_hide{
	display:			none;
	visibility:			hidden;
	background-color:	red;
	border:				1px solid yellow;
}
.bannerR .bannerR_show{
	display:			block;
	visibility:			visible;
}

.bannerR .timerDiv{
	position:			relative;
	top:				0px;
	left:				-5px;
	width:				25%;
	margin-bottom:		-10px;
	background-color:	white;
	border:				1px solid black;
	text-align:			center;
	font-size:			75%;
	z-index:			1;
}

.bannerR #bannerSet1 {
	display:			block;
}
	.bannerR div#bannerSet1_timerDiv	{ }
	
	.bannerR span#bannerSet1_0_span		{ }
	.bannerR img#bannerSet1_0_image		{padding: 0 2px 2px 0;}
		
	.bannerR span#bannerSet1_1_span		{ }
	.bannerR img#bannerSet1_1_image		{border: 1px solid black;}

	.bannerR span#bannerSet1_2_span		{ }
	.bannerR a#bannerSet1_2_link		{ }
	.bannerR iframe#bannerSet1_2_iframe	{border: 1px solid black; z-index:10;}
	

/***************************************************************************************************************/
/** XSS (good/bad) **/
table.crossBrowsers {
	font-size:			10px;
	border-collapse:	separate;
	border-spacing:		5px;
	width:				99.9%;
}
table.crossBrowsers tr {
	background-color:	white;
}
table.crossBrowsers td, table.crossBrowsers th {
	border:				1px solid #CCCCCC;
	padding:			2px 4px;
	font-family:		verdana,sans-serif;
	font-size:			95%;
	text-align:			center;
	vertical-align:		middle;
}
table.crossBrowsers th {
	font-weight:		bold;
}
table.crossBrowsers td.yes {
	background-color:	#00882D;
	color:				#ffffff;
	border:				0px;
}
table.crossBrowsers td.almost {
	background-color:	#40A662;
	color:				#ffffff;
	border:				0px;
}
table.crossBrowsers td.incomplete {
	color:				#00882D;
	border:				1px solid #00882D;
}
table.crossBrowsers td.alternative {
	color:				#666666;
	border:				1px solid #666666;
}
table.crossBrowsers td.untestable {
	color:				#006699;
	border:				1px solid #006699;
}
table.crossBrowsers td.incorrect {
	color:				#CB000F;
	border:				1px solid #CB000F;
}
table.crossBrowsers td.buggy {
	background-color:	#DA4C57;
	color:				#ffffff;
	border:				0px;
}
table.crossBrowsers td.no {
	background-color: 	#CB000F;
	color:				#ffffff;
	border:				0px;
}
table.crossBrowsers td.crash {
	background-color:	#535353;
	font-weight:		bold;
	text-transform:		uppercase;
	color:				#ffffff;
}
table.crossBrowsers img.helpIcon {
	float:				right;
	margin:				-2px 0;
}