Use ASP to create a fast-loading site

March 21, 2008

A recent project involved creating a site that was easy to maintain and did not require complicated code or a database to run. The people that will be keeping the content up-to-date have varying levels of web skills, so it needed to be simple enough for the least experienced web developer but flexible enough to support the many functions people wanted to be able to add on in the future.

More after the jump...

Ads by Google

Posted by ellen at March 21, 2008 11:28 AM

This template makes use of "includes" to load template pieces, such as the header, footer, navbar and tab bars, and an asp instruction to load the content so quickly that in some cases, it rivals Flash. (For some reason this speed gain does not show up in Safari on the Mac).

A typical page is shown here.

Although there is a fair bit of code and complicated stylesheets underlying the site structure, all content is entered on very simple-to-edit HTML pages, stripped of most of the site-wide and section-wide navigational features which might prove distracting to a beginning web-editor.

The home page, index.asp is the central hub of the entire site. You might even say it is the only page. Content is loaded dynamically into the middle of the index page based on parameters in the URL. For example, "?param=develop01" loads the first page in the course development section.

HTML source for index.htm:



<%@LANGUAGE="VBSCRIPT"%>

  <!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">

  <head>

  <title>Site name</title>

  <link rel="stylesheet" type="text/css" href="css/portal.css"/>


<link rel="stylesheet" type="text/css" href="css/userStyles.css" />

  <script type="text/javascript" src="js/menu.js"></script>


<!--special styles to take into account IE 6's differences-->

  <!--[if IE]>

  <link rel="stylesheet" type="text/css" href="css/portalIE.css">

  <![endif]-->



<!--[if IE 6]>

  <link rel="stylesheet" type="text/css" href="css/portalIE6.css">

  <![endif]-->

  <link rel="stylesheet" type="text/css" href="css/print.css" media="print">

  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 


<style type="text/css">

  <!--

  .test {

  font-family: Arial, Helvetica, sans-serif;

  }

  -->

  </style>

  </head>

  <body>

  

  <div align="center" id="outerContainer">

  <!--#include file="includes/header.asp"-->

  <!--main content table begins here-->

  <table border="0"  id="layoutTable" cellpadding="0" cellspacing="0">

  <tr valign="top" >

  <!--leftColumn begins here-->

  <td valign="top" id="leftCol" >

  <!--#include file="includes/leftNav.asp"-->

  </td>

  <!--leftColumn ends here-->

  

  <!--middle Column begins here-->

  <td id="midCol" align="left" >

  <% Dim zPage 

  zPage =Request.QueryString("param")

  If zPage="" Then 

  ' Server.Execute("pages/login01.asp") 

  Server.Execute("pages/do4u00.asp") 

  Else 

  Server.Execute("pages/"&zPage&".asp")

  End If %>

  </td> <!--middle Column ends here-->

  

  </tr>

  <tr id="footer">

  <td id="ftrLftCol"><img src="images/corners/corner_blueBotLft.jpg" width="11" height="16" /></td>

  <!--<td id="ftrMiddle"></td>-->

  <td id="ftrRtCorner"></td>

  </tr>

  </table>

  </div><!--end outerContainer div-->

  <script type="text/javascript" src="js/endscripts.js"></script>


</body>

  </html>

A series of include files create the navigation. navbar.asp creates the global left-side navbar, and each of the section-level tab bars are created by their own include files: tab_do4u.asp, tab_develop.asp, etc. The header and footer areas of the page are created by header.asp and footer.asp respectively. In the image below, all these areas are highlighted in red.

The folder structure of the site is shown below.

The only file that is at the root of the site is index.asp.

The css folder contains several master stylesheets which control the global styles and compensate for browser idiosyncrasies. These files are off-limits to changes by the content editors. This is because it is very easy to break the tabs or column width relationships in one browser or another without realizing it.

However the editors are free to make additions as needed to a globally included "user-styles.css" stylesheet, also in the css folder, or may add their own styles or stylesheet links to the content pages on a per-section or per-page basis.

The downloads folder contains all the downloadable pdfs and word documents available to site visitors.

Images and media folders
Images used in the global look and feel of the site are stored in the images folder, and again, are off-limits to content editors. All media required by the content are stored in the media folder.

The includes folder contains the source files for the navbar, header, and tabs. The content editors are allowed to edit and add tab files as needed. The tab files are very simple, styled lists. A typical tab file is shown here:

