/****************************************************************\
|* |[ CSS BY: DvB ]|[ Project: AAD ]|[ Finished Date: FEB 2010 ]| *|
 \****************************************************************/
 /*     _____        _____                                       *\
 \*    |   _  \_    |_  _ \                                      */
 /*    |  | \  \\  / / |_| |                                     *\
 \*    |  |  |  |\/ /   __  \                                    */
 /*    |  |__|  |  /|  |__|  |                                   *\
 \*    |_______/ \/ |_______/                                    */
 /*                                                              *\
 \****************************************************************/
 /*                                                              *\
 \*         ----IMPORTANT PLEASE READ THIS FIRST----             */
 /*                                                              *\
 \*    The main reason for the comments in this CSS is to        */
 /*     show what everything is, and why I put it there.         *\
 \*        I hope any readers do enjoy themselves ;)             */
 /*                                                              *\
 \*         ----IMPORTANT PLEASE READ THIS FIRST----             */
 /*                                                              *\
 \****************************************************************/


/*
TO START, LETS SET EVERYTHING TO SOME STANDARD VALUES.
*/


*
{
	padding:							0;
	margin:								0;
	list-style:							none;
	border:								none;
}

/*
THERE, NOW, WE'RE SURE OF A CLEAN START, WITHOUT RANDOM PADDINGS AND
MARGINS TO SCREW WITH MY CALCULATIONS.

The above is rather important when you want to make pixel-perfect
HTML/CSS work crossbrowser. (Unfortunately)

*/




 /* Here's to hoping IE9 will not screw this one up.

Declaring transparency is like declaring you believe in God; people
that know about him, will know what you're about, and either love or
hate you for it.

With the way Microsoft has been toying around with the opacity
filter in recent versions of IE, it's an absolute gamble to use it,
but for this project, since it's mine and mine alone, I though it
was well worth the gamble, since it made my website look a lot more
impressive in browsers that support it.

... that's quite possibly every single browser except for IE8. Oh
well, we'll see how this piece of filter below comes through.

*/
.seethroughme
{
	ms-filter:							“progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
	filter:								alpha(opacity=50);
	-khtml-opacity:						0.5;
	-moz-opacity:						0.5;
	opacity:							0.5;
}






/* Width and alignment.

I'm just setting the width of the entire website here. 980 is the
standard I use nowadays. The reasoning behind it, is that 1024 is the
width of most computer screens nowadays and 980 would take into
account some space for scrollbars and such.

On a side note, I'll also make the website center right here with the
'auto' setting to my margin.

*/
.widther
{
	position:							relative;
	width:								980px;
	margin:								auto;
}






/*
Okay DIRTY DIRTY DIRTY but I use this sometimes to clear some divs,
reset some annoying values, or basically as a dirty way to try and
fix some issues that I couldn't otherwise fix.

Here it comes. Ladies and gentlemen; START YOUR CRINGING!!!
*/

.clearer
{
	clear:								both;
	height:								0px;
	line-height:						0px;
	padding:							0px;
	margin:								0px;
	width:								100%;
}




/*
THE ABOVE CLASSES ARE SETTINGS I HAD TO USE MORE THAN ONCE, AND FOR
EASY ACCESS, I MADE THEM INTO SEPERATE CLASSES, AS OPPOSED TO
DECLARING THESE SETTINGS TIME AND AGAIN WHENEVER I NEEDED THEM.
*/



/* Body and other containing declarations */

body
{
	background:							#000
										url('../images/main_bg.jpg')
										repeat
										center top;

	font-family:						Arial, Helvetica, sans-serif;
}

#header
{
	position:							relative;
	height:								450px;

	background:							transparent
										url('../images/header_bg.jpg')
										no-repeat
										left top;
}

#subcontainer
{
	background:							transparent
										url('../images/top_bg.jpg')
										repeat-x
										center top;
}

#header_logo
{
	position:							absolute;
	left:								0px;
	top:								40px;
	width:								500px;
	height:								120px;

	text-align:							right;
}

