/*
 * mariavogels.com - cascading style sheet
 *
 * Copyright 2009 by Qoben, Ben Siemerink
 *
 * Last modification: 2009-05-18
 */

@media screen
{
  /*
   * Page mechanics
   *
   * Top and bottom banner with tear-off background images that are
   * fixed in all capable browsers, but scroll in IE6. The main
   * structure is a table with three rows: top banner (header),
   * content (body) and bottom banner (footer). Each row has one table
   * cell with a division; the division of the two banners is promoted
   * to fixed position for capable browsers.
   */
  html {
	height:100%;
	}

  body {
	margin:0px;
	border:0px none;
	padding:0px;
	height:100%;

	color:black;
	background-color:#f8d09d;
	background-image:url('/img/bg-cloths3.jpg');
	background-repeat:both;
	background-position:top left;
	background-attachment:fixed;

	font-size:large;
	font-style:normal;
	font-variant:normal;
	font-family:Comic Sans MS,Comic Sans,DomCasual,DomCasualD,Trebuchet,Verdana,Helvetica,Arial,sans-serif;
	}
  * html body {
  	background-image:none;
	}

  body.black {
  	background-image:none;
	background-color:black;
	}

  body.yellow {
  	background-image:none;
	background-color:#f8d09d;
	}

  body.lightyellow {
  	background-image:none;
	background-color:#f8ecd8;
	}

  p.noscript {
  	color:gray;
	font-size:small;
	text-align:center;
	display:block;
	}

  table.bodyfixed {
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	margin:0px;
	border:0px none;
	padding:0px;
	border-collapse:collapse;
	}
  * html table.bodyfixed { position:absolute; } /* IE6 */

  td.leftfixed {
  	vertical-align:middle;
	text-align:left;
	border:0px none;
	padding:0px 0px 0px 20px;
	}

  table.body {
	height:100%;
	width:100%;
	margin:0px;
	border:0px none;
	padding:0px;
	border-collapse:collapse;
	}

  td.header {
	vertical-align:top;
  	height:100px;
	max-height:100px;
	margin:0px;
	border:0px none;
	padding:0px;
	}

  td.body {
	vertical-align:middle;
	text-align:center;
	margin:0px;
	border:0px none;
	padding:0px;
	}

  td.footer {
	vertical-align:bottom;
  	height:100px;
	max-height:100px;
	margin:0px;
	border:0px none;
	padding:0px;
	}

  #header {
	position:fixed;
	z-index:11;
	top:0px;
	left:0px;
	width:100%;
	right:0px;
	height:100px;

	margin:0px;
	border:0px;
	padding:0px;
	background-image:url('/img/header.png');
	background-repeat:no-repeat;
	background-position:top left;
	}
  * html #header { position:relative; } /* IE6 */

  #body {
  	padding:0px 20px 0px 20px;
	}

  #rightbody {
  	padding:0px 20px 0px 460px;
	}

  #footeren, #footeres {
	position:fixed;
	z-index:10;
	bottom:0px;
	left:0px;
	width:100%;
	right:0px;
	height:100px;
	max-height:100px;

	margin:0px;
	border:0px none;
	padding:0px;
	background-image:url('/img/footer.png');
	background-repeat:no-repeat;
	background-position:bottom left;
  	}
  * html #footeren, * html #footeres { position:relative; } /* IE6 */

  #copyright, #design-en, #design-es, #lang-en, #lang-es {
	bottom:0px;
	position:fixed;
  	margin:0px;
	border:0px none;
	padding:0px;
	background-image:url('/img/footer-links.png');
	background-repeat:no-repeat;
	}
  * html #copyright, * html #design-en, * html #design-es, * html #lang-en, * html #lang-es {
  	top:75px;
	position:absolute;
	}

  #copyright {
	left:202px;
	width:143px;
	height:25px;
	background-position:-118px top;
	}
  #copyright:hover { background-position:-118px bottom; }

  #design-en {
	left:475px;
	width:120px;
	height:25px;
	background-position:-261px top;
	}
  #design-en:hover { background-position:-261px bottom; }

  #design-es {
	left:475px;
	width:120px;
	height:25px;
	background-position:-381px top;
	}
  #design-es:hover { background-position:-381px bottom; }

  #lang-en {
	left:0px;
	width:50px;
	height:25px;
	background-position:-68px top;
	}
  #lang-en:hover { background-position:-68px bottom; }

  #lang-es {
	left:0px;
	width:68px;
	height:25px;
	background-position:0px top;
	}
  #lang-es:hover { background-position:0px bottom; }



  /*
   * Generic text styles
   */
  a {
	color:#990000;
	text-decoration:none;
	}

  a:hover {
	color:#990000;
	text-decoration:underline;
	}

  a.more {
  	font-size:medium;
	}

  img {
	margin:0px;
 	border:0px none;
	padding:0px;
	page-break-inside:avoid;
	}

  img.work {
  	border-width:1px;
	border-style:solid;
	border-color:silver #606060 #606060 silver;
	}

  #body h1, #rightbody h1 {
	color:#990000;
  	font-size:xx-large;
	font-weight:bold;
	text-align:center;
	margin:0px 0px 1em 0px;
	border:0px none;
	padding:0px;
	page-break-after:avoid;
	}

  #header h1 {
  	color:#f8ecd8;
	margin:0px;
	border:0px none;
	padding:0px 0px 0px 61px;
	}

  h2 {
	font-size:x-large;
	font-weight:bold;
	color:#990000;
	margin:1em 0px 0em 0px;
	padding:0px;
	border:0px none;
	text-align:left;
	page-break-after:avoid;
	}

  h3 {
	color:#990000;
	font-size:large;
	font-weight:bold;
	text-align:center;
	margin:2em 0em 1em 0px;
	page-break-after:avoid;
	}

  p {
	font-size:large;
	font-style:normal;
	font-weight:normal;
	text-align:left;
	color:black;
	margin:0px 0px 0px 0px;
	padding:0.5em 0px 1em 0px;
	page-break-inside:avoid;
	}

  p.expo {
  	padding:0px;
	margin:0px 0px 0.4em 0px;
	}

  p.centre, p.centrescreen {
	text-align:center;
	}

  p.caption {
  	font-size:medium;
	text-align:center;
	color:gray;
	margin:0px;
	padding:0.2em 0px 0px 0px;
	}

  p.thumbnails {
	text-align:center;
	}

  a.thumbnail {
	display:-moz-inline-box; /* FF2 */
	display:inline-block;
	-moz-box-orient: vertical; /* FF2 */
	width:150px;
	height:115px;
	border:0px none;
  	padding:0px;
	margin:1em;
	background-color:none;
	text-align:center;
	vertical-align:middle;
	}

  a.thumbnail img {
	display:block;
	text-align:center;
	vertical-align:middle;
	margin:auto;
	border:0px none;
  	padding:0px;
	}


  /*
   * Navigation buttons
   */

  #navbar {
	z-index:15
	position:absolute;
	width:100%;
	height:33px;
	left:0px;
	top:0px;
	border-collapse:collapse;
	margin:0px;
	border:0px none;
	padding:0px;
  	}

  #navbar td {
  	text-align:center;
	border:0px none;
	padding:0px;
	}

  #navbar a, #navbar span {
	display:block;
	height:33px;
  	width:100px;
	margin:0px auto 0px auto;
	background-repeat:no-repeat;
	}
  #footeren #navbar a, #footeren #navbar span { background-image:url('/img/buttons-en.png'); }
  #footeres #navbar a, #footeres #navbar span { background-image:url('/img/buttons-es.png'); }

  #navhome { background-position:0px top; }
  #navhome:hover { background-position:0px -33px; }
  #navhome0 { background-position:0px bottom; }

  #navpaintings { background-position:-100px top; }
  #navpaintings:hover { background-position:-100px -33px; }
  #navpaintings0 { background-position:-100px bottom; }

  #navphotography { background-position:-200px top; }
  #navphotography:hover { background-position:-200px -33px; }
  #navphotography0 { background-position:-200px bottom; }

  #navsource { background-position:-300px top; }
  #navsource:hover { background-position:-300px -33px; }
  #navsource0 { background-position:-300px bottom; }


  /*
   * Work and detail
   */
  #workdetail {
  	position:fixed;
	bottom:1em;
	left:1em;
	visibility:hidden;
	z-index:12;
	}
  * html #workdetail { position:absolute; }


  /*
   * Work navigation
   * (on the pages for viewing an individual work)
   *
   * worknav0 is always visible and only shows the button to go back
   * to the works overview page. worknav is only visible when hovering
   * over.
   */
  div#worknav, div#worknav0 {
  	position:fixed;
	top:0px;
	right:0px;
	margin:0px;
	border:0px none;
	padding:5px;
	font-size:medium;
	}
  div#worknav { z-index:16; }
  div#worknav0 { z-index:15; background-image:none; background-color:transparent; visibility:hidden; }
  * html div#worknav, * html div#worknav0 { position:absolute; } /* IE6 */
  body.black div#worknav, body.black p {
  	color:#f8d09d;
	background-color:black;
	filter:progid:DXImageTransform.Microsoft.Chroma(color=black);
	}
  body.yellow div#worknav, body.yellow p {
  	color:black;
	background-color:#f8d09d;
	filter:progid:DXImageTransform.Microsoft.Chroma(color=#f8d09d);
	}
  body.lightyellow div#worknav, body.lightyellow p {
  	color:black;
	background-color:#f8ecd8;
	filter:progid:DXImageTransform.Microsoft.Chroma(color=#f8ecd8);
	}
  div#worknav h1 {
  	font-size:medium;
	font-weight:normal;
	text-align:right;
	margin:0.3em 0px 0px 0px;
	border:0px none;
	padding:0px;
	}
  div#worknav p, div#worknav0 p {
  	font-size:small;
	text-align:right;
	margin:0px;
	border:0px none;
	padding:0px;
	background-color:transparent;
	}

  #worknav a, #worknav span, #worknav0 a, #worknav0 span {
	display:inline-block;
	height:40px;
  	width:40px;
	padding:0px;
	border:0px none;
	margin:0px 0px 0px 5px;
	background-repeat:no-repeat;
	}
  body.black #worknav a, body.black #worknav span, body.black #worknav0 a, body.black #worknav0 span { background-image:url('/img/worknav-black.png'); }
  body.yellow #worknav a, body.yellow #worknav span, body.yellow #worknav0 a, body.yellow #worknav0 span { background-image:url('/img/worknav-yellow.png'); }
  body.lightyellow #worknav a, body.lightyellow #worknav span, body.lightyellow #worknav0 a, body.lightyellow #worknav0 span { background-image:url('/img/worknav-lightyellow.png'); }

  .worknavindex { background-position:0px top; }
  .worknavindex:hover { background-position:0px bottom; }

  #worknavprevious { background-position:-40px top; }
  #worknavprevious:hover { background-position:-40px bottom; }

  #worknavnext { background-position:-80px top; }
  #worknavnext:hover { background-position:-80px bottom; }

  #worknavdetail { background-position:-120px top; }
  #worknavdetail:hover { background-position:-120px bottom; }



  /*
   * Slideshow
   */

  div.slideshow, div.slideshowtop {
  	margin:0px;
	border:0px none;
	padding:0px;
	width:402px;
	height:302px;
	overflow:hidden;
	text-align:center;
	vertical-align:middle;
	}
  
  div.slideshowtop { position:fixed; }
  * html div.slideshow { position:static; } /* IE6 */
  * html div.slideshowtop { position:absolute; } /* IE6 */
  
  .slideshow img, .slideshowtop img {
    margin:auto auto auto auto;
    padding:0px;
    display:block;
    border-width:1px;
    border-style:solid;
    border-color:#404040 black black #404040;
    }

  #qphotos_table {
    width:400px;
    height:300px;
    margin:0px;
    border:0px none;
    padding:0px;
    border-collapse:collapse;
    }

  #qphotos_table td {
    border:0px none;
    padding:0px 15px 0px 0px;
    color:#804000;
    text-align:center;
    vertical-align:middle;
    color:gray;
    }

  /*
   * Slideshow buttons
   */

  #navqphotos {
	z-index:22;
	display:block;
	position:absolute;
	height:300px;
	width:300px;
	text-align:right;
	vertical-align:top;
	border-collapse:collapse;
	margin:0px;
	border:0px none;
	padding:0px;
  	}

  #navqphotos a, #navqphotos span {
	display:inline-block;
	height:20px;
  	width:20px;
	padding:0px 0px 0px 2px;
	background-image:url('/img/slide-buttons-black.png');
	background-repeat:no-repeat;
	}

  #navqphotosplay { background-position:-40px top; }
  #navqphotosplay:hover { background-position:-40px -20px; }

  #navqphotospause { background-position:-20px top; }
  #navqphotospause:hover { background-position:-20px -20px; }



  table.list {
  	border-collapse:collapse;
	padding:1em -1em 1em 0px;
	margin:0px;
	}

  table.list td {
  	vertical-align:top;
	text-align:justify;
	padding:0px 1em 0.5em 0px;
	}

  table.bare {
  	border-collapse:collapse;
	border:0px none;
	margin:0px;
	padding:0px;
	}

  td.bare {
	margin:0px;
	border:0px none;
	padding:0px;
	}

  .pageprint, .workprint, .footerprint { visibility:hidden; display:none; }
}