<tr>
<td colspan="2"><h2>What can MLearning do <span class="emphasis">for you?</span></h2></td></tr>
<tr>
<td id="secondaryTabs" class="tabBar" nowrap="nowrap" style="width:100%">
<ul>
<li id="tb_do4u00" class="tb_up"><a href="./?param=do4u00">Home</a></li> 
<li id="tb_do4u01" class="tb_up"><a href="./?param=do4u01">Our Services</a></li>
<li id="tb_do4u02" class="tb_up"><a href="./?param=do4u02">Mission</a></li>
<li id="tb_do4u04" class="tb_up"><a href="./?param=do4u04">Success Stories</a></li>
<li id="tb_do4u05" class="tb_up" style=" "><a href="./?param=do4u05">Continued Quality<br />Improvement</a></li>
</ul> 
</td> 
<td>&nbsp;</td>
</tr>

The js folder contains scripts needed for the framework of the site, but also some that will just come in handy for the content editors. Standard ActiveX scripts are included in the js folder so flash and other types of media can be readily added. There are also a variety of scripts useful for toggling properties on and off, and assigning functions to mouse events.


function hasClassName(el, name) {

  var i, list;

  // Return true if the given element currently has the given class

  // name.

  list = el.className.split(" ");

  for (i = 0; i < list.length; i++)

    if (list[i] == name)

      return true;

  return false;

}

function removeClassName(el, name) {

  var i, curList, newList;

  if (el.className == null)

    return;

  // Remove the given class name from the element's className property.

  newList = new Array();

 // document.write(el.id+' '+el.className+'
');

  curList = el.className.split(" ");

  for (i = 0; i < curList.length; i++)

    if (curList[i] != name)

      newList.push(curList[i]);

  el.className = newList.join(" ");

}



function getElementsByClass(node,searchClass,tag) {

var classElements = new Array();

var els = node.getElementsByTagName(tag); // use "*" for all elements

var elsLen = els.length;

var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

for (i = 0, j = 0; i < elsLen; i++) {

if ( pattern.test(els[i].className) ) {

classElements[j] = els[i];

j++;

}

}

return classElements;

}



function makeActive(selectedItem){ 

       var div = getElementsByClass(document, 'menu', '*');

        for(var i=0; i
		  //document.write('afterRemove '+div[i].id+' '+div[i].className+'
');

		 } //take "active off all other elements

        document.getElementById(selectedItem).className += '_act'; //make this one active

		//alert(selectedItem+' '+ document.getElementById(selectedItem).className);

       }

 

function iOut(itemID){	

	document.getElementById(itemID).className.replace('_up','_ovr');

}

function iOvr(itemID){

	 document.getElementById(itemID).className.replace('_ovr','_up');

}

 

 // This code can be reused as long as the following notice is maintained

// Copyright 1999 InsideDHTML.com, LLC

// For more information, see www.siteexperts.com

function doOver() {

  // Destination is the window - update status

  if (this.dest==window) {

    window.status = this.overValue

    return true

  }

  // Destination is the input element - update value

  else if ((this.dest.type!=null) && ((this.dest.type=="text") 

    || (this.dest.type=="textarea")))

    this.dest.value = this.overValue

  // Destination is an image - update src

  else if (this.dest.src!=null) 

    this.dest.src = this.overValue

  return true

}

function doOut() {

  // Destination is the window, clear status

  if (this.dest==window)

    window.status=""

  // Destination is the input element, set default value

  else if (this.dest.type!=null)

    this.dest.value=this.dest.defaultValue

  // Destination is an image, reset original image

  else if (this.dest.src)

    this.dest.src = this.dest.osrc

}

function OverEffect(src,dest,overValue) {

  // Assign onmouseover handler

  src.onmouseover = doOver

  // Assign onmouseout handler

  src.onmouseout = doOut

  // Store the destination element on the src

  src.dest = dest

  // Store the overValue on the src

  src.overValue= overValue

  // If an image, start downloading

  if (dest.src!=null) {

    dest.osrc = dest.src

    var i = new Image()

    i.src = src.overValue

  }

}

function InitOverEffect(src,dest,overValue) {

  // Setup over effect

  OverEffect(src,dest,overValue)

  // Make sure first rollover is applied

  return src.onmouseover()

}

function doLoad() {

//Can also setup from script

//OverEffect(document.links[0],window,"Hello World")

}

