/**
 * ---------------------------
 * Client: Anti-Kraak.nl
 * URL: www.anti-kraak.nl
 * Author: Harmen Janssen, Dutch Internet Works
 * Media: Screen
 * Browser: All
 *
 * Color guide;
 * ---------------------------
 * #009de0 Light blue
 * #002967 Navy
 * #dbdbdb Grey
 * ---------------------------
 * 
 * Notes;
 * ---------------------------
 * Font-sizes are based on the 16px browser default, which is valid for most browsers and users.
 * Font-sizes and line-heights are calculated as such:
 * font-size = d / 16    where 'd' is the desired font-size.
 * Example:
 * a font-size of 14px would be set in 0.875em, since 14 / 16 = .875
 * ---------------------------
 * 
 */

/**
 * Basic settings
 */

body {
	font: normal normal normal 100%/1.125em Tahoma, Helvetica, Arial, sans-serif;
	letter-spacing: .01em;
	background: #cbd6e2;
}

/**
 * Text
 */

p,li,td,th,label,input,textarea,option,caption,address {
	font-size: 0.75em;
}

td li,li p,li li,p option,li label,li input,li textarea,li option,select option,p input {
	font-size: 1em;
}

#main-content p {
	margin-bottom: 1.125em;
}

#main-content ul,#main-content ol {
	margin-bottom: 1em;
}

#main-content li {
	margin-left: 1.5em;
	list-style: disc;
}

#main-content ol li {
	list-style: decimal;
}

strong {
	font-weight: bold;
	color: #002967;
}

em,dfn,var {
	font-style: italic;
}

img {
	margin: 10px;
}

code,pre {
	font-family: Monaco, "Courier New", Courier, monospace;
	color: #002967;
}

/**
 * Links
 */

a:link,a:visited,a:hover,a:active,a:focus {
	text-decoration: none;
	color: #002967;
/*	border-bottom: 1px solid #009de0; */
}

a:visited {
	color: #74BFDF;
}

a:hover,a:active,a:focus {
	color: #009de0;
}

/**
 * Headings
 */

h1,h2,h3,h4,h5,h6 {
	margin-bottom: .5em;
	font-family: Tahoma, "Gill Sans",Verdana,Helvetica,Arial,sans-serif;
	letter-spacing: 1px;
	color: #002967;
}

h1,h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

h4,h5 {
	font-size: 1em;
}

h6 {
	font-size: 0.75em;
}

 
/**
 * Forms
 */

form {
	padding: .5em;
	border: 1px solid #002967;
}

form:after {
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
	content: ".";
}

form div.input {
	width: 100%;
	margin: .5em 0;
	float: left;
}

form div.input label {
	width: 20em;
	display: block;
	float: left;
	clear: left;
}

.input-help {
	margin-left: 12em;
	font-size: 0.833em;
}

form div.input input,form div.input textarea {
	width: 30em;
	font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif;
	display: block;
	float: left;
}

input[type=text]:focus,input[type=password]:focus,textarea:focus {
	background-color: #b5d6e4;
}

input {
	vertical-align: middle;
}

/**
 * Form Errors
 */
 
.error-message {
	margin-left: 1.0em;
	font-weight:bold;
	font-size: 0.6em;
}
.form-error {
background-color:#CCCCCC;
}


/**
 * Tables
 */

table {
	width: 100%;
	border-collapse: collapse;
}

tr {
	border-bottom: 1px solid #fff;
}

td,th {
	padding: .5em;
	text-align: center;
	border-right: 1px solid #fff;
}

th {
	color: #fff;
	background-color: #002967;
}

tr.even td {
	background-color: #b3c1e3;
}

tr.odd td {
	background-color: #b5d6e4;
}

td li {
	text-align: left;
}

/**
 * Structure
 */

.clearfix:after {
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
	content: ".";
}

#container {
	position: relative;
	width: 828px; /* + (2 * padding) = 870px */
	margin: 0 auto;
	padding: 35px 21px 16px;
	color: #000;
	background: #fff;
}

