/*******************************************
 * Gids pages in ctv sites                 *
 * With the actual guide next to the pages *
 *******************************************/
/*** General rules ****/

/********* The interface that lets you choose between alphabetical sorting and theme-sorting ******/
/* The div with both elements in it */
body.Gids div.SortLink {
	width:230px;
	height:17px;
	border-bottom:8px solid #c0c0c0;
	clear:both;
}

/* The sorting link itself */
body.Gids a.SortLink {
	text-decoration:none;
}

/* The sorting link itself, hover */
body.Gids a.SortLink:hover {
	text-decoration:none;
}

/* The div where a 'currently sorted' or 'sort on:' text can be put */
.Gids div.SortLink .NonLinkText {
	display:none;
}

/* Display the link inside the SortLink div as a block, so it will fill the whole area */
.Gids div.SortLink a,
.Gids div.SortLink a:visited {
	display:block;
	float:left;
	width:68px;
	height:19px;
	background-image: url('../images/butGidsTab.gif');
	background-repeat: no-repeat;
	text-decoration:none;
	text-align:center;
}

/* Display the link inside the SortLink div as a block, so it will fill the whole area */
.Gids div.SortLink a:hover,
.Gids div.SortLink a.Selected,
.Gids div.SortLink a:visited:hover,
.Gids div.SortLink a:visited.Selected {
	background-image: url('../images/bhlGidsTab.gif');
}


.Gids div.SortLink a.Def_SortLink {
	margin-right:2px;
}
/*************************** end of sorting interface ***********************************/

/* Message text in Gids should be red, to compensate for rule above */
.Gids .CmsItem .Messages {
	color:#f00;
}

/* The Children block in the Gids 
 * Needs a width and height to fit into the Content space
 * and provide a scrollbar at the right times. */
.Gids .Children {
	font-weight:bold;
	clear:both;
	margin-bottom:8px;
}


.LetterMiddle {
	float:left;
	clear:both;
}
.Alfabet_Gids .Letter {
	display:block;
	float:left;
	margin:0px 4px;
}
.Alfabet_Gids .Letter:hover {
	color:#333;
	text-decoration:underline;
	cursor:pointer;
}
.Alfabet_Gids .LetterSelected {
	color:#333;
	text-decoration:underline;
}
.Gids .Depth0,
.Gids .Depth1,
.Gids .Depth2  {
	padding:3px 0px;
	clear:both;
	cursor:pointer;
}
.Gids .TreeviewChildren .Foldable {
	border-bottom:1px solid #c0c0c0;
	background-image:url('../images/gidsPlus.gif');
	background-repeat:no-repeat;
	background-position:left top ;
}
/* Plusses for the trefwoorden that are visible */
.Gids .TreeviewChildren .FoldableContent .Foldable {
	background-image:url('../images/gidsActivePlus.gif');
	background-repeat:no-repeat;
}
.Gids .TreeviewChildren .Minus,
.Gids .TreeviewChildren .FoldableContent .Minus {
	background-image:url('../images/gidsMin.gif');
	background-repeat:no-repeat;
}
/* Exposed trefwoorden */
.Gids .TreeviewChildren .FoldableContent .Child {
	color:#E11E2D;
}
/* Gidspagina's */
.Gids .TreeviewChildren .FoldableContent .Depth2,
.Alfabet_Gids .Depth0 {
	background-image:url('../images/gidsSquare.gif');
	background-repeat:no-repeat;
}
.Gids .TreeviewChildren .Depth0_Foldable .Child:hover .Title, /*hover on title of everything*/
.Gids .TreeviewChildren .Depth0 .Expanded .Title, /* Expanded category */
.Gids .TreeviewChildren .Depth0_Selected .Expanded .Title/*expanded titles in selected theme */
{
	background-color:#ECECEC; /* light grey*/
}
.Gids .Depth0 .Depth1 .Child:hover .Title, /*hover on title of trefwoord*/
.Gids .Depth0 .Depth1 .Expanded .Title, /* trefwoord that is expanded */
.Gids .TreeviewChildren .Depth0_Selected .Depth1 .Expanded .Title /*trefwoord within selected category*/
{
	background-color:#CFCFCF; /*medium grey*/
	color:#333;
}

.Gids .TreeviewChildren .Depth0 div.Depth2 a:hover .Title,/*titles of gidspagina's on hover */
.Gids .TreeviewChildren .Depth0 div.Depth2_Selected .Child a .Title, /* titles of selected gidspagina's */
.Alfabet_Gids .Children a:hover .Title, /*titles of gidspagina's on hover in alfabet view*/
.Alfabet_Gids .Children div.Depth0_Selected .Child a .Title /* titles of selected gidspagina's in alfabet view*/
{
	background-color:#7F7F7F; /*dark grey*/
	color:#fff;
}