The pages folder contains all the content pages. Source code for a typical content page is shown below:

 <html><title>MLearning Home</title>
  <script>document.title='MLearning Home';</script>
  <style type="text/css">
  <!--
  .style6 {font-size: 10px}
  .style2 {color: #000000}
  #contentContainerTable {padding-right: 8px;}
  -->
  </style>
  <body>

 <table  id="contentContainerTable" border="0" cellpadding="0" cellspacing="0">
  <!--#include virtual="/home/includes/tab_do4u.asp" -->
  <tr id="bodyTR">
  <td valign="top" id="bodyTD" style="background-color:#F7F3EC;padding:0px;"><img src="media/home/banner.jpg" alt="MLearning" width="552" height="163"><br>
  <table border="0" cellpadding="8" cellspacing="0" bgcolor="#D2E3F2">
  <tr>
  <td colspan="4" valign="top">&nbsp;</td>
  </tr>
  <tr>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=mandatories04"><img src="media/home/noticed.jpg" alt="Have you noticed?" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">Have you noticed?</span><br>
  </strong>You can now complete your mandatories in fewer steps. <a href="http://mlearning.med.umich.edu/home/?param=mandatories04" class="style6">Learn more  &gt;</a></td>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=develop03"><img src="media/home/alp.jpg" alt="10 learning principles" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">Course Developers</span><br>
  </strong>Here are 10 learning principles for getting it right. <a href="http://mlearning.med.umich.edu/home/?param=develop03" class="style6">Start here &gt;</a></td>
  </tr>
  <tr>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=roles01"><img src="media/home/roles.jpg" alt="How roles are defined" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">How roles are defined</span><br>
  </strong>Your role determines what you can do in MLearning. <a href="http://mlearning.med.umich.edu/home/?param=roles01"><span class="style6">Learn more &gt;</span></a></td>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=do4u04"><img src="media/home/swipe.jpg" alt="Swipe your way to a faster Blitz" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">Swipe your way to a faster Blitz</span><br>
  </strong>A better way to track and record attendance at your events. <a href="http://mlearning.med.umich.edu/home/?param=do4u04#story3" class="style6">Learn more &gt;</a></td>
  </tr>
  <tr>
  <td width="10%" valign="top"><a href="//mlearning.med.umich.edu/home/?param=develop01"><img src="media/home/ingredients.jpg" alt="A recipe for success" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">A recipe for success</span><br>
  </strong>What are the 12 required ingredients for developing a course in MLearning? <a href="http://mlearning.med.umich.edu/home/?param=develop01" class="style6">Start here &gt;</a></td>
  </tr>
  <tr>
  <td colspan="4" valign="top">&nbsp;</td>
  </tr>
  </table>
  <br></td>
  </tr>
  </table>
  
  <script>
  makeActive('mnu_do4u');
  makeActive('tb_do4u00');
  </script>

  </body>

  </html>

Searching the content
The site is inaccessible to all other search engines, so it must be searched by a local instance of Microsoft Indexing server. We've set up the results page so that although the index server is actually indexing "includes" pages, when the user clicks on a result, they see the complete page with all headers, footers, and navigation, not just the "naked" include. For more on how to set up this kind of search engine, see this article on implementing search using Microsoft Indexing Server

The search functions are based on a script written by C. Maunder, found on the site http:codeproject.com. The search functionality has been added to the header file, shown below:

<% 'option explicit 
' Search scripts
  ' Written by C Maunder (cmaunder@mail.com)
  ' www.codeproject.com
  %>
  <%
  '/////////////////////////////////////////////////////////////////////////////////
  '// Initialisation
' Declare variables.
'Response.Write Request.ServerVariables("PATH_TRANSLATED")
dim target, firstRow, rowCount
' Get the request parameters.
  target	 = Request("target")	' The search request
  firstRow = Request("fr")		' First row of results to display
  rowCount = Request("rc")		' Record Count - number of rows to show
  
  ' Set default values if none found
  if firstRow = "" or not IsNumeric(firstRow) Then 
  firstRow = 1
  else
  firstRow = CInt(firstRow)
  End If
  if rowCount = "" or not IsNumeric(rowCount) Then 
  rowCount = 30
  else
  rowCount = CInt(rowCount)
  End If
Dim ScriptName, ServerName
  ScriptName = Request.ServerVariables("SCRIPT_NAME")
  ServerName = Request.ServerVariables("SERVER_NAME")
' Construct base URL for navigation buttons
  dim URL
  URL = ScriptName & "?target=" & Server.URLEncode(target)
  URL = URL & "&rc=" & Server.URLEncode(rowCount)
'/////////////////////////////////////////////////////////////////////////////////
  '// The search form
%>

<!--header starts here-->
    
  <div id="hdrUtilityLinks">
  <a href="./?param=do4u00" id="Home" >Home</a> | <a href="http://mlearning.med.umich.edu">MLearning Login</a> | <a href="index.asp?param=contact01" id="contactLnk" >Contact Us</a>
  </div><div id="header">
  
  <div id="hdrLftCorner" onclick="javascript:document.location='./?param=do4u00'">&nbsp;</div> 
  <div id="hdrMiddle"></div>
  <div id="hdrMiddleCorner">&nbsp;</div>
  <div id="hdrRt">
  <!--search form starts here-->
  <form name="searchForm" method="get" id="searchForm" action="./" >
  <table border="0" id="searchTbl">
  <tr><td>
  <div id="searchText"><label for="txt">Search</label></div><input type="hidden" name="param" value="search" /></td>
  <td valign="middle">
  <input type="text" name="target" size="8" maxlength="100" value="<%=target%>" id="txt" onclick="this.focus();" onmouseover="this.focus();" onmousedown="this.focus();"style="margin-top:0px;cursor:text;"/ ></td>
  <td><input name="Submit" type="image" value="Go" src="images/searchGo_btn.jpg" alt="Go" /> 
  </td></tr></table></form>
  </div>
  <div id="hdrRtEdge"></div>
  </div>
  <!--header ends here-->
<!--primary tabs start here-->
  <div id="primaryTabs" class="tabBar">
  <div id="leftColTop">
  <!--<a href="./?param=login01" onmouseover="document.getElementById('loginBtn').src='images/header/headerLoginBtn_over.jpg'" onmouseout="document.getElementById('loginBtn').src='images/menu/up/headerLoginBtn_up.jpg'">-->
  <img src="images/spacer.gif" width="173" height="15" border="0" name="spacer" id="spaceHolder"/>
  <!-- </a>-->
  </div>
  <!--<ul>
  <li id="tb_do4u" class="tb_up"><a href="./?param=do4u01" >What can we do <b>for you?</b></a></li>
  <li id="tb_eduplan" class="tb_up"><a href="./?param=eduplan01">What is an educational plan?</a></li>
  <li id="tb_success" class="tb_up"><a href="./?param=do4u04">Success Stories</a></li>
  </ul>-->
  </div>
  <!--primary tabs end here-->
  <div id="announcements">&nbsp;</div>

Source for the remaining files footer.asp

  <!--footer starts here--> 
  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="footer">
  <tr>
  <td id="ftrLftCorner"></td>
  <td id="ftrMiddle"></td>
  <td id="ftrRtCorner"></td>
  </tr>

navbar.asp

<div id="navBar">
<div class="section">
<div class="mnu_top_up" id="mn_topsect" style="border-bottom:none;padding-bottom:1px;"> </div>
<div class="mnu_mid_up" id="mnu_log" style="border-top:none;padding-top:0px;"><a href="http://mlearning.med.umich.edu">Login LMS</a></div>
<div class="mnu_bot_up"  onmouseover="iOvr('mnu_do4u')" onmouseout="iOut('mnu_do4u')" id="mnu_do4u"><a href="./?param=do4u00" id="mnu_do4u_a">Home</a></div>
</div>

<div class="section">

<div class="mnu_top_up" id="mnu_instruction">INSTRUCTIONS FOR</div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_cdv')" onmouseout="iOut('mnu_cdv')" id="mnu_cdv"><a href="./?param=cdv01" id="mnu_cdv_a">Course Developers</a></div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_fac')" onmouseout="iOut('mnu_fac')" id="mnu_fac"><a href="./?param=facilitator01" id="mnu_fac_a">Facilitators</a></div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_mgr')" onmouseout="iOut('mnu_mgr')" id="mnu_mgr"><a href="./?param=mgr01" id="mmnu_mgr_a">Managers</a></div>

