/* -----------------------------------------------------------------------

 * File: screen.css
 * Project: Museum De Lakenhal Leiden
 *
 * Based on: Blueprint CSS Framework 1.0
 * Adaptation: 2011 Hippo Software.
 *            <http://www.hipposoftware.nl>
 *
 * Author: Bert Bulder <mailto:bertb@hipposoftware.nl>
 *         Brouwersgracht 48, 1013 GX Amsterdam, 020-6255344
 *

----------------------------------------------------------------------- */

/* --------------------------------------------------------------

 * Resetting everything to default 

-------------------------------------------------------------- */

html {
	margin:0;
	padding:0;
	border:0;
}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 11px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	vertical-align: baseline;
}
/* This helps to make newer HTML5 elements behave like DIVs in older browers */ 
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;
}
/* Line-height should always be unitless! */
body {
	line-height: 1.5;
	background: white;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
	text-align: left;
	font-weight: normal;
	float:none !important;
}
table, th, td {
	vertical-align: middle;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
}
blockquote, q {
	quotes: "" "";
}
/* Remove annoying border on linked images. */
a img {
	border: none;
}
/* Remember to define your own focus styles! */
:focus {
	outline: 0;
}
/* --------------------------------------------------------------

 * Setting up some sensible default typography.

-------------------------------------------------------------- */

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html {
	font-size:95%;
}
body {
	font-size: 75%;
	color: #222;
	background: #fff;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Headings
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	color: #111;
}
h1 {
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0.5em;
}
h2 {
	font-size: 2em;
	margin-bottom: 0.75em;
}
h3 {
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
}
h4 {
	font-size: 1.2em;
	line-height: 1.25;
	margin-bottom: 1.25em;
}
h5 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 1.5em;
}
h6 {
	font-size: 1em;
	font-weight: bold;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
	margin: 0;
}
/* Text elements
-------------------------------------------------------------- */

p {
	margin: 0 0 1.5em;
}
/* 
	These can be used to pull an image at the start of a paragraph, so 
	that the text flows around it (usage: <p><img class="left">Text</p>) 
 */
.left {
	float: left !important;
}
p .left {
	margin: 1.5em 1.5em 1.5em 0;
	padding: 0;
}
.right {
	float: right !important;
}
p .right {
	margin: 1.5em 0 1.5em 1.5em;
	padding: 0;
}
a:focus, a:hover {
	color: #09f;
}
a {
	color: #06c;
	text-decoration: underline;
}
blockquote {
	margin: 1.5em;
	color: #666;
	font-style: italic;
}
strong, dfn {
	font-weight: bold;
}
em, dfn {
	font-style: italic;
}
sup, sub {
	line-height: 0;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
}
address {
	margin: 0 0 1.5em;
	font-style: italic;
}
del {
	color:#666;
}
pre {
	margin: 1.5em 0;
	white-space: pre;
}
pre, code, tt {
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5;
}
/* Lists
-------------------------------------------------------------- */

li ul, li ol {
	margin: 0;
}
ul, ol {
	margin: 0 1.5em 1.5em 0;
	padding-left: 1.5em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
dl {
	margin: 0 0 1.5em 0;
}
dl dt {
	font-weight: bold;
}
dd {
	margin-left: 1.5em;
}
/* Tables
-------------------------------------------------------------- */

/* 
	Because of the need for padding on TH and TD, the vertical rhythm 
	on table cells has to be 27px, instead of the standard 18px or 36px 
	of other elements. 
 */ 
/*table {
	margin-bottom: 1.4em;
	width:100%;
}
th {
	font-weight: bold;
}
thead th {
	background: #c3d9ff;
}
th, td, caption {
	padding: 4px 10px 4px 5px;
}
/*
	You can zebra-stripe your tables in outdated browsers by adding 
	the class "even" to every other table row. 
 */
/*tbody tr:nth-child(even) td, tbody tr.even td {
 background: #e5ecf9;
}
tfoot {
	font-style: italic;
}
caption {
	background: #eee;
} */

th, td { vertical-align:top; text-align:left; }


/* Misc classes
-------------------------------------------------------------- */

.small {
	font-size: .8em;
	margin-bottom: 1.875em;
	line-height: 1.875em;
}
.large {
	font-size: 1.2em;
	line-height: 2.5em;
	margin-bottom: 1.25em;
}
.hide {
	display: none;
}
.quiet {
	color: #666;
}
.loud {
	color: #000;
}
.highlight {
	background:#ff0;
}
.added {
	background:#060;
	color: #fff;
}
.removed {
	background:#900;
	color: #fff;
}
.first {
	margin-left:0;
	padding-left:0;
}
.last {
	margin-right:0;
	padding-right:0;
}
.top {
	margin-top:0;
	padding-top:0;
}
.bottom {
	margin-bottom:0;
	padding-bottom:0;
}
/* forms.css */
label {
	font-weight:bold;
}
fieldset {
	padding:0 1.4em 1.4em 1.4em;
	margin:0 0 1.5em 0;
	border:1px solid #ccc;
}
legend {
	font-weight:bold;
	font-size:1.2em;
	margin-top:-0.2em;
	margin-bottom:1em;
}
fieldset, #IE8#HACK {
	padding-top:1.4em;
}
legend, #IE8#HACK {
	margin-top:0;
	margin-bottom:0;
}
input {
	outline: none;
	}
