Web Programming Projects
53
Web Programming Projects Submitted in partial fulfilment of the requirements for the degree of Post Graduate Diploma in Information Technology by Vijayananda D Mohire (Registration No.200508208) Information Technology Department Symbiosis Bhavan, 1065 B, Gokhale Cross Road, Model Colony, Pune – 411016, Maharashtra, India (2007)
-
Upload
vijay-mohire -
Category
Software
-
view
104 -
download
1
Transcript of Web Programming Projects
Web Programming Projects
Submitted in partial fulfilment of the requirements for the degree of
Post Graduate Diploma in Information Technology
by
Vijayananda D Mohire
(Registration No.200508208)
Information Technology Department
Symbiosis Bhavan, 1065 B, Gokhale Cross
Road, Model Colony, Pune – 411016, Maharashtra, India
(2007)
2
3
Web Programming Projects
4
Table of Contents
QUESTION 1 ......................................................................................................................................................................... 6 ANSWER 1 ............................................................................................................................................................................ 7 QUESTION 2 ....................................................................................................................................................................... 23 ANSWER 2 .......................................................................................................................................................................... 23
5
Web Programming Projects
6
Question 1 Create the web page exactly shown as follows
7
Answer 1
Code:
---------------------------------Google_Services.html---------------------------------------
<!-- HTML Tag indicating Beginning of the Html and the namespace -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Begin of Head Tag -->
<head>
<!-- Begin of Meta Information like content type and charset -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Title of the Web Page -->
<title>Google and MyHome</title>
<!-- Use of external stylesheet by importing it in current document -->
<style type="text/css">
<!--
@import "Style1.css";
-->
</style>
<!-- End of Head tag -->
</head>
<!-- Begin of Body tag having the main data and structure of the web page, here
attributes like margin and color is set for the body of the document -->
<body bgcolor=#ffffff >
<div style="height:90%; width:65%; border:2px solid gray;">
<a href="MyHome.html"><img src="Pics/MyHome.jpg" border="0" alt="Go to Home"
/></a>
<!-- Begin of Ordered list -->
<ol>
<li>
<div class=g>
<h2 class=r><a href="http://www.google.com/" class=l >Google </a> (Nasdaq: <a
href="http://www.google.com/" class=l >GOOG</a>)</h2>
8
<!-- Table for holding the list item 1 data, also applies required external style sheet
class and fonts -->
<table border=0 cellpadding=0 cellspacing=0><tr>
<td class="j" valign=top id=mbb1><font size=-1>Main site for the Google search
engine, finding web sites that match a user's query. Also includes image Search, Local
Search, Google News, and Froggle<strong>.</strong>
</font>
<div id=mbf1><font size="-1"><span class=a>www.<b>google.com
</b></span><span class="ff" > - 6k - </span><a class=fl
href="http://www.google.com/"> More from this site </a></div> </td>
<td> </td>
</tr></table>
</div>
</li>
<!-- List Item 2 for the Ordered List -->
<li>
<div class=g>
<h2 class=r><a href="http://www.earth.google.com/" class=l >Google Earth</a>
</h2>
<!-- Table for holding the list item 2 data, also applies required external style sheet
class and fonts -->
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="j"><font size=-1>Google Earth shows 3D overviews of major cities,
mountains,and other terrain,as well as local businesses and information, driving
directions, and maps<br>
<span class=a><b>earth.google.com</b></span><span class="ff"> - 15k - </span>
<!-- Retrive the Cached data for earth.google.com -->
<a class=fl
href="http://www.google.com/search?q=cache:earth.google.com">Cached</a> - <a
class=fl href="http://www.earth.google.com"> More from this site </a></font></td>
</tr></table></div>
</li>
<!-- List Item 3 for the Ordered List -->
<li>
<div class=g >
<h2 class=r><a href="http://news.google.com/" class=l >Google News</a></h2>
9
<!-- Table for holding the list item 3 data, also applies required external style
sheet class and fonts -->
<table border=0 cellpadding=0 cellspacing=0>
<tr >
<td class="j" ><font size= -1 >Presents information culled from news sources
worldwide and arranged automatically.Searchable by keyword or phrase <br>
<span class=a><b>news.google.com</b></span><span class="ff"> - 141k - </span>
<a class=fl href="http://news.google.com/"> More from this site </a></font></td>
</tr></table></div>
</li>
<!-- List Item 4 for the Ordered List -->
<li>
<div class=g>
<h2 class=r><a href="http://www.maps.google.com/" class=l >Google
Maps</a></h2>
<!-- Table for holding the list item 4 data, also applies required external style
sheet class and fonts -->
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="j"><font size=-1>Google Maps online map service and location
finder</font><font size=-1>.Features dynamic, draggable maps, as well as satellite
imagery by region.<br>
<span class=a><b>maps.google.com</b></span><span class="ff"> - 25k -
</span><a class=fl href="http://maps.google.com/"> More from this site
</a></br></font></td>
</tr></table></div>
</li>
<!-- List Item 5 for the Ordered List -->
<li>
<div class=g>
<h2 class=r><a href="http://www.video.google.com/" class=l >Google
Video</a></h2>
<!-- Table for holding the list item 5 data, also applies required external style
sheet class and fonts -->
<table border=0 cellpadding=0 cellspacing=0>
<tr>
10
<td class="j"><font size=-1>Database of recent TV programs and user-uploaded
videos.</font><font size=-1><br>
<span class=a><b>video.google.com</b></span><span class="ff"> - 127k - </span>
<!-- Retrive the Cached data for video.google.com -->
<a class=fl
href="http://209.85.175.104/search?q=cache:tyoD39gJdMQJ:video.google.com/?hl=e
N&tab=iv+video.google.com&hl=en&ct=clnk&cd=1&gl=in">Cached</a> - <a class=fl
href="http://video.google.com/"> More from this site </a></br></font></td>
</tr></table></div>
</li>
<!-- List Item 6 for the Ordered List -->
<li>
<div class=g><h2 class=r><a href="http://groups.google.com/" class=l >Google
Groups</a></h2>
<!-- Table for holding the list item 6 data, also applies required external style sheet
class and fonts -->
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="j"><font size=-1>Google Groups allows users to start their own email
discussion groups and message boards, and browse archives of Usenet groups. <br>
<span class=a><b>groups.google.com</b></span><span class="ff"> - 24k - </span>
<!-- Retrive the Cached data for groups.google.com -->
<a class=fl
href="http://www.google.com/search?q=cache:x2uPD3hfkn0J:groups.google.com/+go
ogle+groups">Cached</a> - <a class=fl href="http://groups.google.com/"> More from
this site </a></br></font></td>
</tr></table></div>
</li>
<!-- List Item 7 for the Ordered List -->
<li>
<div class=g>
<h2 class=r><a href="http://www.toolbar.google.com/" class=l
onmousedown="return clk(this.href,'','','res','9','')">Google Toolbar </a></h2>
<!-- Table for holding the list item 7 data, also applies required external style sheet
class and fonts -->
11
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width="553" class="j"><font size=-1>The Google Toolbar provides access to the
Google search engine, a pop-up blocker,PageRank information for a site,online maps,
and a spell checker. <br>
<span class=a><b>toolbar.google.com</b></span><span class="ff"> - 10k -
</span>
<!-- Retrive the Cached data for toolbar.google.com -->
<a class=fl
href="http://www.google.com/search?q=cache:7gjJj2mxfzUJ:toolbar.google.com/go
oglebar.html+google+toolbar">Cached</a> - <a class=fl
href="http://www.toolbar.google.com"> More from this site </a></br></font></td>
</tr></table></div>
</li>
</body>
<!-- End of Body -->
</html>
<!-- End of Html -->
--------------------------------------------MyHome.html--------------------------------------------
--
<!-- HTML Tag indicating Beginning of the Html document -->
<html>
<!-- Begin of Head Tag -->
<head>
<!-- Title of the Web Page -->
<title>My Home Page</title>
<!-- Begin of Meta Information like content type and charset -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Use of external stylesheet by referencing it in current document -->
<link rel="stylesheet" href="mm_travel2.css" type="text/css">
<!-- Javascript for obtaining proper dates and displaying them in required format -->
<script language="javascript">
12
//--------------- BEGIN Variables ---------------
var d=new Date();
var monthname=new
Array("January","February","March","April","May","June","July","August","September","O
ctober","November","December");
//Ensure date format. Here it is "Month, Date,Year"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END Variables ---------------
</script>
<!-- End of Head tag -->
</head>
<!-- Begin of Body tag having the main data and structure of the web page, here
attributes like color is set for the body of the document -->
<body bgcolor="#C0DFFD">
<!-- Table for holding the images and navigation links -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#3366CC">
<td width="382" colspan="3" rowspan="2"><img src="Pics/mm_travel_photo.jpg"
alt="Header image" width="382" height="127" border="0"></td>
<td width="378" height="63" colspan="3" id="logo" valign="bottom" align="center"
nowrap>Vijayananda D Mohire</td>
<td width="100%"><a href="Google_Services.html"></a></td>
</tr>
<tr bgcolor="#3366CC">
<td colspan="3" id="tagline" valign="top" align="right"> </td>
<td width="100%"> </td>
</tr>
<tr>
<td colspan="7" bgcolor="#003366"><img src="Pics/mm_spacer.gif" alt="" width="1"
height="1" border="0"></td>
</tr>
<tr bgcolor="#CCFF99">
<td colspan="7" id="dateformat" height="25">
13
<!-- Write Custom today's date as declared previously-->
<script language="javascript">
document.write(TODAY); </script>
<!-- Iconic Back Link to Google page, set the size for the image -->
<div align="left"></div></td
></tr>
<tr>
<td colspan="7" bgcolor="#003366"><img src="Pics/mm_spacer.gif" alt="" width="1"
height="1" border="0"></td>
</tr>
<!-- Table for holding the navigation links -->
<tr>
<td width="165" valign="top" bgcolor="#E6F3FF">
<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
<tr>
<td width="165"> <br>
<br></td>
</tr>
<!-- Provide null javascript so that there is no abruptions in navigation --
>
<tr>
<td width="165"><a href="javascript:;" class="navText">Curriculum Vitae
</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">My Family </a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">My Hobbies</a></td>
</tr>
<tr>
<td width="165"><a href="javascript:;" class="navText">Contact</a></td>
</tr>
</table>
<a href="Google_Services.html"><img src="Pics/images.jpg" alt="Back"
border="0" /></a><br> </td>
14
<!-- Proper spacer format -->
<td width="50"><img src="Pics/mm_spacer.gif" alt="" width="50" height="1"
border="0"></td>
<td width="305" colspan="2" valign="top"><img src="Pics/mm_spacer.gif" alt=""
width="305" height="1" border="0"><br>
<br>
<br>
<!-- Main content of the page -->
<table border="0" cellspacing="0" cellpadding="0" width="305">
<tr>
<td class="pageName">Welcome Message ! </td>
</tr>
<tr>
<td class="bodyText"><p>Dear Guest,</p>
<p>Welcome to my Home Page!. Please make yourself comfortable and make
this a great starting point . </p>
<p>You can navigate using the left menu as desired and find more about
myself and what's going on in my life.</p>
<p>If you wish to be my friend please contact me by mail or call me.</p>
<p>Happy surfing!! </p> </td>
</tr>
</table> </td>
<td width="50"><img src="Pics/mm_spacer.gif" alt="" width="50" height="1"
border="0"></td>
<td width="190" valign="top"><br>
<br>
<!-- Latest content published -->
<table border="0" cellspacing="0" cellpadding="0" width="190">
<tr>
<td colspan="3" class="subHeader" align="center">LATEST NEWS !
</td>
</tr>
<tr>
<td width="40"><img src="Pics/mm_spacer.gif" alt="" width="40"
height="1" border="0"></td>
<td width="110" id="sidebar" class="smallText"><br>
15
<p><img src="Pics/mm_travel_photo1.jpg" alt="Image 1"
width="110" height="110" vspace="6" border="0"><br>
My recent vacation trip !.<br>
<a href="javascript:;">Read more ></a></p>
<p><br>
</p>
<br>
<br>
<br> </td>
<td width="40"> </td>
</tr>
</table> </td>
<td width="100%"> </td>
</tr>
<tr>
<td width="165"> </td>
<td width="50"> </td>
<td width="167"> </td>
<td width="138"> </td>
<td width="50"> </td>
<td width="190"> </td>
<td width="100%"> </td>
</tr>
</table>
<!-- end of table -->
</body>
<!-- end of body tag -->
</html>
<!--- end of html -->
-------------------------------------mm_travel2.css-----------------------------------
body {
margin:0px;
}
td {
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#003366;
}
16
a {
color: #FF6600;
font-weight:bold;
}
a:hover {
color: #3366CC;
}
#navigation td {
border-bottom: 2px solid #C0DFFD;
}
#navigation a {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:8px 6px 10px 26px;
background: url("mm_arrow.gif") 14px 45% no-repeat;
}
#navigation a:hover {
background: #ffffff url("mm_arrow.gif") 14px 45% no-repeat;
color:#FF6600;
}
#logo {
font:24px Verdana, Arial, Helvetica, sans-serif;
color: #CCFF99;
letter-spacing:.2em;
line-height:30px;
}
#tagline {
font:12px Verdana, Arial, Helvetica, sans-serif;
color: #FF9933;
letter-spacing:.4em;
line-height:18px;
17
}
#monthformat {
border-bottom: 2px solid #E6F3FF;
}
#dateformat {
font:11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
letter-spacing:.2em;
}
#dateformat a {
font:11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
font-weight:bold;
letter-spacing:.1em;
}
#dateformat a:hover {
color: #FF6600;
letter-spacing:.1em;
}
/* Class Styles */
.bodyText {
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#003366;
line-height:20px;
margin-top:0px;
}
.pageName{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color: #3366CC;
line-height:24px;
letter-spacing:.2em;
}
.subHeader {
18
font:bold 10px Verdana, Arial, Helvetica, sans-serif;
color: #3366CC;
line-height:16px;
letter-spacing:.2em;
}
.quote {
font: 20px Verdana, Arial, Helvetica, sans-serif;
color: #759DA1;
line-height:30px;
}
.smallText {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
}
.navText {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
}
---------------------------------Style1.css---------------------------------------------------
/* Google CSS Document */
.ts td,.tc{padding:0}.ts,.tb{border-collapse:collapse}div,td{color:#000}
.f{color:#666}
.flc,.fl:link{color:#77c}
.ff{color:#77c}
a:link,.w,a.w:link,.w a:link,.q:visited,.q:link,.q:active,.q{color:#00c}
a:visited,.fl:visited{color:#551a8b}
a:active,.fl:active{color:red}
.t{background:#e5ecf9;color:#000}
.bb{border-bottom:1px solid #36c}
.bt{border-top:1px solid #36c}
19
.j{width:35em}
.h{color:#36c}
.i,.i:link{color:#a90a08}
.a,.a:link{color:green}
.z{display:none}
div.n{margin-top:1ex}
.n a{font-size:10pt;color:#000}
.n .i{font-size:10pt;font-weight:bold}
.b a{font-size:12pt;color:#00c;font-weight:bold}
#np,#nn,.nr,#logo span,.ch{cursor:pointer;cursor:hand}
.ta{padding:3px 3px 3px 5px}#tpa2,#tpa3{padding-top:9px}.sl,.r{font-
weight:normal;margin:0;display:inline}
.sl{font-size:84%}
.r{font-size:1em}
.e{margin:.75em 0}
.mblink:visited{color:#00c}
.sm{display:block;margin:0;margin-left:40px}
.slk{margin-left:40px}.slk td{font-size:83%;line-height:16px;padding:5px 40px 0
0;vertical-align:top}#navbar div,#logo span{background:url(/images/nav_logo3.png)
no-repeat;overflow:hidden;height:26px}
#navbar .nr{background-position:-60px 0;width:16px}
#navbar #np{width:44px}
#navbar #nf{background-position:-26px 0;width:18px}
#navbar #nc{background-position:-44px 0;width:16px}
#navbar #nn{background-position:-76px 0;width:66px;margin-right:34px}
#navbar #nl{background-position:-76px 0;width:46px}
#logo{display:block;width:150px;height:52px;position:relative;overflow:hidden;margi
n:15px 0 12px}
#logo span{background-position:0 -
26px;position:absolute;top:0;left:0;width:100%;height:100%}
body,td,div,.p,a{font-family:arial,sans-serif}
20
.g{margin:1em 0}
#sd{font-size:113%;font-weight:bold}
#ap{font-size:64%}
--------------------------------Image files in Pics directory-------------------------------------
Back.jpg:
Home.jpg:
Home1.jpg:
Images.jpg:
mm_travel_photo.jpg:
mm_travel_photo1.jpg:
MyHome.jpg:
NavBack.jpg:
Results:
21
22
23
Evaluator’s Comments if any:
Question 2 Design the web page exactly as follows:
Answer 2
Code:
----------------------------------Google_Groups.html-----------------------------------------
24
<a href="Google_Groups.html"></a>
<!-- HTML Tag indicating Beginning of the Html and the namespace -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Begin of Head Tag -->
<head>
<!-- Begin of Meta Information like content type and charset -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Title of the Web Page -->
<title>My Google Groups</title>
<!-- Use of external stylesheet by importing it in current document -->
<style type="text/css"><!--
@import "style.css";
--></style>
<!-- End of Head tag -->
</head>
<!-- Begin of Body tag having the main data and structure of the web page, here
attributes like margin and color is set for the body of the document -->
<body topmargin=3 marginheight=3 bgcolor=white >
<!-- Begin of Google Groups Search section, with Outer table for providing proper
alignment for the inner tables -->
<center><table><tr><td align=left>
<!-- Table for holding the Google Search Icon and Search controls -->
<table cellpadding=0 cellspacing=0 border=0 width="100%">
<tr>
<td valign=top >
<div><a href="http://www.groups.google.com"><img src="Pics/groups_medium.gif"
width=150 height=55 alt="Go to Google Groups Home" style="border:0;position:
relative; margin-top: 5px; margin-bottom: 10px;"></a></div>
</td>
<!-- Necessay blank spaces and height for alignment -->
<td> </td>
<td valign=top width="100%" >
25
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td height=14 valign=bottom>
</td>
</tr>
<tr>
<td>
<!-- Form tag with name and action -->
<form name="gs" method="GET" action="">
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<!-- Form input element with submit for Searching Google -->
<td nowrap><font size=-1>
<input type=text name=q size=41 maxlength=2048 value=""><font size=-1>
<input type="submit" name="qt_s" value="Search Groups" ></td>
<!-- Links for Advanced Search and Prefrerences -->
<td nowrap>
<font size=-2>
<a
href="http://groups.google.com/advanced_search"><nobr>Advanced Groups
Search</nobr></a><br> <a
href="http://www.google.co.in/preferences">Preferences</a>
</font>
</td>
</td>
</tr>
</table>
</form>
<!-- End of Form Google search -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table></center>
<!-- End of Google Search Table -->
26
<!-- Begin of "What can you do with Groups? Section -->
<center>
<table>
<tr><td>
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr valign=top>
<tr valign=top>
<!-- Provide 70% width for the left section -->
<td align=left valign=top width=70%>
<div id="promo" name="promo">
<table border=0 cellspacing=0 cellpadding=0 width="450px" style="border-top: 1px
solid #7799dd;">
<tr>
<!-- Use Stylesheet class for providing proper results -->
<td class="padt3 padb3 padl3 padr8" colspan=3 bgcolor=#e8eef7>
<table border=0 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td align=left><font size=+0><b>What can you do with
groups?</b></font> </td>
<td> </td>
<!-- Avoid break in link for "Take the Tour" by using suitable javascript -->
<td align=right class="padr8"><a href="javascript:;">Take the
tour »</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="padt3 padl10" valign=top>
<!-- Table for holding the 3 Icons for Discuss, Create and Customize -->
<table border=0 cellspacing=0 cellpadding=0><tbody>
<tr><td align=center >
<a class="blk"
href="http://groups.google.co.in/intl/en/googlegroups/tour3/page2.html">
<img src="Pics/discuss.jpg" width=72 height=72 >
</a>
27
</td></tr>
<tr><td class="padt3" align=center ><font size=-1>
<a class="blk"
href="http://groups.google.co.in/intl/en/googlegroups/tour3/page2.html">
Discuss online or over email
</a>
</font>
</td></tr>
</tbody></table>
</td>
<td class="padt3 padl10" valign=top>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td align=center>
<a class="blk"
href="http://groups.google.co.in/intl/en/googlegroups/tour3/page3.html">
<img src="Pics/create.jpg" width=72 height=72 border="0">
</a>
</td></tr>
<tr><td align=center><font size=-1>
<a class="blk"
href="http://groups.google.co.in/intl/en/googlegroups/tour3/page3.html">
Create rich, custom pages
</a>
</font>
</td></tr>
</table>
</td>
<td class="padt3 padl10" valign=top>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td align=center>
<a class="blk"
href="http://groups.google.co.in/intl/en/googlegroups/tour3/page4.html">
<img src="Pics/custom.jpg" width=72 height=72 border="0">
</a>
</td></tr>
<tr><td align=center><font size=-1>
<a class="blk"
href="http://groups.google.co.in/intl/en/googlegroups/tour3/page4.html">
Customize your look and graphics
</a>
</font>
28
</td></tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td align=left style="padding-left:17px;">
<!-- End of left section "What can you do with groups" -->
<!-- Begin of right section "Create a group in 3 steps" -->
<div id="GHP_compact_my_groups" name="GHP_compact_my_groups">
<table border=0 cellspacing=0 cellpadding=0 style="border-top: 1px solid #7799dd;
width:260px">
<tr><td class="padt3 padb3 padl7" colspan=0 bgcolor=#c6d8ff nowrap><font size=+0
color="#000000"><b>Create a group in 3 steps</b></font></td></tr>
<tr><td class="padt3 padb3 padl7" bgcolor=#f7f7ff style="padding-right:12px;">
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr><td class="padt3" ></td></tr>
<tr>
<td style="padding:3px 0px 3px 0px" align="left" valign="center">
<div class="padl0 padr0">
<!-- Provide proper Image for Steps 1,2 and 3 for Creating Groups -->
<div><table cellpadding=0 cellspacing=0 width="100%"><tr><td>
<div style="width: 3px; height: 3px; overflow: hidden; position:relative;">
<!-- Apply proper filter for the rounded corner image using IE Browser
ImageTranform feature.This is basically used to resolve a image transperancy BUG in
IE for PNG files -->
<div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: 0px; left:
0px;"></div></div><td bgcolor="#c6d8ff" width="100%" height="3"><img alt="" width=1
height=1><td><div style="width: 3px; height: 3px; overflow: hidden;
position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: 0px; left: -
3px;"></div></div></table></div>
<div style="background-color: #c6d8ff; color:black; text-align:center; padding:0px
29
1px 0px 1px">
<b>1</b>
</div>
<div><table cellpadding=0 cellspacing=0 width="100%"><tr><td><div style="width:
3px; height: 3px; overflow: hidden; position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: -3px; left:
0px;"></div></div><td bgcolor="#c6d8ff" width="100%" height="3"><img alt="" width=1
height=1><td><div style="width: 3px; height: 3px; overflow: hidden;
position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: -3px; left: -
3px;"></div></div></table></div>
</div>
</td>
<!-- Step 1 - Create an Account -->
<td class="padt3 padb3 padl6" valign=middle>
Create an account
</td>
</tr>
<tr><td class="padt3"></td></tr>
<tr>
<td style="padding:3px 0px 3px 0px" align="left" valign="center">
<div class="padl0 padr0">
<div><table cellpadding=0 cellspacing=0 width="100%"><tr><td><div style="width:
3px; height: 3px; overflow: hidden; position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: 0px; left:
0px;"></div></div><td bgcolor="#c6d8ff" width="100%" height="3"><img alt="" width=1
height=1><td><div style="width: 3px; height: 3px; overflow: hidden;
position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: 0px; left: -
3px;"></div></div></table></div>
<div style="background-color: #c6d8ff; color:black; text-align:center; padding:0px
1px 0px 1px">
<b>2</b>
</div>
<div><table cellpadding=0 cellspacing=0 width="100%"><tr><td><div style="width:
30
3px; height: 3px; overflow: hidden; position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: -3px; left:
0px;"></div></div><td bgcolor="#c6d8ff" width="100%" height="3"><img alt="" width=1
height=1><td><div style="width: 3px; height: 3px; overflow: hidden;
position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: -3px; left: -
3px;"></div></div></table></div>
</div>
</td>
<!-- Step 2 - Setup your group -->
<td class="padt3 padb3 padl6" valign=middle>
Setup your group
</td>
</tr>
<tr><td ></td></tr>
<tr>
<td style="padding:3px 0px 3px 0px" align="left" valign="center">
<div class="padl0 padr0">
<div><table cellpadding=0 cellspacing=0 width="100%"><tr><td><div style="width:
3px; height: 3px; overflow: hidden; position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: 0px; left:
0px;"></div></div><td bgcolor="#c6d8ff" width="100%" height="3"><img alt="" width=1
height=1><td><div style="width: 3px; height: 3px; overflow: hidden;
position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: 0px; left: -
3px;"></div></div></table></div>
<div style="background-color: #c6d8ff; color:black; text-align:center; padding:0px
1px 0px 1px">
<b>3</b>
</div>
<div><table cellpadding=0 cellspacing=0 width="100%"><tr><td><div style="width:
3px; height: 3px; overflow: hidden; position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: -3px; left:
0px;"></div></div><td bgcolor="#c6d8ff" width="100%" height="3"><img alt="" width=1
height=1><td><div style="width: 3px; height: 3px; overflow: hidden;
31
position:relative;"><div
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Pics/rounded
corners1.png'); width:100%; height: 100%; position:relative; top: -3px; left: -
3px;"></div></div></table></div>
</div>
</td>
<!-- Step 3 - Invite People -->
<td class="padt3 padb3 padl6" valign=middle>
Invite people
</td>
</tr>
<tr><td class="padt7" colspan=2 style="valign:top;">
<!-- Form for Creating a Group -->
<form action="" method="GET" name=cr><input type="hidden" name="lnk"
value="gcphpp"><b><INPUT class="bt" type="submit" value="Create a
group..."></b></form></td></tr>
</table>
</td></tr>
</table>
<br>
</div>
</td>
</tr>
<!-- Begin of left section "Explore groups" -->
<tr valign=top>
<td align=left valign=top width=70%>
<div>
<table border=0 cellspacing=0 cellpadding=0 width=450px style="border-top: 1px solid
#7799dd;">
<tr>
<td class="padt3 padb3 padl3 padr8" bgcolor=#e8eef7 nowrap>
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
<td align=left><font size=+0><b>Explore groups</b></font></td>
<td> </td>
<td align=right> </td>
</tr>
</table>
32
</td>
</tr>
<tr><td class="padl3 padt5">Find out what people are doing with Google
Groups</td></tr>
<!-- Form for "Search for a group" -->
<tr>
<td class="padb3 padl3 padt8" width="100%" >
<form name=gsa method=GET action="">
<table border=0 cellspacing=0 cellpadding=0 width="100%">
<tr>
<!-- Form input element for accepting search string from user with max limit set -->
<td width="50%"><input type=text name=q maxlength=2048 size="39" value=""></td>
<td class="padl8" width="50%" ><INPUT type="submit" name="qt_s" value="Search for
a group" class="bt" ></td>
</tr>
</table>
</form>
</td>
</tr>
<!-- Table for holding the 4 sections "Arts", "Science", "Computers" and "Health" -->
<tr>
<td style="align:left">
<table>
<tr>
<td valign=top><img src="Pics/Arts_Ent.JPG" width="42" height="42" ></td>
<td valign=top align=left>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td class="padb3"><b>Arts and Entertainment</b></td></tr>
<tr><td class="padb3"><a href="javascript:;" title="Arts and
Entertainment">...crafts.metalworking</a></td></tr>
<tr><td class="padb3"><a href="javascript:;" title="Safe Havens">Safe
Havens</a></td></tr>
</table>
</td>
<td class="padl10" > </td>
<td valign=top><img src="Pics/Sci.JPG" width="42" height="42" ></td>
<td valign=top align=left>
33
<table border=0 cellspacing=0 cellpadding=0>
<tr><td class="padb3" ><b>Sci/Tech</b></td></tr>
<tr><td class="padb3"><a href="javascript:;"
title="Epistemology">Epistemology</a></td></tr>
<tr><td class="padb3"><a href="javascript:;"
title="sci.astro.amateur">sci.astro.amateur</a></td></tr>
</table>
</td>
</tr>
<tr><td colspan=6> </td></tr>
<tr>
<td valign=top><img src="Pics/Computers.JPG" width="42" height="42" ></td>
<td valign=top align=left>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td class="padb3"><b>Computers</b></td></tr>
<tr><td class="padb3"><a href="javascript:;" title="...hardware.pc-
homebuilt">...hardware.pc-homebuilt</a></td></tr>
<tr><td class="padb3"><a href="javascript:;"
title="...java.programmer">...java.programmer</a></td></tr>
</table>
</td>
<td class="padl10"> </td>
<td valign=top><img src="Pics/Health.JPG" width="42" height="42"></td>
<td valign=top align=left>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td class="padb3"><b>Health</b></td></tr>
<tr><td class="padb3" ><a href="javascript:;"
title="...health.alternative">...health.alternative</a></td></tr>
<tr><td class="padb3" ><a href="javascript:;"
title="...fitness.weights">...fitness.weights</a></td></tr>
</table>
</td>
</tr>
<!-- To hold the bottom section -->
<tr><td colspan=6> </td></tr>
<tr>
<td valign="top" colspan=5><a
href="http://groups.google.com/groups/dir"><b>Browse all group
categories...</b></a></td>
</tr>
34
</table>
</td>
</tr>
</table>
</div>
</td>
<!-- To hold the right section " Popular Groups" -->
<td align=left style="padding-left:17px;">
<div id="GHP_popular_groups" name="GHP_popular_groups">
<table border=0 cellspacing=0 cellpadding=0 width="260px">
<tr><td class="padt3 padb3 padl7" bgcolor=#e8eef7 style="border-top: 1px solid
#7799dd;" nowrap><font size=+0 color="#000000"><b>Popular
groups</b></font></td></tr>
<tr><td style="padding:3px 12px 7px 7px">
<table cellpadding=0 cellspacing=0 border=0>
<tr><td class="padb5"><a href="javascript:;">alt.gossip.celebrities</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">rec.gambling.poker</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">Blogger Help Group</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">rec.food.cooking</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">Random Conversation</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">sci.math</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">sci.electronics.design</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">alt.sports.baseball.ny-
yankees</a></td></tr>
<tr><td class="padb5"><a href="javascript:;">Atheism vs Christianity</a></td></tr>
<tr><td ><a href="javascript:;">more »</a></td></tr>
</table>
</td></tr>
</table>
</div>
</td>
</tr>
</tr>
<tr><td class="padt10" colspan=2> </td></tr>
</table>
<!-- Table for holding the bottom links -->
<div style="border-bottom: 1px solid #7799dd;"></div>
<div class="padt10 padb10">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
35
<tr valign=center>
<td align="center" style="padding-right:1em;" class="fontsize2" >
<b><a style="color: #00c" target=_top
href="http://www.google.com/groups/create?lnk=gcf">Create a group</a></b><font
color="#333"> - </font>
<a style="color: #00c" target=_top href="http://www.google.com">Google
Home</a><font color="#333"> - </font>
<a style="color: #00c" target=_top
href="http://groups.google.com/intl/en/googlegroups/terms_of_service3.html">Ter
ms of Service</a><font color="#333"> - </font>
<a style="color: #00c" target=_top
href="http://groups.google.co.in/intl/en/googlegroups/privacy3.html">Privacy
Policy</a>
</td>
</tr>
<tr>
<td align="center" style="color: #333" class="fontsize1 padt5">©2007
Google</td>
</tr>
</table>
</div>
</table>
<!-- End of bottom table -->
</td></tr>
</table>
<!-- End of Outer table -->
</center>
</body>
<!-- End of Body -->
</html>
<!-- End of Html -->
---------------------------------------style.css---------------------------------------------
.hide { display: none; }
.nohide { display: block; }
.nohide-inline { display: inline; }
.hide_ie {}
36
.hide_ie { display: none }
img {border:0}
img {border-color:#0000a0}
input.ck {margin-left:-2px}
input.bt, button.bt {padding:0 .4em 0 .4em; width:auto; overflow:visible;}
.fixed_width { font-family: fixed-width, monospace; font-size: 90%}
a:link,.w,a.w:link,.w a:link {color:#0000cc}
a:visited {color:#551a8b}
a:active {color:#f00}
.inheritcolor a {color:inherit;}
.admin a { color: red }
.admin span { color: red }
.minmaxwie { width: 100%; min-width: 260px; max-width: 500px; }
* html .minmaxwie { width:expression(this.parentNode.clientWidth > 260 ?
(this.parentNode.clientWidth > 500 ? "500px" : "100%") : "260px"); }
.f,.f:link,.f a:link {color:#6f6f6f}
.fl:visited {color:#551a8b}
.fl:active {color:#f00}
.fl:link {color:#7777CC}
.z {display:none}
.on, .on:visited, .on:link {color:#0000cc}
.on:active {color:#f00000}
.don, .don:visited, .don:link { color:#0000bb}
.don:active {color:#f00000}
.q a:visited,.q a:link,.q a:active,.q {color:#0000cc}
.qo a:visited,.qo a:link,.qo a:active,.qo {color:#0000cc}
.mbody {margin-top:4px}
body,td,input,textarea,select {font-family:arial,sans-serif}
body {font-size:83%}
table {font-size:inherit}
input,textarea,select {font-size:100%}
form {margin:0}
.tick {font-family:webdings;text-decoration:none !important}
.qr {width:100%;padding:4px;font-family:arial,sans-serif}
.nu { text-decoration:none; }
.ohu:hover { text-decoration:underline; }
.gt { border-collapse:collapse; }
.gt td { padding: .3em 4px; border-right:1px solid #7799dd; }
.gm td { padding: .3em 1em .3em 0px;}
.bnk { border: 1px solid #7799dd;}
.bnk td { border-right-width:0px !important;}
37
.sel td.seltd {
padding: 4px 4px 4px 4px;
border:1px solid #7799dd;
border-right:none;
font-weight: bold;
}
.al,.al:link,.al:active,.al:visited { color: #990066; }
.dal,.dal:link,.dal:active,.dal:visited { color: #880059; }
.blk,.blk:link,.blk:active,.blk:visited,.blk:focus,.tlc a { text-
decoration:none;color:#000;outline:0;-moz-outline:0; }
.ucl, .ucl:link, .ucl:active, .ucl:visited { color: #7777cc; }
.gl,.gl:link,.gl:active,.gl:visited { color: #008000; }
.groupname:link,.groupname:visited,.groupname:active,.groupname:hover {
color:#008000; }
p.b { margin-bottom: 1.5em; margin-top:.3em; }
.adb, .adbrnav { border-left: 1px solid #e8eef7; }
.msgdate { color: #676767; }
.md { color: #555555; }
.st { margin-left:-1px; }
.nb { white-space:nowrap; }
.np { padding:0px; }
.p { font-weight:bold; }
.mo { margin: .5em 0 0 0 ; }
.oa { padding: 2px .5em; }
.sbox { margin-top:1em; margin-bottom:1em; }
button a:link {text-decoration:none;color:black; }
button a:hover {text-decoration:none;color:black; }
.b {font-weight:bold}
.fontsize0 {font-size:78%}
.fontsize1 {font-size:83%}
.fontsize2 {font-size:91%}
.fontsize_25 {font-size: 100%}
.fontsize3 {font-size:106%}
.fontsize4 {font-size:114%}
.fontsize5 {font-size:129%}
.fontsize6 {font-size:150%}
.fontsize7 {font-size:189%}
.cv {width:100%;}
.lk {color:#0000CC;text-decoration:underline;cursor:pointer;}
.nl {padding:5px 0 2px 5px;}
.tsh { border-top: 1px solid #7799dd;}
38
.tlsh { border-top: 1px solid #7799dd;}
.blsh { border-bottom: 1px solid #7799dd;}
.bsh { border-bottom: 1px solid #7799dd;}
.lsh, .tlsh, .blsh { border-left: 1px solid #7799dd;}
.lnav { left: 9px; width: 23.0ex; overflow: hidden; }
.lnavch { }
.lnavi { font-size:100%; }
.lnavim { margin-left: -2px; }
* html .lnav { left: 11px; }
.alertboxout {
margin: 5px 15px 0px 10px;
clear:left;
}
.alertboxin {
clear:left;
color: black;
background-color: #d9d9d9;
font-weight: bold;
text-align: center;
padding: 0px 15px 0px 15px;
position: relative;
margin: -1px 0px;
}
.vamdl { vertical-align : middle; }
.errbnr {
text-align: center;
border: 2px solid #FAD163;
background-color: #FFFFCC;
margin: 5px 15px 15px 15px;
padding: 7px 10px 7px 10px;
max-width: 650px;
width: expression(this.parentNode.offsetWidth > 650 ? '650px' : 'auto');
}
.thread_star {padding:0 0 4px 0}
* html .thread_star {padding:0 0 0 0}
.blurb_star {padding:0 0 0 2px}
* html .blurb_star {padding:2px 0 0 2px}
.msg #ftr_sep { background: rgb(238, 238, 238) none repeat scroll 0%; }
.msg .exh {margin: 0pt 16px; padding: 2px; background: rgb(238, 238, 238) none
repeat scroll 0%;}
.sel_cb_t {background: #c3d9ff none repeat scroll 0%;}
39
.msg .l {color:#0000CC;cursor:pointer;white-space:nowrap}
.msg .lc, .msg .lc:visited, .msg .lc:active, .msg .lc:link .msg .lc:focus
{color:#0000CC; outline:0; -moz-outline:0; }
.msg .h {cursor:pointer;}
.msg {display:block}
.msg_meta {width:100%}
.msg_meta td {white-space:nowrap}
.msg .rc {width:100%;table-layout:fixed}
.msg .rc div {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .author {font-weight:bold}
.msg .mb {padding:6px 8px 0px 14px}
.msg .mb .fixed_width { font-family: fixed-width, monospace; font-size: 100%}
.msg .cg {background:#eee}
.msg .cf {background:#c3d9ff}
.msg .cb2 #cft, .msg .cb2 #cfb {display:none}
.msg .ci {background:#e0ecff}
.msg .ctb {height:100%}
.msg .cpb2 .mchc { font-size: 91%;}
.msg .cd {padding:4px 5px 2px 10px;}
.msg .cd button {text-align:center;font-size:80%}
.msg .sm {position:absolute;display:none;margin:2px 0px;font-family:arial,sans-
serif;background-color:#c3d9ff;border:2px solid;border-color:#e8f1ff #9daecd
#9daecd #e8f1ff;z-index:1}
.tl {background:url(/groups/img/corner_tleft.gif) top left}
.bl {background:url(/groups/img/corner_bleft.gif) bottom left}
.tr {background:url(/groups/img/corner_tright.gif) top right}
.br {background:url(/groups/img/corner_bright.gif) bottom right}
.tl, .bl, .tr, .br, .gtl, .gbl {background-repeat:no-repeat;padding-
left:4px;width:4px}
.ctop {background:url(/groups/img/card_top.gif) top repeat-
x;padding:1px;width:100%}
.ctopd {background:url(/groups/img/card_top_dark.gif) top repeat-
x;padding:1px;width:100%}
.ctl {background:url(/groups/img/card_tleft.gif) top left}
.ctld {background:url(/groups/img/card_tleft_dark.gif) top left}
.cttl {background:url(/groups/img/card_ttleft.gif) top left}
.ctr {background:url(/groups/img/card_ttright2.gif) top right}
.str {background:url(/groups/img/card_ttright2.gif) top right}
.strdd {background:url(/groups/img/card_ttright2_dark_on_dark.gif) top right}
.strdw {background:url(/groups/img/card_ttright2_dark_on_white.gif) top right}
.strwd {background:url(/groups/img/card_ttright2_white_on_dark.gif) top right}
40
.stl {background:url(/groups/img/card_stleft.gif) top left}
.stldd {background:url(/groups/img/card_stleft_dark_on_dark.gif) top left}
.stldw {background:url(/groups/img/card_stleft_dark_on_white.gif) top left}
.stlwd {background:url(/groups/img/card_stleft_white_on_dark.gif) top left}
.stlwd, .stldd, .strwd, .strdd {background-color: #eee}
.sbl {background:url(/groups/img/card_sbleft.gif) bottom left}
.cbot {background-image:url(/groups/img/card_bot.gif);background-
position:bottom;background-repeat:repeat-x;padding:1px;width:100%}
.cbl {background-image:url(/groups/img/card_bleft.gif);background-
position:bottom left}
.cbr {background-image:url(/groups/img/card_bright2.gif);background-
position:bottom right}
.msg .cb {background-image:url(/groups/img/card_left.gif);background-
position:left;background-repeat:repeat-y;border-right:1px #e8e8e8 solid;}
.msg .cb2 {background-image:url(/groups/img/card_left2.gif);background-
position:left;background-repeat:repeat-y;border-right:1px #e8e8e8 solid;}
.ctl, .ctld, .cttl, .ctr, .str, .strdd, .strdw, .strwd, .stl, .stldd, .stldw, .stlwd, .cbl,
.cbr, .sbl {background-repeat:no-repeat}
.ctl, .ctld, .cttl, .cbl, .stl, .stldd, .stldw, .stlwd, .sbl, .pd10 {padding:0 10px 0 0}
.ctr, .str, .strdd, .strdw, .strwd, .cbr, .pd9 {padding:0 9px 0 0}
.pd8 {padding: 0 8px 0 0 }
.msg .phd {padding:6px 30px 5px 30px; text-align:center;}
.msg .ph {padding:3px 6px}
.msg .pokh {padding:0px 12px; font-weight:bold; font-size: 91%}
* html .stimg { padding: 1px 0px 4px 0px;}
.adbrnav { border: 0; }
.ghgrn {
color: #333333;
font-size: 189%;font-weight: bold;
}
.ghgrn .ln, .ghgrn .ln:visited, .ghgrn .ln:active, .ghgrn .ln:link {
color: #333333;
text-decoration: none;
}
.ghgrn .ln:hover {
text-decoration: underline;
}
.ghgrn .uln, .ghgrn .uln:visited, .ghgrn .uln:active, .ghgrn .uln:link {
color: blue;
}
.rnsecs {
41
padding-top: 10px;
}
.rnsecs .sec {
padding: 0px 10px 5px 10px;
}
.rnsecs .sec .secln,
.rnsecs .sec .secln:visited,
.rnsecs .sec .secln:link,
.rnsecs .sec .seclnact,
.rnsecs .sec .seclnact:visited,
.rnsecs .sec .seclnact:link {
color: #333333;
text-decoration: none;
font-size: 114%;font-weight: bold;
}
.rnsecs .sec .secln:hover,
.rnsecs .sec .seclnact:hover {
text-decoration: underline;
}
.rnsecs .sec .seclnd {
font-size: 114%;
color: #7777cc;
text-decoration: none;
font-weight: bold;
}
.rnsecs .sec .seclnlt,
.rnsecs .sec .seclnlt:visited,
.rnsecs .sec .seclnlt:link {
color: #333333;
}
.rnsecs .sec .seclnltd {
color: #7777cc;
}
.rnsecs .selsec {
border: 1px solid #7799dd;
border-left: 0px;
background-color: white;
padding: 5px 5px 5px 11px;
position: relative;
left: -1px;
margin-right: -1px;
42
margin-bottom: 4px;
}
.rnsecs .selsec .secln,
.rnsecs .selsec .secln:visited,
.rnsecs .selsec .secln:link {
color: black;
text-decoration: none;
font-size: 114%;font-weight: bold;
}
.rnsecs .selsec .secln:hover {
text-decoration: underline;
}
.rnsecs .selsec .seclnact,
.rnsecs .selsec .seclnact:visited,
.rnsecs .selsec .seclnact:link {
color:
#333333;
text-decoration: none;
font-size: 114%;font-weight: bold;
}
.rnsecs .selsec .seclnact:hover {
text-decoration: underline;
}
.rnsecs .selsubsec {
padding: 5px 5px 5px 26px;
background-color: white;
position: relative;
margin-left: -1px;
border-top: 1px solid
#bbccee
;
border-left: none;
}
.rnsecs .selsubsecact {
padding: 2px 5px 2px 25px;
}
.rnsecs .selsec .subsecln,
.rnsecs .selsec .subsecln:visited,
.rnsecs .selsec .subsecln:link {
color: black;
text-decoration: none;
43
font-size: 114%;font-weight: bold;
}
.rnsecs .selsec .subsecln:hover {
text-decoration: underline;
}
.rnsecs .selsec .subseclnact,
.rnsecs .selsec .subseclnact:visited,
.rnsecs .selsec .subseclnact:link {
color: #333333;
text-decoration: none;
font-size: 114%;
}
.rnsecs .selsec .subseclnact:hover {
text-decoration: underline;
}
.rnsecs .selsec .seclnd {
font-size: 114%;
color: ;
text-decoration: none;
font-weight: bold;
}
.rnsecs .selsec .seclnlt,
.rnsecs .selsec .seclnlt:visited,
.rnsecs .selsec .seclnlt:link {
font-size: 100%;
color: black;
text-decoration: none;
font-weight: bold;
}
.rnsecs .selsec .seclnlt:hover {
text-decoration: underline;
}
.rnsecs .selsec .seclnlt {
font-size: 100%;
color: #7777cc;
text-decoration: none;
font-weight: bold;
}
.rnsecs .selsec .seclnlt:hover {
text-decoration: underline;
}
44
.rnsecs .actlns {
font-size: 91%;
padding-top: 2px;
padding-bottom: 3px;
}
.rnsecs .actlns,
.rnsecs .sublevel {
padding-left: 10px;
}
.rnsecs #add_page_box {
font-size: 95%;
padding-top: 8px;
padding-bottom: 3px;
}
.rnimc {
padding-top: 5px;
padding-left: 10px;
}
.maincontheaderbox {
padding: 10px 10px 0px 10px;
}
.maincontheaderboxatt {
padding: 0px 10px 0px 10px;
}
.maincontbox {
padding: 10px 20px 10px 20px;
}
.maincontboxhead {
padding: 10px 20px 0px 20px;
}
.maincontboxfoot {
padding: 0px 20px 10px 20px;
}
.maincontboxatt {
padding: 0px 20px 0px 20px;
}
.maincontoutboxatt {
padding: 0px 20px 0px 10px;
}
.modtab td {
color:#333333;
45
padding-top:0px;
padding-bottom:4px;
}
.secttlbarwrap {
width: 100%;
}
.secttlbar {
background-color: #999999;
padding: 0px 10px 0px 10px;
}
.secttlbar .secttl {
color: #ffffff;
background-color: inherit;
font-size: 129%;font-weight: bold;
}
.secttlbar .secttl .ln, .secttlbar .secttl .ln:visited, .secttlbar .secttl .ln:active,
.secttlbar .secttl .ln:link {
color: #ffffff;
text-decoration: none;
}
.secttlbar .secttl .ln:hover {
text-decoration: underline;
}
.secttlbar .secmsg {
color: #ffffff;
font-size: 114%;
}
.secttlbar .frtxt,
.secttlbar .frtxt a,
.secttlbar .frtxt a:visited,
.secttlbar .frtxt a:active {
color: #ffffff;
}
.secttlbaroptpane {
border-top: 3px solid #999999;
background-color: #d9d9d9;
padding: 6px 6px 6px 10px;
}
.gtopbar {
padding: 1px 10px 1px 4px
}
46
.gtopbar td.maincell {
font-size:91%;
}
.topbar {
padding: 0px 0px 4px 4px
}
.topbar td.maincell {
font-size:100%;
}
.hspace5 {
padding-left : 5px;
display : inline;
}
.hspace {
padding-left : 10px;
display : inline;
}
.vspace {
padding-top : 10px;
}
img.icon32 {
height: 32px;
width: 32px;
}
img.icon24 {
height: 24px;
width: 24px;
}
img.bigicon {
height: 50px;
width: 50px;
}
.hsep {
margin-top : 3px;
margin-bottom : 3px;
border-bottom : 1px solid #7799dd;
}
.grdk {
color: #707070
}
.grlt {
47
color: #999999
}
.grltl, .grltl:link, .grltl:active, .grltl:visited {
color: #7777cc
}
.uit {
color: #707070;
font-size:91%;
}
.uitl, .uitl:link, .uitl:active, .uitl:visited {
color: #7777cc;
font-size:91%;
}
.msghk, .msghv {
font-size:106%;
color: #555;
}
.msghk {
font-weight: normal;
}
.msghv a, .msghv a:link, .msghv a:active, .msghv a:visited {
color: #7777cc;
}
.tr_pseudo-link {
color: #0000cc;
text-decoration: underline;
cursor: pointer;
}
.thrdisp_hdr {
background-color: #c3d9ff;
padding: 4px 4px 4px 4px;
}
.commentsdisp {
padding-top: 5px;
}
.ac-renderer {
border: 1px solid #666;
background: #E0ECFF;
color: #00C;
margin: 0px 0px;
padding: 0px 0px 1px 0px;
48
z-index: 10;
position: absolute;
}
.ac-renderer div {
margin: 2px; cursor: pointer; padding: 0px 10px;
}
.ac-renderer div b {
color: #00F;
}
.ac-renderer div.active {
background: #C3D9FF;
}
.algnl { text-align: left; }
.algnr { text-align: right; }
.overflow-hide { overflow: hidden; }
.nowrap { white-space: nowrap; }
.wdthauto { width: auto; }
.wdth100 { width: 100%; }
.wdth0 { width: 0; }
.hghtauto { height: auto; }
.hght100 { height: 100%; }
.hght0 { height: 0; }
.lf { float: left; }
.rf { float : right; }
.clear { clear : both; }
.padall0 { padding: 0; }
.mrgall0 { margin: 0; }
.padall1 { padding: 1px; }
.mrgall1 { margin: 1px; }
.padall2 { padding: 2px; }
.mrgall2 { margin: 2px; }
.padall3 { padding: 3px; }
.mrgall3 { margin: 3px; }
.padall4 { padding: 4px; }
.mrgall4 { margin: 4px; }
.padall5 { padding: 5px; }
.mrgall5 { margin: 5px; }
.padall6 { padding: 6px; }
.mrgall6 { margin: 6px; }
.padall7 { padding: 7px; }
.mrgall7 { margin: 7px; }
49
.padall8 { padding: 8px; }
.mrgall8 { margin: 8px; }
.padall9 { padding: 9px; }
.mrgall9 { margin: 9px; }
.padall10 { padding: 10px; }
.mrgall10 { margin: 10px; }
.padt1ex { padding-top: 1ex; }
.padt0 { padding-top: 0; }
.mrgt0 { margin-top: 0; }
.padt1 { padding-top: 1px; }
.mrgt1 { margin-top: 1px; }
.padt2 { padding-top: 2px; }
.mrgt2 { margin-top: 2px; }
.padt3 { padding-top: 3px; }
.mrgt3 { margin-top: 3px; }
.padt4 { padding-top: 4px; }
.mrgt4 { margin-top: 4px; }
.padt5 { padding-top: 5px; }
.mrgt5 { margin-top: 5px; }
.padt6 { padding-top: 6px; }
.mrgt6 { margin-top: 6px; }
.padt7 { padding-top: 7px; }
.mrgt7 { margin-top: 7px; }
.padt8 { padding-top: 8px; }
.mrgt8 { margin-top: 8px; }
.padt9 { padding-top: 9px; }
.mrgt9 { margin-top: 9px; }
.padt10 { padding-top: 10px; }
.mrgt10 { margin-top: 10px; }
.padb1ex { padding-bottom: 1ex; }
.padb0 { padding-bottom: 0; }
.mrgb0 { margin-bottom: 0; }
.padb1 { padding-bottom: 1px; }
.mrgb1 { margin-bottom: 1px; }
.padb2 { padding-bottom: 2px; }
.mrgb2 { margin-bottom: 2px; }
.padb3 { padding-bottom: 3px; }
.mrgb3 { margin-bottom: 3px; }
.padb4 { padding-bottom: 4px; }
.mrgb4 { margin-bottom: 4px; }
.padb5 { padding-bottom: 5px; }
50
.mrgb5 { margin-bottom: 5px; }
.padb6 { padding-bottom: 6px; }
.mrgb6 { margin-bottom: 6px; }
.padb7 { padding-bottom: 7px; }
.mrgb7 { margin-bottom: 7px; }
.padb8 { padding-bottom: 8px; }
.mrgb8 { margin-bottom: 8px; }
.padb9 { padding-bottom: 9px; }
.mrgb9 { margin-bottom: 9px; }
.padb10 { padding-bottom: 10px; }
.mrgb10 { margin-bottom: 10px; }
.padl1ex { padding-left: 1ex; }
.padl0 { padding-left: 0; }
.mrgl0 { margin-left: 0; }
.padl1 { padding-left: 1px; }
.mrgl1 { margin-left: 1px; }
.padl2 { padding-left: 2px; }
.mrgl2 { margin-left: 2px; }
.padl3 { padding-left: 3px; }
.mrgl3 { margin-left: 3px; }
.padl4 { padding-left: 4px; }
.mrgl4 { margin-left: 4px; }
.padl5 { padding-left: 5px; }
.mrgl5 { margin-left: 5px; }
.padl6 { padding-left: 6px; }
.mrgl6 { margin-left: 6px; }
.padl7 { padding-left: 7px; }
.mrgl7 { margin-left: 7px; }
.padl8 { padding-left: 8px; }
.mrgl8 { margin-left: 8px; }
.padl9 { padding-left: 9px; }
.mrgl9 { margin-left: 9px; }
.padl10 { padding-left: 10px; }
.mrgl10 { margin-left: 10px; }
.padr1ex { padding-right: 1ex; }
.padr0 { padding-right: 0; }
.mrgr0 { margin-right: 0; }
.padr1 { padding-right: 1px; }
.mrgr1 { margin-right: 1px; }
.padr2 { padding-right: 2px; }
.mrgr2 { margin-right: 2px; }
51
.padr3 { padding-right: 3px; }
.mrgr3 { margin-right: 3px; }
.padr4 { padding-right: 4px; }
.mrgr4 { margin-right: 4px; }
.padr5 { padding-right: 5px; }
.mrgr5 { margin-right: 5px; }
.padr6 { padding-right: 6px; }
.mrgr6 { margin-right: 6px; }
.padr7 { padding-right: 7px; }
.mrgr7 { margin-right: 7px; }
.padr8 { padding-right: 8px; }
.mrgr8 { margin-right: 8px; }
.padr9 { padding-right: 9px; }
.mrgr9 { margin-right: 9px; }
.padr10 { padding-right: 10px; }
.mrgr10 { margin-right: 10px; }
-------------------------------------------Images in Pics directory ---------------------------
Arts_Ent.jpg:
Computers.jpg:
Create.jpg :
Custom.jpg:
52
discuss.jpg:
groups_medium.jpg:
Health.jpg:
Mm_spacer.jpg:
Roundedcorners1.jpg:
Sci.jpg:
--------------------------------------------------------------------------------------------------
53
Results:
Evaluator’s Comments if any:
