/*
Website: Landelijke Spingroep
CSS & template: Janneke Maat / www.moonwise.nl
Aanvullingen ledensysteem en nieuwsbrieven: Koen Brouwer / www.kbrouwer.nl
*/

/* BASIS - Elements */
*{
	margin: 0;
	padding: 0;
}

body{
	background: #F7F7F6;
	color: #000000;
	font: 62.5%/1.6 Arial, Helvetica, sans-serif;
	text-align: center;
}

/* hack voor internet explorer IE6 */
* html body{
	font-size: 75%;
}

p{
	padding: 5px 5px 5px 0px;
	font-size: 1.4em;
}

pre{
	font-size: 14px;
}

/* basis link styles */
a, a:link, a:visited, a:active{
	color: #660044;
	text-decoration: underline;
	font-weight: bold;
}

a:hover{
	color: #4CB4E9;
	text-decoration: underline;
}

/* koppen */
h1, h2, h3{
	color: #FF4005;
	padding-top: 10px;
	font-weight: normal;
}

h1{
	font-size: 2em;
	letter-spacing: 1px;
}

h2{
	font-size: 1.5em;
	letter-spacing: 1px;
}

h3{
	font-size: 1.25em;
	letter-spacing: 1px;
}

ul{
	margin: 5px;
	padding: 5px;
	list-style: square;
}

li{
	list-style: circle inside;
	padding: 3px 5px 2px 10px;
	font-size: 1.4em;
}

ol{
	margin: 5px;
	padding: 5px;
	list-style: decimal inside;
}

ol li{
	list-style: decimal inside;
	font-size: 1.2em;
	padding: 3px 5px 2px 10px;
}

hr{
	height: 1px;
	border-bottom: 1px dotted #35E323;
}

img{
	margin: 5px;
	padding: 5px;
	border: 1px #4CB4E9 solid;
}

/* global form styles */
input, select, textarea{
	border: 1px solid #4CB4E9;
	font: 1em Arial, Helvetica, sans-serif;
	padding: 0.3em;
	width: 25em;
}

input.radio{
	float: left;
	margin: 0px 1em 0px 0px;
	width: auto;
	border: 0px solid;
}

input:focus, textarea:focus{
	background: #E3E3E3;
	color: #1C1C1C;
}

fieldset{
	border: 1px solid #4CB4E9;
	font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 1em;
	margin: 1em 0;
}

legend{
	border: 1px solid #4CB4E9;
	color: #1C1C1C;
	padding: 1em;
}

label{
	font-size: 1.2em;
	display: block;
	float: left;
	width: 15em;
}

#onderwerp label{
	width: 15em;
	display: inline;
	float: none;
}

form p{
	position: relative;
	width: 100%;
	font-size: 1em;
	display: block;
}

/* styling van tabellen */
table{
	width: 98%;
	padding: 1%;
	margin: 1%;
	border: 1px solid #4CB4E9;
}

tr:hover{
	background: #D6EBFF;
}

th{
	background: #99CCFF;
	font-size: 1.25em;
	letter-spacing: 1px;
	text-align: center;
}

tfoot{
	background: #99CCFF;
	height: 19px;
}

td{
	vertical-align: top;
	padding: 3px 2px;
	font-size: 1.2em;
}

/* ---------------------
LAYOUT TEMPLATE
--------------------- */
#pagewidth{
	background: #FFFFFF;
	min-width: 950px;
	max-width: 950px;
	width: expression(document.body.clientWidth > 950? "950px": "auto" );
	margin: 10px auto;
	text-align: left;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

#header{
	background: #FFFFFF url(../images/banner-vlucht.jpg) no-repeat 25% 0;
	position: relative;
	height: 220px;
	width: 100%;
	text-align: left;

}

#header h1{
	font-size: 2.0em;
	font-weight: normal;
	text-indent: -5000px;
}

#wrapper{
}

#leftcol{
	width: 21%;
	float: left;
	position: relative;
	background: #FFFFFF;
	padding: 2%;
}

#maincol{
	float: right;
	position: relative;
	width: 67%;
	background: #FFFFFF;
	padding: 2% 3%;
}

