/* This file contains the style of the pages in CSS 3 */

/* html */
html {
	background-color: #eee;		/* a simple light gray background */
}

/* body */
body {
	width: 1200px;			/* width is the whole window */
	height: 100%;			/* height is the whole window (if necessary) */
	margin-top: 20px;
	margin-bottom: 20px;		/* a little margin to the top ant bottom */
	margin-left: auto;
	margin-right: auto;		/* auto-margin for left and right in order
					   to center the body element (everything) */
	padding: 0;			/* no padding */
	background-color: #ccc;		/* a little darker gray background */
	border-radius: 10px;		/* a curve on the edges of the body */
	box-shadow: 0px 0px 20px #555;	/* shadow to make the body more visible */
}

/* header image style */
#header_image {
	width: 1200px;			/* expands the whole header */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;	/* the image follows the curve of the body */
}

/* navigation bar, general */
nav {
	position: relative;		/* position set relative to containing object (body) */
	margin-top: -5px;		/* small negative margin to attach navigation bar
					   right to the header image */
	width: 100%;			/* width set to the 100% of the containing object (body) */
	background: #39f;		/* background color */
	float: left;			/* send objects to the left (to avoid empty spaces) */
}
/* navigation bar list */
nav ul {
	margin: 0px;			/* no margin */
	padding: 0px;			/* no padding */
	list-style: none;		/* clear list bullets */
}
/* navigation bar list item */
nav li {
	float: left;			/* buttons will float to left */
}
/* navigation bar link behavior (normal, visited, hover, action) */
nav li a,
nav li a:visited {
	display: block;			/* put list items in a block display */
	width: auto;			/* width of items is is set to their content's width */
	padding-left: 40px;
	padding-right: 40px;		/* padding on the left and right is 30px in
					   order to undraw menu buttons */
	padding-top: 5px;
	padding-bottom: 5px;		/* the same small padding on the top and bottom */
	text-decoration: none;		/* clear standard link-style */
	color: white;			/* text color */
	background-color: #39f;		/* background color */
	font-family: "Arial";	/* font type */
	font-weight: bold;		/* bold text */
	font-size: 15px;		/* font size */
}
nav li a:hover,
nav li a:focus {
	color: #39f;			/* change text color */
	background-color: #eee;		/* change background color */
}
nav li a:active {
	color: black;			/* change text color on click */
}
nav li ul {
	position: absolute;		/* absolute position for the dropdown menu */
}
nav li ul li {
	float: none;			/* no floating */
	display: none;			/* normally, do not display the list items */
}
nav li:hover ul li,
nav li.sfhover ul li {
	display: block;			/* if hovered, display as block */
}

/* general style of the real content */
#real_content {
	background-color: white;	/* background color */
	min-height: 750px;		/* minimum height of the page */
	padding-bottom: 20px;
}
/* headers, paragraphs */
#real_content h1 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Arial';
	font-size: 20px;
	padding-top: 50px;
}
#real_content h2 {
	position: relative;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Arial';
	font-size: 18px;
}
#real_content p {
	position: relative;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	font-family: 'Arial';
	font-size: 16px;
	line-height: 25px;
	text-align: justify;
}
/* links */
#real_content a,
#real_content a:visited {
	color: blue;
	text-decoration: none;
}
#real_content a:hover,
#real_content a:focus {
	color: gray;
}
#real_content hr {
	width: 80%;
	height: 2px;
	background-color: #39f;
	border: 1px solid #39f;
	box-shadow: 0px 2px 2px gray;
	clear: both;
}
/* ordered list */
#real_content ol {
	position: relative;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding-bottom: 20px;
	font-family: 'Arial';
	font-size: 15px;
}
/* table */
#real_content table {
	position: relative;
	width: 20%;
	margin-left: auto;
	margin-right: auto;
	line-height: 30px;
	border-collapse: separate;
	border: 2px solid black;
}
#real_content table thead th{
	color: black;
	border: 1px solid #39f;
	background-color: #39f;
	font-size: 18px;
}
#real_content table tbody tr {
	background-color: white;
}
#real_content table tbody td {
	text-align: center;
	border: 2px solid #ccc;
	color: black;
	font-size: 16px;
}

/* footer */
footer {
	padding: 20px;			/* some padding */
	color: #888;			/* a light colored text */
	text-shadow: 1px 1px 2px white;	/* very tiny shadow to make the feeling of a graved text */
	text-align: center;		/* align text to the center */
	font-family: "Courier New";	/* typewriter font */
	font-size: 20px;		/* font size */
}