﻿/* =======================================================================================
   MAIN.CSS contains the styles for the default HTML elements, as well as the styles
	 used to layout the site structure and other site specific classes.
	 Please set together what belongs together, ex. like AB tickets downunder.
	 When new styles for a new item on the site are embeded, please describe
	 like AB tickets is described under these lines.
   ======================================================================================= 
  
   1. downunder (line 319) embed css for AB tickets game only! 
   2. downunder (line 365) embed css for budget survival kit only! */
	
/* ---- IMPORT STYLESHEETS    ------------------------------------------------------------ */
@import url(applications/poll.css);
@import url(applications/drMoney.css);
@import url(applications/savingtip.css);
@import url(registration.css);
@import url(atc.css);


/* ---- DEFAULT HTML ELEMENTS ------------------------------------------------------------ */

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #FFF url(../img/bg_lines.gif) 0 1px;
}

th, caption {
	vertical-align: top;
	text-align: left;
}

caption {	
	padding: 3px 0;
	font-weight: bold;
}

ul {
	list-style-image: url(../img/bullet_list.gif);
}

ol li{
    margin-left: 20px;
}

img {
border:none;
}

blockquote { font-style: italic; }

/* ------------------------------------------------------------ SITE STRUCTURE CLASSES --- */

#backgroundGradient {
	background: url(../img/bg_gradient.jpg) 1px 0 repeat-x;
	height: 100%;
}

*>#backgroundGradient {min-height:100%; height:auto;}

#container {
	width: 980px;
	padding-bottom: 50px;
}

#main {
	float: left;
	width: 780px;
}

#navigationRight {
	float: right;
	width: 200px;
}
	
#navigationTop {
	height: 190px;
}

#content {
	padding-left: 45px;
}

#contentStaticHome {
	padding-left:15px;
	padding-right:0px;
}

#contentBox {
	background: url(../img/content_bg_fill.gif) 4px 0 repeat-y;
}

#contentBoxTop {
/* no styles yet */
}

#contentBoxMiddle {
	position:relative;
/*	height: 365px;*/
	padding: 25px 40px 80px 75px;
	background: url(../img/content_bg.jpg) no-repeat;
}

/* ------------------------------------------------------------ MASTERPAGE  STATIC HOME --- */

.bg_homeLeft {
width:7px; text-align:right; background:url(../img/bg_home_left.gif) repeat-y;
}
.bg_homeMiddle {
background-color: #FFFFFF;
}
.bg_homeMiddle td{
vertical-align:top;
}
.bg_homeRight {
width:7px; padding-right:1px; background:url(../img/bg_home_right.gif) repeat-y;
}

/* ------------------------------------------------------------ END MASTERPAGE  STATIC HOME --- */


.center {
text-align:center;
}

.left { float: left; }

.right { float: right; }

.clear { clear: both; }

div#contentBoxMiddle p {
	margin-left: 25px;
	margin-top: 10px;
}

div#contentBoxMiddle h4{
	margin-left: 25px;
}	

div#contentBoxMiddle ul, div#contentBoxMiddle ol{
	margin-left:25px;
	padding-left:25px;
}
.whiteSpace li {
padding-bottom:3%;
}
.noWhiteSpace li {
padding-bottom:0;
}

div#contentBoxMiddle ul.listBigLinks, div#contentBoxMiddle ul.listBigLinksTweedeNiveau{
	padding-left:0px;
}

div#contentBoxMiddle ul p, div#contentBoxMiddle ol p{
	margin-left:0px;
}

/*html>body #contentBoxMiddle {
	height: auto;
	min-height: 365px;
}*/

#contentBoxBottom {
	padding-left: 4px;
}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

ol.listBold  {font-weight: bold;}
ol.listBold  div {font-weight: normal;}


/* ------------------------------------------------------------  SITE ELEMENTS --- */

#introBox {
	margin: 25px 0 30px -37px;
	padding: 10px 15px 10px 35px;
	font-weight: bold;
	color: #000000;
	background: url(../img/bg_intro.jpg) -1px -4px no-repeat;
}

/*Classe om de positie van de introbox, na zo'n titel in een image, vb. myBudget-overzichtpagina!*/
#introBoxHeadImage {
	margin: 25px 0 30px -37px;
	padding: 25px 15px 10px 35px;
	font-weight: bold;
	color: #000000;
	background: url(../img/bg_intro.jpg) -1px -28px no-repeat;
}

#headImage{
	position:absolute; top:0px; left:45px; 
}

/*Terug-button positioneren*/
.imgTerug{
	position:absolute; bottom:0px; 
}

/* padding voor de links (ul-lijsten) op het eerste en het tweede niveau word op nul gezet */
ul.listBigLinks, ul.listBigLinksTweedeNiveau, ul.listBigLinksTweedeNiveau li {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
}

