/**
 * Cascading Style Sheet Document
 * 
 * In this stylesheet the images, fonts, and content-related definitions can be found.
 * Definitions purely used for structuring the page and creating some defaults are
 * found in defaults.css
 *
 * Emiel Klein Ovink - http://www.kleinovink.net
 * Copyright © 2007
 */
 
/*
	COLOR PALLET

	#6b6b6b | medium grey	- Pagetext grey	
	#001c47 | dark blue		- The dark blue used by  h2 tags
	#6090c0 | light blue	- The very light blue used for link coloring

*/


/* -------------------------------------------------------------------------------------------------- */
/* Begin styling the structure defined in defaults.css and setting some style defaults
/* -------------------------------------------------------------------------------------------------- */

body {
	background: #fff;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	/*background: url(../img/pagebody-bg.gif) left 50px repeat-x;*/

} 

#header {
	background: url( ../img/header-bg.gif) repeat-x;
}


#sitetitle {
	position: relative;
	left: 5px;
	width: 323px;
	height: 71px;
	background: url( ../img/header-title.gif) no-repeat;
}

#sitetitle h1, #sitetitle p {
	display: none;
}

#pagebody {
	color: #6b6b6b;	
	font-size: 12px;
}

#splash-wrapper {
	width: 100%;
	height: 250px;
	background: #333;
	margin-bottom: 30px;
}


#footer {
	border-top: 3px solid #d8d8d8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999;
	background: #ebebeb;
}

#footer a:link, #footer a:visited, #footer a:active {
	color: #777;
	text-decoration: none;
}

#footer a:hover, #footer a:focus {
	color: #444;
	text-decoration: none;
}


#bottom {
	margin-top: 50px;
	font-size: 11px;
}

/*
 	Doing some basic links
*/

a:link, a:visited, a:active { color: #6090c0; text-decoration: none; }
a:hover, a:focus { color: #6090c0; text-decoration: underline; }



.clear { clear: both; } /* to use anywhere needed */
.hide { display: none; }

ul.inline-left { text-align: left; }
ul.inline-right { text-align: right; }
ul.inline-center { text-align: center; }

ul.inline li, ul.inline-center li, ul.inline-right li, ul.inline-left li {
	display: inline;
	list-style-type: none;
	padding: 0 5px;
}

ul.links {
	border-top: 1px solid #dfdfdf;
	margin: 0;
	padding: 0;
	list-style-type: none;

}

ul.links li {
	margin:0;
	border-bottom: 1px solid #dfdfdf;
}

ul.links li a {
	display: block;
	padding: 3px 3px;
	text-decoration: none;
	color: #306090;
	z-index: 10;
}

ul.links li a:hover {
	background:  #e5ebff;
	/*background: #efefef;*/
}

* html ul.links li a:hover {
	color: #6090c0;
	background: none;
}

/* -------------------------------------------------------------------------------------------------- */
/* Header Navigation
/* -------------------------------------------------------------------------------------------------- */

/*
	MAIN NAVIGATION
*/


ul#nav-main {
	position: absolute;
	color: #fff;
	margin: 10px 10px;
	font-size: 13px;
	font-weight: bold;
	top: 70px;

}

ul#nav-main li {
	display: block;
	margin: 0 2px;
	float: left;
	display: inline;
	list-style-type: none;
}

ul#nav-main li.current a:link, ul#nav-main li.current a:active, ul#nav-main li.current a:visited {
	background: #fff;
	color: #001c47;
	border: 1px solid #ccc;
}

ul#nav-main li.current a:hover, ul#nav-main li.current a:focus {
	background: #fff;
	color: #001c47;
	border: 1px solid #ccc;
}

ul#nav-main li a:link, ul#nav-main li a:active, ul#nav-main li a:visited  {
	display: block;	
	padding: 7px 12px 7px 12px;
	background: #5c0000;
	color: #ddd;
}

ul#nav-main li a:hover , ul#nav-main li a:focus {
	color: #fff;
	text-decoration: none;
}

/* 
	NAV SHORTCUTS MENU
*/
ul#nav-shortcuts {
	position: absolute;
	margin: auto;
	top: 37px;
	right: 0;
}

ul#nav-shortcuts li {
	float: left;
	display: inline;
	list-style-type: none;
	padding-right: 5px;
	padding-left: 15px;
}

ul#nav-shortcuts li a {	
	display: block;
	padding-top: 14px;
	font-size: 10px; 
	font-family: Arial, Helvetica, sans-serif;
	color: #ccc;
	text-decoration: none;	
	background-position: top center;
	background-repeat: no-repeat;	
}


