@charset "utf-8";
/*
    Copyright Wugly 2009-2011
    Main CSS; voor de basis layout
*/

@import url("elementen.css");
@import url("formulieren.css");
@import url("meldingen.css");
@import url("acties.css");

/* Clearing styles */
* { margin:0; padding:0; }
img { border:none; margin:0; padding:0; }
p, ul { margin:0; }
table { padding:0; margin:0; border-collapse:collapse; border:none; }
td { padding:0; margin:0; border:none; }
form { margin:0; padding:0; }
pre { display:block; margin:10px; margin-top:0; background:#F5F5F5; border-left:3px solid #CCC; padding:5px 5px 5px 10px; }


/* Basic Layout */
body {
    background: url(../images/body_bg.png) repeat-x;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	position:relative;
}

#container 	{ position:relative; }


/* Sprite assignments */
	/* header & footer */
	#headerImage_container,	#footer_container {
		background-image:url(../images/main_sprite.png); background-repeat:no-repeat;
	}
	
	/* search */	
	#headerImage_container .search_container, #headerImage_container .search_container #SF1,
	#headerImage_container .search_container #SF2, #headerImage_container .search_container .searchButton,
    #headerImage_container .search_container #SF1 .greyTxt, #headerImage_container .search_container #SF2 .greyTxt,
    .innerSearch .SF1 .greyTxt, .innerSearch .SF2 .greyTxt, .innerSearchButton,
    .customsearch .SF1 .greyTxt, .customsearch .SF2 .greyTxt, .customsearchButton {
		background-image: url(../images/search_sprite.png); background-repeat: no-repeat;	
	}	
	
	/* main menu */
	#mainMenu_container ul li.inactiveMenu, #mainMenu_container ul li a {
    	background-image:url(../images/mainmenu_sprite.png);background-repeat: no-repeat;
	}
	
	/* main icons (social networks + help) */
	#userMenu_container ul li.help a, #footer_container ul.community li.foot_hyves a, #footer_container ul.community li.foot_twitter a, 
	#footer_container ul.community li.foot_facebook a, #footer_container ul.community li.foot_rss a {
    	background-image:url(../images/icons/mainicons_sprite.png);background-repeat: no-repeat;
	}	


/* header_container */
#header_container {
   	height:150px;
	width:980px;
	margin:0 auto;
	padding:0;
	position:relative;  
	text-align: left;  
}


/* = User Menu */
	#userMenu_container { height: 29px; }
	
		#userMenu_container ul {
			margin:0;
			padding:0;
			display:inline;
			float:right;
			list-style-type:none;
		}

			#userMenu_container ul li{
				margin:0;
				padding:0;
				display:inline;
				float:left;			
			}
			
				#userMenu_container ul li a {
					margin:6px 0 0 0;
					padding:0px 3px 10px 3px;
					height:15px;
					line-height:15px;
					display:block;
					float:left;
					color:#fff;
					text-decoration:none;
					font-weight:normal;
				}
				
				#userMenu_container ul li span {
					margin:6px 0 0 0;
					padding:0px 3px 10px 3px;
					height:15px;
					line-height:15px;
					display:block;
					float:left;
					color:#fff;
				}
				
				#userMenu_container ul li a:hover {
					text-decoration:underline;
				}

				#userMenu_container ul li.help a {
					background-position: 0px -16px;
				    width:14px;
					height: 0px;
                    padding: 13px 0 0 0;
					overflow:hidden;
                    display: block;
                    margin: 8px 0 0 3px;
				}							