ul.listBigLinks li, ul.listBigLinksTweedeNiveau li, ul.listBigLinksTweedeNiveau li ul li {
	margin: 10px 0;
}

ul.listPadding li {
	margin: 0 0 20px 0;
}

table.tableHeaderBlue,
table.tableHeaderPink,
table.tableHeaderBlack,
table.tableHeaderWhite {
	border-bottom: 5px solid #f5f1d0;
	background: #f0edcc url(../img/bg_data_table.gif) bottom repeat-x;
}

table.tableHeaderBlue th,
table.tableHeaderPink th,
table.tableHeaderBlack th,
table.tableHeaderWhite th {
	height: 30px;
	padding: 0 5px 0 7px;
	vertical-align: middle;
	white-space: nowrap;
	font: bold 92% "Times New Roman", Times, serif;
	text-transform: uppercase;
	color: #FFFFFF;
	background: url(../img/bg_table_header_blue.gif) repeat-x;
}

table.tableHeaderPink th {
	background: url(../img/bg_table_header_pink.gif) repeat-x;
}

table.tableHeaderBlack th {
	background: url(../img/bg_table_header_black.gif) repeat-x;
}

table.tableHeaderWhite th {
	color: #000000;
	background: url(../img/bg_table_header_white.gif) repeat-x;
}

table.tableHeaderBlue td,
table.tableHeaderPink td,
table.tableHeaderBlack td,
table.tableHeaderWhite td {
	padding: 10px 10px 5px 7px;
	vertical-align: top;
	border-bottom: 1px dashed #d8d4b7;
}

tr.trLastRow td {
	border: 0;
}

td.cellBullet {
	padding-left: 15px !important;
	font-weight: bold;
	background: url(../img/bullet_table.gif) 5px 15px no-repeat;
}

.imgDeco {
	float: right;
	margin: -15px 0 5px 5px;
}

.imgLeft {
	float: left;
	margin-right: 5px;
}

.imgRight {
	float: right;
	margin-left: 5px;
}
.imgCenter {
	text-align:center;
	margin-left:5px;
	margin-right:5px;
}
div.positionRelative {
	position: relative;
}


.viewDossier {
width:170px; padding-right:10px;
}


/* ------------------------------------------------------------ GAMES AB TICKETS --- */
#containerIntroAB {
width:620px; height:386px; background:url(../../../../img/AB_tickets/NL/pictures_intro.gif) right bottom no-repeat;
}
#textIntroAB {
height:400px;
}
#copyIntroAB {
padding-top:30px; width:380px; height:215px;
}
#copyIntroAB p {
margin-left:-0px;
}


/* ------------------------------------------------------------ GAMES WINNERS --- */
#winners table {
	margin: 0px;
}
#winners thead {
	font-weight: bold;
}
#winners td {
	width: 125px;
}
div#contentBoxMiddle #winners p {
	margin-left: 0px;
}




/* ------------------------------------------------------------ AXION XTRA --- */

#xtraPrices .price { background: url(/img/axionXtra/price-box-bottom.gif) left bottom no-repeat; clear: left; color:#fff; margin-bottom: 20px; padding-bottom: 5px; width: 384px; }

#xtraPrices .price h2	{ height: 23px; margin: 0 0 2px -7px; text-indent: -9999px; width: 391px; }
#xtraPrices #nr1 h2		{ background: url(/img/axionXtra/nr1.gif) no-repeat; }
#xtraPrices #nr2 h2		{ background: url(/img/axionXtra/nr2.gif) no-repeat; }
#xtraPrices #nr3 h2		{ background: url(/img/axionXtra/nr3.gif) no-repeat; }
#xtraPrices #nr4 h2		{ background: url(/img/axionXtra/nr4.gif) no-repeat; }
#xtraPrices #nr5 h2		{ background: url(/img/axionXtra/nr5.gif) no-repeat; }
#xtraPrices #nr6 h2		{ background: url(/img/axionXtra/nr6.gif) no-repeat; }
#xtraPrices #nr7 h2		{ background: url(/img/axionXtra/nr7.gif) no-repeat; }
#xtraPrices #nr8 h2		{ background: url(/img/axionXtra/nr8.gif) no-repeat; }
#xtraPrices #nr9 h2		{ background: url(/img/axionXtra/nr9.gif) no-repeat; }
#xtraPrices #nr10 h2	{ background: url(/img/axionXtra/nr10.gif) no-repeat; }

