/*****************************
Master stylesheet of the site 
	www.thomasginn.nl
Coded, written, slaved on,
and copyrighted by Thomas Ginn.
*******************************/

/*******************************************************
This stylesheet is divided up in three sections:
- Layout
Contains divs, classes and their properties.

- Color
Contains anything that concerns color, also text color, 
borders and images, except for the background images of 
the navigation. They are located in the layout section.

- Typographical
Contains anything that concerns text, except color
********************************************************/


/**************************
Normalizing before we start
**************************/

/* Padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{
	margin: 0;
	padding: 0;
}

/* Font-size for headers */
h1, h2, h3, h4, h5, h6
{
	font-size: 100%;
}

/* Removes list-style from lists */
ol, ul
{
	list-style: none;
}

/* Font-style and font-weight */
address, caption, cite, code, dfn, em, strong, th, var
{
	font-style: normal;
	font-weight: normal;
}

/* Removes borders and spacing from tables */
table
{
	border-collapse: collapse;
	border-spacing: 0;
}

/* Removes border from fieldset and img */
fieldset, img
{
	border: 0;
}

/* Left-aligns text in caption and table header */
caption, th
{
	text-align: left;
}

/* Removes quotation marks from q */
q:before, q:after
{
	content:'';
}

/* Links are treated like normal text */
a, a:hover
{
	color: #000;
	text-decoration: none;
}


/*****
Layout
*****/	

html
{
	text-align: center;
}

body
{
	width: 100%;
	height: 100%;
	text-align: left;
}

	body input, textarea
	{
		margin-bottom: 10px;
	}

h1
{
	position: absolute;
	top: 328px;
	left: 297px;
	height: 86px;
	width: 487px;
	text-indent: -9999px;
}

div#background-line
{
	width: 100%;
	height: 469px;
	position: absolute;
	top: 0;
	left: 0;
}

div#container
{
	position: relative;
	width: 785px;
        margin: 0 auto -30px;
}

div#content
{
	position: relative;
	width: 100%;
}
	
	div#content-leftcolumn
	{
		width: 68px;
		position: absolute;
	}
	
	div#content-rightcolumn
	{
		width: 682px;
		position: relative;
		left: 68px;
		padding-top: 30px;
		padding-left: 30px;
	}
	
		div#contact-left
		{
			width: 310px;
			margin-top: 25px;
			height: 400px;
		}
		
			div#contact-left h3
			{
				float: right;
				margin-right: 10px;
			}
			
			div#contact-left p
			{
				text-align: right;
				margin-right: 10px;
			}

			div#social
			{
				margin-top: 10px;
			}
			
		div#contact-right
		{
			position: absolute;
			top: 80px;
			left: 360px;
			width: 300px;
		}
		
		div#content-rightcolumn td p
		{
			padding-right: 50px;
		}
		
		div#content iframe
		{
		margin: 0;
		width: 350px;
		}
		
		q
		{
			padding-right: 30px;
		}
		
		q img
		{
			float: left;
			margin-top: 0px; 
			margin-right: 10px;
		}
		
		img
		{
			margin: 15px 20px 10px 0;
		}
		
		img.me
		{
			margin: 0 20px;
		}
	
		h3.header
		{
			margin-left: 10px;
			text-indent: -9999px;
		}
			
		h3.header_about
		{
			width: 102px;
		}

		h3.header_news
		{
			width: 54px;
		}

		h3.header_films
		{
			width: 36px;
		}
		
		h3.header_email
		{
			width: 58px;
		}		
		
		h3.header_social
		{
			width: 53px;
		}
		
		h3.header_telephone
		{
			width: 89px;
		}
		
		p.headline
		{
			display: inline;
		}

		p.postdate
		{
			display: inline;
		}

		p.subtitle
		{
			padding-left: 10px;
		}

		div#footerright p
		{
			padding-left: 10px;
			padding-top: 3px;
		}

div#branding
{
	width: 100%;
	height: 469px;
}

div#nav_main
{
	position: absolute;
	left: 681px;
	top: 232px;
	height: 97px;
	width: 103px;
}

	div#nav_main li a
	{
		display: block;
		padding: 93px 0 0 0;
		overflow: hidden;
		background-repeat: no-repeat;
	}
		
	
