/*
| -------------------------------------------------------------------
| FILENAME:			wm.preparact.css
| DESCRIPTION:		Default Style Sheet
| CREATED:			16/09/2008
| INITIAL AUTHOR:	Elma Smit, Ronald ter Neuzen, Martijn ter Hellen
| UPDATED BY:		Elma Smit, 16/09/2008
| 
| Copyright (c) 2008 KeyAgency
| http://www.keyagency.nl/
| -------------------------------------------------------------------
| Basic colors used for website:
|
| dred: #8a1e10;
| dblue: #022F54;
| gray-text: #52565A;
| -------------------------------------------------------------------
*/

body
{
	font-family: 'Lucida Grande','Arial', Geneva, sans-serif;
	color: #52565A;
	background-image: url('../gui/backgrounds/background.header.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	background-color:#fff;
}

hr,.hide { display: none; }
.clear { clear: both; }
img { border: none; }
a { outline: none; }
table td,
table th
{
	border: 1px solid #ddd;
	font-size: 85%;
}

/*
| -------------------------------------------------------------------
| BASIS
| -------------------------------------------------------------------
*/

#page
{
	width: 900px;
	margin: 0px auto;
	padding: 0px;
	position: relative;
}

#page .column { float: left; }
#page .row { clear: both; }
#page .one-third { width: 300px; }
#page .two-third { width: 600px; }
#page .one-fourth { width: 225px; }
#page .two-fourth { width: 450px;overflow:hidden; }
#page .three-fourth { width: 675px; }

#page .rightalign { text-align: right; }

/*
| -------------------------------------------------------------------
| HEADER
| -------------------------------------------------------------------
*/

#header { height: 170px; }


#page #logo { padding: 15px 0 0 120px; width:480px; }


#page #pictures { margin: 0 0 0 35px; width: 265px;}

/* 	#page #pictures img { border-right: 2px solid #ddd;border-left: 2px solid #ddd;} */

#footer
{
	padding: 25px 0 0 0;
	background-image: url('../gui/backgrounds/background.footer.gif');
	background-repeat: no-repeat;
	background-position: center bottom;
}

#footer .svitzer-logo
{
	float: right;
	padding: 20px 15px 0 0;
	width: 85px;
	height: 23px;
}

#footer p
{
	color: #919191;
	font-size: 77%;
}

#footer a { color: #8a1e10; }
#footer a:hover { color: #022F54; }

#footer a#linkedin
{
	position:relative;
	display:block;
	margin-top:14px;
}

/*
| -------------------------------------------------------------------
| Topmenu
| -------------------------------------------------------------------
*/

#navigation { position:absolute; }

ul.sectionsmenu
{
	padding: 0px;
	margin: 0;
	height: 50px;
	border-bottom: 1px solid #ddd;
}

ul.sectionsmenu li
{
	list-style-type: none;
	display: inline;
	float: left;
}

ul.sectionsmenu li a
{
	display: block;
	font-weight: normal;
	font-size: 123.1%;
	margin: 15px 0px 15px 0px;
	color: #7c7b7b;
	padding: 0px 8px;
	border-right: 1px solid #ddd;
	text-decoration: none;
	letter-spacing: -1px;
}

ul.sectionsmenu li.firstitem a
{
	padding-left:0px;
}

ul.sectionsmenu li.lastitem a
{
	padding-right:0px;
	border: 0 transparent none;
}

ul.sectionsmenu li a:hover, ul.sectionsmenu li a.selected
{
	color: #8a1e10;
}

ul.sectionsmenu ul { display: none; }

ul.sectionsmenu li a.kwc-prepare
{
	color: #022F54;
	font-weight: bold;
	text-transform: uppercase;
}

ul.sectionsmenu li a.kwc-act
{
	color: #8a1e10;
	font-weight: bold;
	text-transform: uppercase;
}

ul.sectionsmenu li a.kwc-about-preparact { padding: 0px 10px 0px 0px; }

/*
| -------------------------------------------------------------------
| UL styles
| -------------------------------------------------------------------
*/

ul.style
{
	padding: 0px;
	margin: 0;
}

ul.style li
{
	list-style-type: none;
	display: inline;
}

ul.style li a { display: block; }

/******************************************************************************
* 
******************************************************************************/

#sidebar ul.sectionsmenu li
{
	float: right;
}

#sidebar ul.sectionsmenu li a
{
	font-size: 85%;
	border: 0;
	padding-right: 20px;
	margin-top: 20px;
	color: #919191;
	letter-spacing: 0px;
}

#sidebar ul.sectionsmenu li a:hover
{
	color: #8A3410;
}

#sidebar ul.sectionsmenu li a strong
{
	font-weight: normal;
}

/*
| -------------------------------------------------------------------
| PAGECONTENT
| -------------------------------------------------------------------
*/

#page #pagecontent
{
	padding: 71px 0px 0px 0px;
	min-height: 350px;
	_height: 350px;
}


 
#TB_window .html_content a:link,
#pagecontent a { color: #8a1e10; }
#pagecontent a:hover { color: #022F54; }

#pagecontent p.intro
{
	/* 	font-weight: bold; */
	font-size: 93%;
	color: #022F54;
}

#pagecontent hr
{
	/*width:100%;
	display:block;*/
}

#pagecontent p
{
	font-size: 85%;
	line-height: 150%;
}

#pagecontent p strong
{
	color: #022F54;
}

#pagecontent ul
{
	font-size: 85%;
	line-height: 140%;
	font-weight: inherit;
}

h3,
#pagecontent h3
{
	font-size: 123.1%;
	color: #8a1e10;
	line-height: 140%;
	margin: 0pt 0pt 0.5em 0pt;
}

h4 {color:#022F54;margin: 0pt 0pt 0.5em 0pt;}
#pagecontent h4
{
	font-size: 93%;
	font-weight: bold;
	line-height: 140%;
	color:#022F54;
	margin: 0pt 0pt 1em 0pt;
}

/* trainers pagina */
#page.trainers div.list { clear: none;} 

#page.trainers div.list div.folder
{
	float: left;
	width: 80px;
	min-height: 210px;
	_height: 210px;
	margin: 0 10px 10px 0;
	padding:10px;
	overflow: hidden;
}

#page.trainers div.folder div.folder h4
{
	font-size: 93%;
	margin:4px 0 0 0;
}

#page.trainers div.folder div.folder p
{
	font-size: 77%;
	margin: 0px;
}

#page.trainers div.folder div.folder .thumbnail img
{ width: 60px;}

#page.trainers div.folder div.folder p.readmore
{
	font-size: 85%;
}


/* trainers pagina */

#pagecontent em.highlight
{
	background-color: #bc221a;
	color: #fff;
	padding: 2px 4px;
}

/* 	Images */
.thumbnail_
{
	margin: 0px 0px 5px 0px;
	border: 3px solid #ddd;
}

.thumbnail_right,
.thumbnail_rightnopop
{
	float: right;
	margin: 0px 0px 5px 10px;
	border: 3px solid #ddd;
}

.thumbnail_left,
.thumbnail_leftnopop
{
	float: left;
	margin: 0px 10px 5px 0px;
	border: 3px solid #ddd;
}

.thumbnail_rightnopop,
.thumbnail_leftnopop
{
	border: 0px solid #ddd;
}

/*
| -------------------------------------------------------------------
| "about" interactive visual  
| -------------------------------------------------------------------
*/
#page #pagecontent .html_content img#about-visual
{
	width: 600px;
	height: 310px;
	background-image: url('../gui/visual.about.preparact.sprite.gif');
	margin: 0;
	position:relative;
}

/*
| -------------------------------------------------------------------
| PAGECONTENT prev/next items (javascript gegenereerd)
| -------------------------------------------------------------------
*/

#pagecontent #prevnext
{
	display:block;
	width:100%;
	margin:14px 0 8px 0px;
}

#pagecontent #prevnext div
{
	display:inline;
}

#pagecontent #prevnext div a
{
	font-size:80%;
}

#pagecontent #prevnext div.next
{
	float:right;
}

/*
| -------------------------------------------------------------------
| PAGECONTENT Folders
| -------------------------------------------------------------------
*/

#pagecontent  div.folder { border: none; }

#pagecontent  div.list
{
	padding: 2px 0 2px 0;
	display: block;
	clear: both;
	overflow: auto;
}

#pagecontent div.folder div.folder
{
	margin: 7px 20px 7px 0;
	padding: 15px;
	border-width: 1px;
	border-color: #ddd;
	border-style: solid;
}

#pagecontent div.list p { padding: 0px; }

#pagecontent div.list p strong
{
	color: #52565A;
}

#pagecontent div.banner
{
	display:none;
}

/* 	Images */
#pagecontent div.list .thumbnail_,
#pagecontent div.list .thumbnail_right,
#pagecontent div.list .thumbnail_left,
#pagecontent div.list .thumbnail_rightnopop,
#pagecontent div.list .thumbnail_leftnopop
{
	border: 0px solid #ddd;
}



/*
| -------------------------------------------------------------------
| PAGECONTENT prepare & act Modules
| -------------------------------------------------------------------
*/



#pagecontent .prepare-optional-modules
{
	width: 260px;
	padding: 15px;
	/* 	background-color: #fff; */
	border: 1px solid #ddd;
	
}

#prepare-optional-modules
{margin: 0 0 0 15px;}

/* 	
	.prepare basic modules panels
*/
#pagecontent .prepare-basic-modules
{
	width: 260px;
	padding: 15px;
	margin: 0 15px 0 0; 
	border: 1px solid #ddd;
	/* 	background-color: #fff; */
}


#pagecontent .prepare-basic-modules h3,
#pagecontent .prepare-basic-modules h4
{color: #022F54;}


#pagecontent .prepare-optional-modules h3
{color: #52565A;}

/* 	
	Act modules
*/
#pagecontent .act-modules { /* 	background-color: #fff; */border: 1px solid #ddd;padding: 15px; 	margin: 0px 20px 0px 0;}
#pagecontent .act-modules div.list { clear: none; }

#pagecontent .act-modules div.folder
{
	border-width: 0px 0px 1px 0;
	border-color: #ddd;
	border-style: solid;
	margin: 10px 15px 10px 0px;
	float: left;
	clear:none;
	display:inline-block;
	width: 264px;
	height:140px;
}

#pagecontent .act-modules div.alt { margin: 10px 0px 10px 0; }

#pagecontent .act-modules h4
{color: #8a1e10;}

/* 	Needed for roundencorners.js */
#pagecontent .gray { background-color: #ddd; }





/*
| -------------------------------------------------------------------
| SIDEBAR
| -------------------------------------------------------------------
*/

#sidebar
{
	min-height: 411px;
	_height: 411px;
	padding: 0px 0px;
	background-image: url('../gui/backgrounds/background.sidebar.gif');
	background-repeat: no-repeat;
	background-position: left 40px;
	display: inline;
}

/*
| -------------------------------------------------------------------
| Panels
| -------------------------------------------------------------------
*/

.panel
{
	/* 	needed voor uitschuif ding */
	position: relative;
}

.panel h3
{
	font-size: 93%;
	font-weight: bold;
	line-height: 140%;
	margin: 0pt 0pt 1em 0pt;
}

.panel p
{
	font-size: 85%;
	line-height: 150%;
}

.diap p,.diap h3,.diap ul { color: #fff; }
.margin { margin: 10px 20px 17px 40px; }
.padding { padding: 0px 15px 20px 20px; }
.border { border-bottom: 1px solid #ddd; }

.panel h3 a
{
	display: block;
	height: 50px;
	background-repeat: no-repeat;
}

.panel h3 a span { display: none; }
.prepare h3 a { background-image: url('../gui/sidebar/heading.prepare.gif'); }
.act h3 a { background-image: url('../gui/sidebar/heading.act.gif'); }
.act,
.prepare { background-color: #ffffff; }

/* 	uitschuif ding */
.slide
{
	background-color: #ffffff;
	z-index: 2;
	position: relative;
	width: 200px;
}

.modules
{
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 240px;
	height: 185px;
	width: 30px;
	background-position: right top;
}

.prepare .modules { background-image: url('../gui/sidebar/background.prepare.gif'); }
.act .modules { background-image: url('../gui/sidebar/background.act.gif'); }


.margin { margin: 10px 20px 0px 40px; }
.padding { padding: 0px 15px 2px 20px; }

.modules h4 a
{
	width: 30px;
	display: inline;
}

.modules h4 a span { display: none; }

.modules .information
{
	display: none;
	width: 250px;
	padding: 10px 0px;
}

.modules .information h5 a
{
	font-size: 85%;
	text-decoration: none;
	color: #fff;
	display: block;
	font-weight: normal;
	padding: 4px 0px;
	margin: 0px 15px;
}

.modules .information h5 a:hover { color: #fff; }

.prepare .information h5 a
{
	color: #a0b5d5;
	border-bottom: 1px solid #2b508b;
}

.act .information h5 a
{
	color: #ac6969;
	border-bottom: 1px solid #9d4d3a;
}

.download
{
	float: right;
	margin: 0 0 10px 10px;
	text-align: center;
	clear:right;
}
.download p a { text-decoration: none;} 
.download p a span.title { display: block; text-decoration: underline; font-style: italic; }

/******************************************************************************
* LOGIN
******************************************************************************/

form.login-form
{

}

form.login-form h3
{
	margin: 0 0 0.5em 0;
	color: #919191;
	font-size: 85%;
}


form.login-form p
{
	color: #919191;
	
	margin: 0 0 0.5em 0;
}

form.login-form p.error
{
	color: #FF2819;
}

form.login-form p.control
{
	float: left;
	margin-right: 16px;
}

form.login-form p.error,
form.login-form p.submit
{
	clear: left;
}


form.login-form p label
{
	display: block;
}

form.login-form input.text
{
	font-size: 100%;
	width: 176px;
	border-width: 1px;
	border-color: #bbb;
	border-style: solid;
	margin: 0 0 0.5em 0;
}

/******************************************************************************
* LOGIN
******************************************************************************/

#pagecontent form
{
	border: 1px solid #bebebf;
	padding: 10px;
}

#pagecontent form .first
{
	width: 268px;
	padding: 0 10px 0 0;
	border-right: 1px solid #ddd;
}

#pagecontent form .row
{
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

#pagecontent form .control
{
	clear: both;
	padding: 0.3em 0px;
}

#pagecontent form label
{
	font-size: 85%;
	display: block;
	float: left;
	width: 155px;
	font-weight: bold;
	vertical-align: middle;
	/* 		color: #002156; */
	color:#535353;
	padding: 4px 0px 0px 0px;
}

#pagecontent form p.label
{
	font-size: 85%;
	color:#535353;
	font-weight: bold;
	margin: 0px 0px 4px 0px;
	clear: left;
}


#pagecontent form p.margin
{
	margin: 4px 0px 4px 0px;
}


#pagecontent form input,
#pagecontent form select,
#pagecontent form textarea
{
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #949494 #eee #eee #949494;
	font-size: 85%;
	vertical-align: middle;
	padding: 2px 0px 2px 0px;
	width: 210px;
}

/* 	
	IE positie is anders.
	vind het in css/wg.iefix.css
*/
#pagecontent form .checkboxes input,
#pagecontent form input.radio { border-width: 0px;  margin-top: 2px;}

/* 	
	Crappy IE,alternatief voor de select button
	vind het in css/wg.iefix.css
*/

#pagecontent form div.select
{
	position: relative;
	display: inline;
}

#pagecontent form select { width: 210px; }

#pagecontent form select,
#pagecontent form .textarea,
#pagecontent form .text { padding: 0.1em 0; }

#pagecontent form .small select,
#pagecontent form .small input
{
	width: auto;
	display: inline;
}

#pagecontent form span.desc
{
	font-style: italic;
	font-weight: normal;
	color: #bbb;
	font-size: 77%;
	margin: 0 0 0 10px;
}

#pagecontent form p span.error
{
	font-size: 85%;
	color: red;
	font-style: italic;
}
#pagecontent form span.req,
#pagecontent form p.req
{
	font-size: 85%;
	color: #aaa;
	font-style: italic;
	margin: 0px;
}

#pagecontent form div.checkboxes span, 
#pagecontent form div.radiobuttons span
{
	display: block;
	clear: both;
}

#pagecontent form div.checkboxes label, 
#pagecontent form div.radiobuttons label
{
	display: inline;
	font-weight: normal;
	float: left;
	width: auto;
	padding: 1px 5px 3px 2px;
	text-transform: none;
	color: #000;
	vertical-align: middle;
}

#pagecontent form div.checkboxes input,
#pagecontent form div.radiobuttons input
{
	vertical-align: middle;
	float: left;
	width: 15px;
}

#pagecontent form div.checkboxes input.checkbox
{
	vertical-align: top;
	margin-left:155px;
	display:inline-block;
	float:none;
}

#pagecontent form div.checkboxes label.right
{
	display:inline-block;
	float:none;
	width: 220px;
}

#pagecontent form div input.right
{
	vertical-align: top;
	margin-left:155px;
	display:inline-block;
	float:none;
}