html { -webkit-font-smoothing: antialiased; }
html, body { height: 100%; margin: 0; padding: 0; }
body { background: #fff url("gfx/body-bg.jpg") no-repeat center 0; border-bottom: 1px solid #fff; font: 12px/16px "Georgia", serif; }

/* skip links */
.skip-links { height: 75px; list-style: none; margin: 0 auto; padding: 0 10px; position: relative; width: 800px; }
.skip-links a { color: #999; position: absolute; left: -9999px; text-decoration: none; }
.skip-links a:focus { left: auto; }

/* main document layout */
#wrapper { background: #fff; margin: 0 auto; overflow: hidden; padding: 0 10px; width: 800px; }
#branding { float: left; height: 86px; width: 240px; }
.main { margin: 0 0 20px; padding: 17px 0 0; width: 560px; }
.sidebar { margin: 86px 0 20px -800px; width: 240px; }

/* remaining layout elements */
.column { float: left; }
.article { clear: left; float: left; width: 400px; } /* only used in combination with an .aside */
.aside { float: right; width: 160px; } /* only used in combination with an .article */
.narrow { width: 186px; } /* column width for a 3 column layout */
.small { width: 120px; }
.related { overflow: hidden; clear: both; } /* clear floats */

/* colors */
.sidebar { background: #fff; color: #999; }
.main { background: #fff; color: #000; }

.main a { color: #000; text-decoration: underline; }
.main a:hover { color: #999; }

.sidebar a { color: #999; }
.sidebar a:hover { color: #000; }

.nav+p { color: #000; margin-top: -24px; }

/*.browsebox_content h3,
.browsebox_content p { background: #fff; }*/   /* ie6 fix for browseboxes */
/*#agenda .browsebox_content p { background: transparent; }*/

/* typography */
h1 { /* not used anywhere else besides the logo */ }
h2 { clear: both; font-family: sans-serif; font-size: 34px; font-weight: 300; line-height: 1; margin: 12px 10px 0; }
h3 { font-size: 16px; font-weight: normal; line-height: 22px; margin: 12px 10px 0; }
h4 { font-size: 14px; font-weight: normal; line-height: 24px; margin: 12px 10px 0; }
h4.fancy { border-top: 2px solid #00b4ff; clear: both; color: #00b4ff; font: bold 14px/24px "VAG Rounded LT", sans-serif; margin: 12px 10px 0; overflow: hidden; }
h5 { clear: both; font-size: 16px; font-weight: normal; margin: 12px 10px 10px; }
h6 { clear: both; font-size: 16px; font-weight: normal; margin: 12px 10px 0; }

p { margin: 0 10px 12px; }
#nieuws h3 { margin-bottom: 12px; }
h3.accessibility { left: -9999px; position: absolute; }
p.introduction { font-weight: bold; }
.align-right { text-align: right; }
#wijzig-profiel { outline: none; }
p.subset { margin: -12px 10px 12px; } /* yank the paragraph up */
p.link { font-style: italic; }
p.link:after { content: ' »'; } /* for <p>'s containing just one link */
p.link img { margin: 0 5px 0 0; vertical-align: bottom; float: none; }
.subtitle { font-style: italic; margin: -70px 12px 58px; }
.date { color: #00b4ff; font-style: italic; }
.footer { clear: both; }
.footer .snippet { font-size: 10px; font-style: italic; margin: 7px 10px 0; }

#license { width: 560px; margin: 0 auto; padding-bottom: 1em; font-size: 10px; font-style: italic; background: white; border-left: 257px white solid; }
#license a { color: #000; }
#license a:hover { color: #999; }
#license img { display: inline; margin: 0; float: none; vertical-align: baseline; }

dl.les-definitie { margin: 0 10px 12px; }
.les-definitie dt { clear: left; float: left; width: 200px; }

#digital-playground .snippet h3 { margin-top: 0; margin-bottom: 12px; }

#over-mediacultuur .snippet { margin: 0 12px 12px; }

/* text-container - exceptions for when we don't get a <p> */
.text-container { margin: 0 10px; }
.text-container h2,
.text-container h3,
.text-container h4,
.text-container h5,
.text-container h6,
.text-container p { margin-left: 0; margin-right: 0; }

/* home */
#home .thema { background: url("gfx/home_beeld.jpg") no-repeat 10px 0; height: auto; }

/* news */
#news .item { overflow: hidden; }

/* thema's */
.thema { background-position: 10px 40px; background-repeat: no-repeat; height: 427px; }
.thema p { font-size: 13px; padding: 40px 30px 10px 0; }
.thema p.link { font-size: 12px; padding: 0; }
.right p { margin-left: 280px; padding-left: 10px; }
.left p { margin-right: 280px; }
.right .text-container { margin-left: 280px; padding: 50px 30px 10px 10px; }
.left .text-container { margin-right: 280px; padding: 50px 30px 10px 0; }
.thema img { margin-right: 0; }

/* branding */
#branding a { background: url("gfx/mediacultuur-logo.png") no-repeat 0 0; display: block; height: 86px; outline: none; width: 240px; }
#branding a:hover { background-position: 0 -86px; }
#branding h1,
#branding p { margin: 0; text-indent: -9999px; }

/* element: navigation */
ul.nav { font: bold 24px/32px sans-serif; height: 211px; list-style: none; margin: 0 10px 12px; padding: 0; position: relative; }
.nav li { position: absolute; left: 0; }
.nav a { background: #000; color: #fff; float: left;  height: 32px; padding: 0 10px; text-decoration: none; }
.nav a:hover, .nav a:focus, .nav .active a, .nav a.active { color: #00b4ff; }
.nav .home { top: 0; }
.nav .lessenseries { top: 27px; }
.nav .themas { top: 54px; }
.nav .alle-bronnen { top: 81px; }
.nav .nieuws { top: 108px; }
.nav .over-mediacultuur { top: 135px; }
.nav .registreer-login { font-size: 14px; font-weight: normal; line-height: 20px; top: 162px; }
.nav .registreer-login a { height: 22px; }

/* element: home intro */
#content .home { margin: 0 10px; }

/* element: search */
form.search { margin: 12px 0; overflow: hidden; padding: 0; }
.search fieldset { border: none; margin: 0 10px; overflow: hidden; padding: 0; }
.search label { left: -9999px; position: absolute; color: #000; }
.search input { background: #fff; border: 1px solid #000; border-right-width: 0; color: #000; float: left; font-family: "Georgia", serif; font-size: 12px; height: 18px; outline: none; padding: 0 5px; width: 130px; }
.search button { background: url("gfx/search-button-bg.png") no-repeat; border: 0; cursor: pointer; float: left; height: 20px; margin: 0; text-indent: -9999px; width: 20px; }
.search button:hover { background-position: 0 -20px; }

/* element: carousel */
.carousel { background: #000; margin: 0 auto 0 11px; width: 220px; }
.carousel dl { height: 170px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 220px; }
.carousel dd { background: #000; background: rgba(0,0,0,0.5); bottom: 0; left: 0; margin: 0; padding: 6px 0; position: absolute; width: 100%; }
.carousel img { display: block; float: none; height: 170px; margin: 0; width: 220px; }
.carousel a { display: block; text-decoration: none; color: #fff; }
.carousel a:hover { color: #00b4ff; }
.carousel h4 { border: none; font: normal 16px/22px "Georgia", serif; margin: 0 10px; }
.carousel p { margin: 0 10px; }
#agenda { margin-bottom: 11px; }
#agenda .navbar { clear: both; margin-left: 11px; }
#agenda .navbar ul { background: #000; border-top: 0; height: 30px; list-style: none; margin: 0; overflow: hidden; padding: 0; position: relative; width: 220px; }
#agenda .navbar li { height: 10px; position: absolute; top: 10px; width: 27px; }
#agenda .navbar li.prev { left: 0; }
#agenda .navbar li.next { right: 0; }
#agenda .navbar a { background: #fff url("gfx/navbar.gif") no-repeat; display: block; height: 10px; line-height: 10px; text-indent: -9999px; width: 27px; }
#agenda .navbar li.prev a { background-position: 0 0; }
#agenda .navbar li.prev a:hover { background-position: 0 -10px; }
#agenda .navbar li.next a { background-position: -27px 0; }
#agenda .navbar li.next a:hover { background-position: -27px -10px; }
#digital-playground-banner a { display: block; overflow: hidden; font-style: italic; color: #000; }
#digital-playground-banner a:hover { color: #00b4ff; }
#digital-playground-banner a p:after { content: ' »'; white-space: nowrap; }
#digital-playground-banner img { margin: 0 12px 0 10px; float: left; border: 0; }

/* element: link list */
ul.link-list { list-style: none; margin: 0 10px 12px; padding: 0; }
.link-list li { margin-bottom: 5px; }
.link-list li:after { content: '»'; white-space: nowrap; }
.link-list li a { font-style: italic; }

/* element: button list */
ul.buttons { clear: both; list-style: none; margin: 12px 8px; overflow: hidden; padding: 0; width: 542px; }
.buttons li { float: left; margin: 0 2px; }
.buttons a { background: #999; color: #fff; display: block; font: normal 14px/20px sans-serif; float: left; height: 22px; line-height: 22px; padding: 0 5px; text-decoration: none; }
.buttons a.current,
.buttons a:hover { background: #ccc; color: #fff;  }
.buttons .save a { background: #999 url("gfx/button-bgs.png") no-repeat 0 0; padding-left: 25px; }
.buttons .save .current,
.buttons .save a:hover { background: #ccc url("gfx/button-bgs.png") no-repeat 0 -22px; }
.buttons .prev a { background: #999 url("gfx/button-bgs.png") no-repeat 0 -44px; padding: 0; text-indent: -9999px; width: 20px; }
.buttons .prev .current,
.buttons .prev a:hover { background: #ccc url("gfx/button-bgs.png") no-repeat 0 -66px; }
.buttons .next a { background: #999 url("gfx/button-bgs.png") no-repeat 0 -88px; padding: 0; text-indent: -9999px; width: 20px; }
.buttons .next .current,
.buttons .next a:hover { background: #ccc url("gfx/button-bgs.png") no-repeat 0 -110px; }

/* element: credits */
.over-mc-block { margin-left: 10px; margin-bottom: -12px; padding-top: 12px; overflow: hidden; }
#credits { padding-top: 110px; background: url("gfx/over-mc-muurtje.png") no-repeat 0 0; }
.over-mc-block h4 { margin: 0 10px 10px 0; }
.over-mc-block div { margin: 0 20px 20px 0; }
.over-mc-block div.last { margin-right: 0; }
.over-mc-block img { margin: 0; float: none; }
.over-mc-block p { margin: 0; }
.over-mc-block a { display: block; font-style: italic; }
#credits a:after, #contact a:after { content: ' »'; }
#contact { margin-bottom: 0; }

/* element: image (both inside and outside a <p>) */
img { border: none; float: right; margin: 5px 10px 12px 20px; }
p img { margin: 0 0 12px 20px; }
img+p { margin: 0 10px 12px; }
.lesson-image { max-width: 540px; margin-left: 10px; float:none }

/* element: image with caption*/
dl.image { float: right; margin: 0 10px 12px 20px; padding: 0; width: 300px; }
.image img { display: block; margin: 0; padding: 0; }
.image .caption { background: #000; clear: both; color: #fff; font-style: italic; font-size: 10px; margin: 0; overflow: hidden; padding: 2px 5px; }

/* element: source container and content */
div.source { clear: both; margin: 12px 10px; overflow: hidden; width: 540px; } 
.source img { float: left; margin: 0; padding: 0; }
.source p { background: #000; color: #fff; float: left; height: 88px; margin: 0; padding: 16px; width: 388px; }
.source p a { clear: both; color: #fff; display: block; font: normal 16px/24px "Georgia", serif; margin-top: 1em; }
.source p a:hover { color: #00b4ff; }
.relatedIndicator { color: #00b4ff; }

/* element: les bronnen */
ul.les-bronnen { list-style: none; margin: 0; padding: 0; }
.les-bronnen li { clear: both; overflow: hidden; }
.les-bronnen a { text-decoration: none; }
.les-bronnen img { float: left; height: 225px; margin: 5px 20px 14px 0; width: 300px; }
.les-bronnen h4 { margin-top: 0; }

/* element: source thumb */
#sources { clear: both; }
div.source-thumb { background: #000; float: left; height: 120px; margin: 10px; position: relative; width: 260px; display: inline; }
.source-thumb img { left: 0; margin: 0; padding: 0; position: absolute; top: 0; z-index: 50; }
.source-thumb a { background: #000; background: rgba(0,0,0,0.5); color: #fff; display: block; height: 120px; position: absolute; right: 0; text-decoration: none; top: 0; width: 170px; z-index: 100; }
.source-thumb a:hover { color: #00b4ff; }
.source-thumb a.save { background: #fff url("gfx/save-button-small-bg.png") no-repeat 0 2px; border-right: 4px solid #fff; color: #000; font-size: 14px; height: 14px; line-height: 1; padding: 0 0 0 10px; position: absolute; right: 0; text-decoration: none; top: 108px; width: auto; z-index: 150; }
.source-thumb a.save:hover { color: #999; background-position: 0 -10px; }
.source-thumb a.remove { background: #fff url("gfx/remove-button-small-bg.png") no-repeat 0 2px; border-right: 4px solid #fff; color: #000; font-size: 14px; height: 14px; line-height: 1;  padding: 0 0 0 10px; position: absolute; right: 0; text-decoration: none; top: 108px; width: auto; z-index: 150; }
.source-thumb a.remove:hover { color: #999; background-position: 0 -10px; }
.source-thumb a h5 { font-size: 16px; font-weight: normal; margin: 5px 5px 0; }
.source-thumb a p { margin: 0 5px; }
.source-thumb a p span { text-decoration: underline; }
html.js .hidden-thumb { display: none; }

/* element: comment */
.comment { margin: 5px 10px 15px; padding-bottom: 20px; overflow: hidden; border-bottom: 2px solid #999; }
.comment p { margin: 0; }
.comment .author { float: left; }
.comment .desc { width: 340px; float: right; }
.comment.last { border-bottom: 2px solid #00b4ff; }

/* element: source filter */
form.source-filter { position: relative; margin: 0 10px 10px; }
.source-filter fieldset { border: none; margin: 0; padding: 0; }
.source-filter label { margin-right: 30px; display: block; float: left; }
.source-filter #medium-label { margin-right: 0; }
.source-filter span { margin-bottom: 5px; display: block; font-size: 16px; }
.source-filter select { width: 160px;}

/* element: show hidden thumbs button */
a.showHiddenThumbs { display: none; font-size: 14px; font-weight: normal; line-height: 24px; margin: 0 10px 0; clear: both; color: #000; font: bold 14px/24px "VAG Rounded LT", sans-serif; margin: 12px 10px 0; overflow: hidden; text-decoration: none; text-align: right; }
a.showHiddenThumbs:hover { color: #00b4ff; }
html.js .showHiddenThumbs { display: block; }

/* element: literature */
.literature { width: 260px; margin: 0; padding: 0; float: left; }
.literature li { list-style: none; }
.literature a { display: block; text-decoration: none; }
.literature h5 { margin-bottom: 0; font-size: 16px; }
.literature .author { margin-bottom: 0; }
.literature .summary { margin-bottom: 20px; margin-left: 12px; color: #00b4ff; }
.literature a:hover .summary { color: #999; }
.literature .summary p { margin-bottom: 0; margin-left: 0; }

.text { margin-left: 12px; }
.text p { margin-left: 0; }

/* element: navbar */
.navbar ul { border-top: 2px solid #00b4ff; clear: both; list-style: none; margin: 12px 10px; padding: 0; }
.navbar .prev { float: left; }
.navbar .next { float: right; }
.navbar a { color: #00b4ff; font: bold 14px/1 "VAG Rounded LT", sans-serif; text-decoration: none; }
.navbar li.disabled { display: none; }

/* element: thema list */
.themes .source-thumb { height: 75px; }
.themes .source-thumb a { height: 75px; }
.themes .source-thumb a h5 { font-size: 24px; font-weight: bold; }
.themes .source-thumb a:hover, .themes .source-thumb a:hover h5, .themes .source-thumb a h5:hover { color: #00b4ff; }

/* element: comment form */
form.comment-form { margin: 12px 0; overflow: hidden; }
.comment-form fieldset { border: none; margin: 0 10px; padding: 0; position: relative; }
.comment-form input,
.comment-form textarea { border: 1px solid #999; font-family: Georgia, serif; font-size: 12px; outline: none; margin: 0; padding: 3px 2px; }
.comment-form input:focus,
.comment-form textarea:focus { border-color: #000; }
.comment-form .reactie { width: 380px; }
.comment-form .reactie span { display: block; }
.comment-form label { clear: both; float: none; width: 140px; }
.comment-form textarea { height: 100px; width: 540px; }
.comment-form input { height: 18px; width: 138px; }
.comment-form button { background: #999; border: none; clear: both; color: #fff; float: none; font: normal 14px/1 "VAG Rounded LT", sans-serif; height: 22px; margin: 12px 0 0; text-align: center; width: 140px; }
.comment-form button:hover { background: #ccc; }

/* element: comments */
ul.comments { list-style: none; margin: 20px 10px; padding: 0; }
.comments li { border-top: 2px solid #999; overflow: hidden; padding: 20px 0; width: 540px; }
.comments .meta { float: left; width: 150px; }
.comments .meta p { margin: 0; }
.comments .comment { float: left; margin: 0 0 0 10px; width: 380px; }
.comments .comment p { margin: 0; }

/* element: signup form */
form.signup-form { clear: both; margin: 0; overflow: hidden; padding: 0; }
.signup-form fieldset { border: none; float: left; margin: 0 10px; overflow: hidden; padding: 0; width: 260px; display: inline; }
.signup-form fieldset p { margin: 3px 0; }
.signup-form label { clear: both; float: left; width: 260px; }
.signup-form label span { left: -9999px; position: absolute; }
.signup-form input, #lost-password input { border: 1px solid #999; height: 15px; margin: 3px 0; outline: none; padding: 3px; width: 252px; }
.signup-form input:focus { border-color: #000; }
.signup-form .date-of-birth { width: 260px;}
.signup-form .date-of-birth label { clear: none; float: none; width: auto; }
.signup-form select { margin: 5px 6px 5px 0; }
.signup-form .checkbox input { border: none; height: auto; margin: 0; width: auto; }
.signup-form .upload input { height: auto; width: auto; }
.signup-form button, #lost-password button { background: #999; color: #fff; border: none; font: normal 14px/1 "VAG Rounded LT", sans-serif; height: 24px; margin: 12px 0; padding: 0 20px; }
.signup-form button.register { float: right; }
.signup-form button.login { float: left; }
.signup-form button:hover,
.signup-form button:focus, #lost-password button:hover, #lost-password button:focus { background: #ccc; }
.signup-form .instructions { float: right; margin: 12px 10px; }
.lost-password-msg { padding-left: 10px; border-left: 1px solid #999; }

#lost-password { margin: 0 10px; }
#lost-password span, #lost-password i { display: block; }
.garp_form_error { margin: 0 0 10px; color: #f00; }

/* inline labels setup */
form div { position: relative; }
form div label.inline { position: absolute; top: 7px; left: 4px; z-index: 5; height: 15px; display: block; line-height: 15px; }
form.search div label.inline { top: 2px; left: 6px; }
form div label.inline.hidden { top: -999em; }

/* element: login form */
/*#garp_login_email {float:right; margin-right:250px;}
#garp_login_password_plain {float:right; margin-right:250px;}
#garp_login_form input.submit {margin:10px 0 20px 240px}*/

/* flash system messages */
#flashMessage { position: fixed; top: 0; left: 50%; z-index: 100000; width: 780px; margin-left: -410px; padding: 53px 20px 30px; font-size: 22px; color: #FFF; background: #00b4ff; }

.loader { position: absolute; width: 64px; height: 64px; background: url(gfx/mc-spinner.gif); margin-left: -32px; margin-top: -32px; }