/*-- basic css tools--*/

/*- Alignment -*/
.alignleft {text-align:left;}/* links uitlijnen*/
.aligncenter {text-align:center; margin-left:auto; margin-right:auto;} /* centreren */
.alignright {text-align:right;}/* rechts uitlijnen */
.aligntop {vertical-align:text-top;} /* bovenaan uitlijnen */
.alignmiddle {vertical-align:middle;} /* vertikaal midden */
.alignbottom {vertical-align:text-bottom;} /* onderaan uitlijnen */
.textaligncenter{text-align: center;}

/*- Float -*/
.fl{float: left;} /* links floaten */
.fr{float: right;} /* rechts floaten*/
.clear{clear: both;} /* float afbreken*/

/*- Display -*/
.nobr{white-space: nowrap;} /*voorkomt afbreken van woorden <span class="nobr>design express</span>*/
.nopadding{padding: 0px;} /* geen padding */
.nomargin{margin: 0px;} /* geen margin */
.noborder{border: 0px;} /* geen border */
.nostyle{padding: 0px; margin: 0px; border: 0px} /* padding, margine en border verwijderen */
.nodecoration{text-decoration: none;} /* voorkomt underline bij links*/

.even{background-color: #ccc;} /* kleuren van regels in tabel*/
.odd{background-color: white;} /* kleuren van regels in tabel*/

.inline{display: inline;} /* inline weergeven bv bij unordered list voor navigatie*/
.block{display: block;} /* inline element als blok weergeven */
.hidden{display: none;} /* verstoppen van tekst en afbeelding*/

/*- lists -*/
.nolist {list-style: none;} /* haalt bolletjes van lijst <ul style='list-style: none'><li>item</li><li>item</li></ul>*/
.disclist{list-style: disc;} /* zet bolletjes op lijst indien deze er niet staan.<ul style='list-style: disc'><li>item</li><li>item</li></ul>*/
.circlelist{list-style: disc;} /* zet bolletjes op lijst indien deze er niet staan.<ul style='list-style: circle'><li>item</li><li>item</li></ul>*/
.squarelist{list-style: square;} /* zet bolletjes op lijst indien deze er niet staan.<ul style='list-style: square'><li>item</li><li>item</li></ul>*/
ul.ulnopadding{margin-left: 15px;padding-left: 0px;} /* lijnt unordered list links uit (geen insprong) */
ul.arrowlist li{list-style-image: url(http://192.168.0.71:8888/vectorworks2.0/images/arrowlist.gif);} /* lijst krijgt pijltjes ipv bolletjes */
li.nolidecoration{list-style: none; list-style-image: none;!important;}
acronym, abbr {cursor:help;border-bottom:1px dotted black;}/* <abbr style="cursor:help;border-bottom:1px dotted black;">test</abbr>*/

/*- links -*/
a.nounderline{text-decoration: none;} /*geen underline voor links, wel bij mouseover*/
a:hover.nounderline{text-decoration: underline;} 
a.blacklink{color: black;} /* zet de kleur van link op zwart*/
a.external{background: url("http://www.designexpress.be/images/famfamfam/custom/external.gif") center right no-repeat;padding-right: 16px;padding-top: 2px;} /* geeft aan dat het een externe link is */
.clickableimg{display: inline;}
.clickableimg img{display: inline;}
.clickableimg:after{content: url(http://192.168.0.71:8888/vectorworks2.0/images/zoom_in.png); border: 1px solid black; margin-left: 22px; padding: 2px; background-color: white;}
a img{border: 0px;} /* standaard zit er geen blauwe kader rondom images in een link*/

/*- text -*/
.b{font-weight: bold;} /*tekst in bold*/
.i{font-style: italic;} /* tekst in italic*/
.u{text-decoration: underline;} /* onderlijnen*/

.small{font-size: 9px;} /* tekst kleiner zetten*/
.normal{font-size: 11px;} /* tekst op normale grote*/
.large{font-size: 13px;} /* grote tekst */
.onderschrift{font-size: 8px; line-height: 10px;} /* kleinere tekst als onderschrift bij foto's*/

.grijs{color: #999999;} /* grijs*/
.donkergrijs{color: #4c4c4c;} /* donkergrijs*/
.rood{color: #cc0000;} /*rood*/
.roze{color: #ff00d8;}  /*roze*/
.wit{color: white;} /* wit*/
.zwart{color: black;} /* zwart*/
.donkerblauw{color: #006600;} /*donkerblauw*/

/*- achtergrond kleuren -*/
.bg_lichtgrijs{background-color: #F2F2F2;} /* achtergrond licht grijs*/


/*- border -*/
.borderblack{border: 1px solid black;} /* fijn zwarte lijntje*/
.bordergrey{border: 1px solid #ccc;} /* fijn grijs lijntje*/
.bt0{border-top: 0px;} /* zet lijn aan bovenzijde op nul*/
.bb0{border-bottom: 0px;} /* zet lijn aan onderzijde op nul*/
.bl0{border-left: 0px;} /* zet lijn links op nul*/
.br0{border-right: 0px;} /* zet lijn recths op nul*/
.dash{border-style: dashed;} /* kader als streepjes*/
.dot{border-style: dotted;} /* kader als dots*/
.kaderzwart{border: 1px solid black;} /* zwarte kader*/
.kadergrijs{border: 1px solid #e5e5e5;} /* kader in grijs*/
.button_shadow{
	background: url(http://192.168.0.71:8888/vectorworks2.0/images/button_shadow.png) top no-repeat;
	padding-right: 10px; padding-bottom: 10px;
} /* geeft knop schaduw*/

/*- form -*/
input{margin-left: 30px;border: 0px;border-top: 1px solid #999999;background-color: #E7E7E7;}
input[type="text"]{}
input[type="radio"]{}
input[type="checkbox"]{}
input[type="submit"]{}
input[type="checkbox"]{}
input[type="image"]{}
input[type="password"]{}
fieldset{}
legend{}


/*- padding margin-*/ 
/* boxmodel gaat als volgt: middenin zit je tekst, 
 -> rondom je tekst kan je padding toekenen,
 -> rondom je padding kan je een kader (border) trekken,
 -> rondom je kader kan je nog eens margin toekennen
 */
.p5{padding: 5px;} /* padding van 5*/
.p10{padding: 10px;} /* padding van 10*/
.p5t{padding-top: 5px;} /*padding van 5 op top*/
.p5b{padding-bottom: 5px;} /* padding van 5 aan buttom*/
.p5l{padding-left: 5px;} /* padding links van 5*/
.p5r{padding-right: 5px;} /* padding rechts van 5*/
.p10t{padding-top: 10px;} /* padding 10 bovenaan,.....*/
.p10b{padding-bottom: 10px;}
.p10l{padding-left: 10px;}
.p10r{padding-right: 10px;}
.p20t{padding-top: 20px;}
.p20b{padding-bottom: 20px;}
.p30t{padding-top: 30px;}
.p30b{padding-bottom: 30px;}
.p40t{padding-top: 40px;}
.p40b{padding-bottom: 40px;}
.p55t{padding-top: 55px;}
.m5{margin: 5px;} /* zelfde als padding maar dan met margin*/
.m10{margin: 10px;}
.m5t{margin-top: 5px;}tyg
.m5b{margin-bottom: 5px;}
.m5l{margin-left: 5px;}
.m5r{margin-right: 5px;}
.m10t{margin-top: 10px;}
.m10b{margin-bottom: 10px;}
.m10l{margin-left: 10px;}
.m10r{margin-right: 10px;}
.m20t{margin-top: 20px;}
.m30t{margin-top: 30px;}


/*-Height-*/
.h500{height: 500px;}
.h600{height: 600px;}
.h700{height: 700px;}
.h800{height: 800px;}
.h900{height: 900px;}
.h1000{height: 1000px;}

.wrapper{width: 960px; background-color: white;margin: auto;}
.linkerkolom{width: 190px; background-color: blue;float: left;}
.contentkolom{width: 580px;float:left;}
.contentkolomlinks{width: 420px; background-color: white;float: left;}
.contentkolomrechts{width: 160px; background-color: yellow;float: left;}
.rechterkolom{width: 190px; background-color: red; float:left;}

.clm{
/*-Column-*/
padding-left: 10px;
padding-right: 10px;
text-align: left;
background-color: white;
}
.span2{width: 98px;float: left;}
.span3{width: 160px;float: left;}
.span4{width: 220px;float: left;}
.span5{width: 280px;float: left;}
.span6{width: 340px;float: left;}
.span7{width: 400px;float: left;}
.span8{width: 460px;float: left;}
.span9{width: 520px;float: left;}
.span10{width: 580px;float: left;}

.body{background: url('http://www.smileycat.com/miaow/archives/images/misc/layout_grid.gif') top no-repeat;}

/*- filetypes-*/
.feed{
background: url('http://www.designexpress.be/images/famfamfam/feed.png') center right no-repeat;
padding-right: 16px;
padding-top: 4px;
} /* geeft een feed icon aan url <a href="huppeldepup" class="feed">feed</a>*/


.external{
background: url('http://www.designexpress.be/images/famfamfam/custom/external.gif') center right no-repeat;
padding-right: 16px;
padding-top: 2px;
} /* geeft een external icon aan url (a la wikipedia) <a href="huppeldepup" class="external">feed</a>*/

.film{
background: url('http://www.designexpress.be/images/famfamfam/film.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
} /* geeft een film icon aan url <a href="huppeldepup" class="film">feed</a>*/



.pdffile{
background: url('http://www.designexpress.be/images/famfamfam/page_white_acrobat.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
}  /* geeft een pdf icon aan url <a href="huppeldepup" class="pdf">feed</a>*/

.ipaper{
background: url('http://www.designexpress.be/images/famfamfam/page_white_text.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
}  /* geeft een icon van wit blad aan url <a href="huppeldepup" class="ipaper">feed</a>*/

.zipfile{
background: url('http://www.designexpress.be/images/famfamfam/compress.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
}  /* geeft een zip icon aan url <a href="huppeldepup" class="zip">feed</a>*/

.exefile{
background: url('http://www.designexpress.be/images/famfamfam/application.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
}  /* geeft een executable icon aan url <a href="huppeldepup" class="exefile">feed</a>*/

.wordfile{
background: url('http://www.designexpress.be/images/famfamfam/page_white_word.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
padding-top: 4px;
}  /* geeft een word document icon aan url <a href="huppeldepup" class="word">feed</a>*/

.excelfile{
background: url('http://www.designexpress.be/images/famfamfam/page_white_excel.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
} /* geeft een excel icon aan url <a href="huppeldepup" class="excel">feed</a>*/



.email{
background: url('http://www.designexpress.be/images/famfamfam/email.png') center left no-repeat;
padding-left: 20px;
padding-right: 5px;
padding-top: 4px;
} /*geeft een envelop icon aan url <a href="huppeldepup" class="email">feed</a>*/

.filesize{
font-size: 10px;
color: black;
} /* class voor filesize.php, in samenwerking met evendispatcher.js geeft dit de filesize achter een url */
/*met zip,word of pdf class*/