/* 
	SUBMENU MENU
*/
ul#submenu {
	color: #fff;
	margin: 10px 0;
	font-size: 12px;
	font-weight: bold;
}

ul#submenu li {
	margin: 0;
	
	display: inline;
	list-style-type: none;
	padding-right: 15px;
	padding-left: 15px;
}
#bottom ul li a, ul#submenu li a {
	color: #777;
	font-weight: normal;
}
#bottom ul li a:hover, ul#submenu li a:hover {
	color: #333;
	font-weight: normal;
}

ul#submenu li.current a {
	color: #222;
	font-weight: bold;
}



/* images */
a.pixelicon-home { background-image: url( ../img/pixelicon-home-a.gif); }
a.pixelicon-home:hover { background-image: url( ../img/pixelicon-home-b.gif); }

/* link hover states */
ul#nav-shortcuts li a:hover { color: #fff; }
a.pixelicon-contact { background-image: url( ../img/pixelicon-contact-a.gif); }
a.pixelicon-contact:hover {	background-image: url( ../img/pixelicon-contact-b.gif); }




/* -------------------------------------------------------------------------------------------------- */
/* HEAD TEXTS
/* -------------------------------------------------------------------------------------------------- */

/* We don't want those to be the same as the text they are in */
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; }
/* To prevent them getting smaller then the text they are in. */
h4, h5, h6 { font-size: 12px; font-weight: bold; }


h1 { font-size: 24px; font-weight: normal; }
h2 { font-size: 20px; font-weight: normal; letter-spacing: -1px; color: #001c47; }
h3 { font-size: 14px; color: #001c47; }




/* -------------------------------------------------------------------------------------------------- */
/* Content Positioning - Here we create some classes for structuring the content
/* -------------------------------------------------------------------------------------------------- */

/* 
	This container should be used to store every horizontal group of elements in the pagebody in 
	in order to display content correctly, and can ofcourse be used for other goals as well.
*/
.container {
	padding-top: 10px;
	padding-bottom: 20px;
	clear: both;
}

/* These should be used in the main pagebody container */
.page-left, .page-right { 
	width: 64%; 
}
.page-leftcol, .page-rightcol {  
	width: 33%; 
}

/* Columns which split an area in two vertical strokes */
.lefthalf, .righthalf { 
	width: 48%;
}

/* And here we define their properties which are the same */
.page-right, .page-rightcol, .righthalf { 
	position: relative; float: right; 
}
.page-left, .page-leftcol, .lefthalf { 
	position: relative; float: left; 
}

.page-left {
	padding-left: 5px;
}

/* aligning classes - design specific alignments are found in the style.css stylesheet */
.text-alignleft { 
	float: left;
	text-align: left;
}
.text-alignright { 
	float: right; 
	text-align: right;
}

/* aligning classes - design specific alignments are found in the style.css stylesheet */
.alignleft { 
	float: left; 
}
.alignright { 
	float: right; 
}

/* 	The use of images in text */
p img {
	padding: 0;
	max-width: 100%;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}



/* -------------------------------------------------------------------------------------------------- */
/* Links, Rulers, Images etc.
/* -------------------------------------------------------------------------------------------------- */


/* A styled ruler for general use */
div.ruler {

	width: 100%;
	height: 9px;
	border-top: 1px solid #ddd;
}

div.ruler hr {
	display: none;
}


/* The slick ruler with the little gradient beneath it. We create it from a div with a ruler 
 * placed in it, because styling the <hr/> element is way too time consuming and limited  */
div.ruler-slick {
	width: 100%;
	height: 9px;
	background: url( ../img/ruler-slick.gif ) repeat-x;
}

div.ruler-slick hr {
	display: none;
}


/* -------------------------------------------------------------------------------------------------- */
/* Forms
/* -------------------------------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------------------------------- */
/* Frontpage
/* -------------------------------------------------------------------------------------------------- */


/*
	Laatste Nieuws
*/

#frontpage {
	padding-top: 30px;
}

#frontpage h2.transform {
	padding-bottom: 3px;
}

#frontpage div.message-body {
	padding-bottom: 7px;
}
#frontpage div.message-container {
	padding-bottom: 20px;
}

#frontpage div.message-head p {
	margin: -15px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #bbb;
}