.Gids .Children .Child, /* all children in the list*/
.Gids .TreeviewChildren .FoldableContent .Foldable .FoldableContent .Child /*all 2nd level children (gidspagina's)*/
{
	display:block;
	padding-left:13px;
	height:100%;
}

.Gids .Children .Child a {
	display:block;
}

/* The title of items in depth0 (categorieen) */
.Gids div.Depth0 .Title {
	display:block;
	font-weight:bold;
	margin:0px;
	text-decoration:none;
	padding:1px;
}

/* The div around a child item of depth 1 (trefwoorden) */
.Gids div.Depth1 {
	padding:2px 0px;
}

/* All links in the Gids should be underlined */
.Gids .CmsItem a {
	text-decoration:underline;
}

.Gids .CmsItem a:hover {
	text-decoration:none;
}

.Gids .CmsItem a.Back {
	text-decoration:none;
}

/* All Titles in the Gids inside Children should have no text-decoration and be black */
.Gids .Children a {
	text-decoration:none;
}

/* IE6 doesn't do the hover bg color on Title because hover is not triggered.
So you should first trigger hover with bogus bgcolor.*/
* html .Gids .Children a:hover {
	background-color:transparent;
}

/*** First Page -  depth0 - overview *****/

/* Link for creating new item under depth1 (trefwoord) item */
.Gids .CreateLink {
	display: block;
	clear:both;
	height:20px;
	text-align:right;
	margin-right:5px;
	font-weight:normal;
}

/* h1 within CmsItem boxes
   depth0 has different rules */
.Gids_depth0 .CmsItem h1 {
	display:inline;
	margin:0px;
}

/* On the first page all items of depth2 (pagina's) should be underlined */
.Gids .Children div.Depth2 a .Title {
	text-decoration:underline;
	background-color:transparent;
}

/* On the first page all items of depth2 (pagina's) should have a white bg on rollover*/
.Gids .Children div.Depth2 a:hover .Title {
	text-decoration:none;
}

/* Links of the children, like go to vpage */
.Gids span.ChildLink { 
	display:none;
}

/* Links of the children, like go to vpage, when theme is unfolded */
.Gids .Depth0_Unfolded span.ChildLink {
	display:block;
	margin-left:20px;
	font-weight:normal;
	font-style:italic;
}

/* Links of the children, like go to vpage, when theme is unfolded */
.Gids .Unfolded span.ChildLink a, .Gids .CreateLink a {
	text-decoration:none;
}

/*** Third Page -  depth3 - pages themselves *****/

.Gidspagina h1 {
	margin-bottom:0px;
	border-bottom:1px solid #000;
}

.Gidspagina .VisualContent {
	clear:left;
	margin-top:8px;
}
.Gidspagina .CmsItem {
	/*width:452px;468 minus 2*8px padding*/
	clear:both;
	padding:8px 0px;
	margin-top:8px;
}
/* The div around the download links in depth3, being the wijzerpages themselves. */
.Gidspagina .Downloads {
	clear:both;
	padding-top:20px;
}

/* Link next to Videothumbnails in depth3, being the wijzerpages themselves. */
.Gidspagina .VideoThumbnail a,
.Gidspagina .PictureThumbnail a {
	text-decoration:none;
}

/*.Gidspagina .VisualContent {
	width:468px;
	float:right;
	clear:right;
}*/
.Gidspagina .VideoPlayer {
	width:470px;
	float:left;
	clear:left;
}
.Gidspagina .VisualContainer {
	width:230px;
	min-height:265px;
	margin-top:28px;
	float:right;
	clear:right;
}
/* Of course there are some browsers like IE7 that are just PLAIN STUPID! */
*+html .Gidspagina .VisualContainer {
	min-height:263px;
}
.Gidspagina .VisualTabs a {
	display:block;
	float:left;
}

.Gidspagina .VisualTabs a span {
	display:none;
}

.Gidspagina .VisualContainer .VisualLinks {
	min-height:225px;
}

/* Of course there are some browsers like IE7 that are just PLAIN STUPID! */
*+html .Gidspagina .VisualContainer .VisualLinks {
	min-height:223px;
}
.Gidspagina .MapWebsiteButtons {
	margin-top:8px;
	float:right;
	height:17px;
}

.Gidspagina .Paging {
	height:12px;
}
/*** Gids create item interface *******/
.Gids .CreateItem {
	height: 100%;
}

/************* Paging **********************/
.Paging {
	clear:left;
	width:468px;
	height:20px;
}

.PrevLink a,
.NextLink a,
.PageNumbers a {
	text-decoration:none;
	letter-spacing:0.2px;
}

.CurrentPage a {
	font-weight:bold;
}

.PrevLink,
.NextLink {
	width:20%;
	float:left;
}

.NextLink {
	text-align:right;
}

.PageNumbers {
	width:60%;
	float:left;
	text-align:center;
}