#maincol_full{
	float: right;
	position: relative;
	width: 90%;
	background: #FFFFFF;
	padding: 2% 3%;
}

#footer{
	width: 98%;
	height: 25px;
	background: #FFFFFF url(../images/footerimage.jpg) no-repeat;
	color: #1C1C1C;
	padding: 1%;
	text-align: center;
	clear: both;
}

#footer img{
	padding: 5px;
	border: 0px solid #1C1C1C;
}

/* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix{
	height: 1%;
}

.clearfix{
	display: block;
}

/* End hide from IE-mac */

/* Styling voor het zijmenu */
.markermenu{
	list-style-type: none;
	width: 90%;
	margin: 0;
}

.markermenu li{
	background: #F7F7F7;
	font: 1.1em Arial, Helvetica, sans-serif;
	list-style: none;
	padding: 3px 0 3px 10px;
}

.markermenu li a, .markermenu li a:link, .markermenu li a:visited, .markermenu li a:active{
	font: 1.3em Arial, Helvetica, sans-serif;
	color: #40012B;
	display: block;
	width: auto;
	text-decoration: none;
	font-weight: normal;
}

.markermenu li a:hover{
	font: 1.3em Arial, Helvetica, sans-serif;
	color: #4CB4E9;
}

/* Styling voor het topmenu*/
#topmenu{
	text-align: right;
	padding: 0.5em;
	background: #660044;
}

#navlist{
	margin: 0;
	padding: 0;
}

#navlist li{
	font: 1.2em Arial, Helvetica, sans-serif;
	list-style: none;
	display: inline;
	padding: 0 1em;
}

#navlist li a{
	padding: 0.4em 1em;
	font-weight: normal;
}

#navlist li a:link, #navlist li a:visited{
	color: #FFFFFF;
	font-weight: normal;
}

#navlist li a:hover{
	color: #660044;
	background: #FFFFFF;
	font-weight: normal;
}

/* Styling van galerie o.a. in berichten */
#thumbnails{        
	position: relative;
	width: 98%;
	margin: 1%;
}

.img-wrapper{        
	margin: 2em 2em 4em 0;
	float: left;
	line-height: 1em;
	text-align: center;
}

.img-wrapperre{
	margin: 2em 0 4em 2em;
	float: right;
	line-height: 1em;
	text-align: center;
}

.img-wrapper img{        
	float: none;
	margin: 0;
	position: relative;
	top: -0.5em;
}

/* vormgevende classes */
.tussen{
	border-top: 1px solid #FF4005;
	border-bottom: 1px solid #FF4005;
}

.entry1{
	background: #E3E3E3;
}

.entry2{
	background: #F7F7F7;
}

.bericht{
	border: 1px solid #4CB4E9;
	margin: 1%;
	padding: 1%;
	display: block;
}

.bericht1{
	border: 1px solid #4CB4E9;
	float: left;
	width: 50%;
	margin: 1%;
	padding: 1%;
	display: block;
}

.bericht2{
	border: 1px solid #4CB4E9;
	float: right;
	width: 40%;
	margin: 1%;
	padding: 1%;
	display: block;
}

/* Styling van foto's in album*/
.thmb-wrapper{
	margin: 2em 2em 0 2em;
	float: left;
	line-height: 1em;
	text-align: center;
	width: 16em;
	height: 16em;
}

.thmb-wrapper img{
	float: none;
	margin: 0;
	position: relative;
	top: -0.5em;
	text-align: center;
}

/* Login form */
form.loginForm input:not([type=submit]):not([type=checkbox]), form.loginForm select, form.loginForm textarea{
	border: 1px solid #660044;
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	margin: 2px 0 2px 0;
	padding: 0.3em;
	width: 25em;
}

form.loginForm select{
	width: 25.7em;
}

form.loginForm input[type=submit]{
	border: 1px solid #660044;
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	margin: 2px 0 2px 0;
	padding: 0.3em 30px;
	width: auto;
	display: block;
}

form.loginForm label{
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	margin: 2px 0 2px 0;
	padding: 0.3em;
	width: 14em;
}

form.loginForm fieldset{
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #660044;
	margin: 1em 0;
	padding: 1em;
}

form.loginForm fieldset legend{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	border: 1px solid #660044;
	padding: 5px 10px;
}

