Initial commit

7 years ago · 15327b2d8c
commit 15327b2d8c
65 changed files with 2959 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.DS_Store
--- a/README.md
+++ b/README.md
@ -0,0 +1,4 @@
+Security-VM
+=================
+
+Security Workshop
--- a/bank/checkresetbob.php
+++ b/bank/checkresetbob.php
@ -0,0 +1,17 @@
+<?php
+$connection = new mysqli('localhost', 'bank', 'pass', 'bank');
+$result = $connection->query("SELECT * FROM gebruikers WHERE gebruikersnaam = 'Bob'");
+$row = $result->fetch_array();
+echo "Bob heeft: " . $row['balans'] . "<br>";
+
+if ((int)$row['balans'] >= 10000) {
+    echo "Bob is miljonair<br>";
+}
+
+echo "Updating back to 10.00<br>";
+
+$connection->query("UPDATE gebruikers SET balans = 10.00 WHERE gebruikersnaam = 'Bob'");
+$connection->close();
+
+
+?>
--- a/bank/index.php
+++ b/bank/index.php
@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Poespas Bank</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bank/bank.css" media="screen"/>
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+  </head>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+<body>
+<div id="header">
+<div class="container">
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+    <a class="brand" href="/bank"><img src="/themes/images/poespas.png" title="De bank die u kunt vertrouwen"></a>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+
+    <p>Welkom bij de Poespas Bank. De bank die u kunt vertrouwen.</p>
+    <p>Vul alleen uw gegevens in als u zeker weet dat u zich op de echte Poespas site bevind. </p>
+
+     <hr />
+
+<?php
+if($_POST) {
+    /**
+     * Maak verbinding met de database
+     */
+    $connection = new mysqli('localhost', 'bank', 'pass', 'bank')
+        or die('Kan geen verbinding maken met MySQL');
+
+    /**
+     * Zoek gebruiker in de database met de juiste gebruikersnaam en wachtwoord
+     */
+    $query = "SELECT * FROM gebruikers WHERE gebruikersnaam = '" . $_POST['gebruikersnaam'] . "' AND wachtwoord = '" . $_POST['wachtwoord'] . "'";
+
+    $result = $connection->query($query)
+      or die('<div class="alert alert-danger">Query error: <pre>' . $connection->error . '</pre>Query: <code>' . $query . '</code> </div>');
+
+    /**
+     * Kijk of de query iets heeft teruggegeven. Anders geven we een error
+     */
+    if($result->num_rows == 0) {
+       die('<div class="alert alert-danger">Inlog gegevens niet correct</div>');
+    } else {
+
+        /**
+         * Gebruiker heeft correct ingelogd. Laat zijn balans zien
+         */
+         $row = $result->fetch_array();
+
+         echo "<div class=\"well\">Welkom terug " . $row['gebruikersnaam'] . "! ";
+         echo "Uw balans is op dit moment: <b>" . $row['balans'] . " euro</b></div>";
+    }
+    $connection->close();
+} else {
+
+    /**
+     * Laat inlogformulier zien
+     */
+?>
+    <div class="span4 signin-container">
+
+         <form class="form-signin" method="POST">
+             <h3 class="form-signin-heading">Inloggen Mijn Poespas</h3>
+             <input type="text" name="gebruikersnaam" class="input-block-level" placeholder="Gebruikersnaam">
+             <input type="text" name="wachtwoord" class="input-block-level" placeholder="Wachtwoord">
+         <button class="btn btn-primary" type="submit">Inloggen</button>
+      </form>
+     </div>
+
+<?php
+}
+?>
+	<hr class="soft"/>
+	</div>
+</div>
+
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/bank/index_multi.php
+++ b/bank/index_multi.php
@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Poespas Bank</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bank/bank.css" media="screen"/>
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+  </head>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+<body>
+<div id="header">
+<div class="container">
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+    <a class="brand" href="/bank/index_multi.php"><img src="/themes/images/poespas.png" title="De bank die u kunt vertrouwen"></a>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+
+    <p>Welkom bij de Poespas Bank. De bank die u kunt vertrouwen.</p>
+    <p>Vul alleen uw gegevens in als u zeker weet dat u zich op de echte Poespas site bevind. </p>
+
+     <hr />
+
+<?php
+if($_POST) {
+    /**
+     * Maak verbinding met de database
+     */
+    $connection = new mysqli('localhost', 'bank', 'pass', 'bank')
+        or die('Kan geen verbinding maken met MySQL');
+
+    /**
+     * Zoek gebruiker in de database met de juiste gebruikersnaam en wachtwoord
+     */
+    $query = "SELECT * FROM gebruikers WHERE gebruikersnaam = '" . $_POST['gebruikersnaam'] . "' AND wachtwoord = '" . $_POST['wachtwoord'] . "'";
+
+    $connection->multi_query($query);
+
+    do {
+        $result = $connection->store_result();
+    } while (@$connection->next_result());
+
+    if($connection->error)
+        die('<div class="alert alert-danger">Query error: <pre>|' . $connection->error . '|</pre>Query: <code>' . $query . '</code> </div>');
+
+    /**
+     * Kijk of de query iets heeft teruggegeven. Anders geven we een error
+     */
+    if($result->num_rows == 0) {
+       die('<div class="alert alert-danger">Inlog gegevens niet correct</div>');
+    } else {
+
+        /**
+         * Gebruiker heeft correct ingelogd. Laat zijn balans zien
+         */
+         $row = $result->fetch_array();
+
+         echo "<div class=\"well\">Welkom terug " . $row['gebruikersnaam'] . "! ";
+         echo "Uw balans is op dit moment: <b>" . $row['balans'] . " euro</b></div>";
+    }
+    $connection->close();
+} else {
+
+    /**
+     * Laat inlogformulier zien
+     */
+?>
+    <div class="span4 signin-container">
+
+         <form class="form-signin" method="POST">
+             <h3 class="form-signin-heading">Inloggen Mijn Poespas (multiquery)</h3>
+             <input type="text" name="gebruikersnaam" class="input-block-level" placeholder="Gebruikersnaam">
+             <input type="text" name="wachtwoord" class="input-block-level" placeholder="Wachtwoord">
+         <button class="btn btn-primary" type="submit">Inloggen</button>
+      </form>
+     </div>
+
+<?php
+}
+?>
+	<hr class="soft"/>
+	</div>
+</div>
+
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/bank/index_xss.php
+++ b/bank/index_xss.php
@ -0,0 +1,60 @@
+<?php
+if($_POST) {
+    header('Location: /bank/message.php?m=Wegens recente hack pogingen is de inlogpagina tijdelijk uitgeschakeld.');
+    return;
+}
+?><html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Poespas Bank</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bank/bank.css" media="screen"/>
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+  </head>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+<body>
+<div id="header">
+<div class="container">
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+    <a class="brand" href="/bank"><img src="/themes/images/poespas.png" title="De bank die u kunt vertrouwen"></a>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+
+    <p>Welkom bij de Poespas Bank. De bank die u kunt vertrouwen.</p>
+    <p>Vul alleen uw gegevens in als u zeker weet dat u zich op de echte Poespas site bevind. </p>
+
+     <hr />
+
+    <div class="span4 signin-container">
+
+         <form class="form-signin" method="POST">
+             <h3 class="form-signin-heading">Inloggen Mijn Poespas (XSS)</h3>
+             <input type="text" name="gebruikersnaam" class="input-block-level" placeholder="Gebruikersnaam">
+             <input type="text" name="wachtwoord" class="input-block-level" placeholder="Wachtwoord">
+         <button class="btn btn-primary" type="submit">Inloggen</button>
+      </form>
+     </div>
+	<hr class="soft"/>
+	</div>
+</div>
+
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/bank/message.php
+++ b/bank/message.php
@ -0,0 +1,48 @@
+<?php header('X-XSS-Protection: 0'); // Disable XSS protection in modern browsers to allow the exercises to work?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Poespas Bank</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bank/bank.css" media="screen"/>
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+  </head>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+<body>
+<div id="header">
+<div class="container">
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+    <a class="brand" href="/bank"><img src="/themes/images/poespas.png" title="De bank die u kunt vertrouwen"></a>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+     <hr />
+
+<div class="alert alert-info">
+<?php
+    echo $_GET['m'];
+?>
+</div>
+	<hr class="soft"/>
+	</div>
+</div>
+
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/build-vm/.gitignore
+++ b/build-vm/.gitignore
@ -0,0 +1,4 @@
+vmbuilder.cfg
+vmbuilder.copy
+ubuntu-vmw6
+*~
--- a/build-vm/boot.sh
+++ b/build-vm/boot.sh
@ -0,0 +1,36 @@
+#!/bin/sh
+# This script runs each time the VM starts up
+
+echo
+cd /home/security/workshop
+
+# Update repository
+git clean -f
+git pull origin master
+
+# Update Apache configuration
+cp build-vm/security-workshop.apache.conf /etc/apache2/sites-available/security-workshop.conf
+a2dissite 000-default
+a2ensite security-workshop
+service apache2 reload
+
+# Prepare image site
+chmod o+w image/uploads
+cp -R image/uploads ..
+chmod o+w ../uploads
+echo "TODO: Fix AE-35 Unit" > /etc/geheim.txt
+
+# Update database
+echo "Resetting database"
+mysql -u root < build-vm/database.sql
+
+# Show welcome message
+IP=`ifconfig eth0 | grep 'inet addr:' | cut -d: -f2 | awk '{ print \$1}'`
+
+echo
+echo
+echo " De Security Workshop VM is nu opgestart"
+echo " Ga met je browser naar deze URL:"
+echo
+echo "       \033[0;32mhttp://$IP/\033[0m"
+echo
--- a/build-vm/build.sh
+++ b/build-vm/build.sh
@ -0,0 +1,15 @@
+#!/bin/bash
+
+BUILDDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+sed "s|BUILDDIR|$BUILDDIR|g" < vmbuilder.cfg.template  > vmbuilder.cfg
+sed "s|BUILDDIR|$BUILDDIR|g" < vmbuilder.copy.template > vmbuilder.copy
+
+echo "Building Virtual Machine for Security Workshop..."
+echo "(Requires vmbuilder, install with: 'sudo apt-get install python-vm-builder')"
+
+sudo vmbuilder vmw6 ubuntu --config vmbuilder.cfg -o
+
+sudo sed -i "s/bridged/nat/" ubuntu-vmw6/security-workshop.vmx
+sudo mv ubuntu-vmw6/*.vmdk ubuntu-vmw6/security-workshop.vmdk
+sudo sed -i "s/fileName = \"[^\"]*\"/fileName = \"security-workshop.vmdk\"/" ubuntu-vmw6/security-workshop.vmx
--- a/build-vm/database.sql
+++ b/build-vm/database.sql
@ -0,0 +1,150 @@
+-- Don't look here for answers you cheater.
+-- Go out there and actually hack those sites!
+
+
+-- Recreate webshop user
+-- (really long procedure for non existing 'DROP USER IF EXISTS' construct in MySQL)
+-- See: http://bugs.mysql.com/bug.php?id=19166
+CREATE DATABASE IF NOT EXISTS temp;
+DROP PROCEDURE IF EXISTS `temp`.`drop_user_if_exists` ;
+DELIMITER $$
+CREATE PROCEDURE `temp`.`drop_user_if_exists`(username VARCHAR(100))
+BEGIN
+  DECLARE foo BIGINT DEFAULT 0 ;
+  SELECT COUNT(*)
+  INTO foo
+    FROM `mysql`.`user`
+      WHERE `User` = username;
+
+  IF foo > 0 THEN
+      SELECT CONCAT('DROP USER ', GROUP_CONCAT(CONCAT(QUOTE(username), '@', QUOTE('localhost'))))
+      INTO @sql;
+      PREPARE stmt FROM @sql;
+      EXECUTE stmt;
+  END IF;
+END ;$$
+DELIMITER ;
+CALL `temp`.`drop_user_if_exists`('webshop') ;
+CALL `temp`.`drop_user_if_exists`('bank') ;
+CALL `temp`.`drop_user_if_exists`('nieuws') ;
+CALL `temp`.`drop_user_if_exists`('wiki') ;
+DROP DATABASE temp;
+
+CREATE USER 'webshop'@'localhost' IDENTIFIED BY 'pass';
+GRANT ALL PRIVILEGES ON  `webshop`.* TO  'webshop'@'localhost';
+
+DROP DATABASE IF EXISTS webshop;
+CREATE DATABASE webshop;
+USE webshop;
+
+CREATE TABLE `gebruikers` (
+  `id` int(11) NOT NULL,
+  `gebruikersnaam` varchar(255) NOT NULL,
+  `wachtwoord` varchar(255) NOT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+INSERT INTO `gebruikers` (`id`, `gebruikersnaam`, `wachtwoord`) VALUES
+(1, 'Admin', 'ikbenzoslim'),
+(2, 'Paul', 'wachtwoord12345'),
+(3, 'Wim', '1337hacker'),
+(4, 'Marco', 'apple4ever');
+
+CREATE TABLE `producten` (
+  `id` int(11) NOT NULL,
+  `naam` varchar(255) NOT NULL,
+  `prijs` decimal(10,2) NOT NULL,
+  `beschrijving` text NOT NULL,
+  `afbeelding` varchar(255) NOT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+INSERT INTO `producten` (`id`, `naam`, `prijs`, `beschrijving`, `afbeelding`) VALUES
+(1, 'Kraan Deluxe', 100.00, 'Onze beste kraan! Past perfect bij elk interieur', 'deluxe.jpg'),
+(2, 'Kraan Basis', 5.00, 'Kraan zonder poespas', 'basis.jpg'),
+(3, 'Geldkraan', 30.00, 'Lastig open te draaien, maar makkelijk om dicht te draaien. Betaalt zichzelf terug', 'geld.jpg'),
+(4, 'Dubbel afsluitbare kraan', 40.00, 'Voor als u nog zekerder wilt zijn dat uw kraan niet lekt', 'kurk.jpg');
+
+
+CREATE USER 'bank'@'localhost' IDENTIFIED BY 'pass';
+GRANT ALL PRIVILEGES ON `bank`.* TO 'bank'@'localhost';
+
+DROP DATABASE IF EXISTS bank;
+CREATE DATABASE bank;
+USE bank;
+
+CREATE TABLE `gebruikers` (
+  `gebruikersnaam` varchar(255) NOT NULL,
+  `wachtwoord` varchar(255) NOT NULL,
+  `balans` decimal(10,2) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Gegevens worden uitgevoerd voor tabel `gebruikers`
+--
+
+INSERT INTO `gebruikers` (`gebruikersnaam`, `wachtwoord`, `balans`) VALUES
+('Alice', 'fluviusmaximus', 2600.00),
+('Bob', '123456', 10.00),
+('Carol', 'cuteasabuttonintheeyes', 42.00);
+
+CREATE USER 'nieuws'@'localhost' IDENTIFIED BY 'pass';
+GRANT ALL PRIVILEGES ON  `nieuws`.* TO  'nieuws'@'localhost';
+
+DROP DATABASE IF EXISTS nieuws;
+CREATE DATABASE nieuws;
+USE nieuws;
+
+CREATE TABLE `commentaar` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `auteur` varchar(255) NOT NULL,
+  `bericht` text NOT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
+
+INSERT INTO `commentaar` (`id`, `auteur`, `bericht`) VALUES
+(1, 'Paul', 'Hoera!');
+
+
+CREATE TABLE `gebruikers` (
+  `gebruikersnaam` varchar(255) NOT NULL,
+  `wachtwoord` varchar(255) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+INSERT INTO `gebruikers` (`gebruikersnaam`, `wachtwoord`) VALUES
+('Hank', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('John', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Pete', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Bob', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Thomas', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Hansel', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('William', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Harry', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Martin', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Charles', 'eb25f9edd38c8ac53380cb5d898dd2e0a33921b1'),
+('Admin', 'b56261f2bd5e758a55a1865c1b54e7ed947253e5');
+
+
+
+CREATE USER 'wiki'@'localhost' IDENTIFIED BY 'pass';
+GRANT ALL PRIVILEGES ON  `wiki`.* TO  'wiki'@'localhost';
+
+DROP DATABASE IF EXISTS wiki;
+CREATE DATABASE wiki;
+USE wiki;
+
+CREATE TABLE `paginas` (
+  `id` int(11) NOT NULL,
+  `secret` int(11) NOT NULL,
+  `titel` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
+  `tekst` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+INSERT INTO `paginas` (`id`, `secret`, `titel`, `tekst`) VALUES
+(0, 1, 'Illuminati', 'De elite, althans het deel van de elite dat zich de illuminati ("de verlichten") noemt, bestaat in de kern uit 13 steenrijke, zionistische (1) families die voortdurend met elkaar in verbinding staan. Hun namen zijn waarschijnlijk Rothschild, Rockefeller, Warburg, Bruce, Cavendish, De Medici, Hannover, Habsburg, Krupp, Plantagenet, Romanov, Sinclair en Windsor. Maar deze lijst wordt zo angstvallig verborgen gehouden voor de buitenwereld, dat sommige bronnen op een aantal plekken een andere naam noemen (2).Ze worden ondersteund door 300 andere families, vaak met bekende namen zoals Agnelli, Bush, Ford, Kuhn, Loeb, Montgomery, Morgan, Roosevelt en Schiff (3). Daaromheen bewegen zich nog een heleboel machtsbeluste lieden, zoals Henry Kissinger, Dick Cheney, Donald Rumsfeld, Bill Gates, Bill en Hillary Clinton, Warren Buffet, etc. Tezamen controleren ze praktisch alle macht en het geld in de wereld.'),
+(1, 0, 'Frankrijk', 'Frankrijk is een democratische republiek. De president van de Franse Republiek wordt sinds 2002 voor vijf jaar gekozen (voorheen was dat zeven jaar). De president heeft sinds de invoering van de Vijfde Republiek in 1958 veel macht vergeleken met andere westerse democratieen, omdat die regeringen kan benoemen en ontslaan, en de uitvoerende macht sterk staat tegenover de wetgevende macht. De president heeft geen vertrouwensvotum van het parlement nodig, want hij/zij wordt via landelijke verkiezingen direct gekozen en kan zonder zelf af te treden het parlement een maal voortijdig ontbinden en vervroegde parlementsverkiezingen uitschrijven.'),
+(2, 0, 'Nederland', 'Nederland is een constitutionele erfmonarchie en staatsrechtelijk gezien een parlementaire democratie. Belangrijke mijlpalen in de politieke geschiedenis waren de grondwetsherziening van 1848 onder leiding van de liberale staatsman Thorbecke, waarbij onder meer een einde werd gemaakt aan de persoonlijke regeermacht van de koning, de koninklijke onschendbaarheid en de ministeriele verantwoordelijkheid voor het regeringsbeleid werden ingevoerd en het parlement meer invloed kreeg; en 1919, toen het algemeen kiesrecht werd ingevoerd. De Nederlandse politiek werd lange tijd gekenmerkt door de verzuiling, de opdeling van de bevolking in verschillende maatschappelijke groepen. Tegelijkertijd is er een sterk streven naar het bereiken van consensus, vaak aangeduid als het poldermodel. In internationaal perspectief staat Nederland voorts bekend om zijn liberale beleid op het gebied van drugs, prostitutie, euthanasie en het homohuwelijk. De hoofdstad van Nederland is Amsterdam. Den Haag is echter al sinds de zestiende eeuw bijna onafgebroken de regeringszetel en de woonplaats van de vorst.'),
+(3, 0, 'Duitsland', 'De Bondsrepubliek Duitsland is met haar grondwet van 23 mei 1949 een democratisch-parlementaire bondsstaat. De grondwet kan door een tweederdemeerderheid in Bondsdag en bondsraad gewijzigd worden. Enkele artikelen, waarin de basisprincipes van de grondwet zoals de federale structuur van de staat, de democratische, sociale en rechtsprincipes van de staat, en de onschendbaarheid van de menselijke waarde van het individu, zijn van iedere wijziging uitgesloten.');
+
+ALTER TABLE `paginas`
+ ADD PRIMARY KEY (`id`);
--- a/build-vm/security-workshop.apache.conf
+++ b/build-vm/security-workshop.apache.conf
@ -0,0 +1,12 @@
+<VirtualHost *:80>
+
+	DocumentRoot /home/security/workshop
+
+	<Directory "/home/security/workshop">
+		Options All
+		AllowOverride All
+		Require all granted
+	</Directory>
+
+</VirtualHost>
+
--- a/build-vm/security-workshop.conf
+++ b/build-vm/security-workshop.conf
@ -0,0 +1,11 @@
+# Upstart script that is placed in /etc/init in the VM
+# It runs the boot.sh after mysql and networking have started
+
+description      "Security Workshop"
+author           "Paul Wagener <mail@paulwagener.nl>"
+
+start on (net-device-up and started mysql)
+
+exec /home/security/workshop/build-vm/boot.sh
+console output
+
--- a/build-vm/vmbuilder.cfg.template
+++ b/build-vm/vmbuilder.cfg.template
@ -0,0 +1,14 @@
+[DEFAULT]
+arch = i386
+user = security
+name = Security Workshop
+pass = security
+copy = BUILDDIR/vmbuilder.copy
+execscript = BUILDDIR/vmbuilder.postinst
+verbose = true
+
+[ubuntu]
+suite = trusty
+flavour = virtual
+addpkg = linux-image-generic, apache2, git-core, phantomjs, php5-cli, php5-mysql, libapache2-mod-php5, mysql-server, mysql-client
+hostname = security-workshop
--- a/build-vm/vmbuilder.copy.template
+++ b/build-vm/vmbuilder.copy.template
@ -0,0 +1 @@
+BUILDDIR/security-workshop.conf /etc/init/security-workshop.conf
--- a/build-vm/vmbuilder.postinst
+++ b/build-vm/vmbuilder.postinst
@ -0,0 +1,4 @@
+#!/bin/sh
+
+chroot $1 git clone https://git.paulwagener.nl/Paul/Security-Quiz.git /home/security/workshop
+
--- a/image/image.php
+++ b/image/image.php
@ -0,0 +1,5 @@
+<?php
+
+echo file_get_contents('../../' . $_GET['file']);
+
+?>
--- a/image/image_check_prefix.php
+++ b/image/image_check_prefix.php
@ -0,0 +1,10 @@
+<?php
+
+// Controleer of de string begint met 'uploads'
+if(substr($_GET['file'], 0, 7) == 'uploads') {
+    echo file_get_contents('../../' . $_GET['file']);
+} else {
+    echo "Bestand moet in uploads map staan!";
+}
+
+?>
--- a/image/image_remove_traversal.php
+++ b/image/image_remove_traversal.php
@ -0,0 +1,8 @@
+<?php
+
+// Remove '../' from the URL
+$file = str_replace('../', '', $_GET['file']);
+
+echo file_get_contents('../../'.$file);
+
+?>
--- a/image/index.php
+++ b/image/index.php
@ -0,0 +1,41 @@
+<?php
+if($_FILES) {
+    move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);
+}
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>imgr: the simple image sharer</title>
+
+    <link rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+    <link rel="stylesheet" href="/themes/css/imgr.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+  <body class="row-fluid">
+
+    <div id="site-header">
+      <img src="/themes/images/imgr.png" class="offset1">
+    </div>
+
+    <div class="panel span6 offset1 images">
+        <div class="header">De <em>meest recente</em> plaatjes van vandaag:</div>
+        <?php
+        foreach ( glob('uploads/*') as $image ) {
+            echo '<a href="'.$image.'"><img src="'.$image.'"></a>';
+        }
+        ?>
+    </div>
+
+    <div class="panel span4">
+      <form enctype="multipart/form-data" method="POST">
+        <input type="file" name="file">
+        <button type="submit">Upload afbeelding</button>
+      </form>
+    </div>
+
+  </body>
+</html>
--- a/image/index_more_pages.php
+++ b/image/index_more_pages.php
@ -0,0 +1,50 @@
+<?php
+if($_FILES) {
+    move_uploaded_file($_FILES["file"]["tmp_name"], "../../uploads/" . $_FILES["file"]["name"]);
+}
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>imgr: the simple image sharer</title>
+
+    <link rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+    <link rel="stylesheet" href="/themes/css/imgr.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+  <body class="row-fluid">
+
+    <div id="site-header">
+      <img src="/themes/images/imgr.png" class="offset1">
+      <a href="index_more_pages.php?include=login.php">Inloggen</a>
+      <a href="index_more_pages.php?include=register.php">Registreren</a>
+    </div>
+
+    <div class="panel span6 offset1 images">
+        <?php
+        if(isset($_GET['include'])) {
+
+            if(substr($_GET['include'], -4) == '.php') {
+                include($_GET['include']);
+            } else {
+                echo 'Dit is geen PHP bestand';
+            }
+
+        } else {
+            echo "<p>Wegens een security probleem in onze site kun je tijdelijk geen afbeeldingen bekijken.</p>";
+        }
+        ?>
+    </div>
+
+    <div class="panel span4">
+      <form enctype="multipart/form-data" method="POST">
+        <input type="file" name="file">
+        <button type="submit">Upload afbeelding</button>
+      </form>
+    </div>
+
+  </body>
+</html>
--- a/image/index_no_public_uploads.php
+++ b/image/index_no_public_uploads.php
@ -0,0 +1,42 @@
+<?php
+if($_FILES) {
+    move_uploaded_file($_FILES["file"]["tmp_name"], "../../uploads/" . $_FILES["file"]["name"]);
+}
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>imgr: the simple image sharer</title>
+
+    <link rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+    <link rel="stylesheet" href="/themes/css/imgr.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+  <body class="row-fluid">
+
+    <div id="site-header">
+      <img src="/themes/images/imgr.png" class="offset1">
+    </div>
+
+    <div class="panel span6 offset1 images">
+        <div class="header">De <em>meest recente</em> plaatjes van vandaag:</div>
+        <?php
+        foreach ( glob('../../uploads/*') as $image ) {
+            $image = 'image.php?file=uploads/' . basename($image);
+            echo '<a href="'.$image.'"><img src="'.$image.'"></a>';
+        }
+        ?>
+    </div>
+
+    <div class="panel span4">
+      <form enctype="multipart/form-data" method="POST">
+        <input type="file" name="file">
+        <button type="submit">Upload afbeelding</button>
+      </form>
+    </div>
+
+  </body>
+</html>
--- a/image/login.php
+++ b/image/login.php
@ -0,0 +1 @@
+Binnenkort kunt u hier inloggen
--- a/image/register.php
+++ b/image/register.php
@ -0,0 +1 @@
+Binnenkort kunt u hier registreren
--- a/image/uploads/bobross.jpg
+++ b/image/uploads/bobross.jpg
--- a/image/uploads/diver.jpg
+++ b/image/uploads/diver.jpg
--- a/image/uploads/gynbutterfly.jpg
+++ b/image/uploads/gynbutterfly.jpg
--- a/image/uploads/hydrant.jpg
+++ b/image/uploads/hydrant.jpg
--- a/image/uploads/science.png
+++ b/image/uploads/science.png
--- a/image/uploads/stars.jpg
+++ b/image/uploads/stars.jpg
--- a/index.php
+++ b/index.php
@ -0,0 +1,32 @@
+De virtuele machine werkt! Lees de opgave om te beginnen met hacken.
+
+<p>
+<a href="/bank/">Bank</a><br />
+<a href="/bank/index_multi.php">Bank (multi_query)</a><br />
+<a href="/bank/index_xss.php">Bank (xss)</a>
+</p>
+
+<p>
+<a href="/webshop/">Webshop</a><br>
+<a href="/webshop/product_detail_replace.php?id=1">Webshop (replace)</a>
+</p>
+
+<p>
+<a href="/wereldwijs/index.php?id=1">Wereldwijs</a><br />
+<a href="/wereldwijs/index_xss.php">Wereldwijs (XSS)</a>
+</p>
+
+<p>
+<a href="/nieuws/">Nieuws</a><br>
+<a href="/nieuws/users.php">Nieuws (users)</a><br>
+<a href="/nieuws/login.php">Nieuws (login)</a>
+</p>
+
+<p>
+<a href="/image/">Image</a><br>
+<a href="/image/index_no_public_uploads.php">Image 2</a><br>
+<a href="/image/index_more_pages.php">Image 3</a>
+</p>
+
+<hr>
+<footer>Laatste update: <?php echo `git log -1 --format="%cd"`; ?></footer>
--- a/nieuws/admincheck.js
+++ b/nieuws/admincheck.js
@ -0,0 +1,6 @@
+var page = require('webpage').create();
+page.open('http://localhost/nieuws/login.php', 'post', 'gebruikersnaam=Admin&wachtwoord=sesame', function() {
+    setTimeout(function(){
+        phantom.exit();
+    }, 3000);
+});
--- a/nieuws/admincheck.php
+++ b/nieuws/admincheck.php
@ -0,0 +1,57 @@
+<?php
+header('X-XSS-Protection: 0');
+session_start();
+
+// Check if admin logged in
+if(@$_POST['email'] == 'admin@nieuws.nl' && @$_POST['password'] == 'sesame') {
+    $_SESSION['admin'] = true;
+}
+
+$connection = new mysqli('localhost', 'nieuws', 'pass', 'nieuws')
+    or die('Kan geen verbinding maken met MySQL');
+
+// Add a comment
+if(isset($_POST['addcomment'])) {
+    $connection->query("INSERT INTO commentaar SET auteur='anoniem', bericht='".$connection->real_escape_string($_POST['comment'])."'");
+}
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>NIEUWS.nl</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="/themes/css/nieuws.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+
+<img src="/themes/images/nieuws.png" id="logo">
+<section id="middle">
+<div id="datum"><?php setlocale(LC_ALL, 'nl_NL'); echo strftime("%A %e %B %Y"); ?>. Het laatste nieuws het eerst op NIEUWS.nl</div>
+
+
+<div id="admincheck">
+<?php
+
+if($_POST) {
+    shell_exec('phantomjs admincheck.js');
+    echo '<div class="alert alert-warning">De administrator heeft op '.date('r').' een kijkje op de reactie pagina genomen</div>';
+}
+?>
+
+    Problemen met de website? Laat het de administrator weten en hij komt een kijkje nemen op de <a href="/nieuws/">reactie pagina</a>.
+    <form method="POST">
+        <button type="submit" name="submit" class="btn btn-primary">Stuur <?php if($_POST)echo 'nog';?> een berichtje naar de administrator</button>
+    </form>
+</div>
+</section>
+</body>
+</html>
--- a/nieuws/index.php
+++ b/nieuws/index.php
@ -0,0 +1,104 @@
+<?php
+header('X-XSS-Protection: 0');
+session_start();
+
+$connection = new mysqli('localhost', 'nieuws', 'pass', 'nieuws')
+    or die('Kan geen verbinding maken met MySQL');
+
+// Add a comment
+if(isset($_POST['addcomment'])) {
+    $connection->query("INSERT INTO commentaar SET auteur='anoniem', bericht='".$connection->real_escape_string($_POST['comment'])."'");
+}
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>NIEUWS.nl</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="/themes/css/nieuws.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+
+<img src="/themes/images/nieuws.png" id="logo">
+<section id="middle">
+<div id="datum"><?php setlocale(LC_ALL, 'nl_NL'); echo strftime("%A %e %B %Y"); ?>. Het laatste nieuws het eerst op NIEUWS.nl</div>
+
+<?php
+
+if(isset($_SESSION['gebruikersnaam']))
+    echo '<div class="alert alert-info">Je bent nu ingelogd als '.$_SESSION['gebruikersnaam'].'</div>';
+
+
+if(isset($_SESSION['admin']))
+    echo '<div class="alert alert-warning">Welkom terug administrator! De geheime code is: "Setec Astronomy".</div>';
+
+?>
+
+
+<div id="category">Algemeen / Binnenland</div>
+
+<article>
+    <div id="published">Gepubliceerd: 23 oktober 2012 06:35</div>
+    <div id="update">Laatste update: 23 oktober 2012 06:35</div>
+
+    <h1>Avans opnieuw beste hogeschool</h1>
+
+    <h2 class="summary">LEIDEN - Hogeschool Avans in Noord-Brabant is opnieuw de beste grote hbo-instelling van Nederland.</h2>
+  <img width="132" height="132" src="/themes/images/school.jpg" alt="">
+
+    <p>Dat staat in de dinsdag verschenen <a target="_blank" href="http://www.keuzegids.org/hbovoltijd">Keuzegids Hbo Voltijd 2013</a>. Deze gids vergelijkt hogescholen op basis van statistieken over studiesucces, oordeel van deskundigen uit de accreditatie en het oordeel van studenten.</p>
+
+    <p>Avans krijgt 71 punten, evenveel als vorig jaar. Ook de nummer 2 is onveranderd: Hogeschool Zeeland in Vlissingen. De NHTV in Breda is de nieuwe nummer 3. Hogeschool InHolland is net als vorig jaar de hekkensluiter van de lijst met 51 punten.</p>
+
+    <p>Bij de middelgrote hogescholen met gemiddeld ongeveer 2000 studenten moet de Christelijke Hogeschool Ede (81 punten) voor het eerst in jaren de bovenste plaats afstaan aan een ander.</p>
+
+    <p>De Gereformeerde Hogeschool uit Zwolle wordt met 85,5 punten beter beoordeeld. De Hotelschool Den Haag is een opvallende stijger, mede door een bijzonder gunstig deskundigenoordeel klommen zij van de tiende naar de vijfde plaats.</p><p>De hoogste scores zijn nog steeds te vinden bij de kleinste scholen. De Katholieke Pabo Zwolle en het IVA in Driebergen voeren al jaren de ranglijst aan met respectievelijk 92 en 88 punten. In de Keuzegids staat dat dat met name te danken is aan het feit dat zij slechts één hbo-opleiding aanbieden, die ook nog eens uitstekend verzorgd is. ''Eigen identiteit en - daardoor - een sterke binding met de studenten zijn belangrijke troeven",' zo valt te lezen in de gids.</p>
+
+    <span class="smallprint">Door:&nbsp;ANP</span>
+</article>
+
+<div id="comments">
+    <strong>Jouw reactie:</strong>
+    <form method="POST">
+    <textarea name="comment"></textarea><br />
+    <button type="submit" name="addcomment">Reageer op dit bericht</button>
+    </form>
+<?php
+    $result = $connection->query("SELECT * FROM commentaar ORDER BY id DESC")
+      or die('Query error: ' . $connection->error);
+
+    while ($row = $result->fetch_array()) {
+    ?>
+
+    <div class="comment">
+      <div class="comment-header">
+        door <span class="author"><?php echo $row['auteur']; ?></span>
+      </div>
+      <p><?php echo $row['bericht']; ?></p>
+    </div>
+
+    <?php
+    }
+
+    $connection->close();
+    ?>
+
+</div>
+
+<hr>
+
+<div id="admincheck">
+    <a href="admincheck.php">Meld een probleem met deze website</a>
+</div>
+</section>
+</body>
+</html>
--- a/nieuws/login.php
+++ b/nieuws/login.php
@ -0,0 +1,72 @@
+<?php
+if($_POST) {
+    // Check if admin logged in
+    $connection = new mysqli('localhost', 'nieuws', 'pass', 'nieuws')
+        or die('Kan geen verbinding maken met MySQL');
+
+    $hash = sha1($_POST['wachtwoord'] . '31pEDJUu8bh0lUB9');
+
+    // Check password user, no SQL injection here people!
+    $result = $connection->query("SELECT * FROM gebruikers WHERE gebruikersnaam = '".$connection->real_escape_string($_POST['gebruikersnaam'])."' AND wachtwoord = '".$connection->real_escape_string($hash)."'");
+
+    if($result->num_rows > 0) {
+        session_start();
+        unset($_SESSION['gebruikersnaam']);
+        unset($_SESSION['admin']);
+
+        if($_POST['gebruikersnaam'] == 'Admin')
+            $_SESSION['admin'] = true;
+
+        $_SESSION['gebruikersnaam'] = $_POST['gebruikersnaam'];
+
+        header('Location: /nieuws/index.php');
+        exit;
+    }
+}
+
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>NIEUWS.nl</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="/themes/css/nieuws.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+     <style>
+     input {
+         margin-bottom: 5px;
+         width: 50% !important;
+     }
+
+     </style>
+  </head>
+
+<body>
+
+<img src="/themes/images/nieuws.png" id="logo">
+<section id="middle">
+<div id="datum"><?php setlocale(LC_ALL, 'nl_NL'); echo strftime("%A %e %B %Y"); ?>. Het laatste nieuws het eerst op NIEUWS.nl</div>
+
+  <form method="POST" class="form-signin">
+      <?php
+      if($_POST) {
+          echo '<div class="alert alert-error">Ongeldige gebruikersnaam en wachtwoord</div>';
+      }
+      ?>
+      <input name="gebruikersnaam" class="input-block-level" placeholder="Gebruikersnaam">
+      <input name="wachtwoord" type="password" class="input-block-level" placeholder="Wachtwoord">
+
+      <button type="submit" class="btn btn-primary">Inloggen</button>
+  </form>
+</section>
+
+</body>
+</html>
--- a/nieuws/reset.php
+++ b/nieuws/reset.php
@ -0,0 +1,9 @@
+<?php
+
+$connection = new mysqli('localhost', 'nieuws', 'pass', 'nieuws')
+    or die('Kan geen verbinding maken met MySQL');
+
+$connection->query("TRUNCATE commentaar");
+
+?>
+Alle reacties weggehaald.
--- a/nieuws/users.php
+++ b/nieuws/users.php
@ -0,0 +1,17 @@
+<table border="1">
+  <tr>
+    <th>Gebruikersnaam</th>
+    <th>Wachtwoord</th>
+  </tr>
+<?php
+$connection = new mysqli('localhost', 'nieuws', 'pass', 'nieuws')
+    or die('Kan geen verbinding maken met MySQL');
+
+$result = $connection->query("SELECT * FROM gebruikers");
+
+while($row = $result->fetch_array()) {
+    echo "<tr><td>{$row['gebruikersnaam']}</td><td>{$row['wachtwoord']}</td></tr>";
+}
+
+?>
+</table>
--- a/themes/bank/bank.css
+++ b/themes/bank/bank.css
@ -0,0 +1,31 @@
+.navbar {
+    border-bottom: 7px solid #ff6600;
+}
+
+.brand {
+    width: 70%;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    float: none !important;
+    display: block;
+}
+
+.navbar p {
+    text-align: center;
+}
+
+.signin-container {
+    margin-top: 30px;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    float: none !important;
+}
+
+h3 {
+    color: #ff6600 !important;
+}
+
+.btn-primary {
+    background-image: linear-gradient(to bottom,#ff6600,#ee4400) !important;
+    background-color: red !important;
+}
--- a/themes/bootshop/bootstrap.min.css
+++ b/themes/bootshop/bootstrap.min.css
--- a/themes/css/base.css
+++ b/themes/css/base.css
@ -0,0 +1,107 @@
+#mainBody {/* background: url(../images/seperator.png) repeat-x 0 0; */ border-top:2px solid #dedede; padding-top: 18px;}
+#carouselBlk,#header{background: url(../images/headerRepeat.png) repeat-x 0 0 #f7f7f7;}
+#srchFld {background: url(../images/search.png) no-repeat 4px center #fff;}
+.tag {background:url(../images/new.png) no-repeat 0 0; position: absolute; display:block; top: -4px;right: -18px; height:48px; width:48px;}
+.clr{clear:both;}
+.cntr{text-align:center}
+.marginLess{margin:0}
+#logoArea, #logoArea a{line-height:49px;}
+#logoArea .btn, #logoArea .btn-group {margin-top: 0;}
+#logo {padding-right:28px;}
+#welcomeLine{padding: 8px 0 4px}
+/* Sidebar--------- */
+#myCart  img{float:left; margin-right:8px; }
+#myCart .badge {padding: 9px;}
+#myCart {font-size: 13px;font-weight: bold; line-height: 33px;}
+#sidebar ul ul li a{ font-size:12px;}
+#sidebar ul {list-style: none;padding: 0;margin: 0;width: 100%;}
+#sidebar  li  a{font-weight:bold; background:url(../images/tabRepeatInactive.png) repeat-x 0 0; color:#262626;}
+#sidebar ul li li a{background:#eee; padding-left:14px;font-weight:normal;display:block;   font-size:13px; line-height:26px;}
+/* body--- */
+.thumbnail>a{display:block; text-align:center}
+.thumbnail h5,.thumbnail p{text-align:center}
+/* Product page--- */
+.alignR{text-align:right;}
+.control-label.alignL, .alignL{text-align:left;}
+.loginFrm{ margin-bottom:8px;}
+.loginFrm .control-group{padding:8px 14px 0; margin-bottom:0 }
+/* Compair product page */
+.checkbox input[type="checkbox"]{ margin:4px 0 8px -20px }
+#sm{text-align:right}
+#sm a {margin: 4px;width:32px;}
+/* Carousel  */
+#myCarousel{text-align:center; margin-bottom:0}
+#myCarousel .btn{position:absolute; bottom:10%; right:17%; padding:2% 6%; z-index:9999}
+#myCarousel .carousel-caption{display:none;}
+#myCarousel.homCar .item img{width:100%; max-height:506px}
+#productView .btn-toolbar{padding-left:3px;}
+#productDetail > li, .nav-pills > li {float: right;}
+#myTabContent{text-align:justify}
+#compairTbl td{text-align:center;}
+#accordion2, #legalNotice, .justify, #mainCol{text-align:justify}
+#myCarousel .carousel-control{display:none}
+#myCarousel:hover .carousel-control{display:block}
+.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {color:#fff; background-color: #CF0007;text-shadow: none;}
+/* Footer section--------------- */
+#footerSection {background: #202020;color: white;padding: 28px 0 44px;margin-top: 20px;border-top: 1px solid #444;}
+#footerSection a{color:#ccc; font-size:11px; padding:0; line-height:24px; display:block; }
+#footerSection a:hover{color:#fff;  }
+#footerSection  #socialMedia a{ min-width:25px; display:inline; margin-right:6px; text-align:center; line-height:1.5em;}
+#socialMedia img{max-width:60px;}
+#footerSection  #socialMedia a:hover{background:none;}
+/* ===================================================== */
+/* Light Box------------------- */
+#jquery-overlay {position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;}
+#jquery-lightbox {position: absolute;top: 0;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}
+#jquery-lightbox a img { border: none; }#lightbox-container-image-box {position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}
+#lightbox-container-image { padding: 10px; }#lightbox-loading {position: absolute;top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}
+#lightbox-nav {	position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}#lightbox-container-image-box > #lightbox-nav { left: 0; }#lightbox-nav a { outline: none;}
+#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 49%;height: 100%;zoom: 1;display: block;}
+#lightbox-nav-btnPrev { left: 0; float: left;}#lightbox-nav-btnNext { right: 0; float: right;}
+#lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;margin: 0 auto;line-height: 1.4em;overflow: auto;width: 100%;padding: 0 10px 0;}
+#lightbox-container-image-data {	padding: 0 10px; 	color: #666; }
+#lightbox-container-image-data #lightbox-image-details {width: 70%; float: left; text-align: left; }	
+#lightbox-image-details-caption { font-weight: bold; }#lightbox-image-details-currentNumber {display: block; clear: left; padding-bottom: 1.0em;}
+#lightbox-secNav-btnClose {width: 66px; float: right;padding-bottom: 0.7em;	}
+/* ------------------------------- */
+.navbar-search .srchTxt {border-radius: 0;border: 1px solid #444;}
+[class^="icon-"], [class*=" icon-"] {background-image: none;}
+.navbar .nav > li > a {padding:10px;color: #DDD;text-shadow: none;font-size: 16px;}
+.navbar .nav > li > a:hover{color:#fff}
+#logoArea, #logoArea a{outline:none;}
+.alignR .checkbox input[type="checkbox"] {float: right;margin: 4px 0 8px 11px;}
+
+.navbar .nav.pull-right, #sideManu {overflow:hidden;}
+#logoArea  #smallScreen {margin: 21px 14px 0 0;}
+.navbar-search {margin-top: 8px;}
+/* Responsive--------------------- */
+/* Large desktop */
+@media (min-width: 1200px) {  }
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 979px) {
+.navbar .brand {float: none;text-align: center;}
+#sideManu,#topMenu{height:0}
+.navbar-search {margin-top: 8px;width: 100%;float: none;}
+#topMenu{height: auto;float: none;}
+#topMenu li{float: none;}
+.navbar .nav > li > a {border-top:1px solid #666; padding:0}
+#sideManu,#topMenu{height:0}
+}
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+.navbar .brand {float: none;text-align: center;}
+#header, #carouselBlk{margin: 0 -20px;}
+#sideManu,#topMenu{height:0}
+.navbar-search {margin-top: 8px;width: 100%;float: none;}
+#topMenu{height: auto;float: none;}
+#topMenu li{float: none;}
+.navbar .nav > li > a {border-top:1px solid #666; padding:0}
+ }
+/* Landscape phones and down */
+@media (max-width: 480px) {
+#header, #carouselBlk{margin: 0 -20px;}
+#sideManu, #topMenu{height:0}
+#topMenu{height: auto;float: none;}
+#topMenu li{float: none;}
+.navbar .nav > li > a {border-top:1px solid #666; padding:0}
+}
--- a/themes/css/bootstrap-responsive.min.css
+++ b/themes/css/bootstrap-responsive.min.css
--- a/themes/css/bootstrap.min.css
+++ b/themes/css/bootstrap.min.css
--- a/themes/css/font-awesome-ie7.css
+++ b/themes/css/font-awesome-ie7.css
@ -0,0 +1,645 @@
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+}
+.btn.dropdown-toggle [class^="icon-"],
+.btn.dropdown-toggle [class*=" icon-"] {
+  /* keeps button heights with and without icons the same */
+
+  line-height: 1.4em;
+}
+.icon-large {
+  font-size: 1.3333em;
+}
+.icon-glass {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf000;&nbsp;');
+}
+.icon-music {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf001;&nbsp;');
+}
+.icon-search {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf002;&nbsp;');
+}
+.icon-envelope {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf003;&nbsp;');
+}
+.icon-heart {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf004;&nbsp;');
+}
+.icon-star {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf005;&nbsp;');
+}
+.icon-star-empty {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf006;&nbsp;');
+}
+.icon-user {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf007;&nbsp;');
+}
+.icon-film {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf008;&nbsp;');
+}
+.icon-th-large {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf009;&nbsp;');
+}
+.icon-th {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00a;&nbsp;');
+}
+.icon-th-list {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00b;&nbsp;');
+}
+.icon-ok {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00c;&nbsp;');
+}
+.icon-remove {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00d;&nbsp;');
+}
+.icon-zoom-in {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00e;&nbsp;');
+}
+.icon-zoom-out {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf010;&nbsp;');
+}
+.icon-off {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf011;&nbsp;');
+}
+.icon-signal {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf012;&nbsp;');
+}
+.icon-cog {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf013;&nbsp;');
+}
+.icon-trash {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf014;&nbsp;');
+}
+.icon-home {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf015;&nbsp;');
+}
+.icon-file {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf016;&nbsp;');
+}
+.icon-time {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf017;&nbsp;');
+}
+.icon-road {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf018;&nbsp;');
+}
+.icon-download-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf019;&nbsp;');
+}
+.icon-download {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf01a;&nbsp;');
+}
+.icon-upload {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf01b;&nbsp;');
+}
+.icon-inbox {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf01c;&nbsp;');
+}
+.icon-play-circle {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf01d;&nbsp;');
+}
+.icon-repeat {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf01e;&nbsp;');
+}
+.icon-refresh {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf021;&nbsp;');
+}
+.icon-list-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf022;&nbsp;');
+}
+.icon-lock {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf023;&nbsp;');
+}
+.icon-flag {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf024;&nbsp;');
+}
+.icon-headphones {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf025;&nbsp;');
+}
+.icon-volume-off {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf026;&nbsp;');
+}
+.icon-volume-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf027;&nbsp;');
+}
+.icon-volume-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf028;&nbsp;');
+}
+.icon-qrcode {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf029;&nbsp;');
+}
+.icon-barcode {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf02a;&nbsp;');
+}
+.icon-tag {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf02b;&nbsp;');
+}
+.icon-tags {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf02c;&nbsp;');
+}
+.icon-book {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf02d;&nbsp;');
+}
+.icon-bookmark {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf02e;&nbsp;');
+}
+.icon-print {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf02f;&nbsp;');
+}
+.icon-camera {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf030;&nbsp;');
+}
+.icon-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf031;&nbsp;');
+}
+.icon-bold {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf032;&nbsp;');
+}
+.icon-italic {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf033;&nbsp;');
+}
+.icon-text-height {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf034;&nbsp;');
+}
+.icon-text-width {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf035;&nbsp;');
+}
+.icon-align-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf036;&nbsp;');
+}
+.icon-align-center {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf037;&nbsp;');
+}
+.icon-align-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf038;&nbsp;');
+}
+.icon-align-justify {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf039;&nbsp;');
+}
+.icon-list {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf03a;&nbsp;');
+}
+.icon-indent-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf03b;&nbsp;');
+}
+.icon-indent-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf03c;&nbsp;');
+}
+.icon-facetime-video {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf03d;&nbsp;');
+}
+.icon-picture {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf03e;&nbsp;');
+}
+.icon-pencil {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf040;&nbsp;');
+}
+.icon-map-marker {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf041;&nbsp;');
+}
+.icon-adjust {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf042;&nbsp;');
+}
+.icon-tint {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf043;&nbsp;');
+}
+.icon-edit {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf044;&nbsp;');
+}
+.icon-share {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf045;&nbsp;');
+}
+.icon-check {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf046;&nbsp;');
+}
+.icon-move {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf047;&nbsp;');
+}
+.icon-step-backward {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf048;&nbsp;');
+}
+.icon-fast-backward {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf049;&nbsp;');
+}
+.icon-backward {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf04a;&nbsp;');
+}
+.icon-play {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf04b;&nbsp;');
+}
+.icon-pause {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf04c;&nbsp;');
+}
+.icon-stop {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf04d;&nbsp;');
+}
+.icon-forward {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf04e;&nbsp;');
+}
+.icon-fast-forward {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf050;&nbsp;');
+}
+.icon-step-forward {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf051;&nbsp;');
+}
+.icon-eject {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf052;&nbsp;');
+}
+.icon-chevron-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf053;&nbsp;');
+}
+.icon-chevron-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf054;&nbsp;');
+}
+.icon-plus-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf055;&nbsp;');
+}
+.icon-minus-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf056;&nbsp;');
+}
+.icon-remove-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf057;&nbsp;');
+}
+.icon-ok-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf058;&nbsp;');
+}
+.icon-question-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf059;&nbsp;');
+}
+.icon-info-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf05a;&nbsp;');
+}
+.icon-screenshot {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf05b;&nbsp;');
+}
+.icon-remove-circle {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf05c;&nbsp;');
+}
+.icon-ok-circle {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf05d;&nbsp;');
+}
+.icon-ban-circle {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf05e;&nbsp;');
+}
+.icon-arrow-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf060;&nbsp;');
+}
+.icon-arrow-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf061;&nbsp;');
+}
+.icon-arrow-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf062;&nbsp;');
+}
+.icon-arrow-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf063;&nbsp;');
+}
+.icon-share-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf064;&nbsp;');
+}
+.icon-resize-full {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf065;&nbsp;');
+}
+.icon-resize-small {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf066;&nbsp;');
+}
+.icon-plus {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf067;&nbsp;');
+}
+.icon-minus {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf068;&nbsp;');
+}
+.icon-asterisk {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf069;&nbsp;');
+}
+.icon-exclamation-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf06a;&nbsp;');
+}
+.icon-gift {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf06b;&nbsp;');
+}
+.icon-leaf {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf06c;&nbsp;');
+}
+.icon-fire {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf06d;&nbsp;');
+}
+.icon-eye-open {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf06e;&nbsp;');
+}
+.icon-eye-close {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf070;&nbsp;');
+}
+.icon-warning-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf071;&nbsp;');
+}
+.icon-plane {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf072;&nbsp;');
+}
+.icon-calendar {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf073;&nbsp;');
+}
+.icon-random {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf074;&nbsp;');
+}
+.icon-comment {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf075;&nbsp;');
+}
+.icon-magnet {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf076;&nbsp;');
+}
+.icon-chevron-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf077;&nbsp;');
+}
+.icon-chevron-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf078;&nbsp;');
+}
+.icon-retweet {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf079;&nbsp;');
+}
+.icon-shopping-cart {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf07a;&nbsp;');
+}
+.icon-folder-close {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf07b;&nbsp;');
+}
+.icon-folder-open {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf07c;&nbsp;');
+}
+.icon-resize-vertical {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf07d;&nbsp;');
+}
+.icon-resize-horizontal {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf07e;&nbsp;');
+}
+.icon-bar-chart {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf080;&nbsp;');
+}
+.icon-twitter-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf081;&nbsp;');
+}
+.icon-facebook-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf082;&nbsp;');
+}
+.icon-camera-retro {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf083;&nbsp;');
+}
+.icon-key {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf084;&nbsp;');
+}
+.icon-cogs {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf085;&nbsp;');
+}
+.icon-comments {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf086;&nbsp;');
+}
+.icon-thumbs-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf087;&nbsp;');
+}
+.icon-thumbs-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf088;&nbsp;');
+}
+.icon-star-half {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf089;&nbsp;');
+}
+.icon-heart-empty {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08a;&nbsp;');
+}
+.icon-signout {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08b;&nbsp;');
+}
+.icon-linkedin-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08c;&nbsp;');
+}
+.icon-pushpin {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08d;&nbsp;');
+}
+.icon-external-link {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;');
+}
+.icon-signin {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf090;&nbsp;');
+}
+.icon-trophy {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf091;&nbsp;');
+}
+.icon-github-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf092;&nbsp;');
+}
+.icon-upload-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf093;&nbsp;');
+}
+.icon-lemon {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf094;&nbsp;');
+}
+.icon-phone {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf095;&nbsp;');
+}
+.icon-check-empty {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf096;&nbsp;');
+}
+.icon-bookmark-empty {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf097;&nbsp;');
+}
+.icon-phone-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf098;&nbsp;');
+}
+.icon-twitter {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;');
+}
+.icon-facebook {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09a;&nbsp;');
+}
+.icon-github {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09b;&nbsp;');
+}
+.icon-unlock {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09c;&nbsp;');
+}
+.icon-credit-card {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09d;&nbsp;');
+}
+.icon-rss {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09e;&nbsp;');
+}
+.icon-hdd {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a0;&nbsp;');
+}
+.icon-bullhorn {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a1;&nbsp;');
+}
+.icon-bell {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a2;&nbsp;');
+}
+.icon-certificate {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a3;&nbsp;');
+}
+.icon-hand-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a4;&nbsp;');
+}
+.icon-hand-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a5;&nbsp;');
+}
+.icon-hand-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a6;&nbsp;');
+}
+.icon-hand-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a7;&nbsp;');
+}
+.icon-circle-arrow-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a8;&nbsp;');
+}
+.icon-circle-arrow-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0a9;&nbsp;');
+}
+.icon-circle-arrow-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0aa;&nbsp;');
+}
+.icon-circle-arrow-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ab;&nbsp;');
+}
+.icon-globe {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ac;&nbsp;');
+}
+.icon-wrench {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ad;&nbsp;');
+}
+.icon-tasks {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ae;&nbsp;');
+}
+.icon-filter {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0b0;&nbsp;');
+}
+.icon-briefcase {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0b1;&nbsp;');
+}
+.icon-fullscreen {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0b2;&nbsp;');
+}
+.icon-group {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c0;&nbsp;');
+}
+.icon-link {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c1;&nbsp;');
+}
+.icon-cloud {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c2;&nbsp;');
+}
+.icon-beaker {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c3;&nbsp;');
+}
+.icon-cut {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c4;&nbsp;');
+}
+.icon-copy {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c5;&nbsp;');
+}
+.icon-paper-clip {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c6;&nbsp;');
+}
+.icon-save {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c7;&nbsp;');
+}
+.icon-sign-blank {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c8;&nbsp;');
+}
+.icon-reorder {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;');
+}
+.icon-list-ul {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ca;&nbsp;');
+}
+.icon-list-ol {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0cb;&nbsp;');
+}
+.icon-strikethrough {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0cc;&nbsp;');
+}
+.icon-underline {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0cd;&nbsp;');
+}
+.icon-table {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ce;&nbsp;');
+}
+.icon-magic {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d0;&nbsp;');
+}
+.icon-truck {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d1;&nbsp;');
+}
+.icon-pinterest {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d2;&nbsp;');
+}
+.icon-pinterest-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d3;&nbsp;');
+}
+.icon-google-plus-sign {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d4;&nbsp;');
+}
+.icon-google-plus {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d5;&nbsp;');
+}
+.icon-money {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d6;&nbsp;');
+}
+.icon-caret-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d7;&nbsp;');
+}
+.icon-caret-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d8;&nbsp;');
+}
+.icon-caret-left {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0d9;&nbsp;');
+}
+.icon-caret-right {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0da;&nbsp;');
+}
+.icon-columns {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0db;&nbsp;');
+}
+.icon-sort {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0dc;&nbsp;');
+}
+.icon-sort-down {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0dd;&nbsp;');
+}
+.icon-sort-up {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0de;&nbsp;');
+}
+.icon-envelope-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e0;&nbsp;');
+}
+.icon-linkedin {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e1;&nbsp;');
+}
+.icon-undo {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e2;&nbsp;');
+}
+.icon-legal {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e3;&nbsp;');
+}
+.icon-dashboard {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e4;&nbsp;');
+}
+.icon-comment-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e5;&nbsp;');
+}
+.icon-comments-alt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e6;&nbsp;');
+}
+.icon-bolt {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e7;&nbsp;');
+}
+.icon-sitemap {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e8;&nbsp;');
+}
+.icon-umbrella {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e9;&nbsp;');
+}
+.icon-paste {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ea;&nbsp;');
+}
+.icon-user-md {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf200;&nbsp;');
+}
--- a/themes/css/font-awesome.css
+++ b/themes/css/font-awesome.css
@ -0,0 +1,303 @@
+/*  Font Awesome
+    the iconic font designed for use with Twitter Bootstrap
+    -------------------------------------------------------
+    The full suite of pictographic icons, examples, and documentation
+    can be found at: http://fortawesome.github.com/Font-Awesome/
+
+    License
+    -------------------------------------------------------
+    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
+    http://creativecommons.org/licenses/by/3.0/ A mention of
+    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
+    source code is considered acceptable attribution (most common on the web).
+    If human readable source code is not available to the end user, a mention in
+    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
+    or mobile software).
+
+    Contact
+    -------------------------------------------------------
+    Email: dave@davegandy.com
+    Twitter: http://twitter.com/fortaweso_me
+    Work: http://lemonwi.se co-founder
+
+    */
+@font-face {
+  font-family: "FontAwesome";
+  src: url('../font/fontawesome-webfont.eot');
+  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*  Font Awesome styles
+    ------------------------------------------------------- */
+[class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+  text-decoration: inherit;
+}
+a [class^="icon-"], a [class*=" icon-"] {
+  display: inline-block;
+  text-decoration: inherit;
+}
+/* makes the font 33% larger relative to the icon container */
+.icon-large:before {
+  vertical-align: top;
+  font-size: 1.3333333333333333em;
+}
+.btn [class^="icon-"], .btn [class*=" icon-"] {
+  /* keeps button heights with and without icons the same */
+
+  line-height: .9em;
+}
+li [class^="icon-"], li [class*=" icon-"] {
+  display: inline-block;
+  width: 1.25em;
+  text-align: center;
+}
+li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
+  /* 1.5 increased font size for icon-large * 1.25 width */
+
+  width: 1.875em;
+}
+li[class^="icon-"], li[class*=" icon-"] {
+  margin-left: 0;
+  list-style-type: none;
+}
+li[class^="icon-"]:before, li[class*=" icon-"]:before {
+  text-indent: -2em;
+  text-align: center;
+}
+li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
+  text-indent: -1.3333333333333333em;
+}
+/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+    readers do not read off random characters that represent icons */
+.icon-glass:before                { content: "\f000"; }
+.icon-music:before                { content: "\f001"; }
+.icon-search:before               { content: "\f002"; }
+.icon-envelope:before             { content: "\f003"; }
+.icon-heart:before                { content: "\f004"; }
+.icon-star:before                 { content: "\f005"; }
+.icon-star-empty:before           { content: "\f006"; }
+.icon-user:before                 { content: "\f007"; }
+.icon-film:before                 { content: "\f008"; }
+.icon-th-large:before             { content: "\f009"; }
+.icon-th:before                   { content: "\f00a"; }
+.icon-th-list:before              { content: "\f00b"; }
+.icon-ok:before                   { content: "\f00c"; }
+.icon-remove:before               { content: "\f00d"; }
+.icon-zoom-in:before              { content: "\f00e"; }
+
+.icon-zoom-out:before             { content: "\f010"; }
+.icon-off:before                  { content: "\f011"; }
+.icon-signal:before               { content: "\f012"; }
+.icon-cog:before                  { content: "\f013"; }
+.icon-trash:before                { content: "\f014"; }
+.icon-home:before                 { content: "\f015"; }
+.icon-file:before                 { content: "\f016"; }
+.icon-time:before                 { content: "\f017"; }
+.icon-road:before                 { content: "\f018"; }
+.icon-download-alt:before         { content: "\f019"; }
+.icon-download:before             { content: "\f01a"; }
+.icon-upload:before               { content: "\f01b"; }
+.icon-inbox:before                { content: "\f01c"; }
+.icon-play-circle:before          { content: "\f01d"; }
+.icon-repeat:before               { content: "\f01e"; }
+
+/* \f020 doesn't work in Safari. all shifted one down */
+.icon-refresh:before              { content: "\f021"; }
+.icon-list-alt:before             { content: "\f022"; }
+.icon-lock:before                 { content: "\f023"; }
+.icon-flag:before                 { content: "\f024"; }
+.icon-headphones:before           { content: "\f025"; }
+.icon-volume-off:before           { content: "\f026"; }
+.icon-volume-down:before          { content: "\f027"; }
+.icon-volume-up:before            { content: "\f028"; }
+.icon-qrcode:before               { content: "\f029"; }
+.icon-barcode:before              { content: "\f02a"; }
+.icon-tag:before                  { content: "\f02b"; }
+.icon-tags:before                 { content: "\f02c"; }
+.icon-book:before                 { content: "\f02d"; }
+.icon-bookmark:before             { content: "\f02e"; }
+.icon-print:before                { content: "\f02f"; }
+
+.icon-camera:before               { content: "\f030"; }
+.icon-font:before                 { content: "\f031"; }
+.icon-bold:before                 { content: "\f032"; }
+.icon-italic:before               { content: "\f033"; }
+.icon-text-height:before          { content: "\f034"; }
+.icon-text-width:before           { content: "\f035"; }
+.icon-align-left:before           { content: "\f036"; }
+.icon-align-center:before         { content: "\f037"; }
+.icon-align-right:before          { content: "\f038"; }
+.icon-align-justify:before        { content: "\f039"; }
+.icon-list:before                 { content: "\f03a"; }
+.icon-indent-left:before          { content: "\f03b"; }
+.icon-indent-right:before         { content: "\f03c"; }
+.icon-facetime-video:before       { content: "\f03d"; }
+.icon-picture:before              { content: "\f03e"; }
+
+.icon-pencil:before               { content: "\f040"; }
+.icon-map-marker:before           { content: "\f041"; }
+.icon-adjust:before               { content: "\f042"; }
+.icon-tint:before                 { content: "\f043"; }
+.icon-edit:before                 { content: "\f044"; }
+.icon-share:before                { content: "\f045"; }
+.icon-check:before                { content: "\f046"; }
+.icon-move:before                 { content: "\f047"; }
+.icon-step-backward:before        { content: "\f048"; }
+.icon-fast-backward:before        { content: "\f049"; }
+.icon-backward:before             { content: "\f04a"; }
+.icon-play:before                 { content: "\f04b"; }
+.icon-pause:before                { content: "\f04c"; }
+.icon-stop:before                 { content: "\f04d"; }
+.icon-forward:before              { content: "\f04e"; }
+
+.icon-fast-forward:before         { content: "\f050"; }
+.icon-step-forward:before         { content: "\f051"; }
+.icon-eject:before                { content: "\f052"; }
+.icon-chevron-left:before         { content: "\f053"; }
+.icon-chevron-right:before        { content: "\f054"; }
+.icon-plus-sign:before            { content: "\f055"; }
+.icon-minus-sign:before           { content: "\f056"; }
+.icon-remove-sign:before          { content: "\f057"; }
+.icon-ok-sign:before              { content: "\f058"; }
+.icon-question-sign:before        { content: "\f059"; }
+.icon-info-sign:before            { content: "\f05a"; }
+.icon-screenshot:before           { content: "\f05b"; }
+.icon-remove-circle:before        { content: "\f05c"; }
+.icon-ok-circle:before            { content: "\f05d"; }
+.icon-ban-circle:before           { content: "\f05e"; }
+
+.icon-arrow-left:before           { content: "\f060"; }
+.icon-arrow-right:before          { content: "\f061"; }
+.icon-arrow-up:before             { content: "\f062"; }
+.icon-arrow-down:before           { content: "\f063"; }
+.icon-share-alt:before            { content: "\f064"; }
+.icon-resize-full:before          { content: "\f065"; }
+.icon-resize-small:before         { content: "\f066"; }
+.icon-plus:before                 { content: "\f067"; }
+.icon-minus:before                { content: "\f068"; }
+.icon-asterisk:before             { content: "\f069"; }
+.icon-exclamation-sign:before     { content: "\f06a"; }
+.icon-gift:before                 { content: "\f06b"; }
+.icon-leaf:before                 { content: "\f06c"; }
+.icon-fire:before                 { content: "\f06d"; }
+.icon-eye-open:before             { content: "\f06e"; }
+
+.icon-eye-close:before            { content: "\f070"; }
+.icon-warning-sign:before         { content: "\f071"; }
+.icon-plane:before                { content: "\f072"; }
+.icon-calendar:before             { content: "\f073"; }
+.icon-random:before               { content: "\f074"; }
+.icon-comment:before              { content: "\f075"; }
+.icon-magnet:before               { content: "\f076"; }
+.icon-chevron-up:before           { content: "\f077"; }
+.icon-chevron-down:before         { content: "\f078"; }
+.icon-retweet:before              { content: "\f079"; }
+.icon-shopping-cart:before        { content: "\f07a"; }
+.icon-folder-close:before         { content: "\f07b"; }
+.icon-folder-open:before          { content: "\f07c"; }
+.icon-resize-vertical:before      { content: "\f07d"; }
+.icon-resize-horizontal:before    { content: "\f07e"; }
+
+.icon-bar-chart:before            { content: "\f080"; }
+.icon-twitter-sign:before         { content: "\f081"; }
+.icon-facebook-sign:before        { content: "\f082"; }
+.icon-camera-retro:before         { content: "\f083"; }
+.icon-key:before                  { content: "\f084"; }
+.icon-cogs:before                 { content: "\f085"; }
+.icon-comments:before             { content: "\f086"; }
+.icon-thumbs-up:before            { content: "\f087"; }
+.icon-thumbs-down:before          { content: "\f088"; }
+.icon-star-half:before            { content: "\f089"; }
+.icon-heart-empty:before          { content: "\f08a"; }
+.icon-signout:before              { content: "\f08b"; }
+.icon-linkedin-sign:before        { content: "\f08c"; }
+.icon-pushpin:before              { content: "\f08d"; }
+.icon-external-link:before        { content: "\f08e"; }
+
+.icon-signin:before               { content: "\f090"; }
+.icon-trophy:before               { content: "\f091"; }
+.icon-github-sign:before          { content: "\f092"; }
+.icon-upload-alt:before           { content: "\f093"; }
+.icon-lemon:before                { content: "\f094"; }
+.icon-phone:before                { content: "\f095"; }
+.icon-check-empty:before          { content: "\f096"; }
+.icon-bookmark-empty:before       { content: "\f097"; }
+.icon-phone-sign:before           { content: "\f098"; }
+.icon-twitter:before              { content: "\f099"; }
+.icon-facebook:before             { content: "\f09a"; }
+.icon-github:before               { content: "\f09b"; }
+.icon-unlock:before               { content: "\f09c"; }
+.icon-credit-card:before          { content: "\f09d"; }
+.icon-rss:before                  { content: "\f09e"; }
+
+.icon-hdd:before                  { content: "\f0a0"; }
+.icon-bullhorn:before             { content: "\f0a1"; }
+.icon-bell:before                 { content: "\f0a2"; }
+.icon-certificate:before          { content: "\f0a3"; }
+.icon-hand-right:before           { content: "\f0a4"; }
+.icon-hand-left:before            { content: "\f0a5"; }
+.icon-hand-up:before              { content: "\f0a6"; }
+.icon-hand-down:before            { content: "\f0a7"; }
+.icon-circle-arrow-left:before    { content: "\f0a8"; }
+.icon-circle-arrow-right:before   { content: "\f0a9"; }
+.icon-circle-arrow-up:before      { content: "\f0aa"; }
+.icon-circle-arrow-down:before    { content: "\f0ab"; }
+.icon-globe:before                { content: "\f0ac"; }
+.icon-wrench:before               { content: "\f0ad"; }
+.icon-tasks:before                { content: "\f0ae"; }
+
+.icon-filter:before               { content: "\f0b0"; }
+.icon-briefcase:before            { content: "\f0b1"; }
+.icon-fullscreen:before           { content: "\f0b2"; }
+
+.icon-group:before                { content: "\f0c0"; }
+.icon-link:before                 { content: "\f0c1"; }
+.icon-cloud:before                { content: "\f0c2"; }
+.icon-beaker:before               { content: "\f0c3"; }
+.icon-cut:before                  { content: "\f0c4"; }
+.icon-copy:before                 { content: "\f0c5"; }
+.icon-paper-clip:before           { content: "\f0c6"; }
+.icon-save:before                 { content: "\f0c7"; }
+.icon-sign-blank:before           { content: "\f0c8"; }
+.icon-reorder:before              { content: "\f0c9"; }
+.icon-list-ul:before              { content: "\f0ca"; }
+.icon-list-ol:before              { content: "\f0cb"; }
+.icon-strikethrough:before        { content: "\f0cc"; }
+.icon-underline:before            { content: "\f0cd"; }
+.icon-table:before                { content: "\f0ce"; }
+
+.icon-magic:before                { content: "\f0d0"; }
+.icon-truck:before                { content: "\f0d1"; }
+.icon-pinterest:before            { content: "\f0d2"; }
+.icon-pinterest-sign:before       { content: "\f0d3"; }
+.icon-google-plus-sign:before     { content: "\f0d4"; }
+.icon-google-plus:before          { content: "\f0d5"; }
+.icon-money:before                { content: "\f0d6"; }
+.icon-caret-down:before           { content: "\f0d7"; }
+.icon-caret-up:before             { content: "\f0d8"; }
+.icon-caret-left:before           { content: "\f0d9"; }
+.icon-caret-right:before          { content: "\f0da"; }
+.icon-columns:before              { content: "\f0db"; }
+.icon-sort:before                 { content: "\f0dc"; }
+.icon-sort-down:before            { content: "\f0dd"; }
+.icon-sort-up:before              { content: "\f0de"; }
+
+.icon-envelope-alt:before         { content: "\f0e0"; }
+.icon-linkedin:before             { content: "\f0e1"; }
+.icon-undo:before                 { content: "\f0e2"; }
+.icon-legal:before                { content: "\f0e3"; }
+.icon-dashboard:before            { content: "\f0e4"; }
+.icon-comment-alt:before          { content: "\f0e5"; }
+.icon-comments-alt:before         { content: "\f0e6"; }
+.icon-bolt:before                 { content: "\f0e7"; }
+.icon-sitemap:before              { content: "\f0e8"; }
+.icon-umbrella:before             { content: "\f0e9"; }
+.icon-paste:before                { content: "\f0ea"; }
+
+.icon-user-md:before              { content: "\f200"; }
--- a/themes/css/imgr.css
+++ b/themes/css/imgr.css
@ -0,0 +1,72 @@
+body {
+    background-color: #121211;
+    color: white;
+    margin: 0 auto;
+    font-family: Arial, sans-serif;
+}
+
+#center {
+    margin: 0 auto;
+    float: none;
+}
+
+#site-header {
+    background-color: #2b2b2b;
+    border-bottom: 4px solid #444442;
+    height: 36px;
+    margin-bottom: 10px;
+}
+
+#site-header img {
+    height: 36px;
+}
+
+.panel {
+    background-color: #2b2b2b;
+    padding: 25px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    font-weight: 700;
+}
+
+.header {
+    background-color: #181817;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 10px;
+    height: 19px;
+    line-height: 18px;
+    color: #ddddd1;
+}
+
+.header em {
+    font-style: normal;
+    color: #85bf25;
+}
+
+.images img {
+    width: 135px;
+    height: 135px;
+    margin: 3px;
+    float: left;
+    border: 3px solid #444442;
+}
+
+button {
+    background: #2b2b2b;
+    background: -moz-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#2b2b2b),color-stop(0%,#444442),color-stop(100%,#121211));
+    background: -webkit-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: -o-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: -ms-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: linear-gradient(to bottom,#2b2b2b 0,#444442 0,#121211 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444442', endColorstr='#121211', GradientType=0);
+    border-radius: 8px;
+    color: white;
+    font-weight: 700;
+    width: 100%;
+    padding: 4px;
+}
--- a/themes/css/nieuws.css
+++ b/themes/css/nieuws.css
@ -0,0 +1,122 @@
+body {
+    font-family: Arial,helvetica,sans-serif;
+}
+
+img {
+    float: left;
+}
+
+img#logo {
+    margin: 30px;
+}
+
+article img {
+    margin-right: 15px;
+}
+
+section#middle {
+    float: left;
+    width: 600px;
+}
+
+#datum {
+    height: 30px;
+    font-size: 11px;
+    line-height: 28px;
+    color: #05054c;
+    border-top: 1px dotted black;
+    border-bottom: 1px dotted black;
+    margin-bottom: 10px;
+    margin-top: 20px;
+}
+
+#category {
+    height: 24px;
+    line-height: 24px;
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    padding-left: 5px;
+
+    background-image: -webkit-gradient(
+    	linear,
+    	left top,
+    	left bottom,
+    	color-stop(0, #98C4E5),
+    	color-stop(1, #7AA2C1)
+    );
+    background-image: -o-linear-gradient(bottom, #98C4E5 0%, #7AA2C1 100%);
+    background-image: -moz-linear-gradient(bottom, #98C4E5 0%, #7AA2C1 100%);
+    background-image: -webkit-linear-gradient(bottom, #98C4E5 0%, #7AA2C1 100%);
+    background-image: -ms-linear-gradient(bottom, #98C4E5 0%, #7AA2C1 100%);
+    background-image: linear-gradient(to bottom, #98C4E5 0%, #7AA2C1 100%);
+}
+
+textarea {
+    width: 60%;
+    height: 100px;
+}
+
+article {
+    background-color: #eaf0fa;
+    margin-top: 5px;
+    padding: 5px;
+    margin-bottom: 20px;
+}
+
+#published, #update {
+    color: #445774;
+    line-height: 1.5em;
+    font-size: 10px;
+}
+
+h1 {
+    font-size: 30px;
+    color: #020051;
+    margin-bottom: 8px;
+}
+
+h2.summary {
+    font-size: 13px;
+    line-height: 18px;
+    color: rgb(68, 87, 117);
+}
+
+p {
+    color: rgb(2, 0, 81);
+    font-size: 13px;
+    line-height: 18px;
+    padding-bottom: 10px;
+}
+a {
+    color: rgb(2, 0, 81);
+    text-decoration: underline;
+}
+
+.comment {
+    border: 1px solid rgb(217, 226, 240);
+    margin-bottom: 10px;
+}
+
+.comment-header {
+    background-color: rgb(217, 226, 240);
+    color: rgb(71, 91, 117);
+    font-size: 11px;
+    padding: 2px;
+    padding-left: 20px;
+}
+
+.comment-header .author {
+    color: rgb(57, 73, 95);
+    font-weight: bold;
+}
+
+.comment p {
+    margin: 0;
+    padding: 10px;
+}
+
+#admincheck {
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
--- a/themes/images/headerRepeat.png
+++ b/themes/images/headerRepeat.png
--- a/themes/images/imgr.png
+++ b/themes/images/imgr.png
--- a/themes/images/logo.png
+++ b/themes/images/logo.png
--- a/themes/images/nieuws.png
+++ b/themes/images/nieuws.png
--- a/themes/images/poespas.png
+++ b/themes/images/poespas.png
--- a/themes/images/products/basis.jpg
+++ b/themes/images/products/basis.jpg
--- a/themes/images/products/deluxe.jpg
+++ b/themes/images/products/deluxe.jpg
--- a/themes/images/products/geld.jpg
+++ b/themes/images/products/geld.jpg
--- a/themes/images/products/kurk.jpg
+++ b/themes/images/products/kurk.jpg
--- a/themes/images/school.jpg
+++ b/themes/images/school.jpg
--- a/themes/images/world-map.png
+++ b/themes/images/world-map.png
--- a/themes/images/world.png
+++ b/themes/images/world.png
--- a/webshop/image_zoom.php
+++ b/webshop/image_zoom.php
@ -0,0 +1,58 @@
+<?php
+    header('X-XSS-Protection: 0'); // Disable XSS protection in modern browsers to allow the exercises to work
+    session_start(); // Start a fake session
+ ?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Lekkende Kranen Empirium</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bootshop/bootstrap.min.css" media="screen"/>
+    <link href="/themes/css/base.css" rel="stylesheet" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link href="/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+<div id="header">
+<div class="container">
+
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+<a id="smallScreen" data-target="#topMenu" data-toggle="collapse" class="btn btn-navbar">
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+</a>
+  <div class="navbar-inner">
+    <a class="brand" href="/webshop"><img src="/themes/images/logo.png" alt="Leaky's Kranen Emporium"/></a>
+		<form class="form-inline navbar-search" method="post" action="products.html" >
+    </form>
+  </div>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+	<div class="span12">
+
+        <img src="/themes/images/products/<?php echo $_GET['image'] ?>" style="width:50%; margin: 0 auto;"/>
+
+</div>
+</div>
+</div>
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/webshop/image_zoom_escapehtml.php
+++ b/webshop/image_zoom_escapehtml.php
@ -0,0 +1,57 @@
+<?php
+    header('X-XSS-Protection: 0'); // Disable XSS protection in modern browsers to allow the exercises to work
+    setcookie('session', md5('123456'));
+ ?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Lekkende Kranen Empirium</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bootshop/bootstrap.min.css" media="screen"/>
+    <link href="/themes/css/base.css" rel="stylesheet" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link href="/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+<div id="header">
+<div class="container">
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+<a id="smallScreen" data-target="#topMenu" data-toggle="collapse" class="btn btn-navbar">
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+</a>
+  <div class="navbar-inner">
+    <a class="brand" href="/webshop"><img src="/themes/images/logo.png" alt="Leaky's Kranen Emporium"/></a>
+		<form class="form-inline navbar-search" method="post" action="products.html" >
+    </form>
+  </div>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+	<div class="span12">
+
+        <img src='/themes/images/products/<?php echo htmlspecialchars($_GET['image']) ?>' style="width:50%; margin: 0 auto;"/>
+
+</div>
+</div>
+</div>
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/webshop/index.php
+++ b/webshop/index.php
@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Lekkende Kranen Emporium</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bootshop/bootstrap.min.css" media="screen"/>
+    <link href="/themes/css/base.css" rel="stylesheet" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link href="/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+<div id="header">
+<div class="container">
+
+<div id="welcomeLine" class="row">
+</div>
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+<a id="smallScreen" data-target="#topMenu" data-toggle="collapse" class="btn btn-navbar">
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+</a>
+  <div class="navbar-inner">
+    <a class="brand" href="/webshop"><img src="/themes/images/logo.png" alt="Leaky's Kranen Emporium"/></a>
+		<form class="form-inline navbar-search" method="post" action="products.html" >
+    </form>
+    <ul id="topMenu" class="nav pull-right">
+
+    </ul>
+  </div>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+	<div class="span12">
+
+	<h3> Kranen </h3>
+	<hr class="soft"/>
+	<p>
+        Heeft u ook last van een lekkende kraan? Koop dan nu een kraan van Leaky's! Gegarandeerd geen lekken!
+	</p>
+	<hr class="soft"/>
+
+<br class="clr"/>
+<div class="tab-content">
+    <div class="tab-pane  active" id="blockView">
+    	<ul class="thumbnails">
+<?php
+
+/**
+ * Maak verbinding met de database
+ */
+$connection = new mysqli('localhost', 'webshop', 'pass', 'webshop')
+    or die('Kan geen verbinding maken met MySQL');
+
+$result = $connection->query("SELECT * FROM producten")
+  or die('Query error: ' . $connection->error);
+
+while ($row = $result->fetch_array()) {
+?>
+
+			<li class="span3">
+			  <div class="thumbnail">
+				<a href="product_detail.php?id=<?php echo $row['id'] ?>"><img src="/themes/images/products/<?php echo $row['afbeelding']; ?>" alt=""/></a>
+				<div class="caption">
+				  <h5><?php echo $row['naam']?></h5>
+				  <p>
+					<?php echo $row['beschrijving'] ?>
+				  </p>
+				   <h4 style="text-align:center"><a class="btn btn-primary" href="product_detail.php?id=<?php echo $row['id'] ?>">&euro;<?php echo $row['prijs'] ?></a></h4>
+				</div>
+			  </div>
+			</li>
+
+<?php
+}
+
+$connection->close();
+?>
+		  </ul>
+	<hr class="soft"/>
+	</div>
+</div>
+
+</div>
+</div>
+</div>
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/webshop/product_detail.php
+++ b/webshop/product_detail.php
@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Lekkende Kranen Empirium</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bootshop/bootstrap.min.css" media="screen"/>
+    <link href="/themes/css/base.css" rel="stylesheet" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link href="/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+<div id="header">
+<div class="container">
+
+<div id="welcomeLine" class="row">
+</div>
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+<a id="smallScreen" data-target="#topMenu" data-toggle="collapse" class="btn btn-navbar">
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+</a>
+  <div class="navbar-inner">
+    <a class="brand" href="/webshop"><img src="/themes/images/logo.png" alt="Leaky's Kranen Emporium"/></a>
+		<form class="form-inline navbar-search" method="post" action="products.html" >
+    </form>
+    <ul id="topMenu" class="nav pull-right">
+
+    </ul>
+  </div>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+	<div class="span12">
+
+
+
+<?php
+
+/**
+ * Maak verbinding met de database
+ */
+$connection = new mysqli('localhost', 'webshop', 'pass', 'webshop')
+    or die('Kan geen verbinding maken met MySQL');
+
+$query = 'SELECT naam, afbeelding, beschrijving, prijs FROM producten WHERE id = ' . $connection->real_escape_string($_GET['id']);
+
+$result = $connection->query($query)
+  or die('<div class="alert alert-danger">Query error: <pre>' . $connection->error . '</pre>Query: <code>' . $query . '</code> </div>');
+
+$row = $result->fetch_array();
+
+$connection->close();
+?>
+
+<div class="row">
+
+		<div id="gallery" class="span3">
+		<a href="/webshop/image_zoom.php?image=<?php echo $row['afbeelding'] ?>">
+		 <img src="/themes/images/products/<?php echo $row['afbeelding'] ?>" style="width:100%"/>
+		</a>
+        </div>
+		<div class="span6">
+			<h3><?php echo $row['naam'] ?></h3>
+			<small><?php echo $row['beschrijving'] ?></small>
+			<hr class="soft"/>
+			<form class="form-horizontal qtyFrm">
+			  <div class="control-group">
+				<label class="control-label"><span>&euro;<?php echo $row['prijs'] ?></span></label>
+                          </div>
+			</form>
+
+			<hr class="soft"/>
+			<h4>Dit item is op voorraad</h4>
+		</div>
+
+</div>
+
+
+
+</div>
+</div>
+</div>
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/webshop/product_detail_replace.php
+++ b/webshop/product_detail_replace.php
@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Lekkende Kranen Empirium</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link id="callCss" rel="stylesheet" href="/themes/bootshop/bootstrap.min.css" media="screen"/>
+    <link href="/themes/css/base.css" rel="stylesheet" media="screen"/>
+	<link href="/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
+	<link href="/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+<body>
+<div id="header">
+<div class="container">
+
+<div id="welcomeLine" class="row">
+</div>
+
+<!-- Navbar ================================================== -->
+<div id="logoArea" class="navbar">
+<a id="smallScreen" data-target="#topMenu" data-toggle="collapse" class="btn btn-navbar">
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+	<span class="icon-bar"></span>
+</a>
+  <div class="navbar-inner">
+    <a class="brand" href="/webshop"><img src="/themes/images/logo.png" alt="Leaky's Kranen Emporium"/></a>
+		<form class="form-inline navbar-search" method="post" action="products.html" >
+    </form>
+    <ul id="topMenu" class="nav pull-right">
+
+    </ul>
+  </div>
+</div>
+</div>
+</div>
+
+<!-- Header End====================================================================== -->
+<div id="mainBody">
+	<div class="container">
+	<div class="row">
+
+	<div class="span12">
+
+
+
+<?php
+
+/**
+ * Maak verbinding met de database
+ */
+$connection = new mysqli('localhost', 'webshop', 'pass', 'webshop')
+    or die('Kan geen verbinding maken met MySQL');
+
+$id = $_GET['id'];
+
+// Damn hackers, let's filter out all SELECT and UNION to be extra safe!
+$id = str_ireplace('SELECT', '', $id);
+$id = str_ireplace('UNION', '', $id);
+
+$query = 'SELECT naam, afbeelding, beschrijving, prijs FROM producten WHERE id = ' . $connection->real_escape_string($id);
+
+$result = $connection->query($query)
+  or die('<div class="alert alert-danger">Query error: <pre>' . $connection->error . '</pre>Query: <code>' . $query . '</code> </div>');
+
+$row = $result->fetch_array();
+
+$connection->close();
+?>
+
+<div class="row">
+
+		<div id="gallery" class="span3">
+		<a href="/webshop/image_zoom.php?image=<?php echo $row['afbeelding'] ?>">
+		 <img src="/themes/images/products/<?php echo $row['afbeelding'] ?>" style="width:100%"/>
+		 </a>
+        </div>
+		<div class="span6">
+			<h3><?php echo $row['naam'] ?> (replace)</h3>
+			<small><?php echo $row['beschrijving'] ?></small>
+			<hr class="soft"/>
+			<form class="form-horizontal qtyFrm">
+			  <div class="control-group">
+				<label class="control-label"><span>&euro;<?php echo $row['prijs'] ?></span></label>
+                          </div>
+			</form>
+
+			<hr class="soft"/>
+			<h4>Dit item is op voorraad</h4>
+		</div>
+
+</div>
+
+
+
+</div>
+</div>
+</div>
+</div>
+<!-- MainBody End ============================= -->
+</body>
+</html>
--- a/wereldwijs/index.php
+++ b/wereldwijs/index.php
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Wereldwijs</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+    <style>
+    html, body {
+        height: 100%;
+    }
+    .content {
+        width: 70%;
+        margin-top: 20px;
+        text-align:center;
+        background-image: url(/themes/images/world-map.png);
+        background-repeat: no-repeat;
+        background-position: 50% 80%;
+        height: 100%;
+    }
+    </style>
+  </head>
+
+<body>
+
+<div class="center-block content">
+  <nav class="navbar navbar-default">
+  <div class="navbar-header">
+      <a class="navbar-brand" href="#">Wereldwijs</a>
+    </div>
+  <div class="container-fluid">
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li><a href="index.php?id=1">Frankrijk</a></li>
+        <li><a href="index.php?id=2">Nederland</a></li>
+        <li><a href="index.php?id=3">Duitsland</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+    <img src="/themes/images/world.png" style="width: 10%;">
+    <p>Wereldwijs: Leer spelenderwijs over de politiek van de wereld</p>
+
+<?php
+$connection = new mysqli('localhost', 'wiki', 'pass', 'wiki')
+    or die('Kan geen verbinding maken met MySQL');
+
+$id = $_GET['id'];
+
+$query = 'SELECT titel, tekst FROM paginas WHERE secret=0 AND id=' . $connection->real_escape_string($id);
+
+$result = $connection->query($query)
+  or die('<div class="alert alert-danger">Query error: <pre>' . $connection->error . '</pre>Query: <code>' . $query . '</code> </div>');
+
+$row = $result->fetch_array();
+if(!$row) {
+    echo '<div class="alert alert-warning">Deze pagina bestaat niet, scheer je weg!</div>';
+} else {
+    echo "<h1>" . $row['titel'] . "</h1>";
+    echo $row['tekst'];
+}
+
+$connection->close();
+?>
+
+
+    </div>
+
+</body>
+</html>
--- a/wereldwijs/index_xss.php
+++ b/wereldwijs/index_xss.php
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Wereldwijs</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Paul Wagener">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+
+    <style>
+    html, body {
+        height: 100%;
+    }
+    .content {
+        width: 70%;
+        margin-top: 20px;
+        text-align:center;
+        background-image: url(/themes/images/world-map.png);
+        background-repeat: no-repeat;
+        background-position: 50% 80%;
+        height: 100%;
+    }
+    .pagina {
+      display: none;
+    }
+    </style>
+  </head>
+
+<body>
+
+<div class="center-block content">
+  <nav class="navbar navbar-default">
+  <div class="navbar-header">
+      <a class="navbar-brand" href="#">Wereldwijs (XSS)</a>
+    </div>
+  <div class="container-fluid">
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li><a href="#frankrijk">Frankrijk</a></li>
+        <li><a href="#nederland">Nederland</a></li>
+        <li><a href="#duitsland">Duitsland</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+    <img src="/themes/images/world.png" style="width: 10%;">
+    <p>Wereldwijs: Leer spelenderwijs over de politiek van de wereld</p>
+
+
+    <div id="frankrijk" class="pagina"><h1>Frankrijk</h1>Frankrijk is een democratische republiek. De president van de Franse Republiek wordt sinds 2002 voor vijf jaar gekozen (voorheen was dat zeven jaar). De president heeft sinds de invoering van de Vijfde Republiek in 1958 veel macht vergeleken met andere westerse democratieen, omdat die regeringen kan benoemen en ontslaan, en de uitvoerende macht sterk staat tegenover de wetgevende macht. De president heeft geen vertrouwensvotum van het parlement nodig, want hij/zij wordt via landelijke verkiezingen direct gekozen en kan zonder zelf af te treden het parlement een maal voortijdig ontbinden en vervroegde parlementsverkiezingen uitschrijven.</div>
+
+    <div id="nederland" class="pagina"><h1>Nederland</h1>
+    Nederland is een constitutionele erfmonarchie en staatsrechtelijk gezien een parlementaire democratie. Belangrijke mijlpalen in de politieke geschiedenis waren de grondwetsherziening van 1848 onder leiding van de liberale staatsman Thorbecke, waarbij onder meer een einde werd gemaakt aan de persoonlijke regeermacht van de koning, de koninklijke onschendbaarheid en de ministeriele verantwoordelijkheid voor het regeringsbeleid werden ingevoerd en het parlement meer invloed kreeg; en 1919, toen het algemeen kiesrecht werd ingevoerd. De Nederlandse politiek werd lange tijd gekenmerkt door de verzuiling, de opdeling van de bevolking in verschillende maatschappelijke groepen. Tegelijkertijd is er een sterk streven naar het bereiken van consensus, vaak aangeduid als het poldermodel. In internationaal perspectief staat Nederland voorts bekend om zijn liberale beleid op het gebied van drugs, prostitutie, euthanasie en het homohuwelijk. De hoofdstad van Nederland is Amsterdam. Den Haag is echter al sinds de zestiende eeuw bijna onafgebroken de regeringszetel en de woonplaats van de vorst.</div>
+
+    <div id="duitsland" class="pagina"><h1>Duitsland</h1>
+    De Bondsrepubliek Duitsland is met haar grondwet van 23 mei 1949 een democratisch-parlementaire bondsstaat. De grondwet kan door een tweederdemeerderheid in Bondsdag en bondsraad gewijzigd worden. Enkele artikelen, waarin de basisprincipes van de grondwet zoals de federale structuur van de staat, de democratische, sociale en rechtsprincipes van de staat, en de onschendbaarheid van de menselijke waarde van het individu, zijn van iedere wijziging uitgesloten.</div>
+
+    <script>
+      // Als de de hash van de URL veranderd (wat achter de # staat)
+      window.onhashchange = function() {
+        // Hide alle pagina's
+        $(".pagina").hide();
+
+        // En laat de pagina met het juiste id juist weer zien
+        // window.location.hash heeft bijvoorbeeld de waarde '#frankrijk', wat ook meteen een jQuery selector is
+        $(window.location.hash).show();
+      }
+    </script>
+    </div>
+
+</body>
+</html>
				`@ -0,0 +1 @@`
				`BUILDDIR/security-workshop.conf /etc/init/security-workshop.conf`