/*------------------------------------------------------------------
[Master Stylesheet]

Project:		Portfolio Antoon Verwater
Version:		2.0
Last change:	02/06/08
Assigned to:	Antoon Verwater
Primary use:	Showcase portfolio


[Table of contents]

1. Basic
2. Header
3. Content
	3.1 Welcome
	3.2 Skills
	3.3 Portfolio
		3.3.1 Portfolio web
		3.3.2 Portfolio photography
4. Footer
	4.1 Footer left
	4.2 Footer right
5. Lightbox
	

-------------------------------------------------------------------*/


/*------------------------------------------------------------------
1. Basic
-------------------------------------------------------------------*/

html{ height: 100%; }

body{ margin: 0; padding: 0; font: 11px Arial, verdana, Sans-Serif; color: #242424; height: auto; overflow-x: hidden; }

form{ padding: 0; margin: 0; }

fieldset{ border: 0; }

h1{ display: none; }

h2, h3{ padding: 0; margin: 0; }

a{ color: #242424; text-decoration: underline; padding: 0; margin: 0; }

a:hover{ color: #242424; text-decoration: none; }

p{ padding: 1px 5px 8px 5px; margin: 0; }

#wrapper{ width: 792px; margin: 0 auto; display: table; }


/*------------------------------------------------------------------
2. Header
-------------------------------------------------------------------*/

#wrapper #header{ width: 792px; height: 199px; }


/*------------------------------------------------------------------
3. Content
-------------------------------------------------------------------*/

#wrapper #welcome h2 span, #wrapper #skills h2 span, #wrapper #contact h2 span, #wrapper #portfolio h2 span, #wrapper #photography h2 span, #footer #links h2 span, #footer #morecontact h2 span{ display: none; }


/*------------------------------------------------------------------
3.1 Welcome
-------------------------------------------------------------------*/

#welcome{ width: 456px; height: 162px; float: left; color: #fff; padding: 10px 0 0 5px; line-height: 15pt; }

.welcome{ background: transparent url(../images/title_welcome.gif) no-repeat 5px 0;	width: 70px; height: 13px; }


/*------------------------------------------------------------------
3.2 Skills
-------------------------------------------------------------------*/

#skills{ width: 222px; position: relative; float: right; color: #959494; padding: 10px 0 0 50px; line-height: 11pt; background: transparent url(../images/line_skills.gif) no-repeat 0 33px; }

.skills{ background: transparent url(../images/title_skills.gif) no-repeat 0 0; width: 51px; height: 15px; padding: 0 10px 0 0; float: right; display: table; }

#skills ul{ margin: 0; padding: 0; list-style-type: none; float: left; width: 200px; }

#wrapper #skills li{ margin: 0 0 8px 0; }


/*------------------------------------------------------------------
3.3 Portfolio
-------------------------------------------------------------------*/

.thumb{ border-top: 1px solid #d2caca; margin: 5px 0 0 1px; padding: 5px 0 5px 0; line-height: 14px; height: 87px; float: left; }

.thumb img{ padding: 3px 3px 2px 0; float: left; vertical-align: left; }

.thumb p{ padding: 0 0 3px 0; margin: 0; float: left;
}

.view{ width: 215px; position: relative; float: left; }

.view img{ border: 0; padding: 0 3px 0 0; }

.view p{ margin: 0; padding: 0; }


/*------------------------------------------------------------------
3.3.1 Portfolio web
-------------------------------------------------------------------*/

#portfolio{ width: 466px; float: left; padding: 20px 0 15px 5px; margin: 0; }

#portfolio .intro{ width: 466px; float: left; margin: 0; padding: 0; }

#portfolio .intro p{ margin: 0; padding: 0 0 3px 6px; float: left; }

#portfolio .left{ width: 215px; margin: 0 0 0 4px; padding: 0; float: left; }

#portfolio .right{ width: 215px; margin: 0 0 0 32px; padding: 0; float: left; }

.portfolio{ background: transparent url(../images/title_web.gif) no-repeat 6px 0; width: 450px; height: 15px; float: left; padding: 0; }


/*------------------------------------------------------------------
3.3.2 Portfolio Photography
-------------------------------------------------------------------*/

#photography{ width: 222px; float: right; padding: 19px 0 20px 50px; margin: 0px; background: transparent url(../images/line_contact.gif) no-repeat 0 21px; }

.photography{ background: transparent url(../images/title_photo.gif) no-repeat 75px 0; width: 215px; height: 15px; padding: 0 10px 1px 0; float: right; display: table; }

#photography p{ width: 210px; margin: 0; padding: 0 0 3px 0; float: left; }


/*------------------------------------------------------------------
4. Footer
-------------------------------------------------------------------*/

#footer{ width: 792px; height: 160px; margin: 0 auto; }

#footer #links{ width: 456px; height: 50px; float: left; padding: 20px 0 15px 9px; margin: 0;}

.viewfooter{ width: 215px; margin: 5px 0 7px 5px; padding:0; float: left; }


/*------------------------------------------------------------------
4.1 Footer left
-------------------------------------------------------------------*/

.links{ background: transparent url(../images/title_links.gif) no-repeat; width: 400px; height: 12px; float: left; margin: 0 0 2px 0; padding: 0; }

#links #links1{ float: left; width: 210px; height: 50px; padding: 7px 10px 0 2px; margin: 0; }

#links #links2{ float: left; position: relative; width: 210px; height: 50px; padding: 7px 10px 0 8px;}

#footfooter { height: auto; width: 695px; float: left; padding: 15px 0 15px 105px; margin: 0; font-size: 9px; }

#footfooter a{ color: #242424; }

#footfooter .check{ background: transparent url(../images/check.gif) no-repeat 0 3px; padding: 0 0 0 10px; }

#footerCont { position: relative; clear: both; margin: 0; padding: 0; width: 100%; height: 160px; display: block; background: #959494 url(../images/footer.gif) repeat-x 0 0; }


/*------------------------------------------------------------------
4.2 Footer right
-------------------------------------------------------------------*/

#morecontact{ width: 222px; height: 100px; position: relative; float: right; padding: 20px 5px 0 47px; line-height: 11pt; }

.morecontact{ background: transparent url(../images/title_morecontact.gif); width: 179px; height: 12px; float: right; margin: 0 0 2px 3px; }

#morecontact dl{ margin: 0; padding: 5px 0 0 0; width: 260px; display: table; float: left; }

#morecontact dl dd{ float: left; padding: 0 0 0 3px; margin: 0; height: 15px; width: 60px; font-weight: bold; }

#morecontact dl dt{ padding: 0; margin: 0; height: 15px; }


/*------------------------------------------------------------------
5. Lightbox
-------------------------------------------------------------------*/

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: left; line-height: 0; padding: 0px 0px 0px 10px; }

#lightbox h4{ font-size: 12px; font-weight: bold; padding: 0px 0px 3px 5px; margin: 0px; }

#lightbox img{ width: auto; height: auto; }

#lightbox a img{ border: none; float: right; padding: 0 10px 10px 0; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0; height: 25%; width: 60%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#hoverNav a{ outline: none; }

#imageDataContainer{ background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }