* { font-family: sans-serif; font-size: small; }
h1 { font-size: medium; }
h1 { padding: 0.3ex 0.3ex 0.6ex 0.3ex; color: white; }
h2 { font-size: medium; }
h3 { font-size: medium; }

body {
	margin-left: 30ex;
	background-image: url(../images/volleys-fade.jpg);
	background-repeat: no-repeat;
	background-position: 10px 50px;
}
#content { margin-left: 0.5ex; }

.about h1, .about_bg { background-color: #800; }	/* red */
.programme h1, .programme_bg { background-color: #040; }	/* green */
.trips h1, .trips_bg { background-color: #008; }	/* blue */
.archives h1, .archives_bg { background-color: #db3; }	/* yellow */
.links h1, .links_bg { background-color: black; }	/* black */
.contact h1, .contact_bg { background-color: white; color: black; }	/* white */

.about_border { border-color: #800; }
.programme_border { border-color: #040; }
.trips_border { border-color: #008; }
.archives_border { border-color: #db3; }
.links_border { border-color: #000; }
.contact_border { border-color: #ccc; }

#content { width: 76ex; min-height: 410px; }


/* walks programme */
.preserve_linebreaks {
    white-space: pre-line;
}

#event_edit_form {
    border: 0;
    width: 700px;
    border-spacing: 0.5ex 1em;
}
.label {
    width: 120px;
    font-weight: bold;
}
.explanatory {
    width: 320px;
    font-size: 90%;
    color: gray;
}
#event_edit_form textarea {
    width: 100%;
    height: 160px;
}
#event_edit_form textarea, #event_edit_form input {
    margin: 0;
    border: 1px solid black;
}
#event_edit_form label {
    display: block;
    margin: 1ex 0;
}
#event_edit_form label span {
    display: inline-block;
    width: 50px;
}

.error {
    padding: 7px;
    border: 3px solid red;
    width: 680px;
    margin: 0.5em 0;
}
td .error {
    font-weight: normal;
    width: auto;
}
.required {
    font-weight: normal;
}
.in_error .required {
    color: red;
}


/* login widget */
#loginButtons a.button {
	height: 17px;
	padding: 4px;
	line-height: 0;
}
#loginButtons a.button span {
	display: inline-block;
        background-image: url(/images/socialsignin_logos.png);
        background-repeat: no-repeat;
        height: 32px;
        padding: 0;
        width: 87px;
}
#facebookLoginLink span { background-position: 50% 0 }
#googleLoginLink   span { background-position: 50% -32px }
#liveidLoginLink   span { background-position: 50% -64px }
#twitterLoginLink  span { background-position: 50% -96px }
#linkedinLoginLink span { background-position: 50% -128px }
#yahooLoginLink    span { background-position: 50% -160px }


/* menu styling */

#sidenav {
	position: absolute;
	left: 10px; top: 10px;

	width: 25ex;
}

#sidenav #homelink {
	font-size: large;
	font-weight: bold;
}

#sidenav ul {
	margin: 0;
	padding-left: 0.5ex;
	list-style: none;
	border-color: inherit;
}
#sidenav li {
	margin: 1ex 0;
	padding: 0.5ex;
	font-size: medium;
	font-weight: bold;
}
#sidenav li li { font-size: small; margin: 0.5ex 0; border-color: inherit; }
#sidenav li a {
	padding: 0.25ex;
	background-image: url(../images/50pc.gif);
	font-size: inherit;

	margin: 2px;
	border-width: 2px;
	border-style: none;
	border-color: inherit;
}

#sidenav a {
	text-decoration: none;
	color: black;
}
#sidenav li a:hover { margin: 0; border-style: solid; }


#bottomnav a {
	margin: 0 1ex;
}

/* oh wow, fancy -- thumbnail images down the right-hand side of the page */
#thumbnails .linked-thumbnail {
	width: 220px;
	text-align: center;
	margin-bottom: 50px;
}
#thumbnails .linked-thumbnail a { margin: 2px; outline: 0; display: inline; vertical-align: middle; }
#thumbnails .linked-thumbnail img { margin: 2px; border: 0; }
.trips #thumbnails .linked-thumbnail a:hover img { margin: 0; border: 2px solid #008; }

#thumbnails {
	position: absolute;
	right: 10px; top: 50px;
}


@media print {
	body {
		margin-left: auto;
		background: none;
	}
	#sidenav, #bottomnav { display: none; }

	#thumbnails { display: none; }
}