<div class="mnu_bot_up"  onmouseover="iOvr('mnu_ins')" onmouseout="iOut('mnu_ins')" id="mnu_ins"><a href="./?param=instructor01" id="mnu_ins_a">Instructors</a></div>

</div>

<div class="section">

<div class="mnu_top_up" id="mnu_helpctr">FORMS</div>

<div class="mnu_bot_up" onmouseover="iOvr('mnu_frm')" onmouseout="iOut('mnu_frm')" id="mnu_frm"><a href="./?param=forms01" id="mnu_dev_a">Add/edit instructor-led courses</a></div>

</div>

<div class="section">

<div class="mnu_top_up" id="mnu_helpctr">HELP CENTER</div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_faq')" onmouseout="iOut('mnu_faq')" id="mnu_faq"><a href="./?param=faq01" id="mnu_faq_a">Frequently asked questions</a></div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_man')" onmouseout="iOut('mnu_man')" id="mnu_man"><a href="./?param=mandatories04" id="mnu_man_a">How to complete mandatories</a></div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_dev')" onmouseout="iOut('mnu_dev')" id="mnu_dev"><a href="./?param=develop00" id="mnu_dev_a">How to develop a course</a></div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_prs')" onmouseout="iOut('mnu_prs')" id="mnu_prs"><a href="./?param=pi01" id="mnu_prs_a">How to edit personal information&nbsp;</a></div>

<div class="mnu_bot_up" onmouseover="iOvr('mnu_rle')" onmouseout="iOut('mnu_rle')" id="mnu_rle"><a href="./?param=roles01" id="mnu_rle_a">How MLearning defines roles</a></div>

<!--    <div class="mnu_bot_up" onmouseover="iOvr('mnu_mor')" onmouseout="iOut('mnu_mor')" id="mnu_mor"><a href="./?param=more01" id="mnu_mor_a">Additional resources</a></div>-->

</div>

<div class="section">

<div class="mnu_top_up" id="mnu_training">TRAINING &amp; IN-SERVICES</div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_trn')" onmouseout="iOut('mnu_trn')" id="mnu_trn"><a href="./?param=trainCal01" id="mnu_trn_a">Calendar</a></div>

<div class="mnu_bot_up"  onmouseover="iOvr('mnu_req')" onmouseout="iOut('mnu_req')" id="mnu_req"><a href="./?param=reqTr01" id="mnu_req_a">Request training</a></div>

</div>

<!-- edit -->

<div class="section"> 

<div class="mnu_top_up" id="mnu_resources">ADDITIONAL RESOURCES</div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_prt')" onmouseout="iOut('mnu_prt')" id="mnu_prt"><a href="./?param=more01" id="mnu_prt_a">Printable Instructions</a></div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_pap')" onmouseout="iOut('mnu_pap')" id="mnu_pap"><a href="./?param=more02" id="mnu_pap_a">Policies and Procedures</a></div>

<!-- comment out below line to remove list of mandatories. then change above line mnu_mid_up to mnu_bot_up -->

<div class="mnu_bot_up"  onmouseover="iOvr('mnu_mdl')" onmouseout="iOut('mnu_mdl')" id="mnu_mdl"><a href="./?param=mandatoriesList" id="mnu_mdl_a">List of Mandatories</a></div>

</div>

<!-- end -->



<div id="contactInfo">

<a href="index.asp?param=contact01" style="font-weight:bold;">CONTACT US / FEEDBACK</a>

<p>

</p>

</div>

</div><!--end navBar-->

portal.css, the master styles for the entire site



/* CSS Document */

/*this is to keep page from shifting to left on load in safari and firefox*/

html { min-height: 100%; margin-bottom: 1px; }

html { overflow: -moz-scrollbars-vertical !important; }

body {

	background-color: #5081B4;

	background:url(../images/bg_tile.jpg);

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	position:relative;

	height:100%;    

}

#outerContainer {

	position:relative;

	display:block;

	width:750px;

	background:#FFFFFF;

	margin:0px auto 0px auto;

	height:100%;

}

#header, #tabs {

	display:block;

	width:750px;

	height:70px;

	position:relative;

	z-index:1;

}

 

h1{}

h2{font:normal 24px Myriad Pro, Tahoma, Verdana, Trebuchet, Arial, Helvetica, sans-serif;

color:#4E67AC;

letter-spacing:-.03em;}

h2 .emphasis{

color:#329F95;

font-weight:900;}

h3{font:bold 13px Arial, Helvetica, sans-serif;

color:#4E67AC;

margin-top:12px;

}

.pageTitle{font:bold 13px Arial, Helvetica, sans-serif;

color:#666;

margin-top:30px;

margin-bottom: -10px;

}

#requestTitle{font:bold 13px Arial, Helvetica, sans-serif;

color:#666;

margin-top:30px;

}

a, a:link, a:visited {text-decoration:underline;color:#0000F0;}

a:hover{color:#33CCFF;}

/**********************header area*********************/

/*top of page links: Contact Us, etc.*/

#hdrUtilityLinks{

width:50%;

height:20px;

position:absolute;

left:200px;

top:10px;

z-index:5;/*safari needs this or the links hide despite the pos. absolute*/

margin:12px 6px 12px 6px;

} 

#hdrUtilityLinks a,#hdrUtilityLinks a:link, #searchText{

text-decoration:none;

color:#0C3168;

font:bold 11px Trebuchet, Arial, Helvetica, sans-serif;

}

#hdrUtilityLinks a:hover { color:#669966; }

#searchText{  }

#hdrLftCorner, #hdrMiddle,#hdrMiddleCorner, #hdrRt, #hdrRtEdge{

	float:left;

	height:70px;

	display:block;	

    overflow:hidden;

}

#hdrLftCorner{

    background:url(../images/header/headerLCorner.jpg) top left no-repeat;

    width:170px;

	cursor:pointer;}

