<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
* {
margin:0;
padding:0;
}
body {
background:url(../../images/background.png) top left;
font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
h2{
margin-bottom:10px;
}
#wrapper{
width:100%;
//margin:40px auto 0;
}
#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}
#wrapper a{
display:block;
font-size:1.2em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#tabContainer {
width:100%;
//padding:5px;
//background-color:#2e2e2e;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tabs{
height:30px;
}
.tabs > ul{
font-size: 1em;
list-style:none;
}
.tabs > ul > li{
margin:0 2px 0 0;
padding:7px 10px;
display:block;
float:left;
color:#FFF;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #C9C9C9; /* old browsers */
background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.tabs > ul > li:hover{
background: #FFFFFF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #333;
}
.tabs > ul > li.tabActiveHeader{
background: #FFFFFF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #333;
}
.tabscontent {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding:10px 10px 25px;
background: #FFFFFF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
margin:0;
color:#333;
}
/*------- Table overflow (scrollable) ---------*/
#content-containertable.override{
width:150px;
border-color:Silver;
border-style:solid;
}
#content-containertable.override div{
height:210px;
overflow-y:scroll;
}
.removeLinkColour{
text-decoration:none;
color:black;
}
.test{
text-decoration:none;
color:black;
}
#searchResultTable
{
text-align:left;
font-size:12px;
}
</style>
<script type="text/javascript">
window.onload = function() {
// get tab container
var container = document.getElementById("tabContainer");
// set current tab
var navitem = container.querySelector(".tabs ul li");
//store which tab we are on
var ident = navitem.id.split("_")[1];
navitem.parentNode.setAttribute("data-current", ident);
//set current tab with class of activetabheader
navitem.setAttribute("class", "tabActiveHeader");
//hide two tab contents we don't need
var pages = container.querySelectorAll(".tabpage");
for ( var i = 1; i < pages.length; i++) {
pages[i].style.display = "none";
}
//this adds click event to tabs
var tabs = container.querySelectorAll(".tabs ul li");
for ( var i = 0; i < tabs.length; i++) {
tabs[i].onclick = displayPage;
}
}
// on click of one of tabs
function displayPage() {
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
document.getElementById("tabHeader_" + current)
.removeAttribute("class");
document.getElementById("tabpage_" + current).style.display = "none";
var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
this.setAttribute("class", "tabActiveHeader");
document.getElementById("tabpage_" + ident).style.display = "block";
this.parentNode.setAttribute("data-current", ident);
}
</script>
</head>
<body>
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1" >11111111</li>
<li id="tabHeader_2" >2222222222</li>
<li id="tabHeader_3" >33333333333333</li>
<li id="tabHeader_4" > 4444444444</li>
</ul>
</div>
<div class="tabscontent">
<div id="tabpage_1" class="tabpage" >111111</div>
<div id="tabpage_2" class="tabpage" >2222</div>
<div id="tabpage_3" class="tabpage" > 3333</div>
<div id="tabpage_4" class="tabpage" >4444</div>
</div>
</div>
</body>
</html>