.column {
	float: left;
}

#content {
	margin-top: 4.5em;
}

#main-content {
	width: 828px;
}

/**
 * Branding
 */

#branding h1 {
	width: 828px;
	height: 62px;
	margin-bottom: 14px;
	text-indent: -999em;
	background: url(/img/anti-kraak-logo.jpg) no-repeat 0 0;
}

#branding h2 {
	position: absolute;
	top: -999em;
}

/**
 * Main navigation
 */

#main-navigation {
	position: absolute;
	top: 330px;
	left: 21px;
	width: 828px;
	line-height: 2.0833em;
	background: #009de0;
}

#main-navigation li {
	margin-left: 0.1666em;
	float: left;
	line-height: 2.0833em; /*1.5625em*/
}

#main-navigation li a {
	position: relative;
	min-height: 2.0833em;
	margin: 0.4166em 0;
	padding: 0 1.25em;
	display: block;
	line-height: 2.0833em; /*1.5625em*/
	color: #fff;
}

#main-navigation li a:hover,#main-navigation li a:focus,
#main-navigation li.current a:hover,#main-navigation li.current a:focus {
	color: #fff;
	background-color: #002967;
}

#main-navigation li.current a {
	color: #002967;
	background-color: #fff;
}

/**
 * Footer
 */

#footer {
	margin-top: 4.5em;
	font-size: 0.833em;
	line-height: 2.0833em;
	color: #002967;
	border: 1px solid #dbdbdb;
	border-width: 1px 0;
}

#footer p {
	float: left;
}

#footer ul {
	float: right;
}

#footer ul li {
	display: inline;
}

/**
 * Elements with rounded corners
 */

/**
 * Main navigation corners
 */

#main-navigation b {
	position: absolute;
	width: 5px;
	height: 5px;
	display: block;
	background: url(/img/corners.jpg) no-repeat;
}

#main-navigation b.tl {
	top: 0;
	left: 0;
	background-position: 0 0;
}

#main-navigation b.tr {
	top: 0;
	right: 0;
	background-position: -5px 0;
}

#main-navigation b.bl {
	bottom: 0;
	left: 0;
	background-position: -10px 0;
}

#main-navigation b.br {
	bottom: 0;
	right: 0;
	background-position: -15px 0;
}

/**
 * Main navigation links corners
 */

#main-navigation li a b {
	position: absolute;
	width: 5px;
	height: 5px;
	display: none;
	background: url(/img/navigation-corners.jpg) no-repeat;
}

/* Hover states */
#main-navigation li a:hover b.tl,#main-navigation li a:focus b.tl, /* regular hover */
#main-navigation li.current a:hover b.tl,#main-navigation li.current a:focus b.tl { /* hover on current item */
	top: 0;
	left: 0;
	display: block;
	background-position: 0 -5px;
}

#main-navigation li a:hover b.tr,#main-navigation li a:focus b.tr, /* regular hover */
#main-navigation li.current a:hover b.tr,#main-navigation li.current a:focus b.tr { /* hover on current item */
	top: 0;
	right: 0;
	display: block;
	background-position: -5px -5px;
}

#main-navigation li a:hover b.bl,#main-navigation li a:focus b.bl, /* regular hover */
#main-navigation li.current a:hover b.bl,#main-navigation li.current a:focus b.bl { /* hover on current item */
	bottom: 0;
	left: 0;
	display: block;
	background-position: -10px -5px;
}

#main-navigation li a:hover b.br,#main-navigation li a:focus b.br, /* regular hover */
#main-navigation li.current a:hover b.br,#main-navigation li.current a:focus b.br { /* hover on current item */
	bottom: 0;
	right: 0;
	display: block;
	background-position: -15px -5px;
}

/* Current states */
#main-navigation li.current a b.tl { display: block; background-position: 0 0; }
#main-navigation li.current a b.tr { display: block; background-position: -5px 0; }
#main-navigation li.current a b.bl { display: block; background-position: -10px 0; }
#main-navigation li.current a b.br { display: block; background-position: -15px 0; }