/* = Header Image container */
	#headerImage_container { width: 980px; height: 90px; }

		/* = image container */	
		#headerImage_container .logo_container {
			background:url(../images/wugly_logo.png) no-repeat;
			color: #fff;				
			width: 245px;
			height: 90px;
			float: left;
			margin: 0px 0px 0px 10px;
		}	

        #headerImage_container .logo_container a.wuglyLink { color: #fff; text-decoration: none; }
        
			#headerImage_container .logo_container span.siteName {
				font-family: 'ArialRoundedMTBoldRegular', Arial, sans-serif;
				font-size: 3em;
				margin: 9px 0px 0px 80px;
                color: #fff;
                display: block;
			}
			
			#headerImage_container .logo_container span {
				font-family: Arial, sans-serif;
				font-size: 1em;
				font-weight: bold;
				margin: 25px 0px 0px 80px;				
			}


        /* = site stats */
        .siteStats {
            position: absolute; top:0px;
            margin: 7px 0px 0px 0px;
        }

            .siteStats span {
                color: #fff;
            }


		/* = search container */		
		#headerImage_container .search_container {
			background-position: 0 0;
			position: absolute; top:47px; left:270px;
			width: 703px;
			height: 48px;
		}
		
		#headerImage_container .search_container form#searchForm { margin:0; padding:0; height:48px; }
			
			#headerImage_container .search_container form#searchForm p { margin:0; padding:0; }
			
				#headerImage_container .search_container #SF1,
				#headerImage_container .search_container #SF2 {
					background-position: 0px -48px;
					display: block;
					width:300px;
					height: 26px;													
				}
				
				#headerImage_container .search_container #SF1 { position: absolute; top:11px; left:10px; }
				#headerImage_container .search_container #SF2{ position: absolute; top:11px; left:315px; }
				
				#headerImage_container .search_container #SF1 input.searchField,
				#headerImage_container .search_container #SF2 input.searchField {
					background-color: transparent;
					width:290px;
					height: 14px;
					font-size:12px;
					margin: 6px 5px 2px 5px;
					font-family:Arial, Helvetica, sans-serif;
					vertical-align:top;
					border:none;
				}
					
				
                #headerImage_container .search_container #SF1 input.searchField.greyTxt {
                    background-color: transparent;
                    background-position: -449px -48px;
					color:#888;
                    padding-left: 70px;
                }
				#headerImage_container .search_container #SF2 input.searchField.greyTxt {
                    background-color: transparent;
                    background-position: -449px -62px;
					color:#888;
                    padding-left: 38px;
				}
					
				#headerImage_container .search_container .searchButton {
                    background-color: transparent;					
                    background-position: -300px -48px;
					position: absolute; top:11px; left:620px;						
					text-align:center;
					border:none;
					width:72px;
					height: 26px;
					font-weight:bold;
					text-decoration:none;
					color:#FFF;
					font-size:12px;
					font-family:Arial, Helvetica, sans-serif;
					vertical-align:middle;
					padding:3px 0 5px 0;
                    cursor: pointer;
				}
			
				#headerImage_container .search_container .searchButton:hover {
                    background-color: transparent;
                    background-position: -372px -48px;
				}			


/* = Main Menu */
	#mainMenu_container { height:22px; width:980px; padding: 9px 0px 0px 0px; }

		#mainMenu_container ul {
			height:21px;
			width:auto;
			margin:0;
			padding:0;
			list-style-type:none;
			display:block;
		}
	
			#mainMenu_container ul li { height:21px; float:left; display:block; }
		
			#mainMenu_container ul li.inactiveMenu {
                background-position: 0px 0px;
				height:17px;
				width:120px;
				text-align:center;
				padding:4px 10px 0 10px;
				text-decoration:none;
				position:relative;
				color:#999;
				font-weight:normal;
				margin:0;
				display:block;
				float:left;
				border-bottom:1px solid #D9D9D9;
			}
		

				#mainMenu_container ul li a {
                    background-position: 0px 0px;
					height:17px;
					width:120px;
					text-align:center;
					padding:4px 10px 0 10px;
					text-decoration:none;
					position:relative;
					color:#555;
					font-weight:bold;
					margin:0;
					display:block;
					float:left;
					border-bottom:1px solid #D9D9D9;
				}
			
                #mainMenu_container ul li a:hover { background-position:0px -22px; color:#444; }
					
				#mainMenu_container ul li a#activeMain {
                    background-position:0px -44px;
					height:17px;
					width:120px;
					text-align:center;
					padding:4px 10px 0 10px;
					text-decoration:none;
					position:relative;
					color:#006b93;
					font-weight:bold;
					display:block;
					margin:0;
					float:left;
					border-bottom:1px solid #FFF;
				}


/* mainContent container */
#mainContent_container {
	position:relative;
	width:980px;
	margin:0 auto;
	text-align:left;
	background: url(../images/maincontent_bg.png) #fff repeat-y;
}


	/* footer_container */
	#footer_container {
		background-position: 0px -115px;
		text-align: center;
	    clear: both;
        width: 980px;
		height: 60px;
	    border-top: solid 20px  #fff;
	    border-bottom: solid 10px  #fff;		
    }
	
		#footer_container span.center {
			width:980px;
			height:auto;
			float:left;
			font-weight: bold;
			margin: 10px 0px 0px 0px;
		}

		#footer_container a:link, #footer_container a:visited { color:#666; text-decoration:underline; }
		#footer_container a:hover {	text-decoration:none; }

			#footer_container span.center .partners { display:block; margin-top:6px; }
				#footer_container span.center .partners a { font-weight:normal; }
				
		#footer_container ul.community { margin:0; padding:0; list-style-type:none; }

			#footer_container ul.community li {
				margin-right: 9px;
				padding:0;
				display:block;
				float:right;
				width:16px;
				height:16px;
			}

				#footer_container ul.community li a {
					display:block;
					float:left;
					width:16px;
					height:0;
					padding-top:16px;
					overflow:hidden;
				}

				#footer_container ul.community li.foot_hyves a { background-position: 0px 0px;margin-top: -23px;}
                #footer_container ul.community li.foot_facebook a { background-position: -16px 0px;margin-top: -23px;}
				#footer_container ul.community li.foot_twitter a { background-position: -32px 0px;margin-top: -23px;}
				#footer_container ul.community li.foot_rss a { background-position: -46px 0px; }