/*//////////////////////////////////////////////////////////////////////////////
// <file
//   repository_path  = "$Source: /pub/cvsprojects/nucleo/web/home/meta/css/screen.css,v $"
//   revision         = "$Revision: 1.7 $"
//   date             = "$Date: 2008/05/21 11:33:58 $"
//   tag              = "$Name:  $"
//   template_version = "cp_template.0.12"
// >
//
// <license>
//   Copyright (c) 2005 Clemson University.
//
//   This file is part of the Webnucleo Website.
//
//   The Webnucleo Website is free software;
//   you can redistribute it and/or modify
//   it under the terms of the GNU General Public License as published by
//   the Free Software Foundation; either version 2 of the License, or
//   (at your option) any later version.
//
//   The Webnucleo Website is distributed in the
//   hope that it will be useful,
//   but WITHOUT ANY WARRANTY; without even the implied warranty of
//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//   GNU General Public License for more details.
//
//   You should have received a copy of the GNU General Public License
//   along with the Webnucleo Website; if not, write to the Free Software
//   Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
// </license>
//
//   <description>
//     <abstract>
//       The webnucleo website style sheet.  
//     </abstract>
//     <keywords>
//       style sheet
//     </keywords>
//   </description>
//
//   <authors>
//     <current>
//       <author userid="mbradle" start_date="2007/08/21" />
//     </current>
//     <previous>
//       <author userid="jsbrown" start_date="2005/01/27" />
//     </previous>
//   </authors>
//
//   <compatibility>
//     Browser: IE: Version: 6.0.2900.2180.xpsp_sp2_rtm.040803-2158;
//     Note: IE does not render offsite resource links with proper image
//     beside the link;
//     Browser: Mozilla Firefox 1.0.6;
//   </compatibility>
//
// </file>
//////////////////////////////////////////////////////////////////////////////*/

/*##############################################################################
// HTML tag styles
//############################################################################*/

html{
  background-image: url(../images/space_background.gif);
  background-color: #cccccc;
}

body{
  font-family: Arial,sans-serif;
  color: #333333; 
  line-height: 1.166;	
  margin: 0px;
  padding: 0px;
  background-image: url(../images/space_background.gif);
  background-color: #cccccc;
}

/*##############################################################################
// Hyperline and anchor tag styles
//############################################################################*/

a:link, a:visited{
  color: #005FA9;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

a.ExternalLink {
  font-weight: bold;
}
a.ExternalLink:after {
  content: url( "/home/meta/images/offsite.png" );
}

/*##############################################################################
// Header tag styles
//############################################################################*/

h1{
  font: bold 120% Arial,sans-serif;
  color: #334d55;
  margin: 0px;
  padding: 0px;
}

h2{
  font: bold 114% Arial,sans-serif;
  color: #006699;
  margin: 0px;
  padding: 0px;
}

h3{
  font: bold 100% Arial,sans-serif;
  color: #334d55;
  margin: 0px;
  padding: 0px;
}

h4{
  font: 100% Arial,sans-serif;
  color: #333333;
  margin: 0px;
  padding: 0px;
}

h5{
  font: 100% Arial,sans-serif;
  color: #334d55;
  margin: 0px;
  padding: 0px;
}


/*##############################################################################
// List tag styles
//############################################################################*/

ul{
  list-style-type: disc; 
}

ul ul{
  list-style-type: disc;
}

ul ul ul{
  list-style-type: disc;
}

/*##############################################################################
// Form and related tag styles.
//############################################################################*/

form {
  margin: 0;
  padding: 0;
}

label{
  font: bold 1em Arial,sans-serif;
  color: #334d55;
}
				
input{
  font-family: Arial,sans-serif;
}

/*##############################################################################
// Layout Divs
//############################################################################*/

#pagecell1{
  position:absolute;
  top: 112px;
  left: 2%;
  right: 2%;
  width:95.6%;
  background-color: #ffffff;
}

#tl {
  position:absolute;
  top: -1px;
  left: -1px;
  margin: 0px;
  padding: 0px;
  z-index: 100;
}


#tr {
  position:absolute;
  top: -1px;
  right: -1px;
  margin: 0px;
  padding: 0px;
  z-index: 100;
}

#masthead{
  position: absolute;
  top: 0px;
  left: 2%;
  right: 2%;
  width:95.6%;
}

#pageNav{
  float: left;
  width:178px;
  padding: 0px;
  background-color: white;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  font: small Verdana,sans-serif;
}

#content{
  padding: 0px 10px 0px 0px;
  margin:0px 0px 0px 178px;
  border-left: 1px solid #ccd2d2;
}

/*##############################################################################
// Component Divs
//############################################################################*/

#siteName{
  margin: 0px;
  padding: 16px 0px 8px 0px;
  color: #ffffff;
  font-weight: normal;
}

/*##############################################################################
// Utility styles
//############################################################################*/

#utility{
  font: 75% Verdana,sans-serif;
  position: absolute;
  top: 16px;
  right: 0px;
  color: #919999;
}

#utility a{
  color: #ffffff;
}

#utility a:hover{
  text-decoration: underline;
}

/*##############################################################################
// pageName styles
//############################################################################*/

#pageName{
  padding: 0px 0px 14px 10px;
  margin: 0px;
  border-bottom:1px solid #ccd2d2;
}

#pageName h2{
  font: bold 175% Arial,sans-serif;
  color: #000000;
  margin:0px;
  padding: 0px;
}

#pageName img{
  position: absolute;
  top: 0px;
  right: 6px;
  padding: 0px;
  margin: 0px;
}

/*##############################################################################
// globalNav styles
//############################################################################*/

