rendered paste body-------START BASE PAGE---------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/"
xml:lang="en"
lang="en">
<head>
<title>NCS Imaging Application</title>
<meta http-equiv="content-type" content="text/html"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
</head>
<body>
<!-- ALL CONTENT COMES IN HERE -->
<wicket:child/>
</body>
</html>
-------END BASE PAGE---------
-------START IMAGING PAGE-------
<wicket:extend>
<div align="center">
<table width="1000px" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="41px" background="images/back_left.gif"></td>
<td width="918px">
<!-- DOCUMENT BODY START -->
<table align="center" width="918px" cellpadding="0" cellspacing="0"
border="0" bgColor="#FFFFFF">
<tr>
<td><img src="images/ncs_header_image_wide.jpg" alt="" /></td>
</tr>
<tr>
<td align="center">
<div wicket:id="tabs" class="tabpanel2">[tabbed panel will be here]</div>
</td>
</tr>
<tr>
<td bgcolor="#978A88" height="40px"></td>
</tr>
</table>
<!-- DOCUMENT BODY END -->
</td>
<td width="41px" background="images/back_right.gif"></td>
</tr>
</table>
</div>
</wicket:extend>
-----END IMAGING PAGE-------
-----START IMAGE SEARCH PANEL------
<wicket:panel>
<br />
<form wicket:id="imageSearchForm" action="">
<table align="center" width="510px">
<tr>
<td height="50" align="left" colspan="2">
<div wicket:id="validation-feedback" style="color: red">[[feedback]]</div>
</td>
</tr>
<tr>
<td>
<table align="center" width="500" class="formPTC" cellpadding="5px" cellspacing="0px">
<tr>
<td class="formheaderptc" colspan="2"> Image Search</td>
</tr>
<tr>
<td class="formlabelptc" width="150">
<label wicket:id="ordernumber-label">[order number field label]</label>:
</td>
<td class="formdataptc">
<input type="text" wicket:id="orderNumber" />
</td>
</tr>
<tr>
<td class="formlabelptc">
<label wicket:id="documentcategory-label">[document category field label]</label>:
</td>
<td class="formdataptc">
<select wicket:id="documentCategory">
<option>category 1</option>
<option>category 2</option>
</select>
</td>
</tr>
<tr>
<td class="formlabelptc">
<label wicket:id="documenttype-label">[document type field label]</label>:
</td>
<td class="formdataptc">
<select wicket:id="documentType" size="5" width="100">
<option>type 1</option>
<option>type 2</option>
</select>
</td>
</tr>
<tr>
<td class="formlabelptc"><label wicket:id="sortby-label">[sort by field label]</label>:</td>
<td class="formdataptc"><select wicket:id="sortBy">
<option>opt 1</option>
<option>opt 2</option>
</select></td>
</tr>
<tr>
<td class="formfooterptc" align="center" colspan="2">
<input id="submitButton" type="submit" value="Search" wicket:id="submitButton" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</wicket:panel>
------END IMAGE SEARCH PANEL------
----START CSS-----
<!--
#040062 - PTC navy blue
#978A88 - PTC brown
-->
body {
background-color: #EEEAE9;
background-image: url('wicket-logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 96% 96%;
color: black;
font-family: 'Tahoma', 'Lucida Sans', 'Arial', 'Helvetica', 'Sans-serif', 'sans';
font-size: 9pt;
line-height: 1.8em;
padding: 0px 0px 0px 0px;
<!--
margin: 0px 0px 0px 0px;
-->
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
table{ font-size: 12px; }
table.table1PTC{ background-color:#000066; width: 752px; }
td.lineseparatorPTC{ background-color:#000066; width: 100%; height: 1px; }
td.menuPTC{
font-size: 14px;
color: #000066;
font-weight: bold;
height: 25px;
}
a.menuPTC:link{ color: #000066; text-decoration: none; }
a.menuPTC:hover{ color: #FFFFFF; text-decoration: none; }
a.menuPTC:visited{ color: #000066; text-decoration: none; }
a.menuPTC:visited:hover{ color: #FFFFFF; text-decoration: none }
a.menuPTC:active{ color: #000066; text-decoration: none; }
table.dataview caption { text-align: left; }
table.dataview tr { padding-top: 2px; padding-bottom: 2px; }
table.dataview tr.even { background-color: #ffebcd; }
table.dataview tr.odd { background-color: #fff; }
table.dataview tr td { padding-left: 8px; padding-right: 30px; }
table.dataview tr th { color: black; padding-top: 3px; padding-bottom: 3px; padding-left: 8px; padding-right: 30px; background-color: #c1e4ff; border-bottom: 1px solid #0079d6; border-top: 1px solid #0079d6; text-align: left; white-space: nowrap; vertical-align: middle;}
table.dataview tr th { background-position: right; background-repeat:no-repeat; }
table.dataview tr th.wicket_orderDown {
background-color: #87cbff; background-image: url(displaytag/img/arrow_down.png); }
table.dataview tr th.wicket_orderUp {
background-color: #87cbff; background-image: url(displaytag/img/arrow_up.png); }
table.dataview tr th.wicket_orderNone {
background-image: url(displaytag/img/arrow_off.png);
}
table.dataview tr th a { font-weight: normal; }
table.dataview #message { padding-left: 3px; }
table.dataview caption { padding-bottom: 2px; }
/***** FORM TABLE *****/
table.formPTC{
border-top: 1 solid #000000;
border-right: 1 solid #000000;
}
td.formheaderPTC{
background-color:#978A88;
font-size: 14px;
font-weight: bold;
color:#FFFFFF;
border-left: 1 solid #000000;
border-bottom: 1 solid #000000;
}
td.formlabelPTC{
background-color:#DAD2D0;
font-weight: bold;
color:#000000;
border-left: 1 solid #000000;
border-bottom: 1 solid #000000;
}
td.formdataPTC{
border-left: 1 solid #000000;
border-bottom: 1 solid #000000;
}
td.formfooterPTC{
border-left: 1 solid #000000;
border-bottom: 1 solid #000000;
background-color:#C8BDBB;
}
td.formnotePTC{
border-left: 1 solid #000000;
border-bottom: 1 solid #000000;
background-color:#eeeccc;
}
font.sectionTitlePTC{
color:#000066;
font-size: 16px;
font-weight: bold;
}
a.linkPTC:link{ color: #000066; text-decoration: underlined; }
a.linkPTC:hover{ color: #666666; text-decoration: underlined; }
a.linkPTC:visited{ color: #000066; text-decoration: underlined; }
a.linkPTC:active{ color: #000066; text-decoration: underlined; }
input.requiredFieldPTC{ background-color:#99CCFF; }
select.requiredFieldPTC{ background-color:#99CCFF; }
textarea.requiredFieldPTC{ background-color:#99CCFF; }
p.requiredFieldPTC{ background-color:#99CCFF; }
/* TAB PANEL STYLES */
div.tabpanel div.tab-row{
float:left;
width:750px;
background:#DAE0D2 url("../tabs/bg.gif") repeat-x bottom;
line-height:normal;
}
div.tabpanel div.tab-row ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
div.tabpanel div.tab-row li {
float:left;
background:url("../tabs/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
div.tabpanel div.tab-row a {
display:block;
background:url("../tabs/right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
white-space:nowrap;
color:#eee;
}
div.tabpanel div.tab-row a:hover {
color:#fff;
}
div.tabpanel div.tab-row li.selected {
background-image:url("../tabs/left_on.gif");
}
div.tabpanel div.tab-row li.selected a {
background-image:url("../tabs/right_on.gif");
color:#333;
padding-bottom:5px;
}
/* VARIATION 1 TAB PANEL STYLES */
div.tabpanel1 div.tab-row{
float:left;
width:750px;
background:#DAE0D2 url("../tabs1/bg.gif") repeat-x bottom;
line-height:normal;
}
div.tabpanel1 div.tab-row ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
div.tabpanel1 div.tab-row li {
float:left;
background:url("../tabs1/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
div.tabpanel1 div.tab-row a {
display:block;
background:url("../tabs1/right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
white-space:nowrap;
}
div.tabpanel1 div.tab-row a:hover {
color:#333;
}
div.tabpanel1 div.tab-row li.selected {
background-image:url("../tabs1/left_on.gif");
}
div.tabpanel1 div.tab-row li.selected a {
background-image:url("../tabs1/right_on.gif");
color:#333;
padding-bottom:5px;
}
/* TABBED PANEL VARIATION 2 */
div.tabpanel2 div.tab-row {
float:left;
width:918px;
background:#978A88;
font-size:85%;
line-height:normal;
}
div.tabpanel2 div.tab-row ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
div.tabpanel2 div.tab-row li {
float:left;
background:url("../tabs2/right.gif") no-repeat right top;
margin:0;
padding:0 5px 0 0;
}
div.tabpanel2 div.tab-row a {
float:left;
display:block;
background:url("../tabs2/left.gif") no-repeat left top;
padding:5px 7px 4px 20px;
text-decoration:none;
font-weight:bold;
color:#9cf;
white-space:nowrap;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
div.tabpanel2 div.tab-row a {float:none;}
/* End IE5-Mac hack */
div.tabpanel2 div.tab-row a:hover {
color:#fff;
}
div.tabpanel2 div.tab-row li.selected {
background-image:url("../tabs2/right_on.gif");
}
div.tabpanel2 div.tab-row li.selected a {
background-image:url("../tabs2/left_on.gif");
color:#333;
padding-bottom:5px;
}
/* TABBED PANEL VARIATION 3 */
div.tabpanel3 div.tab-row {
float:left;
width:750px;
background:#eee url("tabs3/bg.jpg") repeat-x top;
line-height:normal;
}
div.tabpanel3 div.tab-row ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
div.tabpanel3 div.tab-row li {
float:left;
background:url("tabs3/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 28px;
}
div.tabpanel3 div.tab-row a {
float:left;
display:block;
background:url("tabs3/right.gif") no-repeat right top;
padding:9px 28px 4px 0px;
text-decoration:none;
font-weight:bold;
color:#92A2AC;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
div.tabpanel3 div.tab-row a {float:none;}
/* End IE5-Mac hack */
div.tabpanel3 div.tab-row a:hover {
color:#A56060;
}
div.tabpanel3 div.tab-row li.selected {
background-image:url("tabs3/left_on.gif");
}
div.tabpanel3 div.tab-row li.selected a {
background-image:url("tabs3/right_on.gif");
color:#A56060;
}
div.tabpanel4 div.tab-row ul {
height: 20px;
margin: 0;
padding-left: 10px;
background: url( tabs4/tab_bottom.gif ) repeat-x bottom;
}
div.tabpanel4 div.tab-row li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
div.tabpanel4 div.tab-row a:link, div.tabpanel4 div.tab-row a:visited {
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
div.tabpanel4 div.tab-row li.selected a:link, div.tabpanel4 div.tab-row a:visited.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
div.tabpanel4 div.tab-row a:hover {
background: #fff;
}
--------END CSS-----