/* These should be used in the main pagebody container */
#frontpage .page-left, #frontpage .page-right { 
	width: 61%; 
}
#frontpage .page-leftcol, #frontpage .page-rightcol {  
	width: 34%; 
}
h2.transform { width: 98%; height: 35px; }
frontpage h2.transform { width: 98%; height: 25px; }
h3.transform { width: 98%; height: 24px; }

/*
	Meer Nieuws
*/

div.gameads-rss ul {
	border-top: 1px solid #dfdfdf;
	margin: 0;
	padding: 0;
	list-style-type: none;

}

div.gameads-rss ul li {
	margin:0;
	border-bottom: 1px solid #dfdfdf;
}

div.gameads-rss ul li a {
	display: block;
	padding: 4px 3px;
	text-decoration: none;
	color: #306090;
	z-index: 10;
}

div.gameads-rss ul li a:hover {
	background:  #e5ebff;
	/*background: #efefef;*/
}

* html div.gameads-rss ul li a:hover {
	color: #6090c0;
	background: none;
}

/* -------------------------------------------------------------------------------------------------- */
/* Company Page
/* -------------------------------------------------------------------------------------------------- */


#page-bedrijf .page-left, #page-bedrijf .page-right { 
	width: 62%; 
}
#page-bedrijf .page-leftcol, #page-bedrijf .page-rightcol {  
	width: 35%; 
}
#page-bedrijf .page-right div {
	width: 95%; 
}

#page-bedrijf #bedrijf-logo {
	padding-top: 40px;
	padding-left: 20px;
	text-align: center;
}
#bedrijf-logo p {
	height: 200px;
	line-height: 200px;
}
#bedrijf-logo img {
	vertical-align: middle;
}


/* -------------------------------------------------------------------------------------------------- */
/* Page
/* -------------------------------------------------------------------------------------------------- */


/* These should be used in the main pagebody container */
#page-content .page-left, #page-content .page-right { 
	width: 67%; 
}
#page-content .page-leftcol, #page-content .page-rightcol {  
	width: 28%; 
}

div.bedrijven-widget { padding-bottom: 20px; }

div.pagetitle h2, div.pagetitle p { display: none; }
div.pagetitle { margin-top: 10px; height: 90px; width: 100%; border-bottom: 1px solid #ccc; }

div#game-advertising-types { background: url(../img/h2-types.gif) no-repeat }
div#game-platform-types { background: url(../img/h2-platform.gif) no-repeat }
div#waarom-game-marketing-advertising { background: url(../img/h2-waarom.gif) no-repeat }
div#doelgroepen { background: url(../img/h2-doelgroepen.gif) no-repeat }
div#bedrijven { background: url(../img/h2-bedrijven.gif) no-repeat }
div#contact { background: url(../img/h2-contact.gif) no-repeat }

/* -------------------------------------------------------------------------------------------------- */
/* Contact
/* -------------------------------------------------------------------------------------------------- */


#page-contact .page-leftcol { width: 38%; }
#page-contact .page-right { margin-left: 2%; width: 58%; }

#contact-info {padding-left: 10px; }
#contact-info .block { padding-top: 60px; }

#contact-info .alignleft {
	margin-right: 35px;
}


#contactform { margin: 0; width: 500px; border: 1px solid #ccc; background: #f1f1f1; font-size: 11px;}
#contactform form p, #contactform form input  { position: relative; float: left }
#contactform form p { margin: 2px 0 0 5px; width: 120px; }
#contactform .error { font-weight: bold; }

#contactform div.fields input, #contactform div.fields textarea {
	width: 285px;
	font-size: 10px;
	padding: 2px, 3px;
	margin: 1px 0 0 15px;
	height: 16px;
	border: 1px solid #bbb;
	color: #666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
*html #contactform div.fields input {
	padding-top: 0;
}


#contactform div.fields textarea {
	height: 115px;
}
#contactform input.formbutton {
	margin-right: 35px;
}

*html #contactform input.formbutton {
	margin-right: 20px;
}


#company-form { margin: 0; margin-left: 50px; width: 235px; border: 1px solid #ccc; background: #f1f1f1; font-size: 11px;}
#company-form .error { font-weight: bold; }

#company-form div.fields input, #company-form div.fields textarea {
	width: 200px;
	font-size: 10px;
	padding: 2px, 3px;
	height: 16px;
	border: 1px solid #bbb;
	color: #666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
*html #company-form div.fields input {
	padding-top: 0;
}

#company-form div.fields textarea {
	height: 85px;
}
#company-form input.formbutton {
	padding: 0 5px 0 5px;
	margin-right: 35px;
}

*html #company-form input.formbutton {
	margin-right: 20px;
}