#globalNav{
  position: relative;
  width: 100%;
  min-width: 640px;
  height: 32px;
  color: #cccccc;
  padding: 0px;
  margin: 0px;
  background-image:  url("/home/meta/images/glbnav_background.gif");
}

#globalNav img{
  margin-bottom: -4px;
}

#gnl {
  position: absolute;
  top: 0px;
  left:0px;
}

#gnr {
  position: absolute;
  top: 0px;
  right:0px;
}

#globalLink{
  position: absolute;
  top: 6px;
  height: 22px;
  min-width: 640px;
  padding: 0px;
  margin: 0px;
  left: 10px;
  z-index: 100;
}


a.glink, a.glink:visited{
  font-size: 13px;
  color: #000000;
  font-weight: bold;
  margin: 0px;
  padding: 2px 5px 4px 5px;
  border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  background-image:  url("/home/meta/images/glblnav_selected.gif");
  text-decoration: none;
}

.skipLinks {display: none;}

/*##############################################################################
// subglobalNav styles
//############################################################################*/

.subglobalNav{
  position: absolute;
  top: 84px;
  left: 0px;
  /*width: 100%;*/
  min-width: 640px;
  height: 20px;
  padding: 0px 0px 0px 10px;
  visibility: hidden;
  color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
  font-size: 80%;
  color: #ffffff;
}

.subglobalNav a:hover{
  color: #cccccc;
}

/*##############################################################################
// search styles
//############################################################################*/

#search{
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 101;
  font-weight: bold;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
  font-size: 80%;
  font-weight: bold;
}

#search a:hover{
  margin: 0px;
}


/*##############################################################################
// breadCrumb styles
//############################################################################*/

#breadCrumb{
  padding: 5px 0px 5px 10px;
  font: small Verdana,sans-serif;
  color: black;
}

#breadCrumb a{
  color: #005FA9;
}

#breadCrumb a:hover{
  color: #005FA9;
  text-decoration: underline;
}


/*##############################################################################
// feature styles
//############################################################################*/

.feature{
  padding: 0px 0px 10px 10px;
  font-size: 80%;
}

/*html>body .feature {height: auto;} */
/*body .feature {height: auto;} */

.feature h3{
  font: bold 175% Arial,sans-serif;
  color: #000000;
  padding: 30px 0px 5px 0px;
}

.feature img.feature {
  float: left;
  padding: 0px 10px 0px 0px;
}

.feature img.right_feature {
  float: right;
  padding: 0px 10px 0px 0px;
}

/*##############################################################################
// story styles
//############################################################################*/

.story {
  padding: 10px 0px 0px 10px;
  font-size: 80%;
}

.story h3{
  font: bold 125% Arial,sans-serif;
  color: #000000;
}

.story p {
  padding: 0px 0px 0px 0px;
}

.story a.capsule{
  font: bold 1em Arial,sans-serif;
  color: #005FA9;
  display:block;
  padding-bottom: 5px;
}

.story a.capsule:hover{
  text-decoration: underline;
}


/*##############################################################################
// siteInfo styles
//############################################################################*/

#siteInfo{
  clear: both;
  border-top: 1px solid #cccccc;
  padding: 10px 10px 10px 10px;
  margin-top: 0px;
}

#siteInfo img{
  padding: 4px 4px 4px 0px;
  vertical-align: middle;
}

#siteInfo td{
  font-size: 13px; 
}

/*##############################################################################
// sectionLinks styles
//############################################################################*/

#sectionLinks{
  margin: 0px;
  padding: 0px;
}

#sectionLinks h3{
  padding: 10px 0px 2px 10px;
  border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
  display: block;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #cccccc;
  background-image:  url("/home/meta/images/bg_nav.jpg");
  font-weight: bold;
  font-size: 13px;
  padding: 3px 0px 3px 10px;
  color: #21536A;
}

#sectionLinks a:hover{
  border-top: 1px solid #cccccc;
  background-color: #DDEEFF;
  background-image: none;
  font-weight: bold;
  text-decoration: none;
}

/*##############################################################################
// relatedLinks styles
//############################################################################*/

.relatedLinks{
  margin: 0px;
  padding: 0px 0px 10px 10px;
  border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
  padding: 10px 0px 2px 0px;
  font-size: 15px;
}

.relatedLinks a{
  display: block; 
  font-size: 13px;
}

/*##############################################################################
// advert styles
//############################################################################*/

#advert{
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

#advert img{
  display: block;
  margin: 0 auto;
  text-align: center;
}

#welcome{
 font: bold 120% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

/*##############################################################################
// Code sample styles.
//############################################################################*/

pre {
  font-size: 10pt;
  width: 90%;
  overflow: auto;
}

span.MetaText {
  color: #000088;
  font-weight: bold;
}

/*##############################################################################
// Table to present data.
//############################################################################*/

table.DataTable {
  border: outset #d0d0d0 2px;
}

table.DataTable thead {
  font-weight: bold;
}

table.DataTable td {
  border: inset #d0d0d0 2px;
  padding: 7px;
}

/*##############################################################################
// Table to contain lists.
//############################################################################*/

table.ListContainer thead {
  font-weight: bold;
}

table.ListContainer td {
  font-size: 15px;
  
}

/*##############################################################################
// Tooltip styles.  For use in anchor tag.
//############################################################################*/

a.info{
  position:relative; /*this is the key*/
  z-index:24;
}

a.info:hover{
  z-index:25;
  text-decoration: none;
}

a.info span{
  display: none
}

a.info:hover span{
  display:block;
  position:absolute;
  top:1em; left:7em; width:25em;
  border:1px solid #0cf;
  background-color:#FFCC99; color:#000;
  text-align: center;
}