#xtraPrices .price p { margin: 0; }
#xtraPrices .price ul {list-style-image:url(/img/axionXtra/axionXtra-bullet_list.gif);}
#xtraPrices .price .imgHolder { float: left; margin-top: -11px; text-align: center; width: 140px; }
#xtraPrices .price .description { float: left; margin: 0; width: 220px; }
#xtraPrices .price a { color: #FFF; }
#xtraPrices .price a:hover { color: #FEF22C; }
#xtraPrices .price a.moreInfoLink {
	background: url(/img/axionXtra/bg-link.gif) left 5px no-repeat;
	color: #fef22c;
	display: block;
	float: left;
	font-size: 0.9em;
	font-weight: normal;
	margin-top: 2px;
	padding-left: 10px;
}
#xtraPrices .price ul { margin: 0.7em 0; }


/* ---------------------------- */
.tip {padding-left:0; z-index: 999; overflow:visible; }
.tip div {background:url(/img/ico_star.gif) no-repeat; background-position:top left; padding:0 0 0 30px;}


/* ------------------------------------------------------------ budget survival kit --- */
#BSK {width:758px; margin:0 auto;}
#btnTMF {float:left;}
#bg-copy {float:left; width:261px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#4d4d4d; line-height:15pt;}
#copy {background-color:#FFFFFF; padding:5px; text-align:center;}
#copy span {color:#73abcc;}
#commands {float:left;}


/* ------------------------------------------------------------ VOORDELEN --- */

#content #gridAdvantages {margin:-30px 0 0 0}

#content #gridAdvantages .box ul {display:block; list-style-image:none; list-style:none; margin:10px 0 0 15px; padding:0}
#content #gridAdvantages .box ul li {background:url(/img/icons/ico-list-box-voordelen.gif) left 3px no-repeat; padding:0 0 6px 18px;}
#content #gridAdvantages .box ul li a {color:#3d3217; font-weight:normal;}

/* /// NL /// */
#content #gridAdvantages .box {background:url(/img/bg-box-voordelen-top.gif) no-repeat left 29px; float:left; margin:15px 0 0 0; padding:0 0 4px 0; position:relative; width:289px;}
#content #gridAdvantages .box span {background:url(/img/bg-box-voordelen-bottom.gif) no-repeat left bottom; bottom:0; display:block; height:9px; position:absolute; width:289px;}

#content #gridAdvantages .box h2 {display:block; height:30px; margin:0; padding:0; text-indent:-9999px; width:289px;}
#content #gridAdvantages .box h2#banking {background:url(/img/NL/bg-title-voordelen-banking.gif) no-repeat left top;}
#content #gridAdvantages .box h2#student {background:url(/img/NL/bg-title-voordelen-students2.gif) no-repeat left top;}
#content #gridAdvantages .box h2#music	  {background:url(/img/NL/bg-title-voordelen-music.gif) no-repeat left top;}
#content #gridAdvantages .box h2#divers  {background:url(/img/NL/bg-title-voordelen-divers.gif) no-repeat left top;}

/* /// FR /// */
#content #gridAdvantages .fr .box {background:url(/img/bg-box-voordelen-top.gif) no-repeat left 34px;}
#content #gridAdvantages .fr .box span {background:url(/img/bg-box-voordelen-bottom.gif) no-repeat left bottom; bottom:0; display:block; height:9px; position:absolute; width:289px;}

#content #gridAdvantages .fr .box h2 {display:block; height:34px; margin:0; padding:0; text-indent:-9999px; width:289px;}
#content #gridAdvantages .fr .box h2#banking {background:url(/img/FR/bg-title-voordelen-banking.gif) no-repeat left top;}
#content #gridAdvantages .fr .box h2#student {background:url(/img/FR/bg-title-voordelen-students2.gif) no-repeat left top;}
#content #gridAdvantages .fr .box h2#music	  {background:url(/img/FR/bg-title-voordelen-music.gif) no-repeat left top;}
#content #gridAdvantages .fr .box h2#divers  {background:url(/img/FR/bg-title-voordelen-divers.gif) no-repeat left top;}

#content #gridAdvantages .left {clear:both; margin-right:40px;}


/* /// SLIDING SYSTEM /// */
#content .scroll_container {width: 289px; overflow: hidden; height: 115px;}
#content .scroller {width: 578px;}
#content .scroller div {width: 289px; height: 115px; float: left;}

#content .paging {background:url(/img/btn-voordelen-paging.gif) no-repeat left bottom; color:#fff; bottom:0; display:block; height:19px; padding:7px 0 0 0; position:absolute; right:0; text-align:center; width:92px; z-index:2}
#content .paging a {color:#fff; text-decoration:none; font-size:10px; outline:none}




/* ------------------------------------------------------------ FACEBOOK STYLE PAGES ---- */

