/*These two lines are to make default-vertical scroll bar in Firefox*/
html { overflow: -moz-scrollbars-vertical;}
html { overflow-x: auto; }

body {
  margin:0;
	font-family:arial;
	font-size:14px;
	background-color:#c9edff;
}

a {color:#312b93}

#pageContainer {
	width:800px;
	margin:auto;
}

#top {
	width:100%;
	height:150px;
}

#header {
	width:800px;
	margin:auto;
	padding-top:15px;
}

#logo {
  position:relative;
  float:left;
}

#pageHeader {
  float:right;
	background-image: url(images/headerbackground.png);
	background-repeat: no-repeat;
	width:700px;
	height:50px;
	top:10px;
	margin-bottom:0px;
	position:relative;
	z-index:2;
}

#pageHeader .title {
	height:40px;
	width:600px;
	margin-bottom:0px;
	background-image: url(images/vtvtTitle.png);
	background-repeat: no-repeat;
	position:relative;
	top:10px;
	left:30px;
	z-index:3;
}

* html #pageHeader {
  background-image: url(images/IEheaderbackground.jpg);
}

* html #pageHeader .title {
  display: none;
}

#tabs {
	margin-right:30px;
}

.tab {
  background: url(images/hometab.png) no-repeat;
	width:100px;
	height:50px;
	margin-right:2px;
	float:right;
	position:relative;
	bottom:20px;
	z-index:1;
	text-align:center;
	text-decoration:none;
}

.tab:hover {
  bottom:10px;
}

* html .tab {
  bottom:30px;
}

* html .tab:hover {
  bottom:20px;
}

.tabText {
  color:#ffce4d;
  font-weight:bold;
  position:relative;
  top:30px;
}

#bar {
  position:relative;
  bottom:0px;
}

#pageBody {
  width:800px;
  margin:auto;
  clear:both;
}

#navTest {
  position:relative;
  width:150px;
  float:left;
  left:10px;
  font-size:16px;
}

#navTest li.mainMenu{
  position:relative;
  text-align:center;
  font-size:12px;
  font-weight:700;
  padding-bottom:10px;
  
  margin-top:5px;
  border-bottom:solid #33ccff;
}

#navTest li.mainMenu:hover{background:url(images/menuBack.png) no-repeat}
#navTest li.mainMenu:hover a{color:#ffce4d}

/* All <ul> tags in the menu including the first level */
.menulist, .menulist ul {
 padding: 1px;
 width: 110px;
 list-style: none;
}

.submenu {
  width:100px;
  background-color:#312b93;
}

.menulist .submenu a{color:#ffce4d}

/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
.menulist ul {
 display: none;
 position: absolute;
 top: 0;
 left: 110px;
}

/* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */
.menulist li {
 position: relative;
}

/* Links inside the menu */
.menulist li a {
 display: block;
 padding: 3px 4px 3px 0px;
 color: #000;
 text-decoration: none;
 border: 1px solid transparent;
 margin:0;

}
/* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */
* html .menulist li a {
 border-width: 0;
 margin: 1px;
}

/*
 Lit items: hover/focus = the current item. 'highlighted' = parent items to visible menus.
 Here, active items are given a border, and a padding tweak to 'elevate' the text within.
 Feel free to use background-image:url(file.gif) instead of background-color:#nnn here...
*/
.submenu a:hover, .submenu a.highlighted:hover, .submenu a:focus {
 background-color: #46A;
 padding: 2px 5px 4px 0px;
 border: 1px solid #ADF;
 margin: 0;
}
.submenu a.highlighted {
 background-color: #68C;
 border: 1px solid #CDE;
 margin: 0;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/


/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.menulist a .subind {
 float: right;
}

/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .menulist li {
 float: left;
 width: 100%;
 right: 35px;
 top: 	20px;
}

*:first-child+html .menulist ul {
 margin:0;
}

*:first-child+html .submenu li a {
 position:relative;
 left: 35px;
 bottom: 20px;
}

* html .menulist li {
 float: left;
 width: 100%;
 right: 35px;
 top: 	20px;
}

* html .menulist ul {
 margin:0;
}

* html .submenu li a {
 position:relative;
 left: 35px;
 bottom: 20px;
}

* html .menulist a {
 height: 1%;
}


/* End Hacks */

#content {
  width:600px;
  float:left;
  text-align:justify;
}

#navLinks a{
  text-decoration:none;
}

#footer {
  position:relative;
  top:30px;
	clear:both;
	border-top:solid #33ccff;
	padding-top:10px;
}