#hdrMiddle{

	background:#000;

	width:344px;

	background:url(../images/header/headerWhitePatch.jpg) right repeat-x;}

#hdrMiddleCorner{

	background:#000;

	width:82px;

	background:url(../images/header/headerContactLink.jpg) right bottom no-repeat;}

#hdrRt{

	background:url(../images/LtBlueBGtile.jpg) repeat;

	width:141px;

	overflow:visible;

	 position:relative;

		 }

		 #searchTbl{ position:absolute;

		 left:0px;

		 top:20px;}

#hdrRt input#txt {margin-top:12px;}

#hdrRtEdge{

 

   background: url(../images/header/hdrRtCorner.jpg);

   width:13px;}

   

   input#searchBtn {

   border:1px solid black;

   background:#0066FF;

   color:#FFF;

   font:11px Arial, Helvetica, sans-serif;

   }

/**********************end header area*********************/

/**********************footer area*********************/

#footer{ }

#ftrLftCol {height:16px;background:url(../images/LtBlueBGtile.jpg) repeat; text-align:left; }

/*#ftrMiddle{  }*/

#ftrRtCorner{ width:11px;height:16px;background:url(../images/corners/corner_blueBotRt.jpg) no-repeat right; }

/**********************end header area*********************/

/***********************menu******************************/

.section {/*defines one menu section like "TRAINING", "EVENTS", etc.*/

  display:block;

  width:169px;

  margin-top:0px;

  overflow:hidden;

}

 

.mnu_mid_up, .mnu_mid_ovr, .mnu_mid_up_act, .mnu_top_up, .mnu_bot_up, .mnu_bot_up_act, .mnu_bot_ovr   {

	display:block;

	border-bottom:1px solid #9fc0dd;

	width:156px; 

	padding:0px 6px 0px 6px;

	  padding:3px 0px 6px 6px; 

	}

	

#navBar div a, #navBar div a:visited  {

display:block;

width:156px; 

	font: 11px normal Tahoma, Arial, Helvetica, sans-serif;

	text-decoration:none;	

	color:#094279;

}



/*---middle items---*/

.mnu_mid_up {

  background: url(../images/menu/up/menuSectionBG.jpg) repeat-y;

  padding:3px 0px 6px 6px;

 }

.mnu_mid_ovr{

  background:none;

 }

 .mnu_mid_up_act { 

 background-image:url(../images/menu/active/menuSectionBG.jpg);

 width:169px;

 } 

/*---top Items----*/

.mnu_top_up { /*top items aren't clickable*/

 background: url(../images/menu/up/menuSectionTop.jpg) top no-repeat;

 font:bold  12px Tahoma, Arial, Helvetica, sans-serif;

 color:#000000;

 padding:6px 0px 6px 6px;

 }

 

/*---bottom Items----*/

.mnu_bot_up {

 background: url(../images/menu/up/menuSectionBtm.jpg) bottom no-repeat;

 border-bottom:none;

 padding:3px 0px 6px 6px; 

   }

.mnu_bot_ovr { background:blue;  }

.mnu_bot_up_act  {

  background: url(../images/menu/active/menuSectionBtm.jpg) bottom no-repeat;

   width:169px; }  

.mnu_bot_ovr{ background: url(../images/menu/over/menuSectionBtm.jpg) bottom no-repeat; }



#contactInfo { 

font: 11px normal Tahoma, Arial, Helvetica, sans-serif;

color:#094279;

padding:6px;

  }

/***********************end menu******************************/

 

 #announcements {

	 height:42px;

	 width:100%;

	 display:none;

	 background:url(../images/announce/message.jpg) top no-repeat;

	 position:relative;

 }

 

 

/*************main content layout table*************/

#layoutTable {position:absolute;

/*top:99px;*/

top:80px;

left:0px;

background-color:#FFF; }

	 

/*********main layout table: left column and left menuBar************/

#leftCol{

font: 11px normal Tahoma, Arial, Helvetica, sans-serif;

	 width:169px;	  

	 background:#cce1f3 url(../images/LtBlueBGtile.jpg) repeat; 

	 text-align:left;

	 padding:6px 0px 6px 5px;

	 overflow:hidden;

	 }

 

 td#midCol {/*big white area in middle*/

 width:564px;

 padding:12px 0px 12px 12px;

 position:relative;

 /*this is the tiny corner image at top left of white content area*/

 background: url(../images/topLftCrnr.jpg) top left no-repeat;

 }

  td#midCol.active{

 /*this is the tiny corner image at top left of white content area*/

 background: url(../images/tabs/blue/active/topLftCrnr.jpg) top left no-repeat;

 }

 

 /**************content table on all content pages************/

 

 #contentContainerTable {	 

	 font:normal 12px Verdana, Arial, Helvetica, sans-serif;

	 color:#666;

	 position:relative;

	 width:540px; 

}  