#header_logo h1
{
	text-transform:						uppercase;
	font-size:							60px;
	line-height:						46px;
	color:								#404040;
	font-weight:						bold;
}

#header_logo h1 a
{
	text-decoration:					none;
	color:								#404040;
}

#header_logo h1 a:hover
{
	color:								#555;
}

#header_logo h1 a .white
{
	color:								#fff;
}

#header_logo h3
{
	text-transform:						uppercase;
	font-size:							18px;
	line-height:						18px;
	color:								#878787;
	font-weight:						normal;
}


#header_txt
{
	position:							absolute;
	left:								680px;
	top:								90px;
	width:								200px;
	height:								280px;

	font-size:							14px;
	line-height:						24px;
}

.header_small
{
	height:								296px!important;
	background-image:					url('../images/header_small.jpg')!important;
}

.header_small .backlink a
{
	position:							absolute;
	right:								20px;
	top:								234px;

	font-size:							16px;
	font-weight:						bold;
	text-decoration:					none;
	text-transform:						uppercase;
	color:								#555;
}

.header_small .backlink a:hover
{
	color:								#333;
}







/*
Time to build the MENU
*/



#menu
{
	position:							absolute;
	left:								25px;
	top:								188px;

	font-size:							16px;
	line-height:						24px;
	font-weight:						bold;
}

#menu a .light
{
	color:								#b7b7b7;
}

#menu li
{
	padding-left:						30px;

	ms-filter:							“progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
	filter:								alpha(opacity=50);
	-khtml-opacity:						0.5;
	-moz-opacity:						0.5;
	opacity:							0.5;
}

#menu a
{
	display:							block;
	height:								24px;
	width:								300px;

	color:								#636363;
	text-decoration:					none;
	text-transform:						uppercase;
}

#menu li:hover
{
	ms-filter:							“progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
	filter:								alpha(opacity=100);
	-khtml-opacity:						1;
	-moz-opacity:						1;
	opacity:							1;
}


#menu .link1
{
	background-image:					url('../images/portfolio.jpg');
	background-position:				left;
	background-repeat:					no-repeat;
}

#menu .link2
{
	background-image:					url('../images/information.jpg');
	background-position:				left;
	background-repeat:					no-repeat;
}

#menu .link3
{
	background-image:					url('../images/contact.jpg');
	background-position:				left;
	background-repeat:					no-repeat;
}












.contentpad
{
	margin:								30px 0 50px 0;
}

.topbar
{
	position:							relative;
	width:								100%;
	height:								70px;
	background:							#1c1c1c;
	border-top:							1px solid #5f5f5f;
	border-bottom:						1px solid #5f5f5f;
}

.topbar .title
{
	display:							block;
	position:							absolute;
	left:								50px;
	top:								16px;
	font-size:							30px;
	font-weight:						bold;
	text-transform:						uppercase;
	color:								#fff;
}

.topbar a
{
	display:							block;
	position:							absolute;
	right:								50px;
	top:								22px;
	font-size:							20px;
	font-weight:						bold;
	text-decoration:					none;
	color:								#aaa;
}

.topbar a:hover
{
	color:								#fff;
}

.content
{
	margin:								10px 0 10px 0;
	background-repeat:					repeat-x;
	background-position:				center top;
}

.siteimg
{
	height:								465px;
	background-repeat:					no-repeat;
	background-position:				center top;
}

.siteimg a
{
	display:							block;
	width:								100%;
	height:								465px;
}

.bottombar
{
	position:							relative;
	width:								100%;
	margin:								5px 0 5px 0;
	background:							#1c1c1c;
	border-top:							1px solid #5f5f5f;
	border-bottom:						1px solid #5f5f5f;

	font-weight:						bold;
	text-align:							center;
	color:								#fff;
}




/*
Typical info box CSS
*/