/** This section is an exception to the way this stylesheet works, as it is more convenient to include the background-image in these blocks of code, instead of under the "Color" section **/

	#nav_home { 
	position: absolute;
	width: 106px; 
	height: 24px; 
	overflow: hidden;
	background-image: url('images/nav_home.png'); background-position: 10px 0px;	background-repeat: no-repeat; }
	#nav_home:hover { background-position: -93px 0px; }
	
	#nav_portfolio { 
	position: absolute;
	top: 24px;
	width: 106px; 
	height: 24px; 
	overflow: hidden;
	background-image: url('images/nav_portfolio.png'); background-position: 10px 0px; background-repeat: no-repeat; }
	#nav_portfolio:hover { background-position: -93px 0px; }
	
	#nav_links { 
	position: absolute;
	top: 48px;
	width: 106px; 
	height: 24px; 
	overflow: hidden;
	background-image: url('images/nav_links.png'); background-position: 10px 0px; background-repeat: no-repeat; }
	#nav_links:hover { background-position: -93px 0px; }
	
	#nav_contact { 
	position: absolute;
	top: 72px;
	width: 106px; 
	height: 24px; 
	overflow: hidden;
	background-image: url('images/nav_contact.png'); background-position: 10px 0px; background-repeat: no-repeat; }
	#nav_contact:hover { background-position: -93px 0px; }

div#border
{
	height: 237px;
	width: 1px;
	position: absolute;
	top: 0;
	left: 104px;
}
	
h2
{
	width: 123px;
	height: 28px;	
	position: absolute;
	top: 439px;
	left: 791px;
	text-indent: -9999px;
}

div#footer
{
	height: 30px;
	width: 784px;
}

	div#push
	{
		height: 31px;
		width: 682px;
		position: relative;
		left: 68px;
	}

	div#footerleft
	{
		width: 68px;
		position: absolute;
		height: 30px;
	}
	
	div#footerright
	{
		width: 716px;
		height: 30px;
		position: relative;
		left: 68px;
	}

/*****
Colors
*****/

html
{
	background-color: #000000;
}

body
{
	color: #fff;
}

	body a, a:hover
	{
		color: #fff;
	}
	
	body a:hover
	{
		border-bottom: dotted 1px #fff;
	}
	
	.image a:hover
	{
		border: 0;
	}

h1
{
	background: transparent url('images/name.png') no-repeat;
}
	
div#background-line
{
	border-bottom: #009944 1px solid;
}
	
div#container
{
	background-color: #000000;
	color: white;
}

div#branding
{
	background: transparent url('images/branding-bg.png') no-repeat 0 0;
}

div#nav_main li
{
	width: 100%;
	height: 24px;
}

div#border
{
	background-color: #009944;
}

body.home h2
{
	background: transparent url('images/page_indicator.png') no-repeat 0 0;
	background-position: 0 0;
}

body.portfolio h2
{
	background: transparent url('images/page_indicator.png') no-repeat 0 0;
	background-position: 0 -40px;
}	

body.links h2
{
	background: transparent url('images/page_indicator.png') no-repeat 0 0;
	background-position: 0 -80px;
}

body.contact h2
{
	background: transparent url('images/page_indicator.png') no-repeat 0 0;
	background-position: 0 -120px;
}

div#content
{
	border-right: #009944 1px solid;
	border-top: 1px solid #009944;
}

	div#content iframe
	{
		background: transparent;
		color: white;
		border: none;
		margin: 0;
	}
	
	h3.header_about
	{
		background: transparent url('images/about_me.png') no-repeat 0 0;
	}
	
	h3.header_news
	{
		background: transparent url('images/news.png') no-repeat 0 0;
	}
	
	h3.header_films
	{
		background: transparent url('images/films.png') no-repeat 0 0;
	}	
	
	h3.header_email
	{
		background: transparent url('images/email.png') no-repeat 0 0;
	}		
	
	h3.header_social
	{
		background: transparent url('images/social.png') no-repeat 0 0;
	}
		
	h3.header_telephone
	{
		background: transparent url('images/telephone.png') no-repeat 0 0;
	}
	
	div#content-rightcolumn
	{
		border-left: 1px solid #009944;
	}
	
	div#contact-left
	{
		border-right: 1px solid #009944;
	}
	
div#footerright
	{
		border: #009944 1px solid;
	}
	
div#push
	{
		border-left: #009944 1px solid;
	}

p.intro
	{
		text-align: justify;
	}
	
p.intro a
        {
                border-bottom: dotted 1px #5F5F5F;
        }	

p.intro a:hover
        {
                border-bottom: dotted 1px #FFFFFF;
        }	
/************
Typographical
************/

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 24px;
}

p.postdate
{
	font-style: italic;
}

p.subtitle
{
	font-size: 11px;
	font-style: italic;
}

p.title
{
	font-weight: bold;
}

p.description
{
	font-size: 12px;
	font-style: italic;
}	

p.linkdescription
{
	font-style: italic;
	margin-bottom: 10px;
}

div#footerright p
	{
		font-size: 11px;
	}

div#contact-right input, textarea
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}