/* -------------------------------------------------------------------

	Boondoggle - Hans Dreesen
	Vlaamse Overheid
	
	1. Structure
	2. Header
	3. Navigation
	4. Column01
	5. Column02
	6. Column03
	7. Footer
	8. Miscellaneous
	9. Facebook friends page

	always include reset.css, it will reset your style
	for all browers, it includes the clearfix
	
	typography specs must be specified in typography.css
	form specs must be specified in forms.css
	
	ID en class naming => use capitals for seperation: navHome

------------------------------------------------------------------- */



/* ----- imports -------------------------------------------------- */

@import url(typography.css);
@import url(forms.css);



/* -------------------------------------------------------------------------------------  1. Structure -------------------------------------------- */

body		{ background: url(/img/css_backgrounds/bg-body.jpg); }
#wrapper	{  }
#container	{ background: url(/img/css_backgrounds/bg-container.jpg) repeat-y; margin: 0 auto; width: 770px; }

#header		{ margin: 0; }
#navigation	{  }
#content	{ background: url(/img/general/footer.jpg) left bottom no-repeat; padding: 0 20px 150px; }
#column01	{  }
#column02	{  }
#column03	{  }
#footer		{  }



/* -------------------------------------------------------------------------------------  2. Header ----------------------------------------------- */

#header #linkHome { background-image: url(/img/general/header.jpg); height: 260px; }



/* -------------------------------------------------------------------------------------  3. Navigation ------------------------------------------- */

/* item description */
#navigation #itemName {  }



/* -------------------------------------------------------------------------------------  4. Column01 --------------------------------------------- */

/* item description */
#column01 #itemName {  }



/* -------------------------------------------------------------------------------------  5. Column02 --------------------------------------------- */

/* item description */
#column02 #itemName {  }



/* -------------------------------------------------------------------------------------  6. Column03 --------------------------------------------- */

/* item description */
#column03 #itemName {  }



/* -------------------------------------------------------------------------------------  7. Footer ----------------------------------------------- */

/* item description */
#footer #itemName {  }



/* ------------------------------------------------------------------------------------- 8. Miscellaneous ---------------------------------------- */

object, embed { margin: 0 0 1.5em; }
#inputEmbed { font-family: Arial, Helvetica, sans-serif; font-size: 10px; width: 200px; }
#banner, #banner object, #banner embed { margin-bottom: 0; }

.imgReplaced { background-repeat: no-repeat; display: block; outline: none; text-indent: -9999px; }

.left	{ float: left; }
.right	{ float: right; }
.clear	{ clear: both; }
.hide	{ display: none; }
.first	{ margin-top: 0; padding-top: 0; }
.last	{ margin-bottom: 0; padding-bottom: 0; }

hr { background: #CCC; border: 0; color: #CCC; height: 1px; margin-top: 2.5em; }

/* flash alternative styles */
.block { background: #efefef; border: 4px solid #dfdfdf; clear: both; margin: 25px 0; padding: 25px; }
ul#alternativeNav { border-bottom: 2px solid #333; border-top: 2px solid #333; list-style: none; padding: 10px 0 10px 5px; margin: 0 0 20px 0; }
ul#alternativeNav li { float: left; margin: 0 10px 0 0; }

/* clearfix */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.clearfix { display: inline-block; }



/* -------------------------------------------------------------------------------------  9. Facebook friends page -------------------------------- */

#facebookFriendsPage #container { background: #D2D9E6; border: 1px solid #AAA; margin: 10px; width: 648px; }
#facebookFriendsPage #content { background: #FFF; border: 1px solid #8598C0; margin: 10px; padding: 10px; }
#facebookFriendsPage h1 { border-bottom: 1px solid #E0E0E0; color: #222; font-size: 1.4em; font-weight: bold; margin: 0; padding: 0 0 10px 0; }
#facebookFriendsPage #search { margin: 0; padding: 11px 0 17px; }
#facebookFriendsPage label { padding: 3px 7px 0 5px; }

#facebookFriendsPage #friends { border: 1px solid #C1C1C1; list-style-type: none; height: 490px; margin: 0; overflow: auto; padding: 0; }
#facebookFriendsPage #friends li { cursor: pointer; float: left; height: 56px; margin: 3px; overflow: hidden; padding: 4px; width: 126px; }
#facebookFriendsPage #friends .imgHolder {
	background-color: #FFFFFF;
	border:	1px solid #E0E0E0;
	display: block;
	float: left;
	height: 50px;
	margin-right: 5px;
	padding: 2px;
	position: relative;
	width: 50px;
}
#facebookFriendsPage #friends .name {
	color: #222;
	display: block;
	float: left;
	margin-top: 2px;
	width: 65px;
}
#facebookFriendsPage #friends .network { color: #666; font-size: 0.8em; margin-top: 3px; }

#facebookFriendsPage #friends li:hover { background: url(/img/css_backgrounds/bg-multi-friend-selector-hover.gif) no-repeat; }
#facebookFriendsPage #friends li:hover .imgHolder { border-color: #205C98; }
#facebookFriendsPage #friends li:hover .name { color: #000; }

#facebookFriendsPage #friends li.selected { background: url(/img/css_backgrounds/bg-multi-friend-selector.gif) no-repeat; }
#facebookFriendsPage #friends li.selected .name { color: #E7EBF5; }
#facebookFriendsPage #friends li.selected .network { color: #C3CDDF; }
#facebookFriendsPage #friends li.selected .imgHolder { background-color: #8497C0; border-color: #B1C1E1; position: relative; }
#facebookFriendsPage #friends li.selected .check { bottom: 2px; left: 2px; position: absolute; }

#facebookFriendsPage #buttons { margin: 10px 0 0; }
#facebookFriendsPage #buttons input { background: #3B5998 url(/img/icons/ico-email.gif) 8px 6px no-repeat; padding: 3px 6px 3px 26px; }
#facebookFriendsPage #buttons #btnCancel {
	background: #F0F0F0;
	border-color: #E7E7E7 #666666 #666666 #E7E7E7;
	border-style: solid;
	border-width: 1px;
	font-size: 1em;
	margin-left: 5px;
	padding: 3px 15px 3px;
	text-align: center;
}