/* Yindo.css */
/* Antoni Dol en Michaud Venant */
/* Macaw - December 2008 */

/* IE7 Stylesheet*/

@media screen, print {
	
	body {
		border: 0;
		margin: 0;
		background: transparent url('../images/pageBg.png') repeat-x;
		font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
		font-size: 12px;
		color: black;
		overflow-x: hidden;
	}
	a:link {
		color: #19388a;
	}
	a:hover {
		color: #CC0000;
	}
	a:active {
		color: #CC0000;
	}
	a:visited {
		color: #666666;
	}
	
	.pageContainer {
		width: 987px;
		margin: 0 auto;
		z-index:0;
	}	
	.headerContainer{
		position:absolute;
		top: 0;
		left: 50%;
		width: 975px;
		height: 110px;
		z-index: 0;
		margin-left: -493px;
	}
	.logo {
		float: left;
		margin-left: 35px;
		width: 250px;
		height: 100px;
		background: url('../images/yindoLogo.png') no-repeat left top;
	}
	.logoLink 
	{
		width: 100%; 
		height: 100%;
		cursor: hand;
	}
	.pageTitle {
		float: left;
		display: inline;
		color: white;
		font-size: 20px;
		margin: 0 0 16px 5px;
	}
	h1 {
		color: #19388a;
		font-size: 24px;
		font-weight: bold;
		margin: 0 0 16px 35px;
	}
	h2 {
		color: #19388a;
		font-size: 20px;
		font-weight: bold;
		margin:  6px 0 12px 35px;
	}
	h3 {
		color: #19388a;
		font-size: 16px;
		font-weight: bold;
		margin:  0 0 12px 35px;
		padding: 0;
	}
	h4 {
		color: #19388a;
		font-size: 12px;
		font-weight: bold;
		margin:  12px 0 0 35px;
		padding: 0;			
	}
	
	
	/*site menu*/
	.siteMenuContainer {
		float: right;
		margin: 10px 25px 0 0;
		width: 650px;
		z-index:9999;
	}
	.siteMenu {
		float: right;
		margin: 6px 0 0 0;
	}
	.siteMenu li{
		display: inline;
	}
	.siteMenu a:link, 
	.siteMenu a:visited {
		color: #EEEEEE;
		text-decoration: none;
		background: url('../images/siteMenuDivider.gif') no-repeat right bottom;
		padding: 0 11px 0 10px;
	}
	.siteMenu a:hover,
	.siteMenu a:active {
		color: white;
		text-decoration: underline;
	}
	.siteMenu a.lastLink{
		background: none;
		padding: 0 0 0 5px;
	
	}
	
	/*main menu*/
	.mainMenuContainer {
		float: right;
		margin: 0 20px 0 0;
		width: 650px;
		height: 52px;
		background: transparent url('../images/mainMenu.png') no-repeat;
		z-index: 1000;
	}
	ul.mainMenu {
		display: block;
		width: 600px;
		margin: 4px auto;
		height: 45px;
		list-style-type: none;
		padding:  0 35px 0 35px; /*positie van de lijst met menuitems*/
	}
	.mainMenu li{
		float: left;
		padding: 6px 15px 6px 15px; /*ruimte tussen menuitems*/
		background: url('../images/mainMenuDivider.gif') no-repeat right;
		white-space: nowrap;
	}
	.mainMenu li.lastLink{
		background: none;
	}
		
	.mainMenu a {
		display: block;
		color: white;
		font-size: 18px;
		padding: 3px 5px; /*ruimte tussen tekst en kader om de link*/
	}
	.mainMenu a,
	.mainMenu a:link, 
	.mainMenu a:visited {
		text-decoration: none;
		border-top: 0px solid transparent;
		border-left: 1px solid transparent;
		border-bottom: 1px solid transparent;
		border-right: 1px solid transparent;
	}
	.mainMenu a:hover,
	.mainMenu a:active {
		border-top: 1px solid #CC0000;
		border-left: 1px solid #CC0000;
		border-bottom: 1px solid red;
		border-right: 1px solid red;
	}
	.mainMenu a.selected {
		border-top: 1px solid #CC0000;
		border-left: 1px solid #CC0000;
		border-bottom: 1px solid red;
		border-right: 1px solid red;
		background: url('../images/mainMenuSelected.png') repeat left top;
	}
	
	
	/*Submenu*/
	.subMenuBar 
	{
		display: none;
		width: 200px;
		border-left: 1px #FF8787 solid;
		border-top: 1px #FF8787 solid;
		border-right: 1px maroon solid;
		border-bottom: 1px maroon solid;
		margin-left: 340px;
		background: #CC0000;
		z-index: 1000;
	}
	ul.subMenu {
		margin: 3px;
		padding: 0;
	}
	.subMenu li {
		width: 100%;
		list-style-type: none;
	}
	.subMenu .lastLink {
		border: 0;	
	}
	.submenu a,
	.subMenu a:link,
	.subMenu a:visited 
	{
		height: 20px;
		display: block;
		text-align: center;
		font-size: 14px;
		margin: 3px;
		width: 185px;
		text-decoration: none;
		color: #FACDCD;
	}
	.subMenu a:active,
	.subMenu a:hover {
		text-decoration: none;
		color: white;
		background: transparent url(../images/subMenuBg.gif) top left no-repeat;
	}


	/* Controls */
	.controlsContainer {
		width: 920px;
		margin: 0 0 0 35px;
		z-index: 2;
		clear: left;
	}
	.controlsLeft 
	{
		display: inline;
		float: left;
		width: 450px;
		margin: 0px;
	}
	.controlsRight 
	{
		display: inline;
		float: right;
		width: 450px;
		margin: 0px;
	}
	select {
		color:#606060; /* Was: #909090, PK*/
	}
	label {
		padding: 0 0 3px 0;
	}	
	input.searchBox {
		color: #C0C0C0;
		width: 375px;
		vertical-align: top;
		margin: 0 10px 0 0;
		float: right;
	}
	.searchButton {
		border: 0 none;
		background: url('../images/zoekbutton.png') no-repeat;
		width:45px;
		height:25px;
		color: white;
		float: right;			
		text-align: center;
		padding: 3px 0 4px 0;
	}

	/*Content*/
	.contentContainer {
		padding-top: 125px;
		margin: 0 0 0 35px;
		z-index: 1;
	}
	.readerContainer {
		padding-top: 100px;
		margin: 0 0 0 35px;
		z-index: 1;
	}
	
	.container
	{
		float: left;
	}
	.row {
		clear: both; 
		margin: 0; 
		padding: 0; 
	}
	.col {
		width: 25%;
		margin: 0; 
		padding: 0; 
		margin-left: 35px; 
		margin-right: 35px;
	}

	.colWide {width:94%; margin-left: 35px;}
	.topFrame {} /*uitstluitend voor IE6, zie IE6.css*/
	
	.colLeft  {width: 45%; margin-left: 35px; margin-right: 35px;}
	.colRight {width: 45%;}
	
	.colLeftSmall  {width: 30%; margin-left: 35px; margin-right: 35px;}
	.colRightWide {width: 60%;}
	
	.colLeftReaderTop  {width: 100%;}
	.colLeftReaderBottom {width: 100%;}
	.colRightReader {width: 65%;}
	
	.colLeftWide  {width: 60%; margin-left: 35px; margin-right: 35px;}
	.colRightSmall {width: 30%;}
	
	.colCenterLeft  {width: 29%; margin-left: 35px;}		
	.colCenterMid  {width: 29%; margin-left: 35px; margin-right: 35px;}
	.colCenterRight  {width: 29%;}
	
	
	.HeaderLeft
	{
		/*background: Orange;*/
		margin-left: -35px;
		border: 0px solid black;
		width: 100%;
		height: 35px;
		background:url('../images/linksboven.png') no-repeat left top;
	}
	
	.HeaderRight
	{
		/*background: gray;*/
		margin-right: 35px;
		border: 0px solid black;
		width: 100%;
		height: 35px;
		float: left;
		clear: both;
		background:url('../images/rechtsboven.png') no-repeat right top;
	}
	
	.BorderLeft
	{
		/* background-color: green; */
		margin: 0 0 0 -35px;
		border: 0px solid black;
		width: 100%;
		background:url('../images/links.png') repeat-y left center;
	}
	
	.BorderLeft p {
		margin: 0 0 0 35px;
	}
	
	.BorderRight
	{
		/*background-color: blue;*/
		margin: 0 35px 0 0;
		border: 0px solid black;
		width: 100%;
		clear: both;
		background:url('../images/rechts.png') repeat-y right center;
	}
	
	.FooterLeft
	{
		background: Silver;
		margin: 0 0 0 -35px;
		border: 0px solid black;
		width: 100%;
		height: 35px;
		background:url('../images/linksonder.png') no-repeat left bottom;
	
	}
	
	.FooterRight
	{
		/*background-color: Fuchsia;*/
		margin: 0 35px 0 0;
		border: 0px solid black;
		width: 100%;
		clear: both;
		height: 35px;
		background:url('../images/rechtsonder.png') no-repeat right bottom;
	}

	.FooterContainer	{
		height: 50px;
		clear: both;
	}
	
	/*Reader Container met Silverlight reader*/
	.readerPanel
	{
		display: block;
		width: 632px;
		height: 870px;
		margin: -25px 0 0 9px;
		/*border: 1px solid Green;*/
	}
	.moreInfoPanel
	{
		width: 632px;
		float: right;
		margin: -25px 0px 0px 9px;
	}
	
	.bookTitle
	{
		font-size: 14px; 
		margin-bottom: 0px;
	}
	.coverContainer
	{
		display: inline;
		float: left;
		width: 100px;
	}
	.metadataContainer
	{
		display: inline;
		float: left;
	}
	.imgCover 
	{
		border: solid 1px Gray;
		float: right;
		clear: both;
		width: 100px;
	}
	.rating
	{
		float: right;
		clear: both;
	}
	.smallText
	{
		font-size: 9px;
		line-height: 10px;	
	}
	.tocPanel
	{
		margin-left: 25px;
		height: 508px;
	}
	.searchPanel
	{
		margin-left: 35px;
	}
	.bookmarkPanel
	{
		margin-left: 35px;
	}
	
	/* tocButtons */
	.tocButtonsContainer
	{
		float: left;
		margin-top: -26px;
		margin-left: 10px;
		width: 50px;
	}
	*+html .tocButtonsContainer
	{
		width: 25px;
	}
	
	.tocButtonTop
	{
		height: 22px;
		background: url('../images/TocButtonTop.png') no-repeat left top;
	}
	.tocButtonBottom
	{
		height: 20px;
		background: url('../images/TocButtonBottom.png') no-repeat left bottom;
	}
	ul.tocButtons {
		display: block;
		height: 275px;
		width: 25px;
		margin: 0;
		padding: 0;
		list-style-type: none;
		background: url('../images/TocButtonBg.png') repeat-y left;
	}
	.tocButtons li{
		float: left;
		width: 25px;
		margin: 0;
		padding: 0;
		border: 0;
		white-space: nowrap;
		background: transparent url('../images/TocButtonsDivider.gif') no-repeat bottom;
	}

	li.firstLink
	{
		height: 60px;
		background: url('../images/tocInhoud.png') no-repeat left top;
	}
	li.secondLink
	{
		height: 60px;
		background: url('../images/tocZoeken.png') no-repeat left top;
	}
	li.thirdLink
	{
		height: 80px;
		background: url('../images/tocBladwijzers.png') no-repeat left top;	
	}
	
	li.firstLinkSelected {
		height: 60px;
		background: url('../images/TocInhoudSelected.png') no-repeat left top;
	}
	li.secondLinkSelected {
		height: 60px;
		background: url('../images/TocZoekenSelected.png') no-repeat left top;
	}
	li.thirdLinkSelected {
		height: 80px;
		background: url('../images/TocBladwijzersSelected.png') no-repeat left top;
	}
	
	li.firstLink .tocSelected a:active,
	li.secondLink .tocSelected a:active,
	li.thirdLink .tocSelected a:active,
	li.firstLink .tocSelected a:hover,
	li.secondLink .tocSelected a:hover,
	li.thirdLink .tocSelected a:hover
	{
		color: white !important;
	}
	
	.tocButtons li a {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		padding: 0px 3px;
		margin:  0;
	
		/*Rotated text works for IE only*/
		/*font-weight: bold;*/
		/*color: #c6dde9;*/
		/*font-size: 14px;*/
		/*writing-mode:tb-rl;*/
		/*filter: flipH() flipV();*/
	}
	.tocButtons li a,
	.tocButtons li a:link, 
	.tocButtons li a:visited {

	}
	.tocButtons li a:hover,
	.tocButtons li a:active {
		color: white;
	}
	
	/*Reader Buttons*/
	.readerButtonsContainer 
	{
		float: left;
		width: 637px;
		height: 25px;
		margin-left: 8px;
		/* border: 1px solid red; */
	}
	.readerButtonsLeft
	{
		float: left;
		margin-top: -25px;
		width: 25px;
		height: 25px;
		background:  url('../images/readerButtonsLeft.png') no-repeat left;
	}
	.readerButtonsRight
	{
		float: left;
		margin-top: -25px;
		width: 25px;
		height: 25px;
		background:  url('../images/readerButtonsRight.png') no-repeat right;
	}
	
	ul.readerButtons {
		display: block;
		float: left;
		width: 587px; /*readerButtonsContainer width - (2*25): 587*/
		margin: -25px 0 35px 25px;
		height: 25px;
		padding: 0;
		list-style-type: none;
		background:  url('../images/readerButtonsBg.png') repeat-x;
	}
	*+html ul.readerButtons {
		margin-left: 0;
	}
	.readerButtons li{
		float: left;
		padding: 0px 8px;
		background: url('../images/readerButtonsDivider.png') no-repeat right;
		white-space: nowrap;
	}
	.readerButtons li.lastLink{
		background: none;
	}
	.readerButtons li.readerButtonSelected{
		background: url('../images/readerButtonsSelectedBg.png') repeat-x right top;
	}	
	.readerButtons li.readerButtonDisabled a:link,
	.readerButtons li.readerButtonDisabled a:visited
	{
		color: Gray;
		cursor: default;
	}
	
	.readerButtons a {
		display: block;
		color: white;
		font-size: 12px;
		padding: 3px 5px;
		text-decoration: none;
		font-weight: bold;
		color: #c6dde9;
	}
	
	.readerButtons a,
	.readerButtons a:link, 
	.readerButtons a:visited {

	}
	.readerButtons li a:hover,
	.readerButtons li a:active {
		color: white;
	}
}