.infobox
{
	margin-bottom:						50px;

	background-color:					#000;
	border-top:							solid 4px #404040;
	border-bottom:						solid 4px #404040;
}

.infoboxmid
{
	width:								940px;

	margin:								auto;
}

.infoboximg
{
	clear:								both;
	float:								left;

	margin:								10px 20px 10px 20px;
}

.infoboxmid h2
{
	display:							inline;

	font-size:							18px;
	font-weight:						bold;
	color:								#fff;
}

.infoboxmid h3
{
	display:							inline;

	margin-left:						10px;
	font-size:							14px;
	font-weight:						bold;
	color:								#787878;
}

.infoboxtxt span
{
	display:							block;

	margin-top:							20px;
}

.infoboxtxt .small
{
	font-size:							12px;
}

.infoboxtxt
{
	float:								left;
	width:								700px;
	margin:								15px 0;
	
	font-size:							14px;
	color:								#787878;
}

.infoboxtxt a
{
	text-decoration:					none;
	color:								#fff;
}

.infoboxtxt a:hover
{
	color:								#ccc;
}

.endline
{
	display:							block;
	maring-top:							20px;

	color:								#fff;
	font-size:							16px;
	font-weight:						bold;
	font-style:							italic;
}

#reallybig
{
	margin-bottom:						50px;
}






/*
DOWNLOAD PAGE CSS
*/


.download li
{
	padding-left:						70px;
	height:								50px;

	ms-filter:							“progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
	filter:								alpha(opacity=50);
	-khtml-opacity:						0.5;
	-moz-opacity:						0.5;
	opacity:							0.5;

	background-image:					url('../images/pdf.gif');
	background-position:				left;
	background-repeat:					no-repeat;
}


.download li:hover
{
	ms-filter:							“progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
	filter:								alpha(opacity=100);
	-khtml-opacity:						1;
	-moz-opacity:						1;
	opacity:							1;
}

.download li a
{
	display:							block;
	line-height:						40px;
	width:								300px;
}











/* Portfolio items

Below follow the several sites I included. Since I'm not using a
proper CMS for this website, I'll be manually adding stuff through
the HTML&CSS.

... Yeh I know, that's pretty oldschool :p

Anyway, the following is a FOREACH php script, so not *that*
oldschool. (... okay maybe it is anyway :p)

*/




.twittertop40
{
	background-image:					url("../images/twittertop40_bg.jpg");
}

.twittertop40 .siteimg
{
	background-image:					url("../images/twittertop40.jpg");
}

.reallybig_twittertop40
{
	background-image:					url("../images/twittertop40_sitebg.jpg");
	background-repeat:					repeat-x;
	background-position:				center top;
	background-color:					#c0deed;

	text-align:							center;
}



.hezelburcht
{
	background-image:					url("../images/hezelburcht_bg.jpg");
}

.hezelburcht .siteimg
{
	background-image:					url("../images/hezelburcht.jpg");
}

.reallybig_hezelburcht
{
	background-image:					url("../images/hezelburcht_sitebg.jpg");
	background-repeat:					repeat-x;
	background-position:				center top;
	background-color:					#fff;

	text-align:							center;
}



.dusseldorp
{
	background-image:					url("../images/dusseldorp_bg.jpg");
}

.dusseldorp .siteimg
{
	background-image:					url("../images/dusseldorp.jpg");
}

.reallybig_dusseldorp
{
	background-image:					url("../images/dusseldorp_sitebg.jpg");
	background-repeat:					repeat-x;
	background-position:				center top;
	background-color:					#ffae01;

	text-align:							center;
}



.gangsternl
{
	background-image:					url("../images/gangsternl_bg.jpg");
}

.gangsternl .siteimg
{
	background-image:					url("../images/gangsternl.jpg");
}

.reallybig_gangsternl
{
	background-image:					url("../images/gangsternl_sitebg.jpg");
	background-repeat:					repeat-x;
	background-position:				center top;
	background-color:					#000;

	text-align:							center;
}