@CHARSET "UTF-8";

/* anyone trying to figure out what happened here: it first worked great -
   but only in standard compliant browsers... 
   so I had to change the whole design again... */

/* no IE - more fun */
/*
.table {
	display: table;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
}
*/

html, body {
	font-family: sans-serif;
	/* no IE - more fun: */
	font-size: 15px;
}

body {
	color: black;
	background: url("media/bg_app2.jpeg") no-repeat top left #a4b8ca; /*  fixed */
}


h1, h2 {
	margin-left: 1ex;
	display: block;
	border-bottom: thin dotted gray;
}

h1 {
	font-size: 1.2em;
}

h2 {
	font-size: 1em;
}

#picpreview {
	position: absolute;
	visibility: hidden;
	color: black;
	background: url("media/darr.png") no-repeat center bottom white;
	border: medium solid orangered;
	/*left: 50%;
	margin-left: -200px;*/
	text-align: center;
	width: 500px;
	height: 500px;
	top: 0px;
	z-index: 2;
}

#picpreview .header, #picpreview .footer{
	padding: 0em 2em;	
	text-align: right;
}

#picpreview img {
	margin: 1ex;
	max-height: 450px;
	max-width: 450px;
}

#contentpane {
	position: relative;
	margin-top: 2%;
	width: 800px;
	left: 50%;
	margin-left: -400px;
	border: thin outset gray;
	margin-bottom: 2%;
	color: inherit;
	background-color: white;
}

#blueheader {
	background: center center no-repeat url('media/header8.png');
	width: 800px;
	height: 150px;
}

.header {
	text-align: center;
	letter-spacing: 0.1ex;
	font-weight: bold;
}

#textheader {
	color: black;
	border-collapse: collapse;
	background-color: white;
	background-image: url("media/menu_bg_grad_t.png");
	background-repeat: repeat-x;
	background-position: top;
	padding: 1ex;
}

.menu a {
	color: DodgerBlue;
	background-color: transparent;
	text-decoration: none;
}

.menu .active a {
	color: white;
	background-color: DodgerBlue;
}

.menu a:HOVER {
	color: white;
	background-color: DodgerBlue;
	text-decoration: underline;
}

.header .menu {
	/* no IE - more fun */
	/* display: table; */
	width: 100%;
	color: inherit; 
	border-collapse: collapse;
	background-color: white;
	background-image: url("media/menu_bg_grad.png");
	background-repeat: repeat-x;
	background-position: bottom;
}

.menu ul {
	/* no IE - more fun */
	/* display: table-row; */
}

.menu ul li, .menu td {
	/* no IE - more fun */
	/* display: table-cell; */ 
	border-top: thin inset LightsteelBlue;
	border-left: thin inset CornflowerBlue;
	border-right: thin inset SteelBlue;
	border-bottom: thin inset CornflowerBlue;
}

/* no IE - more fun*/
.menu ul li a, .menu td a {
	display: block;
	padding: 0.5em;
}

.bulletin {
	overflow: hidden;
	padding: 1ex;
	margin: 1em 0em;
}

.bulletintop {
	/* no IE - more fun */
	vertical-align: bottom;
	width: 100%;
	/* display: table-row; */
}

.bulletin .date {
	/* no IE - more fun */
	white-space: nowrap;
	vertical-align: bottom;
	/* display: table-cell; */
	font-size: smaller;
	padding-right: 2ex;
}

.bulletin .headline {
	/* no IE - more fun */
	vertical-align: bottom;
	margin: 0px;
	/* display: table-cell; */
	font-weight: bold;
	width: 100%;
}

.bulletin .navigation {
	/* no IE - more fun */
	overflow: visible;
	white-space: nowrap;
	vertical-align: bottom;
	/* display: table-cell; */
	font-size: smaller;
	text-align: right;
	vertical-align: bottom;
	white-space: nowrap;
}

