-------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">&nbsp;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-----