#contentTR{}

td.contentLftCol{

 

 padding:6px; 

background:#E0D6BB url(../images/beige_BG_tile.jpg) repeat;}

td.contentRtCol{

width:169px;

padding:6px;

background:#FFF;

}

/**********************end main content layout table*********************/



/****************TABS - general definition for all tabs*******/

 .tabBar {

	background:#cce1f3 url(../images/LtBlueBGtile.jpg) repeat; 

	position:relative;

	/*display:block;*/ /*removed to fix Safari 3 issue*/

	height:10px;

	padding-top:0px;

}

.tabBar #leftColTop, .tabBar li, .tabBar li a {

float:left;

display:block;

height:10px;

} 

 

.tabBar #leftColTop{  

	width:174px;

	background:url(../images/LtBlueBGtile.jpg) repeat;

	}

	

.tabBar #leftColTop img{margin-top:2px;} 	

.tabBar ul {

margin:0px;

padding:0px;

list-style:none;

}

.tabBar li {

   padding:0px 0px 6px 7px;

   margin-right:3px;/*this provides separation between tabs*/

   height:23px; 

   

  }

  

.tabBar li a, .tabBar li a:visited, .tabBar li a:link  { 

    font: normal 11px Verdana, "Arial Narrow", Arial, Helvetica, sans-serif; 

    text-decoration:none;

	padding:6px 15px 9px 9px;

	width:auto;

	height:22px; 

	   line-height:90%;

	   

	  }

	

.tabBar li.tb_up { /*this holds the left side background of each tab*/

   background:url(../images/tabs/blue/up/tab_lftSide.jpg) left 1px no-repeat ;  

    }

	

.tabBar li.tb_up a, .tabBar li .tb_up a { /*this holds the text of the tab and the right side background*/

	color:#FFF;

	background:url(../images/tabs/blue/up/tab_rtSide.jpg) right 1px  no-repeat;		

}

.tabBar li.tb_up a:hover { text-decoration:underline; }

.tabBar li.tb_up_act, .tabBar li .tb_up_act{

  text-decoration:none;

  background: url(../images/tabs/blue/active/tab_lftSide.jpg) left 1px no-repeat ;}

  

.tabBar li.tb_up_act a, .tabBar li .tb_up_act a:link {

  background:url(../images/tabs/blue/active/tab_rtSide.jpg) right 1px no-repeat; 

  color:#003366;

  }



td.tabBar#secondaryTabs{ /*this is the tab bar that contains secondary tabs*/

background:#FFF;  

 padding-left:0px;

 width:390px;

 text-align:left;

 height:27px;

 

}

 

#secondaryTabs.tabBar li.tb_up { /*tan secondary tabs*/

  background: url('../images/tabs/tan/up/tab_lftSide.jpg') left 2px no-repeat ;

 height:23px;

 

}

 

#secondaryTabs.tabBar li.tb_up a, #secondaryTabs.tabBar li .tb_up a:link {

   background: url('../images/tabs/tan/up/tab_rtSide.jpg') right 2px no-repeat ;

   color:#3366CC;

 padding:6px 12px 12px 6px;

    font-size:10px;

	

 

     }

#secondaryTabs.tabBar li.tb_up_act, #secondaryTabs.tabBar li .tb_up_act{

 background: url('../images/tabs/tan/active/tab_lftSide.jpg') left 2px no-repeat;

 

 }

#secondaryTabs.tabBar li.tb_up_act a, #secondaryTabs.tabBar li .tb_up_act a:link{

 background: url('../images/tabs/tan/active/tab_rtSide.jpg') right 2px no-repeat ;

/* padding-top:6px;*/

 padding:6px 12px 12px 6px;

  font-size:10px;

}

/**************end tabs styles**************/



/****************************Login Form in center column**************************/



/*.loginFormText { } */

form { margin:0px;}



/***********************************************************************/

.clear {clear:both;height:0px;width:0px;}

/********for training schedule**************/

.noClasses {

color:#CC0000;

font-weight:bold;

}