@media print
{
  body {
	font-size:medium;
	font-style:normal;
	font-variant:normal;
	font-family:Comic Sans MS,Comic Sans,DomCasualD,Trebuchet,Verdana,Helvetica,Arial,sans-serif;
	background-color:transparent;
	margin:1em 1em 1em 1em;
	}

  p.noscript {
  	position:absolute;
	visibility:hidden;
	}

  table.bodyfixed {
  	position:absolute;
	visibility:hidden;
	}

  table.body {
  	width:100%;
	margin:0px;
	border:0px none;
	padding:0px;
	border-collapse:collapse;
	}

  td.header {
  	vertical-align:top;
  	height:100px;
	max-height:100px;
	margin:0px;
	border:0px none;
	padding:0px;
	background-color:transparent;
	background-image:none;
	}

  td.body {
	vertical-align:middle;
	text-align:center;
	margin:0px;
	border:0px none;
	padding:0px;
	}

  td.footer {
	vertical-align:bottom;
  	height:100px;
	max-height:100px;
	margin:0px;
	border:0px none;
	padding:0px;
	}

  #header {
	position:static;
	z-index:11;
	top:0px;
	left:0px;
	width:100%;
	right:0px;
	height:100px;

	margin:0px;
	border:0px;
	padding:0px;
	background-color:transparent;
	background-image:none;
	}

  #footeren, #footeres {
	position:absolute;
	visibility:hidden;
  	}

  a {
	color:black;
	text-decoration:none;
	}

  img {
	margin:0px;
 	border:0px none;
	padding:0px;
	page-break-inside:avoid;
	}

  img.work {
  	border-width:1px;
	border-style:solid;
	border-color:silver #606060 #606060 silver;
	}

  h1 {
	font-size:x-large;
	font-weight:bold;
	font-style:normal;
	color:black;
	margin:0px -10px 0px -10px;
	padding:5px 0px 0px 10px;
	background-color:transparent;
	page-break-after:avoid;
	}

  h2 {
	font-size:large;
	font-weight:bold;
	color:black;
	margin:2em 0em 1em 0px;
	border:0px;
	page-break-after:avoid;
	}

  h3 {
	font-size:medium;
	font-weight:bold;
	font-variant:small-caps;
	color:black;
	margin:3em 0em 1em 0px;
	page-break-after:avoid;
	}

  p {
	font-size:large;
	font-style:normal;
	font-weight:normal;
	text-align:left;
	color:black;
	margin:0px 0px 0px 0px;
	padding:0.5em 0px 1em 0px;
	page-break-inside:avoid;
	}

  p.centre {
	text-align:center;
	}

  p.centrescreen {
  	display:none;
	}

  p.footerprint {
	font-size:x-small;
	font-style:normal;
	font-weight:normal;
	text-align:center;
	color:black;
	margin:2em 0px 0px 0px;
	padding:2px 10px 2px 10px;
	border-top:1px solid black;
	}

  p.thumbnails {
	text-align:center;
	}

  a.thumbnail {
	display:-moz-inline-box; /* FF2 */
	display:inline-block;
	-moz-box-orient: vertical; /* FF2 */
	width:150px;
	height:115px;
	border:0px none;
  	padding:0px;
	margin:1em;
	background-color:none;
	text-align:center;
	vertical-align:middle;
	}

  a.thumbnail img {
	display:block;
	text-align:center;
	vertical-align:middle;
	margin:auto;
	border:0px none;
  	padding:0px;
	}

  #header, #footer, #navbar, #worknav, #navqphotos {
  	position:absolute;
	visibility:hidden;
	}

  #workdetail {
  	position:static;
	margin:2em 0px 0px 0px;
	}

  div.slideshow {
	display:none;
  	position:static;
	visibility:hidden;
	}

  div.slideshowtop {
	display:none;
  	position:static;
	visibility:hidden;
	}

  .pageprint, .workprint { visibility:visible; text-align:center; }
  p.workprint { margin:1em 0px 2em 0px; }

}