diff --git a/src/main/java/se/su/dsv/scipro/basepages/DemoPage.html b/src/main/java/se/su/dsv/scipro/basepages/DemoPage.html
index 86bd916e0d..01852a7a24 100644
--- a/src/main/java/se/su/dsv/scipro/basepages/DemoPage.html
+++ b/src/main/java/se/su/dsv/scipro/basepages/DemoPage.html
@@ -1,246 +1,311 @@
<!DOCTYPE html>
-<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
+<html
+ xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body>
-<wicket:extend>
-
- <div class="info-box rounded-box span-20 last">
- <p>Remember to save the thingamajig before continuing.</p>
- <ul>
- <li>Edit</li>
- <li>Save</li>
- <li>Continue working</li>
- </ul>
- </div>
-
- <div class="info-box rounded-box span-12 last">
- <p>Do not leave your computer unsupervised.</p>
- </div>
-
- <div class="info-box rounded-box span-8 last">
- Text without p enclosed.
- </div>
-
- <div class="span-22 last">
- <h2 class="section">This is a section</h2>
- <p>Cool</p>
- </div>
-
- <div class="span-18 last">
- <h3 class="section">This is a subsection</h3>
- <p>Even cooler</p>
- </div>
-
- <div id="message-list" class="span-16 last">
- <table class="rounded-table">
- <tr>
- <th>Subject</th>
- <th>From</th>
- <th>Date</th>
- </tr>
- <tr class="unread-message-table-row">
- <td>Mötesförslag</td>
- <td>Lars Larsson</td>
- <td>2011-04-01</td>
- </tr>
- <tr>
- <td>Urgent: Changed dates for peer-review</td>
- <td>Nils Nilsson</td>
- <td>2011-03-27</td>
- </tr>
- <tr>
- <td>Handledning 29 mars inställd</td>
- <td>Hand Ledare</td>
- <td>2011-03-26</td>
- </tr>
- <tr>
- <td colspan="3"><a href="#">All your messages...</a></td>
- </tr>
- </table>
- </div>
-
- <div id="file-list" class="span-14 last">
- <table class="rounded-table">
- <tr>
- <th>Filename</th>
- <th>Size</th>
- <th>Date</th>
- </tr>
- <tr>
- <td>file1.pdf</td>
- <td>201 KiB</td>
- <td>2011-04-01</td>
- </tr>
- <tr>
- <td>file2.pdf</td>
- <td>13 KiB</td>
- <td>2011-03-27</td>
- </tr>
- <tr>
- <td>Total: 2</td>
- <td>214 KiB</td>
- <td> </td>
- </tr>
- </table>
- </div>
-
- <div id="unstyled-table" class="span-18 last">
- <table class="rounded-table-top">
- <tr>
- <th>Column A</th>
- <th>Column B</th>
- <th>Column C</th>
- </tr>
- <tr>
- <td>Hej</td>
- <td>Svejs</td>
- <td>Karamelltroll</td>
- </tr>
- <tr>
- <td>Knoll</td>
- <td>Tott</td>
- <td>Pepparlott</td>
- </tr>
- </table>
- </div>
-
- <div class="span-18 last">
- <h3 wicket:id="tooltipDemo">MouseOver here for tooltip</h3>
- <h3>Highlighted form components</h3>
- <div wicket:id="radioChoices"></div>
-
- <div>
- <span class="hilight">
- <!-- Just stick a normal wicket:id onto the input to use it with wicket.
- To get the highlight effect it must be contained in this span and the order of input+label is important -->
- <input id="d1" type="checkbox" class="question-display"></input>
- <label for="d1">Checkbox</label>
- </span>
- <span class="hilight">
- <input id="d2" type="checkbox" checked class="question-display"></input>
- <label for="d2">Checked Checkbox</label>
- </span>
-
- <span class="hilight">
- <input id="d3" type="checkbox" checked disabled class="question-display"></input>
- <label for="d3">Checked Checkbox disabled</label>
- </span>
-
- <span class="hilight">
- <input id="d4" type="checkbox" disabled class="question-display"></input>
- <label for="d4">Checkbox disabled</label>
- </span>
- </div>
- </div>
-
- <div class="span-5 last">
- <h3>Icons</h3>
- <table>
- <tr>
- <td>Expand section</td>
- <td><img wicket:id="expandIcon" /></td>
- </tr>
- <tr>
- <td>Contract section</td>
- <td><img wicket:id="contractIcon" /></td>
- </tr>
- <tr>
- <td>Edit</td>
- <td><img wicket:id="editIcon" /></td>
- </tr>
- <tr>
- <td>Delete</td>
- <td><img wicket:id="deleteIcon" /></td>
- </tr>
- <tr>
- <td>Add</td>
- <td><img wicket:id="addIcon" /></td>
- </tr>
- <tr>
- <td>Details</td>
- <td><img wicket:id="detailsIcon" /></td>
- </tr>
- <tr>
- <td>Yes</td>
- <td><img wicket:id="yesIcon" /></td>
- </tr>
- <tr>
- <td>No</td>
- <td><img wicket:id="noIcon" /></td>
- </tr>
- <tr>
- <td>Check</td>
- <td><img wicket:id="checkIcon" /></td>
- </tr>
- <tr>
- <td>Arrow down</td>
- <td><img wicket:id="arrowDownIcon" /></td>
- </tr>
- <tr>
- <td>Arrow up</td>
- <td><img wicket:id="arrowUpIcon" /></td>
- </tr>
- <tr>
- <td>Arrow left</td>
- <td><img wicket:id="arrowLeftIcon" /></td>
- </tr>
- <tr>
- <td>Arrow right</td>
- <td><img wicket:id="arrowRightIcon" /></td>
- </tr>
- <tr>
- <td>Help</td>
- <td><img wicket:id="helpIcon" /></td>
- </tr>
- <tr>
- <td>Home</td>
- <td><img wicket:id="homeIcon" /></td>
- </tr>
- <tr>
- <td>Important</td>
- <td><img wicket:id="importantIcon" /></td>
- </tr>
- <tr>
- <td>Mail</td>
- <td><img wicket:id="mailIcon" /></td>
- </tr>
- <tr>
- <td>New mail</td>
- <td><img wicket:id="mailNewIcon" /></td>
- </tr>
- <tr>
- <td>Settings</td>
- <td><img wicket:id="settingsIcon" /></td>
- </tr>
- <tr>
- <td>Empty</td>
- <td><img wicket:id="emptyIcon" /></td>
- </tr>
- <tr>
- <td>User</td>
- <td><img wicket:id="userIcon" /></td>
- </tr>
- <tr>
- <td>Done event</td>
- <td><img wicket:id="eventDoneIcon" /></td>
- </tr>
- <tr>
- <td>Upcoming event</td>
- <td><img wicket:id="eventUpcomingIcon" /></td>
- </tr>
- </table>
- <div>
- <span>Example of IconizedComponent</span><br />
- <span wicket:id="user"></span>
- </div>
- <div>
- <span>Example of AjaxActionIcon: </span><img wicket:id="actionIcon" />
- </div>
- </div>
- <div class="prepend-1 span-8 last">
- <h4>Example of ExpandableMulitLineLabel:</h4>
- <span wicket:id="exMultiLineLabel"></span>
- </div>
-
-</wicket:extend>
+ <wicket:extend>
+
+ <div class="span-22 last">
+
+ <table class="rounded-table seminar-table even-rows">
+ <tr>
+ <th>Date</th>
+ <th>Level</th>
+ </tr>
+ <tr>
+ <td><span class="span-2">20XX-XX-XX</span>
+ </td>
+ <td>Bachelor</td>
+ </tr>
+ <tr>
+ <td><span class="span-2">20XX-XX-XX</span>
+ </td>
+ <td>Bachelor</td>
+ </tr>
+ <tr>
+ <td><span class="span-2">20XX-XX-XX</span>
+ </td>
+ <td>Bachelor</td>
+ </tr>
+ <tr>
+ <td><span class="span-2">20XX-XX-XX</span>
+ </td>
+ <td>Bachelor</td>
+ </tr>
+ <tr>
+ <td colspan="22"></td>
+ </tr>
+ </table>
+
+ <!-- Left column -->
+ <div class="span-11 colborder">
+
+ <div class="append-bottom"></div>
+
+ <div class="append-bottom">
+
+ <div class="box-title rounded">
+ <span>Just a heading</span>
+ </div>
+
+ </div>
+
+
+ <div class="append-bottom">
+
+ <fieldset class="rounded-fieldset">
+ <legend>Group view </legend>
+ <div>Title: SciPro</div>
+ <div>Level: Bachelor</div>
+ <div>Authors: Janne</div>
+ </fieldset>
+
+ </div>
+
+
+
+
+
+ <div class="append-bottom">
+
+ <div class="info-box rounded-box last">
+ <p>Remember to save the thingamajig before continuing.</p>
+ <ul>
+ <li>Edit</li>
+ <li>Save</li>
+ <li>Continue working</li>
+ </ul>
+ </div>
+
+ </div>
+
+
+ <div class="append-bottom">
+
+ <div class="rounded-box">
+
+ <span class="box-title rounded">Round box <span><a
+ href="#" class="right-corner-resource"><img class="icon-12"
+ src="images/icons/delete_16x16.png" alt="Delete" title="Delete" />
+ </a> </span> </span> <span>With a heading and close/delete button</span>
+ </div>
+
+ </div>
+
+ <div class="append-bottom">
+
+ <div class="rounded-box">
+
+ <span class="box-title rounded">Round box</span> <span>With
+ a heading</span>
+ </div>
+
+ </div>
+
+
+ <div class="append-bottom">
+
+ <div class="rounded-box">
+ <span>Just a round box</span>
+ </div>
+
+ </div>
+
+ <div class="append-bottom">
+
+ <div>Lorum ipsum blabla blabla bla bla</div>
+
+ </div>
+
+ <div class="append-bottom">
+ <button type="submit">Button</button>
+ </div>
+
+
+
+
+ <div class="append-bottom">
+ <span wicket:id="tooltipDemo">MouseOver here for tooltip</span>
+ </div>
+
+ <div class="append-bottom">
+ <h4>Example of ExpandableMulitLineLabel:</h4>
+ <span wicket:id="exMultiLineLabel"></span>
+ </div>
+
+
+
+
+ </div>
+
+ <div class="span-10.5 last">
+
+ <div class="append-bottom">
+
+ <table>
+ <tr>
+ <th>Date</th>
+ <th>Level</th>
+ </tr>
+ <tr>
+ <td>Blabla</td>
+ <td>HlaHla</td>
+ </tr>
+
+ </table>
+
+ </div>
+
+
+
+ <button>Hej</button>
+
+ <h3>Icons</h3>
+
+ <button>Hej</button>
+
+
+
+
+ <table>
+ <tr>
+ <td>Expand section</td>
+ <td><img wicket:id="expandIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Contract section</td>
+ <td><img wicket:id="contractIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Edit</td>
+ <td><img wicket:id="editIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Delete</td>
+ <td><img wicket:id="deleteIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Add</td>
+ <td><img wicket:id="addIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Details</td>
+ <td><img wicket:id="detailsIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Yes</td>
+ <td><img wicket:id="yesIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>No</td>
+ <td><img wicket:id="noIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Check</td>
+ <td><img wicket:id="checkIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Arrow down</td>
+ <td><img wicket:id="arrowDownIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Arrow up</td>
+ <td><img wicket:id="arrowUpIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Arrow left</td>
+ <td><img wicket:id="arrowLeftIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Arrow right</td>
+ <td><img wicket:id="arrowRightIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Help</td>
+ <td><img wicket:id="helpIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Home</td>
+ <td><img wicket:id="homeIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Important</td>
+ <td><img wicket:id="importantIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Mail</td>
+ <td><img wicket:id="mailIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>New mail</td>
+ <td><img wicket:id="mailNewIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Settings</td>
+ <td><img wicket:id="settingsIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Empty</td>
+ <td><img wicket:id="emptyIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>User</td>
+ <td><img wicket:id="userIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Done event</td>
+ <td><img wicket:id="eventDoneIcon" />
+ </td>
+ </tr>
+ <tr>
+ <td>Upcoming event</td>
+ <td><img wicket:id="eventUpcomingIcon" />
+ </td>
+ </tr>
+ </table>
+ <div>
+ <span>Example of IconizedComponent</span><br /> <span
+ wicket:id="user"></span>
+ </div>
+ <div>
+ <span>Example of AjaxActionIcon: </span><img wicket:id="actionIcon" />
+ </div>
+
+ </div>
+
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+ </wicket:extend>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/webapp/css/blueprint/screen.css b/src/main/webapp/css/blueprint/screen.css
index be90bba0f1..47f9c086b1 100644
--- a/src/main/webapp/css/blueprint/screen.css
+++ b/src/main/webapp/css/blueprint/screen.css
@@ -118,6 +118,7 @@ form.inline p {margin-bottom:0;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
+.span-10.5 {width:429}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
diff --git a/src/main/webapp/css/scipro.css b/src/main/webapp/css/scipro.css
index 1d5fe781cd..37d3b9d4f3 100644
--- a/src/main/webapp/css/scipro.css
+++ b/src/main/webapp/css/scipro.css
@@ -1,6 +1,6 @@
@IMPORT url("menu.css");
/* är det såhär man aktiverar plugins? */
-@IMPORT url("blueprint/plugins/buttons/screen.css");
+/* @IMPORT url("blueprint/plugins/buttons/screen.css"); */
/* BASE */
@@ -119,6 +119,23 @@ img.department-logotype {
.inline-link-list li a { display: block; padding: 5px 10px; text-decoration: none; }
.inline-link-list li:hover > a { text-decoration: underline; }
+
+.rounded-fieldset {
+
+ padding:1em;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+
+}
+
+.rounded {
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
+
+
.rounded-box {
font-size: 0.9em;
padding:1.5em;