/**
 *	FragFrog.nl
 *
 *	Main stylesheet. All generic styles for the website fragfrog.nl and 
 *	subfolders.
**/


/*	No default margin / padding. */
* {
	margin:					0px;
	padding:				0px;
}


/**
 *	Body: should cover the entire page (hence 100% width and height) and
 *				use a cloudy top background image.
**/
body {
	width:							100%;
	height:							95%;
	background-color:		#457DB0;
	color:							white;
	background-image:		url('../images/background.jpg');
	background-repeat:	no-repeat;
	background-position: center top;
}


/*	Header, footer, etc. */
div.header {
	width: 							100%;
	height: 						25px;
	background-color:		#000025;
	border-bottom:			1px solid white;
	background:					url('../images/background-lines-opac.png');
	position: 					fixed;
	top: 								0px; 
	left: 							0px;
	z-index:						1;
}


div.footer {
	position:						fixed;
	left:								0px;
	bottom:							0px;
	width: 							100%;
	height: 						25px;
	border-top:					1px solid white;
	background:					url('../images/background-lines-opac.png');
}

a.topMenu {
	width:							180px;
	height:							50px;
	display:						block;
	float:							left;
	border-bottom:			1px solid #345D82;
	border-right:				1px solid #000;
	font-size:					25px;	
	text-align:					center;	
	color:							#2963a4;
	background-color: 	#F1F1F1;
	line-height: 				50px;
	margin-bottom:			10px;
	text-decoration:		none;
}


a.topMenu:hover {
	background-color:		#fff;
	color:							#17365D;
	cursor:							pointer;
}



#content {
	clear:							both;
	min-height:					500px;
	width:							820px;
	border-radius:			0px 0px 15px 15px;
	-moz-border-radius:	0px 0px 15px 15px;		
	border:							1px solid black;
	background-color:		#F6F6F6;
	margin: 						0px auto 10px auto;
	color:							#17365D;
	padding:						0px 30px 20px 30px;
	font-size:					12px;
	text-align:					justify;
	-moz-box-shadow: 		0px 0px 8px #555;
	-webkit-box-shadow: 0px 0px 8px #555;
	box-shadow: 				0px 0px 8px #555;	
}

#container {
	font-family:				Helvetica, arial, sans-serif;
	-moz-border-radius:	15px;	
	border-radius:			15px;
	border:							2px solid #345D82;
	background-image:		url('../images/background-lines-opac.png');	
	width:							904px;
	clear: 							both;
	margin:							50px auto 60px auto;
	-moz-box-shadow: 		0px 0px 26px #233E56;
	-webkit-box-shadow: 0px 0px 26px #233E56;
	box-shadow: 				0px 0px 26px #233E56;	
}


/**
 *	Actual page content (including content styling
 *	elements such as headers, links, etc.).
**/
h1 {
	width:							790px;
	margin-top:					20px;
	margin-bottom:			8px;
	padding-left: 			30px;
	color:							#17365D;
	border-bottom:			1px solid #4F81BD;
}


h2 {
	font-size:					14px;
	margin-left:				20px;
}


img.foto {
	float: 							right;
	padding: 						3px;
	width:							285px;
	margin: 						0px 0px 5px 10px;
	border:							2px solid #17365D;
	-moz-box-shadow: 		2px 3px 7px #999;
	-webkit-box-shadow: 2px 3px 7px #999;
	box-shadow: 				2px 3px 7px #999;
	border-radius:			3px;
	-moz-border-radius:	3px;
}

div.comment {
	-moz-box-shadow: 				2px 2px 6px #bbb;
	-webkit-box-shadow: 		2px 2px 6px #bbb;
	box-shadow: 						2px 2px 6px #bbb;
	-moz-border-radius:			15px;
	border-radius:					15px;
	border:									1px solid #aaa;
	background-color:				#cfcfcf;
	color:									black;
	padding:								20px;
	margin:									15px 10px 10px 0px;
	width:									450px;
	overflow: 							hidden;
	text-overflow: 					ellipsis;
}

textarea.comment {
	width:									390px;
	margin-left:						20px;
	height:									50px;
}

a {
	color:									#11d;
}

a:hover {
	color:									#4F81BD;
}