/**
 * Stylesheet for ikkanhet.be
 * 
 * @media	screen, projection
 * @copyright	Ik Kan Het <http://www.ikkanhet.be>
 * @author	Tijs Verkoyen <ikkanhet@verkoyen.eu>
 */

/** Reset */
body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

/** General */
body { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; color: #000; background: #FFF; }

/** Typography and text styles */
p { padding: 0 0 12px 0; }
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: 700; }
small { font-size: 11px; }
label { font-weight: 700; }

/** Headings */
h1 { font-size: 22px; padding: 0 0 12px 0; }
h2 { font-size: 17px; padding: 0 0 12px 0; }
h3 { font-size: 14px; padding: 0 0 12px 0; }
h4 { font-size: 12px; padding: 0 0 12px 0; }

/** Links */
a { border-bottom: 1px solid #666; text-decoration: none; }
a:link, a:active, a:visited { color: #E73636; border-color: #899ACC; }
a:hover { color: #333; border-color: #333; }
.button a { border: 1px solid #CCC; color: #333; padding: 5px; margin: 5px; background-color: #F2F2F2; font-weight: normal; }
.button a:hover { border: 1px solid #FFF; }
a.inverse:link, a.inverse:active, a.inverse:visited { color: #000; border: none; }
a.inverse:hover { color: #E73636; border: none; }

/* .content defaults */
.content ul { list-style: disc; padding: 0 0 12px 24px; }
.content ol { list-style-type: decimal; padding: 0 0 12px 24px; }
.content dl { padding: 0 0 12px 24px; }
.content ul ul, .content ul ol, .content ol ul, .content ol ol { padding-bottom: 0; }
.content code { font-family: Monaco, "Courier New", monospace; }
.content pre { font-size: 12px; line-height: 18px; background: #F5F5F5; margin: 0 0 12px 0; padding: 10px; }
.content blockquote,
.content q { font-style: italic; color: #666; }
.content blockquote { padding: 0 10px;  padding: 12px 0; }
.content cite, .content em { font-style: italic; }
.content table { border-top: 1px solid #000; border-left: 1px solid #000; }
.content td, .content th { border-right: 1px solid #000; border-bottom: 1px solid #000; font-size: 11px;  padding: 4px; }
.content th { font-weight: 700; }

/** Page structure and layout*/
body { background-image: url(../images/home_container_bg.gif); background-position: bottom left; background-repeat: repeat-x; }

#container { width: 960px; margin: 0 auto; }

	/* Header */
	#header { margin: 10px 0 10px 0; }
	#header h1 { float: left; margin-right: 20px; }
		#header h1 a { display: block; height: 90px; width: 326px; background-image: url(../images/header_h1_bg.gif); background-position: top left; background-repeat: no-repeat; border: none; }
			#header h1 a span { display: none; }

	/** User */
	#user { padding: 0 20px 0 0; text-align: right; }
		#user #userForm { display: none; position: absolute; top: 10px; right: 50px; height: 25px; padding: 5px; border: 1px solid #E73636; background-image: url(../images/user_form_bg.jpg); background-position: top left; background-repeat: repeat-x; -moz-border-radius: 4px; }	
		#user #userForm p { padding: 0; margin: 0; }
		#user #userForm label { margin: 0 5px 0 0; }
		#user #userForm input { margin: 0 10px 0 0; }

	/** Navigation */
	#navigation ul { margin: 7px 0 0 30px; }
	#navigation ul li { float: left; margin: 10px 5px; font-size: 20px; }
	#navigation ul li a { border: none; }
	#navigation ul li.selected a { font-weight: 900; color: #333; border-bottom: 1px solid #333; }

	#tabs { border-bottom: 1px solid #CCC; padding: 0 0 0 20px; }
		#tabs li { float: left; padding: 5px; margin: 0 0 0 10px; border: 1px solid #CCC; border-bottom: none; }
		#tabs li.selected { font-weight: 900 }
		

	/** Content */
	#content { float: left; padding: 0 0 0 20px; margin: 0 0 20px 0; }
	#content .columnLeft { float: left; width: 650px; }
	#content .columnRight { float: left; padding: 0 0 0 20px; margin: 0 0 0 20px; width: 200px; }
	#content .width50 { width: 300px; padding: 10px; }
	#content .borderLeft { border-left: 1px solid #CCC; padding-left: 10px; }
	
	#content .important { font-weight: 900; background-color: #FFF; padding: 10px; margin: 0 0 20px 0; border: 1px solid #CCC; }
		
	/** Goals */
	#goals { margin: 10px 0 0 0; height: 151px; }
		#goals ul li { float: left; margin: 1px 1px 0 2px; background-image: url(../images/goals_item_bg.jpg); background-position: top left; background-repeat: no-repeat; }
			#goals ul li a { display: block; width: 157px; height: 149px; border: none; }
			#goals ul li span { display: none; }
			#goals ul li.category1 { background-image: url(../images/goals_item_1.jpg); }
			#goals ul li.category2 { background-image: url(../images/goals_item_2.jpg); }
			#goals ul li.category3 { background-image: url(../images/goals_item_3.jpg); }
			#goals ul li.category4 { background-image: url(../images/goals_item_4.jpg); }
			#goals ul li.category5 { background-image: url(../images/goals_item_5.jpg); }
			#goals ul li.category6 { background-image: url(../images/goals_item_6.jpg); }
			

	/* Footer */
	#footer { text-align: center; margin: 20px 0 20px 0; }
		#footer a:link, #footer a:active, #footer a:visited { color: #333; border: none; }
		#footer a:hover { color: #E73636; }		

/** Home */
	#home #content { float: none; background-image: url(../images/home_content_bg.gif); background-position: 31px top; background-repeat: no-repeat; width: auto; border: none; }

#home #intro { float: right; margin: 10px 0 20px 0; padding: 35px 50px 60px; width: 475px; height: 259px; overflow: hidden; background-image: url(../images/intro_bg.jpg); background-position: bottom right; background-repeat: no-repeat; }
	#home #intro h1 a { display: block; height: 62px; background-image: url(../images/logo_bg.gif); background-position: top center; background-repeat: no-repeat; border: none; }
		#home #intro h1 a span { display: none; }
	#home #intro p { font-size: 14px; padding: 0 0 10px 0; }
	#home #intro p.extendedBottomMargin { margin-bottom: 20px; }
	#home #intro label { width: auto !important; } 
	#home #goal { font-size: 20px; width: 250px; }
	#home #goalWrapper { width: 275px; }
	#home #goalWrapper small { font-size: 11px; }
	#home #goals ul li { margin-top: 2px; }
#home #navigation { float: right; width: 150px; padding: 10px; border-left: 1px solid #999; }
	#home #navigation ul { margin: 0; padding: 0 0 0 24px; }
	#home #navigation ul li { float: none; font-size: 14px; margin: 0; }
	#home #navigation ul li a { border: none; }
	#home #navigation ul li.selected a { font-weight: 900; color: #333; border-bottom: 1px solid #333; }

/** Goals */
ul.goals li {
	float: left;
	margin: 10px;
	padding: 5px;
	width: 250px;
	border: 1px solid #CCC;
}

ul.goals li.category { min-height: 120px; }

p.meta { color: #333; margin-bottom: 15px; }

/** Profiles */
ul.float li {
	float: left;
	margin: 4px;
	padding: 4px;
	width: 14px;
	height: 14px;
	text-align: center;
	border: 1px solid #CCC;
}
	ul.float li a { display: block; border: none; width: 14px; height: 14px; }

ul.friends-list li {
	float: left;
	margin: 10px;
	padding: 5px;
	width: 200px;
	border: 1px solid #CCC;
}
	ul.friends-list .avatar { width: 50px; margin-right: 15px; }
	ul.friends-list .avatar a { border: none; }

.avatarWrapper64x64 { width: 64px; height: 64px; margin: 0 0 20px 140px; }

#goalsOverview ul li {
	float: left;
	margin: 10px;
	padding: 5px;
	width: 250px;
	border: 1px solid #CCC;
}

#searchedTerm { font-size: 16px; }
		
/** Form style */
label, p.labelForList { float: left; width: 140px; }
p.labelForList, p.longLabelForList { font-weight: 700; padding: 0; }
label.inline { width: auto; float: none; }
input, textarea, select, button { font-family: Arial, sans-serif; }
textarea { margin: 0 20px 0 0; padding: 2px; }
input.input-submit { border: 1px solid #CCC; padding: 3px; }
input.input-submit:hover { border: 1px solid #FFF; }
input.input-text { }
input:focus, textarea:focus { }
.form-error { color: red; font-weight: 900; }
fieldset { border: 1px solid #CCC; margin: 0 0 20px 0; padding: 10px; }
legend { margin: 0 0 0 5px; padding: 3px; font-weight: 900px; color: #CCC; }
form.formWithLists ul { margin-left: 140px; padding: 0 0 12px; }
form.formWithLists input#title { width: 400px; }

/** General classes */
.hidden { display: none; }
.block { display: block; }
.noPadding { padding: 0 !important; }
.noMargin { margin: 0 !important; }
.marginLeft { margin-left: 10px; }
.floatLeft { float: left; }
.floatRight { float: right; }
.noBorder { border: none; }
.mute { font-size: 11px; color: #999; }

/** Image classes */
img.alignLeft { float: left; padding: 0 10px 10px 0; }
img.alignRight { float: right; padding: 0 0 10px 10px; }

/** Pagination */
.paginationWrap { width: 100%; overflow: hidden; }
.pagination { float: left; position: relative; left: 50%; }
.pagination ul { padding: 18px 0; z-index: 2; overflow: hidden; position: relative; left: -50%; }
.pagination li { float: left; list-style: none; margin: 0 5px 0 0; text-decoration: none; padding: 0; line-height: 15px; font-size: 12px; text-align: center; }
.pagination li span { float: left; display: block; padding: 4px 5px; color: #ccc; min-width: 12px; }
.pagination li.currentpage span { font-weight: 700; color: black; }
.pagination li.selected span { padding: 4px 5px; font-weight: 700; color: black; }
.pagination li a:link, .pagination li a:visited { float: left; display: block; padding: 3px 4px; border: 1px solid #ddd; text-decoration: none; min-width: 12px; }
li.ellipsis { margin: 0; }
li.ellipsis span { color: black; }
.pagination li a:hover, .pagination li a:active { background: #eee; border: 1px solid #bbb; color: black; }
.nextPage, .previousPage { font-size: 11px !important; }
.pagination li.nextPage { margin-left: 10px; }
.pagination li.previousPage { margin-right: 15px; }


/*
	Modal box
*/

#overlay {
	position: fixed;
	_position: absolute;
	width: 100%;
	background-color: #FFF;
	z-index: 1240;

	/* Inc opacity */
	opacity: .4; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=40); /* IE lt 8 */
	-ms-filter: "alpha(opacity=40)"; /* IE 8 */
	-khtml-opacity: .4; /* Safari 1.x */
	-moz-opacity: .4; /* FF lt 1.5, Netscape */

}

.modal-box,
.humanizedBox {
	z-index: 3000;
	position: fixed;
	_position: absolute;
	top: 25%;
	left: 50%;
	margin-left: -230px;
	width: 460px;
}

.modal-box-inner, .humanizedBoxInner { position: relative; padding: 20px; background-color: #FFF; border: 1px solid #333; }

.modal-box .modal-box-close:link,
.modal-box .modal-box-close:visited {
	position: absolute;
	top: 11px;
	right: 11px;
	background: url(../images/closebutton.png) no-repeat;
	width: 16px;
	height: 16px;
	display: block;
	text-indent: -9000px;
	overflow: hidden;
	border: none;
}

.modal-box .modal-box-close:hover,
.modal-box .modal-box-close:active {
	background: url(../images/closebutton.png) no-repeat 0 -16px;
}

.humanizedBoxInner h2 {
	text-align: center;
	padding: 40px 0;
	color: #008000;
}


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