/* This is the style sheet for the ILC Rhein-Main web page. */
/* I tried to keep it as easy and nifty as possible, though */
/* I am no web designer. And no good at graphics either.    */

/* General styles for the body (that is the dark blue on the sides...) */
body {
	background: #001A38; 
	}

/* The header is the leading graphics with the ILC logo and the text */
div#header {
	position: absolute; 
	left: -400px; 
	width: 800px; 
	height: 100px; 
	margin-left: 50%;
   	/* background: transparent url(images/lyceum_top.gif) no-repeat; */
   	}

/* The menu on the left. See Eric Meyers website for the original. (http://meyerweb.com/eric/css/edge/popups/demo.html) */
div#selector {
	position: absolute; 
	top: 100px; 
	left: -400px; 
	margin-left: 50%; 
	width: 168px; 
	height: 587px; 
	padding-top: 5px;
   	font: 16px Verdana, sans-serif; 
   	background: #DDD;
   	}

/* ...the text blocks... */
div#selector a {
	display: block; 
	font-family: sans-serif; 
	font-size: 1em; 
	font-weight: bold; 
   	font-style: italic;
	text-align: center; 
   	text-decoration: none; 
   	margin-bottom: 1px;
   	padding-top: 5px; 
   	padding-bottom: 5px; 
   	padding-left: 10px; 
   	padding-right: 10px; 
   	border-right: 5px solid #DDD; 
   	border-left: 5px solid #DDD;
   	color: #001A38; 
   	background: #DDDDDD;
   	}

div#selector a:hover {
	background: #A0A0A0;
	}

/* ...the descriptions... */
div#selector a span {
	display: none;
	}

div#selector a:hover span {
   	position: absolute; 
   	top: 170px; 
	margin-top: 15px;
	margin-left: 20px;
	margin-right: 20px;
   	padding: 5px; 
   	border: 0px; 
	display: block;
	font-family: Verdana, sans-serif; 
	font-size: 10px; 
	font-weight: normal; 
   	font-style: normal;
	text-align: center; 
   	color: #001A38;
   	}

/* The content */
div#content {
	position: absolute; 
	top: 100px; 
	left: -234px; 
	width: 634px; 
	margin-left: 50%;
   	background: #EEE;
   	}

div#content p {
	font-family: Verdana, sans-serif; 
	font-size: 12px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
	}

div#content h2 {
	font-family: Arial, sans-serif; 
	font-size: 18px;
	font-variant: small-caps;
	font-weight: bold;
	color: #9D2A5C;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	}

div#content h3 {
	font-family: Arial, sans-serif; 
	font-size: 14px;
	font-variant: small-caps;
	color: #9D2A5C;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	}

div#content a {
	text-decoration: none;
	color: #001A68;
	}

div#content a:hover {
	background: #DDD;
	border-bottom: 1px dotted #001A68;
	}

div#content em {
	font-style: italic;
	}

div#content ul {
	margin-top: 20px;
	margin-bottom: 20px;
	}
	
div#content li {
	font-family: Verdana, sans-serif; 
	font-size: 12px;
	margin-left: 40px;
	margin-right: 40px;
	}

div#content .leitseite {
	margin-left: 87px;
	width: 460px; 
	height: 580px; 
	}

div#content .leitseite .kollage {
	display: block;
	position: relative;
	top: 50px;
	height: 480px; 
   	/* background: transparent url(images/lyceum_leitseite.jpg) no-repeat; */
	}

div#content .leitseite .bildunterschrift {
	position: relative;
	margin-top: 50px; 
	font-family: Arial, sans-serif;
	font-size: 10px;
	}

/* Satzungspunkte */
div#content .paragraph {
	border-top: 1px dashed #9D2A5C;
	margin-top: 10px; 
	margin-bottom: 5px;
	}
	
div#content .p_number {
	margin-bottom: 5px;
	}

div#content .p_content {
	margin-bottom: 15px;
	}

/* The different items in the schedule. */
div#content .programmpunkt {
	border-top: 1px dashed #9D2A5C;
	}
	
div#content .programmpunkt h3 {
	margin-top: 10px; 
	margin-bottom: 5px;
	}
	
div#content .programmpunkt .beschreibung {
	margin-bottom: 5px;
	}

div#content .programmpunkt .treffpunkt {
	margin-bottom: 15px;
	}

div#content .gaeste {
	margin-top: 30px;
	margin-bottom: 15px;
	text-align: center;
	font-style: italic;
	}

/* The NEXT and PREVIOUS links in the schedule */
div#content .programmnavi {
	position: relative;
	/* border-top: 1px dashed #9D2A5C; */
	font-family: Verdana, sans-serif; 
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
	}

div#content .programmnavi .previous {
	position: relative;
	margin-left: 100px;
	width: 100px;
	}

div#content .programmnavi .next {
	position: relative;
	margin-left: 234px;
	width: 100px;
	}
	
/* I incorporated the images and links for CSS and XHTML validation. It's not really a footer, but I simply have no imagination. */
div#footer {
	display: none; 
	position: absolute; 
	top: 340px; 
	left: -400px; 
	margin-left: 50%; 
	width: 166px; 
	height: 100px; 
	text-align: center; 
	vertical-align: bottom;
	}

div#footer img {
	border:0; 
	width:88px; 
	height:31px; 
	padding: 5px;
	}

div#footer a {
	text-decoration: none;
	}

/* THE END */