@import url("/stylesheets/reset.css");

body { background: #555; text-align: center; margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: Arial, sans-serif; }
div#imagesBackground { position: absolute; left: 0; top: 0; background: #222; width: 100%; height: 470px; }
div#wrapper { position: relative; width: 1000px; margin-right: auto; margin-left: auto; }
div#images { position: absolute; top: 20px; left: 20px; width: 920px; height: 350px; padding: 20px;  }
div#images div.image { position: relative; float: left; width: 300px; height: 170px; margin-right: 10px; margin-bottom: 10px; background: #000; }
div#images div.image.right { margin-right: 0px; }
div#images div.image.bottom { margin-bottom: 0px; }
div#images div.caseInfo { position: absolute; z-index: 100; top: 0; left: 0; width: 300px; height: 20px; background: #ddd; line-height: 20px; border-bottom: 1px solid #bbb; }
div#images div#largeImage { width: 920px; height: 350px; overflow: hidden; }

div#menu { position: absolute; top: 430px; left: 40px; width: 920px; }
div#menu ul { list-style: none; display: inline; padding: 0px; margin: 0px; }
div#menu ul li { float: left; width: 150px; height: 40px; font-size: 18px; line-height: 40px; border-right: 1px solid #222; }
div#menu ul li a { font-weight: normal; display: block; width: 150px; height: 40px; text-decoration: none; background: #333; color: #ddd; }
div#menu ul li a:hover { background: #555; }
div#menu ul li#current a { background: #ddd; color: #222; }

div#content { position: absolute; top: 470px; left: 40px; width: 920px; text-align: left; padding-bottom: 50px; }
div#content div#intro { position: relative; padding: 20px; background: #ddd; color: #222; overflow: auto; }
div#content div#body { position: relative; padding: 20px; background: #fff; color: #222; overflow: auto; }
div#content div#body div#assets { position: relative; float: left; background: #ddd; width: 190px; padding: 20px; font-size: 14px; margin-right: 20px; margin-bottom: 20px; }

div#content div#home { width: 100%; }
div#content div#home div#homeLeft { margin-right: 20px; width: 96px; }
div#content div#home div#homeRight { width: 740px; }
div#content div#home p { margin-top: 10px; }
div#content div#home ul { margin-top: 10px; font-size: 12px; }

div#content div#work { width: 100%; }
div#content div#work div#workLeft { margin-right: 20px; width: 200px; }
div#content div#work div#workRight { width: 640px; }
div#content div#work p { margin-top: 10px; }
div#content div#work ul { margin-top: 10px; font-size: 12px; }

div#content div#school { width: 100%; }
div#content div#school div#schoolLeft { margin-right: 20px; width: 200px; }
div#content div#school div#schoolRight { width: 640px; }
div#content div#school p { margin-top: 10px; }
div#content div#school ul { margin-top: 10px; font-size: 12px; }

div#content div#intro h2 { margin-bottom: 10px; font-size: 22px; }
div#content div#intro h2.noMargin { margin: 0px; }
div#content div.item { width: 100%; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; overflow: hidden; }
div#content div.item.last { margin-bottom: 0px; border-bottom: 0px; padding-bottom: 0px; }
div#content div.item div { float: left; width: 550px; }
div#content div.item img { float: left; margin-right: 20px; width: 300px; border-color: #ddd #bbb #bbb #ddd; border-style: solid; border-width: 1px; }
div#content div.item p.readMore { margin-top: 10px; }
div#content div.item span { display: block; font-size: 12px; margin-bottom: 10px; }

div#content div.topRight { position: absolute; right: 10px; top: 10px; }
div#content div.bottomRight { position: absolute; right: 10px; bottom: 10px; }

a#competentieLink { display: block; width: 200px; height: 30px; line-height: 30px; text-align: center; background: #333; color: #ddd; }
a#competentieLink:hover { background: #555; }
a.toonVoorbeelden { display: block; margin-top: 10px; height: 30px; width: 120px; line-height: 30px; text-align: center; background: #333; color: #ddd; font-size: 12px; }
a.toonVoorbeelden:hover { background: #555; color: #ddd; }

a.specialLink { display: block; float: left; background: #333; color: #ddd; padding: 7px; margin-top: 5px; margin-right: 5px; font-size: 14px; font-weight: normal; }
a.specialLink:hover { background: #555; color: #ddd; }

/* ---- BASICS ---- */
table th { padding: 10px; background: #ddd; border-bottom: 1px solid #bbb; vertical-align: top; }
table td { padding: 10px; background: #eee; border-bottom: 1px solid #bbb; vertical-align: top; }
table tr.last th, table tr.last td { border-bottom: 0px; }
table td.right, table th.right { text-align: right; }
a { color: #009; text-decoration: none; font-weight: bold; }
a:hover { color: #000; }
textarea { font-family: Arial, sans-serif; font-size: 14px; }
img { border-style: none; }

div.floatLeft { float: left; }
.small { font-size: 12px; }
.small.marginTop { margin-top: 6px; }
.small.marginBottom { margin-bottom: 10px; }
.marginTop { margin-top: 10px; }
.marginBottom { margin-bottom: 10px; }
hr { color: #ccc; }

/* ---- ERROR MESSAGES ---- */
div.fieldWithErrors { color: #f00; display: inline; }
div#errorExplanation { margin-bottom: 20px; width: 600px; min-height: 30px; background: #eee; }
div#errorExplanation h2 { background: #b00; color: #fff; margin: 0px; padding: 10px; font-size: 18px; }
div#errorExplanation p { margin: 0px; padding: 10px; }
div#errorExplanation ul { margin-left: 10px; margin-top: 0px; padding-bottom: 10px; }

.SI-FILES-STYLIZED label.cabinet { width: 86px; height: 29px; background: url("/images/choose_file.gif") 0 0 no-repeat; 
								   display: block; float: left; margin-right: 10px; overflow: hidden; cursor: pointer; }
.SI-FILES-STYLIZED label.cabinet input.file { position: relative; height: 100%; width: auto; opacity: 0; -moz-opacity: 0; }