.scheduleTbl{ line-height:100%;border-right:1px solid #CCC;border-bottom:1px solid #CCC;

font-size:9px;width:100%;background-color:#FFF;}

.hdTR{background:#CCC;

text-transform:uppercase;}

#submitbtn {background: #ccc0a6; background:url('../images/submitbtn.gif'); border: none; width: 136px;}

#resetbtn {background: #ccc0a6; background:url('../images/resetbtn.gif'); border: none; width: 75px;}

 

/*******/

h4 {font:bold 12px Arial, Helvetica, sans-serif;

color:#003366;

margin-top:12px;

display:inline;}

.inlineH {display:inline;

margin-top:12px;}

Print.css, used to print the content on the
page without navigation or header



/* Print CSS Document */

body, table, tr, td {

	font: 12pt georgia,serif;

}

body, table, tr, td, h1, h2, h3, h4{

	background-color: #fff;

	color: #000;    

}

#outerContainer {width:auto;}

#leftCol, #hdrUtilityLinks, #header, #footer{

    display:none;

}

#hdrUtilityLinks {position:relative;display:none;}

td.contentLftCol, #contentContainerTable, #bodyTR td {width:100%;}

td.contentRtCol, .tabBar, #leftColTop, #primaryTabs { display:none;}

h2 {font: 24pt georgia,serif;}

h2 .emphasis{color:#000;}

h3 {font: 13pt georgia,serif;}

portalIE6.css



#outerContainer{ background:none;} 

#header{background-color:#FFF;}

 /**********************header area*********************/

/*top of page links: Contact Us, etc.*/

#hdrUtilityLinks{

display:block;

width:500px;

height:20px;

position:absolute;

left:300px;

z-index:5;/*safari needs this or the links hide despite the pos. absolute*/

margin:12px 6px 12px 6px;

} 

/****************TABS - general definition for all tabs*******/

/*IE6 has diff. box model, thus height doesn't take into account padding 

 .tabBar {height:23px;}

  .tabBar #leftColTop img{

  margin-top:3px;

  margin-bottom:-10px; had to add for IE6: this image appears to be pushing down the content table

  } */

 .tabBar li.tb_up { /*this holds the left side background of each tab*/

   background: url(../images/tabs/blue/up/tab_lftSide.jpg) no-repeat left 2px;  

   padding:1px 0px 0px 7px;

   margin-right:3px;/*this provides separation between tabs*/

    }

.tabBar li.tb_up a { /*this holds the text of the tab and the right side background*/

	padding:7px 15px 0px 9px;

} 

td.tabBar#secondaryTabs{ /*this is the tab bar that contains secondary tabs*/  

 padding-left:0px;

 width:420px;

 text-align:left;

 width:100%; /*ellen is testing this for preventing float drop in IE6*/

}

 

#secondaryTabs.tabBar li.tb_up { /*tan secondary tabs*/

  background: url('../images/tabs/tan/up/tab_lftSide.jpg') left 2px no-repeat ;

   padding:0px 0px 0px 7px;

 }

 

#secondaryTabs.tabBar li.tb_up a, #secondaryTabs.tabBar li .tb_up a:link {

   background: url('../images/tabs/tan/up/tab_rtSide.jpg') right 2px no-repeat ;

   color:#3366CC;

   padding:6px 15px 0px 9px;

     }

#secondaryTabs.tabBar li.tb_up_act, #secondaryTabs.tabBar li .tb_up_act{

 background:url('../images/tabs/tan/active/tab_lftSide.jpg') left 2px no-repeat;

 padding:0px 0px 0px 9px;

 }

#secondaryTabs.tabBar li.tb_up_act a, #secondaryTabs.tabBar li .tb_up_act a:link{

 background: url('../images/tabs/tan/active/tab_rtSide.jpg') right 2px no-repeat ;

 padding:6px 15px 0px 9px;

 margin-right:0px;

}



/**************end tabs styles**************/



/**************menu styles**************/

   .menuItem .up {

  background: url(../images/menu/up/menuSectionBG.jpg) repeat-y;

 padding:3px 0px 6px 6px;

 }

  .menu.over.menuItem{

  background:url(../images/menu/up/menuSectionBG.jpg) repeat-y;

 }

  .menu.up.menuItem.active { 

 background-image:url(../images/menu/active/menuSectionBG.jpg);

 width:169px;

 }

portalIE.css

#outerContainer{
	padding:0px;
	text-align:left;
}
#layoutTable{	 
	width:540px;
	margin-left:0px;
	padding:0px;
	 }
	 
#midCol{padding-right:0px;}	
#contentContainerTable{ 
	width:564px;
	 margin-right:0px;
	 }
/*td.contentLftCol{width:408px;padding:6px;}
td.contentRtCol{
width:157px;padding:6px 12px 6px 6px;}
 */

Ads by Google

« Prev. Article | Home | Next Article »

Ads by Google

RSS |

Contact Me

« Prev. Article | Home | Next Article »

Ads by Google

Related Entries: