/*************************************** Standaard css ****************************************/ /* reset Eric Meyer v1.0 | 20080212 */ /* update Max Hirschel v1.1 | 20090212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;vertical-align: baseline;background: transparent;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;} /* typography css blueprint */ body {font-size: 75%;color: #222; background: #fff;font-family: "Verdana", sans-serif;line-height:1.4em;} /* headings */ h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #005165; } h1 { font-size: 1.2em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 1.2em; margin-bottom: 0.75em; } h3 { font-size: 1em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1em; line-height: 1.25; margin-bottom: 1.25em; height: 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; } p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } #content img {margin: 0 10px;} a:focus, a:hover { color: #000; } a { color: #0098D8; text-decoration: underline; } strong { font-weight: bold; } em { font-style: italic; } sup, sub { line-height: 0; } /* Lists*/ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } /* Tables */ table { margin-bottom: 1.4em; width:100%; } th { text-align: left;font-weight: bold;} th,td { padding: 4px 10px 4px 5px; } tr.even td { background: #E5ECF9; } caption { background: #eee; } #bestelling td ul {margin:0px;list-style-type: none;} /* hier nog titel voor verzinnen */ .clear {clear:both;} img.left, div.caption.left {float: left;} img.right, div.caption.right {float: right;} div.caption {width: auto;} .read_more { margin: 0; } .read_more img {margin:6px 3px 0px 0px; display: none;} .read_more a {text-decoration: none; color: white;} .errorlist li {list-style-type: none;color: red;font-weight: bold;font-style: italic;} .errorlist {margin: 0px;} .error {color: red;font-weight: bold;font-style: italic;} p.error {margin:0px;} /* forms */ .radio td ul {margin: 0px;} .radio td ul li {list-style-type: none;} .ecard_form { text-align: left; color: white; /*margin-left: 20px; */ vertical-align: bottom; } /*************************************** Startpagina vmbo-bouwtechniek ***************************************/ .start #container {width: 948px; height:657px; background: top left no-repeat url(../img/bg_container.jpg);} .start #start_text {width: 500px; height: 100px; overflow: hidden; float: left; margin: 43px 0 0 15px;} .start #start_text strong {color: red;} .start #start_text p {font-size:110%; text-align: left;} .start #docentenlink {display: inline; width: 363px; height: 320px; float: left; margin: 37px 0 0 50px;} .start #docentenlink img {float: left; display: block; width: 363px; height: 320px; overflow: hidden;} .start #leerlingenlink {display: inline; width: 466px; height: 442px; float: left; margin: -98px 0 0 27px; overflow: hidden;} .start #leerlingenlink img {float:left; display: block; width: 466px; height: 442px; overflow: hidden;} .start #logo-block {float: left; display: block;z-index:4;margin-left: 40px; margin-top: 42px;} /*************************************** Kleuren vmbo-bouwtechniek ***************************************/ .light_blue { color: #0098D8; } .sea_green { color: #005165; } .red_brown { color: #8B2312; } .pink { color: #E42B38; } .gold_yellow { color: #FABD1E; } .dark_green { color: #003039; } .dark_red { color: #a1002e; } .red { color: #cc0000; } .purple { color: #7b00b3; } /*************************************** General layout docentenportal ***************************************/ #container {width: 965px; margin: 0 auto;background: top left no-repeat url(../img/bg_container.jpg);} #header {height: 150px;} #wrapper {float: left; width: 795px;} #navigation {float: left; width: 170px;} /* header */ #header {background:top right no-repeat url(../img/docentenheader.jpg);} #header #date {float: right;color: white;padding:5px; width: 775px; height: 91px; text-align: right;} #header #headertitle {float: left; width: 530px;} #header h1 {color: white; margin-left:20px;font-size:2em;} #header #logo {float: left; width: 151px; margin: 43px 19px 0 0;} #header form {float: right; width: 240px; height: 39px; background: transparent top left no-repeat url(../img/docenten-zoek.jpg);} #header #query {float: left; display: inline; background-color:transparent; border: medium none; height:17px; margin: 8px 0 0 9px; padding:4px 3px;width:138px; overflow: hidden;} #header input {float:right; display: inline; } /* main */ #main .content { position: relative; border: 2px #17667a solid; padding: 8px;} #bg { position:relative; min-height:314px; padding:10px 0;} #main .text { padding: 6px;} #bgwrapper { position: relative; background-color: #D6E2E8; padding: 10px; } /* Article picker */ .article #bgwrapper { background-color:#cadde6; padding: 0;} .article #articles { background: transparent url(../img/docenten_content_bg.gif) repeat-y left top; min-height:314px;padding:0 10px;} .article #bgwrapper h1 { padding: 0 10px 10px 10px; margin: 0;} .article #bgwrapper #articles h1 { padding: 0; } /* Per sectie */ .sectie-blauw #bgwrapper { background-color: #cadde6; } .sectie-geel #bgwrapper { background-color: #ffefcd; } .sectie-lichtblauw #bgwrapper { background-color: #c7e7f8; } .sectie-groen #bgwrapper { background-color: #c7f1e5; } .sectie-rood #bgwrapper { background-color: #e5cac7; } .sectie-blauwgroen #bgwrapper { background-color: #c7d9db; } /* navigation */ #navigation ul {margin: 3px 0 7px 0; list-style-type : none;} #navigation a {display: block; width: 140px; text-decoration: none;} #navigation a div {width: 98px;font-size: 10px;margin: 0 5px; padding: 3px 0;} #navigation li a { padding: 2px 5px; color: white;} #navigation .blauwgrijs li a {background-color: #2b5366;} #navigation .blauwgrijs li a:hover, #navigation .blauwgrijs li.selected a {background-color: #182d38;} #navigation .blauw li a {background-color: #008bd7;} #navigation .blauw li a:hover, #navigation .blauw li.selected a {background-color: #004c77;} #navigation .rood li a {background-color: #7d0d00;} #navigation .rood li a:hover, #navigation .rood li.selected a {background-color: #450700;} #navigation .blauwgroen li a {background-color: #11393e;} #navigation .blauwgroen li a:hover, #navigation .blauwgroen li.selected a{background-color: #091f22;} #navigation .geel li a {background-color: #ffb515;} #navigation .geel li a:hover, #navigation .geel li.selected a{background-color: #8c630c;} #navigation .groen li a {background-color: #219674;} #navigation .groen li a:hover, #navigation .groen li.selected a{background-color: #125240;} /* docenten portal page */ .docentenportal #bg {padding: 0;background-color: transparent;} .docentenportal #main td {width: 50%;padding:0px;} .docentenportal h2 {margin: 0; padding: 6px 6px 6px 6px; background-color: #2b5366; color: white; } .docentenportal #news {margin: 0 6px 6px 0;background-color: #c0ccd1;} .docentenportal #projects {margin: 0 6px 6px 0;background-color: #b8c4c5;} .docentenportal #projects h2 {background-color: #11393e; } .docentenportal ul {margin: 0 0 6px 21px;} .docentenportal #calendar {margin: 0 0 6px 0;background-color: #c0ccd1;} .docentenportal #klas_actief {margin: 0 0 6px 0;background-color: #ffe9b9;} .docentenportal #klas_actief li {list-style-type: none;} .docentenportal #klas_actief h2 {background-color: #ffb515;} .docentenportal a { text-decoration: none; } #klasactief li{ list-style-type: none; } /* POLL */ .docentenportal #poll {margin: 0 0 6px 0;background-color: #ffe9b9; text-transform: lowercase;} .docentenportal #poll li {list-style-type: none;} .docentenportal #poll h2 {background-color: #ffb515;} #main .poll_tag { padding: 6px;} /* news (articlepicker) page */ #main #contentbox #newspage table {width: 100%;} #main #articles h1 { padding-bottom:1em;} #main #articles #textwrapper {width: 66%;vertical-align: top; float: left;} #main #articles #text {background-color: white;padding: 6px;margin-left: 6px;} #main #picks {vertical-align: top;width: 225px; margin-right: 10px; padding: 10px; float: left;} #main #picks ul {margin: 0;padding: 0;list-style-type : none;} #main #picks li {margin: 0;padding: 0;} #main #picks a {display: block;margin: 0 0 3px 0;padding: 3px;text-decoration: none;color: black;background-color: #FEF2DA;} #main #picks a:hover, #main #picks a:active, #main #picks a:focus{background-color: #005165;color: white;} #main #picks .selected a{font-weight: bold;background-color: #FABD1E;} #emptytext {padding: 10px;} /* agenda page */ #main #picks h3 {color:black;margin-bottom: 0.5em;} /* onderwijsschema */ #schoolloopbaan_flash {margin:1em auto;display:block;} /* bestellen */ td.input input{width: 40px;} td .naam {font-weight: bold;} .portal .text ul li a {color: #000;} /* klas actief */ #sidebox { float:right; width: 200px; padding: 10px; margin: 10px; background-color: #f4b022; } /*************************************** Documenten upload systeem ***************************************/ .documenten a.submitbutton{background-color: #F0F0F0;border: 2px outset #F0F0F0;color: black;padding: 2px;margin: 0px 2px 0 0;text-decoration: none;} .documenten a.submitbutton:hover{border-style: inset;} /* loginscherm */ #login label{padding-right: 10px;} /* start een overzicht van documenten */ .documenten #start th{width: auto;} .documenten table{border-collapse: collapse;} .tabel td{border-top: 1px solid #17667A;border-bottom: 1px solid #17667A;vertical-align: top;} td.tdsize{width: 55px;} td.tddate{width: 65px;} /* Aanpassen en invoeren van een document */ .documenten #id_category,#id_document_type{width: 350px;} .documenten #id_name,#id_description{width: 340px;} /*************************************** timewriting ***************************************/ .timewriting img{vertical-align: bottom; padding-right: 10px;} .timewriting form ul{margin: 0px;} .timewriting form li{list-style-type: none;} /* tabellen layout */ #timewriting table{border-collapse: collapse;border-bottom:1px solid #97B5C0;margin-bottom: 10px;} #timewriting table th{width: 200px;} #timewriting table td{border-top: 1px solid #97B5C0;} /* overzicht uren op startpagina */ #timewriting #alert{color: red;font-weight: bold;font-style: italic;} #timewriting #unconfirmed_tasks{width: 400px;float: left;margin-right: 20px;} #timewriting #actions{width: 300px;float: left;} #timewriting ul.workdays table{display: none;width: 100%;background-color: #D6E2E8;} #timewriting ul.workdays table td{vertical-align: top;text-align:left;padding: 2px 10px 2px 2px;border-top: 1px solid #97B5C0;} #timewriting ul.workdays table td.projectname{width: 180px;} #timewriting ul.workdays table td.description{width: 180px;} #timewriting ul.workdays table td.hours, #timewriting ul.workdays table td.total_hours{width: 40px;text-align: right;} #timewriting ul.workdays table td.edit, #timewriting ul.workdays table td.delete{width: 20px;} #timewriting ul.workdays table td.total, #timewriting ul.workdays table td.total_hours{font-weight: bold;} #timewriting ul.workdays{margin: 0px;} #timewriting ul.workdays li{list-style-type: none;padding: 2px;margin-bottom: 10px;background-color:#97B5C0;} #timewriting ul.workdays li a{text-decoration:none;color: black;font-weight: bold;} #timewriting #actions form th{width: 90px;} #timewriting #actions form td select{ width: 200px;} #actions a.button{margin-left: 90px;} #actions h3{border-top: 1px solid #005165;padding-top: 2px;} /* Button van een a - tag */ #timewriting a.button{background-color: #F0F0F0;border: 2px outset #F0F0F0; color: black;padding: 2px;margin: 0px 2px 0 0;text-decoration: none; width: auto;} #timewriting a.button:hover{border-style: inset;} #timewriting input.submit{width: auto;margin-right: 10px;} /* forms */ #timewriting form table{border: 0px;} #timewriting form table td{padding: 5px 5px 5px 0pt;border: none;} #timewriting form select#id_hours, #timewriting form select#id_minutes{width: 50px;} #timewriting form input, #timewriting form textarea{width: 300px;} #timewriting form select{width: 305px;} #timewriting form .task_form select {width: auto; } #timewriting form .checkbox, #timewriting form #id_is_trashed{width: auto;} #timewriting #id_confirm, #timewriting #id_is_active, #timewriting #id_allow_all_users{width: auto;margin-left: 0px;} #timewriting #formulier_breed ul li label input{width: auto;margin-left: 0px;} /* layout project toevoegen */ #formulier_breed table{ width: 400px;} #formulier_breed input, #formulier_breed textarea{ margin-bottom: 2px;} /* tabellen */ .timewritingtable{width: 100%;} .timewritingtable th{background-color: #97B5C0;} .timewritingtable .subtotal{font-weight: bold;border-bottom: 1px solid black;background-color: #c6d6de;} .timewritingtable .total{font-weight: bold; background-color: #97B5C0;border-top: 1px solid black;border-bottom: 2px solid black;} #timewriting .timewritingtable .hours{text-align: right;} /******** Photos ********/ #bg #photos, #bg #gallery{ min-height: 314px; background-color:#11393D; } #photos li{ list-style: none; text-align:center; width:100%; display:inline; } #photos ul{ position:relative; display:inline; width:120px; height:115px; float:left; } #photos ul li a.caption{display : none} /*#gallery * {border: solid white 1px}*/ #gallery img, #photos img { border: solid #005156 1.5mm; line-height: 120px;} #gallery { text-align:center; width:100%; margin: 0px auto;} #gallery div{float:left;} #gallery #photo { width:540px; margin: 0px auto;} /* #gallery #photo img { width:500px;} Dont scale! The cms does that for us. :) */ #gallery .next, #gallery .previous{ width: 74px; position:relative;} #gallery .previous img{width:60px} #gallery .next img{width:60px; } #gallery #caption { display:none; } #gallery #download {float:none;} #gallery .next {float: right} #gallery .previous {float:left;} #nextholder, #previousholder{position:relative; width:88px; margin: 6px;} #nextholder { float:right; right:5px;} #previousholder { float:left, left:5px;} #gallery h1, #photos h1{color:white;} #gallery h1 { line-height: 30px; height: 30px; margin: 0px; padding: 0px; } #gallery p { line-height: 20px; margin: 0px; margin-bottom: 5px; } #gallery a:hover { color: #FFF; } #gallery li { float: left; width: 142px; height: 120px; position: relative; } #gallery ul { width: 715px; } #gallery li span { position: absolute; bottom: -5px; left: 0px; width: 100%; text-align: center; } #gallery p { color: #FFF; }