.bulletin .content {
	border: thin solid silver;
	padding: 1ex;
	overflow: hidden;
	font-family: monospace;
	text-align: justify;
	/*height: 20em;
	max-height: 20em;*/

	/* no IE - more fun: */
	clear: left;
}

/*
.bulletin .content:HOVER {
	/* CSS2 
	overflow: scroll;
	/* CSS3 override 
	overflow-x: auto;
	overflow-y: auto;
}
*/

.bulletin .attachment {
	/* CSS2 */
	overflow: scroll;
	/* CSS3 override */
	overflow-x: auto;
	overflow-y: hidden;

	border-collapse: separate;
	border-spacing: 0.25ex;
	color: inherit;
	background: url("media/clip.png") left center no-repeat gray;
	padding-left: 50px;
}

.bulletin .attachment ol {
	/* no IE - more fun */
	/* display: table-row; */
}

/* no IE - more fun */
.bulletin .attachment li, .bulletin .attachment td {
	/* no IE - more fun */
	padding-left: 0px;
	/* display: table-cell; */
	border: thin solid white;
}

/* no IE - more fun */
.bulletin .attachment li:HOVER, .bulletin .attachment td:HOVER {
	border-color: orangered;
}



.bulletin .attachment img {
	border: none;
}

/*
.picture  {
	display: table-row;
}

.picture img {
	border: none;
}


.picture a, .picture:HOVER .picdesc { 
	display: table-cell;
	vertical-align: top;
	text-decoration: none;
}
*/

/*
.picture:HOVER .picdesc {
	display: table-cell;
}
*/

/*
.picture .picdesc {
	display: none;
	color: black;
	background: url("media/menu_bg_grad_l_arr.png") white left repeat-y;
	padding-left: 20px;
	font-size: smaller;
	overflow: hidden;
}
*/

.calendar {
	/* no IE - more fun */

	/* display: table;
	table-layout: fixed; */
	border-collapse: separate;
	border-spacing: 0ex;
	font-size: 75%;
	border: thin outset SlateGray;
}

.calendar .header {
	/* no IE - more fun */
	/* display: table-header-group; */
}

.calendar .caption {
	/* no IE - more fun */
	/* display: table-caption; */
	text-align: center;
	font-weight: bold;
}

.calendar .week {
	/* no IE - more fun */
	/* display: table-row; */
}

.calendar .day, .calendar .saturday, .calendar .holiday, .calendar .noday {
	/* no IE - more fun */
	/* display: table-cell; */
	text-align: right;
	color: black;
	background-color: Lavender;
	border-left: thin solid CornflowerBlue;
	border-right: thin solid SteelBlue;
	padding: 0.25ex;
}

.calendar .saturday, .calendar .holiday{
	color: darkred;
	background-color: white;
}

.calendar .holiday {
	font-weight: bold;
}

.calendar .header * {
	border: thin solid gray;
	color: inherit;
	background-color: Khaki;
}

.calendar .noday {
	font-size: smaller;
	color: white;
	background-color: DarkGray;
}

.calendar .occupied {
	color: white;
	font-weight: bold;
	background-color: SteelBlue;
}

/* no IE - more fun: */
.dates {
	width: 100%;
}

.dates .cell {
	padding: 1ex;
}


#list {
	/* no IE - more fun */
	width: 100%;
}

#list ul {
	list-style-type: none;
	padding: 0em;
	margin: 0ex;
	border: 1px solid gray;
	height: 10em;
	color: black;
	/* http://flickr.com/people/malabooboo/ */
	background: url("media/calendar.png") no-repeat bottom right #ffebb0;
	/* CSS2 */
	overflow: scroll;
	/* CSS3 override */ 
	overflow-x: auto;
	overflow-y: auto;
}

#list .date {
	font-weight: bold;
	color: Navy;
	background-color: transparent;
	margin-top: 0.5ex;
}

.warning {
	color: red;
	text-decoration: underline;
	background-color: transparent;
}

img.contentimage {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}