.facebookStyle { background: #FFF; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }



/* ------------------------------------------------------------ FACEBOOK FRIENDS PAGE --- */

#facebookFriendsPage { background: #FFF; font-family: "Lucida Grande", Arial, sans-serif; font-size: 76%; }
#facebookFriendsPage #container { background: #D2D9E6; border: 1px solid #AAA; margin: 10px; padding: 0; width: 648px; }
#facebookFriendsPage #content { background: #FFF; border: 1px solid #8598C0; margin: 10px; padding: 10px; }
#facebookFriendsPage h1 { border-bottom: 1px solid #E0E0E0; color: #222; font-size: 1.4em; font-weight: bold; margin: 0; padding: 0 0 10px 0; }
#facebookFriendsPage #search { margin: 0; padding: 11px 0 17px; }
#facebookFriendsPage label { padding: 3px 7px 0 5px; }

#facebookFriendsPage #friends { border: 1px solid #C1C1C1; list-style-type: none; height: 280px; margin: 0; position:relative; overflow: auto; padding: 0; }
#facebookFriendsPage #friends li { cursor: pointer; float: left; height: 56px; margin: 3px; overflow: hidden; padding: 4px; width: 126px; }
#facebookFriendsPage #friends .imgHolder {
	background-color: #FFFFFF;
	border:	1px solid #E0E0E0;
	display: block;
	float: left;
	height: 50px;
	margin-right: 5px;
	padding: 2px;
	position: relative;
	width: 50px;
}
#facebookFriendsPage #friends .name {
	color: #222;
	display: block;
	float: left;
	margin-top: 2px;
	width: 65px;
}
#facebookFriendsPage #friends .network { color: #666; font-size: 0.8em; margin-top: 3px; }

#facebookFriendsPage #friends li:hover { background: url(/img/css_backgrounds/bg-multi-friend-selector-hover.gif) no-repeat; }
#facebookFriendsPage #friends li:hover .imgHolder { border-color: #205C98; }
#facebookFriendsPage #friends li:hover .name { color: #000; }

#facebookFriendsPage #friends li.selected { background: url(/img/css_backgrounds/bg-multi-friend-selector.gif) no-repeat; }
#facebookFriendsPage #friends li.selected .name { color: #E7EBF5; }
#facebookFriendsPage #friends li.selected .network { color: #C3CDDF; }
#facebookFriendsPage #friends li.selected .imgHolder { background-color: #8497C0; border-color: #B1C1E1; /*position: relative;*/ }
#facebookFriendsPage #friends li.selected .check { bottom: 2px; left: 2px; position: absolute; }

#facebookFriendsPage #buttons { margin: 10px 0 0; }
#facebookFriendsPage #buttons input { background: #3B5998 url(/img/icons/ico-email.gif) 8px 6px no-repeat; padding: 3px 6px 3px 26px; }
#facebookFriendsPage #buttons #btnCancel {
	background: #F0F0F0;
	border-color: #E7E7E7 #666666 #666666 #E7E7E7;
	border-style: solid;
	border-width: 1px;
	font-size: 1em;
	margin-left: 5px;
	padding: 3px 15px 3px;
	text-align: center;
}
#facebookFriendsPage #buttons #btnContinue {
	background: #3B5998;
	color:#FFF;
	border-color: #E7E7E7 #666666 #666666 #E7E7E7;
	border-style: solid;
	border-width: 1px;
	font-size: 1em;
	margin-left: 5px;
	padding: 3px 15px 3px;
	text-align: center;
}



/* ------------------------------------------------------------ FACEBOOK THANKS PAGE --- */

#facebookThanksPage { background: #FFF; font-family: "Lucida Grande", Arial, sans-serif; font-size: 76%; }
#facebookThanksPage #container { width:448px; padding-bottom:0px;}
#facebookThanksPage #content { background: #FFF; margin:0px; padding: 22px 24px;}
#facebookThanksPage #content img { padding:16px 0px 7px 0px; }

#facebookThanksPage #contentTitle { background: url(/img/applications/festivals2009/titles/fb-title.gif) no-repeat; height:43px; }

#facebookThanksPage #contentButtons { background: #f2f2f2; border-top: 1px solid #cccccc; height:38px;	padding: 3px 0px 3px 0px;}
#facebookThanksPage #buttons { margin: 9px 14px 7px 14px; text-align:right;}
#facebookThanksPage #buttons #btnOk {
	background: #3b5998;
	border-color: #d9dfea #0e1f5b #0e1f5b #d9dfea;
	border-style: solid;
	border-width: 1px;
	font-size: 1em;
	width:80px;
	text-align: center;
	color: #FFF;
}

#facebookThanksPage #close {
	position:relative;
	left:431px;
	top:6px;
	width:10px;
}