form.loginForm p.lostPassLink{
	display: block;
	margin: 20px 0 0 18.7em;
	text-align: center;
	padding: 0;
	width: auto;
}

form.loginForm p.lostPassLink a{
	font-size: 1.4em;
}

form.loginForm p.notice{
	font-size: 1.3em;
}

form.loginForm p.inputNote{
	margin-left: 15.7em;
	width: 350px;
	font-size: 1.3em;
}

form p.note{
	display: block;
	width: 250px;
	float: right;
	margin-right: 20px;
	font-size: 1.2em;
	font-weight: bold;
	padding: 8px;
	border: 1px solid #660044;
}

p#errorMessage{
	display: block;
	color: #FF0000;
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

.memberWelcome{
	color: #40012B;
	display: block;
	font: 1.3em Arial, Helvetica, sans-serif;
}

/* User Admin Scrolling Table */
table.userAdmin{
	border: 1px solid #660044;
	font-family: Arial, Helvetica, sans-serif;

	width: 100%;

	margin: 0;
	border-collapse: collapse;
}

tr.userAdmin{
	background-color: #660044;
	color: #FFFFFF;
	padding: 5px;
}

table.userAdmin tbody tr:hover{
	background-color: #f2e1ed;
}

table.userAdmin td, thead.userAdmin td{
	padding: 5px;
}

table.userAdmin a, table.userAdmin a:hover{
	color: #660044;
}

table.userAdmin tfoot td{
	text-align: center;
	background-color: #FFFFFF;
}
table.userAdmin tfoot a{
	text-decoration: none;
	font-weight: bold;
	padding: 0 2px;
}
table.userAdmin tfoot a.currentPage{
	color: #FF4005;
	text-decoration: none;
	font-weight: bold;
	padding: 0 2px;
}

/* End User Table */

form span.input{
	display: block;
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	margin: 2px 0 2px 0;
	padding: 0.3em;
	width: 25em;
}

form input[type=checkbox]{
	display: block;
	width: 30px;
}

span.userName{
	color: #660044;
	font-weight: bold;
}

span.buttonLabel{
	color: #660044;
	font-weight: bold;
	text-decoration: underline;
}

fieldset.checkboxes div{
	display: block;
	float: left;
	text-align: center;
}

fieldset.checkboxes div label{
	display: block;
}

fieldset.checkboxes input[type=checkbox]{
	display: block;
	width: 100%;
}

form, table, tr, td, thead, tbody, img{
	cursor: default;
}

.error{
	color: #FF0000;
	padding-bottom: 15px;
}

.newslettersView h1.year{
	display: block;
	border-bottom: 1px solid #FF4005;
	margin: 0 10px 10px 10px;
	cursor: pointer;
}

.newslettersView h1.year:hover{
	font-weight: bold;
}

.newslettersView .newsletter{
	width: calc(100% - 15px);
	border: 1px solid #660044;
	margin: 0 0 10px 0;
	padding: 2px 5px;
	display: block;
	overflow: hidden;
}

.yearTogglable{
	overflow: hidden;
}

.newslettersView .info{
	display: block;
	margin: 0 0 0 0;
	/*margin: 0 130px 0 0;*/
	padding-left: 3px;
}

.newslettersView .info a{
	font-size: 1.1em;
	text-decoration: none;
}

.newslettersView .newsletter h1{
	padding: 0;
	margin: 0;
	font-size: 1.4em;
	font-weight: bold;
	display: block;
	color: #660044;
}

.newslettersView .newsletter h1:hover{
	color: #666666;
	text-decoration: underline;
}

.newslettersView .newsletter span{
	font-size: 1.4em;
	display: block;
}

.newslettersView .newsletter span.description{
	font-size: 1.4em;
	display: block;
}

.newslettersView .newsletter span.uploadDateTime{
	font-size: 1.4em;
	display: block;
	color: #666666;
	text-align: right;
	float: right;
}

.newslettersAdmin td.date{
	width: 80px;
}

.newslettersAdmin td.actions{
	width: 200px;
}

span.spacer{
	padding: 0 6px;
}
div.spacer{
	display: block;
	height: 20px;
}

td.datetime{
	width: 115px;
}