/* @override http://lalojoelle/stylesheets/style.css */

/* @override http://lalojoelle/stylesheets/style.css */

/* 
    Document   : style
    Created on : 29-Nov-2009, 16:24:11
    Author     : Marco Jardim
    Description:
        Main Stylesheet file for Joelle van Autreve's site
*/

body, html, canvas {
	overflow:hidden;
	padding: 0;
	margin: 0;
	height:100%;
	width:100%;
}

a {
	outline: none;
}

#newbody{
	position:absolute;
	z-index: 5;				/* Place the new body above the background image */
	overflow:auto; 			/* restore scrollbars for the content */
	height:100%;width:100%;	/* Make the new body fill the screen */
	background: url('../img/raster.png'); /* this is just a fancy raster, you can remove it; I kinda like it though */
}

#photocontainer {
  	position:absolute;
  	height: 680px; 
	width: 1000px;
  	margin:-340px 0px 0px -500px;
  	top: 50%; 
  	left: 50%;
  	overflow: auto;
	z-index: 5;
}

#homecontainer {
  	position:absolute;
  	height: 250px; 
	width: 550px;
  	margin:-125px 0px 0px -255px;
  	top: 50%; 
  	left: 50%;
  	text-align: left;
  	padding: 0px;
  	overflow: auto;
	z-index: 5;
}

#bgimg {
	position:absolute;
	z-index: -1;
}

/* @group showcase (index only) */

#showcase {
	margin: 60px 0 0 0;
}

#showcase a img {
	margin-right: 30px;
	border-style: none;
}

#showcase a img.last {
	margin-right: 0;
}

/* @end */

/* @group header */

h1 {
	font-weight: normal;
	font-size: 16px;
	display: inline-block;
	margin-left: 15px;
	margin-bottom: 5px;
	padding-bottom: 3px;
	height: 18px;
}

.underline {
    margin-left:5px;
    margin-top:3px;
    display:block;
    background-color: #a3a3a3;
    width:471px;
    height:1px;
}

.underline.wide {
    background-color: #e3e3e3;
	width: 900px;
}

#photocontrol .underline.wide {
	margin: 0 0 6px 9px;
}

h1 a {
	text-decoration: none;
}

h1 a:hover span {
	color: #000;
}


h1 a.active span {
	color: #902220;
}

h1 span {
	color: #A3A3A3;
}

h1 span.title {
	color: #000;
}

h1 span.smaller {
	font-size: 0.75em;
}

h1 span.light{
	color: #fff;
}

.red {
	margin: 0 1em;
	color: #A70F14
}

.gray {
	margin: 0 1em;
	color: #A3A3A3
}

h1 a:hover span.light {
	color: #A3A3A3;
}


h1 a.active span.light {
	color: #8d2022;
}

/* @end */

#photographylink {
	position: absolute;
	top: 0;
	right: 160px;
	width: 150px;
	height: 30px;
}

h1.contact #photographylink {
	left: 0;
	width: 460px;
}

.slideshow {
	margin: 0 0 0 20px;
	width: 900px;
	height: 600px;
	display: block;
}

.slideshow div {
	width: 900px;
	height: 600px;
	display: none;
}

.slideshow div img {
	margin-top: auto;
	margin-bottom: auto;
}

/* @group photo navigation */

a.pic_nav{
	position: absolute;
	top: 42px;
	left: 0;
	height: 525px;
	width: 50px;
}

a.pic_nav span {
	width: 10px;
	height: 12px;
	background: url(/images/pijltjes.gif) no-repeat 0 0;
	display: block;
	top: 291px;
	position: relative;
}

a#next_pic {
	left: 900px;
}

a#next_pic span{
	background-position: -12px 0;
	left: 30px;
}

a:hover#next_pic span {
	background-position: -12px -12px;
}

a#prev_pic span {
	background-position: 0 0;
}

a:hover#prev_pic span {
	background-position: 0 -12px;
}

/* @end photo navigation */

/* @group photocontrol */

div#photocontrol {
	font-size: 0.8em;
	color: #9A9A9A;
	margin-left: 11px;
	margin-top: 6px;
}

div#photocontrol div.controls {
	display: inline;
	text-align: right;
}

div#photocontrol span#caption {
	text-align: left;
	display: none;
	margin-left: 6px;
}

div#photocontrol span#marker {
	display: none;
	left: 50px;
	margin: 0 11px 0 10px;
}

a#pausebutton, a#playbutton {
	text-align: right;
	cursor: pointer;
}

a#playbutton {
	display: none;
}

a#pausebutton:hover {
	color: #000;
}
a#playbutton:hover {
	color: #000;
}

a#pausebutton:active {
	color: #972422;
}
a#playbutton:active {
	color: #972422;
}

/* @end */

/* @group mail */

#mail {
	color: #FFF;
	margin-left: 19px;
}

#mail a {
	overflow: hidden;
	width: 280px;
	color: #FFF;
	text-decoration: none;
}

#mail a:hover {
	color: #a3a3a3;
}

/* @end mail */


/* @group error */

#error {
	margin-left: 25px;
	color:  #a3a3a3;
	font-size: 0.8em;
	margin-top: 26px;
}

#error a {
	overflow: hidden;
	width: 280px;
	color: #972422;
	text-decoration: none;
}

#error a:hover {
	color: #000;
}

/* @end  error*/