input[type=text], input[type=password], input.text, input.title, textarea {
	background-color:#fff;
	border:1px solid #bbb;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px;
}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {
	border-color:#666;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px;
}
select {
	background-color:#fff;
	border-width:1px;
	border-style:solid;
}
input[type=text], input[type=password], input.text, input.title, textarea, select {
	margin:0.5em 0;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px;
}
input.text, input.title {
	width:300px;
	padding:5px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px;
}
input.title {
	font-size:1.5em;
}
textarea {
	width:390px;
	height:250px;
	padding:5px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 11px;	
}
form.inline {
	line-height:3;
}
form.inline p {
	margin-bottom:0;
}
.error, .alert, .notice, .success, .info {
	padding:0.8em;
	margin-bottom:1em;
	border:2px solid #ddd;
}
.error, .alert {
	background:#fbe3e4;
	color:#8a1f11;
	border-color:#fbc2c4;
}
.notice {
	background:#fff6bf;
	color:#514721;
	border-color:#ffd324;
}
.success {
	background:#e6efc2;
	color:#264409;
	border-color:#c6d880;
}
.info {
	background:#d5edf8;
	color:#205791;
	border-color:#92cae4;
}
.error a, .alert a {
	color:#8a1f11;
}
.notice a {
	color:#514721;
}
.success a {
	color:#264409;
}
.info a {
	color:#205791;
}
/* grid.css */
.wrapper {
	width:950px;
	margin:0 auto;
}
div.prepend-top, .prepend-top {
	margin-top:1.5em;
}
div.append-bottom, .append-bottom {
	margin-bottom:1.5em;
}
.box {
	padding:1.5em;
	margin-bottom:1.5em;
	background:#e5eCf9;
}
hr {
	background:#ddd;
	color:#ddd;
	clear:both;
	float:none;
	width:100%;
	height:1px;
	margin:0 0 1.45em;
	border:none;
}
hr.space {
	background:#fff;
	color:#fff;
	visibility:hidden;
}
.clearfix:after, .container:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
}
.clearfix, .container {
	display:block;
}
.clear {
	clear:both;
}
/* --------------------------------------------------------------

 * Setting up some default styling for forms
   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

/* 
	A special hack is included for IE8 since it does not apply padding 
	correctly on fieldsets
 */ 
label {
	font-weight: bold;
}
fieldset {
	padding:0 1.4em 1.4em 1.4em;
	margin: 0 0 1.5em 0;
	border: 1px solid #ccc;
}
legend {
	font-weight: bold;
	font-size:1.2em;
	margin-top:-0.2em;
	margin-bottom:1em;
}
fieldset, #IE8#HACK {
	padding-top:1.4em;
}
legend, #IE8#HACK {
	margin-top:0;
	margin-bottom:0;
}
/* Form fields
-------------------------------------------------------------- */

/* 
  Attribute selectors are used to differentiate the different types 
  of input elements, but to support old browsers, you will have to 
  add classes for each one. ".title" simply creates a large text  
  field, this is purely for looks.
 */
input[type=text], input[type=password], input[type=email], input.text, input.title, textarea, select  {
	background-color:#fff;
	border:1px solid #ccc;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input.text:focus, input.title:focus, textarea:focus {
	border-color:#666;
}
select {
	background-color:#fff;
	border-width:1px;
	border-style:solid;
}
input[type=text], input[type=password], input[type=email], input.text, input.title, textarea, select {
	margin:0.5em 0;
}
input.text, input.title {
	width: 300px;
	padding:5px;
}
input.title {
	font-size:1.5em;
}
textarea {
	width: 390px;
	height: 250px;
	padding:5px;
}
/* 
  This is to be used on forms where a variety of elements are 
  placed side-by-side. Use the p tag to denote a line. 
 */
form.inline {
	line-height:3;
}
form.inline p {
	margin-bottom:0;
}
/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error, .alert, .notice, .success, .info {
	padding: 0.8em;
	margin-bottom: 1em;
	border: 2px solid #ddd;
}
.error, .alert {
	background: #fbe3e4;
	color: #8a1f11;
	border-color: #fbc2c4;
}
.notice {
	background: #fff6bf;
	color: #514721;
	border-color: #ffd324;
}
.success {
	background: #e6efc2;
	color: #264409;
	border-color: #c6d880;
}
.info {
	background: #d5edf8;
	color: #205791;
	border-color: #92cae4;
}
.error a, .alert a {
	color: #8a1f11;
}
.notice a {
	color: #514721;
}
.success a {
	color: #264409;
}
.info a {
	color: #205791;
}